<template>
|
<BasicDrawer
|
v-bind="$attrs"
|
title="新建客户"
|
@register="registerDrawer"
|
:maskClosable="false"
|
:keyboard="false"
|
width="860px"
|
showFooter
|
@ok="handleSubmit"
|
>
|
<template #title>
|
<div class="flex flex-justify-between">
|
<div>{{ getTitle }}</div>
|
<div class="text-right">
|
<span>
|
<!-- <Tooltip title="已关注">-->
|
<!-- <Icon-->
|
<!-- icon="mingcute:heart-fill"-->
|
<!-- class="mr-15px cursor-pointer"-->
|
<!-- @click=""-->
|
<!-- :size="20"-->
|
<!-- />-->
|
<!-- </Tooltip>-->
|
<Tooltip title="未关注">
|
<Icon
|
icon="mingcute:heart-line"
|
class="mr-15px cursor-pointer"
|
@click=""
|
:size="20"
|
/>
|
</Tooltip>
|
</span>
|
|
</div>
|
</div>
|
|
</template>
|
<!-- <Content :schemas="schemas"></Content>-->
|
<div :class="prefixCls">
|
<Row :class="`${prefixCls}-top`">
|
<Col :span="11" :class="`${prefixCls}-col`">
|
<div class="mb-10px font-size-16px">公司常用信息</div>
|
<div class="pt-3px pr-3px">
|
<BasicForm @register="registerForm" :model="modelRef" />
|
</div>
|
</Col>
|
<Col :span="11" :offset="2" :class="`${prefixCls}-col`">
|
<div class="mb-10px font-size-16px">联系人</div>
|
<div class="p-10px bg-gray-1">
|
<BasicForm @register="registerForm2" />
|
</div>
|
</Col>
|
</Row>
|
|
</div>
|
</BasicDrawer>
|
</template>
|
<script lang="ts" setup>
|
// import { useForm } from '@/components/Form';
|
// import { formSchema } from './drawerData';
|
import {BasicDrawer, useDrawerInner} from '@/components/Drawer';
|
import Icon from "@/components/Icon/Icon.vue";
|
import {Alert, Col, Row, Tooltip} from "ant-design-vue";
|
// import Content from "./drawer-form/index.vue";
|
import {computed, ref, unref} from "vue";
|
import {getMenuList} from "@/api/demo/system";
|
import {TreeItem} from "@/components/Tree";
|
import {BasicForm, useForm} from "@/components/Form";
|
import {schemas} from './drawerFormData'
|
import {schemas as schemas2} from './drawerContacterFormData'
|
|
const emit = defineEmits(['success', 'register']);
|
const isUpdate = ref(true);
|
const getTitle = computed(() => (!unref(isUpdate) ? '新建客户' : '编辑客户'));
|
|
// const [registerForm, { setFieldsValue, }] = useForm({
|
// labelWidth: 90,
|
// baseColProps: { span: 24 },
|
// schemas: formSchema,
|
// showActionButtonGroup: false,
|
// });
|
|
// const [registerDrawer] = useDrawer();
|
|
const modelRef = ref({});
|
// 左侧表单
|
const [
|
registerForm,
|
{ resetFields, setFieldsValue, validate }
|
// {
|
// // setFieldsValue,
|
// // setProps
|
// },
|
] = useForm({
|
layout: 'vertical',
|
// labelWidth: 100,
|
showAdvancedButton: true, //开启折叠
|
autoAdvancedLine: 9, // 超过多少行折叠
|
alwaysShowLines: 8, // 始终显示多少行
|
schemas,
|
// showActionButtonGroup: false, // 默认显示操作按钮，开启才会显示折叠按钮
|
showResetButton:false, // 隐藏重置按钮
|
showSubmitButton:false, // 隐藏提交按钮
|
actionColOptions: {
|
span: 24,
|
},
|
});
|
|
// 右侧表单
|
const [
|
registerForm2,
|
{ resetFields:resetFields2, setFieldsValue:setFieldsValue2, validate:validate2 }
|
// {
|
// // setFieldsValue,
|
// // setProps
|
// },
|
] = useForm({
|
layout: 'vertical',
|
// labelWidth: 100,
|
showAdvancedButton: true, //开启折叠
|
autoAdvancedLine: 5, // 超过多少行折叠
|
alwaysShowLines: 4, // 始终显示多少行
|
schemas:schemas2,
|
// showActionButtonGroup: false, // 默认显示操作按钮，开启才会显示折叠按钮
|
showResetButton:false, // 隐藏重置按钮
|
showSubmitButton:false, // 隐藏提交按钮
|
actionColOptions: {
|
span: 24,
|
},
|
});
|
|
|
const [registerDrawer, { setDrawerProps, closeDrawer }] = useDrawerInner(async (data) => {
|
Logger.log('打开了DrawerForm', data);
|
isUpdate.value = !!data?.isUpdate;
|
// // 方式1
|
// setFieldsValue({
|
// field2: data.data,
|
// field1: data.info,
|
// });
|
|
// setDrawerProps({ confirmLoading: true });
|
// setTimeout(() => {
|
// setDrawerProps({ confirmLoading: false });
|
// }, 1000);
|
|
resetFields();
|
resetFields2();
|
if (unref(isUpdate)) {
|
setFieldsValue({
|
...data.record,
|
});
|
setFieldsValue2({
|
...data.record,
|
});
|
}
|
});
|
|
|
async function handleSubmit() {
|
try {
|
// const values = await validate();
|
const [values, values2] = await Promise.all([validate(), validate2()]);
|
|
// const values = getFieldsValue();
|
Logger.log('点击submit 左侧表单values:',values);
|
Logger.log('点击submit 右侧表单values2:', values2);
|
setDrawerProps({ confirmLoading: true });
|
// TODO custom api
|
|
closeDrawer();
|
emit('success');
|
} finally {
|
setDrawerProps({ confirmLoading: false });
|
}
|
}
|
|
|
|
|
const prefixCls = 'clues-drawer';
|
// 关闭提示信息
|
const visible = ref<boolean>(true);
|
const handleClose = () => {
|
visible.value = false;
|
};
|
</script>
|
