From 6cd44812a96026d6c6d0fff397eb2662c75fedd3 Mon Sep 17 00:00:00 2001 From: Goldennfish <1981343953@qq.com> Date: 星期五, 28 七月 2023 17:00:04 +0800 Subject: [PATCH] 实验室管理设备台账完善 --- src/views/standardLibrary/index.vue | 447 +++++++++++++++++++++++++++++++++++++++++++++++-------- 1 files changed, 381 insertions(+), 66 deletions(-) diff --git a/src/views/standardLibrary/index.vue b/src/views/standardLibrary/index.vue index a848a7a..2d03597 100644 --- a/src/views/standardLibrary/index.vue +++ b/src/views/standardLibrary/index.vue @@ -14,6 +14,7 @@ :props="defaultProps" default-expand-all :filter-node-method="filterNode" + :render-content="renderContent" @node-click="nodeClick" /> </div> @@ -30,14 +31,14 @@ </el-input> </el-form-item> <el-form-item> - <el-button type="primary">鏌ヨ</el-button> - <el-button type="primary" plain>閲嶇疆</el-button> + <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> --> </el-form-item> </el-form> </div> <div class="serve-btn"> - <el-button type="primary" icon="el-icon-plus">鏂板浜哄憳</el-button> + <el-button type="primary" icon="el-icon-plus" @click="showFormInfo">{{ selectedNodeType }}</el-button> </div> </div> <div class="table-box"> @@ -53,6 +54,7 @@ label="搴忓彿" min-width="50" /> + <!-- 澶嶇敤 --> <el-table-column v-for="(item,index) in tablespecifications" :key="index" @@ -70,7 +72,7 @@ <el-tag :type="scope.row.spe_state === 0 ? 'primary' : 'success'" disable-transitions - >{{ scope.row.spe_state === 0 ? '鏈悓鎰�' : '宸插悓鎰�' }}</el-tag> + >{{ scope.row.spe_state === 0 ? '宸插仠鐢�' : '宸插惎鐢�' }}</el-tag> </template> </el-table-column> <el-table-column @@ -89,12 +91,12 @@ placement="top" width="30" > - <div style="text-align: center; margin: 0"> + <div style="text-align: center; margin: 0" @click=" getRowID(scope.row)"> <div> - <el-button size="mini" type="text">缂栬緫</el-button> + <el-button size="mini" type="text" @click="dialogFormVisible4=true">缂栬緫</el-button> </div> <div> - <el-button size="mini" type="text">鍋滅敤</el-button> + <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> @@ -102,12 +104,151 @@ </template> </el-table-column> </template> - </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 :current-page="pageParams.pageNo" - :page-sizes="[10, 20, 30, 40]" + :page-sizes="[10, 15, 20, 25]" :page-size="pageParams.pageNo" layout="total, sizes, prev, pager, next, jumper" :total="pageParams.total" @@ -122,10 +263,15 @@ </template> <script> -import { getStandardsList, getSerialNumberList, getSpecificationsList, getStandardsListOfPage } from '@/api/standardLibrary' +import { getStandardsList, getSerialNumberList, getSpecificationsList, getStandardsListOfPage, addStandards, addSerialNumber, addSpecifications, updateSpecifications, updateSpeState } from '@/api/standardLibrary' export default { data() { return { + dialogFormVisible1: false, + dialogFormVisible2: false, + dialogFormVisible3: false, + dialogFormVisible4: false, + dialogFormVisible5: false, visible: false, filterText: '', // 鏍囧噯搴揵om鏍� @@ -140,44 +286,88 @@ keyword: '' }, tableData: [ - { - id: 2, - name: 'AB', - updateTime: '2023-07-12 00:00:12', - username: '灏忓皬', - vel: 'V1.0', - spe_state: 1, - visible: false - }, - { - id: 3, - name: 'AB', - updateTime: '2023-07-12 00:00:12', - username: '灏忓皬', - vel: 'V1.0', - spe_state: 1, - visible: false - - }, - { - id: 4, - name: 'AB', - updateTime: '2023-07-12 00:00:12', - username: '灏忓皬', - vel: 'V1.0', - spe_state: 1, - visible: false - - } ], + oldtableData: [], + // 鍒嗛〉鍙傛暟 pageParams: { pageNo: 1, pageSize: 10, - total: 3 + total: 0 }, tablespecifications: [ ], - showTableCurrent: 0 + // 閫変腑鑺傜偣瀵瑰簲鐨勮〃鏍� 0 鏄爣鍑嗚〃 1鏄瀷鍙疯〃 2瑙勬牸琛� + showTableCurrent: 0, + // 閫変腑鐨勮妭鐐规暟鎹� + 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' } + ] + }, + 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: { @@ -196,6 +386,7 @@ }, // 鑾峰彇bom鏍戠殑鏍囧噯鏁版嵁 async getStandardTree() { + this.selectedNodeType = '娣诲姞鏍囧噯' const { data: standard } = await getStandardsList()// 鑾峰彇鎵�鏈夋爣鍑� // console.log(standard)// 鑾峰彇鎵�鏈夋爣鍑� this.standardTree = standard.map(item => { @@ -206,25 +397,39 @@ }, // 鐐瑰嚮bom鏍戣妭鐐规柟娉� async nodeClick(data, node, element) { - console.log(data) + // 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 } + // 涓嶆槸瀛愯妭鐐� + this.selectedNodeType = '娣诲姞鍨嬪彿' + this.standardId = data.id + this.selectNode = data await this.getSerialNumber(data) }, specificationDetails(row) { // 璺宠浆浜у搧瑙勬牸璇︽儏椤� - console.log(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) + // console.log('寰楀埌鎵�鏈夋爣鍑�==>', row) this.pageParams.total = total this.tableData = row this.tablespecifications = [ @@ -246,10 +451,25 @@ ] 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, pageNo: 1, pageSize: 10 }) - console.log(row) + const { data: { row, total }} = await getSpecificationsList({ serialNumberId: data.id, ...this.pageParams }) + // console.log(row) this.tableData = row this.pageParams.total = total this.tablespecifications = [ @@ -276,46 +496,131 @@ ] this.showTableCurrent = 2 }, - // 鑾峰彇瀵瑰簲鍨嬪彿涓嬬殑鎵�鏈夎鏍� - 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 + // 灞曠ず寮瑰嚭妗� + showFormInfo() { + if (this.selectedNodeType === '娣诲姞鏍囧噯') { + this.dialogFormVisible1 = true + } else if (this.selectedNodeType === '娣诲姞鍨嬪彿') { + this.dialogFormVisible2 = true + } else { + this.dialogFormVisible3 = true + } }, - handleSizeChange(val) { - console.log(`姣忛〉 ${val} 鏉) - this.pageParams.pageSize = val + 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.getAllStandard() + this.getSerialNumber(this.selectNode) break case 2: - this.getAllStandard() + this.getSpecifications(this.selectNode) break } + }, + handleSizeChange(val) { + console.log(`姣忛〉 ${val} 鏉) + this.pageParams.pageSize = val + this.judgment() }, handleCurrentChange(val) { console.log(`褰撳墠椤�: ${val}`) this.pageParams.pageNo = val + this.judgment() + }, + // 鏌ヨ鎸夐挳 + filteredTableData() { + this.oldtableData = this.tableData + // 鏍规嵁杈撳叆鐨勫叧閿瓧寰楀埌杩囨护鍚庣殑鏁版嵁锛屽鏋滄湁灏辨妸杩囨护鍚庣殑鏁版嵁灞曠ず鍦ㄩ〉闈笂 + const filteredtabledata = this.tableData.filter(item => { + return item.name.includes(this.searchData.keyword) + }) + // console.log('filteredtabledata', 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 + }, + renderContent(h, { node, data, store }) { + // console.log('data', data) + // console.log('node', node) + // 鍒ゆ柇鏄惁鏄埗鑺傜偣鎴栨枃浠跺す + const isFolder = ('children') in data + return ( + <span> + {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> + )} + <span> {data.label}</span> + </span> + ) } } } </script> <style lang="scss" scoped> - +// .dialogform { +// transform: translate(-50%, -50%); +// top: 50% !important; +// left: 50% !important; +// width: 1000px; +// height: 800px; +// } .standard-library-main{ width: 100%; height: 100%; @@ -334,6 +639,16 @@ margin-right: 12px; .el-tree { // margin-top: 12px; + ::v-deep .el-tree-node__content{ + height: 24px !important; + font-size: 16px; + display: inline-block !important; + padding: 2px; + color: #333; + .blue-folder{ + color: rgb(64, 158, 255) + } + } } // .el-tree { // margin-top: 12px; -- Gitblit v1.9.3