From f2138817fdd6e9141c5911514280b8d0b6ca08f1 Mon Sep 17 00:00:00 2001
From: hcong <1050828145@qq.com>
Date: 星期三, 20 十一月 2024 14:48:49 +0800
Subject: [PATCH] 子组件刷新父组件不刷新页面，表单验证，upload组件预览图片，弹窗放在组件内部，bug修复
---
src/views/fysp/check/components/CompDeviceShowTest.vue | 535 +++++++++++++++++++++--------------------------------------
1 files changed, 192 insertions(+), 343 deletions(-)
diff --git a/src/views/fysp/check/components/CompDeviceShowTest.vue b/src/views/fysp/check/components/CompDeviceShowTest.vue
index db10cc4..7011936 100644
--- a/src/views/fysp/check/components/CompDeviceShowTest.vue
+++ b/src/views/fysp/check/components/CompDeviceShowTest.vue
@@ -1,193 +1,179 @@
<template>
- <div>
- <!-- 閫夐」 -->
- <!-- 璁惧绫诲瀷 -->
- <el-row>
- <!-- <el-col>
- <span>璁惧绫诲瀷锛�</span>
- </el-col> -->
- <el-col>
- <el-tabs class="child_select" placeholder="璁惧绫诲瀷" v-model="currSelect.topDeviceTypeId">
- <el-tab-pane v-for="item in deviceTopTypes" :name="item.id">
- <template #label>
- <el-badge :value="item.count" :type="item.count == 0 ? 'danger' : 'primary'">
- <span class="custom-tabs-label">
- <span>{{ item.label }}</span>
- </span>
- </el-badge>
- </template>
- </el-tab-pane>
- </el-tabs>
- </el-col>
- </el-row>
- <el-collapse v-model="activeNames" style="border: 4px">
- <el-collapse-item v-for="item in formInfo" :name="item.id" class="collapse-item-class">
- <!-- <div v-if="activeNames.indexOf(item) !== -1" class="centerDiv">
- <el-button link type="primary" size="large">[鐐瑰嚮缂╂斁]</el-button>
- </div> -->
- <template #title>
- <div style="display: flex; width: 100%; justify-content: space-between">
- <div style="">
- <el-descriptions style="" :column="3" size="small" border>
- <el-descriptions-item width="64px" label="绔欑偣鍚嶇О" :span="3">{{
- item.name || '鏃�'
- }}</el-descriptions-item>
- <el-descriptions-item label="渚涘簲鍟�">{{
- item.supplier || '鏃�'
- }}</el-descriptions-item>
- <el-descriptions-item label="杩愮淮鍟�">{{
- item.maintainer || '鏃�'
- }}</el-descriptions-item>
- <el-descriptions-item label="杩愮淮棰戞">
- <el-select
- v-model="item.maintainFrequency"
- :disabled="isDisabled"
- style="width: 150px"
- >
- <el-option
- v-for="frequency of maintainFrequencysArray"
- :key="frequency.key"
- :label="frequency.value"
- :value="frequency.key"
- ></el-option>
- </el-select>
- </el-descriptions-item>
- <el-descriptions-item label="杩愮淮浜哄憳">{{
- item.maintainStaff || '鏃�'
- }}</el-descriptions-item>
- <el-descriptions-item label="杩愮淮鑱旂郴鏂瑰紡">{{
- item.maintainTel || '鏃�'
- }}</el-descriptions-item>
- <el-descriptions-item label="鍝佺墝鍨嬪彿">{{
- item.brandModel || '鏃�'
- }}</el-descriptions-item>
- <el-descriptions-item label="杩愯鐘舵��">
- <el-select
- v-model="item.runningStatus"
- :disabled="isDisabled"
- style="width: 150px"
- >
- <el-option
- v-for="status of runStatusArray"
- :key="status.key"
- :label="status.value"
- :value="status.key"
- ></el-option>
- </el-select>
- </el-descriptions-item>
- </el-descriptions>
- <!-- <div style="display: block">
- <span class="abstract_main_title">{{ `绔欑偣鍚嶇О ` }}</span>
- <span class="abstract_main_text">{{ item.name || '鏃�' }}</span>
- </div> -->
- </div>
-
- <div style="display: flex">
- <!-- <div class="sub-title">{{ item.name }}</div> -->
- <!-- 鍥剧墖 -->
- <div class="image-container">
- <div
- class="block-div"
- @click="onClickPic($event)"
- v-for="(status, index) in item._statusList"
+ <CompGenericWrapper type="drawer">
+ <template #content>
+ <!-- 閫夐」 -->
+ <!-- 璁惧绫诲瀷 -->
+ <el-row>
+ <el-col>
+ <el-tabs
+ class="child_select"
+ placeholder="璁惧绫诲瀷"
+ v-model="currSelect.topDeviceTypeId"
+ >
+ <el-tab-pane
+ v-for="item in deviceTopTypes"
+ :key="item.id"
+ :name="item.id"
+ >
+ <template #label>
+ <el-badge
+ :value="item.count"
+ :type="item.count == 0 ? 'danger' : 'primary'"
>
- <el-image
- v-if="index == 0"
- fit="cover"
- class="pic-style"
- :src="status._picUrl"
- :preview-src-list="Array.of(status._picUrl)"
- />
- <span class="abstract_pic_text" v-if="index == 0">{{
- `鏈�鏂扮姸鎬佸浘鐗� ${status.dlCreateTime.slice(0, 10)}`
- }}</span>
+ <span class="custom-tabs-label">
+ <span>{{ item.label }}</span>
+ </span>
+ </el-badge>
+ </template>
+ </el-tab-pane>
+ </el-tabs>
+ </el-col>
+ </el-row>
+ <el-collapse v-model="activeNames" style="border: 4px">
+ <el-collapse-item
+ v-for="item in formInfo"
+ :key="item.id"
+ :name="item.id"
+ class="collapse-item-class"
+ >
+ <template #title>
+ <div
+ style="display: flex; width: 100%; justify-content: space-between"
+ >
+ <div style="">
+ <el-descriptions style="" :column="3" size="small" border>
+ <el-descriptions-item
+ width="64px"
+ :label="
+ currSelect.topDeviceTypeId == 0 ? '绔欑偣鍚嶇О' : '璁惧鍚嶇О'
+ "
+ :span="3"
+ >{{ item.name || '鏃�' }}</el-descriptions-item
+ >
+ <el-descriptions-item label="渚涘簲鍟�">{{
+ item.supplier || '鏃�'
+ }}</el-descriptions-item>
+ <el-descriptions-item label="杩愮淮鍟�">{{
+ item.maintainer || '鏃�'
+ }}</el-descriptions-item>
+ <el-descriptions-item label="杩愮淮棰戞">
+ <el-select
+ v-model="item.maintainFrequency"
+ :disabled="isDisabled"
+ style="width: 150px"
+ >
+ <el-option
+ v-for="frequency of maintainFrequencysArray"
+ :key="frequency.key"
+ :label="frequency.value"
+ :value="frequency.key"
+ ></el-option>
+ </el-select>
+ </el-descriptions-item>
+ <el-descriptions-item label="杩愮淮浜哄憳">{{
+ item.maintainStaff || '鏃�'
+ }}</el-descriptions-item>
+ <el-descriptions-item label="杩愮淮鑱旂郴鏂瑰紡">{{
+ item.maintainTel || '鏃�'
+ }}</el-descriptions-item>
+ <el-descriptions-item label="鍝佺墝鍨嬪彿">{{
+ item.brandModel || '鏃�'
+ }}</el-descriptions-item>
+ <el-descriptions-item label="杩愯鐘舵��">
+ <el-select
+ v-model="item.runningStatus"
+ :disabled="isDisabled"
+ style="width: 150px"
+ >
+ <el-option
+ v-for="status of runStatusArray"
+ :key="status.key"
+ :label="status.value"
+ :value="status.key"
+ ></el-option>
+ </el-select>
+ </el-descriptions-item>
+ <el-descriptions-item label="绫诲瀷">
+ {{ item._typename || '鏃�' }}
+ </el-descriptions-item>
+ </el-descriptions>
+ </div>
+
+ <div style="display: flex">
+ <!-- <div class="sub-title">{{ item.name }}</div> -->
+ <!-- 鍥剧墖 -->
+ <div class="image-container">
+ <div
+ class="block-div"
+ @click="onClickPic($event)"
+ v-for="(status, index) in item._statusList"
+ :key="index"
+ >
+ <el-image
+ v-if="index == 0"
+ fit="cover"
+ class="pic-style"
+ :src="status._picUrl"
+ :preview-src-list="Array.of(status._picUrl)"
+ />
+ <span class="abstract_pic_text" v-if="index == 0">{{
+ `鏈�鏂扮姸鎬佸浘鐗� ${status.dlCreateTime.slice(0, 10)}`
+ }}</span>
+ </div>
</div>
</div>
</div>
- </div>
- <!-- <el-descriptions class="margin-top" :title="item.name" :column="3" :size="size" border>
- <el-descriptions-item label="渚涘簲鍟�">
- {{ item.supplier || '鏃�' }}
- </el-descriptions-item>
- <el-descriptions-item label="杩愮淮鍟�">
- {{ item.maintainer || '鏃�' }}
- </el-descriptions-item>
- <el-descriptions-item label="杩愯鐘舵��">
- {{ getRunStatusValueByRunStatusKey(item.runningStatus) || '鏃�' }}
- </el-descriptions-item>
- </el-descriptions> -->
- <!-- 鎽樿鍐呭寮�濮� -->
- <!-- 鎽樿鍐呭缁撴潫 -->
- </template>
- <!-- 璇︾粏鍐呭寮�濮� -->
- <el-form :model="item" class="form_class">
- <el-form-item label="鐘舵��">
- <el-tabs tab-position="top">
- <el-tab-pane
- v-for="(status, i) in item._statusList"
- :label="status.dlCreateTime.slice(0, 10)"
- >
- <el-form :model="status" class="form-class">
- <el-form-item label="浣嶇疆" style="margin-bottom: 10px">
- <!-- <el-input
- style="width: 250px;"
- v-model="status.dlLocation"
- :disabled="isDisabled"
- class="form-item-class"
- ></el-input> -->
- {{ status.dlLocation }}
- </el-form-item>
- <!-- <el-form-item label="缁忓害">
- <el-input
- v-model="status.dlLongitude"
- :disabled="isDisabled"
- class="form-item-class"
- ></el-input>
- </el-form-item>
- <el-form-item label="绾害">
- <el-input
- v-model="status.dlLatitude"
- :disabled="isDisabled"
- class="form-item-class"
- ></el-input>
- </el-form-item> -->
- <el-form-item label="鍥剧墖">
- <!-- 鍥剧墖 -->
- <el-space>
- <div v-if="status._paths && status._paths.length > 0">
- <el-image
- v-for="path in status._paths"
- fit="cover"
- class="pic-style"
- :src="path"
- :preview-src-list="Array.of(path)"
- />
- </div>
- <el-empty v-else></el-empty>
- </el-space>
- </el-form-item>
- </el-form>
- </el-tab-pane>
- </el-tabs>
- </el-form-item>
- </el-form>
- <el-divider />
- <!-- 璇︾粏鍐呭缁撴潫 -->
- </el-collapse-item>
- </el-collapse>
- <!-- 绌虹姸鎬� -->
- <el-empty v-if="isEmpty" />
- </div>
+ </template>
+ <!-- 璇︾粏鍐呭寮�濮� -->
+ <el-form :model="item" class="form_class">
+ <el-form-item label="鐘舵��">
+ <el-tabs tab-position="top">
+ <el-tab-pane
+ v-for="(status, i) in item._statusList"
+ :label="status.dlCreateTime.slice(0, 10)"
+ :key="i"
+ >
+ <el-form :model="status" class="form-class">
+ <el-form-item label="浣嶇疆" style="margin-bottom: 10px">
+ {{ status.dlLocation }}
+ </el-form-item>
+ <el-form-item label="鍥剧墖">
+ <!-- 鍥剧墖 -->
+ <el-space>
+ <div v-if="status._paths && status._paths.length > 0">
+ <el-image
+ v-for="(path, i) in status._paths"
+ fit="cover"
+ class="pic-style"
+ :src="path"
+ :preview-src-list="Array.of(path)"
+ :key="i"
+ />
+ </div>
+ <el-empty v-else></el-empty>
+ </el-space>
+ </el-form-item>
+ </el-form>
+ </el-tab-pane>
+ </el-tabs>
+ </el-form-item>
+ </el-form>
+ <!-- 璇︾粏鍐呭缁撴潫 -->
+ </el-collapse-item>
+ </el-collapse>
+ <!-- 绌虹姸鎬� -->
+ <el-empty v-if="isEmpty"
+ /></template>
+ </CompGenericWrapper>
</template>
<script>
-import dataMonitorDeviceTypeJs from './js/dataMonitorDeviceType.js';
-import dataProductionDeviceTypeJs from './js/dataProductionDeviceType.js';
-import dataTreatmentDeviceTypeJs from './js/dataTreatmentDeviceType.js';
+import CompGenericWrapper from './CompGenericWrapper.vue';
import deviceApi from '@/api/fysp/deviceApi';
import { $fysp } from '@/api/index';
+import { toLabel } from '@/enum/device/device';
export default {
- components: {},
+ components: { CompGenericWrapper },
watch: {
// 閫夋嫨鏀瑰彉鐩戝惉
currSelect: {
@@ -238,79 +224,6 @@
{ key: 0, value: '璐拱' },
{ key: 1, value: '绉熻祦' }
],
- // i-璁惧绫诲瀷
- // 涓ゅ眰map锛� { key: topType, value: { key: sceneTypeId, value: [label, value, children] } }
- iDeviceTypesMap: new Map(
- [
- {
- topTypeId: 0,
- value: new Map(
- [
- {
- sceneTypeId: 1,
- value: [
- {
- label: '鎵皹鐩戞祴',
- value: 1,
- children: [
- {
- label: '鎵皹鐩戞祴',
- value: 1
- }
- ]
- }
- ]
- },
- {
- sceneTypeId: 2,
- value: [
- {
- label: '鎵皹鐩戞祴',
- value: 1,
- children: [
- {
- label: '鎵皹鐩戞祴',
- value: 1
- }
- ]
- }
- ]
- },
- {
- sceneTypeId: 3,
- value: [
- {
- label: '鎵皹鐩戞祴',
- value: 1,
- children: [
- {
- label: '鎵皹鐩戞祴',
- value: 1
- }
- ]
- }
- ]
- },
- {
- sceneTypeId: 14,
- value: [
- {
- label: '鎵皹鐩戞祴',
- value: 1,
- children: [
- {
- label: '鎵皹鐩戞祴',
- value: 1
- }
- ]
- }
- ]
- }
- ].map((item) => [item.sceneTypeId, item.value])
- )
- }
- ].map((item) => [item.topTypeId, item.value])
- ),
scene: {}
};
},
@@ -338,9 +251,6 @@
// 灞曠ず琛ㄥ崟鐨勮鎯呯殑鐐瑰嚮浜嬩欢
showDetail(item) {
item._isDetail = !item._isDetail;
- if (item._isDetail) {
- } else {
- }
},
init(scene) {
// 鐖剁粍浠朵富鍔ㄨ皟鐢ㄥ垵濮嬪寲瀛愮粍浠剁殑鏂规硶
@@ -377,25 +287,25 @@
data._isDetail = false;
},
getList() {
- deviceApi.fetchDevices(this.scene.guid, this.currSelect.topDeviceTypeId).then((result) => {
- this.initList();
- if (result.data == null || result.data.length <= 0) {
- this.isEmpty = true;
- return;
- }
- // 鏍囧噯鍖栧睘鎬у悕
- for (let index = 0; index < result.data.length; index++) {
- var element = this.convertKeys(result.data[index]);
- this.initFormData(element);
- // 鑾峰彇璁惧鐘舵�佷俊鎭�
- let data = {
- deviceId: element.id,
- sceneId: element.sceneGuid,
- deviceTypeId: this.currSelect.topDeviceTypeId
- };
- deviceApi
- .fetchDeviceStatus(data)
- .then((status) => {
+ deviceApi
+ .fetchDevices(this.scene.guid, this.currSelect.topDeviceTypeId)
+ .then((result) => {
+ this.initList();
+ if (result.data == null || result.data.length <= 0) {
+ this.isEmpty = true;
+ return;
+ }
+ // 鏍囧噯鍖栧睘鎬у悕
+ for (let index = 0; index < result.data.length; index++) {
+ var element = this.convertKeys(result.data[index]);
+ this.initFormData(element);
+ // 鑾峰彇璁惧鐘舵�佷俊鎭�
+ let data = {
+ deviceId: element.id,
+ sceneId: element.sceneGuid,
+ deviceTypeId: this.currSelect.topDeviceTypeId
+ };
+ deviceApi.fetchDeviceStatus(data).then((status) => {
var statusData = status.data;
var imgPaths = [];
if (statusData) {
@@ -414,33 +324,17 @@
this.formInfo.push(element);
}
}
- })
- .catch((err) => {});
- }
- });
+ });
+ }
+ });
},
setDeviceType(element) {
var type = [];
- switch (this.currSelect.topDeviceTypeId) {
- case 0:
- type = dataMonitorDeviceTypeJs.toLabel(element.sceneTypeId, Array.of(element.subtypeId));
- break;
- case 1:
- type = dataTreatmentDeviceTypeJs.toLabel(
- element.sceneTypeId,
- Array.of(element.subtypeId)
- );
- break;
- case 2:
- type = dataProductionDeviceTypeJs.toLabel(
- element.sceneTypeId,
- Array.of(element.subtypeId)
- );
- break;
- }
- if (type.length > 0) {
- element._typename = type[0];
- }
+ type = toLabel(element.sceneTypeId, this.currSelect.topDeviceTypeId, [
+ element.typeId,
+ element.subtypeId
+ ]);
+ element._typename = type.join('-');
return element;
},
// 淇濆瓨鐘舵�佷俊鎭�
@@ -498,51 +392,6 @@
// 闇�瑕佹牴鎹満鏅被鍨嬬‘瀹氭帴鍙ｅ弬鏁扮殑灞炴�у悕
var query = this.modifyObjectKeys(obj);
return query;
- },
- // 鏍规嵁鎺ュ彛杩斿洖鐢熸垚 iDeviceTypesMap
- generateIDeviceTypesMap() {},
- // 鑾峰彇褰撳墠topType锛屽綋鍓峴ceneTypeId涓嬫墍鏈夌埗绫诲瀷
- getAlliDeviceParentTypeArray() {
- var sceneTypeAndIDeviceTypesMap = this.iDeviceTypesMap.get(this.currSelect.topDeviceTypeId);
- if (!sceneTypeAndIDeviceTypesMap) {
- return '';
- }
-
- var iDeviceTypesArray = sceneTypeAndIDeviceTypesMap.get(this.scene.typeid);
- if (!iDeviceTypesArray) {
- return '';
- }
- return iDeviceTypesArray;
- },
- // 鑾峰彇璁惧绫诲瀷 topDeviceTypeId, sceneTypeId 鍜� 鑷韩鐨勪竴浜涘弬鏁�
- getIDeviceParentTypeObj(device) {
- var iDeviceTypesArray = this.getAlliDeviceParentTypeArray();
- var result;
- iDeviceTypesArray.forEach((e) => {
- if (e.value == device.typeId) {
- result = e;
- }
- });
- return result;
- },
- // 鑾峰彇璁惧瀛愮被鍨� topDeviceTypeId, sceneTypeId 鍜� 鑷韩鐨勪竴浜涘弬鏁�
- getIDeviceChildrenTypeObj(device) {
- var parentType = this.getIDeviceParentTypeObj(device);
-
- if (parentType == null || parentType == '' || !('children' in parentType)) {
- return '';
- }
- var children = parentType.children;
- if (children == null || children.length <= 0) {
- return '';
- }
- let result;
- iDeviceTypesArray.forEach((e) => {
- if (e.value == device.typeId) {
- result = e;
- }
- });
- return result;
},
onClickPic(e, item) {
e.stopPropagation();
--
Gitblit v1.9.3