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 | 282 +++++++++++++++++++++++++++++++++++++++++++++++++++----- 1 files changed, 256 insertions(+), 26 deletions(-) diff --git a/src/views/laboratory/ledger/index.vue b/src/views/laboratory/ledger/index.vue index 4f8a8ce..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" @@ -38,12 +38,12 @@ </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"> @@ -65,15 +65,15 @@ </div> <div class="table-box"> <el-table - ref="personnerlTable" - :max-height="800" + 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="id" + type="index" label="搴忓彿" min-width="90" /> @@ -85,30 +85,27 @@ <el-table-column prop="equipment_name" label="浠櫒璁惧鍚嶇О" - min-width="200" + min-width="150" /> <el-table-column - prop="specification_models" - label="鍨嬪彿瑙勬牸" - min-width="200" + prop="specifications_models" + label="瑙勬牸鍨嬪彿" + min-width="150" /> <el-table-column - prop="keeper" + prop="name" label="淇濈浜�" min-width="200" /> <el-table-column - prop="term_validity" + prop="termValidity" label="璁¢噺鎴鏈夋晥鏈�" min-width="200" /> <el-table-column prop="conditions" label="璁惧鐘舵��" - min-width="200" - :filters="[{ text: 0, value: 0 }, { text: 1, value: 1 }]" - :filter-method="filterTag" - filter-placement="bottom-end" + min-width="120" > <template slot-scope="scope"> <el-tag @@ -123,12 +120,17 @@ min-width="200" /> <el-table-column - label="鎿嶄綔" + prop="storage_place" + label="瀛樻斁鍦�" min-width="200" + /> + <el-table-column + label="鎿嶄綔" + min-width="120" fixed="right" > <template slot-scope="scope"> - <el-button type="text" size="small" @click="handleClick(scope.row)">鏌ョ湅</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> @@ -157,10 +159,10 @@ <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" /> @@ -341,15 +343,100 @@ </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: [{ @@ -412,18 +499,64 @@ whetherDataAcquisition: '' // 鏄惁鏀寔鏁伴噰 }, timer: null, - formLabelWidth: '80' + 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) { @@ -599,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