From 2bd2209ef2c966a036952e5983325c312fb58582 Mon Sep 17 00:00:00 2001
From: hailin <1356886193@qq.com>
Date: 星期二, 25 七月 2023 09:04:48 +0800
Subject: [PATCH] 设备台账的页面搭建
---
src/views/laboratory/ledger/index.vue | 295 +++++++++++++++++++++++++++++++++++++++++++++++++++-------
1 files changed, 257 insertions(+), 38 deletions(-)
diff --git a/src/views/laboratory/ledger/index.vue b/src/views/laboratory/ledger/index.vue
index 619ac3b..12e19f8 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"
@@ -25,16 +25,15 @@
<div class="content-main">
<div class="library-bom">
<el-input
- v-model="filterText"
placeholder="杈撳叆鍏抽敭瀛楄繘琛岃繃婊�"
/>
<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 +55,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"
/>
<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="涓婃璁￠噺鍗曚綅"
- min-width="200"
- />
- <el-table-column
- prop="mailbox"
- label="鎴鏈夋晥鏈�"
- min-width="200"
- />
- <el-table-column
- prop="mailbox"
- label="璁￠噺鍛ㄦ湡"
+ prop="termValidity"
+ label="璁￠噺鎴鏈夋晥鏈�"
min-width="200"
/>
<el-table-column
prop="incumbentStatus"
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 +105,28 @@
</template>
</el-table-column>
<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-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 +134,100 @@
</div>
</div>
</div>
+ <!-- -->
+ <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: [{
@@ -178,18 +254,64 @@
// 琛ㄦ牸鎼滅储鍗曢�夊��
radioValue: '鍏ㄩ儴',
// 琛ㄦ牸鎼滅储宸茶繃鏈�
- isOut: false
+ isOut: false,
+ 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() {
+ // 褰撳墠椤垫洿鏀�
}
}
}
@@ -290,5 +412,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