对比新文件 |
| | |
| | | <template> |
| | | <Dialog v-model="dialogVisible" :title="dialogTitle" width="75%"> |
| | | <el-form |
| | | ref="formRef" |
| | | v-loading="formLoading" |
| | | :model="formData" |
| | | :rules="formRules" |
| | | label-width="120px" |
| | | > |
| | | <el-divider content-position="left">基本信息</el-divider> |
| | | <el-row> |
| | | <el-col :span="12"> |
| | | <el-form-item label="问题编号" prop="questionCode"> |
| | | <el-input v-model="formData.questionCode" placeholder="请输入问题编号" /> |
| | | </el-form-item> |
| | | </el-col> |
| | | <el-col :span="12"> |
| | | <el-form-item label="问题名称" prop="questionName"> |
| | | <el-input v-model="formData.questionName" placeholder="请输入问题名称" /> |
| | | </el-form-item> |
| | | </el-col> |
| | | </el-row> |
| | | <el-row> |
| | | <el-col :span="12"> |
| | | <el-form-item label="输入个数" prop="dataLength"> |
| | | <el-input v-model="formData.dataLength" placeholder="请输入输入个数"/> |
| | | </el-form-item> |
| | | </el-col> |
| | | </el-row> |
| | | <el-row> |
| | | <el-col :span="12"> |
| | | <el-form-item label="问题内容" prop="questionContent"> |
| | | <el-input |
| | | type="textarea" |
| | | :autosize="{ minRows: 2}" |
| | | placeholder="请输入问题内容" |
| | | v-model="formData.questionContent"/> |
| | | </el-form-item> |
| | | </el-col> |
| | | </el-row> |
| | | <el-divider content-position="left">设置参数</el-divider> |
| | | <el-table |
| | | :data="formData.settingList" |
| | | border |
| | | style="width: 100%; margin-top: 5px;"> |
| | | <el-table-column |
| | | prop="" |
| | | label="键" |
| | | min-width="150" |
| | | align="center"> |
| | | <template #default="scope"> |
| | | <el-input v-model="scope.row.settingKey" maxlength="20" clearable |
| | | style="width:100%;hight:100%"/> |
| | | </template> |
| | | </el-table-column> |
| | | <el-table-column |
| | | prop="" |
| | | label="名称" |
| | | min-width="150" |
| | | align="center"> |
| | | <template #default="scope"> |
| | | <el-input v-model="scope.row.settingName" maxlength="20" clearable |
| | | style="width:100%;hight:100%"/> |
| | | </template> |
| | | </el-table-column> |
| | | <el-table-column |
| | | prop="" |
| | | label="值" |
| | | min-width="150" |
| | | align="center"> |
| | | <template #default="scope"> |
| | | <el-input v-model="scope.row.settingValue" maxlength="256" clearable |
| | | style="width:100%;hight:100%"/> |
| | | </template> |
| | | </el-table-column> |
| | | <el-table-column |
| | | prop="" |
| | | label="操作" |
| | | width="150" |
| | | align="center"> |
| | | <template #default="scope"> |
| | | <el-button |
| | | link |
| | | @click.prevent="addRow(scope.$index, formData.settingList)" |
| | | type="primary" |
| | | size="small"> |
| | | 添加 |
| | | </el-button> |
| | | <el-button |
| | | link |
| | | @click.prevent="deleteRow(scope.$index, formData.settingList)" |
| | | type="primary" |
| | | size="small"> |
| | | 删除 |
| | | </el-button> |
| | | </template> |
| | | </el-table-column> |
| | | </el-table> |
| | | </el-form> |
| | | <template #footer> |
| | | <el-button :disabled="formLoading" type="primary" @click="submitForm">确 定</el-button> |
| | | <el-button @click="dialogVisible = false">取 消</el-button> |
| | | </template> |
| | | </Dialog> |
| | | </template> |
| | | |
| | | <script lang="ts" setup> |
| | | import { DICT_TYPE, getStrDictOptions } from '@/utils/dict' |
| | | import * as AiQuestionTemplateApi from '@/api/ai/questiontemplate' |
| | | import { CommonStatusEnum } from '@/utils/constants' |
| | | import { ElMessage } from 'element-plus' |
| | | |
| | | defineOptions({ name: 'AiTemplateForm' }) |
| | | |
| | | const { t } = useI18n() |
| | | const message = useMessage() |
| | | const dialogVisible = ref(false) |
| | | const dialogTitle = ref('') |
| | | const formLoading = ref(false) |
| | | const formType = ref('') |
| | | const formData = ref({ |
| | | id: undefined, |
| | | questionCode: undefined, |
| | | questionName: undefined, |
| | | dataLength: undefined, |
| | | questionContent: undefined, |
| | | settingList: [{ |
| | | settingKey: '', |
| | | settingName: '', |
| | | settingValue: '', |
| | | }] |
| | | }) |
| | | const formRules = reactive({ |
| | | questionCode: [{ required: true, message: '问题编号不能为空', trigger: 'blur' }], |
| | | questionName: [{ required: true, message: '问题名称不能为空', trigger: 'blur' }], |
| | | dataLength: [{ required: true, message: '输入个数不能为空', trigger: 'blur' }], |
| | | questionContent: [{ required: true, message: '问题内容不能为空', trigger: 'blur' }] |
| | | }) |
| | | const formRef = ref() |
| | | |
| | | const addRow = function (index, rows) { |
| | | rows.splice(index + 1, 0, { |
| | | settingKey: '', |
| | | settingName: '', |
| | | settingValue: '', |
| | | }) |
| | | } |
| | | |
| | | const deleteRow = function (index, rows) { |
| | | if (rows.length <= 1) { |
| | | message.error('至少保留一个参数') |
| | | return |
| | | } |
| | | rows.splice(index, 1) |
| | | } |
| | | |
| | | const open = async (type: string, id?: number) => { |
| | | dialogVisible.value = true |
| | | dialogTitle.value = t('action.' + type) |
| | | formType.value = type |
| | | resetForm() |
| | | if (id) { |
| | | formLoading.value = true |
| | | try { |
| | | formData.value = await AiQuestionTemplateApi.QuestionTemplateApi.getQuestionTemplate(id) |
| | | } finally { |
| | | formLoading.value = false |
| | | } |
| | | } |
| | | } |
| | | defineExpose({ open }) |
| | | |
| | | const emit = defineEmits(['success']) |
| | | const submitForm = async () => { |
| | | if (!formRef) return |
| | | const valid = await formRef.value.validate() |
| | | if (!valid) return |
| | | |
| | | formLoading.value = true |
| | | try { |
| | | const data = formData.value |
| | | if (formType.value === 'create') { |
| | | await AiQuestionTemplateApi.QuestionTemplateApi.createQuestionTemplate(data) |
| | | message.success(t('common.createSuccess')) |
| | | } else { |
| | | await AiQuestionTemplateApi.QuestionTemplateApi.updateQuestionTemplate(data) |
| | | message.success(t('common.updateSuccess')) |
| | | } |
| | | dialogVisible.value = false |
| | | emit('success') |
| | | } finally { |
| | | formLoading.value = false |
| | | } |
| | | } |
| | | |
| | | const resetForm = () => { |
| | | formData.value = { |
| | | id: undefined, |
| | | questionCode: undefined, |
| | | questionName: undefined, |
| | | dataLength: undefined, |
| | | questionContent: undefined, |
| | | settingList: [{ |
| | | settingKey: '', |
| | | settingName: '', |
| | | settingValue: '', |
| | | }] |
| | | } |
| | | formRef.value?.resetFields() |
| | | } |
| | | </script> |