index.vue 2.86 KB
<template>
  <div>
    <BasicTable :clickToRowSelect="false" @register="registerTable">
      <template #toolbar>
        <Authority value="api:yt:product:category:post">
          <Button type="primary" >
            {{ t('inspection.inspectionRecord.createRecordText') }}
          </Button>
        </Authority>
      </template>
      <template #recordResult="{ record }">
        <Tag
          :color="record.recordResult ? 'green' : 'red'"
          class="ml-2"
        >
          {{record.recordResult ? '正常' : '异常'}}
        </Tag>
      </template>
      <template #action="{ record }">
        <TableAction
          :actions="[
            {
              label: t('common.editText'),
              auth: 'api:yt:product:category:update',
              icon: 'clarity:note-edit-line',
              // onClick: handleEdit.bind(null, record),
            },
            {
              label: t('common.delText'),
              auth: 'api:yt:product:category:delete',
              icon: 'ant-design:delete-outlined',
              color: 'error',
              popConfirm: {
                title: t('common.deleteConfirmText'),
                confirm: handleDelete.bind(null, record),
              },
            },
          ]"
        />
      </template>
    </BasicTable>
  </div>
</template>
<script setup lang="ts">
  import { BasicTable, useTable, TableAction } from '/@/components/Table';
  import { getInspectionRecordList, deleteInsRecord } from '/@/api/inspection/inspectionRecord';
  import { columns, searchFormSchema } from './index';
  import { useI18n } from '/@/hooks/web/useI18n';
  import { Button, Tag } from 'ant-design-vue';
  import {useMessage} from "/@/hooks/web/useMessage";
  const { t } = useI18n();
  const { createMessage } = useMessage();

  const [
    registerTable,
    { reload, setLoading, getSelectRowKeys, setSelectedRowKeys, getRowSelection },
  ] = useTable({
    title: t('inspection.inspectionRecord.listText'),
    api: getInspectionRecordList,
    columns,
    formConfig: {
      labelWidth: 100,
      schemas: searchFormSchema,
    },
    immediate: true,
    useSearchForm: true,
    showTableSetting: true,
    bordered: true,
    showIndexColumn: false,
    clickToRowSelect: false,
    rowKey: 'id',
    actionColumn: {
      width: 230,
      title: t('common.actionText'),
      slots: { customRender: 'action' },
      fixed: 'right',
    },
    rowSelection: {
      type: 'checkbox',
      getCheckboxProps: (record: any) => {},
    },
  });

  const handleDelete = async (record?: any) => {
    let id = record.id;
    try {
      setLoading(true);
      await deleteInsRecord({ id });
      createMessage.success(t('common.deleteSuccessText'));
      handleReload();
    } catch (error) {
      throw error;
    } finally {
      setLoading(false);
    }
  };

  const handleReload = () => {
    setSelectedRowKeys([]);
    reload();
  };
</script>