|
|
@ -1,56 +1,152 @@ |
|
|
|
<template> |
|
|
|
<template> |
|
|
|
<BasicModal |
|
|
|
<BasicModal v-bind="$attrs" |
|
|
|
v-bind="$attrs" |
|
|
|
:width="720" |
|
|
|
@register="registerModal" |
|
|
|
@register="registerModal" |
|
|
|
@ok="handleSubmit" |
|
|
|
@ok="handleSubmit" |
|
|
|
width="720px"> |
|
|
|
> |
|
|
|
<BasicForm @register="registerForm" /> |
|
|
|
<AForm ref="formElRef" |
|
|
|
|
|
|
|
:model="state.modelRef" |
|
|
|
|
|
|
|
:rules="state.rulesRef" |
|
|
|
|
|
|
|
> |
|
|
|
|
|
|
|
<AFormItem v-bind="validateInfos.name" |
|
|
|
|
|
|
|
label="参数名称" |
|
|
|
|
|
|
|
name="name" |
|
|
|
|
|
|
|
> |
|
|
|
|
|
|
|
<a-input v-model:value="state.modelRef.name"/> |
|
|
|
|
|
|
|
</AFormItem> |
|
|
|
|
|
|
|
<AFormItem v-bind="validateInfos.key" |
|
|
|
|
|
|
|
name="key" |
|
|
|
|
|
|
|
label="参数键名" |
|
|
|
|
|
|
|
> |
|
|
|
|
|
|
|
<Input v-model:value="state.modelRef.key"/> |
|
|
|
|
|
|
|
</AFormItem> |
|
|
|
|
|
|
|
<AFormItem v-bind="validateInfos.value" |
|
|
|
|
|
|
|
name="value" |
|
|
|
|
|
|
|
label="参数键值" |
|
|
|
|
|
|
|
> |
|
|
|
|
|
|
|
<Input v-model:value="state.modelRef.value"/> |
|
|
|
|
|
|
|
</AFormItem> |
|
|
|
|
|
|
|
<AFormItem v-bind="validateInfos.isSys" |
|
|
|
|
|
|
|
name="isSys" |
|
|
|
|
|
|
|
label="系统内置" |
|
|
|
|
|
|
|
> |
|
|
|
|
|
|
|
<ARadioGroup v-model:value="state.modelRef.isSys"> |
|
|
|
|
|
|
|
<ARadio value="0">是</ARadio> |
|
|
|
|
|
|
|
<ARadio value="1">否</ARadio> |
|
|
|
|
|
|
|
</ARadioGroup> |
|
|
|
|
|
|
|
</AFormItem> |
|
|
|
|
|
|
|
<AFormItem v-bind="validateInfos.remarks" |
|
|
|
|
|
|
|
name="remarks" |
|
|
|
|
|
|
|
label="备注" |
|
|
|
|
|
|
|
> |
|
|
|
|
|
|
|
<ATextarea v-model:value="state.modelRef.remarks"/> |
|
|
|
|
|
|
|
</AFormItem> |
|
|
|
|
|
|
|
</AForm> |
|
|
|
</BasicModal> |
|
|
|
</BasicModal> |
|
|
|
</template> |
|
|
|
</template> |
|
|
|
<script lang="ts"> |
|
|
|
<script lang="ts" setup> |
|
|
|
import { defineComponent, ref, unref } from 'vue'; |
|
|
|
/** |
|
|
|
import {BasicModal, ModalProps, useModalInner} from '/@/components/Modal'; |
|
|
|
* 提供模板规范代码参考,请尽量保证编写代码风格跟模板规范代码一致 |
|
|
|
import { BasicForm, useForm } from '/@/components/Form/index'; |
|
|
|
* 采用ant-design-vue表格表单组件编写,采用 setup 写法 |
|
|
|
import { formSchema } from './config.data'; |
|
|
|
* 当vben的BasicTable跟BasicForm组件不能满足一些特殊需求时,需要写原生ant-design-vue组件时,请严格参考此处代码 |
|
|
|
//import { set } from '/@/api/platform/system/controller/config'; |
|
|
|
* 当前原生ant-design-vue表格表单组件模板,目前已经与系统项目配置高度集成,系统配置发生修改时组件也会产生对应的变化 |
|
|
|
|
|
|
|
* 目前是基于vben的BasicTable跟BasicForm组件重写出一套ant-design-vue原生表格表单组件模板 |
|
|
|
|
|
|
|
* 注意:不会强依赖vben的BasicTable跟BasicForm组件,只会依赖一些简单容易逻辑不复杂的功能,复杂的功能不会依赖,降低耦合,提升此模板的可扩展性 |
|
|
|
|
|
|
|
* Copyright © 2020-2022 <a href="http://www.entfrm.com/">entfrm</a> All rights reserved. |
|
|
|
|
|
|
|
* author entfrm开发团队-王翔 |
|
|
|
|
|
|
|
*/ |
|
|
|
|
|
|
|
import { reactive } from 'vue'; |
|
|
|
|
|
|
|
import { Form, Textarea, Radio } from 'ant-design-vue'; |
|
|
|
|
|
|
|
import { BasicModal, ModalProps, useModalInner } from '/@/components/Modal'; |
|
|
|
|
|
|
|
import { getConfig, addConfig, editConfig } from '/@/api/platform/system/controller/config'; |
|
|
|
|
|
|
|
|
|
|
|
export default defineComponent({ |
|
|
|
/** 类型规范统一声明定义区域 */ |
|
|
|
name: 'ConfigModal', |
|
|
|
interface WindowState { |
|
|
|
components: { BasicModal, BasicForm }, |
|
|
|
tag: string; |
|
|
|
emits: ['success', 'register'], |
|
|
|
modelRef: { |
|
|
|
setup(_, { emit }) { |
|
|
|
id: string; |
|
|
|
const isUpdate = ref(true); |
|
|
|
name: string; |
|
|
|
|
|
|
|
key: string; |
|
|
|
const [registerForm, { resetFields, setFieldsValue, validate }] = useForm({ |
|
|
|
value: string; |
|
|
|
labelWidth: 100, |
|
|
|
isSys: string; |
|
|
|
schemas: formSchema, |
|
|
|
remarks: string; |
|
|
|
showActionButtonGroup: false, |
|
|
|
}; |
|
|
|
baseColProps: { span: 24 } |
|
|
|
rulesRef: Recordable; |
|
|
|
}); |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => { |
|
|
|
|
|
|
|
await resetFields(); |
|
|
|
|
|
|
|
const props: Partial<ModalProps> = { confirmLoading: false }; |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
isUpdate.value = !!data?.isUpdate; |
|
|
|
/** 通用变量统一声明区域 */ |
|
|
|
|
|
|
|
const AForm = Form; |
|
|
|
|
|
|
|
const AFormItem = Form.Item; |
|
|
|
|
|
|
|
const ATextarea = Textarea; |
|
|
|
|
|
|
|
const ARadio = Radio; |
|
|
|
|
|
|
|
const ARadioGroup = Radio.Group; |
|
|
|
|
|
|
|
|
|
|
|
if (unref(isUpdate)) { |
|
|
|
const useForm = AForm.useForm; |
|
|
|
await setFieldsValue({ |
|
|
|
const state = reactive<WindowState>({ |
|
|
|
...data.record, |
|
|
|
tag: '', |
|
|
|
|
|
|
|
modelRef: { |
|
|
|
|
|
|
|
id: undefined!, |
|
|
|
|
|
|
|
name: undefined!, |
|
|
|
|
|
|
|
key: undefined!, |
|
|
|
|
|
|
|
value: undefined!, |
|
|
|
|
|
|
|
isSys: '0', |
|
|
|
|
|
|
|
remarks: undefined! |
|
|
|
|
|
|
|
}, |
|
|
|
|
|
|
|
rulesRef: { |
|
|
|
|
|
|
|
name: [ |
|
|
|
|
|
|
|
{ required: true, whitespace: true, message: '参数名称不能为空', validateTrigger: 'blur' } |
|
|
|
|
|
|
|
], |
|
|
|
|
|
|
|
key: [ |
|
|
|
|
|
|
|
{ required: true, whitespace: true, message: '参数键名不能为空', validateTrigger: 'blur' } |
|
|
|
|
|
|
|
], |
|
|
|
|
|
|
|
value: [ |
|
|
|
|
|
|
|
{ required: true, whitespace: true, message: '参数键值不能为空', validateTrigger: 'blur' } |
|
|
|
|
|
|
|
] |
|
|
|
|
|
|
|
} |
|
|
|
}); |
|
|
|
}); |
|
|
|
props.title = "编辑参数"; |
|
|
|
/** https://v3.cn.vuejs.org/api/options-data.html#emits */ |
|
|
|
}else { |
|
|
|
const emit = defineEmits(['success', 'register']); |
|
|
|
props.title = "新增参数"; |
|
|
|
const { resetFields, clearValidate, validate, validateInfos } = useForm(state.modelRef, state.rulesRef); |
|
|
|
|
|
|
|
const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data: WindowInnerData = { _tag: '' })=> { |
|
|
|
|
|
|
|
// 处理清除脏数据 |
|
|
|
|
|
|
|
resetFields(); |
|
|
|
|
|
|
|
clearValidate(); |
|
|
|
|
|
|
|
// 处理设置数据 |
|
|
|
|
|
|
|
state.tag = data._tag; |
|
|
|
|
|
|
|
const configId = data.record?.id; |
|
|
|
|
|
|
|
const props: Partial<ModalProps> = { confirmLoading: false }; |
|
|
|
|
|
|
|
// 采用tag标签区分操作 |
|
|
|
|
|
|
|
switch (state.tag) { |
|
|
|
|
|
|
|
case 'add': |
|
|
|
|
|
|
|
props.title = '新增配置参数'; |
|
|
|
|
|
|
|
break; |
|
|
|
|
|
|
|
case 'edit': |
|
|
|
|
|
|
|
props.title = '编辑配置参数'; |
|
|
|
|
|
|
|
const result = await getConfig(configId); |
|
|
|
|
|
|
|
state.modelRef = result; |
|
|
|
|
|
|
|
break; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
// 尾部:设置处理后的最终配置数据 |
|
|
|
setModalProps(props); |
|
|
|
setModalProps(props); |
|
|
|
}); |
|
|
|
}); |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
/** 处理弹出框提交 */ |
|
|
|
async function handleSubmit() { |
|
|
|
async function handleSubmit() { |
|
|
|
try { |
|
|
|
try { |
|
|
|
const values = await validate(); |
|
|
|
// 提取验证数据 |
|
|
|
|
|
|
|
const formData = await validate(); |
|
|
|
|
|
|
|
// 处理提交之前逻辑 |
|
|
|
setModalProps({ confirmLoading: true }); |
|
|
|
setModalProps({ confirmLoading: true }); |
|
|
|
await set(values); |
|
|
|
// 采用tag标签区分操作 |
|
|
|
|
|
|
|
switch (state.tag) { |
|
|
|
|
|
|
|
case 'add': |
|
|
|
|
|
|
|
await addConfig(formData); |
|
|
|
|
|
|
|
break; |
|
|
|
|
|
|
|
case 'edit': |
|
|
|
|
|
|
|
await editConfig(formData); |
|
|
|
|
|
|
|
break; |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
// 处理提交完成之后逻辑 |
|
|
|
closeModal(); |
|
|
|
closeModal(); |
|
|
|
emit('success'); |
|
|
|
emit('success'); |
|
|
|
} finally { |
|
|
|
} finally { |
|
|
@ -58,7 +154,4 @@ export default defineComponent({ |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
return { registerModal, registerForm, handleSubmit }; |
|
|
|
|
|
|
|
}, |
|
|
|
|
|
|
|
}); |
|
|
|
|
|
|
|
</script> |
|
|
|
</script> |
|
|
|