productConfig.jsx 7.05 KB
Newer Older
1
import React, { useState, useEffect } from 'react';
2
import { Card, List, Empty, Spin, notification, Switch } from 'antd';
3
import { modifyProduct, getProductList, delProductList } from '@/services/webConfig/api';
4
import classnames from 'classnames';
5

6 7
import EditForm from './components/editForm';
import styles from './productConfig.less';
Maofei94's avatar
Maofei94 committed
8
const ProductConfig = props => {
9
  const [productList, setProductList] = useState([]);
Maofei94's avatar
Maofei94 committed
10
  const [userProductsList, setUserProductsList] = useState([]);
11
  const [productObj, setProductObj] = useState('');
12 13
  const [loading, setLoading] = useState(false);
  const [flag, setFlag] = useState(1);
皮倩雯's avatar
皮倩雯 committed
14
  const [list, setList] = useState(new Set());
15
  const [keepData, setKeepData] = useState(false);
皮倩雯's avatar
皮倩雯 committed
16
  // 默认展示第一项
皮倩雯's avatar
皮倩雯 committed
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
  // useEffect(() => {
  //   setLoading(true);
  //   getProductList()
  //     .then(res => {
  //       const { code } = res;
  //       if (code === 0) {
  //         const {
  //           data: { AllProducts, UserProducts },
  //         } = res;
  //         // setProductList(AllProducts);
  //         setUserProductsList(UserProducts);
  //         setProductObj(AllProducts[0]);
  //         AllProducts.map(i => {
  //           list.add(i.ProductType);
  //         });
  //         let a = [];
  //         list.map(i => {
  //           a.push(i);
  //         });
  //         let aa = [];
  //         a.map((i, j) => {
  //           let ad = [];
  //           AllProducts.map(k => {
  //             if (k.ProductType == i) {
  //               ad.push(k);
  //             }
  //           });
  //           aa.push(ad);
  //         });
  //         setProductList(aa);
  //       }
  //     })
  //     .finally(() => {
  //       setLoading(false);
  //     });
  // }, []);
皮倩雯's avatar
皮倩雯 committed
53 54 55 56 57 58 59 60 61 62 63

  useEffect(() => {
    setLoading(true);
    getProductList()
      .then(res => {
        const { code } = res;
        if (code === 0) {
          const {
            data: { AllProducts, UserProducts },
          } = res;
          // setProductList(AllProducts);
64 65
          console.log(res.data.IsAuthorize);
          setKeepData(res.data.IsAuthorize);
Maofei94's avatar
Maofei94 committed
66
          setUserProductsList(UserProducts);
皮倩雯's avatar
皮倩雯 committed
67 68
          console.log(UserProducts);
          console.log(userProductsList);
皮倩雯's avatar
皮倩雯 committed
69 70 71
          if (!productObj && AllProducts.length > 0) {
            setProductObj(AllProducts[0]);
          }
Maofei94's avatar
Maofei94 committed
72
          // setProductList(data);
皮倩雯's avatar
皮倩雯 committed
73 74 75 76
          AllProducts.map(i => {
            list.add(i.ProductType);
          });
          let a = [];
77 78
          console.log(list, 'listsss');
          [...list].map(i => {
皮倩雯's avatar
皮倩雯 committed
79 80 81 82 83 84 85 86 87 88 89 90 91
            a.push(i);
          });
          let aa = [];
          a.map((i, j) => {
            let ad = [];
            AllProducts.map(k => {
              if (k.ProductType == i) {
                ad.push(k);
              }
            });
            aa.push(ad);
          });
          setProductList(aa);
92 93 94 95 96 97
        }
      })
      .finally(() => {
        setLoading(false);
      });
  }, [flag]);
皮倩雯's avatar
皮倩雯 committed
98

99
  // 删除
Maofei94's avatar
Maofei94 committed
100
  const handleDel = item => {
101
    setLoading(true);
Maofei94's avatar
Maofei94 committed
102
    delProductList({ ...item })
103 104 105
      .then(res => {
        setLoading(false);
        if (res.code === 0) {
皮倩雯's avatar
皮倩雯 committed
106
          item.IsUsed = false;
107
          setProductObj(item);
108 109
          notification.success({
            message: '提示',
Maofei94's avatar
Maofei94 committed
110
            description: '关闭成功',
111 112 113 114 115 116
            duration: 3,
          });
          setFlag(flag + 1);
        } else {
          notification.error({
            message: '提示',
Maofei94's avatar
Maofei94 committed
117
            description: res.msg || '关闭失败',
118 119 120 121 122 123 124 125 126
            duration: 10,
          });
        }
      })
      .catch(err => {
        setLoading(false);
        console.error(err);
      });
  };
127

128 129 130 131 132 133 134
  // 编辑的回调
  const editCallback = val => {
    setLoading(true);
    modifyProduct(val)
      .then(res => {
        setLoading(false);
        if (res.code === 0) {
皮倩雯's avatar
皮倩雯 committed
135
          setFlag(flag + 1);
136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153
          notification.success({
            message: '提示',
            description: '编辑成功',
            duration: 3,
          });
        } else {
          notification.error({
            message: '提示',
            description: res.msg || '编辑失败',
            duration: 10,
          });
        }
      })
      .catch(err => {
        setLoading(false);
        console.log(err);
      });
  };
Maofei94's avatar
Maofei94 committed
154
  const handleSwitchClick = (e, item, userlist) => {
皮倩雯's avatar
皮倩雯 committed
155
    console.log(userlist);
Maofei94's avatar
Maofei94 committed
156 157 158 159 160 161
    if (e) {
      setLoading(true);
      modifyProduct({ ...item })
        .then(res => {
          setLoading(false);
          if (res.code === 0) {
皮倩雯's avatar
皮倩雯 committed
162
            setFlag(flag + 1);
Maofei94's avatar
Maofei94 committed
163 164 165 166 167
            notification.success({
              message: '提示',
              description: '启用成功',
              duration: 3,
            });
皮倩雯's avatar
皮倩雯 committed
168
            item.IsUsed = true;
169
            setProductObj({ ...item });
Maofei94's avatar
Maofei94 committed
170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188
          } else {
            notification.error({
              message: '提示',
              description: res.msg || '启用失败',
              duration: 10,
            });
          }
        })
        .catch(err => {
          setLoading(false);
          console.log(err);
        });
    }
    if (!e) {
      let obj = userlist.find(i => i.PackageName === item.PackageName);
      handleDel(obj);
    }
  };
  const handleClickItem = value => {
皮倩雯's avatar
皮倩雯 committed
189
    console.log(value);
190
    setProductObj({ ...value });
Maofei94's avatar
Maofei94 committed
191
  };
192

皮倩雯's avatar
皮倩雯 committed
193
  const renderListItem = arr => (
皮倩雯's avatar
皮倩雯 committed
194
    <div style={{ marginBottom: '25px', borderBottom: '1px solid #ccc', paddingBottom: '25px' }}>
皮倩雯's avatar
皮倩雯 committed
195 196 197 198 199 200 201 202 203 204 205 206
      {arr.map(item => (
        <List.Item
          key={item.PackageName}
          className={classnames({
            [styles.listItem]: true,
            [styles.selected]: item.PackageName === productObj?.PackageName,
          })}
          onClick={() => handleClickItem(item)}
        >
          <div onClick={e => e.stopPropagation()}>
            <Switch
              checked={item.IsUsed}
207
              disabled={keepData ? true : false}
皮倩雯's avatar
皮倩雯 committed
208 209 210 211 212 213 214
              checkedChildren="启用"
              unCheckedChildren="关闭"
              onClick={e => {
                handleSwitchClick(e, item, userProductsList);
              }}
            />
          </div>
邓超's avatar
邓超 committed
215 216 217
          <span className={classnames({ [styles.itemspan]: true })}>
            {item.ProductType ? `${item.ProductName}【${item.ProductType}】` : item.ProductName}
          </span>
皮倩雯's avatar
皮倩雯 committed
218 219 220 221
        </List.Item>
      ))}
    </div>
  );
Maofei94's avatar
Maofei94 committed
222
  return (
223 224 225
    <Spin spinning={loading} tip="loading...">
      <div className={styles.box}>
        <Card className={classnames(`${styles.leftList}`)}>
226
          <div className={styles.listTop}>可用产品:</div>
227
          <div style={{ height: 'calc(100% - 50px)', overflow: 'scroll' }}>
228 229 230 231 232 233
            {productList && productList.length > 0 ? (
              productList.map(item => renderListItem(item))
            ) : (
              <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} description="暂无数据" />
            )}
          </div>
234 235
        </Card>
        <Card className={styles.rightForm}>
皮倩雯's avatar
皮倩雯 committed
236 237 238 239 240 241
          <EditForm
            productObj={productObj}
            editCallback={editCallback}
            handleDel={handleDel}
            userProductsList={userProductsList}
          />
242 243 244
        </Card>
      </div>
    </Spin>
Maofei94's avatar
Maofei94 committed
245 246 247
  );
};
export default ProductConfig;