changeAdd.jsx 8.15 KB
Newer Older
1 2 3
/* eslint-disable no-shadow */
/* eslint-disable arrow-body-style */
/* eslint-disable array-callback-return */
4
/* eslint-disable indent */
shaoan123's avatar
shaoan123 committed
5 6 7
import React, { useState, useEffect, useCallback, useRef } from 'react';
import { Form, Modal, Space, Divider, Radio, Checkbox } from 'antd';

8
import styles from './standingBook.less';
shaoan123's avatar
shaoan123 committed
9
import Sortable from 'sortablejs';
10
import DragTable from '@/components/DragTable/DragTable';
shaoan123's avatar
shaoan123 committed
11
const CheckboxGroup = Checkbox.Group;
12

shaoan123's avatar
shaoan123 committed
13
const AddModal = props => {
14 15 16 17 18 19 20 21
  // 自定义获取改变后的值hooks
  const usePrevious = value => {
    const ref = useRef();
    useEffect(() => {
      ref.current = value;
    });
    return ref.current;
  };
22
  const { callBackSubmit, pickItem, visible, filed, newCheckedList } = props;
shaoan123's avatar
shaoan123 committed
23 24 25 26
  const [loading, setLoading] = useState(false);
  const [value, setValue] = useState('');
  const [checkValue, setCheckValue] = useState([]);
  const [form] = Form.useForm();
27
  const [title, setTitle] = useState([]);
shaoan123's avatar
shaoan123 committed
28
  const { Item } = Form;
29
  const [checkedList, setCheckedList] = useState([]); // 选中的复选框内容
shaoan123's avatar
shaoan123 committed
30 31
  const [indeterminate, setIndeterminate] = useState([]);
  const [checkAll, setCheckAll] = useState([]);
32 33 34 35
  const [selectData, setSelectData] = useState([]);
  const [isFirst, setIsFirst] = useState(true);
  const prevAmount = usePrevious({ checkedList });

shaoan123's avatar
shaoan123 committed
36
  const onChangeList = (list, index, title) => {
37 38
    const checkedListArr = [...checkedList];
    checkedListArr[index] = list;
shaoan123's avatar
shaoan123 committed
39
    setCheckedList(checkedListArr);
40 41
    const indeterminateArr = [...indeterminate];
    const checkAllArr = [...checkAll];
42
    indeterminateArr[index] = !!list.length && list.length < filed[title].length;
43 44
    checkAllArr[index] = list.length === filed[title].length;
    setIndeterminate(indeterminateArr);
shaoan123's avatar
shaoan123 committed
45 46 47 48
    setCheckAll(checkAllArr);
  };

  const onCheckAllChange = e => {
49 50 51 52 53 54 55 56 57
    const indeterminateArr = [...indeterminate];
    const checkAllArr = [...checkAll];
    const checkedListArr = [...checkedList];
    checkAllArr[e.target.index] = e.target.checked;
    indeterminateArr[e.target.index] = false;
    // eslint-disable-next-line no-unused-expressions
    e.target.checked
      ? (checkedListArr[e.target.index] = e.target.checkvalue)
      : (checkedListArr[e.target.index] = []);
shaoan123's avatar
shaoan123 committed
58 59 60 61
    setCheckedList(checkedListArr);
    setIndeterminate(indeterminateArr);
    setCheckAll(checkAllArr);
  };
62
  // 监听用户选择的字段名
shaoan123's avatar
shaoan123 committed
63
  useEffect(() => {
64 65 66
    if (prevAmount) {
      selectAll();
    }
shaoan123's avatar
shaoan123 committed
67 68 69
  }, [checkedList]);

  const selectAll = () => {
70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86
    if (!visible) {
      return;
    }
    // 是否第一次保存数据
    if (isFirst) {
      setIsFirst(false);
      return;
    }
    // 新的选择后的数据(已选字段列表数据)
    let newSelect = JSON.parse(JSON.stringify(selectData));
    // 当前选中的
    let currentArr;
    // 上一次选中的
    let preArr;
    // 获取扁平化后的数组
    currentArr = new Set(checkedList.flat());
    preArr = new Set(prevAmount.checkedList.flat());
shaoan123's avatar
shaoan123 committed
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
    // 找出相同的部分
    let someArr = [...new Set([...currentArr].filter(x => preArr.has(x)))];
    // 复选框事选中还是取消选中 add or del
    let checkType;
    if ([...currentArr].length > [...preArr].length) {
      checkType = 'add';
    } else if ([...currentArr].length < [...preArr].length) {
      checkType = 'del';
    }
    if (checkType === 'add') {
      // 添加新选中的元素
      currentArr.forEach(item => {
        if (someArr.indexOf(item) === -1) {
          newSelect.push({ name: item });
        }
      });
    } else if (checkType === 'del') {
      // 删除取消勾选的元素
      preArr.forEach(item => {
        if (someArr.indexOf(item) === -1) {
          newSelect.splice(newSelect.findIndex(ele => ele.name === item), 1);
        }
      });
    }
112
    console.log(newSelect);
113
    setSelectData(newSelect);
shaoan123's avatar
shaoan123 committed
114 115
  };

116 117 118 119 120 121 122 123 124 125
  const onSubmit = () => {
    let newArr = selectData.map(item => item.name);
    callBackSubmit({ checkedList, str: newArr.join(','), pickItem });
  };
  const columns = [
    {
      title: '字段名',
      dataIndex: 'name',
      width: 150,
      key: 'name',
126
      ellipsis: true,
127 128
    },
  ];
shaoan123's avatar
shaoan123 committed
129
  useEffect(() => {
130 131 132 133 134 135
    if (visible) {
      let arr = Object.keys(filed);
      setTitle(arr);
      let checkArr = [];
      let indeterminateArr = [];
      let checkAllArr = [];
shaoan123's avatar
shaoan123 committed
136
      arr.map((item, index) => {
137
        checkArr[index] = [];
shaoan123's avatar
shaoan123 committed
138 139
        newCheckedList.map(checkItem => {
          if (filed[item].includes(checkItem)) {
140
            checkArr[index].push(checkItem);
shaoan123's avatar
shaoan123 committed
141
          }
142 143
        });
        indeterminateArr.push(
144
          !!checkArr[index].length && checkArr[index].length < filed[item].length,
145 146 147 148 149 150
        );
        checkAllArr.push(checkArr[index].length === filed[item].length);
      });
      setCheckedList(checkArr);
      setIndeterminate(indeterminateArr);
      setCheckAll(checkAllArr);
151
      // eslint-disable-next-line arrow-body-style
152 153 154 155 156 157
      let newArr = newCheckedList.map(item => {
        return { name: item };
      });
      if (newArr.length === 1 && newArr[0].name === '') {
        newArr = [];
      }
158
      console.log(newArr);
159 160 161 162 163 164 165 166
      setSelectData(newArr);
    } else {
      // 弹窗关闭时清空数据
      setSelectData([]);
      setCheckedList([]);
      setCheckAll([]);
      setIndeterminate([]);
      setIsFirst(true);
shaoan123's avatar
shaoan123 committed
167 168 169
    }
  }, [visible]);

170
  const dragCallBack = arr => {
171
    console.log(arr);
172 173
    if (arr && !isFirst) {
      setSelectData(arr);
shaoan123's avatar
shaoan123 committed
174
    }
175
  };
shaoan123's avatar
shaoan123 committed
176 177
  return (
    <Modal
178
      title="字段集选择"
shaoan123's avatar
shaoan123 committed
179 180
      bodyStyle={{ width: '100%', minHeight: '100px' }}
      style={{ top: '10px' }}
皮倩雯's avatar
皮倩雯 committed
181
      width="750px"
182
      centered
shaoan123's avatar
shaoan123 committed
183 184 185 186 187 188
      maskClosable={false}
      cancelText="取消"
      okText="确认"
      {...props}
      onOk={() => onSubmit()}
      confirmLoading={loading}
189
      forceRender
shaoan123's avatar
shaoan123 committed
190
      getContainer={false}
191
      destroyOnClose
shaoan123's avatar
shaoan123 committed
192 193 194
    >
      {visible && (
        <div className={styles.listCard}>
195
          <div className={styles.cardItem} style={{ borderRight: '1px solid #99bbe8' }}>
196 197 198 199 200 201
            <Divider
              orientation="left"
              style={{ margin: '0 0 10px 0', backgroundColor: '#dfe8f6' }}
            >
              待选字段列表
            </Divider>
shaoan123's avatar
shaoan123 committed
202 203
            <div className={styles.cardContent}>
              {title.map((item, index) => {
204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231
                return (
                  <div className={styles.cardItemData} key={index}>
                    <Divider
                      orientation="left"
                      style={{
                        margin: '0 0 10px 0',
                        color: '#15428b',
                        borderTopColor: '#99bbe8',
                      }}
                    >
                      {item}{' '}
                      <Checkbox
                        indeterminate={indeterminate[index]}
                        onChange={onCheckAllChange}
                        index={index}
                        checkvalue={filed[item]}
                        checked={checkAll[index]}
                      >
                        {' '}
                      </Checkbox>
                    </Divider>
                    <CheckboxGroup
                      options={filed[item]}
                      value={checkedList[index]}
                      onChange={e => onChangeList(e, index, item)}
                    />
                  </div>
                );
shaoan123's avatar
shaoan123 committed
232 233 234 235
              })}
            </div>
          </div>
          <div className={styles.cardItem}>
236 237 238 239 240 241
            <Divider
              orientation="left"
              style={{ margin: '0 0 10px 0', backgroundColor: '#dfe8f6' }}
            >
              已选字段列表
            </Divider>
shaoan123's avatar
shaoan123 committed
242 243
            <div className={styles.cardContent}>
              <div className={styles.doctorTable}>
244 245 246 247 248 249 250 251 252 253 254
                <DragTable
                  bordered
                  style={{ marginBottom: '10px' }}
                  rowKey={record => record.name}
                  columns={columns}
                  dataSource={selectData}
                  pagination={false}
                  size="small"
                  dragCallBack={dragCallBack}
                  ItemTypes="stadingOrder"
                />
shaoan123's avatar
shaoan123 committed
255 256 257 258
              </div>
            </div>
          </div>
        </div>
259
      )}
shaoan123's avatar
shaoan123 committed
260 261 262 263
    </Modal>
  );
};
export default AddModal;