~tanyong/bositao_web.git

<script lang="ts" setup>
import type { ActionItem, BasicColumn } from '@jnpf/ui/vxeTable';
 
import type { PersonTaskItem } from './types';
 
import { onMounted, ref } from 'vue';
import { useRouter } from 'vue-router';
 
import { useMessage } from '@jnpf/hooks';
import { BasicVxeTable, TableAction, useVxeTable } from '@jnpf/ui/vxeTable';
 
import { getMyPersonTaskList, signPersonTask } from '#/api/x/tms/personTask';
import { TMS_DIC_FIELD_NAMES } from '#/views/x/tms/shared/dic';
import QuizPopup from '#/views/x/tms/shared/QuizPopup.vue';
import { TMS_BTN } from '#/views/x/tms/shared/ui';
 
import {
  CATEGORY_OPTIONS,
  EVAL_MODE_OPTIONS,
  PASS_FLAG_QUERY_OPTIONS,
  PERSON_STATUS_OPTIONS,
  TRAIN_MODE_OPTIONS,
  YES_NO_OPTIONS,
  labelOfEvalMode,
  labelOfPersonStatus,
  labelOfTrainMode,
  labelOfYesNo,
  loadPersonTaskDics,
} from './constants';
 
import '#/views/x/tms/shared/page.css';
 
defineOptions({ name: 'TmsPersonTask' });
 
const router = useRouter();
const { createMessage } = useMessage();
const signingId = ref<string>();
const quizOpen = ref(false);
const quizPersonTaskId = ref<string>();
const quizQuestions = ref<Array<{ id?: string; sortNo?: number; question?: string }>>([]);
 
const columns: BasicColumn[] = [
  { title: '培训编号', dataIndex: 'taskNo', width: 140 },
  { title: '培训主题', dataIndex: 'subject', minWidth: 200 },
  {
    title: '培训方式',
    dataIndex: 'trainMode',
    width: 110,
    customRender: ({ record }) => labelOfTrainMode((record as PersonTaskItem).trainMode),
  },
  { title: '开始时间', dataIndex: 'startTime', width: 170 },
  { title: '结束时间', dataIndex: 'endTime', width: 170 },
  {
    title: '状态',
    dataIndex: 'bizStatus',
    width: 100,
    customRender: ({ record }) => labelOfPersonStatus((record as PersonTaskItem).bizStatus),
  },
  { title: '学习进度', dataIndex: 'learnStatus', width: 100 },
  {
    title: '是否可考',
    dataIndex: 'canExam',
    width: 100,
    customRender: ({ record }) => labelOfYesNo((record as PersonTaskItem).canExam),
  },
  {
    title: '考核方式',
    dataIndex: 'evalMode',
    width: 110,
    customRender: ({ record }) => labelOfEvalMode((record as PersonTaskItem).evalMode),
  },
];
 
const [registerTable, { reload, getForm }] = useVxeTable({
  api: fetchList,
  columns,
  immediate: false,
  rowKey: 'id',
  useSearchForm: true,
  formConfig: {
    baseColProps: { span: 6 },
    compact: true,
    showAdvancedButton: true,
    alwaysShowLines: 1,
    // 超过 2 行且不超过该行数时保持默认折叠（false）；设太小会在首屏被强制展开
    autoAdvancedLine: 4,
    schemas: [
      {
        field: 'keyword',
        label: '关键词',
        component: 'Input',
        componentProps: { placeholder: '编号/主题', submitOnPressEnter: true },
      },
      {
        field: 'taskNo',
        label: '培训编号',
        component: 'Input',
        componentProps: { placeholder: '请输入培训编号', submitOnPressEnter: true },
      },
      {
        field: 'bizStatus',
        label: '状态',
        component: 'Select',
        componentProps: {
          allowClear: true,
          placeholder: '请选择',
          options: PERSON_STATUS_OPTIONS.value,
          fieldNames: TMS_DIC_FIELD_NAMES,
        },
      },
      {
        field: 'trainMode',
        label: '培训方式',
        component: 'Select',
        componentProps: {
          allowClear: true,
          placeholder: '请选择',
          options: TRAIN_MODE_OPTIONS.value,
          fieldNames: TMS_DIC_FIELD_NAMES,
        },
      },
      {
        field: 'evalMode',
        label: '考核方式',
        component: 'Select',
        componentProps: {
          allowClear: true,
          placeholder: '请选择',
          options: EVAL_MODE_OPTIONS.value,
          fieldNames: TMS_DIC_FIELD_NAMES,
        },
      },
      {
        field: 'category',
        label: '培训分类',
        component: 'Select',
        componentProps: {
          allowClear: true,
          placeholder: '请选择',
          options: CATEGORY_OPTIONS.value,
          fieldNames: TMS_DIC_FIELD_NAMES,
        },
      },
      {
        field: 'signed',
        label: '是否签到',
        component: 'Select',
        componentProps: {
          allowClear: true,
          placeholder: '请选择',
          options: YES_NO_OPTIONS.value,
          fieldNames: TMS_DIC_FIELD_NAMES,
        },
      },
      {
        field: 'canExam',
        label: '是否可考',
        component: 'Select',
        componentProps: {
          allowClear: true,
          placeholder: '请选择',
          options: YES_NO_OPTIONS.value,
          fieldNames: TMS_DIC_FIELD_NAMES,
        },
      },
      {
        field: 'passFlag',
        label: '是否合格',
        component: 'Select',
        componentProps: {
          allowClear: true,
          placeholder: '请选择',
          options: PASS_FLAG_QUERY_OPTIONS.value,
          fieldNames: TMS_DIC_FIELD_NAMES,
        },
      },
      {
        field: 'startTimeRange',
        label: '开始时间',
        component: 'DateRange',
        componentProps: {
          format: 'YYYY-MM-DD',
          placeholder: ['开始', '结束'],
        },
      },
    ],
  },
  actionColumn: {
    width: 220,
    title: '操作',
    dataIndex: 'action',
    fixed: 'right',
  },
});
 
onMounted(async () => {
  await loadPersonTaskDics();
  getForm()?.updateSchema?.([
    {
      field: 'bizStatus',
      componentProps: {
        allowClear: true,
        placeholder: '请选择',
        options: PERSON_STATUS_OPTIONS.value,
        fieldNames: TMS_DIC_FIELD_NAMES,
      },
    },
    {
      field: 'trainMode',
      componentProps: {
        allowClear: true,
        placeholder: '请选择',
        options: TRAIN_MODE_OPTIONS.value,
        fieldNames: TMS_DIC_FIELD_NAMES,
      },
    },
    {
      field: 'evalMode',
      componentProps: {
        allowClear: true,
        placeholder: '请选择',
        options: EVAL_MODE_OPTIONS.value,
        fieldNames: TMS_DIC_FIELD_NAMES,
      },
    },
    {
      field: 'category',
      componentProps: {
        allowClear: true,
        placeholder: '请选择',
        options: CATEGORY_OPTIONS.value,
        fieldNames: TMS_DIC_FIELD_NAMES,
      },
    },
    {
      field: 'signed',
      componentProps: {
        allowClear: true,
        placeholder: '请选择',
        options: YES_NO_OPTIONS.value,
        fieldNames: TMS_DIC_FIELD_NAMES,
      },
    },
    {
      field: 'canExam',
      componentProps: {
        allowClear: true,
        placeholder: '请选择',
        options: YES_NO_OPTIONS.value,
        fieldNames: TMS_DIC_FIELD_NAMES,
      },
    },
    {
      field: 'passFlag',
      componentProps: {
        allowClear: true,
        placeholder: '请选择',
        options: PASS_FLAG_QUERY_OPTIONS.value,
        fieldNames: TMS_DIC_FIELD_NAMES,
      },
    },
  ]);
  reload();
});
 
async function fetchList(params: Record<string, any>) {
  const query = { ...params };
  const startRange = query.startTimeRange;
  if (Array.isArray(startRange) && startRange.length === 2) {
    query.startTimeFrom = startRange[0];
    query.startTimeTo = startRange[1];
  }
  delete query.startTimeRange;
  const page = await getMyPersonTaskList(query);
  return {
    data: {
      list: Array.isArray(page?.list) ? page.list : [],
      pagination: page?.pagination || { total: 0 },
    },
  };
}
 
function isClosedStatus(status?: string) {
  return status === 'cancelled' || status === 'expired';
}
 
function isSigned(record: PersonTaskItem) {
  return Boolean(record.signed || record.signTime);
}
 
function canEnterLearn(record: PersonTaskItem) {
  if (isClosedStatus(record.bizStatus)) return false;
  return isSigned(record);
}
 
function handleView(record: PersonTaskItem) {
  router.push(`/tms/personTask/detail/${record.id}`);
}
 
async function handleSign(record: PersonTaskItem) {
  if (!record?.id || !record.canSign || signingId.value) return;
  signingId.value = record.id;
  try {
    const result = await signPersonTask(record.id);
    createMessage.success(result.message || '签到成功');
    if (result.needQuiz && result.quizQuestions?.length) {
      quizPersonTaskId.value = result.personTaskId || record.id;
      quizQuestions.value = result.quizQuestions;
      quizOpen.value = true;
    }
    reload();
  } catch (e: any) {
    createMessage.error(e?.message || '签到失败');
  } finally {
    signingId.value = undefined;
  }
}
 
function onQuizDone() {
  reload();
}
 
function handleLearn(record: PersonTaskItem) {
  if (isClosedStatus(record.bizStatus)) {
    createMessage.warning(
      record.bizStatus === 'cancelled' ? '任务已取消，无法学习' : '任务已过期，无法学习',
    );
    return;
  }
  if (!isSigned(record)) {
    return;
  }
  router.push(`/tms/personTask/learn/${record.id}`);
}
 
function handleExamHint(record: PersonTaskItem) {
  if (record.canExam) {
    router.push(`/tms/personTask/learn/${record.id}`);
    return;
  }
  createMessage.info(record.examTip || '当前暂不可考试');
}
 
function getTableActions(record: PersonTaskItem): ActionItem[] {
  const actions: ActionItem[] = [{ label: TMS_BTN.detail, onClick: handleView.bind(null, record) }];
  if (record.canSign) {
    actions.push({
      label: TMS_BTN.sign,
      onClick: handleSign.bind(null, record),
      loading: signingId.value === record.id,
    });
  }
  if (canEnterLearn(record)) {
    actions.push({ label: TMS_BTN.learn, onClick: handleLearn.bind(null, record) });
  }
  if (record.canExam) {
    actions.push({
      label: record.passFlag === '0' || record.passFlag === 'fail' ? TMS_BTN.retake : TMS_BTN.exam,
      onClick: handleExamHint.bind(null, record),
    });
  } else if (canEnterLearn(record) && record.examTip) {
    actions.push({
      label: TMS_BTN.exam,
      disabled: true,
      tooltip: record.examTip,
    });
  }
  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>
            <div>
              <div class="tms-page-header__title">个人培训任务</div>
              <div class="tms-page-header__sub">先签到，再学习教材；可考时操作列进入考试。</div>
            </div>
          </template>
          <template #action="{ record }">
            <TableAction :actions="getTableActions(record)" />
          </template>
        </BasicVxeTable>
      </div>
    </div>
 
    <QuizPopup
      v-model:open="quizOpen"
      :person-task-id="quizPersonTaskId"
      :questions="quizQuestions"
      @done="onQuizDone"
    />
  </div>
</template>