adweb3-web/src/views/adweb/enquiryPublicRules/publicBlackEmail/EnquiryPublicBlackEmailList.vue

<template>
  <a-card :bordered="false">
    <!-- 查询区域 -->
    <div class="table-page-search-wrapper">
      <a-form layout="inline" @keyup.enter.native="reload">
        <a-row :gutter="24">
          <a-col :md="6" :sm="12">
            <a-form-item label="邮箱">
              <a-input placeholder="输入邮箱查询" v-model:value="queryParam.email"></a-input>
            </a-form-item>
          </a-col>
          <a-col :md="6" :sm="10">
            <a-form-item label="黑白名单">
              <a-select allowClear v-model:value="queryParam.blackOrWhite" placeholder="输入黑白名单类型">
                <a-select-option value="0">黑名单</a-select-option>
                <a-select-option value="1">白名单</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :md="6" :sm="8" style="justify-content: center;align-items: center;">
              <span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
              <a-button type="primary" @click="reload">
                查询
              </a-button>
              <a-button ghost type="primary" @click="searchReset" style="margin-left: 8px">重置</a-button>
              </span>
          </a-col>
        </a-row>
      </a-form>
    </div>
    <!-- 查询区域-END -->

    <!-- table区域-begin -->
    <!--引用表格-->
    <BasicTable @register="registerTable" :rowSelection="rowSelection">

      <!--插槽:table标题-->
      <template #tableTitle>
        <a-button type="primary" @click="handleAdd" preIcon="ant-design:plus-outlined"> 新增</a-button>
        <a-dropdown v-if="selectedRowKeys.length > 0">
          <template #overlay>
            <a-menu>
              <a-menu-item key="1" @click="batchHandleDelete">
                <Icon icon="ant-design:delete-outlined"></Icon>
                删除
              </a-menu-item>
            </a-menu>
          </template>
          <a-button>批量操作
            <Icon icon="mdi:chevron-down"></Icon>
          </a-button>
        </a-dropdown>
      </template>


      <!--操作栏-->
      <template #action="{ record }">
        <TableAction :actions="getTableAction(record)" :dropDownActions="getDropDownAction(record)"/>
      </template>

      <template #bodyCell="{ column, record, index, text }">

        <template v-if="column.dataIndex === 'blackOrWhite'">
            <span>
              <a-tag v-if="record.blackOrWhite === 0" color="red">黑名单</a-tag>
              <a-tag v-else>白名单</a-tag>
            </span>
        </template>

        <template v-if="column.dataIndex === 'wasteEnquiryNum'">
            <span>
                <span v-if="text === '' || text === null || text === 0">0</span>
                <a v-else @click='wasteNumVisible(record.email)'>{{ text }}</a>
            </span>
        </template>

        <template v-if="column.dataIndex === 'action'">
            <span>
              <a @click="handleEdit(record)">编辑</a>

              <a-divider type="vertical" />
              <a-dropdown>
                <a class="ant-dropdown-link">更多 <a-icon type="down" /></a>
                <a-menu slot="overlay">
                  <a-menu-item>
                    <a @click="handleDetail(record)">详情</a>
                  </a-menu-item>
                  <a-menu-item>
                    <a-popconfirm title="确定删除吗?" @confirm="() => handleDelete(record.id)">
                      <a>删除</a>
                    </a-popconfirm>
                  </a-menu-item>
                </a-menu>
              </a-dropdown>
            </span>
        </template>


      </template>
    </BasicTable>

    <enquiry-public-black-email-modal ref="modalFormRef" @ok="reload()"></enquiry-public-black-email-modal>
    <xp-recycle-bin-modal ref="XpRecycleBinModalRef"/>
  </a-card>
</template>

<script lang="ts" name="EnquiryPublicBlackEmailList" setup>

  import '/@/assets/less/TableExpand.less';
  import '/@/assets/less/common.less';
  import {batchDelete, deleteOne, getExportUrl, getImportUrl, list} from './publicBlackEmail.api';
  import EnquiryPublicBlackEmailModal from './modules/EnquiryPublicBlackEmailModal.vue';
  import XpRecycleBinModal from './modules/XpRecycleBinModal.vue';
  import {defineComponent, nextTick, onMounted, reactive, ref} from "vue";
  import {columns} from './publicBlackEmail.data';
  import {BasicTable, TableAction} from "@/components/Table";
  import {useListPage} from "@/hooks/system/useListPage";

  const XpRecycleBinModalRef = ref();
  const modalFormRef = ref();
  const description = ref<String>("询盘公共邮箱黑名单管理页面");
  let queryParam = reactive<any>({});
  const dictOptions = ref({});
  const superFieldList = ref([]);

  //注册table数据
  const { prefixCls, tableContext, onExportXls, onImportXls } = useListPage({
    tableProps: {
      title: '公共邮箱黑名单',
      api: list,
      columns: columns,
      canResize: false,
      useSearchForm: false,
      actionColumn: {
        width: 180,
        fixed: 'right',
      },
      striped: true,
      bordered: false,
      beforeFetch: (params) => {
        return Object.assign(params, queryParam);
      },
    },
    exportConfig: {
      name: '询盘列表',
      url: getExportUrl,
      params: queryParam,
    },
    importConfig: {
      url: getImportUrl,
      success: handleSuccess,
    },
  });

  const [registerTable, { reload, clearSelectedRowKeys, updateTableDataRecord, findTableDataRecord, getDataSource }, { rowSelection, selectedRowKeys }] = tableContext;

  onMounted(() => {
    getSuperFieldList();
  })

  function getSuperFieldList(){
    let fieldList=[];
    fieldList.push({type:'string',value:'email',text:'邮箱',dictCode:''})
    superFieldList.value = fieldList
  }

  async function wasteNumVisible(email){
    await nextTick();

    if (XpRecycleBinModalRef.value && XpRecycleBinModalRef.value.init) {
      XpRecycleBinModalRef.value.init(email);
    }
  }

  function handleEdit (record){
    modalFormRef.value.title = "编辑";
    modalFormRef.value.edit(record);
    modalFormRef.value.disableSubmit = false;
  }


  /**
   * 操作栏
   */
  function getTableAction(record) {
    return [
      {
        label: '编辑',
        onClick: handleEdit.bind(null, record),
      },
    ];
  }

  /**
   * 详情
   */
  function handleDetail(record: Recordable) {
    modalFormRef.value.disableSubmit = true;
    modalFormRef.value.edit(record);
  }

  /**
   * 下拉操作栏
   */
  function getDropDownAction(record) {
    return [
      {
        label: '详情',
        onClick: handleDetail.bind(null, record),
      }, {
        label: '删除',
        popConfirm: {
          title: '是否确认删除',
          confirm: handleDelete.bind(null, record),
          placement: 'topLeft',
        }
      }
    ]
  }

  /**
   * 新增事件
   */
  function handleAdd() {
    modalFormRef.value.disableSubmit = false;
    modalFormRef.value.add();
  }

  /**
   * 成功回调
   */
  function handleSuccess() {
    (selectedRowKeys.value = []) && reload();
  }

  /**
   * 删除事件
   */
  async function handleDelete(record) {
    await deleteOne({ id: record.id }, handleSuccess);
  }

  /**
   * 批量删除事件
   */
  async function batchHandleDelete() {
    await batchDelete({ ids: selectedRowKeys.value }, handleSuccess);
  }

  function searchReset() {
    queryParam = {}
    reload();
    clearSelectedRowKeys();
  }

</script>
<style>
.table-page-search-wrapper {
  display: block;
}
</style>