1

src/views/productOperation/modal/uploadModal.vue

@@ -35,260 +35,261 @@
         </template>
       </BasicForm>
       <div v-if="fileFlow.list.length == 0" style="padding-left: 83px">
-        <span v-if="fileFlow.sourceType == 'orig'">注‌支持采集完成后，导出的场景原始数据上传。</span>
-        <div v-else>
-          <div>重要提醒：</div>
-          数据上传规则‌：只接收‌其他单位/部门私有化部署的系统‌（比如XX分局自建的平台）下载的数据，本平台已有的场景‌‌不能重复上传‌；
-          ‌版本号核对‌：请确保来源平台和本平台的版本号完全一致，如来源平台是 v2.2.0，本平台也必须是
-          v2.2.0。</div
+        <span v-if="fileFlow.sourceType == 'orig'"
+          >注‌支持采集完成后，导出的场景原始数据上传。</span
         >
+        <div style="width: 360px" v-else>
+          <div>重要提醒：</div>
+          <div>数据上传规则‌：只接收‌其他单位/部门私有化部署的系统‌（比如XX分局自建的平台）下载的数据，本平台已有的场景‌‌不能重复上传‌；</div>
+          <div>‌版本号核对‌：请确保来源平台和本平台的版本号完全一致，如来源平台是 v2.2.0，本平台也必须是 v2.2.0。</div>
+      </div>
       </div>
     </div>
   </BasicModal>
 </template>
 <script lang="ts">
-import { defineComponent, ref, nextTick, onMounted, reactive, h } from 'vue';
-import { BasicModal, useModalInner } from '/@/components/Modal';
-import { BasicForm, FormSchema, useForm } from '/@/components/Form/index';
-import { useMessage } from '/@/hooks/web/useMessage';
-import { uploadSceneOrig, uploadSceneCheck } from '/@/api/operate';
-import { Upload } from 'ant-design-vue';
-import { useI18n } from '/@/hooks/web/useI18n';
-import { uploadApi } from '/@/api/product/index';
+  import { defineComponent, ref, nextTick, onMounted, reactive, h } from 'vue';
+  import { BasicModal, useModalInner } from '/@/components/Modal';
+  import { BasicForm, FormSchema, useForm } from '/@/components/Form/index';
+  import { useMessage } from '/@/hooks/web/useMessage';
+  import { uploadSceneOrig, uploadSceneCheck } from '/@/api/operate';
+  import { Upload } from 'ant-design-vue';
+  import { useI18n } from '/@/hooks/web/useI18n';
+  import { uploadApi } from '/@/api/product/index';
 
-const { t } = useI18n();
-export default defineComponent({
-  components: { BasicModal, BasicForm, Upload },
-  props: {
-    userData: { type: Object },
-  },
-  emits: ['update', 'register'],
-  setup(props, { emit }) {
-    const modelRef = ref({});
-    const fileFlow = reactive({
-      list: [],
-      sourceType: 'orig',
-      percent: 0,
-      filePath: null,
-    });
-    const loading = ref(false);
-    const uploadRef = ref(null);
-    const { createMessage, createConfirm } = useMessage();
-    const valiFile = async (_rule: Rule, value: string) => {
-      console.log(fileFlow, 'fileFlow');
-      if (fileFlow.list && fileFlow.list.length == 0) {
-        return Promise.reject(t('common.uploadMessge'));
-      } else {
-        return Promise.resolve();
-      }
-    };
-    const schemas: FormSchema[] = [
-      {
-        field: 'sourceType',
-        component: 'RadioGroup',
-        label: '类型',
-        defaultValue: 'orig',
-        required: true,
-        colProps: {
-          span: 24,
+  const { t } = useI18n();
+  export default defineComponent({
+    components: { BasicModal, BasicForm, Upload },
+    props: {
+      userData: { type: Object },
+    },
+    emits: ['update', 'register'],
+    setup(props, { emit }) {
+      const modelRef = ref({});
+      const fileFlow = reactive({
+        list: [],
+        sourceType: 'orig',
+        percent: 0,
+        filePath: null,
+      });
+      const loading = ref(false);
+      const uploadRef = ref(null);
+      const { createMessage, createConfirm } = useMessage();
+      const valiFile = async (_rule: Rule, value: string) => {
+        console.log(fileFlow, 'fileFlow');
+        if (fileFlow.list && fileFlow.list.length == 0) {
+          return Promise.reject(t('common.uploadMessge'));
+        } else {
+          return Promise.resolve();
+        }
+      };
+      const schemas: FormSchema[] = [
+        {
+          field: 'sourceType',
+          component: 'RadioGroup',
+          label: '类型',
+          defaultValue: 'orig',
+          required: true,
+          colProps: {
+            span: 24,
+          },
+          componentProps: {
+            options: [
+              { label: '原始数据', value: 'orig' },
+              { label: '离线包', value: 'offline' },
+            ],
+            onChange: (e) => {
+              console.log('sourceType', e);
+              fileFlow.sourceType = e.target.value;
+            },
+          },
         },
-        componentProps: {
-          options: [
-            { label: '原始数据', value: 'orig' },
-            { label: '离线包', value: 'offline' },
-          ],
-          onChange: (e) => {
-            console.log('sourceType', e);
-            fileFlow.sourceType = e.target.value;
+        {
+          field: 'filePath',
+          component: 'Upload',
+          slot: 'elupload',
+          label: t('routes.product.file'),
+          required: true,
+          rules: [{ required: true, validator: valiFile, trigger: 'change' }],
+          // helpMessage: t('routes.corporation.uploadHelp'),
+          colProps: {
+            span: 22,
           },
         },
-      },
-      {
-        field: 'filePath',
-        component: 'Upload',
-        slot: 'elupload',
-        label: t('routes.product.file'),
-        required: true,
-        rules: [{ required: true, validator: valiFile, trigger: 'change' }],
-        // helpMessage: t('routes.corporation.uploadHelp'),
-        colProps: {
-          span: 22,
+      ];
+      const [registerForm, { validate, resetFields, setFieldsValue }] = useForm({
+        labelWidth: 120,
+        schemas,
+        showActionButtonGroup: false,
+        actionColOptions: {
+          span: 24,
         },
-      },
-    ];
-    const [registerForm, { validate, resetFields, setFieldsValue }] = useForm({
-      labelWidth: 120,
-      schemas,
-      showActionButtonGroup: false,
-      actionColOptions: {
-        span: 24,
-      },
-    });
-    onMounted(() => {});
-    let addListFunc = () => {};
-    const [register, { closeModal }] = useModalInner((data) => {
-      console.log(data);
-      data && onDataReceive(data);
-    });
-
-    function onDataReceive(data) {
-      modelRef.value = data;
-      resetFields();
-      // setFieldsValue({
-      //   type: data.sceneName,
-      // });
-    }
-    function beforeUpload(file: File) {
-      return new Promise((resolve, reject) => {
-        const { size, name } = file;
-        let maxSize = 5; // 单位MB
-        let accept = ['zip']; // 单位MB
-        let sizeUnit = 'GB'; // 单位MB
-        const type = name.split('.').pop() || '';
-        console.log('beforeUpload', type, name);
-        if (accept && accept.length > 0 && !accept.includes(type.toLowerCase())) {
-          createMessage.error(t('component.upload.accept', [accept.join(',')]));
-          (file.status = 'error'), (fileFlow.list = []);
-          uploadRef.value.clearFiles();
-          return reject(false);
-        }
-        let newMaxSize =
-          sizeUnit == 'GB' ? maxSize * 1024 : sizeUnit == 'KB' ? maxSize / 1024 : maxSize;
-        // 设置最大值，则判断
-        if (maxSize && file.size / 1024 / 1024 >= newMaxSize) {
-          createMessage.error(
-            t('component.upload.maxSizeMultiple', { number: maxSize, unit: sizeUnit || 'MB' }),
-          );
-          (file.status = 'error'), (fileFlow.list = []);
-          uploadRef.value.clearFiles();
-          return reject(false);
-        }
-        fileFlow.list = [file];
-        return resolve(true);
       });
-    }
-    const handleSubmit = async () => {
-      try {
-        const params = await validate();
-        const filePath = fileFlow.filePath;
-        console.log('params', params, filePath, fileFlow.list);
-        const resCheck = await uploadSceneCheck({ filePath, sourceType: params.sourceType });
-        if (resCheck.code == 60042) {
-          return createConfirm({
-            iconType: 'warning',
-            title: '提示',
-            content: () =>
-              h('div', {}, [
-                h('div', null, `此场景原属于${resCheck.data}，继续上传将重新计算并覆盖原场景：`),
-                h('div', null, `归属权转移至当前账号；`),
-                h('div', null, `清除原所有者的权限设置；`),
-                h('div', null, `清空场景内由用户手动添加的空间模型。`),
-                h('div', null, `确定继续吗？`),
-              ]),
-            onOk: async () => {
-              Submit(filePath);
-            },
-          });
-        }
-        if (resCheck.code == 60043) {
-          return createConfirm({
-            iconType: 'warning',
-            title: '提示',
-            content: `此场景此前已上传过‌，继续上传将重新计算并覆盖原场景，场景内由用户手动添加的空间模型也会清空，确定继续吗？`,
-            onOk: async () => {
-              Submit(filePath);
-            },
-          });
+      onMounted(() => {});
+      let addListFunc = () => {};
+      const [register, { closeModal }] = useModalInner((data) => {
+        console.log(data);
+        data && onDataReceive(data);
+      });
+
+      function onDataReceive(data) {
+        modelRef.value = data;
+        resetFields();
+        // setFieldsValue({
+        //   type: data.sceneName,
+        // });
+      }
+      function beforeUpload(file: File) {
+        return new Promise((resolve, reject) => {
+          const { size, name } = file;
+          let maxSize = 5; // 单位MB
+          let accept = ['zip']; // 单位MB
+          let sizeUnit = 'GB'; // 单位MB
+          const type = name.split('.').pop() || '';
+          console.log('beforeUpload', type, name);
+          if (accept && accept.length > 0 && !accept.includes(type.toLowerCase())) {
+            createMessage.error(t('component.upload.accept', [accept.join(',')]));
+            (file.status = 'error'), (fileFlow.list = []);
+            uploadRef.value.clearFiles();
+            return reject(false);
+          }
+          let newMaxSize =
+            sizeUnit == 'GB' ? maxSize * 1024 : sizeUnit == 'KB' ? maxSize / 1024 : maxSize;
+          // 设置最大值，则判断
+          if (maxSize && file.size / 1024 / 1024 >= newMaxSize) {
+            createMessage.error(
+              t('component.upload.maxSizeMultiple', { number: maxSize, unit: sizeUnit || 'MB' }),
+            );
+            (file.status = 'error'), (fileFlow.list = []);
+            uploadRef.value.clearFiles();
+            return reject(false);
+          }
+          fileFlow.list = [file];
+          return resolve(true);
+        });
+      }
+      const handleSubmit = async () => {
+        try {
+          const params = await validate();
+          const filePath = fileFlow.filePath;
+          console.log('params', params, filePath, fileFlow.list);
+          const resCheck = await uploadSceneCheck({ filePath, sourceType: params.sourceType });
+          if (resCheck.code == 60042) {
+            return createConfirm({
+              iconType: 'warning',
+              title: '提示',
+              content: () =>
+                h('div', {}, [
+                  h('div', null, `此场景原属于${resCheck.data}，继续上传将重新计算并覆盖原场景：`),
+                  h('div', null, `归属权转移至当前账号；`),
+                  h('div', null, `清除原所有者的权限设置；`),
+                  h('div', null, `清空场景内由用户手动添加的空间模型。`),
+                  h('div', null, `确定继续吗？`),
+                ]),
+              onOk: async () => {
+                Submit(filePath);
+              },
+            });
+          }
+          if (resCheck.code == 60043) {
+            return createConfirm({
+              iconType: 'warning',
+              title: '提示',
+              content: `此场景此前已上传过‌，继续上传将重新计算并覆盖原场景，场景内由用户手动添加的空间模型也会清空，确定继续吗？`,
+              onOk: async () => {
+                Submit(filePath);
+              },
+            });
+          }
+          Submit(filePath);
+        } catch (error) {
+          console.log('not passing', error);
         }
-        Submit(filePath);
-      } catch (error) {
-        console.log('not passing', error);
+      };
+      function handleChange(value) {
+        console.log('handleChange', value);
+      }
+      function handleRemove(file) {
+        fileFlow.list = fileFlow.list.filter((item) => item.uid !== file.uid);
+        console.log('handleRemove', file);
       }
-    };
-    function handleChange(value) {
-      console.log('handleChange', value);
-    }
-    function handleRemove(file) {
-      fileFlow.list = fileFlow.list.filter((item) => item.uid !== file.uid);
-      console.log('handleRemove', file);
-    }
 
-    function handleVisibleChange(v) {
-      // console.log(v);
-      // v && props.userData && nextTick(() => onDataReceive(props.userData));
-    }
-    async function Submit(filePath) {
-      loading.value = true;
-      try {
+      function handleVisibleChange(v) {
+        // console.log(v);
+        // v && props.userData && nextTick(() => onDataReceive(props.userData));
+      }
+      async function Submit(filePath) {
+        loading.value = true;
+        try {
+          const params = await validate();
+          const res = await uploadSceneOrig({ filePath, sourceType: params.sourceType });
+          loading.value = false;
+          console.log('res', res, filePath);
+          closeModal();
+          resetFields();
+          createMessage.success('上传成功。');
+          emit('update');
+        } catch (error) {
+          loading.value = false;
+        }
+      }
+      function handleProgress(file) {
+        // file 对象包含了上传进度信息
+        console.log('上传进度:', file.percent);
+        // antd-vue Upload 组件会自动处理进度条显示
+      }
+      async function handleCustomRequest(option) {
+        if (!option) {
+          return;
+        }
         const params = await validate();
-        const res = await uploadSceneOrig({ filePath, sourceType: params.sourceType });
+        let file = fileFlow.list && fileFlow.list[0];
+        const apiData = {
+          file: file,
+          data: {
+            dictId: params.dictId,
+          },
+        };
+        loading.value = true;
+        fileFlow.complete = 0;
+        function onUploadProgress(progressEvent: ProgressEvent) {
+          const complete = ((progressEvent.loaded / progressEvent.total) * 100) | 0;
+          fileFlow.complete = complete;
+        }
+        let url = await uploadApi(apiData, onUploadProgress);
+        option.onSuccess && option.onSuccess();
+        console.log('uploadApi', url);
+        fileFlow.filePath = url;
         loading.value = false;
-        console.log('res', res, filePath);
-        closeModal();
-        resetFields();
         createMessage.success('上传成功。');
-        emit('update');
-      } catch (error) {
-        loading.value = false;
+        return url;
       }
-    }
-    function handleProgress(file) {
-      // file 对象包含了上传进度信息
-      console.log('上传进度:', file.percent);
-      // antd-vue Upload 组件会自动处理进度条显示
-    }
-    async function handleCustomRequest(option) {
-      if (!option) {
-        return;
-      }
-      const params = await validate();
-      let file = fileFlow.list && fileFlow.list[0];
-      const apiData = {
-        file: file,
-        data: {
-          dictId: params.dictId,
-        },
+      return {
+        register,
+        schemas,
+        registerForm,
+        model: modelRef,
+        fileFlow,
+        handleProgress,
+        handleCustomRequest,
+        handleVisibleChange,
+        handleSubmit,
+        addListFunc,
+        loading,
+        resetFields,
+        beforeUpload,
+        handleChange,
+        handleRemove,
+        uploadRef,
+        t,
       };
-      loading.value = true;
-      fileFlow.complete = 0;
-      function onUploadProgress(progressEvent: ProgressEvent) {
-        const complete = ((progressEvent.loaded / progressEvent.total) * 100) | 0;
-        fileFlow.complete = complete;
-      }
-      let url = await uploadApi(apiData, onUploadProgress);
-      option.onSuccess && option.onSuccess();
-      console.log('uploadApi', url);
-      fileFlow.filePath = url;
-      loading.value = false;
-      createMessage.success('上传成功。');
-      return url;
-    }
-    return {
-      register,
-      schemas,
-      registerForm,
-      model: modelRef,
-      fileFlow,
-      handleProgress,
-      handleCustomRequest,
-      handleVisibleChange,
-      handleSubmit,
-      addListFunc,
-      loading,
-      resetFields,
-      beforeUpload,
-      handleChange,
-      handleRemove,
-      uploadRef,
-      t,
-    };
-  },
-});
+    },
+  });
 </script>
 <style lang="less">
-.myzdyfrom {
-  .ant-upload-list {
-    width: 300px;
+  .myzdyfrom {
+    .ant-upload-list {
+      width: 300px;
+    }
   }
-}
 </style>