fix: 代码修复

src/pages/bsmanager/workOrder/incident/EditTypeModal.jsx → src/pages/bsmanager/workOrder/incident/AddModal/EditTypeModal/index.js

@@ -6,14 +6,11 @@
 /* eslint-disable react/jsx-boolean-value */
 import React, { useState, useEffect } from 'react';
 import { Modal, Collapse, notification, Upload, Input, Empty, Tooltip, Table } from 'antd';
-import { GetImageOrderByFile, GetImageOrderByPath } from '@/services/integratedLogin/api';
-import classnames from 'classnames';
-import styles from './PreviewModal.less';
-
 const { Panel } = Collapse;
 
 const EditTypeModal = props => {
-  const { callBackSubmit = () => {}, visible, onCancel, tableData } = props;
+
+  const { callBackSubmit = () => { }, visible, onCancel, tableData } = props;
   const [imgData, setImgData] = useState([]);
   const [pickItem, setPickItem] = useState('');
   const [chooseItem, setChooseItem] = useState('');
@@ -26,7 +23,6 @@ const EditTypeModal = props => {
 
   useEffect(() => {
     if (visible) {
-      // update();
     } else {
       setSelectedRowKeys([]);
     }

src/pages/bsmanager/workOrder/incident/PreviewModal.jsx → src/pages/bsmanager/workOrder/incident/AddModal/PreviewModal/index.js

@@ -5,7 +5,7 @@
 /* eslint-disable prefer-template */
 /* eslint-disable react/jsx-boolean-value */
 import React, { useState, useEffect } from 'react';
-import { Modal, Collapse, notification, Upload, Input, Empty, Tooltip } from 'antd';
+import { Modal, Collapse, notification, Input, Empty, Tooltip } from 'antd';
 import { GetImageOrderByFile, GetImageOrderByPath } from '@/services/integratedLogin/api';
 import classnames from 'classnames';
 import styles from './PreviewModal.less';
@@ -13,7 +13,7 @@ import styles from './PreviewModal.less';
 const { Panel } = Collapse;
 
 const PreviewModal = props => {
-  const { callBackSubmit = () => {}, visible, onCancel, imageUrl, keepImgeUrl, type } = props;
+  const { callBackSubmit = () => { }, visible, onCancel, imageUrl, keepImgeUrl, type } = props;
   const [imgData, setImgData] = useState([]);
   const [pickItem, setPickItem] = useState('');
   const [chooseItem, setChooseItem] = useState('');

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 DragTable from '@/components/DragTable/DragTable';
+import classnames from 'classnames';
+import styles from './index.less';
+
+const SelectField = (props, ref) => {
+
+  useImperativeHandle(ref, () => ({
+    open
+  }))
+
+  const { filed, filedArray } = props
+
+  const [visible, setVisible] = useState(false)
+  const [checkedList, setCheckedList] = useState([]); // 选中复选框内容
+  const [selectData, setSelectData] = useState([]);
+  const [attr, setAttr] = useState('')
+
+  const columns = useMemo(() => {
+    if (attr === 'OrderByFieldConfig') {
+      return [
+        {
+          title: '已选字段',
+          dataIndex: 'name',
+          key: 'name',
+          width: 150,
+        },
+        {
+          title: '正序/倒序',
+          dataIndex: 'value',
+          key: 'value',
+          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>
+            )
+          }
+        }
+      ]
+    }
+    if (attr === 'SearchFields') {
+      return [
+        {
+          title: '已选字段',
+          dataIndex: 'name',
+          key: 'name',
+          width: 150,
+        },
+        {
+          title: '形态配置',
+          dataIndex: 'widget',
+          width: 150,
+          key: 'widget',
+          render: (t, x) => {
+            const style = { width: '100px', height: '28px', lineHeight: '28px', textAlign: 'center' }
+            let widget = filedArray.find(v => v.fieldName === x.name)?.shape
+            if (['日期时间', '日期', '日期年份', '日期月份', '日期周', '日期季度', '时分秒'].includes(widget)) {
+              return <div style={{ ...style, background: 'rgb(255 225 127)', color: 'rgb(255 145 34)' }}>日期时间</div>
+            }
+            if (['可编辑值选择器', '平铺值选择器', '站点选择器'].includes(widget)) {
+              return <div style={{ ...style, background: 'rgb(181 229 157)', color: 'rgb(50 128 10)' }}>下拉框</div>
+            }
+            return <div style={{ ...style, background: 'rgb(255 165 214)', color: 'rgb(255 0 140)' }}>文本搜索</div>
+          }
+        },
+      ]
+    }
+    return [
+      {
+        title: '已选列表',
+        dataIndex: 'name',
+        width: 150,
+        key: 'name',
+      },
+    ]
+  }, [attr, selectData, filedArray])
+
+  const radioChange = ({ row, value }) => {
+    let array = selectData.map(v => ({ name: v.name, value: v.name === row.name ? value : v.value }))
+    setSelectData(array)
+  }
+
+  const open = ({ attr, values }) => {
+    setAttr(attr)
+    if (attr === 'OrderByFieldConfig') {
+      if (values?.[attr]) {
+        setSelectData(JSON.parse(values?.[attr]))
+      }
+    } else {
+      let value = values?.[attr]
+      let array = value?.split(',')?.map(v => ({ name: v })) || []
+      setSelectData(array)
+    }
+    setVisible(true)
+  }
+
+  const checkChange = (value) => {
+    setSelectData(value.map(v => ({ name: v })))
+    console.log('value', value)
+  }
+
+  const dragCallBack = (value) => {
+    if (value) {
+      setSelectData(value);
+    }
+  }
+
+  const getIndeterminate = (group) => {
+    let length = 0
+    if (Array.isArray(group)) {
+      selectData.forEach(v => {
+        if (group.includes(v.name)) {
+          length++
+        }
+      })
+    }
+    if (!length) {
+      return 'false'
+    } else if (length === group.length) {
+      return 'true'
+    } else {
+      return 'other'
+    }
+  }
+
+  const groupChange = ({ type, group }) => {
+    if (type === 'true') {
+      let array = selectData.filter(v => !group.includes(v.name))
+      setSelectData(array)
+    } else {
+      let array = selectData.map(v => v.name)
+      let newArr = [...new Set([...array, ...group])]
+      setSelectData(newArr.map(v => ({ name: v })))
+    }
+  }
+
+  const onOk = () => {
+    setVisible(false)
+    props?.submit?.({ attr, selectData })
+  }
+
+  if (!visible) {
+    return null
+  }
+
+  return (
+    <Modal
+      visible={visible}
+      title="字段集选择"
+      bodyStyle={{ width: '100%', minHeight: '100px' }}
+      width="750px"
+      destroyOnClose
+      centered
+      cancelText="取消"
+      okText="确认"
+      onCancel={() => setVisible(false)}
+      onOk={onOk}
+      forceRender
+      getContainer={false}
+    >
+      <div className={styles.listCard}>
+        <div className={styles.cardItem} style={{ borderRight: '1px solid #99bbe8' }}>
+          <div className={styles.cardContent}>
+            <Checkbox.Group
+              value={selectData?.map(v => v.name)}
+              onChange={checkChange}
+            >
+              {
+                Object.keys(filed).map((item, index) => {
+                  const type = getIndeterminate(filed[item])
+                  return (
+                    <div
+                      className={classnames({ [styles.cardItemData]: true, [styles.cardItemData1]: item == '外部字段' })}
+                      key={index}
+                    >
+                      <Divider
+                        orientation="left"
+                        style={{ margin: '0 0 10px 0', color: '#15428b', borderTopColor: '#99bbe8' }}
+                      >
+                        <span
+                          className={styles.groupCheck}
+                          type={type}
+                          onClick={() => groupChange({ type, group: filed[item] })}
+                          style={{ marginRight: '7px' }}
+                        />
+                        {item == '外部字段' && <span style={{ color: 'red' }}>{item}</span>}
+                        {item == '内置字段' && <span>{`${item}（谨慎选择）`}</span>}
+                        {item != '外部字段' && item != '内置字段' && <span>{item}</span>}
+                      </Divider>
+                      {
+                        filed[item].map(v => <Checkbox key={v} style={{ marginLeft: '0' }} value={v}>{v}</Checkbox>)
+                      }
+                    </div>
+                  )
+                })
+              }
+            </Checkbox.Group>
+          </div>
+        </div>
+        <div className={styles.cardItem}>
+          <div className={styles.cardContent}>
+            <div className={styles.doctorTable}>
+              <DragTable
+                bordered
+                style={{ marginBottom: '10px' }}
+                rowKey={record => record.name}
+                columns={columns}
+                dataSource={selectData}
+                pagination={false}
+                size="small"
+                dragCallBack={dragCallBack}
+                ItemTypes="stadingOrder"
+              />
+            </div>
+          </div>
+        </div>
+      </div>
+    </Modal>
+  )
+
+}
+
+export default forwardRef(SelectField)

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

+.listCard {
+  display: flex;
+  justify-content: space-around;
+  width: 100%;
+  .cardItem {
+    padding: 0.5rem;
+    width: 50%;
+  }
+  .cardContent {
+    height: 30rem;
+    overflow-y: scroll;
+    overflow-x: scroll;
+    width: 100%;
+    .ant-checkbox-group {
+      .ant-checkbox-wrapper {
+        width: 100%;
+      }
+    }
+    .groupCheck {
+      display: inline-block;
+      width: 16px;
+      height: 16px;
+      border-radius: 2px;
+      border: 1px solid #1890ff;
+      background: white;
+      margin-right: 5px;
+      position: relative;
+      top: 2px;
+      &:hover {
+        cursor: pointer;
+      }
+      &[type="true"] {
+        background: #1890ff;
+        &::after {
+          position: absolute;
+          display: table;
+          transform: rotate(45deg) scale(1) translate(-50%, -50%);
+          opacity: 1;
+          transition: all 0.2s cubic-bezier(0.12, 0.4, 0.29, 1.46) 0.1s;
+          width: 5.7px;
+          height: 9.1px;
+          left: 20%;
+          top: 50%;
+          border: 2px solid #fff;
+          border-top: 0;
+          border-left: 0;
+          content: ' ';
+        }
+      }
+      &[type="other"] {
+        &::after {
+          width: 8px;
+          height: 8px;
+          position: absolute;
+          top: 50%;
+          left: 50%;
+          background: #1890ff;
+          transform: translate(-50%, -50%) scale(1);
+          opacity: 1;
+          content: " ";
+        }
+      }
+    }
+  }
+  .cardItemData {
+    padding: 1rem;
+    border: 1px solid #b5b8c8;
+    margin-bottom: 1rem;
+    overflow-x: scroll;
+  }
+  .cardItemData1 {
+    padding: 1rem;
+    border: 1px solid #b5b8c8;
+    margin-bottom: 1rem;
+    overflow-x: scroll;
+    .ant-checkbox-group-item {
+      color: red !important;
+    }
+  }
+}
\ No newline at end of file

src/pages/bsmanager/workOrder/incident/changeEdit.jsx → src/pages/bsmanager/workOrder/incident/AddModal/changeEdit.jsx

@@ -16,10 +16,10 @@ import React, { useState, useEffect, useCallback, useRef } from 'react';
 import { Form, Modal, Divider, Checkbox, Tabs, Empty } from 'antd';
 import DragTable from '@/components/DragTable/DragTable';
 import classnames from 'classnames';
-import styles from './incident.less';
+import styles from '../incident.less';
 const CheckboxGroup = Checkbox.Group;
 const EditModal = props => {
-  const { callBackSubmit = () => {}, pickItem, visible, filed, newCheckedList, flag } = props;
+  const { callBackSubmit = () => { }, pickItem, visible, filed, newCheckedList, flag } = props;
   const [loading, setLoading] = useState(false);
   const [value, setValue] = useState('');
   const [checkValue, setCheckValue] = useState([]);
@@ -96,8 +96,6 @@ const EditModal = props => {
       }
     });
     let newArr = selectData.map(item => item.name);
-    console.log(newArr);
-    console.log(filed.外部字段);
     let valueArr = [];
     if (filed.外部字段) {
       newArr.forEach(item => {