Skip to content

C
CivManage
Commit 29a0ec69 authored by 皮倩雯's avatar 皮倩雯
Browse files
Options

fix: '优化表字段有空白的模态'

parent da9f7d5f
Pipeline #43623 skipped with stages
          Hide whitespace changes
          Inline Side-by-side
          Showing with 321 additions and 341 deletions
          src/pages/bsmanager/base/tablemanager/components/Field/addTable.jsx
          View file @ 29a0ec69
          import React, { useState, useEffect } from 'react'; import React, { useState, useEffect } from 'react';
          import { Form, Modal, Input, Select, Checkbox, Divider, notification, Row } from 'antd'; import { Form, Modal, Input, Select, Checkbox, Divider, notification, Row } from 'antd';
          import { import { createTable, loadTableFields, addFields } from '@/services/tablemanager/tablemanager';
          createTable, loadTableFields, addFields
          } from '@/services/tablemanager/tablemanager'
          import styles from './index.less' import styles from './index.less';
          const { Option } = Select; const { Option } = Select;
          const CheckboxGroup = Checkbox.Group; const CheckboxGroup = Checkbox.Group;
          const editor = props => { const editor = props => {
          const { callBackSubmit = () => { }, type, visible } = props; const { callBackSubmit = () => {}, type, visible } = props;
          const [reminder, setReminder] = useState(' 事件表会默认创建如下字段：事件编号、事件状态、事件名称上报站点、处理站点、上报人名称、上报人部分、上报时间、现场图片、现场录音、坐标位置、更新时间、更新状态、是否置顶') const [reminder, setReminder] = useState(
          const [loading, setLoading] = useState(false); ' 事件表会默认创建如下字段：事件编号、事件状态、事件名称上报站点、处理站点、上报人名称、上报人部分、上报时间、现场图片、现场录音、坐标位置、更新时间、更新状态、是否置顶',
          const [isModalVisible, setIsModalVisible] = useState(false); );
          const [form] = Form.useForm(); const [loading, setLoading] = useState(false);
          const { Item } = Form; const [isModalVisible, setIsModalVisible] = useState(false);
          const [checkedList, setCheckedList] = useState([]);//选中的复选框内容 const [form] = Form.useForm();
          const [plainOptions, setPlainOptions] = useState([]);//复选框所有内容 const { Item } = Form;
          const [indeterminate, setIndeterminate] = useState(true); const [checkedList, setCheckedList] = useState([]); // 选中的复选框内容
          const [isVisible, setIsVisible] = useState(true); const [plainOptions, setPlainOptions] = useState([]); // 复选框所有内容
          const [checkAll, setCheckAll] = useState(false); const [indeterminate, setIndeterminate] = useState(true);
          const [chartName, setChartName] = useState('');//附加表名称 const [isVisible, setIsVisible] = useState(true);
          const [checkAll, setCheckAll] = useState(false);
          const [chartName, setChartName] = useState(''); // 附加表名称
          const onChange = list => { const onChange = list => {
          setCheckedList(list); setCheckedList(list);
          setIndeterminate(!!list.length && list.length < plainOptions.length); setIndeterminate(!!list.length && list.length < plainOptions.length);
          setCheckAll(list.length === plainOptions.length); setCheckAll(list.length === plainOptions.length);
          }; };
          const onCheckAllChange = e => { const onCheckAllChange = e => {
          setCheckedList(e.target.checked ? plainOptions : []); setCheckedList(e.target.checked ? plainOptions : []);
          setIndeterminate(false); setIndeterminate(false);
          setCheckAll(e.target.checked); setCheckAll(e.target.checked);
          }; };
          // 提交 // 提交
          const onSubmit = () => { const onSubmit = () => {
          form.validateFields().then(validate => { form.validateFields().then(validate => {
          if (validate) { if (validate) {
          setLoading(true); setLoading(true);
          let obj = form.getFieldsValue(); let obj = form.getFieldsValue();
          obj.tableName = obj.tableType.substr(0, obj.tableType.length - 1) + '_' + obj.tableName; obj.tableName = obj.tableType.substr(0, obj.tableType.length - 1) + '_' + obj.tableName;
          createTable({ createTable({
          ...obj ...obj,
          }).then(res => { })
          setLoading(false); .then(res => {
          if (res.msg === "Ok") { setLoading(false);
          notification.success({ if (res.msg === 'Ok') {
          message: '提示', notification.success({
          duration: 1, message: '提示',
          description: '建表成功', duration: 1,
          }); description: '建表成功',
          setIsVisible(false) });
          setChartName(res.data.tableInfo.Name) setIsVisible(false);
          loadTableFields({ tableName: res.data.tableInfo.Name }).then(response => { setChartName(res.data.tableInfo.Name);
          if (response.data.root.length) { loadTableFields({ tableName: res.data.tableInfo.Name }).then(response => {
          let arr = [], newArr = [] if (response.data.root.length) {
          response.data.root.map(item => { let arr = [],
          newArr.push(item.fieldName) newArr = [];
          if (item.isCheck) { response.data.root.map(item => {
          arr.push(item.fieldName) newArr.push(item.fieldName);
          } if (item.isCheck) {
          }) arr.push(item.fieldName);
          setPlainOptions(newArr)
          setCheckedList(arr)
          }
          setIsModalVisible(true)
          })
          } else {
          form.resetFields();
          callBackSubmit();
          notification.error({
          message: '提示',
          duration: 3,
          description: res.msg,
          });
          } }
          }).catch(err => { });
          console.log('err', err); setPlainOptions(newArr);
          notification.error({ setCheckedList(arr);
          message: '提示',
          duration: 3,
          description: '新增失败',
          });
          setLoading(false);
          });
          }
          });
          };
          useEffect(() => {
          if (type != '') {
          form.setFieldsValue({ tableType: '事件表' });
          }
          }, [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 => { setIsModalVisible(true);
          console.log('err', err); });
          }) } else {
          } form.resetFields();
          else { callBackSubmit();
          notification.success({ notification.error({
          message: '提示', message: '提示',
          duration: 1, duration: 3,
          description: '表名称没添加', description: res.msg,
          });
          }
          })
          .catch(err => {
          console.log('err', err);
          notification.error({
          message: '提示',
          duration: 3,
          description: '新增失败',
          }); });
          } setLoading(false);
          });
          }
          });
          };
          useEffect(() => {
          if (type != '') {
          form.setFieldsValue({ tableType: '事件表' });
          } }
          const handleCancel = () => { }, [visible]);
          setIsModalVisible(false) 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: '表名称没添加',
          });
          } }
          const changeChart = (value) => { };
          let str = '' const handleCancel = () => {
          switch (value) { setIsModalVisible(false);
          case '事件表': };
          str = ' 事件表默认创建如下字段：事件编号、事件状态、事件名称、上报站点、处理站点、上报人名称、上报人部分、上报时间、现场图片、现场录音、坐标位置、更新时间、更新状态、是否置顶'; const changeChart = value => {
          break; let str = '';
          case '工单表': switch (value) {
          str = '工单表默认创建如下字段：工单编号'; case '事件表':
          break; str =
          case '台账表': ' 事件表默认创建如下字段：事件编号、事件状态、事件名称、上报站点、处理站点、上报人名称、上报人部分、上报时间、现场图片、现场录音、坐标位置、更新时间、更新状态、是否置顶';
          str = '台账表默认创建如下字段：所属站点、录入时间、是否删除'; break;
          break; case '工单表':
          case '设备表': str = '工单表默认创建如下字段：工单编号';
          str = '设备表默认创建如下字段：编码、父设备编码、GIS编号、设备名称、所属站点、坐标位置、风貌图、视频缩略图、第三方编码、录入时间、是否删除'; break;
          break; case '台账表':
          case '反馈表': str = '台账表默认创建如下字段：所属站点、录入时间、是否删除';
          str ='反馈表默认创建如下字段：编码、设备编码、录入时间、是否删除'; break;
          break; case '设备表':
          default : str =
          str = ' 事件表默认创建如下字段：事件编号、事件状态、事件名称、上报站点、处理站点、上报人名称、上报人部分、上报时间、现场图片、现场录音、坐标位置、更新时间、更新状态、是否置顶'; '设备表默认创建如下字段：编码、父设备编码、GIS编号、设备名称、所属站点、坐标位置、风貌图、视频缩略图、第三方编码、录入时间、是否删除';
          } break;
          setReminder(str) case '反馈表':
          str = '反馈表默认创建如下字段：编码、设备编码、录入时间、是否删除';
          break;
          default:
          str =
          ' 事件表默认创建如下字段：事件编号、事件状态、事件名称、上报站点、处理站点、上报人名称、上报人部分、上报时间、现场图片、现场录音、坐标位置、更新时间、更新状态、是否置顶';
          } }
          const layout = { setReminder(str);
          layout: 'horizontal', };
          labelCol: { const layout = {
          span: 4, layout: 'horizontal',
          }, labelCol: {
          wrapperCol: { span: 4,
          span: 16, },
          }, wrapperCol: {
          }; span: 19,
          },
          };
          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> 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>
          </>
          );
          }; };
          export default editor; export default editor;
          src/pages/bsmanager/base/tablemanager/components/Field/affiliateAdd.jsx
          View file @ 29a0ec69
          ...@@ -11,8 +11,8 @@ const AddModal = props => { ...@@ -11,8 +11,8 @@ const AddModal = 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);
          ...@@ -115,10 +115,10 @@ const AddModal = props => { ...@@ -115,10 +115,10 @@ const AddModal = props => {
          const layout = { const layout = {
          layout: 'horizontal', layout: 'horizontal',
          labelCol: { labelCol: {
          span: 4, span: 3,
          }, },
          wrapperCol: { wrapperCol: {
          span: 18, span: 20,
          }, },
          }; };
          ......
          src/pages/bsmanager/base/tablemanager/components/Field/editor.jsx
          View file @ 29a0ec69
          ...@@ -49,10 +49,7 @@ const AddModal = props => { ...@@ -49,10 +49,7 @@ const AddModal = props => {
          if (res.data.root && res.data.root.length) { if (res.data.root && res.data.root.length) {
          form.setFieldsValue({ form.setFieldsValue({
          ...res.data.root[0], ...res.data.root[0],
          tableStyle: tableStyle: res.data.root[0].tableStyle === '' ? '大' : res.data.root[0].tableStyle,
          res.data.root[0].tableStyle === ''
          ? '大'
          : res.data.root[0].tableStyle,
          }); });
          setTableID(res.data.root[0].tableID); setTableID(res.data.root[0].tableID);
          } }
          ...@@ -67,10 +64,10 @@ const AddModal = props => { ...@@ -67,10 +64,10 @@ const AddModal = props => {
          const layout = { const layout = {
          layout: 'horizontal', layout: 'horizontal',
          labelCol: { labelCol: {
          span: 4, span: 3,
          }, },
          wrapperCol: { wrapperCol: {
          span: 17, span: 20,
          }, },
          }; };
          ...@@ -82,7 +79,7 @@ const AddModal = props => { ...@@ -82,7 +79,7 @@ const AddModal = props => {
          width="700px" width="700px"
          destroyOnClose destroyOnClose
          maskClosable={false} maskClosable={false}
          centered ={true} centered={true}
          cancelText="取消" cancelText="取消"
          okText="确认" okText="确认"
          {...props} {...props}
          ...@@ -93,21 +90,13 @@ const AddModal = props => { ...@@ -93,21 +90,13 @@ const AddModal = props => {
          > >
          {visible && ( {visible && (
          <Form form={form} {...layout}> <Form form={form} {...layout}>
          <Item <Item label="表名" name="tableName" rules={[{ required: true, message: '请输入表名' }]}>
          label="表名"
          name="tableName"
          rules={[{ required: true, message: '请输入表名' }]}
          >
          <Input placeholder="请输入表名" allowClear /> <Input placeholder="请输入表名" allowClear />
          </Item> </Item>
          <Item label="别名" name="tableAlias"> <Item label="别名" name="tableAlias">
          <Input placeholder="请输入别名" allowClear /> <Input placeholder="请输入别名" allowClear />
          </Item> </Item>
          <Item <Item label="样式" name="tableStyle" rules={[{ required: true, message: '请选择样式' }]}>
          label="样式"
          name="tableStyle"
          rules={[{ required: true, message: '请选择样式' }]}
          >
          <Radio.Group> <Radio.Group>
          <Radio value="大">大(3)</Radio> <Radio value="大">大(3)</Radio>
          <Radio value="中">中(4)</Radio> <Radio value="中">中(4)</Radio>
          ......
          src/pages/bsmanager/base/tablemanager/components/Field/index.less
          View file @ 29a0ec69
          .field{ .field {
          width:100%; width: 100%;
          display: flex; display: flex;
          justify-content: flex-start; justify-content: flex-start;
          flex-wrap: wrap; flex-wrap: wrap;
          max-height: 20rem; max-height: 20rem;
          overflow-y: scroll;
          .ant-card {
          width: 90.5%;
          margin-left: 40px;
          }
          .ant-card-head-title {
          flex: none;
          }
          .ant-card-extra {
          margin-left: 0.2rem;
          }
          .ant-card-body {
          // padding: 0 ;
          height: 15rem;
          overflow-y: scroll; overflow-y: scroll;
          .ant-card{ }
          width: 83%;
          margin-left: 4rem;
          }
          .ant-card-head-title{
          flex: none;
          }
          .ant-card-extra{
          margin-left: 0.2rem;
          }
          .ant-card-body{
          // padding: 0 ;
          height: 15rem;
          overflow-y: scroll;
          }
          } }
          .paneTitle{ .paneTitle {
          font-weight: bold; font-weight: bold;
          font-size: 18px; font-size: 18px;
          margin: 0 0 0.5rem 4rem; margin: 0 0 0.5rem 38px;
          } }
          .listEvent{ .listEvent {
          display: flex; display: flex;
          } }
          .cardList{ .cardList {
          .ant-card-body{ .ant-card-body {
          overflow-y:none !important; overflow-y: none !important;
          } }
          } }
          .unit{ .unit {
          display: flex; display: flex;
          margin-left: 1.1rem; margin-left: 1.1rem;
          align-items: center; align-items: center;
          } }
          .listCard{ .listCard {
          display: flex; display: flex;
          .cardItem{ .cardItem {
          width: 50%; width: 50%;
          padding: 0.5rem; padding: 0.5rem;
          } }
          .cardContent{ .cardContent {
          height:35rem; height: 35rem;
          overflow-y: scroll; overflow-y: scroll;
          width: 22rem; width: 22rem;
          } }
          .cardItemData{ .cardItemData {
          padding: 1rem; padding: 1rem;
          border: 1px solid #b5b8c8; border: 1px solid #b5b8c8;
          margin-bottom: 1rem; margin-bottom: 1rem;
          } }
          } }
          .sortable-ghost { .sortable-ghost {
          border-bottom: 2px dashed #1890ff; border-bottom: 2px dashed #1890ff;
          } }
          .doctorTable { .doctorTable {
          margin-bottom: 16px; margin-bottom: 16px;
          table { table {
          width: 100%; width: 100%;
          td { td {
          padding: 6px; padding: 6px;
          border: 1px solid #e8e8e8; border: 1px solid #e8e8e8;
          }
          thead {
          tr {
          font-weight: 600;
          background: #fafafa;
          } }
          thead { td {
          tr { width: 12rem;
          font-weight: 600;
          background: #FAFAFA;
          }
          td{
          width: 12rem;
          }
          } }
          tbody{ }
          tr:hover{ tbody {
          background-color:#ededed ; tr:hover {
          } background-color: #ededed;
          } }
          } }
          } }
          .defaultTile{
          background-color:transparent ;
          } }
          .activeTile{ .defaultTile {
          background-color:#dfe8f6 ; background-color: transparent;
          } }
          .activeTile {
          background-color: #dfe8f6;
          }
          tr.drop-over-downward td { tr.drop-over-downward td {
          border-bottom: 2px dashed #1890ff; border-bottom: 2px dashed #1890ff;
          } }
          tr.drop-over-upward td { tr.drop-over-upward td {
          border-top: 2px dashed #1890ff; border-top: 2px dashed #1890ff;
          } }
          .clickRowStyle{ .clickRowStyle {
          background: #cfe7fd; background: #cfe7fd;
          } }
          \ No newline at end of file
          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