WebDic.js 14.2 KB
Newer Older
陈前坚's avatar
陈前坚 committed
1 2 3
import React, { useState, useEffect } from 'react';
import {
  Table,
陈前坚's avatar
陈前坚 committed
4
  Tooltip,
陈前坚's avatar
陈前坚 committed
5
  Spin,
陈前坚's avatar
陈前坚 committed
6 7 8 9 10 11 12 13
  Modal,
  Form,
  Input,
  Space,
  Button,
  Popconfirm,
  notification,
  message,
陈前坚's avatar
陈前坚 committed
14 15
  Row,
  Col,
陈前坚's avatar
陈前坚 committed
16
} from 'antd';
陈前坚's avatar
陈前坚 committed
17
import { EditTwoTone, DeleteOutlined } from '@ant-design/icons';
陈前坚's avatar
陈前坚 committed
18
import { get, CITY_SERVICE } from '@/services';
mayongxin's avatar
mayongxin committed
19

20 21 22 23 24 25
import {
  GetDataDictionaryList,
  EditDataDictionary,
  AddDataDictionary,
  DeleteDataDictionary,
} from '@/services/dataCenter/api';
陈前坚's avatar
陈前坚 committed
26 27
import styles from './WebDic.less';

28
const { Search } = Input;
陈前坚's avatar
陈前坚 committed
29 30
const WebDic = () => {
  const [loading, setLoading] = useState(false);
陈前坚's avatar
陈前坚 committed
31
  const [level, setLevel] = useState(0); // 设置级别,一级1,二级2,添加条目时使用
陈前坚's avatar
陈前坚 committed
32
  const [addVisible, setAddVisible] = useState(false);
陈前坚's avatar
陈前坚 committed
33
  const [editVisible, setEditVisible] = useState(false);
陈前坚's avatar
陈前坚 committed
34 35
  const [data, setData] = useState([]); // 一级条目数据
  const [subData, setSubData] = useState([]); // 二级条目数据
陈前坚's avatar
陈前坚 committed
36 37
  const [select, setSelect] = useState({}); // 当前选中条目,可以是一级/二级,修改/删除时设置
  const [selectColor, setSelectColor] = useState({}); // 当前选中一级条目颜色,修改/删除时设置
陈前坚's avatar
陈前坚 committed
38 39
  const [selectID, setSelectID] = useState('-1'); // 当前选中一级条目的ID,添加二级条目时使用
  const [first, setFirst] = useState(true); // 是否第一次加载
陈前坚's avatar
陈前坚 committed
40
  const [addForm] = Form.useForm();
陈前坚's avatar
陈前坚 committed
41 42 43 44 45 46 47
  const [editForm] = Form.useForm();

  const columns = [
    {
      title: '名称',
      dataIndex: 'nodeName',
      key: 'nodeName',
陈前坚's avatar
陈前坚 committed
48
      width: 220,
陈前坚's avatar
陈前坚 committed
49 50 51 52 53
    },
    {
      title: '值',
      dataIndex: 'nodeValue',
      key: 'nodeValue',
陈前坚's avatar
陈前坚 committed
54 55 56 57 58 59
      render: record => {
        if (!record) {
          return '-';
        }
        return record;
      },
陈前坚's avatar
陈前坚 committed
60 61 62 63
    },
    {
      title: '操作',
      key: 'action',
陈前坚's avatar
陈前坚 committed
64
      width: 100,
陈前坚's avatar
陈前坚 committed
65 66
      render: record => (
        <Space>
陈前坚's avatar
陈前坚 committed
67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82
          <Tooltip title="编辑">
            <EditTwoTone
              onClick={() => {
                setSelect(record);
                if (record.parentID === '-1') {
                  setSelectColor(record);
                }
                setEditVisible(true);
                editForm.setFieldsValue({
                  nodeName1: record.nodeName,
                  nodeValue: record.nodeValue,
                });
              }}
              style={{ fontSize: '16px' }}
            />
          </Tooltip>
陈前坚's avatar
陈前坚 committed
83 84 85 86 87 88
          <div onClick={e => e.stopPropagation()}>
            <Popconfirm
              title="是否删除该数据?"
              okText="确认"
              cancelText="取消"
              onConfirm={submitDelete}
陈前坚's avatar
陈前坚 committed
89
            >
陈前坚's avatar
陈前坚 committed
90
              <DeleteOutlined
陈前坚's avatar
陈前坚 committed
91 92 93 94 95 96
                onClick={() => {
                  setSelect(record);
                  if (record.parentID === '-1') {
                    setSelectColor(record);
                  }
                }}
陈前坚's avatar
陈前坚 committed
97 98 99 100 101 102
                style={{
                  fontSize: '16px',
                  margin: '0px 10px',
                  color: '#e86060',
                }}
              />
陈前坚's avatar
陈前坚 committed
103 104
            </Popconfirm>
          </div>
陈前坚's avatar
陈前坚 committed
105 106 107 108 109 110 111 112
        </Space>
      ),
    },
  ];

  useEffect(() => {
    getData('-1');
  }, []);
陈前坚's avatar
陈前坚 committed
113
  // 根据父节点nodeID(即parentID)获取数据,一级条目parentID = -1
陈前坚's avatar
陈前坚 committed
114 115
  const getData = value => {
    setLoading(true);
mayongxin's avatar
mayongxin committed
116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 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
    // get(`${CITY_SERVICE}/OMS.svc/D_GetDataDictionaryList`, {
    //   _version: 9999,
    //   _dc: new Date().getTime(),
    //   nodeID: value,
    //   key: '',
    // })
    //   .then(res => {
    //     if (res) {
    //       if (res.length > 0) {
    //         res.map(item => {
    //           item.key = item.nodeID;
    //           return item;
    //         });
    //       }
    //       // value为 -1 时获取一级条目数据,否则获取二级条目数据
    //       if (value === '-1') {
    //         setData(res); // 设置一级条目数据
    //         if (first) {
    //           setSelect(res[0]); // 默认当前选中一级条目第一条
    //           setSelectColor(res[0]);
    //           setSelectID(res[0].nodeID); // 设置选中的一级条目ID,用于添加二级条目
    //           setFirst(false);
    //           // 获取二级条目数据,默认一级条目第一条,递归一次(条件parentID === '-1')
    //           if (res[0] && res[0].parentID === '-1') {
    //             getData(res[0].nodeID);
    //           }
    //         }
    //       } else if (value) {
    //         setSubData(res); // 设置二级条目,res为空[]时也要设置
    //       }
    //     } else {
    //       notification.error({
    //         message: '获取失败',
    //         description: res.message,
    //       });
    //     }
    //     setLoading(false);
    //   })
    //   .catch(err => {
    //     setLoading(false);
    //     message.error(err);
    //   });

159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178
    GetDataDictionaryList({ nodeID: value }).then(resnew => {
      if (resnew.code == 0) {
        let res = resnew.data;
        if (res.length > 0) {
          res.map(item => {
            item.key = item.nodeID;
            return item;
          });
        }
        // value为 -1 时获取一级条目数据,否则获取二级条目数据
        if (value === '-1') {
          setData(res); // 设置一级条目数据
          if (first) {
            setSelect(res[0]); // 默认当前选中一级条目第一条
            setSelectColor(res[0]);
            setSelectID(res[0].nodeID); // 设置选中的一级条目ID,用于添加二级条目
            setFirst(false);
            // 获取二级条目数据,默认一级条目第一条,递归一次(条件parentID === '-1')
            if (res[0] && res[0].parentID === '-1') {
              getData(res[0].nodeID);
陈前坚's avatar
陈前坚 committed
179
            }
陈前坚's avatar
陈前坚 committed
180
          }
181 182
        } else if (value) {
          setSubData(res); // 设置二级条目,res为空[]时也要设置
陈前坚's avatar
陈前坚 committed
183
        }
184 185 186 187 188 189 190 191 192
        setLoading(false);
      } else {
        setLoading(false);
        notification.error({
          message: '获取失败',
          description: resnew.msg,
        });
      }
    });
陈前坚's avatar
陈前坚 committed
193 194
  };
  const setRowClassName = record =>
陈前坚's avatar
陈前坚 committed
195
    record.nodeID === selectColor.nodeID ? styles.clickRowStyle : '';
陈前坚's avatar
陈前坚 committed
196

陈前坚's avatar
陈前坚 committed
197 198
  // 提交-添加
  const submitAdd = value => {
陈前坚's avatar
陈前坚 committed
199
    const nodeName1 = addForm.getFieldValue('nodeName1');
陈前坚's avatar
陈前坚 committed
200
    const nodeValue = addForm.getFieldValue('nodeValue');
mayongxin's avatar
mayongxin committed
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 242 243
    // if (nodeName1) {
    //   get(`${CITY_SERVICE}/OMS.svc/D_AddDataDictionary`, {
    //     _version: 9999,
    //     _dc: new Date().getTime(),
    //     nodeID: value,
    //     nodeName: nodeName1,
    //     nodeValue,
    //   })
    //     .then(res => {
    //       if (res.success) {
    //         setAddVisible(false);
    //         if (level === 1) {
    //           getData('-1');
    //           getData(res.message); // res.message为添加成功返回的一级条目ID
    //           // 设置添加二级条目的父级ID及父级ID选中状态
    //           setSelect({ nodeID: res.message, parentID: '-1' });
    //           setSelectID(res.message);
    //           setSelectColor({ nodeID: res.message });
    //         } else {
    //           getData(value);
    //         }
    //         notification.success({
    //           message: '提交成功',
    //         });
    //       } else {
    //         notification.error({
    //           message: '提交失败',
    //           description: res.message,
    //         });
    //       }
    //     })
    //     .catch(err => {
    //       message.error(err);
    //     });
    // } else {
    //   notification.error({
    //     message: '提交失败',
    //     description: '名称不能为空',
    //   });
    // }
    AddDataDictionary({
      nodeID: value,
      nodeName: nodeName1,
244 245 246 247 248 249 250 251 252 253 254
      nodeValue,
    }).then(res => {
      if (res.code == 0) {
        setAddVisible(false);
        if (level === 1) {
          getData('-1');
          getData(res.msg); // res.message为添加成功返回的一级条目ID
          // 设置添加二级条目的父级ID及父级ID选中状态
          setSelect({ nodeID: res.msg, parentID: '-1' });
          setSelectID(res.msg);
          setSelectColor({ nodeID: res.msg });
mayongxin's avatar
mayongxin committed
255
        } else {
256
          getData(value);
mayongxin's avatar
mayongxin committed
257
        }
258 259 260 261 262 263 264 265
        notification.success({
          message: '提交成功',
        });
      } else {
        notification.error({
          message: '提交失败',
          description: res.msg,
        });
mayongxin's avatar
mayongxin committed
266
      }
267
    });
陈前坚's avatar
陈前坚 committed
268
  };
陈前坚's avatar
陈前坚 committed
269
  // 提交-修改
陈前坚's avatar
陈前坚 committed
270
  const submitEdit = () => {
陈前坚's avatar
陈前坚 committed
271
    const nodeName1 = editForm.getFieldValue('nodeName1');
陈前坚's avatar
陈前坚 committed
272
    const nodeValue = editForm.getFieldValue('nodeValue');
陈前坚's avatar
陈前坚 committed
273
    if (nodeName1) {
mayongxin's avatar
mayongxin committed
274 275 276 277 278 279 280 281 282 283 284 285 286 287 288 289 290 291 292 293 294 295 296 297 298
      // get(`${CITY_SERVICE}/OMS.svc/D_EditDataDictionary`, {
      //   _version: 9999,
      //   _dc: new Date().getTime(),
      //   nodeID: select.nodeID,
      //   nodeName: nodeName1,
      //   nodeValue,
      // })
      //   .then(res => {
      //     if (res.success) {
      //       setEditVisible(false);
      //       getData(select.parentID);
      //       notification.success({
      //         message: '提交成功',
      //       });
      //     } else {
      //       notification.error({
      //         message: '提交失败',
      //         description: res.message,
      //       });
      //     }
      //   })
      //   .catch(err => {
      //     message.error(err);
      //   });

299 300 301 302 303 304 305 306 307 308 309 310 311 312 313 314 315 316
      EditDataDictionary({
        nodeID: select.nodeID,
        nodeName: nodeName1,
        nodeValue,
      }).then(res => {
        if (res.code == 0) {
          setEditVisible(false);
          getData(select.parentID);
          notification.success({
            message: '提交成功',
          });
        } else {
          notification.error({
            message: '提交失败',
            description: res.msg,
          });
        }
      });
陈前坚's avatar
陈前坚 committed
317 318 319 320
    } else {
      notification.error({
        message: '提交失败',
        description: '名称不能为空',
陈前坚's avatar
陈前坚 committed
321
      });
陈前坚's avatar
陈前坚 committed
322
    }
陈前坚's avatar
陈前坚 committed
323
  };
陈前坚's avatar
陈前坚 committed
324
  // 提交-删除
陈前坚's avatar
陈前坚 committed
325
  const submitDelete = () => {
皮倩雯's avatar
皮倩雯 committed
326
    DeleteDataDictionary({
陈前坚's avatar
陈前坚 committed
327 328 329
      nodeID: select.nodeID,
    })
      .then(res => {
330
        if (res.code === 0) {
陈前坚's avatar
陈前坚 committed
331
          getData(select.parentID);
陈前坚's avatar
陈前坚 committed
332 333 334
          if (select.parentID === '-1') {
            setSubData([]);
          }
陈前坚's avatar
陈前坚 committed
335 336 337 338 339 340 341 342 343 344 345 346 347
          notification.success({
            message: '删除成功',
          });
        } else {
          notification.error({
            message: '删除失败',
            description: res.message,
          });
        }
      })
      .catch(err => {
        message.error(err);
      });
陈前坚's avatar
陈前坚 committed
348
  };
陈前坚's avatar
陈前坚 committed
349 350 351 352 353 354 355 356 357 358 359 360 361
  const setItem = value => {
    setLevel(value);
    setAddVisible(true);
    addForm.resetFields();
    // addForm.setFieldsValue({ nodeName1: '', nodeValue: '' });
  };
  const pagenation = {
    showTotal: (total, range) => `第${range[0]}-${range[1]} 条/共 ${total} 条`,
    pageSizeOptions: [10, 20, 50, 100],
    defaultPageSize: '20',
    showQuickJumper: true,
    showSizeChanger: true,
  };
362
  const onSearch = key => {};
陈前坚's avatar
陈前坚 committed
363 364 365

  return (
    <div className={styles.WebDic}>
陈前坚's avatar
陈前坚 committed
366
      <Spin spinning={loading} tip="loading...">
陈前坚's avatar
陈前坚 committed
367
        <Row style={{ background: 'white' }}>
陈前坚's avatar
陈前坚 committed
368
          <Col span={12} className={styles.left}>
陈前坚's avatar
陈前坚 committed
369 370 371 372 373
            <div style={{ marginBottom: '10px', fontSize: '16px' }}>
              <span style={{ padding: '0 10px' }}>一级条目</span>
              <Button type="primary" size="small" onClick={() => setItem(1)}>
                添加
              </Button>
374 375 376 377
              <Search
                style={{ width: '300px', marginLeft: '10px' }}
                onSearch={onSearch}
              />
陈前坚's avatar
陈前坚 committed
378 379 380 381 382 383 384 385 386 387 388 389 390
            </div>
            {/* 一级条目 表格 */}
            <Table
              size="small"
              bordered
              columns={columns}
              dataSource={data}
              scroll={{ x: 'max-content' }}
              rowClassName={setRowClassName}
              onRow={record => ({
                onClick: () => {
                  getData(record.nodeID);
                  setSelect(record);
陈前坚's avatar
陈前坚 committed
391
                  setSelectColor(record);
陈前坚's avatar
陈前坚 committed
392 393 394 395 396 397 398 399 400 401 402 403 404 405 406 407 408 409 410 411 412 413 414 415
                  setSelectID(record.nodeID);
                },
              })}
              pagination={pagenation}
            />
          </Col>
          <Col span={12}>
            <div style={{ marginBottom: '10px', fontSize: '16px' }}>
              <span style={{ padding: '0 10px' }}>二级条目</span>
              <Button type="primary" size="small" onClick={() => setItem(2)}>
                添加
              </Button>
            </div>
            {/* 二级条目 表格 */}
            <Table
              size="small"
              bordered
              columns={columns}
              dataSource={subData}
              scroll={{ x: 'max-content' }}
              pagination={pagenation}
            />
          </Col>
        </Row>
陈前坚's avatar
陈前坚 committed
416 417
      </Spin>

陈前坚's avatar
陈前坚 committed
418 419 420 421 422 423 424 425
      {/* 添加 */}
      <Modal
        title={level === 1 ? '添加一级条目' : '添加二级条目'}
        visible={addVisible}
        onOk={() => {
          if (level === 1) {
            submitAdd('-1');
          } else {
陈前坚's avatar
陈前坚 committed
426
            submitAdd(selectID);
陈前坚's avatar
陈前坚 committed
427 428 429 430 431 432 433 434 435 436
          }
        }}
        onCancel={() => {
          setAddVisible(false);
        }}
        okText="确认"
        cancelText="取消"
      >
        <Form form={addForm} labelCol={{ span: 3 }}>
          <Form.Item
陈前坚's avatar
陈前坚 committed
437
            name="nodeName1"
陈前坚's avatar
陈前坚 committed
438 439 440 441 442 443 444 445 446 447
            label="名称"
            rules={[{ required: true, message: '不能为空' }]}
          >
            <Input placeholder="请输入名称" />
          </Form.Item>
          <Form.Item name="nodeValue" label="值">
            <Input placeholder="请输入值" />
          </Form.Item>
        </Form>
      </Modal>
陈前坚's avatar
陈前坚 committed
448 449 450 451 452 453 454 455 456 457 458 459 460
      {/* 修改 */}
      <Modal
        title={select.parentID === '-1' ? '修改一级条目' : '修改二级条目'}
        visible={editVisible}
        onOk={submitEdit}
        onCancel={() => {
          setEditVisible(false);
        }}
        okText="确认"
        cancelText="取消"
      >
        <Form form={editForm} labelCol={{ span: 3 }}>
          <Form.Item
陈前坚's avatar
陈前坚 committed
461
            name="nodeName1"
陈前坚's avatar
陈前坚 committed
462 463 464 465 466
            label="名称"
            rules={[{ required: true, message: '不能为空' }]}
          >
            <Input placeholder="请输入名称" />
          </Form.Item>
陈前坚's avatar
陈前坚 committed
467 468 469
          <Form.Item name="nodeValue" label="值">
            <Input placeholder="请输入值" />
          </Form.Item>
陈前坚's avatar
陈前坚 committed
470 471 472 473 474 475 476
        </Form>
      </Modal>
    </div>
  );
};

export default WebDic;