通过请求接口添加group_tree

src/api/sys/model/userModel.ts

@@ -70,6 +70,12 @@ export interface GetUserListModel {
   row: object[];
 }
 /**
+ * @description: Get GroupTree information return value
+ */
+export interface getGroupTreeModel {
+  count: number;
+}
+/**
  * @description: Get user information return value
  */
 export interface GetUserInfoByUserIdModel {

src/api/sys/user.ts

@@ -16,6 +16,7 @@ enum Api {
   Login = '/login',
   UserById = '/info/',
   AdminUrl = '/',
+  GroupTree = '/tree',
   GetPermCodeByUserId = '/getPermCodeByUserId',
 }
 
@@ -81,3 +82,10 @@ export function getPermCodeByUserId(params: GetUserInfoByUserIdParams) {
     params,
   });
 }
+
+export function getGroupTree() {
+  return defHttp.request<GetUserListModel>({
+    url: Api.GroupTree,
+    method: 'GET',
+  });
+}

src/components/Table/src/BasicTable.vue

@@ -186,7 +186,7 @@
         getFormProps,
         replaceFormSlotKey,
         getFormSlotKeys,
-        handleSearchInfoChange
+        handleSearchInfoChange,
       } = useTableForm(getProps, slots, fetch);
 
       const getBindValues = computed(() => {

src/components/Table/src/hooks/useDataSource.ts

@@ -172,6 +172,16 @@ export function useDataSource(
       if (beforeFetch && isFunction(beforeFetch)) {
         params = beforeFetch(params) || params;
       }
+      if (params.order === 'ascend') {
+        params.order = 'asc';
+      }
+      if (params.order === 'descend') {
+        params.order = 'desc';
+      }
+      if (params.field) {
+        params.sort = params.field;
+        delete params.field;
+      }
       console.log('=======api - params ======');
       console.log(params);
 

src/components/Table/src/types/column.ts

@@ -6,7 +6,7 @@ export interface ColumnFilterItem {
   children?: any;
 }
 
-export declare type SortOrder = 'ascend' | 'descend';
+export declare type SortOrder = 'asc' | 'desc';
 
 export interface RecordProps<T> {
   text: any;
@@ -62,7 +62,7 @@ export interface ColumnProps<T> {
   defaultFilteredValue?: string[];
 
   /**
-   * Default order of sorted values: 'ascend' 'descend' null
+   * Default order of sorted values: 'asc' 'desc' null
    * @type string
    */
   defaultSortOrder?: SortOrder;
@@ -141,14 +141,14 @@ export interface ColumnProps<T> {
   sorter?: boolean | Function;
 
   /**
-   * Order of sorted values: 'ascend' 'descend' false
+   * Order of sorted values: 'asc' 'desc' false
    * @type boolean | string
    */
   sortOrder?: boolean | SortOrder;
 
   /**
-   * supported sort way, could be 'ascend', 'descend'
-   * @default ['ascend', 'descend']
+   * supported sort way, could be 'asc', 'desc'
+   * @default ['asc', 'desc']
    * @type string[]
    */
   sortDirections?: SortOrder[];

src/components/Table/src/types/table.ts

@@ -8,7 +8,7 @@ import type {
 import { ComponentType } from './componentType';
 import { VueNode } from '/@/utils/propTypes';
 // import { ColumnProps } from './column';
-export declare type SortOrder = 'ascend' | 'descend';
+export declare type SortOrder = 'asc' | 'desc';
 export interface TableCurrentDataSource<T = Recordable> {
   currentDataSource: T[];
 }

src/views/permission/admin/data.ts

@@ -14,26 +14,44 @@ export const columns: BasicColumn[] = [
       prefix: '$',
     },
     width: 80,
+    sorter: true,
   },
   {
     title: '用户名',
     dataIndex: 'username',
     width: 130,
+    sorter: true,
   },
   {
     title: '昵称',
     dataIndex: 'nickname',
     width: 150,
+    sorter: true,
   },
   {
     title: '所属组别',
     dataIndex: 'groups_text',
-    width: 160,
+    width: 350,
+    // align: 'left',
+    customRender: ({ record }) => {
+      const color = ['pink', 'red', 'geekblue', 'volcano', 'cyan'];
+      let dom: object[] = [];
+      let i = 0;
+      record.groups_text.map((item) => {
+        dom.push(
+          h(Tag, { color: color[i], style: { fontSize: '12px', fontWeight: 'bold' } }, () => item)
+        );
+        dom.push(h(() => ' '));
+        i++;
+      });
+      return dom;
+    },
   },
   {
     title: 'Email',
     dataIndex: 'email',
     width: 160,
+    sorter: true,
   },
   {
     title: '状态',
@@ -51,9 +69,9 @@ export const columns: BasicColumn[] = [
     title: '最后登录',
     dataIndex: 'logintime',
     width: 150,
+    sorter: true,
     customRender: ({ record }) => {
       const logintime = record.logintime;
-
       return formatTime(logintime);
     },
   },

src/views/permission/admin/index.vue

@@ -20,7 +20,7 @@
         <TableAction :actions="createActions(record)" />
       </template>
     </BasicTable>
-    <Popup @register="addRegister" :modelData="modelData" @saveData="saveData" />
+    <Popup @register="addRegister" :popupData="popupData" @saveData="saveData" />
   </div>
 </template>
 <script lang="ts">
@@ -30,7 +30,7 @@
   import { useModal } from '/@/components/Modal';
   import { getFormConfig, columns } from './data';
   //   import { getAllMenuList } from '/@/api/sys/menu';
-  import { getUserList, addUser, editUser, deleteUser } from '/@/api/sys/user';
+  import { getUserList, addUser, editUser, deleteUser, getGroupTree } from '/@/api/sys/user';
   import {
     BasicTable,
     useTable,
@@ -40,7 +40,7 @@
     TableActionType,
   } from '/@/components/Table';
 
-  //   interface ModelData {
+  //   interface PopupData {
   //     title: string,
   //     treeData: object[],
   //     checkedKeys: string[] | number[],
@@ -51,11 +51,12 @@
   export default defineComponent({
     components: { BasicTable, TableAction, Popup },
     setup() {
+      init();
       const { createMessage } = useMessage();
       const { success } = createMessage;
       const tableRef = ref<Nullable<TableActionType>>(null);
       const currentEditKeyRef = ref('');
-      const modelData = reactive({
+      const popupData = reactive({
         title: '添加',
         treeData: [],
       });
@@ -99,6 +100,7 @@
       // 请求之前处理参数
       function beforeFetch(params) {
         console.log(params);
+        console.log('==========before========');
         // params['op'] = {};
         for (let k in params) {
           if (!params[k]) {
@@ -116,7 +118,6 @@
           //     delete params[k];
           //   }
         }
-        console.log(params.filter);
 
         console.log(params);
 
@@ -140,19 +141,26 @@
         result.map((item) => {
           if (item.groups) {
             item.groups = item.groups.split(',');
+            item.groups_text = item.groups_text.split(',');
           } else {
             item.groups = null;
+            item.groups_text = [];
           }
         });
       }
 
+      async function init() {
+        const GroupTree = await getGroupTree();
+        popupData.treeData = GroupTree.row;
+      }
+
       function getSelectRowKeyList() {
         // 获取选中行的key --- id
         console.log(getTableAction().getSelectRowKeys());
       }
 
       function addRole() {
-        modelData.title = '添加';
+        popupData.title = '添加';
         openAdd(true, {
           id: null,
           username: '',
@@ -165,7 +173,7 @@
 
       function handleEdit(record: EditRecordRow) {
         currentEditKeyRef.value = record.id; // record.key
-        modelData.title = '编辑';
+        popupData.title = '编辑';
 
         const data = getTableAction().getDataSource();
         data.map((item) => {
@@ -189,9 +197,9 @@
         // getTableAction().setTableData(data.filter(item => item.id !== record.id))
       }
 
-      async function saveData(popupData: any) {
-        const data = popupData.data;
-        const closeModel = popupData.closeModal;
+      async function saveData(params: any) {
+        const data = params.data;
+        const closeModel = params.closeModal;
         if (data.groups) {
           data.groups = data.groups.toString();
         } else {
@@ -240,7 +248,7 @@
         console.log(getTableAction());
       });
       return {
-        modelData,
+        popupData,
         tableRef,
         registerTable,
         addRole,

src/views/permission/admin/popup.vue

@@ -12,18 +12,19 @@
   import { adapt } from '/@/utils/adapt';
   import { groupTree } from './data';
 
-  interface ModelData {
+  interface popupData {
     title: string;
   }
   interface Role {
     id: string | number;
+    treeData: object[];
   }
 
   export default defineComponent({
     components: { BasicModal, BasicForm, [Tree.name]: Tree },
     props: {
-      modelData: {
-        type: Object as PropType<ModelData>,
+      popupData: {
+        type: Object as PropType<PopupData>,
         default: {},
       },
     },
@@ -31,7 +32,7 @@
       const role = reactive<Role>({
         id: 0,
       });
-      const modelData: ModelData = props.modelData;
+      const popupData: PopupData = props.popupData;
       const modelRef = ref({});
       const adaptWidth = adapt();
 
@@ -42,9 +43,9 @@
           component: 'MultipleTreeSelect',
           componentProps: {
             replaceFields: {
-              title: 'groups_text',
+              title: 'name',
               key: 'groups',
-              value: 'groups',
+              value: 'id',
             },
             getPopupContainer: () => document.body,
           },
@@ -143,7 +144,7 @@
         role.id = data.id;
         updateSchema({
           field: 'groups',
-          componentProps: { treeData: groupTree },
+          componentProps: { treeData: popupData.treeData },
         });
       });
 
@@ -164,7 +165,7 @@
         model: modelRef,
         confirm,
         adaptWidth,
-        ...toRefs(modelData),
+        ...toRefs(popupData),
       };
     },
   });

src/views/table/tableData.ts

@@ -51,7 +51,7 @@ export function getBasicShortColumns(): BasicColumn[] {
       width: 150,
       dataIndex: 'id',
       sorter: true,
-      sortOrder: 'ascend',
+      sortOrder: 'asc',
     },
     {
       title: '姓名',