群发消息标签区分、

internal/eslint-config/dist/index.cjs

@@ -1,7 +1,7 @@
-module.exports = require("/Users/songbowen/development/Project/gooki/scrm/wechat-ui/node_modules/.pnpm/jiti@1.21.6/node_modules/jiti/lib/index.js")(null, {
+module.exports = require("/Users/wanganyue/Desktop/wechat-ui/node_modules/.pnpm/jiti@1.21.6/node_modules/jiti/lib/index.js")(null, {
   "esmResolve": true,
   "interopDefault": true,
   "alias": {
-    "@vben/eslint-config": "/Users/songbowen/development/Project/gooki/scrm/wechat-ui/internal/eslint-config"
+    "@vben/eslint-config": "/Users/wanganyue/Desktop/wechat-ui/internal/eslint-config"
   }
-})("/Users/songbowen/development/Project/gooki/scrm/wechat-ui/internal/eslint-config/src/index.ts")
+})("/Users/wanganyue/Desktop/wechat-ui/internal/eslint-config/src/index.ts")

internal/eslint-config/dist/index.d.ts

@@ -1,2 +1,2 @@
-export * from "/Users/songbowen/development/Project/gooki/scrm/wechat-ui/internal/eslint-config/src/index";
-export { default } from "/Users/songbowen/development/Project/gooki/scrm/wechat-ui/internal/eslint-config/src/index";
+export * from "/Users/wanganyue/Desktop/wechat-ui/internal/eslint-config/src/index";
+export { default } from "/Users/wanganyue/Desktop/wechat-ui/internal/eslint-config/src/index";

internal/eslint-config/dist/index.mjs

@@ -1,12 +1,12 @@
-import jiti from "file:///Users/songbowen/development/Project/gooki/scrm/wechat-ui/node_modules/.pnpm/jiti@1.21.6/node_modules/jiti/lib/index.js";
+import jiti from "file:///Users/wanganyue/Desktop/wechat-ui/node_modules/.pnpm/jiti@1.21.6/node_modules/jiti/lib/index.js";
 
-/** @type {import("/Users/songbowen/development/Project/gooki/scrm/wechat-ui/internal/eslint-config/src/index")} */
+/** @type {import("/Users/wanganyue/Desktop/wechat-ui/internal/eslint-config/src/index")} */
 const _module = jiti(null, {
   "esmResolve": true,
   "interopDefault": true,
   "alias": {
-    "@vben/eslint-config": "/Users/songbowen/development/Project/gooki/scrm/wechat-ui/internal/eslint-config"
+    "@vben/eslint-config": "/Users/wanganyue/Desktop/wechat-ui/internal/eslint-config"
   }
-})("/Users/songbowen/development/Project/gooki/scrm/wechat-ui/internal/eslint-config/src/index.ts");
+})("/Users/wanganyue/Desktop/wechat-ui/internal/eslint-config/src/index.ts");
 
 export default _module;

internal/eslint-config/dist/strict.cjs

@@ -1,7 +1,7 @@
-module.exports = require("/Users/songbowen/development/Project/gooki/scrm/wechat-ui/node_modules/.pnpm/jiti@1.21.6/node_modules/jiti/lib/index.js")(null, {
+module.exports = require("/Users/wanganyue/Desktop/wechat-ui/node_modules/.pnpm/jiti@1.21.6/node_modules/jiti/lib/index.js")(null, {
   "esmResolve": true,
   "interopDefault": true,
   "alias": {
-    "@vben/eslint-config": "/Users/songbowen/development/Project/gooki/scrm/wechat-ui/internal/eslint-config"
+    "@vben/eslint-config": "/Users/wanganyue/Desktop/wechat-ui/internal/eslint-config"
   }
-})("/Users/songbowen/development/Project/gooki/scrm/wechat-ui/internal/eslint-config/src/strict.ts")
+})("/Users/wanganyue/Desktop/wechat-ui/internal/eslint-config/src/strict.ts")

internal/eslint-config/dist/strict.d.ts

@@ -1,2 +1,2 @@
-export * from "/Users/songbowen/development/Project/gooki/scrm/wechat-ui/internal/eslint-config/src/strict";
-export { default } from "/Users/songbowen/development/Project/gooki/scrm/wechat-ui/internal/eslint-config/src/strict";
+export * from "/Users/wanganyue/Desktop/wechat-ui/internal/eslint-config/src/strict";
+export { default } from "/Users/wanganyue/Desktop/wechat-ui/internal/eslint-config/src/strict";

internal/eslint-config/dist/strict.mjs

@@ -1,12 +1,12 @@
-import jiti from "file:///Users/songbowen/development/Project/gooki/scrm/wechat-ui/node_modules/.pnpm/jiti@1.21.6/node_modules/jiti/lib/index.js";
+import jiti from "file:///Users/wanganyue/Desktop/wechat-ui/node_modules/.pnpm/jiti@1.21.6/node_modules/jiti/lib/index.js";
 
-/** @type {import("/Users/songbowen/development/Project/gooki/scrm/wechat-ui/internal/eslint-config/src/strict")} */
+/** @type {import("/Users/wanganyue/Desktop/wechat-ui/internal/eslint-config/src/strict")} */
 const _module = jiti(null, {
   "esmResolve": true,
   "interopDefault": true,
   "alias": {
-    "@vben/eslint-config": "/Users/songbowen/development/Project/gooki/scrm/wechat-ui/internal/eslint-config"
+    "@vben/eslint-config": "/Users/wanganyue/Desktop/wechat-ui/internal/eslint-config"
   }
-})("/Users/songbowen/development/Project/gooki/scrm/wechat-ui/internal/eslint-config/src/strict.ts");
+})("/Users/wanganyue/Desktop/wechat-ui/internal/eslint-config/src/strict.ts");
 
 export default _module;

internal/stylelint-config/dist/index.cjs

@@ -1,7 +1,7 @@
-module.exports = require("/Users/songbowen/development/Project/gooki/scrm/wechat-ui/node_modules/.pnpm/jiti@1.21.6/node_modules/jiti/lib/index.js")(null, {
+module.exports = require("/Users/wanganyue/Desktop/wechat-ui/node_modules/.pnpm/jiti@1.21.6/node_modules/jiti/lib/index.js")(null, {
   "esmResolve": true,
   "interopDefault": true,
   "alias": {
-    "@vben/stylelint-config": "/Users/songbowen/development/Project/gooki/scrm/wechat-ui/internal/stylelint-config"
+    "@vben/stylelint-config": "/Users/wanganyue/Desktop/wechat-ui/internal/stylelint-config"
   }
-})("/Users/songbowen/development/Project/gooki/scrm/wechat-ui/internal/stylelint-config/src/index.ts")
+})("/Users/wanganyue/Desktop/wechat-ui/internal/stylelint-config/src/index.ts")

internal/stylelint-config/dist/index.d.ts

@@ -1,2 +1,2 @@
-export * from "/Users/songbowen/development/Project/gooki/scrm/wechat-ui/internal/stylelint-config/src/index";
-export { default } from "/Users/songbowen/development/Project/gooki/scrm/wechat-ui/internal/stylelint-config/src/index";
+export * from "/Users/wanganyue/Desktop/wechat-ui/internal/stylelint-config/src/index";
+export { default } from "/Users/wanganyue/Desktop/wechat-ui/internal/stylelint-config/src/index";

internal/stylelint-config/dist/index.mjs

@@ -1,12 +1,12 @@
-import jiti from "file:///Users/songbowen/development/Project/gooki/scrm/wechat-ui/node_modules/.pnpm/jiti@1.21.6/node_modules/jiti/lib/index.js";
+import jiti from "file:///Users/wanganyue/Desktop/wechat-ui/node_modules/.pnpm/jiti@1.21.6/node_modules/jiti/lib/index.js";
 
-/** @type {import("/Users/songbowen/development/Project/gooki/scrm/wechat-ui/internal/stylelint-config/src/index")} */
+/** @type {import("/Users/wanganyue/Desktop/wechat-ui/internal/stylelint-config/src/index")} */
 const _module = jiti(null, {
   "esmResolve": true,
   "interopDefault": true,
   "alias": {
-    "@vben/stylelint-config": "/Users/songbowen/development/Project/gooki/scrm/wechat-ui/internal/stylelint-config"
+    "@vben/stylelint-config": "/Users/wanganyue/Desktop/wechat-ui/internal/stylelint-config"
   }
-})("/Users/songbowen/development/Project/gooki/scrm/wechat-ui/internal/stylelint-config/src/index.ts");
+})("/Users/wanganyue/Desktop/wechat-ui/internal/stylelint-config/src/index.ts");
 
 export default _module;

internal/vite-config/dist/index.cjs

@@ -1,7 +1,7 @@
-module.exports = require("/Users/songbowen/development/Project/gooki/scrm/wechat-ui/node_modules/.pnpm/jiti@1.21.6/node_modules/jiti/lib/index.js")(null, {
+module.exports = require("/Users/wanganyue/Desktop/wechat-ui/node_modules/.pnpm/jiti@1.21.6/node_modules/jiti/lib/index.js")(null, {
   "esmResolve": true,
   "interopDefault": true,
   "alias": {
-    "@vben/vite-config": "/Users/songbowen/development/Project/gooki/scrm/wechat-ui/internal/vite-config"
+    "@vben/vite-config": "/Users/wanganyue/Desktop/wechat-ui/internal/vite-config"
   }
-})("/Users/songbowen/development/Project/gooki/scrm/wechat-ui/internal/vite-config/src/index.ts")
+})("/Users/wanganyue/Desktop/wechat-ui/internal/vite-config/src/index.ts")

internal/vite-config/dist/index.d.ts

@@ -1 +1 @@
-export * from "/Users/songbowen/development/Project/gooki/scrm/wechat-ui/internal/vite-config/src/index";
+export * from "/Users/wanganyue/Desktop/wechat-ui/internal/vite-config/src/index";

internal/vite-config/dist/index.mjs

@@ -1,13 +1,13 @@
-import jiti from "file:///Users/songbowen/development/Project/gooki/scrm/wechat-ui/node_modules/.pnpm/jiti@1.21.6/node_modules/jiti/lib/index.js";
+import jiti from "file:///Users/wanganyue/Desktop/wechat-ui/node_modules/.pnpm/jiti@1.21.6/node_modules/jiti/lib/index.js";
 
-/** @type {import("/Users/songbowen/development/Project/gooki/scrm/wechat-ui/internal/vite-config/src/index")} */
+/** @type {import("/Users/wanganyue/Desktop/wechat-ui/internal/vite-config/src/index")} */
 const _module = jiti(null, {
   "esmResolve": true,
   "interopDefault": true,
   "alias": {
-    "@vben/vite-config": "/Users/songbowen/development/Project/gooki/scrm/wechat-ui/internal/vite-config"
+    "@vben/vite-config": "/Users/wanganyue/Desktop/wechat-ui/internal/vite-config"
   }
-})("/Users/songbowen/development/Project/gooki/scrm/wechat-ui/internal/vite-config/src/index.ts");
+})("/Users/wanganyue/Desktop/wechat-ui/internal/vite-config/src/index.ts");
 
 export const defineApplicationConfig = _module.defineApplicationConfig;
 export const definePackageConfig = _module.definePackageConfig;

src/api/wechat/wx.ts

@@ -11,7 +11,7 @@ enum Api {
   DeleteWx = '/wechat-api/wx/delete',
   GetWxById = '/wechat-api/wx',
   GetSysInfo = '/wechat-api/user/info',
-  
+  GetBlackWhiteList = '/wechat-api/wx/getWxAllowBlockList',
 }
 
 /**
@@ -95,3 +95,16 @@ export const getWxById = (params: BaseIDReq, mode: ErrorMessageMode = 'notice')
 export const getSysInfo = () => {
   return defHttp.get<BaseDataResp<BaseIDsReq>>({ url: Api.GetSysInfo });
 };
+
+
+/**
+ *  @description: 获取黑白名单
+ */
+export const getBlackWhiteList = (params: BaseIDReq, mode: ErrorMessageMode = 'notice') => {
+  return defHttp.post<BaseDataResp<WxInfo>>(
+    { url: Api.GetBlackWhiteList, params: params },
+    {
+      errorMessageMode: mode,
+    },
+  );
+};

src/components/Application/src/AppLogo.vue

@@ -43,7 +43,7 @@ const title = ref('');
   const avatar = ref('');
   onMounted(async () => {
     title.value = localStorage.getItem('departmentName');
-    avatar.value = localStorage.getItem('departmentRemark') || '/src/assets/images/white.png';
+    avatar.value = localStorage.getItem('avatar') || '';
     document.title = title.value;
   }) 
   const { prefixCls } = useDesign('app-logo');

src/views/sys/login/Login.vue

@@ -14,7 +14,7 @@
     </span>
 
     <div class="container relative h-full py-2 mx-auto sm:px-10">
-      <div class="flex h-full">
+      <div class="flex " style="height: calc(100vh - 40px);">
         <div class="hidden min-h-full pl-4 mr-4 xl:flex xl:flex-col xl:w-6/12">
           <!-- <AppLogo class="-enter-x" /> -->
           <div class="my-auto">
@@ -40,10 +40,15 @@
             <ForgetPasswordForm />
             <QrCodeForm />
             <RegisterForm />
+            
           </div>
         </div>
       </div>
+      <div style="display:flex; justify-content:center; align-items:center;color: #606266;font-size: 12px;">
+        Copyright © 2018-2024 All Rights Reserved. 备案号：<a class="beian" href="https://beian.miit.gov.cn/" target="_blank">京ICP备2023034349号-2</a>
+      </div>
     </div>
+    
   </div>
 </template>
 <script lang="ts" setup>
@@ -72,6 +77,16 @@
   const title = computed(() => globSetting?.title ?? '');
 </script>
 <style lang="less">
+  .beian {
+  text-decoration: none;
+  border: none;
+  background: none;
+  color: #606266;
+  font-size: 12px;
+}
+  .beian:hover{
+    color: #1a94ff !important;
+  }
   @prefix-cls: ~'@{namespace}-login';
   @logo-prefix-cls: ~'@{namespace}-app-logo';
   @countdown-prefix-cls: ~'@{namespace}-countdown-input';

src/views/wechat/batch_msg/components/userPhasesDrawer.vue

@@ -1,47 +1,134 @@
 <template>
   <Spin class="loading-style" :spinning="loading" tip="Loading...">
     <div v-if="!loading">
-      <Drawer :open="visible" title="群发消息" width="800" class="user-phase-drawer" @close="handleClose">
+      <Drawer
+        :open="visible"
+        title="群发消息"
+        width="800"
+        class="user-phase-drawer"
+        @close="handleClose"
+      >
         <Steps :current="currentStep" size="default" class="step-style">
           <Step class="custom-step" title="编辑群发"></Step>
           <Step class="custom-step" title="编辑内容"></Step>
         </Steps>
         <!-- <div v-if="isDataLoaded"> -->
         <div v-if="currentStep === 0" class="step-content">
-          <Form :model="form" :label-col="{ span: 3 }" :wrapper-col="{ span: 19 }" ref="formRef" :rules="rules">
-            <FormItem label="任务名称" name="taskName" :rules="[{ required: true, message: '请输入' }]">
-              <Input :disabled="btnDisabled" v-model:value="form.taskName" placeholder="请输入" :maxlength="20"
-                show-count />
+          <Form
+            :model="form"
+            :label-col="{ span: 3 }"
+            :wrapper-col="{ span: 19 }"
+            ref="formRef"
+            :rules="rules"
+          >
+            <FormItem
+              label="任务名称"
+              name="taskName"
+              :rules="[{ required: true, message: '请输入' }]"
+            >
+              <Input
+                :disabled="btnDisabled"
+                v-model:value="form.taskName"
+                placeholder="请输入"
+                :maxlength="20"
+                show-count
+              />
             </FormItem>
             <FormItem label="发送账号" name="wxid" :rules="[{ required: true, message: '请选择' }]">
-              <Select :disabled="btnDisabled" v-model:value="form.wxid" placeholder="请选择"
-                :options="accountList"></Select>
+              <Select
+                :disabled="btnDisabled"
+                v-model:value="form.wxid"
+                placeholder="请选择"
+                :options="accountList"
+              ></Select>
             </FormItem>
-            <FormItem label="标签" name="labels" :rules="[{ required: true, message: '请选择' }]">
-              <Select :disabled="btnDisabled" v-model:value="form.labels" :options="actionLabel" allowClear
-                mode="multiple" size="middle" placeholder="请选择" :style="{ margin: '0 5px' }"></Select>
-              <span v-show="form.labels.length === 0" class="warning-style">请选择标签</span>
+            <FormItem
+              label="客户标签"
+              name="labels"
+              :rules="[{ required: true, message: '请选择' }]"
+            >
+              <Checkbox v-model:checked="form.checked" @change="handleSelectAll('labels', 'checked')">
+                全选
+              </Checkbox>
+              <Select
+                :disabled="btnDisabled || form.checked"
+                v-model:value="form.labels"
+                :options="actionLabel"
+                allowClear
+                mode="multiple"
+                size="middle"
+                placeholder="请选择"
+                :style="{ margin: '0 5px', width: '515px' }"
+                :max-tag-count="2"
+                @change="handleSelectChange('labels', form.labels, 'checked')"
+              ></Select>
+              <!-- <span v-show="form.labels.length === 0" class="warning-style">请选择标签</span> -->
             </FormItem>
-            <FormItem label="发送方式" name="conditionOperator" :rules="[{ required: true, message: '请选择发送方式' }]">
+            <FormItem
+              label="客群标签"
+              name="labelsGroup"
+              :rules="[{ required: true, message: '请选择' }]"
+            >
+              <Checkbox
+                v-model:checked="form.checked1"
+                @change="handleSelectAll('labelsGroup', 'checked1')"
+              >
+                全选
+              </Checkbox>
+              <Select
+                :disabled="btnDisabled || form.checked1"
+                v-model:value="form.labelsGroup"
+                :options="actionLabelGroup"
+                allowClear
+                mode="multiple"
+                size="middle"
+                placeholder="请选择"
+                :max-tag-count="2"
+                :style="{ margin: '0 5px', width: '515px' }"
+                @change="handleSelectChange('labelsGroup', form.labelsGroup, 'checked1')"
+              ></Select>
+              <!-- <span v-show="form.labelsGroup.length === 0" class="warning-style">请选择标签</span> -->
+            </FormItem>
+            <FormItem
+              label="发送方式"
+              name="conditionOperator"
+              :rules="[{ required: true, message: '请选择发送方式' }]"
+            >
               <Radio.Group v-model:value="form.conditionOperator" :disabled="btnDisabled">
                 <Radio value="1">立即发送</Radio>
                 <Radio value="2">定时发送</Radio>
               </Radio.Group>
             </FormItem>
-            <FormItem v-if="form.conditionOperator == '2'" label="发送时间" name="startTimeStr"
-              :rules="[{ required: true, message: '请选择发送时间' }]">
+            <FormItem
+              v-if="form.conditionOperator == '2'"
+              label="发送时间"
+              name="startTimeStr"
+              :rules="[{ required: true, message: '请选择发送时间' }]"
+            >
               <!-- <DatePicker v-model:value="form.sendTimeStr" placeholder="请选择发送时间" format="YYYY-MM-DD HH:mm:ss"
                 :disabled-date="disabledDate" :show-time="{ defaultValue: dayjs('00:00:00', 'HH:mm:ss') }"
                 :disabled="btnDisabled"  /> -->
-                <DatePicker v-model:value="form.startTimeStr" placeholder="请选择发送时间" format="YYYY-MM-DD HH:mm"
-                :disabled-date="disabledDate" :show-time="{ defaultValue: dayjs('00:00:00', 'HH:mm') }" :disabled-time="disabledTime"
-                :disabled="btnDisabled"  @change="handleDateTimeChange" />
+              <DatePicker
+                v-model:value="form.startTimeStr"
+                placeholder="请选择发送时间"
+                format="YYYY-MM-DD HH:mm"
+                :disabled-date="disabledDate"
+                :show-time="{ defaultValue: dayjs('00:00:00', 'HH:mm') }"
+                :disabled-time="disabledTime"
+                :disabled="btnDisabled"
+                @change="handleDateTimeChange"
+              />
             </FormItem>
           </Form>
         </div>
         <!-- 第二步 -->
         <div v-if="currentStep === 1" class="step-content">
-          <Form :model="taskForm" :label-col="{ span: 3 }" :wrapper-col="{ span: 19 }" ref="taskFormRef">
+          <Form
+            :model="taskForm"
+            :label-col="{ span: 3 }"
+            :wrapper-col="{ span: 19 }"
+            ref="taskFormRef"
+          >
             <FormItem label="" name="msg" :rules="[{ required: true, message: '请输入消息内容' }]">
               <MsgContant v-model:value="taskForm.msg" :msgDisabled="btnDisabled" />
             </FormItem>
@@ -60,320 +147,402 @@
 </template>
 
 <script setup lang="ts">
-import { unref, defineProps, defineEmits, ref, toRefs, watch, reactive, onMounted } from 'vue';
-import {
-  Drawer,
-  Form,
-  FormItem,
-  Input,
-  Radio,
-  Button,
-  Steps,
-  Step,
-  Select,
-  Spin,
-  DatePicker,
-  message,
-} from 'ant-design-vue';
-import type { FormInstance } from 'ant-design-vue';
-import { getLabelSelectList } from '@/api/wechat/label';
-import dayjs, { Dayjs } from 'dayjs';
-import MsgContant from './msgContant.vue';
-import { getWxList } from '@/api/wechat/wx';
-import { createBatchMsg, getBatchMsgById } from '@/api/wechat/batchMsg';
+  import { unref, defineProps, defineEmits, ref, toRefs, watch, reactive, onMounted } from 'vue';
+  import {
+    Drawer,
+    Form,
+    FormItem,
+    Input,
+    Radio,
+    Button,
+    Steps,
+    Step,
+    Select,
+    Spin,
+    DatePicker,
+    message,
+    SelectOptGroup,
+    SelectOption,
+    Checkbox,
+  } from 'ant-design-vue';
+  import type { FormInstance } from 'ant-design-vue';
+  import { getLabelSelectList } from '@/api/wechat/label';
+  import dayjs, { Dayjs } from 'dayjs';
+  import MsgContant from './msgContant.vue';
+  import { getWxList } from '@/api/wechat/wx';
+  import { createBatchMsg, getBatchMsgById } from '@/api/wechat/batchMsg';
+  import { UserOutlined, TeamOutlined } from '@ant-design/icons-vue';
+  const props = defineProps<{
+    visible: boolean;
+    msgId: {
+      type: Number; // 支持 number 和 ref 类型
+      required: true;
+    };
+  }>();
+  const emit = defineEmits<{
+    (event: 'update:open', value: boolean): void;
+    (event: 'update:getMsgList', value: { value: boolean }): void;
+    (event: 'update:msgId', value: { value: number | null }): void;
+  }>();
+  const { visible, msgId } = toRefs(props);
+  const loading = ref(false);
+  const currentStep = ref(0);
+  const formRef = ref<FormInstance | null>(null);
+  const taskFormRef = ref<FormInstance | null>(null);
+  const btnDisabled = ref(false);
+  const actionLabel = ref([]);
+  const actionLabelGroup = ref([]);
+  const accountList = ref([]);
+  const checked = ref(false);
+  const checked1 = ref(false);
+  const form = reactive({
+    taskName: '',
+    wxid: '',
+    conditionOperator: '1',
+    startTimeStr: '',
+    labels: [],
+    labelsGroup: [],
+    checked:false,
+    checked1:false,
+  });
+  const rules = {
+    taskName: [{ required: true, message: '请输入任务名称', trigger: 'blur' }],
+    conditionOperator: [{ required: true, message: '请选择条件关系', trigger: 'change' }],
+  };
+  const initialForm = reactive({
+    taskName: '',
+    conditionOperator: '1',
+    wxid: '',
+    startTimeStr: '',
+    labels: [],
+    labelsGroup: [],
+    checked:false,
+    checked1:false,
+  });
+  const taskForm = reactive({
+    msg: [{ type: 1, content: '' }],
+  });
+  const initialTaskForm = reactive({
+    msg: [{ type: 1, content: '' }],
+  });
+  onMounted(async () => {
+    loading.value = true;
+    try {
+      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;
+      let res1 = await getLabelSelectList({ page: 1, pageSize: 1000, type: 2 });
+      actionLabelGroup.value = res1.data;
+      const result = await getWxList({ page: 1, pageSize: 50 });
+      if (result.code == 0) {
+        accountList.value = result.data.data.map((item) => ({
+          label: item.nickname,
+          value: item.wxid,
+        }));
+      }
+      if (unref(msgId)) {
+        await getBatchDetail(unref(msgId));
+        btnDisabled.value = true;
+        console.log('预览----');
+      } else {
+        console.log('新建----');
+        resetForms();
+      }
+    } catch (error) {
+      console.error('初始化失败:', error);
+    } finally {
+      loading.value = false; // 数据加载完成，关闭 loading
+    }
+  });
 
-const props = defineProps<{
-  visible: boolean;
-  msgId: {
-    type: Number; // 支持 number 和 ref 类型
-    required: true;
+  const disabledDate = (current: Dayjs) => {
+    return current && current < dayjs().startOf('day');
   };
-}>();
-const emit = defineEmits<{
-  (event: 'update:open', value: boolean): void;
-  (event: 'update:getMsgList', value: { value: boolean; }): void;
-  (event: 'update:msgId', value: { value: number | null; }): void;
-}>();
-const { visible, msgId } = toRefs(props);
-const loading = ref(false);
-const currentStep = ref(0);
-const formRef = ref<FormInstance | null>(null);
-const taskFormRef = ref<FormInstance | null>(null);
-const btnDisabled = ref(false);
-const actionLabel = ref([]);
-const accountList = ref([]);
 
-const form = reactive({
-  taskName: '',
-  wxid: '',
-  conditionOperator: '1',
-  startTimeStr: '',
-  labels: [],
-});
-const rules = {
-  taskName: [{ required: true, message: '请输入任务名称', trigger: 'blur' }],
-  conditionOperator: [{ required: true, message: '请选择条件关系', trigger: 'change' }],
-};
-const initialForm = reactive({
-  taskName: '',
-  conditionOperator: '1',
-  wxid: '',
-  startTimeStr: '',
-  labels: [],
-});
-const taskForm = reactive({
-  msg: [{ type: 1, content: '' }],
-});
-const initialTaskForm = reactive({
-  msg: [{ type: 1, content: '' }],
-});
-onMounted(async () => {
-  loading.value = true;
-  try {
-    let res = await getLabelSelectList({ page: 1, pageSize: 1000, type: 1 });
-      actionLabel.value = res.data.map(item => ({
-        label: item.label,
-        value: item.label,
-      }));
-    const result = await getWxList({ page: 1, pageSize: 50 });
-    if (result.code == 0) {
-      accountList.value = result.data.data.map(item => ({
-        label: item.nickname,
-        value: item.wxid,
-      }));
+  const disabledTime = (current: Dayjs) => {
+    if (current && current.isSame(dayjs(), 'day')) {
+      const now = dayjs();
+      return {
+        disabledHours: () => [...Array(now.hour()).keys()],
+        disabledMinutes: (selectedHour) => {
+          if (selectedHour === now.hour()) {
+            return [...Array(now.minute() + 1).keys()];
+          }
+          return [];
+        },
+      };
     }
-    if (unref(msgId)) {
-      await getBatchDetail(unref(msgId));
-      btnDisabled.value = true;
-      console.log('预览----');
-    } else {
-      console.log('新建----');
-      resetForms();
+    return {};
+  };
+  // 处理日期和时间选择的变化
+  const handleDateTimeChange = (selectedDateTime) => {
+    if (selectedDateTime) {
+      const selectedDate = dayjs(selectedDateTime).startOf('day');
+      const today = dayjs().startOf('day');
+      const selectedTime = dayjs(selectedDateTime).format('HH:mm');
+
+      // 如果选择的日期是今天并且时间在当前时间之前，则重置或提示
+      if (selectedDate.isSame(today) && selectedTime < dayjs().format('HH:mm')) {
+        // 根据需求进行处理，比如弹出提示或重置时间
+        // alert("选择的时间不能是当前时间之前");
+        message.error('选择的时间不能是当前时间之前');
+        form.startTimeStr = null; // 或者重置为其他有效值
+      }
+    }
+  };
+  function handleSelectAll(type, checkedKey) {
+    if (checkedKey === 'checked') {
+      if (form.checked) {
+        // 当全选时，将表单字段设置为 0
+        form.labels = actionLabel.value;
+      } else {
+        // 取消全选时，重置表单字段
+        form.labels = [];
+      }
+    } else if (checkedKey === 'checked1') {
+      if (form.checked1) {
+        // 当全选时，将表单字段设置为 0
+        form.labelsGroup = actionLabelGroup.value;
+      } else {
+        // 取消全选时，重置表单字段
+        form.labelsGroup = [];
+      }
     }
-  } catch (error) {
-    console.error('初始化失败:', error);
-  } finally {
-    loading.value = false; // 数据加载完成，关闭 loading
   }
-});
-
-
-const disabledDate = (current: Dayjs) => {
-  return current && current < dayjs().startOf('day');
-};
+  // 监听 Select 选项变化，动态更新 Checkbox 状态
+function handleSelectChange(type, selectedValues, checkedKey) {
+  // 获取所有选项的数量
+  const allOptions = type === 'labels' ? actionLabel.value : actionLabelGroup.value;
+  const allSelected = selectedValues.length === allOptions.length;
 
-const disabledTime = (current: Dayjs) => {
-  if (current && current.isSame(dayjs(), 'day')) {
-    const now = dayjs();
-    return {
-      disabledHours: () => [...Array(now.hour()).keys()],
-      disabledMinutes: (selectedHour) => {
-        if (selectedHour === now.hour()) {
-          return [...Array(now.minute() + 1).keys()];
-        }
-        return [];
-      },
-    };
+  // 根据选择情况更新 Checkbox 状态
+  if (checkedKey === 'checked') {
+    form.checked = allSelected; // 当所有选中时，设置全选
+  } else if (checkedKey === 'checked1') {
+    form.checked1 = allSelected; // 当所有选中时，设置全选
   }
-  return {};
-};
-// 处理日期和时间选择的变化
-const handleDateTimeChange = (selectedDateTime) => {
-  if (selectedDateTime) {
-    const selectedDate = dayjs(selectedDateTime).startOf('day');
-    const today = dayjs().startOf('day');
-    const selectedTime = dayjs(selectedDateTime).format('HH:mm');
-
-    // 如果选择的日期是今天并且时间在当前时间之前，则重置或提示
-    if (selectedDate.isSame(today) && selectedTime < dayjs().format('HH:mm')) {
-      // 根据需求进行处理，比如弹出提示或重置时间
-      // alert("选择的时间不能是当前时间之前");
-      message.error('选择的时间不能是当前时间之前');
-      form.startTimeStr = null; // 或者重置为其他有效值
+}
+  function nextStep() {
+    if (currentStep.value === 0) {
+      formRef.value
+        ?.validate()
+        .then((res) => {
+          currentStep.value += 1;
+        })
+        .catch((error) => {
+          console.error('校验失败:', error);
+        });
     }
   }
-};
 
-function nextStep() {
-  if (currentStep.value === 0) {
-    formRef.value
-      ?.validate()
-      .then((res) => {
-        currentStep.value += 1;
-      })
-      .catch((error) => {
-        console.error('校验失败:', error);
-      });
+  function prevStep() {
+    if (currentStep.value > 0) {
+      currentStep.value -= 1;
+    }
   }
-}
 
-function prevStep() {
-  if (currentStep.value > 0) {
-    currentStep.value -= 1;
+  function resetForms() {
+    Object.assign(form, initialForm);
+    Object.assign(taskForm, initialTaskForm);
+    currentStep.value = 0;
+    emit('update:msgId', null);
   }
-}
 
-function resetForms() {
-  Object.assign(form, initialForm);
-  Object.assign(taskForm, initialTaskForm);
-  currentStep.value = 0;
-  emit('update:msgId', null);
-}
+  async function getBatchDetail(id) {
+    loading.value = true;
+    try {
+      let data = await getBatchMsgById({ id, type: 1 });
+      let labels;
+      let checked;
+      let labelsGroups;
+      let checked1;
+      if(data.data?.labels  === [0]){
+        checked = true;
+        labels = actionLabel.value;
+      }else{
+        checked = false;
+        labels = (data.data?.labels ?? '').split(',') || [];
+      }
+      if(data.data?.labelsGroups  === [0]){
+        checked1 = true;
+        labelsGroups = actionLabelGroup.value;
+      }else{
+        checked1 = false;
+        labelsGroups = (data.data?.labelsGroup ?? '').split(',') || [];
+      }
+      // let labels = data.data.tag.split(',') || [];
+      // let labels = (data.data?.labels ?? '').split(',') || [];
+      // let labelsGroups = (data.data?.labelsGroups ?? '').split(',') || [];
+      console.log(data.data,'======');
+      let parsedDate = dayjs(data.data.startTimeStr, 'YYYY-MM-DD HH:mm');
+      Object.assign(form, {
+        taskName: data.data.taskName,
+        wxid: data.data.fromwxid,
+        conditionOperator: data.data.sendTime !== null ? '2' : '1',
+        labels,
+        checked: data.data?.labels === [0] ? true : false,
+        checked1: data.data?.labelsGroups === [0] ? true : false,
+        // labelsGroup,
+        // startTimeStr:dayjs(data.data.startTimeStr).format("YYYY-MM-DD HH:mm") || '',
+        startTimeStr: parsedDate.isValid() ? parsedDate : dayjs(),
+      });
+      let magList;
 
-async function getBatchDetail(id) {
-  loading.value = true;
-  try {
-    let data = await getBatchMsgById({ id, type: 1 });
-    let labels = data.data.tag.split(',') || [];
-    console.log(data.data)
-    let parsedDate = dayjs(data.data.startTimeStr, 'YYYY-MM-DD HH:mm');
-    Object.assign(form, {
-      taskName: data.data.taskName,
-      wxid: data.data.fromwxid,
-      conditionOperator: data.data.sendTime !== null ? '2' : '1',
-      labels,
-      // startTimeStr:dayjs(data.data.startTimeStr).format("YYYY-MM-DD HH:mm") || '',
-      startTimeStr: parsedDate.isValid() ? parsedDate : dayjs(),
-    });
-    let magList;
+      magList = data.data.msg.replace(/\\"/g, '"');
+      Object.assign(taskForm, {
+        msg: JSON.parse(magList) || [{ type: 1, content: '' }],
+      });
+    } catch (error) {
+      console.error('获取详情失败:', error);
+      // 处理错误
+    } finally {
+      loading.value = false;
+    }
+  }
 
-    magList = data.data.msg.replace(/\\"/g, '"');
-    Object.assign(taskForm, {
-      msg: JSON.parse(magList) || [{ type: 1, content: '' }],
+  function processArray(array: any[]) {
+    array.forEach((item) => {
+      if (item.type === 2 && Array.isArray(item.content)) {
+        const contentString = item.content[0]; // 假设content只有一个元素
+        const filename = contentString.split('/').pop(); // 获取最后一个/后的值
+        item.content = contentString; // 将content数组转成字符串
+        item.meta = { filename }; // 添加meta对象
+      }
     });
-  } catch (error) {
-    console.error("获取详情失败:", error);
-    // 处理错误
-  } finally {
-    loading.value = false;
+    return array;
   }
-}
-
-function processArray(array: any[]) {
-  array.forEach((item) => {
-    if (item.type === 2 && Array.isArray(item.content)) {
-      const contentString = item.content[0]; // 假设content只有一个元素
-      const filename = contentString.split('/').pop(); // 获取最后一个/后的值
-      item.content = contentString; // 将content数组转成字符串
-      item.meta = { filename }; // 添加meta对象
-    }
-  });
-  return array;
-}
-async function submitForm() {
-  if (!btnDisabled.value) {
-    // 提交表单逻辑
-    const { taskName, wxid, labels } = form;
-    // let startTimeStr = dayjs(form.startTimeStr).format('YYYY-MM-DD HH:mm:ss');
-    const { msg } = taskForm;
-    processArray(msg);
-    let requestData;
-    if (form.conditionOperator == '2') {
-      requestData = {
-        taskName,
-        fromwxid: wxid,
-        startTimeStr:form.startTimeStr,
-        msg: JSON.stringify(msg),
-        labels,
-        type: 1,
-      };
+  async function submitForm() {
+    if (!btnDisabled.value) {
+      // 提交表单逻辑
+      const { taskName, wxid, checked, checked1 } = form;
+      let labels;
+      let labelsGroup;
+      // let startTimeStr = dayjs(form.startTimeStr).format('YYYY-MM-DD HH:mm:ss');
+      if(checked){
+        labels = [0];
+      }else{
+        labels = form.labels;
+      }
+      if(checked1){
+        labelsGroup = [0];
+      }else{
+        labelsGroup = form.labelsGroup;
+      }
+      const { msg } = taskForm;
+      processArray(msg);
+      let requestData;
+      if (form.conditionOperator == '2') {
+        requestData = {
+          taskName,
+          fromwxid: wxid,
+          startTimeStr: form.startTimeStr,
+          msg: JSON.stringify(msg),
+          labels:labels,
+          labelsGroup:labelsGroup,
+          type: 1,
+        };
+      } else {
+        requestData = {
+          taskName,
+          fromwxid: wxid,
+          msg: JSON.stringify(msg),
+          labels:labels,
+          labelsGroup:labelsGroup,
+          type: 1,
+        };
+      }
+      console.log(labelsGroup,labels, 'labels');
+      // const allData = msg.every((item) => item.content.trim() !== '');
+      // if (!allData) {
+      //   return;
+      // }
+      // loading.value = true;
+      // let response = await createBatchMsg({ ...requestData });
+      
+      // if (response && response.code === 0 && response.msg != 'target does not exist') {
+      //   console.log('新增成功', response);
+      //   loading.value = false;
+      //   emit('update:getMsgList', { value: true });
+      //   handleClose();
+      // } else {
+      //   loading.value = false;
+      //   message.error('请选择可用的标签');
+      //   console.error('新增失败');
+      // }
     } else {
-      requestData = {
-        taskName,
-        fromwxid: wxid,
-        msg: JSON.stringify(msg),
-        labels,
-        type: 1,
-      };
-    }
-
-    const allData = msg.every((item) => item.content.trim() !== '');
-    if (!allData) {
-      return;
-    }
-    loading.value = true;
-    let response = await createBatchMsg({ ...requestData });
-    if (response && response.code === 0 && response.msg != 'target does not exist') {
-      console.log('新增成功', response);
-      loading.value = false;
-      emit('update:getMsgList', { value: true, });
       handleClose();
-    } else {
-      loading.value = false;
-      message.error('请选择可用的标签');
-      console.error('新增失败');
     }
-  } else {
-    handleClose();
   }
-}
 
-// 打开或关闭抽屉
-function handleClose() {
-  if (visible.value) {
-    resetForms();
+  // 打开或关闭抽屉
+  function handleClose() {
+    if (visible.value) {
+      resetForms();
+    }
+    emit('update:open', false);
   }
-  emit('update:open', false);
-}
 
-// 在打开抽屉时保存初始状态
-watch(visible, (newVal) => {
-  if (newVal) {
-    Object.assign(initialForm, { ...form });
-    Object.assign(initialTaskForm, { ...taskForm });
-  }
-});
+  // 在打开抽屉时保存初始状态
+  watch(visible, (newVal) => {
+    if (newVal) {
+      Object.assign(initialForm, { ...form });
+      Object.assign(initialTaskForm, { ...taskForm });
+    }
+  });
 </script>
 <style scoped lang="less">
-.user-phase-drawer {
-  width: 900px;
-  height: 100vh;
-}
+  .user-phase-drawer {
+    width: 900px;
+    height: 100vh;
+  }
 
-.step-content {
-  margin-top: 20px;
-}
+  .step-content {
+    margin-top: 20px;
+  }
 
-.steps-action {
-  margin-top: 20px;
-  display: flex;
-  justify-content: flex-end;
-  gap: 10px;
-}
+  .steps-action {
+    margin-top: 20px;
+    display: flex;
+    justify-content: flex-end;
+    gap: 10px;
+  }
 
-.step-style {
-  margin: 0 auto;
-  width: 60%;
-}
+  .step-style {
+    margin: 0 auto;
+    width: 60%;
+  }
 
-.custom-step .ant-steps-item-title {
-  font-size: 14px;
-}
+  .custom-step .ant-steps-item-title {
+    font-size: 14px;
+  }
 
-.loading-style {
-  width: 100%;
-  height: 100%;
-  z-index: 10;
-  position: fixed !important;
-  top: 0;
-  left: 0;
-  background: rgba(255, 255, 255, 0.7);
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-}
+  .loading-style {
+    width: 100%;
+    height: 100%;
+    z-index: 10;
+    position: fixed !important;
+    top: 0;
+    left: 0;
+    background: rgba(255, 255, 255, 0.7);
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+  }
 
-.ant-spin-nested-loading>div>.ant-spin {
-  max-height: 100% !important;
-  background: rgba(255, 255, 255, 0.7);
-}
+  .ant-spin-nested-loading > div > .ant-spin {
+    max-height: 100% !important;
+    background: rgba(255, 255, 255, 0.7);
+  }
 
-.warning-style {
-  color: #ff4949;
-  font-size: 12px;
-  margin-left: -240px;
-  position: absolute;
-  bottom: -20px;
-}
+  .warning-style {
+    color: #ff4949;
+    font-size: 12px;
+    margin-left: -240px;
+    position: absolute;
+    bottom: -20px;
+  }
 </style>

src/views/wechat/wx/index.vue

@@ -49,6 +49,10 @@
                 label: '编辑模式',
                 onClick: handleEditMode.bind(null, record),
               },
+              // {
+              //   label: '黑白名单',
+              //   onClick: handleBlackWhiteList.bind(null, record),
+              // },
               {
                 label: '登录',
                 onClick: handleLogin.bind(null, record),
@@ -112,11 +116,139 @@
         </FormItem>
       </Form>
     </Modal>
+
+    <!-- 编辑黑白名单 -->
+    <Modal
+      width="700px"
+      height="500px"
+      v-model:open="blackWhiteModalVisible"
+      title="黑白名单"
+      @ok="handleblackWhiteOk"
+      @cancel="handleblackWhiteCancel"
+    >
+      <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">
+            开启白名单表示仅向白名单内的客户发送消息
+          </div>
+          <div v-else style="foon-size: 12px; margin-top: 10px; color: #9a9a9a">
+            关闭白名单表示允许向所有客户发送消息
+          </div>
+          <FormItem v-if="isAllowListEnabled" name="nickname" label="">
+            <Select
+              v-model:value="blackWhiteForm.wxid"
+              :options="listOptions"
+              show-search
+              :filter-option="filterOption"
+              allowClear
+              size="middle"
+              placeholder="请选择"
+              mode="multiple"
+              :style="{ width: '330px', margin: '0 5px' }"
+            ></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">
+            开启白名单表示仅向白名单内的客群发送消息
+          </div>
+          <div v-else style="foon-size: 12px; margin-top: 10px; color: #9a9a9a">
+            关闭白名单表示允许向所有客群发送消息
+          </div>
+          <FormItem v-if="isGroupAllowListEnabled" name="nickname" label="">
+            <Select
+              v-model:value="blackWhiteForm.wxid"
+              :options="groupAllowListOptions"
+              allowClear
+              size="middle"
+              placeholder="请选择"
+              :style="{ width: '330px', margin: '0 5px' }"
+            ></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">
+            黑名单优先级高于白名单
+          </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">
+              <RadioButton value="all">全部客户</RadioButton>
+              <RadioButton value="part">部分客户</RadioButton>
+            </RadioGroup>
+          </FormItem>
+          <FormItem v-if="isBlockListEnabledt" name="nickname" label="">
+            <Select
+              v-model:value="blackWhiteForm.wxid"
+              :options="blockListOptions"
+              allowClear
+              size="middle"
+              placeholder="请选择"
+              :style="{ width: '330px', margin: '0 5px' }"
+            ></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">
+            黑名单优先级高于白名单
+          </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">
+              <RadioButton value="all">全部客群</RadioButton>
+              <RadioButton value="part">部分客群</RadioButton>
+            </RadioGroup>
+          </FormItem>
+          <FormItem v-if="isGroupBlockListEnabled" name="groupBlockList" label="">
+            <Select
+              v-model:value="blackWhiteForm.id"
+              :options="modeList"
+              allowClear
+              size="middle"
+              placeholder="请选择"
+              :style="{ width: '330px', margin: '0 5px' }"
+            ></Select>
+          </FormItem>
+        </FormItem>
+      </Form>
+    </Modal>
   </div>
 </template>
 <script lang="ts" setup>
-  import { createVNode, defineComponent, ref, onMounted, reactive } from 'vue';
-  import { Modal, message, Form, FormItem, Select } from 'ant-design-vue';
+  import { createVNode, defineComponent, ref, onMounted, reactive, computed } from 'vue';
+  import {
+    Modal,
+    message,
+    Form,
+    FormItem,
+    Select,
+    Switch,
+    SwitchItem,
+    RadioGroup,
+    RadioButton,
+  } from 'ant-design-vue';
   import { ExclamationCircleOutlined } from '@ant-design/icons-vue/lib/icons';
   import { BasicTable, useTable, TableAction } from '@/components/Table';
   import { Button } from '@/components/Button';
@@ -127,32 +259,92 @@
   import WxDrawer from './WxDrawer.vue';
   import { getAgentList } from '@/api/wechat/agent';
   import { getServerList } from '@/api/wechat/server';
+  import {getContactList} from '@/api/wechat/contact';
   import { useI18n } from 'vue-i18n';
 
   import { columns } from './wx.data';
-  import {getWxList, deleteWx, createWx, updateWx, checkWx} from '@/api/wechat/wx';
+  import {
+    getWxList,
+    deleteWx,
+    createWx,
+    updateWx,
+    checkWx,
+    getBlackWhiteList,
+  } from '@/api/wechat/wx';
   import { getFriendsAndGroupsApi, logoutApi } from '@/api/wechat/wxhook';
-
-  // export default defineComponent({
-  //   name: 'WxManagement',
-  //   components: {
-  //     BasicTable,
-  //     WxDrawer,
-  //     TableAction,
-  //     Button,
-  //     BasicModal,
-  //     Modal,
-  //     Form,
-  //     FormItem,
-  //     Select,
-  //   },
-  // setup() {
+  import type { TabsProps } from 'ant-design-vue';
+  const type = ref<TabsProps['all']>('part');
   const searchFormSchema = ref<FormSchema[]>([]);
   const { t } = useI18n();
   const selectedIds = ref<number[] | string[]>();
   const showDeleteButton = ref<boolean>(false);
   let modeList = ref([]);
   const modalVisible = ref(false);
+  const blackWhiteModalVisible = ref(false);
+  const blackWhiteForm = reactive({
+    allowList: [],
+    groupAllowList: [],
+    blockList: [],
+    groupBlockList: [],
+    wxid: '',
+    id: '',
+  });
+  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,
+    }));
+  });
+  // 计算属性来确定 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 form = reactive({
     name: '',
     id: undefined,
@@ -188,14 +380,16 @@
     clickToRowSelect: false,
     scroll: { x: 1800 },
     actionColumn: {
-      width: 350,
+      width: 390,
       title: t('common.action'),
       dataIndex: 'action',
       fixed: 'right',
     },
     rowKey: 'id',
   });
-
+  const filterOption = (input: string, option: any) => {
+  return option.value.toLowerCase().indexOf(input.toLowerCase()) >= 0;
+};
   onMounted(async () => {
     let res = await getPermCode();
     permCode.value = res.data[0];
@@ -255,7 +449,40 @@
       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' }];
+      }
+    }
+  //打开黑白名单
+  async function handleBlackWhiteList(record: Recordable) {
+    listOptions.value = await getContactList({ page: 1, pageSize: 50, type: 1 , id:record.id});
+    blackWhiteModalVisible.value = true;
+    try {
+      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 : [];
+      }
+
+      console.log(blackWhiteForm.allowList, 'getBlackWhiteList');
+    } catch (error) {
+      console.error('Failed to fetch black-white list:', error);
+    }
+  }
   //编辑模式
   function handleEditMode(record: Recordable) {
     accountId.value = record.id;
@@ -357,36 +584,4 @@
   async function handleSuccess() {
     await reload();
   }
-
-  //     return {
-  //       t,
-  //       registerTable,
-  //       registerDrawer,
-  //       handleCreate,
-  //       handleEditMode,
-  //       handleEdit,
-  //       handleLogin,
-  //       showQRCode,
-  //       registerModal,
-  //       modalContent,
-  //       handleSubmit,
-  //       handleDelete,
-  //       handleSuccess,
-  //       handleBatchDelete,
-  //       handleLogout,
-  //       handleRefreshContact,
-  //       showDeleteButton,
-  //       permCode,
-  //       modalVisible,
-  //       handleOk,
-  //       handleCancel,
-  //       selectedIds,
-  //       form,
-  //       initialForm,
-  //       modeList,
-  //       accountId,
-  //       searchFormSchema
-  //     };
-  //   },
-  // });
 </script>