公众号绑定,变更记录

src/pages/weComTask/API/corpUserAssign/index.ts

@@ -1,5 +1,5 @@
 import request from "@/utils/request";
-
+const { api } = process.env.CONFIG;
 
 export interface CorpListProps {
     pageSize: number,
@@ -125,4 +125,44 @@ export function configCorpUsersApi(data: ConfigCorpUsersProps) {
         method: 'PUT',
         data
     })
+}
+/**
+ * 批量指派公众号
+ * @param data
+ * */ 
+// export interface 
+export function configCorpUserWxApi(data: {
+    appId:string,
+    appName:string,
+    corpId:string,
+    corpUserIds:any[],
+    platform:string,
+}) {
+    return request({
+        url:api+ `/corpOperation/corpUser/configCorpUsers`,
+        method: 'PUT',
+        data
+    })
+}
+/**
+ * 获取全部公众号列表
+*/
+
+export function getAllWxListApi() {
+    return request({
+        url:api+ `/corpOperation/corpUser/getMpList`,
+        method: 'GET',
+    })
+}
+/**
+ * 获取公众号变更记录
+ * */ 
+export function getChangeLogApi(data: {
+    corpId:string,
+    corpUserId:string
+}) {
+    return request({
+        url:api+ `/corpOperation/corpUser/getMpChangeRecord/${data.corpId}/${data.corpUserId}`,
+        method: 'GET',
+    })
 }

src/pages/weComTask/page/corpUserAssign/assignAccount.tsx

@@ -0,0 +1,101 @@
+import { AjaxPromise, useAjax } from '@/Hook/useAjax';
+import { App, Form, Modal, Select } from 'antd';
+import React, { useEffect } from 'react';
+import { configCorpUserWxApi, getAllWxListApi } from '../../API/corpUserAssign';
+import { getBookPlatInfoAllApi } from '../../API/global';
+
+
+interface Props {
+    corpId: string,
+    editSelectedRow: any[],
+    visible?: any,
+    onClose?: () => void,
+    onChange?: () => void
+}
+
+const AssignAccount: React.FC<Props> = ({ corpId, editSelectedRow, visible, onClose, onChange }) => {
+
+    /*******************************************/
+    const [form] = Form.useForm()
+    const { message } = App.useApp()
+
+    const configCorpUsers = useAjax((params) => configCorpUserWxApi(params))
+    const getAccountList = useAjax(() => getAllWxListApi())
+    const getBookAll = useAjax(() => getBookPlatInfoAllApi())
+    /*******************************************/
+
+
+    useEffect(() => {
+        getAccountList.run()
+        getBookAll.run()
+    }, [])
+    const handleOk = async () => {
+        const values = await form.validateFields()
+
+        const params = {
+            corpId,
+            corpUserIds: visible?.corpUserId ? [visible?.corpUserId] : editSelectedRow?.map(item => item.corpUserId),
+            appName: getAccountList?.data?.data?.find(item => item.appId === values.appId)?.name,
+            ...values
+        }
+        console.log(params)
+        configCorpUsers.run(params).then(res => {
+            if (res?.data) {
+                message.success('指派成功')
+                onChange?.()
+                onClose?.()
+            }
+        })
+    }
+    useEffect(() => {
+        if (visible.mpAccountInfo) {
+            form.setFieldsValue({ appId: visible.mpAccountInfo?.appId, platform: visible.mpAccountInfo?.platform })
+        }
+    }, [visible])
+    return <Modal
+        title='批量指派公众号'
+        open={!!visible}
+        onCancel={onClose}
+        onOk={handleOk}
+        confirmLoading={configCorpUsers.loading}
+    >
+        <Form
+            name="basic_oper_zs"
+            form={form}
+            labelCol={{ span: 4 }}
+            wrapperCol={{ span: 20 }}
+            autoComplete="off"
+            labelAlign="left"
+            colon={false}
+        >
+            <Form.Item label="公众号" name="appId" rules={[{ required: true, message: '请选择公众号!' }]}>
+                <Select
+                    showSearch
+                    style={{ minWidth: 180 }}
+                    allowClear
+                    placeholder="选择公众号"
+                    filterOption={(input, option) =>
+                        (option?.children as any)?.toLowerCase().indexOf(input.toLowerCase()) >= 0
+                    }
+                >
+                    {getAccountList?.data?.data?.map((item: any) => <Select.Option value={item.appId} key={item.appId}>{item.name}</Select.Option>)}
+                </Select>
+            </Form.Item>
+            <Form.Item label="书城" name="platform" rules={[{ required: true, message: '请选择书城!' }]}>
+                <Select
+                    showSearch
+                    style={{ minWidth: 180 }}
+                    allowClear
+                    placeholder="选择书城"
+                    filterOption={(input, option) =>
+                        (option?.children as any)?.toLowerCase().indexOf(input.toLowerCase()) >= 0
+                    }
+                >
+                    {getBookAll?.data?.data?.map((item: any) => <Select.Option value={item.platformKey} key={item.platformKey}>{item.platformName}</Select.Option>)}
+                </Select>
+            </Form.Item>
+        </Form>
+    </Modal>
+};
+
+export default AssignAccount;

src/pages/weComTask/page/corpUserAssign/mailList.tsx

@@ -1,13 +1,14 @@
 import { useAjax } from "@/Hook/useAjax"
 import { App, Button, DatePicker, Drawer, Form, Input, Modal, Select, Space, Table, Tag } from "antd"
 import React, { useEffect, useState } from "react"
-import { CorpMailListProps, getCorpMailListApi, putCorpSysUserApi } from "../../API/corpUserAssign"
+import { CorpMailListProps, getChangeLogApi, getCorpMailListApi, putCorpSysUserApi } from "../../API/corpUserAssign"
 import SearchBox from "../../components/searchBox"
 import { SearchOutlined, SwapOutlined } from '@ant-design/icons';
-import { TableMailConfig } from "./tableConfig"
+import { TableChangeLogConfig, TableMailConfig } from "./tableConfig"
 import { getUserAllListApi } from "@/pages/login/API"
 import dayjs from "dayjs"
 import OperZs from "./operZs"
+import AssignAccount from "./assignAccount"
 
 interface Props {
     defindConfig: {
@@ -24,6 +25,9 @@ const MailList: React.FC<Props> = ({ defindConfig, visible, onClose, onChange })
     const [queryForm, setQueryForm] = useState<CorpMailListProps>({ pageNum: 1, pageSize: 20 })
     const [editSelectedRow, setEditSelectedRow] = useState<any[]>([])
     const [open, setOpen] = useState<boolean>(false)
+    const [accountOpen, setAccountOpen] = useState<any>(null)//公众号指派弹窗
+    const [changeLog, setChangeLog] = useState<any>(null)//公众号变更记录弹窗
+    const [logData,setLogData] = useState<any[]>([])//变更记录数据
     const [params, setParams] = useState<any[]>([])
     const [form] = Form.useForm()
     const { message } = App.useApp()
@@ -32,6 +36,7 @@ const MailList: React.FC<Props> = ({ defindConfig, visible, onClose, onChange })
     const getCorpMailList = useAjax((params) => getCorpMailListApi(params))
     const putCorpSysUser = useAjax((params) => putCorpSysUserApi(params))
     const getUserAllList = useAjax(() => getUserAllListApi())
+    const getChangeLog = useAjax((params) => getChangeLogApi(params))
     /**************************************/
 
     useEffect(() => {
@@ -41,7 +46,13 @@ const MailList: React.FC<Props> = ({ defindConfig, visible, onClose, onChange })
     useEffect(() => {
         getList()
     }, [queryForm, defindConfig.corpId])
-
+    useEffect(() => {
+        if (changeLog) {
+            getChangeLog.run({ corpId: changeLog.corpId, corpUserId: changeLog.corpUserId }).then(res=>{
+                setLogData(res.data)
+            })
+        }
+    }, [changeLog])
     const getList = () => {
         getCorpMailList.run({ ...queryForm, corpId: defindConfig.corpId })
     }
@@ -72,15 +83,15 @@ const MailList: React.FC<Props> = ({ defindConfig, visible, onClose, onChange })
             setOpen(false)
         })
     }
-
     return <>
-        <Drawer title={`${defindConfig.title} 企微通讯录`} width={1000} placement="right" onClose={onClose} open={visible}>
+        <Drawer title={`${defindConfig.title} 企微通讯录`} width={1300} placement="right" onClose={onClose} open={visible}>
             <SearchBox
                 bodyPadding={`16px 0 12px`}
                 buttons={<Space>
                     <Button type="primary" onClick={() => getList()} loading={getCorpMailList.loading} icon={<SearchOutlined />}>搜索</Button>
                     <Button type="primary" disabled={editSelectedRow.length === 0} onClick={() => handle(editSelectedRow)} loading={getCorpMailList.loading} icon={<SwapOutlined />}>批量指派</Button>
                     <Button type="primary" disabled={editSelectedRow.length === 0} onClick={() => handle(editSelectedRow, 'zs')} loading={getCorpMailList.loading} icon={<SwapOutlined />}>批量指派运营助手</Button>
+                    <Button type="primary" disabled={editSelectedRow.length === 0} onClick={() => setAccountOpen({})} loading={getCorpMailList.loading} icon={<SwapOutlined />}>批量指派公众号</Button>
                 </Space>}
             >
                 <>
@@ -91,8 +102,8 @@ const MailList: React.FC<Props> = ({ defindConfig, visible, onClose, onChange })
             <Table
                 style={{ marginBottom: 1 }}
                 dataSource={getCorpMailList.data?.data?.records}
-                columns={TableMailConfig(handle)}
-                scroll={{ x: 1000 }}
+                columns={TableMailConfig(handle, setAccountOpen, setChangeLog)}
+                scroll={{ x: 1300 }}
                 rowKey={(s: { corpUserId: any; }) => {
                     return s.corpUserId
                 }}
@@ -199,6 +210,40 @@ const MailList: React.FC<Props> = ({ defindConfig, visible, onClose, onChange })
                 setOperData({ visible: false, data: [] })
             }}
         />}
+        {/* 批量指派公众号 */}
+        {
+            !!accountOpen && <AssignAccount
+                visible={accountOpen}
+                editSelectedRow={editSelectedRow}
+                onClose={() => {
+                    setAccountOpen(null)
+                }}
+                onChange={() => {
+                    getCorpMailList.refresh()
+                    setEditSelectedRow([])
+                }}
+                corpId={defindConfig.corpId}
+            />
+        }
+        {/* 变更记录 */}
+        {
+           logData?.length > 0 && <Modal
+                open={!!changeLog}
+                onCancel={() => {
+                    setChangeLog(null)
+                    setLogData([])
+                }}
+                footer={null}
+                title={'变更记录'}
+            >
+                <Table
+                    columns={TableChangeLogConfig()}
+                    dataSource={logData}
+                    pagination={false}
+                    rowKey={'id'}
+                />
+            </Modal>
+        }
     </>
 }
 

src/pages/weComTask/page/corpUserAssign/tableConfig.tsx

@@ -155,7 +155,7 @@ export function TableConfig(handle: (data: any, type: string) => void): ColumnsT
 
 
 
-export function TableMailConfig(handle?: (data: any, type: string) => void): ColumnsType<any> {
+export function TableMailConfig(handle?: (data: any, type: string) => void, setAccountOpen?: (d: any) => void, setChangeLog?: (d: any) => void): ColumnsType<any> {
     let arr: ColumnsType<any> = [
         {
             title: '企微号ID',
@@ -174,6 +174,28 @@ export function TableMailConfig(handle?: (data: any, type: string) => void): Col
             width: 90,
             ellipsis: true,
         },
+        {
+            title: '公众号',
+            dataIndex: 'mpAccountInfo.name',
+            key: 'mpAccountInfo.name',
+            align: 'center',
+            width: 90,
+            ellipsis: true,
+            render: (a: any, b: any) => {
+                return b?.mpAccountInfo?.name || '--'
+            }
+        },
+        {
+            title: '书城',
+            dataIndex: 'mpAccountInfo.platformName',
+            key: 'mpAccountInfo.platformName',
+            align: 'center',
+            width: 90,
+            ellipsis: true,
+            render: (a: any, b: any) => {
+                return b?.mpAccountInfo?.platformName || '--'
+            }
+        },
         {
             title: '运营',
             dataIndex: 'operUserId',
@@ -231,15 +253,61 @@ export function TableMailConfig(handle?: (data: any, type: string) => void): Col
             dataIndex: 'cz',
             key: 'cz',
             align: 'center',
-            width: 100,
+            width: 200,
             fixed: 'right',
             render: (a, b) => {
                 return <Space wrap size={'small'}>
                     <Button size='small' type="link" style={{ padding: 0 }} onClick={() => handle?.([b], '')}>指派</Button>
                     <Button size='small' type="link" style={{ padding: 0 }} onClick={() => handle?.([b], 'zs')}>运营助手指派</Button>
+                    <Button size='small' type="link" style={{ padding: 0 }} onClick={() => setAccountOpen?.(b)}>指派公众号</Button>
+                    <Button size='small' type="link" style={{ padding: 0 }} onClick={() => setChangeLog?.(b)}>变更记录</Button>
                 </Space>
             }
         },
     ]
     return tableDfixed(arr)
-}
+}
+
+export function TableChangeLogConfig(): ColumnsType<any> {
+    let arr: ColumnsType<any> = [
+        {
+            title: 'ID',
+            dataIndex: 'id',
+            key: 'id',
+            align: 'center',
+            width: 30,
+            ellipsis: true,
+        },
+        {
+            title: '变更时间',
+            dataIndex: 'createTime',
+            key: 'createTime',
+            align: 'center',
+            width: 120,
+            ellipsis: true,
+        },
+        {
+            title: '变更公众号',
+            dataIndex: 'mpAccount.name',
+            key: 'mpAccount.name',
+            align: 'center',
+            width: 80,
+            ellipsis: true,
+            render: (a: any, b: any) => {
+                return b?.mpAccount?.name || '--'
+            }   
+        },
+           {
+            title: '变更书城',
+            dataIndex: 'mpAccount.platformName',
+            key: 'mpAccount.platformName',
+            align: 'center',
+            width: 80,
+            ellipsis: true,
+            render: (a: any, b: any) => {
+                return b?.mpAccount?.platformName || '--'
+            }   
+        },
+    ]
+    return arr
+}