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<template> 16 <BasicModal v-bind="$attrs" @register="registerModal" :title="title" @ok="handleSubmit" width="40%"> 17 <BasicForm :labelWidth="100" :actionColOptions="{ span: 24 }" :labelCol="{ span: 8 }" @register="registerForm" 18 :disabled="isDisabled" /> 19 </BasicModal> 20</template> 21<script lang="ts" setup> 22import { ref, computed, unref, defineProps } from 'vue'; 23import { BasicModal, useModalInner } from '/@/components/Modal'; 24import { BasicForm, useForm } from '/@/components/Form/index'; 25import { formSchema } from './goods.data'; 26import { saveOrUpdateGoods } from './goods.api'; 27// 声明Emits 28const emit = defineEmits(['register', 'success']); 29const isUpdate = ref(true); 30const businessId = ref(null); 31 32//自定义接受参数 33const props = defineProps({ 34 //是否禁用页面 35 isDisabled: { 36 type: Boolean, 37 default: false, 38 }, 39}); 40 41//表单配置 42const [registerForm, { resetFields, setFieldsValue, validate }] = useForm({ 43 //labelWidth: 150, 44 schemas: formSchema, 45 showActionButtonGroup: false, 46}); 47//表单赋值 48const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => { 49 //重置表单 50 await resetFields(); 51 setModalProps({ confirmLoading: false, showOkBtn: !props.isDisabled }); 52 isUpdate.value = data?.isUpdate; 53 businessId.value = data?.record?.businessId; 54 if (data.createBy) { 55 await setFieldsValue({ createBy: data.createBy }); 56 } 57 if (data.createTime) { 58 await setFieldsValue({ createTime: data.createTime }); 59 } 60 //表单赋值 61 await setFieldsValue({ 62 ...data.record, 63 }); 64}); 65//设置标题 66const title = computed(() => (props.isDisabled ? '详情' : !unref(isUpdate) ? '新增' : '编辑')); 67//表单提交事件 68async function handleSubmit() { 69 try { 70 let values = await validate(); 71 values.businessId = businessId.value; 72 setModalProps({ confirmLoading: true }); 73 //提交表单 74 await saveOrUpdateGoods(values, isUpdate.value); 75 //关闭弹窗 76 closeModal(); 77 //刷新列表 78 emit('success', values); 79 } finally { 80 setModalProps({ confirmLoading: false }); 81 } 82} 83</script> 84