fix: '方案制定优化'

package.json

@@ -99,6 +99,7 @@
         "@wisdom-map/basemap": "1.1.0-31",
         "ace-builds": "^1.4.12",
         "antd-img-crop": "^3.13.2",
+        "array-move": "^4.0.0",
         "bizcharts": "^4.0.15",
         "chalk": "2.4.2",
         "compression": "1.7.4",

src/pages/bsmanager/base/standingBook/BookConfig.jsx

@@ -16,7 +16,6 @@ import ChangeAdd from './changeAdd';
 const { Option } = Select;
 const { TextArea } = Input;
 const BookConfig = props => {
-
   const {
     callBackSubmit,
     type,

src/pages/bsmanager/patrolMaintenance/maintenance/AddModalNew.jsx

@@ -4,6 +4,9 @@
 /* eslint-disable camelcase */
 /* eslint-disable no-unused-expressions */
 import React, { useContext, useEffect, useRef, useState } from 'react';
+import { Context } from './maintenance';
+import { arrayMoveImmutable } from 'array-move';
+import { SortableContainer, SortableElement, SortableHandle } from 'react-sortable-hoc';
 import {
   Drawer,
   Form,
@@ -31,13 +34,11 @@ import {
 } from 'antd';
 import {
   PlusOutlined,
-  DownOutlined,
-  StepForwardFilled,
   InfoCircleOutlined,
   MinusCircleOutlined,
   EditOutlined,
+  MenuOutlined,
 } from '@ant-design/icons';
-import { setAutoFreeze } from 'immer';
 import styles from './maintenance.less';
 import RuleConfig from '@/components/RuleConfig';
 import { FormRender } from 'panda-xform';
@@ -65,12 +66,98 @@ import RMSComponents from '@/components/RolePmSite/index';
 import ChangeAdd from './ChangeAdd';
 
 import logo from '@/assets/images/icons/值映射.png';
-import { objectExpression } from '@babel/types';
 
 const { Option } = Select;
+
+const EditableContext = React.createContext(null);
+const EditableRow = ({ index, ...props }) => {
+  const [formFeed] = Form.useForm();
+  return (
+    <Form form={formFeed} component={false}>
+      <EditableContext.Provider value={formFeed}>
+        <tr {...props} />
+      </EditableContext.Provider>
+    </Form>
+  );
+};
+
+const EditableCell = ({
+  index,
+  title,
+  editable,
+  children,
+  dataIndex,
+  record,
+  handleSave,
+  ...restProps
+}) => {
+  const [editing, setEditing] = useState(false);
+  const inputRef = useRef(null);
+  const formBack = useContext(EditableContext);
+  const { state, dispatch } = useContext(Context);
+  useEffect(() => {
+    if (editing && inputRef.current) {
+      inputRef.current.focus();
+    }
+  }, [editing]);
+  const toggleEdit = () => {
+    setEditing(!editing);
+    formBack.setFieldsValue({
+      [dataIndex]: record[dataIndex],
+    });
+  };
+  const save = async () => {
+    try {
+      const values = await formBack.validateFields();
+      toggleEdit();
+      handleSave({ ...record, ...values });
+    } catch (errInfo) {
+      console.log('Save failed:', errInfo);
+    }
+  };
+  let childNode = children;
+  if (editable) {
+    childNode = editing ? (
+      <Form.Item
+        style={{
+          margin: 0,
+        }}
+        name={dataIndex}
+        rules={[
+          {
+            required: true,
+            message: `请选择反馈名称`,
+          },
+        ]}
+      >
+        <Select ref={inputRef} showSearch onPressEnter={save} onBlur={save} onSelect={save}>
+          {state.selectList
+            ? state.selectList.map((item, index) => (
+                <Option key={index} value={item}>
+                  {item}
+                </Option>
+              ))
+            : ''}
+        </Select>
+      </Form.Item>
+    ) : (
+      <div
+        className="editable-cell-value-wrap"
+        style={{
+          paddingRight: 24,
+        }}
+        onClick={toggleEdit}
+      >
+        {children}
+      </div>
+    );
+  }
+  return <td {...restProps}>{childNode}</td>;
+};
+
 const AddModal = props => {
   const { callBackSubmit = () => {}, visible, type, formObj, keepTableData } = props;
-
+  const { state, dispatch } = useContext(Context);
   const [Type1, setType1] = useState('');
   const [Type2, setType2] = useState('');
   const [selectValue, setSelectValue] = useState('');
@@ -113,79 +200,100 @@ const AddModal = props => {
   const { TextArea } = Input;
   const { TreeNode } = TreeSelect;
 
-  const [characteristics1, setCharacteristics1] = useState([
-    {
-      name: '一日一次',
-      ID: 0,
-    },
-    {
-      name: '一周一次',
-      ID: 1,
-    },
-    {
-      name: '半月一次',
-      ID: 2,
-    },
-    {
-      name: '一月一次',
-      ID: 3,
-    },
-    {
-      name: '季度一次',
-      ID: 4,
-    },
-    {
-      name: '半年一次',
-      ID: 5,
-    },
-    {
-      name: '一年一次',
-      ID: 6,
-    },
-    {
-      name: '小时类',
-      ID: 7,
-      children: [
-        '1小时一次',
-        '2小时一次',
-        '3小时一次',
-        '4小时一次',
-        '6小时一次',
-        '8小时一次',
-        '12小时一次',
-      ],
-    },
-  ]);
   const [formJson, setFormJson] = useState(null);
   const [visibleLook, setVisibleLook] = useState(false);
 
-  const EditableContext = React.createContext(null);
   const [dataSource, setDataSource] = useState([]);
-  const [count, setCount] = useState(2);
+  const [count, setCount] = useState(0);
+
+  const SortableItem = SortableElement(props => <tr {...props} />);
+  const SortableBody = SortableContainer(props => <tbody {...props} />);
+
+  const [stateType, setStateType] = useState('edit');
+
   const handleDelete = key => {
     const newData = dataSource.filter(item => item.key !== key);
     setDataSource(newData);
   };
-  const defaultColumns = [
+
+  const DragHandle = SortableHandle(() => (
+    <MenuOutlined
+      style={{
+        cursor: 'grab',
+        color: '#999',
+      }}
+    />
+  ));
+
+  const columnsDrag = [
+    {
+      title: '排序',
+      dataIndex: 'sort',
+      width: 30,
+      className: 'drag-visible',
+      render: r => {
+        return (
+          <div
+            style={{
+              width: '100%',
+              height: '100%',
+              display: 'flex',
+              alignItems: 'center',
+              justifyContent: 'center',
+            }}
+            onMouseEnter={() => {
+              setStateType('drag');
+            }}
+          >
+            <DragHandle />
+          </div>
+        );
+      },
+    },
     {
-      title: '反馈名称',
+      title: <span style={{ marginLeft: '12px' }}>反馈名称</span>,
       dataIndex: 'name',
-      width: '70%',
+      width: '60%',
+      className: 'drag-visible',
       editable: true,
+      render: r => {
+        return (
+          <div
+            style={{
+              width: '100%',
+              height: '100%',
+              display: 'flex',
+              alignItems: 'center',
+              paddingLeft: stateType === 'drag' ? '12px' : '0px',
+            }}
+            onMouseEnter={() => {
+              setStateType('edit');
+            }}
+          >
+            {r}
+          </div>
+        );
+      },
     },
     {
       title: '操作',
       dataIndex: 'operation',
+      className: 'drag-visible',
       align: 'center',
       render: (_, record) =>
         dataSource.length >= 1 ? (
           <div style={{ display: 'flex', justifyContent: 'space-around' }}>
+            {record.name ? (
               <span
                 onClick={() => handleLook(record.name)}
                 style={{ color: '#0e8ef7', cursor: 'pointer' }}
               >
                 预览
               </span>
+            ) : (
+              <span style={{ color: '#b3b3b3', cursor: 'not-allowed' }}>预览</span>
+            )}
+
             <span
               onClick={() => handleDelete(record.key)}
               style={{ color: '#fb8686', cursor: 'pointer' }}
@@ -196,96 +304,33 @@ const AddModal = props => {
         ) : null,
     },
   ];
-  const EditableRow = ({ index, ...props }) => {
-    const [formFeed] = Form.useForm();
-    return (
-      <Form form={formFeed} component={false}>
-        <EditableContext.Provider value={formFeed}>
-          <tr {...props} />
-        </EditableContext.Provider>
-      </Form>
-    );
-  };
 
-  const EditableCell = ({
-    title,
-    editable,
-    children,
-    dataIndex,
-    record,
-    handleSave,
-    ...restProps
-  }) => {
-    const [editing, setEditing] = useState(false);
-    const inputRef = useRef(null);
-    const formBack = useContext(EditableContext);
-    useEffect(() => {
-      if (editing && inputRef.current) {
-        inputRef.current.focus();
-      }
-    }, [editing]);
-    const toggleEdit = () => {
-      setEditing(!editing);
-      formBack.setFieldsValue({
-        [dataIndex]: record[dataIndex],
-      });
-    };
-    const save = async () => {
-      try {
-        const values = await formBack.validateFields();
-        toggleEdit();
-        handleSave({
-          ...record,
-          ...values,
-        });
-      } catch (errInfo) {
-        console.log('Save failed:', errInfo);
+  const onSortEnd = ({ oldIndex, newIndex }) => {
+    if (oldIndex !== newIndex) {
+      const newData = arrayMoveImmutable(dataSource.slice(), oldIndex, newIndex).filter(el => !!el);
+      console.log('Sorted items: ', newData);
+      setDataSource(newData);
     }
   };
-    let childNode = children;
-    if (editable) {
-      childNode = editing ? (
-        <Form.Item
-          style={{
-            margin: 0,
-          }}
-          name={dataIndex}
-          rules={[
-            {
-              required: true,
-              message: `${title} is required.`,
-            },
-          ]}
-        >
-          <Select ref={inputRef} showSearch onPressEnter={save} onBlur={save}>
-            {filed
-              ? filed.map((item, index) => (
-                  <Option key={index} value={item}>
-                    {item}
-                  </Option>
-                ))
-              : ''}
-          </Select>
-        </Form.Item>
-      ) : (
-        <div
-          className="editable-cell-value-wrap"
-          style={{
-            paddingRight: 24,
-          }}
-          onClick={toggleEdit}
-        >
-          {children}
-        </div>
+  const DraggableContainer = props => (
+    <SortableBody
+      useDragHandle
+      disableAutoscroll
+      helperClass="row-dragging"
+      onSortEnd={onSortEnd}
+      {...props}
+    />
   );
-    }
-    return <td {...restProps}>{childNode}</td>;
+  const DraggableBodyRow = ({ className, style, ...restProps }) => {
+    const index = dataSource.findIndex(x => x.key === restProps['data-row-key']);
+    return <SortableItem style={{ zIndex: 999999, height: '50px' }} index={index} {...restProps} />;
   };
 
   const handleAdd = () => {
+    setStateType('edit');
     const newData = {
       key: count,
-      name: `${filed[0]}`,
+      name: ``,
     };
     setDataSource([...dataSource, newData]);
     setCount(count + 1);
@@ -300,12 +345,6 @@ const AddModal = props => {
     });
     setDataSource(newData);
   };
-  const components = {
-    body: {
-      row: EditableRow,
-      cell: EditableCell,
-    },
-  };
 
   useEffect(() => {
     let list = [];
@@ -316,6 +355,7 @@ const AddModal = props => {
       }
     });
     setFiled(list);
+    dispatch({ type: 'SET_SELECT_LIST', data: list });
     let arr = [];
     dataSource.map(i => {
       arr.push(i.name);
@@ -323,7 +363,7 @@ const AddModal = props => {
     onChangeFeed(arr.toString(), 1);
   }, [dataSource]);
 
-  const columns = defaultColumns.map(col => {
+  const columns = columnsDrag.map(col => {
     if (!col.editable) {
       return col;
     }
@@ -356,6 +396,7 @@ const AddModal = props => {
         setType1('');
         setType2('');
         setFiled1({});
+        setCount(0);
       } else if (type === 'edit') {
         getParentList();
 
@@ -383,8 +424,9 @@ const AddModal = props => {
           let str = data.feedbackName?.split(',');
           let arr = [];
           str?.forEach((i, index) => {
-            arr.push({ key: index + 1, name: i });
+            arr.push({ key: index, name: i });
           });
+          setCount(arr.length);
           setDataSource(arr);
           setVisibleChecked(data.isSubmit === '是');
           setVisibleChecked1(data.autoAssign === '是');
@@ -413,6 +455,7 @@ const AddModal = props => {
       setKeepTree([]);
       setKeepData([]);
       setKeep([]);
+      setCount(0);
     }
   }, [visible]);
 
@@ -480,7 +523,11 @@ const AddModal = props => {
             dataSource.forEach(i => {
               arr.push(i.name);
             });
-            obj.feedbackName = arr.toString();
+            let newArr = arr.filter(i => i !== '');
+            if (newArr.length === 0) {
+              message.warning('请选择填报内容');
+            } else {
+              obj.feedbackName = newArr.toString();
               if (type === 'add') {
                 CM_XWBPlan_DataEditORAdd({
                   ...obj,
@@ -529,6 +576,7 @@ const AddModal = props => {
                 });
               }
             }
+          }
         });
       }
     });
@@ -675,6 +723,7 @@ const AddModal = props => {
           arr.push(item.accountName);
         });
         setFiled(arr);
+        dispatch({ type: 'SET_SELECT_LIST', data: arr });
         setKeepFeed(arr);
       }
     });
@@ -1058,8 +1107,6 @@ const AddModal = props => {
     },
   ];
 
-  const timeChange = e => {};
-
   return (
     <Drawer
       title="模板配置"
@@ -1075,7 +1122,12 @@ const AddModal = props => {
         </Space>
       }
     >
-      <Form form={form} labelCol={{ span: 7 }} style={{ overflowY: 'scroll' }}>
+      <Form
+        form={form}
+        labelCol={{ span: 7 }}
+        style={{ overflowY: 'scroll' }}
+        className={styles.dragTable}
+      >
         <Row>
           <Col span={24}>
             <div className={styles.titleIcon}>
@@ -1252,16 +1304,6 @@ const AddModal = props => {
               }
               name="feedbackName"
               labelCol={{ span: 5 }}
-              rules={[
-                {
-                  validator: (rule, value) => {
-                    if (dataSource.length === 0) {
-                      return Promise.reject('填报内容必填');
-                    }
-                    return Promise.resolve();
-                  },
-                },
-              ]}
               style={{ marginBottom: '10px' }}
             >
               {/* <Select
@@ -1288,16 +1330,36 @@ const AddModal = props => {
               >
                 请选择此设备巡检后的反馈表单，来源与类型维设备反馈的台账
               </div>
+              {stateType === 'drag'
+                ? dataSource.length > 0 && (
                     <Table
-                size="small"
-                components={components}
-                rowClassName={() => 'editable-row'}
-                bordered
+                      pagination={false}
                       dataSource={dataSource}
                       columns={columns}
+                      rowKey={record => record.key}
+                      components={{
+                        body: {
+                          wrapper: DraggableContainer,
+                          row: DraggableBodyRow,
+                        },
+                      }}
+                    />
+                  )
+                : dataSource.length > 0 && (
+                    <Table
                       pagination={false}
-                id="box"
+                      dataSource={dataSource}
+                      columns={columns}
+                      rowKey={record => record.key}
+                      rowClassName={() => 'editable-row'}
+                      components={{
+                        body: {
+                          row: EditableRow,
+                          cell: EditableCell,
+                        },
+                      }}
                     />
+                  )}
             </Item>
           </Col>
           <Col span={24}>
@@ -1313,65 +1375,12 @@ const AddModal = props => {
               添加设备反馈
             </Button>
           </Col>
-          {/* <Col span={24}>
-            <Item label="执行周期" name="docycle" labelCol={{ span: 5 }}>
-              <TreeSelect
-                showSearch
-                dropdownStyle={{ maxHeight: 400, overflow: 'auto' }}
-                placeholder="请选择执行周期"
-                allowClear
-                treeDefaultExpandAll
-                showCheckedStrategy
-              >
-                {characteristics1.map(i => mapTreeSelect(i))}
-              </TreeSelect>
-            </Item>
-          </Col> */}
           <BaseTimeConfig
             keepTimeData={keepTimeData}
             ref={timeData}
             visible={visible}
             type={type}
           />
-          {/* <Col span={24}>
-            <Item label="周期模式" name="docycle1" labelCol={{ span: 5 }}>
-              <Radio.Group value={timeData} onChange={timeChange}>
-                <Radio value={1}>按小时</Radio>
-                <Radio value={2}>按日</Radio>
-                <Radio value={3}>按周</Radio>
-                <Radio value={4}>按月</Radio>
-                <Radio value={5}>按季度</Radio>
-                <Radio value={6}>按年</Radio>
-              </Radio.Group>
-            </Item>
-          </Col>
-          <Col span={24}>
-            <Item label="周期设置" labelCol={{ span: 5 }} style={{ marginBottom: '0' }}>
-              <Row>
-                <Col span={8}>
-                  <Item name="docycle2">
-                    <InputNumber min={1} defaultValue={1} style={{ width: '50px' }} />
-                  </Item>
-                </Col>
-                <Col span={3}>
-                  <div style={{ marginTop: '5px', marginLeft: '2px' }}>日</div>
-                </Col>
-                <Col span={8}>
-                  <Item name="docycle3">
-                    <InputNumber min={1} defaultValue={1} style={{ width: '50px' }} />
-                  </Item>
-                </Col>
-                <Col span={3}>
-                  <div style={{ marginTop: '5px', marginLeft: '2px' }}>次</div>
-                </Col>
-              </Row>
-            </Item>
-          </Col>
-          <Col span={24}>
-            <Item label="执行时间" name="docycle4" labelCol={{ span: 5 }}>
-              <Input />
-            </Item>
-          </Col> */}
           <Col span={24}>
             <div className={styles.titleIcon}>
               <div className={styles.icon} />

src/pages/bsmanager/patrolMaintenance/maintenance/components/BaseTimeConfig.jsx

@@ -28,7 +28,7 @@ const BaseConfig = (props, ref) => {
   const [MonthType2, setMonthType2] = useState('首');
   const [MonthType3, setMonthType3] = useState('首');
   const [MonthDayType1, setMonthDayType1] = useState('1'); // 月选择-日期
-  const [MonthDayType2, setMonthDayType2] = useState('31'); // 月选择-日期
+  const [MonthDayType2, setMonthDayType2] = useState('28'); // 月选择-日期
   const [cities, setCities] = useState('周一');
   const [secondCity, setSecondCity] = useState(cityData[provinceData[0]][0]);
   const [startLen, setstartLen] = useState(1); // 开始日期
@@ -123,7 +123,7 @@ const BaseConfig = (props, ref) => {
       setMonthType1('首');
       setMonthType2('首');
       setMonthDayType1('1');
-      setMonthDayType2('31');
+      setMonthDayType2('28');
     }
     setValue(e.target.value);
   };
@@ -214,7 +214,7 @@ const BaseConfig = (props, ref) => {
                   value > MonthDayType1 && setMonthDayType1(value);
                 }
                 if (MonthType2 === '首') {
-                  value > MonthDayType2 && setMonthDayType2('31');
+                  value > MonthDayType2 && setMonthDayType2('28');
                 }
               }}
               options={[
@@ -271,7 +271,7 @@ const BaseConfig = (props, ref) => {
                   setMonthDayType1(startLen);
                 }
                 if (MonthDayType2 < startLen) {
-                  setMonthDayType2('31');
+                  setMonthDayType2('28');
                 }
               } else if (value === 2) {
                 if (MonthType2 === '末') {
@@ -281,7 +281,7 @@ const BaseConfig = (props, ref) => {
                     setMonthDayType1(startLen);
                   }
                   if (MonthDayType2 < startLen) {
-                    setMonthDayType2('31');
+                    setMonthDayType2('28');
                   }
                 }
               }

src/pages/bsmanager/patrolMaintenance/maintenance/maintenance.jsx

 /* eslint-disable no-else-return */
 /* eslint-disable react-hooks/rules-of-hooks */
 /* eslint-disable camelcase */
-import React, { useState, useEffect, useMemo } from 'react';
+import React, { useState, createContext, useEffect, useMemo, useReducer } from 'react';
 import { Space, Table, Popconfirm, Tooltip, Button, notification, Tag, message } from 'antd';
 import {
   CM_XWBPlan_DataList,
@@ -23,8 +23,11 @@ import AddModalNew from './AddModalNew';
 import OptionEditModal from './OptionEditModal';
 import SortModal from './SortModal';
 import DragTable from '@/components/DragTable/DragTable';
+import { defaultState, reducer } from './store/reducer'; // 状态管理
 
+export const Context = createContext();
 const maintenance = () => {
+  const [state, dispatch] = useReducer(reducer, defaultState);
   const [addVisible, setAddVisible] = useState(false);
   const [addVisibleNew, setAddVisibleNew] = useState(false);
   const [optionVisible, setOptionVisible] = useState(false);
@@ -791,6 +794,7 @@ const maintenance = () => {
   };
 
   return (
+    <Context.Provider value={{ state, dispatch }}>
       <div className={styles.maintenanceContainer}>
         <div className={styles.contentContainers}>
           <div style={{ height: '50px', backgroundColor: 'white' }}>
@@ -934,6 +938,7 @@ const maintenance = () => {
           />
         </div>
       </div>
+    </Context.Provider>
   );
 };
 

src/pages/bsmanager/patrolMaintenance/maintenance/maintenance.less

@@ -206,7 +206,8 @@
   display: flex;
   align-items: center;
 }
-:global {
+.dragTable {
+  :global {
     .editable-cell {
       position: relative;
     }
@@ -219,10 +220,43 @@
     .editable-row:hover .editable-cell-value-wrap {
       padding: 4px 11px;
       border: 1px solid #d9d9d9;
+      height: 32px;
       border-radius: 2px;
     }
 
     [data-theme='dark'] .editable-row:hover .editable-cell-value-wrap {
       border: 1px solid #434343;
     }
+    .ant-table-tbody > tr > td {
+      padding: 8px 16px;
+      height: 50px;
+    }
+    .row-dragging {
+      background: #fafafa;
+      border: 1px solid #ccc;
+    }
+
+    .row-dragging td {
+      padding: 16px;
+    }
+
+    .row-dragging .drag-visible {
+      visibility: visible;
+    }
+  }
+}
+// 拖拽组件拖拽行样式会丢失写全局样式解决
+:global {
+  .row-dragging {
+    background: #fafafa;
+    border: 1px solid #ccc;
+  }
+
+  .row-dragging td {
+    padding: 16px;
+  }
+
+  .row-dragging .drag-visible {
+    visibility: visible;
+  }
 }

src/pages/bsmanager/patrolMaintenance/maintenance/store/reducer.js

+/* eslint-disable no-unused-expressions */
+export const defaultState = {
+  selectList: [],
+};
+
+export const reducer = (state, action) => {
+  switch (action.type) {
+    case 'SET_SELECT_LIST':
+      return { ...state, selectList: action.data };
+    default:
+      defaultState;
+  }
+};