global-web/src/views/saleCode/salesOrder/components/ViewFileListModal.vue

<template>
  <div ref="viewFileDetailRef">
    <a-modal
      :title="title"
      width="60%"
      :visible="visible"
      :maskClosable="false"
      :getContainer="() => $refs.viewFileDetailRef"
      switchFullscreen
      :footer="false"
      @cancel="handleCancel"
    >
      <div>
        <a-button type="primary" @click="handleAdd" preIcon="ant-design:plus-outlined" style="margin-bottom: 1%"> 新增(add)</a-button>
        <a-table
          :columns="columns"
          :row-key="(record) => record.id"
          :data-source="dataSource"
          bordered
          size="small"
          height="500"
          :pagination="false"
          :scroll="{ x: 1000, y: 500 }"
        >
          <template #operation="{ text, record, index }">
            <a @click="handleEdit(record)">编辑(edit)</a>
            <a-divider type="vertical" />
            <a-popconfirm title="确定删除吗？" @confirm="handleDelete(record)">
              <a>删除(delete)</a>
            </a-popconfirm>
          </template>
        </a-table>
      </div>
    </a-modal>
    <FileUploadModal ref="FileUploadModalRef" @add-list="loadData" />
  </div>
</template>

<script lang="ts" setup>
  import { ref } from 'vue';
  import { defHttp } from '/@/utils/http/axios';
  import FileUploadModal from './FileUploadModal.vue';
  import { message } from 'ant-design-vue';
  var visible = ref(false);
  var title = ref('');
  var fatherId = ref('');
  var fatherTitle = ref('');
  var FileUploadModalRef = ref();
  var params = ref({
    headId: '',
    type: '',
    pageSize: '-1',
  });
  var columns = ref([
    {
      title: '上传时间(upload time)',
      align: 'center',
      dataIndex: 'createTime',
      key: 'createTime',
    },
    {
      title: '名称(name)',
      align: 'center',
      dataIndex: 'name',
      key: 'name',
    },
    {
      title: '操作(operation)',
      align: 'center',
      dataIndex: 'operation',
      key: 'operation',
      slots: { customRender: 'operation' },
    },
  ]);
  var dataSource = ref([]);
  function loadData() {
    defHttp.get({ url: '/saleCode/saleOrderFiles/list', params: params.value }).then((res) => {
      if (res) {
        dataSource.value = res.records;
      }
    });
  }
  function getTable(dataIndex, record) {
    visible.value = true;
    title.value = dataIndex == 'scanProtocaol' ? '扫描合同查看(view scan contract)' : '技术协议查看(view T/A)';
    fatherId.value = record.id;
    fatherTitle.value = dataIndex;
    params.value.headId = record.id;
    params.value.type = dataIndex == 'scanProtocaol' ? '1' : '2';
    loadData();
  }
  function handleCancel() {
    visible.value = false;
  }
  function handleAdd() {
    FileUploadModalRef.value.getTable(fatherId, fatherTitle, 'add');
  }
  function handleEdit(record) {
    FileUploadModalRef.value.getTable(fatherId, fatherTitle, 'edit', record.id);
  }
  function handleDelete(record) {
    let params = { id: record.id };
    defHttp.delete({ url: '/saleCode/saleOrderFiles/delete', params }, { joinParamsToUrl: true, isTransformResponse: false }).then((res) => {
      if (res) {
        loadData();
      } else {
        message.warning(res.message);
      }
    });
  }
  defineExpose({
    getTable,
  });
</script>

<style lang="less" scoped>
  /** 时间和数字输入框样式 */
  :deep(.ant-input-number) {
    width: 100%;
  }

  :deep(.ant-calendar-picker) {
    width: 100%;
  }
  /deep/.ant-modal-body {
    padding: 14px !important;
  }
</style>