| | |
| | | <template> |
| | | <div class="standard-library-main"> |
| | | <div class="content-main"> |
| | | <div class="library-bom" style="width: 300px"> |
| | | <el-input |
| | | v-model="filterText" |
| | | placeholder="输入关键字进行过滤" |
| | | ></el-input> |
| | | <el-button type="text">全部</el-button> |
| | | <el-tree |
| | | ref="tree" |
| | | style="width: 100%" |
| | | class="filter-tree" |
| | | :data="standardTree" |
| | | :props="defaultProps" |
| | | node-key="id" |
| | | highlight-current |
| | | default-expand-all |
| | | :filter-node-method="filterNode" |
| | | :render-content="renderContent" |
| | | @node-click="nodeClick" |
| | | /> |
| | | </div> |
| | | <div class="library-table" style="width: 80%"> |
| | | <div class="table-header"> |
| | | <div class="serve-btn"> |
| | | <span class="tipMsg">{{ msg !== "" ? msg : "" }}</span> |
| | | <el-select |
| | | v-model="versionValue" |
| | | @change="changeSelect" |
| | | placeholder="请选择版本号" |
| | | > |
| | | <el-option |
| | | v-for="item in options" |
| | | :key="item.value" |
| | | :label="item.label" |
| | | :value="item.value" |
| | | > |
| | | </el-option> |
| | | </el-select> |
| | | <el-button type="primary" @click="addVersionFun" |
| | | >新增版本号</el-button |
| | | > |
| | | <el-button |
| | | type="primary" |
| | | icon="el-icon-plus" |
| | | @click="addTreeFormVisible = true" |
| | | >新增</el-button |
| | | > |
| | | <el-button |
| | | class="top_div_button" |
| | | icon="el-icon-delete-solid" |
| | | style="color: #00a5ff" |
| | | @click="deleteListClick" |
| | | >删除</el-button |
| | | > |
| | | </div> |
| | | </div> |
| | | <div class="table-box"> |
| | | <el-table |
| | | :data="tableData" |
| | | style="width: 100%; margin-bottom: 20px" |
| | | row-key="id" |
| | | border |
| | | height="calc(100vh - 250px)" |
| | | default-expand-all |
| | | ref="multipleTable" |
| | | @select="selectTr" |
| | | @select-all="selectAll" |
| | | @selection-change="handleSelectionChange" |
| | | :tree-props="{ children: 'children', hasChildren: 'hasChildren' }" |
| | | > |
| | | <el-table-column type="selection" label="序号"> </el-table-column> |
| | | <el-table-column |
| | | type="index" |
| | | width="50px" |
| | | label="序号" |
| | | ></el-table-column> |
| | | <el-table-column label="项目名称" sortable> |
| | | <template scope="scope"> |
| | | <el-tag |
| | | ><div |
| | | class="firstDiv" |
| | | :style="`color: ${ |
| | | <div class="standard-library-main"> |
| | | <div class="content-main"> |
| | | <div class="library-bom" style="width: 300px"> |
| | | <el-input v-model="filterText" placeholder="输入关键字进行过滤"></el-input> |
| | | <el-button type="text">全部</el-button> |
| | | <el-tree ref="tree" style="width: 100%" class="filter-tree" :data="standardTree" :props="defaultProps" |
| | | node-key="id" highlight-current default-expand-all :filter-node-method="filterNode" |
| | | :render-content="renderContent" @node-click="nodeClick" /> |
| | | </div> |
| | | <div class="library-table" style="width: 80%"> |
| | | <div class="table-header"> |
| | | <div class="serve-btn"> |
| | | <span class="tipMsg">{{ msg !== "" ? msg : "" }}</span> |
| | | <el-select v-model="versionValue" @change="changeSelect" placeholder="请选择版本号"> |
| | | <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> |
| | | </el-option> |
| | | </el-select> |
| | | <el-button type="primary" @click="addVersionFun">新增版本号</el-button> |
| | | <el-button type="primary" icon="el-icon-plus" @click="addTreeFormVisible = true">新增</el-button> |
| | | <el-button class="top_div_button" icon="el-icon-delete-solid" style="color: #00a5ff" |
| | | @click="deleteListClick">删除</el-button> |
| | | </div> |
| | | </div> |
| | | <div class="table-box"> |
| | | <el-table :data="tableData" style="width: 100%; margin-bottom: 20px" row-key="id" border |
| | | height="calc(100vh - 250px)" default-expand-all ref="multipleTable" @select="selectTr" |
| | | @select-all="selectAll" @selection-change="handleSelectionChange" |
| | | :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"> |
| | | <el-table-column type="selection" label="序号"> </el-table-column> |
| | | <el-table-column type="index" width="50px" label="序号"></el-table-column> |
| | | <el-table-column label="项目名称" sortable> |
| | | <template scope="scope"> |
| | | <el-tag> |
| | | <div class="firstDiv" :style="`color: ${ |
| | | scope.row.code == '[1]' ? '#16a7ff' : '#58c173' |
| | | }`" |
| | | > |
| | | {{ scope.row.code == "[1]" ? "01" : "02" }} |
| | | </div> |
| | | <span style="color: black">{{ scope.row.name }}</span></el-tag |
| | | > |
| | | </template> |
| | | </el-table-column> |
| | | <el-table-column |
| | | prop="unit" |
| | | label="单位" |
| | | sortable |
| | | ></el-table-column> |
| | | <el-table-column label="标准值" sortable> |
| | | <template scope="scope"> |
| | | <el-input |
| | | v-if="scope.row.edit === true || scope.row.code === '[2]'" |
| | | @blur="requiredOnfocus(scope)" |
| | | v-model="scope.row.required" |
| | | placeholder="请输入标准值" |
| | | ></el-input> |
| | | </template> |
| | | </el-table-column> |
| | | <el-table-column prop="internal" label="内控值" sortable> |
| | | <template scope="scope"> |
| | | <el-input |
| | | v-if="scope.row.edit === true || scope.row.code === '[2]'" |
| | | @blur="requiredOnfocus(scope)" |
| | | v-model="scope.row.internal" |
| | | placeholder="请输入内控值" |
| | | ></el-input> |
| | | </template> |
| | | </el-table-column> |
| | | </el-table> |
| | | <!-- 弹出表单页 --> |
| | | <div> |
| | | <!-- --> |
| | | </div> |
| | | </div> |
| | | </div> |
| | | </div> |
| | | <el-dialog |
| | | class="addTree" |
| | | title="添加指标" |
| | | width="28%" |
| | | :visible.sync="addTreeFormVisible" |
| | | @close="closeAddTreeForm" |
| | | > |
| | | <el-form v-model="addTreeForm" label-position="top"> |
| | | <el-form-item label="上级"> |
| | | <el-cascader |
| | | v-model="addTreeForm.addTypeArr" |
| | | :options="formTypeOptions" |
| | | :props="{ ...defaultProps, checkStrictly: true }" |
| | | clearable |
| | | @change="changeCascader" |
| | | /> |
| | | </el-form-item> |
| | | <el-form-item |
| | | v-show="addTreeForm.addTypeArr.length < 2" |
| | | label="物料名称" |
| | | > |
| | | <el-input v-model="addTreeForm.materialName" /> |
| | | </el-form-item> |
| | | <el-form-item |
| | | v-show="addTreeForm.addTypeArr.length < 3" |
| | | label="执行标准" |
| | | > |
| | | <el-input v-model="addTreeForm.standardName" /> |
| | | </el-form-item> |
| | | <el-form-item |
| | | v-show="addTreeForm.addTypeArr.length < 4" |
| | | label="规格型号" |
| | | > |
| | | <el-input v-model="addTreeForm.specificationsName" /> |
| | | </el-form-item> |
| | | </el-form> |
| | | <div slot="footer" class="dialog-footer"> |
| | | <el-button type="primary" @click="subAddTreeForm">确 定</el-button> |
| | | <el-button @click="addTreeFormVisible = false">取 消</el-button> |
| | | </div> |
| | | </el-dialog> |
| | | </div> |
| | | }`"> |
| | | {{ scope.row.code == "[1]" ? "01" : "02" }} |
| | | </div> |
| | | <span style="color: black">{{ scope.row.name }}</span> |
| | | </el-tag> |
| | | </template> |
| | | </el-table-column> |
| | | <el-table-column prop="unit" label="单位" sortable></el-table-column> |
| | | <el-table-column label="标准值" sortable> |
| | | <template scope="scope"> |
| | | <el-input v-if="scope.row.edit === true || scope.row.code === '[2]'" @blur="requiredOnfocus(scope)" |
| | | v-model="scope.row.required" placeholder="请输入标准值"></el-input> |
| | | </template> |
| | | </el-table-column> |
| | | <el-table-column prop="internal" label="内控值" sortable> |
| | | <template scope="scope"> |
| | | <el-input v-if="scope.row.edit === true || scope.row.code === '[2]'" @blur="requiredOnfocus(scope)" |
| | | v-model="scope.row.internal" placeholder="请输入内控值"></el-input> |
| | | </template> |
| | | </el-table-column> |
| | | </el-table> |
| | | <!-- 弹出表单页 --> |
| | | <div> |
| | | <!-- --> |
| | | </div> |
| | | </div> |
| | | </div> |
| | | </div> |
| | | <el-dialog class="addTree" title="添加标准指标" width="28%" :visible.sync="addTreeFormVisible"> |
| | | <el-form v-model="addTreeForm" label-position="top"> |
| | | <el-form-item label="标准类型"> |
| | | <el-cascader v-model="addTreeForm.addTypeArr" :options="formTypeOptions" |
| | | :props="{ ...defaultProps, checkStrictly: true }" clearable @change="changeCascader"/> |
| | | </el-form-item> |
| | | <el-form-item v-show="addTreeForm.addTypeArr.length < 2" label="物料名称"> |
| | | <el-input v-model="addTreeForm.materialName" /> |
| | | </el-form-item> |
| | | <el-form-item v-show="addTreeForm.addTypeArr.length < 3" label="执行标准"> |
| | | <el-input v-model="addTreeForm.standardName" /> |
| | | </el-form-item> |
| | | <el-form-item v-show="addTreeForm.addTypeArr.length < 4" label="规格型号"> |
| | | <el-input v-model="addTreeForm.specificationsName" /> |
| | | </el-form-item> |
| | | </el-form> |
| | | <div slot="footer" class="dialog-footer"> |
| | | <el-button type="primary" @click="subAddTreeForm">确 定</el-button> |
| | | <el-button @click="addTreeFormVisible = false">取 消</el-button> |
| | | </div> |
| | | </el-dialog> |
| | | </div> |
| | | </template> |
| | | |
| | | <script> |
| | | import { |
| | | getMaterialList, |
| | | getProductList, |
| | | addMaterial, |
| | | addStandards, |
| | | addSpecifications, |
| | | deleteListApi, |
| | | blurUpdateApi, |
| | | getVersion, |
| | | addVersion, |
| | | } from "@/api/standardLibrary"; |
| | | import { |
| | | getMaterialList, |
| | | getProductList, |
| | | addMaterial, |
| | | addStandards, |
| | | addSpecifications, |
| | | deleteListApi, |
| | | blurUpdateApi, |
| | | getVersion, |
| | | addVersion, |
| | | } from "@/api/standardLibrary"; |
| | | |
| | | import { selectproductModelApi } from "@/api/basicData/index"; |
| | | export default { |
| | | data() { |
| | | return { |
| | | options: [], |
| | | versionValue: "", |
| | | deleteList: [], |
| | | msg: "", |
| | | isAllSelect: false, |
| | | addTreeFormVisible: false, |
| | | filterText: "", |
| | | // 标准库bom树 |
| | | standardTree: [], |
| | | // bom的,默认配置值 |
| | | defaultProps: { |
| | | children: "children", |
| | | label: "name", |
| | | value: "id", |
| | | }, |
| | | tableData: [], |
| | | oldtableData: [], |
| | | tablespecifications: [], |
| | | // 选中的节点数据 |
| | | selectData: {}, |
| | | formTypeOptions: [], |
| | | addTreeForm: { |
| | | addTypeArr: [], |
| | | }, |
| | | }; |
| | | }, |
| | | watch: { |
| | | filterText(val) { |
| | | this.$refs.tree.filter(val); |
| | | }, |
| | | }, |
| | | created() { |
| | | this.getStandardTree(); |
| | | }, |
| | | mounted() {}, |
| | | methods: { |
| | | async initSelect() { |
| | | this.options = []; |
| | | this.versionValue = ""; |
| | | const response = await getVersion({ |
| | | specificationsId: this.selectData.id, |
| | | }); |
| | | if (response.code === 200 && response.data.length > 0) { |
| | | this.getTableByClick(this.selectData, response.data[0]); |
| | | for (let i = 0; i < response.data.length; i++) { |
| | | this.options.push({ |
| | | value: response.data[i], |
| | | label: "V" + response.data[i], |
| | | }); |
| | | this.versionValue = response.data[0]; |
| | | } |
| | | } |
| | | }, |
| | | changeSelect() { |
| | | this.tableData = []; |
| | | this.getTableByClick(this.selectData, this.versionValue); |
| | | }, |
| | | async insertVersion() { |
| | | const resp = await addVersion({ specificationsId: this.selectData.id }); |
| | | if (resp.code === 200) { |
| | | this.initSelect(); |
| | | this.$message({ |
| | | type: "success", |
| | | message: resp.message, |
| | | }); |
| | | } |
| | | }, |
| | | addVersionFun() { |
| | | this.$confirm("确认添加新的版本号吗?", "提示", { |
| | | confirmButtonText: "确定", |
| | | cancelButtonText: "取消", |
| | | type: "warning", |
| | | }) |
| | | .then(() => { |
| | | this.insertVersion(); |
| | | }) |
| | | .catch(() => {}); |
| | | }, |
| | | filterNode(value, data) { |
| | | if (!value) return true; |
| | | return data.name.indexOf(value) !== -1; |
| | | }, |
| | | // 获取bom树的标准数据 |
| | | async getStandardTree() { |
| | | const { data } = await getMaterialList(); |
| | | this.standardTree = data.map((item) => { |
| | | let name = null; |
| | | switch (item.type) { |
| | | case 0: |
| | | name = "原材料"; |
| | | break; |
| | | case 1: |
| | | name = "成品"; |
| | | break; |
| | | } |
| | | return { |
| | | ...item, |
| | | id: item.type, |
| | | name, |
| | | }; |
| | | }); |
| | | // formTypeOptions |
| | | // 默认第一个四级节点搜索,新增配置项 |
| | | const treeOptions = JSON.parse(JSON.stringify(this.standardTree)); |
| | | 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" |
| | | ); |
| | | firstNode.click(); |
| | | }); |
| | | }, |
| | | 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; |
| | | } |
| | | } |
| | | } |
| | | }, |
| | | // 点击bom树节点方法 |
| | | async nodeClick(data, node, element) { |
| | | // 是子节点 |
| | | if (node.level === 4) { |
| | | this.getParentData(node.parent, node.data.name); |
| | | // 存下选中节点 |
| | | this.selectData = data; |
| | | this.getTableByClick(data, this.versionValue); |
| | | this.initSelect(); |
| | | } |
| | | if (!("children" in data)) { |
| | | return; |
| | | } |
| | | }, |
| | | // 获取树路径 |
| | | getParentData(node, name) { |
| | | if (node !== null) { |
| | | if (node.data.name !== undefined) { |
| | | this.msg = node.data.name + " > " + name; |
| | | } |
| | | this.getParentData(node.parent, this.msg); |
| | | } |
| | | }, |
| | | async getTableByClick(data, versionVal) { |
| | | await getProductList({ |
| | | specificationsId: data.id, |
| | | version: versionVal, |
| | | }).then((res) => { |
| | | res.data.forEach((i) => { |
| | | if (i.name === undefined) { |
| | | i.name = i.children[0].name; |
| | | i.unit = i.children[0].unit; |
| | | i.id = i.children[0].id; |
| | | i.required = i.children[0].required; |
| | | i.internal = i.children[0].internal; |
| | | i.edit = true; |
| | | delete i.children; |
| | | } |
| | | }); |
| | | this.tableData = res.data; |
| | | this.selectDataList(); |
| | | }); |
| | | }, |
| | | specificationDetails(row) { |
| | | // 跳转产品规格详情页 |
| | | this.$router.push(`/standardLibrary/SpecificationDetails/${row.id}`); |
| | | }, |
| | | renderContent(h, { node, data, store }) { |
| | | // 判断是否是父节点或文件夹 |
| | | const isFolder = "children" in data; |
| | | console.log(`output->data`, isFolder); |
| | | return ( |
| | | <span class="tree-node"> |
| | | {isFolder ? ( |
| | | <i |
| | | class={ |
| | | node.expanded |
| | | ? "el-icon-folder-opened blue-folder" |
| | | : "el-icon-folder blue-folder" |
| | | } |
| | | ></i> |
| | | ) : ( |
| | | <i class="el-icon-document blue-folder"></i> |
| | | )} |
| | | <div class="tree-lable"> |
| | | [{node.level}] {data.name} |
| | | </div> |
| | | </span> |
| | | ); |
| | | }, |
| | | async subAddTreeForm() { |
| | | this.addTreeFormVisible = false; |
| | | let res = null; |
| | | try { |
| | | switch (this.addTreeForm.addTypeArr.length) { |
| | | case 1: |
| | | console.log(this.addTreeForm); |
| | | res = await addMaterial({ |
| | | ...this.addTreeForm, |
| | | type: this.addTreeForm.addTypeArr.pop(), |
| | | }); |
| | | break; |
| | | case 2: |
| | | console.log(this.addTreeForm); |
| | | res = await addStandards({ |
| | | ...this.addTreeForm, |
| | | materialId: this.addTreeForm.addTypeArr.pop(), |
| | | }); |
| | | break; |
| | | case 3: |
| | | console.log(this.addTreeForm); |
| | | res = await addSpecifications({ |
| | | ...this.addTreeForm, |
| | | standardId: this.addTreeForm.addTypeArr.pop(), |
| | | }); |
| | | break; |
| | | } |
| | | } catch (error) { |
| | | this.$message.error("添加失败"); |
| | | } |
| | | import { |
| | | selectproductModelApi |
| | | } from "@/api/basicData/index"; |
| | | import { |
| | | Tree |
| | | } from "element-ui"; |
| | | export default { |
| | | data() { |
| | | return { |
| | | options: [], |
| | | versionValue: "", |
| | | deleteList: [], |
| | | msg: "", |
| | | isAllSelect: false, |
| | | addTreeFormVisible: false, |
| | | filterText: "", |
| | | // 标准库bom树 |
| | | standardTree: [], |
| | | // bom的,默认配置值 |
| | | defaultProps: { |
| | | children: "children", |
| | | label: "name", |
| | | value: "id", |
| | | }, |
| | | tableData: [], |
| | | oldtableData: [], |
| | | tablespecifications: [], |
| | | // 选中的节点数据 |
| | | selectData: {}, |
| | | formTypeOptions: [], |
| | | addTreeForm: { |
| | | addTypeArr: [], |
| | | } |
| | | }; |
| | | }, |
| | | watch: { |
| | | filterText(val) { |
| | | this.$refs.tree.filter(val); |
| | | } |
| | | }, |
| | | created() { |
| | | this.getStandardTree(); |
| | | }, |
| | | mounted() {}, |
| | | methods: { |
| | | async initSelect() { |
| | | this.options = []; |
| | | this.versionValue = ""; |
| | | const response = await getVersion({ |
| | | specificationsId: this.selectData.id, |
| | | }); |
| | | if (response.code === 200 && response.data.length > 0) { |
| | | this.getTableByClick(this.selectData, response.data[0]); |
| | | for (let i = 0; i < response.data.length; i++) { |
| | | this.options.push({ |
| | | value: response.data[i], |
| | | label: "V" + response.data[i], |
| | | }); |
| | | this.versionValue = response.data[0]; |
| | | } |
| | | } |
| | | }, |
| | | changeSelect() { |
| | | this.tableData = []; |
| | | this.getTableByClick(this.selectData, this.versionValue); |
| | | }, |
| | | async insertVersion() { |
| | | const resp = await addVersion({ |
| | | specificationsId: this.selectData.id |
| | | }); |
| | | if (resp.code === 200) { |
| | | this.initSelect(); |
| | | this.$message({ |
| | | type: "success", |
| | | message: resp.message, |
| | | }); |
| | | } |
| | | }, |
| | | addVersionFun() { |
| | | this.$confirm("确认添加新的版本号吗?", "提示", { |
| | | confirmButtonText: "确定", |
| | | cancelButtonText: "取消", |
| | | type: "warning", |
| | | }) |
| | | .then(() => { |
| | | this.insertVersion(); |
| | | }) |
| | | .catch(() => {}); |
| | | }, |
| | | filterNode(value, data) { |
| | | if (!value) return true; |
| | | return data.name.indexOf(value) !== -1; |
| | | }, |
| | | // 获取bom树的标准数据 |
| | | async getStandardTree() { |
| | | let { |
| | | data |
| | | } = await getMaterialList(); |
| | | if (data.length < 2) { |
| | | if (data.length == 0) { |
| | | data = [{ |
| | | type: 0 |
| | | }, { |
| | | type: 1 |
| | | }] |
| | | } else { |
| | | data[1] = { |
| | | type: data[0].type == 1 ? 0 : 1 |
| | | } |
| | | } |
| | | } |
| | | this.standardTree = data.map((item) => { |
| | | let name = null; |
| | | switch (item.type) { |
| | | case 0: |
| | | name = "原材料"; |
| | | break; |
| | | case 1: |
| | | name = "成品"; |
| | | break; |
| | | } |
| | | return { |
| | | ...item, |
| | | id: item.type, |
| | | name, |
| | | }; |
| | | }); |
| | | // formTypeOptions |
| | | // 默认第一个四级节点搜索,新增配置项 |
| | | const treeOptions = JSON.parse(JSON.stringify(this.standardTree)); |
| | | 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" |
| | | ); |
| | | 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; |
| | | } |
| | | } |
| | | } |
| | | }, |
| | | // 点击bom树节点方法 |
| | | async nodeClick(data, node, element) { |
| | | // 是子节点 |
| | | if (node.level === 4) { |
| | | this.getParentData(node.parent, node.data.name); |
| | | // 存下选中节点 |
| | | this.selectData = data; |
| | | this.getTableByClick(data, this.versionValue); |
| | | this.initSelect(); |
| | | } |
| | | if (!("children" in data)) { |
| | | return; |
| | | } |
| | | }, |
| | | // 获取树路径 |
| | | getParentData(node, name) { |
| | | if (node !== null) { |
| | | if (node.data.name !== undefined) { |
| | | this.msg = node.data.name + " > " + name; |
| | | } |
| | | this.getParentData(node.parent, this.msg); |
| | | } |
| | | }, |
| | | async getTableByClick(data, versionVal) { |
| | | await getProductList({ |
| | | specificationsId: data.id, |
| | | version: versionVal, |
| | | }).then((res) => { |
| | | res.data.forEach((i) => { |
| | | if (i.name === undefined) { |
| | | i.name = i.children[0].name; |
| | | i.unit = i.children[0].unit; |
| | | i.id = i.children[0].id; |
| | | i.required = i.children[0].required; |
| | | i.internal = i.children[0].internal; |
| | | i.edit = true; |
| | | delete i.children; |
| | | } |
| | | }); |
| | | this.tableData = res.data; |
| | | this.selectDataList(); |
| | | }); |
| | | }, |
| | | specificationDetails(row) { |
| | | // 跳转产品规格详情页 |
| | | this.$router.push(`/standardLibrary/SpecificationDetails/${row.id}`); |
| | | }, |
| | | renderContent(h, { |
| | | node, |
| | | data, |
| | | store |
| | | }) { |
| | | // 判断是否是父节点或文件夹 |
| | | const isFolder = "children" in data; |
| | | return ( < |
| | | span class = "tree-node" > { |
| | | isFolder ? ( < |
| | | i class = { |
| | | node.expanded ? |
| | | "el-icon-folder-opened blue-folder" : "el-icon-folder blue-folder" |
| | | } > |
| | | < |
| | | /i> |
| | | ) : ( < |
| | | i class = "el-icon-document blue-folder" > < /i> |
| | | ) |
| | | } < |
| | | div class = "tree-lable" > [{ |
| | | node.level |
| | | }] { |
| | | data.name |
| | | } < |
| | | /div> < / |
| | | span > |
| | | ); |
| | | }, |
| | | async subAddTreeForm() { |
| | | let res = null; |
| | | try { |
| | | switch (this.addTreeForm.addTypeArr.length) { |
| | | case 1: |
| | | res = await addMaterial({ |
| | | ...this.addTreeForm, |
| | | type: this.addTreeForm.addTypeArr[0], |
| | | }); |
| | | break; |
| | | case 2: |
| | | res = await addStandards({ |
| | | ...this.addTreeForm, |
| | | materialId: this.addTreeForm.addTypeArr[1], |
| | | }); |
| | | break; |
| | | case 3: |
| | | res = await addSpecifications({ |
| | | ...this.addTreeForm, |
| | | standardId: this.addTreeForm.addTypeArr[2], |
| | | }); |
| | | break; |
| | | } |
| | | } catch (error) { |
| | | this.$message.error("添加失败"); |
| | | } |
| | | this.$message.success("添加成功"); |
| | | this.addTreeFormVisible = false; |
| | | this.getStandardTree(); |
| | | this.getTableByClick(this.selectData, this.versionValue); |
| | | }, |
| | | changeCascader(data) { |
| | | this.addTreeForm.addTypeArr = data; |
| | | }, |
| | | selectProductModelTable() { |
| | | selectproductModelApi(this.params).then((res) => { |
| | | res.data.forEach((i) => { |
| | | if (i.name === undefined) { |
| | | i.name = i.children[0].name; |
| | | i.unit = i.children[0].unit; |
| | | i.id = i.children[0].id; |
| | | i.edit = true; |
| | | delete i.children; |
| | | } |
| | | }); |
| | | this.tableData = res.data; |
| | | this.selectDataList(); |
| | | }); |
| | | }, |
| | | selectDataList() { |
| | | this.tableData.forEach((a) => { |
| | | a.code = "[1]"; |
| | | if (a.children != undefined) { |
| | | a.children.forEach((b) => { |
| | | b.code = "[2]"; |
| | | }); |
| | | } |
| | | }); |
| | | }, |
| | | // 表格树全部选中配置 |
| | | // 全选/取消选操作 |
| | | selectAll(val) { |
| | | this.isAllSelect = !this.isAllSelect; |
| | | let data = this.tableData; |
| | | this.toggleSelect(data, this.isAllSelect, "all"); |
| | | }, |
| | | //选择某行 |
| | | selectTr(selection, row) { |
| | | this.$set(row, "isChecked", !row.isChecked); |
| | | this.$nextTick(() => { |
| | | this.isAllSelect = row.isChecked; |
| | | this.toggleSelect(row, row.isChecked, "tr"); |
| | | }); |
| | | }, |
| | | //递归子级 |
| | | toggleSelect(data, flag, type) { |
| | | if (type === "all") { |
| | | if (data.length > 0) { |
| | | data.forEach((item) => { |
| | | this.toggleSelection(item, flag); |
| | | if (item.children && item.children.length > 0) { |
| | | this.toggleSelect(item.children, flag, type); |
| | | } |
| | | }); |
| | | } |
| | | } else { |
| | | if (data.children && data.children.length > 0) { |
| | | data.children.forEach((item) => { |
| | | item.isChecked = !item.isChecked; |
| | | this.$refs.multipleTable.toggleRowSelection(item, flag); |
| | | this.toggleSelect(item, flag, type); |
| | | }); |
| | | } |
| | | } |
| | | }, |
| | | //改变选中 |
| | | toggleSelection(row, flag) { |
| | | this.$set(row, "isChecked", flag); |
| | | this.$nextTick(() => { |
| | | if (flag) { |
| | | this.$refs.multipleTable.toggleRowSelection(row, flag); |
| | | } else { |
| | | this.$refs.multipleTable.clearSelection(); |
| | | } |
| | | }); |
| | | }, |
| | | handleSelectionChange(val) { |
| | | this.deleteList = []; |
| | | val.forEach((v) => { |
| | | if (v.id !== undefined) { |
| | | this.deleteList.push(v.id); |
| | | } |
| | | }); |
| | | }, |
| | | // 表格树全部选中配置 结束 |
| | | deleteListClick() { |
| | | if(this.deleteList.length==0){ |
| | | this.$message.error('请选择要删除的项目') |
| | | return |
| | | } |
| | | deleteListApi(this.deleteList).then((res) => { |
| | | this.$message({ |
| | | message: res.message, |
| | | type: "success", |
| | | }); |
| | | this.getTableByClick(this.selectData, this.versionValue); |
| | | }); |
| | | }, |
| | | async requiredOnfocus(scope) { |
| | | let obj = { |
| | | id: scope.row.id, |
| | | required: scope.row.required, |
| | | internal: scope.row.internal, |
| | | }; |
| | | |
| | | this.$message.success("添加成功"); |
| | | this.addTreeForm = { |
| | | addTypeArr: [], |
| | | }; |
| | | this.getStandardTree(); |
| | | this.getTableByClick(this.selectData, this.versionValue); |
| | | }, |
| | | changeCascader(data) { |
| | | this.addTreeForm.addTypeArr = data; |
| | | }, |
| | | closeAddTreeForm() { |
| | | this.addTreeForm = { |
| | | addTypeArr: [], |
| | | }; |
| | | console.log(this.addTreeForm); |
| | | }, |
| | | /** 表格某行点击事件 */ |
| | | // handleRowClick(row, column, event) { |
| | | // // 判断当前行是否有子集,若没有则结束处理 |
| | | // // console.log(row) |
| | | // if (!row.children) return |
| | | // this.$refs.tableData.toggleRowExpansion(row) |
| | | // } |
| | | selectProductModelTable() { |
| | | selectproductModelApi(this.params).then((res) => { |
| | | res.data.forEach((i) => { |
| | | if (i.name === undefined) { |
| | | i.name = i.children[0].name; |
| | | i.unit = i.children[0].unit; |
| | | i.id = i.children[0].id; |
| | | i.edit = true; |
| | | delete i.children; |
| | | } |
| | | }); |
| | | this.tableData = res.data; |
| | | this.selectDataList(); |
| | | }); |
| | | }, |
| | | selectDataList() { |
| | | this.tableData.forEach((a) => { |
| | | a.code = "[1]"; |
| | | if (a.children != undefined) { |
| | | a.children.forEach((b) => { |
| | | b.code = "[2]"; |
| | | }); |
| | | } |
| | | }); |
| | | }, |
| | | // 表格树全部选中配置 |
| | | // 全选/取消选操作 |
| | | selectAll(val) { |
| | | this.isAllSelect = !this.isAllSelect; |
| | | let data = this.tableData; |
| | | this.toggleSelect(data, this.isAllSelect, "all"); |
| | | }, |
| | | //选择某行 |
| | | selectTr(selection, row) { |
| | | this.$set(row, "isChecked", !row.isChecked); |
| | | this.$nextTick(() => { |
| | | this.isAllSelect = row.isChecked; |
| | | this.toggleSelect(row, row.isChecked, "tr"); |
| | | }); |
| | | }, |
| | | //递归子级 |
| | | toggleSelect(data, flag, type) { |
| | | if (type === "all") { |
| | | if (data.length > 0) { |
| | | data.forEach((item) => { |
| | | this.toggleSelection(item, flag); |
| | | if (item.children && item.children.length > 0) { |
| | | this.toggleSelect(item.children, flag, type); |
| | | } |
| | | }); |
| | | } |
| | | } else { |
| | | if (data.children && data.children.length > 0) { |
| | | data.children.forEach((item) => { |
| | | item.isChecked = !item.isChecked; |
| | | this.$refs.multipleTable.toggleRowSelection(item, flag); |
| | | this.toggleSelect(item, flag, type); |
| | | }); |
| | | } |
| | | } |
| | | }, |
| | | //改变选中 |
| | | toggleSelection(row, flag) { |
| | | this.$set(row, "isChecked", flag); |
| | | this.$nextTick(() => { |
| | | if (flag) { |
| | | this.$refs.multipleTable.toggleRowSelection(row, flag); |
| | | } else { |
| | | this.$refs.multipleTable.clearSelection(); |
| | | } |
| | | }); |
| | | }, |
| | | handleSelectionChange(val) { |
| | | this.deleteList = []; |
| | | val.forEach((v) => { |
| | | if (v.id !== undefined) { |
| | | this.deleteList.push(v.id); |
| | | } |
| | | }); |
| | | console.log(`output->this.deleteList`, this.deleteList); |
| | | }, |
| | | // 表格树全部选中配置 结束 |
| | | deleteListClick() { |
| | | deleteListApi(this.deleteList).then((res) => { |
| | | this.$message({ |
| | | message: res.message, |
| | | type: "success", |
| | | }); |
| | | this.getTableByClick(this.selectData, this.versionValue); |
| | | }); |
| | | }, |
| | | async requiredOnfocus(scope) { |
| | | let obj = { |
| | | id: scope.row.id, |
| | | required: scope.row.required, |
| | | internal: scope.row.internal, |
| | | }; |
| | | |
| | | await blurUpdateApi(obj).then((res) => { |
| | | this.$message({ |
| | | message: res.message, |
| | | type: "success", |
| | | }); |
| | | this.getTableByClick(this.selectData, this.versionValue); |
| | | }); |
| | | }, |
| | | }, |
| | | }; |
| | | await blurUpdateApi(obj).then((res) => { |
| | | this.$message({ |
| | | message: res.message, |
| | | type: "success", |
| | | }); |
| | | this.getTableByClick(this.selectData, this.versionValue); |
| | | }); |
| | | }, |
| | | }, |
| | | }; |
| | | </script> |
| | | |
| | | <style lang="scss" scoped> |
| | | // el-table表格对齐 |
| | | ::v-deep .el-table__row:not([class*="el-table__row--level-"]) { |
| | | td:nth-child(2) { |
| | | padding-left: 23px !important; |
| | | } |
| | | } |
| | | .standard-library-main { |
| | | width: 100vh; |
| | | height: 100%; |
| | | // 页面中心内容区域 |
| | | .content-main { |
| | | display: flex; |
| | | height: 100%; |
| | | min-height: calc(100vh - 88px); |
| | | max-height: calc(100vh - 88px); |
| | | padding: 15px; |
| | | > div { |
| | | padding: 20px; |
| | | background: #fff; |
| | | } |
| | | .library-bom { |
| | | // padding-right: 10px; |
| | | width: 300px; |
| | | overflow-y: auto; |
| | | // height: 100%; |
| | | max-height: 100%; |
| | | // margin-right: 12px; |
| | | // overflow-y: scroll; |
| | | .el-tree { |
| | | // margin-top: |
| | | width: 100%; |
| | | ::v-deep .el-tree-node__content { |
| | | height: 24px !important; |
| | | font-size: 18px; |
| | | // display: inline-block !important; |
| | | padding: 2px; |
| | | // color: #333; |
| | | .tree-node { |
| | | display: flex; |
| | | align-items: center; |
| | | height: 20px; |
| | | } |
| | | .tree-lable { |
| | | height: 100%; |
| | | line-height: 23px; |
| | | font-size: 12px; |
| | | padding-left: 8px; |
| | | } |
| | | .blue-folder { |
| | | color: rgb(64, 158, 255); |
| | | } |
| | | } |
| | | } |
| | | } |
| | | .library-table { |
| | | // height: 100%; |
| | | width: 170vh; |
| | | max-height: 100%; |
| | | // flex: 8; |
| | | margin-left: 12px; |
| | | display: flex; |
| | | flex-direction: column; |
| | | // overflow-y: scroll; |
| | | .table-header { |
| | | display: flex; |
| | | justify-content: space-between; |
| | | width: 100%; |
| | | .el-form-item { |
| | | margin-bottom: 30px !important; |
| | | } |
| | | } |
| | | .table-box { |
| | | flex: 1; |
| | | background: #fff; |
| | | // padding: 20px 20px 10px 20px; |
| | | display: flex; |
| | | flex-direction: column; |
| | | justify-content: space-between; |
| | | > div:nth-child(3) { |
| | | // height: 20px; |
| | | display: flex; |
| | | justify-content: end; |
| | | margin: 10px 0; |
| | | } |
| | | } |
| | | } |
| | | } |
| | | .addTree { |
| | | .el-form-item { |
| | | margin-bottom: 10px; |
| | | } |
| | | .el-cascader { |
| | | width: 100%; |
| | | } |
| | | } |
| | | } |
| | | .search-bar { |
| | | .el-input { |
| | | position: relative; |
| | | font-size: 0.07292rem; |
| | | display: inline-block; |
| | | width: 70%; |
| | | } |
| | | } |
| | | .firstDiv { |
| | | float: left; |
| | | width: 20px; |
| | | height: 20px; |
| | | border-radius: 50%; |
| | | background-color: #eff5ff; |
| | | margin-top: 5px; |
| | | justify-content: center; |
| | | display: flex; |
| | | align-items: center; |
| | | margin-right: 8px; |
| | | } |
| | | .el-tag.el-tag { |
| | | border-color: transparent; |
| | | background-color: transparent; |
| | | } |
| | | .el-tag.el-tag:hover { |
| | | border-color: transparent; |
| | | background-color: transparent; |
| | | } |
| | | .serve-btn { |
| | | width: 100%; |
| | | padding-bottom: 6px; |
| | | text-align: right; |
| | | .el-select { |
| | | margin-right: 10px; |
| | | } |
| | | } |
| | | .tipMsg { |
| | | float: left; |
| | | font-size: 16px; |
| | | font-weight: 500; |
| | | color: #999999; |
| | | } |
| | | </style> |
| | | // el-table表格对齐 |
| | | ::v-deep .el-table__row:not([class*="el-table__row--level-"]) { |
| | | td:nth-child(2) { |
| | | padding-left: 23px !important; |
| | | } |
| | | } |
| | | |
| | | .standard-library-main { |
| | | width: 100vh; |
| | | height: 100%; |
| | | |
| | | // 页面中心内容区域 |
| | | .content-main { |
| | | display: flex; |
| | | height: 100%; |
| | | min-height: calc(100vh - 88px); |
| | | max-height: calc(100vh - 88px); |
| | | padding: 15px; |
| | | |
| | | >div { |
| | | padding: 20px; |
| | | background: #fff; |
| | | } |
| | | |
| | | .library-bom { |
| | | // padding-right: 10px; |
| | | width: 300px; |
| | | overflow-y: auto; |
| | | // height: 100%; |
| | | max-height: 100%; |
| | | |
| | | // margin-right: 12px; |
| | | // overflow-y: scroll; |
| | | .el-tree { |
| | | // margin-top: |
| | | width: 100%; |
| | | |
| | | ::v-deep .el-tree-node__content { |
| | | height: 24px !important; |
| | | font-size: 18px; |
| | | // display: inline-block !important; |
| | | padding: 2px; |
| | | |
| | | // color: #333; |
| | | .tree-node { |
| | | display: flex; |
| | | align-items: center; |
| | | height: 20px; |
| | | } |
| | | |
| | | .tree-lable { |
| | | height: 100%; |
| | | line-height: 23px; |
| | | font-size: 12px; |
| | | padding-left: 8px; |
| | | } |
| | | |
| | | .blue-folder { |
| | | color: rgb(64, 158, 255); |
| | | } |
| | | } |
| | | } |
| | | } |
| | | |
| | | .library-table { |
| | | // height: 100%; |
| | | width: 170vh; |
| | | max-height: 100%; |
| | | // flex: 8; |
| | | margin-left: 12px; |
| | | display: flex; |
| | | flex-direction: column; |
| | | |
| | | // overflow-y: scroll; |
| | | .table-header { |
| | | display: flex; |
| | | justify-content: space-between; |
| | | width: 100%; |
| | | |
| | | .el-form-item { |
| | | margin-bottom: 30px !important; |
| | | } |
| | | } |
| | | |
| | | .table-box { |
| | | flex: 1; |
| | | background: #fff; |
| | | // padding: 20px 20px 10px 20px; |
| | | display: flex; |
| | | flex-direction: column; |
| | | justify-content: space-between; |
| | | |
| | | >div:nth-child(3) { |
| | | // height: 20px; |
| | | display: flex; |
| | | justify-content: end; |
| | | margin: 10px 0; |
| | | } |
| | | } |
| | | } |
| | | } |
| | | |
| | | .addTree { |
| | | .el-form-item { |
| | | margin-bottom: 10px; |
| | | } |
| | | |
| | | .el-cascader { |
| | | width: 100%; |
| | | } |
| | | } |
| | | } |
| | | |
| | | .search-bar { |
| | | .el-input { |
| | | position: relative; |
| | | font-size: 0.07292rem; |
| | | display: inline-block; |
| | | width: 70%; |
| | | } |
| | | } |
| | | |
| | | .firstDiv { |
| | | float: left; |
| | | width: 20px; |
| | | height: 20px; |
| | | border-radius: 50%; |
| | | background-color: #eff5ff; |
| | | margin-top: 5px; |
| | | justify-content: center; |
| | | display: flex; |
| | | align-items: center; |
| | | margin-right: 8px; |
| | | } |
| | | |
| | | .el-tag.el-tag { |
| | | border-color: transparent; |
| | | background-color: transparent; |
| | | } |
| | | |
| | | .el-tag.el-tag:hover { |
| | | border-color: transparent; |
| | | background-color: transparent; |
| | | } |
| | | |
| | | .serve-btn { |
| | | width: 100%; |
| | | padding-bottom: 6px; |
| | | text-align: right; |
| | | |
| | | .el-select { |
| | | margin-right: 10px; |
| | | } |
| | | } |
| | | |
| | | .tipMsg { |
| | | float: left; |
| | | font-size: 16px; |
| | | font-weight: 500; |
| | | color: #999999; |
| | | } |
| | | </style> |