From ed2f5cbcb482a22fbf799cf14ff3d3152669e7ac Mon Sep 17 00:00:00 2001 From: zouyu <2723363702@qq.com> Date: 星期三, 27 九月 2023 18:17:02 +0800 Subject: [PATCH] modified: src/assets/api/controller.js modified: src/components/view/mbom.vue modified: src/components/view/standard.vue --- src/components/view/mbom.vue | 700 +++++++++++++++++++++++++++++++++++++++++---------------- 1 files changed, 500 insertions(+), 200 deletions(-) diff --git a/src/components/view/mbom.vue b/src/components/view/mbom.vue index 21dfc73..178a9b6 100644 --- a/src/components/view/mbom.vue +++ b/src/components/view/mbom.vue @@ -1,3 +1,494 @@ +<template> + <div class="record_content"> + <div class="title"> + <el-row> + <el-col :span="12" style="line-height: 32px;">鐗╂枡娓呭崟缁存姢</el-col> + <el-col :span="12" style="text-align: right;"> + <el-button type="primary" icon="el-icon-plus" style="background: #004EA2;" @click="event">鏂板</el-button> + <el-button icon="el-icon-upload2" @click="showImportDialog">瀵煎叆</el-button> + <el-button icon="el-icon-download" @click="exportDialogVisible=true">瀵煎嚭</el-button> + <el-button icon="el-icon-delete" @click="dels">鍒犻櫎</el-button> + </el-col> + </el-row> + </div> + <div class="choose"> + <span>绫诲瀷锛�</span> + <el-select v-model="search.type" size="small" @change="TYpe" placeholder="璇烽�夋嫨" + style="width: 224px;margin-right: 30px;"> + <el-option v-for="(a, ai) in bigType" :key="ai" :value="a"></el-option> + </el-select> + </div> + <div class="thing"> + <div class="left"> + <el-input v-model="search.technology" @input="query" suffix-icon="el-icon-search" placeholder="璇疯緭鍏ユ悳绱㈠唴瀹�" + size="small" clearable></el-input> + <el-tree :data="list" ref="tree" style="overflow-y: auto;padding-top: 8px;" highlight-current + :props="{children: 'children',label: 'name'}" node-key="name" default-expand-all + @node-click="handleNodeClick"> + <div class="custom-tree-node" slot-scope="{ node, data }"> + <span><i :class="`node_i ${data.code != '[2]'?'el-icon-folder-opened':'el-icon-tickets'}`"></i> + {{data.code}} {{ data.name }}</span> + </div> + </el-tree> + </div> + <div class="right"> + <el-table :data="tableData" border style="width: 100%;overflow-y: auto;min-height: 100%" max-height="100%" + @selection-change="handleSelectionChange" default-expand-all> + <el-table-column type="selection" width="50"> + </el-table-column> + <el-table-column type="index" label="搴忓彿" width="70"> + </el-table-column> + <el-table-column prop="name" label="鍘熸潗鏂欏悕绉�"> + </el-table-column> + <el-table-column prop="unit" label="鍗曚綅"> + </el-table-column> + <el-table-column label="鎿嶄綔" width="130"> + <template slot-scope="scope"> + <span class="table_do" @click="deleteRow(scope.$index, scope.row)">鍒犻櫎</span> + </template> + </el-table-column> + </el-table> + </div> + </div> + <el-dialog title="鐗╂枡娓呭崟鐨勭淮鎶�" :visible.sync="dialogVisible" width="80%" :before-close="handleClose" :center="true"> + <div> + <el-form> + <el-row :gutter="2"> + <el-col :span="8"> + <el-form-item label="绫诲瀷:"> + <el-select v-model="search.type" size="small" placeholder="璇烽�夋嫨" + style="width: 224px;margin-right: 30px;"> + <el-option v-for="(a, ai) in bigType" :key="ai" :value="a"></el-option> + </el-select> + </el-form-item> + </el-col> + <el-col :span="8"> + <el-form-item label="宸ュ簭"> + <template> + <el-select v-model="search.work" placeholder="璇烽�夋嫨" allow-create filterable @change="workevent"> + <el-option v-for="(item,index) in process" :key="item.name" :label="item.name" :value="item.name"> + </el-option> + </el-select> + </template> + </el-form-item> + </el-col> + <el-col :span="8"> + <el-form-item label="宸ヨ壓鍚嶇О:"> + <el-select v-model="search.craft" size="small" placeholder="璇烽�夋嫨" + style="width: 224px;margin-right: 30px;"> + <el-option v-for="item in craftapi" :key="item.id" :label="item.name" :value="item.id"> + </el-option> + </el-select> + </el-form-item> + </el-col> + </el-row> + </el-form> + <el-button size="mini" @click="Addrow">娣诲姞琛�</el-button> + </div> + <div style="margin: 10px 0px;"> + <template> + <el-table border :data="tableapi" height="calc(80vh - 250px)" style="width: 100%"> + <el-table-column type="index" label="搴忓彿" width="70"> + </el-table-column> + <el-table-column prop="" label="璐ㄩ噺杩芥函鍙�" width="180"> + <template slot-scope="scope"> + <el-input v-model="scope.row.qualityTraceability" placeholder=""></el-input> + </template> + </el-table-column> + <el-table-column prop="name" label="鍘熸潗鏂欏悕绉�"> + <template slot-scope="scope"> + <el-input v-model="scope.row.name" placeholder=""></el-input> + </template> + </el-table-column> + <el-table-column prop="address" label="瑙勬牸鍨嬪彿"> + <template slot-scope="scope"> + <el-input v-model="scope.row.specifications" placeholder=""></el-input> + </template> + </el-table-column> + <el-table-column prop="unit" label="鍗曚綅"> + <template slot-scope="scope"> + <el-input v-model="scope.row.unit" placeholder=""></el-input> + </template> + </el-table-column> + </el-table> + </template> + </div> + <span slot="footer" class="dialog-footer"> + <el-button @click="dialogVisible = false">鍙� 娑�</el-button> + <el-button type="primary" @click="skipshow">纭� 瀹�</el-button> + </span> + </el-dialog> + <el-dialog title="鐗╂枡娓呭崟瀵煎叆" :visible.sync="importDialogVisible" width="30%"> + <el-upload ref="upload" class="upload-demo" drag action="#" :auto-upload="false" + :on-change="handleUpload" multiple> + <i class="el-icon-upload"></i> + <div class="el-upload__text">灏嗘枃浠舵嫋鍒版澶勶紝鎴�<em>鐐瑰嚮涓婁紶</em></div> + <div class="el-upload__tip" slot="tip"> + 鍙兘涓婁紶xls/xlsx鏂囦欢锛屼笖涓嶈秴杩�1MB銆� + <a href="#" style="color:#409eff;font-size:10px;text-decoration: underline;" @click="downloadTemplate">涓嬭浇妯℃澘</a> + </div> + </el-upload> + <span slot="footer" class="dialog-footer"> + <el-button @click="importDialogVisible = false">鍙� 娑�</el-button> + <el-button type="primary" @click="importMaterial">纭� 瀹�</el-button> + </span> + </el-dialog> + <el-dialog title="鐗╂枡娓呭崟瀵煎嚭" :visible.sync="exportDialogVisible" width="40%"> + <el-row> + <el-col :span="4"> + <span>绫诲瀷閫夋嫨:</span> + </el-col> + <el-col :span="20"> + <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" + @change="handleCheckAllChange" name="type" label="鍏ㄩ��"></el-checkbox> + <el-checkbox-group v-model="exportTypeList" @change="handleCheckedChange"> + <el-checkbox v-for="(item,index) in bigType" :key="index" :label="item" name="type"></el-checkbox> + </el-checkbox-group> + </el-col> + </el-row> + <span slot="footer" class="dialog-footer"> + <el-button @click="exportDialogVisible = false">鍙� 娑�</el-button> + <el-button type="primary" @click="exportMaterial" :loading="exportLoading"> + {{exportLoading ? "鍔犺浇涓�" : "纭� 瀹�"}} + </el-button> + </span> + </el-dialog> + </div> +</template> +<script> + export default { + data() { + return { + exportLoading: false, + isIndeterminate: true, + checkAll: false, + importFileList:[], + exportTypeList:[], + importDialogVisible:false, + exportDialogVisible:false, + search: { + type: 0, + technology: '' + }, + list: [], + process: {}, + // handleClose:[], + checkTreeNode: { + id: '', + }, + tableData: [], + tableapi: [{ + supplier: '', + qualityTraceability: '', + name: '', + specifications: '', + unit: '', + }], + addsearch: {}, + upData: {}, + form: {}, + dialogVisible: false, + typeselect: '', + input: '', + craftapi: [], + bigType: [] + } + }, + mounted() { + this.chooseType() + }, + watch:{ + importDialogVisible(newVal){ + if(!newVal){ + this.$refs['upload'].clearFiles(); + } + }, + exportDialogVisible(newVal){ + if(!newVal){ + this.exportTypeList = []; + this.checkAll = false; + this.isIndeterminate = true; + } + }, + }, + methods: { + handleCheckAllChange(val) { + this.exportTypeList = val ? this.bigType : []; + this.isIndeterminate = false; + }, + handleCheckedChange(value) { + let checkedCount = value.length; + this.checkAll = checkedCount === this.bigType.length; + this.isIndeterminate = checkedCount > 0 && checkedCount < this.bigType.length; + }, + showImportDialog(){ + this.importDialogVisible = true; + }, + //涓嬭浇妯℃澘 + downloadTemplate(){ + this.$axios.post(this.$api.url.downloadMBomTemplate, + {typeList:this.bigType.join(',')}, + { + responseType:'blob', + headers:{"Content-Type":"application/json"} + }).then((res)=>{ + this.downloadFun(res); + }).catch() + }, + //瀵煎叆 + importMaterial(){ + console.log(this.importFileList); + }, + downloadFun(result){ + if(result == null || result == undefined){ + return; + } + var nameList = result.headers['content-disposition']; + nameList = decodeURI(nameList); + var fileName = nameList.split('=')[1]; + const blob = new Blob([result.data,{type: 'application/vnd.ms-excel'}]); + const link = document.createElement('a'); + link.download = fileName; + const URL = window.URL || window.webkitURL; + link.href= URL.createObjectURL(blob); + document.body.appendChild(link); + link.click(); + document.body.removeChild(link); + }, + // 鏂囦欢涓婁紶 + handleUpload(file, fileList) { + const maxSize = 1 * 1024 * 1024 * 1024;//1MB + const xlsType = "application/vnd.ms-excel"; + const xlsxType = "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet" + if(file.raw.type != xlsType && file.raw.type != xlsxType){ + this.$message.warning("瀵煎叆鏂囦欢鏍煎紡涓嶇锛�"); + this.$refs['upload'].clearFiles(); + return; + } + if(Number.parseInt(file.size) > maxSize){ + this.$message.warning("瀵煎叆鏂囦欢杩囧ぇ锛�"); + this.$refs['upload'].clearFiles(); + return; + } + this.importFileList = fileList; + }, + //瀵煎嚭 + exportMaterial(){ + if(this.exportTypeList.length == 0){ + this.$message.warning("璇峰厛閫夋嫨鑷冲皯涓�绉嶇被鍨�!"); + return; + } + this.exportLoading = true; + this.$axios.post(this.$api.url.exportMBom, + {typeList:this.exportTypeList.join(',')}, + { + responseType:'blob', + headers:{"Content-Type":"application/json"} + }).then((res)=>{ + this.downloadFun(res); + this.exportLoading = false; + }).catch() + }, + chooseType() { + this.$axios.get(this.$api.url.chooseType).then(res => { + this.bigType = res.data; + this.typeselect = res.data[0]; + this.search.type = res.data[0]; + this.selectAllleft(); + this.selectAllMbom(); + }) + }, + selectDataList() { + this.list.forEach(a => { + a.code = '[1]' + if (a.children != undefined) { + a.children.forEach(b => { + b.code = '[2]' + if (b.children != undefined) { + b.children.forEach(c => { + c.code = '[3]' + }) + } + }) + } + }) + this.upIndex++ + }, + workevent(val) { + console.log(val); + let idx = this.process.findIndex(el => el.name === val) + this.craftapi = this.process[idx].children + }, + //鏂板 + chooseTechFath() { + this.$axios.get(this.$api.url.chooseTechFath, { + params: { + type: this.typeselect + } + }).then(res => { + this.process = res.data; + console.log(this.process); + }, { + headers: { + "Content-Type": "application/json" + } + }) + }, + addMbom(data, cc) { + this.$axios.post(this.$api.url.addMbom, { + mbomModelDto2List: data, + techTemId: cc, + + }, { + headers: { + "Content-Type": "application/json" + } + }).then(res => { + // console.log(res); + this.$message.success('娣诲姞瀹屾垚') + this.selectAllMbom() + this.tableapi = [{}] + }) + }, + //鍒犻櫎 + material(index) { + console.log(this.upData.id); + this.$axios.post(this.$api.url.material, { + id: this.upData.id + }).then(res => { + this.$message.success(res.message) + this.tableData.splice(index, 1) + + // console.log(res); + }) + }, + TYpe(val) { + this.typeselect = val + this.selectAllleft() + }, + query() { + this.selectAllleft() + }, + //宸﹁竟 + selectAllleft() { + this.$axios.get(this.$api.url.selectAllleft, { + params: { + type: this.typeselect, + message: this.search.technology + } + }).then(res => { + this.list = res.data; + this.selectDataList() + this.$nextTick(() => { + this.$refs.tree.setCurrentKey(this.list[0].children[0].name) // 榛樿閫変腑鑺傜偣绗竴涓� + }) + let one = this.list.filter(item => { + return item.children.length > 0 + })[0] + let name = one.children[0].id + this.checkTreeNode.id = name + this.selectAllMbomStart(name) + this.selectDataList(); + }, { + headers: { + "Content-Type": "application/json" + } + }) + }, + selectAllMbomStart(name) { + this.$axios.get(this.$api.url.selectAllMbom, { + params: { + id: name + } + }).then(res => { + this.tableData = res.data; + }, { + headers: { + "Content-Type": "application/json" + } + }) + }, + //鍙宠竟 + selectAllMbom() { + this.$axios.get(this.$api.url.selectAllMbom, { + params: { + id: this.checkTreeNode.id + } + }).then(res => { + this.tableData = res.data; + }, { + headers: { + "Content-Type": "application/json" + } + }) + }, + handleNodeClick(data) { + this.checkTreeNode = data + this.selectAllMbom() + }, + handleClose(done) { + this.$confirm('纭鍏抽棴锛�') + .then(_ => { + done(); + }) + .catch(_ => {}); + }, + //鏂板 + event() { + this.dialogVisible = true + this.chooseTechFath() + }, + //娣诲姞琛� + Addrow() { + if (this.tableapi == undefined) { + this.tableapi = new Array(); + } + let obj = {}; + this.tableapi.push(obj); + }, + skipshow() { + // let data = this.tableapi.at(-1) + // console.log(this.tableapi); + let cc = this.search.craft + this.addMbom(this.tableapi, cc) + this.dialogVisible = false + }, + //delAllMbom 鎵归噺鍒犻櫎 + delAllMbom() { + this.$axios.post(this.$api.url.delAllMbom, { + ids: this.delete + }).then(res => { + this.selectAllMbom() + }) + }, + dels() { + this.selects.forEach(a => { + for (var b = 0; b < this.tableData.length; b++) { + if (this.tableData[b].id == a.id) { + this.tableData.splice(b, 1) + b-- + } + } + }) + let cc = this.selects.map(el => { + return el.id + }) + this.delete = cc.join(',') + this.delAllMbom() + this.$message.success('鍒犻櫎瀹屾垚') + }, + handleSelectionChange(val) { + this.selects = val; + }, + deleteRow(index, rows) { + this.upData.id = rows.id + this.material(index) + }, + + } + } +</script> + <style scoped> .title .el-button { height: 32px; @@ -13,6 +504,14 @@ .title * { font-size: 16px; + } + + .choose-1 { + padding: 5px 24px; + display: flex; + align-items: center; + background-color: #fff; + border-bottom: 3px solid rgb(245, 247, 251); } .choose { @@ -46,6 +545,7 @@ height: calc(100% - 20px); border-right: 3px solid rgb(245, 247, 251); padding: 16px; + overflow-y: auto; } .thing .left .custom-tree-node span { @@ -105,203 +605,3 @@ border-radius: 2px; } </style> - -<template> - <div class="record_content"> - <div class="title"> - <el-row> - <el-col :span="12" style="line-height: 32px;">鐗╂枡娓呭崟缁存姢</el-col> - <el-col :span="12" style="text-align: right;"> - <el-button type="primary" icon="el-icon-plus" style="background: #004EA2;">鏂板</el-button> - <el-button icon="el-icon-edit-outline">淇敼</el-button> - <el-button icon="el-icon-delete" @click="dels">鍒犻櫎</el-button> - </el-col> - </el-row> - </div> - <div class="choose"> - <span>绫诲瀷锛�</span> - <el-select v-model="search.type" size="small" placeholder="璇烽�夋嫨" style="width: 224px;margin-right: 30px;"> - <el-option label="姗¤兌杩炴帴鍣�" :value="0"></el-option> - <el-option label="閲戝睘杩炴帴鍣�" :value="1"></el-option> - <el-option label="婀挎彃鎷旂數杩炴帴鍣�" :value="2"></el-option> - <el-option label="鍒嗘敮缁勪欢" :value="3"></el-option> - </el-select> - <span>鍘熸潗鏂欏悕绉帮細</span> - <el-select v-model="search.name" size="small" placeholder="璇烽�夋嫨" style="width: 224px;margin-right: 30px;"> - <el-option v-for="(a, ai) in product" key="ai" :label="a.name" :value="a.id"></el-option> - </el-select> - <el-button size="mini" @click="clean()"><span>閲� 缃�</span></el-button> - <el-button size="mini" type="primary" style="background: #004EA2;"><span>鏌� - 璇�</span></el-button> - </div> - <div class="thing"> - <div class="left"> - <el-input v-model="search.technology" suffix-icon="el-icon-search" placeholder="璇疯緭鍏ユ悳绱㈠唴瀹�" size="small" clearable @input="(val)=>$refs.tree.filter(val)"></el-input> - <el-tree :data="list" ref="tree" :props="{children: 'children',label: 'name'}" node-key="id" default-expand-all - @node-click="handleNodeClick" highlight-current @node-expand="nodeOpen" @node-collapse="nodeClose" :filter-node-method="filterNode" - :key="upIndex"> - <div class="custom-tree-node" slot-scope="{ node, data }"> - <span><i :class="`node_i ${data.code != '[2]'?'el-icon-folder-opened':'el-icon-tickets'}`"></i> - {{data.code}} {{ data.name }}</span> - <el-button type="text" size="mini" @click.stop="remove(node, data)"> - <i class="el-icon-delete"></i> - </el-button> - </div> - </el-tree> - </div> - <div class="right"> - <el-table :data="tableData" border style="width: 100%;overflow-y: auto;min-height: 100%" max-height="100%" - @selection-change="handleSelectionChange" default-expand-all> - <el-table-column type="selection" width="50"> - </el-table-column> - <el-table-column type="index" label="搴忓彿" width="70"> - </el-table-column> - <el-table-column prop="name" label="鍘熸潗鏂欏悕绉�"> - </el-table-column> - <el-table-column prop="unit" label="鍗曚綅" width="150"> - </el-table-column> - <el-table-column prop="num" label="鏁伴噺" width="300"> - <template slot-scope="scope"> - <el-input v-model="scope.row.num" size="medium" placeholder="璇疯緭鍏ュ崟浣�" clearable @change="(val)=>submitUpData(scope.row.id, val)"></el-input> - </template> - </el-table-column> - <el-table-column label="鎿嶄綔" width="100"> - <template slot-scope="scope"> - <span class="table_do" @click="deleteRow(scope.$index, tableData)">鍒犻櫎</span> - </template> - </el-table-column> - </el-table> - </div> - </div> - </div> -</template> - -<script> - export default { - data() { - return { - search: { - type: 0, - name: null - }, - process: [], - product: [], - list: [{ - id: 0, - name: "宸ヨ壓", - children: [{ - id: 5, - name: "宸ュ簭" - }] - }, { - id: 1, - name: "鎴愬搧" - }, { - id: 2, - name: "鍗婃垚鍝�" - }], - checkTreeNode: {}, - tableData: [{ - id: 1, - name: "鍘熸潗鏂欏悕绉�", - unit: "鍗曚綅", - num: "鏁伴噺" - }, { - id: 2, - name: "浣滀笟浜哄憳", - unit: "dajskda", - num: "12348" - }, { - id: 3, - name: "瑙勬牸", - unit: "dajskda", - num: "12348" - }, { - id: 4, - name: "瑙勬牸", - unit: "dajskda", - num: "12348" - }, { - id: 5, - name: "瑙勬牸", - unit: "dajskda", - num: "12348" - }], - upIndex: 0, - selects: [], - upData: { - id: 0, - num: null - } - } - }, - mounted() { - this.selectDataList() - }, - methods: { - filterNode(value, data) { - if (!value) return true; - return data.name.indexOf(value) !== -1; - }, - remove(node, data) { - this.$confirm("鏄惁鍒犻櫎", "璀﹀憡", { - type: "warning" - }).then(res => { - const parent = node.parent; - const children = parent.data.children || parent.data; - const index = children.findIndex(d => d.id === data.id); - children.splice(index, 1); - }).catch(e => {}) - }, - selectDataList() { - this.list.forEach(a => { - a.code = '[1]' - if (a.children != undefined) { - a.children.forEach(b => { - b.code = '[2]' - }) - } - }) - this.upIndex++ - }, - handleNodeClick(data) { - this.checkTreeNode = data - if (data.code == '[2]') { - console.log(data); - } - }, - nodeOpen(data, node, el) { - $($(el.$el).find('.node_i')[0]).attr('class', 'node_i el-icon-folder-opened') - }, - nodeClose(data, node, el) { - $($(el.$el).find('.node_i')[0]).attr('class', 'node_i el-icon-folder') - }, - handleSelectionChange(val) { - this.selects = val; - }, - dels() { - this.selects.forEach(a => { - for (var b = 0; b < this.tableData.length; b++) { - if (this.tableData[b].id == a.id) { - this.tableData.splice(b, 1) - b-- - } - } - }) - this.$message.success('鍒犻櫎瀹屾垚') - }, - deleteRow(index, rows) { - rows.splice(index, 1); - }, - submitUpData(id,val) { - this.tableData.forEach(a => { - if (a.id == id) { - a.num = val - } - }) - this.$message.success('淇敼鎴愬姛') - this.upIndex++ - } - } - } -</script> \ No newline at end of file -- Gitblit v1.9.3