adweb3-web/src/views/adweb/enquirySiteRules/siteBlackIp/AdwebSiteBlackIpList.vue

<template>
  <a-card :bordered="false">
    <!-- 查询区域 -->
    <div class="table-page-search-wrapper">
      <a-form ref="formRef" @keyup.enter.native="searchQuery" :model="queryParam">
        <a-row :gutter="24">
          <a-col :xl="6" :sm="12">
            <select-site ref="selectSiteRef" @com-methods="changeSite" @set-site-info="getSiteList"/>
          </a-col>
          <a-col :md="6" :sm="12">
            <a-form-item label="IP">
              <a-input placeholder="请输入IP" v-model="queryParam.ip"></a-input>
            </a-form-item>
          </a-col>
          <a-col :md="6" :sm="10">
            <a-form-item label="黑白名单">
              <a-select v-model="queryParam.blackOrWhite" allowClear 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">
              <span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
              <a-button type="primary" @click="searchQuery" icon="search">查询</a-button>
              <a-button ghost type="primary" @click="searchReset" icon="reload" style="margin-left: 8px">重置</a-button>
              </span>
          </a-col>
        </a-row>
      </a-form>
    </div>
    <!-- 查询区域-END -->

    <!-- table区域-begin -->
    <div class="table">
      <div class="ant-alert ant-alert-info" style="margin-bottom: 16px;">
        <i class="anticon anticon-info-circle ant-alert-icon"></i> 已选择 <a
        style="font-weight: 600">{{ selectedRowKeys.length }}</a>项
        <a style="margin-left: 24px" @click="clearSelectedRowKeys">清空</a>
      </div>

      <!--引用表格-->
      <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" />
            </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>

    </div>

    <adweb-site-black-ip-modal ref="modalFormRef" @ok="modalFormOk"></adweb-site-black-ip-modal>
    <xp-recycle-bin-modal ref="XpRecycleBinModalRef" @ok="getTableAndNum"/>
  </a-card>
</template>

<script lang="ts" setup name="AdwebSiteBlackIpList">
  import '/@/assets/less/common.less';
  import '/@/assets/less/TableExpand.less'

  import AdwebSiteBlackIpModal from './modules/AdwebSiteBlackIpModal__Style.vue'
  import { getAction } from '/@/api/manage/manage'
  import XpRecycleBinModal from './modules/XpRecycleBinModal.vue'


  import {batchDelete, deleteOne, getExportUrl, getImportUrl, list} from "./siteBlackIP.api";
  import {columns} from "./siteBlackIP.data";
  import {BasicTable, TableAction} from "@/components/Table";
  import {useListPage} from "@/hooks/system/useListPage";

  import {onMounted, reactive, ref} from "vue";
  import {useCommonList} from "@/hooks/component/JeecgList";
  import SelectSite from "@/components/Adweb/selectSite.vue";

  const description = ref('adweb_site_black_ip管理页面');
  const dictOptions = reactive({});
  const superFieldList = reactive([]);
  let queryParam = reactive<any>({});

  const formRef = ref();
  const XpRecycleBinModalRef = ref();
  const modalFormRef = ref();
  const siteOptions = reactive({});


  //注册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;

  const {
    handleEdit,
    getTableAction,
    batchHandleDelete,
    handleDetail,
    getDropDownAction,
    handleDelete,
    handleAdd,
    searchQuery,
    searchReset
  } = useCommonList({tableContext, modalFormRef, formRef, batchDelete, deleteOne});

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

  //获取站点列表
  function getSiteList() {
    let that = this
    getAction('/sys/api/getSiteListByUid').then(function (res) {
      if (res.code == 0) {
        that.siteOptions = res.data;
      } else {
        that.$message.error('获取站点失败！')
      }
    }).catch(function (err) {
      console.log(err)
    })
  }

  function filterOption(input, option) {
    return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
  }

  function wasteNumVisible(ip,siteId){
    this.$nextTick(() => {
      this.$refs.XpRecycleBinModal.init(ip,siteId);
    })
  }

  function getTableAndNum(){
    // 设置默认站点
    let siteId = this.queryParam.siteId;
    let siteList = this.siteList;
    for (let site of siteList) {
      if (site.id === siteId) {
        localStorage.setItem("siteCode", site.code);
      }
    }
    this.loadData(arg)
  }

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