<template>
|
<PageWrapper>
|
<div style="height: calc(100vh - 84px)">
|
<div class="my-head">
|
<div class="left">
|
<div class="left-box p-3">
|
<!-- 多选 -->
|
<a-checkbox
|
class="icon"
|
style="margin-right: 10px"
|
v-model:checked="state.checkAll"
|
:indeterminate="state.indeterminate"
|
@change="fnCheckedChange"
|
></a-checkbox>
|
<!--更新 -->
|
<SyncOutlined class="icon" v-show="!checked" />
|
<pageHeadLeft
|
:checked="checked"
|
:selectAllRow="selectAllRow"
|
:parentTableList="newList"
|
></pageHeadLeft>
|
</div>
|
</div>
|
|
<div class="right p-3"
|
>共<span style="padding: 0 5px">{{ page.total }}</span
|
>封
|
<a-pagination
|
v-model:current="pageCurrent"
|
v-model:page-size="page.limit"
|
simple
|
:total="page.total"
|
style="margin-left: 10px"
|
@change="handlePageChange"
|
/>
|
<FilterOutlined style="margin-left: 10px" />
|
<a-popover placement="left" trigger="click">
|
<template #content>
|
<div>
|
<span>往来邮件聚合</span>
|
<a-switch style="margin-left: 50px" v-model:checked="checked3"> </a-switch>
|
</div>
|
<a-divider style="margin: 10px" />
|
<div>
|
<span>列表展示内容</span>
|
</div>
|
<div class="p-2">
|
<a-checkbox v-model:checked="checked">邮件摘要</a-checkbox>
|
</div>
|
<div class="p-2">
|
<a-checkbox v-model:checked="checked">附件</a-checkbox>
|
</div>
|
<div style="text-align: center">
|
<a-button @click="$router.push('/email/utils')">更多邮箱设置</a-button>
|
</div>
|
</template>
|
<SettingOutlined style="margin-left: 10px" />
|
</a-popover>
|
<a-switch style="margin-left: 10px" v-model:checked="checked3">
|
<template #checkedChildren><PushpinOutlined style="color: #0a6aff" /></template>
|
<template #unCheckedChildren><PushpinOutlined /></template>
|
</a-switch>
|
</div>
|
</div>
|
<div v-if="checked" style="height: 30px" class="left-bt p-3">
|
已选择此页面上所有 20 封邮件 ， 选择全部 335 封邮件
|
</div>
|
<div class="p-4" style="height: 90%; overflow: auto">
|
<div v-if="isTabs">
|
<a-tabs v-model:activeKey="activeKey">
|
<a-tab-pane
|
v-for="item in tabsList"
|
:key="item.key"
|
:tab="`${item.label}${item.num ? '(' + item.num + ')' : ''}`"
|
style="height: 200px"
|
>
|
<Table
|
ref="tableRef"
|
:page="pageCurrent"
|
:pageList="newList"
|
:isDrafts="isDrafts"
|
@selectAll="fnSelectAll"
|
@updateSelectAll="updateSelectAll"
|
/>
|
</a-tab-pane>
|
</a-tabs>
|
</div>
|
<div v-else>
|
<Table
|
ref="tableRef"
|
:page="pageCurrent"
|
:pageList="newList"
|
:isDrafts="isDrafts"
|
@selectAll="fnSelectAll"
|
@updateSelectAll="updateSelectAll"
|
/>
|
</div>
|
</div>
|
</div>
|
</PageWrapper>
|
</template>
|
|
<script lang="ts" setup>
|
name: 'ListPage';
|
import {
|
SyncOutlined,
|
SettingOutlined,
|
FilterOutlined,
|
PushpinOutlined,
|
} from '@ant-design/icons-vue';
|
import pageHeadLeft from './pageHeadLeft.vue';
|
import { PageWrapper } from '@/components/Page';
|
|
import { ref, watch, defineProps, defineEmits, computed, reactive, onMounted, inject } from 'vue';
|
|
// 定义属性
|
interface Props {
|
pageList?: [];
|
pageData?: any;
|
mailType?: number;
|
isDrafts?: boolean;
|
isTabs?: boolean;
|
}
|
const props = defineProps({
|
isTabs: {
|
type: Boolean,
|
default: true,
|
},
|
pageList: {
|
type: Array,
|
default: () => [],
|
},
|
pageData: {
|
type: Object,
|
default: () => {},
|
},
|
mailType: {
|
type: Number,
|
default: 0,
|
},
|
isDrafts: {
|
type: Boolean,
|
default: false,
|
},
|
});
|
const newList = ref([]);
|
const selectAllRow = ref([]);
|
watch(
|
() => props.pageList,
|
(newValue) => {
|
newList.value = newValue;
|
},
|
);
|
|
const page = computed(() => props.pageData);
|
const checked = computed(() => selectAllRow.value.length > 0);
|
const pageCurrent = ref(1);
|
const tableRef = ref();
|
const state = reactive({
|
indeterminate: false,
|
checkAll: false,
|
});
|
function fnCheckedChange(e) {
|
Object.assign(state, {
|
indeterminate: false,
|
});
|
tableRef.value[0].fnSelectAll(e.target.checked);
|
checked.value = e.target.checked;
|
}
|
function updateSelectAll(data) {
|
selectAllRow.value = data.records;
|
if (!data.isAll) {
|
state.indeterminate = true;
|
state.checkAll = false;
|
if (data.records.length === 0) {
|
state.indeterminate = false;
|
}
|
} else {
|
state.indeterminate = false;
|
state.checkAll = true;
|
}
|
}
|
const tabsList = computed(() => {
|
return [
|
{
|
key: '1',
|
label: '全部',
|
num: 0,
|
},
|
{
|
key: '2',
|
label: '客户',
|
num: 0,
|
},
|
{
|
key: '3',
|
label: '同事',
|
num: 0,
|
},
|
{
|
key: '4',
|
label: '通讯录',
|
num: 0,
|
},
|
{
|
key: '5',
|
label: '其他',
|
num: 0,
|
},
|
];
|
});
|
const activeKey = ref('1');
|
const checked3 = ref(false);
|
import Table from './table.vue';
|
onMounted(() => {
|
console.log('tableRef:', tableRef.value[0]);
|
});
|
function fnSelectAll() {
|
console.log('44444444444');
|
}
|
const emit = defineEmits(['pageChange']);
|
defineExpose({
|
fnSelectAll,
|
});
|
|
const getDataList = inject('getDataList');
|
function handlePageChange(page, pageSize) {
|
getDataList(page);
|
}
|
</script>
|
<style scoped lang="less">
|
.my-head {
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
width: 100%;
|
height: 60px;
|
border-bottom: 1px solid rgb(5 5 5 / 6%);
|
|
/* 增加选择器特异性 */
|
& .left {
|
width: 20%;
|
|
& .left-box {
|
display: flex;
|
align-items: center;
|
justify-content: space-flex-start;
|
width: 100%;
|
height: 100%;
|
|
& .icon {
|
margin-right: 15px;
|
font-size: 16px;
|
}
|
}
|
}
|
|
& .right {
|
display: flex;
|
align-items: center;
|
}
|
}
|
|
.left-bt {
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
padding-left: 27px;
|
background: #fffbe6;
|
}
|
</style>
|
