feat(部门管理): 添加序号排序

src/components/Upload/Image/index.tsx

@@ -69,6 +69,7 @@ export default ({ onChange, value, ...extraProps }: UploadImageProps) => {
           showUploadList={false}
           onChange={handleChange}
           beforeUpload={beforeUpload}
+          accept={imageTypes && imageTypes.length ? imageTypes.toString() : ''}
           {...extraProps}
         >
           <div className={'upload-image-content'} style={extraProps.style}>

src/pages/device/Category/Save/index.tsx

@@ -28,6 +28,7 @@ interface Props {
   visible: boolean;
   close: () => void;
   data: Partial<CategoryItem>;
+  reload?: () => void;
 }
 
 const Save = (props: Props) => {
@@ -70,6 +71,9 @@ const Save = (props: Props) => {
       : ((await service.save(value as any)) as Response<CategoryItem>);
     if (resp.status === 200) {
       message.success('操作成功!');
+      if (props.reload) {
+        props.reload();
+      }
     } else {
       message.error('操作失败');
     }

src/pages/device/Category/index.tsx

@@ -24,9 +24,33 @@ export const state = model<{
   current: {},
   parentId: undefined,
 });
+
+export const getSortIndex = (data: CategoryItem[], pId?: string): number => {
+  let sortIndex = 0;
+  if (data.length) {
+    if (!pId) {
+      return data.sort((a, b) => b.sortIndex - a.sortIndex)[0].sortIndex + 1;
+    }
+    data.some((department) => {
+      if (department.id === pId && department.children) {
+        const sortArray = department.children.sort((a, b) => b.sortIndex - a.sortIndex);
+        sortIndex = sortArray[0].sortIndex + 1;
+        return true;
+      } else if (department.children) {
+        sortIndex = getSortIndex(department.children, pId);
+        return !!sortIndex;
+      }
+      return false;
+    });
+  }
+  return sortIndex;
+};
+
 const Category = observer(() => {
   const actionRef = useRef<ActionType>();
   const [param, setParam] = useState({});
+  const [sortParam, setSortParam] = useState<any>({ name: 'sortIndex', order: 'asc' });
+  const [treeData, setTreeData] = useState<any[]>([]);
 
   const intl = useIntl();
 
@@ -41,6 +65,8 @@ const Category = observer(() => {
     {
       title: '分类排序',
       dataIndex: 'sortIndex',
+      valueType: 'digit',
+      sorter: true,
       // render: (text) => (
       //   <Space>{text}<EditOutlined onClick={() => {
 
@@ -89,7 +115,11 @@ const Category = observer(() => {
           key={'add-next'}
           onClick={() => {
             state.visible = true;
+            const sortIndex = getSortIndex(treeData, record.id);
             state.parentId = record.id;
+            state.current = {
+              sortIndex,
+            };
           }}
           disabled={getButtonPermission('device/Category', ['update', 'add'])}
         >
@@ -106,9 +136,9 @@ const Category = observer(() => {
           disabled={getButtonPermission('device/Category', ['delete'])}
           type="link"
           style={{ padding: 0 }}
+          key={'delete'}
         >
           <Popconfirm
-            key={'delete'}
             onConfirm={async () => {
               const resp = (await service.remove(record.id)) as Response<any>;
               if (resp.status === 200) {
@@ -147,7 +177,12 @@ const Category = observer(() => {
         params={param}
         search={false}
         request={async (params) => {
-          const response = await service.queryTree({ paging: false, ...params });
+          const response = await service.queryTree({
+            paging: false,
+            sorts: [sortParam],
+            ...params,
+          });
+          setTreeData(response.result);
           return {
             code: response.message,
             result: {
@@ -161,10 +196,23 @@ const Category = observer(() => {
         }}
         rowKey="id"
         columns={columns}
+        onChange={(_, f, sorter: any) => {
+          if (sorter.order) {
+            setSortParam({ name: sorter.columnKey, order: sorter.order.replace('end', '') });
+          } else {
+            setSortParam({ name: 'sortIndex', value: 'asc' });
+          }
+        }}
         headerTitle={
           <Button
             disabled={getButtonPermission('device/Category', ['add'])}
-            onClick={() => (state.visible = true)}
+            onClick={() => {
+              const sortIndex = getSortIndex(treeData, '');
+              state.current = {
+                sortIndex,
+              };
+              state.visible = true;
+            }}
             key="button"
             icon={<PlusOutlined />}
             type="primary"
@@ -185,6 +233,8 @@ const Category = observer(() => {
           state.visible = false;
           state.current = {};
           state.parentId = undefined;
+        }}
+        reload={() => {
           actionRef.current?.reload();
         }}
       />

src/pages/device/Instance/index.tsx

@@ -72,30 +72,29 @@ const Instance = () => {
     <Button
       type={'link'}
       style={{ padding: 0 }}
+      key={'detail'}
       onClick={() => {
         InstanceModel.current = record;
         const url = getMenuPathByParams(MENUS_CODE['device/Instance/Detail'], record.id);
         history.push(url);
       }}
-      disabled={getButtonPermission('device/Instance', ['view'])}
     >
       <Tooltip
         title={intl.formatMessage({
           id: 'pages.data.option.detail',
           defaultMessage: '查看',
         })}
-        key={'detail'}
       >
         <EyeOutlined />
       </Tooltip>
     </Button>,
     <Button
       type={'link'}
+      key={'state'}
       style={{ padding: 0 }}
       disabled={getButtonPermission('device/Product', ['action'])}
     >
       <Popconfirm
-        key={'state'}
         title={intl.formatMessage({
           id: `pages.data.option.${
             record.state.value !== 'notActive' ? 'disabled' : 'enabled'
@@ -130,6 +129,7 @@ const Instance = () => {
 
     <Button
       type={'link'}
+      key={'delete'}
       style={{ padding: 0 }}
       disabled={getButtonPermission('device/Instance', ['delete'])}
     >
@@ -140,7 +140,6 @@ const Instance = () => {
               ? 'pages.data.option.remove.tips'
               : 'pages.device.instance.deleteTip',
         })}
-        key={'delete'}
         onConfirm={async () => {
           if (record.state.value === 'notActive') {
             await service.remove(record.id);
@@ -483,10 +482,10 @@ const Instance = () => {
               <Button
                 disabled={getButtonPermission('device/Instance', ['action'])}
                 type={'link'}
+                key={'state'}
                 style={{ padding: 0 }}
               >
                 <Popconfirm
-                  key={'state'}
                   title={intl.formatMessage({
                     id: `pages.data.option.${
                       record.state.value !== 'notActive' ? 'disabled' : 'enabled'

src/pages/media/Device/index.tsx

@@ -63,6 +63,7 @@ const Device = () => {
           defaultMessage: '操作成功!',
         }),
       );
+      actionRef.current?.reload();
     }
   };
 
@@ -98,6 +99,7 @@ const Device = () => {
       render: (_, row) => {
         return providerType[row.provider];
       },
+      valueType: 'select',
       valueEnum: {
         [ProviderValue.FIXED]: {
           text: '固定地址',
@@ -125,20 +127,20 @@ const Device = () => {
         defaultMessage: '设备厂家',
       }),
     },
-    {
-      dataIndex: 'model',
-      title: intl.formatMessage({
-        id: 'pages.media.device.model',
-        defaultMessage: '型号',
-      }),
-    },
-    {
-      dataIndex: 'firmware',
-      title: intl.formatMessage({
-        id: 'pages.media.device.firmware',
-        defaultMessage: '固件版本',
-      }),
-    },
+    // {
+    //   dataIndex: 'model',
+    //   title: intl.formatMessage({
+    //     id: 'pages.media.device.model',
+    //     defaultMessage: '型号',
+    //   }),
+    // },
+    // {
+    //   dataIndex: 'firmware',
+    //   title: intl.formatMessage({
+    //     id: 'pages.media.device.firmware',
+    //     defaultMessage: '固件版本',
+    //   }),
+    // },
     {
       dataIndex: 'state',
       title: intl.formatMessage({

src/pages/system/Department/index.tsx

@@ -36,14 +36,37 @@ export const State = model<ModelType>({
   parentId: undefined,
 });
 
+export const getSortIndex = (data: DepartmentItem[], pId?: string): number => {
+  let sortIndex = 0;
+  if (data.length) {
+    if (!pId) {
+      return data.sort((a, b) => b.sortIndex - a.sortIndex)[0].sortIndex + 1;
+    }
+    data.some((department) => {
+      if (department.id === pId && department.children) {
+        const sortArray = department.children.sort((a, b) => b.sortIndex - a.sortIndex);
+        sortIndex = sortArray[0].sortIndex + 1;
+        return true;
+      } else if (department.children) {
+        sortIndex = getSortIndex(department.children, pId);
+        return !!sortIndex;
+      }
+      return false;
+    });
+  }
+  return sortIndex;
+};
+
 export default observer(() => {
   const actionRef = useRef<ActionType>();
   const intl = useIntl();
   const [param, setParam] = useState({});
   const [expandedRowKeys, setExpandedRowKeys] = useState<React.Key[]>([]);
   const [treeData, setTreeData] = useState<any[]>([]);
+  const [sortParam, setSortParam] = useState<any>({ name: 'sortIndex', order: 'asc' });
 
   const rowKeys = useRef<React.Key[]>([]);
+
   /**
    * 根据部门ID删除数据
    * @param id
@@ -297,7 +320,7 @@ export default observer(() => {
         request={async (params) => {
           const response = await service.queryOrgThree({
             paging: false,
-            sorts: [{ name: 'sortIndex', order: 'asc' }],
+            sorts: [sortParam],
             ...params,
           });
           setTreeData(response.result);
@@ -312,6 +335,13 @@ export default observer(() => {
             status: response.status,
           };
         }}
+        onChange={(_, f, sorter: any) => {
+          if (sorter.order) {
+            setSortParam({ name: sorter.columnKey, order: sorter.order.replace('end', '') });
+          } else {
+            setSortParam({ name: 'sortIndex', value: 'asc' });
+          }
+        }}
         rowKey="id"
         expandable={{
           expandedRowKeys: [...rowKeys.current],
@@ -326,7 +356,9 @@ export default observer(() => {
         headerTitle={
           <Button
             disabled={getButtonPermission('system/Department', ['add'])}
-            onClick={() => (State.visible = true)}
+            onClick={() => {
+              State.visible = true;
+            }}
             key="button"
             icon={<PlusOutlined />}
             type="primary"
@@ -339,6 +371,10 @@ export default observer(() => {
         }
       />
       <Save<DepartmentItem>
+        parentChange={(pId) => {
+          console.log(getSortIndex(treeData, pId));
+          return getSortIndex(treeData, pId);
+        }}
         title={
           State.current.parentId
             ? intl.formatMessage({

src/pages/system/Department/save.tsx

@@ -1,6 +1,6 @@
 // Modal 弹窗，用于新增、修改数据
 import React from 'react';
-import { createForm } from '@formily/core';
+import { createForm, onFieldReact } from '@formily/core';
 import { createSchemaField } from '@formily/react';
 import {
   ArrayTable,
@@ -18,6 +18,7 @@ import {
   TreeSelect,
   Upload,
 } from '@formily/antd';
+import type { Field } from '@formily/core';
 import { message, Modal } from 'antd';
 import { useIntl } from '@@/plugin-locale/localeExports';
 import type { ISchema } from '@formily/json-schema';
@@ -29,12 +30,14 @@ import type BaseService from '@/utils/BaseService';
 export interface SaveModalProps<T> extends Omit<ModalProps, 'onOk' | 'onCancel'> {
   service: BaseService<T>;
   data?: Partial<T>;
+  reload?: () => void;
   /**
    * Model关闭事件
    * @param type 是否为请求接口后关闭，用于外部table刷新数据
    */
   onCancel?: (type: boolean, id?: React.Key) => void;
   schema: ISchema;
+  parentChange: (value?: string) => number;
 }
 
 const Save = <T extends object>(props: SaveModalProps<T>) => {
@@ -68,6 +71,14 @@ const Save = <T extends object>(props: SaveModalProps<T>) => {
   const form = createForm({
     validateFirst: true,
     initialValues: data || {},
+    effects: () => {
+      onFieldReact('sortIndex', (field) => {
+        if (props.parentChange) {
+          const sortIndex = props.parentChange(field.query('parentId').value());
+          (field as Field).value = !!sortIndex ? sortIndex : sortIndex + 1;
+        }
+      });
+    },
   });
 
   /**