onbus_crm.git - Gitblit

huangyinfeng

4 天以前 db42d08c39ae6129e2b95cd24c0d57c6769282e5

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