fix: 增加默认排序字段

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

@@ -20,7 +20,6 @@ import {
   Checkbox,
 } from 'antd';
 import { PlusOutlined, InfoCircleOutlined, EyeOutlined } from '@ant-design/icons';
-import { LoadEventFields } from '@/services/tablemanager/tablemanager';
 import {
   GetCM_Ledger_LoadLedgerTable,
   GetCMLedger_QueryLedgers,
@@ -29,11 +28,13 @@ import {
   Ledger_SaveLedger,
   Ledger_ParentLedgers,
 } from '@/services/standingBook/api';
-import { Account, getFieldInfo } from 'panda-xform';
-import ChangeAdd from './changeAdd';
+import { Account } from 'panda-xform';
+import SelectFiled from './SelectFiled';
 import EditTable from './EditTable';
 import styles from './BookConfigNew.less';
 
+const isObject = (obj) => typeof obj === 'object'
+
 const pagingOptions = [
   { label: '20条/页', value: 20 },
   { label: '50条/页', value: 50 },
@@ -42,6 +43,121 @@ const pagingOptions = [
   { label: '500条/页', value: 500 },
 ]
 
+const widgetData = {
+  TextInput: {
+    name: '文本',
+    type: '文本控件',
+  },
+  TextArea: {
+    name: '多行文本',
+    type: '文本控件',
+  },
+  NumberInput: {
+    name: '数值',
+    type: '文本控件',
+  },
+  RichText: {
+    name: '富文本',
+    type: '文本控件',
+  },
+  Coding: {
+    name: '编码',
+    type: '文本控件',
+  },
+  SearchLocation: {
+    name: '地址位置',
+    type: '文本控件',
+  },
+  ComboBox: {
+    name: '下拉框',
+    type: '选择器控件',
+  },
+  RadioButton: {
+    name: '单选框',
+    type: '选择器控件',
+  },
+  CheckBox: {
+    name: '复选框',
+    type: '选择器控件',
+  },
+  SwitchSelector: {
+    name: '开关按钮',
+    type: '选择器控件',
+  },
+  RelevanceSelect: {
+    name: '关联选择',
+    type: '选择器控件',
+  },
+  CascadeSelector: {
+    name: '联级选择',
+    type: '选择器控件',
+  },
+  PersonSelector: {
+    name: '人员选择',
+    type: '业务控件',
+  },
+  DeptSelector: {
+    name: '部门选择',
+    type: '业务控件',
+  },
+  AccountSelector: {
+    name: '台账选择',
+    type: '业务控件',
+  },
+  DateTime: {
+    name: '日期选择',
+    type: '时间控件',
+  },
+  Time: {
+    name: '时间选择',
+    type: '时间控件',
+  },
+  FileUpload: {
+    name: '附件',
+    type: '附件控件',
+  },
+  Coordinate: {
+    name: '地图坐标',
+    type: 'GIS控件',
+  },
+  DrawPath: {
+    name: '路径控件',
+    type: 'GIS控件',
+  },
+  DrawArea: {
+    name: '区域控件',
+    type: 'GIS控件',
+  },
+  Device: {
+    name: '设备选择',
+    type: 'GIS控件',
+  },
+  RelationForm: {
+    name: '关联表单',
+    type: '高级控件',
+  },
+  AutoCalculate: {
+    name: '自动计算',
+    type: '高级控件',
+  },
+};
+
+const getFieldInfo = (formJson) => {
+  let obj = {};
+  let parent = formJson?.properties;
+  if (isObject(parent)) {
+    for (let v in parent) {
+      let child = parent[v]?.properties;
+      if (isObject(child)) {
+        for (let s in child) {
+          obj[s] = { ...child[s], ...widgetData[(child?.[s]?.widget)] };
+        }
+      }
+    }
+  }
+  return obj;
+};
+
 const { Option } = Select;
 const { TextArea } = Input;
 const BookConfigNew = props => {
@@ -76,6 +192,7 @@ const BookConfigNew = props => {
   const [currentId, setCurrentId] = useState(''); // 新增成功后保存的ID
   const [EnableImportExport, setEnableImportExport] = useState(false) //是否导入导出
   const [EnableSiteFilter, setEnableSiteFilter] = useState(false) //是否站点过滤
+  const [defaultOrder, setDefaultOrder] = useState({})
   const [form] = Form.useForm();
   const tableRef = useRef(null);
   const accountRef = useRef(null);
@@ -146,6 +263,8 @@ const BookConfigNew = props => {
           let obj =
             type === 'add' ? { ...datas, Order: maxLength } : { ...datas, Order, ID: formObj.ID };
           obj.LedgerFieids = tableRef.current.onFinish();
+          obj.DefaultSortFields = defaultOrder.DefaultSortFields || ''
+          obj.SortOrder = defaultOrder.SortOrder || ''
           obj.LedgerFieids.forEach(i => {
             if (i.ColumnCalculationRule === '无') {
               i.ColumnCalculationRule = 0;
@@ -159,6 +278,7 @@ const BookConfigNew = props => {
           });
           currentId ? (obj.ID = currentId) : '';
           setSubmitObj(obj);
+          console.log('obj', obj)
           Ledger_SaveLedger(obj)
             .then(res => {
               setModalLoading(false);
@@ -252,6 +372,7 @@ const BookConfigNew = props => {
         Ledger_QueryLedger({ ledgerId: formObj.ID }).then(res => {
           if (res.code === 0) {
             form.setFieldsValue({ ...res.data });
+            setDefaultOrder({ DefaultSortFields: res.data.DefaultSortFields, SortOrder: res.data.SortOrder })
             setEnableImportExport(res.data.EnableImportExport)
             setEnableSiteFilter(res.data.EnableSiteFilter)
             setOrder(res.data.Order);
@@ -306,119 +427,6 @@ const BookConfigNew = props => {
       }
     });
   };
-  // const getFieldInfo = formJson => {
-  //   let obj = {};
-  //   let parent = formJson?.properties;
-  //   if (isObject(parent)) {
-  //     for (let v in parent) {
-  //       let child = parent[v]?.properties;
-  //       if (isObject(child)) {
-  //         for (let s in child) {
-  //           obj[s] = { ...child[s], ...widgetData[(child?.[s]?.widget)] };
-  //         }
-  //       }
-  //     }
-  //   }
-  //   return obj;
-  // };
-  // const widgetData = {
-  //   TextInput: {
-  //     name: '文本',
-  //     type: '文本控件',
-  //   },
-  //   TextArea: {
-  //     name: '多行文本',
-  //     type: '文本控件',
-  //   },
-  //   NumberInput: {
-  //     name: '数值',
-  //     type: '文本控件',
-  //   },
-  //   RichText: {
-  //     name: '富文本',
-  //     type: '文本控件',
-  //   },
-  //   Coding: {
-  //     name: '编码',
-  //     type: '文本控件',
-  //   },
-  //   SearchLocation: {
-  //     name: '地址位置',
-  //     type: '文本控件',
-  //   },
-  //   ComboBox: {
-  //     name: '下拉框',
-  //     type: '选择器控件',
-  //   },
-  //   RadioButton: {
-  //     name: '单选框',
-  //     type: '选择器控件',
-  //   },
-  //   CheckBox: {
-  //     name: '复选框',
-  //     type: '选择器控件',
-  //   },
-  //   SwitchSelector: {
-  //     name: '开关按钮',
-  //     type: '选择器控件',
-  //   },
-  //   RelevanceSelect: {
-  //     name: '关联选择',
-  //     type: '选择器控件',
-  //   },
-  //   CascadeSelector: {
-  //     name: '联级选择',
-  //     type: '选择器控件',
-  //   },
-  //   PersonSelector: {
-  //     name: '人员选择',
-  //     type: '业务控件',
-  //   },
-  //   DeptSelector: {
-  //     name: '部门选择',
-  //     type: '业务控件',
-  //   },
-  //   AccountSelector: {
-  //     name: '台账选择',
-  //     type: '业务控件',
-  //   },
-  //   DateTime: {
-  //     name: '日期选择',
-  //     type: '时间控件',
-  //   },
-  //   Time: {
-  //     name: '时间选择',
-  //     type: '时间控件',
-  //   },
-  //   FileUpload: {
-  //     name: '附件',
-  //     type: '附件控件',
-  //   },
-  //   Coordinate: {
-  //     name: '地图坐标',
-  //     type: 'GIS控件',
-  //   },
-  //   DrawPath: {
-  //     name: '路径控件',
-  //     type: 'GIS控件',
-  //   },
-  //   DrawArea: {
-  //     name: '区域控件',
-  //     type: 'GIS控件',
-  //   },
-  //   Device: {
-  //     name: '设备选择',
-  //     type: 'GIS控件',
-  //   },
-  //   RelationForm: {
-  //     name: '关联表单',
-  //     type: '高级控件',
-  //   },
-  //   AutoCalculate: {
-  //     name: '自动计算',
-  //     type: '高级控件',
-  //   },
-  // };
   const isObject = obj => typeof obj === 'object';
 
   // 切换表后数据处理为对应格式
@@ -558,7 +566,6 @@ const BookConfigNew = props => {
       // }),
       arr,
     );
-
     form.setFieldsValue(obj);
     saveOutFieldsLength(prop.pickItem, allFileds);
   };
@@ -583,7 +590,8 @@ const BookConfigNew = props => {
   };
   // 勾选字段
   const pickFiled = fileds => {
-    if (!form.getFieldValue('TableName')) {
+    const { TableName, Fields } = form.getFieldsValue(true)
+    if (!TableName) {
       notification.error({ message: '提示', duration: 3, description: '请选择台账表' });
       return;
     }
@@ -591,7 +599,7 @@ const BookConfigNew = props => {
     let fil = { ...filed };
     fil['外部字段'] = [];
     let isExternal;
-    let list = form.getFieldValue(fileds).length ? form.getFieldValue(fileds).split(',') : [];
+    let list = Fields.length ? Fields.split(',') : [];
     list.forEach(item => {
       isExternal = allFileds.some(val => val === item);
       if (!isExternal && item !== '') {
@@ -881,12 +889,14 @@ const BookConfigNew = props => {
             </Col>
           </Row>
         </Form>
-        <ChangeAdd
+        <SelectFiled
           visible={isVisible}
           onCancel={() => {
             setIsVisible(false);
             setCheckedList([]);
           }}
+          defaultOrder={defaultOrder}
+          setDefaultOrder={setDefaultOrder}
           callBackSubmit={onOK}
           newCheckedList={checkedList}
           filed={filed}

src/pages/bsmanager/base/standingBook/SelectFiled.js

+import React, { useState, useEffect, useCallback, useRef } from 'react';
+import { Form, Modal, Space, Divider, Radio, Checkbox, Select } from 'antd';
+import styles from './standingBook.less';
+import DragTable from '@/components/DragTable/DragTable';
+
+const CheckboxGroup = Checkbox.Group;
+
+const SelectFiled = (props) => {
+  // 自定义获取改变后的值hooks
+  const usePrevious = value => {
+    const ref = useRef();
+    useEffect(() => {
+      ref.current = value;
+    });
+    return ref.current;
+  };
+  const { callBackSubmit, pickItem, visible, filed, newCheckedList, defaultOrder, setDefaultOrder } = props;
+  const [loading, setLoading] = useState(false);
+  const [title, setTitle] = useState([]);
+  const [checkedList, setCheckedList] = useState([]); // 选中的复选框内容
+  const [indeterminate, setIndeterminate] = useState([]);
+  const [checkAll, setCheckAll] = useState([]);
+  const [selectData, setSelectData] = useState([]);
+  const [isFirst, setIsFirst] = useState(true);
+  const prevAmount = usePrevious({ checkedList });
+
+  const onChangeList = (list, index, title) => {
+    const checkedListArr = [...checkedList];
+    checkedListArr[index] = list;
+    setCheckedList(checkedListArr);
+    const indeterminateArr = [...indeterminate];
+    const checkAllArr = [...checkAll];
+    indeterminateArr[index] = !!list.length && list.length < filed[title].length;
+    checkAllArr[index] = list.length === filed[title].length;
+    setIndeterminate(indeterminateArr);
+    setCheckAll(checkAllArr);
+  };
+
+  const onCheckAllChange = e => {
+    const indeterminateArr = [...indeterminate];
+    const checkAllArr = [...checkAll];
+    const checkedListArr = [...checkedList];
+    checkAllArr[e.target.index] = e.target.checked;
+    indeterminateArr[e.target.index] = false;
+    // eslint-disable-next-line no-unused-expressions
+    e.target.checked
+      ? (checkedListArr[e.target.index] = e.target.checkvalue)
+      : (checkedListArr[e.target.index] = []);
+    setCheckedList(checkedListArr);
+    setIndeterminate(indeterminateArr);
+    setCheckAll(checkAllArr);
+  };
+  // 监听用户选择的字段名
+  useEffect(() => {
+    if (prevAmount) {
+      selectAll();
+    }
+  }, [checkedList]);
+
+  const selectAll = () => {
+    if (!visible) {
+      return;
+    }
+    // 是否第一次保存数据
+    if (isFirst) {
+      setIsFirst(false);
+      return;
+    }
+    // 新的选择后的数据（已选字段列表数据）
+    let newSelect = JSON.parse(JSON.stringify(selectData));
+    // 当前选中的
+    let currentArr;
+    // 上一次选中的
+    let preArr;
+    // 获取扁平化后的数组
+    currentArr = new Set(checkedList.flat());
+    preArr = new Set(prevAmount.checkedList.flat());
+
+    // 找出相同的部分
+    let someArr = [...new Set([...currentArr].filter(x => preArr.has(x)))];
+    // 复选框事选中还是取消选中 add or del
+    let checkType;
+    if ([...currentArr].length > [...preArr].length) {
+      checkType = 'add';
+    } else if ([...currentArr].length < [...preArr].length) {
+      checkType = 'del';
+    }
+    if (checkType === 'add') {
+      // 添加新选中的元素
+      currentArr.forEach(item => {
+        if (someArr.indexOf(item) === -1) {
+          newSelect.push({ name: item });
+        }
+      });
+    } else if (checkType === 'del') {
+      // 删除取消勾选的元素
+      preArr.forEach(item => {
+        if (someArr.indexOf(item) === -1) {
+          newSelect.splice(newSelect.findIndex(ele => ele.name === item), 1);
+        }
+      });
+    }
+    setSelectData(newSelect);
+  };
+
+  const onSubmit = () => {
+    let newArr = selectData.map(item => item.name);
+    callBackSubmit({ checkedList, str: newArr.join(','), pickItem });
+  };
+  const columns = [
+    {
+      title: '字段名',
+      dataIndex: 'name',
+      width: 150,
+      key: 'name',
+      ellipsis: true,
+    },
+    {
+      title: '默认排序方式',
+      dataIndex: 'DefaultSortFields',
+      width: 150,
+      key: 'DefaultSortFields',
+      ellipsis: true,
+      render: (_, r) => {
+        const options = [
+          { label: '正序', value: 'asc' },
+          { label: '逆序', value: 'desc' }
+        ]
+        const { DefaultSortFields, SortOrder } = defaultOrder
+        const onChange = (e) => {
+          setDefaultOrder({ DefaultSortFields: r.name, SortOrder: e.target.value })
+        }
+        return (
+          <Radio.Group
+            value={r.name === DefaultSortFields ? SortOrder : ''}
+            options={options}
+            onChange={onChange}
+          />
+        )
+      }
+    }
+  ];
+  useEffect(() => {
+    if (visible) {
+      let arr = Object.keys(filed);
+      setTitle(arr);
+      let checkArr = [];
+      let indeterminateArr = [];
+      let checkAllArr = [];
+      arr.map((item, index) => {
+        checkArr[index] = [];
+        newCheckedList.map(checkItem => {
+          if (filed[item].includes(checkItem)) {
+            checkArr[index].push(checkItem);
+          }
+        });
+        indeterminateArr.push(
+          !!checkArr[index].length && checkArr[index].length < filed[item].length,
+        );
+        checkAllArr.push(checkArr[index].length === filed[item].length);
+      });
+      setCheckedList(checkArr);
+      setIndeterminate(indeterminateArr);
+      setCheckAll(checkAllArr);
+      // eslint-disable-next-line arrow-body-style
+      let newArr = newCheckedList.map(item => {
+        return { name: item };
+      });
+      if (newArr.length === 1 && newArr[0].name === '') {
+        newArr = [];
+      }
+      setSelectData(newArr);
+    } else {
+      // 弹窗关闭时清空数据
+      setSelectData([]);
+      setCheckedList([]);
+      setCheckAll([]);
+      setIndeterminate([]);
+      setIsFirst(true);
+    }
+  }, [visible]);
+
+  const dragCallBack = arr => {
+    if (arr && !isFirst) {
+      setSelectData(arr);
+    }
+  };
+  return (
+    <Modal
+      title="字段集选择"
+      bodyStyle={{ width: '100%', minHeight: '100px' }}
+      style={{ top: '10px' }}
+      width="750px"
+      centered
+      maskClosable={false}
+      cancelText="取消"
+      okText="确认"
+      {...props}
+      onOk={() => onSubmit()}
+      confirmLoading={loading}
+      forceRender
+      getContainer={false}
+      destroyOnClose
+    >
+      {visible && (
+        <div className={styles.listCard}>
+          <div className={styles.cardItem} style={{ borderRight: '1px solid #99bbe8' }}>
+            <Divider
+              orientation="left"
+              style={{ margin: '0 0 10px 0', backgroundColor: '#dfe8f6' }}
+            >
+              待选字段列表
+            </Divider>
+            <div className={styles.cardContent}>
+              {title.map((item, index) => {
+                return (
+                  <div className={styles.cardItemData} key={index}>
+                    <Divider
+                      orientation="left"
+                      style={{
+                        margin: '0 0 10px 0',
+                        color: '#15428b',
+                        borderTopColor: '#99bbe8',
+                      }}
+                    >
+                      {item}{' '}
+                      <Checkbox
+                        indeterminate={indeterminate[index]}
+                        onChange={onCheckAllChange}
+                        index={index}
+                        checkvalue={filed[item]}
+                        checked={checkAll[index]}
+                      >
+                        {' '}
+                      </Checkbox>
+                    </Divider>
+                    <CheckboxGroup
+                      options={filed[item]}
+                      value={checkedList[index]}
+                      onChange={e => onChangeList(e, index, item)}
+                    />
+                  </div>
+                );
+              })}
+            </div>
+          </div>
+          <div className={styles.cardItem}>
+            <Divider
+              orientation="left"
+              style={{ margin: '0 0 10px 0', backgroundColor: '#dfe8f6' }}
+            >
+              已选字段列表（可拖动调列表顺序）
+            </Divider>
+            <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 SelectFiled;