Skip to content

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

fix: '表单设计器'

parent 5b9c70fe
Pipeline #68178 passed with stages
          Show whitespace changes
          Inline Side-by-side
          Showing with 40 additions and 467 deletions
          package.json
          View file @ 29339114
          ......@@ -122,7 +122,7 @@
          "js-calendar-converter": "0.0.4",
          "lodash": "4.17.11",
          "minimist": "1.2.0",
          "panda-xform": "^2.1.1",
          "panda-xform": "^2.4.0",
          "parseForm": "^2.2.4",
          "prop-types": "15.7.2",
          "quill": "^1.3.7",
          ......
          src/pages/bsmanager/base/tablemanager/filedConfig/filedConfig.jsx
          View file @ 29339114
          ......@@ -32,6 +32,7 @@ import {
          loadUnattachedTables,
          LoadLedgers,
          } from '@/services/tablemanager/tablemanager';
          import { FormDesigner } from 'panda-xform';
          import { useHistory } from 'react-router-dom';
          import FieldEditor from './fieldEditor';
          import AffiliateAdd from '../components/Field/affiliateAdd';
          ......@@ -73,18 +74,6 @@ const AddModal = props => {
          const [perviewPrase, setPerViewPrase] = useState(false);
          const [tablesSchema, setTablesSchema] = useState(null); // 存储parseForm组件需要的数据格式
          const editor = record => {
          console.log(record);
          if (!record.children) {
          setIsType('edit');
          setIsVisible(true);
          setItemData(record);
          }
          };
          const Submit = prop => {
          setIsVisible(false);
          setFlag(flag + 1);
          };
          const getField = () => {
          loadUnattachedTables().then(res => {
          if (res.data.root && res.data.root.length) {
          ......@@ -92,235 +81,7 @@ const AddModal = props => {
          }
          });
          };
          // 处理表格特殊样式
          const styleConfig = record => {
          if (record.Type === 1) {
          return 'red';
          }
          if (record.Type === 2) {
          return 'grey';
          }
          return '000000D9';
          };
          const setRowClassName = record =>
          Object.entries(record).toString() === Object.entries(selectTableName).toString()
          ? styles.clickRowStyle
          : '';
          const columns = [
          {
          title: '字段名',
          dataIndex: 'name',
          key: 'name',
          align: 'left',
          width: 300,
          onCell: () => ({
          style: {
          maxWidth: 300,
          overflow: 'hidden',
          whiteSpace: 'nowrap',
          textOverflow: 'ellipsis',
          cursor: 'pointer',
          },
          }),
          render: (text, record) => {
          let aa = (
          <div style={{ fontWeight: 'bold' }}>
          <span style={{ color: 'rgb(63 163 255)' }}>
          {text}(共{allData[text] ? allData[text].length : ''}条)
          </span>
          </div>
          );
          let bb = (
          <Tooltip title={text}>
          <div style={{ color: styleConfig(record) }}>{text}</div>
          </Tooltip>
          );
          const obj = {
          children: record.children ? aa : bb,
          props: {},
          };
          obj.props.colSpan = record.children ? 8 : 1;
          return obj;
          },
          },
          {
          title: '别名',
          dataIndex: 'alias',
          key: 'alias',
          align: 'center',
          width: 300,
          onCell: () => ({
          style: {
          maxWidth: 300,
          overflow: 'hidden',
          whiteSpace: 'nowrap',
          textOverflow: 'ellipsis',
          cursor: 'pointer',
          },
          }),
          render: (text, record) => {
          const obj = {
          children: (
          <Tooltip placement="topLeft" title={text}>
          <span style={{ color: styleConfig(record) }}>{text} </span>
          </Tooltip>
          ),
          props: {},
          };
          obj.props.colSpan = record.children ? 0 : 1;
          return obj;
          },
          },
          {
          title: '字段类型',
          dataIndex: 'storeType',
          key: 'storeType',
          align: 'center',
          width: 150,
          render: (text, record) => {
          const obj = {
          children: <span style={{ color: styleConfig(record) }}>{text} </span>,
          props: {},
          };
          obj.props.colSpan = record.children ? 0 : 1;
          return obj;
          },
          },
          {
          title: '形态',
          dataIndex: 'shape',
          key: 'shape',
          align: 'center',
          width: 150,
          render: (text, record) => {
          const obj = {
          children: <span style={{ color: styleConfig(record) }}>{text} </span>,
          props: {},
          };
          obj.props.colSpan = record.children ? 0 : 1;
          return obj;
          },
          },
          {
          title: '配置',
          dataIndex: 'config',
          key: 'config',
          align: 'center',
          width: 250,
          onCell: () => ({
          style: {
          maxWidth: 250,
          overflow: 'hidden',
          whiteSpace: 'nowrap',
          textOverflow: 'ellipsis',
          cursor: 'pointer',
          },
          }),
          render: (text, record) => {
          const obj = {
          children: (
          <Tooltip placement="topLeft" title={text}>
          <span style={{ color: styleConfig(record) }}>{text} </span>
          </Tooltip>
          ),
          props: {},
          };
          obj.props.colSpan = record.children ? 0 : 1;
          return obj;
          },
          },
          {
          title: '只读',
          dataIndex: 'readOnly',
          key: 'readOnly',
          align: 'center',
          width: 100,
          render: (text, record) => {
          const obj = {
          children: (
          <span style={{ color: styleConfig(record) }}>
          <Tag color={text === 1 ? 'success' : 'processing'}>{text === 1 ? '是' : '否'}</Tag>
          </span>
          ),
          props: {},
          };
          obj.props.colSpan = record.children ? 0 : 1;
          return obj;
          },
          },
          {
          title: '同步',
          dataIndex: 'syncEvent',
          key: 'syncEvent',
          align: 'center',
          width: 100,
          render: (text, record) => {
          const obj = {
          children: (
          <span style={{ color: styleConfig(record) }}>
          <Tag color={text === '否' ? 'processing' : 'success'}>
          {text === '否' ? '否' : '是'}
          </Tag>
          </span>
          ),
          props: {},
          };
          obj.props.colSpan = record.children ? 0 : 1;
          return obj;
          },
          },
          {
          title: '操作',
          ellipsis: true,
          align: 'center',
          render: (text, record) => {
          const obj = {
          children: (
          <Space>
          {record.children ? (
          <span />
          ) : (
          <>
          {/* <Tooltip title="修改">
          <EditOutlined
          style={{ fontSize: '16px', color: '#1890FF' }}
          onClick={() => {
          editor(record);
          }}
          >
          编辑
          </EditOutlined>
          </Tooltip> */}
          <div onClick={e => e.stopPropagation()}>
          <Popconfirm
          title="是否删除该字段？"
          okText="确认"
          cancelText="取消"
          onConfirm={() => {
          deleteChart(record);
          }}
          >
          <Tooltip title="删除">
          <DeleteOutlined style={{ fontSize: '16px', color: '#e86060' }}>
          删除
          </DeleteOutlined>
          </Tooltip>
          </Popconfirm>
          </div>
          </>
          )}
          </Space>
          ),
          props: {},
          };
          obj.props.colSpan = record.children ? 0 : 1;
          return obj;
          },
          },
          ];
          useEffect(() => {
          LoadLedgers().then(res => {
          if (res.code === 0) {
          ......@@ -349,7 +110,7 @@ const AddModal = props => {
          useEffect(() => {
          if (props.location.state.id) {
          setSelectTreeData(props.location.state.keepTreeSelect);
          setSelectTreeData(props.location.state.keepData);
          setSelectDataFirst(props.location.state.keepTreeFirst);
          if (treeSelectValue) {
          let ss = treeSelectValue.substring(0, treeSelectValue.lastIndexOf('@'));
          ......@@ -505,6 +266,7 @@ const AddModal = props => {
          getField();
          }
          }, [flag]);
          const formateArrDataA = (initialArr, name) => {
          // 判定传参是否符合规则
          if (!(initialArr instanceof Array)) {
          ......@@ -543,48 +305,7 @@ const AddModal = props => {
          }
          return tempObj;
          };
          // 删除字段配置
          const deleteChart = record => {
          removeFields({ fieldIDs: record.ID }).then(res => {
          if (res.msg === 'Ok' || res.msg === '') {
          notification.success({
          message: '提示',
          duration: 3,
          description: '删除成功',
          });
          setFlag(flag + 1);
          } else {
          notification.error({
          message: '提示',
          duration: 3,
          description: res.msg,
          });
          }
          });
          };
          // 批量删除字段配置
          const multiDeleteChart = () => {
          console.log(selectedRowKeys.toString());
          removeFields({ fieldIDs: selectedRowKeys.toString() }).then(res => {
          setDeleteUserVisible(false);
          if (res.msg === 'Ok' || res.msg === '') {
          setMultiOperate(true);
          notification.success({
          message: '提示',
          duration: 3,
          description: '删除成功',
          });
          setSelectedRowKeys([]);
          setFlag(flag + 1);
          } else {
          notification.error({
          message: '提示',
          duration: 3,
          description: res.msg,
          });
          }
          });
          };
          // 返回上一级
          const back = () => {
          console.log(props.location.state);
          ......@@ -612,62 +333,6 @@ const AddModal = props => {
          },
          });
          };
          const onUnfold = (expanded, record) => {
          if (record.children) {
          const data = [...selectGroup];
          // let index = selectGroup.find(i => i.type || i.name == record.name);
          if (expanded) {
          data.push(record);
          setSelectGroup(data);
          } else {
          let aa = [];
          data.map(i => {
          if (i.name && i.name != record.name) {
          aa.push(i);
          } else if (i.type && i.type != record.name) {
          aa.push(i);
          }
          });
          setSelectGroup(aa);
          }
          }
          };
          // 附加
          const add = record => {
          if (treeSelectValue) {
          selectTreeData.map(i => {
          i.children.map(j => {
          if (j.tableName == treeSelectValue.substring(0, treeSelectValue.lastIndexOf('@'))) {
          setPramFormObj(j);
          }
          });
          });
          } else {
          setPramFormObj(props.location.state.template);
          }
          setType('affiliateAdd');
          setVisible(true);
          };
          // 分组与排序
          const sort = record => {
          if (treeSelectValue) {
          selectTreeData.map(i => {
          i.children.map(j => {
          if (j.tableName == treeSelectValue.substring(0, treeSelectValue.lastIndexOf('@'))) {
          setPramFormObj(j);
          }
          });
          });
          } else {
          setPramFormObj(props.location.state.template);
          }
          setType('sort');
          setVisible(true);
          };
          const onSubmit = prop => {
          setVisible(false);
          setFlag(flag + 1);
          };
          const treeSelectOnchange = e => {
          console.log(e);
          ......@@ -758,37 +423,33 @@ const AddModal = props => {
          </TreeNode>
          ) : (
          <TreeNode
          value={`${org.tableName}@${org.groupName}`}
          value={`${org.tableName}@${org.groupName}|${org.tableID}`}
          title={org.tableName}
          key={`${org.tableName}@${org.groupName}`}
          key={`${org.tableName}@${org.groupName}|${org.tableID}`}
          />
          );
          };
          // 复选框
          const rowSelection = {
          selectedRowKeys,
          onChange: (selectedRowKeys, selectedRows) => {
          let aa = [];
          selectedRowKeys.map(i => {
          if (typeof i !== 'number') {
          aa.push(i);
          // 附加
          const add = record => {
          if (treeSelectValue) {
          selectTreeData.map(i => {
          i.children.map(j => {
          if (j.tableName == treeSelectValue.substring(0, treeSelectValue.lastIndexOf('@'))) {
          setPramFormObj(j);
          }
          });
          setSelectedRowKeys(aa);
          if (selectedRows.length > 0) {
          setMultiOperate(false);
          });
          } else {
          setMultiOperate(true);
          setPramFormObj(props.location.state.template);
          }
          },
          };
          const multiDelete = () => {
          setDeleteUserVisible(true);
          setType('affiliateAdd');
          setVisible(true);
          };
          const preview = () => {
          setPerViewPrase(true);
          const onSubmit = prop => {
          setVisible(false);
          setFlag(flag + 1);
          };
          return (
          ......@@ -798,7 +459,7 @@ const AddModal = props => {
          <div className={styles.config}>
          <div className={styles.title}> 字段配置 【{formObj}】</div>
          <div style={{ display: 'flex', justifyContent: 'flex-end' }}>
          <div style={{ lineHeight: '32px', marginRight: '5px' }}>快速切换表:</div>
          {/* <div style={{ lineHeight: '32px', marginRight: '5px' }}>快速切换表:</div>
          <div style={{ width: '350px', marginRight: '10px' }}>
          <TreeSelect
          showSearch
          ......@@ -817,100 +478,27 @@ const AddModal = props => {
          <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} />
          )}
          </TreeSelect>
          </div>
          <div style={{ marginRight: '10px' }}>
          <Button type="primary" disabled={multiOperate} onClick={multiDelete}>
          <DeleteOutlined />
          批量删除
          </Button>
          </div>
          </div> */}
          <div className={styles.btn}>
          <Button type="primary" icon={<EyeOutlined />} onClick={preview}>
          预览
          </Button>
          <Button type="primary" icon={<PlusSquareOutlined />} onClick={add}>
          附加
          </Button>
          <Button type="primary" icon={<SortDescendingOutlined />} onClick={sort}>
          分组排序
          </Button>
          <Button type="primary" icon={<RollbackOutlined />} onClick={back}>
          <Button
          type="primary"
          icon={<RollbackOutlined />}
          onClick={back}
          style={{ marginLeft: '30px' }}
          >
          返回
          </Button>
          </div>
          </div>
          </div>
          {/* <Table
          rowSelection={{ ...rowSelection }}
          columns={columns}
          dataSource={treeData}
          // // expandable={{ expandedRowRender }}
          size="small"
          rowKey={record => record.ID}
          // defaultExpandAllRows={true}
          // expandedRowKeys={chooseLine} // 展开的行
          // defaultExpandedRowKeys={select.map(item => item.key)} // 展开的行
          // expandedRowKeys={select.map(item => item.key)} // 展开的行
          // // defaultExpandedRowKeys={0}
          expandRowByClick
          pagination={false}
          scroll={{ y: 'calc(100vh - 186px)' }}
          // onExpand={onUnfold}
          /> */}
          <Table
          columns={columns}
          size="small"
          rowKey={record => record.ID}
          rowSelection={{ ...rowSelection, checkStrictly, selectedRowKeys }}
          dataSource={treeData}
          pagination={false}
          bordered
          expandedRowKeys={selectGroup.map(item => item.key)}
          expandRowByClick
          scroll={{ y: 'calc(100% - 70px)' }}
          onRow={record => ({
          onDoubleClick: event => {
          event.stopPropagation();
          editor(record);
          },
          onClick: event => {
          event.stopPropagation();
          setSelectTableName(record);
          }, // 点击行
          })}
          rowClassName={setRowClassName}
          onExpand={onUnfold}
          />
          <div style={{ width: '100%', height: 'calc(100% - 63px)', padding: '10px' }}>
          {formObj && <FormDesigner tableName={formObj} />}
          </div>
          </div>
          </Spin>
          {/* 多选删除用户 */}
          <Modal
          title="确认删除字段"
          visible={deleteUserVisible}
          onOk={multiDeleteChart}
          onCancel={() => {
          setDeleteUserVisible(false);
          }}
          okText="确认"
          cancelText="取消"
          >
          <p>将删除多个配置字段, 是否确认删除？</p>
          </Modal>
          <FieldEditor
          isVisible={isVisible}
          keepTree={keepTree}
          keepTreeData={keepTreeData}
          isType={isType}
          itemData={itemData}
          formObj1={formObj}
          onCancel={() => setIsVisible(false)}
          treeData={treeData}
          keepTreeFirst={keepTreeFirst}
          callBackSubmit={Submit}
          keepStandingBook={keepStandingBook}
          />
          {visible && type === 'affiliateAdd' && (
          <AffiliateAdd
          visible={visible}
          ......@@ -921,21 +509,6 @@ const AddModal = props => {
          formObj={pramFormObj}
          />
          )}
          {visible && type === 'sort' && (
          <LoadGroup
          visible={visible}
          type={type}
          formObj={pramFormObj}
          onCancel={() => setVisible(false)}
          callBackSubmit={onSubmit}
          />
          )}
          <PerviewPrase
          visible={perviewPrase}
          tablesSchema={tablesSchema}
          onCancel={() => setPerViewPrase(false)}
          />
          </>
          );
          };
          ......
          src/pages/bsmanager/base/tablemanager/filedConfig/index.less
          View file @ 29339114
          ......@@ -126,7 +126,7 @@
          }
          .btn {
          display: flex;
          justify-content: space-around;
          justify-content: flex-end;
          width: 25rem;
          }
          .ant-btn {
          ......
          src/pages/bsmanager/base/tablemanager/index.jsx
          View file @ 29339114
          ......@@ -82,6 +82,7 @@ const TableManager = props => {
          const [chooseLine, setChooseLine] = useState([0]);
          const [keepValue, setKeepValue] = useState([0]);
          const [keepTreeSelect, setKeepTreeSelect] = useState([]);
          const [keepData, setKeepData] = useState([]);
          const [keepTreeFirst, setKeepTreeFirst] = useState([]);
          const [treeVisible, setTreeVisible] = useState(true); // 是否显示左侧树
          const [hoverItemIndex, setHoverItemIndex] = useState(0); // hover流程索引
          ......@@ -222,6 +223,7 @@ const TableManager = props => {
          keepValue: keepValue,
          keepTreeSelect: keepTreeSelect,
          keepTreeFirst: keepTreeFirst,
          keepData: keepData,
          },
          });
          // setType('config');
          ......@@ -268,7 +270,6 @@ const TableManager = props => {
          let newArr = [];
          let aa = [];
          let bb = [];
          console.log(groupData, 'groupData');
          // 对分组进行排序
          const sortNameArr = res.data.groupNames;
          const sortList = [];
          ......@@ -281,20 +282,18 @@ const TableManager = props => {
          }
          });
          });
          console.log(sortList, 'sortList');
          console.log(groupData);
          setAllData(groupData);
          if (!props.history.location.query || initNum.current > 0) {
          if (newArr.length > 0 && (!select || isSearch)) {
          setSelect(newArr[0].type);
          }
          setGroupArr(newArr);
          // if (groupArr.length == 0 || isSearch) {
          // setGroupArr(newArr);
          // }
          }
          setKeepTreeFirst(bb);
          setKeepTreeSelect(aa);
          if (keyword === '') {
          setKeepData(aa);
          }
          initNum.current += 1;
          }
          })
          ......@@ -680,6 +679,7 @@ const TableManager = props => {
          keepValue: keepValue,
          keepTreeSelect: keepTreeSelect,
          keepTreeFirst: keepTreeFirst,
          keepData: keepData,
          },
          });
          },
          ......
          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