1. 图片选择组件移动到全局组件文件夹 2. 涉及到使用图片选择组件添加图片区域loading 3. 无用页面删除

hcong

2024-11-21 87958d6d33603fa673cb7c8f5caf2394689959bf

1. 图片选择组件移动到全局组件文件夹 2. 涉及到使用图片选择组件添加图片区域loading 3. 无用页面删除

 src/components.d.ts

@@ -10,6 +10,7 @@
    BaseContentLayout: typeof import('./components/core/BaseContentLayout.vue')['default']
    BaseMap: typeof import('./components/map/BaseMap.vue')['default']
    BasePanelLayout: typeof import('./components/core/BasePanelLayout.vue')['default']
    CompGenericWrapper: typeof import('./components/CompGenericWrapper.vue')['default']
    CompQuickSet: typeof import('./components/search-option/CompQuickSet.vue')['default']
    Content: typeof import('./components/core/Content.vue')['default']
    ElAside: typeof import('element-plus/es')['ElAside']

 src/components/CompGenericWrapper.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,52 @@
<template>
  <!-- dialog包裹 -->
  <el-dialog v-if="currType == 'dialog'" :title="title" :model-value="visible" @opened="$emit('update:visible', true)"
    @closed="$emit('update:visible', false)" destroy-on-close>
    <div v-if="visible">
      <slot name="content"></slot>
    </div>
  </el-dialog>
  <!-- drawer包裹 -->
  <el-drawer v-if="currType == 'drawer'" :title="title" size="45%" direction="ltr" :model-value="visible"
    @opened="$emit('update:visible', true)" @closed="$emit('update:visible', false)" destroy-on-close>
    <slot name="content"></slot>
  </el-drawer>
  <!-- é»˜è®¤æ— åŒ…裹 -->
  <div v-if="currType == 'normal'">
    <slot></slot>
  </div>
</template>
<script setup>
import { ref, defineEmits, watch } from 'vue';
const props = defineProps({
  visible: Boolean,
  title: String,
  type: {
    type: String,
    default: 'normal'
  }
});
const typeOptions = ref([
  { id: '0', label: 'dialog' },
  { id: '1', label: 'drawer' },
  { id: '10', label: '' }
]);
const currType = ref('');
const emit = defineEmits(['update:visible']);
watch(
  () => props.type,
  (nValue) => {
    currType.value = nValue;
  },
  { immediate: true }
);
</script>
<style scoped>
::v-deep .el-drawer__body {
  padding-top: 0;
}

::v-deep .el-drawer__header {
  margin-bottom: 16px;
}
</style>

 src/components/FYImageSelectDialog.vue

@@ -1,8 +1,8 @@
<template>
  <el-dialog
    :model-value="dialogVisible"
    @opened="$emit('update:dialogVisible', true)"
    @closed="$emit('update:dialogVisible', false)"
    @opened="handleOpen"
    @closed="handleClose"
    width="66%"
    destroy-on-close
  >
@@ -40,14 +40,15 @@
          class="imgs"
        >
          <el-image
            v-loading="img.loading"
            v-for="(img, i) in typeImgMap.get(activeId)"
            :key="i"
            :class="[img.isSelect ? 'selected' : 'noActive', 'image']"
            fit="cover"
            :src="img.url"
            @click="onSelect(img, i)"
            @load="onOneImgLoadSuccess"
            @error="onOneImgLoadError"
            @load="onOneImgLoadSuccess(img)"
            @error="onOneImgLoadError(img)"
          />
        </el-scrollbar>
        <el-row v-else justify="space-between">
@@ -58,7 +59,7 @@
  </el-dialog>
</template>
<script setup>
import { ref, watch, computed } from 'vue';
import { ref, watch, computed, onMounted, onUnmounted } from 'vue';

const props = defineProps({
  dialogVisible: Boolean,
@@ -108,10 +109,12 @@
    loadedImgCount.value
  );
});
function onOneImgLoadError(e) {
function onOneImgLoadError(img) {
  img.loading = false
  loadedImgCount.value++;
}
function onOneImgLoadSuccess(e) {
function onOneImgLoadSuccess(img) {
  img.loading = false
  loadedImgCount.value++;
}
watch(
@@ -148,7 +151,28 @@
    img.isSelect = false;
  }
}

function handleOpen() {
  // if (props.typeImgMap.get(activeId.value) == undefined) {
  //     return;
  //   }
  //   props.typeImgMap.get(activeId.value).forEach((i) => {
  //     if (i.isSelect == true) {
  //       return;
  //     }
  //     props.defaultFile.forEach((imgItem) => {
  //       if (imgItem.url == i.url) {
  //         i.isSelect = true;
  //         selectedImgUrlList.value.push(i);
  //       }
  //     });
  //   });
  emit('update:dialogVisible', true)
}
function handleClose() {
  selectedImgUrlList.value.forEach(item => item.isSelect = false)
  selectedImgUrlList.value = []
  emit('update:dialogVisible', false)
}
function handleSubmit() {
  emit('submit', selectedImgUrlList.value);
  emit('update:dialogVisible', false);
@@ -168,27 +192,47 @@
  },
  { immediate: true }
);
// watch(
//   () => props.defaultFile,
//   (nV, oV) => {
//     if (props.typeImgMap.get(activeId.value) == undefined) {
//       return;
//     }
//     props.typeImgMap.get(activeId.value).forEach((i) => {
//       if (i.isSelect == true) {
//         return;
//       }
//       nV.forEach((imgItem) => {
//         if (imgItem.url == i.url) {
//           i.isSelect = true;
//           selectedImgUrlList.value.push(i);
//         }
//       });
//     });
//   },
//   { deep: true, immediate: true }
// );

watch(
  () => props.typeImgMap,
  (newMap, oldMap) => {
    if (newMap.get(activeId.value) == undefined) {
      return;
    }
    newMap.get(activeId.value).forEach((i) => {
      if (i.isSelect == true) {
        return;
      }
      props.defaultFile.forEach((imgItem) => {
        if (imgItem.url == i.url) {
          i.isSelect = true;
          selectedImgUrlList.value.push(i);
        }
      });
    });
  },
  { deep: true, immediate: true }
);
// watch(
//   () => props.typeImgMap,
//   (newMap, oldMap) => {
//     if (newMap.get(activeId.value) == undefined) {
//       return;
//     }
//     newMap.get(activeId.value).forEach((i) => {
//       if (i.isSelect == true) {
//         return;
//       }
//       props.defaultFile.forEach((imgItem) => {
//         if (imgItem.url == i.url) {
//           i.isSelect = true;
//           selectedImgUrlList.value.push(i);
//         }
//       });
//     });
//   },
//   { immediate: true }
// );
</script>
<style scoped>
.center {

 src/views/fysp/check/components/ArbitraryPhoto.vue

@@ -1,5 +1,6 @@
<template>
  <FYImageSelectDialog
    v-loading="loading"
    title="场景图片"
    :typeList="typesList"
    :typeImgMap="typesMap"
@@ -19,7 +20,8 @@
    return {
      // æ— æ•°æ®
      typesList: [],
      typesMap: new Map()
      typesMap: new Map(),
      loading: true,
    };
  },
  mounted() {
@@ -29,6 +31,7 @@
    // å›¾ç‰‡åˆ†ç±»
    getGroupImgs() {
      mediafileApi.getRoutineByStGuid(this.subtask.stGuid).then((res) => {
        this.loading = true
        let typeList = [];
        let typeMap = new Map();
        const data = res.data;
@@ -52,9 +55,10 @@
        }
        this.typesList = typeList;
        this.typesMap = typeMap;
      });
      }).finally(() => (this.loading = false));
    }
  }
};
</script>
<style scoped></style>
 

 src/views/fysp/check/components/ComChangeEdit.vue

@@ -62,7 +62,6 @@
</template>
<script>
import problemApi from '@/api/fysp/problemApi.js';
import CompGenericWrapper from './CompGenericWrapper.vue';
import { $fysp } from '@/api/index.js';
import fileUtil from '@/utils/fileUtils.js';
import { useCloned } from '@vueuse/core';
@@ -70,7 +69,6 @@
export default {
  emits: ['submit', 'cancel'],
  components: {
    CompGenericWrapper
  },
  watch: {
    oldChangeFileList: {

 src/views/fysp/check/components/CompDevicePhono.vue

ÎļþÒÑɾ³ý

 src/views/fysp/check/components/CompDevicePhoto.vue

@@ -1,5 +1,6 @@
<template>
  <FYImageSelectDialog
    v-loading="loading"
    title="设备图片"
    :typeList="typeList"
    :typeImgMap="typeImgMap"
@@ -10,6 +11,7 @@
import deviceApi from '@/api/fysp/deviceApi';
import { useCloned } from '@vueuse/core';
import { $fysp } from '@/api/index.js';
const loading = ref(true)
const props = defineProps({
  // å±•ç¤ºæ¨¡å¼
  mode: {
@@ -64,6 +66,7 @@
    const topTypeId = deviceTopTypeElement.typeId;
    deviceImgMap.set(topTypeId, []);
    deviceApi.fetchDevices(props.subtask.sceneId, topTypeId).then((result) => {
      loading.value = true;
      // æ ‡å‡†åŒ–属性名
      for (let i = 0; i < result.data.length; i++) {
        var element = convertKeys(result.data[i]);
@@ -92,7 +95,7 @@
              deviceImgMap.get(topTypeId).push(newDevice);
            }
          }
        });
        }).finally(() => (loading.value = false));
      }
    });
  }

 src/views/fysp/check/components/CompDeviceShow.vue

ÎļþÒÑɾ³ý

 src/views/fysp/check/components/CompDeviceShowTest.vue

@@ -168,12 +168,11 @@
</template>

<script>
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: { CompGenericWrapper },
  components: {  },
  watch: {
    // é€‰æ‹©æ”¹å˜ç›‘听
    currSelect: {

 src/views/fysp/check/components/CompGenericWrapper.vue

ÎļþÒÑɾ³ý

 src/views/fysp/check/components/CompLedgerPhoto.vue

@@ -1,5 +1,6 @@
<template>
  <FYImageSelectDialog
    v-loading="loading"
    title="台账图片"
    :typeList="typeList"
    :typeImgMap="typeImgMap"
@@ -11,6 +12,7 @@
import userApi from '@/api/fysp/userApi.js';
import { svToTz } from '@/enum/scene';
import { $fytz } from '@/api/index';
const loading = ref(true)
const props = defineProps({
  // å±•ç¤ºæ¨¡å¼
  mode: {
@@ -26,6 +28,7 @@
const typeImgMap = ref(new Map());
function getList() {
  userApi.getTzId(props.subtask.sceneId).then((res) => {
    loading.value = true
    let tzUserId = res.tzUserId;

    problemApiFytz
@@ -61,7 +64,7 @@
            typeImgMap.value.get(type.typeId).push(item);
          });
        }
      });
      }).finally(() => loading.value = false);
  });
}
function getMonth() {

 src/views/fysp/check/components/CompLedgerPic.vue

ÎļþÒÑɾ³ý

 src/views/fysp/check/components/CompProRecent.vue

@@ -55,7 +55,6 @@
  </CompGenericWrapper>
</template>
<script>
import CompGenericWrapper from './CompGenericWrapper.vue';
import CompProblemAddOrUpd from './CompProblemAddOrUpd.vue';
import taskApi from '@/api/fysp/taskApi';
import { useCloned } from '@vueuse/core';
@@ -99,7 +98,6 @@
  },
  components: {
    CompProblemAddOrUpd,
    CompGenericWrapper
  },
  mounted() {},
  data() {

 src/views/fysp/check/components/CompProblemAddOrUpd.vue

@@ -214,7 +214,6 @@
  </CompGenericWrapper>
</template>
<script>
import CompGenericWrapper from './CompGenericWrapper.vue';
import ArbitraryPhoto from './ArbitraryPhoto.vue';
import CompLedgerPhoto from './CompLedgerPhoto.vue';
import CompDevicePhoto from './CompDevicePhoto.vue';
@@ -232,7 +231,6 @@
    ArbitraryPhoto,
    CompDevicePhoto,
    CompLedgerPhoto,
    CompGenericWrapper
  },
  props: {
    readonly: {