diff --git a/Cunkebao/dist/.vite/manifest.json b/Cunkebao/dist/.vite/manifest.json index 443efb9e..99f0a5cd 100644 --- a/Cunkebao/dist/.vite/manifest.json +++ b/Cunkebao/dist/.vite/manifest.json @@ -33,7 +33,7 @@ "name": "vendor" }, "index.html": { - "file": "assets/index-BIYsFR36.js", + "file": "assets/index-BRxvrekd.js", "name": "index", "src": "index.html", "isEntry": true, @@ -44,7 +44,7 @@ "_charts-D0fT04H8.js" ], "css": [ - "assets/index-B7GfwY9T.css" + "assets/index-qTkOjY3P.css" ] } } \ No newline at end of file diff --git a/Cunkebao/dist/index.html b/Cunkebao/dist/index.html index 8205fb11..8648bac5 100644 --- a/Cunkebao/dist/index.html +++ b/Cunkebao/dist/index.html @@ -11,13 +11,13 @@ - + - +
diff --git a/Cunkebao/src/components/AccountSelection/data.ts b/Cunkebao/src/components/AccountSelection/data.ts index 8c65ee8d..c0ce4343 100644 --- a/Cunkebao/src/components/AccountSelection/data.ts +++ b/Cunkebao/src/components/AccountSelection/data.ts @@ -31,4 +31,5 @@ export interface AccountSelectionProps { showSelectedList?: boolean; readonly?: boolean; onConfirm?: (selectedOptions: AccountItem[]) => void; + accountGroups?: any[]; // 传递账号组数据 } diff --git a/Cunkebao/src/components/DeviceSelection/data.ts b/Cunkebao/src/components/DeviceSelection/data.ts index e3e189e6..d002905c 100644 --- a/Cunkebao/src/components/DeviceSelection/data.ts +++ b/Cunkebao/src/components/DeviceSelection/data.ts @@ -25,4 +25,5 @@ export interface DeviceSelectionProps { showInput?: boolean; // 新增 showSelectedList?: boolean; // 新增 readonly?: boolean; // 新增 + deviceGroups?: any[]; // 传递设备组数据 } diff --git a/Cunkebao/src/pages/mobile/workspace/traffic-distribution/form/data.ts b/Cunkebao/src/pages/mobile/workspace/traffic-distribution/form/data.ts index 0600ed33..20b45fe6 100644 --- a/Cunkebao/src/pages/mobile/workspace/traffic-distribution/form/data.ts +++ b/Cunkebao/src/pages/mobile/workspace/traffic-distribution/form/data.ts @@ -23,8 +23,10 @@ export interface TrafficDistributionConfig { timeType: number; startTime: string; endTime: string; - account: (string | number)[]; - devices: string[]; + accountGroups: any[]; + accountGroupsOptions: any[]; + deviceGroups: any[]; + deviceGroupsOptions: any[]; pools: any[]; exp: number; createTime: string; @@ -52,8 +54,10 @@ export interface TrafficDistributionFormData { timeType: number; startTime: string; endTime: string; - devices: string[]; - account: (string | number)[]; + deviceGroups: any[]; + deviceGroupsOptions: any[]; + accountGroups: any[]; + accountGroupsOptions: any[]; pools: any[]; enabled: boolean; } diff --git a/Cunkebao/src/pages/mobile/workspace/traffic-distribution/form/index.module.scss b/Cunkebao/src/pages/mobile/workspace/traffic-distribution/form/index.module.scss index 212b42c7..f593d3fe 100644 --- a/Cunkebao/src/pages/mobile/workspace/traffic-distribution/form/index.module.scss +++ b/Cunkebao/src/pages/mobile/workspace/traffic-distribution/form/index.module.scss @@ -60,6 +60,51 @@ .accountSelectItem { margin-bottom: 0 !important; } + +.deviceSelectItem { + margin-bottom: 0 !important; +} + +.searchWrapper { + margin-bottom: 16px; +} + +.tabWrapper { + margin-bottom: 16px; +} + +.tabList { + display: flex; + background: #f5f5f5; + border-radius: 8px; + padding: 4px; +} + +.tabItem { + flex: 1; + text-align: center; + padding: 8px 16px; + border-radius: 6px; + font-size: 14px; + font-weight: 500; + color: #666; + cursor: pointer; + transition: all 0.2s ease; +} + +.tabItem:hover { + color: #1890ff; +} + +.tabActive { + background: #fff; + color: #1890ff; + box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); +} + +.tabContent { + min-height: 200px; +} .accountListWrap { display: flex; flex-wrap: wrap; diff --git a/Cunkebao/src/pages/mobile/workspace/traffic-distribution/form/index.tsx b/Cunkebao/src/pages/mobile/workspace/traffic-distribution/form/index.tsx index 04932ab9..7d6f21b1 100644 --- a/Cunkebao/src/pages/mobile/workspace/traffic-distribution/form/index.tsx +++ b/Cunkebao/src/pages/mobile/workspace/traffic-distribution/form/index.tsx @@ -9,6 +9,7 @@ import { message, Checkbox, } from "antd"; +import { SearchOutlined } from "@ant-design/icons"; import { useNavigate, useParams } from "react-router-dom"; import style from "./index.module.scss"; import StepIndicator from "@/components/StepIndicator"; @@ -16,6 +17,8 @@ import Layout from "@/components/Layout/Layout"; import NavCommon from "@/components/NavCommon"; import AccountSelection from "@/components/AccountSelection"; import { AccountItem } from "@/components/AccountSelection/data"; +import DeviceSelection from "@/components/DeviceSelection"; +import { DeviceSelectionItem } from "@/components/DeviceSelection/data"; import { getTrafficDistributionDetail, updateTrafficDistribution, @@ -62,6 +65,14 @@ const TrafficDistributionForm: React.FC = () => { const [current, setCurrent] = useState(0); const [selectedAccounts, setSelectedAccounts] = useState([]); + const [selectedDevices, setSelectedDevices] = useState( + [], + ); + // 设备组和账号组数据 + const [deviceGroups, setDeviceGroups] = useState([]); + const [deviceGroupsOptions, setDeviceGroupsOptions] = useState([]); + const [accountGroups, setAccountGroups] = useState([]); + const [accountGroupsOptions, setAccountGroupsOptions] = useState([]); const [distributeType, setDistributeType] = useState(1); const [maxPerDay, setMaxPerDay] = useState(50); const [timeType, setTimeType] = useState(1); @@ -69,11 +80,11 @@ const TrafficDistributionForm: React.FC = () => { const [loading, setLoading] = useState(false); const [detailLoading, setDetailLoading] = useState(false); - const [targetUserCount, setTargetUserCount] = useState(100); - const [targetTypes, setTargetTypes] = useState([]); - const [targetScenarios, setTargetScenarios] = useState([]); const [selectedPools, setSelectedPools] = useState([]); const [poolSearch, setPoolSearch] = useState(""); + const [targetSelectionTab, setTargetSelectionTab] = useState< + "device" | "account" + >("device"); // 编辑时的详情数据 const [detailData, setDetailData] = @@ -116,7 +127,15 @@ const TrafficDistributionForm: React.FC = () => { setMaxPerDay(config.maxPerDay); setTimeType(config.timeType); - setSelectedAccounts(config.accountGroupsOptions); + // 设置账号组数据 + setAccountGroups(config.accountGroups || []); + setAccountGroupsOptions(config.accountGroupsOptions || []); + setSelectedAccounts(config.accountGroupsOptions || []); + + // 设置设备组数据 + setDeviceGroups(config.deviceGroups || []); + setDeviceGroupsOptions(config.deviceGroupsOptions || []); + setSelectedDevices(config.deviceGroupsOptions || []); // 设置时间范围 - 使用dayjs格式 if (config.timeType === 2 && config.startTime && config.endTime) { @@ -161,8 +180,10 @@ const TrafficDistributionForm: React.FC = () => { timeType === 2 && timeRange?.[0] ? timeRange[0].format("HH:mm") : "", endTime: timeType === 2 && timeRange?.[1] ? timeRange[1].format("HH:mm") : "", - devices: detailData?.config.devices || [], - account: selectedAccounts.map(acc => acc.id), + deviceGroups: deviceGroups, + deviceGroupsOptions: deviceGroupsOptions, + accountGroups: accountGroups, + accountGroupsOptions: accountGroupsOptions, pools: selectedPools, enabled: true, }; @@ -261,19 +282,6 @@ const TrafficDistributionForm: React.FC = () => { > - - - { {current === 1 && (
目标设置
-
-
目标用户数
- -
{targetUserCount} 人
+ + {/* Tab 切换 */} +
+
+
setTargetSelectionTab("device")} + > + 设备选择 +
+
setTargetSelectionTab("account")} + > + 客服选择 +
+
-
-
目标客户类型
- -
-
-
获客场景
- ({ - label: s.label, - value: s.value, - }))} - value={targetScenarios} - onChange={setTargetScenarios} - className={style.checkboxGroup} - /> + + {/* Tab 内容 */} +
+ {targetSelectionTab === "device" && ( +
+ { + setSelectedDevices(devices); + setDeviceGroupsOptions(devices); + }} + placeholder="请选择设备" + showSelectedList={true} + selectedListMaxHeight={300} + deviceGroups={deviceGroups} + /> +
+ )} + {targetSelectionTab === "account" && ( +
+ { + setSelectedAccounts(accounts); + setAccountGroupsOptions(accounts); + }} + placeholder="请选择客服" + showSelectedList={true} + selectedListMaxHeight={300} + accountGroups={accountGroups} + /> +
+ )}
)} diff --git a/Cunkebao/src/pages/mobile/workspace/traffic-distribution/list/index.tsx b/Cunkebao/src/pages/mobile/workspace/traffic-distribution/list/index.tsx index c636c8fc..22ac3823 100644 --- a/Cunkebao/src/pages/mobile/workspace/traffic-distribution/list/index.tsx +++ b/Cunkebao/src/pages/mobile/workspace/traffic-distribution/list/index.tsx @@ -343,7 +343,7 @@ const TrafficDistributionList: React.FC = () => { } loading={loading} footer={ -
+