changeAdd.jsx 8.56 KB
Newer Older
1 2
import React, { useState, useEffect, useCallback, useRef } from 'react';
import { Form, Modal, Space, Divider, Radio, Checkbox } from 'antd';
3
import {} from '@/services/tablemanager/tablemanager';
4
import Sortable from 'sortablejs';
皮倩雯's avatar
皮倩雯 committed
5
import styles from './index.less';
6 7
const CheckboxGroup = Checkbox.Group;
const AddModal = props => {
8 9 10 11 12 13 14 15 16
  const {
    callBackSubmit = () => {},
    isType,
    formObj,
    visible,
    filed,
    characterValue,
    newCheckedList,
  } = props;
17 18 19 20
  const [loading, setLoading] = useState(false);
  const [value, setValue] = useState('');
  const [checkValue, setCheckValue] = useState([]);
  const [form] = Form.useForm();
21
  const [title, setTitle] = useState([]);
22
  const { Item } = Form;
23
  const [checkedList, setCheckedList] = useState([]); // 选中的复选框内容
24 25
  const [indeterminate, setIndeterminate] = useState([]);
  const [checkAll, setCheckAll] = useState([]);
26 27 28 29 30
  const [selectData, setSelectData] = useState([]);
  let objArr = [];
  const onChangeList = (list, index, title) => {
    const checkedListArr = [...checkedList];
    checkedListArr[index] = list;
31
    setCheckedList(checkedListArr);
32 33 34 35 36
    const indeterminateArr = [...indeterminate];
    const checkAllArr = [...checkAll];
    indeterminateArr[index] = !!list.length && list.length < filed[title].length;
    checkAllArr[index] = list.length === filed[title].length;
    setIndeterminate(indeterminateArr);
37
    setCheckAll(checkAllArr);
38 39 40
  };

  const onCheckAllChange = e => {
41 42 43 44 45 46 47 48
    const indeterminateArr = [...indeterminate];
    const checkAllArr = [...checkAll];
    const checkedListArr = [...checkedList];
    checkAllArr[e.target.index] = e.target.checked;
    indeterminateArr[e.target.index] = false;
    e.target.checked
      ? (checkedListArr[e.target.index] = e.target.checkvalue)
      : (checkedListArr[e.target.index] = []);
49 50 51 52
    setCheckedList(checkedListArr);
    setIndeterminate(indeterminateArr);
    setCheckAll(checkAllArr);
  };
53
  // 监听用户选择的字段名
54
  useEffect(() => {
55
    selectAll();
56 57 58
  }, [checkedList]);

  const selectAll = () => {
59
    objArr = [];
60
    checkedList.map(item => {
61 62 63 64
      objArr = objArr.concat(item);
    });
    setSelectData(objArr);
  };
65 66

  const onSubmit = () => {
67 68 69 70 71
    isType === 'rule'
      ? callBackSubmit(
          `${value === '无' || value === '' ? '' : value + ','}${checkValue.join(',')}`,
        )
      : callBackSubmit({ checkedList, str: selectData.join(',') });
72 73 74 75
  };

  useEffect(() => {
    if (isType != '' && isType === 'rule') {
76 77 78 79 80 81 82 83
      setValue(formObj.numerical);
      setCheckValue(formObj.rule);
    } else if (isType === 'characteristics') {
      let arr = Object.keys(filed);
      setTitle(arr);
      let checkArr = [];
      let indeterminateArr = [];
      let checkAllArr = [];
84
      arr.map((item, index) => {
85
        checkArr[index] = [];
86 87
        newCheckedList.map(checkItem => {
          if (filed[item].includes(checkItem)) {
88
            checkArr[index].push(checkItem);
89
          }
90 91 92 93 94 95 96 97 98 99 100 101
        });
        indeterminateArr.push(
          !!checkArr[index].length && checkArr[index].length < filed[item].length,
        );
        checkAllArr.push(checkArr[index].length === filed[item].length);
      });
      setCheckedList(checkArr);
      setIndeterminate(indeterminateArr);
      setCheckAll(checkAllArr);
      let newArr = characterValue.length ? characterValue.split(',') : [];
      setSelectData(newArr);
      draftSort();
102 103
    }
  }, [visible]);
104 105 106
  // 单选框变化时触发的事件
  const handleChange = e => {
    setValue(e.target.value);
107
    if (e.target.value === '无') {
108
      setCheckValue([]);
109
    }
110 111 112 113
  };
  // 复选框变化时触发的事件
  const onChange = e => {
    setCheckValue(e);
114
    if (e.length && value == '无') {
115
      setValue('');
116
    }
117 118
  };
  // 拖拽初始化及逻辑
119 120 121 122
  const draftSort = () => {
    let el = document.getElementById('doctor-drag-items');
    if (el) {
      let sortable = Sortable.create(el, {
123
        animation: 100, // 动画参数
皮倩雯's avatar
皮倩雯 committed
124 125
        onEnd(evt) {
          //拖拽完毕之后发生,只需关注该事件
126 127 128
          let arr = [];
          let len = evt.from.children.length;
          for (let i = 0; i < len; i++) {
皮倩雯's avatar
皮倩雯 committed
129
            arr.push(evt.from.children[i].getAttribute('drag-id'));
130
          }
皮倩雯's avatar
皮倩雯 committed
131
          setSelectData(arr);
132
        },
133 134
      });
    }
135
  };
136 137 138 139 140 141 142 143

  return (
    <Modal
      title={isType === 'rule' ? '选择验证规则' : '字段集选择'}
      bodyStyle={{ width: '100%', minHeight: '100px' }}
      style={{ top: '10px' }}
      width="700px"
      destroyOnClose
144
      centered={true}
145 146 147 148 149 150
      maskClosable={false}
      cancelText="取消"
      okText="确认"
      {...props}
      onOk={() => onSubmit()}
      confirmLoading={loading}
151
      forceRender
152 153 154 155 156 157
      getContainer={false}
    >
      {visible && isType === 'rule' && (
        <>
          <Radio.Group onChange={handleChange} value={value}>
            <Space direction="vertical">
158 159 160 161 162 163 164 165
              <Radio value="无">无(清空选中)</Radio>
              <Radio value="number">数值(number)</Radio>
              <Radio value="digits">整数(digits)</Radio>
              <Radio value="email">邮箱(email)</Radio>
              <Radio value="identity">身份证号(identity)</Radio>
              <Radio value="mobile">手机号(mobile)</Radio>
              <Radio value="bankAccount">银行卡号(bankAccount)</Radio>
              <Radio value="timeControl">时间控制(timeControl)</Radio>
166 167
            </Space>
          </Radio.Group>
168 169 170 171 172
          <Checkbox.Group
            style={{ width: '100%', marginTop: '1rem' }}
            onChange={onChange}
            value={checkValue}
          >
173 174 175 176 177 178 179 180 181 182 183
            <Space direction="vertical">
              <Checkbox value="required">必填(required)</Checkbox>
              <Checkbox value="emphasis">强调(emphasis)</Checkbox>
              <Checkbox value="sensitive">敏感(sensitive)</Checkbox>
            </Space>
          </Checkbox.Group>
        </>
      )}
      {visible && isType === 'characteristics' && (
        <div className={styles.listCard}>
          <div className={styles.cardItem} style={{ borderRight: '1px solid #99bbe8' }}>
184 185 186 187 188 189
            <Divider
              orientation="left"
              style={{ margin: '0 0 10px 0', backgroundColor: '#dfe8f6' }}
            >
              待选字段列表
            </Divider>
190
            <div className={styles.cardContent}>
皮倩雯's avatar
皮倩雯 committed
191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214
              {title.map((item, index) => (
                <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>
              ))}
215 216 217
            </div>
          </div>
          <div className={styles.cardItem}>
218 219 220 221 222 223
            <Divider
              orientation="left"
              style={{ margin: '0 0 10px 0', backgroundColor: '#dfe8f6' }}
            >
              已选字段列表
            </Divider>
224 225 226 227 228 229 230 231
            <div className={styles.cardContent}>
              <div className={styles.doctorTable}>
                <table>
                  <thead>
                    <tr>
                      <td>字段名</td>
                    </tr>
                  </thead>
232 233
                  <tbody id="doctor-drag-items">
                    {selectData && selectData.length > 0 ? (
皮倩雯's avatar
皮倩雯 committed
234 235 236 237 238 239 240
                      selectData.map((item, index) => (
                        <tr drag-id={item} key={index} style={{ cursor: 'move' }}>
                          <td>
                            <span title={item}>{item}</span>
                          </td>
                        </tr>
                      ))
241 242 243 244 245 246 247
                    ) : (
                      <tr>
                        <td colSpan="10" style={{ textAlign: 'center' }}>
                          暂无数据
                        </td>
                      </tr>
                    )}
248 249 250 251 252 253
                  </tbody>
                </table>
              </div>
            </div>
          </div>
        </div>
254
      )}
255 256 257 258
    </Modal>
  );
};
export default AddModal;