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

<template>
  <div>
    <BasicTable @register="registerTable" :rowSelection="rowSelection">
      <template #tableTitle>
        <a-button preIcon="ant-design:plus-outlined" type="primary" @click="handleAdd">新增</a-button>
        <a-button v-if="getExportUrl" type="primary" preIcon="ant-design:export-outlined" @click="onExportXlsFn"> 导出</a-button>
        <j-upload-button v-if="getImportUrl" type="primary" preIcon="ant-design:import-outlined" @click="onImportXls">导入</j-upload-button>
        <a-dropdown v-if="selectedRowKeys.length > 0" :getPopupContainer="getPopupContainer">
          <template #overlay>
            <a-menu>
              <a-menu-item key="1" @click="batchHandleDelete">
                <Icon icon="ant-design:delete-outlined" />
                删除
              </a-menu-item>
            </a-menu>
          </template>
          <a-button
            >批量操作
            <Icon style="fontsize: 12px" icon="ant-design:down-outlined" />
          </a-button>
        </a-dropdown>
      </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>
        <slot name="action" v-bind="{ record }"></slot>
      </template>
      <template #bodyCell="{ column, record }">
        <slot name="filterCell" v-bind="{ column, record }"></slot>
      </template>
    </BasicTable>
    <DeviceModal @register="registerModal" @saveOrUpdate="saveOrUpdateHandler" :showTab="showTab" :deviceType="deviceType" />
    <!-- <DeviceModal v-model:visible="modalVisible" @saveOrUpdate="saveOrUpdateHandler" @close-modal="closeModal" :showTab="showTab"  /> -->
  </div>
</template>

<script lang="ts" setup>
  //ts语法
  import { ref, provide, reactive, toRaw, defineExpose, watch } from 'vue';
  import { BasicTable, ActionItem, EditRecordRow, BasicColumn } from '/@/components/Table';
  import { useModal } from '/@/components/Modal';
  import DeviceModal from './DeviceModal.vue';
  // import { getToken } from '/@/utils/auth';
  // import { useGlobSetting } from '/@/hooks/setting';
  import { getTableHeaderColumns } from '/@/hooks/web/useWebColumns';
  import { useListPage } from '/@/hooks/system/useListPage';
  import { getPopupContainer } from '/@/utils';

  const props = defineProps({
    columnsType: {
      type: String,
      // required: true,
    },
    columns: {
      type: Array,
      // required: true,
      default: () => [],
    },
    searchFormSchema: {
      type: Array,
      default: () => [],
    },
    formSchema: {
      type: Array,
      required: true,
    },
    list: {
      type: Function,
      required: true,
    },
    getImportUrl: {
      type: String,
    },
    getExportUrl: {
      type: String,
    },
    deleteById: {
      type: Function,
      required: true,
    },
    batchDelete: {
      type: Function,
    },
    saveOrUpdate: {
      type: Function,
      required: true,
    },
    pointList: {
      type: Function,
    },
    showTab: {
      type: Boolean,
      default: false,
    },
    designScope: {
      type: String,
    },
    title: {
      type: String,
    },
    deviceType: {
      type: String,
    },
  });

  const emit = defineEmits(['submitSuccess', 'editHandler']);

  const isUpdate = ref(false);
  const record = reactive({});
  const formSchemaData = ref(props.formSchema);
  const deviceTypeId = ref('');
  const pageType = ref('');

  watch(
    () => props.formSchema,
    (val) => {
      formSchemaData.value = val;
    }
  );

  provide('formSchema', formSchemaData);
  provide('isUpdate', isUpdate);
  provide('formData', record);
  provide('deviceType', props.deviceType);
  // const glob = useGlobSetting();
  const [registerModal, { openModal, closeModal }] = useModal();

  const columnList = getTableHeaderColumns(props.columnsType);

  // 列表页面公共参数、方法
  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,
      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', devicekind: props.deviceType });
      },
    },
    exportConfig: {
      name: props.title,
      url: props.getExportUrl,
    },
    importConfig: {
      url: props.getImportUrl,
    },
  });

  const onExportXlsFn = () => {
    const formData = getForm().getFieldsValue();
    if (props.designScope == 'table-search-reset' && formData['devicetype']) {
      // 针对接口模糊查询的
      onExportXls({ ...formData, devicetype: formData['devicetype'] + '*' });
    } else {
      onExportXls();
    }
  };

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

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

  // const closeModalFn = () => {
  //   closeModal()
  // }
  /**
   * 新增事件
   */
  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,
      },
      false
    );
  }

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

  /**
   * 批量删除事件
   */
  async function batchHandleDelete() {
    doRequest(() => props.batchDelete({ ids: selectedRowKeys.value }));
  }
  /**
   * 查看
   */
  // function handleDetail(record) {
  //   iframeUrl.value = `${glob.uploadUrl}/sys/annountCement/show/${record.id}?token=${getToken()}`;
  //   openDetail(true);
  // }
  /**
   * 操作列定义
   * @param record
   */
  function getActions(record: EditRecordRow, column: BasicColumn): ActionItem[] {
    return [
      {
        label: '编辑',
        onClick: handleEdit.bind(null, record, column),
      },
      {
        label: '删除',
        popConfirm: {
          title: '是否确认删除',
          confirm: handleDelete.bind(null, record, column),
        },
      },
      // {
      //   label: '查看',
      //   onClick: handleDetail.bind(null, record),
      // },
    ];
  }

  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>