From 4914eba9ef62675e1dea9bf85e84f9913b0cfb08 Mon Sep 17 00:00:00 2001 From: value <z1292839451@163.com> Date: 星期四, 24 八月 2023 09:10:36 +0800 Subject: [PATCH] 新增委托二维码功能 --- src/views/inspectionManagement/commissionInspection/index.vue | 685 +++++++++++++++++++++++++++----------------------------- 1 files changed, 332 insertions(+), 353 deletions(-) diff --git a/src/views/inspectionManagement/commissionInspection/index.vue b/src/views/inspectionManagement/commissionInspection/index.vue index 0cb885e..a10086e 100644 --- a/src/views/inspectionManagement/commissionInspection/index.vue +++ b/src/views/inspectionManagement/commissionInspection/index.vue @@ -1,364 +1,343 @@ <template> - <div> - <div v-if="!showDetail"> - <div class="content-main"> - <div class="top-bar"> - <el-form ref="form" :inline="true" :model="searchData"> - <el-form-item label="濮旀墭缂栧彿:" class="sermargin"> - <el-input - v-model="searchData.code" - class="input-form" - placeholder="璇疯緭鍏�" - > - </el-input> - </el-form-item> - <el-form-item label="鏍峰搧鍚嶇О:" class="sermargin"> - <el-input - v-model="searchData.name" - class="input-form" - placeholder="璇疯緭鍏�" - > - </el-input> - </el-form-item> - <el-form-item label="濮旀墭鍗曚綅:" style="margin-right: 20px;"> - <el-select v-model="searchData.department" placeholder="鍏ㄩ儴"> - <el-option - v-for="item in options" - :key="item.value" - :label="item.label" - :value="item.value"> - </el-option> - </el-select> - </el-form-item> - <el-form-item> - <el-button type="primary" @click="search">鏌ヨ</el-button> - <el-button type="primary" plain @click="reset">閲嶇疆</el-button> - </el-form-item> - </el-form> - <el-form> - <el-button class="rightBtn" type="primary" @click="goToaddCommision">鏂板濮旀墭</el-button> - </el-form> - </div> - <div class="library-table"> - <div class="table-header"> - <div class="search-bar"> - <el-radio-group v-model="radioValue" @change="radioclick"> - <el-radio-button v-for="item in conditionsOptions" :key="item.value" :label="item.value"> - {{ item.label }} - </el-radio-button> - </el-radio-group> - </div> - <div class="generateInsp"> - <el-button type="primary" size="mini" icon="el-icon-document" style="background-color: rgb(1, 102, 226);">鐢熸垚鎶ユ鍗�</el-button> - </div> - </div> - <div class="table-box"> - <el-table - ref="commisionTable" - :max-height="800" - :cell-style="{textAlign: 'center'}" - :header-cell-style="{border:'0px',background:'#f5f7fa',color:'#606266',boxShadow: 'inset 0 1px 0 #ebeef5',textAlign: 'center'}" - :data="commisionTable" - style="width: 100%" - > - <el-table-column - type="selection" - min-width="10%" - /> - <el-table-column - type="index" - label="搴忓彿" - min-width="10%" - /> - <el-table-column - prop="entrust_coding" - label="濮旀墭缂栧彿" - min-width="10%" - /> - <el-table-column - prop="entrusted" - label="濮旀墭鍗曚綅" - min-width="12%" - /> - <el-table-column - prop="samples_number" - label="鏍峰搧缂栧彿" - min-width="8%" - /> - <el-table-column - prop="sample_name" - label="鏍峰搧鍚嶇О" - min-width="8%" - /> - <el-table-column - prop="specifications_models" - label="瑙勬牸鍨嬪彿" - min-width="12%" - /> - <el-table-column - prop="dateSurvey" - label="閫佽揪鏃堕棿" - min-width="8%" - /> - <el-table-column - prop="completionDeadline" - label="瀹屾垚鏈熼檺" - min-width="8%" - /> - <el-table-column - prop="contacts" - label="濮旀墭缂栧埗浜�" - min-width="8%" - /> - <el-table-column - prop="inspectionTime" - label="妫�楠屾棩鏈�" - min-width="8%" - /> - <el-table-column - prop="inspection_status" - label="鐘舵��" - min-width="8%"> - <template slot-scope="scope"> - <div v-if="scope.row.inspection_status === 1"> - <span style="color: green;">宸叉娴�</span> - </div> - <div v-else> - <span style="color: red;">寰呮娴�</span> - </div> - </template> - </el-table-column> - <el-table-column - label="鎿嶄綔" - min-width="8%" - > - <template slot-scope="scope"> - <el-button type="text" size="small" @click="handleClick(scope.row)">鍒犻櫎</el-button> - </template> - </el-table-column> - </el-table> - <!-- 鍒嗛〉鍣� --> - <div> - <el-pagination - @size-change="handleSizeChange" - @current-change="handleCurrentChange" - :current-page="currentPage" - :page-sizes="[5, 10, 20]" - :page-size="pageSize" - layout="total, sizes, prev, pager, next, jumper" - :total="total"> - </el-pagination> - </div> - </div> - </div> - </div> - </div> - <div v-else> - <router-view /> - </div> - </div> + <div> + <div v-if="!showDetail"> + <div class="content-main"> + <div class="top-bar"> + <el-form ref="form" :inline="true" :model="searchData"> + <el-form-item label="濮旀墭缂栧彿:" class="sermargin"> + <el-input v-model="searchData.code" class="input-form" placeholder="璇疯緭鍏�"> + </el-input> + </el-form-item> + <el-form-item label="鏍峰搧鍚嶇О:" class="sermargin"> + <el-input v-model="searchData.name" class="input-form" placeholder="璇疯緭鍏�"> + </el-input> + </el-form-item> + <el-form-item label="濮旀墭鍗曚綅:" style="margin-right: 20px;"> + <el-select v-model="searchData.department" placeholder="鍏ㄩ儴"> + <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> + </el-option> + </el-select> + </el-form-item> + <el-form-item> + <el-button type="primary" @click="search">鏌ヨ</el-button> + <el-button type="primary" plain @click="reset">閲嶇疆</el-button> + </el-form-item> + </el-form> + <el-form> + <el-popover placement="left" width="130" trigger="click"> + <div class="vue_qr_div"> + <span style="color: #0078ff;">鎵弿浜岀淮鐮�<br />鑾峰彇濮旀墭鍗�</span> + <vue-qr :text="viewId" :size="100" :margin="0" style="margin-top: 10px;"> + </vue-qr> + </div> + <el-button slot="reference" class="rightBtn" type="primary" @click="goToaddCommision">鏂板濮旀墭</el-button> + </el-popover> + </el-form> + </div> + <div class="library-table"> + <div class="table-header"> + <div class="search-bar"> + <el-radio-group v-model="radioValue" @change="radioclick"> + <el-radio-button v-for="item in conditionsOptions" :key="item.value" :label="item.value"> + {{ item.label }} + </el-radio-button> + </el-radio-group> + </div> + <div class="generateInsp"> + <el-button type="primary" size="mini" icon="el-icon-document" + style="background-color: rgb(1, 102, 226);">鐢熸垚鎶ユ鍗�</el-button> + </div> + </div> + <div class="table-box"> + <el-table ref="commisionTable" :max-height="800" :cell-style="{textAlign: 'center'}" + :header-cell-style="{border:'0px',background:'#f5f7fa',color:'#606266',boxShadow: 'inset 0 1px 0 #ebeef5',textAlign: 'center'}" + :data="commisionTable" style="width: 100%"> + <el-table-column type="selection" min-width="10%" /> + <el-table-column type="index" label="搴忓彿" min-width="10%" /> + <el-table-column prop="entrust_coding" label="濮旀墭缂栧彿" min-width="10%" /> + <el-table-column prop="entrusted" label="濮旀墭鍗曚綅" min-width="12%" /> + <el-table-column prop="samples_number" label="鏍峰搧缂栧彿" min-width="8%" /> + <el-table-column prop="sample_name" label="鏍峰搧鍚嶇О" min-width="8%" /> + <el-table-column prop="specifications_models" label="瑙勬牸鍨嬪彿" min-width="12%" /> + <el-table-column prop="dateSurvey" label="閫佽揪鏃堕棿" min-width="8%" /> + <el-table-column prop="completionDeadline" label="瀹屾垚鏈熼檺" min-width="8%" /> + <el-table-column prop="contacts" label="濮旀墭缂栧埗浜�" min-width="8%" /> + <el-table-column prop="inspectionTime" label="妫�楠屾棩鏈�" min-width="8%" /> + <el-table-column prop="inspection_status" label="鐘舵��" min-width="8%"> + <template slot-scope="scope"> + <div v-if="scope.row.inspection_status === 1"> + <span style="color: green;">宸叉娴�</span> + </div> + <div v-else> + <span style="color: red;">寰呮娴�</span> + </div> + </template> + </el-table-column> + <el-table-column label="鎿嶄綔" min-width="8%"> + <template slot-scope="scope"> + <el-button type="text" size="small" @click="handleClick(scope.row)">鍒犻櫎</el-button> + </template> + </el-table-column> + </el-table> + <!-- 鍒嗛〉鍣� --> + <div> + <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" + :current-page="currentPage" :page-sizes="[5, 10, 20]" :page-size="pageSize" + layout="total, sizes, prev, pager, next, jumper" :total="total"> + </el-pagination> + </div> + </div> + </div> + </div> + </div> + <div v-else> + <router-view /> + </div> + </div> </template> <script> -import { getCommisionList } from '@/api/inspection/commisioninspection' -export default { - data() { - return { - form: [], - searchData: { - code: '', - name: '', - department: '' - }, - options: [{ - value: '1', - label: '閮ㄩ棬1' - }], - radioValue: 0, - commisionTable: [{ - specifications_models: "GGXH-AAAAA", - inspectionTime: "2023-08-03", - id: 2, - samples_number: 0, - dateSurvey: "2023-08-03", - entrusted: "闃块噷宸村反", - completionDeadline: "2023-08-03", - contacts: "灏忛粦", - entrust_coding: "SL20230803000003", - sample_name: "鍙戝姩鏈�", - inspection_status: 1 - }], - conditionsOptions: [ - { - label: '鍏ㄩ儴', - value: 0 - }, - { - label: '宸叉楠�', - value: 1 - }, - { - label: '寰呮楠�', - value: 2 - } - ], - currentPage: 1, - pageSize: 5, - total: 100, - showDetail: false - } - }, - created() { - this.getCommisionList() - }, - updated() { - if (this.$router.currentRoute.name === 'AddCommision') { - // console.log(this.$router.currentRoute.name) - this.showDetail = true - } - }, - methods: { - async getCommisionList(){ - const res = await getCommisionList({pageNo:this.currentPage, pageSize:this.pageSize}) - this.commisionTable = res.data.row - this.total = res.data.total - // console.log(res) - // 鑾峰彇鎵�鏈夌殑濮旀墭鍗曚綅鍚嶇О - const allDepartmentNames = [...new Set(this.commisionTable.map(item => item.entrusted))] - // 灏哸llDepartmentNames杞崲涓簅ptions闇�瑕佺殑鏍煎紡 - this.options = allDepartmentNames.map(name => ({ value: name, label: name })) + import { + getCommisionList, + getViewUUID, + selectViewUUID + } from '@/api/inspection/commisioninspection' + import vueQr from 'vue-qr' + export default { + components: { + vueQr + }, + data() { + return { + form: [], + searchData: { + code: '', + name: '', + department: '' + }, + options: [{ + value: '1', + label: '閮ㄩ棬1' + }], + radioValue: 0, + commisionTable: [{ + specifications_models: "GGXH-AAAAA", + inspectionTime: "2023-08-03", + id: 2, + samples_number: 0, + dateSurvey: "2023-08-03", + entrusted: "闃块噷宸村反", + completionDeadline: "2023-08-03", + contacts: "灏忛粦", + entrust_coding: "SL20230803000003", + sample_name: "鍙戝姩鏈�", + inspection_status: 1 + }], + conditionsOptions: [{ + label: '鍏ㄩ儴', + value: 0 + }, + { + label: '宸叉楠�', + value: 1 + }, + { + label: '寰呮楠�', + value: 2 + } + ], + currentPage: 1, + pageSize: 5, + total: 100, + showDetail: false, + day: 1, + viewId: '' + } + }, + created() { + this.getCommisionList() + }, + updated() { + if (this.$router.currentRoute.name === 'AddCommision') { + // console.log(this.$router.currentRoute.name) + this.showDetail = true + } + }, + methods: { + async getCommisionList() { + const res = await getCommisionList({ + pageNo: this.currentPage, + pageSize: this.pageSize + }) + this.commisionTable = res.data.row + this.total = res.data.total + // console.log(res) + // 鑾峰彇鎵�鏈夌殑濮旀墭鍗曚綅鍚嶇О + const allDepartmentNames = [...new Set(this.commisionTable.map(item => item.entrusted))] + // 灏哸llDepartmentNames杞崲涓簅ptions闇�瑕佺殑鏍煎紡 + this.options = allDepartmentNames.map(name => ({ + value: name, + label: name + })) - }, - // 鏌ヨ鏂规硶 - async search() { - // 灏嗘悳绱㈡潯浠朵綔涓哄弬鏁颁紶閫掔粰getCommisionList鏂规硶 - let res - if(this.radioValue === 0){ - res = await getCommisionList({ - pageNo: this.currentPage, - pageSize: this.pageSize, - entrustCoding: this.searchData.code, - sampleName: this.searchData.name, - entrusted: this.searchData.department, - }) - }else{ - res = await getCommisionList({ - pageNo: this.currentPage, - pageSize: this.pageSize, - entrustCoding: this.searchData.code, - sampleName: this.searchData.name, - entrusted: this.searchData.department, - inspectionStatus: this.radioValue - }) - } - // console.log(res) - this.commisionTable = res.data.row - this.total = res.data.total - }, + }, + // 鏌ヨ鏂规硶 + async search() { + // 灏嗘悳绱㈡潯浠朵綔涓哄弬鏁颁紶閫掔粰getCommisionList鏂规硶 + let res + if (this.radioValue === 0) { + res = await getCommisionList({ + pageNo: this.currentPage, + pageSize: this.pageSize, + entrustCoding: this.searchData.code, + sampleName: this.searchData.name, + entrusted: this.searchData.department, + }) + } else { + res = await getCommisionList({ + pageNo: this.currentPage, + pageSize: this.pageSize, + entrustCoding: this.searchData.code, + sampleName: this.searchData.name, + entrusted: this.searchData.department, + inspectionStatus: this.radioValue + }) + } + // console.log(res) + this.commisionTable = res.data.row + this.total = res.data.total + }, - // 閲嶇疆鏂规硶 - reset() { - // 閲嶇疆鎼滅储鏉′欢 - this.searchData.code = '' - this.searchData.name = '' - this.searchData.department = '' - this.radioValue = 0 - // 閲嶆柊鑾峰彇鏁版嵁 - this.getCommisionList() - }, - async radioclick(){ - // 澶勭悊鐐瑰嚮radio鐨勬椂闂� - console.log('radioValue',this.radioValue) - if(this.radioValue === 0){ - this.getCommisionList() - }else{ - const res = await getCommisionList({pageNo:this.currentPage, pageSize:this.pageSize, inspectionStatus: this.radioValue}) - // console.log(res) - this.commisionTable = res.data.row - this.total = res.data.total - } - - }, - // 姣忛〉鏉℃暟鏀瑰彉鏃惰Е鍙� 閫夋嫨涓�椤垫樉绀哄灏戣 - async handleSizeChange(val) { - // console.log(`姣忛〉 ${val} 鏉) - this.currentPage = 1 - this.pageSize = val - if(this.radioValue === 0){ - this.getCommisionList() - }else{ - const res = await getCommisionList({pageNo:this.currentPage, pageSize:this.pageSize, inspectionStatus: this.radioValue}) - this.commisionTable = res.data.row - this.total = res.data.total - } - }, - // 褰撳墠椤垫敼鍙樻椂瑙﹀彂 璺宠浆鍏朵粬椤� - async handleCurrentChange(val) { - // console.log(`褰撳墠椤�: ${val}`) - this.currentPage = val - if(this.radioValue === 0){ - this.getCommisionList() - }else{ - const res = await getCommisionList({pageNo:this.currentPage, pageSize:this.pageSize, inspectionStatus: this.radioValue}) - this.commisionTable = res.data.row - this.total = res.data.total - } - }, - goToaddCommision() { - this.$router.push('/inspectionManagement/commissionInspection/addCommision') - this.showDetail = true - } - } -} + // 閲嶇疆鏂规硶 + reset() { + // 閲嶇疆鎼滅储鏉′欢 + this.searchData.code = '' + this.searchData.name = '' + this.searchData.department = '' + this.radioValue = 0 + // 閲嶆柊鑾峰彇鏁版嵁 + this.getCommisionList() + }, + async radioclick() { + // 澶勭悊鐐瑰嚮radio鐨勬椂闂� + console.log('radioValue', this.radioValue) + if (this.radioValue === 0) { + this.getCommisionList() + } else { + const res = await getCommisionList({ + pageNo: this.currentPage, + pageSize: this.pageSize, + inspectionStatus: this.radioValue + }) + // console.log(res) + this.commisionTable = res.data.row + this.total = res.data.total + } + + }, + // 姣忛〉鏉℃暟鏀瑰彉鏃惰Е鍙� 閫夋嫨涓�椤垫樉绀哄灏戣 + async handleSizeChange(val) { + // console.log(`姣忛〉 ${val} 鏉) + this.currentPage = 1 + this.pageSize = val + if (this.radioValue === 0) { + this.getCommisionList() + } else { + const res = await getCommisionList({ + pageNo: this.currentPage, + pageSize: this.pageSize, + inspectionStatus: this.radioValue + }) + this.commisionTable = res.data.row + this.total = res.data.total + } + }, + // 褰撳墠椤垫敼鍙樻椂瑙﹀彂 璺宠浆鍏朵粬椤� + async handleCurrentChange(val) { + // console.log(`褰撳墠椤�: ${val}`) + this.currentPage = val + if (this.radioValue === 0) { + this.getCommisionList() + } else { + const res = await getCommisionList({ + pageNo: this.currentPage, + pageSize: this.pageSize, + inspectionStatus: this.radioValue + }) + this.commisionTable = res.data.row + this.total = res.data.total + } + }, + goToaddCommision() { + // this.$router.push('/inspectionManagement/commissionInspection/addCommision') + // this.showDetail = true + selectViewUUID({ + day: this.day + }).then(res => { + this.viewId = res.data + }) + } + } + } </script> <style scoped> + .top-bar { + margin: -25px -15px; + background: #fff; + display: flex; + justify-content: space-between; + padding: 5px 24px 0px 24px; -.top-bar{ - margin: -25px -15px; - background: #fff; - display: flex; - justify-content: space-between; - padding: 5px 24px 0px 24px; - .sermargin{ - margin-right: 60px; - } - } -.rightBtn{ - background-color: rgb(1, 102, 226); -} -.library-table{ - background-color: #fff; - flex: 1; - margin: 0px -15px; - margin-top: 40px; - display: flex; - flex-direction: column; - .table-header{ - padding: 20px; - display: flex; - justify-content: space-between; - .el-form-item{ - margin-bottom: 30px !important; - } - } - .table-box{ - padding: 0px 20px; - margin-top: 0px; - flex: 1; - background: #fff; - /* padding: 20px 20px 10px 20px; */ - display: flex; - flex-direction: column; - .el-table { - flex: 1; - } - >div:nth-child(2){ - display: flex; - justify-content: end; - margin: 10px 0; - } - } - } + .sermargin { + margin-right: 60px; + } + } -</style> + .rightBtn { + background-color: rgb(1, 102, 226); + } + + .library-table { + background-color: #fff; + flex: 1; + margin: 0px -15px; + margin-top: 40px; + display: flex; + flex-direction: column; + + .table-header { + padding: 20px; + display: flex; + justify-content: space-between; + + .el-form-item { + margin-bottom: 30px !important; + } + } + + .table-box { + padding: 0px 20px; + margin-top: 0px; + flex: 1; + background: #fff; + /* padding: 20px 20px 10px 20px; */ + display: flex; + flex-direction: column; + + .el-table { + flex: 1; + } + + >div:nth-child(2) { + display: flex; + justify-content: end; + margin: 10px 0; + } + } + } + + .vue_qr_div{ + text-align: center; + } +</style> \ No newline at end of file -- Gitblit v1.9.3