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>
        <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"></tempUpload>

  </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';

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,
    // 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,
    },
    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 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>