adweb3-web/src/views/adweb/enquiryPublicRules/publicRuleList/AdwebEnquiryRuleList.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 :md="6" :sm="12">
            <a-form-item label="关键词" name="word">
              <a-input allow-clear placeholder="输入关键词查询" v-model:value="queryParam.word" />
            </a-form-item>
          </a-col>
          <a-col :md="6" :sm="10">
            <a-form-item label="黑白名单" name="blackOrWhiteList">
              <a-select allow-clear v-model:value="queryParam.blackOrWhiteList" 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="10">
            <a-form-item label="作用域" name="useStatus">
              <a-select allow-clear v-model:value="queryParam.useStatus" placeholder="输入关键词状态类型">
                <a-select-option value="0">询盘关键词</a-select-option>
                <a-select-option value="1">OpenAi关键词</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :md="6" :sm="10">
            <a-form-item label="关键词状态" name="isEnable">
              <a-select allow-clear v-model:value="queryParam.isEnable" 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" preIcon="ant-design:search-outlined">查询</a-button>
              <a-button ghost type="primary" @click="searchReset" preIcon="ant-design:reload-outlined" 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-button type="primary" preIcon="ant-design:export-outlined" @click="onExportXls"> 导出</a-button>
          <j-upload-button type="primary" preIcon="ant-design:import-outlined" @click="onImportXls">导入</j-upload-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" />
                  删除
                </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 === 'blackOrWhiteList'">
            <span>
              <a-tag v-if="record.blackOrWhiteList === 0" color="red">黑名单</a-tag>
              <a-tag v-else>白名单</a-tag>
            </span>
          </template>

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

          <template v-if="column.dataIndex === 'useStatus'">
            <a-tag v-if="text === 0" color="orange">询盘关键词</a-tag>
            <a-tag v-else-if="text === 1" color="green">OpenAi关键词</a-tag>
            <a-tag v-else>--</a-tag>
          </template>

          <template v-if="column.dataIndex === 'isEnable'">
            <a-tag v-if="text === 0" color="orange">停用</a-tag>
            <a-tag v-else-if="text === 1" color="green">启用</a-tag>
            <a-tag v-else>--</a-tag>
          </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>
                <template #overlay>
                  <a-menu>
                    <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>
                </template>
              </a-dropdown>
            </span>
          </template>
        </template>
      </BasicTable>
    </div>

    <adweb-enquiry-rule-modal ref="modalFormRef" @ok="reload" />
    <xp-recycle-bin-modal ref="XpRecycleBinModalRef" />
  </a-card>
</template>

<script lang="ts" setup name="AdwebEnquiryRuleList">
  import '@/assets/less/TableExpand.less';
  import '@/assets/less/common.less';
  import AdwebEnquiryRuleModal from './modules/AdwebEnquiryRuleModal.vue';
  import { nextTick, onMounted, reactive, ref } from 'vue';

  import XpRecycleBinModal from './modules/XpRecycleBinModal.vue';
  import { useListPage } from '@/hooks/system/useListPage';
  import { batchDelete, deleteOne, getExportUrl, getImportUrl, list } from './publicRuleList.api';
  import { columns } from './publicRuleList.data';
  import { useCommonList } from '@/hooks/component/JeecgList';
  import { BasicTable, TableAction } from '@/components/Table';

  const description = ref('用于询盘规则过滤管理页面');

  const dictOptions = reactive<any>({});
  const superFieldList = reactive<any>([]);

  const formRef = ref();
  const XpRecycleBinModalRef = ref();
  const modalFormRef = ref();
  let queryParam = reactive<any>({});

  //注册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(() => {
    getSuperFieldList();
  });

  function getSuperFieldList() {
    superFieldList.push({ type: 'string', value: 'word', text: '关键词', dictCode: '' });
    superFieldList.push({ type: 'int', value: 'blackOrWhiteList', text: '黑名单或白名单0为黑名单，1为白名单', dictCode: '' });
    superFieldList.push({ type: 'int', value: 'isEnable', text: '是否启用该字段1为启用0为停用', dictCode: '' });
  }

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