1/* 2 * Copyright (c) 2023 Hunan OpenValley Digital Industry Development Co., Ltd. 3 * Licensed under the Apache License, Version 2.0 (the "License"); 4 * you may not use this file except in compliance with the License. 5 * You may obtain a copy of the License at 6 * 7 * http://www.apache.org/licenses/LICENSE-2.0 8 * 9 * Unless required by applicable law or agreed to in writing, software 10 * distributed under the License is distributed on an "AS IS" BASIS, 11 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 12 * See the License for the specific language governing permissions and 13 * limitations under the License. 14 */ 15 16<template> 17 <BasicModal v-bind="$attrs" @register="registerModal" :title="title" @ok="handleSubmit" width="40%"> 18 <BasicForm :labelWidth="100" :actionColOptions="{ span: 24 }" :labelCol="{ span: 8 }" @register="registerForm" 19 :disabled="isDisabled" /> 20 </BasicModal> 21</template> 22<script lang="ts" setup> 23import { ref, computed, unref, defineProps } from 'vue'; 24import { BasicModal, useModalInner } from '/@/components/Modal'; 25import { BasicForm, useForm } from '/@/components/Form/index'; 26import { formSchema } from './site.data'; 27import { saveOrUpdate } from './site.api'; 28 29// 声明Emits 30const emit = defineEmits(['register', 'success']); 31const isUpdate = ref(true); 32 33// 自定义接受参数 34const props = defineProps({ 35 // 是否禁用页面 36 isDisabled: { 37 type: Boolean, 38 default: false, 39 }, 40}); 41 42// 表单配置 43const [registerForm, { resetFields, setFieldsValue, validate }] = useForm({ 44 //labelWidth: 150, 45 schemas: formSchema, 46 showActionButtonGroup: false, 47}); 48 49// 表单赋值 50const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => { 51 // 重置表单 52 await resetFields(); 53 setModalProps({ confirmLoading: false, showOkBtn: !props.isDisabled }); 54 isUpdate.value = !!data?.isUpdate; 55 if (data.createBy) { 56 await setFieldsValue({ createBy: data.createBy }); 57 } 58 if (data.createTime) { 59 await setFieldsValue({ createTime: data.createTime }); 60 } 61 if (unref(isUpdate)) { 62 // 表单赋值 63 await setFieldsValue({ 64 ...data.record, 65 }); 66 } 67}); 68 69// 设置标题 70const title = computed(() => (props.isDisabled ? '详情' : !unref(isUpdate) ? '新增' : '编辑')); 71 72// 表单提交事件 73async function handleSubmit(v) { 74 try { 75 let values = await validate(); 76 setModalProps({ confirmLoading: true }); 77 // 提交表单 78 await saveOrUpdate(values, isUpdate.value); 79 // 关闭弹窗 80 closeModal(); 81 // 刷新列表 82 emit('success', values); 83 } finally { 84 setModalProps({ confirmLoading: false }); 85 } 86} 87</script> 88