From 7e460156de73171f9660ce48f80703e79f8b478d Mon Sep 17 00:00:00 2001 From: Crunchy <3114200645@qq.com> Date: 星期六, 14 六月 2025 11:48:26 +0800 Subject: [PATCH] 初始化提交 --- src/views/add_operation/index.vue | 639 ++++++++++++++++++++++++++++++++++++++++++++------------- 1 files changed, 492 insertions(+), 147 deletions(-) diff --git a/src/views/add_operation/index.vue b/src/views/add_operation/index.vue index 5e02ce2..c7bc5f8 100644 --- a/src/views/add_operation/index.vue +++ b/src/views/add_operation/index.vue @@ -1,90 +1,164 @@ <template> <div class="addOperation"> <div class="addOperation-main"> - <!-- <el-form v-model="statusType" ref="queryForm" size="small" :inline="true" label-width="68px"> - <el-form-item label="鍏ュ簱鐘舵��"> - <el-radio-group v-model="inStatus"> - <el-radio-button label="鍏ㄩ儴"></el-radio-button> - <el-radio-button label="宸插叆搴�"></el-radio-button> - <el-radio-button label="宸插嚭搴�"></el-radio-button> - </el-radio-group> - </el-form-item> - <el-form-item label="鍏ュ簱绫诲瀷" prop="phonenumber"> - <el-radio-group v-model="inType"> - <el-radio-button label="鏉$爜鎵撳嵃"></el-radio-button> - </el-radio-group> - </el-form-item> - <el-form-item label="鏉$爜鎵撳嵃"> - <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">鏂板鏉$爜鎵撳嵃</el-button> - </el-form-item> - </el-form> --> - <el-row type="flex" align="middle" class="main-top"> - <el-col :span="2"><el-button type="primary">鏂板鍏ュ簱</el-button></el-col> - <el-col :span="20"> - <TableSearch></TableSearch> - </el-col> - <el-col :span="2"><el-button>鏉$爜鎵撳嵃</el-button></el-col> - </el-row> - <el-table - :stripe="true" - :data="tableData" - :cell-style="{ textAlign: 'center' }" - :header-cell-style="{ textAlign: 'center' }" - :border="true" - header-row-class-name="table-header" - > - <el-table-column - prop="date" - label="搴忓彿"> - </el-table-column> - <el-table-column - prop="name" - label="浜у搧缂栫爜"> - </el-table-column> - <el-table-column - prop="address" - label="浜у搧鍚嶇О"> - </el-table-column> - <el-table-column - prop="date" - label="瑙勬牸鍨嬪彿"> - </el-table-column> - <el-table-column - prop="date" - label="鍗曚綅"> - </el-table-column> - <el-table-column - prop="date" - label="鍏ュ簱鏁伴噺"> - </el-table-column> - <el-table-column - prop="date" - label="鍏ュ簱浜�"> - </el-table-column> - <el-table-column - prop="date" - label="鍏ュ簱鏃ユ湡"> - </el-table-column> - </el-table> - </div> - <div class="addOperation-foot"> - <el-pagination - :current-page="searchModel.pageNo" - :page-sizes="[10, 15, 20, 25]" - :page-size="searchModel.pageSize" - layout="->, total, sizes, prev, pager, next, jumper" - :total="total" - @size-change="handleSizeChange" - @current-change="handleCurrentChange" + <el-row type="flex" align="middle" class="main-top"> + <el-col :span="2"><el-button icon="el-icon-plus" type="primary" @click="addOperation">鏂板鍏ュ簱</el-button></el-col> + <el-col :span="20"> + <TableSearch :show="true" :excel-name="'鍏ュ簱琛�'" :file="file" :get-list="getList" :search-data="searchData" :search-params="searchModel" :options="options" /> + </el-col> + <el-col :span="2"><el-button icon="iconfont icon-24px " @click="printFormVisible = true">鏉$爜鎵撳嵃</el-button></el-col> + </el-row> + <el-table + :row-class-name="onTableRowClassName" + :row-style="{height:0+'px'}" + :cell-style="{padding:8+'px',textAlign: 'center'}" + :header-cell-style="{borderRight:'0px',textAlign: 'center',background:'#52626F',color:'#fff', height:'10px', padding:'0px'}" + :stripe="true" + :data="tableData" + :border="true" + header-row-class-name="table-header" > - </el-pagination> + <el-table-column + label="搴忓彿" + > + <template v-slot="scope"> + {{ (addPageParams.pageNo-1) * addPageParams.pageSize + scope.$index + 1 }} + </template> + </el-table-column> + <el-table-column + v-for="(item, index) in getKeys()" + v-if="item.show" + :key="index" + :prop="item.prop" + :label="item.name" + /> + </el-table> + <div class="addOperation-foot"> + <el-pagination + :current-page="searchModel.pageNo" + :page-sizes="[10, 15, 20, 25]" + :page-size="searchModel.pageSize" + layout="->, total, sizes, prev, pager, next, jumper" + :total="total" + @size-change="handleSizeChange" + @current-change="handleCurrentChange" + /> + </div> </div> + + <el-dialog title="鏂板鍏ュ簱" :visible.sync="addFormVisible" @close="addFormClose"> + <el-form :model="addParams" label-position="left"> + <el-table + :height="250" + :max-height="250" + :row-class-name="onTableRowClassName" + :row-style="{height:0+'px'}" + :cell-style="{padding:8+'px',textAlign: 'center'}" + :header-cell-style="{borderRight:'0px',textAlign: 'center',background:'#52626F',color:'#fff', height:'10px', padding:'0px'}" + :stripe="true" + :border="true" + header-row-class-name="table-header" + :data="this.addTable.slice(0, addPageParams.pageSize)" + > + <!-- <el-table-column property="addPerson" label="搴忓彿" > + </el-table-column> --> + <el-table-column property="productCode" label="浜у搧缂栫爜" /> + <el-table-column property="productName" label="浜у搧鍚嶇О" /> + <el-table-column property="productModel" label="瑙勬牸鍨嬪彿" /> + <el-table-column property="unit" label="鍗曚綅" /> + <el-table-column property="incomingQuantity" label="鍏ュ簱鏁伴噺" /> + <el-table-column property="addPerson" label="鍏ュ簱浜�" /> + <!-- <el-table-column property="address" label="鍏ュ簱鏃ユ湡"></el-table-column> --> + </el-table> + <div :style="{display: 'flex',justifyContent:'center',marginTop: '10px'}"> + <el-pagination + :current-page="addPageParams.pageNo" + :page-sizes="[3, 4, 5, 6]" + :page-size="addPageParams.pageSize" + layout="->, total, sizes, prev, pager, next, jumper" + :total="addTable.length" + @size-change="inHandleSizeChange" + @current-change="inHandleCurrentChange" + /> + </div> + + </el-form> + <div slot="footer" class="dialog-footer"> + <el-button type="primary" @click="storage">纭� 瀹�</el-button> + <el-button @click="addFormVisible = false">鍙� 娑�</el-button> + </div> + </el-dialog> + <el-dialog title="鏉$爜鎵撳嵃" :visible.sync="printFormVisible"> + <el-form :model="printParams" label-position="left"> + <el-row :gutter="20"> + <el-col> + <el-form-item label="浜у搧鍚嶇О/瑙勬牸:" :label-width="formLabelWidth"> + <el-cascader + v-model="chooseTypeName" + :options="scanTypeNameOptions" + @change="handleChange" + /> + </el-form-item> + </el-col> + </el-row> + <el-row :gutter="20"> + <el-col> + <el-form-item label="浜у搧缂栫爜:" :label-width="formLabelWidth"> + <el-input :value="printParams.productCode" :disabled="true" autocomplete="off" /> + </el-form-item> + </el-col> + </el-row> + + <el-row :gutter="20"> + <el-col :span="12"> + <el-form-item label="鍗曚綅:" :label-width="formLabelWidth"> + <el-input v-model="printParams.unit" autocomplete="off" /> + </el-form-item> + </el-col> + <el-col :span="12"> + <el-form-item label="鍏ュ簱鏁伴噺:" :label-width="formLabelWidth"> + <el-input v-model="printParams.incomingQuantity" type="number" autocomplete="off" /> + </el-form-item> + </el-col> + </el-row> + </el-form> + <div slot="footer" class="dialog-footer"> + <el-button type="primary" @click="print">纭� 瀹�</el-button> + <el-button @click="printFormVisible = false">鍙� 娑�</el-button> + </div> + </el-dialog> + <el-dialog :visible.sync="printVisible" @close="printFormClose"> + <div class="printMian"> + <div id="printMe"> + <vue-barcode :height="50" :width="2" :value="code" /> + <div> + <div>{{ printParams.productName }}</div> + <div>{{ printParams.incomingQuantity }}</div> + <div>{{ printParams.unit }}</div> + </div> + <div> + <div :style="{flex:'2', paddingRight:'1px'}">2022-01-01 10:00</div> + <div>{{ printParams.productModel }}</div> + </div> + </div> + </div> + <div class="btn" :style="{display: 'flex',justifyContent: 'center'}"> + <el-button v-print="printObj" :style="{width:'8cm',margin:'10px'}" type="primary">鎵撳嵃</el-button> + + </div> + + </el-dialog> </div> </template> <script> -import { getList } from '@/api/table' +import { getList, file, addCache, selectCache, add } from '@/api/addOperation' +import { selectAllName } from '@/api/productName' +import { selectAllModel } from '@/api/productModel' +import { mapGetters } from 'vuex' import TableSearch from '@/components/TableSearch' +import VueBarcode from 'vue-barcode' + export default { filters: { statusFilter(status) { @@ -98,86 +172,278 @@ }, data() { return { - pickerOptions: { - shortcuts: [{ - text: '鏈�杩戜竴鍛�', - onClick(picker) { - const end = new Date(); - const start = new Date(); - start.setTime(start.getTime() - 3600 * 1000 * 24 * 7); - picker.$emit('pick', [start, end]); - } - }, { - text: '鏈�杩戜竴涓湀', - onClick(picker) { - const end = new Date(); - const start = new Date(); - start.setTime(start.getTime() - 3600 * 1000 * 24 * 30); - picker.$emit('pick', [start, end]); - } - }, { - text: '鏈�杩戜笁涓湀', - onClick(picker) { - const end = new Date(); - const start = new Date(); - start.setTime(start.getTime() - 3600 * 1000 * 24 * 90); - picker.$emit('pick', [start, end]); - } - }] + printObj: { + id: 'printMe', // 鎵撳嵃鐨勫尯鍩� + // preview: false, // 棰勮宸ュ叿鏄惁鍚敤 + previewTitle: '鎵撳嵃鏉$爜', // 棰勮椤甸潰鐨勬爣棰� + popTitle: '', // 鎵撳嵃椤甸潰鐨勯〉鐪� + previewBeforeOpenCallback(vue) { + console.log('姝e湪鍔犺浇棰勮绐楀彛') }, - inType: '', - inStatus: '', - deptName: '', - statusType: {}, - queryParams: { - encode: '', - type: '', - depositor: '' + previewOpenCallback(vue) { + console.log('宸茬粡鍔犺浇瀹岄瑙堢獥鍙�') + }, + clickMounted: (vue) => { + console.log('瑙﹀彂鐐瑰嚮鎵撳嵃鍥炶皟') + // vue.isShowPrint = true // 寮规鏄剧ず鏉$爜 + }, + beforeOpenCallback(vue) { + console.log('鎵撳紑涔嬪墠', vue.barcodeNum) + }, + openCallback(vue) { + // vue.isShowPrint = false // 鍏抽棴鏉$爜鏄剧ず寮规 + // 娓呯┖鏉$爜鎵撳嵃鏁版嵁 + vue.printFormVisible = false + vue.printVisible = false + vue.chooseTypeName = '' + for (const key in vue.printParams) { + vue.printParams[key] = '' + } + console.log('鎵ц浜嗘墦鍗�', vue.barcodeNum) + } }, + printVisible: false, + file, + getList, + options: [], + chooseTypeName: {}, + scanData: {}, + scanTypeNameOptions: [], total: 0, searchModel: { pageNo: 1, - pageSize: 10 + pageSize: 10, + endTime: '', + productModel: '', + startTime: '' }, - tableData: [{ - date: '2016-05-02', - name: '鐜嬪皬铏�', - address: '涓婃捣甯傛櫘闄�鍖洪噾娌欐睙璺� 1518 寮�' - }, { - date: '2016-05-04', - name: '鐜嬪皬铏�', - address: '涓婃捣甯傛櫘闄�鍖洪噾娌欐睙璺� 1517 寮�' - }, { - date: '2016-05-01', - name: '鐜嬪皬铏�', - address: '涓婃捣甯傛櫘闄�鍖洪噾娌欐睙璺� 1519 寮�' - }, { - date: '2016-05-03', - name: '鐜嬪皬铏�', - address: '涓婃捣甯傛櫘闄�鍖洪噾娌欐睙璺� 1516 寮�' - }, { - date: '2016-05-03', - name: '鐜嬪皬铏�', - address: '涓婃捣甯傛櫘闄�鍖洪噾娌欐睙璺� 1516 寮�' - }, { - date: '2016-05-03', - name: '鐜嬪皬铏�', - address: '涓婃捣甯傛櫘闄�鍖洪噾娌欐睙璺� 1516 寮�' - }] + tableData: [], + addFormVisible: false, + printFormVisible: false, + printParams: { + addPerson: '', + incomingQuantity: '', + productModelId: '', + productNameId: '', + unit: '', + productCode: '' + }, + showAddTable: [], + addTable: [], + addCodeTable: [], + addParams: { + name: '', // 浜у搧鍚嶇О + specs: '', // 浜у搧瑙勬牸 + unit: '', // 鍗曚綅 + number: '', // 鏁伴噺 + depositor: '', // 鍏ュ簱浜猴紝鍙互涓哄叆搴撲汉id + date: '' // 鏃堕棿 + }, + formLabelWidth: '120px', + addPageParams: { + pageNo: 1, + pageSize: 3 + }, + code: '' } + }, + computed: { + ...mapGetters([ + 'sidebar', + 'avatar', + 'name', + 'addTab' + ]) + }, + watch: { + addFormVisible(to) { + if (!to) { + this.addTable = [] + this.addCodeTable = [] + window.document.onkeypress = undefined + } + } + }, created() { this.fetchData() + this.setOptions() + // console.log(this.$route,this.$router) }, components: { - TableSearch + TableSearch, + VueBarcode + }, + mounted() { + console.log(this.addTab[0]) + }, + beforeDestroy() { + window.document.onkeypress = null }, methods: { + getKeys() { + return this.$store.state.tableKey.allTab[0].keys + }, + addScanMonitor() { + window.document.onkeypress = e => { + console.log(e) + if (window.event) { // IE + this.nextCode = e.keyCode + } else if (e.which) { // Netscape/Firefox/Opera + this.nextCode = e.which + } + + if (e.which === 13) { // 閿洏鍥炶溅浜嬩欢 + console.log(new Date().getTime()) + if (new Date().getTime() - this.lastTime > 40) { + return this.$message.error('鎵爜鏃朵笉鍙�氳繃閿洏杈撳叆') + } + // if (this.code.length < 3) return // 鎵爜鏋殑閫熷害寰堝揩锛屾墜鍔ㄨ緭鍏ョ殑鏃堕棿涓嶄細璁ヽode鐨勯暱搴﹀ぇ浜�2锛屾墍浠ヨ繖閲屼笉浼氬鎵爜鏋湁鏁� + console.log('鎵爜缁撴潫,鏉″舰鐮侊細', this.code) + // 鍙戦�佽姹� + if (this.addCodeTable.includes(this.code)) { + this.$message.error('璇峰嬁閲嶅鎵弿') + this.handleSubmitScanning() + return + } + selectCache({ code: this.code }).then(res => { + // 閫氳繃鎵弿鏉$爜鏌ヨ浜у搧淇℃伅鍔犲叆鍏ュ簱鏁扮粍涓� + this.$message.success(`${this.code}鎵弿鎴愬姛`) + res.data.addPerson = this.name + console.log(res, this.addCodeTable) + this.addTable.push(res.data) + this.addCodeTable.push(this.code) + }) + + this.scanningForm.scanCode = this.code + this.lastCode = '' + this.lastTime = '' + this.handleSubmitScanning() + return + } + + this.nextTime = new Date().getTime() + if (!this.lastTime && !this.lastCode) { + this.code = '' // 娓呯┖涓婃鐨勬潯褰㈢爜 + // 缁х画鎵弿涓�涓嬫潯鍓嶅叧闂脊绐� + // this.handleCloseTipsVisible() + this.code = this.code + '' + e.key + console.log('鎵爜寮�濮�---', this.code) + } + if (this.lastCode && this.lastTime && this.nextTime - this.lastTime > 500) { // 褰撴壂鐮佸墠鏈塳eypress浜嬩欢鏃�,闃叉棣栧瓧缂哄け + this.code = e.key + console.log('闃叉棣栧瓧缂哄け銆傘�傘��', this.code) + } else if (this.lastCode && this.lastTime) { + this.code = this.code + '' + e.key + console.log('鎵爜涓�傘�傘��', this.code) + } + this.lastCode = this.nextCode + this.lastTime = this.nextTime + } + }, + // 鍏抽棴鎵弿鍏ュ簱寮圭獥 + addFormClose() { + console.log('娓呯┖鏁版嵁') + // 娓呯┖鏁版嵁 + this.addTable = [] + this.addCodeTable = [] + }, + // 鐐瑰嚮鏂板鍏ュ簱 + addOperation() { + this.addFormVisible = true + this.addScanMonitor() + }, + printFormClose() { + for (const key in this.printParams) { + this.printParams[key] = '' + } + this.chooseTypeName = '' + }, + async setOptions() { + const { data: nameRes } = await selectAllName() + // console.log(nameRes) + const nameArr = nameRes.productNames.map(item => { + return { value: item.id, label: item.productName } + }) + for (const nameItem of nameArr) { + const { data } = await selectAllModel({ productNameId: nameItem.value }) + // console.log(data) + this.options = [...this.options, ...data.models] + nameItem.children = data.models.map(item => { + return { value: item.id, label: item.productModel, productCode: item.productCode } + }) + } + + this.options = this.options.map(item => { + return { label: item.productModel, value: item.productModel, productCode: item.productCode } + }) + this.scanTypeNameOptions = nameArr + // console.log(this.options) + // console.log(nameArr) + }, + searchData(res) { + console.log(res) + const { row, total, productModel, startTime, endTime } = res + this.tableData = row + this.total = total + this.searchModel.productModel = productModel + this.searchModel.startTime = startTime + this.searchModel.endTime = endTime + }, + handleChange(value) { + console.log(value) + this.printParams.productNameId = value[0] + this.printParams.productModelId = value[1] + console.log(this.scanTypeNameOptions) + const nameObj = this.scanTypeNameOptions.filter(item => item.value === value[0]) + console.log(nameObj[0].label) + this.printParams.productName = nameObj[0].label + const children = nameObj[0].children + this.printParams.productCode = children.filter(item => item.value === value[1])[0].productCode + console.log(children.filter(item => item.value === value[1])[0].label) + this.printParams.productModel = children.filter(item => item.value === value[1])[0].label + }, + onTableRowClassName({ row, rowIndex }) { + if (rowIndex % 2 != 0) { + return 'onAcitve' + } else { + return '' + } + }, + storage() { + // 杈撳嚭鍏ュ簱鍙傛暟 + if (this.addCodeTable.length === 0) return this.$message.error('璇峰厛鎵弿鏁版嵁鍏ュ簱') + add({ code: this.addCodeTable, addPerson: this.name }).then(() => { + this.addTable = [] + this.addCodeTable = [] + this.fetchData() + this.addFormVisible = false + this.$message.success('鍏ュ簱鎴愬姛') + }) + }, + async print() { + console.log('鐢熸垚鏉$爜') + this.printParams.addPerson = this.name + console.log(this.printParams) + const res = await addCache(this.printParams) + this.code = res.message + this.printFormVisible = false + // for( key in this.printParams){ + // this.printParams[key] = '' + // } + this.printVisible = true + }, fetchData() { this.listLoading = true - getList().then(response => { - this.list = response.data.items + const obj = {} + const arr = Object.keys(this.searchModel).filter(key => this.searchModel[key]) + arr.forEach(item => obj[item] = this.searchModel[item]) + console.log(obj) + getList(obj).then(response => { + this.tableData = response.data.row + this.total = response.data.total this.listLoading = false + // console.log(this.tableData) }) }, handleSizeChange(val) { @@ -185,31 +451,110 @@ }, handleCurrentChange(val) { console.log(`褰撳墠椤�: ${val}`) + this.searchModel.pageNo = val + this.fetchData() + }, + inHandleSizeChange(val) { + console.log(`姣忛〉 ${val} 鏉) + }, + inHandleCurrentChange(val) { + console.log(`褰撳墠椤�: ${val}`) + this.addPageParams.pageNo = val + // console.log(this.addTable.slice((this.addPageParams.pageSize * (val - 1)), (this.addPageParams.pageSize * (val - 1)) + this.addPageParams.pageSize)) } } + } </script> <style lang="scss" scoped> +.printMian{ + display: flex; + justify-content: center; + .btn{ + width: 100%; + display: flex; + justify-content: center; + .el-button{ + width: 100%; + } + } +} @import '../../styles/variables.scss'; + #printMe{ + // height: 4cm; + // visibility:hidden; + width: 8cm; + display: flex; + flex-direction: column; + text-align: center; + img{ + align-items: center; + display: inline-block; + text-align: center; + width: 8cm; + height: 1.5cm; + } + >div{ + width: 100%; + display: flex; + >div{ + flex: 1; + // height: 30px; + border: 1px solid #ddd; + padding: 2px; + } + } +} +@media print { + @page { + size: 8cm 4cm !important; + // margin: 0cm; + // padding: 0cm; + // size: portrait; + // border: 1px solid #ddd; + + } + + } .addOperation { - min-height: calc(100vh - 50px); + min-height: calc(100vh - 100px); + max-height: calc(100vh - 100px); padding: 25px; +// margin: 25px; background: $mainBg; + display: flex; + flex-direction: column; + + .dialog-footer{ + text-align: center; + + } .addOperation-main{ background: #fff; padding: 20px; + flex: 80%; + display: flex; + flex-direction: column; .main-top{} .table-header{ background: #6095FB; } - } - .addOperation-foot{ - margin-top: 25px; - .el-pagination{ - display: flex; - justify-content: center; + ::v-deep .el-table{ + flex: 1; + ::v-deep .onAcitve td{ + background-color: #F2F2F2 !important; + } + } + .addOperation-foot{ + // flex: 20%; + margin-top: 25px; + .el-pagination{ + display: flex; + justify-content: right; + } } } + } </style> -- Gitblit v1.9.3