| | |
| | | <div class="standard"> |
| | | <div class="title"> |
| | | <el-row> |
| | | <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 |
| | | > |
| | | <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> |
| | | <el-button icon="el-icon-plus">æ°å¢çæ¬</el-button> |
| | | <!-- <el-button icon="el-icon-edit-outline">ä¿®æ¹</el-button> --> |
| | | <el-button icon="el-icon-edit-outline">ä¿®æ¹</el-button> |
| | | <el-button 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-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' }" |
| | | node-key="id" |
| | | :filter-node-method="filterNode" |
| | | @node-click="handleNodeClick" |
| | | highlight-current |
| | | > |
| | | <el-tree :data="list" ref="tree" :default-expand-all="false" :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 != '[5]' |
| | | ? 'el-icon-folder-opened' |
| | | : 'el-icon-tickets' |
| | | }`" |
| | | ></i> |
| | | {{ data.name }}</span |
| | | > |
| | | <!-- <el-button type="text" size="mini" @click.stop="remove(node, data)"> |
| | | <span><i :class="`node_i ${data.code != '[4]' ? 'el-icon-folder-opened' : 'el-icon-tickets'}`"></i> |
| | | {{ data.name }}</span> |
| | | <el-button type="text" size="mini" @click.stop="remove(node, data)"> |
| | | <i class="el-icon-delete"></i> |
| | | </el-button> --> |
| | | </el-button> |
| | | </div> |
| | | </el-tree> |
| | | </div> |
| | | |
| | | |
| | | <div class="right"> |
| | | <div class="choose"> |
| | | <span>ç±»åï¼</span> |
| | | <el-select |
| | | v-model="tableType" |
| | | size="small" |
| | | placeholder="è¯·éæ©" |
| | | @change="TYPE" |
| | | style="width: 224px; margin-right: 52px" |
| | | > |
| | | <el-select v-model="tableType" size="small" placeholder="è¯·éæ©" @change="TYPE" |
| | | style="width: 224px;margin-right: 52px;"> |
| | | <el-option :value="0" label="å·¥èºè·¯çº¿"></el-option> |
| | | <el-option :value="1" label="ææ¯ææ "></el-option> |
| | | <el-option :value="2" label="ç©ææ¸
å"></el-option> |
| | | <el-option :value="3" label="ç产工èº"></el-option> |
| | | </el-select> |
| | | <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="è¯·éæ©" |
| | | > |
| | | <el-option |
| | | v-for="item in version" |
| | | :key="item" |
| | | :label="item" |
| | | :value="item" |
| | | > |
| | | <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="è¯·éæ©"> |
| | | <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 |
| | | size="mini" |
| | | type="primary" |
| | | style="background: #004ea2" |
| | | @click="selectProductTableData" |
| | | ><span>æ¥ è¯¢</span></el-button |
| | | > |
| | | <el-button 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"> |
| | | ææ¯ææ |
| | | </div> |
| | | <div v-if="this.typeselect == 2"> |
| | | <material :tableType="tableType" :tableData="tableData"></material> |
| | | </div> |
| | | <div v-if="this.typeselect == 3"> |
| | | çäº§å·¥èº |
| | | </div> |
| | | <!-- <div class="table"> |
| | | <technology v-if="tableData.length !== 0" :tableType="tableType" :tableData="tableData"></technology> |
| | | </div> --> |
| | | <!-- <div class="table"> |
| | | <technology v-if="tableData.length !== 0" :tableType="tableType" :tableData="tableData"></technology> |
| | | </div> --> |
| | | </div> |
| | | </div> |
| | | |
| | | |
| | | <div class="bom-add-model"> |
| | | <el-dialog title="BOMæ°å¢" :visible.sync="bomAddModelVisible" width="30%"> |
| | | <el-form> </el-form> |
| | | <el-form> |
| | | |
| | | </el-form> |
| | | <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="bomAddModelVisible = false">ç¡® å®</el-button> |
| | | </span> |
| | | </el-dialog> |
| | | </div> |
| | |
| | | </template> |
| | | |
| | | <script> |
| | | import technology from "./standard-table/technology.vue"; |
| | | import technology from "./standard-table/technology.vue" |
| | | import material from "./standard-table/material.vue" |
| | | export default { |
| | | components: { technology }, |
| | | components: { technology,material }, |
| | | |
| | | data() { |
| | | return { |
| | | // BOMæ æ°æ®ç»æ |
| | | list: [], |
| | | search: null, |
| | | tableType: 0, // è¡¨æ ¼ç±»å 1ï¼ææ¯ææ ï¼0ï¼å·¥èºè·¯çº¿ |
| | | searchName: "", // æ¥è¯¢æ¡ä»¶-åç§° |
| | | checkTreeNode: {}, // ç¹å»é䏿 èç¹ |
| | | tableType: 1, // è¡¨æ ¼ç±»å 1ï¼ææ¯ææ ï¼0ï¼å·¥èºè·¯çº¿ |
| | | searchName: "",// æ¥è¯¢æ¡ä»¶-åç§° |
| | | checkTreeNode: {},// ç¹å»é䏿 èç¹ |
| | | tableData: [], |
| | | bomAddModelVisible: false, // æ§å¶bomæ°å¢æ¨¡ææ¡æ¯å¦æ¾ç¤º |
| | | bomAddModelVisible: false,// æ§å¶bomæ°å¢æ¨¡ææ¡æ¯å¦æ¾ç¤º |
| | | list: [], |
| | | typeselect: {}, |
| | | returntree: {}, |
| | | typeselect: 0, |
| | | returntree: { |
| | | id:28, |
| | | }, |
| | | version: {}, |
| | | VER: {}, |
| | | verdata: {}, |
| | |
| | | // }, |
| | | mounted() { |
| | | this.selectMaterialTree() |
| | | this.selectVersion() |
| | | this.selectAll() |
| | | this.selectVersion() |
| | | }, |
| | | methods: { |
| | | 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]"; |
| | | }); |
| | | } |
| | | }); |
| | | } |
| | | }); |
| | | } |
| | | }); |
| | | } |
| | | }); |
| | | this.upIndex++; |
| | | handleSelectionChange() { |
| | | |
| | | }, |
| | | handleSelectionChange() {}, |
| | | TYPE(val) { |
| | | //ç±»å.æ°æ® |
| | | TYPE(val) {//ç±»å.æ°æ® |
| | | console.log(val); |
| | | this.typeselect = val; |
| | | console.log(this.typeselect); |
| | | this.selectVersion(); |
| | | this.typeselect = val |
| | | |
| | | // console.log(this.typeselect); |
| | | this.selectVersion() |
| | | }, |
| | | handleNodeClick(val) { |
| | | //æ çå¼ |
| | | handleNodeClick(val) {//æ çå¼ |
| | | console.log(val); |
| | | this.returntree = val; |
| | | this.returntree = val |
| | | }, |
| | | selectVersion() {//çæ¬ |
| | | selectVersion() {//çæ¬ |
| | | this.$axios.get(this.$api.url.selectVersion, { |
| | | params: { |
| | | specificationsId: this.returntree.id, |
| | | type: this.typeselect, |
| | | } |
| | | }).then((res) => { |
| | | this.verdata = res.data; |
| | | this.version = this.verdata.map((el) => { |
| | | return (el = `v${el}`); |
| | | }); |
| | | console.log(this.verdata); |
| | | }); |
| | | }, |
| | | verevent(val) { |
| | | console.log(val); |
| | | let cc = val.replace("v", ""); |
| | | console.log(cc); |
| | | this.character = cc; |
| | | this.selectAll(); |
| | | // const { v, ...newObj } = val; |
| | | // delete newObj.v |
| | | // console.log(newObj); |
| | | }).then(res => { |
| | | this.verdata = res.data |
| | | this.version = this.verdata.map(el => { |
| | | return el = `v${el}` |
| | | }) |
| | | console.log(this.verdata); |
| | | }) |
| | | }, |
| | | //å³ä¾§æ°æ® |
| | | 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; |
| | | }); |
| | | this.$axios.get(this.$api.url.selectAll, { |
| | | params: { |
| | | specificationsId: this.returntree.id,//treeçç¹å»åé¦ |
| | | type: this.typeselect,//ç±»å |
| | | version: this.character,//çæ¬ |
| | | } |
| | | }).then(res => { |
| | | console.log(res.data); |
| | | this.tableData = res.data |
| | | }) |
| | | }, |
| | | verevent(val) { |
| | | console.log(val); |
| | | let cc = val.replace('v', '') |
| | | console.log(cc); |
| | | this.character = cc |
| | | this.selectAll() |
| | | // const { v, ...newObj } = val; |
| | | // delete newObj.v |
| | | // console.log(newObj); |
| | | }, |
| | | //äºçº§æ |
| | | 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 = "æå"; |
| | | arr[idx].name = 'æå' |
| | | } |
| | | if (idx == 1) { |
| | | arr[idx].name = "åæå"; |
| | | arr[idx].name = 'åæå' |
| | | } |
| | | el.children.forEach((newEl, newIdx, newArr) => { |
| | | if (newIdx == 0) { |
| | | newArr[newIdx].name = "æ©¡è¶è¿æ¥å¨"; |
| | | newArr[newIdx].name = 'æ©¡è¶è¿æ¥å¨' |
| | | } |
| | | if (newIdx == 1) { |
| | | newArr[newIdx].name = "éå±è¿æ¥å¨"; |
| | | newArr[newIdx].name = 'éå±è¿æ¥å¨' |
| | | } |
| | | if (newIdx == 2) { |
| | | newArr[newIdx].name = "湿ææçµè¿æ¥å¨"; |
| | | newArr[newIdx].name = '湿ææçµè¿æ¥å¨' |
| | | } |
| | | if (newIdx == 3) { |
| | | newArr[newIdx].name = "忝ç»ä»¶"; |
| | | newArr[newIdx].name = '忝ç»ä»¶' |
| | | } |
| | | }); |
| | | }); |
| | | }) |
| | | }) |
| | | console.log(this.list); |
| | | this.selectDataList() |
| | | }); |
| | | }) |
| | | }, |
| | | filterNode(value, data) { |
| | | if (!value) return true; |
| | |
| | | }, |
| | | 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) => {}); |
| | | 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 => { }) |
| | | }, |
| | | nodeOpen(data, node, el) { |
| | | $($(el.$el).find(".node_i")[0]).attr( |
| | | "class", |
| | | "node_i el-icon-folder-opened" |
| | | ); |
| | | $($(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"); |
| | | $($(el.$el).find('.node_i')[0]).attr('class', 'node_i el-icon-folder') |
| | | }, |
| | | async selectProductTableData() { |
| | | switch (this.tableType) { |
| | | case 0: |
| | | const { data: technologyList } = await this.$axios.get( |
| | | this.$api.url.selectTechnologyByMaterial, |
| | | { |
| | | params: { |
| | | specificationId: this.checkTreeNode.id, |
| | | technologyName: this.searchName, |
| | | }, |
| | | } |
| | | ); |
| | | this.tableData = technologyList; |
| | | const { data: technologyList } = await this.$axios.get(this.$api.url.selectTechnologyByMaterial, { params: { specificationId: this.checkTreeNode.id, technologyName: this.searchName } }) |
| | | this.tableData = technologyList |
| | | break; |
| | | case 1: |
| | | const { data: productList } = await this.$axios.get( |
| | | this.$api.url.selectProductByMaterial, |
| | | { |
| | | params: { |
| | | specifications: this.checkTreeNode.id, |
| | | project: this.searchName, |
| | | }, |
| | | } |
| | | ); |
| | | const { data: productList } = await this.$axios.get(this.$api.url.selectProductByMaterial, { params: { specifications: this.checkTreeNode.id, project: this.searchName } }) |
| | | productList.forEach((item, index) => { |
| | | item.name = item.father; |
| | | item.index = index + 1; |
| | | item.id = item.father; |
| | | item.name = item.father |
| | | item.index = index + 1 |
| | | item.id = item.father |
| | | if (item.children.length === 1) { |
| | | productList[index] = { |
| | | ...item.children[0], |
| | | index: index + 1, |
| | | name: item.father, |
| | | }; |
| | | productList[index] = { ...item.children[0], index: index + 1, name: item.father } |
| | | } |
| | | }); |
| | | this.tableData = productList; |
| | | }) |
| | | this.tableData = productList |
| | | break; |
| | | } |
| | | }, |
| | | }, |
| | | }; |
| | | } |
| | | } |
| | | } |
| | | </script> |
| | | |
| | | |
| | | <style scoped> |
| | | .standard { |
| | | } |
| | | .standard {} |
| | | |
| | | .standard .title .el-button { |
| | | height: 32px; |
| | |
| | | |
| | | .el-icon-delete { |
| | | display: none; |
| | | color: #004ea2; |
| | | color: #004EA2; |
| | | } |
| | | |
| | | .custom-tree-node:hover .el-icon-delete { |
| | |
| | | } |
| | | |
| | | .standard .title .el-button--default { |
| | | color: #004ea2; |
| | | color: #004EA2; |
| | | } |
| | | |
| | | .standard |
| | | .thing |
| | | .left |
| | | .el-tree--highlight-current |
| | | .el-tree-node.is-current |
| | | > .el-tree-node__content { |
| | | .standard .thing .left .el-tree--highlight-current .el-tree-node.is-current>.el-tree-node__content { |
| | | background: rgba(58, 124, 253, 0.3); |
| | | color: #004ea2; |
| | | color: #004EA2; |
| | | } |
| | | |
| | | .el-tree-node__content { |