多选下拉框优化

.gitignore

@@ -25,3 +25,5 @@ pnpm-debug.log*
 *.njsproj
 *.sln
 *.sw?
+.history/src/api/sys/user_20210610150327.ts
+.history/

src/api/sys/model/userModel.ts

@@ -63,13 +63,20 @@ export interface LoginResultModel {
 }
 
 /**
- * @description: Get user information return value
+ * @description: Get common information return value
  */
-export interface GetUserListModel {
+export interface CommonRowModel {
   count: number;
   row: object[];
 }
 /**
+ * @description: Get user information return value
+ */
+export interface CommonTreeModel {
+  count: number;
+  tree: object[];
+}
+/**
  * @description: Get GroupTree information return value
  */
 export interface getGroupTreeModel {
@@ -88,3 +95,21 @@ export interface GetUserInfoByUserIdModel {
   logintime: number;
   row: any;
 }
+
+export interface AddGroupParams {
+  pid: string | number;
+  name: string;
+  rules: string;
+  status: string;
+}
+
+export interface EditGroupParams {
+  id: number;
+  pid?: string | number;
+  name?: string;
+  rules?: string;
+  status?: string;
+}
+export interface GroupIdParams {
+  id: number;
+}

src/api/sys/user.ts

@@ -5,19 +5,23 @@ import {
   GetUserInfoByUserIdParams,
   getUserListParams,
   GetUserInfoByUserIdModel,
-  GetUserListModel,
+  CommonRowModel,
+  CommonTreeModel,
   AddUserParams,
   EditUserParams,
+  AddGroupParams,
+  EditGroupParams,
+  GroupIdParams,
   DeleteUserParams,
 } from './model/userModel';
 import { ErrorMessageMode } from '/@/utils/http/axios/types';
 
 enum Api {
-  Login = '/login',
+  LoginUrl = '/login',
   UserById = '/info/',
   AdminUrl = '/',
-  GroupTree = '/tree',
-  GetPermCodeByUserId = '/getPermCodeByUserId',
+  GroupUrl = '/group',
+  GroupById = '/groupinfo/',
 }
 
 /**
@@ -26,7 +30,7 @@ enum Api {
 export function loginApi(params: LoginParams, mode: ErrorMessageMode = 'modal') {
   return defHttp.request<LoginResultModel>(
     {
-      url: Api.Login,
+      url: Api.LoginUrl,
       method: 'POST',
       params,
     },
@@ -47,7 +51,7 @@ export function getUserInfoById(params: GetUserInfoByUserIdParams) {
 }
 
 export function getUserList(params?: getUserListParams) {
-  return defHttp.request<GetUserListModel>({
+  return defHttp.request<CommonRowModel>({
     url: Api.AdminUrl,
     method: 'GET',
     params,
@@ -55,37 +59,55 @@ export function getUserList(params?: getUserListParams) {
 }
 
 export function addUser(params: AddUserParams) {
-  return defHttp.request<GetUserListModel>({
+  return defHttp.request<CommonRowModel>({
     url: Api.AdminUrl,
     method: 'POST',
     params,
   });
 }
 export function editUser(params: EditUserParams) {
-  return defHttp.request<GetUserListModel>({
+  return defHttp.request<CommonRowModel>({
     url: Api.UserById + params.id,
     method: 'POST',
     params,
   });
 }
 export function deleteUser(params: DeleteUserParams) {
-  return defHttp.request<GetUserListModel>({
+  return defHttp.request<CommonRowModel>({
     url: Api.UserById + params.id,
     method: 'DELETE',
   });
 }
 
-export function getPermCodeByUserId(params: GetUserInfoByUserIdParams) {
-  return defHttp.request<string[]>({
-    url: Api.GetPermCodeByUserId,
+export function getGroupTree() {
+  return defHttp.request<CommonTreeModel>({
+    url: Api.GroupUrl,
     method: 'GET',
+  });
+}
+export function addGroup(params: AddGroupParams) {
+  return defHttp.request<CommonRowModel>({
+    url: Api.GroupUrl,
+    method: 'POST',
     params,
   });
 }
-
-export function getGroupTree() {
-  return defHttp.request<GetUserListModel>({
-    url: Api.GroupTree,
+export function editGroup(params: EditGroupParams) {
+  return defHttp.request<CommonRowModel>({
+    url: Api.GroupById + params.id,
+    method: 'POST',
+    params,
+  });
+}
+export function deleteGroup(params: GroupIdParams) {
+  return defHttp.request<CommonRowModel>({
+    url: Api.GroupById + params.id,
+    method: 'DELETE',
+  });
+}
+export function getGroupById(params: GroupIdParams) {
+  return defHttp.request<CommonRowModel>({
+    url: Api.GroupById + params.id,
     method: 'GET',
   });
 }

src/components/Form/src/components/MultipleTreeSelect.vue

@@ -6,10 +6,11 @@
     :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
     placeholder="Please select"
     allow-clear
-    multiple
+    treeCheckable
+    :treeCheckStrictly="true"
     tree-default-expand-all
-  >
-    <!-- <a-tree-select-node key="0-1" value="parent 1" title="parent 1">
+  />
+  <!-- <a-tree-select-node key="0-1" value="parent 1" title="parent 1">
       <a-tree-select-node key="0-1-1" value="parent 1-0" title="parent 1-0">
         <a-tree-select-node key="random" value="leaf1" title="my leaf" />
         <a-tree-select-node key="random1" value="leaf2" title="your leaf" />
@@ -20,7 +21,6 @@
         </a-tree-select-node>
       </a-tree-select-node>
     </a-tree-select-node> -->
-  </a-tree-select>
 </template>
 <script lang="ts">
   import { defineComponent, ref, watch } from 'vue';
@@ -31,13 +31,23 @@
     components: {
       [TreeSelect.name]: TreeSelect,
     },
+    // props: {
+    //   value: {
+    //     type: Array,
+    //     default: [],
+    //   },
+    // },
     setup() {
       const value = ref<string[]>([]);
-
+      console.log(value);
+      console.log('++++++++++++++++++++++++++');
       watch(value, () => {
+        console.log('------------------------');
+        console.log(value);
         console.log('select', value.value);
       });
-
+      console.log('===============props========');
+      console.log(`props`, value);
       return {
         value,
       };

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

@@ -187,7 +187,7 @@ export function useDataSource(
 
       console.log('=======api - params ======');
       const res_data = await api(params);
-      const res = res_data.row;
+      const res = res_data.row || res_data.tree;
       console.log('=====表格 api ==========');
       console.log(res_data);
       console.log(params);

src/views/permission/admin/data.ts

@@ -2,6 +2,10 @@ import { FormProps, BasicColumn } from '/@/components/Table';
 import { h } from 'vue';
 import { Tag } from 'ant-design-vue';
 import { formatTime } from '/@/utils/formatTime';
+import { FormSchema } from '/@/components/Form/index';
+import { adapt } from '/@/utils/adapt';
+
+const adaptWidth = adapt();
 
 // const isDir = (type: string) => type === '0';
 // const isMenu = (type: string) => type === '1';
@@ -252,57 +256,87 @@ export function getFormConfig(): Partial<FormProps> {
   };
 }
 
-export const groupTree = [
+// =================popup================================
+export const schemas: FormSchema[] = [
   {
-    groups: 1,
-    groups_text: '超级管理员',
-    status: true,
-    icon: 'ion:layers-outline',
-    create_time: '2021-01-01',
-    detail: '',
-    children: [
-      {
-        groups: 2,
-        groups_text: '普通管理员',
-        status: true,
-        icon: 'ion:git-compare-outline',
-        create_time: '2021-01-01',
-        detail: '',
-      },
-      {
-        groups: 3,
-        groups_text: '游客',
-        status: false,
-        icon: 'ion:tv-outline',
-        create_time: '2021-01-01',
-        detail: '',
+    field: 'groups_value',
+    label: '所属组别',
+    component: 'MultipleTreeSelect',
+    componentProps: {
+      replaceFields: {
+        title: 'name',
+        key: 'groups',
+        value: 'id',
       },
-    ],
+      getPopupContainer: () => document.body,
+    },
+    labelWidth: adaptWidth.labelWidth,
+    colProps: {
+      span: adaptWidth.elContainer,
+    },
   },
   {
-    groups: 4,
-    groups_text: '测试管理员',
-    status: true,
-    icon: 'bx:bx-lock',
-    create_time: '2021-01-01',
-    detail: '',
-    children: [
-      {
-        groups: 5,
-        groups_text: '测试一',
-        status: true,
-        icon: 'bx:bx-lock',
-        create_time: '2021-01-01',
-        detail: '',
-      },
-      {
-        groups: 6,
-        groups_text: '测试二',
-        status: true,
-        icon: 'bx:bx-lock',
-        create_time: '2021-01-01',
-        detail: '',
-      },
-    ],
+    field: 'username',
+    component: 'Input',
+    label: '用户名',
+    labelWidth: adaptWidth.labelWidth,
+    colProps: {
+      span: adaptWidth.elContainer,
+    },
+    required: true,
+  },
+  {
+    field: 'nickname',
+    component: 'Input',
+    label: '昵称',
+    labelWidth: adaptWidth.labelWidth,
+    colProps: {
+      span: adaptWidth.elContainer,
+    },
+    required: true,
+  },
+  {
+    field: 'email',
+    component: 'Input',
+    label: 'Email',
+    labelWidth: adaptWidth.labelWidth,
+    colProps: {
+      span: adaptWidth.elContainer,
+    },
+  },
+  {
+    field: 'password',
+    component: 'InputPassword',
+    label: '密码',
+    labelWidth: adaptWidth.labelWidth,
+    colProps: {
+      span: adaptWidth.elContainer,
+    },
+    required: true,
+  },
+  {
+    field: 'loginfailure',
+    component: 'Input',
+    label: '失败次数',
+    labelWidth: adaptWidth.labelWidth,
+    defaultValue: 0,
+    colProps: {
+      span: adaptWidth.elContainer,
+    },
+  },
+  {
+    field: 'status',
+    label: '状态',
+    component: 'RadioButtonGroup',
+    componentProps: {
+      options: [
+        { label: '启用', value: 'normal' },
+        { label: '停用', value: 'locked' },
+      ],
+    },
+    labelWidth: adaptWidth.labelWidth,
+    colProps: {
+      span: adaptWidth.elContainer,
+    },
   },
 ];

src/views/permission/admin/index.vue

@@ -40,13 +40,10 @@
     TableActionType,
   } from '/@/components/Table';
 
-  //   interface PopupData {
-  //     title: string,
-  //     treeData: object[],
-  //     checkedKeys: string[] | number[],
-  //     selectedKeys: string[] | number[],
-  //     expandedKeys: string[] | number[]
-  //   }
+  interface PopupData {
+    title: string;
+    treeData: object[];
+  }
 
   export default defineComponent({
     components: { BasicTable, TableAction, Popup },
@@ -56,9 +53,9 @@
       const { success } = createMessage;
       const tableRef = ref<Nullable<TableActionType>>(null);
       const currentEditKeyRef = ref('');
-      const popupData = reactive({
+      const popupData = reactive<PopupData>({
         title: '添加',
-        treeData: [],
+        treeData: [{}],
       });
       const [registerTable] = useTable({
         title: '管理员管理',
@@ -78,7 +75,6 @@
           slots: { customRender: 'action' },
           fixed: undefined,
         },
-        // searchInfo: { order: 'asc' },
         showIndexColumn: false,
         bordered: true,
       });
@@ -142,16 +138,21 @@
           if (item.groups) {
             item.groups = item.groups.split(',');
             item.groups_text = item.groups_text.split(',');
+            item.groups_value = [];
+            for (let i = 0; i < item.groups.length; i++) {
+              item.groups_value.push({ lable: item.groups_text[i], value: item.groups[i] });
+            }
           } else {
-            item.groups = null;
+            item.groups = []; //null
             item.groups_text = [];
           }
         });
+        console.log(`result`, result);
       }
 
       async function init() {
         const GroupTree = await getGroupTree();
-        popupData.treeData = GroupTree.row;
+        popupData.treeData = GroupTree.tree;
       }
 
       function getSelectRowKeyList() {
@@ -166,7 +167,7 @@
           username: '',
           nickname: '',
           email: '',
-          groups: null,
+          groups_value: [],
           status: 'normal',
         });
       }
@@ -174,14 +175,14 @@
       function handleEdit(record: EditRecordRow) {
         currentEditKeyRef.value = record.id; // record.key
         popupData.title = '编辑';
-
         const data = getTableAction().getDataSource();
         data.map((item) => {
           if (item.id === record.id) {
             record = item;
           }
         });
-
+        console.log('================record=======');
+        console.log(record);
         openAdd(true, record);
       }
 
@@ -199,12 +200,19 @@
 
       async function saveData(params: any) {
         const data = params.data;
+        data.groups = [];
+        if (data.groups_value) {
+          data.groups_value.map((item) => {
+            data.groups.push(item.value);
+          });
+        }
         const closeModel = params.closeModal;
         if (data.groups) {
           data.groups = data.groups.toString();
         } else {
           data.groups = data.groups_text = '';
         }
+        delete data.groups_value;
         console.log(`data`, data);
         if (!data.id) {
           await addUser(data).then((res) => {

src/views/permission/admin/popup.vue

@@ -6,18 +6,16 @@
 </template>
 <script lang="ts">
   import { Tree } from 'ant-design-vue';
-  import { defineComponent, PropType, reactive, ref, toRefs } from 'vue';
+  import { defineComponent, onMounted, PropType, reactive, ref, toRefs } from 'vue';
   import { BasicModal, useModalInner } from '/@/components/Modal';
-  import { BasicForm, FormSchema, useForm } from '/@/components/Form/index';
-  import { adapt } from '/@/utils/adapt';
-  import { groupTree } from './data';
-
-  interface popupData {
+  import { BasicForm, useForm } from '/@/components/Form/index';
+  import { schemas } from './data';
+  interface PopupData {
     title: string;
+    treeData: object[];
   }
   interface Role {
     id: string | number;
-    treeData: object[];
   }
 
   export default defineComponent({
@@ -34,91 +32,6 @@
       });
       const popupData: PopupData = props.popupData;
       const modelRef = ref({});
-      const adaptWidth = adapt();
-
-      const schemas: FormSchema[] = [
-        {
-          field: 'groups',
-          label: '所属组别',
-          component: 'MultipleTreeSelect',
-          componentProps: {
-            replaceFields: {
-              title: 'name',
-              key: 'groups',
-              value: 'id',
-            },
-            getPopupContainer: () => document.body,
-          },
-          labelWidth: adaptWidth.labelWidth,
-          colProps: {
-            span: adaptWidth.elContainer,
-          },
-        },
-        {
-          field: 'username',
-          component: 'Input',
-          label: '用户名',
-          labelWidth: adaptWidth.labelWidth,
-          colProps: {
-            span: adaptWidth.elContainer,
-          },
-          required: true,
-        },
-        {
-          field: 'nickname',
-          component: 'Input',
-          label: '昵称',
-          labelWidth: adaptWidth.labelWidth,
-          colProps: {
-            span: adaptWidth.elContainer,
-          },
-          required: true,
-        },
-        {
-          field: 'email',
-          component: 'Input',
-          label: 'Email',
-          labelWidth: adaptWidth.labelWidth,
-          colProps: {
-            span: adaptWidth.elContainer,
-          },
-        },
-        {
-          field: 'password',
-          component: 'InputPassword',
-          label: '密码',
-          labelWidth: adaptWidth.labelWidth,
-          colProps: {
-            span: adaptWidth.elContainer,
-          },
-          required: true,
-        },
-        {
-          field: 'loginfailure',
-          component: 'Input',
-          label: '失败次数',
-          labelWidth: adaptWidth.labelWidth,
-          defaultValue: 0,
-          colProps: {
-            span: adaptWidth.elContainer,
-          },
-        },
-        {
-          field: 'status',
-          label: '状态',
-          component: 'RadioButtonGroup',
-          componentProps: {
-            options: [
-              { label: '启用', value: 'normal' },
-              { label: '停用', value: 'locked' },
-            ],
-          },
-          labelWidth: adaptWidth.labelWidth,
-          colProps: {
-            span: adaptWidth.elContainer,
-          },
-        },
-      ];
 
       const [registerForm, { getFieldsValue, updateSchema, setFieldsValue, resetFields }] = useForm(
         {
@@ -135,15 +48,21 @@
 
       //
       //   });
+      onMounted(() => {
+        console.log('===============props=1111=========');
+        console.log(props);
+      });
       const [register, { closeModal }] = useModalInner((data) => {
         resetFields();
         // if (unref(isUpdate)) {
         //   setFieldsValue(data);
         // }
+        console.log('=======================');
         setFieldsValue(data);
         role.id = data.id;
+        console.log(`popupData.treeData`, popupData.treeData);
         updateSchema({
-          field: 'groups',
+          field: 'groups_value',
           componentProps: { treeData: popupData.treeData },
         });
       });
@@ -164,7 +83,6 @@
         registerForm,
         model: modelRef,
         confirm,
-        adaptWidth,
         ...toRefs(popupData),
       };
     },

src/views/permission/group/data.ts

@@ -1,3 +1,11 @@
+import { h } from 'vue';
+import { Tag } from 'ant-design-vue';
+import { BasicColumn } from '/@/components/Table';
+import { FormSchema } from '/@/components/Form/index';
+import { adapt } from '/@/utils/adapt';
+
+const adaptWidth = adapt();
+
 export const fakeTree = [
   {
     id: 1,
@@ -14,6 +22,40 @@ export const fakeTree = [
         icon: 'ion:git-compare-outline',
         create_time: '2021-01-01',
         detail: '',
+        children: [
+          {
+            id: 8,
+            title: '天然光',
+            status: true,
+            icon: 'ion:git-compare-outline',
+            create_time: '2021-01-01',
+            detail: '',
+          },
+          {
+            id: 9,
+            title: '小苏打粉',
+            status: false,
+            icon: 'ion:tv-outline',
+            create_time: '2021-01-01',
+            detail: '',
+          },
+          {
+            id: 22,
+            title: '士大夫',
+            status: true,
+            icon: 'ion:git-compare-outline',
+            create_time: '2021-01-01',
+            detail: '',
+          },
+          {
+            id: 95,
+            title: '小苏打粉',
+            status: false,
+            icon: 'ion:tv-outline',
+            create_time: '2021-01-01',
+            detail: '',
+          },
+        ],
       },
       {
         id: 3,
@@ -22,6 +64,24 @@ export const fakeTree = [
         icon: 'ion:tv-outline',
         create_time: '2021-01-01',
         detail: '',
+        children: [
+          {
+            id: 10,
+            title: '略略略',
+            status: true,
+            icon: 'ion:git-compare-outline',
+            create_time: '2021-01-01',
+            detail: '',
+          },
+          {
+            id: 19,
+            title: '嘻嘻嘻',
+            status: false,
+            icon: 'ion:tv-outline',
+            create_time: '2021-01-01',
+            detail: '',
+          },
+        ],
       },
     ],
   },
@@ -52,3 +112,90 @@ export const fakeTree = [
     ],
   },
 ];
+
+export const columns: BasicColumn[] = [
+  {
+    title: 'ID',
+    dataIndex: 'id',
+    editComponentProps: {
+      prefix: '$',
+    },
+    width: 80,
+  },
+  {
+    title: '父级',
+    dataIndex: 'pid',
+    width: 160,
+  },
+  {
+    title: '名称',
+    dataIndex: 'name',
+    width: 160,
+  },
+  {
+    title: '状态',
+    dataIndex: 'status',
+    width: 80,
+    customRender: ({ record }) => {
+      const status = record.status;
+      const enable = status === 'normal';
+      const color = enable ? 'green' : 'red';
+      const text = enable ? '启用' : '停用';
+      return h(Tag, { color: color }, () => text);
+    },
+  },
+];
+
+// popup =====================================================
+export const schemas: FormSchema[] = [
+  {
+    field: 'pname',
+    label: '父级',
+    component: 'TreeSelect',
+    componentProps: {
+      replaceFields: {
+        title: 'name',
+        key: 'id',
+        value: 'id',
+      },
+      getPopupContainer: () => document.body,
+    },
+    labelWidth: adaptWidth.labelWidth,
+    colProps: {
+      span: adaptWidth.elContainer,
+    },
+  },
+  {
+    field: 'name',
+    component: 'Input',
+    label: '名称',
+    labelWidth: adaptWidth.labelWidth,
+    colProps: {
+      span: adaptWidth.elContainer,
+    },
+  },
+  {
+    field: 'rules',
+    component: 'Input',
+    label: '规则',
+    labelWidth: adaptWidth.labelWidth,
+    colProps: {
+      span: adaptWidth.elContainer,
+    },
+  },
+  {
+    field: 'status',
+    label: '状态',
+    component: 'RadioButtonGroup',
+    componentProps: {
+      options: [
+        { label: '启用', value: 'normal' },
+        { label: '停用', value: 'locked' },
+      ],
+    },
+    labelWidth: adaptWidth.labelWidth,
+    colProps: {
+      span: adaptWidth.elContainer,
+    },
+  },
+];

src/views/permission/group/index.vue

@@ -8,9 +8,8 @@
       <template #action="{ record, column }">
         <TableAction :actions="createActions(record, column)" />
       </template>
-      <!-- <template #form-custom > custom-slot </template> -->
     </BasicTable>
-    <Popup @register="addRegister" :modelData="modelData" @saveData="saveData" />
+    <Popup @register="addRegister" :popupData="popupData" @saveData="saveData" />
   </div>
 </template>
 <script lang="ts">
@@ -18,9 +17,8 @@
   import Popup from './popup.vue';
   import { useModal } from '/@/components/Modal';
   //   import { getAllMenuList } from '/@/api/sys/menu';
-  import { h } from 'vue';
-  import { Tag } from 'ant-design-vue';
-  import { getUserList, addUser, editUser, deleteUser } from '/@/api/sys/user';
+  import { columns } from './data';
+  import { getGroupTree, addGroup, editGroup, deleteGroup } from '/@/api/sys/user';
   import {
     BasicTable,
     useTable,
@@ -31,83 +29,20 @@
     TableActionType,
   } from '/@/components/Table';
 
-  //   interface ModelData {
-  //     title: string,
-  //     treeData: object[],
-  //     checkedKeys: string[] | number[],
-  //     selectedKeys: string[] | number[],
-  //     expandedKeys: string[] | number[]
-  //   }
-
-  const columns: BasicColumn[] = [
-    {
-      title: 'ID',
-      dataIndex: 'id',
-      editComponentProps: {
-        prefix: '$',
-      },
-      width: 80,
-    },
-    {
-      title: '父级',
-      dataIndex: 'parent',
-      // editRow: true,
-      width: 160,
-    },
-    {
-      title: '名称',
-      dataIndex: 'uname',
-      // editRow: true,
-      width: 160,
-    },
-    {
-      title: '状态',
-      dataIndex: 'status',
-      width: 80,
-      customRender: ({ record }) => {
-        const status = record.status;
-        // const enable = ~~status === 0;
-        const color = status ? 'green' : 'red';
-        const text = status ? '启用' : '停用';
-        return h(Tag, { color: color }, () => text);
-      },
-    },
-  ];
-
-  const formData = [
-    {
-      id: 1,
-      parent: null,
-      uname: '超级管理员',
-      status: 1,
-    },
-    {
-      id: 2,
-      parent: 1,
-      uname: '普通管理员',
-      status: 1,
-    },
-    {
-      id: 3,
-      parent: 2,
-      uname: '游客',
-      status: 1,
-    },
-  ];
+  interface PopupData {
+    title: string;
+    treeData: object[];
+  }
 
   export default defineComponent({
     components: { BasicTable, TableAction, Popup },
     setup() {
       const tableRef = ref<Nullable<TableActionType>>(null);
       const currentEditKeyRef = ref('');
-      const modelData = reactive({
+      const popupData = reactive<PopupData>({
         title: '添加',
-        treeData: [],
-        checkedKeys: [],
-        selectedKeys: [],
-        expandedKeys: [],
+        treeData: [{}],
       });
-      getTreeData();
       const [registerTable] = useTable({
         title: '角色列表',
         titleHelpMessage:
@@ -115,8 +50,9 @@
         rowSelection: { type: 'checkbox' },
         columns: columns,
         clickToRowSelect: false, // 点击行不勾选
-        // api: getUserList,
-        dataSource: formData,
+        api: getGroupTree,
+        afterFetch: afterFetch,
+        // dataSource: formData,
         actionColumn: {
           width: 160,
           title: '操作',
@@ -129,6 +65,11 @@
       });
       const [addRegister, { openModal: openAdd }] = useModal();
 
+      function afterFetch(result) {
+        console.log(`result`, result);
+        popupData.treeData = result;
+      }
+
       function getTableAction() {
         // 获取组件
         const tableAction = unref(tableRef);
@@ -149,60 +90,58 @@
 
       function addRole() {
         console.log('添加');
-        modelData.title = '添加';
+        popupData.title = '添加';
         openAdd(true, {});
       }
 
       function handleEdit(record: EditRecordRow) {
         currentEditKeyRef.value = record.id; // record.key
         console.log(record);
-        modelData.title = '编辑';
+        popupData.title = '编辑';
 
         const data = getTableAction().getDataSource();
         data.map((item) => {
           if (item.id === record.id) {
             record = item;
           }
+          if (record.pid === item.id) {
+            record.pname = item.name;
+          } else {
+            record.pname = null;
+          }
         });
-        modelData.checkedKeys = record.menus;
-        modelData.selectedKeys = [];
-        modelData.expandedKeys = [];
         openAdd(true, record);
       }
 
       async function handleDelete(record: Recordable) {
         console.log('点击了删除', record.id);
         console.log(record);
-        await deleteUser({ id: record.id }).then((res) => {
+        await deleteGroup({ id: record.id }).then((res) => {
           console.log(res);
           getTableAction().reload();
         });
       }
 
-      async function saveData(data: any) {
-        // const datas = getTableAction().getDataSource()
-        // const info = reactive({...data.info})
+      async function saveData(params: any) {
         console.log('------------save---------');
-        console.log(data);
+        const data = params.data;
+        const closeModel = params.closeModal;
         if (!data.id) {
-          await addUser(data).then((res) => {
+          await addGroup(data).then((res) => {
             console.log(res);
             getTableAction().reload();
+            closeModel();
           });
           console.log('----------add---');
         } else {
-          await editUser(data).then((res) => {
+          await editGroup(data).then((res) => {
             console.log(res);
             getTableAction().reload();
+            closeModel();
           });
           console.log('----------edit---');
         }
       }
-      async function getTreeData() {
-        // let treeData = await getAllMenuList() as any
-        // modelData.treeData = JSON.parse(JSON.stringify(treeData).replace(/menuName/g,"title").replace(/id/g,"key"))
-        // console.log(modelData.treeData)
-      }
 
       function createActions(record: EditRecordRow, column: BasicColumn): ActionItem[] {
         if (false) {
@@ -227,7 +166,7 @@
         ];
       }
       return {
-        modelData,
+        popupData,
         tableRef,
         registerTable,
         addRole,
@@ -238,8 +177,6 @@
         getSelectRowKeyList,
         addRegister,
         saveData,
-        getUserList,
-        getTreeData,
       };
     },
   });

src/views/permission/group/popup.vue

@@ -7,30 +7,27 @@
       <a-tree
         checkable
         :tree-data="fakeTree"
-        v-model:expandedKeys="expandedKeys"
-        v-model:selectedKeys="selectedKeys"
-        v-model:checkedKeys="checkedKeys"
+        showLine
+        defaultExpandAll
         :replace-fields="replaceFields"
       >
-        <!-- <template #title0010><span style="color: #1890ff;">sss</span></template> -->
+        <!-- v-model:expandedKeys="expandedKeys"
+        v-model:selectedKeys="selectedKeys"
+        v-model:checkedKeys="checkedKeys" -->
       </a-tree>
     </div>
   </BasicModal>
 </template>
 <script lang="ts">
   import { Tree } from 'ant-design-vue';
-  import { defineComponent, PropType, reactive, ref, toRefs, watch } from 'vue';
+  import { defineComponent, PropType, reactive, ref, toRefs } from 'vue';
   import { BasicModal, useModalInner } from '/@/components/Modal';
-  import { BasicForm, FormSchema, useForm } from '/@/components/Form/index';
-  import { adapt } from '/@/utils/adapt';
-  import { fakeTree } from './data';
+  import { BasicForm, useForm } from '/@/components/Form/index';
+  import { schemas, fakeTree } from './data';
 
-  interface ModelData {
+  interface PopupData {
     title: string;
     treeData: object[];
-    checkedKeys: string[];
-    selectedKeys: string[];
-    expandedKeys: string[];
   }
   interface Role {
     id: string | number;
@@ -39,8 +36,8 @@
   export default defineComponent({
     components: { BasicModal, BasicForm, [Tree.name]: Tree },
     props: {
-      modelData: {
-        type: Object as PropType<ModelData>,
+      popupData: {
+        type: Object as PropType<PopupData>,
         default: {},
       },
     },
@@ -48,62 +45,12 @@
       const role = reactive<Role>({
         id: 0,
       });
-      const modelData: ModelData = props.modelData;
-      console.log(modelData);
+      const popupData: PopupData = props.popupData;
+      console.log(popupData);
       const modelRef = ref({});
-      const adaptWidth = adapt();
-      watch(modelData, () => {
-        console.log('expandedKeys', modelData.expandedKeys);
-        console.log('selectedKeys', modelData.selectedKeys);
-        console.log('checkedKeys', modelData.checkedKeys);
-      });
       const replaceFields = {
         key: 'id',
       };
-      const schemas: FormSchema[] = [
-        {
-          field: 'parent',
-          label: '父级',
-          component: 'TreeSelect',
-          componentProps: {
-            replaceFields: {
-              title: 'title',
-              key: 'id',
-              value: 'id',
-            },
-            getPopupContainer: () => document.body,
-          },
-          labelWidth: adaptWidth.labelWidth,
-          colProps: {
-            span: adaptWidth.elContainer,
-          },
-        },
-        {
-          field: 'uname',
-          component: 'Input',
-          label: '名称',
-          labelWidth: adaptWidth.labelWidth,
-          colProps: {
-            span: adaptWidth.elContainer,
-          },
-        },
-        {
-          field: 'status',
-          label: '状态',
-          component: 'RadioButtonGroup',
-          defaultValue: 1,
-          componentProps: {
-            options: [
-              { label: '启用', value: 1 },
-              { label: '停用', value: 0 },
-            ],
-          },
-          labelWidth: adaptWidth.labelWidth,
-          colProps: {
-            span: adaptWidth.elContainer,
-          },
-        },
-      ];
 
       const [
         registerForm,
@@ -116,14 +63,18 @@
       });
       const [register, { closeModal }] = useModalInner((data) => {
         console.log(data);
+        console.log('data=========================');
         resetFields();
         // if (unref(isUpdate)) {
         //   setFieldsValue(data);
         // }
+        if (data.id) {
+          role.id = data.id;
+        }
         setFieldsValue(data);
         updateSchema({
-          field: 'parent',
-          componentProps: { treeData: fakeTree },
+          field: 'pname',
+          componentProps: { treeData: popupData.treeData },
         });
       });
 
@@ -133,26 +84,28 @@
         if (role.id) {
           data.id = role.id;
         }
+        data.pid = data.pname;
+        // delete data.pname;
+        console.log(`data`, data);
         // const data = {
         //   info,
         // }
         // console.log(data)
         // console.log(getFieldsValue())  // 表单数据
         // console.log('------ 菜单key ------')
-        // console.log(modelData.checkedKeys)
-        emit('saveData', data);
-        closeModal(); // 关闭弹窗
+        // console.log(popupData.checkedKeys)
+        const popupData = { closeModal, data };
+        emit('saveData', popupData);
       }
       return {
         register,
         schemas,
-        fakeTree,
         registerForm,
         replaceFields,
         model: modelRef,
         confirm,
-        adaptWidth,
-        ...toRefs(modelData),
+        fakeTree,
+        ...toRefs(popupData),
       };
     },
   });

tsconfig.json

@@ -22,7 +22,8 @@
     "noImplicitAny": false,
     "skipLibCheck": true,
     "paths": {
-      "/@/*": ["src/*"]
+      "/@/*": ["src/*"],
+      "/#/*": ["types/*"]
     }
   },
   "plugins": [