gasInjection-project/src/views/vent/reportManager/comment/NormalTable.vue

<template>
  <div>
    <BasicTable @register="registerTable" :rowSelection="rowSelection" :key="resetTable">
      <template #tableTitle>
        <a-button preIcon="ant-design:plus-outlined" type="primary" @click="handleAdd">新增</a-button>
        <a-button preIcon="ant-design:cloud-upload-outlined" type="primary" @click="handleUpload">上传</a-button>
      </template>
      <template #action="{ 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>
        <a class="table-action-link" @click="handleHisrecord(record)"> 历史记录</a>
        <a class="table-action-link" @click="handleReport(record)"> 同步报表</a>
        <slot name="action" v-bind="{ record }"></slot>
      </template>
      <template #bodyCell="{ column, record }">
        <slot name="filterCell" v-bind="{ column, record }"></slot>
      </template>
    </BasicTable>
    <DeviceModal
      :editID="editID"
      :reportId="reportId"
      :reportLogHis="reportLogHis"
      :fileType="fileType"
      @register="registerModal"
      :addOredit="addOredit"
      @saveOrUpdate="saveOrUpdate"
    />
    <!-- 报表或模板上传弹窗 -->
    <tempUpload :visibleUp="visibleUp" @resetUpload="resetUpload" />
  </div>
</template>

<script lang="ts" setup>
  //ts语法
  import { ref, reactive, toRaw, defineExpose, watch } from 'vue';
  import { BasicTable } from '/@/components/Table';
  import { useModal } from '/@/components/Modal';
  import DeviceModal from './DeviceModal.vue';
  import tempUpload from './common/tempUpload.vue';
  import { getTableHeaderColumns } from '/@/hooks/web/useWebColumns';
  import { useListPage } from '/@/hooks/system/useListPage';
  import { synReportFile } from '../reportManager.api';

  const props = defineProps({
    searchParam: {
      type: Object,
      default: () => {
        return {};
      },
    },

    //下载文件接口
    downLoad: {
      type: Function,
      required: true,
    },
    columns: {
      type: Array,
      // required: true,
      default: () => [],
    },
    searchFormSchema: {
      type: Array,
      default: () => [],
    },
    list: {
      type: Function,
      required: true,
    },
    deleteById: {
      type: Function,
      required: true,
    },
    batchDelete: {
      type: Function,
    },

    designScope: {
      type: String,
    },
    title: {
      type: String,
    },
  });

  //区分打开编辑或新增弹窗
  let addOredit = ref('');
  //文件ID
  let editID = ref(0);
  let fileType = ref(''); //文件类型
  let reportLogHis = ref(''); //是否为报表记录编辑
  let reportId = ref(''); //历史记录列表传参
  const emit = defineEmits(['saveAdd']);
  const record = reactive({});
  const columnList = getTableHeaderColumns('');
  let visibleUp = ref(0);
  let resetTable = ref(0);
  //列表查询参数
  let searchParams = reactive({
    busKind: '',
    modelType: '',
    reportType: '',
  });
  const [registerModal, { openModal, closeModal }] = useModal();
  // 列表页面公共参数、方法
  const { prefixCls, tableContext, onExportXls, onImportXls, doRequest } = useListPage({
    designScope: props.designScope,
    tableProps: {
      title: props.title,
      api: props.list,
      columns: props.columns.length > 0 ? (props.columns as any[]) : columnList,
      showTableSetting: false,
      showIndexColumn: true,
      // size: 'small',
      // bordered: false,
      scroll: { y: 650 },
      formConfig: {
        showAdvancedButton: true,
        // labelWidth: 100,
        labelAlign: 'left',
        labelCol: {
          xs: 24,
          sm: 24,
          md: 24,
          lg: 9,
          xl: 7,
          xxl: 5,
        },
        schemas: props.searchFormSchema as any[],
      },
      useSearchForm: props.searchFormSchema.length > 0 ? true : false,
      striped: true,
      actionColumn: {
        width: 180,
      },
      //自定义默认排序
      defSort: {
        column: 'createTime',
        order: 'desc',
      },
      beforeFetch: (params) => {
        return Object.assign(params, { column: 'createTime', ...searchParams });
      },
    },
  });
  //注册table数据
  const [registerTable, { reload, getForm }, { rowSelection, selectedRowKeys }] = tableContext;

  //报表或模板上传
  function handleUpload() {
    visibleUp.value = new Date().getTime();
  }
  function resetUpload() {
    resetTable.value = new Date().getTime();
  }

  /**
   * 新增事件
   */
  function handleAdd() {
    addOredit.value = 'add';
    for (let key in record) {
      delete record[key];
    }
    openModal(true);
  }

  //新增保存
  function saveOrUpdate(param) {
    console.log(param, '新增参数----------');
    emit('saveAdd', param);
  }

  /**
   * 编辑事件
   */
  function handleEdit(data) {
    addOredit.value = 'edit';
    reportLogHis.value = '';
    Object.assign(record, toRaw(data));
    let index = record.fileName.indexOf('.');
    fileType.value = record.fileName.substring(index + 1);
    editID.value = record.id;
    console.log(editID.value, '编辑文件ID');
    openModal(true, {
      record,
    });
  }

  //同步报表
  async function handleReport(data) {
    let res = await synReportFile({ id: data.id });
    if (res) {
      resetTable.value = new Date().getTime();
    }
  }

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

  // 历史记录
  function handleHisrecord(data) {
    addOredit.value = 'hisRecord';
    Object.assign(record, toRaw(data));
    reportId.value = record.id;
    console.log(reportId.value, '历史记录列表传参---00000000');
    openModal(true, {
      record,
    });
  }

  //下载文件
  function handleDownLoad(record) {
    console.log(record, '下载');
    props.downLoad({ id: record.id }).then((res) => {
      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对象来处理数据
    // 对于<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);
    }
  }

  watch(
    () => props.searchParam,
    (newS, oldS) => {
      searchParams.busKind = newS.busKind;
      searchParams.modelType = newS.modelType;
      searchParams.reportType = newS.reportType;
    },
    { immediate: true, deep: true }
  );

  defineExpose({
    doRequest,
    onExportXls,
    onImportXls,
    reload,
    getForm,
  });
</script>

<style scoped lang="less">
  @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;
    }
  }

  :deep(.@{ventSpace}-select-dropdown) {
    .@{ventSpace}-select-item-option-selected,
    .@{ventSpace}-select-item-option-active {
      background-color: #ffffff33 !important;
    }

    .@{ventSpace}-select-item:hover {
      background-color: #ffffff33 !important;
    }
  }
</style>