|
|
@@ -3,6 +3,7 @@ import React, { useState } from "react";
|
|
|
import style from '../../../../../../components/selectExternalAccount/index.less'
|
|
|
import { CheckOutlined, CloseOutlined } from '@ant-design/icons'
|
|
|
import { DefaultOptionType } from "antd/es/select";
|
|
|
+import SelectGroupLeaderModal from "@/pages/weComTask/page/groupLeaderManage/selectGroupLeaderModal";
|
|
|
const { Text, Title } = Typography;
|
|
|
|
|
|
interface Props {
|
|
|
@@ -12,6 +13,7 @@ interface Props {
|
|
|
visible?: boolean;
|
|
|
onClose?: () => void;
|
|
|
onChange?: (value: OFFICIAL_CHAT_CREATE.GroupsProps[]) => void;
|
|
|
+ isOwnerUser?: boolean; // 是否可选择群主
|
|
|
disabled?: boolean;
|
|
|
}
|
|
|
/**
|
|
|
@@ -19,12 +21,14 @@ interface Props {
|
|
|
* @param param0
|
|
|
* @returns
|
|
|
*/
|
|
|
-const SelectMpCorp: React.FC<Props> = ({ corpList, mpList, group, visible, onClose, onChange, disabled }) => {
|
|
|
+const SelectMpCorp: React.FC<Props> = ({ corpList, mpList, group, visible, onClose, onChange, isOwnerUser, disabled }) => {
|
|
|
|
|
|
/***************************************/
|
|
|
const [data, setData] = useState<OFFICIAL_CHAT_CREATE.GroupsProps[]>(group && group?.length > 0 ? group : [{}]);
|
|
|
const [selectAdz, setSelectAdz] = useState<number>(1) // 选择广告主
|
|
|
const [queryForm, setQueryForm] = useState<any>({})
|
|
|
+
|
|
|
+ const [ownerUserVisible, setOwnerUserVisible] = useState<boolean>(false) // 选择群主弹窗
|
|
|
/***************************************/
|
|
|
|
|
|
const handleOk = () => {
|
|
|
@@ -47,7 +51,7 @@ const SelectMpCorp: React.FC<Props> = ({ corpList, mpList, group, visible, onClo
|
|
|
open={visible}
|
|
|
onCancel={onClose}
|
|
|
onOk={handleOk}
|
|
|
- width={1100}
|
|
|
+ width={1200}
|
|
|
className={`${style.SelectPackage}`}
|
|
|
okButtonProps={{ disabled }}
|
|
|
styles={{
|
|
|
@@ -91,17 +95,17 @@ const SelectMpCorp: React.FC<Props> = ({ corpList, mpList, group, visible, onClo
|
|
|
allowClear
|
|
|
options={mpList}
|
|
|
/>
|
|
|
- {data[selectAdz - 1]?.mpAccount?.value && <a
|
|
|
+ {data[selectAdz - 1]?.mpAccount?.value && <a
|
|
|
style={{ color: 'red' }}
|
|
|
onClick={() => {
|
|
|
let newData = JSON.parse(JSON.stringify(data))
|
|
|
let dataIten = newData[selectAdz - 1]?.mpAccount || {}
|
|
|
- dataIten = undefined
|
|
|
+ dataIten = undefined
|
|
|
newData[selectAdz - 1].mpAccount = dataIten
|
|
|
setData(newData)
|
|
|
}}
|
|
|
>删除</a>}
|
|
|
-
|
|
|
+
|
|
|
</Space>
|
|
|
<Table
|
|
|
tableLayout='fixed'
|
|
|
@@ -182,6 +186,7 @@ const SelectMpCorp: React.FC<Props> = ({ corpList, mpList, group, visible, onClo
|
|
|
dataIten = dataIten.filter((item: { value: string }) => item.value !== record.value)
|
|
|
}
|
|
|
newData[selectAdz - 1].corp = dataIten
|
|
|
+ delete newData[selectAdz - 1]?.ownerUsers
|
|
|
setData(newData)
|
|
|
},
|
|
|
onSelectAll: (selected: boolean, selectedRowss: { value: string }[], changeRows: { value: string }[]) => {
|
|
|
@@ -197,6 +202,7 @@ const SelectMpCorp: React.FC<Props> = ({ corpList, mpList, group, visible, onClo
|
|
|
}
|
|
|
})
|
|
|
newData[selectAdz - 1].corp = newSelectAccData
|
|
|
+ delete newData[selectAdz - 1].ownerUsers
|
|
|
} else {
|
|
|
let newSelectAccData = dataIten.filter((item: { value: string }) => {
|
|
|
let index = changeRows.findIndex((ite: { value: string }) => ite.value === item.value)
|
|
|
@@ -207,6 +213,7 @@ const SelectMpCorp: React.FC<Props> = ({ corpList, mpList, group, visible, onClo
|
|
|
}
|
|
|
})
|
|
|
newData[selectAdz - 1].corp = newSelectAccData
|
|
|
+ delete newData[selectAdz - 1].ownerUsers
|
|
|
}
|
|
|
setData(newData)
|
|
|
}
|
|
|
@@ -215,7 +222,7 @@ const SelectMpCorp: React.FC<Props> = ({ corpList, mpList, group, visible, onClo
|
|
|
</div>
|
|
|
<div className={style.center}>
|
|
|
<div style={{ margin: '0 0 5px', display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
|
|
|
- <Title level={5} style={{ margin: 0 }}>已选:{data[selectAdz - 1]?.corp?.length || 0}</Title>
|
|
|
+ <Title level={5} style={{ margin: 0 }}>已选主体:{data[selectAdz - 1]?.corp?.length || 0}</Title>
|
|
|
{data.length > 1 && <a style={{ color: 'red' }} onClick={() => {
|
|
|
if (selectAdz === data.length) {
|
|
|
handleSelectAdz(selectAdz - 1)
|
|
|
@@ -237,7 +244,44 @@ const SelectMpCorp: React.FC<Props> = ({ corpList, mpList, group, visible, onClo
|
|
|
</div>)}
|
|
|
</div>
|
|
|
</div>
|
|
|
+ {(isOwnerUser && data[selectAdz - 1]?.corp?.length === 1) && <div className={style.center} style={{ width: 200 }}>
|
|
|
+ <div style={{ margin: '0 0 5px', display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
|
|
|
+ <Title level={5} style={{ margin: 0 }}>已选群主:{data[selectAdz - 1]?.ownerUsers?.length || 0}</Title>
|
|
|
+ {data[selectAdz - 1]?.ownerUsers?.length > 0 && <a style={{ color: 'red' }} onClick={() => {
|
|
|
+ let newData = JSON.parse(JSON.stringify(data))
|
|
|
+ delete newData[selectAdz - 1].ownerUsers
|
|
|
+ setData(newData)
|
|
|
+ }}>清空</a>}
|
|
|
+ <a onClick={() => { setOwnerUserVisible(true) }}>选择</a>
|
|
|
+ </div>
|
|
|
+ <div className={style.select_content}>
|
|
|
+ {data[selectAdz - 1]?.ownerUsers?.map(item => <div key={item.corpUserId}>
|
|
|
+ <Text ellipsis={{ tooltip: true }} className={style.marketingAssetName}>{item.name}</Text>
|
|
|
+ <CloseOutlined className={style.close} onClick={() => {
|
|
|
+ let newData = JSON.parse(JSON.stringify(data))
|
|
|
+ newData[selectAdz - 1].ownerUsers = newData[selectAdz - 1]?.ownerUsers?.filter((i: any) => i?.corpUserId !== item.corpUserId)
|
|
|
+ setData(newData)
|
|
|
+ }} />
|
|
|
+ </div>)}
|
|
|
+ </div>
|
|
|
+ </div>}
|
|
|
</div>
|
|
|
+
|
|
|
+ {/* 选择群主 */}
|
|
|
+ {ownerUserVisible && <SelectGroupLeaderModal
|
|
|
+ corpIds={data[selectAdz - 1]?.corp?.map(i => i.value) || []}
|
|
|
+ visible={ownerUserVisible}
|
|
|
+ value={data[selectAdz - 1]?.ownerUsers || []}
|
|
|
+ onClose={() => {
|
|
|
+ setOwnerUserVisible(false)
|
|
|
+ }}
|
|
|
+ onChange={(value) => {
|
|
|
+ let newData = JSON.parse(JSON.stringify(data))
|
|
|
+ newData[selectAdz - 1].ownerUsers = value
|
|
|
+ setData(newData)
|
|
|
+ setOwnerUserVisible(false)
|
|
|
+ }}
|
|
|
+ />}
|
|
|
</Modal>
|
|
|
}
|
|
|
|