geosign-mp/src/views/scenes/uploadE57Modal.vue

<template>
  <BasicModal
    v-bind="$attrs"
    @register="register"
    :title="t('routes.archive.patchArchiveE57')"
    :showCancelBtn="false"
    :centered="true"
    :okText="t('common.okText')"
    :confirmLoading="loading"
    @ok="handleSubmit"
    @cancel="handleCancel"
  >
    <div class="pt-20px">
      <BasicForm @register="registerForm">
        <template #file>
          <Upload
            :file-list="fileList"
            accept=".e57"
            :maxCount="1"
            :beforeUpload="handleBeforeUpload"
            @remove="handleRemove"
          >
            <a-button type="primary">{{ t('layout.e57.e57upload') }}</a-button>
          </Upload>
        </template>
        <template #objType>
          <Checkbox v-model:checked="isObjCheck">{{ t('layout.e57.e57objText') }}</Checkbox>
        </template>

        <template #tips>
          <div style="word-break: break-all">{{ t('layout.e57.e57tip') }}</div>
        </template>
      </BasicForm>
    </div>
    <template #centerFooter>
      <!-- <a-button>xxxx</a-button> -->
    </template>
  </BasicModal>
</template>
<script lang="ts">
  import { defineComponent, reactive, ref } from 'vue';
  import { BasicModal, useModalInner } from '/@/components/Modal';
  import { BasicForm, FormSchema, useForm } from '/@/components/Form/index';
  import { useI18n } from '/@/hooks/web/useI18n';
  import { uploadE57Api } from '/@/api/scene/list';
  import { Upload, Checkbox } from 'ant-design-vue';
  import { useMessage } from '/@/hooks/web/useMessage';
  import type { UploadProps } from 'ant-design-vue';
  const loading = ref(false);
  const fileList = ref<UploadProps['fileList']>([]);
  const { t } = useI18n();
  const isObjCheck = ref(false);
  const schemas: FormSchema[] = [
    {
      field: 'file',
      label: t('layout.e57.e57name') + ':',
      component: 'Input',
      slot: 'file',
    },
    {
      field: 'objType',
      label: t('layout.e57.e57type') + ':',
      component: 'Input',
      slot: 'objType',
    },

    {
      field: 'tips',
      label: t('routes.archive.warmTips') + ':',
      component: 'Input',
      slot: 'tips',
      colProps: {
        span: 24,
        offset: 120,
      },
    },
  ];

  export default defineComponent({
    components: { BasicModal, BasicForm, Upload, Checkbox },
    props: {
      userData: { type: Object },
    },
    emits: ['register', 'success'],
    setup(_, { emit }) {
      const { t } = useI18n();
      const { createMessage } = useMessage();

      const downloadInfo = reactive<Recordable>({});

      const [registerForm] = useForm({
        schemas: schemas,
        labelWidth: 120,
        showActionButtonGroup: false,

        actionColOptions: {
          span: 24,
        },
        // submitFunc: handleSubmit,
      });
      const [register, { closeModal }] = useModalInner((data) => {
        data && onDataReceive();
        fileList.value = [];
        isObjCheck.value = false;
      });

      function onDataReceive() {}

      const handleSubmit = async () => {
        if (!fileList.value?.length)
          return createMessage.error(t('layout.e57.e57upload') + t('layout.e57.e57name'));

        try {
          console.log('file', fileList.value);
          // const from = new FormData();
          loading.value = true;
          await uploadE57Api(
            {
              file: fileList.value[0] as any as File,
              data: {
                isObj: Number(isObjCheck.value),
              },
            },
          );
          loading.value = false;
          closeModal();
          emit('success');
        } catch (error) {
          console.log('fileerror', error);
          loading.value = false;
        }
      };
      const handleBeforeUpload: UploadProps['beforeUpload'] = (file) => {
        const { size, name } = file;
        let hz = name.substring(name.lastIndexOf('.'));
        console.log('file', file, hz);
        if (hz !== '.e57') {
          createMessage.error(t('layout.e57.e57nametips'));
          return false;
        }
        if (size / 1024 / 1024 >= 20000) {
          fileList.value = [];
          return false;
        }
        fileList.value = [file];
        return false;
      };
      const handleRemove: UploadProps['onRemove'] = (file) => {
        const index = fileList.value.indexOf(file);
        const newFileList = fileList.value.slice();
        newFileList.splice(index, 1);
        fileList.value = newFileList;
      };
      const handleCancel = () => {};

      return {
        t,
        register,
        schemas,
        handleSubmit,
        closeModal,
        registerForm,
        downloadInfo,
        handleBeforeUpload,
        isObjCheck,
        handleCancel,
        fileList,
        handleRemove,
        loading,
      };
    },
  });
</script>