3 changed files with 144 additions and 4 deletions
@ -0,0 +1,140 @@ |
|||||||
|
<template> |
||||||
|
<BasicModal v-bind="$attrs" |
||||||
|
:width="720" |
||||||
|
:height="500" |
||||||
|
@register="registerModal" |
||||||
|
@ok="handleSubmit" |
||||||
|
> |
||||||
|
<AForm ref="formElRef" |
||||||
|
:labelCol="{ style: { width: '120px' } }" |
||||||
|
:wrapperCol="{ style: { width: '100%' } }" |
||||||
|
:model="state.modelRef" |
||||||
|
:rules="state.rulesRef" |
||||||
|
:scrollToFirstError="true" |
||||||
|
@keypress.enter="handleSubmit" |
||||||
|
> |
||||||
|
<AFormItem name="id"> |
||||||
|
<Input v-model:value="state.modelRef.id" :hidden="true"/> |
||||||
|
</AFormItem> |
||||||
|
<ARow justify="center"> |
||||||
|
<ACol :span="12"> |
||||||
|
<AFormItem label="下级医院" name="smallHospital"> |
||||||
|
<a-input v-model:value="state.modelRef.smallHospital" |
||||||
|
placeholder="请输入参数名称" |
||||||
|
allowClear |
||||||
|
/> |
||||||
|
</AFormItem> |
||||||
|
</ACol> |
||||||
|
<ACol :span="12"> |
||||||
|
<AFormItem label="上级医院" name="largeHospital"> |
||||||
|
<a-input v-model:value="state.modelRef.largeHospital" |
||||||
|
placeholder="请输入参数键名" |
||||||
|
allowClear |
||||||
|
/> |
||||||
|
</AFormItem> |
||||||
|
</ACol> |
||||||
|
<ACol :span="12"> |
||||||
|
<AFormItem label="上传文件" name="file"> |
||||||
|
<a-input v-model:value="state.modelRef.file" |
||||||
|
placeholder="请输入参数键值" |
||||||
|
allowClear |
||||||
|
/> |
||||||
|
</AFormItem> |
||||||
|
</ACol> |
||||||
|
</ARow> |
||||||
|
</AForm> |
||||||
|
</BasicModal> |
||||||
|
</template> |
||||||
|
<script lang="ts" setup> |
||||||
|
import { reactive, ref } from 'vue'; |
||||||
|
import { Form, Input, Radio, Row, Col } from 'ant-design-vue'; |
||||||
|
import { BasicModal, ModalProps, useModalInner } from '/@/components/Modal'; |
||||||
|
|
||||||
|
/** 类型规范统一声明定义区域 */ |
||||||
|
interface WindowState { |
||||||
|
tag: string; |
||||||
|
modelRef: { |
||||||
|
id: string; |
||||||
|
smallHospital: string; |
||||||
|
largeHospital: string; |
||||||
|
file: string; |
||||||
|
}; |
||||||
|
rulesRef: Recordable; |
||||||
|
} |
||||||
|
|
||||||
|
/** 通用变量统一声明区域 */ |
||||||
|
const AForm = Form; |
||||||
|
const AFormItem = Form.Item; |
||||||
|
const ATextarea = Input.TextArea; |
||||||
|
const ARadio = Radio; |
||||||
|
const ARadioGroup = Radio.Group; |
||||||
|
const ARow = Row; |
||||||
|
const ACol = Col; |
||||||
|
|
||||||
|
const formElRef = ref(); |
||||||
|
const state = reactive<WindowState>({ |
||||||
|
tag: '', |
||||||
|
modelRef: { |
||||||
|
id: undefined!, |
||||||
|
smallHospital: undefined!, |
||||||
|
largeHospital: undefined!, |
||||||
|
file: undefined! |
||||||
|
}, |
||||||
|
rulesRef: { |
||||||
|
smallHospital: [ |
||||||
|
{ required: true, whitespace: true, message: '下级医院不能为空', validateTrigger: 'blur' } |
||||||
|
], |
||||||
|
largeHospital: [ |
||||||
|
{ required: true, whitespace: true, message: '上级医院不能为空', validateTrigger: 'blur' } |
||||||
|
] |
||||||
|
} |
||||||
|
}); |
||||||
|
const emit = defineEmits(['success', 'register']); |
||||||
|
const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data: WindowInnerData = { _tag: '' }) => { |
||||||
|
// 处理清除脏数据 |
||||||
|
formElRef.value.resetFields(); |
||||||
|
formElRef.value.clearValidate(); |
||||||
|
// 处理设置数据 |
||||||
|
state.tag = data._tag; |
||||||
|
const taskId = 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); |
||||||
|
}); |
||||||
|
|
||||||
|
/** 处理弹出框提交 */ |
||||||
|
async function handleSubmit() { |
||||||
|
try { |
||||||
|
// 提取验证数据 |
||||||
|
const formData = await formElRef.value.validate(); |
||||||
|
console.log(formData); |
||||||
|
// 处理提交之前逻辑 |
||||||
|
setModalProps({ confirmLoading: true }); |
||||||
|
// 采用tag标签区分操作 |
||||||
|
switch (state.tag) { |
||||||
|
case 'add': |
||||||
|
//await addConfig(formData); |
||||||
|
break; |
||||||
|
case 'edit': |
||||||
|
//await editConfig(formData); |
||||||
|
break; |
||||||
|
} |
||||||
|
// 处理提交完成之后逻辑 |
||||||
|
closeModal(); |
||||||
|
emit('success'); |
||||||
|
} finally { |
||||||
|
setModalProps({ confirmLoading: false }); |
||||||
|
} |
||||||
|
} |
||||||
|
</script> |
Loading…
Reference in new issue