fix: '辅助视图web和mobile交互填写保持一致'

src/pages/bsmanager/workOrder/workFlow/flowNode/flowNodeComponents/auxiliaryComponents/mobileParmarModal.jsx

+import React, { useEffect, useState } from 'react';
+import { Modal, Form, Button, Input, Space, Select, Switch, Radio } from 'antd';
+import { MinusCircleOutlined, PlusOutlined } from '@ant-design/icons';
+
+import { LoadLedgers } from '@/services/tablemanager/tablemanager';
+
+const MobileParmarModal = props => {
+  const { pageUrl, visible, handleCancel, parmarCallBack } = props;
+  const [form] = Form.useForm();
+  const [keepStandingBook, setKeepStandingBook] = useState([]);
+  const [visibleChecked, setVisibleChecked] = useState(true);
+  const [mappingData, setMappingData] = useState(['事件编号', '工单编号']);
+  const { Option } = Select;
+  useEffect(() => {
+    if (visible) {
+      LoadLedgers().then(res => {
+        if (res.code === 0) {
+          let data = [];
+          res.data.root.map(i => {
+            data.push(i.name);
+          });
+          setKeepStandingBook(res.data.root);
+        }
+      });
+      // 给url通过字符串分割成表单需要的数据形式
+      console.log(pageUrl, 'pageUrlpageUrlpageUrl');
+      if (pageUrl) {
+        if (pageUrl.indexOf('[') !== -1) {
+          let data = JSON.parse(pageUrl);
+          let list = [];
+          if (data.mapping.length > 0) {
+            data.mapping.map(i => {
+              list.push(i.fromField);
+            });
+          }
+          form.setFieldsValue({
+            accountName: data.accountName,
+            editable: data.editable,
+            mapping: list,
+          });
+        }
+      }
+    } else {
+      // 关闭弹窗清除表单数据
+      form.resetFields();
+    }
+  }, [visible]);
+  // 保存
+  const onFinish = () => {
+    form.validateFields().then(validate => {
+      if (validate) {
+        let obj = form.getFieldsValue();
+        // let parma = obj.parmars;
+        let data = {};
+        data.accountName = obj.accountName;
+        data.editable = visibleChecked;
+        data.mapping = [];
+        if (obj.mapping) {
+          obj.mapping.map(i => {
+            data.mapping.push({ fromField: i, toField: i });
+          });
+        }
+        // data.mapping = [{ fromField: obj.mapping, toField: obj.mapping }];
+        // data.mapping = parma;
+        parmarCallBack(JSON.stringify(data));
+      }
+    });
+  };
+
+  const change = e => {
+    setVisibleChecked(e);
+  };
+
+  return (
+    <div>
+      <Modal
+        title="参数配置"
+        visible={visible}
+        onOk={onFinish}
+        onCancel={handleCancel}
+        maskClosable={false}
+        destroyOnClose
+      >
+        <div style={{ maxHeight: '400px', overflowY: 'scroll', marginBottom: '10px' }}>
+          <Form name="form" form={form} labelCol={{ span: 4 }}>
+            <Form.Item
+              label="台账名"
+              name="accountName"
+              rules={[{ required: true, message: '请选择台账名' }]}
+            >
+              <Select placeholder="请选择台账名" showSearch>
+                {keepStandingBook
+                  ? keepStandingBook.map((item, index) => (
+                      <Option key={index} value={item.name}>
+                        {item.name}
+                      </Option>
+                    ))
+                  : ''}
+              </Select>
+            </Form.Item>
+            <Form.Item label="可编辑" name="editable">
+              <Switch
+                checkedChildren="是"
+                unCheckedChildren="否"
+                checked={visibleChecked}
+                onChange={change}
+              />
+            </Form.Item>
+            <Form.Item label="映射字段" name="mapping">
+              <Select placeholder="请选择映射字段" showSearch mode="multiple">
+                {mappingData.map((item, index) => (
+                  <Option key={index} value={item}>
+                    {item}
+                  </Option>
+                ))}
+              </Select>
+              {/* <Form.List name="parmars">
+                {(fields, { add, remove }) => (
+                  <>
+                    {fields.map(({ key, name, fieldKey, ...restField }) => (
+                      <Space
+                        key={key}
+                        style={{ display: 'flex', marginBottom: '5px', justifyContent: 'center' }}
+                        align="baseline"
+                      >
+                        <Form.Item
+                          {...restField}
+                          style={{ marginBottom: '5px' }}
+                          name={[name, 'fromField']}
+                          fieldKey={[fieldKey, 'key']}
+                          validateTrigger={['onChange', 'onBlur']}
+                          rules={[
+                            { required: true, message: '请选择字段名' },
+                            {
+                              validator: () => {
+                                // 验证参数名不能重复
+                                const allKey = form
+                                  .getFieldsValue()
+                                  .parmars.map(item => (item ? item.fromField : ''));
+                                const repeatKey = new Set(allKey);
+                                if (repeatKey.size !== allKey.length) {
+                                  return Promise.reject(new Error('参数名重复'));
+                                }
+                                return Promise.resolve();
+                              },
+                            },
+                          ]}
+                        >
+                          <Input placeholder="请选择字段名" />
+                        </Form.Item>
+                        <Form.Item
+                          {...restField}
+                          style={{ marginBottom: '5px' }}
+                          name={[name, 'toField']}
+                          fieldKey={[fieldKey, 'value']}
+                          rules={[{ required: true, message: '请选择映射字段名' }]}
+                        >
+                          <Input placeholder="请选择映射字段名" />
+                        </Form.Item>
+
+                        <MinusCircleOutlined
+                          onClick={() => remove(name)}
+                          style={{ marginLeft: '10px', fontSize: '20px' }}
+                        />
+                      </Space>
+                    ))}
+
+                    <Form.Item>
+                      <Button
+                        style={{ width: '372px' }}
+                        type="dashed"
+                        onClick={() => add()}
+                        block
+                        icon={<PlusOutlined />}
+                      >
+                        添加参数
+                      </Button>
+                    </Form.Item>
+                  </>
+                )}
+              </Form.List> */}
+            </Form.Item>
+          </Form>
+        </div>
+      </Modal>
+    </div>
+  );
+};
+
+export default MobileParmarModal;

src/pages/bsmanager/workOrder/workflowEdit/workFlowComponents/flowChartComponents/nodeModalComponents/AddView.jsx

@@ -2,12 +2,14 @@ import React, { useEffect, useState } from 'react';
 
 import { Form, Modal, Input, message, Button, Select, Tag } from 'antd';
 import ParmarModal from '../../../../workFlow/flowNode/flowNodeComponents/auxiliaryComponents/ParmarModal';
+import MobileParmarModal from '../../../../workFlow/flowNode/flowNodeComponents/auxiliaryComponents/ParmarModal';
 const { Option } = Select;
 const AddView = props => {
   const { onSubumit, handleCancel, visible, msg, flowNodeId, modalType, title } = props;
   const [form] = Form.useForm();
   const [flag, setFlag] = useState(0);
   const [showParmarModal, setShowParmarModal] = useState(false);
+  const [showMobileParmarModal, setShowMobileParmarModal] = useState(false);
   useEffect(() => {
     form.resetFields();
     if (visible) {
@@ -15,6 +17,7 @@ const AddView = props => {
         getFormData();
       } else {
         form.setFieldsValue({ WebPage: 'FeedbackAccount' });
+        form.setFieldsValue({ MobilePage: 'FeedbackAccount' });
       }
       setFlag(flag + 1);
     }
@@ -41,12 +44,21 @@ const AddView = props => {
   };
   // 节点配置表单监听
   const changeValue = (changedFields, allFields) => {
+    if (changedFields.length) {
       if (changedFields[0].name[0] === 'WebPage') {
         setFlag(flag + 1);
       }
+      if (changedFields[0].name[0] === 'MobilePage') {
+        setFlag(flag + 1);
+      }
+    }
   };
-  const addParama = () => {
+  const addParama = (web = true) => {
+    if (web) {
       setShowParmarModal(true);
+    } else {
+      setShowMobileParmarModal(true);
+    }
   };
   return (
     <Modal
@@ -118,10 +130,52 @@ const AddView = props => {
           <Input placeholder="请输入手持标签" />
         </Form.Item>
         <Form.Item label="手持视图" name="MobilePage">
-          <Input placeholder="请输入手持视图" />
+          {/* <Input placeholder="请输入手持视图" /> */}
+          <Select placeholder="请输入手持视图" showSearch optionLabelProp="label">
+            <Option value="FeedbackAccount" label="FeedbackAccount">
+              <div style={{ marginRight: '6px' }}>
+                <Tag color="blue">标准</Tag>
+                FeedbackAccount：工单反馈标准视图
+              </div>
+            </Option>
+            <Option value="GisGatherProjectView" label="GisGatherProjectView">
+              <div style={{ marginRight: '6px' }}>
+                <Tag color="purple">专用</Tag>
+                GisGatherProjectView：管网采集辅助视图
+              </div>
+            </Option>
+          </Select>
         </Form.Item>
-        <Form.Item label="手持参数" name="MobileParam">
+        {/* <Form.Item label="手持参数" name="MobileParam">
           <Input placeholder="请输入手持参数" />
+        </Form.Item> */}
+        <Form.Item
+          label="手持参数"
+          style={{
+            display: form.getFieldValue('MobilePage') === 'FeedbackAccount' ? 'flex' : 'none',
+          }}
+        >
+          <div style={{ display: 'flex' }}>
+            <Form.Item name="MobileParam" style={{ marginBottom: '0', flex: '1' }}>
+              <Input placeholder="请输入手持参数" />
+            </Form.Item>
+            <Button onClick={() => addParama(false)}>参数管理</Button>
+          </div>
+        </Form.Item>
+        <Form.Item
+          label="手持参数"
+          name="MobileParam"
+          style={{
+            display: form.getFieldValue('MobilePage') === 'GisGatherProjectView' ? 'flex' : 'none',
+          }}
+        >
+          <Select placeholder="选择手持参数" showSearch>
+            {['一键入库', 'edit'].map((item, index) => (
+              <Option key={index} value={item}>
+                {item}
+              </Option>
+            ))}
+          </Select>
         </Form.Item>
       </Form>
       <ParmarModal
@@ -133,6 +187,15 @@ const AddView = props => {
           setShowParmarModal(false);
         }}
       />
+      <MobileParmarModal
+        pageUrl={form.getFieldsValue().MobileParam}
+        handleCancel={() => setShowMobileParmarModal(false)}
+        visible={showMobileParmarModal}
+        parmarCallBack={url => {
+          form.setFieldsValue({ MobileParam: url });
+          setShowMobileParmarModal(false);
+        }}
+      />
     </Modal>
   );
 };

src/pages/bsmanager/workOrder/workflowEdit/workFlowComponents/flowChartComponents/nodeModalComponents/ConfigView.jsx

@@ -57,11 +57,11 @@ const ConfigView = (props, ref) => {
       title: '前端标签',
       dataIndex: 'WebLabel',
       align: 'center',
-      render: text => {
+      render: (text, record) => {
         if (text === '(未配置)' || text === '(无)') {
           return <span style={{ color: 'grey' }}>{text}</span>;
         }
-        return <span>{text}</span>;
+        return <span>{text || record.WebPage}</span>;
       },
     },