From 377e00b443a02f1567e84aef14d6134124603813 Mon Sep 17 00:00:00 2001
From: Goldennfish <1981343953@qq.com>
Date: 星期二, 25 七月 2023 08:57:00 +0800
Subject: [PATCH] 设备台账弹出框及调整了所有弹出框样式
---
src/views/laboratory/ledger/index.vue | 375 ++++++++++++++++++++++++++++++++++++++++++++++++----
1 files changed, 342 insertions(+), 33 deletions(-)
diff --git a/src/views/laboratory/ledger/index.vue b/src/views/laboratory/ledger/index.vue
index 619ac3b..4f8a8ce 100644
--- a/src/views/laboratory/ledger/index.vue
+++ b/src/views/laboratory/ledger/index.vue
@@ -19,15 +19,24 @@
</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"
@@ -57,56 +66,46 @@
<div class="table-box">
<el-table
ref="personnerlTable"
-
+ :max-height="800"
:cell-style="{textAlign: 'center'}"
:header-cell-style="{border:'0px',background:'#f5f7fa',color:'#606266',boxShadow: 'inset 0 1px 0 #ebeef5',textAlign: 'center'}"
:data="personnerlTable"
style="width: 100%"
>
<el-table-column
- prop="roleName"
+ prop="id"
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"
- label="瑙勬牸鍨嬪彿"
- min-width="150"
- />
- <el-table-column
- prop="phone"
- label="涓婃璁￠噺鏃堕棿"
min-width="200"
/>
<el-table-column
- prop="mailbox"
- label="涓婃璁￠噺鍗曚綅"
+ prop="specification_models"
+ label="鍨嬪彿瑙勬牸"
min-width="200"
/>
<el-table-column
- prop="mailbox"
- label="鎴鏈夋晥鏈�"
+ prop="keeper"
+ label="淇濈浜�"
min-width="200"
/>
<el-table-column
- prop="mailbox"
- label="璁￠噺鍛ㄦ湡"
+ prop="term_validity"
+ label="璁￠噺鎴鏈夋晥鏈�"
min-width="200"
/>
<el-table-column
- prop="incumbentStatus"
+ prop="conditions"
label="璁惧鐘舵��"
- min-width="120"
+ min-width="200"
:filters="[{ text: 0, value: 0 }, { text: 1, value: 1 }]"
:filter-method="filterTag"
filter-placement="bottom-end"
@@ -119,16 +118,42 @@
</template>
</el-table-column>
<el-table-column
+ prop="storage_place"
+ label="瀛樻斁鍦�"
+ min-width="200"
+ />
+ <el-table-column
label="鎿嶄綔"
- min-width="120"
- :fixed="true"
+ min-width="200"
+ 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="handleClick(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"
@@ -143,6 +168,179 @@
</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>
</div>
</template>
@@ -166,6 +364,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,7 +390,29 @@
// 琛ㄦ牸鎼滅储鍗曢�夊��
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'
}
},
watch: {
@@ -191,11 +425,49 @@
if (!value) return true
return data.label.indexOf(value) !== -1
}
+ },
+ 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 +507,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{
--
Gitblit v1.9.3