geg-gas-web/src/components/common/approListModal.vue

<template>
  <div>
    <BasicModal v-bind="$attrs" @register="registerModal" width="60%" :title="getTitle" @ok="handleSubmit"
      @visible-change="handleVisibleChange" >
        <BasicTable @register="registerTable" class="approListModal">
          <template #bodyCell="{ column, record, index }">
            <template v-if="column.dataIndex === 'file'">
              <div v-for="item in (record.lngFileUploadList )" class="fileCSS">
                <a @click="handleDownload(item)">{{item.fileOrg}}</a>
              </div>
            </template>
          </template>
        </BasicTable>
    </BasicModal>
  </div>
</template>
<script lang="ts" setup>
    import { ref, computed, unref, nextTick  } from 'vue';
    import { BasicModal, useModalInner, useModal } from '/@/components/Modal';
    import { BasicForm, useForm } from '/@/components/Form/index';
    import { BasicTable, useTable, FormSchema, BasicColumn, TableAction } from '/@/components/Table';
    import { useMessage } from '/@/hooks/web/useMessage';
    import { useI18n } from '/@/hooks/web/useI18n';
    import { getLngApproPageFile} from '/@/api/approve/appro';
    import { parseDownloadUrl} from '/@/api/system/file';
    import { downloadByUrl } from '/@/utils/file/download';

    const { t } = useI18n();
    const codeFormSchema: FormSchema[] = [
      {
        field: 'dateAppro',
        label: '拟稿日期',
        component: 'RangePicker',
        componentProps: {
          format: 'YYYY-MM-DD',
          style: { width: '100%' },
          getPopupContainer: () => document.body,
        },
      },
      { field: 'title', label: '标题/编号', component: 'Input'},
    ];

    const columns: BasicColumn[] = [
      { dataIndex: 'title', title: '标题', align: 'left', },
      { dataIndex: 'code', title: '编号', align: 'left',width: 120 },
      { dataIndex: 'typeName', title: '签报类型', align: 'left',width: 100 },
      { dataIndex: 'empName', title: '拟稿人', align: 'left',width: 120 },
      { dataIndex: 'bDeptName', title: '拟稿人所属部门', align: 'left',width: 120 },
      { dataIndex: 'dateAppro', title: '拟稿日期', align: 'left', width: 120 },
      { dataIndex: 'file', title: '附件', align: 'left',width: 200 },
      
    ];

    const emit = defineEmits(['success', 'register']);

    const { notification } = useMessage();
    const isUpdate = ref(true);
    const rowId = ref('');
    const selectedKeys = ref<string[]>([]);
    const selectedValues = ref([]);
    const props = defineProps({
      selectType: { type: String, default: 'checkbox' },
    
    });
    const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => {

        setModalProps({ confirmLoading: false });

        isUpdate.value = !!data?.isUpdate;
    });

    const [registerTable, { getDataSource, setTableData, updateTableDataRecord, reload  }] = useTable({
        title: t('签报列表'),
        api: getLngApproPageFile,
        columns,
  
        bordered: true,
        pagination: true,
        canResize: false,
        formConfig: {
          labelCol:{span: 9, offSet:10},
          schemas: codeFormSchema,
          fieldMapToTime: [['dateAppro', ['startDate', 'endDate'], 'YYYY-MM-DD'],],
          showResetButton: true,
        },
        immediate: false, // 设置为不立即调用
        beforeFetch: (params) => {
          return { ...params, valid: 'Y',approCode: 'YSP',page:params.limit};
        },
        rowSelection: {
          type: props.selectType,
          onChange: onSelectChange
        },
    });
    const handleDownload = (info) => {
      const url = parseDownloadUrl(info.response ? info.response.data.fileUrl : info.fileUrl);
      const fileName = info.response ? info.response.data.fileOrg : info.fileOrg;
      downloadByUrl({ url, fileName: fileName});
    };
    const handleVisibleChange = (visible: boolean) => {
      if (visible) {
        nextTick(() => {
          reload();
        });
      }
    };
    function onSelectChange(rowKeys: string[], e) {
      selectedKeys.value = rowKeys;
      selectedValues.value = e
    }
    const getTitle = computed(() => (!unref(isUpdate) ? t('签报列表') : t('')));

    async function handleSubmit() {
      if (!selectedValues.value.length) {
        notification.warning({
          message: t('提示'),
          description: t('请选择签报')
        });
        return
      }
      closeModal();
      emit('success', selectedValues.value);
    }



  



</script>
<style >
 .approListModal {
  width: 100%;
 }
 .approListModal .basicCol{
    position: inherit !important;
    top: 0;
  }
  .fileCSS a{
    width: 100%;
    white-space: normal; 
    word-wrap: break-word; 
    overflow-wrap: break-word; 
  }



</style>
<style lang="less" scoped>
  :deep( .ant-col-8:nth-child(1)) {
    width: 360px !important;
    max-width: 360px !important;;
  }
  :deep(.ant-col-8:nth-child(1) .ant-form-item-label) {
    width: 80px !important;
  }
</style>