| | |
| | | <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-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> |
| | |
| | | <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> |
| | | <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> |
| | |
| | | 询</span></el-button> |
| | | </div> |
| | | |
| | | <!-- <div v-if="this.typeselect == 0"> |
| | | 工艺路线 |
| | | <div class="contentTable" v-if="this.typeselect == 0"> |
| | | <technology :tableType="tableType" :tableData="tableData"></technology> |
| | | </div> |
| | | <div v-if="this.typeselect == 1"> |
| | | 技术指标 |
| | | </div> |
| | | <div v-if="this.typeselect == 1">技术指标</div> |
| | | <div v-if="this.typeselect == 2"> |
| | | 物料清单 |
| | | <bom :tableType="tableType" :tableData="tableData"></bom> |
| | | </div> |
| | | <div v-if="this.typeselect == 3"> |
| | | 生产工艺 |
| | | </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> --> |
| | | |
| | | <div class="table"> |
| | | <technology v-if="tableData.length !== 0" :tableType="tableType" :tableData="tableData"></technology> |
| | | </div> |
| | | <div v-if="this.typeselect == 3">生产工艺</div> |
| | | |
| | | </div> |
| | | </div> |
| | | |
| | |
| | | |
| | | <script> |
| | | import technology from "./standard-table/technology.vue" |
| | | import material from "./standard-table/material.vue" |
| | | import bom from "./standard-table/bom.vue" |
| | | export default { |
| | | components: { technology }, |
| | | components: { technology,material,bom }, |
| | | |
| | | data() { |
| | | return { |
| | | // BOM树数据结构 |
| | |
| | | checkTreeNode: {},// 点击选中树节点 |
| | | tableData: [], |
| | | bomAddModelVisible: false,// 控制bom新增模态框是否显示 |
| | | list: [], |
| | | typeselect: 0, |
| | | returntree: { |
| | | id:28, |
| | |
| | | // } |
| | | // }, |
| | | mounted() { |
| | | this.tableType=0 |
| | | this.selectMaterialTree() |
| | | this.selectVersion() |
| | | this.selectAll() |
| | | }, |
| | | 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]' |
| | | }) |
| | | } |
| | | }) |
| | | } |
| | | }) |
| | | } |
| | | }) |
| | | } |
| | | }) |
| | | }, |
| | | 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); |
| | | // 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, |
| | |
| | | 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; |
| | | console.log(arr); |
| | | for(var i=0;i<arr.length;i++){ |
| | | arr[i].id = "0" + i; |
| | | } |
| | | this.tableData = arr; |
| | | }) |
| | | }, |
| | | 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 = '成品' |
| | |
| | | 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; |
| | |
| | | <style scoped> |
| | | .standard {} |
| | | |
| | | .standard .contentTable{ |
| | | } |
| | | |
| | | .standard .title .el-button { |
| | | height: 32px; |
| | | border: 1px solid rgba(190, 190, 190, 0.44); |