addTable.jsx 8.32 KB
Newer Older
1
import React, { useState, useEffect } from 'react';
2
import { Form, Modal, Input, Select, Checkbox, Divider, notification, Row } from 'antd';
3

4
import { createTable, loadTableFields, addFields } from '@/services/tablemanager/tablemanager';
5

6
import styles from './index.less';
7 8 9
const { Option } = Select;
const CheckboxGroup = Checkbox.Group;
const editor = props => {
10 11 12 13 14 15 16 17 18 19 20 21 22 23
  const { callBackSubmit = () => {}, type, visible } = props;
  const [reminder, setReminder] = useState(
    ' 事件表会默认创建如下字段:事件编号、事件状态、事件名称上报站点、处理站点、上报人名称、上报人部分、上报时间、现场图片、现场录音、坐标位置、更新时间、更新状态、是否置顶',
  );
  const [loading, setLoading] = useState(false);
  const [isModalVisible, setIsModalVisible] = useState(false);
  const [form] = Form.useForm();
  const { Item } = Form;
  const [checkedList, setCheckedList] = useState([]); // 选中的复选框内容
  const [plainOptions, setPlainOptions] = useState([]); // 复选框所有内容
  const [indeterminate, setIndeterminate] = useState(true);
  const [isVisible, setIsVisible] = useState(true);
  const [checkAll, setCheckAll] = useState(false);
  const [chartName, setChartName] = useState(''); // 附加表名称
24

25 26 27 28 29
  const onChange = list => {
    setCheckedList(list);
    setIndeterminate(!!list.length && list.length < plainOptions.length);
    setCheckAll(list.length === plainOptions.length);
  };
30

31 32 33 34 35
  const onCheckAllChange = e => {
    setCheckedList(e.target.checked ? plainOptions : []);
    setIndeterminate(false);
    setCheckAll(e.target.checked);
  };
36

37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64
  // 提交
  const onSubmit = () => {
    form.validateFields().then(validate => {
      if (validate) {
        setLoading(true);
        let obj = form.getFieldsValue();
        obj.tableName = obj.tableType.substr(0, obj.tableType.length - 1) + '_' + obj.tableName;
        createTable({
          ...obj,
        })
          .then(res => {
            setLoading(false);
            if (res.msg === 'Ok') {
              notification.success({
                message: '提示',
                duration: 1,
                description: '建表成功',
              });
              setIsVisible(false);
              setChartName(res.data.tableInfo.Name);
              loadTableFields({ tableName: res.data.tableInfo.Name }).then(response => {
                if (response.data.root.length) {
                  let arr = [],
                    newArr = [];
                  response.data.root.map(item => {
                    newArr.push(item.fieldName);
                    if (item.isCheck) {
                      arr.push(item.fieldName);
65
                    }
66 67 68
                  });
                  setPlainOptions(newArr);
                  setCheckedList(arr);
69
                }
70 71 72 73 74 75
                setIsModalVisible(true);
              });
            } else {
              form.resetFields();
              callBackSubmit();
              notification.error({
76
                message: '提示',
77 78 79 80 81 82 83 84 85 86 87
                duration: 3,
                description: res.msg,
              });
            }
          })
          .catch(err => {
            console.log('err', err);
            notification.error({
              message: '提示',
              duration: 3,
              description: '新增失败',
88
            });
89 90 91 92 93 94 95 96
            setLoading(false);
          });
      }
    });
  };
  useEffect(() => {
    if (type != '') {
      form.setFieldsValue({ tableType: '事件表' });
97
    }
98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131
  }, [visible]);
  const handleOk = () => {
    if (chartName != '') {
      addFields({
        tableName: chartName,
        fieldNames: checkedList.join(','),
      })
        .then(res => {
          if (res.msg === 'Ok' || res.msg === '') {
            notification.success({
              message: '提示',
              duration: 1,
              description: '附加字段添加成功',
            });
            setIsModalVisible(false);
            form.resetFields();
            callBackSubmit();
          } else {
            notification.error({
              message: '提示',
              duration: 3,
              description: res.msg,
            });
          }
        })
        .catch(err => {
          console.log('err', err);
        });
    } else {
      notification.success({
        message: '提示',
        duration: 1,
        description: '表名称没添加',
      });
132
    }
133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159
  };
  const handleCancel = () => {
    setIsModalVisible(false);
  };
  const changeChart = value => {
    let str = '';
    switch (value) {
      case '事件表':
        str =
          ' 事件表默认创建如下字段:事件编号、事件状态、事件名称、上报站点、处理站点、上报人名称、上报人部分、上报时间、现场图片、现场录音、坐标位置、更新时间、更新状态、是否置顶';
        break;
      case '工单表':
        str = '工单表默认创建如下字段:工单编号';
        break;
      case '台账表':
        str = '台账表默认创建如下字段:所属站点、录入时间、是否删除';
        break;
      case '设备表':
        str =
          '设备表默认创建如下字段:编码、父设备编码、GIS编号、设备名称、所属站点、坐标位置、风貌图、视频缩略图、第三方编码、录入时间、是否删除';
        break;
      case '反馈表':
        str = '反馈表默认创建如下字段:编码、设备编码、录入时间、是否删除';
        break;
      default:
        str =
          ' 事件表默认创建如下字段:事件编号、事件状态、事件名称、上报站点、处理站点、上报人名称、上报人部分、上报时间、现场图片、现场录音、坐标位置、更新时间、更新状态、是否置顶';
shaoan123's avatar
shaoan123 committed
160
    }
161 162 163 164 165 166 167 168 169 170 171
    setReminder(str);
  };
  const layout = {
    layout: 'horizontal',
    labelCol: {
      span: 4,
    },
    wrapperCol: {
      span: 19,
    },
  };
172

173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 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 232 233 234 235 236 237 238 239 240 241
  return (
    <>
      <Modal
        title="建表"
        bodyStyle={{ width: '100%', minHeight: '100px' }}
        style={{ top: '150px' }}
        width="700px"
        destroyOnClose
        maskClosable={false}
        cancelText="取消"
        okText="确认"
        visible={isVisible}
        {...props}
        onOk={() => onSubmit()}
        confirmLoading={loading}
        forceRender={true}
        getContainer={false}
      >
        <Form form={form} {...layout}>
          <Item label="【特别提示】">
            <span>
              此处仅建立基础表和必要字段,额外字段需通过其他方式进行添加,比如使用Navicat工具等。
            </span>
          </Item>
          <Item
            label="建表类型"
            name="tableType"
            rules={[{ required: true, message: '请输入表名' }]}
          >
            <Select onChange={changeChart}>
              <Select.Option value="事件表">事件表</Select.Option>
              <Select.Option value="工单表">工单表</Select.Option>
              <Select.Option value="台账表">台账表</Select.Option>
              <Select.Option value="设备表">设备表</Select.Option>
              <Select.Option value="反馈表">反馈表</Select.Option>
            </Select>
          </Item>
          <Item
            label="表名"
            name="tableName"
            rules={[{ required: true, message: '请以"模块_表名"的个数输入' }]}
          >
            <Input placeholder='请以"模块_表名"的个数输入' allowClear />
          </Item>
          <Item label="别名" name="alias">
            <Input placeholder="请输入别名,通常用作该表的备注" allowClear />
          </Item>
          <Item label=" " colon={false}>
            <span>{reminder}</span>
          </Item>
        </Form>
      </Modal>
      <Modal title="附加字段" visible={isModalVisible} onOk={handleOk} onCancel={handleCancel}>
        <Checkbox indeterminate={indeterminate} onChange={onCheckAllChange} checked={checkAll}>
          选择所有
        </Checkbox>
        <Divider />
        <div className={styles.field}>
          <Row>
            {plainOptions.length ? (
              <CheckboxGroup options={plainOptions} value={checkedList} onChange={onChange} />
            ) : (
              ''
            )}
          </Row>
        </div>
      </Modal>
    </>
  );
242 243
};
export default editor;