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 | 1052 +++++++++++++++++++++++++++++----------------------------- 1 files changed, 529 insertions(+), 523 deletions(-) diff --git a/src/views/standardLibrary/index.vue b/src/views/standardLibrary/index.vue index 2d03597..274125d 100644 --- a/src/views/standardLibrary/index.vue +++ b/src/views/standardLibrary/index.vue @@ -1,28 +1,29 @@ <template> <div class="standard-library-main"> <div class="content-main"> - <div class="library-bom"> - <el-input - v-model="filterText" - placeholder="杈撳叆鍏抽敭瀛楄繘琛岃繃婊�" - /> - <el-button type="text" @click="getAllStandard">鍏ㄩ儴</el-button> + <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%" 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> + <span>鍘熸潗鏂欑紪鐮侊細</span> <el-input v-model="searchData.keyword" placeholder="璇疯緭鍏ヤ汉鍛樺悕绉�/鍘熸潗鏂欏悕绉�" @@ -31,589 +32,561 @@ </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-button type="text">楂樼骇鎼滅储<i class="el-icon-arrow-down el-icon--right" /></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="showFormInfo">{{ selectedNodeType }}</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" - :cell-style="{textAlign: 'center'}" - :header-cell-style="{border:'0px',background:'#f5f7fa',color:'#606266',boxShadow: 'inset 0 1px 0 #ebeef5',textAlign: 'center'}" + 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', + }" :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 }} + </template> + </el-table-column> + <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 }} + </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="搴忓彿" - min-width="50" - /> - <!-- 澶嶇敤 --> - <el-table-column - v-for="(item,index) in tablespecifications" - :key="index" - :prop="item.prop" - :label="item.label" - :min-width="item.minWidth" - /> - <template v-if="showTableCurrent===2"> - <el-table-column - prop="spe_state" - label="鐘舵��" - min-width="150" - > - <template slot-scope="scope"> - <el-tag - :type="scope.row.spe_state === 0 ? 'primary' : 'success'" - disable-transitions - >{{ scope.row.spe_state === 0 ? '宸插仠鐢�' : '宸插惎鐢�' }}</el-tag> - </template> - </el-table-column> - <el-table-column - label="鎿嶄綔" - min-width="150" - > - <template slot-scope="scope"> - <el-button - type="text" - size="small" - :style="{marginRight:'8px'}" - @click="specificationDetails(scope.row)" - >鏌ョ湅</el-button> - <el-popover - v-model="scope.row.visible" - placement="top" - width="30" + ></el-table-column> + <el-table-column label="椤圭洰鍚嶇О" sortable> + <template scope="scope"> + <el-tag + ><div + class="firstDiv" + :style="`color: ${ + scope.row.code == '[1]' ? '#16a7ff' : '#58c173' + }`" > - <div style="text-align: center; margin: 0" @click=" getRowID(scope.row)"> - <div> - <el-button size="mini" type="text" @click="dialogFormVisible4=true">缂栬緫</el-button> - </div> - <div> - <el-button size="mini" type="text" @click="dialogFormVisible5 = true">鍋滅敤</el-button> - </div> - </div> - <el-button slot="reference" type="text"><i class="el-icon-more" /></el-button> - </el-popover> - </template> - </el-table-column> - </template> + {{ 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> <!-- 寮瑰嚭琛ㄥ崟椤� --> <div> - <!-- 娣诲姞鏍囧噯 --> - <el-dialog title="娣诲姞鏍囧噯" :visible.sync="dialogFormVisible1" width="33%"> - <el-form :model="standardForm" :rules="rulesStandard"> - <el-form-item label="鏍囧噯鍙�" label-width="100px" prop="standardnumber"> - <el-input v-model="standardForm.standardnumber" autocomplete="off" /> - </el-form-item> - <el-form-item label="鏍囧噯鍚嶇О" label-width="100px" prop="standardname"> - <el-input v-model="standardForm.standardname" autocomplete="off" /> - </el-form-item> - <el-form-item label="鑻辨枃鍚嶇О" label-width="100px" prop="standardenname"> - <el-input v-model="standardForm.engname" autocomplete="off" /> - </el-form-item> - <el-form-item label="鐖剁骇鍒嗙被" label-width="100px"> - <el-select v-model="standardForm.type" placeholder="璇烽�夋嫨"> - <el-option label="鍘熸潗鏂�" value="0" /> - <el-option label="鐢电嚎鐢电紗" value="1" /> - </el-select> - </el-form-item> - </el-form> - <div slot="footer" class="dialog-footer"> - <el-button @click="dialogFormVisible1 = false">鍙� 娑�</el-button> - <el-button type="primary" @click="submitForm">纭� 瀹�</el-button> - </div> - </el-dialog> - <!-- 娣诲姞鍨嬪彿 --> - <el-dialog title="娣诲姞鍨嬪彿" :visible.sync="dialogFormVisible2" width="30%"> - <el-form ref="form" :model="modelForm" :rules="rulesModel"> - <el-form-item label="鍨嬪彿" :label-width="formLabelWidth" prop="model"> - <el-input v-model="modelForm.model" autocomplete="off" /> - </el-form-item> - <el-form-item label="鍨嬪彿鍚嶇О" :label-width="formLabelWidth" prop="modelname"> - <el-input v-model="modelForm.modelname" autocomplete="off" /> - </el-form-item> - </el-form> - <div slot="footer" class="dialog-footer"> - <el-button @click="dialogFormVisible2 = false">鍙� 娑�</el-button> - <el-button type="primary" @click="submitForm()">纭� 瀹�</el-button> - </div> - </el-dialog> - <!-- 娣诲姞瑙勬牸 --> - <el-dialog title="娣诲姞瑙勬牸" :visible.sync="dialogFormVisible3" width="30%"> - <el-form ref="form" :model="specificationForm" :rules="rulesspecification"> - <el-form-item label="瑙勬牸鍚嶇О" :label-width="formLabelWidth" prop="name"> - <el-input v-model="specificationForm.name" autocomplete="off" /> - </el-form-item> - <el-form-item label="瑙勬牸缂栧彿" :label-width="formLabelWidth" prop="number"> - <el-input v-model="specificationForm.number" autocomplete="off" /> - </el-form-item> - <el-form-item label="涓婃柟濉啓鐢熶骇鎸囦护鍙�" :label-width="formLabelWidth" prop="instruct"> - <el-input v-model="specificationForm.instruct" autocomplete="off" /> - </el-form-item> - <el-form-item label="鐢靛帇绛夌骇" :label-width="formLabelWidth"> - <el-select v-model="specificationForm.voltageLevel" placeholder="璇烽�夋嫨鐢靛帇绛夌骇"> - <el-option label="鍒嗙被1" value="test" /> - <el-option label="鍒嗙被2" value="2" /> - <el-option label="鍒嗙被3" value="3" /> - </el-select> - </el-form-item> - <el-form-item label="涓荤嚎鑺埅闈�" :label-width="formLabelWidth"> - <el-select v-model="specificationForm.crossSection" placeholder="璇烽�夋嫨涓荤嚎鑺埅闈�"> - <el-option label="鍒嗙被1" value="test" /> - <el-option label="鍒嗙被2" value="2" /> - <el-option label="鍒嗙被3" value="3" /> - </el-select> - </el-form-item> - <el-form-item label="涓荤嚎鑺姱鏁�" :label-width="formLabelWidth"> - <el-select v-model="specificationForm.numberOfCores" placeholder="璇烽�夋嫨涓荤嚎鑺姱鏁�"> - <el-option label="鍒嗙被1" value="test" /> - <el-option label="鍒嗙被2" value="2" /> - <el-option label="鍒嗙被3" value="3" /> - </el-select> - </el-form-item> - </el-form> - <div slot="footer" class="dialog-footer"> - <el-button @click="dialogFormVisible3 = false">鍙� 娑�</el-button> - <el-button type="primary" @click="submitForm()">纭� 瀹�</el-button> - </div> - </el-dialog> - <!-- 缂栬緫瑙勬牸 --> - <el-dialog title="缂栬緫瑙勬牸" :visible.sync="dialogFormVisible4" width="30%"> - <el-form ref="form" :model="editSpeForm" :rules="rulesspecification"> - <el-form-item label="瑙勬牸鍚嶇О" :label-width="formLabelWidth" prop="name"> - <el-input v-model="editSpeForm.name" autocomplete="off" /> - </el-form-item> - <el-form-item label="瑙勬牸缂栧彿" :label-width="formLabelWidth" prop="number"> - <el-input v-model="editSpeForm.number" autocomplete="off" /> - </el-form-item> - <el-form-item label="涓婃柟濉啓鐢熶骇鎸囦护鍙�" :label-width="formLabelWidth" prop="instruct"> - <el-input v-model="editSpeForm.instruct" autocomplete="off" /> - </el-form-item> - <el-form-item label="鐢靛帇绛夌骇" :label-width="formLabelWidth"> - <el-select v-model="editSpeForm.voltageLevel" placeholder="璇烽�夋嫨鐢靛帇绛夌骇"> - <el-option label="鍒嗙被1" value="test" /> - <el-option label="鍒嗙被2" value="2" /> - <el-option label="鍒嗙被3" value="3" /> - </el-select> - </el-form-item> - <el-form-item label="涓荤嚎鑺埅闈�" :label-width="formLabelWidth"> - <el-select v-model="editSpeForm.crossSection" placeholder="璇烽�夋嫨涓荤嚎鑺埅闈�"> - <el-option label="鍒嗙被1" value="test" /> - <el-option label="鍒嗙被2" value="2" /> - <el-option label="鍒嗙被3" value="3" /> - </el-select> - </el-form-item> - <el-form-item label="涓荤嚎鑺姱鏁�" :label-width="formLabelWidth"> - <el-select v-model="editSpeForm.numberOfCores" placeholder="璇烽�夋嫨涓荤嚎鑺姱鏁�"> - <el-option label="鍒嗙被1" value="test" /> - <el-option label="鍒嗙被2" value="2" /> - <el-option label="鍒嗙被3" value="3" /> - </el-select> - </el-form-item> - <el-form-item label="瑙勬牸鐘舵��" :label-width="formLabelWidth"> - <el-select v-model="editSpeForm.spe_state" placeholder="璇烽�夋嫨瑙勬牸鐘舵��"> - <el-option label="鍋滅敤" value="0" /> - <el-option label="姝e父" value="1" /> - <el-option label="鑽夌" value="-1" /> - </el-select> - </el-form-item> - </el-form> - <div slot="footer" class="dialog-footer"> - <el-button @click="dialogFormVisible4 = false">鍙� 娑�</el-button> - <el-button type="primary" @click="handleEdit">纭� 瀹�</el-button> - </div> - </el-dialog> - <!-- 鍋滅敤 --> - <el-dialog - title="鎻愮ず" - :visible.sync="dialogFormVisible5" - width="30%" - > - <span>纭鍋滅敤鍚楋紵</span> - <span slot="footer" class="dialog-footer"> - <el-button @click="dialogFormVisible5 = false">鍙� 娑�</el-button> - <el-button type="primary" @click="updateSpeState">纭� 瀹�</el-button> - </span> - </el-dialog> + <!-- --> </div> <div> <!-- 鍒嗛〉鍣� --> - <el-pagination + <!-- <el-pagination :current-page="pageParams.pageNo" :page-sizes="[10, 15, 20, 25]" - :page-size="pageParams.pageNo" + :page-size="pageParams.pageSize" layout="total, sizes, prev, pager, next, jumper" :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-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, getStandardsListOfPage, addStandards, addSerialNumber, addSpecifications, updateSpecifications, updateSpeState } from '@/api/standardLibrary' +import { + getMaterialList, + getProductList, + getProductSonList, + addMaterial, + addStandards, + addSpecifications, + deleteListApi, +} from "@/api/standardLibrary"; + +import { selectproductModelApi } from "@/api/basicData/index"; export default { data() { return { - dialogFormVisible1: false, - dialogFormVisible2: false, - dialogFormVisible3: false, - dialogFormVisible4: false, - dialogFormVisible5: false, - visible: false, - filterText: '', + deleteList: [], + addTreeFormVisible: false, + filterText: "", // 鏍囧噯搴揵om鏍� standardTree: [], - // bom鐨�,榛樿鍊� + // bom鐨�,榛樿閰嶇疆鍊� defaultProps: { - children: 'children', - label: 'label' + children: "children", + label: "name", + value: "id", }, // 鏌ヨ鏉′欢 searchData: { - keyword: '' + keyword: "", }, - tableData: [ - ], + tableData: [], oldtableData: [], // 鍒嗛〉鍙傛暟 pageParams: { pageNo: 1, - pageSize: 10, - total: 0 + pageSize: 12, + total: 0, }, - tablespecifications: [ - ], - // 閫変腑鑺傜偣瀵瑰簲鐨勮〃鏍� 0 鏄爣鍑嗚〃 1鏄瀷鍙疯〃 2瑙勬牸琛� - showTableCurrent: 0, + tablespecifications: [], // 閫変腑鐨勮妭鐐规暟鎹� - selectNode: {}, - selectedNodeType: '娣诲姞鏍囧噯', - standardForm: [{ - standardnumber: '', - standardname: '', - engname: '', - type: '' - }], - modelForm: [{ - model: '', - modelname: '' - }], - specificationForm: [{ - name: '', // 浜у搧瑙勬牸鍚嶇О - number: '', // 瑙勬牸缂栧彿 - crossSection: '', - numberOfCores: '', - instruct: '', - voltageLevel: '' - }], - editSpeForm: [{ - crossSection: '', - instruct: '', - name: '', // 瑙勬牸鍚嶇О - number: '', // 瑙勬牸缂栧彿 - numberOfCores: '', - serialId: '', // 鍨嬪彿ID - spe_state: '', - voltageLevel: '' - }], - formLabelWidth: '100px', - rulesStandard: { - standardnumber: [ - { - required: true, message: '璇疯緭鍏ユ爣鍑嗗彿', trigger: 'blur' - } - ], - standardname: [{ - required: true, message: '璇疯緭鍏ユ爣鍑嗗悕绉�', trigger: 'blur' - }], - standardenname: [ - { required: false, message: '璇疯緭鍏ヨ嫳鏂囧悕绉�', trigger: 'blur' } - ] + selectData: {}, + formTypeOptions: [], + addTreeForm: { + addTypeArr: [], }, - rulesModel: { - model: [ - { required: true, message: '璇疯緭鍏ュ瀷鍙�', trigger: 'blur' - }], - modelname: [{ - required: true, message: '璇疯緭鍏ュ瀷鍙峰悕绉�', trigger: 'blur' - }], - parentclassification: [ - { required: true, message: '璇疯緭鍏�', trigger: 'blur' } - ] - }, - rulesspecification: { - number: [ - { required: true, message: '璇疯緭鍏ヨ鏍肩紪鍙�', trigger: 'blur' - }], - name: [{ - required: true, message: '璇疯緭鍏ヨ鏍煎悕绉�', trigger: 'blur' - }], - instruct: [ - { required: true, message: '璇疯緭鍏ヤ笂鏂瑰~鍐欑敓浜ф寚浠ゅ彿', trigger: 'blur' } - ] - }, - standardId: '', // 鑾峰彇褰撳墠鏍囧噯ID - modelId: '', // 鑾峰彇褰撳墠鍨嬪彿ID - rowId: '' // 鑾峰彇褰撳墠瑙勬牸鎵�鍦ㄨID - } + }; }, watch: { filterText(val) { - this.$refs.tree.filter(val) - } + this.$refs.tree.filter(val); + }, }, created() { - this.getStandardTree() - this.getAllStandard() + 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() { - this.selectedNodeType = '娣诲姞鏍囧噯' - const { data: standard } = await getStandardsList()// 鑾峰彇鎵�鏈夋爣鍑� - // console.log(standard)// 鑾峰彇鎵�鏈夋爣鍑� - this.standardTree = standard.map(item => { - item.serialNumber = item.serialNumber?.map(childrenItem => ({ ...childrenItem, label: childrenItem.name })) - return { ...item, label: item.name, children: item.serialNumber } - }) - // console.log(this.standardTree) + const { data } = await getMaterialList(); + console.log(data); + this.standardTree = data.map((item) => { + let name = null; + switch (item.type) { + case 1: + name = "鍘熸潗鏂�"; + break; + case 2: + name = "鍗婃垚鍝�"; + break; + case 3: + name = "鎴愬搧"; + break; + } + return { + ...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; + 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(); + // console.log(firstNode) + }); + }, + 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; + } + } + // else { + // // if ('children' in item) { + // // // + // // } else { + // // // console.log(index, item) + // // } + // } + } }, // 鐐瑰嚮bom鏍戣妭鐐规柟娉� async nodeClick(data, node, element) { // console.log('data', data) // console.log('children' in data) // 鏄瓙鑺傜偣 - if (!('children' in data)) { - // console.log('鐐瑰嚮瀛愯妭鐐�', data) - this.selectedNodeType = '娣诲姞瑙勬牸' - this.modelId = data.id - this.selectNode = data - // 鑾峰彇鐐瑰嚮瀛愯妭鐐圭殑琛ㄦ牸 - await this.getSpecifications(data) - return + if (node.level === 4) { + console.log(data, node); + // 瀛樹笅閫変腑鑺傜偣 + this.selectData = data; + // eslint-disable-next-line prefer-const + this.getTableByClick(data); } - // 涓嶆槸瀛愯妭鐐� - this.selectedNodeType = '娣诲姞鍨嬪彿' - this.standardId = data.id - this.selectNode = data - await this.getSerialNumber(data) + 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, + }); + // console.log(row) + 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; + } + } + this.tableData = row; }, specificationDetails(row) { // 璺宠浆浜у搧瑙勬牸璇︽儏椤� - this.$router.push(`/standardLibrary/SpecificationDetails/${row.id}`) - }, - // 鑾峰彇褰撳墠瑙勬牸鐨勮id - getRowID(row) { - // console.log(row.id) - this.id = row.id - }, - // 鑾峰彇鎵�鏈夋爣鍑唗able - async getAllStandard() { - this.selectedNodeType = '娣诲姞鏍囧噯' - // console.log(this.pageParams) - const { data: { row, total }} = await getStandardsListOfPage({ ...this.pageParams }) - // console.log('寰楀埌鎵�鏈夋爣鍑�==>', row) - this.pageParams.total = total - this.tableData = row - this.tablespecifications = [ - { - prop: 'name', - label: '鏍囧噯鍚嶇О', - minWidth: '150px' - }, - { - prop: 'eng_name', - label: '鏍囧噯鑻辨枃鍚嶇О', - minWidth: '150px' - }, - { - prop: 'createTime', - label: '鍒涘缓鏃堕棿', - minWidth: '150px' - } - ] - this.showTableCurrent = 0 - }, - // 鑾峰彇瀵瑰簲鍨嬪彿涓嬬殑鎵�鏈夎鏍� - async getSerialNumber(data) { - const { data: { row, total }} = await getSerialNumberList({ standardsId: data.id, ...this.pageParams }) - console.log('鐐瑰嚮鐖惰妭鐐�', row)// 鏍规嵁鏍囧噯鑾峰彇瀵瑰簲鏍囧噯涓嬬殑瑙勬牸 - this.tableData = row - this.pageParams.total = total - this.tablespecifications = [ - { - prop: 'name', - label: '鍨嬪彿鍚嶇О', - minWidth: '150px' - } - ] - this.showTableCurrent = 1 - }, - // 鑾峰彇鏍囧噯涓嬪搴旂殑鎵�鏈夊瀷鍙� - async getSpecifications(data) { - const { data: { row, total }} = await getSpecificationsList({ serialNumberId: data.id, ...this.pageParams }) - // console.log(row) - this.tableData = row - this.pageParams.total = total - this.tablespecifications = [ - { - prop: 'name', - label: '浜у搧鍚嶇О', - minWidth: '150px' - }, - { - prop: 'username', - label: '鏇存柊浜�', - minWidth: '100px' - }, - { - prop: 'updateTime', - label: '鏇存柊鏃堕棿', - minWidth: '150px' - }, - { - prop: 'vel', - label: '鐗堟湰', - minWidth: '150px' - } - ] - this.showTableCurrent = 2 - }, - // 灞曠ず寮瑰嚭妗� - showFormInfo() { - if (this.selectedNodeType === '娣诲姞鏍囧噯') { - this.dialogFormVisible1 = true - } else if (this.selectedNodeType === '娣诲姞鍨嬪彿') { - this.dialogFormVisible2 = true - } else { - this.dialogFormVisible3 = true - } - }, - async submitForm() { - if (this.showTableCurrent === 0) { - await addStandards({ engName: this.standardForm.engname, - id: this.standardForm.standardnumber, - name: this.standardForm.standardname, - type: parseInt(this.standardForm.type) }) - this.dialogFormVisible1 = false - } else if (this.showTableCurrent === 1) { - await addSerialNumber({ id: this.modelForm.model, - name: this.modelForm.modelname, - standardsId: this.standardId // 鍏宠仈鏍囧噯ID - }) - this.dialogFormVisible2 = false - } else { - await addSpecifications({ crossSection: this.specificationForm.crossSection, - instruct: this.specificationForm.instruct, - name: this.specificationForm.name, - number: this.specificationForm.number, - numberOfCores: this.specificationForm.numberOfCores, - serialId: this.modelId, // 鍏宠仈鍨嬪彿ID - voltageLevel: this.specificationForm.voltageLevel - }) - this.dialogFormVisible3 = false - } - }, - - // 鍒嗛〉鏉′欢鏀瑰彉鏃跺垽鏂渶瑕佸垎椤垫煡璇㈢殑鏂规硶 - judgment() { - switch (this.showTableCurrent) { - case 0: - this.getAllStandard() - break - case 1: - this.getSerialNumber(this.selectNode) - break - case 2: - this.getSpecifications(this.selectNode) - break - } + this.$router.push(`/standardLibrary/SpecificationDetails/${row.id}`); }, handleSizeChange(val) { - console.log(`姣忛〉 ${val} 鏉) - this.pageParams.pageSize = val - this.judgment() + console.log(`姣忛〉 ${val} 鏉); + this.pageParams.pageSize = val; + this.getTableByClick(this.selectData); }, handleCurrentChange(val) { - console.log(`褰撳墠椤�: ${val}`) - this.pageParams.pageNo = val - this.judgment() + 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 - }, - // 澶勭悊缂栬緫瑙勬牸 - async handleEdit() { - // console.log(this.id) - await updateSpecifications({ crossSection: this.editSpeForm.crossSection, - id: this.rowId, - instruct: this.editSpeForm.instruct, - name: this.editSpeForm.name, - number: this.editSpeForm.number, - numberOfCores: this.editSpeForm.numberOfCores, - serialId: this.modelId, // 鍏宠仈鍨嬪彿ID - spe_state: this.editSpeForm.spe_state, - voltageLevel: this.editSpeForm.spe_state }) - this.dialogFormVisible4 = false - }, - // 鍋滅敤 - async updateSpeState() { - await updateSpeState({ id: this.rowId, - spe_state: '0' }) - this.dialogFormVisible5 = false + 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> + <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> )} - <span> {data.label}</span> + <div class="tree-lable"> + [{node.level}] {data.name} + </div> </span> - ) - } - } -} + ); + }, + async subAddTreeForm() { + 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; + 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 = {}; + this.getStandardTree(); + this.getTableByClick(this.selectData); + }, + changeCascader(data) { + console.log(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) => { + 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) { + padding-left: 23px !important; + } +} // .dialogform { // transform: translate(-50%, -50%); // top: 50% !important; @@ -621,32 +594,49 @@ // width: 1000px; // height: 800px; // } -.standard-library-main{ - width: 100%; +.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; + // height: 100%; + max-height: 100%; + // margin-right: 12px; + // overflow-y: scroll; .el-tree { - // margin-top: 12px; - ::v-deep .el-tree-node__content{ + // margin-top: + width: 100%; + ::v-deep .el-tree-node__content { height: 24px !important; - font-size: 16px; - display: inline-block !important; + font-size: 18px; + // display: inline-block !important; padding: 2px; - color: #333; - .blue-folder{ - color: rgb(64, 158, 255) + // 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); } } } @@ -673,35 +663,51 @@ // } // } } - .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{ + .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; + + .el-table { + // flex: 1; + // max-height: 680px; + // overflow-y: scroll; + } + > 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%; + } + } } </style> -- Gitblit v1.9.3