黑白名单

src/views/wechat/wx/index.vue

@@ -128,23 +128,24 @@
     >
       <Form :model="blackWhiteForm" layout="inline" style="height: 500px">
         <FormItem name="allowList" label="客户白名单" style="margin-left: 30px">
-          <Switch v-model:checked="isAllowListEnabled" @change="handleSwitchChange" />
-          <div v-if="isAllowListEnabled" style="foon-size: 12px; margin-top: 10px; color: #9a9a9a">
+          <Switch v-model:checked="blackWhiteForm.isAllowListEnabled" @change="handleSwitchChange" />
+          <div v-if="blackWhiteForm.isAllowListEnabled" style="foon-size: 12px; margin-top: 10px; color: #9a9a9a">
             开启白名单表示仅向白名单内的客户发送消息
           </div>
           <div v-else style="foon-size: 12px; margin-top: 10px; color: #9a9a9a">
             关闭白名单表示允许向所有客户发送消息
           </div>
-          <FormItem v-if="isAllowListEnabled" name="nickname" label="">
+          <FormItem v-if="blackWhiteForm.isAllowListEnabled" name="nickname" label="">
             <Select
               v-model:value="blackWhiteForm.wxid"
               :options="listOptions"
               show-search
-              :filter-option="filterOption"
+              @search="handleSearch"
               allowClear
               size="middle"
               placeholder="请选择"
               mode="multiple"
+              :max-tag-count="2"
               :style="{ width: '330px', margin: '0 5px' }"
             ></Select>
             <!-- <a-select
@@ -288,9 +289,11 @@
     groupBlockList: [],
     wxid: '',
     id: '',
+    isAllowListEnabled: false,
+    isGroupAllowListEnabled: false,
   });
-  const isAllowListEnabled = ref(false);
-  const isGroupAllowListEnabled = ref(false);
+  // const isAllowListEnabled = ref(false);
+  // const isGroupAllowListEnabled = ref(false);
   const listOptions = ref([]);
   // 计算属性来确定 Switch 的状态
   // const isAllowListEnabled = computed(() => {
@@ -313,14 +316,14 @@
     }));
   });
   // 计算属性来确定 blockList Switch 的状态
-const isBlockListEnabled = computed(() => {
-  return blackWhiteForm.blockList.length > 0;
-});
+// const isBlockListEnabled = computed(() => {
+//   return blackWhiteForm.blockList.length > 0;
+// });
 
 // 计算属性来确定 groupBlockList Switch 的状态
-const isGroupBlockListEnabled = computed(() => {
-  return blackWhiteForm.groupBlockList.length > 0;
-});
+// const isGroupBlockListEnabled = computed(() => {
+//   return blackWhiteForm.groupBlockList.length > 0;
+// });
 
 // 控制是否显示 RadioGroup
 // const showRadioGroup = computed(() => {
@@ -450,27 +453,42 @@ const groupBlockListOptions = computed(() => {
     });
   }
   function handleSwitchChange (checked){
-      isAllowListEnabled.value = checked;
-      console.log(blackWhiteForm.allowList,'allowList')
-      // 根据开关状态更新 blackWhiteForm 的 allowList
-      if (checked) {
-        blackWhiteForm.allowList = [{ wxid: 'SOME_ID' }]; // 示例：需要替换为实际的逻辑
-      } else {
-        blackWhiteForm.allowList = [{ wxid: 'ALL' }];
-      }
+      // isAllowListEnabled.value = checked;
+      // console.log(blackWhiteForm.allowList,'allowList')
+      // // 根据开关状态更新 blackWhiteForm 的 allowList
+      // if (checked) {
+      //   blackWhiteForm.allowList = [{ wxid: 'SOME_ID' }]; // 示例：需要替换为实际的逻辑
+      // } else {
+      //   blackWhiteForm.allowList = [{ wxid: 'ALL' }];
+      // }
     }
   //打开黑白名单
   async function handleBlackWhiteList(record: Recordable) {
-    listOptions.value = await getContactList({ page: 1, pageSize: 50, type: 1 , id:record.id});
+    let res1 = await getContactList({ page: 1, pageSize: 50, type: 1 , id:record.id});
+    // console.log(res1)
+    listOptions.value = res1.data.data.map((item: any)=>{
+      return {
+        label: item.nickname,
+        value: item.wxid,
+      }
+    });
     blackWhiteModalVisible.value = true;
     try {
       let res = await getBlackWhiteList({ id: record.id });
-      console.log(res.data, 'getBlackWhiteList');
+      // console.log(res.data, 'getBlackWhiteList');
 
       // 使用解构赋值和默认值
       if (res && res.data) {
-        const { allowList = [], groupAllowList = [], blockList = [], groupBlockList = [] } = res.data;
-
+        const {allowList = [],  groupAllowList = [], blockList = [], groupBlockList = [] } = res.data;
+        if(Array.isArray(allowList) && allowList.length == 0 || allowList[0].wxid == 'ALL'){
+          blackWhiteForm.isAllowListEnabled = true;
+          // blackWhiteForm.allowList = listOptions.value;
+          Object.assign(blackWhiteForm, { allowList: listOptions.value });
+          // console.log('first,',blackWhiteForm.allowList)
+        }else{
+          blackWhiteForm.isAllowListEnabled = false;
+          // blackWhiteForm.allowList = allowList;
+        }
         // 检查数据类型，确保是数组
         // blackWhiteForm.allowList = Array.isArray(allowList) ? allowList : [];
         blackWhiteForm.groupAllowList = Array.isArray(groupAllowList) ? groupAllowList : [];
@@ -483,6 +501,19 @@ const groupBlockListOptions = computed(() => {
       console.error('Failed to fetch black-white list:', error);
     }
   }
+  async function handleSearch(value){
+  if (value) {
+    // 触发远程请求
+    let res1 = await getContactList({ page: 1, pageSize: 50, type: 1, search: value });
+    console.log(res1);
+    listOptions.value = res1.data.data.map((item) => ({
+      label: item.nickname,
+      value: item.wxWxid,
+    }));
+  } else {
+    listOptions.value = []; // 如果没有输入，清空列表
+  }
+}
   //编辑模式
   function handleEditMode(record: Recordable) {
     accountId.value = record.id;