WhatsApp 号码管理增加修改自定义角色 api 的操作

.env.development

@@ -12,9 +12,9 @@ VITE_DROP_CONSOLE = false
 # vite 本地跨域代理
 # VITE_PROXY=[["/fms-api","https://wxadminapi.gkscrm.com"]]
 # Basic interface address SPA
-VITE_GLOB_API_URL=https://wxadminapi-debug.gkscrm.com
+VITE_GLOB_API_URL=
 # File upload address， optional
-VITE_GLOB_UPLOAD_URL=https://wxadminapi-debug.gkscrm.com
+VITE_GLOB_UPLOAD_URL=
 # VITE_GLOB_API_URL=
 # VITE_GLOB_API_URL=/sys-api
 

src/api/wechat/model/whatsappModel.ts

@@ -73,6 +73,12 @@ export interface BusinessInfo {
   about?: string;
 }
 
+export interface AgentApiInfo {
+  id?: number;
+  apiBase?: string;
+  apiKey?: string;
+}
+
 export interface AllowBlockList {
   id?: number;
   allowList?: string;
@@ -89,4 +95,4 @@ export interface Qrcode {
   prefilledMessage?: string;
   qrImageUrl?: string;
   qrdlCode?: string;
-}
+}

src/api/wechat/whatsapp.ts

@@ -1,7 +1,16 @@
 import { defHttp } from '@/utils/http/axios';
 import { ErrorMessageMode } from '/#/axios';
 import { BaseDataResp, BaseListReq, BaseResp, BaseIDsReq, BaseIDReq } from '@/api/model/baseModel';
-import { AutomationReq, AutomationResp, BusinessInfo, WhatsappInfo, WhatsappListResp, AllowBlockList, Qrcode } from './model/whatsappModel';
+import {
+  AutomationReq,
+  AutomationResp,
+  BusinessInfo,
+  WhatsappInfo,
+  WhatsappListResp,
+  AllowBlockList,
+  Qrcode,
+  AgentApiInfo
+} from './model/whatsappModel';
 
 enum Api {
   CreateWhatsapp = '/wechat-api/whatsapp/create',
@@ -14,6 +23,7 @@ enum Api {
   SetAutomation = '/wechat-api/whatsapp/setAutomation',
   GetBusinessInfo = '/wechat-api/whatsapp/getBusinessInfo',
   SetBusinessInfo = '/wechat-api/whatsapp/setBusinessInfo',
+  SetAgentApiInfo = '/wechat-api/whatsapp/updateAgentApi',
   SendCode = '/wechat-api/whatsapp/sendCode',
   SubmitCode = '/wechat-api/whatsapp/submitCode',
   GetAllowBlockList = '/wechat-api/whatsapp/getAllowBlockList',
@@ -141,6 +151,13 @@ export const setBusinessInfo = (params: BusinessInfo, mode: ErrorMessageMode = '
   );
 };
 
+export const setAgentInfo = (params: AgentApiInfo, mode: ErrorMessageMode = 'notice') => {
+  return defHttp.post<BaseResp>(
+    { url: Api.SetAgentApiInfo, params: params },
+    { errorMessageMode: mode, successMessageMode: mode },
+  );
+};
+
 /**
  *  @description: Send code
  */
@@ -239,4 +256,4 @@ export const removeQrcode = (params: Qrcode, mode: ErrorMessageMode = 'notice')
     { url: Api.RemoveQrcode, params: params },
     { errorMessageMode: mode, successMessageMode: mode },
   );
-};
+};

src/views/whatsapp/whatsapp/EditAgentDrawer.vue

@@ -0,0 +1,57 @@
+<template>
+  <BasicDrawer
+    v-bind="$attrs"
+    @register="registerDrawer"
+    showFooter
+    title="编辑商业信息"
+    width="35%"
+    @ok="handleSubmit"
+  >
+    <BasicForm @register="registerForm" />
+  </BasicDrawer>
+</template>
+<script lang="ts" setup>
+  import { BasicForm, useForm } from '@/components/Form/index';
+  import { formAgentSchema } from './whatsapp.data';
+  import { BasicDrawer, useDrawerInner } from '@/components/Drawer';
+
+  import {setAgentInfo} from '@/api/wechat/whatsapp';
+
+  const emit = defineEmits(['success']);
+
+  const [registerForm, { resetFields, setFieldsValue, validate }] = useForm({
+    labelWidth: 160,
+    baseColProps: { span: 24 },
+    layout: 'vertical',
+    schemas: formAgentSchema,
+    showActionButtonGroup: false,
+  });
+
+
+  const [registerDrawer, { setDrawerProps, closeDrawer }] = useDrawerInner(async (record) => {
+    setDrawerProps({ confirmLoading: false });
+    // resetFields();
+    setFieldsValue({
+      id: record.id,
+      apiBase: record.apiBase,
+      apiKey: record.apiKey,
+    });
+  });
+
+  async function handleSubmit() {
+    const values = await validate();
+    setDrawerProps({ confirmLoading: true });
+    try {
+      const res = await setAgentInfo(values)
+      if (res.code === 0) {
+        closeDrawer();
+        emit('success');
+      }
+    } catch (error) {
+      console.log(error);
+    } finally {
+      setDrawerProps({ confirmLoading: false });
+    }
+  }
+
+</script>

src/views/whatsapp/whatsapp/index.vue

@@ -20,7 +20,7 @@
           <TableAction
             :actions="[
               {
-                label: t('common.edit'),
+                label: t('编辑商业信息'),
                 onClick: handleEdit.bind(null, record),
               },
               {
@@ -28,6 +28,10 @@
                 onClick: handleEditMode.bind(null, record),
               },
               {
+                label: t('编辑自定义角色'),
+                onClick: handleEditAgent.bind(null, record),
+              },
+              {
                 label: '黑白名单',
                 onClick: handleBlackAndWhiteList.bind(null, record),
               },
@@ -80,6 +84,7 @@
     </BasicTable>
     <CreateWhatsappDrawer @register="registerCreateWhatsappDrawer" @success="handleSuccess" />
     <EditBusinessDrawer @register="registerEditBusinessDrawer" @success="handleSuccess" />
+    <EditAgentDrawer @register="registerEditAgentDrawer" @success="handleSuccess" />
     <SelectAIAgentModal @register="registerAIAgentModal" @ok="handleUpdateAgent" />
     <AutomationModal @register="registerAutomationModal" />
     <BlackWhiteModal @register="registerBlackWhiteModal" @success="reload" />
@@ -97,6 +102,7 @@
   import { useDrawer } from '@/components/Drawer';
   import CreateWhatsappDrawer from './CreateWhatsappDrawer.vue';
   import EditBusinessDrawer from './EditBusinessDrawer.vue';
+  import EditAgentDrawer from './EditAgentDrawer.vue';
   import { useI18n } from 'vue-i18n';
   import { columns, searchFormSchema } from './whatsapp.data';
   import {
@@ -123,6 +129,7 @@
 
   const [registerCreateWhatsappDrawer, { openDrawer: openCreateDrawer }] = useDrawer();
   const [registerEditBusinessDrawer, { openDrawer: openEditDrawer }] = useDrawer();
+  const [registerEditAgentDrawer, { openDrawer: openEditAgentDrawer }] = useDrawer();
   const [registerAIAgentModal, { openModal: openAIAgentModal, closeModal: closeAIAgentModal }] = useModal();
   const [registerBlackWhiteModal, { openModal: openBlackWhiteModal }] = useModal();
   const [registerVerifyCodeModal, { openModal: openVerifyCodeModal }] = useModal();
@@ -173,6 +180,10 @@
     openEditDrawer(true, record);
   }
 
+  function handleEditAgent(record: Recordable) {
+    openEditAgentDrawer(true, record);
+  }
+
   /**
    * 处理删除单个WhatsApp账号
    * @param record 要删除的账号记录

src/views/whatsapp/whatsapp/whatsapp.data.ts

@@ -192,6 +192,27 @@ export const formSchema: FormSchema[] = [
   },
 ];
 
+export const formAgentSchema: FormSchema[] = [
+  {
+    show: false,
+    field: 'id',
+    label: t('whatsapp_channel.whatsappChannel.waId'),
+    component: 'Number',
+  },
+  {
+    field: 'apiBase',
+    label: 'apiBase',
+    component: 'Input',
+    required: false,
+  },
+  {
+    field: 'apiKey',
+    label: 'apiKey',
+    component: 'Input',
+    required: false,
+  },
+];
+
 const waOptions = ref<{ label: string, value: string }[]>([])
 const getWaOptions = async (organizationId: number | undefined) => {
   const res = await getWhatsappChannelList({ page: 1, pageSize: 1000, organizationId })