Skip to content

C
CivManage
Commit 4ebbd5bb authored by 皮倩雯's avatar 皮倩雯
Browse files
Options

解决表字段附加表全选回显错误问题，新增表搜索功能

parent 5c5f61a0
Pipeline #42337 passed with stages
          in 6 minutes 56 seconds
          Hide whitespace changes
          Inline Side-by-side
          Showing with 180 additions and 155 deletions
          src/pages/platformCenter/bsmanager/tablemanager/components/Field/affiliateAdd.jsx
          View file @ 4ebbd5bb
          import React, { useState, useEffect } from 'react';
          import { Form, Modal, Input, Select, Checkbox, notification, Card } from 'antd';
          import {
          loadTableFields, addTables, addFields
          } from '@/services/platform/bs'
          import styles from './index.less'
          import { loadTableFields, addTables, addFields } from '@/services/platform/bs';
          import styles from './index.less';
          const CheckboxGroup = Checkbox.Group;
          import qs from 'qs';
          const { Option } = Select;
          const AddModal = props => {
          const { callBackSubmit = () => { }, type, visible, tableList, formObj } = props;
          const [loading, setLoading] = useState(false);
          const [form] = Form.useForm();
          const { Item } = Form;
          const [plainOptions, setPlainOptions] = useState([]);//复选框所有内容
          const [checkedList, setCheckedList] = useState([]);//选中的复选框内容
          const [indeterminate, setIndeterminate] = useState(true);
          const [checkAll, setCheckAll] = useState(false);
          const { callBackSubmit = () => {}, type, visible, tableList, formObj } = props;
          const [loading, setLoading] = useState(false);
          const [form] = Form.useForm();
          const { Item } = Form;
          const [plainOptions, setPlainOptions] = useState([]); //复选框所有内容
          const [checkedList, setCheckedList] = useState([]); //选中的复选框内容
          const [indeterminate, setIndeterminate] = useState(true);
          const [checkAll, setCheckAll] = useState(false);
          const onChange = list => {
          setCheckedList(list);
          setIndeterminate(!!list.length && list.length < plainOptions.length);
          setCheckAll(list.length === plainOptions.length);
          };
          const onChange = list => {
          setCheckedList(list);
          setIndeterminate(!!list.length && list.length < plainOptions.length);
          setCheckAll(list.length === plainOptions.length);
          };
          const onCheckAllChange = e => {
          setCheckedList(e.target.checked ? plainOptions : []);
          setIndeterminate(false);
          setCheckAll(e.target.checked);
          };
          // 提交
          const onSubmit = () => {
          let fieldNames = [];
          (checkedList || []).map(item => {
          fieldNames.push({ fieldNames: item })
          })
          form.validateFields().then(validate => {
          if (validate) {
          let obj = form.getFieldsValue();
          setLoading(true);
          let data = {}, url = JSON.stringify(formObj) == '{}' ? addTables : addFields
          if (JSON.stringify(formObj) == '{}') {
          data = { tableName: obj.tableName, alias: obj.tableAlias || '', fieldNames: checkedList.join(',') }
          }
          else {
          data = { tableName: formObj.tableName, fieldNames: checkedList.join(',') }
          }
          url(data).then(res => {
          setLoading(false);
          if (res.msg === "Ok" || res.msg === "") {
          form.resetFields();
          callBackSubmit();
          notification.success({
          message: '提示',
          duration: 3,
          description: JSON.stringify(formObj) == '{}' ? '新增成功' : '表字段新增成功',
          });
          } else {
          notification.error({
          message: '提示',
          duration: 3,
          description: res.msg,
          });
          }
          })
          .catch(err => {
          notification.error({
          message: '提示',
          duration: 3,
          description: '新增失败',
          });
          setLoading(false);
          });
          }
          });
          };
          useEffect(() => {
          if (type != '' && JSON.stringify(formObj) == '{}') {
          renderField(tableList[0].text)
          form.setFieldsValue({
          tableName: tableList[0].text
          })
          } else if (type != '' && JSON.stringify(formObj) != '{}') {
          renderField(formObj.tableName)
          const onCheckAllChange = e => {
          setCheckedList(e.target.checked ? plainOptions : []);
          setIndeterminate(false);
          setCheckAll(e.target.checked);
          };
          // 提交
          const onSubmit = () => {
          let fieldNames = [];
          (checkedList || []).map(item => {
          fieldNames.push({ fieldNames: item });
          });
          form.validateFields().then(validate => {
          if (validate) {
          let obj = form.getFieldsValue();
          setLoading(true);
          let data = {},
          url = JSON.stringify(formObj) == '{}' ? addTables : addFields;
          if (JSON.stringify(formObj) == '{}') {
          data = {
          tableName: obj.tableName,
          alias: obj.tableAlias || '',
          fieldNames: checkedList.join(','),
          };
          } else {
          data = { tableName: formObj.tableName, fieldNames: checkedList.join(',') };
          }
          }, [visible]);
          const renderField = (name) => {
          loadTableFields({ tableName: 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)
          }
          })
          setCheckAll(false)
          setPlainOptions(newArr)
          setCheckedList(arr)
          url(data)
          .then(res => {
          setLoading(false);
          if (res.msg === 'Ok' || res.msg === '') {
          form.resetFields();
          callBackSubmit();
          notification.success({
          message: '提示',
          duration: 3,
          description: JSON.stringify(formObj) == '{}' ? '新增成功' : '表字段新增成功',
          });
          } else {
          notification.error({
          message: '提示',
          duration: 3,
          description: res.msg,
          });
          }
          })
          }
          const layout = {
          layout: 'horizontal',
          labelCol: {
          span: 4,
          },
          wrapperCol: {
          span: 18,
          },
          };
          })
          .catch(err => {
          notification.error({
          message: '提示',
          duration: 3,
          description: '新增失败',
          });
          setLoading(false);
          });
          }
          });
          };
          const handleChange = (value) => {
          renderField(value)
          useEffect(() => {
          if (type != '' && JSON.stringify(formObj) == '{}') {
          renderField(tableList[0].text);
          form.setFieldsValue({
          tableName: tableList[0].text,
          });
          } else if (type != '' && JSON.stringify(formObj) != '{}') {
          renderField(formObj.tableName);
          }
          }, [visible]);
          return (
          <Modal
          title={JSON.stringify(formObj) == '{}' ? '附加表' : '附加字段'}
          bodyStyle={{ width: '100%', minHeight: '200px' }}
          style={{ top: '150px' }}
          width="700px"
          destroyOnClose
          maskClosable={false}
          cancelText="取消"
          okText="确认"
          {...props}
          onOk={() => onSubmit()}
          confirmLoading={loading}
          forceRender={true}
          getContainer={false}
          >
          {visible && (
          <Form form={form} {...layout} >
          {JSON.stringify(formObj) == '{}' ? <><Item
          label="表名"
          name="tableName"
          rules={[{ required: true, message: '请选择表名' }]}
          >
          <Select onChange={handleChange}>
          {tableList.length ? tableList.map((item, index) => { return <Select.Option key={index} value={item.text}>{item.text}</Select.Option>; }) : ''}
          </Select>
          </Item>
          <Item
          label="别名"
          name="tableAlias"
          >
          <Input allowClear />
          </Item></> : <div className={styles.paneTitle}>{formObj.tableName}</div>}
          <div className={styles.field}>
          <Card title="字段名" extra={<Checkbox indeterminate={indeterminate} onChange={onCheckAllChange} checked={checkAll}> </Checkbox>} >
          {
          plainOptions.length ? <CheckboxGroup options={plainOptions} value={checkedList} onChange={onChange} /> : ''
          }
          const renderField = name => {
          loadTableFields({ tableName: name }).then(response => {
          if (response.data.root.length) {
          // eslint-disable-next-line one-var
          let arr = [],
          newArr = [];
          response.data.root.map(item => {
          newArr.push(item.fieldName);
          if (item.isCheck) {
          arr.push(item.fieldName);
          }
          });
          setCheckAll(arr.length === newArr.length);
          setIndeterminate(!!arr.length && arr.length < newArr.length);
          setPlainOptions(newArr);
          setCheckedList(arr);
          } else {
          setCheckAll(false);
          setIndeterminate(false);
          }
          });
          };
          const layout = {
          layout: 'horizontal',
          labelCol: {
          span: 4,
          },
          wrapperCol: {
          span: 18,
          },
          };
          </Card>
          </div>
          const handleChange = value => {
          renderField(value);
          };
          </Form>
          )}
          </Modal>
          );
          return (
          <Modal
          title={JSON.stringify(formObj) == '{}' ? '附加表' : '附加字段'}
          bodyStyle={{ width: '100%', minHeight: '200px' }}
          style={{ top: '150px' }}
          width="700px"
          destroyOnClose
          maskClosable={false}
          cancelText="取消"
          okText="确认"
          {...props}
          onOk={() => onSubmit()}
          confirmLoading={loading}
          forceRender={true}
          getContainer={false}
          >
          {visible && (
          <Form form={form} {...layout} style={{ marginBottom: '30px' }}>
          {JSON.stringify(formObj) == '{}' ? (
          <>
          <Item
          label="表名"
          name="tableName"
          rules={[{ required: true, message: '请选择表名' }]}
          >
          <Select onChange={handleChange} showSearch>
          {tableList.length
          ? tableList.map((item, index) => {
          return (
          <Select.Option key={index} value={item.text}>
          {item.text}
          </Select.Option>
          );
          })
          : ''}
          </Select>
          </Item>
          <Item label="别名" name="tableAlias">
          <Input allowClear />
          </Item>
          </>
          ) : (
          <div className={styles.paneTitle}>{formObj.tableName}</div>
          )}
          <div className={styles.field}>
          <Card
          title="字段名"
          extra={
          <Checkbox
          indeterminate={indeterminate}
          onChange={onCheckAllChange}
          checked={checkAll}
          >
          {' '}
          </Checkbox>
          }
          >
          {plainOptions.length ? (
          <CheckboxGroup options={plainOptions} value={checkedList} onChange={onChange} />
          ) : (
          ''
          )}
          </Card>
          </div>
          </Form>
          )}
          </Modal>
          );
          };
          export default AddModal;
          Markdown is supported
          0% or
          You are about to add 0 people to the discussion. Proceed with caution.
          Finish editing this message first!
          Please register or to comment