index.vue 2.87 KB
<template>
  <div>
    <BasicTable :clickToRowSelect="false" @register="registerTable">
      <template #toolbar>
        <Authority value="api:yt:product:category:post">
          <Button type="primary" >
            {{ t('inspection.serviceRecord.createCategoryText') }}
          </Button>
        </Authority>
      </template>
      <template #preserveStatus="{ record }">
        <Tag
          :color="
            record.status == 'INCOMPLETE'
              ? 'red': record.status == 'COMPLETED'
              ? 'green': 'yellow'
          "
          class="ml-2"
        >
          {{ t(`inspection.serviceRecord.${record.preserveStatus}`) }}
        </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 { getServiceRecordList, deleteServeRecord } from '/@/api/inspection/serviceRecord';
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.serviceRecord.listText'),
  api: getServiceRecordList,
  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 deleteServeRecord({ id });
    createMessage.success(t('common.deleteSuccessText'));
    handleReload();
  } catch (error) {
    throw error;
  } finally {
    setLoading(false);
  }
};

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

</script>