besure_web/src/views/mes/zjTask/ZjTaskForm.vue

<template>
  <Dialog :title="dialogTitle" v-model="dialogVisible">
    <el-form ref="formRef" :model="formData" :rules="formRules" label-width="100px" v-loading="formLoading">
      <el-form-item label="单号" prop="code">
        <el-input v-model="formData.code" placeholder="请输入单号" />
      </el-form-item>
      <el-form-item label="质检分类" prop="type">
        <el-select v-model="formData.type" clearable filterable placeholder="请选择质检分类">
          <el-option
v-for="dict in getStrDictOptions('mes_zj_task_type')" :key="dict.value" :label="dict.label"
            :value="dict.value" />
        </el-select>
      </el-form-item>
      <el-form-item label="检验方案" prop="schemaId">
        <el-row :gutter="8" class="w-full">
          <el-col :span="22">
            <el-input v-model="formData.schemaName" placeholder="请选择检验方案" readonly />
          </el-col>
          <el-col :span="2" class="text-right">
            <el-button type="primary" @click="openSchemaDialog">选择</el-button>
          </el-col>
        </el-row>
      </el-form-item>
      <el-form-item label="工单" prop="ticket">
        <el-input v-model="formData.ticket" placeholder="请输入工单" />
      </el-form-item>
      <el-form-item label="工序" prop="orgType">
        <el-select v-model="formData.orgType" clearable placeholder="请选择工序">
          <el-option v-for="item in orgTypeOptions" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>
      </el-form-item>
      <el-form-item label="备注" prop="remark">
        <el-input v-model="formData.remark" placeholder="请输入备注" />
      </el-form-item>
      <el-form-item label="负责人" prop="managerId">
        <el-select
          v-model="formData.managerId"
          clearable
          filterable
          placeholder="请选择负责人"
          @change="handleManagerChange"
        >
          <el-option
            v-for="item in userList"
            :key="item.id"
            :label="item.nickname"
            :value="item.id"
          />
        </el-select>
      </el-form-item>
    </el-form>
    <template #footer>
      <el-button @click="submitForm" type="primary" :disabled="formLoading">确 定</el-button>
      <el-button @click="dialogVisible = false">取 消</el-button>
    </template>
  </Dialog>
  <el-dialog v-model="schemaDialogVisible" title="选择检验方案" width="1200px" draggable>
    <el-table :data="schemaList" v-loading="schemaLoading" height="400px" @row-click="handleSchemaRowClick">
      <el-table-column width="60">
        <template #default="scope">
          <el-radio :label="scope.row.id" v-model="selectedSchemaId">
            <span></span>
          </el-radio>
        </template>
      </el-table-column>
      <el-table-column type="index" label="序号" width="80" />
      <el-table-column label="名称" prop="name" />
      <el-table-column label="类型" prop="type">
        <template #default="scope">
          <dict-tag type="mes_zj_schema_type" :value="scope.row.type" />
        </template>
      </el-table-column>
      <el-table-column label="抽检方式" prop="sampleMethod">
        <template #default="scope">
          <dict-tag type="mes_zj_schema_sample_method" :value="scope.row.sampleMethod" />
        </template>
      </el-table-column>
      <el-table-column label="值" prop="val">
        <template #default="scope">
          {{ formatSchemaVal(scope.row.val) }}
        </template>
      </el-table-column>
      <el-table-column label="备注" prop="remark" />
    </el-table>
    <template #footer>
      <el-button @click="schemaDialogVisible = false">取 消</el-button>
      <el-button type="primary" @click="confirmSelectSchema">确 定</el-button>
    </template>
  </el-dialog>
</template>
<script setup lang="ts">
import { ZjTaskApi, ZjTaskVO } from '@/api/mes/zjtask'
import { ZjSchemaApi, ZjSchemaVO } from '@/api/mes/zjschema'
import { DICT_TYPE, getStrDictOptions } from '@/utils/dict'
import * as UserApi from '@/api/system/user'

defineOptions({ name: 'ZjTaskForm' })

const { t } = useI18n()
const message = useMessage()

const dialogVisible = ref(false)
const dialogTitle = ref('')
const formLoading = ref(false)
const formType = ref('')

const formData = ref<{ [key: string]: any }>({
  id: undefined,
  code: undefined,
  name: undefined,
  type: undefined,
  schemaId: undefined,
  schemaName: undefined,
  ticket: undefined,
  orgType: undefined,
  remark: undefined,
  managerId: undefined,
  managerName: undefined,
})

const formRules = reactive({
  code: [{ required: true, message: '单号不能为空', trigger: 'blur' }],
  type: [{ required: true, message: '质检分类不能为空', trigger: 'change' }],
  schemaId: [{ required: true, message: '检验方案不能为空', trigger: 'change' }],
  ticket: [{ required: true, message: '工单不能为空', trigger: 'blur' }],
  orgType: [{ required: true, message: '工序不能为空', trigger: 'change' }],
})

const formRef = ref()

const schemaDialogVisible = ref(false)
const schemaLoading = ref(false)
const schemaList = ref<ZjSchemaVO[]>([])
const selectedSchemaId = ref<number | undefined>(undefined)
const orgTypeOptions = getStrDictOptions(DICT_TYPE.MES_ORG_TYPE)
const userList = ref<UserApi.UserVO[]>([])

const formatSchemaVal = (val: string | number | null | undefined) => {
  if (val === null || val === undefined || val === '') return ''
  const text = String(val).trim()
  if (!text) return ''
  if (text.includes(',')) {
    const parts = text
      .split(',')
      .map((v) => v.trim())
      .filter((v) => v)
    const first = parts[0] ?? ''
    const second = parts[1] ?? ''
    return `每间隔${first}抽取${second}`
  }
  return `${text}%`
}

const loadSchemaList = async () => {
  if (schemaList.value.length) return
  schemaLoading.value = true
  try {
    const data = await ZjSchemaApi.getZjSchemaList()
    schemaList.value = data || []
  } finally {
    schemaLoading.value = false
  }
}

const openSchemaDialog = async () => {
  schemaDialogVisible.value = true
  await loadSchemaList()
}

const loadUserList = async () => {
  if (userList.value.length) return
  const data = await UserApi.getSimpleUserList()
  userList.value = data || []
}

const handleSchemaRowClick = (row: ZjSchemaVO) => {
  selectedSchemaId.value = row.id
}

const confirmSelectSchema = () => {
  if (!selectedSchemaId.value) return
  const matched = schemaList.value.find((item) => item.id === selectedSchemaId.value)
  if (!matched) return
  formData.value.schemaId = matched.id
  formData.value.schemaName = matched.name
  schemaDialogVisible.value = false
}

const resetForm = () => {
  formData.value = {
    id: undefined,
    code: undefined,
    name: undefined,
    type: undefined,
    schemaId: undefined,
    schemaName: undefined,
    ticket: undefined,
    orgType: undefined,
    remark: undefined,
    managerId: undefined,
    managerName: undefined,
  }
  selectedSchemaId.value = undefined
  formRef.value?.resetFields()
}

const open = async (type: string, record?: ZjTaskVO) => {
  dialogVisible.value = true
  dialogTitle.value = t('action.' + type)
  formType.value = type
  resetForm()
  await loadUserList()
  if (type === 'update' && record) {
    formData.value = {
      id: record.id,
      code: record.code,
      name: record.name,
      type: record.type,
      schemaId: record.schemaId,
      schemaName: record.schemaName,
      ticket: record.ticket,
      orgType: record.orgType,
      remark: record.remark,
      managerId: record.managerId,
      managerName: record.managerName,
    }
    selectedSchemaId.value = record.schemaId
  }
}

const handleManagerChange = (value: number | undefined) => {
  if (!value) {
    formData.value.managerName = undefined
    return
  }
  const matched = userList.value.find((item) => item.id === value)
  formData.value.managerName = matched ? matched.nickname : undefined
}

defineExpose({ open })

const emit = defineEmits(['success'])

const submitForm = async () => {
  await formRef.value.validate()
  formLoading.value = true
  try {
    const data = formData.value as unknown as ZjTaskVO
    if (formType.value === 'create') {
      await ZjTaskApi.createZjTask(data)
      message.success(t('common.createSuccess'))
    } else {
      await ZjTaskApi.updateZjTask(data)
      message.success(t('common.updateSuccess'))
    }
    dialogVisible.value = false
    emit('success')
  } finally {
    formLoading.value = false
  }
}
</script>