机器人设置样式更新

刘帅

2026-09-11 e327c726ac039cd39ccc45d0456a5c64772fca9c

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
import { PageContainer } from '@ant-design/pro-components';
import { Button, Empty, message, Select, Spin } from 'antd';
import { useEffect, useState } from 'react';
import { getList, update } from './service';
import styles from './style.less';
 
const commaTextToNumberArray = (value) =>
  value
    ? String(value)
        .split(',')
        .map((item) => Number(item.trim()))
        .filter(Number.isFinite)
    : [];
 
const arraysEqual = (a = [], b = []) =>
  a.length === b.length && [...a].sort().join(',') === [...b].sort().join(',');
 
export default function OutboundRobotSetting() {
  const [loading, setLoading] = useState(false);
  const [saving, setSaving] = useState(false);
  const [robotList, setRobotList] = useState([]);
  const [siteOptions, setSiteOptions] = useState([]);
  const [originList, setOriginList] = useState([]);
 
  const loadList = async () => {
    setLoading(true);
    try {
      const res = await getList();
      if (String(res?.code) === '200') {
        const list = (res?.data?.robotSettings || []).map((item) => ({
          ...item,
          siteIds: commaTextToNumberArray(item.siteIds),
        }));
        setSiteOptions(
          (res?.data?.sites || []).map((item) => ({ label: item.siteName, value: item.id })),
        );
        setRobotList(list);
        setOriginList(
          list.map((item) => ({
            id: item.id,
            siteIds: [...item.siteIds],
          })),
        );
      } else {
        message.error(res?.msg || '加载失败');
      }
    } finally {
      setLoading(false);
    }
  };
 
  useEffect(() => {
    loadList();
  }, []);
 
  const setSiteIds = (id, value) => {
    setRobotList((prev) =>
      prev.map((item) => (item.id === id ? { ...item, siteIds: value } : item)),
    );
  };
 
  const save = async () => {
    const changedList = robotList.filter((item) => {
      const origin = originList.find((originItem) => originItem.id === item.id);
      if (!origin) {
        return true;
      }
      return !arraysEqual(origin.siteIds, item.siteIds);
    });
 
    if (changedList.length === 0) {
      message.info('没有需要保存的内容');
      return;
    }
 
    setSaving(true);
    try {
      for (const item of changedList) {
        const res = await update({
          id: item.id,
          siteIds: item.siteIds || [],
        });
        if (String(res?.code) !== '200') {
          message.error(res?.msg || `机器人 ${item.robotNumber || item.id} 保存失败`);
          return;
        }
      }
      message.success('保存成功');
      await loadList();
    } finally {
      setSaving(false);
    }
  };
 
  return (
    <PageContainer title="外呼机器人设置">
      <Spin spinning={loading}>
        <div className={styles.page}>
          <div className={styles.header}>
            <div className={styles.title}>机器人可外呼站点设置</div>
            <div className={styles.subTitle}>按订单所属站点配置机器人可外呼范围</div>
          </div>
 
          {robotList.length === 0 && !loading ? <Empty description="暂无配置" /> : null}
 
          {robotList.map((item, index) => (
            <section className={styles.robotBlock} key={item.id}>
              <div className={styles.robotHead}>
                <div className={styles.robotTitle}>{index + 1}号机器人</div>
                {item.updateTime ? (
                  <div className={styles.robotTime}>更新时间：{item.updateTime}</div>
                ) : null}
              </div>
 
              <div className={styles.fieldRow}>
                <div className={styles.label}>机器人编号</div>
                <div className={styles.value}>{item.robotNumber || '-'}</div>
              </div>
 
              <div className={styles.fieldRow}>
                <div className={styles.label}>可外呼站点</div>
                <div className={styles.value}>
                  <Select
                    className={styles.siteSelect}
                    mode="multiple"
                    allowClear
                    options={siteOptions}
                    value={item.siteIds}
                    placeholder="请选择可外呼站点"
                    onChange={(value) => setSiteIds(item.id, value)}
                  />
                </div>
              </div>
            </section>
          ))}
 
          <div className={styles.footer}>
            <Button className={styles.saveBtn} type="primary" loading={saving} onClick={save}>
              保存设置
            </Button>
          </div>
        </div>
      </Spin>
    </PageContainer>
  );
}