历史举证图片和附件可选择其他专题或历史图片

2025-03-20 14:19:41 +08:00 · 2025-03-20 14:19:41 +08:00 · bbd3fd4b03
parent 7d817107b0
commit bbd3fd4b03
7 changed files with 446 additions and 23 deletions
--- a/src/api/tiankongdi/index.ts
+++ b/src/api/tiankongdi/index.ts
@ -59,6 +59,12 @@ enum Api {
  GetIntersects = "/api/GeoTiffManager/GetIntersects",
  // 获取网络环境
  GetNetWorkEev = "/api/DroneCloudQuery/IsPublic",
+  // 获取其他专题或历史图斑图片
+  rebackzhuantipic = "/api/DroneCaseInfoSingle/rebackzhuantipic",
+  CopyImg = "/api/DroneCaseInfoSingle/CopyImg",
+  // 获取其他专题或历史图斑附件
+  rebackzhuantifujian = "/api/DroneCaseInfoSingle/rebackzhuantifujian",
+  Copyfujian = "/api/DroneCaseInfoSingle/Copyfujian"
 }

 /**
@ -175,4 +181,28 @@ export function getIntersectTif(params){

 export function getNetworkType(){
  return defHttp.get({ url: Api.GetNetWorkEev }); 
+}
+export function rebackzhuantipic(params:{ zhuanti, CaseId }){
+  return defHttp.get({ 
+    url: Api.rebackzhuantipic,
+    params
+  }); 
+}
+export function CopyImg(params:string[]){
+  return defHttp.post({ 
+    url: Api.CopyImg,
+    data:params,
+  }); 
+}
+export function rebackzhuantifujian(params:{ zhuanti, CaseId }){
+  return defHttp.get({ 
+    url: Api.rebackzhuantifujian,
+    params
+  }); 
+}
+export function Copyfujian(params:string[]){
+  return defHttp.post({ 
+    url: Api.Copyfujian,
+    data:params,
+  }); 
 }
--- a/src/components/Upload/src/components/FileUpload.vue
+++ b/src/components/Upload/src/components/FileUpload.vue
@ -1,27 +1,27 @@
 <template>
  <div>
-    <UploadDragger
-      v-bind="$attrs"
-      :list-type="listType"
-      :accept="getStringAccept"
-      :multiple="multiple"
-      :showUploadList="false"
-      :maxCount="maxNumber"
-      :before-upload="beforeUpload"
-      :custom-request="customRequest"
-      @preview="handlePreview"
-      @remove="handleRemove"
-    >
-      <!-- <div v-if="fileList && fileList.length < maxNumber">
-        <plus-outlined />
-        <div style="margin-top: 8px">{{ t('component.upload.upload') }}</div>
-      </div> -->
-      <p class="ant-upload-drag-icon">
-        <inbox-outlined></inbox-outlined>
-      </p>
-      <p class="ant-upload-text">单击或拖动文件到此区域进行上传</p>
-      <p class="ant-upload-hint"> 支持单次或批量上传。 </p>
-    </UploadDragger>
+    <div style="display: flex;">
+      <UploadDragger
+        class="upload-file"
+        v-bind="$attrs"
+        :list-type="listType"
+        :accept="getStringAccept"
+        :multiple="multiple"
+        :showUploadList="false"
+        :maxCount="maxNumber"
+        :before-upload="beforeUpload"
+        :custom-request="customRequest"
+        @preview="handlePreview"
+        @remove="handleRemove"
+      >
+        <p class="ant-upload-drag-icon">
+          <inbox-outlined></inbox-outlined>
+        </p>
+        <p class="ant-upload-text">单击或拖动文件到此区域进行上传</p>
+        <p class="ant-upload-hint"> 支持单次或批量上传。 </p>
+      </UploadDragger>
+      <div :class="`copy-other ${$attrs.disabled? 'copy-other-disabled': ''}`" @click="openSelectOther">历史举证</div>
+    </div>

    <div class="file-item" v-for="(item, index) in fileList" :key="index">
      {{ handlerDealFileName(item.name) }}
@ -38,11 +38,17 @@
    <Modal :open="previewOpen" :title="previewTitle" :footer="null" @cancel="handleCancel">
      <img alt="" style="width: 100%" :src="previewImage" />
    </Modal>
+    <a-modal v-model:open="openSelectOtherModal" title="历史举证" :footer="null" :destroyOnClose="true">
+      <FileUploadSelectOtherModal
+        :server="props.server"
+        @save="saveOtherFile"
+      />
+    </a-modal>
  </div>
 </template>

 <script lang="ts" setup>
-  import { ref, toRefs, watch } from 'vue';
+  import { ref, toRefs, watch, useAttrs } from 'vue';
  import {
    PlusOutlined,
    InboxOutlined,
@ -63,6 +69,7 @@
  import { UploadResultStatus } from '@/components/Upload/src/types/typing';
  import { fileUploadApi } from '@/api/sys/upload';
  import axios from 'axios';
+  import FileUploadSelectOtherModal from './FileUploadSelectOtherModal.vue'

  defineOptions({ name: 'ImageUpload' });

@ -70,6 +77,7 @@
  const props = defineProps({
    ...uploadContainerProps,
  });
+  const attrs = useAttrs()
  const { t } = useI18n();
  const { createMessage } = useMessage();
  const { accept, helpText, maxNumber, maxSize } = toRefs(props);
@ -87,6 +95,7 @@
  const fileList = ref<UploadProps['fileList']>([]);
  const isLtMsg = ref<boolean>(true);
  const isActMsg = ref<boolean>(true);
+  const openSelectOtherModal = ref(false)

  watch(
    () => props.value,
@ -288,6 +297,24 @@
    });
    return path;
  }
+  const openSelectOther = () => {
+    if(attrs.disabled) return
+    openSelectOtherModal.value = true
+  }
+  const saveOtherFile = (list:string[]) => {
+    const { server } = props;
+    list.forEach(item => {
+      fileList.value?.push({
+        uid: '-1',
+        name: item,
+        status: 'done',
+        url: server + '/' + item,
+      });
+    })
+    const value = getValue();
+    emit('change', value);
+    openSelectOtherModal.value = false
+  }
 </script>

 <style lang="less">
@ -319,3 +346,27 @@
    color: #999;
  }
 </style>
+<style lang="scss" scoped>
+.upload-file{
+  width: calc(100% - 161px);
+}
+.copy-other{
+  width: 161px;
+  // height: 100px;
+  border: 1px dashed #d9d9d9;
+  background-color: rgba(0, 0, 0, 0.02);
+  cursor: pointer;
+  border-radius: 8px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-left: 10px;
+}
+.copy-other:hover{
+  border-color: #0960bd;
+}
+.copy-other-disabled{
+  cursor: no-drop;
+  border-color: #d9d9d9 !important;
+}
+</style>
--- a/src/components/Upload/src/components/FileUploadSelectOtherModal.vue
+++ b/src/components/Upload/src/components/FileUploadSelectOtherModal.vue
@ -0,0 +1,144 @@
+<template>
+  <a-spin :spinning="loading">
+    <div class="modal-content">
+      <div class="subject" v-for="subject in fileList">
+        <div class="subject-name">{{ subject.zname }}</div>
+        <div class="show-file-div">
+          <div class="item-file" v-for="(item, index) in subject.val">
+            <a-checkbox
+              style="margin-right: 10px;"
+              :checked="selectFile.some(obj => obj === item.path)" 
+              @change="changeSelect(selectFile.some(obj => obj === item.path)? 1: 2,item.path)">
+            </a-checkbox>
+            <Icon icon="material-symbols:attach-file" :size="20" style="cursor: pointer;" @click="hanlderPreViewFile(item.path)"/>
+            {{ item.path }}
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="button-div">
+      <a-button type="primary" @click="save">保存</a-button>
+    </div>
+    <a-modal
+      v-model:open="previewFileModalVisible"
+      style="width: 100vw"
+      title="文件预览"
+      wrap-class-name="full-modal"
+    >
+      <FilePreview v-if="previewFileModalVisible" :fileUrl="previewFileUrl"></FilePreview>
+      <template #footer>
+        <a-button key="cancel" @click="handleCancelPreviewFile">取消</a-button>
+        <a-button key="confirm" type="primary" @click="handlerDownloadFle">下载</a-button>
+      </template>
+    </a-modal>
+  </a-spin>
+  </template>
+  
+  <script setup lang="ts">
+  import { defineProps, onMounted, ref, defineEmits } from "vue"
+  import { rebackzhuantifujian, Copyfujian } from '@/api/tiankongdi/index'
+  import Icon from '@/components/Icon/Icon.vue';
+  import { message } from "ant-design-vue";
+  import { getZhuantiName } from '@/utils/global'
+  import FilePreview from '@/components/Upload/src/components/FilePreview.vue';
+  
+  const props = defineProps(['server'])
+  const emits = defineEmits(['save'])
+  const fileList = ref<string[]>([])
+  const selectFile = ref<string[]>([])
+  const loading = ref(false)
+  const previewFileModalVisible = ref(false)
+  const previewFileUrl = ref("")
+  onMounted(() => {
+    loading.value = true
+    let caseid = sessionStorage.getItem('SelectOtherId')
+    rebackzhuantifujian({CaseId:caseid,zhuanti:getZhuantiName()}).then(res => {
+      console.log('res',res)
+      fileList.value = res
+    }).finally(() => {
+      loading.value = false
+    })
+  })
+  
+  const changeSelect = (type,item) => {
+    switch(type){
+      case 1: 
+      selectFile.value = selectFile.value.filter(useItem => useItem !== item);
+        break;
+      case 2:
+      selectFile.value.push(item)
+        break
+    }
+  }
+  const save = () => {
+    if(selectFile.value.length <= 0){
+      message.warning('至少选择一个文件')
+      return
+    }
+    loading.value = true
+    Copyfujian(selectFile.value).then(res => {
+      console.log(res)
+      emits('save', res)
+    }).finally(() => {
+      loading.value = false
+    })
+  }
+  const hanlderPreViewFile = (url)=>{
+    previewFileUrl.value = `${props.server}/${url}`;
+    previewFileModalVisible.value = true;
+  }
+
+  const handlerDownloadFle = ()=>{
+    window.open(previewFileUrl.value, 'mozillaTab');
+  }
+  const handleCancelPreviewFile = ()=>{
+    previewFileModalVisible.value = false;
+  }
+  </script>
+  
+  <style lang="scss" scoped>
+  .modal-content{
+    min-height: 500px;
+    padding: 0px 20px;
+    max-height: 678px;
+    overflow: auto;
+    scrollbar-width: none; 
+    ::-webkit-scrollbar {
+      width: 0;
+      height: 0;
+    }
+    .subject{
+      margin-bottom: 10px;
+      .subject-name{
+        height: 30px;
+        background-color: #8b8b8b;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        color: #fff;
+        font-size: 20px;
+        font-weight: 500;
+        margin-bottom: 10px;
+      }
+      .show-file-div{
+        width: 100%;
+        .item-file{
+          display: flex;
+          white-space: nowrap;
+          overflow: hidden;
+          text-overflow: ellipsis; 
+        }
+        .item-file:hover{
+          background-color: #f4f4f4;
+        }
+      }
+    }
+  
+  }
+  .button-div{
+    display: flex;
+    justify-content: end;
+    padding: 20px;
+  }
+  </style>
+  
--- a/src/components/Upload/src/components/ImageUpload.vue
+++ b/src/components/Upload/src/components/ImageUpload.vue
@ -39,9 +39,16 @@
        <div style="margin-top: 8px">{{ t('component.upload.upload') }}</div>
      </div>
    </Upload>
+    <div v-if="!$attrs.disabled" class="copy-other" @click="openSelectOther">历史举证</div>
    <!-- <Modal :open="previewOpen" :title="previewTitle" :footer="null" @cancel="handleCancel">
      <img alt="" style="width: 100%" :src="previewImage" />
    </Modal> -->
+    <a-modal v-model:open="openSelectOtherModal" title="历史举证" :footer="null" :destroyOnClose="true">
+      <ImageUploadSelectOtherModal
+        :server="props.server"
+        @save="saveOtherImage"
+      />
+    </a-modal>
  </div>
 </template>

@ -63,6 +70,7 @@
  import { fileUploadApi } from '@/api/sys/upload';
  import ImagePreview from '@/components/Upload/src/components/image_preview.vue';
  import { userFormFileStore } from '@/store/modules/formFileUrl';
+  import ImageUploadSelectOtherModal from './ImageUploadSelectOtherModal.vue'

  const formFileStore = userFormFileStore();

@ -83,6 +91,7 @@
  const props = defineProps({
    ...uploadContainerProps,
  });
+  const openSelectOtherModal = ref(false)


  const { t } = useI18n();
@ -327,6 +336,23 @@
      }, 250);
    }
  }
+  const openSelectOther = () => {
+    openSelectOtherModal.value = true
+  }
+  const saveOtherImage = (list:string[]) => {
+    const { server } = props;
+    list.forEach(item => {
+      fileList.value?.push({
+        uid: '-1',
+        name: item,
+        status: 'done',
+        url: server + '/' + item,
+      });
+    })
+    const value = getValue();
+    emit('change', value);
+    openSelectOtherModal.value = false
+  }

 </script>

@ -434,4 +460,19 @@
      }
    }
  }
+  .copy-other{
+    width: 100px;
+    height: 100px;
+    border: 1px dashed #d9d9d9;
+    background-color: rgba(0, 0, 0, 0.02);
+    cursor: pointer;
+    border-radius: 8px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin-left: 10px;
+  }
+  .copy-other:hover{
+    border-color: #0960bd;
+  }
 </style>
--- a/src/components/Upload/src/components/ImageUploadSelectOtherModal.vue
+++ b/src/components/Upload/src/components/ImageUploadSelectOtherModal.vue
@ -0,0 +1,130 @@
+<template>
+<a-spin :spinning="loading">
+  <div class="modal-content">
+    <div class="subject" v-for="subject in imageList">
+      <div class="subject-name">{{ subject.zname }}</div>
+      <div class="show-image-div">
+        <div class="image-item" v-for="(item, index) in subject.val">
+          <a-image
+            style="width:100px;height:100px;"
+            :src="`${props.server}/${item.FilePath}`"
+          ></a-image>
+          <div class="select-div" @click="changeSelect(selectImage.some(obj => obj === item.FilePath)? 1: 2,item.FilePath)">
+            <Icon v-if="selectImage.some(obj => obj === item.FilePath)" icon="material-symbols-light:check-circle" :size="25" style="color: #18a058;"/>
+            <Icon v-else icon="material-symbols-light:check-circle-outline" :size="25" style="color: #cacdcd;"/>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div class="button-div">
+    <a-button type="primary" @click="save">保存</a-button>
+  </div>
+</a-spin>
+</template>
+
+<script setup lang="ts">
+import { defineProps, onMounted, ref, defineEmits } from "vue"
+import { rebackzhuantipic, CopyImg } from '@/api/tiankongdi/index'
+import Icon from '@/components/Icon/Icon.vue';
+import { message } from "ant-design-vue";
+  import { getZhuantiName } from '@/utils/global'
+
+const props = defineProps(['caseid','server','zhuanti'])
+const emits = defineEmits(['save'])
+const imageList = ref<string[]>([])
+const selectImage = ref<string[]>([])
+const loading = ref(false)
+onMounted(() => {
+  loading.value = true
+  let caseid = sessionStorage.getItem('SelectOtherId')
+  rebackzhuantipic({CaseId:caseid,zhuanti:getZhuantiName()}).then(res => {
+    imageList.value = res
+  }).finally(() => {
+    loading.value = false
+  })
+})
+
+const changeSelect = (type,item) => {
+  switch(type){
+    case 1: 
+    selectImage.value = selectImage.value.filter(useItem => useItem !== item);
+      break;
+    case 2:
+    selectImage.value.push(item)
+      break
+  }
+}
+const save = () => {
+  if(selectImage.value.length <= 0){
+    message.warning('至少选择一张图片')
+    return
+  }
+  loading.value = true
+  CopyImg(selectImage.value).then(res => {
+    emits('save', res)
+  }).finally(() => {
+    loading.value = false
+  })
+}
+</script>
+
+<style lang="scss" scoped>
+.modal-content{
+  min-height: 500px;
+  padding: 0px 20px;
+  max-height: 678px;
+  overflow: auto;
+  scrollbar-width: none; 
+  ::-webkit-scrollbar {
+    width: 0;
+    height: 0;
+  }
+  .subject{
+    margin-bottom: 10px;
+    .subject-name{
+      height: 30px;
+      background-color: #8b8b8b;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      color: #fff;
+      font-size: 20px;
+      font-weight: 500;
+      margin-bottom: 10px;
+    }
+    .show-image-div{
+      width: 100%;
+      // height: 100%;
+      display: flex;
+      flex-wrap: wrap;
+      align-content: flex-start;
+      .image-item{
+        position: relative;
+        width: 100px;
+        height: 100px;
+        margin-right: 12px;
+        margin-bottom: 10px;
+        .select-div{
+          position: absolute;
+          bottom: 0px;
+          height: 20px;
+          width: 100%;
+          height: 30px;
+          background-color: #00000075;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          cursor: pointer;
+        }
+      }
+    }
+  }
+
+}
+.button-div{
+  display: flex;
+  justify-content: end;
+  padding: 20px;
+}
+</style>
--- a/src/utils/global.ts
+++ b/src/utils/global.ts
@ -230,3 +230,27 @@ export const keyIssusesIIPatchSourceOptions = await asyncGetOptions('zd2tbly');
 export const inspectionAuditPatchSourceOptions = await asyncGetOptions('xcsjtbly');
 export const degrainingPatchSourceOptions = await asyncGetOptions('gdflhbly');
 export const redLinePatchSourceOptions = await asyncGetOptions('redlinetbly');
+
+export const getZhuantiName = () => {
+  let code = sessionStorage.getItem('SelectOtherZhuantiCode')
+  switch(code){
+    case "0000001":
+      return '违法用地'
+    case "0000002":
+      return '巡察审计'
+    case "0000003":
+      return '非法采矿卫片下发'
+    case "0000004":
+      return '耕地非粮化'
+    case "0000005":
+      return '重点问题Ⅰ类'
+    case "0000006":
+      return '重点问题Ⅱ类'
+    case "0000007":
+      return '生态保护红线监管'
+    case "0000008":
+      return '生态修复'
+    case "100001":
+      return '非法采矿'
+  }
+}
--- a/src/views/demo/workflow/task/process/audit.vue
+++ b/src/views/demo/workflow/task/process/audit.vue
@ -1098,6 +1098,9 @@

  onBeforeMount(() => {
    getTaskInfo();
+    // 表单附件和图片组件 历史举证功能获取专题和ID 在进入审核时将数据放到session
+    sessionStorage.setItem('SelectOtherId',props.processId)
+    sessionStorage.setItem('SelectOtherZhuantiCode',props.auditData.processcode)
  });

  function onFormContainerMouseOver(event) {}