src/api/wechat/wx.ts

@@ -12,6 +12,7 @@ enum Api {
   GetWxById = '/wechat-api/wx',
   GetSysInfo = '/wechat-api/user/info',
   GetBlackWhiteList = '/wechat-api/wx/getWxAllowBlockList',
+  UpdataBlackWhiteList = '/wechat-api/wx/updateBlockAndAllowList',
 }
 
 /**
@@ -107,4 +108,16 @@ export const getBlackWhiteList = (params: BaseIDReq, mode: ErrorMessageMode = 'n
       errorMessageMode: mode,
     },
   );
+};
+
+/**
+ *  @description: 更新黑白名单
+ */
+export const updataBlackWhiteList = (params: BaseIDReq, mode: ErrorMessageMode = 'notice') => {
+  return defHttp.post<BaseDataResp<WxInfo>>(
+    { url: Api.UpdataBlackWhiteList, params: params },
+    {
+      errorMessageMode: mode,
+    },
+  );
 };

src/views/wechat/employee/EmployeeDrawer.vue

@@ -19,17 +19,33 @@
           :options="categoryList"
         ></Select>
       </FormItem>
-      <FormItem label="头像" name="avatar" :rules="{ required: true, message: '请上传头像' }">
-        <BasicUpload
-          :maxSize="100"
-          :maxNumber="1"
-          @change="handleChange"
-          :api="uploadApi"
+      <FormItem name="avatar" :rules="{ required: true, message: '请上传头像' }">
+        <template #label>
+          头像
+          <Tooltip>
+            <template #title>上传本地图片或输入头像链接</template>
+            <QuestionCircleOutlined />
+          </Tooltip>
+        </template>
+        <!-- <div :class="isUploadDisabled ? 'disabled-upload ' : ''"> -->
+          <BasicUpload
+            :maxSize="100"
+            :maxNumber="1"
+            :api="uploadApi"
+            v-model:value="formModel.avatar"
+            :accept="['image/*']"
+            :showPreviewNumber="false"
+            emptyHidePreview
+          />
+        <!-- </div>  @input="handleInputChange" -->
+        <FormItem>
+        <Input
+          style="width: 600px; margin-top: 10px"
           v-model:value="formModel.avatar"
-          :accept="['image/*']"
-          :showPreviewNumber="false"
-          emptyHidePreview
+          placeholder="请输头像链接"
+          allowClear
         />
+        </FormItem>
       </FormItem>
 
       <FormItem label="标签" name="tags" :rules="[{ required: true, message: '请选择标签' }]">
@@ -169,19 +185,32 @@
       </FormItem>
 
       <FormItem
-        label="视频链接"
         name="videoUrl"
         :rules="[{ required: true, message: '请上传视频' }]"
       >
+      <template #label>
+          视频链接
+          <Tooltip>
+            <template #title>上传本地视频或输入视频链接</template>
+            <QuestionCircleOutlined />
+          </Tooltip>
+        </template>
         <BasicUpload
           :maxSize="1000"
           :maxNumber="1"
-          @change="handleVideoChange"
           :api="uploadApi"
           v-model:value="formModel.videoUrl"
           :showPreviewNumber="false"
           emptyHidePreview
         />
+        <FormItem>
+        <Input
+          style="width: 600px; margin-top: 10px"
+          v-model:value="formModel.videoUrl"
+          placeholder="请输视频链接"
+          allowClear
+        />
+        </FormItem>
       </FormItem>
 
       <FormItem
@@ -224,7 +253,15 @@
   </BasicDrawer>
 </template>
 <script lang="ts" setup>
-  import { defineComponent, ref, computed, unref, reactive, onMounted, defineEmits } from 'vue';
+  import {
+    defineComponent,
+    ref,
+    computed,
+    unref,
+    reactive,
+    onMounted,
+    defineEmits,
+  } from 'vue';
   import { BasicForm, useForm } from '@/components/Form/index';
   import {
     Form,
@@ -236,8 +273,9 @@
     DatePicker,
     Select,
     message,
+    Tooltip,
   } from 'ant-design-vue';
-  import { PlusOutlined, MinusCircleOutlined } from '@ant-design/icons-vue';
+  import { PlusOutlined, MinusCircleOutlined, QuestionCircleOutlined } from '@ant-design/icons-vue';
   import { BasicUpload } from '@/components/Upload';
   import { deleteFile, downloadFile, getFileList, uploadApi } from '@/api/fms/file';
   import { formSchema } from './employee.data';
@@ -245,7 +283,12 @@
   import { useI18n } from 'vue-i18n';
   import dayjs from 'dayjs';
   import { getLabelSelectList } from '@/api/wechat/label';
-  import { createEmployee, updateEmployee, getEmployeeTypes,getEmployeeCategory } from '@/api/wechat/employee';
+  import {
+    createEmployee,
+    updateEmployee,
+    getEmployeeTypes,
+    getEmployeeCategory,
+  } from '@/api/wechat/employee';
   const emit = defineEmits<{
     (event: 'update:getList', value: { value: boolean }): void;
   }>();
@@ -261,7 +304,7 @@
     title: '',
     avatar: [],
     tags: [],
-    categoryId:undefined,
+    categoryId: undefined,
     hireCount: undefined,
     serviceCount: undefined,
     achievementCount: undefined,
@@ -283,11 +326,12 @@
     videoUrl: [],
     workExperience: [],
   });
+
   const updateId = ref(undefined);
   const initialForm = reactive({
     id: '',
     title: '',
-    categoryId:undefined,
+    categoryId: undefined,
     avatar: [],
     tags: [],
     hireCount: undefined,
@@ -370,10 +414,11 @@
       Object.assign(formModel, initialForm);
     }
     let res = await getLabelSelectList({ page: 1, pageSize: 1000, type: 1 });
-    actionLabel.value = res.data.map((item) => ({
-      label: item.label,
-      value: item.label,
-    }));
+    // actionLabel.value = res.data.map((item) => ({
+    //   label: item.label,
+    //   value: item.label,
+    // }));
+    actionLabel.value = res.data;
     let result = await getEmployeeTypes();
     configs_scene.value = result.data.scene.map((item) => ({
       label: item.title,
@@ -384,12 +429,12 @@
       value: item.id,
     }));
 
-    let res2 = await getEmployeeCategory({page: 1, pageSize: 50,});
+    let res2 = await getEmployeeCategory({ page: 1, pageSize: 50 });
     categoryList.value = res2.data.data.map((item) => ({
       label: item.name,
       value: item.id,
-    }))
-    console.log(res2.data.data)
+    }));
+    console.log(res2.data.data);
   });
   const getTitle = computed(() =>
     !unref(isUpdate) ? t('wechat.employee.addEmployee') : t('wechat.employee.editEmployee'),
@@ -407,30 +452,32 @@
       }
       values.tags = values.tags.map((tag) => `"${tag}"`).join(', ');
       values.abilityType = formModel.abilityType_title + '-' + formModel.abilityType_content;
-      console.log(values.scene,values.scene[0])
+      console.log(values.scene, values.scene[0]);
 
-       const descriptionToValueMap = new Map(
+      const descriptionToValueMap = new Map(
         configs_scene.value.map((item) => [item.label, item.value]),
       );
-      values.scene = values.scene.map(item => {
-        if (typeof item === 'string') {
-          return descriptionToValueMap.get(item) || item; // 找不到就返回原值，防止出错
-        }
-        return item;
-      }).filter(value => typeof value === 'number') // 只保留数字，移除无法匹配的描述
-      .join(','); // 转换为逗号分隔的字符串
+      values.scene = values.scene
+        .map((item) => {
+          if (typeof item === 'string') {
+            return descriptionToValueMap.get(item) || item; // 找不到就返回原值，防止出错
+          }
+          return item;
+        })
+        .filter((value) => typeof value === 'number') // 只保留数字，移除无法匹配的描述
+        .join(','); // 转换为逗号分隔的字符串
+
+      const descriptionToMap = new Map(configs_switch.value.map((item) => [item.label, item.value]));
+      values.switchIn = values.switchIn
+        .map((item) => {
+          if (typeof item === 'string') {
+            return descriptionToMap.get(item) || item; // 找不到就返回原值，防止出错
+          }
+          return item;
+        })
+        .filter((value) => typeof value === 'number') // 只保留数字，移除无法匹配的描述
+        .join(',');
 
-      const descriptionToMap = new Map(
-        configs_switch.value.map((item) => [item.label, item.value]),
-      );
-      values.switchIn = values.switchIn.map(item => {
-        if (typeof item === 'string') {
-          return descriptionToMap.get(item) || item; // 找不到就返回原值，防止出错
-        }
-        return item;
-      }).filter(value => typeof value === 'number') // 只保留数字，移除无法匹配的描述
-      .join(',');
-     
       // 将 hireCount, serviceCount, achievementCount 转换为整数
       values.hireCount = parseInt(values.hireCount, 10);
       values.serviceCount = parseInt(values.serviceCount, 10);
@@ -471,12 +518,6 @@
       console.error('Validation failed:', error);
     }
   }
-  function handleChange(list: string[]) {
-    // if (msgDisabled.value) {
-    //   return
-    // }
-    // createMessage.info(`已上传文件${JSON.stringify(list)}`);
-  }
   function addTutorial() {
     if (Array.isArray(formModel.tutorial)) {
       formModel.tutorial.push({ index: '', title: '', content: '' });
@@ -522,3 +563,10 @@
     }
   }
 </script>
+<style lang="less" scoped>
+  .disabled-upload {
+    cursor: not-allowed;
+    pointer-events: none;
+    opacity: 0.5;
+  }
+</style>

src/views/wechat/sop_task/index.vue

@@ -56,7 +56,7 @@ export default defineComponent({
       bordered: false,
       showIndexColumn: false,
       clickToRowSelect: false,
-      scroll:{ x: 1800, y: 500 },
+      scroll:{ x: 1000, y: 500 },
       actionColumn: {
         width: 200,
         title: t('common.action'),
@@ -171,12 +171,11 @@ export default defineComponent({
             },
             ifShow: true,
           },
-          // {
-          //   icon: 'ant-design:copy-outlined',
-          //   onClick: handleCopy.bind(null, record),
-          //   tooltip: '复制',
-          //   ifShow: true,
-          // }
+          {
+            label: '复制',
+            onClick: handleCopy.bind(null, record),
+            ifShow: true,
+          }
         ];
       } else if (record.status === 2) {
         return [

src/views/wechat/sop_task/sopTask.data.ts

@@ -49,22 +49,22 @@ export const columns: BasicColumn[] = [
   //     return type ? type.label : '';
   //   },
   // },
-  {
-    title: t('开始时间'),
-    dataIndex: 'planStartTime',
-    // width: 125,
-    customRender: ({ record }) => {
-      return record.planStartTime ? formatToDateTime(record.planStartTime) : "不限制";
-    },
-  },
-  {
-    title: t('结束时间'),
-    dataIndex: 'planEndTime',
-    // width: 125,
-    customRender: ({ record }) => {
-      return record.planEndTime ? formatToDateTime(record.planEndTime) : "不限制";
-    },
-  },
+  // {
+  //   title: t('开始时间'),
+  //   dataIndex: 'planStartTime',
+  //   // width: 125,
+  //   customRender: ({ record }) => {
+  //     return record.planStartTime ? formatToDateTime(record.planStartTime) : "不限制";
+  //   },
+  // },
+  // {
+  //   title: t('结束时间'),
+  //   dataIndex: 'planEndTime',
+  //   // width: 125,
+  //   customRender: ({ record }) => {
+  //     return record.planEndTime ? formatToDateTime(record.planEndTime) : "不限制";
+  //   },
+  // },
   {
     title: t('发送账号'),
     dataIndex: 'botWxidList',
@@ -75,7 +75,7 @@ export const columns: BasicColumn[] = [
         record.botWxidList?.map((wxid, index) =>
           h(
             'div',
-            { key: index, style: { display: 'flex', alignItems: 'center' } },
+            { key: index, style: { display: 'flex', alignItems: 'center' ,justifyContent:'center'} },
             [
               h(WechatOutlined, {
                 style: { marginRight: '8px', fontSize: '20px', color: '#00BB29' },
@@ -124,28 +124,28 @@ export const searchFormSchema: FormSchema[] = [
     component: 'Input',
     colProps: { span: 8 },
   },
-  {
-    field: 'planStartTime',
-    label: '开始时间',
-    component: 'DatePicker',
-    componentProps: {
-      // 这里可以添加日期选择器的属性
-      showTime: true, // 是否显示时间选择
-      format: 'YYYY-MM-DD HH:mm:ss', // 日期时间格式
-    },
-    colProps: { span: 7 },
-  },
-  {
-    field: 'planEndTime',
-    label: '结束时间',
-    component: 'DatePicker',
-    componentProps: {
-      // 这里可以添加日期选择器的属性
-      showTime: true, // 是否显示时间选择
-      format: 'YYYY-MM-DD HH:mm:ss', // 日期时间格式
-    },
-    colProps: { span: 7 },
-  },
+  // {
+  //   field: 'planStartTime',
+  //   label: '开始时间',
+  //   component: 'DatePicker',
+  //   componentProps: {
+  //     // 这里可以添加日期选择器的属性
+  //     showTime: true, // 是否显示时间选择
+  //     format: 'YYYY-MM-DD HH:mm:ss', // 日期时间格式
+  //   },
+  //   colProps: { span: 7 },
+  // },
+  // {
+  //   field: 'planEndTime',
+  //   label: '结束时间',
+  //   component: 'DatePicker',
+  //   componentProps: {
+  //     // 这里可以添加日期选择器的属性
+  //     showTime: true, // 是否显示时间选择
+  //     format: 'YYYY-MM-DD HH:mm:ss', // 日期时间格式
+  //   },
+  //   colProps: { span: 7 },
+  // },
   // {
   //   field: 'creatorId',
   //   // label: t('wechat.sopTask.name'),

src/views/wechat/token/token.data.ts

@@ -5,11 +5,11 @@ import { formatToDateTime } from '@/utils/dateUtil';
 const { t } = useI18n();
 
 export const columns: BasicColumn[] = [
-  {
-    title: t('wechat.token.expireAt'),
-    dataIndex: 'expireAt',
-    width: 100,
-  },
+  // {
+  //   title: t('wechat.token.expireAt'),
+  //   dataIndex: 'expireAt',
+  //   width: 100,
+  // },
   {
     title: t('wechat.token.expireAtStr'),
     dataIndex: 'expireAtStr',
@@ -20,11 +20,11 @@ export const columns: BasicColumn[] = [
     dataIndex: 'token',
     width: 100,
   },
-  {
-    title: t('wechat.token.mac'),
-    dataIndex: 'mac',
-    width: 100,
-  },
+  // {
+  //   title: t('wechat.token.mac'),
+  //   dataIndex: 'mac',
+  //   width: 100,
+  // },
   {
     title: t('common.createTime'),
     dataIndex: 'createdAt',
@@ -42,12 +42,12 @@ export const searchFormSchema: FormSchema[] = [
     component: 'Input',
     colProps: { span: 8 },
   },
-  {
-    field: 'mac',
-    label: t('wechat.token.mac'),
-    component: 'Input',
-    colProps: { span: 8 },
-  },
+  // {
+  //   field: 'mac',
+  //   label: t('wechat.token.mac'),
+  //   component: 'Input',
+  //   colProps: { span: 8 },
+  // },
 ];
 
 export const formSchema: FormSchema[] = [
@@ -57,16 +57,22 @@ export const formSchema: FormSchema[] = [
     component: 'Input',
     show: false,
   },
-  {
-    field: 'expireAt',
-    label: t('wechat.token.expireAt'),
-    component: 'InputNumber',
-    required: true,
-  },
+  // {
+  //   field: 'expireAt',
+  //   label: t('wechat.token.expireAt'),
+  //   component: 'DatePicker',
+  //   required: true,
+  // },
   {
     field: 'expireAtStr',
     label: t('wechat.token.expireAtStr'),
-    component: 'Input',
+    component: 'DatePicker',
+    componentProps: {
+      showTime: {
+        format: 'HH:mm:ss', // 显示时分秒
+      },
+      format: 'YYYY-MM-DD HH:mm:ss', // 日期和时间格式
+    },
     required: true,
   },
   {
@@ -75,10 +81,10 @@ export const formSchema: FormSchema[] = [
     component: 'Input',
     required: true,
   },
-  {
-    field: 'mac',
-    label: t('wechat.token.mac'),
-    component: 'Input',
-    required: true,
-  },
+  // {
+  //   field: 'mac',
+  //   label: t('wechat.token.mac'),
+  //   component: 'Input',
+  //   required: true,
+  // },
 ];

src/views/wechat/wx/index.vue

@@ -1,37 +1,7 @@
 <template>
   <div>
-    <BasicTable @register="registerTable">
+    <BasicTable @register="registerTable" :loading="loading">
       <template #toolbar>
-        <!-- 筛选表单 -->
-        <!-- <Form
-          :model="filterForm"
-          layout="inline"
-          @submit.prevent="handleFilterSubmit"
-          style="margin-bottom: 16px"
-        >
-          <FormItem label="服务器名称" name="serverId">
-            <Select
-              v-model:value="filterForm.serverId"
-              :options="options"
-              style="width: 200px"
-              placeholder="请选择服务器"
-              allowClear
-            ></Select>
-          </FormItem>
-          <FormItem label="端口" name="port">
-            <Input v-model:value="filterForm.port" style="width: 200px" allowClear />
-          </FormItem>
-          <FormItem label="进程ID" name="processId">
-            <Input v-model:value="filterForm.processId" style="width: 200px" allowClear />
-          </FormItem>
-          <FormItem label="租户名称" name="organizationName" v-if="permCode === '001'">
-            <Input v-model:value="filterForm.organizationName" style="width: 200px" allowClear />
-          </FormItem>
-          <FormItem>
-            <a-button type="primary" html-type="submit">筛选</a-button>
-          </FormItem>
-        </Form> -->
-        <!-- <a-button @click="handleEditMode">编辑模式</a-button> -->
         <a-button type="primary" v-if="permCode === '001'" @click="handleCreate">
           {{ t('wechat.wx.addWx') }}
         </a-button>
@@ -49,10 +19,10 @@
                 label: '编辑模式',
                 onClick: handleEditMode.bind(null, record),
               },
-              // {
-              //   label: '黑白名单',
-              //   onClick: handleBlackWhiteList.bind(null, record),
-              // },
+              {
+                label: '黑白名单',
+                onClick: handleBlackWhiteList.bind(null, record),
+              },
               {
                 label: '登录',
                 onClick: handleLogin.bind(null, record),
@@ -116,7 +86,6 @@
         </FormItem>
       </Form>
     </Modal>
-
     <!-- 编辑黑白名单 -->
     <Modal
       width="700px"
@@ -128,107 +97,139 @@
     >
       <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.allowWxid"
+              :options="listOptions"
+              show-search
+              @search="handleSearchAllow"
+              allowClear
+              size="middle"
+              placeholder="请选择"
+              mode="multiple"
+              :max-tag-count="2"
+              :style="{ width: '330px', margin: '0 5px' }"
+            ></Select> -->
             <Select
-              v-model:value="blackWhiteForm.wxid"
+              v-model:value="blackWhiteForm.allowWxid"
               :options="listOptions"
               show-search
-              :filter-option="filterOption"
+              :filter-option="filterAllowOption"
               allowClear
               size="middle"
               placeholder="请选择"
               mode="multiple"
+              :max-tag-count="2"
               :style="{ width: '330px', margin: '0 5px' }"
+              virtual
             ></Select>
-            <!-- <a-select
-              v-model:value="value"
-              show-search
-              placeholder="Select a person"
-              style="width: 200px"
-              :options="options"
-              :filter-option="filterOption"
-              @focus="handleFocus"
-              @blur="handleBlur"
-              @change="handleChange"
-            ></a-select> -->
           </FormItem>
         </FormItem>
-
         <FormItem name="groupAllowList" label="客群白名单" style="margin-left: 30px">
-          <Switch v-model:checked="isGroupAllowListEnabled" />
-          <div v-if="isGroupAllowListEnabled" style="foon-size: 12px; margin-top: 10px; color: #9a9a9a">
+          <Switch v-model:checked="blackWhiteForm.isGroupAllowListEnabled" />
+          <div
+            v-if="blackWhiteForm.isGroupAllowListEnabled"
+            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="isGroupAllowListEnabled" name="nickname" label="">
+          <FormItem v-if="blackWhiteForm.isGroupAllowListEnabled" name="nickname" label="">
             <Select
-              v-model:value="blackWhiteForm.wxid"
-              :options="groupAllowListOptions"
+              v-model:value="blackWhiteForm.groupAllowWxid"
+              :options="groupListOptions"
+              show-search
+              :filter-option="filterAllowOption"
               allowClear
               size="middle"
               placeholder="请选择"
+              mode="multiple"
+              :max-tag-count="2"
               :style="{ width: '330px', margin: '0 5px' }"
+              virtual
             ></Select>
           </FormItem>
         </FormItem>
 
         <FormItem name="blockList" label="客户黑名单" style="margin-left: 30px">
-          <Switch v-model:checked="isBlockListEnabledt" />
-          <div v-if="isBlockListEnabledt" style="foon-size: 12px; margin-top: 10px; color: #9a9a9a">
+          <Switch v-model:checked="blackWhiteForm.isBlockListEnabledt" />
+          <div
+            v-if="blackWhiteForm.isBlockListEnabledt"
+            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="isBlockListEnabledt" name="groupBlockList" label="">
-            <RadioGroup v-model:value="type" style="margin-bottom: 16px">
+          <FormItem v-if="blackWhiteForm.isBlockListEnabledt" name="groupBlockList" label="">
+            <RadioGroup v-model:value="blockType" style="margin-bottom: 16px">
               <RadioButton value="all">全部客户</RadioButton>
               <RadioButton value="part">部分客户</RadioButton>
             </RadioGroup>
           </FormItem>
-          <FormItem v-if="isBlockListEnabledt" name="nickname" label="">
+          <FormItem v-if="blackWhiteForm.isBlockListEnabledt" name="nickname" label="">
             <Select
-              v-model:value="blackWhiteForm.wxid"
-              :options="blockListOptions"
+              v-model:value="blackWhiteForm.blackWxid"
+              :options="listOptions"
+              show-search
               allowClear
               size="middle"
               placeholder="请选择"
               :style="{ width: '330px', margin: '0 5px' }"
+              :filter-option="filterAllowOption"
+              mode="multiple"
+              :max-tag-count="2"
+              virtual
             ></Select>
           </FormItem>
         </FormItem>
 
         <FormItem name="groupBlockList" label="客群黑名单" style="margin-left: 30px">
-          <Switch v-model:checked="isGroupBlockListEnabled" />
-          <div v-if="isGroupBlockListEnabled" style="foon-size: 12px; margin-top: 10px; color: #9a9a9a">
+          <Switch v-model:checked="blackWhiteForm.isGroupBlockListEnabled" />
+          <div
+            v-if="blackWhiteForm.isGroupBlockListEnabled"
+            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="isGroupBlockListEnabled" name="groupBlockList" label="">
-            <RadioGroup v-model:value="type" style="margin-bottom: 16px">
+          <FormItem v-if="blackWhiteForm.isGroupBlockListEnabled" name="groupBlockList" label="">
+            <RadioGroup v-model:value="blockGroupType" style="margin-bottom: 16px">
               <RadioButton value="all">全部客群</RadioButton>
               <RadioButton value="part">部分客群</RadioButton>
             </RadioGroup>
           </FormItem>
-          <FormItem v-if="isGroupBlockListEnabled" name="groupBlockList" label="">
+          <FormItem v-if="blackWhiteForm.isGroupBlockListEnabled" name="groupBlockList" label="">
             <Select
-              v-model:value="blackWhiteForm.id"
-              :options="modeList"
+              v-model:value="blackWhiteForm.groupBlackWxid"
+              :options="groupListOptions"
               allowClear
               size="middle"
               placeholder="请选择"
               :style="{ width: '330px', margin: '0 5px' }"
+              show-search
+              :filter-option="filterAllowOption"
+              mode="multiple"
+              :max-tag-count="2"
+              virtual
             ></Select>
           </FormItem>
         </FormItem>
@@ -259,7 +260,7 @@
   import WxDrawer from './WxDrawer.vue';
   import { getAgentList } from '@/api/wechat/agent';
   import { getServerList } from '@/api/wechat/server';
-  import {getContactList} from '@/api/wechat/contact';
+  import { getContactList } from '@/api/wechat/contact';
   import { useI18n } from 'vue-i18n';
 
   import { columns } from './wx.data';
@@ -270,10 +271,12 @@
     updateWx,
     checkWx,
     getBlackWhiteList,
+    updataBlackWhiteList,
   } from '@/api/wechat/wx';
   import { getFriendsAndGroupsApi, logoutApi } from '@/api/wechat/wxhook';
   import type { TabsProps } from 'ant-design-vue';
-  const type = ref<TabsProps['all']>('part');
+  const blockType = ref<TabsProps['all']>('part');
+  const blockGroupType = ref<TabsProps['all']>('part');
   const searchFormSchema = ref<FormSchema[]>([]);
   const { t } = useI18n();
   const selectedIds = ref<number[] | string[]>();
@@ -281,69 +284,40 @@
   let modeList = ref([]);
   const modalVisible = ref(false);
   const blackWhiteModalVisible = ref(false);
+  const loading = ref(false); // 添加 loading 状态
+  const recordId = ref(undefined);
   const blackWhiteForm = reactive({
     allowList: [],
     groupAllowList: [],
     blockList: [],
     groupBlockList: [],
-    wxid: '',
+    groupAllowWxid: [], //客群白名单ID
+    allowWxid: [], //客户白名单id
+    blackWxid: [], //客户黑名单id
+    groupBlackWxid: [], //客群黑名单id
     id: '',
+    isAllowListEnabled: false,
+    isGroupAllowListEnabled: false,
+    isBlockListEnabledt: false,
+    isGroupBlockListEnabled: false,
   });
-  const isAllowListEnabled = ref(false);
-  const isGroupAllowListEnabled = ref(false);
-  const listOptions = ref([]);
-  // 计算属性来确定 Switch 的状态
-  // const isAllowListEnabled = computed(() => {
-  //   return blackWhiteForm.allowList.length > 0 && blackWhiteForm.allowList[0].wxid !== 'ALL';
-  // });
-  // const isGroupAllowListEnabled = computed(() => {
-  //   return blackWhiteForm.groupAllowList.length > 0 && blackWhiteForm.groupAllowList[0].wxid !== 'ALL';
-  // });
-  // 计算属性来生成 Select 的选项
-  const allowListOptions = computed(() => {
-    return blackWhiteForm.allowList.map((item) => ({
-      label: item.nickname,
-      value: item.wxid,
-    }));
-  });
-  const groupAllowListOptions = computed(() => {
-    return blackWhiteForm.groupAllowList.map((item) => ({
-      label: item.nickname,
-      value: item.wxid,
-    }));
+  const initialBlackWhiteForm = reactive({
+    allowList: [],
+    groupAllowList: [],
+    blockList: [],
+    groupBlockList: [],
+    groupAllowWxid: [], //客群白名单ID
+    allowWxid: [], //客户白名单id
+    blackWxid: [], //客户黑名单id
+    groupBlackWxid: [], //客群黑名单id
+    id: '',
+    isAllowListEnabled: false,
+    isGroupAllowListEnabled: false,
+    isBlockListEnabledt: false,
+    isGroupBlockListEnabled: false,
   });
-  // 计算属性来确定 blockList Switch 的状态
-const isBlockListEnabled = computed(() => {
-  return blackWhiteForm.blockList.length > 0;
-});
-
-// 计算属性来确定 groupBlockList Switch 的状态
-const isGroupBlockListEnabled = computed(() => {
-  return blackWhiteForm.groupBlockList.length > 0;
-});
-
-// 控制是否显示 RadioGroup
-// const showRadioGroup = computed(() => {
-//   return blackWhiteForm.blockList.length > 0;
-// });
-
-// 控制是否显示 groupBlockList 的 RadioGroup
-const showGroupRadioGroup = computed(() => {
-  return blackWhiteForm.groupBlockList.length > 0;
-});
-const blockListOptions = computed(() => {
-  return blackWhiteForm.blockList.map(item => ({
-    label: item.nickname,
-    value: item.wxid,
-  }));
-});
-// 生成 Select 的选项
-const groupBlockListOptions = computed(() => {
-  return blackWhiteForm.groupBlockList.map(item => ({
-    label: item.nickname,
-    value: item.wxid,
-  }));
-});
+  const listOptions = ref([]);
+  const groupListOptions = ref([]);
 
   const form = reactive({
     name: '',
@@ -388,8 +362,8 @@ const groupBlockListOptions = computed(() => {
     rowKey: 'id',
   });
   const filterOption = (input: string, option: any) => {
-  return option.value.toLowerCase().indexOf(input.toLowerCase()) >= 0;
-};
+    return option.value.toLowerCase().indexOf(input.toLowerCase()) >= 0;
+  };
   onMounted(async () => {
     let res = await getPermCode();
     permCode.value = res.data[0];
@@ -449,40 +423,135 @@ const groupBlockListOptions = computed(() => {
       isUpdate: !isUpdate.value,
     });
   }
-  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' }];
-      }
+  function handleSwitchChange(checked) {}
+
+  async function getListOptions(id) {
+    let resCustomer = await getContactList({ page: 1, pageSize: 10000, type: 1, id: id });
+    const data = resCustomer.data.data.map((item) => ({
+      label: item.nickname,
+      value: item.wxid,
+    }));
+    listOptions.value = [...data]; // 初始化时显示所有数据
+  }
+  function filterAllowOption(input: string, option: any) {
+    return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0;
+  }
+  async function getgroupListOptions(id) {
+    let resGroup = await getContactList({ page: 1, pageSize: 5000, type: 2, id: id });
+    groupListOptions.value = resGroup.data.data.map((item) => ({
+      label: item.nickname,
+      value: item.wxid,
+    }));
+  }
+  function handleblackWhiteCancel() {
+    Object.assign(blackWhiteForm, initialBlackWhiteForm);
+  }
+  async function handleblackWhiteOk() {
+    let allowList;
+    let groupBlockList;
+    let blockList;
+    let groupAllowList;
+    if (blackWhiteForm.allowWxid.length == listOptions.value.length) {
+      console.log(blackWhiteForm.allowWxid.length, listOptions.value.length);
+      allowList = ['ALL'];
+    } else {
+      allowList = blackWhiteForm.allowWxid;
+    }
+    if (blackWhiteForm.blackWxid.length == listOptions.value.length) {
+      blockList = ['ALL'];
+    } else {
+      blockList = blackWhiteForm.blackWxid;
+    }
+    if (blackWhiteForm.groupAllowWxid.length == groupListOptions.value.length) {
+      groupAllowList = ['ALL'];
+    } else {
+      groupAllowList = blackWhiteForm.groupAllowWxid;
+    }
+    if (blackWhiteForm.groupBlackWxid.length == groupListOptions.value.length) {
+      groupBlockList = ['ALL'];
+    } else {
+      groupBlockList = blackWhiteForm.groupBlackWxid;
+    }
+    console.log(allowList,groupBlockList,blockList,groupAllowList,'recordId')
+    let res = await updataBlackWhiteList({
+      id: recordId.value,
+      allowList,
+      blockList,
+      groupAllowList,
+      groupBlockList,
+    });
+    if (res.code == 0) {
+      message.success('success');
+      blackWhiteModalVisible.value = false;
+      await reload();
+    } else {
+      blackWhiteModalVisible.value = false;
     }
+  }
   //打开黑白名单
   async function handleBlackWhiteList(record: Recordable) {
-    listOptions.value = await getContactList({ page: 1, pageSize: 50, type: 1 , id:record.id});
-    blackWhiteModalVisible.value = true;
+    recordId.value = record.id;
+    loading.value = true; // 开始加载
     try {
+      await getListOptions(record.id);
+      await getgroupListOptions(record.id);
       let res = await getBlackWhiteList({ id: record.id });
-      console.log(res.data, 'getBlackWhiteList');
-
       // 使用解构赋值和默认值
       if (res && res.data) {
         const { allowList = [], groupAllowList = [], blockList = [], groupBlockList = [] } = res.data;
-
-        // 检查数据类型，确保是数组
-        // blackWhiteForm.allowList = Array.isArray(allowList) ? allowList : [];
-        blackWhiteForm.groupAllowList = Array.isArray(groupAllowList) ? groupAllowList : [];
-        blackWhiteForm.blockList = Array.isArray(blockList) ? blockList : [];
-        blackWhiteForm.groupBlockList = Array.isArray(groupBlockList) ? groupBlockList : [];
+        if ((Array.isArray(allowList) && allowList.length == 0) || allowList[0].wxid == 'ALL') {
+          blackWhiteForm.isAllowListEnabled = true;
+          // blackWhiteForm.allowList = listOptions.value;
+          Object.assign(blackWhiteForm, { allowWxid: listOptions.value });
+          // console.log(blackWhiteForm.allowList,listOptions.value);
+        } else {
+          blackWhiteForm.isAllowListEnabled = false;
+          Object.assign(blackWhiteForm, { allowWxid: allowList });
+        }
+        if (
+          (Array.isArray(groupAllowList) && groupAllowList.length == 0) ||
+          groupAllowList[0].wxid == 'ALL'
+        ) {
+          blackWhiteForm.isGroupAllowListEnabled = true;
+          Object.assign(blackWhiteForm, { groupAllowWxid: groupListOptions.value });
+        } else {
+          blackWhiteForm.isGroupAllowListEnabled = false;
+          Object.assign(blackWhiteForm, { groupAllowWxid: groupAllowList });
+        }
+        if (Array.isArray(blockList) && blockList.length == 0) {
+          blackWhiteForm.isBlockListEnabledt = false;
+        } else if (Array.isArray(blockList) && blockList[0].wxid == 'ALL') {
+          blackWhiteForm.isBlockListEnabledt = true;
+          blockType.value = 'all';
+          Object.assign(blackWhiteForm, { blackWxid: listOptions.value });
+        } else {
+          blackWhiteForm.isBlockListEnabledt = true;
+          blockType.value = 'part';
+          let data = blockList.map((item) => 
+            item.wxid,
+          );
+          Object.assign(blackWhiteForm, { blackWxid: data });
+        }
+        if (Array.isArray(groupBlockList) && groupBlockList.length == 0) {
+          blackWhiteForm.isGroupBlockListEnabled = false;
+        } else if (Array.isArray(groupBlockList) && groupBlockList[0].wxid == 'ALL') {
+          blackWhiteForm.isGroupBlockListEnabled = true;
+          blockGroupType.value = 'all';
+          Object.assign(blackWhiteForm, { groupBlackWxid: groupListOptions.value });
+        } else {
+          blackWhiteForm.isGroupBlockListEnabled = true;
+          blockGroupType.value = 'part';
+          Object.assign(blackWhiteForm, { groupBlackWxid: groupBlockList });
+        }
       }
-
-      console.log(blackWhiteForm.allowList, 'getBlackWhiteList');
     } catch (error) {
       console.error('Failed to fetch black-white list:', error);
+    } finally {
+      loading.value = false; // 请求结束
+      blackWhiteModalVisible.value = true;
     }
   }
+
   //编辑模式
   function handleEditMode(record: Recordable) {
     accountId.value = record.id;
@@ -496,7 +565,6 @@ const groupBlockListOptions = computed(() => {
   }
   async function handleOk() {
     let res = await updateWx({ agentId: form.id, id: accountId.value });
-    console.log(res);
     message.success('success');
     modalVisible.value = false;
     await reload();