onbus_crm.git - Gitblit

huangyinfeng

6 天以前 a9a03d64cf190188d3db04d14970fc0908b03491

提交 \| 用户 \| age
00fe0e	1	<template>
67287b	2	<PageWrapper>
H	3	<div style="height: calc(100vh - 84px)">
63d608	4	<div class="my-head">
67287b	5	<div class="left">
H	6	<div class="left-box p-3">
	7	<!-- 多选 -->
	8	<a-checkbox
	9	class="icon"
	10	style="margin-right: 10px"
	11	v-model:checked="state.checkAll"
	12	:indeterminate="state.indeterminate"
	13	@change="fnCheckedChange"
	14	></a-checkbox>
	15	<!--更新 -->
	16	<SyncOutlined class="icon" v-show="!checked" />
ccfd07	17	<pageHeadLeft
H	18	:checked="checked"
	19	:selectAllRow="selectAllRow"
	20	:parentTableList="newList"
	21	></pageHeadLeft>
67287b	22	</div>
H	23	</div>
	24
	25	<div class="right p-3"
63d608	26	>共<span style="padding: 0 5px">{{page.total}}</span>封
67287b	27	<a-pagination
H	28	v-model:current="pageCurrent"
63d608	29	v-model:page-size='page.limit'
67287b	30	simple
63d608	31	:total="page.total"
67287b	32	style="margin-left: 10px"
63d608	33	@change="handlePageChange"
67287b	34	/>
H	35	<FilterOutlined style="margin-left: 10px" />
	36	<a-popover placement="left" trigger="click">
	37	<template #content>
	38	<div>
	39	<span>往来邮件聚合</span>
	40	<a-switch style="margin-left: 50px" v-model:checked="checked3"> </a-switch>
	41	</div>
	42	<a-divider style="margin: 10px" />
	43	<div>
	44	<span>列表展示内容</span>
	45	</div>
	46	<div class="p-2">
	47	<a-checkbox v-model:checked="checked">邮件摘要</a-checkbox>
	48	</div>
	49	<div class="p-2">
	50	<a-checkbox v-model:checked="checked">附件</a-checkbox>
	51	</div>
	52	<div style="text-align: center">
	53	<a-button @click="$router.push('/email/utils')">更多邮箱设置</a-button>
	54	</div>
	55	</template>
	56	<SettingOutlined style="margin-left: 10px" />
	57	</a-popover>
	58	<a-switch style="margin-left: 10px" v-model:checked="checked3">
	59	<template #checkedChildren><PushpinOutlined style="color: #0a6aff" /></template>
	60	<template #unCheckedChildren><PushpinOutlined /></template>
	61	</a-switch>
00fe0e	62	</div>
H	63	</div>
a9a03d	64	<div v-if="checked" style="height: 30px;" class="left-bt p-3">
67287b	65	已选择此页面上所有 20 封邮件，选择全部 335 封邮件
00fe0e	66	</div>
67287b	67	<div class="p-4" style="height: 90%; overflow: hidden">
H	68	<a-tabs v-model:activeKey="activeKey">
	69	<a-tab-pane
	70	v-for="item in tabsList"
	71	:key="item.key"
	72	:tab="`${item.label}${item.num ? '(' + item.num + ')' : ''}`"
	73	style="height: 200px"
	74	>
	75	<Table
	76	ref="tableRef"
	77	:page="pageCurrent"
12f730	78	:pageList="newList"
a9a03d	79	:isDrafts="isDrafts"
67287b	80	@selectAll="fnSelectAll"
H	81	@updateSelectAll="updateSelectAll"
	82	/>
	83	</a-tab-pane>
	84	</a-tabs>
	85	</div>
00fe0e	86	</div>
H	87	</PageWrapper>
	88	</template>
	89
	90	<script lang="ts" setup>
	91	name: 'ListPage';
	92	import {
	93	SyncOutlined,
	94	SettingOutlined,
	95	FilterOutlined,
	96	PushpinOutlined,
	97	} from '@ant-design/icons-vue';
12f730	98	import pageHeadLeft from './pageHeadLeft.vue';
67287b	99	import { PageWrapper } from '@/components/Page';
00fe0e	100
63d608	101	import { ref, watch, defineProps, defineEmits, computed, reactive, onMounted,inject } from 'vue';
00fe0e	102
H	103	// 定义属性
	104	interface Props {
63d608	105	pageList?: [];
a9a03d	106	pageData?: any;
H	107	mailType?: number;
	108	isDrafts?: boolean;
00fe0e	109	}
H	110	const props = defineProps<Props>();
12f730	111	const newList = ref([]);
H	112	const selectAllRow = ref([]);
	113	watch(
	114	() => props.pageList,
	115	(newValue) => {
	116	newList.value = newValue;
	117	},
	118	);
00fe0e	119
63d608	120	const page = computed(() => props.pageData);
74a35f	121	const checked = computed(() => selectAllRow.value.length > 0);
00fe0e	122	const pageCurrent = ref(1);
67287b	123	const tableRef = ref();
H	124	const state = reactive({
	125	indeterminate: false,
	126	checkAll: false,
	127	});
	128	function fnCheckedChange(e) {
	129	Object.assign(state, {
	130	indeterminate: false,
	131	});
	132	tableRef.value[0].fnSelectAll(e.target.checked);
	133	checked.value = e.target.checked;
	134	}
	135	function updateSelectAll(data) {
12f730	136	selectAllRow.value = data.records;
67287b	137	if (!data.isAll) {
H	138	state.indeterminate = true;
	139	state.checkAll = false;
	140	if (data.records.length === 0) {
	141	state.indeterminate = false;
	142	}
	143	} else {
	144	state.indeterminate = false;
	145	state.checkAll = true;
	146	}
	147	}
00fe0e	148	const tabsList = computed(() => {
H	149	return [
	150	{
	151	key: '1',
	152	label: '全部',
63d608	153	num: 0,
00fe0e	154	},
H	155	{
	156	key: '2',
	157	label: '客户',
63d608	158	num: 0,
00fe0e	159	},
H	160	{
	161	key: '3',
	162	label: '同事',
	163	num: 0,
	164	},
	165	{
	166	key: '4',
	167	label: '通讯录',
	168	num: 0,
	169	},
	170	{
	171	key: '5',
	172	label: '其他',
63d608	173	num: 0,
00fe0e	174	},
H	175	];
	176	});
	177	const activeKey = ref('1');
67287b	178	const checked3 = ref(false);
00fe0e	179	import Table from './table.vue';
67287b	180	onMounted(() => {
H	181	console.log('tableRef:', tableRef.value[0]);
	182	});
	183	function fnSelectAll() {
	184	console.log('44444444444');
	185	}
63d608	186	const emit = defineEmits(['pageChange']);
H	187	defineExpose({
	188	fnSelectAll,
	189	});
	190
	191	const getDataList = inject('getDataList');
	192	function handlePageChange(page, pageSize){
	193	getDataList(page)
	194
	195	}
00fe0e	196	</script>
H	197	<style scoped lang="less">
63d608	198	.my-head {
00fe0e	199	display: flex;
63d608	200	align-items: center;
00fe0e	201	justify-content: space-between;
H	202	width: 100%;
63d608	203	height: 60px;
00fe0e	204	border-bottom: 1px solid rgb(5 5 5 / 6%);
H	205
	206	/* 增加选择器特异性 */
	207	& .left {
	208	width: 20%;
	209
	210	& .left-box {
	211	display: flex;
	212	align-items: center;
	213	justify-content: space-flex-start;
	214	width: 100%;
63d608	215	height: 100%;;
00fe0e	216
H	217	& .icon {
	218	margin-right: 15px;
	219	font-size: 16px;
	220	}
	221	}
	222	}
	223
	224	& .right {
	225	display: flex;
	226	align-items: center;
	227	}
	228	}
	229
	230	.left-bt {
	231	display: flex;
	232	align-items: center;
	233	justify-content: center;
	234	padding-left: 27px;
	235	background: #fffbe6;
	236	}
	237	</style>