xiaotutongxue/frontend-pc/src/views/task/TaskFormModal.vue

<template>
  <a-modal v-model:visible="visible" :title="title" :width="640" :mask-closable="false"
    :ok-loading="submitting" @ok="confirm" @cancel="close">
    <a-form ref="formRef" :model="form" :rules="rules" layout="vertical">
      <a-row :gutter="16">
        <a-col :span="14">
          <a-form-item field="taskName" label="任务名称">
            <a-input v-model="form.taskName" placeholder="如 2026年9月机电专业认定材料收集"
              :max-length="200" allow-clear />
          </a-form-item>
        </a-col>
        <a-col :span="10">
          <a-form-item field="batchNo" label="批次号">
            <a-input v-model="form.batchNo" placeholder="如 202609" :max-length="8" allow-clear />
            <template #extra>
              <span class="task-form__hint">4~8 位数字，同时作为任务编码前缀</span>
            </template>
          </a-form-item>
        </a-col>

        <a-col :span="10">
          <a-form-item field="majorName" label="专业">
            <a-input v-model="form.majorName" placeholder="如 数控加工" :max-length="64" allow-clear />
          </a-form-item>
        </a-col>
        <a-col :span="7">
          <a-form-item field="jobName" label="报考工种">
            <a-input v-model="form.jobName" placeholder="可后补" :max-length="64" allow-clear />
          </a-form-item>
        </a-col>
        <a-col :span="7">
          <a-form-item field="jobLevel" label="报考等级">
            <a-input v-model="form.jobLevel" placeholder="可后补" :max-length="32" allow-clear />
          </a-form-item>
        </a-col>

        <a-col :span="12">
          <a-form-item field="startTime" label="填报开始">
            <a-date-picker v-model="form.startTime" value-format="YYYY-MM-DD" style="width: 100%" />
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item field="endTime" label="填报截止">
            <a-date-picker v-model="form.endTime" value-format="YYYY-MM-DD" style="width: 100%" />
            <template #extra>
              <span class="task-form__hint">只选日期时按当天 23:59:59 处理</span>
            </template>
          </a-form-item>
        </a-col>
      </a-row>

      <a-divider orientation="left">一期范围</a-divider>

      <a-row :gutter="16">
        <a-col :span="12">
          <a-form-item label="收集模式">
            <a-input model-value="学校收集" disabled />
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item label="认定类型">
            <a-input model-value="自主认定" disabled />
          </a-form-item>
        </a-col>
      </a-row>
      <a-alert type="info" :show-icon="false" class="task-form__scope">
        <template #title>
          一期只做 <strong>学校收集 + 自主认定</strong>。
          社会收集、社会评价、专项职业能力已后置二期，数据结构保留、界面暂不开放。
        </template>
      </a-alert>

      <a-divider orientation="left">命名规则</a-divider>

      <a-form-item field="namingTemplate" label="文件命名模板">
        <a-input v-model="form.namingTemplate" :max-length="256" allow-clear />
        <template #extra>
          <span class="task-form__hint">
            必须含 <code>{姓名}</code> <code>{证件号}</code> <code>{材料名}</code> ——
            缺了任一项，文件名就无法唯一归属到人。
          </span>
        </template>
      </a-form-item>

      <div class="task-form__vars">
        <span class="task-form__vars-label">插入变量</span>
        <a-space wrap size="mini">
          <a-button v-for="opt in namingVariableOptions" :key="opt.value" size="mini" type="outline"
            @click="appendVariable(opt.value)">
            {{ opt.label }}
          </a-button>
        </a-space>
      </div>

      <a-form-item label="预览（以「张同学 / 361029200912100010 / 身份证」为例）">
        <code class="task-form__preview">{{ namingPreview }}</code>
      </a-form-item>
    </a-form>
  </a-modal>
</template>

<script setup lang="ts">
import type { FormInstance } from '@arco-design/web-vue'
import type { TaskUpsertReq, TaskVO } from '@/apis/xt/task'
import { Message } from '@arco-design/web-vue'
import * as taskApi from '@/apis/xt/task'
import { DEFAULT_NAMING_TEMPLATE, NAMING_VARIABLES } from '@/apis/xt/task'

/**
 * 建 / 改任务弹窗。
 *
 * 三处刻意的设计：
 *   1. **命名模板带实时预览**：光看 `{姓名}-{证件号}-{材料名}` 很难想象最终长什么样，
 *      而它直接决定导出包里每个文件的名字。用样例数据渲染出来一眼就能判断。
 *   2. **收集模式与认定类型做成只读**：它们决定审核流与材料清单，
 *      一期也不启用其它取值。可编辑只会让人以为能改。
 *   3. **变量用按钮插入而不是让人手打**：手打 `{姓名}` 少一个大括号或写成 `{姓名 }`，
 *      服务端只会在发布时给一个 40020，而那时已经配了一堆别的东西。
 */
defineOptions({ name: 'TaskFormModal' })

const emit = defineEmits<{
  (e: 'save-success'): void
}>()
const visible = ref(false)
const submitting = ref(false)
const detailId = ref<number | null>(null)

const formRef = useTemplateRef('formRef')

const isEdit = computed(() => !!detailId.value)
const title = computed(() => (isEdit.value ? '修改任务' : '新建收集任务'))

/**
 * 表单自己的类型。
 *
 * 与 {@link TaskUpsertReq} 的差别只在 `jobName` / `jobLevel`：
 * 接口那边允许 `null`（表示"清空"），而 Arco 的 `a-input` 的 v-model 只接受
 * `string | undefined` —— 直接绑 `string | null | undefined` 会报 TS2322。
 * 界面上用空串表示"没填"，发给服务端前由 Service 的 `trimToNull` 转成 null。
 */
type TaskForm = Omit<TaskUpsertReq, 'jobName' | 'jobLevel'> & {
  jobName: string
  jobLevel: string
}

const getInitForm = (): TaskForm => ({
  taskName: '',
  collectMode: 1,
  batchNo: '',
  majorName: '',
  jobName: '',
  jobLevel: '',
  certType: 1,
  startTime: '',
  endTime: '',
  namingTemplate: DEFAULT_NAMING_TEMPLATE
})

const form = reactive(getInitForm())

const rules: FormInstance['rules'] = {
  taskName: [{ required: true, message: '请填写任务名称' }],
  batchNo: [
    { required: true, message: '请填写批次号' },
    { match: /^\d{4,8}$/, message: '批次号应为 4~8 位数字' }
  ],
  majorName: [{ required: true, message: '请填写专业' }],
  startTime: [{ required: true, message: '请选择填报开始时间' }],
  endTime: [
    { required: true, message: '请选择填报截止时间' },
    {
      validator: (value: string, callback: (error?: string) => void) => {
        if (value && form.startTime && value <= form.startTime) {
          callback('截止时间必须晚于开始时间')
          return
        }
        callback()
      }
    }
  ],
  namingTemplate: [{ required: true, message: '请填写命名模板' }]
}

/**
 * 预览时把 `{自定义字段.xxx}` 整体替换掉。
 *
 * 放在模块作用域而不是 computed 里：正则每次渲染都重新编译一遍是纯浪费，
 * 而且这条规则（e18e/prefer-static-regex）在项目里是开着的。
 */
const CUSTOM_FIELD_RE = /\{自定义字段\.[^}]*\}/g

/** 命名预览：把变量替换成样例值，让用户一眼看出最终文件名长什么样 */
const namingPreview = computed(() => {
  const sample: Record<string, string> = {
    姓名: '张同学',
    证件号: '361029200912100010',
    证件类型: '居民身份证',
    材料名: '身份证',
    班级: '24中技数控1班',
    专业: '数控加工',
    工种: '数控车工',
    等级: '四级',
    报名点: '示范职业学校',
    序号: '007',
    日期: '20260928',
    后缀: '.jpg'
  }
  let out = form.namingTemplate || ''
  for (const [k, v] of Object.entries(sample)) {
    out = out.replaceAll(`{${k}}`, v)
  }
  // 自定义字段在预览里没有真实值，用占位提示而不是留一个空
  out = out.replace(CUSTOM_FIELD_RE, '（自定义字段）')
  return out || '—'
})

/**
 * 变量按钮的文案。
 *
 * ⚠️ **不要在模板里拼花括号**（比如 `{{ '{' + v + '}' }}`）。
 * Vue 的插值解析器是靠找 `}}` 来收尾的，而模板里一旦出现内层的 `}` 与结尾的 `}}`
 * 相邻（eslint --fix 会把它"帮忙"改成模板字符串 `` `{${v}}` ``，正好制造这种情况），
 * 就会报 `Error parsing JavaScript expression: Unexpected token, expected "}"` ——
 * 而且这个错误**只在构建/编译时才出现**，编辑器里看不出问题。
 * 所以在 script 里算好，模板里只做纯取值。
 */
const namingVariableOptions = NAMING_VARIABLES.map((v) => ({ value: v, label: `{${v}}` }))

function appendVariable(v: string) {
  form.namingTemplate = `${form.namingTemplate ?? ''}{${v}}`
}

async function add() {
  detailId.value = null
  Object.assign(form, getInitForm())
  visible.value = true
}

function edit(row: TaskVO) {
  detailId.value = row.id
  Object.assign(form, getInitForm())
  form.taskName = row.taskName
  form.batchNo = row.batchNo ?? ''
  form.majorName = row.majorName ?? ''
  form.jobName = row.jobName ?? ''
  form.jobLevel = row.jobLevel ?? ''
  form.startTime = (row.startTime ?? '').slice(0, 10)
  form.endTime = (row.endTime ?? '').slice(0, 10)
  form.namingTemplate = row.namingTemplate ?? DEFAULT_NAMING_TEMPLATE
  visible.value = true
}

function close() {
  visible.value = false
}

async function confirm() {
  const valid = await formRef.value?.validate()
  if (valid) return false

  submitting.value = true
  try {
    const payload: TaskUpsertReq = {
      taskName: form.taskName.trim(),
      collectMode: 1,
      batchNo: (form.batchNo ?? '').trim(),
      majorName: form.majorName.trim(),
      jobName: form.jobName?.trim() || null,
      jobLevel: form.jobLevel?.trim() || null,
      certType: 1,
      startTime: form.startTime,
      // 只给日期时补上当天最后一秒，避免"截止日期当天 00:00 就截止了"
      endTime: form.endTime.length <= 10 ? `${form.endTime}T23:59:59` : form.endTime,
      namingTemplate: (form.namingTemplate ?? '').trim()
    }
    if (isEdit.value) {
      await taskApi.updateTask(detailId.value!, payload)
      Message.success('已保存')
    } else {
      const res = await taskApi.addTask(payload)
      Message.success(`任务已创建，编码 ${res.data?.taskCode ?? ''}（草稿）`)
    }
    visible.value = false
    emit('save-success')
    return true
  } finally {
    submitting.value = false
  }
}

defineExpose({ add, edit })
</script>

<style lang="scss" scoped>
.task-form {
  &__hint {
    font-size: 12px;
    line-height: 1.7;
    color: var(--color-text-3);

    code {
      padding: 0 3px;
      font-family: var(--font-mono, ui-monospace, monospace);
      background: var(--color-fill-2);
      border-radius: 2px;
    }
  }

  &__scope {
    margin-top: -6px;
    line-height: 1.8;
  }

  &__vars {
    display: flex;
    gap: 10px;
    align-items: baseline;
    margin: -8px 0 18px;
  }

  &__vars-label {
    flex: none;
    font-size: 12px;
    color: var(--color-text-3);
  }

  &__preview {
    display: block;
    width: 100%;
    padding: 6px 10px;
    font-family: var(--font-mono, ui-monospace, monospace);
    font-size: 13px;
    color: var(--color-text-1);
    word-break: break-all;
    background: var(--color-fill-2);
    border-radius: 4px;
  }
}
</style>