<template>
|
<BasicModal
|
v-bind="$attrs"
|
@register="register"
|
title="重新分配"
|
@visible-change="handleVisibleChange"
|
@ok="handleSubmit"
|
>
|
<div class="mb-10px">
|
将线索【{{cluesName}}】
|
</div>
|
<div :class="'pt-3px pr-3px '+ prefixCls">
|
<BasicForm @register="registerForm"></BasicForm>
|
</div>
|
|
</BasicModal>
|
</template>
|
<script lang="ts" setup>
|
import {ref, nextTick, h, unref} from 'vue';
|
import {BasicModal, useModalInner} from '@/components/Modal';
|
import {BasicForm, useForm} from '@/components/Form';
|
|
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 [registerForm,{validate:validate}] = useForm({
|
schemas:[{
|
field: 'cluesStatus',
|
component: 'ApiSelect',
|
label: '重新分配给',
|
colProps: {
|
span: 24,
|
},
|
required: true,
|
componentProps: {
|
api: optionsListApi,
|
params: {
|
id: 1,
|
},
|
resultField: 'list',
|
// use name as label
|
labelField: 'name',
|
// use id as value
|
valueField: 'id',
|
// not request untill to select
|
immediate: true,
|
onChange: (e, v) => {
|
console.log('ApiSelect====>:', e, v);
|
},
|
// atfer request callback
|
onOptionsChange: (options) => {
|
console.log('get options', options.length, options);
|
},
|
},
|
defaultValue: '1',
|
},],
|
showActionButtonGroup: false,
|
layout: 'vertical',
|
});
|
|
const [register,{ setModalProps, closeModal }] = useModalInner((data) => {
|
Logger.log('useModalInner data...', data);
|
data && onDataReceive(data);
|
setModalProps({
|
// width: 800,
|
minHeight: 100,
|
canFullscreen: false,
|
destroyOnClose: true,
|
});
|
});
|
|
|
let cluesName = ref('测试1');
|
function onDataReceive(data) {
|
console.log('Data Received', data);
|
cluesName.value = data.data.cluesName;
|
// 方式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 values = await validate();
|
Logger.log('submit values', values);
|
setModalProps({ confirmLoading: true });
|
// TODO custom api
|
// console.log(values);
|
closeModal();
|
} finally {
|
setModalProps({ confirmLoading: false });
|
}
|
}
|
</script>
|
|
<style lang="less">
|
|
|
</style>
|
