Merge remote-tracking branch 'origin/master'

src/api/manage/manage.ts

@@ -5,17 +5,20 @@ const api = {
   role: '/mock/api/role',
   service: '/mock/api/service',
   permission: '/mock/api/permission',
-  permissionNoPager: '/mock/api/permission/no-pager'
-}
+  permissionNoPager: '/mock/api/permission/no-pager',
+};
 
 //post
 export function postAction(url, parameter, timeout) {
-  return defHttp.post({
-    url: url,
-    method: 'post',
-    data: parameter,
-    timeout: timeout ? timeout : 1000 * 120,
-  }, { isTransformResponse: false, successMessageMode: 'none' })
+  return defHttp.post(
+    {
+      url: url,
+      method: 'post',
+      data: parameter,
+      timeout: timeout ? timeout : 1000 * 120,
+    },
+    { isTransformResponse: false, successMessageMode: 'none' }
+  );
 }
 
 //post
@@ -25,10 +28,10 @@ export function postActionBlob(url, parameter) {
     method: 'post',
     data: parameter,
     headers: {
-      'Content-Type': 'application/json'
+      'Content-Type': 'application/json',
     },
-    responseType: 'blob'
-  })
+    responseType: 'blob',
+  });
 }
 
 //post
@@ -39,20 +42,23 @@ export function postAction3(url, parameter) {
     data: parameter,
     timeout: 1000 * 120,
     headers: {
-      'Content-Type': 'application/json'
+      'Content-Type': 'application/json',
     },
-  })
+  });
 }
 
 export function postActionForm(url, parameter) {
-  return defHttp.post({
-    url: url,
-    params: parameter,
-    timeout: 1000 * 120,
-    headers: {
-      'Content-Type': 'multipart/form-data'
+  return defHttp.post(
+    {
+      url: url,
+      params: parameter,
+      timeout: 1000 * 120,
+      headers: {
+        'Content-Type': 'multipart/form-data',
+      },
     },
-  }, { isTransformResponse: false, successMessageMode: 'none' })
+    { isTransformResponse: false, successMessageMode: 'none' }
+  );
 }
 
 export function postAction5(url, parameter, timeout) {
@@ -62,37 +68,46 @@ export function postAction5(url, parameter, timeout) {
     data: parameter,
     timeout: timeout ? timeout : 1000 * 120,
     headers: {
-      'Content-Type': 'application/json'
+      'Content-Type': 'application/json',
     },
-  })
+  });
 }
 
 //post method= {post | put}
 export function httpAction(url, parameter, method) {
-  return defHttp.request({
-    url: url,
-    method: method,
-    data: parameter
-  }, { isTransformResponse: false, successMessageMode: 'none' })
+  return defHttp.request(
+    {
+      url: url,
+      method: method,
+      data: parameter,
+    },
+    { isTransformResponse: false, successMessageMode: 'none' }
+  );
 }
 
 //put
 export function putAction(url, parameter) {
-  return defHttp.request({
-    url: url,
-    method: 'put',
-    data: parameter
-  },{ isTransformResponse: false, successMessageMode: 'none' })
+  return defHttp.request(
+    {
+      url: url,
+      method: 'put',
+      data: parameter,
+    },
+    { isTransformResponse: false, successMessageMode: 'none' }
+  );
 }
 
 //get
 export function getAction(url, parameter) {
-  return defHttp.get({
-    url: url,
-    method: 'get',
-    params: parameter,
-    timeout: 1000 * 180,
-  }, { isTransformResponse: false, successMessageMode: 'none' })
+  return defHttp.get(
+    {
+      url: url,
+      method: 'get',
+      params: parameter,
+      timeout: 1000 * 180,
+    },
+    { isTransformResponse: false, successMessageMode: 'none' }
+  );
 }
 
 //deleteAction
@@ -100,40 +115,40 @@ export function deleteAction(url, parameter) {
   return defHttp.request({
     url: url,
     method: 'delete',
-    params: parameter
-  })
+    params: parameter,
+  });
 }
 
 export function getUserList(parameter) {
   return defHttp.request({
     url: api.user,
     method: 'get',
-    params: parameter
-  })
+    params: parameter,
+  });
 }
 
 export function getRoleList(parameter) {
   return defHttp.request({
     url: api.role,
     method: 'get',
-    params: parameter
-  })
+    params: parameter,
+  });
 }
 
 export function getServiceList(parameter) {
   return defHttp.request({
     url: api.service,
     method: 'get',
-    params: parameter
-  })
+    params: parameter,
+  });
 }
 
 export function getPermissions(parameter) {
   return defHttp.request({
     url: api.permissionNoPager,
     method: 'get',
-    params: parameter
-  })
+    params: parameter,
+  });
 }
 
 // id == 0 add     post
@@ -142,8 +157,8 @@ export function saveService(parameter) {
   return defHttp.request({
     url: api.service,
     method: parameter.id == 0 ? 'post' : 'put',
-    data: parameter
-  })
+    data: parameter,
+  });
 }
 
 /**
@@ -157,11 +172,10 @@ export function downFile(url, parameter) {
     url: url,
     params: parameter,
     method: 'get',
-    responseType: 'blob'
-  })
+    responseType: 'blob',
+  });
 }
 
-
 /**
  * 文件上传 用于富文本上传图片
  * @param url
@@ -174,9 +188,9 @@ export function uploadAction(url, parameter) {
     data: parameter,
     method: 'post',
     headers: {
-      'Content-Type': 'multipart/form-data',  // 文件上传
+      'Content-Type': 'multipart/form-data', // 文件上传
     },
-  })
+  });
 }
 
 /**
@@ -186,13 +200,13 @@ export function uploadAction(url, parameter) {
  * @returns {*}
  */
 export function getFileAccessHttpUrl(avatar, subStr) {
-  if (!subStr) subStr = 'http'
+  if (!subStr) subStr = 'http';
   try {
     if (avatar && avatar.startsWith(subStr)) {
       return avatar;
     } else {
       if (avatar && avatar.length > 0 && avatar.indexOf('[') == -1) {
-        return window._CONFIG['staticDomainURL'] + "/" + avatar;
+        return window._CONFIG['staticDomainURL'] + '/' + avatar;
       }
     }
   } catch (err) {

src/assets/less/home.less

@@ -25,11 +25,11 @@
     .ant-select {
       color: #fff;
 
-      /deep/ .ant-select-selection {
+      deep(.ant-select-selection) {
         background-color: transparent;
       }
 
-      /deep/ .ant-select-arrow {
+      deep(.ant-select-arrow) {
         color: #fff;
       }
     }
@@ -204,14 +204,14 @@
       }
     }
 
-    /deep/ .ant-table-thead > tr > th {
+    deep(.ant-table-thead > tr > th) {
       background: rgb(241, 248, 255);
       border: none;
       color: #000;
       padding: 10px;
     }
 
-    /deep/ .ant-table-tbody .ant-table-row td {
+    deep(.ant-table-tbody .ant-table-row td) {
       padding: 10px;
       color: #000;
     }

src/components/Adweb/selectSite.vue

@@ -1,13 +1,15 @@
 <template>
-  <a-form-item name="siteCode">
+  <a-form-item :label="props.label" name="siteCode">
     <a-select
       showSearch
+      :allowClear="props.allowClear"
       :filter-option="filterOption"
       v-model:value="siteCode"
       @change="changeUser"
       :style="'width:' + selectWidth"
       :options="siteInfo"
       :field-names="{ label: 'name', value: 'code' }"
+      placeholder="请选择站点"
     />
   </a-form-item>
 </template>
@@ -23,6 +25,14 @@
   const emit = defineEmits(['setSiteInfo']);
 
   const props = defineProps({
+    label: {
+      type: String,
+      default: '',
+    },
+    allowClear: {
+      type: Boolean,
+      default: false,
+    },
     siteListUrl: {
       type: String,
       default: '/adweb/adwebSite/getSiteListByUid',
@@ -74,6 +84,7 @@
           siteCode.value = res.result[0].code;
           selectSiteInfo = res.result[0];
           localStorage.setItem('siteCode', res.result[0].code);
+          localStorage.setItem('siteID', res.result[0].id);
         }
       } else {
         createMessage.error('站点获取失败，请刷新重试');
@@ -83,14 +94,19 @@
 
   //改变站点
   function changeUser(value, e) {
-    siteCode.value = value;
-    localStorage.setItem('siteCode', value);
-
-    // 更改选中的站点对象
-    for (let i in siteInfo) {
-      if (siteInfo[i].code === value) {
-        selectSiteInfo = siteInfo[i];
+    if (value !== undefined) {
+      siteCode.value = value;
+      localStorage.setItem('siteCode', value);
+      localStorage.setItem('siteID', e.id);
+
+      // 更改选中的站点对象
+      for (let i in siteInfo) {
+        if (siteInfo[i].code === value) {
+          selectSiteInfo = siteInfo[i];
+        }
       }
+    } else {
+      selectSiteInfo = reactive({ code: '', id: '', name: '' });
     }
   }
 </script>

src/views/adweb/enquiryPublicRules/publicBlackip/AdwebBlackIpList.vue

@@ -6,7 +6,7 @@
         <a-row :gutter="24">
           <a-col :xl="6" :lg="7" :md="8" :sm="24">
             <a-form-item name="ip">
-              <a-input placeholder="请输入ip" v-model:value="queryParam.ip" allow-clear></a-input>
+              <a-input placeholder="请输入ip" v-model:value="queryParam.ip" allow-clear />
             </a-form-item>
           </a-col>
           <a-col :xl="6" :lg="7" :md="8" :sm="24">
@@ -18,15 +18,9 @@
             </a-form-item>
           </a-col>
           <a-col :xl="6" :lg="7" :md="8" :sm="24">
-            <span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
-              <a-button type="primary" @click="reload">
-                <Icon icon="ant-design:search-outlined"></Icon>
-                查询
-              </a-button>
-              <a-button type="primary" @click="searchReset" style="margin-left: 8px">
-                <Icon icon="ant-design:reload-outlined"></Icon>
-                重置
-              </a-button>
+            <span style="float: left; overflow: hidden" class="table-page-search-submitButtons">
+              <a-button type="primary" @click="reload" preIcon="ant-design:search-outlined"> 查询 </a-button>
+              <a-button type="primary" @click="searchReset" preIcon="ant-design:reload-outlined" style="margin-left: 8px"> 重置 </a-button>
             </span>
           </a-col>
         </a-row>
@@ -36,9 +30,9 @@
 
     <!-- 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>项
+      <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>
 
@@ -46,182 +40,166 @@
       <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" @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>
+                  <Icon icon="ant-design:delete-outlined" />
                   删除
                 </a-menu-item>
               </a-menu>
             </template>
-            <a-button>批量操作
+            <a-button
+              >批量操作
               <Icon icon="mdi:chevron-down" />
             </a-button>
           </a-dropdown>
         </template>
 
-
         <!--操作栏-->
         <template #action="{ record }">
-          <TableAction :actions="getTableAction(record)"
-                       :dropDownActions="getDropDownAction(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>
+            <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>
+            <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>
+            <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-black-ip-modal ref="modalFormRef" @ok="reload"></adweb-black-ip-modal>
-    <xp-recycle-bin-modal ref="XpRecycleBinModalRef" @ok="getTableAndNum"/>
+    <adweb-black-ip-modal ref="modalFormRef" @ok="reload" />
+    <xp-recycle-bin-modal ref="XpRecycleBinModalRef" @ok="getTableAndNum" />
   </a-card>
 </template>
 
 <script lang="ts" name="AdwebBlackIpList" setup>
-
-import '/@/assets/less/common.less';
-import '/@/assets/less/TableExpand.less'
-
-import AdwebBlackIpModal from './modules/AdwebBlackIpModal.vue'
-
-import XpRecycleBinModal from './modules/XpRecycleBinModal.vue'
-import {nextTick, onMounted, reactive, ref} from "vue";
-
-import {batchDelete, deleteOne, getExportUrl, getImportUrl, list} from "./publicBlackIP.api";
-import {columns} from "./publicBlackIP.data";
-import {BasicTable, TableAction} from "@/components/Table";
-import {useListPage} from "@/hooks/system/useListPage";
-import {useCommonList} from "@/hooks/component/JeecgList";
-
-const description = ref('IP黑名单管理页面');
-const dictOptions = reactive({});
-const formRef = ref();
-let queryParam = reactive<any>({});
-const XpRecycleBinModalRef = ref();
-const modalFormRef = ref();
-let superFieldList = reactive([{type: '', value: '', text: '', dictCode: ''}]);
-
-//注册table数据
-const { prefixCls, tableContext, onExportXls, onImportXls } = useListPage({
-  tableProps: {
-    title: "公共邮箱黑名单",
-    api: list,
-    columns: columns,
-    canResize: false,
-    useSearchForm: false,
-    actionColumn: {
-      width: 180,
-      fixed: "right"
+  import '/@/assets/less/common.less';
+  import '/@/assets/less/TableExpand.less';
+
+  import AdwebBlackIpModal from './modules/AdwebBlackIpModal.vue';
+
+  import XpRecycleBinModal from './modules/XpRecycleBinModal.vue';
+  import { nextTick, onMounted, reactive, ref } from 'vue';
+
+  import { batchDelete, deleteOne, getExportUrl, getImportUrl, list } from './publicBlackIP.api';
+  import { columns } from './publicBlackIP.data';
+  import { BasicTable, TableAction } from '@/components/Table';
+  import { useListPage } from '@/hooks/system/useListPage';
+  import { useCommonList } from '@/hooks/component/JeecgList';
+
+  const description = ref('IP黑名单管理页面');
+  const dictOptions = reactive({});
+  const formRef = ref();
+  let queryParam = reactive<any>({});
+  const XpRecycleBinModalRef = ref();
+  const modalFormRef = ref();
+  let superFieldList = reactive([{ type: '', value: '', text: '', dictCode: '' }]);
+
+  //注册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);
+      },
     },
-    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: 'int', value: 'status', text: '状态', dictCode: ''})
-  superFieldList.push({type: 'string', value: 'ip', text: 'ip', dictCode: ''})
-  superFieldList.push({type: 'int', value: 'blackOrWhite', text: '黑白名单', dictCode: ''})
-}
-
-async function wasteNumVisible(ip) {
-  await nextTick();
-  XpRecycleBinModalRef.value.init(ip);
-}
-
-function getTableAndNum() {
-  // 设置默认站点
-  let siteId = queryParam.siteId;
-  let siteList = siteList;
-  for (let site of siteList) {
-    if (site.id === siteId) {
-      localStorage.setItem("siteCode", site.code);
-    }
+    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: 'int', value: 'status', text: '状态', dictCode: '' });
+    superFieldList.push({ type: 'string', value: 'ip', text: 'ip', dictCode: '' });
+    superFieldList.push({ type: 'int', value: 'blackOrWhite', text: '黑白名单', dictCode: '' });
   }
-  reload()
-}
 
-/**
- * 成功回调
- */
-function handleSuccess() {
-  (selectedRowKeys.value = []) && reload();
-}
+  async function wasteNumVisible(ip) {
+    await nextTick();
+    XpRecycleBinModalRef.value.init(ip);
+  }
 
+  function getTableAndNum() {
+    // 设置默认站点
+    let siteId = queryParam.siteId;
+    let siteList = siteList;
+    for (let site of siteList) {
+      if (site.id === siteId) {
+        localStorage.setItem('siteCode', site.code);
+      }
+    }
+    reload();
+  }
 
+  /**
+   * 成功回调
+   */
+  function handleSuccess() {
+    (selectedRowKeys.value = []) && reload();
+  }
 </script>

src/views/adweb/enquiryPublicRules/publicBlackip/modules/AdwebBlackIpForm.vue

@@ -6,7 +6,7 @@
           <a-row>
             <a-col :span="24">
               <a-form-item label="ip" :labelCol="labelCol" :wrapperCol="wrapperCol" :rules="[formRules.ip]">
-                <a-input  v-model:value="modelRef.ip" placeholder="请输入ip"  ></a-input>
+                <a-input v-model:value="modelRef.ip" placeholder="请输入ip" />
               </a-form-item>
             </a-col>
             <a-col :span="24">
@@ -28,44 +28,41 @@
 </template>
 
 <script lang="ts" setup name="AdwebBlackIpForm">
-
-  import { httpAction, getAction } from '/@/api/manage/manage'
-  import pick from 'lodash.pick'
+  import { httpAction, getAction } from '/@/api/manage/manage';
+  import pick from 'lodash.pick';
   import JFormContainer from '/@/components/Form/src/container/JFormContainer.vue';
-  import {useMessage} from "@/hooks/web/useMessage";
-  import {Form} from "ant-design-vue";
-  import {computed, onBeforeMount, reactive, ref, toRaw} from "vue";
+  import { useMessage } from '@/hooks/web/useMessage';
+  import { Form } from 'ant-design-vue';
+  import { computed, onBeforeMount, reactive, ref, toRaw } from 'vue';
 
-  const emit = defineEmits(["ok", "close"])
+  const emit = defineEmits(['ok', 'close']);
 
   const { createMessage } = useMessage();
 
   const useForm = Form.useForm;
 
-  const props = defineProps(
-    {
-      //流程表单data
-      formData: {
-        type: Object,
-        default: ()=>{},
-        required: false
-      },
-      //表单模式：true流程表单 false普通表单
-      formBpm: {
-        type: Boolean,
-        default: false,
-        required: false
-      },
-      //表单禁用
-      disabled: {
-        type: Boolean,
-        default: false,
-        required: false
-      }
-    }
-  );
+  const props = defineProps({
+    //流程表单data
+    formData: {
+      type: Object,
+      default: () => {},
+      required: false,
+    },
+    //表单模式：true流程表单 false普通表单
+    formBpm: {
+      type: Boolean,
+      default: false,
+      required: false,
+    },
+    //表单禁用
+    disabled: {
+      type: Boolean,
+      default: false,
+      required: false,
+    },
+  });
 
-  let modelRef = reactive({id: '', ip: '', blackOrWhite: null });
+  let modelRef = reactive({ id: '', ip: '', blackOrWhite: null });
 
   const labelCol = reactive({
     xs: { span: 24 },
@@ -79,19 +76,18 @@
 
   const confirmLoading = ref(false);
 
-  const url = reactive( {
-    add: "/blackip/adwebBlackIp/add",
-    edit: "/blackip/adwebBlackIp/edit",
-    queryById: "/blackip/adwebBlackIp/queryById"
+  const url = reactive({
+    add: '/blackip/adwebBlackIp/add',
+    edit: '/blackip/adwebBlackIp/edit',
+    queryById: '/blackip/adwebBlackIp/queryById',
   });
 
   const formRules = reactive({
     ip: [
-      { required: true, message: '请输入ip'},
-      { max: 31, message: '关键词长度不能超过31'}],
-    blackOrWhite: [
-      { required: true, message: '请输入黑白名单', trigger: 'blur' }
+      { required: true, message: '请输入ip' },
+      { max: 31, message: '关键词长度不能超过31' },
     ],
+    blackOrWhite: [{ required: true, message: '请输入黑白名单', trigger: 'blur' }],
   });
 
   const { validate } = useForm(modelRef, formRules);
@@ -150,27 +146,29 @@
         let httpUrl = '';
         let method = '';
 
-        if(!modelRef.id){
+        if (!modelRef.id) {
           httpUrl = url.add;
           method = 'post';
-        }else{
+        } else {
           httpUrl = url.edit;
           method = 'put';
         }
 
         let formData = toRaw(modelRef);
-        console.log("表单提交数据",formData)
-
-        httpAction(httpUrl, formData, method).then((res)=>{
-          if(res.success){
-            createMessage.success(res.message);
-            emit('ok');
-          }else{
-            createMessage.warning(res.message);
-          }
-        }).finally(() => {
-          confirmLoading.value = false;
-        })
+        console.log('表单提交数据', formData);
+
+        httpAction(httpUrl, formData, method)
+          .then((res) => {
+            if (res.success) {
+              createMessage.success(res.message);
+              emit('ok');
+            } else {
+              createMessage.warning(res.message);
+            }
+          })
+          .finally(() => {
+            confirmLoading.value = false;
+          });
       })
       .catch((err) => {
         console.log('error', err);

src/views/adweb/enquiryPublicRules/publicRuleList/AdwebEnquiryRuleList.vue

@@ -2,462 +2,226 @@
   <a-card :bordered="false">
     <!-- 查询区域 -->
     <div class="table-page-search-wrapper">
-      <a-form layout="inline" @keyup.enter.native="searchQuery">
+      <a-form ref="formRef" @keyup.enter.native="searchQuery" :model="queryParam">
         <a-row :gutter="24">
           <a-col :md="6" :sm="12">
-            <a-form-item label="关键词">
-              <a-input placeholder="输入关键词查询" v-model="queryParam.word"></a-input>
+            <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="黑白名单">
-              <a-select allowClear v-model="queryParam.blackOrWhiteList" placeholder="输入黑白名单类型">
+            <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="作用域">
-              <a-select allowClear v-model="queryParam.useStatus" placeholder="输入关键词状态类型">
+            <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="关键词状态">
-              <a-select allowClear v-model="queryParam.isEnable" placeholder="输入关键词状态类型">
+            <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" icon="search">查询</a-button>
-              <a-button ghost type="primary" @click="searchReset" icon="reload" style="margin-left: 8px">重置</a-button>
-              </span>
+            <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 -->
 
-    <!-- 操作按钮区域 -->
-    <div class="table-operator">
-      <a-button @click="handleAdd" type="primary" icon="plus">新增</a-button>
-      <a-button type="primary" icon="download" @click="handleExportXls('用于询盘规则过滤')">导出</a-button>
-      <a-upload name="file" :showUploadList="false" :multiple="false" :headers="tokenHeader" :action="importExcelUrl"
-                @change="handleImportExcel">
-        <a-button type="primary" icon="import">导入</a-button>
-      </a-upload>
-      <a-popover v-model:visible="outputVisible" title="请选择查询内容" trigger="click" >
-        <template #content>
-          <div style="width:100%;display:block;overflow:hidden">
-            <a-select show-search
-                      placeholder="请选择站点"
-                      :allowClear="true"
-                      option-filter-prop="children"
-                      :filter-option="filterOption"
-                      v-model="outputSiteCode" style="width: 300px">
-              <a-select-option v-for="data in siteinfo" :key="data.code" :value="data.code" :info="data">
-                {{ data.name }}
-              </a-select-option>
-            </a-select>
-            <br>
-            <a-range-picker
-              v-model:value="outputTime"
-              format="YYYY-MM-DD HH"
-              :disabled-date="disabledDate"
-              style="width: 300px; margin: 10px 0 10px 0;"
-            />
-          </div>
-          <a-button type="primary" :loading="outputLoading" @click="isOutputExcel">导出</a-button>
-        </template>
-        <a-button type="primary" @click="loadSiteList()">导出指定询盘</a-button>
-      </a-popover>
-
-      <a-dropdown v-if="selectedRowKeys.length > 0">
-        <a-menu slot="overlay">
-          <a-menu-item key="1" @click="batchDel">
-            <a-icon type="delete"/>
-            删除
-          </a-menu-item>
-        </a-menu>
-        <a-button style="margin-left: 8px"> 批量操作
-          <a-icon type="down"/>
-        </a-button>
-      </a-dropdown>
-    </div>
-
     <!-- table区域-begin -->
-    <div>
-      <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="onClearSelected">清空</a>
+    <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>
 
-      <a-table
-        ref="table"
-        size="middle"
-        :scroll="{x:true}"
-        bordered
-        rowKey="id"
-        :columns="columns"
-        :dataSource="dataSource"
-        :pagination="ipagination"
-        :loading="loading"
-        :rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}"
-        class="j-table-force-nowrap"
-        @change="handleTableChange">
-        <span slot="blackOrWhiteList_dictText" slot-scope="text, record">
-            <a-tag v-if="text === 0" color="red">黑名单</a-tag>
-            <a-tag v-else-if="text === 1">白名单</a-tag>
-            <a-tag v-else>--</a-tag>
-        </span>
+      <!--引用表格-->
+      <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>
 
-        <span slot="wasteEnquiryNum" slot-scope="text, record">
-           <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>
-        </span>
+        <!--操作栏-->
+        <template #action="{ record }">
+          <TableAction :actions="getTableAction(record)" :dropDownActions="getDropDownAction(record)" />
+        </template>
 
-        <span slot="isEnable_dictText" slot-scope="text, record">
-           <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>
-        </span>
-        <span slot="useStatus_dictText" slot-scope="text, record">
-           <a-tag v-if="text === 0" color="orange">询盘关键词</a-tag>
+        <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>
-        </span>
-
-        <span slot="action" slot-scope="text, record">
-          <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>
 
-      </a-table>
+          <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="modalForm" @ok="modalFormOk"></adweb-enquiry-rule-modal>
-    <xp-recycle-bin-modal ref="XpRecycleBinModal"/>
+    <adweb-enquiry-rule-modal ref="modalFormRef" @ok="reload" />
+    <xp-recycle-bin-modal ref="XpRecycleBinModalRef" />
   </a-card>
 </template>
 
-<script>
-
-import '@/assets/less/TableExpand.less'
-import {mixinDevice} from '@/utils/mixin'
-import {JeecgListMixin} from '@/mixins/JeecgListMixin'
-import AdwebEnquiryRuleModal from './modules/AdwebEnquiryRuleModal__Style.vue'
-import JSuperQuery from '@/components/jeecg/JSuperQuery.vue'
-import {downFile, getAction, postAction} from "@api/manage";
-import Vue from "vue";
-import {ACCESS_TOKEN} from "@/store/mutation-types";
-import {Modal} from "ant-design-vue";
-import store from "@/store";
-import moment from "moment";
-import dayjs from "dayjs";
-import XpRecycleBinModal from './modules/XpRecycleBinModal'
-
-export default {
-  name: 'AdwebEnquiryRuleList',
-  mixins: [JeecgListMixin, mixinDevice],
-  components: {
-    AdwebEnquiryRuleModal,
-    JSuperQuery,
-    XpRecycleBinModal,
-  },
-  data() {
-    return {
-      description: '用于询盘规则过滤管理页面',
-      // 表头
-      columns: [
-        {
-          title: '#',
-          dataIndex: '',
-          key: 'rowIndex',
-          width: 60,
-          align: "center",
-          customRender: function (t, r, index) {
-            return parseInt(index) + 1;
-          }
-        },
-        {
-          title: '关键词',
-          align: "center",
-          dataIndex: 'word'
-        },
-        {
-          title:'关键词翻译',
-          align:"center",
-          dataIndex: 'translateWord',
-          scopedSlots: {customRender: 'translateWord'}
-        },
-        {
-          title: '黑白名单',
-          align: "center",
-          dataIndex: 'blackOrWhiteList',
-          width: 180,
-          sorter: true,
-          scopedSlots: {customRender: 'blackOrWhiteList_dictText'}
-        },
-        {
-          title:'询盘数量',
-          align:"center",
-          dataIndex: 'wasteEnquiryNum',
-          scopedSlots: {customRender: 'wasteEnquiryNum'}
-        },
-        {
-          title: '作用域',
-          align: "center",
-          dataIndex: 'useStatus',
-          width: 180,
-          sorter: true,
-          scopedSlots: {customRender: 'useStatus_dictText'}
-        },
-        {
-          title: '状态',
-          align: "center",
-          dataIndex: 'isEnable',
-          width: 180,
-          sorter: true,
-          scopedSlots: {customRender: 'isEnable_dictText'}
-        },
-        {
-          title: '创建时间',
-          align: "center",
-          dataIndex: 'createTime',
-          width: 180,
-          sorter: true
-        },
-        {
-          title: '操作',
-          dataIndex: 'action',
-          align: "center",
-          fixed: "right",
-          width: 147,
-          scopedSlots: {customRender: 'action'}
-        }
-      ],
-      url: {
-        list: "/adweb/adwebEnquiryRule/list",
-        delete: "/adweb/adwebEnquiryRule/delete",
-        deleteBatch: "/adweb/adwebEnquiryRule/deleteBatch",
-        exportXlsUrl: "/adweb/adwebEnquiryRule/exportXls",
-        importExcelUrl: "adweb/adwebEnquiryRule/importExcel",
-        enquiryOutputExcelUrl: "/adweb/adwebEnquiry/enquiryOutputExcel",
-
+<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);
       },
-      dictOptions: {},
-      superFieldList: [],
-      outputVisible: false,
-      showOutput: false,
-      outputTime: [],
-      outputSiteCode: undefined,
-      siteinfo: {},
-      outputLoading: false,
-
-    }
-  },
-  created() {
-    this.getSuperFieldList();
-  },
-  computed: {
-    importExcelUrl: function () {
-      return `${window._CONFIG['domianURL']}/${this.url.importExcelUrl}`;
-    },
-  },
-  methods: {
-    initDictConfig() {
-    },
-    getSuperFieldList() {
-      let fieldList = [];
-      fieldList.push({type: 'string', value: 'word', text: '关键词', dictCode: ''})
-      fieldList.push({type: 'int', value: 'blackOrWhiteList', text: '黑名单或白名单0为黑名单，1为白名单', dictCode: ''})
-      fieldList.push({type: 'int', value: 'isEnable', text: '是否启用该字段1为启用0为停用', dictCode: ''})
-      this.superFieldList = fieldList
-    },
-    handleExportXls(fileName){
-      if(!fileName || typeof fileName != "string"){
-        fileName = "导出文件"
-      }
-      let param = this.getQueryParams();
-      if(this.selectedRowKeys && this.selectedRowKeys.length>0){
-        param['selections'] = this.selectedRowKeys.join(",")
-      }
-      console.log("导出参数",param)
-      downFile(this.url.exportXlsUrl,param).then((data)=>{
-        if (!data) {
-          this.$message.warning("文件下载失败")
-          return
-        }
-        if (typeof window.navigator.msSaveBlob !== 'undefined') {
-          window.navigator.msSaveBlob(new Blob([data],{type: 'application/vnd.ms-excel'}), fileName+'.xlsx')
-        }else{
-          let url = window.URL.createObjectURL(new Blob([data],{type: 'application/vnd.ms-excel'}))
-          let link = document.createElement('a')
-          link.style.display = 'none'
-          link.href = url
-          link.setAttribute('download', fileName+'.xlsx')
-          document.body.appendChild(link)
-          link.click()
-          document.body.removeChild(link); //下载完成移除元素
-          window.URL.revokeObjectURL(url); //释放掉blob对象
-        }
-      })
-    },
-    handleImportExcel(info){
-      if (info.file.status !== 'uploading') {
-        console.log(info.file, info.fileList);
-      }
-      if (info.file.status === 'done') {
-        if (info.file.response.success) {
-          // this.$message.success(`${info.file.name} 文件上传成功`);
-          if (info.file.response.code === 201) {
-            let { message, result: { msg, fileUrl, fileName } } = info.file.response
-            let href = window._CONFIG['domianURL'] + fileUrl
-            this.$warning({
-              title: message,
-              content: (
-                <div>
-                  <span>{msg}</span><br/>
-                  <span>具体详情请 <a href={href} target="_blank" download={fileName}>点击下载</a> </span>
-                </div>
-              )
-            })
-          } else {
-            this.$message.success(info.file.response.message || `${info.file.name} 文件上传成功`)
-          }
-          this.loadData()
-        } else {
-          this.$message.error(`${info.file.name} ${info.file.response.message}.`);
-        }
-      } else if (info.file.status === 'error') {
-        if (info.file.response.status === 500) {
-          let data = info.file.response
-          const token = Vue.ls.get(ACCESS_TOKEN)
-          if (token && data.message.includes("Token失效") && !window.location.href.includes('login')) {
-            Modal.error({
-              title: '登录已过期',
-              content: '很抱歉，登录已过期，请重新登录',
-              okText: '重新登录',
-              mask: false,
-              onOk: () => {
-                store.dispatch('Logout').then(() => {
-                  Vue.ls.remove(ACCESS_TOKEN)
-                  window.location.reload();
-                })
-              }
-            })
-          }
-        } else {
-          this.$message.error(`文件上传失败: ${info.file.msg} `);
-        }
-      }
-    },
-    searchQuery() {
-      //去除前后空格
-      if (this.queryParam.word) {
-        this.queryParam.word = this.queryParam.word.replace(/^\s*\*\s|\s*\*\s*$/g, '');
-      }
-      this.loadData(1);
-      this.onClearSelected()
-    },
-    //站点搜索
-    filterOption(input, option) {
-      return (
-        option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
-      )
     },
-    disabledDate(current) {
-      return current && current > dayjs().endOf('day');
+    exportConfig: {
+      name: '询盘列表',
+      url: getExportUrl,
+      params: queryParam,
     },
-    loadSiteList(){
-      const that = this;
-      if (that.siteinfo.length > 0) {
-        return;
-      }
-      getAction('/sys/api/getSiteListByUid').then(function (res) {
-        if (res.code == 0) {
-          that.siteinfo = res.data
-        }else {
-          that.$message.error('站点获取失败，请刷新重试')
-        }
-      })
+    importConfig: {
+      url: getImportUrl,
+      success: handleSuccess,
     },
-    isOutputExcel(){
-      const that = this;
-      that.outputLoading = true;
-      let params = {};
-      const startTime = moment(that.outputTime[0]).set({'minute': 0, 'second': 0}).format('YYYY-MM-DD HH:mm:ss');
-      const endTime = moment(that.outputTime[1]).set({'minute': 0, 'second': 0}).format('YYYY-MM-DD HH:mm:ss');
-      if (that.outputTime && startTime !== endTime) {
-        params.startTime = startTime;
-        params.endTime = endTime;
-      }
-      if (that.outputSiteCode){
-        params.siteCode = that.outputSiteCode;
-      }
-      downFile(that.url.enquiryOutputExcelUrl,params).then((res)=>{
-        that.outputLoading = false;
-        if (!res) {
-          this.$message.warning("文件下载失败")
-          return
-        }
-        if (res.code === 500){
-          this.$message.error(res.message)
-          return;
-        }
+  });
 
+  const [
+    registerTable,
+    { reload, clearSelectedRowKeys, updateTableDataRecord, findTableDataRecord, getDataSource },
+    { rowSelection, selectedRowKeys },
+  ] = tableContext;
 
-        if (typeof window.navigator.msSaveBlob !== 'undefined') {
-          window.navigator.msSaveBlob(new Blob([res],{type: 'application/vnd.ms-excel'}), fileName+'.xlsx')
-        }else{
-          let url = window.URL.createObjectURL(new Blob([res],{type: 'application/vnd.ms-excel'}))
-          let link = document.createElement('a')
-          link.style.display = 'none'
-          link.href = url
-          link.setAttribute('download', '导出询盘'+moment().format("HH:mm:ss")+'.xlsx')
-          document.body.appendChild(link)
-          link.click()
-          document.body.removeChild(link); //下载完成移除元素
-          window.URL.revokeObjectURL(url); //释放掉blob对象
-        }
-      }).catch((err)=> {
-        that.outputLoading = false
-      })
-    },
-    wasteNumVisible(keyword){
-      this.$nextTick(() => {
-        this.$refs.XpRecycleBinModal.init(keyword);
-      })
-    },
+  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>
-<style scoped>
-@import '~@assets/less/common.less';
-</style>

src/views/adweb/enquiryPublicRules/publicRuleList/modules/AdwebEnquiryRuleForm.vue

@@ -1,217 +1,178 @@
 <template>
   <a-spin :spinning="confirmLoading">
     <j-form-container :disabled="formDisabled">
-      <a-form :form="form" slot="detail">
-        <a-row>
-          <a-col :span="24">
-            <a-form-item label="关键词" :labelCol="labelCol" :wrapperCol="wrapperCol">
-              <a-input v-decorator="['word',formRules.word]" placeholder="请输入关键词"  ></a-input>
-            </a-form-item>
-          </a-col>
-          <a-col :span="24">
-            <a-form-item label="关键词翻译" :labelCol="labelCol" :wrapperCol="wrapperCol">
-              <a-input v-decorator="['translateWord',formRules.translateWord]" placeholder="请输入关键词翻译"  ></a-input>
-            </a-form-item>
-          </a-col>
-          <a-col :span="24">
-            <a-form-item label="黑白名单" :labelCol="labelCol" :wrapperCol="wrapperCol">
-              <a-select v-decorator="['blackOrWhiteList',formRules.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 :span="24">
-            <a-form-item label="作用域" :labelCol="labelCol" :wrapperCol="wrapperCol">
-              <a-select v-decorator="['useStatus',formRules.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 :span="24">
-            <a-form-item label="状态" :labelCol="labelCol" :wrapperCol="wrapperCol">
-              <a-select v-decorator="['isEnable',formRules.isEnable]" placeholder="请选择是否启用该关键词">
-                <a-select-option :value="1">启用</a-select-option>
-                <a-select-option :value="0">停用</a-select-option>
-              </a-select>
-            </a-form-item>
-          </a-col>
-          <a-col v-if="showFlowSubmitButton" :span="24" style="text-align: center">
-            <a-button @click="submitForm">提 交</a-button>
-          </a-col>
-        </a-row>
-      </a-form>
+      <template #detail>
+        <a-form ref="formRef" :model="modelRef">
+          <a-row>
+            <a-col :span="24">
+              <a-form-item name="word" label="关键词" :labelCol="labelCol" :wrapperCol="wrapperCol">
+                <a-input allow-clear :rules="formRules.word" v-model:value="modelRef.word" placeholder="请输入关键词" />
+              </a-form-item>
+            </a-col>
+            <a-col :span="24">
+              <a-form-item name="translateWord" label="关键词翻译" :labelCol="labelCol" :wrapperCol="wrapperCol">
+                <a-input allow-clear v-model:value="modelRef.translateWord" placeholder="请输入关键词翻译" />
+              </a-form-item>
+            </a-col>
+            <a-col :span="24">
+              <a-form-item name="blackOrWhiteList" label="黑白名单" :labelCol="labelCol" :wrapperCol="wrapperCol">
+                <a-select allow-clear v-model:value="modelRef.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 :span="24">
+              <a-form-item name="useStatus" label="作用域" :labelCol="labelCol" :wrapperCol="wrapperCol">
+                <a-select allow-clear v-model:value="modelRef.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 :span="24">
+              <a-form-item allow-clear name="isEnable" label="状态" :labelCol="labelCol" :wrapperCol="wrapperCol">
+                <a-select v-model:value="modelRef.isEnable" placeholder="请选择是否启用该关键词">
+                  <a-select-option :value="1">启用</a-select-option>
+                  <a-select-option :value="0">停用</a-select-option>
+                </a-select>
+              </a-form-item>
+            </a-col>
+            <a-col v-if="showFlowSubmitButton" :span="24" style="text-align: center">
+              <a-button @click="submitForm">提 交</a-button>
+            </a-col>
+          </a-row>
+        </a-form>
+      </template>
     </j-form-container>
   </a-spin>
 </template>
 
-<script>
+<script lang="ts" setup name="AdwebEnquiryRuleForm">
+  import { httpAction } from '/@/api/manage/manage';
+  import pick from 'lodash.pick';
+  import JFormContainer from '/@/components/Form/src/container/JFormContainer.vue';
+  import { useMessage } from '@/hooks/web/useMessage';
 
-  import { httpAction, getAction } from '@/api/manage'
-  import pick from 'lodash.pick'
-  import { validateDuplicateValue } from '@/utils/util'
-  import JFormContainer from '@/components/jeecg/JFormContainer'
-  import JDictSelectTag from "@/components/dict/JDictSelectTag"
+  import { computed, reactive, ref } from 'vue';
+  import { any } from 'vue-types';
 
-  export default {
-    name: 'AdwebEnquiryRuleForm',
-    components: {
-      JFormContainer,
-      JDictSelectTag,
+  const emit = defineEmits(['ok', 'close']);
+
+  const { createMessage } = useMessage();
+
+  const props = defineProps({
+    //流程表单data
+    formData: {
+      type: Object,
+      default: () => {},
+      required: false,
     },
-    props: {
-      //流程表单data
-      formData: {
-        type: Object,
-        default: ()=>{},
-        required: false
-      },
-      //表单模式：true流程表单 false普通表单
-      formBpm: {
-        type: Boolean,
-        default: false,
-        required: false
-      },
-      //表单禁用
-      disabled: {
-        type: Boolean,
-        default: false,
-        required: false
-      }
+    //表单模式：true流程表单 false普通表单
+    formBpm: {
+      type: Boolean,
+      default: false,
+      required: false,
     },
-    data () {
-      return {
-        form: this.$form.createForm(this),
-        model: {},
-        labelCol: {
-          xs: { span: 24 },
-          sm: { span: 5 },
-        },
-        wrapperCol: {
-          xs: { span: 24 },
-          sm: { span: 16 },
-        },
-        confirmLoading: false,
-        validatorRules: {
-        },
-        url: {
-          add: "/adweb/adwebEnquiryRule/add",
-          edit: "/adweb/adwebEnquiryRule/edit",
-          queryById: "/adweb/adwebEnquiryRule/queryById"
-        },
-        formRules: {
-          word: {
-            rules: [
-              { required: true, message: '请输入关键词'},
-              { max: 100, message: '关键词长度不能超过100'},
-            ],
-            trigger: 'blur'
-          },
-          useStatus: {
-            initialValue: 0,
-            rules: [
-              { required: true, message: '请选择作用域'},
-            ],
-          },
-          blackOrWhiteList: {
-            initialValue: 0,
-            rules: [
-              { required: true, message: '请选择黑白名单'},
-            ],
-          },
-          isEnable: {
-            initialValue: 1,
-            rules: [
-              { required: true, message: '请选择是否启用该关键词' },
-            ],
-          },
-          translateWord: {
-
-          }
-        },
-      }
+    //表单禁用
+    disabled: {
+      type: Boolean,
+      default: false,
+      required: false,
     },
-    computed: {
-      formDisabled(){
-        if(this.formBpm===true){
-          if(this.formData.disabled===false){
-            return false
-          }
-          return true
-        }
-        return this.disabled
-      },
-      showFlowSubmitButton(){
-        if(this.formBpm===true){
-          if(this.formData.disabled===false){
-            return true
-          }
-        }
-        return false
+  });
+
+  let modelRef = reactive({ id: '', word: '', translateWord: '', blackOrWhiteList: any, useStatus: any, isEnable: any });
+
+  const labelCol = reactive({
+    xs: { span: 24 },
+    sm: { span: 5 },
+  });
+
+  const wrapperCol = reactive({
+    xs: { span: 24 },
+    sm: { span: 16 },
+  });
+
+  const confirmLoading = ref(false);
+
+  const url = reactive({
+    add: '/adweb/adwebEnquiryRule/add',
+    edit: '/adweb/adwebEnquiryRule/edit',
+    queryById: '/adweb/adwebEnquiryRule/queryById',
+  });
+
+  const formRules = reactive({
+    word: [
+      { required: true, message: '请输入关键词' },
+      { max: 100, message: '关键词长度不能超过100' },
+    ],
+    useStatus: [{ required: true, message: '请选择作用域' }],
+    blackOrWhiteList: [{ required: true, message: '请选择黑白名单' }],
+    isEnable: [{ required: true, message: '请选择是否启用该关键词' }],
+  });
+
+  const formRef = ref();
+  // 定义一个计算属性
+  const formDisabled = computed(() => {
+    if (props.formBpm === true) {
+      return props.formData.disabled !== false;
+    }
+    return props.disabled;
+  });
+
+  const showFlowSubmitButton = computed(() => {
+    if (props.formBpm === true) {
+      if (props.formData.disabled === false) {
+        return true;
       }
-    },
-    created () {
-      //如果是流程中表单，则需要加载流程表单data
-      this.showFlowData();
-    },
-    methods: {
-      add () {
-        this.edit({});
-      },
-      edit (record) {
-        this.form.resetFields();
-        this.model = Object.assign({}, record);
-        this.visible = true;
-        this.$nextTick(() => {
-          this.form.setFieldsValue(pick(this.model,'word','translateWord','blackOrWhiteList','isEnable'))
-        })
-      },
-      //渲染流程表单数据
-      showFlowData(){
-        if(this.formBpm === true){
-          let params = {id:this.formData.dataId};
-          getAction(this.url.queryById,params).then((res)=>{
-            if(res.success){
-              this.edit (res.result);
-            }
-          });
-        }
-      },
-      submitForm () {
-        const that = this;
-        // 触发表单验证
-        this.form.validateFields((err, values) => {
-          if (!err) {
-            that.confirmLoading = true;
-            let httpurl = '';
-            let method = '';
-            if(!this.model.id){
-              httpurl+=this.url.add;
-              method = 'post';
-            }else{
-              httpurl+=this.url.edit;
-               method = 'put';
-            }
-            let formData = Object.assign(this.model, values);
-            console.log("表单提交数据",formData)
-            httpAction(httpurl,formData,method).then((res)=>{
-              if(res.success){
-                that.$message.success(res.message);
-                that.$emit('ok');
-              }else{
-                that.$message.warning(res.message);
-              }
-            }).finally(() => {
-              that.confirmLoading = false;
-            })
-          }
-
-        })
-      },
-      popupCallback(row){
-        this.form.setFieldsValue(pick(row,'word','blackOrWhiteList','isEnable'))
-      },
+    }
+    return false;
+  });
+
+  function add() {
+    edit({});
+  }
+
+  function edit(record) {
+    if (Object.keys(record).length === 0) {
+      formRef.value.resetFields();
+      modelRef = reactive({ id: '', word: '', translateWord: '', blackOrWhiteList: 0, useStatus: 0, isEnable: 1 });
+    } else {
+      console.log(record, 'record');
+      Object.assign(modelRef, pick(record, 'id', 'word', 'translateWord', 'blackOrWhiteList', 'useStatus', 'isEnable'));
     }
   }
-</script>
+
+  async function submitForm() {
+    // 触发表单验证
+    await formRef.value.validateFields();
+    confirmLoading.value = true;
+
+    let httpurl = '';
+    let method = '';
+    if (!modelRef.id) {
+      httpurl += url.add;
+      method = 'post';
+    } else {
+      httpurl += url.edit;
+      method = 'put';
+    }
+
+    console.log('表单提交数据', modelRef);
+    httpAction(httpurl, modelRef, method)
+      .then((res) => {
+        if (res.code === 200) {
+          createMessage.success(res.message);
+          emit('ok');
+        } else {
+          createMessage.warning(res.message);
+        }
+      })
+      .finally(() => {
+        confirmLoading.value = false;
+      });
+  }
+
+  defineExpose({ add, edit, submitForm });
+</script>

src/views/adweb/enquiryPublicRules/publicRuleList/modules/AdwebEnquiryRuleModal.vue

@@ -0,0 +1,75 @@
+<template>
+  <a-drawer :title="title" :width="width" placement="right" :closable="false" @close="close" :visible="visible">
+    <adweb-enquiry-rule-form ref="realFormRef" @ok="submitCallback" :disabled="disableSubmit" normal />
+    <div class="drawer-footer">
+      <a-button @click="handleCancel" style="margin-bottom: 0">关闭</a-button>
+      <a-button v-if="!disableSubmit" @click="handleOk" type="primary" style="margin-bottom: 0">提交</a-button>
+    </div>
+  </a-drawer>
+</template>
+
+<script lang="ts" setup name="AdwebEnquiryRuleModal">
+  import AdwebEnquiryRuleForm from './AdwebEnquiryRuleForm.vue';
+  import { nextTick, ref } from 'vue';
+
+  const title = ref('操作');
+  const width = ref(800);
+  const visible = ref(false);
+  const disableSubmit = ref(false);
+  const realFormRef = ref();
+  const emit = defineEmits(['close', 'ok']);
+
+  function add() {
+    visible.value = true;
+
+    nextTick().then(() => {
+      realFormRef.value.add();
+    });
+  }
+
+  function edit(record) {
+    visible.value = true;
+    nextTick().then(() => {
+      realFormRef.value.edit(record);
+    });
+  }
+
+  function close() {
+    emit('close');
+    visible.value = false;
+  }
+
+  function submitCallback() {
+    emit('ok');
+    visible.value = false;
+  }
+
+  function handleOk() {
+    realFormRef.value.submitForm();
+  }
+
+  function handleCancel() {
+    close();
+  }
+  defineExpose({ title, disableSubmit, add, edit });
+</script>
+
+<style lang="less" scoped>
+  /** Button按钮间距 */
+  .ant-btn {
+    margin-left: 30px;
+    margin-bottom: 30px;
+    float: right;
+  }
+  .drawer-footer {
+    position: absolute;
+    bottom: -8px;
+    width: 100%;
+    border-top: 1px solid #e8e8e8;
+    padding: 10px 16px;
+    text-align: right;
+    left: 0;
+    background: #fff;
+    border-radius: 0 0 2px 2px;
+  }
+</style>

src/views/adweb/enquiryPublicRules/publicRuleList/modules/AdwebEnquiryRuleModal__Style.vue

@@ -1,83 +0,0 @@
-<template>
-  <a-drawer
-    :title="title"
-    :width="width"
-    placement="right"
-    :closable="false"
-    @close="close"
-    :visible="visible">
-    <adweb-enquiry-rule-form ref="realForm" @ok="submitCallback" :disabled="disableSubmit" normal></adweb-enquiry-rule-form>
-    <div class="drawer-footer">
-      <a-button @click="handleCancel" style="margin-bottom: 0;">关闭</a-button>
-      <a-button v-if="!disableSubmit"  @click="handleOk" type="primary" style="margin-bottom: 0;">提交</a-button>
-    </div>
-  </a-drawer>
-</template>
-
-<script>
-
-  import AdwebEnquiryRuleForm from './AdwebEnquiryRuleForm'
-
-  export default {
-    name: 'AdwebEnquiryRuleModal',
-    components: {
-      AdwebEnquiryRuleForm
-    },
-    data () {
-      return {
-        title:"操作",
-        width:800,
-        visible: false,
-        disableSubmit: false
-      }
-    },
-    methods: {
-      add () {
-        this.visible=true
-        this.$nextTick(()=>{
-          this.$refs.realForm.add();
-        })
-      },
-      edit (record) {
-        this.visible=true
-        this.$nextTick(()=>{
-          this.$refs.realForm.edit(record);
-        });
-      },
-      close () {
-        this.$emit('close');
-        this.visible = false;
-      },
-      submitCallback(){
-        this.$emit('ok');
-        this.visible = false;
-      },
-      handleOk () {
-        this.$refs.realForm.submitForm();
-      },
-      handleCancel () {
-        this.close()
-      }
-    }
-  }
-</script>
-
-<style lang="less" scoped>
-/** Button按钮间距 */
-  .ant-btn {
-    margin-left: 30px;
-    margin-bottom: 30px;
-    float: right;
-  }
-  .drawer-footer{
-    position: absolute;
-    bottom: -8px;
-    width: 100%;
-    border-top: 1px solid #e8e8e8;
-    padding: 10px 16px;
-    text-align: right;
-    left: 0;
-    background: #fff;
-    border-radius: 0 0 2px 2px;
-  }
-</style>

src/views/adweb/enquiryPublicRules/publicRuleList/modules/XpRecycleBinModal.vue

@@ -6,118 +6,113 @@
     :destroyOnClose="true"
     @cancel="handleCancel"
     cancelText="关闭"
-    :okButtonProps="{style:{display:'none'}}">
-
-
-    <a-form-model layout="inline" @keyup.enter.native="searchQuery" style="margin-bottom:15px">
+    :okButtonProps="{ style: { display: 'none' } }"
+  >
+    <a-form-model layout="inline" @keyup.enter.native="searchQuery" style="margin-bottom: 15px">
       <a-form-model-item>
-        <a-input placeholder="邮箱/姓名" v-model="queryParam.searchText"></a-input>
+        <a-input placeholder="邮箱/姓名" v-model="queryParam.searchText" />
       </a-form-model-item>
       <a-form-model-item>
         <a-button type="primary" @click="searchQuery">查询</a-button>
-        <a-button  @click="searchReset" style="margin-left:8px">重置</a-button>
+        <a-button @click="searchReset" style="margin-left: 8px">重置</a-button>
       </a-form-model-item>
     </a-form-model>
 
-    <a-table
-      ref="table"
-      size="middle"
-      :columns="columns"
-      :loading="loading"
-      :dataSource="dataSource"
-      >
+    <a-table ref="table" size="middle" :columns="columns" :loading="loading" :dataSource="dataSource">
       <!-- 显示头像 -->
-      <template slot="avatarslot" slot-scope="text, record, index">
+      <template #avatarslot="text, record, index">
         <div class="anty-img-wrap">
-          <a-avatar shape="square" :src="url.getAvatar(record.avatar)" icon="user"/>
+          <a-avatar shape="square" :src="url.getAvatar(record.avatar)" icon="user" />
         </div>
       </template>
-      <div slot="contactSlot" slot-scope="text, record">
-        <a-popover>
-          <template slot="content">
-            {{text}}
-          </template>
-          <div style="width: 100px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis">{{text}}</div>
-        </a-popover>
-      </div>
-      <span slot="action" slot-scope="text, record">
-        <a @click="enquiryDetail(record)"> 详情</a>
-      </span>
+      <template #contactSlot="text, record">
+        <div>
+          <a-popover>
+            <template #content>
+              {{ text }}
+            </template>
+            <div style="width: 100px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis">{{ text }}</div>
+          </a-popover>
+        </div>
+      </template>
+      <template #action="text, record">
+        <span>
+          <a @click="enquiryDetail(record)"> 详情</a>
+        </span>
+      </template>
     </a-table>
     <!--询盘详情-->
-    <enquiry-detail ref="enquiryDetail"></enquiry-detail>
+    <enquiry-detail ref="enquiryDetail" />
   </a-modal>
 </template>
 
 <script>
-import { putAction, deleteAction, postAction, getAction } from '@/api/manage'
-  import { JeecgListMixin } from '@/mixins/JeecgListMixin'
-  import enquiryDetail from '@views/adweb/enquiry/modules/enquiryDetail'
+  import { putAction, deleteAction, postAction, getAction } from '/@/api/manage/manage';
+
+  import enquiryDetail from '/@/views/adweb/enquiry/modules/enquiryDetail.vue';
 
   export default {
     name: 'XpRecycleBinModal',
-    mixins: [JeecgListMixin],
-    components:{enquiryDetail},
+    components: { enquiryDetail },
     data() {
       return {
         title: '',
         loading: false,
         innerVisible: false,
         dataSource: [],
-        visible:false,
+        visible: false,
         columns: [],
         url: {
           list: '/adweb/adwebEnquiry/getWastedEnquiry',
         },
-        disableMixinCreated:true,
-        keyword:'',
-      }
+        disableMixinCreated: true,
+        keyword: '',
+      };
     },
 
     methods: {
-      init(keyword){
-        let that = this
+      init(keyword) {
+        let that = this;
         that.columns = [
-            { title: '站点名称', align: 'left', dataIndex: 'siteName', scopedSlots: { customRender: 'contactSlot' }},
-            { title: '姓名', align: 'left', dataIndex: 'contact', scopedSlots: { customRender: 'contactSlot' }},
-            { title: '邮箱', align: 'left', dataIndex: 'fromEmail', scopedSlots: { customRender: 'contactSlot' } },
-            { title: '电话', align: 'left', dataIndex: 'phone' },
-            { title: '询盘时间', align: 'left', dataIndex: 'recordCtime' },
-            { title: '操作', align: 'center', dataIndex: 'action', scopedSlots: { customRender: 'action' } }
-          ]
-        that.keyword = keyword
+          { title: '站点名称', align: 'left', dataIndex: 'siteName', scopedSlots: { customRender: 'contactSlot' } },
+          { title: '姓名', align: 'left', dataIndex: 'contact', scopedSlots: { customRender: 'contactSlot' } },
+          { title: '邮箱', align: 'left', dataIndex: 'fromEmail', scopedSlots: { customRender: 'contactSlot' } },
+          { title: '电话', align: 'left', dataIndex: 'phone' },
+          { title: '询盘时间', align: 'left', dataIndex: 'recordCtime' },
+          { title: '操作', align: 'center', dataIndex: 'action', scopedSlots: { customRender: 'action' } },
+        ];
+        that.keyword = keyword;
         that.loadData(keyword);
-        console.log(keyword)
-        that.visible = true
+        console.log(keyword);
+        that.visible = true;
       },
 
       //询盘详情
-      enquiryDetail(record){
+      enquiryDetail(record) {
         this.$nextTick(() => {
-          this.$refs.enquiryDetail.init(record)
-        })
+          this.$refs.enquiryDetail.init(record);
+        });
       },
       searchQuery() {
         this.loadData(this.keyword);
       },
 
       searchReset() {
-        this.queryParam = {}
+        this.queryParam = {};
         this.loadData(this.keyword);
       },
 
-
       handleCancel() {
-        this.queryParam = {}
-        this.visible = false
+        this.queryParam = {};
+        this.visible = false;
       },
 
       loadData(keyword) {
-        if(!this.url.list){
-          this.$message.error("请设置url.list属性!")
-          return
+        if (!this.url.list) {
+          this.$message.error('请设置url.list属性!');
+          return;
         }
-        var params = this.getQueryParams();//查询条件
+        var params = this.getQueryParams(); //查询条件
         this.loading = true;
         params.keyword = keyword;
         params.wasteEnquiryType = 'keyword';
@@ -125,15 +120,14 @@ import { putAction, deleteAction, postAction, getAction } from '@/api/manage'
           if (res.success) {
             this.dataSource = res.result;
           }
-          if(res.code===510){
-            this.$message.warning(res.message)
+          if (res.code === 510) {
+            this.$message.warning(res.message);
           }
           this.loading = false;
-        })
+        });
       },
-
-    }
-  }
+    },
+  };
 </script>
 
-<style lang="less" scoped></style>
+<style lang="less" scoped></style>

src/views/adweb/enquiryPublicRules/publicRuleList/publicRuleList.api.ts

@@ -0,0 +1,71 @@
+import { defHttp } from '/@/utils/http/axios';
+import { useMessage } from '/@/hooks/web/useMessage';
+
+const { createConfirm } = useMessage();
+
+enum Api {
+  list = '/adweb/adwebEnquiryRule/list',
+  deleteOne = '/adweb/adwebEnquiryRule/delete',
+  deleteBatch = '/adweb/adwebEnquiryRule/deleteBatch',
+  importExcel = 'adweb/adwebEnquiryRule/importExcel',
+  exportXls = '/adweb/adwebEnquiryRule/exportXls',
+  enquiryOutputExcelUrl = '/adweb/adwebEnquiry/enquiryOutputExcel',
+}
+
+/**
+ * 导出api
+ * @param params
+ */
+export const getExportUrl = Api.exportXls;
+
+/**
+ * 导入api
+ */
+export const getImportUrl = Api.importExcel;
+
+/**
+ * 列表接口
+ * @param params
+ */
+export const list = (params) => defHttp.get({ url: Api.list, params });
+
+/**
+ * 删除单个
+ * @param params
+ * @param handleSuccess
+ */
+export const deleteOne = (params, handleSuccess) => {
+  return defHttp.delete({ url: Api.deleteOne, params }, { joinParamsToUrl: true }).then(() => {
+    handleSuccess();
+  });
+};
+
+/**
+ * 批量删除
+ * @param params
+ * @param handleSuccess
+ */
+export const batchDelete = (params, handleSuccess) => {
+  createConfirm({
+    iconType: 'warning',
+    title: '确认删除',
+    content: '是否删除选中数据',
+    okText: '确认',
+    cancelText: '取消',
+    onOk: () => {
+      return defHttp.delete({ url: Api.deleteBatch, data: params }, { joinParamsToUrl: true }).then(() => {
+        handleSuccess();
+      });
+    },
+  });
+};
+
+/**
+ * 保存或者更新
+ * @param params
+ * @param isUpdate
+ */
+export const saveOrUpdate = (params, isUpdate) => {
+  const url = isUpdate ? Api.edit : Api.save;
+  return defHttp.post({ url: url, params }, { isTransformResponse: false });
+};

src/views/adweb/enquiryPublicRules/publicRuleList/publicRuleList.data.ts

@@ -0,0 +1,57 @@
+import { BasicColumn } from '@/components/Table';
+
+export const columns: BasicColumn[] = [
+  {
+    title: '序号',
+    dataIndex: '',
+    key: 'rowIndex',
+    width: 60,
+    align: 'center',
+    customRender: function ({ index }) {
+      return parseInt(index) + 1;
+    },
+  },
+  {
+    title: '关键词',
+    align: 'center',
+    dataIndex: 'word',
+  },
+  {
+    title: '关键词翻译',
+    align: 'center',
+    dataIndex: 'translateWord',
+  },
+  {
+    title: '黑白名单',
+    align: 'center',
+    dataIndex: 'blackOrWhiteList',
+    width: 180,
+    sorter: true,
+  },
+  {
+    title: '询盘数量',
+    align: 'center',
+    dataIndex: 'wasteEnquiryNum',
+  },
+  {
+    title: '作用域',
+    align: 'center',
+    dataIndex: 'useStatus',
+    width: 180,
+    sorter: true,
+  },
+  {
+    title: '状态',
+    align: 'center',
+    dataIndex: 'isEnable',
+    width: 180,
+    sorter: true,
+  },
+  {
+    title: '创建时间',
+    align: 'center',
+    dataIndex: 'createTime',
+    width: 180,
+    sorter: true,
+  },
+];

src/views/adweb/enquirySiteRules/siteBlackEmail/EnquirySiteBlackEmailList.vue

@@ -2,247 +2,171 @@
   <a-card :bordered="false">
     <!-- 查询区域 -->
     <div class="table-page-search-wrapper">
-      <a-form layout="inline" @keyup.enter.native="searchQuery">
+      <a-form ref="formRef" @keyup.enter.native="searchQuery" :model="queryParam">
         <a-row :gutter="24">
           <a-col :xl="6" :sm="12">
-            <a-form-item label="站点">
-              <a-select placeholder="请选择站点" v-model="queryParam.siteId" showSearch :filterOption="filterOption" allowClear>
-                <a-select-option v-for="option in siteOptions" :key="option.id" :value="option.id">{{option.name}}</a-select-option>
-              </a-select>
-            </a-form-item>
+            <select-site ref="selectSiteRef" @set-site-info="getSiteList" />
           </a-col>
           <a-col :md="6" :sm="12">
-            <a-form-item label="邮箱">
-              <a-input placeholder="请输入邮箱" v-model="queryParam.email"></a-input>
+            <a-form-item name="email">
+              <a-input placeholder="请输入邮箱" v-model:value="queryParam.email" allowClear />
             </a-form-item>
           </a-col>
           <a-col :md="6" :sm="10">
-            <a-form-item label="黑白名单">
-              <a-select v-model="queryParam.blackOrWhite" allowClear placeholder="请选择黑白名单">
+            <a-form-item name="blackOrWhite">
+              <a-select v-model:value="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>
+            <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 -->
 
-    <!-- 操作按钮区域 -->
-    <div class="table-operator">
-      <a-button @click="handleAdd" type="primary" icon="plus">新增</a-button>
-<!--      <a-button type="primary" icon="download" @click="handleExportXls('enquiry_site_black_email')">导出</a-button>-->
-<!--      <a-upload name="file" :showUploadList="false" :multiple="false" :headers="tokenHeader" :action="importExcelUrl" @change="handleImportExcel">-->
-<!--        <a-button type="primary" icon="import">导入</a-button>-->
-<!--      </a-upload>-->
-      <!-- 高级查询区域 -->
-      <a-dropdown v-if="selectedRowKeys.length > 0">
-        <a-menu slot="overlay">
-          <a-menu-item key="1" @click="batchDel"><a-icon type="delete"/>删除</a-menu-item>
-        </a-menu>
-        <a-button style="margin-left: 8px"> 批量操作 <a-icon type="down" /></a-button>
-      </a-dropdown>
-    </div>
-
-    <!-- table区域-begin -->
-    <div>
-      <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="onClearSelected">清空</a>
-      </div>
-
-      <a-table
-        ref="table"
-        size="middle"
-        :scroll="{x:true}"
-
-        rowKey="id"
-        :columns="columns"
-        :dataSource="dataSource"
-        :pagination="ipagination"
-        :loading="loading"
-        :rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}"
-        class="j-table-force-nowrap"
-        @change="handleTableChange">
-
-        <span slot="blackOrWhite" slot-scope="text, record">
-          <a-tag v-if="record.blackOrWhite === 0" color="red">黑名单</a-tag>
-          <a-tag v-else>白名单</a-tag>
-        </span>
-
-        <span slot="wasteEnquiryNum" slot-scope="text, record">
-            <span v-if="text === '' || text === null || text === 0">0</span>
-            <a v-else @click='wasteNumVisible(record.email,record.type,record.siteId)'>{{ text }}</a>
-        </span>
-
-        <span slot="type" slot-scope="text, record">
-          <a-tag v-if="text === '0'" color="cyan">通配</a-tag>
-          <a-tag v-else color="blue">完全匹配</a-tag>
-        </span>
-
-
-        <span slot="action" slot-scope="text, record">
-          <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>
+    <!--引用表格-->
+    <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" />
+                删除
               </a-menu-item>
             </a-menu>
-          </a-dropdown>
-        </span>
-
-      </a-table>
-    </div>
-
-    <enquiry-site-black-email-modal ref="modalForm" @ok="modalFormOk"></enquiry-site-black-email-modal>
-    <xp-recycle-bin-modal ref="XpRecycleBinModal"/>
+          </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 === 'type'">
+          <span>
+            <a-tag v-if="text === '0'" color="cyan">通配</a-tag>
+            <a-tag v-else color="blue">完全匹配</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, record.type, record.siteId)">{{ text }}</a>
+          </span>
+        </template>
+      </template>
+    </BasicTable>
+
+    <enquiry-site-black-email-modal ref="modalFormRef" @ok="handleSuccess" />
+    <xp-recycle-bin-modal ref="XpRecycleBinModalRef" />
   </a-card>
 </template>
 
-<script>
-
-  import '@/assets/less/TableExpand.less'
-  import { mixinDevice } from '@/utils/mixin'
-  import { JeecgListMixin } from '@/mixins/JeecgListMixin'
-  import EnquirySiteBlackEmailModal from './modules/EnquirySiteBlackEmailModal__Style.vue'
-  import JSuperQuery from '@/components/jeecg/JSuperQuery.vue'
-  import { httpAction, getAction } from '@/api/manage'
-  import XpRecycleBinModal from './modules/XpRecycleBinModal'
-
-  export default {
-    name: 'EnquirySiteBlackEmailList',
-    mixins:[JeecgListMixin, mixinDevice],
-    components: {
-      EnquirySiteBlackEmailModal,
-      JSuperQuery,
-      XpRecycleBinModal
-    },
-    data () {
-      return {
-        description: 'enquiry_site_black_email管理页面',
-        // 表头
-        columns: [
-          {
-            title: '#',
-            dataIndex: '',
-            key:'rowIndex',
-            width:60,
-            align:"center",
-            customRender:function (t,r,index) {
-              return parseInt(index)+1;
-            }
-          },
-          {
-            title:'站点名称',
-            align:"center",
-            dataIndex: 'siteName'
-          },
-          {
-            title:'邮箱',
-            align:"center",
-            sorter: true,
-            dataIndex: 'email'
-          },
-          {
-            title:'类型',
-            align:"center",
-            dataIndex: 'type',
-            scopedSlots: { customRender: 'type' }
-          },
-          {
-            title:'黑白名单',
-            align:"center",
-            dataIndex: 'blackOrWhite',
-            scopedSlots: { customRender: 'blackOrWhite' }
-          },
-          {
-            title:'询盘数量',
-            align:"center",
-            dataIndex: 'wasteEnquiryNum',
-            scopedSlots: {customRender: 'wasteEnquiryNum'}
-          },
-          {
-            title:'创建日期',
-            align:"center",
-            dataIndex: 'createTime',
-            sorter: true,
-            customRender:function (text) {
-              return !text?"":(text.length>10?text.substr(0,10):text)
-            }
-          },
-          {
-            title: '操作',
-            dataIndex: 'action',
-            align:"center",
-            fixed:"right",
-            width:147,
-            scopedSlots: { customRender: 'action' }
-          }
-        ],
-        url: {
-          list: "/adweb/enquirySiteBlackEmail/list",
-          delete: "/adweb/enquirySiteBlackEmail/delete",
-          deleteBatch: "/adweb/enquirySiteBlackEmail/deleteBatch",
-          exportXlsUrl: "/adweb/enquirySiteBlackEmail/exportXls",
-          importExcelUrl: "adweb/enquirySiteBlackEmail/importExcel",
-
-        },
-        dictOptions:{},
-        superFieldList:[],
-        siteOptions:[]
-      }
+<script lang="ts" setup name="EnquirySiteBlackEmailList">
+  import '/@/assets/less/TableExpand.less';
+  import '/@/assets/less/common.less';
+  import EnquirySiteBlackEmailModal from './modules/EnquirySiteBlackEmailModal.vue';
+  import SelectSite from '@/components/Adweb/selectSite.vue';
+  import XpRecycleBinModal from './modules/XpRecycleBinModal.vue';
+  import { nextTick, reactive, ref } from 'vue';
+  import { useListPage } from '@/hooks/system/useListPage';
+  import { batchDelete, deleteOne, getExportUrl, getImportUrl, list } from './siteBlackEmail.api';
+  import { columns } from './siteBlackEmail.data';
+  import { useCommonList } from '@/hooks/component/JeecgList';
+  import { BasicTable, TableAction } from '/@/components/Table';
+
+  const description = ref('enquiry_site_black_email管理页面');
+  const formRef = ref();
+  const modalFormRef = ref();
+  const XpRecycleBinModalRef = ref();
+  const dictOptions = reactive({});
+  const superFieldList = reactive([]);
+  const siteOptions = reactive([]);
+  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,
+      immediate: false, // 不直接触发，通过其他事件触发接口
+      beforeFetch: (params) => {
+        return Object.assign(params, queryParam);
+      },
     },
-    created() {
-      this.getSiteList();
+    exportConfig: {
+      name: '站点IP黑名单',
+      url: getExportUrl,
+      params: queryParam,
     },
-    computed: {
-      importExcelUrl: function(){
-        return `${window._CONFIG['domianURL']}/${this.url.importExcelUrl}`;
-      },
+    importConfig: {
+      url: getImportUrl,
+      success: handleSuccess,
     },
-    methods: {
-      filterOption(input, option) {
-        return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
-      },
+  });
 
+  const [
+    registerTable,
+    { reload, clearSelectedRowKeys, updateTableDataRecord, findTableDataRecord, getDataSource },
+    { rowSelection, selectedRowKeys },
+  ] = tableContext;
 
-      //获取站点列表
-      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)
-        })
-      },
-      wasteNumVisible(email, type, siteId){
-        this.$nextTick(() => {
-          this.$refs.XpRecycleBinModal.init(email, type, siteId);
-        })
-      },
-    }
+  const { handleEdit, getTableAction, batchHandleDelete, handleDetail, getDropDownAction, handleDelete, handleAdd, searchQuery, searchReset } =
+    useCommonList({ tableContext, modalFormRef, formRef, batchDelete, deleteOne });
+
+  function wasteNumVisible(email, type, siteId) {
+    nextTick().then(() => {
+      XpRecycleBinModalRef.value.init(email, type, siteId);
+    });
+  }
+
+  function getSiteList(selectedSiteInfo: any) {
+    queryParam.siteId = selectedSiteInfo.id;
+
+    // 选择站点是api操作，所以需要nextTick
+    nextTick().then(() => {
+      reload();
+    });
+  }
+
+  /**
+   * 成功回调
+   */
+  function handleSuccess() {
+    queryParam.siteId = localStorage.getItem('siteID');
+    (selectedRowKeys.value = []) && reload();
   }
 </script>
-<style scoped>
-  @import '~@assets/less/common.less';
-</style>

src/views/adweb/enquirySiteRules/siteBlackEmail/modules/EnquirySiteBlackEmailForm.vue

@@ -1,266 +1,184 @@
 <template>
   <a-spin :spinning="confirmLoading">
     <j-form-container :disabled="formDisabled">
-
-      <a-form :form="form" slot="detail">
-        <div class="ant-alert ant-alert-info" style="color: #e74c3c">
-          <span> 禁止以{{noEnquiryBlack}}单个字符作为黑名单邮箱</span>
-        </div>
-        <a-row>
-          <a-col :span="24">
-            <a-form-item label="站点" :labelCol="labelCol" :wrapperCol="wrapperCol">
-                <a-select placeholder="请选择站点" v-decorator="['siteId',validatorRules.siteId]" showSearch :filterOption="filterOption">
-                  <a-select-option v-for="option in siteOptions" :key="option.id" :value="option.id">{{option.name}}</a-select-option>
+      <template #detail>
+        <a-form ref="formRef" :model="formModel">
+          <div class="ant-alert ant-alert-info" style="color: #e74c3c">
+            <span> 禁止以{{ noEnquiryBlack }}单个字符作为黑名单邮箱</span>
+          </div>
+          <a-row>
+            <a-col :span="24">
+              <select-site ref="selectSiteRef" @set-site-info="getSiteList" select-width="100%" />
+            </a-col>
+            <a-col :span="24">
+              <a-form-item name="type" label="类型" :labelCol="labelCol" :wrapperCol="wrapperCol">
+                <a-select v-model:value="formModel.type" :rules="validatorRules.type" 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 :span="24">
-            <a-form-item label="类型" :labelCol="labelCol" :wrapperCol="wrapperCol">
-              <a-select v-decorator="['type',validatorRules.type]" 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 :span="24">
-            <a-form-item label="邮箱" :labelCol="labelCol" :wrapperCol="wrapperCol">
-              <a-input v-decorator="['email',validatorRules.email]" placeholder="请输入邮箱"  ></a-input>
-            </a-form-item>
-          </a-col>
-          <a-col :span="24">
-            <a-form-item label="黑白名单" :labelCol="labelCol" :wrapperCol="wrapperCol">
-              <a-select v-decorator="['blackOrWhite',validatorRules.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 v-if="showFlowSubmitButton" :span="24" style="text-align: center">
-            <a-button @click="submitForm">提 交</a-button>
-          </a-col>
-        </a-row>
-      </a-form>
+              </a-form-item>
+            </a-col>
+            <a-col :span="24">
+              <a-form-item label="邮箱" name="email" :labelCol="labelCol" :wrapperCol="wrapperCol">
+                <a-input v-model:value="formModel.email" :rules="validatorRules.email" placeholder="请输入邮箱" />
+              </a-form-item>
+            </a-col>
+            <a-col :span="24">
+              <a-form-item label="黑白名单" name="blackOrWhite" :labelCol="labelCol" :wrapperCol="wrapperCol">
+                <a-select v-model:value="formModel.blackOrWhite" :rules="validatorRules.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 v-if="showFlowSubmitButton" :span="24" style="text-align: center">
+              <a-button @click="submitForm">提 交</a-button>
+            </a-col>
+          </a-row>
+        </a-form>
+      </template>
     </j-form-container>
   </a-spin>
 </template>
 
-<script>
-
-  import { httpAction, getAction } from '@/api/manage'
-  import pick from 'lodash.pick'
-  import { validateDuplicateValue } from '@/utils/util'
-  import JFormContainer from '@/components/jeecg/JFormContainer'
-  import JDate from '@/components/jeecg/JDate'
+<script lang="ts" setup name="EnquirySiteBlackEmailForm">
+  import { getAction, httpAction } from '/@/api/manage/manage';
+  import pick from 'lodash.pick';
+  import JFormContainer from '/@/components/Form/src/container/JFormContainer.vue';
+  import { computed, onMounted, reactive, ref } from 'vue';
+  import { useMessage } from '@/hooks/web/useMessage';
+  import SelectSite from '@/components/Adweb/selectSite.vue';
 
-  export default {
-    name: 'EnquirySiteBlackEmailForm',
-    components: {
-      JFormContainer,
-      JDate,
+  const props = defineProps({
+    //流程表单data
+    formData: {
+      type: Object,
+      default: () => {},
+      required: false,
     },
-    props: {
-      //流程表单data
-      formData: {
-        type: Object,
-        default: ()=>{},
-        required: false
-      },
-      //表单模式：true流程表单 false普通表单
-      formBpm: {
-        type: Boolean,
-        default: false,
-        required: false
-      },
-      //表单禁用
-      disabled: {
-        type: Boolean,
-        default: false,
-        required: false
-      }
+    //表单模式：true流程表单 false普通表单
+    formBpm: {
+      type: Boolean,
+      default: false,
+      required: false,
     },
-    data () {
-      return {
-        form: this.$form.createForm(this),
-        model: {},
-        labelCol: {
-          xs: { span: 24 },
-          sm: { span: 5 },
-        },
-        wrapperCol: {
-          xs: { span: 24 },
-          sm: { span: 16 },
-        },
-        confirmLoading: false,
-        validatorRules: {
-          siteId: {
-            rules: [
-              { required: true, message: '请选择站点' }
-            ]
-          },
-          email: {
-            rules: [
-              { required: true, message: '请输入邮箱', trigger: 'blur' }
-            ]
-          },
-          blackOrWhite: {
-            rules: [
-              { required: true, message: '请选择黑白名单' }
-            ],
-          },
-          type: {
-            rules: [
-              { required: true, message: '请选择类型'}
-            ],
-          }
-        },
-        url: {
-          add: "/adweb/enquirySiteBlackEmail/add",
-          edit: "/adweb/enquirySiteBlackEmail/edit",
-          queryById: "/adweb/enquirySiteBlackEmail/queryById",
-          getDictByDictCode : "/sys/dict/getDictByDictCode"
-        },
-        siteOptions: [],
-        noEnquiryBlack: '',
-        noEnquiryBlackOption: []
-      }
+    //表单禁用
+    disabled: {
+      type: Boolean,
+      default: false,
+      required: false,
     },
-    computed: {
-      formDisabled(){
-        if(this.formBpm===true){
-          if(this.formData.disabled===false){
-            return false
-          }
-          return true
-        }
-        return this.disabled
-      },
-      showFlowSubmitButton(){
-        if(this.formBpm===true){
-          if(this.formData.disabled===false){
-            return true
-          }
-        }
-        return false
-      }
+  });
+
+  const labelCol = reactive({
+    xs: { span: 24 },
+    sm: { span: 5 },
+  });
+  const wrapperCol = reactive({
+    xs: { span: 24 },
+    sm: { span: 16 },
+  });
+
+  const formModel = reactive({ id: '', type: '', email: '', blackOrWhite: '', siteId: '', siteCode: '' });
+  const { createMessage } = useMessage();
+  const confirmLoading = ref(false);
+
+  const validatorRules = reactive({
+    siteId: {
+      rules: [{ required: true, message: '请选择站点' }],
     },
-    created () {
-      //如果是流程中表单，则需要加载流程表单data
-      this.showFlowData();
-      this.getSiteList();
-      this.getDictData();
+    email: {
+      rules: [{ required: true, message: '请输入邮箱', trigger: 'blur' }],
     },
-    methods: {
-      add () {
-        this.edit({});
-      },
-      edit (record) {
-        this.form.resetFields();
-        this.model = Object.assign({}, record);
-        this.visible = true;
-        this.$nextTick(() => {
-          this.form.setFieldsValue(pick(this.model,'siteId','email','type','status','blackOrWhite','createTime','updateTime'))
-        })
-      },
-      //渲染流程表单数据
-      showFlowData(){
-        if(this.formBpm === true){
-          let params = {id:this.formData.dataId};
-          getAction(this.url.queryById,params).then((res)=>{
-            if(res.success){
-              this.edit (res.result);
-            }
-          });
-        }
-      },
-      submitForm () {
-        const that = this;
-        // 触发表单验证
-        this.form.validateFields((err, values) => {
-          if (!err) {
-            that.confirmLoading = true;
-            let httpurl = '';
-            let method = '';
-            if(!this.model.id){
-              httpurl+=this.url.add;
-              method = 'post';
-            }else{
-              httpurl+=this.url.edit;
-               method = 'put';
-            }
-            let formData = Object.assign(this.model, values);
-            for(let i = 0; i< that.noEnquiryBlackOption.length; i++){
-              if(formData.email == that.noEnquiryBlackOption[i].title){
-                that.$message.warning("邮箱不能是"+ that.noEnquiryBlack + "单个字符。");
-                that.confirmLoading = false;
-                return;
-              }
-            }
-
-            for(let j = 0; j < that.siteOptions.length; j++){
-              if(formData.siteId == that.siteOptions[j].id){
-                formData.siteCode = that.siteOptions[j].code;
-              }
-            }
+    blackOrWhite: {
+      rules: [{ required: true, message: '请选择黑白名单' }],
+    },
+    type: {
+      rules: [{ required: true, message: '请选择类型' }],
+    },
+  });
 
-            console.log("表单提交数据",formData)
-            httpAction(httpurl,formData,method).then((res)=>{
-              if(res.success){
-                that.$message.success(res.message);
-                that.$emit('ok');
-              }else{
-                that.$message.warning(res.message);
-              }
-            }).finally(() => {
-              that.confirmLoading = false;
-            })
-          }
+  const url = reactive({
+    add: '/adweb/enquirySiteBlackEmail/add',
+    edit: '/adweb/enquirySiteBlackEmail/edit',
+    queryById: '/adweb/enquirySiteBlackEmail/queryById',
+    getDictByDictCode: '/sys/dict/queryTableData',
+  });
 
-        })
-      },
-      popupCallback(row){
-        this.form.setFieldsValue(pick(row,'siteId','email','type','status','blackOrWhite','createTime','updateTime'))
-      },
+  const formRef = ref();
+  const emit = defineEmits(['ok', 'close']);
 
-      filterOption(input, option) {
-        return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
-      },
+  const noEnquiryBlack = ref('.@');
+  let noEnquiryBlackOption = reactive([]);
 
-      //获取站点列表
-      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)
-        })
-      },
+  // 定义一个计算属性
+  const formDisabled = computed(() => {
+    if (props.formBpm === true) {
+      return props.formData.disabled !== false;
+    }
+    return props.disabled;
+  });
 
-      //黑名单类型改变
-      getDictData(){
-        let that = this;
-        let param = {
-          dictCode : 'no_enquiry_black'
-        }
-        getAction(that.url.getDictByDictCode,param).then(function (res) {
-          if(res.success){
-            that.noEnquiryBlackOption = res.result;
-            for(let i = 0;i < res.result.length; i++){
-              if(i == 0){
-                that.noEnquiryBlack = res.result[i].title;
-              }else{
-                that.noEnquiryBlack += res.result[i].title;
-              }
-            }
-          }
-        }).catch(function (err) {
-          console.log(err)
-        })
+  const showFlowSubmitButton = computed(() => {
+    if (props.formBpm === true) {
+      if (props.formData.disabled === false) {
+        return true;
       }
     }
+    return false;
+  });
+
+  onMounted(() => {
+    //如果是流程中表单，则需要加载流程表单data
+  });
+
+  function add() {
+    edit({});
+  }
+
+  function edit(record) {
+    if (Object.keys(record).length === 0) {
+      formRef.value.resetFields();
+      formModel.id = '';
+    } else {
+      Object.assign(formModel, pick(record, 'id', 'siteId', 'siteCode', 'email', 'type', 'status', 'blackOrWhite', 'createTime', 'updateTime'));
+    }
+  }
+
+  async function submitForm() {
+    // 触发表单验证
+    await formRef.value.validateFields();
+    confirmLoading.value = true;
+
+    let httpurl = '';
+    let method = '';
+    if (!formModel.id) {
+      httpurl += url.add;
+      method = 'post';
+    } else {
+      httpurl += url.edit;
+      method = 'put';
+    }
+
+    console.log('表单提交数据', formModel);
+    httpAction(httpurl, formModel, method)
+      .then((res) => {
+        if (res.code === 200) {
+          createMessage.success(res.message);
+          emit('ok');
+        } else {
+          createMessage.warning(res.message);
+        }
+      })
+      .finally(() => {
+        confirmLoading.value = false;
+      });
+  }
+
+  function getSiteList(selectedSiteInfo: any) {
+    formModel.siteId = selectedSiteInfo.id;
+    formModel.siteCode = selectedSiteInfo.code;
   }
-</script>
+
+  defineExpose({ add, edit, submitForm });
+</script>

src/views/adweb/enquirySiteRules/siteBlackEmail/modules/EnquirySiteBlackEmailModal.vue

@@ -1,60 +1,88 @@
 <template>
-  <j-modal
-    :title="title"
-    :width="width"
-    :visible="visible"
-    switchFullscreen
-    @ok="handleOk"
-    :okButtonProps="{ class:{'jee-hidden': disableSubmit} }"
-    @cancel="handleCancel"
-    cancelText="关闭">
-    <enquiry-site-black-email-form ref="realForm" @ok="submitCallback" :disabled="disableSubmit"></enquiry-site-black-email-form>
-  </j-modal>
+  <a-drawer :title="title" :width="width" placement="right" :closable="false" @close="close" :visible="visible">
+    <enquiry-site-black-email-form ref="realFormRef" @ok="submitCallback" :disabled="disableSubmit" normal />
+    <div class="drawer-footer">
+      <a-button v-if="!disableSubmit" @click="handleOk" type="primary" style="margin-bottom: 0">提交</a-button>
+    </div>
+  </a-drawer>
 </template>
 
-<script>
-
-  import EnquirySiteBlackEmailForm from './EnquirySiteBlackEmailForm'
-  export default {
-    name: 'EnquirySiteBlackEmailModal',
-    components: {
-      EnquirySiteBlackEmailForm
-    },
-    data () {
-      return {
-        title:'',
-        width:800,
-        visible: false,
-        disableSubmit: false
-      }
-    },
-    methods: {
-      add () {
-        this.visible=true
-        this.$nextTick(()=>{
-          this.$refs.realForm.add();
-        })
-      },
-      edit (record) {
-        this.visible=true
-        this.$nextTick(()=>{
-          this.$refs.realForm.edit(record);
-        })
-      },
-      close () {
-        this.$emit('close');
-        this.visible = false;
-      },
-      handleOk () {
-        this.$refs.realForm.submitForm();
-      },
-      submitCallback(){
-        this.$emit('ok');
-        this.visible = false;
-      },
-      handleCancel () {
-        this.close()
+<script lang="ts" setup name="EnquirySiteBlackEmailModal">
+  import EnquirySiteBlackEmailForm from './EnquirySiteBlackEmailForm.vue';
+  import { nextTick, ref } from 'vue';
+
+  const title = ref('操作');
+  const width = ref(800);
+  const visible = ref(false);
+  const disableSubmit = ref(false);
+  const realFormRef = ref();
+
+  const emit = defineEmits(['close', 'ok']);
+
+  function add() {
+    visible.value = true;
+
+    nextTick().then(() => {
+      realFormRef.value.add();
+    });
+  }
+
+  function edit(record) {
+    visible.value = true;
+    nextTick().then(() => {
+      realFormRef.value.edit(record);
+    });
+  }
+  function close() {
+    emit('close');
+    visible.value = false;
+  }
+  function submitCallback() {
+    emit('ok');
+    visible.value = false;
+  }
+  function handleOk() {
+    realFormRef.value.submitForm();
+  }
+  function handleCancel() {
+    close();
+  }
+
+  defineExpose({ title, disableSubmit, add, edit });
+</script>
+
+<style lang="less" scoped>
+  /** Button按钮间距 */
+  .ant-btn {
+    margin-left: 30px;
+    margin-bottom: 30px;
+    float: right;
+  }
+  .drawer-footer {
+    position: absolute;
+    bottom: 0;
+    width: 100%;
+    border-top: 1px solid #e8e8e8;
+    padding: 10px 16px;
+    text-align: right;
+    left: 0;
+    background: #fff;
+    border-radius: 0 0 2px 2px;
+  }
+  .ant-drawer-open {
+    /deep/ .ant-drawer-content {
+      overflow: inherit;
+      .side_close_btn {
+        position: absolute;
+        left: -60px;
+        top: calc(50% - 60px);
+        .ant-btn {
+          margin: 0;
+          width: 60px;
+          height: 60px;
+          border-radius: 0;
+        }
       }
     }
   }
-</script>
+</style>

src/views/adweb/enquirySiteRules/siteBlackEmail/modules/EnquirySiteBlackEmailModal__Style.vue

@@ -1,102 +0,0 @@
-<template>
-  <a-drawer
-    :title="title"
-    :width="width"
-    placement="right"
-    :closable="false"
-    @close="close"
-    :visible="visible">
-    <enquiry-site-black-email-form ref="realForm" @ok="submitCallback" :disabled="disableSubmit" normal></enquiry-site-black-email-form>
-    <div class="drawer-footer">
-      <a-button v-if="!disableSubmit"  @click="handleOk" type="primary" style="margin-bottom: 0;">提交</a-button>
-    </div>
-     <div class="side_close_btn">
-          <a-button type="primary" icon="close" size="large" @click="handleCancel" />
-        </div>
-  </a-drawer>
-</template>
-
-<script>
-
-  import EnquirySiteBlackEmailForm from './EnquirySiteBlackEmailForm'
-
-  export default {
-    name: 'EnquirySiteBlackEmailModal',
-    components: {
-      EnquirySiteBlackEmailForm
-    },
-    data () {
-      return {
-        title:"操作",
-        width:800,
-        visible: false,
-        disableSubmit: false
-      }
-    },
-    methods: {
-      add () {
-        this.visible=true
-        this.$nextTick(()=>{
-          this.$refs.realForm.add();
-        })
-      },
-      edit (record) {
-        this.visible=true
-        this.$nextTick(()=>{
-          this.$refs.realForm.edit(record);
-        });
-      },
-      close () {
-        this.$emit('close');
-        this.visible = false;
-      },
-      submitCallback(){
-        this.$emit('ok');
-        this.visible = false;
-      },
-      handleOk () {
-        this.$refs.realForm.submitForm();
-      },
-      handleCancel () {
-        this.close()
-      }
-    }
-  }
-</script>
-
-<style lang="less" scoped>
-/** Button按钮间距 */
-  .ant-btn {
-    margin-left: 30px;
-    margin-bottom: 30px;
-    float: right;
-  }
-  .drawer-footer{
-    position: absolute;
-    bottom: 0;
-    width: 100%;
-    border-top: 1px solid #e8e8e8;
-    padding: 10px 16px;
-    text-align: right;
-    left: 0;
-    background: #fff;
-    border-radius: 0 0 2px 2px;
-  }
-    .ant-drawer-open{
-      /deep/ .ant-drawer-content{
-        overflow: inherit;
-        .side_close_btn{
-          position: absolute;
-          left: -60px;
-          top: calc(50% - 60px);
-          .ant-btn{
-            margin: 0;
-            width: 60px;
-            height: 60px;
-            border-radius: 0;
-          }
-        }
-      }
-
-    }
-</style>

src/views/adweb/enquirySiteRules/siteBlackEmail/modules/XpRecycleBinModal.vue

@@ -2,143 +2,119 @@
   <a-modal
     :width="1200"
     :title="title"
-    :visible="visible"
+    v-model:open="visible"
     :destroyOnClose="true"
     @cancel="handleCancel"
     cancelText="关闭"
-    :okButtonProps="{style:{display:'none'}}">
-
-
-    <a-form-model layout="inline" @keyup.enter.native="searchQuery" style="margin-bottom:15px">
-      <a-form-model-item>
-        <a-input placeholder="邮箱/姓名" v-model="queryParam.searchText"></a-input>
-      </a-form-model-item>
-      <a-form-model-item>
+    :okButtonProps="{ style: { display: 'none' } }"
+  >
+    <a-form layout="inline" @keyup.enter.native="searchQuery" style="margin-bottom: 15px">
+      <a-form-item>
+        <a-input placeholder="邮箱/姓名" v-model:value="queryParam.searchText" />
+      </a-form-item>
+      <a-form-item>
         <a-button type="primary" @click="searchQuery">查询</a-button>
-        <a-button  @click="searchReset" style="margin-left:8px">重置</a-button>
-      </a-form-model-item>
-    </a-form-model>
+        <a-button @click="searchReset" style="margin-left: 8px">重置</a-button>
+      </a-form-item>
+    </a-form>
 
-    <a-table
-      ref="table"
-      size="middle"
-      :columns="columns"
-      :loading="loading"
-      :dataSource="dataSource"
-      >
-      <!-- 显示头像 -->
-      <template slot="avatarslot" slot-scope="text, record, index">
-        <div class="anty-img-wrap">
-          <a-avatar shape="square" :src="url.getAvatar(record.avatar)" icon="user"/>
-        </div>
+    <a-table ref="table" size="middle" :columns="blackEmailColumns" :loading="loading" :dataSource="dataSource">
+      <template #bodyCell="{ column, record, index, text }">
+        <template v-if="column.dataIndex === 'contact'">
+          <div>
+            <a-popover>
+              <template #content>
+                {{ text }}
+              </template>
+              <div style="width: 200px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis">{{ text }}</div>
+            </a-popover>
+          </div>
+        </template>
+
+        <template v-if="column.dataIndex === 'action'">
+          <span>
+            <a @click="showEnquiryDetail(record)"> 详情</a>
+          </span>
+        </template>
       </template>
-      <div slot="contactSlot" slot-scope="text, record">
-        <a-popover>
-          <template slot="content">
-            {{text}}
-          </template>
-          <div style="width: 200px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis">{{text}}</div>
-        </a-popover>
-      </div>
-      <span slot="action" slot-scope="text, record">
-        <a @click="enquiryDetail(record)"> 详情</a>
-      </span>
     </a-table>
     <!--询盘详情-->
-    <enquiry-detail ref="enquiryDetail"></enquiry-detail>
+    <enquiry-detail ref="enquiryDetailRef" />
   </a-modal>
 </template>
 
-<script>
-import { putAction, deleteAction, postAction, getAction } from '@/api/manage'
-  import { JeecgListMixin } from '@/mixins/JeecgListMixin'
-  import enquiryDetail from '@views/adweb/enquiry/modules/enquiryDetail'
+<script lang="ts" setup name="XpRecycleBinModal">
+  import { putAction, deleteAction, postAction, getAction } from '/@/api/manage/manage';
+  import enquiryDetail from '/@/views/adweb/enquiry/modules/enquiryDetail.vue';
+  import { nextTick, reactive, ref } from 'vue';
+  import { blackEmailColumns } from '@/views/adweb/enquirySiteRules/siteBlackEmail/siteBlackEmail.data';
+  import { useMessage } from '@/hooks/web/useMessage';
 
-  export default {
-    name: 'XpRecycleBinModal',
-    mixins: [JeecgListMixin],
-    components:{enquiryDetail},
-    data() {
-      return {
-        title: '',
-        loading: false,
-        innerVisible: false,
-        dataSource: [],
-        visible:false,
-        columns: [],
-        url: {
-          list: '/adweb/adwebEnquiry/getWastedEnquiry',
-        },
-        disableMixinCreated:true,
-        email:'',
-        type:'',
-        siteId:'',
-      }
-    },
+  const title = ref('');
+  const loading = ref(false);
+  const innerVisible = ref(false);
+  let dataSource = reactive([]);
+  const visible = ref(false);
+  const url = reactive({
+    list: '/adweb/adwebEnquiry/getWastedEnquiry',
+  });
+  let queryParam = reactive<any>({});
+  const disableMixinCreated = ref(false);
+  const { createMessage } = useMessage();
+  const enquiryDetailRef = ref();
+  let email = ref('');
+  let type = ref('');
+  let siteId = ref('');
 
-    methods: {
-      init(email,type,siteId){
-        let that = this
-        that.columns = [
-            { title: '站点名称', align: 'left', dataIndex: 'siteName', scopedSlots: { customRender: 'contactSlot' }},
-            { title: '姓名', align: 'left', dataIndex: 'contact', scopedSlots: { customRender: 'contactSlot' }},
-            { title: '邮箱', align: 'left', dataIndex: 'fromEmail', scopedSlots: { customRender: 'contactSlot' } },
-            { title: '电话', align: 'left', dataIndex: 'phone' },
-            { title: '询盘时间', align: 'left', dataIndex: 'recordCtime' },
-            { title: '操作', align: 'center', dataIndex: 'action', scopedSlots: { customRender: 'action' } }
-          ]
-        that.email = email
-        that.type = type
-        that.siteId = siteId
-        that.loadData(email,type,siteId);
-        that.visible = true
-      },
+  function init(emailParam, typeParam, siteIdParam) {
+    email.value = emailParam;
+    type.value = typeParam;
+    siteId.value = siteIdParam;
 
-      //询盘详情
-      enquiryDetail(record){
-        this.$nextTick(() => {
-          this.$refs.enquiryDetail.init(record)
-        })
-      },
-      searchQuery() {
-        this.loadData(this.email,this.type,this.siteId);
-      },
+    loadData(emailParam, typeParam, siteIdParam);
+    visible.value = true;
+  }
 
-      searchReset() {
-        this.queryParam = {}
-        this.loadData(this.email,this.type,this.siteId);
-      },
+  //询盘详情
+  function showEnquiryDetail(record) {
+    nextTick().then(() => {
+      enquiryDetailRef.value.init(record);
+    });
+  }
+  function searchQuery() {
+    loadData(email.value, type.value, siteId.value);
+  }
 
+  function searchReset() {
+    queryParam = {};
+    loadData(email.value, type.value, siteId.value);
+  }
+
+  function handleCancel() {
+    queryParam = {};
+    visible.value = false;
+  }
 
-      handleCancel() {
-        this.queryParam = {}
-        this.visible = false
-      },
+  function loadData(emailParam, typeParam, siteIdParam) {
+    loading.value = true;
 
-      loadData(email,type,siteId) {
-        if(!this.url.list){
-          this.$message.error("请设置url.list属性!")
-          return
-        }
-        var params = this.getQueryParams();//查询条件
-        this.loading = true;
-        params.email = email;
-        params.type = type;
-        params.siteId = siteId;
-        params.wasteEnquiryType = 'email';
-        getAction(this.url.list, params).then((res) => {
-          if (res.success) {
-            this.dataSource = res.result;
-          }
-          if(res.code===510){
-            this.$message.warning(res.message)
-          }
-          this.loading = false;
-        })
-      },
+    queryParam.email = emailParam;
+    queryParam.type = typeParam;
+    queryParam.siteId = siteIdParam;
+    queryParam.wasteEnquiryType = 'email';
 
-    }
+    getAction(url.list, queryParam).then((res) => {
+      if (res.code === 200) {
+        dataSource = res.result;
+      }
+      if (res.code === 510) {
+        createMessage.warning(res.message);
+      }
+      loading.value = false;
+    });
   }
+
+  defineExpose({ init });
 </script>
 
-<style lang="less" scoped></style>
+<style lang="less" scoped></style>

src/views/adweb/enquirySiteRules/siteBlackEmail/siteBlackEmail.api.ts

@@ -0,0 +1,70 @@
+import { defHttp } from '/@/utils/http/axios';
+import { useMessage } from '/@/hooks/web/useMessage';
+
+const { createConfirm } = useMessage();
+
+enum Api {
+  list = '/adweb/enquirySiteBlackEmail/list',
+  deleteOne = '/adweb/enquirySiteBlackEmail/delete',
+  deleteBatch = '/adweb/enquirySiteBlackEmail/deleteBatch',
+  importExcel = 'adweb/enquirySiteBlackEmail/importExcel',
+  exportXls = '/adweb/enquirySiteBlackEmail/exportXls',
+}
+
+/**
+ * 导出api
+ * @param params
+ */
+export const getExportUrl = Api.exportXls;
+
+/**
+ * 导入api
+ */
+export const getImportUrl = Api.importExcel;
+
+/**
+ * 列表接口
+ * @param params
+ */
+export const list = (params) => defHttp.get({ url: Api.list, params });
+
+/**
+ * 删除单个
+ * @param params
+ * @param handleSuccess
+ */
+export const deleteOne = (params, handleSuccess) => {
+  return defHttp.delete({ url: Api.deleteOne, params }, { joinParamsToUrl: true }).then(() => {
+    handleSuccess();
+  });
+};
+
+/**
+ * 批量删除
+ * @param params
+ * @param handleSuccess
+ */
+export const batchDelete = (params, handleSuccess) => {
+  createConfirm({
+    iconType: 'warning',
+    title: '确认删除',
+    content: '是否删除选中数据',
+    okText: '确认',
+    cancelText: '取消',
+    onOk: () => {
+      return defHttp.delete({ url: Api.deleteBatch, data: params }, { joinParamsToUrl: true }).then(() => {
+        handleSuccess();
+      });
+    },
+  });
+};
+
+/**
+ * 保存或者更新
+ * @param params
+ * @param isUpdate
+ */
+export const saveOrUpdate = (params, isUpdate) => {
+  const url = isUpdate ? Api.edit : Api.save;
+  return defHttp.post({ url: url, params }, { isTransformResponse: false });
+};

src/views/adweb/enquirySiteRules/siteBlackEmail/siteBlackEmail.data.ts

@@ -0,0 +1,74 @@
+import { BasicColumn } from '@/components/Table';
+
+export const columns: BasicColumn[] = [
+  {
+    title: '序号',
+    dataIndex: '',
+    key: 'rowIndex',
+    width: 60,
+    align: 'center',
+    customRender: function ({ text, record, index, column }) {
+      return parseInt(index) + 1;
+    },
+  },
+  {
+    title: '站点名称',
+    align: 'center',
+    dataIndex: 'siteName',
+  },
+  {
+    title: '邮箱',
+    align: 'center',
+    sorter: true,
+    dataIndex: 'email',
+  },
+  {
+    title: '类型',
+    align: 'center',
+    dataIndex: 'type',
+  },
+  {
+    title: '黑白名单',
+    align: 'center',
+    dataIndex: 'blackOrWhite',
+  },
+  {
+    title: '询盘数量',
+    align: 'center',
+    dataIndex: 'wasteEnquiryNum',
+  },
+  {
+    title: '创建日期',
+    align: 'center',
+    dataIndex: 'createTime',
+    sorter: true,
+    customRender: function ({ text, record, index, column }) {
+      return !text ? '' : text.length > 10 ? text.substr(0, 10) : text;
+    },
+  },
+];
+
+export const blackEmailColumns: BasicColumn[] = [
+  {
+    title: '站点名称',
+    align: 'left',
+    dataIndex: 'siteName',
+  },
+  { title: '姓名', align: 'left', dataIndex: 'contact' },
+  {
+    title: '邮箱',
+    align: 'left',
+    dataIndex: 'fromEmail',
+  },
+  {
+    title: '电话',
+    align: 'left',
+    dataIndex: 'phone',
+  },
+  {
+    title: '询盘时间',
+    align: 'left',
+    dataIndex: 'recordCtime',
+  },
+  { title: '操作', align: 'center', dataIndex: 'action' },
+];

src/views/adweb/enquirySiteRules/siteBlackIp/AdwebSiteBlackIpList.vue

@@ -142,7 +142,7 @@
   //注册table数据
   const { prefixCls, tableContext, onExportXls, onImportXls } = useListPage({
     tableProps: {
-      title: '公共邮箱黑名单',
+      title: '站点IP黑名单',
       api: list,
       columns: columns,
       canResize: false,
@@ -198,8 +198,8 @@
   /**
    * 成功回调
    */
-  function handleSuccess(siteId) {
-    queryParam.siteId = siteId;
+  function handleSuccess() {
+    queryParam.siteId = localStorage.getItem('siteID');
     (selectedRowKeys.value = []) && reload();
   }
 </script>

src/views/adweb/enquirySiteRules/siteBlackIp/modules/AdwebSiteBlackIpModal.vue

@@ -72,7 +72,7 @@
     border-radius: 0 0 2px 2px;
   }
   .ant-drawer-open {
-    /deep/ .ant-drawer-content {
+    deep(.ant-drawer-content) {
       overflow: inherit;
       .side_close_btn {
         position: absolute;

src/views/adweb/enquirySiteRules/siteBlackIp/siteBlackIP.data.ts

@@ -1,4 +1,4 @@
-import {BasicColumn} from "@/components/Table";
+import { BasicColumn } from '@/components/Table';
 
 export const columns: BasicColumn[] = [
   {
@@ -6,37 +6,37 @@ export const columns: BasicColumn[] = [
     dataIndex: '',
     key: 'rowIndex',
     width: 60,
-    align: "center",
-    customRender: function ({text, record, index, column}) {
+    align: 'center',
+    customRender: function ({ text, record, index, column }) {
       return parseInt(index) + 1;
-    }
+    },
   },
   {
     title: '站点名称',
-    align: "center",
-    dataIndex: 'siteName'
+    align: 'center',
+    dataIndex: 'siteName',
   },
   {
     title: 'ip',
-    align: "center",
-    dataIndex: 'ip'
+    align: 'center',
+    dataIndex: 'ip',
   },
   {
     title: '询盘数量',
-    align: "center",
+    align: 'center',
     dataIndex: 'wasteEnquiryNum',
   },
   {
     title: '黑白名单',
-    align: "center",
+    align: 'center',
     dataIndex: 'blackOrWhite',
   },
   {
     title: '创建日期',
-    align: "center",
+    align: 'center',
     dataIndex: 'createTime',
-    customRender: function ({text, record, index, column}) {
-      return !text ? "" : (text.length > 10 ? text.substr(0, 10) : text)
-    }
-  }
+    customRender: function ({ text, record, index, column }) {
+      return !text ? '' : text.length > 10 ? text.substr(0, 10) : text;
+    },
+  },
 ];

src/views/adweb/enquirySiteRules/siteRuleList/AdwebEnquirySiteRuleList.vue

@@ -2,258 +2,197 @@
   <a-card :bordered="false">
     <!-- 查询区域 -->
     <div class="table-page-search-wrapper">
-      <a-form layout="inline" @keyup.enter.native="searchQuery">
+      <a-form ref="formRef" @keyup.enter.native="searchQuery" :model="queryParam">
         <a-row :gutter="24">
           <a-col :xl="6" :sm="12">
-            <a-form-item label="站点">
-              <a-select placeholder="请选择站点" v-model="queryParam.siteId" showSearch :filterOption="filterOption" allowClear>
-                <a-select-option v-for="option in siteOptions" :key="option.id" :value="option.id">{{option.name}}</a-select-option>
-              </a-select>
-            </a-form-item>
+            <select-site ref="selectSiteRef" @set-site-info="getSiteList" :allowClear="true" />
           </a-col>
           <a-col :md="6" :sm="12">
-            <a-form-item label="关键词">
-              <a-input placeholder="输入关键词查询" v-model="queryParam.word"></a-input>
+            <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="黑白名单">
-              <a-select allowClear v-model="queryParam.blackOrWhite" placeholder="输入黑白名单类型">
+            <a-form-item label="黑白名单" name="blackOrWhite">
+              <a-select allow-clear 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">
-              <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>
+            <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 -->
 
-    <!-- 操作按钮区域 -->
-    <div class="table-operator">
-      <a-button @click="handleAdd" type="primary" icon="plus">新增</a-button>
-<!--      <a-button type="primary" icon="download" @click="handleExportXls('adweb_enquiry_site_rule')">导出</a-button>-->
-<!--      <a-upload name="file" :showUploadList="false" :multiple="false" :headers="tokenHeader" :action="importExcelUrl" @change="handleImportExcel">-->
-<!--        <a-button type="primary" icon="import">导入</a-button>-->
-<!--      </a-upload>-->
-      <!-- 高级查询区域 -->
-<!--      <j-super-query :fieldList="superFieldList" ref="superQueryModal" @handleSuperQuery="handleSuperQuery"></j-super-query>-->
-      <a-dropdown v-if="selectedRowKeys.length > 0">
-        <a-menu slot="overlay">
-          <a-menu-item key="1" @click="batchDel"><a-icon type="delete"/>删除</a-menu-item>
-        </a-menu>
-        <a-button style="margin-left: 8px"> 批量操作 <a-icon type="down" /></a-button>
-      </a-dropdown>
-    </div>
-
     <!-- table区域-begin -->
-    <div>
-      <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="onClearSelected">清空</a>
+    <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>
 
-      <a-table
-        ref="table"
-        size="middle"
-        :scroll="{x:true}"
-
-        rowKey="id"
-        :columns="columns"
-        :dataSource="dataSource"
-        :pagination="ipagination"
-        :loading="loading"
-        :rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}"
-        class="j-table-force-nowrap"
-        @change="handleTableChange">
-
-        <span slot="blackOrWhite_dictText" slot-scope="text, record">
-            <a-tag v-if="text === 0" color="red">黑名单</a-tag>
-            <a-tag v-else-if="text === 1">白名单</a-tag>
-            <a-tag v-else>--</a-tag>
-        </span>
-
-        <span slot="wasteEnquiryNum" slot-scope="text, record">
-           <span v-if="text === '' || text === null || text === 0" >0</span>
-            <a v-else  @click='wasteNumVisible(record.word,record.siteId)'>{{ text }}</a>
-        </span>
-
-        <template slot="htmlSlot" slot-scope="text">
-          <div v-html="text"></div>
-        </template>
-        <template slot="imgSlot" slot-scope="text">
-          <span v-if="!text" style="font-size: 12px;font-style: italic;">无图片</span>
-          <img v-else :src="getImgView(text)" height="25px" alt="" style="max-width:80px;font-size: 12px;font-style: italic;"/>
-        </template>
-        <template slot="fileSlot" slot-scope="text">
-          <span v-if="!text" style="font-size: 12px;font-style: italic;">无文件</span>
-          <a-button
-            v-else
-            :ghost="true"
-            type="primary"
-            icon="download"
-            size="small"
-            @click="downloadFile(text)">
-            下载
-          </a-button>
+      <!--引用表格-->
+      <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" />
+                  删除
+                </a-menu-item>
+              </a-menu>
+            </template>
+            <a-button
+              >批量操作
+              <Icon icon="mdi:chevron-down" />
+            </a-button>
+          </a-dropdown>
         </template>
 
-        <span slot="action" slot-scope="text, record">
-          <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 #action="{ record }">
+          <TableAction :actions="getTableAction(record)" :dropDownActions="getDropDownAction(record)" />
+        </template>
 
-      </a-table>
+        <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.ip)">{{ 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>
+                <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-site-rule-modal ref="modalForm" @ok="modalFormOk"></adweb-enquiry-site-rule-modal>
-    <xp-recycle-bin-modal ref="XpRecycleBinModal"/>
+    <adweb-enquiry-site-rule-modal ref="modalFormRef" @ok="handleSuccess" />
+    <xp-recycle-bin-modal ref="XpRecycleBinModalRef" />
   </a-card>
 </template>
 
-<script>
-
-  import '@/assets/less/TableExpand.less'
-  import { mixinDevice } from '@/utils/mixin'
-  import { JeecgListMixin } from '@/mixins/JeecgListMixin'
-  import AdwebEnquirySiteRuleModal from './modules/AdwebEnquirySiteRuleModal__Style.vue'
-  import JSuperQuery from '@/components/jeecg/JSuperQuery.vue'
-  import XpRecycleBinModal from './modules/XpRecycleBinModal'
-  import { getAction } from '@api/manage'
-
-  export default {
-    name: 'AdwebEnquirySiteRuleList',
-    mixins:[JeecgListMixin, mixinDevice],
-    components: {
-      AdwebEnquirySiteRuleModal,
-      JSuperQuery,
-      XpRecycleBinModal,
-    },
-    data () {
-      return {
-        description: 'adweb_enquiry_site_rule管理页面',
-        // 表头
-        columns: [
-          {
-            title: '#',
-            dataIndex: '',
-            key:'rowIndex',
-            width:60,
-            align:"center",
-            customRender:function (t,r,index) {
-              return parseInt(index)+1;
-            }
-          },
-          {
-            title:'站点名称',
-            align:"center",
-            dataIndex: 'siteName'
-          },
-          {
-            title:'关键词',
-            align:"center",
-            dataIndex: 'word'
-          },
-          {
-            title: '黑白名单',
-            align: "center",
-            dataIndex: 'blackOrWhite',
-            width: 180,
-            sorter: true,
-            scopedSlots: {customRender: 'blackOrWhite_dictText'}
-          },
-          {
-            title:'询盘数量',
-            align:"center",
-            dataIndex: 'wasteEnquiryNum',
-            scopedSlots: {customRender: 'wasteEnquiryNum'}
-          },
-          {
-            title:'创建日期',
-            align:"center",
-            dataIndex: 'createTime',
-            customRender:function (text) {
-              return !text?"":(text.length>10?text.substr(0,10):text)
-            }
-          },
-          {
-            title: '操作',
-            dataIndex: 'action',
-            align:"center",
-            fixed:"right",
-            width:147,
-            scopedSlots: { customRender: 'action' }
-          }
-        ],
-        url: {
-          list: "/adweb/adwebEnquirySiteRule/list",
-          delete: "/adweb/adwebEnquirySiteRule/delete",
-          deleteBatch: "/adweb/adwebEnquirySiteRule/deleteBatch",
-          exportXlsUrl: "/adweb/adwebEnquirySiteRule/exportXls",
-          importExcelUrl: "adweb/adwebEnquirySiteRule/importExcel",
-
-        },
-        dictOptions:{},
-        superFieldList:[],
-        siteOptions:[]
-      }
+<script lang="ts" setup name="AdwebEnquirySiteRuleList">
+  import '/@/assets/less/TableExpand.less';
+  import '/@/assets/less/common.less';
+  import AdwebEnquirySiteRuleModal from './modules/AdwebEnquirySiteRuleModal.vue';
+  import XpRecycleBinModal from './modules/XpRecycleBinModal.vue';
+  import { nextTick, reactive, ref } from 'vue';
+  import { batchDelete, deleteOne, getExportUrl, getImportUrl, list } from './siteRuleList.api';
+  import { columns } from './siteRuleList.data';
+  import { BasicTable, TableAction } from '@/components/Table';
+  import { useListPage } from '@/hooks/system/useListPage';
+  import { useCommonList } from '@/hooks/component/JeecgList';
+  import SelectSite from '@/components/Adweb/selectSite.vue';
+
+  const description = ref('adweb_enquiry_site_rule管理页面');
+  const dictOptions = reactive({});
+  const superFieldList = reactive({});
+  const siteOptions = reactive({});
+  const XpRecycleBinModalRef = ref();
+  const modalFormRef = ref();
+  const formRef = 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,
+      immediate: false, // 不直接触发，通过其他事件触发接口
+      beforeFetch: (params) => {
+        return Object.assign(params, queryParam);
+      },
     },
-    created() {
-    this.getSiteList();
+    exportConfig: {
+      name: '询盘列表',
+      url: getExportUrl,
+      params: queryParam,
     },
-    computed: {
-      importExcelUrl: function(){
-        return `${window._CONFIG['domianURL']}/${this.url.importExcelUrl}`;
-      },
+    importConfig: {
+      url: getImportUrl,
+      success: handleSuccess,
     },
-    methods: {
-      initDictConfig(){
-      },
-      wasteNumVisible(keyword,siteId){
-        this.$nextTick(() => {
-          this.$refs.XpRecycleBinModal.init(keyword,siteId);
-        })
-      },
-      filterOption(input, option) {
-        return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
-      },
+  });
 
-      //获取站点列表
-      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)
-        })
-      },
-    }
+  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 });
+
+  function wasteNumVisible(keyword, siteId) {
+    nextTick().then(() => {
+      XpRecycleBinModalRef.value.init(keyword, siteId);
+    });
+  }
+
+  /**
+   * 成功回调
+   */
+  function handleSuccess() {
+    queryParam.siteId = localStorage.getItem('siteID');
+    (selectedRowKeys.value = []) && reload();
+  }
+
+  //获取站点列表
+  function getSiteList(selectedSiteInfo: any) {
+    queryParam.siteId = selectedSiteInfo.id;
+
+    // 选择站点是api操作，所以需要nextTick
+    nextTick().then(() => {
+      reload();
+    });
   }
 </script>
-<style scoped>
-  @import '~@assets/less/common.less';
-</style>

src/views/adweb/enquirySiteRules/siteRuleList/modules/AdwebEnquirySiteRuleForm.vue

@@ -1,230 +1,168 @@
 <template>
   <a-spin :spinning="confirmLoading">
     <j-form-container :disabled="formDisabled">
-      <a-form :form="form" slot="detail">
-        <a-row>
-          <a-col :span="24">
-            <a-form-item label="站点" :labelCol="labelCol" :wrapperCol="wrapperCol">
-              <a-select placeholder="请选择站点" v-decorator="['siteId',formRules.siteId]" showSearch :filterOption="filterOption">
-                <a-select-option v-for="option in siteOptions" :key="option.id" :value="option.id">{{option.name}}</a-select-option>
-              </a-select>
-            </a-form-item>
-          </a-col>
-          <a-col :span="24">
-            <a-form-item label="关键词" :labelCol="labelCol" :wrapperCol="wrapperCol">
-              <a-input v-decorator="['word',formRules.word]" placeholder="请输入关键词"  ></a-input>
-            </a-form-item>
-          </a-col>
-          <a-col :span="24">
-            <a-form-item label="黑白名单" :labelCol="labelCol" :wrapperCol="wrapperCol">
-              <a-select v-decorator="['blackOrWhite',formRules.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 :span="24">-->
-<!--            <a-form-item label="状态" :labelCol="labelCol" :wrapperCol="wrapperCol">-->
-<!--              <a-select v-decorator="['isEnable',formRules.isEnable]" placeholder="请选择是否启用该关键词">-->
-<!--                <a-select-option :value="1">启用</a-select-option>-->
-<!--                <a-select-option :value="0">停用</a-select-option>-->
-<!--              </a-select>-->
-<!--            </a-form-item>-->
-<!--          </a-col>-->
-<!--          <a-col :span="24">-->
-<!--            <a-form-item label="作用域" :labelCol="labelCol" :wrapperCol="wrapperCol">-->
-<!--              <a-select v-decorator="['useStatus',formRules.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 v-if="showFlowSubmitButton" :span="24" style="text-align: center">
-            <a-button @click="submitForm">提 交</a-button>
-          </a-col>
-        </a-row>
-      </a-form>
+      <template #detail>
+        <a-form ref="formRef" :model="formModel">
+          <a-row>
+            <a-col :span="24">
+              <select-site ref="selectSiteRef" @set-site-info="getSiteList" select-width="100%" />
+            </a-col>
+            <a-col :span="24">
+              <a-form-item name="word" label="关键词" :labelCol="labelCol" :wrapperCol="wrapperCol">
+                <a-input allow-clear v-model:value="formModel.word" :rules="formRules.word" placeholder="请输入关键词" />
+              </a-form-item>
+            </a-col>
+            <a-col :span="24">
+              <a-form-item name="blackOrWhite" label="黑白名单" :labelCol="labelCol" :wrapperCol="wrapperCol">
+                <a-select allow-clear v-model:value="formModel.blackOrWhite" :rules="formRules.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 v-if="showFlowSubmitButton" :span="24" style="text-align: center">
+              <a-button @click="submitForm">提 交</a-button>
+            </a-col>
+          </a-row>
+        </a-form>
+      </template>
     </j-form-container>
   </a-spin>
 </template>
 
-<script>
+<script lang="ts" setup name="AdwebEnquirySiteRuleForm">
+  import { httpAction, getAction } from '/@/api/manage/manage';
+  import pick from 'lodash.pick';
 
-  import { httpAction, getAction } from '@/api/manage'
-  import pick from 'lodash.pick'
-  import { validateDuplicateValue } from '@/utils/util'
-  import JFormContainer from '@/components/jeecg/JFormContainer'
-  import JDate from '@/components/jeecg/JDate'
+  import JFormContainer from '/@/components/Form/src/container/JFormContainer.vue';
+  import { computed, reactive, ref } from 'vue';
+  import { useMessage } from '@/hooks/web/useMessage';
+  import SelectSite from '@/components/Adweb/selectSite.vue';
 
-  export default {
-    name: 'AdwebEnquirySiteRuleForm',
-    components: {
-      JFormContainer,
-      JDate,
+  const props = defineProps({
+    //流程表单data
+    formData: {
+      type: Object,
+      default: () => {},
+      required: false,
     },
-    props: {
-      //流程表单data
-      formData: {
-        type: Object,
-        default: ()=>{},
-        required: false
-      },
-      //表单模式：true流程表单 false普通表单
-      formBpm: {
-        type: Boolean,
-        default: false,
-        required: false
-      },
-      //表单禁用
-      disabled: {
-        type: Boolean,
-        default: false,
-        required: false
-      }
+    //表单模式：true流程表单 false普通表单
+    formBpm: {
+      type: Boolean,
+      default: false,
+      required: false,
     },
-    data () {
-      return {
-        form: this.$form.createForm(this),
-        model: {},
-        labelCol: {
-          xs: { span: 24 },
-          sm: { span: 5 },
-        },
-        wrapperCol: {
-          xs: { span: 24 },
-          sm: { span: 16 },
-        },
-        confirmLoading: false,
-        validatorRules: {
-        },
-        url: {
-          add: "/adweb/adwebEnquirySiteRule/add",
-          edit: "/adweb/adwebEnquirySiteRule/edit",
-          queryById: "/adweb/adwebEnquirySiteRule/queryById"
-        },
-        formRules: {
-          siteId: {
-            rules: [
-              { required: true, message: '请选择站点'},
-            ],
-            trigger: 'change'
-          },
-          word: {
-            rules: [
-              { required: true, message: '请输入关键词'},
-              { max: 100, message: '关键词长度不能超过100'},
-            ],
-            trigger: 'blur'
-          },
-          blackOrWhite: {
-            initialValue: 0,
-            rules: [
-              { required: true, message: '请选择黑白名单'},
-            ],
-          },
-        },
-        siteOptions:[],
-      }
+    //表单禁用
+    disabled: {
+      type: Boolean,
+      default: false,
+      required: false,
     },
-    computed: {
-      formDisabled(){
-        if(this.formBpm===true){
-          if(this.formData.disabled===false){
-            return false
-          }
-          return true
-        }
-        return this.disabled
-      },
-      showFlowSubmitButton(){
-        if(this.formBpm===true){
-          if(this.formData.disabled===false){
-            return true
-          }
-        }
-        return false
-      }
+  });
+
+  const labelCol = reactive({
+    xs: { span: 24 },
+    sm: { span: 5 },
+  });
+  const wrapperCol = reactive({
+    xs: { span: 24 },
+    sm: { span: 16 },
+  });
+  const formModel = reactive({ id: '', word: '', blackOrWhite: '', siteId: '', siteCode: '' });
+  const { createMessage } = useMessage();
+  const confirmLoading = ref(false);
+
+  const formRules = reactive({
+    siteId: {
+      rules: [{ required: true, message: '请选择站点' }],
+      trigger: 'change',
     },
-    created () {
-      //如果是流程中表单，则需要加载流程表单data
-      this.showFlowData();
-      this.getSiteList();
+    word: {
+      rules: [
+        { required: true, message: '请输入关键词' },
+        { max: 100, message: '关键词长度不能超过100' },
+      ],
+      trigger: 'blur',
     },
-    methods: {
-      add () {
-        this.edit({});
-      },
-      edit (record) {
-        this.form.resetFields();
-        this.model = Object.assign({}, record);
-        this.visible = true;
-        this.$nextTick(() => {
-          this.form.setFieldsValue(pick(this.model,'siteId','siteCode','word','blackOrWhite','createTime'))
-        })
-      },
-      //渲染流程表单数据
-      showFlowData(){
-        if(this.formBpm === true){
-          let params = {id:this.formData.dataId};
-          getAction(this.url.queryById,params).then((res)=>{
-            if(res.success){
-              this.edit (res.result);
-            }
-          });
-        }
-      },
-      submitForm () {
-        const that = this;
-        // 触发表单验证
-        this.form.validateFields((err, values) => {
-          if (!err) {
-            that.confirmLoading = true;
-            let httpurl = '';
-            let method = '';
-            if(!this.model.id){
-              httpurl+=this.url.add;
-              method = 'post';
-            }else{
-              httpurl+=this.url.edit;
-               method = 'put';
-            }
-            let formData = Object.assign(this.model, values);
-            console.log("表单提交数据",formData)
-            httpAction(httpurl,formData,method).then((res)=>{
-              if(res.success){
-                that.$message.success(res.message);
-                that.$emit('ok');
-              }else{
-                that.$message.warning(res.message);
-              }
-            }).finally(() => {
-              that.confirmLoading = false;
-            })
-          }
-
-        })
-      },
-      popupCallback(row){
-        this.form.setFieldsValue(pick(row,'siteId','siteCode','status','word','blackOrWhiteList','isEnable','useStatus','createTime'))
-      },
-      filterOption(input, option) {
-        return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
-      },
-
-      //获取站点列表
-      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)
-        })
-      },
+    blackOrWhite: {
+      initialValue: 0,
+      rules: [{ required: true, message: '请选择黑白名单' }],
+    },
+  });
+
+  const url = reactive({
+    add: '/adweb/adwebEnquirySiteRule/add',
+    edit: '/adweb/adwebEnquirySiteRule/edit',
+    queryById: '/adweb/adwebEnquirySiteRule/queryById',
+  });
+
+  // 定义一个计算属性
+  const formDisabled = computed(() => {
+    if (props.formBpm === true) {
+      return props.formData.disabled !== false;
+    }
+    return props.disabled;
+  });
+
+  const showFlowSubmitButton = computed(() => {
+    if (props.formBpm === true) {
+      if (props.formData.disabled === false) {
+        return true;
+      }
+    }
+    return false;
+  });
+
+  const formRef = ref();
+  const emit = defineEmits(['ok', 'close']);
+
+  function add() {
+    edit({});
+  }
+  function edit(record) {
+    if (Object.keys(record).length === 0) {
+      formRef.value.resetFields();
+      formModel.id = '';
+    } else {
+      Object.assign(formModel, pick(record, 'id', 'siteId', 'siteCode', 'word', 'blackOrWhite', 'createTime'));
+    }
+  }
+
+  async function submitForm() {
+    // 触发表单验证
+    await formRef.value.validateFields();
+    confirmLoading.value = true;
+
+    console.log(formModel, 'formModelformModel');
+    let httpurl = '';
+    let method = '';
+    if (!formModel.id) {
+      httpurl += url.add;
+      method = 'post';
+    } else {
+      httpurl += url.edit;
+      method = 'put';
     }
+
+    httpAction(httpurl, formModel, method)
+      .then((res) => {
+        if (res.code === 200) {
+          createMessage.success(res.message);
+          emit('ok');
+        } else {
+          createMessage.warning(res.message);
+        }
+      })
+      .finally(() => {
+        confirmLoading.value = false;
+      });
   }
-</script>
+
+  function getSiteList(selectedSiteInfo: any) {
+    formModel.siteId = selectedSiteInfo.id;
+    formModel.siteCode = selectedSiteInfo.code;
+  }
+
+  defineExpose({ add, edit, submitForm });
+</script>

src/views/adweb/enquirySiteRules/siteRuleList/modules/AdwebEnquirySiteRuleModal.vue

@@ -1,60 +1,90 @@
 <template>
-  <j-modal
-    :title="title"
-    :width="width"
-    :visible="visible"
-    switchFullscreen
-    @ok="handleOk"
-    :okButtonProps="{ class:{'jee-hidden': disableSubmit} }"
-    @cancel="handleCancel"
-    cancelText="关闭">
-    <adweb-enquiry-site-rule-form ref="realForm" @ok="submitCallback" :disabled="disableSubmit"></adweb-enquiry-site-rule-form>
-  </j-modal>
+  <a-drawer :title="title" :width="width" placement="right" :closable="false" @close="close" :visible="visible">
+    <adweb-enquiry-site-rule-form ref="realFormRef" @ok="submitCallback" :disabled="disableSubmit" normal />
+    <div class="drawer-footer">
+      <a-button v-if="!disableSubmit" @click="handleOk" type="primary" style="margin-bottom: 0">提交</a-button>
+    </div>
+  </a-drawer>
 </template>
 
-<script>
+<script lang="ts" setup name="AdwebEnquirySiteRuleModal">
+  import AdwebEnquirySiteRuleForm from './AdwebEnquirySiteRuleForm.vue';
+  import { nextTick, ref } from 'vue';
 
-  import AdwebEnquirySiteRuleForm from './AdwebEnquirySiteRuleForm'
-  export default {
-    name: 'AdwebEnquirySiteRuleModal',
-    components: {
-      AdwebEnquirySiteRuleForm
-    },
-    data () {
-      return {
-        title:'',
-        width:800,
-        visible: false,
-        disableSubmit: false
-      }
-    },
-    methods: {
-      add () {
-        this.visible=true
-        this.$nextTick(()=>{
-          this.$refs.realForm.add();
-        })
-      },
-      edit (record) {
-        this.visible=true
-        this.$nextTick(()=>{
-          this.$refs.realForm.edit(record);
-        })
-      },
-      close () {
-        this.$emit('close');
-        this.visible = false;
-      },
-      handleOk () {
-        this.$refs.realForm.submitForm();
-      },
-      submitCallback(){
-        this.$emit('ok');
-        this.visible = false;
-      },
-      handleCancel () {
-        this.close()
+  const title = ref('title');
+  const width = ref(800);
+  const visible = ref(false);
+  const disableSubmit = ref(false);
+  const realFormRef = ref();
+  const emit = defineEmits(['close', 'ok']);
+
+  function add() {
+    visible.value = true;
+
+    nextTick().then(() => {
+      realFormRef.value.add();
+    });
+  }
+  function edit(record) {
+    visible.value = true;
+
+    nextTick().then(() => {
+      realFormRef.value.edit(record);
+    });
+  }
+  function close() {
+    emit('close');
+    visible.value = false;
+  }
+  function submitCallback() {
+    emit('ok');
+    visible.value = false;
+  }
+  function handleOk() {
+    realFormRef.value.submitForm();
+    nextTick().then(() => {
+      emit('ok');
+    });
+  }
+  function handleCancel() {
+    close();
+  }
+
+  defineExpose({ title, disableSubmit, add, edit });
+</script>
+
+<style lang="less" scoped>
+  /** Button按钮间距 */
+  .ant-btn {
+    margin-left: 30px;
+    margin-bottom: 30px;
+    float: right;
+  }
+  .drawer-footer {
+    position: absolute;
+    bottom: 0;
+    width: 100%;
+    border-top: 1px solid #e8e8e8;
+    padding: 10px 16px;
+    text-align: right;
+    left: 0;
+    background: #fff;
+    border-radius: 0 0 2px 2px;
+  }
+  .ant-drawer-open {
+    /deep/ .ant-drawer-content {
+      overflow: inherit;
+      .side_close_btn {
+        position: absolute;
+        left: -60px;
+        top: calc(50% - 60px);
+        .ant-btn {
+          margin: 0;
+          width: 60px;
+          height: 60px;
+          border-radius: 0;
+        }
       }
     }
   }
-</script>
+</style>

src/views/adweb/enquirySiteRules/siteRuleList/modules/AdwebEnquirySiteRuleModal__Style.vue

@@ -1,102 +0,0 @@
-<template>
-  <a-drawer
-    :title="title"
-    :width="width"
-    placement="right"
-    :closable="false"
-    @close="close"
-    :visible="visible">
-    <adweb-enquiry-site-rule-form ref="realForm" @ok="submitCallback" :disabled="disableSubmit" normal></adweb-enquiry-site-rule-form>
-    <div class="drawer-footer">
-      <a-button v-if="!disableSubmit"  @click="handleOk" type="primary" style="margin-bottom: 0;">提交</a-button>
-    </div>
-     <div class="side_close_btn">
-          <a-button type="primary" icon="close" size="large" @click="handleCancel" />
-        </div>
-  </a-drawer>
-</template>
-
-<script>
-
-  import AdwebEnquirySiteRuleForm from './AdwebEnquirySiteRuleForm'
-
-  export default {
-    name: 'AdwebEnquirySiteRuleModal',
-    components: {
-      AdwebEnquirySiteRuleForm
-    },
-    data () {
-      return {
-        title:"操作",
-        width:800,
-        visible: false,
-        disableSubmit: false
-      }
-    },
-    methods: {
-      add () {
-        this.visible=true
-        this.$nextTick(()=>{
-          this.$refs.realForm.add();
-        })
-      },
-      edit (record) {
-        this.visible=true
-        this.$nextTick(()=>{
-          this.$refs.realForm.edit(record);
-        });
-      },
-      close () {
-        this.$emit('close');
-        this.visible = false;
-      },
-      submitCallback(){
-        this.$emit('ok');
-        this.visible = false;
-      },
-      handleOk () {
-        this.$refs.realForm.submitForm();
-      },
-      handleCancel () {
-        this.close()
-      }
-    }
-  }
-</script>
-
-<style lang="less" scoped>
-/** Button按钮间距 */
-  .ant-btn {
-    margin-left: 30px;
-    margin-bottom: 30px;
-    float: right;
-  }
-  .drawer-footer{
-    position: absolute;
-    bottom: 0;
-    width: 100%;
-    border-top: 1px solid #e8e8e8;
-    padding: 10px 16px;
-    text-align: right;
-    left: 0;
-    background: #fff;
-    border-radius: 0 0 2px 2px;
-  }
-    .ant-drawer-open{
-      /deep/ .ant-drawer-content{
-        overflow: inherit;
-        .side_close_btn{
-          position: absolute;
-          left: -60px;
-          top: calc(50% - 60px);
-          .ant-btn{
-            margin: 0;
-            width: 60px;
-            height: 60px;
-            border-radius: 0;
-          }
-        }
-      }
-
-    }
-</style>

src/views/adweb/enquirySiteRules/siteRuleList/modules/XpRecycleBinModal.vue

@@ -6,120 +6,116 @@
     :destroyOnClose="true"
     @cancel="handleCancel"
     cancelText="关闭"
-    :okButtonProps="{style:{display:'none'}}">
-
-
-    <a-form-model layout="inline" @keyup.enter.native="searchQuery" style="margin-bottom:15px">
-      <a-form-model-item>
-        <a-input placeholder="邮箱/姓名" v-model="queryParam.searchText"></a-input>
-      </a-form-model-item>
-      <a-form-model-item>
+    :okButtonProps="{ style: { display: 'none' } }"
+  >
+    <a-form layout="inline" @keyup.enter.native="searchQuery" style="margin-bottom: 15px">
+      <a-form-item>
+        <a-input placeholder="邮箱/姓名" v-model="queryParam.searchText" />
+      </a-form-item>
+      <a-form-item>
         <a-button type="primary" @click="searchQuery">查询</a-button>
-        <a-button  @click="searchReset" style="margin-left:8px">重置</a-button>
-      </a-form-model-item>
-    </a-form-model>
+        <a-button @click="searchReset" style="margin-left: 8px">重置</a-button>
+      </a-form-item>
+    </a-form>
 
-    <a-table
-      ref="table"
-      size="middle"
-      :columns="columns"
-      :loading="loading"
-      :dataSource="dataSource"
-      >
+    <a-table ref="table" size="middle" :columns="columns" :loading="loading" :dataSource="dataSource">
       <!-- 显示头像 -->
-      <template slot="avatarslot" slot-scope="text, record, index">
+      <template #avatarslot="text, record, index">
         <div class="anty-img-wrap">
-          <a-avatar shape="square" :src="url.getAvatar(record.avatar)" icon="user"/>
+          <a-avatar shape="square" :src="url.getAvatar(record.avatar)" icon="user" />
         </div>
       </template>
-      <div slot="contactSlot" slot-scope="text, record">
-        <a-popover>
-          <template slot="content">
-            {{text}}
-          </template>
-          <div style="width: 200px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis">{{text}}</div>
-        </a-popover>
-      </div>
-      <span slot="action" slot-scope="text, record">
-        <a @click="enquiryDetail(record)"> 详情</a>
-      </span>
+      <template #contactSlot="text, record">
+        <div>
+          <a-popover>
+            <template #content>
+              {{ text }}
+            </template>
+            <div style="width: 200px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis">{{ text }}</div>
+          </a-popover>
+        </div>
+      </template>
+      <template #action="text, record">
+        <span>
+          <a @click="enquiryDetail(record)"> 详情</a>
+        </span>
+      </template>
     </a-table>
     <!--询盘详情-->
-    <enquiry-detail ref="enquiryDetail"></enquiry-detail>
+    <enquiry-detail ref="enquiryDetail" />
   </a-modal>
 </template>
 
-<script>
-import { putAction, deleteAction, postAction, getAction } from '@/api/manage'
-  import { JeecgListMixin } from '@/mixins/JeecgListMixin'
-  import enquiryDetail from '@views/adweb/enquiry/modules/enquiryDetail'
+<script lang="js">
+  import { putAction, deleteAction, postAction, getAction } from '/@/api/manage/manage';
+
+  import enquiryDetail from '/@/views/adweb/enquiry/modules/enquiryDetail.vue';
 
   export default {
     name: 'XpRecycleBinModal',
-    mixins: [JeecgListMixin],
-    components:{enquiryDetail},
+    components: { enquiryDetail },
+
     data() {
       return {
         title: '',
         loading: false,
         innerVisible: false,
         dataSource: [],
-        visible:false,
+        visible: false,
         columns: [],
         url: {
           list: '/adweb/adwebEnquiry/getWastedEnquiry',
         },
-        disableMixinCreated:true,
-        keyword:'',
-        siteCode: ''
-      }
+        disableMixinCreated: true,
+        keyword: '',
+        siteCode: '',
+      };
     },
 
     methods: {
-      init(keyword,siteId){
-        let that = this
+      init(keyword, siteId) {
+        let that = this;
         that.columns = [
-            { title: '站点名称', align: 'left', dataIndex: 'siteName', scopedSlots: { customRender: 'contactSlot' }},
-            { title: '姓名', align: 'left', dataIndex: 'contact', scopedSlots: { customRender: 'contactSlot' }},
-            { title: '邮箱', align: 'left', dataIndex: 'fromEmail', scopedSlots: { customRender: 'contactSlot' } },
-            { title: '电话', align: 'left', dataIndex: 'phone' },
-            { title: '询盘时间', align: 'left', dataIndex: 'recordCtime' },
-            { title: '操作', align: 'center', dataIndex: 'action', scopedSlots: { customRender: 'action' } }
-          ]
-        that.keyword = keyword
-        that.siteId = siteId
-        that.loadData(keyword,siteId);
-        console.log(keyword)
-        that.visible = true
+          { title: '站点名称', align: 'left', dataIndex: 'siteName', scopedSlots: { customRender: 'contactSlot' } },
+          { title: '姓名', align: 'left', dataIndex: 'contact', scopedSlots: { customRender: 'contactSlot' } },
+          { title: '邮箱', align: 'left', dataIndex: 'fromEmail', scopedSlots: { customRender: 'contactSlot' } },
+          { title: '电话', align: 'left', dataIndex: 'phone' },
+          { title: '询盘时间', align: 'left', dataIndex: 'recordCtime' },
+          { title: '操作', align: 'center', dataIndex: 'action', scopedSlots: { customRender: 'action' } },
+        ];
+        that.keyword = keyword;
+        that.siteId = siteId;
+        that.loadData(keyword, siteId);
+        console.log(keyword);
+        that.visible = true;
       },
 
       //询盘详情
-      enquiryDetail(record){
+      enquiryDetail(record) {
         this.$nextTick(() => {
-          this.$refs.enquiryDetail.init(record)
-        })
+          this.$refs.enquiryDetail.init(record);
+        });
       },
       searchQuery() {
-        this.loadData(this.keyword,this.siteId);
+        this.loadData(this.keyword, this.siteId);
       },
 
       searchReset() {
-        this.queryParam = {}
-        this.loadData(this.keyword,this.siteId);
+        this.queryParam = {};
+        this.loadData(this.keyword, this.siteId);
       },
 
-
       handleCancel() {
-        this.queryParam = {}
-        this.visible = false
+        this.queryParam = {};
+        this.visible = false;
       },
 
-      loadData(keyword,siteId) {
-        if(!this.url.list){
-          this.$message.error("请设置url.list属性!")
-          return
+      loadData(keyword, siteId) {
+        if (!this.url.list) {
+          this.$message.error('请设置url.list属性!');
+          return;
         }
-        var params = this.getQueryParams();//查询条件
+        var params = this.getQueryParams(); //查询条件
         this.loading = true;
         params.keyword = keyword;
         params.siteId = siteId;
@@ -128,15 +124,14 @@ import { putAction, deleteAction, postAction, getAction } from '@/api/manage'
           if (res.success) {
             this.dataSource = res.result;
           }
-          if(res.code===510){
-            this.$message.warning(res.message)
+          if (res.code === 510) {
+            this.$message.warning(res.message);
           }
           this.loading = false;
-        })
+        });
       },
-
-    }
-  }
+    },
+  };
 </script>
 
-<style lang="less" scoped></style>
+<style lang="less" scoped></style>

src/views/adweb/enquirySiteRules/siteRuleList/siteRuleList.api.ts

@@ -0,0 +1,70 @@
+import { defHttp } from '/@/utils/http/axios';
+import { useMessage } from '/@/hooks/web/useMessage';
+
+const { createConfirm } = useMessage();
+
+enum Api {
+  list = '/adweb/adwebEnquirySiteRule/list',
+  deleteOne = '/adweb/adwebEnquirySiteRule/delete',
+  deleteBatch = '/adweb/adwebEnquirySiteRule/deleteBatch',
+  importExcel = 'adweb/adwebEnquirySiteRule/importExcel',
+  exportXls = '/adweb/adwebEnquirySiteRule/exportXls ',
+}
+
+/**
+ * 导出api
+ * @param params
+ */
+export const getExportUrl = Api.exportXls;
+
+/**
+ * 导入api
+ */
+export const getImportUrl = Api.importExcel;
+
+/**
+ * 列表接口
+ * @param params
+ */
+export const list = (params) => defHttp.get({ url: Api.list, params });
+
+/**
+ * 删除单个
+ * @param params
+ * @param handleSuccess
+ */
+export const deleteOne = (params, handleSuccess) => {
+  return defHttp.delete({ url: Api.deleteOne, params }, { joinParamsToUrl: true }).then(() => {
+    handleSuccess();
+  });
+};
+
+/**
+ * 批量删除
+ * @param params
+ * @param handleSuccess
+ */
+export const batchDelete = (params, handleSuccess) => {
+  createConfirm({
+    iconType: 'warning',
+    title: '确认删除',
+    content: '是否删除选中数据',
+    okText: '确认',
+    cancelText: '取消',
+    onOk: () => {
+      return defHttp.delete({ url: Api.deleteBatch, data: params }, { joinParamsToUrl: true }).then(() => {
+        handleSuccess();
+      });
+    },
+  });
+};
+
+/**
+ * 保存或者更新
+ * @param params
+ * @param isUpdate
+ */
+export const saveOrUpdate = (params, isUpdate) => {
+  const url = isUpdate ? Api.edit : Api.save;
+  return defHttp.post({ url: url, params }, { isTransformResponse: false });
+};

src/views/adweb/enquirySiteRules/siteRuleList/siteRuleList.data.ts

@@ -0,0 +1,44 @@
+import { BasicColumn } from '@/components/Table';
+
+export const columns: BasicColumn[] = [
+  {
+    title: '序号',
+    dataIndex: '',
+    key: 'rowIndex',
+    width: 60,
+    align: 'center',
+    customRender: function ({ index }) {
+      return parseInt(index) + 1;
+    },
+  },
+  {
+    title: '站点名称',
+    align: 'center',
+    dataIndex: 'siteName',
+  },
+  {
+    title: '关键词',
+    align: 'center',
+    dataIndex: 'word',
+  },
+  {
+    title: '黑白名单',
+    align: 'center',
+    dataIndex: 'blackOrWhite',
+    width: 180,
+    sorter: true,
+  },
+  {
+    title: '询盘数量',
+    align: 'center',
+    dataIndex: 'wasteEnquiryNum',
+  },
+  {
+    title: '创建日期',
+    align: 'center',
+    dataIndex: 'createTime',
+    customRender: function ({ text }) {
+      return !text ? '' : text.length > 10 ? text.substr(0, 10) : text;
+    },
+  },
+];