From ccfd5dc264d07471d831d2287ff03f293c295981 Mon Sep 17 00:00:00 2001 From: Goldennfish <1981343953@qq.com> Date: 星期二, 25 七月 2023 14:22:44 +0800 Subject: [PATCH] Merge branch 'master' of https://gitee.com/yuanchu_code/lims-front-end --- src/views/laboratory/ledger/index.vue | 627 +++++++++++++++++++++++++++++++++++++++++++++++++++++---- 1 files changed, 583 insertions(+), 44 deletions(-) diff --git a/src/views/laboratory/ledger/index.vue b/src/views/laboratory/ledger/index.vue index 619ac3b..242feea 100644 --- a/src/views/laboratory/ledger/index.vue +++ b/src/views/laboratory/ledger/index.vue @@ -2,7 +2,7 @@ <div class="ledger-main"> <div class="page-header-search"> <div class="search-bar"> - <el-form ref="form" inline="true" :model="searchData"> + <el-form ref="form" :inline="true" :model="searchData"> <el-form-item> <el-input v-model="searchData.keyword" @@ -19,22 +19,31 @@ </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="drawerFormVisible = true">鏂板浜哄憳</el-button> </div> </div> <div class="content-main"> <div class="library-bom"> - <el-input - v-model="filterText" - placeholder="杈撳叆鍏抽敭瀛楄繘琛岃繃婊�" - /> + <div class="bom-item-search"> + <el-row> + <el-col :span="19"> + <el-input + v-model="filterText" + placeholder="杈撳叆鍏抽敭瀛楄繘琛岃繃婊�" + /> + </el-col> + <el-col :span="5"> + <el-button type="primary" size="small" @click="FormVisible = true"><i class="el-icon-plus" /></el-button> + </el-col> + </el-row> + </div> <el-tree - ref="tree" - class="filter-tree" - :data="data" + ref="classTree" + :data="classTree" :props="defaultProps" default-expand-all :filter-node-method="filterNode" + @node-click="nodeClickHandler" /> </div> <div class="library-table"> @@ -56,60 +65,47 @@ </div> <div class="table-box"> <el-table - ref="personnerlTable" - + ref="equipmentTable" + node-key="father_name" :cell-style="{textAlign: 'center'}" :header-cell-style="{border:'0px',background:'#f5f7fa',color:'#606266',boxShadow: 'inset 0 1px 0 #ebeef5',textAlign: 'center'}" - :data="personnerlTable" + :data="equipmentTable" style="width: 100%" > <el-table-column - prop="roleName" + type="index" label="搴忓彿" min-width="90" /> <el-table-column - prop="rolePermissions" + prop="equipment_code" label="浠櫒璁惧缂栧彿" - min-width="150" + min-width="200" /> <el-table-column - prop="age" + prop="equipment_name" label="浠櫒璁惧鍚嶇О" min-width="150" /> <el-table-column - prop="creatTime" + prop="specifications_models" label="瑙勬牸鍨嬪彿" min-width="150" /> <el-table-column - prop="phone" - label="涓婃璁¢噺鏃堕棿" + prop="name" + label="淇濈浜�" min-width="200" /> <el-table-column - prop="mailbox" - label="涓婃璁¢噺鍗曚綅" + prop="termValidity" + label="璁¢噺鎴鏈夋晥鏈�" min-width="200" /> <el-table-column - prop="mailbox" - label="鎴鏈夋晥鏈�" - min-width="200" - /> - <el-table-column - prop="mailbox" - label="璁¢噺鍛ㄦ湡" - min-width="200" - /> - <el-table-column - prop="incumbentStatus" + prop="conditions" label="璁惧鐘舵��" min-width="120" - :filters="[{ text: 0, value: 0 }, { text: 1, value: 1 }]" - :filter-method="filterTag" - filter-placement="bottom-end" > <template slot-scope="scope"> <el-tag @@ -119,23 +115,54 @@ </template> </el-table-column> <el-table-column + prop="storage_place" + label="瀛樻斁鍦�" + min-width="200" + /> + <el-table-column + prop="storage_place" + label="瀛樻斁鍦�" + min-width="200" + /> + <el-table-column label="鎿嶄綔" min-width="120" - :fixed="true" + fixed="right" > <template slot-scope="scope"> - <el-button type="text" size="small" @click="handleClick(scope.row)">缂栬緫</el-button> - <!-- <el-button type="text" size="small">缂栬緫</el-button> --> + <el-button type="text" size="small" @click="openDetail(scope.row)">缂栬緫</el-button> + <el-button type="text" size="small">鍒犻櫎</el-button> </template> </el-table-column> </el-table> + <!-- 寮瑰嚭琛ㄥ崟椤� --> + <div> + <!-- 娣诲姞鍒嗙被 --> + <el-dialog title="娣诲姞鍒嗙被" :visible.sync="FormVisible" width="33%"> + <el-form :model="treeForm"> + <el-form-item label="鍒嗙被鍚嶇О" label-width="100px"> + <el-input v-model="treeForm.name" autocomplete="off" /> + </el-form-item> + <el-form-item label="鐖剁骇鍒嗙被" label-width="100px"> + <el-select v-model="treeForm.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="FormVisible = false">鍙� 娑�</el-button> + <el-button type="primary">纭� 瀹�</el-button> + </div> + </el-dialog> + </div> <div> <el-pagination :current-page="currentPage" - :page-sizes="[100, 200, 300, 400]" - :page-size="100" + :page-sizes="[10, 15, 20, 25]" + :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" - :total="400" + :total="total" @size-change="handleSizeChange" @current-change="handleCurrentChange" /> @@ -143,15 +170,273 @@ </div> </div> </div> + <!-- 鎶藉眽 --> + <el-drawer + title="鏂板浠櫒璁惧" + :before-close="handleClose" + :visible.sync="drawerFormVisible" + direction="rtl" + custom-class="demo-drawer" + ref="drawer" + size="40%" + > + <div class="demo-drawer__content"> + <el-form label-position="top" :model="equipmentform"> + <el-row :gutter="50"> + <el-col :span="11"> + <el-form-item label="鎵�灞炲垎绫伙細" label-width="80"> + <el-select + v-model="equipmentform.classifyId" + clearable + filterable + :allow-create="true" + placeholder="璇烽�夋嫨" + @blur="productSelect" + style="width:100%" + > + <el-option + v-for="item in fatherOpetions" + :key="item.id" + :label="item.label" + :value="item.label" + /> + </el-select> + </el-form-item> + </el-col> + <el-col :span="11"> + <el-form-item label="璁惧缂栧彿锛�" label-width="80"> + <el-input v-model="equipmentform.equipmentCode" autocomplete="off" /> + </el-form-item> + </el-col> + </el-row> + <el-row :gutter="50"> + <el-col :span="11"> + <el-form-item label="浠櫒璁惧鍚嶇О锛�" label-width="80"> + <el-input v-model="equipmentform.name" autocomplete="off" /> + </el-form-item> + </el-col> + <el-col :span="11"> + <el-form-item label="鐘舵�侊細" label-width="80"> + <el-select + v-model="equipmentform.classifyId" + clearable + filterable + :allow-create="true" + placeholder="璇烽�夋嫨浠櫒璁惧鐘舵��" + @blur="productSelect" + style="width:100%" + > + <el-option + v-for="item in fatherOpetions" + :key="item.id" + :label="item.label" + :value="item.label" + /> + </el-select> + </el-form-item> + </el-col> + </el-row> + <el-row :gutter="50"> + <el-col :span="11"> + <el-form-item label="鍨嬪彿瑙勬牸锛�" label-width="80"> + <el-input v-model="equipmentform.specification_models" autocomplete="off" /> + </el-form-item> + </el-col> + <el-col :span="11"> + <el-form-item label="娴嬮噺鑼冨洿锛�" label-width="80"> + <el-input v-model="equipmentform.measuringRange" autocomplete="off" /> + </el-form-item> + </el-col> + </el-row> + <el-row :gutter="50"> + <el-col :span="11"> + <el-form-item label="涓嶇‘瀹氬害/鍑嗙‘搴�/鏈�澶у厑璁歌宸細" label-width="80"> + <el-input v-model="equipmentform.errorRate" autocomplete="off" /> + </el-form-item> + </el-col> + <el-col :span="11"> + <el-form-item label="鐢熶骇鍘傚锛�" label-width="80"> + <el-input v-model="equipmentform.manufacturer" autocomplete="off" /> + </el-form-item> + </el-col> + </el-row> + <el-row :gutter="50"> + <el-col :span="11"> + <el-form-item label="瀛樻斁鍦扮偣锛�" label-width="80"> + <el-input v-model="equipmentform.storagePlace" autocomplete="off" /> + </el-form-item> + </el-col> + <el-col :span="11"> + <el-form-item label="鍒拌揣鏃ユ湡锛�" label-width="80"> + <el-date-picker + v-model="equipmentform.arrivalDate" + type="date" + placeholder="璇烽�夋嫨鍒拌揣鏃ユ湡" + style="width:100%"> + </el-date-picker> + </el-form-item> + </el-col> + </el-row> + <el-row :gutter="50"> + <el-col :span="11"> + <el-form-item label="楠屾敹鏃ユ湡锛�" label-width="80"> + <el-date-picker + v-model="equipmentform.acceptanceDate" + type="date" + placeholder="璇烽�夋嫨楠屾敹鏃ユ湡" + style="width:100%"> + </el-date-picker> + </el-form-item> + </el-col> + <el-col :span="11"> + <el-form-item label="淇濈浜猴細" label-width="80"> + <el-select + v-model="equipmentform.keeper" + clearable + filterable + :allow-create="true" + placeholder="璇烽�夋嫨淇濈浜�" + @blur="productSelect" + style="width:100%" + > + <el-option + v-for="item in fatherOpetions" + :key="item.id" + :label="item.label" + :value="item.label" + /> + </el-select> + </el-form-item> + </el-col> + </el-row> + <el-row :gutter="50"> + <el-col :span="11"> + <el-form-item label="鏄惁鏀寔鏁伴噰锛�" label-width="80"> + <el-radio v-model="equipmentform.whetherDataAcquisition" label="1">鏄�</el-radio> + <el-radio v-model="equipmentform.whetherDataAcquisition" label="2">鍚�</el-radio> + </el-form-item> + </el-col> + <el-col :span="11"> + <el-form-item label="浠櫒璁惧璁¢噺锛�" label-width="80"> + <el-radio v-model="equipmentform.equipmentMeasurement" label="1">闇�瑕�</el-radio> + <el-radio v-model="equipmentform.equipmentMeasurement" label="2">涓嶉渶瑕�</el-radio> + </el-form-item> + </el-col> + </el-row> + <el-row :gutter="50"> + <el-col :span="11"> + <el-form-item label="鎻忚堪锛�" label-width="80"> + <el-input + type="textarea" + :rows="2" + placeholder="璇疯緭鍏ュ唴瀹�" + v-model=equipmentform.descriptiveness + style="width:217%"> + </el-input> + </el-form-item> + </el-col> + </el-row> + </el-form> + <div class="demo-drawer__footer"> + <el-button @click="drawerFormVisible = false" class="el-button--default">鍙� 娑�</el-button> + <el-button type="primary" class="el-button--primary el-button--medium">纭� 瀹�</el-button> + </div> + </div> + </el-drawer> + <!-- --> + <el-drawer + title="浠櫒璁惧璇︽儏" + :visible.sync="detailDrawer" + size="80%" + class="detailDrawer" + > + <div> + <div class="detail-info"> + <div class="tips-main"> + <div class="tips"> + <span /> + <div>鍩烘湰淇℃伅</div> + </div> + <div class="tips-btn"> + <span><i class="el-icon-edit" />鎿嶄綔锛�</span> + <el-button type="text" @click="dialogFormVisible = true">缂栬緫</el-button> + </div> + </div> + <div class="message"> + <div class="message-item"><span><i class="el-icon-edit" />鎵�灞炲垎绫伙細</span></div> + <div class="message-item"> + <span><i class="el-icon-edit" />鍒涘缓浜猴細</span> + <el-tag type="primary"><i class="el-icon-info" :style="{marginRight:'4px', color:'#409EFF'}" /></el-tag> + </div> + <div class="message-item"> + <span><i class="el-icon-edit" />寤烘。鏃ユ湡锛�</span> + </div> + <div class="message-item"> + <span><i class="el-icon-edit" />璁惧缂栧彿锛�</span> + </div> + <div class="message-item"> + <span><i class="el-icon-edit" />鍨嬪彿瑙勬牸锛�</span> + </div> + <div class="message-item"> + <span><i class="el-icon-edit" />娴嬮噺鑼冨洿锛�</span> + </div> + <div class="message-item"> + <span><i class="el-icon-edit" />涓嶇‘瀹氬害/璇樊锛�</span> + </div> + <div class="message-item"> + <span><i class="el-icon-edit" />鐢熶骇鍘傚锛�</span> + </div> + <div class="message-item"> + <span><i class="el-icon-edit" />瀛樻斁鍦扮偣锛�</span> + </div> + <div class="message-item"> + <span><i class="el-icon-edit" />鍒拌揣鏃ユ湡锛�</span> + </div> + <div class="message-item"> + <span><i class="el-icon-edit" />楠屾敹鏃ユ湡锛�</span> + </div> + <div class="message-item"> + <span><i class="el-icon-edit" />淇濈浜猴細</span> + </div> + <div class="message-item"> + <span><i class="el-icon-edit" />鏄惁鏀寔鏁伴噰锛�</span> + </div> + <div class="message-item"> + <span><i class="el-icon-edit" />浠櫒璁惧璁¢噺锛�</span> + </div> + <div class="message-item"> + <span><i class="el-icon-edit" />璁¢噺鍛ㄦ湡锛�</span> + </div> + <div class="message-item"> + <span><i class="el-icon-edit" />鎻忚堪锛�</span> + </div> + </div> + </div> + <el-tabs> + <el-tab-pane label="鐢ㄦ埛绠$悊" name="first">鐢ㄦ埛绠$悊</el-tab-pane> + <el-tab-pane label="閰嶇疆绠$悊" name="second">閰嶇疆绠$悊</el-tab-pane> + <el-tab-pane label="瑙掕壊绠$悊" name="third">瑙掕壊绠$悊</el-tab-pane> + <el-tab-pane label="瀹氭椂浠诲姟琛ュ伩" name="fourth">瀹氭椂浠诲姟琛ュ伩</el-tab-pane> + </el-tabs> + <el-drawer + title="缂栬緫" + :append-to-body="true" + :visible.sync="editDrawer" + > + <p>_(:蟹銈濃垹)_</p> + </el-drawer> + </div> + </el-drawer> </div> </template> <script> +import { getClassifyList, getInstrumentList } from '@/api/laboratory/ledger' export default { data() { return { // 琛ㄦ牸鏁版嵁 - data: [{ + classTree: [{ id: 1, label: '涓�绾� 1', children: [{ @@ -166,6 +451,20 @@ }] }] }], + treeForm: [{ + name: '', + type: '' + }], + personnerlTable: [{ + specification_models: 'WCDMS-1', // 鍨嬪彿瑙勬牸 + equipment_name: '鏁板瓧鐢垫ˉ', // 浠櫒璁惧鍚嶇О + term_validity: 12, // 璁¢噺鎴鏈夋晥鏈� + equipment_code: 'JSTC-W1-00001', // 浠櫒璁惧缂栧彿 + keeper: 0, // 淇濈浜� + id: 1, // 搴忓彿 + conditions: 1, // 璁惧鐘舵�� + storage_place: '鍦扮悆浜氭床涓浗姹熻嫃鍗楅��' // 瀛樻斁鍦� + }], // tree榛樿鍊� defaultProps: { children: 'children', @@ -178,24 +477,130 @@ // 琛ㄦ牸鎼滅储鍗曢�夊�� radioValue: '鍏ㄩ儴', // 琛ㄦ牸鎼滅储宸茶繃鏈� - isOut: false + isOut: false, + FormVisible: false, + drawerFormVisible: false, + loading: false, + equipmentform: { + acceptanceDate: '', // 楠屾敹鏃ユ湡 + arrivalDate: '', // 鍒拌揣鏃ユ湡 + classifyId: '', // 鎵�灞炲垎绫� + conditions: '', // 鐘舵�� + descriptiveness: '', // 鎻忚堪 + equipmentCode: '', // 璁惧缂栧彿 + equipmentMeasurement: '', // 浠櫒璁惧璁¢噺 + equipmentName: '', // 浠櫒璁惧鍚嶇О + errorRate: '', // 涓嶇‘瀹氬害/鍑嗙‘搴�/鏈�澶у厑璁歌宸� + keeper: '', // 淇濈浜� + manufacturer: '', // 鐢熶骇鍘傚 + measuringRange: '', // 娴嬮噺鑼冨洿 + specificationsModels: '', // 鍨嬪彿瑙勬牸 + storagePlace: '', // 瀛樻斁鍦扮偣 + whetherDataAcquisition: '' // 鏄惁鏀寔鏁伴噰 + }, + timer: null, + formLabelWidth: '80', + detailDrawer: false, + editDrawer: false, + equipmentTable: [], + currentPage: 1, + pageSize: 10, + total: 0 } }, watch: { filterText(val) { - this.$refs.tree.filter(val) + this.$refs.classTree.filter(val) } }, + created() { + this.getThreeData() + }, methods: { + openDetail(row) { + console.log(row) + this.detailDrawer = true + }, + nodeClickHandler(data, node, element) { + console.log(data) + // 鍙湁鏁版嵁涓惡甯d鎵嶈兘鍙戦�佹煡璇㈣姹� + if (data.id) { + this.getEquipmentTable({ classifyId: data.id, pageSize: this.pageSize, pageNo: this.currentPage }) + } + }, + async getEquipmentTable(ages) { + console.log('鏉′欢瀵硅薄', ages) + const { data } = await getInstrumentList(ages) + console.log(data) + this.equipmentTable = data.row + this.total = data.total + }, filterNode(value, data) { if (!value) return true return data.label.indexOf(value) !== -1 + }, + async getThreeData() { + const { data } = await getClassifyList() + console.log(data) + this.classTree = data.map(item => { + if (item.children) { + item.children = item.children.map(childrenItem => { + return { ...childrenItem, label: childrenItem.son_name } + }) + } + return { ...item, label: item.father_name } + }) + console.log(this.classTree) + }, + handleSizeChange() { + // 褰撳墠椤靛ぇ灏� + }, + handleCurrentChange() { + // 褰撳墠椤垫洿鏀� } + }, + handleClose(done) { + if (this.loading) { + return + } + this.$confirm('纭畾瑕佹彁浜よ〃鍗曞悧锛�') + .then(_ => { + this.loading = true + this.timer = setTimeout(() => { + done() + // 鍔ㄧ敾鍏抽棴闇�瑕佷竴瀹氱殑鏃堕棿 + setTimeout(() => { + this.loading = false + }, 400) + }, 2000) + }) + .catch(_ => {}) } } </script> <style lang="scss" scoped> +.demo-drawer__content{ + margin-left: 50px; + // margin-right: 5px; +} +.demo-drawer__footer { + display: flex; + justify-content: space-between; +} + +.demo-drawer__footer .el-button--default { + background-color: #fff; + color: #333; + width: 45%; +} + +.demo-drawer__footer .el-button--primary { + background-color: #409EFF; + color: #fff; + width: 45%; + margin-right: 60px; +} .ledger-main{ width: 100%; height: 100%; @@ -235,6 +640,43 @@ .library-bom{ flex: 2; margin-right: 12px; + .bom-item-search{ + margin-bottom: 12px; + ::v-deep .el-input{ + input{ + height: 33px; + line-height: 33px; + } + } + .tips{ + height: 33px !important; + display: flex; + height: 24px; + align-items: center; + font-size: 16px; + // margin-bottom: 12px; + >span{ + display: inline-block; + margin-right: 10px; + width: 4px; + height: 16px; + background: #0077DB; + } + >div{ + height: 100%; + line-height: 36px; + } + .el-button{ + padding: 0; + } + } + } + .bom-item-search .el-row{ + // display: flex; + .el-col{ + text-align: right; + } + } .el-tree { margin-top: 12px; ::v-deep .el-tree-node__content{ @@ -290,5 +732,102 @@ } } } + + .detailDrawer{ + ::v-deep .el-drawer__body{ + padding: 24px !important; + } + .detail-info{ + background: #fff; + box-shadow: rgba(100, 100, 111, 0.2) 0px 5px 15px; + + // padding: 10px 20px 10px 20px; + margin: 0; + margin-bottom: 12px; + border-radius: 6px; + overflow: hidden; + .tips-main{ + // margin: ; + padding: 10px 20px 0 20px; + display: flex; + justify-content: space-between; + align-items: center; + height: 50px; + // height: ; + &:hover{ + background: #85bff810; + .tips-btn{ + display: block; + left: 0; + opacity:1; + } + } + .tips-btn{ + height: 100%; + // display: none; + position: relative; + opacity:0; + left: 100px; + transition: all 0.3s ease-in-out; + } + .tips{ + height: 100%; + display: flex; + height: 24px; + align-items: center; + font-size: 16px; + // margin-bottom: 12px; + >span{ + display: inline-block; + margin-right: 10px; + width: 4px; + height: 16px; + background: #0077DB; + } + >div{ + height: 100%; + line-height: 26px; + } + .el-button{ + padding: 0; + } + } + } + + // 鍩烘湰淇℃伅鍜屼紒涓氫俊鎭殑姣忎竴涓俊鎭」鏍峰紡 + .message{ + padding: 0px 20px 8px 20px; + + display: flex; + flex-wrap: wrap; + border-top: 1px solid #F2F6FC; + // border-top: 1px solid #F2F6FC; + >div{ + flex: 30%; + max-width: 30%; + padding: 8px; + color: #606266; + align-items: center; + // height: 65px; + font-size: 12px; + height: 40px; + display: flex; + align-items: center; + >span{ + color: #303133; + font-size: 14px; + // + >i{ + margin-right: 8px; + } + } + } + // >div:nth-child(5){ + // flex: 60%; + // max-width: 60%; + // } + } + } + } } </style> -- Gitblit v1.9.3