80 lines
2.2 KiB
Vue
80 lines
2.2 KiB
Vue
<template>
|
|
<a-spin :spinning="loading">
|
|
<BasicForm @register="registerForm" />
|
|
<div class="j-box-bottom-button offset-20" style="margin-top: 30px">
|
|
<div class="j-box-bottom-button-float">
|
|
<a-button preIcon="ant-design:sync-outlined" @click="onReset">重置</a-button>
|
|
<a-button type="primary" preIcon="ant-design:save-filled" @click="onSubmit">保存</a-button>
|
|
</div>
|
|
</div>
|
|
</a-spin>
|
|
</template>
|
|
|
|
<script lang="ts" setup>
|
|
import { watch, computed, inject, ref, unref, onMounted } from 'vue';
|
|
import { BasicForm, useForm } from '/@/components/Form/index';
|
|
import { saveOrUpdateProject } from '../ProjectInfo.api';
|
|
import { formSchema } from '../ProjectInfo.data';
|
|
import { useDesign } from '/@/hooks/web/useDesign';
|
|
|
|
const emit = defineEmits(['success']);
|
|
const props = defineProps({
|
|
data: { type: Object, default: () => ({}) },
|
|
rootTreeData: { type: Array, default: () => [] },
|
|
});
|
|
const loading = ref<boolean>(false);
|
|
// 当前是否是更新模式
|
|
const isUpdate = ref<boolean>(true);
|
|
// 当前的弹窗数据
|
|
const model = ref<object>({});
|
|
|
|
//注册表单
|
|
const [registerForm, { resetFields, setFieldsValue, validate, updateSchema }] = useForm({
|
|
schemas: formSchema,
|
|
showActionButtonGroup: false
|
|
});
|
|
|
|
onMounted(() => {
|
|
// data 变化，重填表单
|
|
watch(
|
|
() => props.data,
|
|
async () => {
|
|
let record = unref(props.data);
|
|
if (typeof record !== 'object') {
|
|
record = {};
|
|
}
|
|
model.value = record;
|
|
await resetFields();
|
|
await setFieldsValue({ ...record });
|
|
},
|
|
{ deep: true, immediate: true }
|
|
);
|
|
});
|
|
|
|
// 重置表单
|
|
async function onReset() {
|
|
await resetFields();
|
|
await setFieldsValue({ ...model.value });
|
|
}
|
|
|
|
// 提交事件
|
|
async function onSubmit() {
|
|
try {
|
|
loading.value = true;
|
|
let values = await validate();
|
|
values = Object.assign({}, model.value, values);
|
|
//提交表单
|
|
await saveOrUpdateProject(values, isUpdate.value);
|
|
//刷新列表
|
|
emit('success');
|
|
Object.assign(model.value, values);
|
|
} finally {
|
|
loading.value = false;
|
|
}
|
|
}
|
|
</script>
|
|
<style lang="less">
|
|
|
|
|
|
</style>
|