|
@@ -0,0 +1,177 @@
|
|
|
+import { ActionType, BetaSchemaForm, PageContainer, ProFormInstance, ProTable } from "@ant-design/pro-components"
|
|
|
+import { Button, Drawer, message, Modal, QRCode, Space, Table, Tag } from "antd"
|
|
|
+import { columns, PopUpColumns } from "./tableConfig"
|
|
|
+import { useAjax } from "@/Hook/useAjax"
|
|
|
+import { corpUserSyncAll, corpUserConfigUser, corpUserListOfPage } from "@/services/distributor/corpManage"
|
|
|
+import { useEffect, useRef, useState } from "react"
|
|
|
+import { SyncOutlined, UserAddOutlined } from "@ant-design/icons"
|
|
|
+import { distributorAccountAll } from "@/services/distributor/account"
|
|
|
+type Props = {
|
|
|
+ corpId: string,//企微ID
|
|
|
+ corpName: string,//企微名称
|
|
|
+}
|
|
|
+const PopUp: React.FC<Props> = (props) => {
|
|
|
+ let { corpId, corpName } = props
|
|
|
+ let [open, SetOpen] = useState(false)
|
|
|
+ let [openForm, setOpenForm] = useState(false)
|
|
|
+ const [editSelectedRow, setEditSelectedRow] = useState<any[]>([]); //选择
|
|
|
+ let getList = useAjax((params) => corpUserListOfPage(params), { type: 'table' })
|
|
|
+ let CorpUserConfigUser = useAjax((params) => corpUserConfigUser(params))
|
|
|
+ let CorpSyncAll = useAjax((corpId) => corpUserSyncAll(corpId))
|
|
|
+ let allList = useAjax(() => distributorAccountAll())
|
|
|
+ const actionRef = useRef<ActionType>();
|
|
|
+ const formRef = useRef<ProFormInstance>();
|
|
|
+ const sync = () => {
|
|
|
+ CorpSyncAll.run(corpId).then(res => {
|
|
|
+ if (res.code === 200) {
|
|
|
+ message.success("同步成功!")
|
|
|
+ actionRef?.current?.reload()
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }
|
|
|
+ useEffect(() => {
|
|
|
+ allList.run()
|
|
|
+ }, [])
|
|
|
+ // 提交表单
|
|
|
+ const submit = async (values: any) => {
|
|
|
+ values["corpUserIds"] = editSelectedRow?.map(item => item.corpUserId)
|
|
|
+ CorpUserConfigUser.run({ corpId, ...values }).then(res => {
|
|
|
+ if (res.code === 200) {
|
|
|
+ actionRef?.current?.reload()
|
|
|
+ message.success("指派成功!")
|
|
|
+ setEditSelectedRow([])
|
|
|
+ setOpenForm(false)
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }
|
|
|
+ return <div>
|
|
|
+ <Button size="small" type="link" onClick={() => { SetOpen(true) }}>通讯录</Button>
|
|
|
+ {/* 通讯录表 */}
|
|
|
+ <Drawer
|
|
|
+ open={open}
|
|
|
+ destroyOnClose
|
|
|
+ width={"35%"}
|
|
|
+ onClose={() => { SetOpen(false) }}
|
|
|
+ >
|
|
|
+ <ProTable<any, any>
|
|
|
+ actionRef={actionRef}
|
|
|
+ headerTitle={`《${corpName}》通讯录列表`}
|
|
|
+ rowKey={(r) => r.corpUserId}
|
|
|
+ search={{
|
|
|
+ labelWidth: 120,
|
|
|
+ }}
|
|
|
+ scroll={{ x: "auto" }}
|
|
|
+ request={async (params) => {
|
|
|
+ return await getList.run({ ...params, corpId })
|
|
|
+ }}
|
|
|
+ columns={PopUpColumns()}
|
|
|
+ toolBarRender={() => [
|
|
|
+ <Button type="primary" onClick={() => { setOpenForm(true) }} disabled={editSelectedRow?.length === 0} loading={CorpUserConfigUser?.loading}><UserAddOutlined />批量指派</Button>,
|
|
|
+ <Button type="primary" onClick={sync} loading={CorpSyncAll?.loading}><SyncOutlined />同步通讯录</Button>,
|
|
|
+ ]}
|
|
|
+ //处理搜索数据
|
|
|
+ beforeSearchSubmit={(params) => {
|
|
|
+ if (params?.name) {
|
|
|
+ params['corpUserName'] = params.name
|
|
|
+ delete params.name
|
|
|
+ }
|
|
|
+ return params
|
|
|
+ }}
|
|
|
+ //多选
|
|
|
+ rowSelection={{
|
|
|
+ selectedRowKeys: editSelectedRow?.map((item: { corpUserId: any }) => item.corpUserId),
|
|
|
+ onSelect: (record, selected) => {
|
|
|
+ if (selected) {
|
|
|
+ setEditSelectedRow([...editSelectedRow, record]);
|
|
|
+ } else {
|
|
|
+ setEditSelectedRow(
|
|
|
+ editSelectedRow?.filter((item: { corpUserId: any }) => item.corpUserId !== record.corpUserId),
|
|
|
+ );
|
|
|
+ }
|
|
|
+ },
|
|
|
+ onSelectAll: (selected, rows, changeRows) => {
|
|
|
+ if (selected) {
|
|
|
+ setEditSelectedRow([...editSelectedRow, ...changeRows]);
|
|
|
+ } else {
|
|
|
+ let newArr = editSelectedRow?.filter((item: { id: any }) =>
|
|
|
+ changeRows.every((i) => i?.id !== item?.id),
|
|
|
+ );
|
|
|
+ setEditSelectedRow(newArr);
|
|
|
+ }
|
|
|
+ },
|
|
|
+ }}
|
|
|
+ //多选展示栏
|
|
|
+ tableAlertRender={({ selectedRowKeys, selectedRows }) => {
|
|
|
+ return (
|
|
|
+ <Space size={24}>
|
|
|
+ <span style={{ width: 90, display: 'inline-block' }}>
|
|
|
+ 已选 {selectedRowKeys.length} 项
|
|
|
+ </span>
|
|
|
+ <span style={{ color: 'red' }}>
|
|
|
+ {selectedRows
|
|
|
+ ?.map((item: { name: string, corpUserId: any }) => <Tag
|
|
|
+ closable
|
|
|
+ key={item?.corpUserId}
|
|
|
+ onClose={() => {
|
|
|
+ let newArr = selectedRows?.filter((i) => i?.corpUserId != item?.corpUserId)
|
|
|
+ setEditSelectedRow(newArr)
|
|
|
+ }}>{item?.name}</Tag>)
|
|
|
+ }
|
|
|
+ </span>
|
|
|
+ </Space>
|
|
|
+ );
|
|
|
+ }}
|
|
|
+ // 添加取消选择按钮
|
|
|
+ tableAlertOptionRender={() => {
|
|
|
+ return (
|
|
|
+ <Button type="link" onClick={() => {
|
|
|
+ setEditSelectedRow([])
|
|
|
+ }}>
|
|
|
+ 取消选择
|
|
|
+ </Button>
|
|
|
+ );
|
|
|
+ }}
|
|
|
+ />
|
|
|
+ {/* 付费配置 */}
|
|
|
+ <BetaSchemaForm<any>
|
|
|
+ title={"批量指派"}
|
|
|
+ formRef={formRef}
|
|
|
+ open={openForm}
|
|
|
+ onOpenChange={(b) => { !b && setOpenForm(b) }}
|
|
|
+ layoutType={"ModalForm"}
|
|
|
+ labelCol={{ span: 6 }}
|
|
|
+ wrapperCol={{ span: 14 }}
|
|
|
+ layout='horizontal'
|
|
|
+ onFinish={submit}
|
|
|
+ columns={[
|
|
|
+ {
|
|
|
+ title: "分销商账号",
|
|
|
+ dataIndex: "distributorAccountId",
|
|
|
+ valueEnum: () => {
|
|
|
+ let obj: any = {}
|
|
|
+ allList?.data?.data?.forEach((item: { id: string | number; nickname: any }) => {
|
|
|
+ return obj[item.id] = { text: item.nickname }
|
|
|
+ })
|
|
|
+ return obj
|
|
|
+ },
|
|
|
+ fieldProps: {
|
|
|
+ showSearch: true,
|
|
|
+ placeholder: '选择要指派的分销商账号',
|
|
|
+ },
|
|
|
+ formItemProps: {
|
|
|
+ rules: [
|
|
|
+ {
|
|
|
+ required: true,
|
|
|
+ message: '此项为必填项',
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ }
|
|
|
+ }
|
|
|
+ ]}
|
|
|
+ loading={CorpUserConfigUser?.loading}
|
|
|
+ />
|
|
|
+ </Drawer>
|
|
|
+ </div>
|
|
|
+
|
|
|
+}
|
|
|
+export default PopUp
|