onbus_crm.git - Gitblit

Sanakey

6 天以前 cb165187ddcf5d9cfd8aad97a2868d0343b14bd9

提交 \| 用户 \| age
45b43f	1	import dayjs from 'dayjs';
b38243	2	import type {Dayjs} from 'dayjs';
45b43f	3	import {treeOptionsListApi} from "@/api/demo/tree";
13c0c9	4	import {ApiSelect, FormSchema} from '@/components/Form';
0884a2	5	import { SearchOutlined,CloseOutlined,PlusCircleOutlined } from '@ant-design/icons-vue';
b38243	6	import {h} from 'vue';
S	7	import {PlusOutlined, MinusOutlined} from '@ant-design/icons-vue';
0884a2	8	import {
S	9	FormItem,
	10	FormItemRest,
	11	Input,
	12	Select,
	13	RadioGroup,
	14	RadioButton,
	15	Avatar,
	16	Image,
	17	message
	18	} from "ant-design-vue";
	19	import {BasicModal,useModal,useModalInner} from '@/components/Modal';
	20	import PersonnelModal from "@/components/NewSchedule/src/PersonnelModal.vue";
13c0c9	21	import {optionsListApi} from "@/api/demo/select";
S	22	import {uploadApi} from "@/api/sys/upload";
45b43f	23
0884a2	24	const [registerPersonnelModal, { openModal: openPersonnelModal,setModalProps }] = useModal();
S	25
	26
	27
45b43f	28	type RangeValue = [Dayjs, Dayjs];
0884a2	29
45b43f	30
S	31	export const schemas: FormSchema[] = [
	32	{
	33	field: 'scheduleContent',
	34	component: 'InputTextArea',
	35	componentProps: {
	36	placeholder: '请输入日程内容',
	37	},
	38	label: '',
	39	colProps: {
	40	span: 24,
	41	},
	42	},
	43	{
13c0c9	44	field: 'color',
45b43f	45	component: 'RadioButtonGroup',
13c0c9	46	defaultValue: 1,
S	47	// componentProps: () => {
	48	// return {
	49	// onChange: (val) => {
	50	// console.log(val);
	51	// }
	52	// }
	53	// },
	54	renderColContent({model, field}, {disabled}) {
	55	let colors = [
	56	{
	57	"type_id": 1,
	58	"color": "#ff3333",
	59	"name": "红"
	60	},
	61	{
	62	"type_id": 2,
	63	"color": "#ff9933",
	64	"name": "橙"
	65	},
	66	{
	67	"type_id": 3,
	68	"color": "#f5f109",
	69	"name": "黄"
	70	},
	71	{
	72	"type_id": 4,
	73	"color": "#6ee86a",
	74	"name": "绿"
	75	},
	76	{
	77	"type_id": 5,
	78	"color": "#00ccee",
	79	"name": "蓝"
	80	},
	81	{
	82	"type_id": 6,
	83	"color": "#cc9933",
	84	"name": "褐"
	85	},
	86	{
	87	"type_id": 7,
	88	"color": "#9999ff",
	89	"name": "紫"
	90	}]
	91	const onChange = (val) => {
0884a2	92	// console.log(val);
13c0c9	93	Logger.log('model',model);
S	94	}
	95	return (
	96	<FormItem
	97	name="color"
	98	label=""
	99	>
0884a2	100	<RadioGroup v-model:value={model[field]} button-style="solid" size="small" name="color">
13c0c9	101	{
S	102	colors.map((item) => {
	103	return <RadioButton class="mr-5px" value={item.type_id} onChange={onChange}
	104	style={{backgroundColor: item.color,borderColor:item.color}}>
cb1651	105	<span class={'c-white' + (model[field] === item.type_id ?'':' select-none op0')}>✓</span>
13c0c9	106	</RadioButton>;
S	107	})
	108	}
	109	</RadioGroup>
	110	</FormItem>
	111	);
45b43f	112	},
S	113	label: '',
	114	colProps: {
	115	span: 24,
	116	},
	117	},
	118	{
	119	field: 'isAllDayEvent',
	120	component: 'Checkbox',
	121	// suffix:'全天事件',
	122	subLabel: '',
	123	colProps: {
	124	span: 6,
	125	},
	126	renderComponentContent: '全天事件',
b38243	127	componentProps: ({formActionType}) => {
45b43f	128	return {
S	129	onChange: (e: any) => {
	130	const checked = e?.target?.checked \|\| false;
	131	Logger.log('是否全天事件:', checked);
	132	formActionType.updateSchema([
	133	{
	134	field: '[startDate, endDate]',
	135	componentProps: {
b38243	136	format: 'YYYY-MM-DD' + (!checked ? ' HH:mm:ss' : ''),
S	137	showTime: (!checked ? {format: 'HH:mm:ss'} : false),
45b43f	138	}
S	139	},
	140	]);
	141	},
	142	};
	143	},
	144	},
	145	{
	146	field: '[startDate, endDate]',
	147	label: '起止时间',
	148	component: 'RangePicker',
b38243	149	componentProps: {
S	150	style: {width: '100%'},
45b43f	151	format: 'YYYY-MM-DD HH:mm:ss',
S	152	placeholder: ['开始日期、时间', '结束日期、时间'],
b38243	153	showTime: {format: 'HH:mm:ss'},
45b43f	154	},
S	155	// componentProps: ({ schema, formModel}) => {
	156	// console.log('RangePicker form:', schema);
	157	// console.log('RangePicker formModel:', formModel);
	158	// return {
	159	// format: 'YYYY-MM-DD',
	160	// placeholder: ['开始日期', '结束日期'],
	161	// showTime: { format: 'HH:mm:ss' },
	162	// };
	163	// },
	164	colProps: {span: 24},
	165	},
	166	{
	167	component: 'Select',
	168	label: '设置为周期性日期',
	169	field: 'recurringDates',
	170	colProps: {span: 13},
	171	componentProps: {
	172	options: [
	173	{
	174	label: '不设置',
	175	value: '1',
	176	},
	177	{
	178	label: '每天',
	179	value: '2',
	180	},
	181	{
	182	label: '每周',
	183	value: '3',
	184	},
	185	{
	186	label: '每月',
	187	value: '4',
	188	},
	189	{
	190	label: '自定义',
	191	value: '5',
	192	},
	193	],
	194	},
	195	defaultValue: '1'
	196	},
	197	{
	198	field: 'recurringDatesUntil',
	199	component: 'DatePicker',
	200	label: '直到',
	201	colProps: {
	202	span: 10,
	203	offset: 1,
	204	},
	205	componentProps: {
	206	style: {width: '100%'},
	207	disabledDate: (currentDate) => {
	208	// Logger.log('currentDate',currentDate)
	209	// 禁用今天之前的天数
	210	return currentDate && currentDate < dayjs().subtract(1, 'day');
	211	}
	212	},
	213	dynamicRules: ({values}) => {
	214	return [
	215	{
	216	// required: true,
	217	validator: (_, value) => {
	218	if (['2', '3', '4'].includes(values.recurringDates)) {
	219	if (!value) {
	220	return Promise.reject('不能为空');
	221	}
	222	}
	223
	224	return Promise.resolve();
	225	},
	226	},
	227	];
	228	},
	229	ifShow: ({values}) => {
	230	// Logger.log('vvv',values)
	231	return ['2', '3', '4'].includes(values.recurringDates);
	232	},
	233	},
	234	{
	235	field: 'recurringDatesRepeatCycle',
	236	component: 'InputNumber',
	237	label: '重复周期',
	238	colProps: {
	239	span: 12,
	240	},
	241	componentProps: {
	242	style: {width: '100%'},
	243	min: 1
	244	},
	245	defaultValue: 1,
	246	dynamicRules: ({values}) => {
	247	return [
	248	{
	249	// required: true,
	250	validator: (_, value) => {
	251	if (values.recurringDates === '5') {
	252	if (!value) {
	253	return Promise.reject('重复周期不能为空');
	254	}
	255	}
	256
	257	return Promise.resolve();
	258	},
	259	},
	260	];
	261	},
	262	ifShow: ({values}) => {
	263	// Logger.log('vvv',values)
	264	return values.recurringDates === '5';
	265	},
	266	},
	267	{
	268	field: 'recurringDatesRepeatCycleUnit',
	269	component: 'Select',
	270	label: '提示：每1日重复一次日程',
	271	colProps: {
b38243	272	span: 10,
S	273	offset: 1,
45b43f	274	},
b38243	275	componentProps: ({formActionType}) => {
45b43f	276	return {
S	277	options: [
	278	{
	279	label: '日',
	280	value: '1',
	281	},
	282	{
	283	label: '周',
	284	value: '2',
	285	},
	286	{
	287	label: '月',
	288	value: '3',
	289	},
	290	],
b38243	291	onChange: (e: any, v) => {
S	292	Logger.log(e, v);
45b43f	293	formActionType.updateSchema([
S	294	{
	295	field: 'recurringDatesRepeatCycleUnit',
	296	label: '提示：每' + v.label + '重复一次日程',
	297	},
	298	]);
	299	},
	300	};
	301	},
	302	// componentProps: {
	303	//
	304	// },
	305	defaultValue: '1',
	306	dynamicRules: ({values}) => {
	307	return [
	308	{
	309	// required: true,
	310	validator: (_, value) => {
	311	if (values.recurringDates === '5') {
	312	if (!value) {
	313	return Promise.reject('重复周期不能为空');
	314	}
	315	}
	316
	317	return Promise.resolve();
	318	},
	319	},
	320	];
	321	},
	322	ifShow: ({values}) => {
	323	// Logger.log('vvv',values)
	324	return values.recurringDates === '5';
	325	},
	326	},
	327	{
	328	field: 'endDateTime',
	329	component: 'DatePicker',
	330	label: '结束时间',
	331	colProps: {
	332	span: 24,
	333	},
	334	componentProps: {
b38243	335	showTime: true,
45b43f	336	style: {width: '100%'},
b38243	337	disabledDate: (currentDate) => {
S	338	// 禁用今天之前的天数
	339	return currentDate && currentDate < dayjs().subtract(1, 'day');
	340	}
45b43f	341	},
S	342	dynamicRules: ({values}) => {
	343	return [
	344	{
	345	// required: true,
	346	validator: (_, value) => {
	347	if (values.recurringDates === '5') {
	348	if (!value) {
	349	return Promise.reject('重复周期不能为空');
	350	}
	351	}
	352
	353	return Promise.resolve();
	354	},
	355	},
	356	];
	357	},
	358	ifShow: ({values}) => {
	359	// Logger.log('vvv',values)
	360	return values.recurringDates === '5';
	361	},
	362	},
	363	{
b38243	364	field: 'Divider',
S	365	component: 'Divider',
	366	// componentProps: {
	367	// style: {lineHeight: '0'},
	368	// },
	369	// label: 'renderColContent渲染',
	370	/*!!!renderColContent 没有FormItem 包裹, 若想要 Form 提交需要带上数据须 <FormItem name={}></FormItem> 包裹：示例如下/
	371	renderColContent({model, field}, {disabled}) {
	372	return (
	373	<br />
	374	);
	375	},
	376	colProps: {
	377	span: 24,
	378	style: {
	379	lineHeight: '0',
	380	},
	381	},
	382	// show: ({values}) => {
	383	// // Logger.log('vvv',values)
	384	// return false;
	385	// },
	386	},
	387	{
45b43f	388	field: 'remindTime',
S	389	component: 'Select',
	390	label: '提醒时间',
	391	colProps: {
b38243	392	span: 20,
45b43f	393	},
b38243	394	componentProps: ({formActionType}) => {
S	395	return {
	396	options: [
	397	{
	398	label: '不提醒',
	399	value: '1',
	400	},
	401	{
	402	label: '当天开始(上午9:00)',
	403	value: '2',
	404	},
	405	{
	406	label: '1天前(上午9:00)',
	407	value: '3',
	408	},
	409	{
	410	label: '2天前(上午9:00)',
	411	value: '4',
	412	},
	413	{
	414	label: '1周前(上午9:00)',
	415	value: '5',
	416	},
	417	{
	418	label: '自定义',
	419	value: '6',
	420	},
	421	],
	422	onChange: (e: any, v) => {
13c0c9	423	// Logger.log(e);
S	424	Logger.log(e,v);
b38243	425	let span = 20;
S	426	if(e==6) { span = 8 }
	427	formActionType.updateSchema([
	428	{
	429	field: 'remindTime',
	430	colProps: {
	431	span:span,
	432	},
	433	},
	434	]);
45b43f	435	},
b38243	436	};
45b43f	437	},
S	438	defaultValue: '1'
	439	},
	440	{
	441	field: 'remindTime2',
	442	component: 'DatePicker',
	443	label: ' ',
	444	colProps: {
b38243	445	span: 11,
S	446	offset: 1,
45b43f	447	},
S	448	componentProps: {
b38243	449	style: {width: '100%'},
45b43f	450	// disabledDate:(currentDate)=>{
S	451	// // Logger.log('currentDate',currentDate)
	452	// // 禁用今天之前的天数
	453	// return currentDate && currentDate < dayjs().subtract(1, 'day');
	454	// }
	455	},
	456	dynamicRules: ({values}) => {
	457	return [
	458	{
	459	// required: true,
	460	validator: (_, value) => {
	461	if (values.remindTime === '6') {
	462	if (!value) {
	463	return Promise.reject('不能为空');
	464	}
	465	}
	466
	467	return Promise.resolve();
	468	},
	469	},
	470	];
	471	},
	472	show: ({values}) => {
	473	// Logger.log('vvv',values)
	474	return values.remindTime === '6';
	475	},
	476	},
	477	{
13c0c9	478	field: 'btnGroup_0',
b38243	479	label: ' ',
S	480	// component: 'Input',
	481	slot: 'btnGroup',
	482	// label: 'renderColContent渲染',
	483	/*!!!renderColContent 没有FormItem 包裹, 若想要 Form 提交需要带上数据须 <FormItem name={}></FormItem> 包裹：示例如下/
	484	// render({model, field}, {disabled}) {
	485	// return (
	486	// <div class="flex flex-justify-between">
	487	// <a-button size="small" style={{background: '#9C9C9C', color: '#FFFFFF'}} shape="circle"
	488	// icon={h(MinusOutlined)}/>
	489	// <a-button size="small" style={{background: '#9C9C9C', color: '#FFFFFF'}} shape="circle"
	490	// icon={h(PlusOutlined)}/>
	491	// </div>
	492	// );
	493	// },
	494	colProps: {
	495	span: 3,
	496	offset: 1,
	497	},
	498	},
	499	{
13c0c9	500	field: 'relatedObjects',
S	501	fields: ['relatedObjectsSearch'],
	502	component: 'Input',
	503	defaultValue: '0',
	504	// label: 'renderColContent渲染',
	505	/*!!!renderColContent 没有FormItem 包裹, 若想要 Form 提交需要带上数据须 <FormItem name={}></FormItem> 包裹：示例如下/
	506	renderColContent({model, field}, {disabled}) {
	507	return (
	508	<FormItem
	509	name="relatedObjects"
	510	label="关联对象"
	511	// rules={[{ trigger: 'blur',required: true, }]}
	512	// rules={custom_typeKey2typeValueRules(model)}
	513	>
	514	<Input.Group compact>
	515	<Select
	516	disabled={disabled}
	517	style="width: 120px"
0884a2	518	v-model:value={model[field]}
13c0c9	519	>
S	520	<Select.Option value="0">客户</Select.Option>
	521	<Select.Option value="1">商机</Select.Option>
	522	<Select.Option value="2">线索</Select.Option>
	523	<Select.Option value="3">销售订单</Select.Option>
	524	<Select.Option value="4">报价单</Select.Option>
	525	</Select>
	526	<FormItemRest>
	527	<ApiSelect
	528	style="width: calc(100% - 120px); margin-left: -1px;border-inline-end-width: 0px;"
	529	v-model:api={optionsListApi}
	530	showSearch
	531	v-model:value={model['relatedObjectsSearch']}
	532	placeholder="请输入关键词"
	533	optionFilterProp="label"
	534	resultField="list"
	535	labelField="name"
	536	valueField="id"
	537	mode="multiple"
	538	disabled={disabled}
	539	suffixIcon={<SearchOutlined />}
	540	// rules={[{ trigger: 'blur',required: true, }]}
	541	>
	542
	543	{/<SearchOutlined v-slot='suffixIcon' />/}
	544	{/<template v-slot={suffixIcon}><SearchOutlined /></template>/}
	545	</ApiSelect>
	546	</FormItemRest>
	547	</Input.Group>
	548	</FormItem>
	549	);
45b43f	550	},
S	551	colProps: {
13c0c9	552	span: 24,
S	553	},
	554	dynamicDisabled: ({values}) => {
	555	return !!values.field_disabled;
45b43f	556	},
S	557	},
13c0c9	558	{
S	559	field: 'participants',
	560	component: 'Input',
0884a2	561	defaultValue: [],
13c0c9	562	// componentProps: {
S	563	// style: {lineHeight: '0'},
	564	// },
	565	// label: 'renderColContent渲染',
	566	/*!!!renderColContent 没有FormItem 包裹, 若想要 Form 提交需要带上数据须 <FormItem name={}></FormItem> 包裹：示例如下/
	567	renderColContent({model, field}, {disabled}) {
0884a2	568	let participants = model[field];
S	569
13c0c9	570	return (
S	571	<FormItem
	572	name="participants"
	573	label="参与人员"
	574	// rules={[{ trigger: 'blur',required: true, }]}
	575	>
	576	<ul class="flex">
0884a2	577	{participants.map((item,index) => {
13c0c9	578	return (
S	579	<li class="flex flex-col flex-items-center mr-10px ">
	580	{/<Image class="rd-50%" src={item.src} width={60}/}
	581	{/* preview={{maskClassName:'rd-50%',getContainer:'.splitpanes__pane'}}*/}
	582	{//>/}
0884a2	583	<div class="relative">
S	584	<Avatar src={item.avatar} size={64}>
13c0c9	585	</Avatar>
0884a2	586	<div class="ant-avatar-mask">
S	587	<CloseOutlined onClick={()=>{
	588	participants.splice(index,1);
	589	// model['participants'] = participants;
	590	Logger.log(model[field]);
	591	}} />
	592	</div>
13c0c9	593	</div>
S	594
0884a2	595	<span class="mt-10px">{item.title}</span>
13c0c9	596	</li>
S	597	);
	598	})}
0884a2	599	<li class="flex flex-col flex-items-center">
S	600	<PlusCircleOutlined onClick={
	601	()=>{
	602	setModalProps({
	603	zIndex: 1001,
	604	});
	605	openPersonnelModal(true, {
	606	data: participants,
	607	});
	608	}
	609	} class="cursor-pointer" style={{fontSize: '64px', color: '#B4B3B3'}} />
	610	</li>
13c0c9	611	</ul>
0884a2	612	<PersonnelModal onRegister={registerPersonnelModal} onSubmitOk={(v)=> {
S	613	console.log('vvv', v);
	614	model[field] = v
	615	}} />
13c0c9	616	</FormItem>
S	617	);
	618	},
	619	colProps: {
	620	span: 24,
	621	},
	622	},
	623	{
	624	field: 'Divider_remark',
	625	component: 'Divider',
	626	label: '备注',
	627	colProps: {
	628	span: 24,
	629	// style: {
	630	// lineHeight: '0',
	631	// },
	632	},
	633	},
	634	{
	635	field: 'remark',
	636	component: 'InputTextArea',
	637	componentProps: {
	638	placeholder: '请输入备注',
	639	},
	640	label: '',
	641	colProps: {
	642	span: 24,
	643	},
	644	},
	645	{
	646	field: 'remark_image',
	647	component: 'ImageUpload',
	648	label: '备注图片',
	649	subLabel: '(单张图片最大3M，最多上传5张图片)',
	650	// required: true,
	651	defaultValue: [
	652	'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
	653	],
	654	componentProps: {
	655	api: uploadApi,
	656	accept: ['png', 'jpeg', 'jpg'],
	657	helpText: '单张图片最大3M，最多上传5张图片',
	658	maxSize: 3, //单个文件最大体积，单位 M
	659	maxNumber: 5,
	660	},
	661	// rules: [
	662	// {
	663	// required: true,
	664	// trigger: 'change',
	665	// validator(_, value) {
	666	// if (isArray(value) && value.length > 0) {
	667	// return Promise.resolve();
	668	// } else {
	669	// return Promise.reject('请选择上传图片');
	670	// }
	671	// },
	672	// },
	673	// ],
	674	},
	675	{
	676	field: 'remark_file',
	677	component: 'Upload',
	678	label: '备注附件',
	679	colProps: {
	680	span: 24,
	681	},
	682	rules: [{ message: '请选择上传文件' }],
	683	componentProps: {
	684	api: uploadApi,
	685	},
	686	},
	687	// {
	688	// field: 'field33',
	689	// component: 'ApiTreeSelect',
	690	// label: '远程下拉树',
	691	// helpMessage: ['ApiTreeSelect组件', '使用接口提供的数据生成选项'],
	692	// required: true,
	693	// componentProps: {
	694	// api: treeOptionsListApi,
	695	// treeCheckable: true,
	696	// resultField: 'list',
	697	// onChange: (e, v) => {
	698	// console.log('ApiTreeSelect====>:', e, v);
	699	// },
	700	// },
	701	// colProps: {
	702	// span: 14,
	703	// },
	704	// },
45b43f	705	];