~tanyong/JNPF_ITMS_Web.git

<script lang="ts" setup>
import type { ActionItem, BasicColumn } from '@jnpf/ui/vxeTable';
 
import type { CourseItem } from './types';
 
import { onMounted, ref } from 'vue';
 
import { useMessage } from '@jnpf/hooks';
import { useModal } from '@jnpf/ui/modal';
import { BasicVxeTable, TableAction, useVxeTable } from '@jnpf/ui/vxeTable';
 
import { deleteCourse, getCourseList, setCourseEnabled } from '#/api/x/tms/course';
import { useBaseStore } from '#/store';
import {
  TMS_DIC,
  TMS_DIC_FIELD_NAMES,
  labelOfDic,
  loadTmsDic,
  type TmsDicOpt,
} from '#/views/x/tms/shared/dic';
 
import Form from './Form.vue';
 
defineOptions({ name: 'TmsCourse' });
 
const { createMessage } = useMessage();
const baseStore = useBaseStore();
const [registerForm, { openModal: openFormModal }] = useModal();
 
const categoryOpts = ref<TmsDicOpt[]>([]);
const trainModeOpts = ref<TmsDicOpt[]>([]);
const evalModeOpts = ref<TmsDicOpt[]>([]);
const enableOpts = ref<TmsDicOpt[]>([]);
 
const columns: BasicColumn[] = [
  { title: '课程编号', dataIndex: 'courseNo', width: 140 },
  { title: '课程名称', dataIndex: 'courseName', minWidth: 180 },
  {
    title: '课程分类',
    dataIndex: 'category',
    width: 100,
    customRender: ({ record }) => labelOfDic(categoryOpts.value, (record as CourseItem).category),
  },
  {
    title: '培训方式',
    dataIndex: 'trainMode',
    width: 110,
    customRender: ({ record }) => labelOfDic(trainModeOpts.value, (record as CourseItem).trainMode),
  },
  {
    title: '考核方式',
    dataIndex: 'evalMode',
    width: 110,
    customRender: ({ record }) => labelOfDic(evalModeOpts.value, (record as CourseItem).evalMode),
  },
  {
    title: '关联考核试卷',
    dataIndex: 'paperName',
    minWidth: 180,
    customRender: ({ record }) => (record as CourseItem).paperName || '-',
  },
  {
    title: '学时',
    dataIndex: 'hours',
    width: 80,
    align: 'center',
    customRender: ({ record }) => {
      const h = (record as CourseItem).hours;
      return h === null || h === undefined || h === ('' as any) ? '-' : h;
    },
  },
  {
    title: '状态',
    dataIndex: 'enabled',
    width: 90,
    align: 'center',
    slots: { default: 'enabled' },
  },
  { title: '备注', dataIndex: 'remark', minWidth: 140 },
];
 
const [registerTable, { reload, getForm }] = useVxeTable({
  api: fetchList,
  columns,
  immediate: false,
  rowKey: 'id',
  useSearchForm: true,
  formConfig: {
    baseColProps: { span: 6 },
    compact: true,
    schemas: [
      {
        field: 'keyword',
        label: '关键词',
        component: 'Input',
        componentProps: { placeholder: '编号/名称/试卷', submitOnPressEnter: true },
      },
      {
        field: 'category',
        label: '课程分类',
        component: 'Select',
        componentProps: {
          allowClear: true,
          placeholder: '请选择',
          options: categoryOpts.value,
          fieldNames: TMS_DIC_FIELD_NAMES,
        },
      },
      {
        field: 'trainMode',
        label: '培训方式',
        component: 'Select',
        componentProps: {
          allowClear: true,
          placeholder: '请选择',
          options: trainModeOpts.value,
          fieldNames: TMS_DIC_FIELD_NAMES,
        },
      },
      {
        field: 'evalMode',
        label: '考核方式',
        component: 'Select',
        componentProps: {
          allowClear: true,
          placeholder: '请选择',
          options: evalModeOpts.value,
          fieldNames: TMS_DIC_FIELD_NAMES,
        },
      },
      {
        field: 'enabled',
        label: '状态',
        component: 'Select',
        componentProps: {
          allowClear: true,
          placeholder: '请选择',
          options: enableOpts.value,
          fieldNames: TMS_DIC_FIELD_NAMES,
        },
      },
    ],
  },
  actionColumn: {
    width: 180,
    title: '操作',
    dataIndex: 'action',
    fixed: 'right',
  },
});
 
onMounted(async () => {
  const [category, trainMode, evalMode, enable] = await Promise.all([
    loadTmsDic(baseStore, TMS_DIC.courseCategory),
    loadTmsDic(baseStore, TMS_DIC.trainMode),
    loadTmsDic(baseStore, TMS_DIC.evalMode),
    loadTmsDic(baseStore, TMS_DIC.enableStatus),
  ]);
  categoryOpts.value = category;
  trainModeOpts.value = trainMode;
  evalModeOpts.value = evalMode;
  enableOpts.value = enable;
  getForm()?.updateSchema?.([
    {
      field: 'category',
      componentProps: {
        allowClear: true,
        placeholder: '请选择',
        options: category,
        fieldNames: TMS_DIC_FIELD_NAMES,
      },
    },
    {
      field: 'trainMode',
      componentProps: {
        allowClear: true,
        placeholder: '请选择',
        options: trainMode,
        fieldNames: TMS_DIC_FIELD_NAMES,
      },
    },
    {
      field: 'evalMode',
      componentProps: {
        allowClear: true,
        placeholder: '请选择',
        options: evalMode,
        fieldNames: TMS_DIC_FIELD_NAMES,
      },
    },
    {
      field: 'enabled',
      componentProps: {
        allowClear: true,
        placeholder: '请选择',
        options: enable,
        fieldNames: TMS_DIC_FIELD_NAMES,
      },
    },
  ]);
  reload();
});
 
async function fetchList(params: Record<string, any>) {
  return { data: await getCourseList(params) };
}
 
function handleAdd() {
  openFormModal(true, {});
}
 
function handleEdit(record: CourseItem) {
  openFormModal(true, { id: record.id });
}
 
async function handleToggleEnabled(record: CourseItem) {
  const next = record.enabled === '1' ? '0' : '1';
  const action = next === '1' ? '启用' : '停用';
  try {
    await setCourseEnabled(record.id, next);
    createMessage.success(`已${action}`);
    reload();
  } catch (e: any) {
    createMessage.error(e?.message || `${action}失败`);
  }
}
 
async function handleDelete(record: CourseItem) {
  if (record.enabled !== '0') {
    createMessage.warning('请先停用后再删除');
    return;
  }
  try {
    await deleteCourse(record.id);
    createMessage.success('删除成功');
    reload();
  } catch (e: any) {
    createMessage.error(e?.message || '删除失败');
  }
}
 
function getTableActions(record: CourseItem): ActionItem[] {
  const enableLabel = record.enabled === '1' ? '停用' : '启用';
  const actions: ActionItem[] = [
    { label: '编辑', onClick: handleEdit.bind(null, record) },
    {
      label: enableLabel,
      modelConfirm: {
        content: `确定${enableLabel}培训课程「${record.courseName}」吗？`,
        onOk: handleToggleEnabled.bind(null, record),
      },
    },
  ];
  if (record.enabled === '0') {
    actions.push({
      label: '删除',
      color: 'error',
      modelConfirm: {
        content: `确定删除培训课程「${record.courseName}」吗？`,
        onOk: handleDelete.bind(null, record),
      },
    });
  }
  return actions;
}
</script>
 
<template>
  <div class="jnpf-content-wrapper">
    <div class="jnpf-content-wrapper-center">
      <div class="jnpf-content-wrapper-content">
        <BasicVxeTable @register="registerTable">
          <template #tableTitle>
            <a-button type="primary" pre-icon="icon-ym icon-ym-btn-add" @click="handleAdd">新增</a-button>
          </template>
          <template #enabled="{ record }">
            <a-tag :color="record.enabled === '1' ? 'success' : 'default'">
              {{ labelOfDic(enableOpts, record.enabled) }}
            </a-tag>
          </template>
          <template #action="{ record }">
            <TableAction :actions="getTableActions(record)" />
          </template>
        </BasicVxeTable>
      </div>
    </div>
    <Form @register="registerForm" @reload="reload" />
  </div>
</template>