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 { Form, Modal, Input, Select, Checkbox, Divider, notification, Row } from 'antd';
          import {
          createTable, loadTableFields, addFields
          } from '@/services/tablemanager/tablemanager'
          import { createTable, loadTableFields, addFields } from '@/services/tablemanager/tablemanager';
          import styles from './index.less'
          import styles from './index.less';
          const { Option } = Select;
          const CheckboxGroup = Checkbox.Group;
          const editor = props => {
          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('');//附加表名称
          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(''); // 附加表名称
          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 onCheckAllChange = e => {
          setCheckedList(e.target.checked ? plainOptions : []);
          setIndeterminate(false);
          setCheckAll(e.target.checked);
          };
          // 提交
          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)
          }
          })
          setPlainOptions(newArr)
          setCheckedList(arr)
          }
          setIsModalVisible(true)
          })
          } else {
          form.resetFields();
          callBackSubmit();
          notification.error({
          message: '提示',
          duration: 3,
          description: res.msg,
          });
          // 提交
          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);
          }
          }).catch(err => {
          console.log('err', err);
          notification.error({
          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,
          });
          });
          setPlainOptions(newArr);
          setCheckedList(arr);
          }
          }).catch(err => {
          console.log('err', err);
          })
          }
          else {
          notification.success({
          setIsModalVisible(true);
          });
          } else {
          form.resetFields();
          callBackSubmit();
          notification.error({
          message: '提示',
          duration: 1,
          description: '表名称没添加',
          duration: 3,
          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 = () => {
          setIsModalVisible(false)
          }, [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: '表名称没添加',
          });
          }
          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 = ' 事件表默认创建如下字段：事件编号、事件状态、事件名称、上报站点、处理站点、上报人名称、上报人部分、上报时间、现场图片、现场录音、坐标位置、更新时间、更新状态、是否置顶';
          }
          setReminder(str)
          };
          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 =
          ' 事件表默认创建如下字段：事件编号、事件状态、事件名称、上报站点、处理站点、上报人名称、上报人部分、上报时间、现场图片、现场录音、坐标位置、更新时间、更新状态、是否置顶';
          }
          const layout = {
          layout: 'horizontal',
          labelCol: {
          span: 4,
          },
          wrapperCol: {
          span: 16,
          },
          };
          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>
          setReminder(str);
          };
          const layout = {
          layout: 'horizontal',
          labelCol: {
          span: 4,
          },
          wrapperCol: {
          span: 19,
          },
          };
          </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;
          src/pages/bsmanager/base/tablemanager/components/Field/affiliateAdd.jsx
          View file @ 29a0ec69
          ......@@ -11,8 +11,8 @@ const AddModal = props => {
          const [loading, setLoading] = useState(false);
          const [form] = Form.useForm();
          const { Item } = Form;
          const [plainOptions, setPlainOptions] = useState([]); //复选框所有内容
          const [checkedList, setCheckedList] = useState([]); //选中的复选框内容
          const [plainOptions, setPlainOptions] = useState([]); // 复选框所有内容
          const [checkedList, setCheckedList] = useState([]); // 选中的复选框内容
          const [indeterminate, setIndeterminate] = useState(true);
          const [checkAll, setCheckAll] = useState(false);
          ......@@ -115,10 +115,10 @@ const AddModal = props => {
          const layout = {
          layout: 'horizontal',
          labelCol: {
          span: 4,
          span: 3,
          },
          wrapperCol: {
          span: 18,
          span: 20,
          },
          };
          ......
          src/pages/bsmanager/base/tablemanager/components/Field/editor.jsx
          View file @ 29a0ec69
          ......@@ -49,10 +49,7 @@ const AddModal = props => {
          if (res.data.root && res.data.root.length) {
          form.setFieldsValue({
          ...res.data.root[0],
          tableStyle:
          res.data.root[0].tableStyle === ''
          ? '大'
          : res.data.root[0].tableStyle,
          tableStyle: res.data.root[0].tableStyle === '' ? '大' : res.data.root[0].tableStyle,
          });
          setTableID(res.data.root[0].tableID);
          }
          ......@@ -67,10 +64,10 @@ const AddModal = props => {
          const layout = {
          layout: 'horizontal',
          labelCol: {
          span: 4,
          span: 3,
          },
          wrapperCol: {
          span: 17,
          span: 20,
          },
          };
          ......@@ -82,7 +79,7 @@ const AddModal = props => {
          width="700px"
          destroyOnClose
          maskClosable={false}
          centered ={true}
          centered={true}
          cancelText="取消"
          okText="确认"
          {...props}
          ......@@ -93,21 +90,13 @@ const AddModal = props => {
          >
          {visible && (
          <Form form={form} {...layout}>
          <Item
          label="表名"
          name="tableName"
          rules={[{ required: true, message: '请输入表名' }]}
          >
          <Item label="表名" name="tableName" rules={[{ required: true, message: '请输入表名' }]}>
          <Input placeholder="请输入表名" allowClear />
          </Item>
          <Item label="别名" name="tableAlias">
          <Input placeholder="请输入别名" allowClear />
          </Item>
          <Item
          label="样式"
          name="tableStyle"
          rules={[{ required: true, message: '请选择样式' }]}
          >
          <Item label="样式" name="tableStyle" rules={[{ required: true, message: '请选择样式' }]}>
          <Radio.Group>
          <Radio value="大">大(3)</Radio>
          <Radio value="中">中(4)</Radio>
          ......
          src/pages/bsmanager/base/tablemanager/components/Field/index.less
          View file @ 29a0ec69
          .field{
          width:100%;
          display: flex;
          justify-content: flex-start;
          flex-wrap: wrap;
          max-height: 20rem;
          .field {
          width: 100%;
          display: flex;
          justify-content: flex-start;
          flex-wrap: wrap;
          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;
          .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{
          font-weight: bold;
          font-size: 18px;
          margin: 0 0 0.5rem 4rem;
          .paneTitle {
          font-weight: bold;
          font-size: 18px;
          margin: 0 0 0.5rem 38px;
          }
          .listEvent{
          display: flex;
          .listEvent {
          display: flex;
          }
          .cardList{
          .ant-card-body{
          overflow-y:none !important;
          }
          .cardList {
          .ant-card-body {
          overflow-y: none !important;
          }
          }
          .unit{
          display: flex;
          margin-left: 1.1rem;
          align-items: center;
          .unit {
          display: flex;
          margin-left: 1.1rem;
          align-items: center;
          }
          .listCard{
          display: flex;
          .cardItem{
          width: 50%;
          padding: 0.5rem;
          }
          .cardContent{
          height:35rem;
          overflow-y: scroll;
          width: 22rem;
          }
          .cardItemData{
          padding: 1rem;
          border: 1px solid #b5b8c8;
          margin-bottom: 1rem;
          }
          .listCard {
          display: flex;
          .cardItem {
          width: 50%;
          padding: 0.5rem;
          }
          .cardContent {
          height: 35rem;
          overflow-y: scroll;
          width: 22rem;
          }
          .cardItemData {
          padding: 1rem;
          border: 1px solid #b5b8c8;
          margin-bottom: 1rem;
          }
          }
          .sortable-ghost {
          border-bottom: 2px dashed #1890ff;
          }
          .doctorTable {
          margin-bottom: 16px;
          table {
          width: 100%;
          td {
          padding: 6px;
          border: 1px solid #e8e8e8;
          border-bottom: 2px dashed #1890ff;
          }
          .doctorTable {
          margin-bottom: 16px;
          table {
          width: 100%;
          td {
          padding: 6px;
          border: 1px solid #e8e8e8;
          }
          thead {
          tr {
          font-weight: 600;
          background: #fafafa;
          }
          thead {
          tr {
          font-weight: 600;
          background: #FAFAFA;
          }
          td{
          width: 12rem;
          }
          td {
          width: 12rem;
          }
          tbody{
          tr:hover{
          background-color:#ededed ;
          }
          }
          tbody {
          tr:hover {
          background-color: #ededed;
          }
          }
          }
          .defaultTile{
          background-color:transparent ;
          }
          .activeTile{
          background-color:#dfe8f6 ;
          }
          .defaultTile {
          background-color: transparent;
          }
          .activeTile {
          background-color: #dfe8f6;
          }
          tr.drop-over-downward td {
          border-bottom: 2px dashed #1890ff;
          }
          tr.drop-over-upward td {
          border-top: 2px dashed #1890ff;
          }
          .clickRowStyle{
          background: #cfe7fd;
          }
          \ No newline at end of file
          tr.drop-over-downward td {
          border-bottom: 2px dashed #1890ff;
          }
          tr.drop-over-upward td {
          border-top: 2px dashed #1890ff;
          }
          .clickRowStyle {
          background: #cfe7fd;
          }
          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