fix(table): 彻底修复column.slots已废弃的antd报错, 所有用到的demo页修改为antd 3.x v-slot:header...

Wit〆苗大

2022-07-05 de7279399d443926ddce90395bb19cd471d48e80

 src/views/sys/error-log/index.vue

@@ -1,9 +1,9 @@
<template>
  <div class="p-4">
    <template v-for="src in imgListRef" :key="src">
      <img :src="src" v-show="false" />
    <template v-for="src in imgList" :key="src">
      <img :src="src" v-show="false" alt="" />
    </template>
    <DetailModal :info="rowInfoRef" @register="registerModal" />
    <DetailModal :info="rowInfo" @register="registerModal" />
    <BasicTable @register="register" class="error-handle-table">
      <template #toolbar>
        <a-button @click="fireVueError" type="primary">
@@ -16,101 +16,82 @@
          {{ t('sys.errorLog.fireAjaxError') }}
        </a-button>
      </template>
      <template #action="{ record }">
        <TableAction
          :actions="[
            { label: t('sys.errorLog.tableActionDesc'), onClick: handleDetail.bind(null, record) },
          ]"
        />
      <template #bodyCell="{ column, record }">
        <template v-if="column.key === 'action'">
          <TableAction
            :actions="[
              {
                label: t('sys.errorLog.tableActionDesc'),
                onClick: handleDetail.bind(null, record),
              },
            ]"
          />
        </template>
      </template>
    </BasicTable>
  </div>
</template>

<script lang="ts">
  import { defineComponent, watch, ref, nextTick } from 'vue';

<script lang="ts" setup>
  import type { ErrorLogInfo } from '/#/store';
  import { watch, ref, nextTick } from 'vue';
  import DetailModal from './DetailModal.vue';
  import { BasicTable, useTable, TableAction } from '/@/components/Table/index';

  import { useModal } from '/@/components/Modal/index';
  import { useModal } from '/@/components/Modal';
  import { useMessage } from '/@/hooks/web/useMessage';
  import { useI18n } from 'vue-i18n';

  import { errorStore, ErrorInfo } from '/@/store/modules/error';

  import { useI18n } from '/@/hooks/web/useI18n';
  import { useErrorLogStore } from '/@/store/modules/errorLog';
  import { fireErrorApi } from '/@/api/demo/error';

  import { getColumns } from './data';

  import { cloneDeep } from 'lodash-es';
  import { isDevMode } from '/@/utils/env';

  export default defineComponent({
    name: 'ErrorHandler',
    components: { DetailModal, BasicTable, TableAction },
    setup() {
      const rowInfoRef = ref<ErrorInfo>();
      const imgListRef = ref<string[]>([]);
  const rowInfo = ref<ErrorLogInfo>();
  const imgList = ref<string[]>([]);

      const { t } = useI18n();

      const [register, { setTableData }] = useTable({
        title: t('sys.errorLog.tableTitle'),
        columns: getColumns(),
        actionColumn: {
          width: 80,
          title: 'Action',
          dataIndex: 'action',
          slots: { customRender: 'action' },
        },
      });
      const [registerModal, { openModal }] = useModal();

      watch(
        () => errorStore.getErrorInfoState,
        (list) => {
          nextTick(() => {
            setTableData(cloneDeep(list));
          });
        },
        {
          immediate: true,
        }
      );
      const { createMessage } = useMessage();
      if (isDevMode()) {
        createMessage.info(t('sys.errorLog.enableMessage'));
      }
      // 查看详情
      function handleDetail(row: ErrorInfo) {
        rowInfoRef.value = row;
        openModal(true);
      }

      function fireVueError() {
        throw new Error('fire vue error!');
      }

      function fireResourceError() {
        imgListRef.value.push(`${new Date().getTime()}.png`);
      }

      async function fireAjaxError() {
        await fireErrorApi();
      }

      return {
        register,
        registerModal,
        handleDetail,
        fireVueError,
        fireResourceError,
        fireAjaxError,
        imgListRef,
        rowInfoRef,
        t,
      };
  const { t } = useI18n();
  const errorLogStore = useErrorLogStore();
  const [register, { setTableData }] = useTable({
    title: t('sys.errorLog.tableTitle'),
    columns: getColumns(),
    actionColumn: {
      width: 80,
      title: 'Action',
      dataIndex: 'action',
      // slots: { customRender: 'action' },
    },
  });
  const [registerModal, { openModal }] = useModal();

  watch(
    () => errorLogStore.getErrorLogInfoList,
    (list) => {
      nextTick(() => {
        setTableData(cloneDeep(list));
      });
    },
    {
      immediate: true,
    },
  );
  const { createMessage } = useMessage();
  if (import.meta.env.DEV) {
    createMessage.info(t('sys.errorLog.enableMessage'));
  }
  // 查看详情
  function handleDetail(row: ErrorLogInfo) {
    rowInfo.value = row;
    openModal(true);
  }

  function fireVueError() {
    throw new Error('fire vue error!');
  }

  function fireResourceError() {
    imgList.value.push(`${new Date().getTime()}.png`);
  }

  async function fireAjaxError() {
    await fireErrorApi();
  }
</script>