vent-template/src/views/vent/performance/comment/NormalTable.vue

<template>
  <div>
    <BasicTable @register="registerTable">
      <template #action="{ record }">
        <!-- <TableAction :actions="getActions(record)" :dropDownActions="getDropDownAction(record)" /> -->
        <a class="table-action-link" @click="handleEdit(record)">编辑</a>
        <a-popconfirm title="确定删除?" @confirm="handleDelete(record)">
          <a class="table-action-link">删除</a>
        </a-popconfirm>
        <a class="table-action-link" @click="handleDownLoad(record)">下载</a>
      </template>
      <template #bodyCell="{ column, record }">
        <slot name="filterCell" v-bind="{ column, record }"></slot>
      </template>
    </BasicTable>
    <DeviceModal :editID="editID" :fileType="fileType" @register="registerDeviceModal" />
    <CADModal @register="registerCADModal" />
  </div>
</template>

<script lang="ts" name="system-user" setup>
  //ts语法
  import { ref, provide, reactive, toRaw, defineExpose } from 'vue';
  import { BasicTable, TableAction } from '/@/components/Table';
  import { useModal } from '/@/components/Modal';
  import DeviceModal from './DeviceModal.vue';
  import CADModal from './CADModal.vue';
  import { getTableHeaderColumns } from '/@/hooks/web/useWebColumns';
  import { useListPage } from '/@/hooks/system/useListPage';

  const props = defineProps({
    //各矿参数
    selfParam: {
      type: Object,
      default: () => {
        return {};
      },
    },
    //查询参数
    searchParam: {
      type: String,
      default: '',
    },
    //菜单树传递参数
    nodeParam: {
      type: Object,
      default: () => {
        return {};
      },
    },
    columnsType: {
      type: String,
      // required: true,
    },
    columns: {
      type: Array,
      // required: true,
      default: () => [],
    },

    list: {
      type: Function,
      required: true,
    },
    //下载文件接口
    downLoad: {
      type: Function,
      required: true,
    },

    deleteById: {
      type: Function,
      required: true,
    },
    pointList: {
      type: Function,
      // required: true,
    },
    designScope: {
      type: String,
    },
    title: {
      type: String,
    },
  });
  let fileType = ref(''); //文件类型
  let editID = ref(0); //文件ID

  const isUpdate = ref(false);
  const record = reactive<Record<string, any>>({});

  provide('formData', record);
  const [registerDeviceModal, { openModal, closeModal }] = useModal();

  const columnList = getTableHeaderColumns(props.columnsType);
  console.log('aaa', columnList);

  // 列表页面公共参数、方法
  const { tableContext, doRequest } = useListPage({
    designScope: props.designScope,
    tableProps: {
      title: props.title,
      api: props.list,
      columns: props.columns.length > 0 ? (props.columns as any[]) : columnList,
      // size: 'small',
      bordered: false,
      // formConfig: {
      //   // labelWidth: 100,
      //   labelAlign: 'left',
      //   labelCol: {
      //     xs: 24,
      //     sm: 24,
      //     md: 24,
      //     lg: 9,
      //     xl: 7,
      //     xxl: 5,
      //   },
      //   schemas: props.searchFormSchema as any[],
      // },
      striped: true,
      showIndexColumn: true, //是否显示序列号
      actionColumn: {
        width: 280,
      },
      useSearchForm: false, //不使用查询条件
      // pagination: false, //不使用分页组件
      beforeFetch: (params) => {
        params.parentId = props.nodeParam.id ? props.nodeParam.id : '';
        params.selectFlag = props.nodeParam.id ? false : true;
        params.likeFileName = props.searchParam ? props.searchParam : '';
        params.bpmStatus = props.selfParam.bpmStatus ? props.selfParam.bpmStatus : '';
        params.sysOrgCode = props.selfParam.sysOrgCode ? props.selfParam.sysOrgCode : '';
        // return Object.assign({ column: '111', order: 'd11' }, params);
        // return Object.assign({ parentId: '', selectFlag: true, likeFileName: '' }, params);
      },
    },
  });

  //注册table数据
  const [registerTable, { reload }, { selectedRowKeys }] = tableContext;
  /**
   * 编辑事件
   */
  function handleEdit(data) {
    isUpdate.value = true;
    Object.assign(record, toRaw(data));
    console.log(record, '编辑');
    let index = record.fileSuffix.indexOf('.');
    fileType.value = record.fileSuffix.substring(index + 1);
    editID.value = record.id;
    console.log(fileType, '文件格式');
    console.log(editID.value, '编辑文件ID');

    // 根据文件后缀名打开不同的模态框
    if (['.dwg', '.mxcad'].includes(data.fileSuffix)) {
      openCADModal(true, {
        record,
      });
    } else {
      openModal(true, {
        record,
      });
    }
  }

  /**
   * 删除事件
   */
  async function handleDelete(record) {
    await props.deleteById({ id: record.id }, reload);
  }

  //下载文件
  function handleDownLoad(record) {
    console.log(record, '下载');
    props.downLoad({ id: record.id }).then((res) => {
      console.log('11111');
      console.log(res, '文件下载成功');
      let filename = `${record.fileName}`;
      downFilePublic(res, filename);
    });
  }
  // 下载公用方法
  function downFilePublic(content, fileName) {
    // const blob = new Blob([content], { type: 'application/xlsx;charset=UTF-8' }); // 构造一个blob对象来处理数据
    const blob = new Blob([content], { type: 'application/xlsx;charset=UTF-8' }); // 构造一个blob对象来处理数据
    // 对于<a>标签，只有 Firefox 和 Chrome（内核） 支持 download 属性
    // IE10以上支持blob但是依然不支持download
    if ('download' in document.createElement('a')) {
      // 支持a标签download的浏览器
      const link = document.createElement('a'); // 创建a标签
      link.download = fileName; // a标签添加属性
      link.style.display = 'none';
      link.href = URL.createObjectURL(blob);
      document.body.appendChild(link);
      link.click(); // 执行下载
      URL.revokeObjectURL(link.href); // 释放url
      document.body.removeChild(link); // 释放标签
    } else {
      // 其他浏览器
      navigator.msSaveBlob(blob, fileName);
    }
  }

  // /**
  //  * 操作列定义
  //  * @param record
  //  */
  // function getActions(record) {
  //   return [
  //     {
  //       label: '详情',
  //       onClick: handleEdit.bind(null, record),
  //     },
  //     {
  //       label: '编辑',
  //       onClick: handleEdit.bind(null, record),
  //     },
  //     {
  //       label: '删除',
  //       popConfirm: {
  //         title: '是否确认删除',
  //         confirm: handleDelete.bind(null, record),
  //       },
  //     },
  //     {
  //       label: '下载',
  //       onClick: handleDownLoad.bind(null, record),
  //     },
  //     // {
  //     //   label: '审批',
  //     //   onClick: handleEdit.bind(null, record),
  //     // },
  //     // {
  //     //   label: '查看',
  //     //   onClick: handleDetail.bind(null, record),
  //     // },
  //   ];
  // }
  /**
   * 下拉操作栏
   */
  function getDropDownAction(record) {
    return [
      // {
      //   label: '删除',
      //   popConfirm: {
      //     title: '是否确认删除',
      //     confirm: handleDelete.bind(null, record),
      //   },
      // },
      // {
      //   label: '查看',
      //   onClick: handleDetail.bind(null, record),
      // },
    ];
  }

  // CAD预览相关的逻辑
  const [registerCADModal, { openModal: openCADModal }] = useModal();

  defineExpose({
    doRequest,
  });
</script>

<style scoped lang="less">
  // @ventSpace: zxm;

  // @vent-table-no-hover: rgba(43, 135, 255, 0.1);

  // @vent-table-hover: rgba(53, 147, 255, 0.2);
  // :deep(.zxm-table-row) {
  //   td {
  //     background-color: @vent-table-hover !important;
  //   }
  // }
  // :deep(.jeecg-basic-table-row__striped) {
  //   td {
  //     background-color: @vent-table-no-hover !important;
  //   }
  // }

  // ::v-deep .zxm-table-title {
  //   display: none;
  // }
  // ::v-deep .zxm-table-thead > tr > th {
  //   border-top: 0px !important;
  //   border-left: 0px !important;
  //   border-right: 0px !important;
  //   border-bottom: 1px solid #268bc1 !important;
  //   color: #3beff9 !important;
  // }
  // ::v-deep .zxm-table-tbody > tr > td {
  //   border: none;
  // }

  // ::v-deep .zxm-table-thead {
  //   background: linear-gradient(to bottom, transparent, rgba(53, 147, 255, 0.5)) !important;
  // }

  @ventSpace: zxm;

  @vent-table-no-hover: #00bfff10;

  :deep(.@{ventSpace}-table-cell-row-hover) {
    background: #264d8833 !important;
  }

  :deep(.@{ventSpace}-table-row-selected) {
    background: #268bc522 !important;
  }

  :deep(.@{ventSpace}-table-tbody > tr > td) {
    background-color: #0dc3ff05;
  }

  :deep(.jeecg-basic-table-row__striped) {
    td {
      background-color: @vent-table-no-hover !important;
    }
  }

  ::v-deep .zxm-table-title {
    display: none;
  }
</style>