productConfig.jsx 6.72 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 15
  const [list, setList] = useState(new Set());
  // 默认展示第一项
皮倩雯's avatar
皮倩雯 committed
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
  // 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
52 53 54 55 56 57 58 59 60 61 62

  useEffect(() => {
    setLoading(true);
    getProductList()
      .then(res => {
        const { code } = res;
        if (code === 0) {
          const {
            data: { AllProducts, UserProducts },
          } = res;
          // setProductList(AllProducts);
Maofei94's avatar
Maofei94 committed
63
          setUserProductsList(UserProducts);
皮倩雯's avatar
皮倩雯 committed
64 65
          console.log(UserProducts);
          console.log(userProductsList);
皮倩雯's avatar
皮倩雯 committed
66 67 68
          if (!productObj && AllProducts.length > 0) {
            setProductObj(AllProducts[0]);
          }
Maofei94's avatar
Maofei94 committed
69
          // setProductList(data);
皮倩雯's avatar
皮倩雯 committed
70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87
          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);
88 89 90 91 92 93
        }
      })
      .finally(() => {
        setLoading(false);
      });
  }, [flag]);
皮倩雯's avatar
皮倩雯 committed
94

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

124 125 126 127 128 129 130
  // 编辑的回调
  const editCallback = val => {
    setLoading(true);
    modifyProduct(val)
      .then(res => {
        setLoading(false);
        if (res.code === 0) {
皮倩雯's avatar
皮倩雯 committed
131
          setFlag(flag + 1);
132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149
          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
150
  const handleSwitchClick = (e, item, userlist) => {
皮倩雯's avatar
皮倩雯 committed
151
    console.log(userlist);
Maofei94's avatar
Maofei94 committed
152 153 154 155 156 157
    if (e) {
      setLoading(true);
      modifyProduct({ ...item })
        .then(res => {
          setLoading(false);
          if (res.code === 0) {
皮倩雯's avatar
皮倩雯 committed
158
            setFlag(flag + 1);
Maofei94's avatar
Maofei94 committed
159 160 161 162 163
            notification.success({
              message: '提示',
              description: '启用成功',
              duration: 3,
            });
皮倩雯's avatar
皮倩雯 committed
164
            item.IsUsed = true;
165
            setProductObj({ ...item });
Maofei94's avatar
Maofei94 committed
166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184
          } 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
185
    console.log(value);
186
    setProductObj({ ...value });
Maofei94's avatar
Maofei94 committed
187
  };
皮倩雯's avatar
皮倩雯 committed
188
  const renderListItem = arr => (
皮倩雯's avatar
皮倩雯 committed
189
    <div style={{ marginBottom: '25px', borderBottom: '1px solid #ccc', paddingBottom: '25px' }}>
皮倩雯's avatar
皮倩雯 committed
190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208
      {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}
              checkedChildren="启用"
              unCheckedChildren="关闭"
              onClick={e => {
                handleSwitchClick(e, item, userProductsList);
              }}
            />
          </div>
邓超's avatar
邓超 committed
209 210 211
          <span className={classnames({ [styles.itemspan]: true })}>
            {item.ProductType ? `${item.ProductName}【${item.ProductType}】` : item.ProductName}
          </span>
皮倩雯's avatar
皮倩雯 committed
212 213 214 215
        </List.Item>
      ))}
    </div>
  );
Maofei94's avatar
Maofei94 committed
216
  return (
217 218 219
    <Spin spinning={loading} tip="loading...">
      <div className={styles.box}>
        <Card className={classnames(`${styles.leftList}`)}>
220
          <div className={styles.listTop}>可用产品:</div>
221
          {productList && productList.length > 0 ? (
皮倩雯's avatar
皮倩雯 committed
222
            productList.map(item => renderListItem(item))
223
          ) : (
224
            <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} description="暂无数据" />
225
          )}
226 227
        </Card>
        <Card className={styles.rightForm}>
皮倩雯's avatar
皮倩雯 committed
228 229 230 231 232 233
          <EditForm
            productObj={productObj}
            editCallback={editCallback}
            handleDel={handleDel}
            userProductsList={userProductsList}
          />
234 235 236
        </Card>
      </div>
    </Spin>
Maofei94's avatar
Maofei94 committed
237 238 239
  );
};
export default ProductConfig;