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