mky-vent-base/src/views/vent/performance/comment/NormalTable.vue

<template>
  <div style="height: 100%">
    <BasicTable @register="registerTable">
      <!-- <template #tableTitle>
        <a-button preIcon="ant-design:plus-outlined" type="primary" @click="handleAdd">新增</a-button>
      </template> -->
      <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 @register="registerModal" @saveOrUpdate="saveOrUpdateHandler" :deviceType="deviceType" />
  </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({
    columnsType: {
      type: String,
      // required: true,
    },
    columns: {
      type: Array,
      // required: true,
      default: () => [],
    },
    searchFormSchema: {
      type: Array,
      required: true,
      default: () => [],
    },
    formSchema: {
      type: Array,
      required: true,
    },
    list: {
      type: Function,
      required: true,
    },

    deleteById: {
      type: Function,
      required: true,
    },
    saveOrUpdate: {
      type: Function,
      required: true,
    },
    pointList: {
      type: Function,
      // required: true,
    },
    designScope: {
      type: String,
    },
    title: {
      type: String,
    },
    deviceType: {
      type: String,
    },
  });

  const isUpdate = ref(false);
  const record = reactive({});

  provide('formSchema', props.formSchema);
  provide('isUpdate', isUpdate);
  provide('formData', record);
  provide('deviceType', props.deviceType);
  // const glob = useGlobSetting();
  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: 300,
      },
      useSearchForm: false, //不使用查询条件
      pagination: false, //不使用分页组件
      beforeFetch: (params) => {
        params.parentId = '';
        params.selectFlag = true;
        params.likeFileName = '';
        // return Object.assign({ column: '111', order: 'd11' }, params);
        // return Object.assign({ parentId: '', selectFlag: true, likeFileName: '' }, params);
      },
    },
  });

  //注册table数据
  const [registerTable, { reload }, { selectedRowKeys }] = tableContext;

  const saveOrUpdateHandler = async (params) => {
    try {
      await props.saveOrUpdate(params, isUpdate.value);
      closeModal();
      await doRequest(props.list, { confirm: false });
    } catch (error) {
      message.error('保存失败，请联系管理员');
    }
  };

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

  /**
   * 编辑事件
   */
  function handleEdit(data) {
    isUpdate.value = true;
    Object.assign(record, toRaw(data));
    openModal(true, {
      record,
    });
  }

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

  /**
   * 查看
   */
  // function handleDetail(record) {
  //   iframeUrl.value = `${glob.uploadUrl}/sys/annountCement/show/${record.id}?token=${getToken()}`;
  //   openDetail(true);
  // }
  /**
   * 操作列定义
   * @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: handleEdit.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;
  }
</style>