| | |
| | | <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 { |