From f38a516e08b62c5e7350e1146f2c8478be5907d8 Mon Sep 17 00:00:00 2001
From: XiaoRuby <3114200645@qq.com>
Date: 星期四, 10 八月 2023 17:53:11 +0800
Subject: [PATCH] Crunchy-08/10下班
---
src/components/view/laboratoryManagement.vue | 389 +++++++++++++++++++++++++++++++++++++++---------------
1 files changed, 279 insertions(+), 110 deletions(-)
diff --git a/src/components/view/laboratoryManagement.vue b/src/components/view/laboratoryManagement.vue
index 85ddfc8..80446a7 100644
--- a/src/components/view/laboratoryManagement.vue
+++ b/src/components/view/laboratoryManagement.vue
@@ -1,12 +1,99 @@
<template>
<div>
<el-row>
- <el-col :span="12" style="padding-left: 20px; line-height: 32px;">瀹為獙瀹ょ鐞�</el-col>
+ <el-col :span="12" class="top_left_name">瀹為獙瀹ょ鐞�</el-col>
<el-col :span="12" style="text-align: right;">
- <el-button @click="handleAddNew" type="primary" size="mini" icon="el-icon-plus" style="background: #004EA2; ">鏂板浠櫒璁惧</el-button>
+ <el-button @click="testItem()" type="primary" size="mini" icon="el-icon-plus" style="background: #004EA2; ">鏂板浠櫒璁惧</el-button>
+ <el-dialog
+ title="鏂板浠櫒璁惧"
+ :visible.sync="dialogVisible"
+ width="750px"
+ :before-close="handleClose">
+ <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="130px" class="demo-ruleForm">
+ <el-row>
+ <el-col :span="12">
+ <el-form-item label="浠櫒璁惧缂栧彿" prop="name">
+ <el-input placeholder="璇疯緭鍏ヤ华鍣ㄨ澶囩紪鍙�" style="width: 206px" clearable v-model="ruleForm.name"></el-input>
+ </el-form-item>
+ </el-col>
+ <el-col :span="12">
+ <el-form-item label="淇濈浜�" prop="region">
+ <el-select v-model="ruleForm.region" placeholder="璇烽�夋嫨淇濈浜�">
+ <el-option label="鍖哄煙涓�" value="shanghai"></el-option>
+ <el-option label="鍖哄煙浜�" value="beijing"></el-option>
+ </el-select>
+ </el-form-item>
+ </el-col>
+ </el-row>
+ <el-row>
+ <el-col :span="12">
+ <el-form-item label="璁￠噺鎴嚦鏈夋晥鏈�" required>
+ <el-form-item prop="date1">
+ <el-date-picker style="width: 206px" type="date" placeholder="璇烽�夋嫨璁￠噺鎴嚦鏈夋晥鏈�" v-model="ruleForm.date1"></el-date-picker>
+ </el-form-item>
+ </el-form-item>
+ </el-col>
+ <el-col :span="12">
+ <el-form-item label="璁惧鐘舵��" prop="region">
+ <el-select v-model="ruleForm.region" placeholder="璇烽�夋嫨璁惧鐘舵��">
+ <el-option label="1" value="杩愯"></el-option>
+ <el-option label="2" value="鎶ュ簾"></el-option>
+ </el-select>
+ </el-form-item>
+ </el-col>
+ </el-row>
+ <el-row>
+ <el-col :span="12">
+ <el-form-item label="鍘傚" prop="region">
+ <el-input style="width: 206px" placeholder="璇疯緭鍏ュ巶瀹�" clearable v-model="ruleForm.name"></el-input>
+ </el-form-item>
+ </el-col>
+ <el-col :span="12">
+ <el-form-item label="妫�娴嬮」鐩�" required>
+ <el-form-item prop="inspectionList">
+ <el-select v-model="ruleForm.rawInsProductId" placeholder="璇烽�夋嫨妫�娴嬮」鐩�">
+ <el-option v-for="item in inspectionList"
+ :key="item.index"
+ :label="item.name"
+ :value="item.id">
+ </el-option>
+ </el-select>
+ </el-form-item>
+ </el-form-item>
+ </el-col>
+ </el-row>
+ <el-row>
+ <el-col :span="12">
+ <el-form-item label="妫�娴嬫牱鍝�" required>
+ <el-form-item prop="date1">
+ <el-input placeholder="璇疯緭鍏ヤ华鍣ㄨ澶囩紪鍙�" style="width: 206px" clearable v-model="ruleForm.name"></el-input>
+ </el-form-item>
+ </el-form-item>
+ </el-col>
+ <el-col :span="12">
+ <el-form-item label="瑙勬牸鍨嬪彿" prop="region">
+ <el-input placeholder="璇疯緭鍏ヤ华鍣ㄨ澶囩紪鍙�" style="width: 206px" clearable v-model="ruleForm.name"></el-input>
+ </el-form-item>
+ </el-col>
+ </el-row>
+ <el-row>
+ <el-col :span="12">
+ <el-form-item label="妫�娴嬩汉" required>
+ <el-input placeholder="璇疯緭鍏ヤ华鍣ㄨ澶囩紪鍙�" style="width: 206px" clearable v-model="ruleForm.name"></el-input>
+ </el-form-item>
+ </el-col>
+ </el-row>
+
+ </el-form>
+ <span slot="footer" class="dialog-footer">
+ <el-button @click="dialogVisible = false">鍙� 娑�</el-button>
+ <el-button type="primary" @click="dialogVisible = false">纭� 瀹�</el-button>
+ </span>
+ </el-dialog>
+
</el-col>
</el-row>
- <el-row style="height: calc(100vh - 165px); margin-top: 9px;">
+ <el-row class="left_row">
<div :style="`width: ${isCollapse?300:0}px;transition: 1s;`" class="class_sidebar">
<el-radio-group class="ai-tab-change" style="width: 270px; margin-top: 5px" v-model="radio1">
<el-radio-button size="small" label="true">
@@ -16,30 +103,54 @@
<div class="el_radio_button_div">妫�娴嬭澶�</div>
</el-radio-button>
</el-radio-group>
- <el-input v-model="search" :style="`width: 90%; margin: 10px 0;opacity: ${isCollapse?1:0};transition: 1.5s;`" suffix-icon="el-icon-search" placeholder="璇疯緭鍏ユ悳绱㈠唴瀹�" size="small" clearable></el-input>
- <el-tree :data="list" ref="tree" :props="{children: 'children',label: 'label'}" node-key="id" default-expand-all
- :filter-node-method="filterNode" @node-click="handleNodeClick" highlight-current @node-expand="nodeOpen"
- @node-collapse="nodeClose">
- <div class="custom-tree-node" slot-scope="{ node, data }">
- <span><i :class="`node_i ${data.code != '[4]'?'el-icon-folder-opened':'el-icon-tickets'}`"></i>
- {{data.code}}{{ data.label }}</span>
- <el-button type="text" size="mini" @click.stop="remove(node, data)">
- <i class="el-icon-delete"></i>
- </el-button>
- </div>
+ <el-input
+ v-model="search"
+ class="frame_input"
+ :style="`opacity: ${isCollapse?1:0};`"
+ suffix-icon="el-icon-search"
+ placeholder="璇疯緭鍏ュ垎绫诲悕绉�"
+ size="small" clearable>
+ </el-input>
+ <el-tree
+ :data="list" ref="tree"
+ :props="{children: 'children',label: 'label'}"
+ node-key="id"
+ default-expand-all
+ :filter-node-method="filterNode"
+ @node-click="handleNodeClick"
+ highlight-current @node-expand="nodeOpen"
+ @node-collapse="nodeClose">
+ <div class="custom-tree-node" slot-scope="{ node, data }">
+ <span><i :class="`node_i ${data.code != '[4]'?'el-icon-folder-opened':'el-icon-tickets'}`"></i>
+ {{data.code}}{{ data.label }}</span>
+ <el-button type="text" size="mini" @click.stop="remove(node, data)">
+ <i class="el-icon-delete"></i>
+ </el-button>
+ </div>
</el-tree>
</div>
- <div :style="`width: calc(100vw - ${isCollapse?'475':'170'}px); padding-left: 5px;transition: 1s;float: left;`">
+ <div class="table_div" :style="`width: calc(100vw - ${isCollapse?'475':'170'}px);`">
<div :title="isCollapse ? '鐐瑰嚮灞曞紑' : '鐐瑰嚮鏀惰捣'" class="box_bgd" @click="isC">
- <!-- 鐐瑰嚮灞曞紑鏀惰捣瀵艰埅鍜屽垏鎹㈠搴斿浘鏍� -->
- <i :class="!isCollapse ? 'el-icon-arrow-left' : 'el-icon-arrow-right'"></i>
+ <div class="upper_triangle"></div>
+ <div class="corner">
+ <!-- 鐐瑰嚮灞曞紑鏀惰捣瀵艰埅鍜屽垏鎹㈠搴斿浘鏍� -->
+ <i :class="!isCollapse ? 'el-icon-arrow-left' : 'el-icon-arrow-right'"></i>
+ </div>
+ <div class="under_triangle"></div>
</div>
- <div style="background-color: #fbfbfd; height: 100%;">
- <div style="margin-left: 20px; padding-top: 15px; padding-bottom: 15px">
- <el-input v-model="searchName" size="small" prefix-icon="el-icon-search" placeholder="璇疯緭鍏ョ紪鍙�/璁惧鍚嶇О/鍨嬪彿瑙勬牸" style="width: 20%;margin-right: 24px;" clearable></el-input>
+ <div class="main_table_div">
+ <div class="table_top_div">
+ <el-input
+ class="table_top_input"
+ v-model="searchName"
+ size="small"
+ prefix-icon="el-icon-search"
+ placeholder="璇疯緭鍏ョ紪鍙�/璁惧鍚嶇О/鍨嬪彿瑙勬牸"
+ clearable>
+ </el-input>
<el-button size="mini" @click="()=>{searchName='';selectProductTableData()}"><span>閲� 缃�</span></el-button>
<el-button size="mini" type="primary" style="background: #004EA2;" @click="selectProductTableData"><span>鏌� 璇�</span></el-button>
- <el-select v-model="tableType" size="small" placeholder="璇烽�夋嫨" style="float: right; width: 224px;margin-right: 52px;">
+ <el-select v-model="tableType" size="small" placeholder="璇烽�夋嫨" class="table_top">
<el-option :value="0" label="宸ヨ壓鏂囦欢"></el-option>
<el-option :value="1" label="鎶�鏈寚鏍�"></el-option>
</el-select>
@@ -48,7 +159,7 @@
:data="tableData"
border
height="calc(100vh - 220px)"
- style="width: 100%; padding: 10px; position: absolute">
+ style="padding: 10px;">
<el-table-column
prop="date"
label="鏃ユ湡"
@@ -75,90 +186,47 @@
name: "LaboratoryManagement",
data() {
return {
+ dialogVisible: false,
isCollapse: true, //榛樿涓哄睍寮�
radio1: 'true',
- tableData: [{
- date: '2016-05-02',
- name: '鐜嬪皬铏�',
- address: '涓婃捣甯傛櫘闄�鍖洪噾娌欐睙璺� 1518 寮�'
- }, {
- date: '2016-05-04',
- name: '鐜嬪皬铏�',
- address: '涓婃捣甯傛櫘闄�鍖洪噾娌欐睙璺� 1517 寮�'
- }, {
- date: '2016-05-01',
- name: '鐜嬪皬铏�',
- address: '涓婃捣甯傛櫘闄�鍖洪噾娌欐睙璺� 1519 寮�'
- }, {
- date: '2016-05-03',
- name: '鐜嬪皬铏�',
- address: '涓婃捣甯傛櫘闄�鍖洪噾娌欐睙璺� 1516 寮�'
- }, {
- date: '2016-05-03',
- name: '鐜嬪皬铏�',
- address: '涓婃捣甯傛櫘闄�鍖洪噾娌欐睙璺� 1516 寮�'
- }, {
- date: '2016-05-03',
- name: '鐜嬪皬铏�',
- address: '涓婃捣甯傛櫘闄�鍖洪噾娌欐睙璺� 1516 寮�'
- }, {
- date: '2016-05-03',
- name: '鐜嬪皬铏�',
- address: '涓婃捣甯傛櫘闄�鍖洪噾娌欐睙璺� 1516 寮�'
- }, {
- date: '2016-05-03',
- name: '鐜嬪皬铏�',
- address: '涓婃捣甯傛櫘闄�鍖洪噾娌欐睙璺� 1516 寮�'
- }, {
- date: '2016-05-03',
- name: '鐜嬪皬铏�',
- address: '涓婃捣甯傛櫘闄�鍖洪噾娌欐睙璺� 1516 寮�'
- }, {
- date: '2016-05-03',
- name: '鐜嬪皬铏�',
- address: '涓婃捣甯傛櫘闄�鍖洪噾娌欐睙璺� 1516 寮�'
- }, {
- date: '2016-05-03',
- name: '鐜嬪皬铏�',
- address: '涓婃捣甯傛櫘闄�鍖洪噾娌欐睙璺� 1516 寮�'
- }, {
- date: '2016-05-03',
- name: '鐜嬪皬铏�',
- address: '涓婃捣甯傛櫘闄�鍖洪噾娌欐睙璺� 1516 寮�'
- }, {
- date: '2016-05-03',
- name: '鐜嬪皬铏�',
- address: '涓婃捣甯傛櫘闄�鍖洪噾娌欐睙璺� 1516 寮�'
- }, {
- date: '2016-05-03',
- name: '鐜嬪皬铏�',
- address: '涓婃捣甯傛櫘闄�鍖洪噾娌欐睙璺� 1516 寮�'
- }, {
- date: '2016-05-03',
- name: '鐜嬪皬铏�',
- address: '涓婃捣甯傛櫘闄�鍖洪噾娌欐睙璺� 1516 寮�'
- }],
+ tableData: [],
+ inspectionList: [], //妫�楠岄」鐩笅鎷夋鍒楄〃
// BOM鏍戞暟鎹粨鏋�
- list: [{
- label: '涓�绾� 1',
- children: [{
- label: '浜岀骇 1-1'
- }]
- }, {
- label: '涓�绾� 2',
- children: [{
- label: '浜岀骇 2-1'
- }, {
- label: '浜岀骇 2-2'
- }]
- }, {
- label: '涓�绾� 3',
- children: [{
- label: '浜岀骇 3-1'
- }, {
- label: '浜岀骇 3-2'
- }]
- }],
+ list: [],
+ ruleForm: {
+ code: '',
+ deviceStatus: '',
+ endMeasure: '',
+ factory: '',
+ keeper: '',
+ name: '',
+ rawInsProductId: '',
+ type: ''
+ },
+ rules: {
+ name: [
+ { required: true, message: '璇疯緭鍏ユ椿鍔ㄥ悕绉�', trigger: 'blur' },
+ { min: 3, max: 5, message: '闀垮害鍦� 3 鍒� 5 涓瓧绗�', trigger: 'blur' }
+ ],
+ region: [
+ { required: true, message: '璇烽�夋嫨娲诲姩鍖哄煙', trigger: 'change' }
+ ],
+ date1: [
+ { type: 'date', required: true, message: '璇烽�夋嫨鏃ユ湡', trigger: 'change' }
+ ],
+ date2: [
+ { type: 'date', required: true, message: '璇烽�夋嫨鏃堕棿', trigger: 'change' }
+ ],
+ type: [
+ { type: 'array', required: true, message: '璇疯嚦灏戦�夋嫨涓�涓椿鍔ㄦ�ц川', trigger: 'change' }
+ ],
+ resource: [
+ { required: true, message: '璇烽�夋嫨娲诲姩璧勬簮', trigger: 'change' }
+ ],
+ desc: [
+ { required: true, message: '璇峰～鍐欐椿鍔ㄥ舰寮�', trigger: 'blur' }
+ ]
+ }
}
},
methods: {
@@ -166,11 +234,95 @@
isC() {
this.isCollapse = !this.isCollapse;
},
+ submitForm(formName) {
+ this.$refs[formName].validate((valid) => {
+ if (valid) {
+ alert('submit!');
+ } else {
+ console.log('error submit!!');
+ return false;
+ }
+ });
+ },
+ resetForm(formName) {
+ this.$refs[formName].resetFields();
+ },
+ handleClose(done) {
+ this.$confirm('纭鍏抽棴锛�')
+ .then(_ => {
+ done();
+ })
+ .catch(_ => {});
+ },
+ testItem() {
+ this.dialogVisible = true
+ this.$axios.get(this.$api.url.addDeviceInspectDownBox).then(res => {
+ this.inspectionList = res.data
+ })
+ }
},
+ mounted() {
+ },
+ watch: {
+ 'ruleForm.rawInsProductId': { //鐩戝惉banner
+ handler: function (newVal, oldVal) {
+ if (newVal != null && newVal !== ''){
+ console.log("1222222222222")
+ }
+ }
+ }
+ }
}
</script>
<style scoped>
+.top_left_name{
+ padding-left: 20px;
+ line-height: 32px;
+}
+.left_row{
+ height: calc(100vh - 165px);
+ margin-top: 9px;
+}
+.frame_input{
+ width: 90%;
+ margin: 10px 0;
+ transition: 1.5s;
+}
+.table_top_div{
+ margin-left: 20px;
+ padding-top: 15px;
+ padding-bottom: 15px
+}
+.el-dialog__footer {
+ padding: 0px 20px 20px;
+ text-align: right;
+ -webkit-box-sizing: border-box;
+ box-sizing: border-box;
+}
+.table_top{
+ float: right;
+ width: 224px;
+ margin-right: 52px;
+}
+.main_table_div{
+ background-color: #fbfbfd;
+ height: 100%;
+}
+.dialog-footer{
+ display: block;
+ text-align:center
+}
+.table_div{
+ padding-left: 5px;
+ transition: 1s;
+ float: left;
+ position: relative
+}
+.table_top_input{
+ width: 20%;
+ margin-right: 24px;
+}
.custom-tree-node {
flex: 1;
display: flex;
@@ -199,20 +351,37 @@
}
.class_sidebar {
overflow: hidden;
- height: calc(100vh - 159px);
+ height: calc(100vh - 175px);
text-align: center;
padding: 8px;
float: left;
background-color: #fdfdfe;
}
.box_bgd {
- width: 15px;
- height: 40px;
- position: relative;
+ width: 12px;
+ height: 60px;
+ position: absolute;
float: left;
- top: 50%!important;
- left: -20px;
- background: blue;
+ top: 40%;
+ left: -10px;
+}
+.corner{
+ height: 60px;
+ background: #ebebec;
+}
+.upper_triangle{
+ width: 0px; /* 瀹介珮璁剧疆涓�0锛屽緢閲嶈锛屽惁鍒欒揪涓嶅埌鏁堟灉 */
+ height: 0px;
+ border: 6px solid #ebebec;
+ border-left-color: transparent;
+ border-top-color: transparent;
+}
+.under_triangle{
+ width: 0px; /* 瀹介珮璁剧疆涓�0锛屽緢閲嶈锛屽惁鍒欒揪涓嶅埌鏁堟灉 */
+ height: 0px;
+ border: 6px solid #ebebec;
+ border-left-color: transparent;
+ border-bottom-color: transparent;
}
.ai-tab-change {
.el-radio-button__inner {
--
Gitblit v1.9.3