fix: 代码优化

src/pages/bsmanager/workOrder/incident/AddModal/SelectField/index.js

-import React, { useState, useEffect, useCallback, useRef, useImperativeHandle, forwardRef, useMemo } from 'react';
-import { Form, Modal, Divider, Checkbox, Radio } from 'antd';
+import React, { useState, useImperativeHandle, forwardRef, useMemo } from 'react';
+import { Modal, Divider, Checkbox, Radio } from 'antd';
 import DragTable from '@/components/DragTable/DragTable';
 import classnames from 'classnames';
 import styles from './index.less';
@@ -33,10 +33,15 @@ const SelectField = (props, ref) => {
           width: 150,
           render: (t, x) => {
             return (
-              <Radio.Group onChange={(e) => radioChange({ row: x, value: e.target.value })} value={t}>
-                <Radio value={'asc'}>正序</Radio>
-                <Radio value={'desc'}>倒序</Radio>
-              </Radio.Group>
+              <Checkbox.Group
+                onChange={(value) => {
+                  radioChange({ row: x, value: value })
+                }}
+                value={[t]}
+              >
+                <Checkbox value={'asc'}>正序</Checkbox >
+                <Checkbox value={'desc'}>倒序</Checkbox >
+              </Checkbox.Group>
             )
           }
         }
@@ -80,7 +85,7 @@ const SelectField = (props, ref) => {
   }, [attr, selectData, filedArray])
 
   const radioChange = ({ row, value }) => {
-    let array = selectData.map(v => ({ name: v.name, value: v.name === row.name ? value : v.value }))
+    let array = selectData.map(v => ({ name: v.name, value: v.name === row.name ? (value[1] || value[0] || '') : v.value }))
     setSelectData(array)
   }
 
@@ -89,18 +94,23 @@ const SelectField = (props, ref) => {
     if (attr === 'OrderByFieldConfig') {
       if (values?.[attr]) {
         setSelectData(JSON.parse(values?.[attr]))
+      } else {
+        setSelectData([])
       }
     } else {
       let value = values?.[attr]
-      let array = value?.split(',')?.map(v => ({ name: v })) || []
+      let array = value ? value.split(',')?.map(v => ({ name: v })) : []
       setSelectData(array)
     }
     setVisible(true)
   }
 
   const checkChange = (value) => {
-    setSelectData(value.map(v => ({ name: v })))
-    console.log('value', value)
+    let array = []
+    value.forEach(v => {
+      array.push({ name: v, value: selectData.find(s => s.name === v)?.value || '' })
+    })
+    setSelectData(array)
   }
 
   const dragCallBack = (value) => {
@@ -192,7 +202,7 @@ const SelectField = (props, ref) => {
                         {item != '外部字段' && item != '内置字段' && <span>{item}</span>}
                       </Divider>
                       {
-                        filed[item].map(v => <Checkbox key={v} style={{ marginLeft: '0' }} value={v}>{v}</Checkbox>)
+                        filed[item].map(v => <Checkbox key={v} style={{ marginLeft: '0', width: '100%' }} value={v}>{v}</Checkbox>)
                       }
                     </div>
                   )

src/pages/bsmanager/workOrder/incident/AddModal/SelectField/index.less

@@ -11,11 +11,6 @@
     overflow-y: scroll;
     overflow-x: scroll;
     width: 100%;
-    .ant-checkbox-group {
-      .ant-checkbox-wrapper {
-        width: 100%;
-      }
-    }
     .groupCheck {
       display: inline-block;
       width: 16px;

src/pages/bsmanager/workOrder/incident/AddModal/index.js

@@ -441,6 +441,7 @@ const AddModal = (props) => {
   const [reportValue, setReportValue] = useState(); // 保存上报字段外部字段
   const [displayValue, setDisplayValue] = useState(); // 保存显示字段外部字段
   const [displayColumns, setDisplayColumns] = useState(); // 保存显示列字段外部字段
+  const [question, setQuestion] = useState({ outSearchFields: 0, outOrderByFieldConfig: 0 })
   const [keepFiled, setKeepFiled] = useState([]);
   const [imageUrl, setImageUrl] = useState();
   const [keepImgeUrl, setKeepImgeUrl] = useState('');
@@ -477,12 +478,8 @@ const AddModal = (props) => {
           notification.warning({ message: '提示', description: '事件权限必填' })
         } else {
           if (type == 'edit') {
-            CM_Event_EditEventTable({
-              ID: formObj.ID,
-              ...obj,
-              Order,
-              EventFlowId: eventFlowId,
-            }).then(res => {
+            CM_Event_EditEventTable({ ID: formObj.ID, ...obj, Order, EventFlowId: eventFlowId, })
+              .then(res => {
                 if (res.msg === 'Ok') {
                   form.resetFields();
                   setValue('');
@@ -506,11 +503,7 @@ const AddModal = (props) => {
                 form.resetFields();
                 setValue('');
                 callBackSubmit();
-                notification.success({
-                  message: '提示',
-                  duration: 3,
-                  description: '新增成功',
-                });
+                notification.success({ message: '提示', duration: 3, description: '新增成功' });
               } else {
                 notification.error({ message: '提示', duration: 3, description: res.msg });
               }
@@ -546,7 +539,13 @@ const AddModal = (props) => {
         GetCM_Event_QueryEventType({ eventTypeId: formObj.ID }).then(res => {
           console.log('res.data.root', res.data.root)
           if (res.data.root) {
-            const { Reportable, ReportFromMobile, ReportFromWeb } = res.data.root
+            const {
+              Reportable,
+              ReportFromMobile,
+              ReportFromWeb,
+              outSearchFields,
+              outOrderByFieldConfig
+            } = res.data.root
             setEditable(res.data.root.Editable);
             setInitWay(res.data.root.CreateMode);
             setValue(res.data.root.CreateMode);
@@ -596,6 +595,10 @@ const AddModal = (props) => {
             } else {
               setTransitIsShow('none');
             }
+            setQuestion({
+              outSearchFields,
+              outOrderByFieldConfig
+            })
           }
         });
       }
@@ -613,6 +616,7 @@ const AddModal = (props) => {
       setReportIsShow('none');
       setDisplayIsShow('none');
       setTransitIsShow('none');
+      setQuestion({ outSearchFields: 0, outOrderByFieldConfig: 0 })
     }
   }, [visible]);
 
@@ -1034,6 +1038,7 @@ const AddModal = (props) => {
 
   //打开字段弹框
   const changeFields = (attr) => {
+    console.log(filed, nu)
     const values = form.getFieldsValue()
     if (values.TableName === 0) {
       return notification.warning({ message: '提示', duration: 3, description: '请先选择事件主表' });
@@ -1041,6 +1046,25 @@ const AddModal = (props) => {
     if (JSON.stringify(filed) == '{}') {
       return notification.warning({ message: '提示', duration: 3, description: '表字段缺失请先配置表/字段' });
     }
+    let outArray = []
+    if (attr === 'OrderByFieldConfig') {
+      let OrderByFieldConfig = values?.[attr] ? JSON.parse(values?.[attr]) : []
+      OrderByFieldConfig.forEach(v => {
+        if (!nu.some(s => s.fieldName === v.name)) {
+          outArray.push(v.name)
+        }
+      })
+    } else {
+      let strArray = values?.[attr] ? values?.[attr].split(',') : []
+      strArray.forEach(v => {
+        if (!nu.some(s => s.fieldName === v)) {
+          outArray.push(v)
+        }
+      })
+    }
+    if (outArray.length) {
+      setFiled({ ...filed, '外部字段': outArray })
+    }
     selectFieldRef.current.open({ attr, values })
   }
 
@@ -1052,7 +1076,6 @@ const AddModal = (props) => {
     } else {
       form.setFieldsValue({ [attr]: selectData.map(v => v.name).join(',') })
     }
-    console.log('form', attr, form.getFieldsValue())
   }
 
   const pickFiled1 = fileds => {
@@ -1362,15 +1385,8 @@ const AddModal = (props) => {
                         label={
                           <div style={{ display: 'flex', alignItems: 'center' }}>
                             <Tooltip title={`存在${reportValue}个外部字段`}>
-                              <InfoCircleOutlined
-                                style={{
-                                  color: 'red',
-
-                                  display: reportIsShow,
-                                }}
-                              />
+                              <InfoCircleOutlined style={{ color: 'red', display: reportIsShow }} />
                             </Tooltip>
-
                             <span>上报字段</span>
                           </div>
                         }
@@ -1409,13 +1425,7 @@ const AddModal = (props) => {
                         label={
                           <div style={{ display: 'flex', alignItems: 'center' }}>
                             <Tooltip title={`存在${displayValue}个外部字段`}>
-                              <InfoCircleOutlined
-                                style={{
-                                  color: 'red',
-
-                                  display: displayIsShow,
-                                }}
-                              />
+                              <InfoCircleOutlined style={{ color: 'red', display: displayIsShow }} />
                             </Tooltip>
                             <span>显示字段</span>
                           </div>
@@ -1455,8 +1465,15 @@ const AddModal = (props) => {
                   <>
                     <Col span={24}>
                       <Form.Item
-                        label='搜索字段'
                         labelCol={{ span: 5 }}
+                        label={
+                          <div style={{ display: 'flex', alignItems: 'center' }}>
+                            <Tooltip title={`存在${question.outSearchFields}个外部字段`}>
+                              <InfoCircleOutlined style={{ color: 'red', display: question.outSearchFields ? 'inline' : 'none' }} />
+                            </Tooltip>
+                            <span>搜索字段</span>
+                          </div>
+                        }
                       >
                         <div style={{ display: 'flex' }}>
                           <Form.Item name="SearchFields" style={{ marginBottom: 0, width: '100%' }}>
@@ -1473,12 +1490,19 @@ const AddModal = (props) => {
                     </Col>
                     <Col span={24}>
                       <Form.Item
-                        label='排序字段'
                         labelCol={{ span: 5 }}
+                        label={
+                          <div style={{ display: 'flex', alignItems: 'center' }}>
+                            <Tooltip title={`存在${question.outOrderByFieldConfig}个外部字段`}>
+                              <InfoCircleOutlined style={{ color: 'red', display: question.outOrderByFieldConfig ? 'inline' : 'none' }} />
+                            </Tooltip>
+                            <span>排序字段</span>
+                          </div>
+                        }
                       >
                         <div style={{ display: 'flex' }}>
                           <Form.Item name="DefaultOrderByFields" style={{ marginBottom: 0, width: '100%' }}>
-                            <Input placeholder="请选择排序字段" allowClear />
+                            <Input placeholder="请选择排序字段" allowClear disabled />
                           </Form.Item>
                           <Button
                             type="dashed"