From 1a874fa5f58c97c2cb8b3f38a1a089268f4bf124 Mon Sep 17 00:00:00 2001 From: zouyu <2723363702@qq.com> Date: 星期一, 11 九月 2023 18:05:52 +0800 Subject: [PATCH] modified: src/assets/api/controller.js deleted: src/components/view/standard-table/bom.vue modified: src/components/view/standard-table/material.vue new file: src/components/view/standard-table/product.vue modified: src/components/view/standard-table/target.vue modified: src/components/view/standard-table/technology.vue modified: src/components/view/standard.vue --- src/components/view/standard.vue | 506 ++++++++++++++++++++++++++++++++++++++++++++++---------- 1 files changed, 415 insertions(+), 91 deletions(-) diff --git a/src/components/view/standard.vue b/src/components/view/standard.vue index 731daef..29fb3c4 100644 --- a/src/components/view/standard.vue +++ b/src/components/view/standard.vue @@ -5,22 +5,28 @@ <el-col :span="12" style="line-height: 32px;">鏍囧噯BOM</el-col> <el-col :span="12" style="text-align: right;"> <el-button type="primary" icon="el-icon-plus" style="background: #004EA2;" - @click="bomAddModelVisible = true">鏂板</el-button> + @click="showBomAddModel">鏂板</el-button> <el-button icon="el-icon-plus">鏂板鐗堟湰</el-button> - <el-button icon="el-icon-edit-outline">淇敼</el-button> - <el-button icon="el-icon-delete">鍒犻櫎</el-button> + <el-button @click="bomRightUp=true" icon="el-icon-edit-outline">淇敼</el-button> + <el-button @click="bomRightDl=true" icon="el-icon-delete">鍒犻櫎</el-button> </el-col> </el-row> </div> <div class="thing"> <div class="left"> - <el-input v-model="search" suffix-icon="el-icon-search" placeholder="璇疯緭鍏ユ悳绱㈠唴瀹�" size="small" clearable></el-input> - - <el-tree :data="list" ref="tree" :default-expand-all="false" :props="{ children: 'children', label: 'name' }" + <el-row> + <el-col :span="21"> + <el-input v-model="search" suffix-icon="el-icon-search" placeholder="璇疯緭鍏ユ悳绱㈠唴瀹�" size="small" clearable></el-input> + </el-col> + <el-col :span="2"> + <el-button size="mini" icon="el-icon-plus" @click="bomLeftAdd=true"></el-button> + </el-col> + </el-row> + <el-tree :data="list" ref="tree" default-expand-all :props="{ children: 'children', label: 'name' }" node-key="id" :filter-node-method="filterNode" @node-click="handleNodeClick" highlight-current> <div class="custom-tree-node" slot-scope="{ node, data }"> - <span><i :class="`node_i ${data.code != '[4]' ? 'el-icon-folder-opened' : 'el-icon-tickets'}`"></i> - {{ data.name }}</span> + <span><i :class="`node_i ${data.code != '[5]' ? '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> @@ -42,62 +48,209 @@ <span>{{ tableType == 1 ? '椤圭洰锛�' : '宸ヨ壓鍚嶇О锛�' }}</span> <el-input v-model="searchName" size="small" placeholder="璇疯緭鍏�" style="width: 224px;margin-right: 24px;" clearable></el-input> - <span>{{ tableType == 1 ? '鐗堟湰锛�' : '宸ヨ壓鍚嶇О锛�' }}</span> - <el-select v-model="VER" @change="verevent" style="width: 280px;" placeholder="璇烽�夋嫨"> + <span>{{ tableType == 1 ? '鐗堟湰锛�' : '鐗堟湰锛�' }}</span> + <el-select size="small" v-model="VER" @change="verevent" style="width: 280px;" placeholder="璇烽�夋嫨"> <el-option v-for="item in version" :key="item" :label="item" :value="item"> </el-option> </el-select> - <el-button size="mini" @click="() => { searchName = ''; selectProductTableData() }"><span>閲� 缃�</span></el-button> + <el-button style="margin-left:10px;" size="mini" @click="() => { searchName = ''; selectProductTableData() }"><span>閲� 缃�</span></el-button> <el-button size="mini" type="primary" style="background: #004EA2;" @click="selectProductTableData"><span>鏌� 璇�</span></el-button> </div> - <div> - <el-table :data="tableData" style="width: 100%;margin-bottom: 20px;" row-key="name" border - @selection-change="handleSelectionChange" default-expand-all - :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"> - <el-table-column type="selection" width="55"> - </el-table-column> - <el-table-column type="index" width="50" label="搴忓彿"> - </el-table-column> - <el-table-column prop="name" label="宸ュ簭" sortable width="300px"> - <!-- <template slot-scope="scope"> - <el-tag> - <div class="firstDiv" :style="`color: ${scope.row.children? '#16a7ff' : '#58c173'}`"> - {{ scope.row.children ? "01" : "02" }} - </div> - </el-tag> - <span style="color: black">{{ scope.row.name }}</span> - - </template> --> - </el-table-column> - <el-table-column prop="" sortable label="宸ヨ壓鍚嶇О"> - </el-table-column> - <el-table-column prop="" label="鎸囨爣鍚嶇О"> - </el-table-column> - <el-table-column prop="" label="鍗曚綅"> - </el-table-column> - <el-table-column prop="" label="鍐呮帶鍊�"> - </el-table-column> - <el-table-column prop="unit" label="鏍囧噯鍊�"> - </el-table-column> - </el-table> + <div v-if="this.typeselect == 0"> + <technology :tableType="tableType" :tableData="tableData"></technology> </div> - <div class="table"> - <technology v-if="tableData.length !== 0" :tableType="tableType" :tableData="tableData"></technology> + <div v-if="this.typeselect == 1"> + <target :tableType="tableType" :tableData="tableData"></target> </div> + <div v-if="this.typeselect == 2"> + <material :tableType="tableType" :tableData="tableData"></material> + </div> + <div v-if="this.typeselect == 3"> + <product :tableType="tableType" :tableData="tableData"></product> + </div> + </div> </div> <div class="bom-add-model"> - <el-dialog title="BOM鏂板" :visible.sync="bomAddModelVisible" width="30%"> - <el-form> - - </el-form> + <el-dialog title="BOM鏂板" :visible.sync="bomAddModelVisible" width="35%"> + <!-- 宸ヨ壓璺嚎 --> + <div v-if="typeselect == 0">銆� + <el-form :model="technologyForm" :inline="true" class="demo-form-inline" label-position="right" + :rules="boomRules" ref="boomForm" label-width="90px"> + <el-form-item label="宸ュ簭:" prop="father" width="250"> + <el-select v-model="technologyForm.father" + style="width:200px;" placeholder="璇疯緭鍏ユ垨閫夋嫨宸ュ簭"> + <el-option :value="item.father" :label="item.father" v-for="(item,index) in fatherList" :key="index"></el-option> + </el-select> + </el-form-item> + <el-form-item label="宸ヨ壓鍚嶇О:" prop="name" width="250"> + <el-input placeholder="璇疯緭鍏ュ伐鑹哄悕绉�" style="width:200px;" + v-model="technologyForm.name"></el-input> + </el-form-item> + <el-form-item label="璁惧缁�:" prop="deviceGroup" width="250"> + <el-select placeholder="璇烽�夋嫨璁惧缁�" + style="width:200px;" + v-model="technologyForm.deviceGroup"> + <el-option :value="item.father" + v-for="(item,index) in deviceList" :key="index" :label="item.father"></el-option> + </el-select> + </el-form-item> + <el-form-item label="鐢熶骇瀹氶:" prop="productionQuota" width="250"> + <el-input style="width:200px;" v-model.number="technologyForm.productionQuota" placeholder="璇疯緭鍏ョ敓浜у畾棰�" /> + </el-form-item> + </el-form> + </div> + <!-- 鎶�鏈寚鏍� --> + <div v-if="typeselect == 1"> + <el-form :model="targetForm" :inline="true" class="demo-form-inline" label-position="right" + label-width="80px"> + <el-form-item label="鎸囨爣鍚嶇О:" prop="father" width="250"> + <el-input style="width:200px;" v-model="targetForm.pname" placeholder="璇疯緭鍏ュ崟浣�"/> + </el-form-item> + <el-form-item label="鍗曚綅:" prop="name" width="250"> + <el-input style="width:200px;" v-model="targetForm.unit" placeholder="璇疯緭鍏ュ崟浣�"/> + </el-form-item> + <el-form-item label="鍐呮帶鍊�:" prop="dg" width="250"> + <el-input style="width:200px;" v-model="targetForm.internal" placeholder="璇疯緭鍏ュ崟浣�"/> + </el-form-item> + <el-form-item label="鏍囧噯鍊�:" prop="unit" width="250"> + <el-input style="width:200px;" v-model="targetForm.required" placeholder="璇疯緭鍏ュ崟浣�"/> + </el-form-item> + </el-form> + </div> + <!-- 鐗╂枡娓呭崟 --> + <div v-if="typeselect == 2"> + <el-form :model="materialForm" class="demo-form-inline" label-position="right" + label-width="80px"> + <el-row> + <el-col :span="12"> + <el-form-item label="瑙勬牸鍨嬪彿:" prop="father" width="250"> + <el-input style="width:200px;" v-model="materialForm.pname" placeholder="璇疯緭鍏ュ崟浣�"/> + </el-form-item> + </el-col> + <el-col :span="12" style="text-align: right;"> + <el-form-item label="浜у搧澶х被:" prop="name" width="250"> + <el-select placeholder="璇烽�夋嫨浜у搧澶х被" + style="width:240px;" v-model="materialForm.dg"> + <el-option value="1">1</el-option> + <el-option value="2">2</el-option> + <el-option value="3">3</el-option> + <el-option value="4">4</el-option> + </el-select> + </el-form-item> + </el-col> + </el-row> + <el-row> + <el-col :span="12"> + <el-form-item label="鏉愭枡淇℃伅"></el-form-item> + </el-col> + <el-col :span="12" style="text-align: right;"> + <el-button size="mini" style="text-align: right;">娣诲姞琛�</el-button> + </el-col> + </el-row> + <el-row> + <el-col :span="24"> + <el-table > + <el-table-column label="鏉愭枡鍚嶇О"></el-table-column> + <el-table-column label="瑙勬牸鍨嬪彿"></el-table-column> + <el-table-column label="鍗曚綅"></el-table-column> + <el-table-column label="鏁伴噺"></el-table-column> + </el-table> + </el-col> + </el-row> + </el-form> + </div> + <!-- 鐢熶骇宸ヨ壓 --> + <div v-if="typeselect == 3"> + <el-form :model="technologyForm" :inline="true" class="demo-form-inline" label-position="right" + label-width="80px"> + <el-form-item label="宸ュ簭:" prop="father" width="250"> + <el-select v-model="technologyForm.father" + style="width:200px;" + placeholder="璇疯緭鍏ユ垨閫夋嫨鐢熶骇瀹氶"> + <el-option value="1">1</el-option> + <el-option value="2">2</el-option> + <el-option value="3">3</el-option> + <el-option value="4">4</el-option> + </el-select> + </el-form-item> + <el-form-item label="宸ヨ壓鍚嶇О:" prop="name" width="250"> + <el-select placeholder="璇疯緭鍏ユ垨閫夋嫨宸ヨ壓鍚嶇О" + style="width:200px;" + v-model="technologyForm.name"> + <el-option value="1">1</el-option> + <el-option value="2">2</el-option> + <el-option value="3">3</el-option> + <el-option value="4">4</el-option> + </el-select> + </el-form-item> + <el-form-item label="璁惧:" prop="dg" width="250"> + <el-select placeholder="璇烽�夋嫨璁惧" + style="width:200px;" + v-model="technologyForm.dg"> + <el-option value="1">1</el-option> + <el-option value="2">2</el-option> + <el-option value="3">3</el-option> + <el-option value="4">4</el-option> + </el-select> + </el-form-item> + <el-form-item label="椤圭洰:" prop="dg" width="250"> + <el-select placeholder="璇烽�夋嫨椤圭洰" + style="width:200px;" + v-model="technologyForm.dg"> + <el-option value="1">1</el-option> + <el-option value="2">2</el-option> + <el-option value="3">3</el-option> + <el-option value="4">4</el-option> + </el-select> + </el-form-item> + <el-form-item label="鍗曚綅:" prop="unit" width="250"> + <el-input style="width:200px;" v-model="technologyForm.unit" placeholder="璇疯緭鍏ュ崟浣�"/> + </el-form-item> + <el-form-item label="鎸囨爣:" prop="pq" width="250"> + <el-input style="width:200px;" v-model="technologyForm.pq" placeholder="璇疯緭鍏ユ寚鏍�" /> + </el-form-item> + </el-form> + </div> <span slot="footer" class="dialog-footer"> <el-button @click="bomAddModelVisible = false">鍙� 娑�</el-button> - <el-button type="primary" @click="bomAddModelVisible = false">纭� 瀹�</el-button> + <el-button type="primary" @click="confirmAdd('boomForm')">纭� 瀹�</el-button> + </span> + </el-dialog> + <!-- 宸︿晶鐐瑰嚮+鎸夐挳 --> + <el-dialog title="BOM鏂板" :visible.sync="bomLeftAdd" width="29%"> + <el-form ref="leftAdd" :model="leftAdd"> + <el-form-item label="绫诲瀷"> + <el-cascader v-model="leftAdd.type" size="mini" style="width: 93%;" :options="formTypeOptions" :props="{ checkStrictly: true }" clearable></el-cascader> + </el-form-item> + </el-form> + <span slot="footer" class="dialog-footer"> + <el-button @click="bomLeftAdd = false">鍙� 娑�</el-button> + <el-button type="primary" @click="bomLeftAdd = false">纭� 瀹�</el-button> + </span> + </el-dialog> + <!-- 鍙充笂渚х偣鍑讳慨鏀规寜閽� --> + <el-dialog title="BOM淇敼" :visible.sync="bomRightUp" width="30%"> + <el-form> + 淇敼 + </el-form> + <span slot="footer" class="dialog-footer"> + <el-button @click="bomRightUp = false">鍙� 娑�</el-button> + <el-button type="primary" @click="bomRightUp = false">纭� 瀹�</el-button> + </span> + </el-dialog> + <!-- 鍙充笂渚х偣鍑诲垹闄ゆ寜閽� --> + <el-dialog title="BOM鍒犻櫎" :visible.sync="bomRightDl" width="30%"> + <el-form> + 鍒犻櫎 + </el-form> + <span slot="footer" class="dialog-footer"> + <el-button @click="bomRightDl = false">鍙� 娑�</el-button> + <el-button type="primary" @click="bomRightDl = false">纭� 瀹�</el-button> </span> </el-dialog> </div> @@ -106,10 +259,41 @@ <script> import technology from "./standard-table/technology.vue" +import material from "./standard-table/material.vue" +import target from "./standard-table/target.vue" +import product from "./standard-table/product.vue" +import bomClickAdd from '@/components/view/standard-box/bomClickAdd' export default { - components: { technology }, + components: { technology,material,target,product,bomClickAdd }, data() { return { + //宸ュ簭鍒楄〃 + fatherList:[], + //璁惧缁勫垪琛� + deviceList:[], + technologyForm:{ + father:'', + name:'', + deviceGroup:'', + productionQuota:'' + }, + targetForm:{ + pname:'', + unit:'', + internal:'', + required: '' + }, + formTypeOptions:[], + materialForm:{}, + boomRules:{ + father:{required:true,message:'宸ュ簭涓嶈兘涓虹┖',trigger:'change'}, + name:{required:true,message:'宸ヨ壓鍚嶇О涓嶈兘涓虹┖',trigger:'blur'}, + deviceGroup:{required:true,message:'璁惧缁勪笉鑳戒负绌�',trigger:'change'}, + productionQuota:[ + {required:true,message:'鐢熶骇瀹氶涓嶈兘涓虹┖',trigger:'blur'}, + {type:'number',required:true,message:'鏁版嵁绫诲瀷蹇呴』鏄函鏁板瓧',trigger:'blur'} + ] + }, // BOM鏍戞暟鎹粨鏋� list: [], search: null, @@ -118,13 +302,25 @@ checkTreeNode: {},// 鐐瑰嚮閫変腑鏍戣妭鐐� tableData: [], bomAddModelVisible: false,// 鎺у埗bom鏂板妯℃�佹鏄惁鏄剧ず - list: [], - typeselect: {}, - returntree: {}, + bomLeftAdd: false, + bomRightUp: false, + bomRightDl: false, + formTypeOptions: null, + typeselect: 0, + returntree: { + id:28, + }, version: {}, + leftAdd:{ + type: null, + father: null, + standard: null, + name: null, + specifications: null + }, VER: {}, verdata: {}, - character: '', + character: 0 } }, // watch: { @@ -136,24 +332,101 @@ // } // }, mounted() { + this.tableType=0 this.selectMaterialTree() + this.selectVersion() + console.log(this.formTypeOptions); }, methods: { + confirmAdd(formName){ + this.$refs[formName].validate(valid=>{ + if(valid){ + console.log(this.technologyForm); + this.$axios.post(this.$api.url.addTechnology, + { + "specificationsId": this.returntree.id, + "technologyDto": JSON.stringify({ + deviceGroup: this.technologyForm.deviceGroup, + father: this.technologyForm.father, + name: this.technologyForm.name, + productionQuota: this.technologyForm.productionQuota, + }) + },{ + headers: { "Content-Type": "application/json" } + }).then(res=>{ + this.$message.success(res.message); + }).catch(error=>{ + this.$message.error(error.message); + }) + this.bomAddModelVisible = false; + } + }) + }, + //鑾峰彇宸ュ簭鍒楄〃 + getFatherList(){ + this.$axios.get(this.$api.url.chooseFather,{ + params:{specificationsId : this.returntree.id} + }).then(res=>{ + this.fatherList = res.data; + }).catch(error=>{ + this.$message.error(error.message); + }) + }, + //鑾峰彇璁惧缁勫垪琛� + getDeviceList(){ + this.$axios.get(this.$api.url.chooseDevice).then(res=>{ + this.deviceList = res.data; + }).catch(error=>{ + this.$message.error(error.message); + }) + }, + showBomAddModel(){ + this.getFatherList(); + this.getDeviceList(); + this.bomAddModelVisible = true + }, + startLeftAdd(){ + + }, + 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]' + if (c.children != undefined) { + c.children.forEach(d => { + d.code = '[4]' + if (d.children != undefined) { + d.children.forEach(e => { + e.code = '[5]' + }) + } + }) + } + }) + } + }) + } + }) + }, handleSelectionChange() { }, TYPE(val) {//绫诲瀷.鏁版嵁 - console.log(val); + // console.log(val); this.typeselect = val - console.log(this.typeselect); + // console.log(this.typeselect); this.selectVersion() }, handleNodeClick(val) {//鏍戠殑鍊� - console.log(val); this.returntree = val }, - selectVersion() { - this.$axios.get(this.$api.url.selectVersion, { + async selectVersion() {//鐗堟湰 + let v=await this.$axios.get(this.$api.url.selectVersion, { params: { specificationsId: this.returntree.id, type: this.typeselect, @@ -163,36 +436,50 @@ this.version = this.verdata.map(el => { return el = `v${el}` }) - console.log(this.verdata); + // console.log("鐗堟湰"); + return this.verdata[0] + }) + this.character=v + this.VER="v"+v + this.selectAll() + }, + //鍙充晶鏁版嵁 + selectAll() { + this.$axios.get(this.$api.url.selectAll, { + params: { + specificationsId: this.returntree.id,//tree鐨勭偣鍑诲弽棣� + type: this.typeselect,//绫诲瀷 + version: this.character,//鐗堟湰 + } + }).then(res => { + let arr = res.data; + this.formatData(arr) + this.tableData = arr; }) }, + formatData(data){ + let arr = data; + for(var i=0;i<arr.length;i++){ + arr[i].rowId = Math.random(); + if(arr[i].children != undefined){ + this.formatData(arr[i].children); + } + } + }, verevent(val) { - console.log(val); + // console.log(val); let cc = val.replace('v', '') - console.log(cc); + // console.log(cc); this.character = cc this.selectAll() // const { v, ...newObj } = val; // delete newObj.v // console.log(newObj); }, - //鍙充晶鏁版嵁 - selectAll() { - console.log(this.$axios.get(this.$api.url.selectAll)); - this.$axios.get(this.$api.url.selectAll, { - params: { - specificationsId: this.returntree.id, - type: this.typeselect, - version: this.character, - } - }).then(res => { - this.tableData = res.data - }) - }, //浜旂骇鏍� selectMaterialTree() { - this.$axios.get(this.$api.url.selectTreeByMaterial).then(res => { - this.list = res.data + this.$axios.get(this.$api.url.selectTreeByMaterial).then( res => { + this.list=res.data this.list.forEach((el, idx, arr) => { if (idx == 0) { arr[idx].name = '鎴愬搧' @@ -200,24 +487,35 @@ if (idx == 1) { arr[idx].name = '鍗婃垚鍝�' } - el.children.forEach((newEl, newIdx, newArr) => { - if (newIdx == 0) { - newArr[newIdx].name = '姗¤兌杩炴帴鍣�' - } - if (newIdx == 1) { - newArr[newIdx].name = '閲戝睘杩炴帴鍣�' - } - if (newIdx == 2) { - newArr[newIdx].name = '婀挎彃鎷旂數杩炴帴鍣�' - } - if (newIdx == 3) { - newArr[newIdx].name = '鍒嗘敮缁勪欢' - } - }) }) - console.log(this.list); + this.selectDataList() + // 榛樿绗竴涓簲绾ц妭鐐规悳绱紝鏂板閰嶇疆椤� + const treeOptions = JSON.parse(JSON.stringify(this.list)); + this.getDefault(treeOptions, 0); + this.formTypeOptions = treeOptions; + this.$nextTick().then(() => { + const firstNode = document.querySelector( + ".el-tree-node .el-tree-node__children .el-tree-node .el-tree-node__children .el-tree-node .el-tree-node__children .el-tree-node .el-tree-node__children .el-tree-node" + ); + try { + firstNode.click(); + } catch (e) { + //TODO handle the exception + } + }); }) }, + getDefault(arr, index) { + for (const item of arr) { + if (item.children && item.children.length > 0) { + // 鏈夊瓙鑺傜偣 + this.getDefault(item.children, index + 1); + if (index === 2) { + item.children = null; + } + } + } + }, filterNode(value, data) { if (!value) return true; return data.label.indexOf(value) !== -1; @@ -257,7 +555,33 @@ this.tableData = productList break; } + }, + replaceProp(arr){ + for (let index = 0; index < arr.length; index++) { + let element = arr[index]; + element.label=element.name + element.value=element.name + // if() + } } + }, + watch:{ + leftAdd: { + handler(newVal, oldVal) { + console.log("鏂扮殑",newVal); + console.log("鏃х殑",oldVal); + }, + deep: true // 娣卞害鐩戝惉瀵硅薄鍐呴儴灞炴�х殑鍙樺寲锛屽彲閫夌殑 + }, + bomLeftAdd:{ + handler(newval,oldVal){ + if(newval){ + let treeOptions = JSON.parse(JSON.stringify(this.list)); + console.log(treeOptions); + + } + } + } } } </script> -- Gitblit v1.9.3