From 73ae352a2cf79d802ce860c9a62e7334595b63e6 Mon Sep 17 00:00:00 2001 From: XiaoRuby <3114200645@qq.com> Date: 星期二, 22 八月 2023 09:22:17 +0800 Subject: [PATCH] 8-21基础数据完成 --- src/views/standardLibrary/index.vue | 582 +++++++++++++++++++++++++++++++++++++++------------------ 1 files changed, 396 insertions(+), 186 deletions(-) diff --git a/src/views/standardLibrary/index.vue b/src/views/standardLibrary/index.vue index 3a642f1..274125d 100644 --- a/src/views/standardLibrary/index.vue +++ b/src/views/standardLibrary/index.vue @@ -1,15 +1,12 @@ <template> <div class="standard-library-main"> <div class="content-main"> - <div class="library-bom" style="width: 300px;"> - <el-input - v-model="filterText" - placeholder="杈撳叆鍏抽敭瀛楄繘琛岃繃婊�" - /> + <div class="library-bom" style="width: 300px"> + <el-input v-model="filterText" placeholder="杈撳叆鍏抽敭瀛楄繘琛岃繃婊�" /> <el-button type="text">鍏ㄩ儴</el-button> <el-tree ref="tree" - style="width: 100%;" + style="width: 100%" class="filter-tree" :data="standardTree" :props="defaultProps" @@ -21,11 +18,12 @@ @node-click="nodeClick" /> </div> - <div class="library-table" style="width: 80%;"> + <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> + <span>鍘熸潗鏂欑紪鐮侊細</span> <el-input v-model="searchData.keyword" placeholder="璇疯緭鍏ヤ汉鍛樺悕绉�/鍘熸潗鏂欏悕绉�" @@ -34,59 +32,116 @@ </el-input> </el-form-item> <el-form-item> - <el-button type="primary" @click="filteredTableData">鏌ヨ</el-button> - <el-button type="primary" plain @click="resetBtn">閲嶇疆</el-button> + <span>鍘熸潗鏂欏悕绉帮細</span> + <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" @click="filteredTableData" + >鏌ヨ</el-button + > + <el-button type="primary" plain @click="resetBtn" + >閲嶇疆</el-button + > </el-form-item> </el-form> </div> <div class="serve-btn"> - <el-button type="primary" icon="el-icon-plus" @click="addTreeFormVisible = true">鏂板</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" + size="small" + style="color: #00a5ff" + @click="deleteListClick" + >鍒犻櫎</el-button + > </div> </div> <div class="table-box"> - <el-table + <!-- <el-table ref="tableData" row-key="id" max-height="680" - :tree-props="{children: 'children', hasChildren: 'hasChildren'}" - :cell-style="{textAlign: 'left'}" - :header-cell-style="{border:'0px',background:'#f5f7fa',color:'#606266',boxShadow: 'inset 0 1px 0 #ebeef5',textAlign: 'left'}" + :tree-props="{ children: 'children', hasChildren: 'hasChildren' }" + :cell-style="{ textAlign: 'left' }" + :header-cell-style="{ + border: '0px', + background: '#f5f7fa', + color: '#606266', + boxShadow: 'inset 0 1px 0 #ebeef5', + textAlign: 'left', + }" :data="tableData" style="width: 100%" > - <el-table-column - type="index" - label="搴忓彿" - width="100px" - > - <template v-if="scope.row.index+1" slot-scope="scope"> - {{ scope.row.index+1 }} + <el-table-column type="index" label="搴忓彿" width="100px"> + <template v-if="scope.row.index + 1" slot-scope="scope"> + {{ scope.row.index + 1 }} </template> </el-table-column> - <el-table-column - prop="father" - label="鍚嶇О" - width="320px" - > + <el-table-column prop="father" label="鍚嶇О" width="320px"> <template slot-scope="scope"> - <el-tag size="mini" :type="scope.row.father? '':'success'" :style="{borderRadius: '40%',marginRight: '12px'}">{{ scope.row.father? '01':'02' }}</el-tag> {{ scope.row.father || scope.row.name }} + <el-tag + size="mini" + :type="scope.row.father ? '' : 'success'" + :style="{ borderRadius: '40%', marginRight: '12px' }" + >{{ scope.row.father ? "01" : "02" }}</el-tag + > + {{ scope.row.father || scope.row.name }} + </template> + </el-table-column> + <el-table-column prop="unit" label="鍗曚綅" width="300px" /> + <el-table-column prop="required" label="鏍囧噯" width="300px" /> + <el-table-column prop="internal" label="鍐呮帶鍒�" width="300px" /> + </el-table> --> + <el-table + :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="搴忓彿" + ></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="鍗曚綅" - width="300px" - /> - <el-table-column - prop="required" - label="鏍囧噯" - width="300px" - /> - <el-table-column - prop="internal" - label="鍐呮帶鍒�" - width="300px" - /> + sortable + ></el-table-column> </el-table> <!-- 寮瑰嚭琛ㄥ崟椤� --> <div> @@ -94,7 +149,7 @@ </div> <div> <!-- 鍒嗛〉鍣� --> - <el-pagination + <!-- <el-pagination :current-page="pageParams.pageNo" :page-sizes="[10, 15, 20, 25]" :page-size="pageParams.pageSize" @@ -102,29 +157,44 @@ :total="pageParams.total" @size-change="handleSizeChange" @current-change="handleCurrentChange" - /> + /> --> </div> </div> </div> </div> - <el-dialog class="addTree" title="娣诲姞鎸囨爣" width="28%" :visible.sync="addTreeFormVisible" @close="closeAddTreeForm"> + <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 }" + :props="{ ...defaultProps, checkStrictly: true }" clearable @change="changeCascader" /> </el-form-item> - <el-form-item v-show="addTreeForm.addTypeArr.length<2" label="鐗╂枡鍚嶇О"> + <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-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-form-item + v-show="addTreeForm.addTypeArr.length < 4" + label="瑙勬牸鍨嬪彿" + > <el-input v-model="addTreeForm.specificationsName" /> </el-form-item> </el-form> @@ -137,99 +207,110 @@ </template> <script> -import { getMaterialList, getProductList, getProductSonList, - addMaterial, addStandards, addSpecifications -} from '@/api/standardLibrary' +import { + getMaterialList, + getProductList, + getProductSonList, + addMaterial, + addStandards, + addSpecifications, + deleteListApi, +} from "@/api/standardLibrary"; + +import { selectproductModelApi } from "@/api/basicData/index"; export default { data() { return { + deleteList: [], addTreeFormVisible: false, - filterText: '', + filterText: "", // 鏍囧噯搴揵om鏍� standardTree: [], // bom鐨�,榛樿閰嶇疆鍊� defaultProps: { - children: 'children', - label: 'name', - value: 'id' + children: "children", + label: "name", + value: "id", }, // 鏌ヨ鏉′欢 searchData: { - keyword: '' + keyword: "", }, - tableData: [ - ], + tableData: [], oldtableData: [], // 鍒嗛〉鍙傛暟 pageParams: { pageNo: 1, pageSize: 12, - total: 0 + total: 0, }, - tablespecifications: [ - ], + tablespecifications: [], // 閫変腑鐨勮妭鐐规暟鎹� selectData: {}, formTypeOptions: [], addTreeForm: { - addTypeArr: [] - } - } + addTypeArr: [], + }, + }; }, 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.label.indexOf(value) !== -1; }, // 鑾峰彇bom鏍戠殑鏍囧噯鏁版嵁 async getStandardTree() { - const { data } = await getMaterialList() - console.log(data) - this.standardTree = data.map(item => { - let name = null + const { data } = await getMaterialList(); + console.log(data); + this.standardTree = data.map((item) => { + let name = null; switch (item.type) { case 1: - name = '鍘熸潗鏂�' - break + name = "鍘熸潗鏂�"; + break; case 2: - name = '鍗婃垚鍝�' - break + name = "鍗婃垚鍝�"; + break; case 3: - name = '鎴愬搧' - break + name = "鎴愬搧"; + break; } return { - ...item, id: item.type, name - } - }) - console.log(this.standardTree) + ...item, + id: item.type, + name, + }; + }); + console.log(this.standardTree); // formTypeOptions // 榛樿绗竴涓洓绾ц妭鐐规悳绱紝鏂板閰嶇疆椤� - const treeOptions = JSON.parse(JSON.stringify(this.standardTree)) - this.getDefault(treeOptions, 0) - console.log(treeOptions) - this.formTypeOptions = treeOptions + const treeOptions = JSON.parse(JSON.stringify(this.standardTree)); + this.getDefault(treeOptions, 0); + console.log(treeOptions); + 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() + 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(); // console.log(firstNode) - }) + }); }, getDefault(arr, index) { for (const item of arr) { if (item.children && item.children?.length > 0) { - // 鏈夊瓙鑺傜偣 - this.getDefault(item.children, index + 1) + // 鏈夊瓙鑺傜偣 + this.getDefault(item.children, index + 1); if (index === 2) { - item.children = null + item.children = null; } } // else { @@ -247,117 +328,138 @@ // console.log('children' in data) // 鏄瓙鑺傜偣 if (node.level === 4) { - // console.log(data, node) + console.log(data, node); // 瀛樹笅閫変腑鑺傜偣 - this.selectData = data + this.selectData = data; // eslint-disable-next-line prefer-const - this.getTableByClick(data) + this.getTableByClick(data); } - if (!('children' in data)) { - return + if (!("children" in data)) { + return; } }, async getTableByClick(data) { // eslint-disable-next-line prefer-const - let { data: { row, total }} = await getProductList({ pageNo: this.pageParams.pageNo, pageSize: this.pageParams.pageSize, specificationsId: data.id }) + let { + data: { row, total }, + } = await getProductList({ + pageNo: this.pageParams.pageNo, + pageSize: this.pageParams.pageSize, + specificationsId: data.id, + }); // console.log(row) - this.pageParams.total = total - row = row.map((item, index) => ({ ...item, index })) + this.pageParams.total = total; + row = row.map((item, index) => ({ ...item, index })); for (const item of row) { if (item.children) { - const res = await getProductSonList({ fatherName: item.father }) - item.children = res.data - item.id = item.father + const res = await getProductSonList({ fatherName: item.father }); + item.children = res.data; + item.id = item.father; } } - this.tableData = row + this.tableData = row; }, specificationDetails(row) { // 璺宠浆浜у搧瑙勬牸璇︽儏椤� - this.$router.push(`/standardLibrary/SpecificationDetails/${row.id}`) + this.$router.push(`/standardLibrary/SpecificationDetails/${row.id}`); }, handleSizeChange(val) { - console.log(`姣忛〉 ${val} 鏉) - this.pageParams.pageSize = val - this.getTableByClick(this.selectData) + console.log(`姣忛〉 ${val} 鏉); + this.pageParams.pageSize = val; + this.getTableByClick(this.selectData); }, handleCurrentChange(val) { - console.log(`褰撳墠椤�: ${val}`) - this.pageParams.pageNo = val - this.getTableByClick(this.selectData) + console.log(`褰撳墠椤�: ${val}`); + this.pageParams.pageNo = val; + this.getTableByClick(this.selectData); }, // 鏌ヨ鎸夐挳 filteredTableData() { - this.oldtableData = this.tableData + this.oldtableData = this.tableData; // 鏍规嵁杈撳叆鐨勫叧閿瓧寰楀埌杩囨护鍚庣殑鏁版嵁锛屽鏋滄湁灏辨妸杩囨护鍚庣殑鏁版嵁灞曠ず鍦ㄩ〉闈笂 - const filteredtabledata = this.tableData.filter(item => { - return item.name.includes(this.searchData.keyword) - }) + const filteredtabledata = this.tableData.filter((item) => { + return item.name.includes(this.searchData.keyword); + }); // console.log('filteredtabledata', filteredtabledata) - this.tableData = filteredtabledata + this.tableData = filteredtabledata; }, // 閲嶇疆鎸夐挳 resetBtn() { - this.searchData.keyword = '' - this.tableData = this.oldtableData + this.searchData.keyword = ""; + this.tableData = this.oldtableData; }, renderContent(h, { node, data, store }) { // console.log('data', data) // console.log('node', node) // 鍒ゆ柇鏄惁鏄埗鑺傜偣鎴栨枃浠跺す - const isFolder = ('children') in data + const isFolder = "children" in data; return ( - <span class='tree-node'> + <span class="tree-node"> {isFolder ? ( <i - class={node.expanded ? 'el-icon-folder-opened blue-folder' : 'el-icon-folder blue-folder'} + class={ + node.expanded + ? "el-icon-folder-opened blue-folder" + : "el-icon-folder blue-folder" + } ></i> ) : ( - <i class='el-icon-document blue-folder'></i> + <i class="el-icon-document blue-folder"></i> )} - <div class='tree-lable'>[{node.level}] {data.name}</div> + <div class="tree-lable"> + [{node.level}] {data.name} + </div> </span> - ) + ); }, async subAddTreeForm() { - this.addTreeFormVisible = false - console.log(this.addTreeForm.addTypeArr.length) - let res = null + this.addTreeFormVisible = false; + console.log(this.addTreeForm.addTypeArr.length); + 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 + 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 + 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 + console.log(this.addTreeForm); + res = await addSpecifications({ + ...this.addTreeForm, + standardId: this.addTreeForm.addTypeArr.pop(), + }); + break; } } catch (error) { - this.$message.error('娣诲姞澶辫触') + this.$message.error("娣诲姞澶辫触"); } - console.log(res) - this.$message.success('娣诲姞鎴愬姛') - this.addTreeForm = {} - this.getStandardTree() - this.getTableByClick(this.selectData) + console.log(res); + this.$message.success("娣诲姞鎴愬姛"); + this.addTreeForm = {}; + this.getStandardTree(); + this.getTableByClick(this.selectData); }, changeCascader(data) { - console.log(data) - this.addTreeForm.addTypeArr = data + console.log(data); + this.addTreeForm.addTypeArr = data; }, closeAddTreeForm() { this.addTreeForm = { - addTypeArr: [] - } - console.log(this.addTreeForm) - } + addTypeArr: [], + }; + console.log(this.addTreeForm); + }, /** 琛ㄦ牸鏌愯鐐瑰嚮浜嬩欢 */ // handleRowClick(row, column, event) { // // 鍒ゆ柇褰撳墠琛屾槸鍚︽湁瀛愰泦锛岃嫢娌℃湁鍒欑粨鏉熷鐞� @@ -365,15 +467,123 @@ // 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) => { + let isExist = false; + this.deleteList.findIndex((c) => { + if (c === i.id) { + isExist = true; + } + }); + if (!isExist && i.id !== undefined) { + this.deleteList.push(i.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) { + this.deleteList.push(row.id); + } else if (row.isChecked === false) { + this.deleteList.findIndex((c, index) => { + if (c === row.id) { + this.deleteList.splice(index, 1); + return; + } + }); + } + console.log(`output->this.deleteList`, this.deleteList); + }, + //閫掑綊瀛愮骇 + 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", + }); + }); + }, + }, +}; </script> <style lang="scss" scoped> - // el-table琛ㄦ牸瀵归綈 ::v-deep .el-table__row:not([class*="el-table__row--level-"]) { - td:nth-child(2){ + td:nth-child(2) { padding-left: 23px !important; } } @@ -384,21 +594,21 @@ // width: 1000px; // height: 800px; // } -.standard-library-main{ +.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{ + .library-bom { // padding-right: 10px; width: 300px; // height: 100%; @@ -406,27 +616,27 @@ // margin-right: 12px; // overflow-y: scroll; .el-tree { - // margin-top: + // margin-top: width: 100%; - ::v-deep .el-tree-node__content{ + ::v-deep .el-tree-node__content { height: 24px !important; font-size: 18px; // display: inline-block !important; padding: 2px; // color: #333; - .tree-node{ + .tree-node { display: flex; align-items: center; height: 20px; } - .tree-lable{ + .tree-lable { height: 100%; line-height: 23px; font-size: 12px; padding-left: 8px; } - .blue-folder{ - color: rgb(64, 158, 255) + .blue-folder { + color: rgb(64, 158, 255); } } } @@ -453,7 +663,7 @@ // } // } } - .library-table{ + .library-table { // height: 100%; width: 170vh; max-height: 100%; @@ -462,40 +672,40 @@ display: flex; flex-direction: column; // overflow-y: scroll; - .table-header{ + .table-header { display: flex; justify-content: space-between; - .el-form-item{ + .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; + .table-box { + flex: 1; + background: #fff; + // padding: 20px 20px 10px 20px; + display: flex; + flex-direction: column; + justify-content: space-between; - .el-table { - // flex: 1; - // max-height: 680px; - // overflow-y: scroll; - } - >div:nth-child(3){ - // height: 20px; - display: flex; - justify-content: end; - margin: 10px 0; - } + .el-table { + // flex: 1; + // max-height: 680px; + // overflow-y: scroll; + } + > div:nth-child(3) { + // height: 20px; + display: flex; + justify-content: end; + margin: 10px 0; + } } } } - .addTree{ - .el-form-item{ + .addTree { + .el-form-item { margin-bottom: 10px; } - .el-cascader{ + .el-cascader { width: 100%; } } -- Gitblit v1.9.3