changeAdd.jsx 7.11 KB
Newer Older
1 2
import React, { useState, useEffect, useCallback, useRef } from 'react';
import { Form, Modal, Space, Divider, Radio, Checkbox } from 'antd';
3
import {
4

5 6
} from '@/services/platform/bs'
import styles from './index.less'
7 8
import Sortable from 'sortablejs';
const CheckboxGroup = Checkbox.Group;
9
const AddModal = props => {
10
  const { callBackSubmit = () => { }, isType, formObj, visible, filed, characterValue, newCheckedList } = props;
11 12 13 14
  const [loading, setLoading] = useState(false);
  const [value, setValue] = useState('');
  const [checkValue, setCheckValue] = useState([]);
  const [form] = Form.useForm();
15
  const [title, setTitle] = useState([])
16
  const { Item } = Form;
17 18 19 20 21 22 23 24 25
  const [checkedList, setCheckedList] = useState([]);//选中的复选框内容
  const [indeterminate, setIndeterminate] = useState([]);
  const [checkAll, setCheckAll] = useState([]);
  const [selectData, setSelectData] = useState([])
  let objArr = []
  const onChangeList = (list, index) => {
    const checkedListArr = [...checkedList]
    checkedListArr[index] = list
    setCheckedList(checkedListArr);
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
  const onCheckAllChange = e => {
    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] = []
    setCheckedList(checkedListArr);
    setIndeterminate(indeterminateArr);
    setCheckAll(checkAllArr);
  };
  //监听用户选择的字段名
  useEffect(() => {
    selectAll()
  }, [checkedList]);

  const selectAll = () => {
    objArr = []
    checkedList.map(item => {
      objArr = objArr.concat(item)
    })
    setSelectData(objArr)
  }

  const onSubmit = () => {
    isType === 'rule' ? callBackSubmit(`${value === '无' || value === '' ? '' : value + ','}${checkValue.join(',')}`) : callBackSubmit({ checkedList, str: selectData.join(",") });
  };
55 56

  useEffect(() => {
57
    if (isType != '' && isType === 'rule') {
58 59 60
      setValue(formObj.numerical)
      setCheckValue(formObj.rule)
    }
61 62 63 64 65 66 67 68 69
    else if (isType === 'characteristics') {
      let arr = Object.keys(filed)
      setTitle(arr)
      console.log('arr', arr);
      let indeterminateArr = []
      let checkAllArr = []
      arr.map((item, index) => {
        indeterminateArr.push(true)
        checkAllArr.push(false)
70
      })
71 72 73 74 75 76
      setCheckedList(newCheckedList)
      setIndeterminate(indeterminateArr)
      setCheckAll(checkAllArr)
      let newArr = characterValue.length? characterValue.split(","):[]
      setSelectData(newArr)
      draftSort()
77 78 79
    }

  }, [visible]);
80
  //单选框变化时触发的事件
81 82 83 84 85 86
  const handleChange = (e) => {
    setValue(e.target.value)
    if (e.target.value === '无') {
      setCheckValue([])
    }
  }
87
  //复选框变化时触发的事件
88 89
  const onChange = (e) => {
    setCheckValue(e)
90
    if (e.length && value == '无') {
91 92 93
      setValue('')
    }
  }
94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112
  //拖拽初始化及逻辑
  const draftSort = () => {
    let el = document.getElementById('doctor-drag-items');
    if (el) {
      let sortable = Sortable.create(el, {
        animation: 100, //动画参数
        onEnd: function (evt) { //拖拽完毕之后发生,只需关注该事件
          let arr = [];
          let len = evt.from.children.length;
          for (let i = 0; i < len; i++) {
            arr.push(evt.from.children[i].getAttribute('drag-id'))
          }
          setSelectData(arr)
        }
      });
    }

  }

113 114
  return (
    <Modal
115
      title={isType === 'rule' ? '选择验证规则' : '字段集选择'}
116
      bodyStyle={{ width: '100%', minHeight: '100px' }}
117
      style={{ top: '160px' }}
118 119
      width="700px"
      destroyOnClose
shaoan123's avatar
shaoan123 committed
120
      centered ={true}
121 122 123 124 125 126 127 128 129
      maskClosable={false}
      cancelText="取消"
      okText="确认"
      {...props}
      onOk={() => onSubmit()}
      confirmLoading={loading}
      forceRender={true}
      getContainer={false}
    >
130
      {visible && isType === 'rule' && (
131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152
        <>
          <Radio.Group onChange={handleChange} value={value}>
            <Space direction="vertical">
              <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>
            </Space>
          </Radio.Group>
          <Checkbox.Group style={{ width: '100%', marginTop: '1rem' }} onChange={onChange} value={checkValue}>
            <Space direction="vertical">
              <Checkbox value="required">必填(required)</Checkbox>
              <Checkbox value="emphasis">强调(emphasis)</Checkbox>
              <Checkbox value="sensitive">敏感(sensitive)</Checkbox>
            </Space>
          </Checkbox.Group>
        </>
      )}
153
      {visible && isType === 'characteristics' && (
154
        <div className={styles.listCard}>
155 156 157 158 159 160 161 162 163
          <div className={styles.cardItem} style={{ borderRight: '1px solid #99bbe8' }}>
            <Divider orientation="left" style={{ margin: '0 0 10px 0', backgroundColor: '#dfe8f6' }}>待选字段列表</Divider>
            <div className={styles.cardContent}>
              {title.map((item, index) => {
                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)} /></div>
              })}
            </div>
164 165
          </div>
          <div className={styles.cardItem}>
166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188
            <Divider orientation="left" style={{ margin: '0 0 10px 0', backgroundColor: '#dfe8f6' }}>已选字段列表</Divider>
            <div className={styles.cardContent}>
              <div className={styles.doctorTable}>
                <table>
                  <thead>
                    <tr>
                      <td>字段名</td>
                    </tr>
                  </thead>
                  <tbody id='doctor-drag-items'>
                    {selectData && selectData.length > 0 ?
                      selectData.map((item, index) => {
                        return <tr drag-id={item} key={index} style={{ cursor: 'move' }}>
                          <td><span title={item}>{item}</span></td>
                        </tr>
                      })
                      : <tr><td colSpan='10' style={{ textAlign: 'center' }}>暂无数据</td></tr>
                    }
                  </tbody>
                </table>
              </div>

            </div>
189 190 191 192 193 194 195 196 197
          </div>
        </div>
      )

      }
    </Modal>
  );
};
export default AddModal;