hsq-pro/src/views/vent/performance/comment/NormalTable.vue

<template>
  <div>
    <BasicTable @register="registerTable">
      <template #action="{ record }">
        <TableAction :actions="getActions(record)" :dropDownActions="getDropDownAction(record)" />
      </template>
      <template #bodyCell="{ column, record }">
        <slot name="filterCell" v-bind="{ column, record }"></slot>
      </template>
    </BasicTable>
    <DeviceModal :editID="editID" :fileType="fileType" @register="registerModal" />
  </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 { 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({});

provide('formData', record);
const [registerModal, { 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');
  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对象来处理数据
  // 对于<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),
    // },
  ];
}


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>