feat(tms): 完成课程考试自测等页面与接口对接

liuyu

22 小时以前 93c133349a5ccd7a328371fa113dce69d5611f21

 apps/jnpf-web-apps-main/src/views/x/tms/course/index.vue

@@ -3,28 +3,34 @@

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';
import {
  CATEGORY_OPTIONS,
  ENABLE_OPTIONS,
  EVAL_MODE_OPTIONS,
  TRAIN_MODE_OPTIONS,
  labelOfCategory,
  labelOfEnabled,
  labelOfEvalMode,
  labelOfTrainMode,
} from './constants';

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 },
@@ -33,19 +39,19 @@
    title: '课程分类',
    dataIndex: 'category',
    width: 100,
    customRender: ({ record }) => labelOfCategory((record as CourseItem).category),
    customRender: ({ record }) => labelOfDic(categoryOpts.value, (record as CourseItem).category),
  },
  {
    title: '培训方式',
    dataIndex: 'trainMode',
    width: 110,
    customRender: ({ record }) => labelOfTrainMode((record as CourseItem).trainMode),
    customRender: ({ record }) => labelOfDic(trainModeOpts.value, (record as CourseItem).trainMode),
  },
  {
    title: '考核方式',
    dataIndex: 'evalMode',
    width: 110,
    customRender: ({ record }) => labelOfEvalMode((record as CourseItem).evalMode),
    customRender: ({ record }) => labelOfDic(evalModeOpts.value, (record as CourseItem).evalMode),
  },
  {
    title: '关联考核试卷',
@@ -73,10 +79,10 @@
  { title: '备注', dataIndex: 'remark', minWidth: 140 },
];

const [registerTable, { reload }] = useVxeTable({
const [registerTable, { reload, getForm }] = useVxeTable({
  api: fetchList,
  columns,
  immediate: true,
  immediate: false,
  rowKey: 'id',
  useSearchForm: true,
  formConfig: {
@@ -96,7 +102,8 @@
        componentProps: {
          allowClear: true,
          placeholder: '请选择',
          options: CATEGORY_OPTIONS,
          options: categoryOpts.value,
          fieldNames: TMS_DIC_FIELD_NAMES,
        },
      },
      {
@@ -106,7 +113,8 @@
        componentProps: {
          allowClear: true,
          placeholder: '请选择',
          options: TRAIN_MODE_OPTIONS,
          options: trainModeOpts.value,
          fieldNames: TMS_DIC_FIELD_NAMES,
        },
      },
      {
@@ -116,7 +124,8 @@
        componentProps: {
          allowClear: true,
          placeholder: '请选择',
          options: EVAL_MODE_OPTIONS,
          options: evalModeOpts.value,
          fieldNames: TMS_DIC_FIELD_NAMES,
        },
      },
      {
@@ -126,7 +135,8 @@
        componentProps: {
          allowClear: true,
          placeholder: '请选择',
          options: ENABLE_OPTIONS,
          options: enableOpts.value,
          fieldNames: TMS_DIC_FIELD_NAMES,
        },
      },
    ],
@@ -137,6 +147,58 @@
    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>) {
@@ -164,6 +226,10 @@
}

async function handleDelete(record: CourseItem) {
  if (record.enabled !== '0') {
    createMessage.warning('请先停用后再删除');
    return;
  }
  try {
    await deleteCourse(record.id);
    createMessage.success('删除成功');
@@ -175,7 +241,7 @@

function getTableActions(record: CourseItem): ActionItem[] {
  const enableLabel = record.enabled === '1' ? '停用' : '启用';
  return [
  const actions: ActionItem[] = [
    { label: '编辑', onClick: handleEdit.bind(null, record) },
    {
      label: enableLabel,
@@ -184,15 +250,18 @@
        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>

@@ -206,7 +275,7 @@
          </template>
          <template #enabled="{ record }">
            <a-tag :color="record.enabled === '1' ? 'success' : 'default'">
              {{ labelOfEnabled(record.enabled) }}
              {{ labelOfDic(enableOpts, record.enabled) }}
            </a-tag>
          </template>
          <template #action="{ record }">