部分功能

huangyinfeng

6 天以前 a9a03d64cf190188d3db04d14970fc0908b03491

 src/views/email/components/ListPage/list.vue

@@ -1,41 +1,88 @@
<template>
  <PageWrapper style="height: calc(100vh - 84px)">
    <div class="head">
      <div class="left">
        <div class="left-box p-3">
          <!-- 多选 -->
          <a-checkbox class="icon" v-model:checked="checked"></a-checkbox>
          <!--更新  -->
          <SyncOutlined class="icon" v-show="!checked" />
          <pageHeadLeft :checked="checked"></pageHeadLeft>
  <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 class="right p-3"
        >共<span style="padding: 0 5px">20</span>封
        <a-pagination v-model:current="pageCurrent" simple :total="50" style="margin-left: 10px" />
        <FilterOutlined style="margin-left: 10px"/>
        <SettingOutlined  style="margin-left: 10px"/>
        <a-switch style="margin-left: 10px" v-model:checked="checked3">
          <template #checkedChildren><PushpinOutlined style="color: #0a6aff;"/></template>
          <template #unCheckedChildren><PushpinOutlined /></template>
        </a-switch>
      <div v-if="checked" style="height: 30px;" class="left-bt p-3">
        已选择此页面上所有 20 封邮件 ， 选择全部 335 封邮件
      </div>
    </div>
    <div v-if="checked" class="left-bt p-3">
      已选择此页面上所有 20 封邮件 ， 选择全部 335 封邮件
    </div>
    <div class="p-4" style="height: 90%; overflow: hidden">
      <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 :page="pageCurrent" />
        </a-tab-pane>
      </a-tabs>
      <div class="p-4" style="height: 90%; overflow: hidden">
        <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>
  </PageWrapper>
</template>
@@ -48,35 +95,67 @@
    FilterOutlined,
    PushpinOutlined,
  } from '@ant-design/icons-vue';
  import pageHeadLeft from '../pageHeadLeft.vue';
  import {PageWrapper} from '@/components/Page';
  import pageHeadLeft from './pageHeadLeft.vue';
  import { PageWrapper } from '@/components/Page';

  import { ref, watch, defineProps, defineEmits, computed, reactive } from 'vue';
  import { ref, watch, defineProps, defineEmits, computed, reactive, onMounted,inject } from 'vue';

  // 定义属性
  interface Props {
    modelValue: boolean;
    title?: string;
    placement?: 'left' | 'right' | 'top' | 'bottom';
    idName?: string;
    pageList?: [];
    pageData?: any;
    mailType?: number;
    isDrafts?: boolean;
  }
  const props = defineProps<Props>();
  const newList = ref([]);
  const selectAllRow = ref([]);
  watch(
    () => props.pageList,
    (newValue) => {
      newList.value = newValue;
    },
  );

  const checked = ref(false);
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: 60,
        num: 0,
      },
      {
        key: '2',
        label: '客户',
        num: 20,
        num: 0,
      },
      {
        key: '3',
@@ -91,19 +170,37 @@
      {
        key: '5',
        label: '其他',
        num: 30,
        num: 0,
      },
    ];
  });
  const activeKey = ref('1');
const checked3 = ref(false);
  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">
  .head {
  .my-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    height: 60px;
    border-bottom: 1px solid rgb(5 5 5 / 6%);

    /* 增加选择器特异性 */
@@ -115,6 +212,7 @@
        align-items: center;
        justify-content: space-flex-start;
        width: 100%;
        height: 100%;;

        & .icon {
          margin-right: 15px;