From 95fda13c28cb664a57336dd2e01d5b41ec4f717f Mon Sep 17 00:00:00 2001 From: 王震 <10952869+daywangzhen@user.noreply.gitee.com> Date: 星期五, 25 八月 2023 12:57:19 +0800 Subject: [PATCH] 查看详情页 --- src/views/standardLibrary/index.vue | 748 +++++++++++++++++++++++++++++++++++++++++++-------------- 1 files changed, 560 insertions(+), 188 deletions(-) diff --git a/src/views/standardLibrary/index.vue b/src/views/standardLibrary/index.vue index b55dc64..6070828 100644 --- a/src/views/standardLibrary/index.vue +++ b/src/views/standardLibrary/index.vue @@ -1,278 +1,650 @@ <template> <div class="standard-library-main"> <div class="content-main"> - <div class="library-bom"> + <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"> + <div class="library-table" style="width: 80%"> <div class="table-header"> - <div class="search-bar"> - <el-form ref="form" :inline="true" :model="searchData"> - <el-form-item> - <el-input - v-model="searchData.keyword" - placeholder="璇疯緭鍏ヤ汉鍛樺悕绉�/鍘熸潗鏂欏悕绉�" - > - <i slot="prefix" class="el-input__icon el-icon-search" /> - </el-input> - </el-form-item> - <el-form-item> - <el-button type="primary">鏌ヨ</el-button> - <el-button type="primary" plain>閲嶇疆</el-button> - <!-- <el-button type="text">楂樼骇鎼滅储<i class="el-icon-arrow-down el-icon--right" /></el-button> --> - </el-form-item> - </el-form> - </div> <div class="serve-btn"> - <el-button type="primary" icon="el-icon-plus">鏂板浜哄憳</el-button> + <span class="tipMsg">{{ msg !== "" ? msg : "" }}</span> + <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 - ref="standardLibraryTable" - :cell-style="{textAlign: 'center'}" - :header-cell-style="{border:'0px',background:'#f5f7fa',color:'#606266',boxShadow: 'inset 0 1px 0 #ebeef5',textAlign: 'center'}" - :data="standardLibraryTable" - style="width: 100%" + :data="tableData" + style="width: 100%; margin-bottom: 20px" + row-key="name" + border + height="calc(100vh - 250px)" + default-expand-all + ref="multipleTable" + @select="selectTr" + @select-all="selectAll" + :tree-props="{ children: 'children', hasChildren: 'hasChildren' }" > + <el-table-column type="selection" label="搴忓彿"> </el-table-column> <el-table-column type="index" + width="50px" label="搴忓彿" - min-width="50" - /> - <el-table-column - prop="name" - label="浜у搧鍚嶇О" - min-width="150" - /> - <el-table-column - prop="username" - label="鏇存柊浜�" - min-width="100" - /> - <el-table-column - prop="updateTime" - label="鏇存柊鏃堕棿" - min-width="150" - /> - <el-table-column - prop="vel" - label="鐗堟湰" - min-width="100" - /> - <el-table-column - prop="spe_state" - label="鐘舵��" - min-width="150" - > - <template slot-scope="scope"> + ></el-table-column> + <el-table-column label="椤圭洰鍚嶇О" sortable> + <template scope="scope"> <el-tag - :type="scope.row.spe_state === 0 ? 'primary' : 'success'" - disable-transitions - >{{ scope.row.spe_state === 0 ? '鏈悓鎰�' : '宸插悓鎰�' }}</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 - label="鎿嶄綔" - min-width="150" - > - <template slot-scope="scope"> - <el-button - type="text" - size="small" - @click="handleClick(scope.row)" - >鏌ョ湅</el-button> - <el-button type="text" size="small"><i class="el-icon-more" /></el-button> + 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> - <el-pagination - :current-page="currentPage" - :page-sizes="[100, 200, 300, 400]" - :page-size="100" - layout="total, sizes, prev, pager, next, jumper" - :total="400" - /> + <!-- --> </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> </template> <script> -import { getStandardsList, getSerialNumberList, getSpecificationsList } from '@/api/standardLibrary' +import { + getMaterialList, + getProductList, + addMaterial, + addStandards, + addSpecifications, + deleteListApi, + blurUpdateApi, +} from "@/api/standardLibrary"; + +import { selectproductModelApi } from "@/api/basicData/index"; export default { data() { return { - filterText: '', + deleteList: [], + msg: "", + isAllSelect: false, + addTreeFormVisible: false, + filterText: "", // 鏍囧噯搴揵om鏍� - standardTree: [{ - id: 1, - label: '涓�绾� 1', - children: [{ - id: 4, - label: '浜岀骇 1-1', - children: [{ - id: 9, - label: '涓夌骇 1-1-1' - }, { - id: 10, - label: '涓夌骇 1-1-2' - }] - }] - }], - // 榛樿鍊� + standardTree: [], + // bom鐨�,榛樿閰嶇疆鍊� defaultProps: { - children: 'children', - label: 'label' + children: "children", + label: "name", + value: "id", }, - // 鏌ヨ鏉′欢 - searchData: { - keyword: '' + tableData: [], + oldtableData: [], + tablespecifications: [], + // 閫変腑鐨勮妭鐐规暟鎹� + selectData: {}, + formTypeOptions: [], + addTreeForm: { + addTypeArr: [], }, - standardLibraryTable: [ - { - id: 2, - name: 'AB', - updateTime: '2023-07-12 00:00:12', - username: '灏忓皬', - vel: 'V1.0', - spe_state: 1 - } - ], - currentPage: 1 - - } + }; }, watch: { filterText(val) { - this.$refs.tree.filter(val) - } + this.$refs.tree.filter(val); + }, }, created() { - this.getStandardTree() + this.getStandardTree(); }, methods: { filterNode(value, data) { - if (!value) return true - return data.label.indexOf(value) !== -1 + if (!value) return true; + return data.name.indexOf(value) !== -1; }, + // 鑾峰彇bom鏍戠殑鏍囧噯鏁版嵁 async getStandardTree() { - const { data: standard } = await getStandardsList()// 鑾峰彇鎵�鏈夋爣鍑� - // console.log(standard)// 鑾峰彇鎵�鏈夋爣鍑� - for (const standardItem of standard) { - const { data: serialNumber } = await getSerialNumberList({ IdOrNameOfSerialNumber: standardItem.name, standardsId: standardItem.id }) - // console.log(children) //鎵�鏈夊瀷鍙� - // for (const serialNumberItem of serialNumber) { - // // const {data} = await getSpecificationsList({}) - // } - standardItem.children = serialNumber.map(item => ({ id: item.id, label: item.name })) - } - this.standardTree = standard.map(item => ({ ...item, label: item.name })) - console.log(this.standardTree)// 鑾峰彇鎵�鏈夋爣鍑� + 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(); + }); }, - async nodeClick(data, node, element) { - // 鏁版嵁 鑺傜偣node瀵硅薄 鑺傜偣缁勪欢瀵硅薄 - // console.log(data, node, element) - // console.log(data.children && data.children?.length !== 0) - if (!data.children && data.children?.length !== 0) { - console.log('鐐瑰嚮瀛愯妭鐐�', data) - const res = await getSpecificationsList({ serialNumberId: data.id, specificationsName: data.label, pageNo: 1, pageSize: 10 }) - console.log(res) + 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; + } + } } - console.log('鐐瑰嚮鐖惰妭鐐�') - } - } -} + }, + // 鐐瑰嚮bom鏍戣妭鐐规柟娉� + async nodeClick(data, node, element) { + // 鏄瓙鑺傜偣 + if (node.level === 4) { + this.getParentData(node.parent, node.data.name); + // 瀛樹笅閫変腑鑺傜偣 + this.selectData = data; + this.getTableByClick(data); + } + 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) { + await getProductList({ + specificationsId: data.id, + }).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 }) { + // console.log('data', data) + // console.log('node', node) + // 鍒ゆ柇鏄惁鏄埗鑺傜偣鎴栨枃浠跺す + 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() { + 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("娣诲姞澶辫触"); + } + + console.log(res); + this.$message.success("娣诲姞鎴愬姛"); + this.addTreeForm = { + addTypeArr: [], + }; + this.getStandardTree(); + this.getTableByClick(this.selectData); + }, + 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"); + // 鑷畾涔� + if (this.isAllSelect) { + val.forEach((i) => { + if (i.id !== undefined) { + this.deleteList.push(i.id); + } else { + i.children.forEach((c) => { + this.deleteList.push(c.id); + }); + } + }); + } else { + this.deleteList.splice(0, this.deleteList.length); + } + }, + //閫夋嫨鏌愯 + selectTr(selection, row) { + this.$set(row, "isChecked", !row.isChecked); + this.$nextTick(() => { + this.isAllSelect = row.isChecked; + this.toggleSelect(row, row.isChecked, "tr"); + }); + + if (row.isChecked === true) { + if (row.children !== undefined) { + row.children.forEach((i) => { + this.deleteList.push(i.id); + }); + } else { + this.deleteList.push(row.id); + } + } else if (row.isChecked === false) { + if (row.children !== undefined) { + row.children.forEach((i) => { + this.deleteList.findIndex((c, index) => { + if (c === i.id) { + this.deleteList.splice(index, 1); + return; + } + }); + }); + } + this.deleteList.findIndex((c, index) => { + if (c === row.id) { + this.deleteList.splice(index, 1); + return; + } + }); + } + }, + //閫掑綊瀛愮骇 + 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(); + } + }); + }, + // 琛ㄦ牸鏍戝叏閮ㄩ�変腑閰嶇疆 缁撴潫 + deleteListClick() { + deleteListApi(this.deleteList).then((res) => { + this.$message({ + message: res.message, + type: "success", + }); + this.getTableByClick(this.selectData); + }); + }, + 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); + }); + }, + }, +}; </script> <style lang="scss" scoped> -.standard-library-main{ - width: 100%; +// 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{ + // 椤甸潰涓績鍐呭鍖哄煙 + .content-main { display: flex; height: 100%; min-height: calc(100vh - 88px); + max-height: calc(100vh - 88px); padding: 15px; - >div{ + > div { padding: 20px; background: #fff; } - .library-bom{ - flex: 2; - margin-right: 12px; + .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: 12px; + // 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); + } + } } - // .el-tree { - // margin-top: 12px; - // ::v-deep .el-tree-node__content{ - // height: 24px !important; - // font-size: 14px; - // display: inline-block !important; - // padding: 2px; - // color: #333; - // } - // ::v-deep .el-tree-node__content:hover{ - // background: rgba(58,124,253,0.1) ; - // // opacity: 0.31; - // border-radius: 3px; - // color: #333 !important; - // } - // ::v-deep .el-tree-node:focus>.el-tree-node__content{ - // background: rgba(58,124,253,0.1) ; - // // opacity: 0.31; - // border-radius: 3px; - // color: #333 !important; - // } - // } } - .library-table{ - flex: 8; + .library-table { + // height: 100%; + width: 170vh; + max-height: 100%; + // flex: 8; margin-left: 12px; display: flex; flex-direction: column; - - .table-header{ + // overflow-y: scroll; + .table-header { display: flex; justify-content: space-between; - .el-form-item{ + width: 100%; + .el-form-item { margin-bottom: 30px !important; } } - .table-box{ - flex: 1; - background: #fff; - // padding: 20px 20px 10px 20px; + .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; - flex-direction: column; - .el-table { - flex: 1; - } - >div:nth-child(2){ - display: flex; - justify-content: end; - margin: 10px 0; - } + 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; +} +.tipMsg { + float: left; + font-size: 16px; + font-weight: 500; + color: #999999; } </style> -- Gitblit v1.9.3