<template>
|
<BasicModal
|
v-bind="$attrs"
|
@register="register"
|
title="添加跟进"
|
@visible-change="handleVisibleChange"
|
@ok="handleSubmit"
|
>
|
<div :class="'pt-3px pr-3px '+ prefixCls">
|
<!-- <div>-->
|
<!-- <ApiSelect-->
|
<!-- :api="optionsListApi"-->
|
<!-- :allow-clear="false"-->
|
<!-- :bordered="false"-->
|
<!-- v-model:value="currentFollowUpType"-->
|
<!-- optionFilterProp="label"-->
|
<!-- resultField="list"-->
|
<!-- labelField="name"-->
|
<!-- valueField="id"-->
|
<!-- label="跟进类型"-->
|
<!-- style="width: 120px"-->
|
<!-- @change="handleFollowUpTypeChange"-->
|
<!-- />-->
|
<!-- </div>-->
|
<BasicForm @register="registerForm1"></BasicForm>
|
<div class="edit-wrap mb-10px">
|
<BasicForm @register="registerForm2" :model="modelRef">
|
<template #textBtnArray>
|
<a-button v-for="item in textArray" class="mr-10px mb-10px" @click="addText(item)">
|
{{ item }}
|
</a-button>
|
</template>
|
<template #uploadFile="{ model, field }">
|
<div class="flex flex-justify-between">
|
<Upload
|
v-model:file-list="model[field]"
|
action=""
|
list-type="text"
|
@remove="removeFile"
|
class="upload-list-inline"
|
:showUploadList="{ showDownloadIcon: false,showRemoveIcon: true }"
|
>
|
<a-button type="primary" sharp="circle">
|
<template #icon>
|
<PaperClipOutlined />
|
</template>
|
上传附件
|
</a-button>
|
</Upload>
|
</div>
|
</template>
|
</BasicForm>
|
</div>
|
<BasicForm @register="registerForm3"></BasicForm>
|
</div>
|
</BasicModal>
|
</template>
|
<script lang="ts" setup>
|
import {ref, nextTick, h, unref} from 'vue';
|
import {BasicModal, useModalInner} from '@/components/Modal';
|
import {ApiSelect, BasicForm, useForm} from '@/components/Form';
|
import {schemas1,schemas2,schemas3} from './followUpFormData';
|
|
import {PlusOutlined, MinusOutlined,PaperClipOutlined} from '@ant-design/icons-vue';
|
import {TreeSelect, Upload} from "ant-design-vue";
|
import {optionsListApi} from "@/api/demo/select";
|
const prefixCls = 'new-follow-up';
|
const props = defineProps({
|
userData: {type: Object},
|
});
|
const modelRef = ref({});
|
const [registerForm1,{validate:validate1}] = useForm({
|
schemas:schemas1,
|
showActionButtonGroup: false,
|
});
|
const [registerForm2,{validate:validate2,setFieldsValue:setFieldsValue2,getFieldsValue:getFieldsValue2}] = useForm({
|
schemas:schemas2,
|
showActionButtonGroup: false,
|
});
|
const [registerForm3,{validate:validate3}] = useForm({
|
schemas:schemas3,
|
showActionButtonGroup: false,
|
});
|
|
const [register,{ setModalProps, closeModal }] = useModalInner((data) => {
|
Logger.log('useModalInner data...', data);
|
data && onDataReceive(data);
|
setModalProps({
|
// width: 800,
|
destroyOnClose: true,
|
});
|
});
|
|
let textArray = ref(['1','2']);
|
function addText(item) {
|
let text = getFieldsValue2()['followUpContent']?.trim() || '';
|
Logger.log('addText... text', text);
|
setFieldsValue2({
|
followUpContent: text? `${text}${item}` : item,
|
});
|
}
|
|
function onDataReceive(data) {
|
console.log('Data Received', data);
|
// 方式1;
|
// setFieldsValue({
|
// field2: data.data,
|
// field1: data.info,
|
// });
|
|
// // 方式2
|
modelRef.value = {field2: data.data, field1: data.info};
|
|
// setProps({
|
// model:{ field2: data.data, field1: data.info }
|
// })
|
}
|
|
function handleVisibleChange(v) {
|
v && props.userData && nextTick(() => onDataReceive(props.userData));
|
}
|
|
// let currentFollowUpType = ref('1');
|
// function handleFollowUpTypeChange(value: any) {
|
// Logger.log('handleFollowUpTypeChange...', value);
|
// }
|
|
function removeFile(file: any) {
|
Logger.log('remove file...', file);
|
}
|
|
async function handleSubmit() {
|
try {
|
const [values1, values2,values3] = await Promise.all([validate1(), validate2(),validate3()]);
|
Logger.log('submit values1', values1);
|
Logger.log('submit values2', values2);
|
Logger.log('submit values3', values3);
|
setModalProps({ confirmLoading: true });
|
// TODO custom api
|
// console.log(values);
|
closeModal();
|
} finally {
|
setModalProps({ confirmLoading: false });
|
}
|
}
|
</script>
|
|
<style lang="less">
|
.new-follow-up{
|
.edit-wrap{
|
border: 1px solid #eee;
|
padding: 10px;
|
border-radius: 5px;
|
}
|
// 子元素激活时父容器边框变色
|
.edit-wrap:focus-within {
|
border-color: #1890ff;
|
}
|
}
|
|
</style>
|
