<template>
|
<BasicModal
|
v-bind="$attrs"
|
@register="register"
|
@visible-change="handleVisibleChange"
|
class="schedule-detail-modal"
|
>
|
<template #title></template>
|
<template #closeIcon></template>
|
<Tabs v-model:activeKey="activeKey" @change="onTabsChange">
|
<TabPane key="1" tab="详情">
|
<div>
|
<div>
|
<Row class="mb-10px">
|
<Col span="12" class="font-bold">2024-09</Col>
|
<Col span="12" class="c-gray text-right">
|
<ClockCircleOutlined />
|
2024-09-09 09:00:00
|
</Col>
|
</Row>
|
<Row>
|
<Col span="20" class="">
|
<Checkbox v-model:checked="checked">
|
<Avatar class="align-inherit" :size="10" :style="'background-color:'+ '#ddd'"></Avatar>
|
<span class="pl-10px">测试1</span>
|
</Checkbox>
|
<Row class="c-gray ml-22px">今天</Row>
|
</Col>
|
<Col span="4" class="font-bold text-right">
|
<div class="cursor-pointer">
|
<HeartFilled v-if="isFollow" @click="handleCancelFollow" class="font-size-18px c-red-5" />
|
<HeartOutlined v-else @click="handleFollow" class="font-size-18px "/>
|
</div>
|
</Col>
|
</Row>
|
</div>
|
<Divider />
|
<div>
|
<div class="mb-10px">
|
<div class="c-gray">关联线索：</div>
|
<a href="javascript:void(0)">测试1</a>
|
</div>
|
<div class="mb-10px">
|
<div class="c-gray">参与人：</div>
|
<span >测试1</span>
|
</div>
|
<div class="mb-10px">
|
<div class="c-gray">创建人：</div>
|
<span >测试1</span>
|
</div>
|
|
</div>
|
<Divider />
|
|
</div>
|
</TabPane>
|
<TabPane key="2" tab="评论">
|
<div class="mb-10px scroll-wrap">
|
<ScrollContainer class="">
|
<Empty></Empty>
|
<div>
|
<Row>
|
<Col span="12" class="font-size-18px">
|
Tuku
|
</Col>
|
<Col span="12" class="text-right">
|
<span class="c-gray pr-10px">2024-09-09 09:00:00</span>
|
<EditOutlined class="font-size-18px cursor-pointer c-blue-5 mr-10px"/>
|
<CloseOutlined class="font-size-18px cursor-pointer c-red-5"/>
|
</Col>
|
</Row>
|
<Row>
|
<Col span="24">测试评论2</Col>
|
</Row>
|
<!-- <Flex >-->
|
<!-- <div-->
|
<!-- v-for="(item, index) in new Array(4)"-->
|
<!-- :key="item"-->
|
<!-- :style="{ ...baseStyle, background: `${index % 2 ? '#1677ff' : '#1677ffbf'}` }"-->
|
<!-- />-->
|
<!-- </Flex>-->
|
<ImagePreviewGroup>
|
<Image :width="120" src="https://aliyuncdn.antdv.com/vue.png"></Image>
|
</ImagePreviewGroup>
|
<Upload
|
v-model:file-list="fileList"
|
action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
|
list-type="picture"
|
@remove="removeFile"
|
class="upload-list-inline"
|
:showUploadList="{ showDownloadIcon: true,showRemoveIcon: false }"
|
>
|
|
</Upload>
|
</div>
|
</ScrollContainer>
|
</div>
|
<div class="scroll-wrap">
|
<Divider />
|
<ScrollContainer>
|
<BasicForm @register="registerForm">
|
|
</BasicForm>
|
</ScrollContainer>
|
|
</div>
|
</TabPane>
|
</Tabs>
|
<template #footer>
|
<Row class="text-center" v-if="activeKey==='1'">
|
<Col span="8">
|
<a-button type="link">编辑</a-button>
|
</Col>
|
<Col span="8">
|
<a-button type="text" danger>删除</a-button>
|
</Col>
|
<Col span="8">
|
<a-button type="link" >完成</a-button>
|
</Col>
|
</Row>
|
<Row class="" v-if="activeKey==='2'" justify="end">
|
<Col>
|
<a-button type="default">取消</a-button>
|
<a-button type="primary">保存</a-button>
|
</Col>
|
</Row>
|
</template>
|
</BasicModal>
|
</template>
|
<script lang="ts" setup>
|
import { ref, nextTick } from 'vue';
|
import {BasicModal, useModal, useModalInner} from '@/components/Modal';
|
import { BasicForm, FormSchema, useForm } from '@/components/Form';
|
import {TabPane, Tabs, Row, Col, Divider, Checkbox, Avatar,Empty,Flex,ImagePreviewGroup,Image,Upload} from 'ant-design-vue';
|
import type { UploadProps } from 'ant-design-vue';
|
import { ClockCircleOutlined,HeartOutlined,HeartFilled,EditOutlined,CloseOutlined } from '@ant-design/icons-vue';
|
import ScrollContainer from "@/components/Container/src/ScrollContainer.vue";
|
import { schemas } from './scheduleCommentFormData';
|
|
const activeKey = ref('1');
|
const checked = ref(false);
|
|
const props = defineProps({
|
userData: { type: Object },
|
});
|
const modelRef = ref({});
|
const [
|
registerForm,
|
// {
|
// // setFieldsValue,
|
// // setProps
|
// },
|
] = useForm({
|
// labelWidth: 120,
|
layout: 'vertical',
|
schemas,
|
showActionButtonGroup: false,
|
actionColOptions: {
|
span: 24,
|
},
|
});
|
|
const fileList = ref<UploadProps['fileList']>([
|
{
|
uid: '-1',
|
name: 'xxx.png',
|
status: 'done',
|
url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
|
thumbUrl: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
|
},
|
{
|
uid: '-2',
|
name: 'yyy.png',
|
status: 'done',
|
url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
|
thumbUrl: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
|
},
|
]);
|
const removeFile = (file) => {
|
Logger.log('点击删除',file);
|
return false;
|
}
|
|
const [register,{setModalProps}] = useModalInner((data) => {
|
setModalProps({
|
canFullscreen: false,
|
showCancelBtn: false,
|
showOkBtn: false,
|
useWrapper: false,
|
wrapperFooterOffset: 0,
|
// draggable: false,
|
minHeight: 400,
|
});
|
data && onDataReceive(data);
|
});
|
|
function onTabsChange(key:string) {
|
Logger.log('点击切换',key);
|
if (key === '1') {
|
setModalProps({
|
minHeight: 400,
|
});
|
}
|
if (key === '2') {
|
setModalProps({
|
minHeight: 600,
|
});
|
}
|
|
}
|
|
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));
|
}
|
|
const isFollow = ref(false);
|
function handleFollow() {
|
Logger.log('关注');
|
isFollow.value = true;
|
}
|
function handleCancelFollow() {
|
Logger.log('取消关注');
|
isFollow.value = false;
|
}
|
</script>
|
<style lang="less">
|
.schedule-detail-modal {
|
.scroll-wrap{
|
height: 240px;
|
}
|
.ant-modal-body,.ant-modal-header {
|
padding: 0;
|
margin: 0;
|
}
|
.ant-modal-footer{
|
margin: 0;
|
}
|
.ant-modal-header,.ant-modal-footer{
|
border: none;
|
}
|
.ant-tabs {
|
margin: -16px;
|
padding: 0 24px;
|
}
|
.scroll-container{
|
padding-bottom: 0 !important;
|
}
|
.comment-card{
|
border-bottom: 5px solid #ccc;
|
}
|
|
.upload-list-inline {
|
.ant-upload-list-picture{
|
display:flex;
|
.ant-upload-list-item{
|
margin-right: 8px;
|
}
|
.ant-upload-list-item-container{
|
width: 50%;
|
}
|
}
|
}
|
}
|
</style>
|
