onbus_crm.git - Gitblit

huangyinfeng

9 天以前 63d60873dad6a4767b1aa52791ee45c7235afcd9

提交 \| 用户 \| 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>
67287b	64	<div v-if="checked" class="left-bt p-3">
H	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"
67287b	79	@selectAll="fnSelectAll"
H	80	@updateSelectAll="updateSelectAll"
	81	/>
	82	</a-tab-pane>
	83	</a-tabs>
	84	</div>
00fe0e	85	</div>
H	86	</PageWrapper>
	87	</template>
	88
	89	<script lang="ts" setup>
	90	name: 'ListPage';
	91	import {
	92	SyncOutlined,
	93	SettingOutlined,
	94	FilterOutlined,
	95	PushpinOutlined,
	96	} from '@ant-design/icons-vue';
12f730	97	import pageHeadLeft from './pageHeadLeft.vue';
67287b	98	import { PageWrapper } from '@/components/Page';
00fe0e	99
63d608	100	import { ref, watch, defineProps, defineEmits, computed, reactive, onMounted,inject } from 'vue';
00fe0e	101
H	102	// 定义属性
	103	interface Props {
63d608	104	pageList?: [];
H	105	pageData?:any;
00fe0e	106	}
H	107	const props = defineProps<Props>();
12f730	108	const newList = ref([]);
H	109	const selectAllRow = ref([]);
	110	watch(
	111	() => props.pageList,
	112	(newValue) => {
	113	newList.value = newValue;
	114	},
	115	);
00fe0e	116
63d608	117	const page = computed(() => props.pageData);
74a35f	118	const checked = computed(() => selectAllRow.value.length > 0);
00fe0e	119	const pageCurrent = ref(1);
67287b	120	const tableRef = ref();
H	121	const state = reactive({
	122	indeterminate: false,
	123	checkAll: false,
	124	});
	125	function fnCheckedChange(e) {
	126	Object.assign(state, {
	127	indeterminate: false,
	128	});
	129	tableRef.value[0].fnSelectAll(e.target.checked);
	130	checked.value = e.target.checked;
	131	}
	132	function updateSelectAll(data) {
12f730	133	selectAllRow.value = data.records;
67287b	134	if (!data.isAll) {
H	135	state.indeterminate = true;
	136	state.checkAll = false;
	137	if (data.records.length === 0) {
	138	state.indeterminate = false;
	139	}
	140	} else {
	141	state.indeterminate = false;
	142	state.checkAll = true;
	143	}
	144	}
00fe0e	145	const tabsList = computed(() => {
H	146	return [
	147	{
	148	key: '1',
	149	label: '全部',
63d608	150	num: 0,
00fe0e	151	},
H	152	{
	153	key: '2',
	154	label: '客户',
63d608	155	num: 0,
00fe0e	156	},
H	157	{
	158	key: '3',
	159	label: '同事',
	160	num: 0,
	161	},
	162	{
	163	key: '4',
	164	label: '通讯录',
	165	num: 0,
	166	},
	167	{
	168	key: '5',
	169	label: '其他',
63d608	170	num: 0,
00fe0e	171	},
H	172	];
	173	});
	174	const activeKey = ref('1');
67287b	175	const checked3 = ref(false);
00fe0e	176	import Table from './table.vue';
67287b	177	onMounted(() => {
H	178	console.log('tableRef:', tableRef.value[0]);
	179	});
	180	function fnSelectAll() {
	181	console.log('44444444444');
	182	}
63d608	183	const emit = defineEmits(['pageChange']);
H	184	defineExpose({
	185	fnSelectAll,
	186	});
	187
	188	const getDataList = inject('getDataList');
	189	function handlePageChange(page, pageSize){
	190	getDataList(page)
	191
	192	}
00fe0e	193	</script>
H	194	<style scoped lang="less">
63d608	195	.my-head {
00fe0e	196	display: flex;
63d608	197	align-items: center;
00fe0e	198	justify-content: space-between;
H	199	width: 100%;
63d608	200	height: 60px;
00fe0e	201	border-bottom: 1px solid rgb(5 5 5 / 6%);
H	202
	203	/* 增加选择器特异性 */
	204	& .left {
	205	width: 20%;
	206
	207	& .left-box {
	208	display: flex;
	209	align-items: center;
	210	justify-content: space-flex-start;
	211	width: 100%;
63d608	212	height: 100%;;
00fe0e	213
H	214	& .icon {
	215	margin-right: 15px;
	216	font-size: 16px;
	217	}
	218	}
	219	}
	220
	221	& .right {
	222	display: flex;
	223	align-items: center;
	224	}
	225	}
	226
	227	.left-bt {
	228	display: flex;
	229	align-items: center;
	230	justify-content: center;
	231	padding-left: 27px;
	232	background: #fffbe6;
	233	}
	234	</style>