<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>
|
