feat: 通知配置调试, 新增必填验证
This commit is contained in:
JiangQiming
parent
4961bb5bb2
commit
18aaedc779
|
|
@ -8,8 +8,12 @@
|
|||
@cancel="handleCancel"
|
||||
:confirmLoading="btnLoading"
|
||||
>
|
||||
<a-form layout="vertical">
|
||||
<a-form-item label="通知模版" v-bind="validateInfos.templateId">
|
||||
<a-form ref="formRef" layout="vertical" :model="formData">
|
||||
<a-form-item
|
||||
label="通知模版"
|
||||
name="templateId"
|
||||
:rules="{ required: true, message: '该字段为必填字段' }"
|
||||
>
|
||||
<a-select
|
||||
v-model:value="formData.templateId"
|
||||
placeholder="请选择通知模版"
|
||||
|
|
@ -26,32 +30,37 @@
|
|||
</a-form-item>
|
||||
<a-form-item
|
||||
label="变量"
|
||||
v-bind="validateInfos.variableDefinitions"
|
||||
v-if="templateDetailTable && templateDetailTable.length"
|
||||
v-if="
|
||||
formData.templateDetailTable &&
|
||||
formData.templateDetailTable.length
|
||||
"
|
||||
>
|
||||
<a-table
|
||||
ref="myTable"
|
||||
class="debug-table"
|
||||
row-key="id"
|
||||
:columns="columns"
|
||||
:data-source="templateDetailTable"
|
||||
:data-source="formData.templateDetailTable"
|
||||
:pagination="false"
|
||||
:rowKey="
|
||||
(record, index) => {
|
||||
return record.id;
|
||||
}
|
||||
"
|
||||
bordered
|
||||
>
|
||||
<template #bodyCell="{ column, text, record }">
|
||||
<template #bodyCell="{ column, record, index }">
|
||||
<template
|
||||
v-if="['id', 'name'].includes(column.dataIndex)"
|
||||
>
|
||||
<span>{{ record[column.dataIndex] }}</span>
|
||||
</template>
|
||||
<template v-else>
|
||||
<ValueItem
|
||||
v-model:modelValue="record.value"
|
||||
:itemType="record.type"
|
||||
/>
|
||||
<a-form-item
|
||||
:name="['templateDetailTable', index, 'value']"
|
||||
:rules="{
|
||||
required: true,
|
||||
message: '该字段为必填字段',
|
||||
}"
|
||||
>
|
||||
<ValueItem
|
||||
v-model:modelValue="record.value"
|
||||
:itemType="record.type"
|
||||
/>
|
||||
</a-form-item>
|
||||
</template>
|
||||
</template>
|
||||
</a-table>
|
||||
|
|
@ -61,7 +70,6 @@
|
|||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { Form } from 'ant-design-vue';
|
||||
import { PropType } from 'vue';
|
||||
import ConfigApi from '@/api/notice/config';
|
||||
import type {
|
||||
|
|
@ -70,8 +78,6 @@ import type {
|
|||
} from '@/views/notice/Template/types';
|
||||
import { message } from 'ant-design-vue';
|
||||
|
||||
const useForm = Form.useForm;
|
||||
|
||||
type Emits = {
|
||||
(e: 'update:visible', data: boolean): void;
|
||||
};
|
||||
|
|
@ -115,15 +121,16 @@ watch(
|
|||
/**
|
||||
* 获取模板详情
|
||||
*/
|
||||
const templateDetailTable = ref<IVariableDefinitions[]>();
|
||||
const getTemplateDetail = async () => {
|
||||
const { result } = await ConfigApi.getTemplateDetail(
|
||||
formData.value.templateId,
|
||||
);
|
||||
templateDetailTable.value = result.variableDefinitions.map((m: any) => ({
|
||||
...m,
|
||||
value: undefined,
|
||||
}));
|
||||
formData.value.templateDetailTable = result.variableDefinitions.map(
|
||||
(m: any) => ({
|
||||
...m,
|
||||
value: undefined,
|
||||
}),
|
||||
);
|
||||
};
|
||||
|
||||
const columns = [
|
||||
|
|
@ -146,31 +153,27 @@ const columns = [
|
|||
];
|
||||
|
||||
// 表单数据
|
||||
const formData = ref({
|
||||
const formData = ref<{
|
||||
templateId: string;
|
||||
variableDefinitions: string;
|
||||
templateDetailTable: IVariableDefinitions[];
|
||||
}>({
|
||||
templateId: '',
|
||||
variableDefinitions: '',
|
||||
templateDetailTable: [],
|
||||
});
|
||||
|
||||
// 验证规则
|
||||
const formRules = ref({
|
||||
templateId: [{ required: true, message: '请选择通知模板' }],
|
||||
variableDefinitions: [{ required: false, message: '该字段是必填字段' }],
|
||||
});
|
||||
|
||||
const { resetFields, validate, validateInfos, clearValidate } = useForm(
|
||||
formData.value,
|
||||
formRules.value,
|
||||
);
|
||||
|
||||
/**
|
||||
* 提交
|
||||
*/
|
||||
const formRef = ref();
|
||||
const btnLoading = ref(false);
|
||||
const handleOk = () => {
|
||||
validate()
|
||||
formRef.value
|
||||
.validate()
|
||||
.then(async () => {
|
||||
const params = {};
|
||||
templateDetailTable.value?.forEach((item) => {
|
||||
formData.value.templateDetailTable?.forEach((item) => {
|
||||
params[item.id] = item.value;
|
||||
});
|
||||
// console.log('params: ', params);
|
||||
|
|
@ -186,16 +189,20 @@ const handleOk = () => {
|
|||
btnLoading.value = false;
|
||||
});
|
||||
})
|
||||
.catch((err) => {
|
||||
.catch((err: any) => {
|
||||
console.log('err: ', err);
|
||||
});
|
||||
};
|
||||
|
||||
const handleCancel = () => {
|
||||
_vis.value = false;
|
||||
templateDetailTable.value = [];
|
||||
resetFields();
|
||||
formRef.value.resetFields();
|
||||
formData.value.templateDetailTable = [];
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped></style>
|
||||
<style lang="less" scoped>
|
||||
:deep(.ant-table-cell .ant-form-item) {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
Loading…
Reference in New Issue