From f7bd30c0b016c3766bdbd931e28ff90a8e05c7ba Mon Sep 17 00:00:00 2001
From: licp <lichunping@guanfang.com.cn>
Date: 星期一, 04 三月 2024 16:19:09 +0800
Subject: [PATCH] 完成设备工具明细弹框

---
 src/components/view/a6-device-management.vue |  315 ++++++++++++++++++++++++++++++++++++++--------------
 1 files changed, 230 insertions(+), 85 deletions(-)

diff --git a/src/components/view/a6-device-management.vue b/src/components/view/a6-device-management.vue
index 8c9e4a2..53b9e07 100644
--- a/src/components/view/a6-device-management.vue
+++ b/src/components/view/a6-device-management.vue
@@ -19,7 +19,7 @@
 
 	.search_label {
 		width: 110px;
-		
+
 		font-size: 14px;
 		text-align: right;
 	}
@@ -35,6 +35,10 @@
 		height: calc(100% - 60px - 80px - 10px - 40px);
 		padding: 20px;
 	}
+
+  .el-form-item{
+    margin-bottom: 16px;
+  }
 </style>
 
 <template>
@@ -88,86 +92,212 @@
 			<!-- 璇硶 瀛愮粍浠堕�氳繃 this.$emit +浼犲叆鏂规硶鍚� 璋冪敤鐖剁粍浠舵柟娉� 渚嬪  this.$emit锛坰electAllByOne锛� 灏遍渶鍦ㄧ埗缁勪欢澹版槑骞朵紶鍏�  @selectAllByOne="selectAllByOne"-->
 			<ValueTable @selectAllByOne="selectAllByOne" @isUpdate="isUpdate" ref="ValueTable" :url="$api.deviceScope.selectDeviceParameter" :upUrl="$api.deviceScope.upDeviceParameter" :delUrl="$api.deviceScope.delDeviceParameter" :componentData="componentData" :key="upIndex"/>
 		</div>
-			<div>
-			<el-dialog
-				title="璁惧璇︽儏"
-				:visible.sync="dialogVisible"
-				width="70%"
-				:before-close="handleClose">
-				<el-row style="display:flex;justify-content: space-around;">
-					<!-- 宸﹁竟甯冨眬 -->
-					<el-col  :span="7" >
-						<el-col>
-							<!-- 鍥剧墖 -->
-							<img src="https://www.baidu.com/img/bd_logo1.png" alt="" style="width:100%;height: 30vh;">
-							<!-- 琛ㄥ崟 -->
-							<el-form :label-position="labelPosition" :model="formData">
-								<el-form-item label="澶х被锛�" >
-								  <el-input style="width:75%" :disabled="isUp" v-model="formData.largeCategory"></el-input>
-								</el-form-item>
-								<el-form-item label="鍑哄巶鏃ユ湡">
-
-								  <el-input style="width:75%" :disabled="isUp" v-model="formData.dateProduction"></el-input>
-								</el-form-item>
-								<el-form-item label="璁惧璐熻矗浜�" >
-								  <el-input style="width:75%" :disabled="isUp" v-model="formData.equipmentManager"></el-input>
-								</el-form-item>
-								<el-form-item label="琚巿鏉冧汉" >
-									<el-input style="width:75%" :disabled="isUp" v-model="formData.authorizedPerson"></el-input>
-								  </el-form-item>
-								  <el-form-item v-if="!isUp" label="鍥剧墖" >
-									<div style="width:75%;border: 1px solid #DCDFE6;border-radius:4px;margin-left: 22%;display:flex;justify-content: space-around;">
-											<div>{{formData.largeCategory}}</div>
-											<div style="width: 40%;"></div>
-											<div><el-button type="text">棰勮</el-button></div>
-									</div>
-								  </el-form-item>
-							  </el-form>
-						</el-col>
-					</el-col>
-					<!-- 涓棿甯冨眬 -->
-					<el-col  :span="7">
-						<el-form :label-position="labelPosition" :model="formData">
-							<el-form-item label="璁惧鍚嶇О" >
-							  <el-input style="width:75%" :disabled="isUp" v-model="formData.deviceName"></el-input>
-							</el-form-item>
-							<el-form-item label="鍐呴儴缂栫爜">
-							  <el-input style="width:75%" :disabled="isUp" v-model="formData.internalCode"></el-input>
-							</el-form-item>
-							<el-form-item label="璧勪骇缂栫爜" >
-							  <el-input style="width:75%" :disabled="isUp" v-model="formData.assetCode"></el-input>
-							</el-form-item>
-							<el-form-item label="鏍″噯鏃ユ湡锛堟湀锛�" >
-								<el-input style="width:75%" :disabled="isUp" v-model="formData.calibrationDate"></el-input>
-							  </el-form-item>
-						  </el-form>
-					</el-col>
-					<!-- 鍙宠竟甯冨眬 -->
-					<el-col  :span="7">
-						<el-form :label-position="labelPosition" :model="formData">
-							<el-form-item label="娲诲姩鍖哄煙" >
-							  <el-input style="width:75%" :disabled="isUp" v-model="formData.largeCategory"></el-input>
-							</el-form-item>
-							<el-form-item label="娲诲姩鍖哄煙">
-							  <el-input style="width:75%" :disabled="isUp" v-model="formData.latestTraceability"></el-input>
-							</el-form-item>
-							<el-form-item label="娲诲姩褰㈠紡" >
-							  <el-input style="width:75%" :disabled="isUp" v-model="formData.largeCategory"></el-input>
-							</el-form-item>
-							<el-form-item label="娲诲姩褰㈠紡" >
-								<el-input style="width:75%" :disabled="isUp" v-model="formData.largeCategory"></el-input>
-							  </el-form-item>
-						  </el-form>
-					</el-col>
-				</el-row>
-				<span slot="footer" class="dialog-footer">
-					<el-row v-if="!isUp">
-						<el-button @click="dialogVisible = false">鍙� 娑�</el-button>
-					<el-button type="primary" @click="dialogVisible = false">纭� 瀹�</el-button>
-					</el-row>
-				</span>
-			</el-dialog>
-		</div>
+    <el-dialog
+      :title="isUp?'璁惧璇︽儏':'妗f淇'"
+      :visible.sync="dialogVisible"
+      width="70%"
+      :before-close="handleClose">
+      <el-row style="display:flex;justify-content: space-around;">
+        <!-- 宸﹁竟甯冨眬 -->
+        <el-col  :span="7" >
+          <el-col>
+            <!-- 鍥剧墖 -->
+            <img src="https://www.baidu.com/img/bd_logo1.png" alt="" style="width:100%;height: 320px;marginBottom:16px">
+            <!-- 琛ㄥ崟 -->
+            <el-form :label-position="labelPosition" :model="formData" label-width="90px">
+              <el-form-item label="璁惧鍒嗙被:" >
+                <!-- <el-input :disabled="isUp" v-model="formData.largeCategory" size="small"></el-input> -->
+                <el-select :disabled="isUp" v-model="formData.largeCategory" placeholder="璇烽�夋嫨" size="small" style="width:100%">
+                  <el-option
+                    v-for="item in equipmentList"
+                    :key="item.value"
+                    :label="item.label"
+                    :value="item.value"
+                    >
+                  </el-option>
+                </el-select>
+              </el-form-item>
+              <el-form-item label="鍑哄巶鏃ユ湡:">
+                <el-date-picker
+                style="width:100%"
+                  :disabled="isUp"
+                  v-model="formData.dateProduction"
+                  type="datetime"
+                  size="small"
+                  placeholder="閫夋嫨鏃ユ湡">
+                </el-date-picker>
+              </el-form-item>
+              <el-form-item label="璁惧璐熻矗浜�:" >
+                <!-- <el-input :disabled="isUp" v-model="formData.equipmentManager" size="small"></el-input> -->
+                <el-select :disabled="isUp" v-model="formData.equipmentManager" placeholder="璇烽�夋嫨" size="small" style="width:100%">
+                  <el-option
+                    v-for="item in responsiblePersonList"
+                    :key="item.value"
+                    :label="item.label"
+                    :value="item.value"
+                    >
+                  </el-option>
+                </el-select>
+              </el-form-item>
+              <el-form-item label="琚巿鏉冧汉:" >
+                <!-- <el-input :disabled="isUp" v-model="formData.authorizedPerson" size="small"></el-input> -->
+                <el-select :disabled="isUp" v-model="formData.authorizedPerson" size="small" multiple placeholder="璇烽�夋嫨" style="width:100%">
+                  <el-option
+                    v-for="item in authorizerList"
+                    :key="item.value"
+                    :label="item.label"
+                    :value="item.value">
+                  </el-option>
+                </el-select>
+                </el-form-item>
+              </el-form>
+          </el-col>
+        </el-col>
+        <!-- 涓棿甯冨眬 -->
+        <el-col  :span="7">
+          <el-form :label-position="labelPosition" :model="formData" label-width="116px">
+            <el-form-item label="璁惧鍚嶇О:" >
+              <el-input :disabled="isUp" v-model="formData.deviceName" size="small"></el-input>
+            </el-form-item>
+            <el-form-item label="鍐呴儴缂栫爜:">
+              <el-input :disabled="isUp" v-model="formData.internalCode" size="small"></el-input>
+            </el-form-item>
+            <el-form-item label="璧勪骇缂栫爜:" >
+              <el-input :disabled="isUp" v-model="formData.assetCode" size="small"></el-input>
+            </el-form-item>
+            <el-form-item label="鏍″噯鏃ユ湡锛堟湀锛�:" >
+              <el-date-picker
+                :disabled="isUp"
+                v-model="formData.calibrationDate"
+                type="month"
+                size="small"
+                style="width:100%"
+                placeholder="閫夋嫨鏈�">
+              </el-date-picker>
+              <!-- <el-input :disabled="isUp" v-model="formData.calibrationDate" size="small"></el-input> -->
+              </el-form-item>
+              <el-form-item label="鎶ュ簾鏃堕棿:" >
+                <el-date-picker
+                style="width:100%"
+                  :disabled="isUp"
+                  v-model="formData.calibrationDate"
+                  type="datetime"
+                  size="small"
+                  placeholder="閫夋嫨鏃堕棿">
+                </el-date-picker>
+              <!-- <el-input :disabled="isUp" v-model="formData.calibrationDate" size="small"></el-input> -->
+              </el-form-item>
+              <el-form-item label="楠屾敹璁板綍:" >
+              <el-input :disabled="isUp" v-model="formData.calibrationDate" size="small"></el-input>
+              </el-form-item>
+              <!-- 璺熸潕缁忕悊纭涓嶈杩欎釜瀛楁 -->
+              <!-- <el-form-item label="缁嗙被:" >
+              <el-input :disabled="isUp" v-model="formData.calibrationDate" size="small"></el-input>
+              </el-form-item> -->
+              <el-form-item label="鍑哄巶缂栧彿:" >
+              <el-input :disabled="isUp" v-model="formData.calibrationDate" size="small"></el-input>
+              </el-form-item>
+              <el-form-item label="璐疆鏃ユ湡:" >
+                <el-date-picker
+                style="width:100%"
+                  :disabled="isUp"
+                  v-model="formData.calibrationDate"
+                  type="datetime"
+                  size="small"
+                  placeholder="閫夋嫨鏃ユ湡">
+                </el-date-picker>
+              <!-- <el-input :disabled="isUp" v-model="formData.calibrationDate" size="small"></el-input> -->
+              </el-form-item>
+              <el-form-item label="鍑嗙‘搴﹂噺鍊�:" >
+              <el-input :disabled="isUp" v-model="formData.calibrationDate" size="small"></el-input>
+              </el-form-item>
+              <el-form-item label="澶囨敞:" >
+              <el-input :disabled="isUp" v-model="formData.calibrationDate" size="small"></el-input>
+              </el-form-item>
+            </el-form>
+        </el-col>
+        <!-- 鍙宠竟甯冨眬 -->
+        <el-col  :span="7">
+          <el-form :label-position="labelPosition" :model="formData" label-width="110px" ref="ruleForm">
+            <el-form-item label="瑙勬牸鍨嬪彿:" >
+              <el-input :disabled="isUp" v-model="formData.largeCategory" size="small"></el-input>
+            </el-form-item>
+            <el-form-item label="璁惧鐘舵��:">
+              <!-- <el-input :disabled="isUp" v-model="formData.latestTraceability" size="small"></el-input> -->
+              <el-select :disabled="isUp" v-model="formData.latestTraceability" placeholder="璇烽�夋嫨" size="small" style="width:100%">
+                  <el-option
+                    v-for="item in deviceStatusList"
+                    :key="item.value"
+                    :label="item.label"
+                    :value="item.value"
+                    >
+                  </el-option>
+                </el-select>
+            </el-form-item>
+            <el-form-item label="瀛樻斁鐐�:" >
+              <el-input :disabled="isUp" v-model="formData.largeCategory" size="small"></el-input>
+            </el-form-item>
+            <el-form-item label="鏈�杩戣拷婧棩鏈�:" >
+              <!-- <el-input :disabled="isUp" v-model="formData.largeCategory" size="small"></el-input> -->
+              <el-date-picker
+                style="width:100%"
+                  :disabled="isUp"
+                  v-model="formData.largeCategory"
+                  type="datetime"
+                  size="small"
+                  placeholder="閫夋嫨鏃ユ湡">
+                </el-date-picker>
+              </el-form-item>
+              <el-form-item label="鍋滅敤鏃堕棿:" >
+                <el-date-picker
+                style="width:100%"
+                  :disabled="isUp"
+                  v-model="formData.largeCategory"
+                  type="datetime"
+                  size="small"
+                  placeholder="閫夋嫨鏃堕棿">
+                </el-date-picker>
+              <!-- <el-input :disabled="isUp" v-model="formData.largeCategory" size="small"></el-input> -->
+              </el-form-item>
+              <el-form-item label="缁翠慨璁板綍:" >
+              <el-input :disabled="isUp" v-model="formData.largeCategory" size="small"></el-input>
+              </el-form-item>
+              <el-form-item label="鐢熶骇鍘傚:" >
+              <el-input :disabled="isUp" v-model="formData.largeCategory" size="small" ></el-input>
+              </el-form-item>
+              <!-- 璺熸潕缁忕悊纭涓嶈杩欎釜瀛楁 -->
+              <!-- <el-form-item label="妫�娴嬬被鍨�:" >
+              <el-input :disabled="isUp" v-model="formData.largeCategory" size="small"></el-input>
+              </el-form-item> -->
+              <el-form-item label="閲囪喘璐圭敤:" >
+              <el-input :disabled="isUp" v-model="formData.largeCategory" size="small"></el-input>
+              </el-form-item>
+              <el-form-item label="鏍″噯璇佷功:" >
+              <el-input :disabled="isUp" v-model="formData.largeCategory" size="small"></el-input>
+              </el-form-item>
+              <el-form-item v-if="!isUp" label="鍥剧墖:" >
+                <div style="border: 1px solid #DCDFE6;border-radius:4px;height:32px;lineHeight:32px;display:flex;justify-content: space-around;font-size: 13px;">
+                  <div v-if="formData.largeCategory">{{formData.largeCategory}}</div>
+                  <el-upload
+                      action="https://jsonplaceholder.typicode.com/posts/"
+                      :on-success="handleSuccessUpImg"
+                      :show-file-list="false"
+                      accept='image/jpg,image/jpeg,image/png'
+                      >
+                      <el-button type="text" style="height:30px;paddingTop:8px">涓婁紶</el-button>
+                    </el-upload>
+                </div>
+                </el-form-item>
+            </el-form>
+        </el-col>
+      </el-row>
+      <span slot="footer" class="dialog-footer">
+        <el-row v-if="!isUp">
+          <el-button @click="handleClose">鍙� 娑�</el-button>
+        <el-button type="primary" @click="submitForm">纭� 瀹�</el-button>
+        </el-row>
+      </span>
+    </el-dialog>
 	</div>
 </template>
 
@@ -226,7 +356,15 @@
 				entityCopy: {},
 				upIndex: 0,
 				addDia: true,
-				addPower: true
+				addPower: true,
+        //璁惧鍒楄〃
+        equipmentList:[],
+        // 璐熻矗浜哄垪琛�
+        responsiblePersonList:[],
+        // 鎺堟潈浜哄垪琛�
+        authorizerList:[],
+        // 璁惧鐘舵�佸垪琛�
+        deviceStatusList:[],
 			}
 		},
 		mounted() {
@@ -241,7 +379,7 @@
 				this.componentData.entity = this.HaveJson(this.entityCopy)
 				this.upIndex++
 			},
-	
+
 			// 鏉冮檺鍒嗛厤
 			getPower(radio) {
 				let power = JSON.parse(sessionStorage.getItem('power'))
@@ -286,7 +424,14 @@
 				//row = 鐐瑰嚮瀵瑰簲琛屽�间竴琛屽��
 				//澶嶅埗缁檉ormData
 				this.formData=row;
-			}
+			},
+      // 涓婁紶鍥剧墖鎴愬姛
+      handleSuccessUpImg(response, file, fileList){
+        console.log(response, file, fileList)
+      },
+      submitForm(){
+        this.dialogVisible = false
+      }
 			}
 		}
-</script>
\ No newline at end of file
+</script>

--
Gitblit v1.9.3