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" @addList="loadData"></FileUploadModal>
    </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>