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 React, { useState, useEffect } from 'react';
          import { Form, Modal, Input, Select, Checkbox, notification, Card } from 'antd'; import { Form, Modal, Input, Select, Checkbox, notification, Card } from 'antd';
          import { import { loadTableFields, addTables, addFields } from '@/services/platform/bs';
          loadTableFields, addTables, addFields import styles from './index.less';
          } from '@/services/platform/bs'
          import styles from './index.less'
          const CheckboxGroup = Checkbox.Group; const CheckboxGroup = Checkbox.Group;
          import qs from 'qs'; import qs from 'qs';
          const { Option } = Select; const { Option } = Select;
          const AddModal = props => { const AddModal = props => {
          const { callBackSubmit = () => { }, type, visible, tableList, formObj } = props; const { callBackSubmit = () => {}, type, visible, tableList, formObj } = props;
          const [loading, setLoading] = useState(false); const [loading, setLoading] = useState(false);
          const [form] = Form.useForm(); const [form] = Form.useForm();
          const { Item } = Form; const { Item } = Form;
          const [plainOptions, setPlainOptions] = useState([]);//复选框所有内容 const [plainOptions, setPlainOptions] = useState([]); //复选框所有内容
          const [checkedList, setCheckedList] = useState([]);//选中的复选框内容 const [checkedList, setCheckedList] = useState([]); //选中的复选框内容
          const [indeterminate, setIndeterminate] = useState(true); const [indeterminate, setIndeterminate] = useState(true);
          const [checkAll, setCheckAll] = useState(false); 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 => { const onCheckAllChange = e => {
          setCheckedList(list); setCheckedList(e.target.checked ? plainOptions : []);
          setIndeterminate(!!list.length && list.length < plainOptions.length); setIndeterminate(false);
          setCheckAll(list.length === plainOptions.length); setCheckAll(e.target.checked);
          }; };
          // 提交
          const onCheckAllChange = e => { const onSubmit = () => {
          setCheckedList(e.target.checked ? plainOptions : []); let fieldNames = [];
          setIndeterminate(false); (checkedList || []).map(item => {
          setCheckAll(e.target.checked); fieldNames.push({ fieldNames: item });
          }; });
          // 提交 form.validateFields().then(validate => {
          const onSubmit = () => { if (validate) {
          let fieldNames = []; let obj = form.getFieldsValue();
          (checkedList || []).map(item => { setLoading(true);
          fieldNames.push({ fieldNames: item }) let data = {},
          }) url = JSON.stringify(formObj) == '{}' ? addTables : addFields;
          form.validateFields().then(validate => { if (JSON.stringify(formObj) == '{}') {
          if (validate) { data = {
          let obj = form.getFieldsValue(); tableName: obj.tableName,
          setLoading(true); alias: obj.tableAlias || '',
          let data = {}, url = JSON.stringify(formObj) == '{}' ? addTables : addFields fieldNames: checkedList.join(','),
          if (JSON.stringify(formObj) == '{}') { };
          data = { tableName: obj.tableName, alias: obj.tableAlias || '', fieldNames: checkedList.join(',') } } else {
          } data = { tableName: formObj.tableName, 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)
          } }
          url(data)
          }, [visible]); .then(res => {
          setLoading(false);
          const renderField = (name) => { if (res.msg === 'Ok' || res.msg === '') {
          loadTableFields({ tableName: name }).then(response => { form.resetFields();
          if (response.data.root.length) { callBackSubmit();
          let arr = [], newArr = [] notification.success({
          response.data.root.map(item => { message: '提示',
          newArr.push(item.fieldName) duration: 3,
          if (item.isCheck) { description: JSON.stringify(formObj) == '{}' ? '新增成功' : '表字段新增成功',
          arr.push(item.fieldName) });
          } } else {
          }) notification.error({
          setCheckAll(false) message: '提示',
          setPlainOptions(newArr) duration: 3,
          setCheckedList(arr) description: res.msg,
          });
          } }
          }) })
          } .catch(err => {
          const layout = { notification.error({
          layout: 'horizontal', message: '提示',
          labelCol: { duration: 3,
          span: 4, description: '新增失败',
          }, });
          wrapperCol: { setLoading(false);
          span: 18, });
          }, }
          }; });
          };
          const handleChange = (value) => { useEffect(() => {
          renderField(value) 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 ( const renderField = name => {
          <Modal loadTableFields({ tableName: name }).then(response => {
          title={JSON.stringify(formObj) == '{}' ? '附加表' : '附加字段'} if (response.data.root.length) {
          bodyStyle={{ width: '100%', minHeight: '200px' }} // eslint-disable-next-line one-var
          style={{ top: '150px' }} let arr = [],
          width="700px" newArr = [];
          destroyOnClose response.data.root.map(item => {
          maskClosable={false} newArr.push(item.fieldName);
          cancelText="取消" if (item.isCheck) {
          okText="确认" arr.push(item.fieldName);
          {...props} }
          onOk={() => onSubmit()} });
          confirmLoading={loading} setCheckAll(arr.length === newArr.length);
          forceRender={true} setIndeterminate(!!arr.length && arr.length < newArr.length);
          getContainer={false} setPlainOptions(newArr);
          > setCheckedList(arr);
          {visible && ( } else {
          <Form form={form} {...layout} > setCheckAll(false);
          {JSON.stringify(formObj) == '{}' ? <><Item setIndeterminate(false);
          label="表名" }
          name="tableName" });
          rules={[{ required: true, message: '请选择表名' }]} };
          > const layout = {
          <Select onChange={handleChange}> layout: 'horizontal',
          {tableList.length ? tableList.map((item, index) => { return <Select.Option key={index} value={item.text}>{item.text}</Select.Option>; }) : ''} labelCol: {
          </Select> span: 4,
          </Item> },
          <Item wrapperCol: {
          label="别名" span: 18,
          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> const handleChange = value => {
          </div> renderField(value);
          };
          </Form> return (
          )} <Modal
          </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; 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