onbus_crm.git - Gitblit

Sanakey

3 天以前 b5c1614fe473330ceca8b7cff0f1802e19bd5039

提交 \| 用户 \| age
abcc94	1	<template>
S	2	<BasicModal
	3	v-bind="$attrs"
	4	@register="register"
	5	@visible-change="handleVisibleChange"
	6	class="schedule-detail-modal"
	7	>
	8	<template #title></template>
	9	<template #closeIcon></template>
	10	<Tabs v-model:activeKey="activeKey" @change="onTabsChange">
	11	<TabPane key="1" tab="详情">
	12	<div>
	13	<div>
	14	<Row class="mb-10px">
	15	<Col span="12" class="font-bold">2024-09</Col>
	16	<Col span="12" class="c-gray text-right">
	17	<ClockCircleOutlined />
	18	2024-09-09 09:00:00
	19	</Col>
	20	</Row>
	21	<Row>
	22	<Col span="20" class="">
	23	<Checkbox v-model:checked="checked">
	24	<Avatar class="align-inherit" :size="10" :style="'background-color:'+ '#ddd'"></Avatar>
	25	<span class="pl-10px">测试1</span>
	26	</Checkbox>
	27	<Row class="c-gray ml-22px">今天</Row>
	28	</Col>
	29	<Col span="4" class="font-bold text-right">
b5c161	30	<div class="cursor-pointer">
S	31	<HeartFilled v-if="isFollow" @click="handleCancelFollow" class="font-size-18px c-red-5" />
	32	<HeartOutlined v-else @click="handleFollow" class="font-size-18px "/>
	33	</div>
abcc94	34	</Col>
S	35	</Row>
	36	</div>
	37	<Divider />
	38	<div>
	39	<div class="mb-10px">
	40	<div class="c-gray">关联线索：</div>
	41	<a href="javascript:void(0)">测试1</a>
	42	</div>
	43	<div class="mb-10px">
	44	<div class="c-gray">参与人：</div>
	45	<span >测试1</span>
	46	</div>
	47	<div class="mb-10px">
	48	<div class="c-gray">创建人：</div>
	49	<span >测试1</span>
	50	</div>
	51
	52	</div>
	53	<Divider />
	54
	55	</div>
	56	</TabPane>
	57	<TabPane key="2" tab="评论">
	58	<div class="mb-10px scroll-wrap">
	59	<ScrollContainer class="">
	60	<Empty></Empty>
	61	<div>
	62	<Row>
	63	<Col span="12" class="font-size-18px">
	64	Tuku
	65	</Col>
	66	<Col span="12" class="text-right">
	67	<span class="c-gray pr-10px">2024-09-09 09:00:00</span>
	68	<EditOutlined class="font-size-18px cursor-pointer c-blue-5 mr-10px"/>
	69	<CloseOutlined class="font-size-18px cursor-pointer c-red-5"/>
	70	</Col>
	71	</Row>
	72	<Row>
	73	<Col span="24">测试评论2</Col>
	74	</Row>
	75	<!-- <Flex >-->
	76	<!-- <div-->
	77	<!-- v-for="(item, index) in new Array(4)"-->
	78	<!-- :key="item"-->
	79	<!-- :style="{ ...baseStyle, background: `${index % 2 ? '#1677ff' : '#1677ffbf'}` }"-->
	80	<!-- />-->
	81	<!-- </Flex>-->
	82	<ImagePreviewGroup>
	83	<Image :width="120" src="https://aliyuncdn.antdv.com/vue.png"></Image>
	84	</ImagePreviewGroup>
	85	<Upload
	86	v-model:file-list="fileList"
	87	action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
	88	list-type="picture"
	89	@remove="removeFile"
	90	class="upload-list-inline"
	91	:showUploadList="{ showDownloadIcon: true,showRemoveIcon: false }"
	92	>
	93
	94	</Upload>
	95	</div>
	96	</ScrollContainer>
	97	</div>
	98	<div class="scroll-wrap">
	99	<Divider />
	100	<ScrollContainer>
	101	<BasicForm @register="registerForm">
	102
	103	</BasicForm>
	104	</ScrollContainer>
	105
	106	</div>
	107	</TabPane>
	108	</Tabs>
	109	<template #footer>
	110	<Row class="text-center" v-if="activeKey==='1'">
	111	<Col span="8">
	112	<a-button type="link">编辑</a-button>
	113	</Col>
	114	<Col span="8">
	115	<a-button type="text" danger>删除</a-button>
	116	</Col>
	117	<Col span="8">
	118	<a-button type="link" >完成</a-button>
	119	</Col>
	120	</Row>
	121	<Row class="" v-if="activeKey==='2'" justify="end">
	122	<Col>
	123	<a-button type="default">取消</a-button>
	124	<a-button type="primary">保存</a-button>
	125	</Col>
	126	</Row>
	127	</template>
	128	</BasicModal>
	129	</template>
	130	<script lang="ts" setup>
	131	import { ref, nextTick } from 'vue';
	132	import {BasicModal, useModal, useModalInner} from '@/components/Modal';
	133	import { BasicForm, FormSchema, useForm } from '@/components/Form';
	134	import {TabPane, Tabs, Row, Col, Divider, Checkbox, Avatar,Empty,Flex,ImagePreviewGroup,Image,Upload} from 'ant-design-vue';
	135	import type { UploadProps } from 'ant-design-vue';
	136	import { ClockCircleOutlined,HeartOutlined,HeartFilled,EditOutlined,CloseOutlined } from '@ant-design/icons-vue';
	137	import ScrollContainer from "@/components/Container/src/ScrollContainer.vue";
	138	import { schemas } from './scheduleCommentFormData';
	139
	140	const activeKey = ref('1');
	141	const checked = ref(false);
	142
	143	const props = defineProps({
	144	userData: { type: Object },
	145	});
	146	const modelRef = ref({});
	147	const [
	148	registerForm,
	149	// {
	150	// // setFieldsValue,
	151	// // setProps
	152	// },
	153	] = useForm({
	154	// labelWidth: 120,
	155	layout: 'vertical',
	156	schemas,
	157	showActionButtonGroup: false,
	158	actionColOptions: {
	159	span: 24,
	160	},
	161	});
	162
	163	const fileList = ref<UploadProps['fileList']>([
	164	{
	165	uid: '-1',
	166	name: 'xxx.png',
	167	status: 'done',
	168	url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
	169	thumbUrl: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
	170	},
	171	{
	172	uid: '-2',
	173	name: 'yyy.png',
	174	status: 'done',
	175	url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
	176	thumbUrl: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
	177	},
	178	]);
	179	const removeFile = (file) => {
	180	Logger.log('点击删除',file);
	181	return false;
	182	}
	183
	184	const [register,{setModalProps}] = useModalInner((data) => {
	185	setModalProps({
	186	canFullscreen: false,
	187	showCancelBtn: false,
	188	showOkBtn: false,
	189	useWrapper: false,
	190	wrapperFooterOffset: 0,
	191	// draggable: false,
	192	minHeight: 400,
	193	});
	194	data && onDataReceive(data);
	195	});
	196
	197	function onTabsChange(key:string) {
	198	Logger.log('点击切换',key);
	199	if (key === '1') {
	200	setModalProps({
	201	minHeight: 400,
	202	});
	203	}
	204	if (key === '2') {
	205	setModalProps({
	206	minHeight: 600,
	207	});
	208	}
	209
	210	}
	211
	212	function onDataReceive(data) {
	213	console.log('Data Received', data);
	214	// 方式1;
	215	// setFieldsValue({
	216	// field2: data.data,
	217	// field1: data.info,
	218	// });
	219
	220	// // 方式2
	221	modelRef.value = { field2: data.data, field1: data.info };
	222
	223	// setProps({
	224	// model:{ field2: data.data, field1: data.info }
	225	// })
	226	}
	227
	228	function handleVisibleChange(v) {
	229	v && props.userData && nextTick(() => onDataReceive(props.userData));
	230	}
b5c161	231
S	232	const isFollow = ref(false);
	233	function handleFollow() {
	234	Logger.log('关注');
	235	isFollow.value = true;
	236	}
	237	function handleCancelFollow() {
	238	Logger.log('取消关注');
	239	isFollow.value = false;
	240	}
abcc94	241	</script>
S	242	<style lang="less">
	243	.schedule-detail-modal {
	244	.scroll-wrap{
	245	height: 240px;
	246	}
	247	.ant-modal-body,.ant-modal-header {
	248	padding: 0;
	249	margin: 0;
	250	}
	251	.ant-modal-footer{
	252	margin: 0;
	253	}
	254	.ant-modal-header,.ant-modal-footer{
	255	border: none;
	256	}
	257	.ant-tabs {
	258	margin: -16px;
	259	padding: 0 24px;
	260	}
	261	.scroll-container{
	262	padding-bottom: 0 !important;
	263	}
	264	.comment-card{
	265	border-bottom: 5px solid #ccc;
	266	}
	267
	268	.upload-list-inline {
	269	.ant-upload-list-picture{
	270	display:flex;
	271	.ant-upload-list-item{
	272	margin-right: 8px;
	273	}
	274	.ant-upload-list-item-container{
	275	width: 50%;
	276	}
	277	}
	278	}
	279	}
	280	</style>
	281