fix: 门户列表调整

src/api/sys/sysPortalApi.ts

@@ -7,6 +7,8 @@ enum Api {
   sysPortalAdd = '/sys/portal/add',
   sysPortalEdit = '/sys/portal/edit',
   sysPortalRemove = '/sys/portal/removeByIds',
+  sysPortalAssign = '/sys/portal/assign',
+  sysPortalQueryMenuTree = '/sys/portal/menu/list',
 }
 
 /**
@@ -102,3 +104,18 @@ export const sysPortalEdit = (params?: object) => {
 export const sysPortalRemove = (params: Array<string | number>) => {
   return defHttp.post({ url: Api.sysPortalRemove, params: params });
 };
+/**
+ * @description: 分配租户套餐,权限 - sys:tenantPackage:assign
+ * @method: POST
+ */
+export const sysPortalAssign = (params?: object) => {
+  return defHttp.post({ url: Api.sysPortalAssign, params: params });
+};
+
+/**
+ * @description: 查询角色信息列表,权限 - sys:role:query
+ * @method: POST
+ */
+export const sysPortalQueryMenuTree = id => {
+  return defHttp.get({ url: Api.sysPortalQueryMenuTree + '/' + id });
+};

src/views/sys/sysPortal/FormModalPortalMenu.vue

@@ -0,0 +1,103 @@
+<template>
+  <BasicModal
+    v-bind="$attrs"
+    destroyOnClose
+    @register="registerModal"
+    title="分配菜单"
+    @ok="handleSubmit"
+  >
+    <BasicTree
+      :checkedKeys="checkedKeys"
+      :treeData="treeData"
+      checkable
+      @check="handleCheck"
+      :defaultExpandAll="true"
+      :multiple="true"
+      :fieldNames="{ key: 'id', title: 'name' }"
+    />
+  </BasicModal>
+</template>
+<script lang="ts" setup>
+  import { onMounted, ref } from 'vue';
+  import { BasicModal, useModalInner } from '/@/components/Modal';
+  import { useMessage } from '/@/hooks/web/useMessage';
+  import { BasicTree } from '/@/components/Tree';
+  import { sysPortalAssign, sysPortalQueryMenuTree } from '/@/api/sys/sysPortalApi';
+
+  import { sysMenuQueryTree } from '/@/api/sys/sysMenuApi';
+
+  const emit = defineEmits(['success', 'register']);
+
+  const treeData = ref([]) as any;
+  const portalId = ref();
+  const checkedKeys = ref([]);
+  const halfCheckedKeys = ref([]);
+  const parentIds = ref([]) as any;
+  onMounted(() => {
+    getTreeData();
+  });
+
+  const { createMessage, createConfirm } = useMessage();
+  const [registerModal, { setModalProps, closeModal }] = useModalInner(async data => {
+    setModalProps({ confirmLoading: false });
+    portalId.value = data.record.id;
+    // 获取已选中列表
+    const roleMenuList = (await sysPortalQueryMenuTree(portalId.value)) || [];
+    // 找出菜单的所有父节点ID
+    treeData.value.map(item => {
+      if (item.children.length) {
+        item.children.map(ele => {
+          if (ele.children.length) {
+            parentIds.value.push(ele.id);
+          }
+        });
+      }
+      parentIds.value.push(item.id);
+    });
+    // 因为antd树插件勾选父节点会导致所有子节点选中,所以过滤所有父节点
+    halfCheckedKeys.value = Array.from(parentIds.value);
+    checkedKeys.value = roleMenuList
+      .filter(
+        item =>
+          (!parentIds.value.includes(item.id) && item.parentId != '0') || item.menuType == 'menu',
+      )
+      .map(item => item.id);
+  });
+
+  // 树节点选中事件
+  function handleCheck(keys, e) {
+    halfCheckedKeys.value = e.halfCheckedKeys;
+    checkedKeys.value = keys;
+  }
+
+  // 提交按钮事件
+  async function handleSubmit() {
+    setModalProps({ confirmLoading: true });
+    try {
+      createConfirm({
+        iconType: 'warning',
+        title: '提示',
+        content: '确认分配权限?',
+        onOk: async () => {
+          await sysPortalAssign({
+            menuIds: checkedKeys.value.concat(halfCheckedKeys.value),
+            portalId: portalId.value,
+          });
+          createMessage.success('分配成功！');
+          emit('success', portalId.value);
+          closeModal();
+        },
+      });
+    } catch (error) {
+      // console.log('error', error);
+      createMessage.error((error as unknown as Error).message);
+    } finally {
+      setModalProps({ confirmLoading: false });
+    }
+  }
+
+  // 查询树数据
+  async function getTreeData() {
+    treeData.value = await sysMenuQueryTree({});
+  }
+</script>

src/views/sys/sysPortal/data.ts

@@ -11,25 +11,15 @@ export const columns: BasicColumn[] = [
     title: '门户名称',
     dataIndex: 'name',
   },
-  {
-    title: '门户类型',
-    dataIndex: 'type',
-  },
-  {
-    title: '备注',
-    dataIndex: 'remark',
-  },
   {
     title: '排序',
     dataIndex: 'sort',
+    width: 100,
+    sorter: true,
   },
   {
-    title: '创建时间',
-    dataIndex: 'createTime',
-  },
-  {
-    title: '更新时间',
-    dataIndex: 'updateTime',
+    title: '门户类型',
+    dataIndex: 'type',
   },
 ];
 
@@ -62,22 +52,6 @@ export const searchFormSchema: FormSchema[] = [
       },
     },
   },
-  {
-    label: '备注',
-    field: 'remark',
-    component: 'Input',
-    componentProps: {
-      placeholder: '请输入备注',
-    },
-  },
-  {
-    label: '排序',
-    field: 'sort',
-    component: 'Input',
-    componentProps: {
-      placeholder: '请输入排序',
-    },
-  },
 ];
 // 表单新增编辑
 export const dataFormSchema: FormSchema[] = [
@@ -102,48 +76,34 @@ export const dataFormSchema: FormSchema[] = [
   {
     label: '门户类型',
     field: 'type',
-    component: 'ApiSelect',
+    component: 'ApiRadioGroup',
     componentProps: {
       api: listDictModel,
       params: {
         dictCode: 'sys_create_type',
       },
     },
-  },
-  {
-    label: '备注',
-    field: 'remark',
-    required: true,
-    component: 'InputTextArea',
-    componentProps: {
-      placeholder: '请输入备注',
-    },
+    defaultValue: 'sys',
   },
   {
     label: '排序',
     field: 'sort',
-    component: 'PlainText',
+    component: 'Input',
     componentProps: {
       placeholder: '请输入排序',
     },
   },
   {
-    label: '更新时间',
-    field: 'updateTime',
-    component: 'DatePicker',
+    label: '备注',
+    field: 'remark',
+    component: 'InputTextArea',
     componentProps: {
-      placeholder: '请选择时间',
-      format: 'YYYY-MM-DD HH:mm:ss',
-      showTime: { format: 'YYYY-MM-DD HH:mm:ss' },
+      placeholder: '请输入备注',
     },
   },
 ];
 // 表单详情查看
 export const viewSchema: DescItem[] = [
-  {
-    label: '门户id',
-    field: 'id',
-  },
   {
     label: '门户编码',
     field: 'code',
@@ -156,20 +116,12 @@ export const viewSchema: DescItem[] = [
     label: '门户类型',
     field: 'type',
   },
-  {
-    label: '备注',
-    field: 'remark',
-  },
   {
     label: '排序',
     field: 'sort',
   },
   {
-    label: '创建时间',
-    field: 'createTime',
-  },
-  {
-    label: '更新时间',
-    field: 'updateTime',
+    label: '备注',
+    field: 'remark',
   },
 ];

src/views/sys/sysPortal/formModal.vue

@@ -1,70 +0,0 @@
-<template>
-  <BasicModal
-    v-bind="$attrs"
-    destroyOnClose
-    @register="registerModal"
-    :title="getTitle"
-    :width="width"
-    @ok="handleSubmit"
-  >
-    <BasicForm @register="registerForm" layout="vertical" />
-  </BasicModal>
-</template>
-<script lang="ts" setup>
-  import { ref, computed, unref } from 'vue';
-  import { BasicModal, useModalInner } from '/@/components/Modal';
-  import { BasicForm, useForm } from '/@/components/Form';
-  import { useMessage } from '/@/hooks/web/useMessage';
-  import { dataFormSchema } from './data';
-
-  import { sysPortalAdd, sysPortalEdit, sysPortalDetail } from '/@/api/sys/sysPortalApi';
-
-  const emit = defineEmits(['success', 'register']);
-
-  const getTitle = computed(() => (!unref(isUpdate) ? '新增门户' : '编辑门户'));
-  const width = '45%';
-  const isUpdate = ref(false);
-  const rowId = ref();
-
-  const { createMessage } = useMessage();
-  const [registerForm, { setFieldsValue, resetFields, validate }] = useForm({
-    labelWidth: 100,
-    schemas: dataFormSchema,
-    showActionButtonGroup: false,
-    actionColOptions: {
-      span: 23,
-    },
-  });
-  const [registerModal, { setModalProps, closeModal }] = useModalInner(async data => {
-    await resetFields();
-    setModalProps({ confirmLoading: false });
-    isUpdate.value = !!data?.isUpdate;
-
-    if (unref(isUpdate)) {
-      const resData = await sysPortalDetail(data.record.id);
-      rowId.value = resData.id;
-      await setFieldsValue({
-        ...resData,
-      });
-    }
-  });
-
-  // 提交按钮事件
-  async function handleSubmit() {
-    try {
-      const values = await validate();
-      setModalProps({ confirmLoading: true });
-      !unref(isUpdate)
-        ? await sysPortalAdd({ ...values })
-        : await sysPortalEdit({ ...values, id: rowId.value });
-      !unref(isUpdate) ? createMessage.success('新增成功！') : createMessage.success('编辑成功！');
-      closeModal();
-      emit('success', {
-        isUpdate: unref(isUpdate),
-        values: { ...values, id: rowId.value },
-      });
-    } finally {
-      setModalProps({ confirmLoading: false });
-    }
-  }
-</script>

src/views/sys/sysPortal/index.vue

@@ -17,8 +17,17 @@
                 label: '查看',
                 onClick: handleView.bind(null, record),
               },
+              {
+                auth: 'sys:portal:assign',
+                icon: 'icon-setting|iconfont',
+                tooltip: '分配菜单',
+                label: '分配菜单',
+                onClick: handlePortalMenu.bind(null, record),
+                ifShow: record.type != 'sys',
+              },
               {
                 auth: 'sys:portal:edit',
+                ifShow: record.type != 'sys',
                 icon: 'icon-edit|iconfont',
                 tooltip: '编辑',
                 label: '编辑',
@@ -26,6 +35,7 @@
               },
               {
                 auth: 'sys:portal:remove',
+                ifShow: record.type != 'sys',
                 icon: 'icon-delete|iconfont',
                 tooltip: '删除',
                 label: '删除',
@@ -62,6 +72,7 @@
     </BasicTable>
     <FormDrawer @register="registerDrawer" @success="handleSuccess" />
     <ViewDrawer @register="registerDrawerView" @success="handleSuccess" />
+    <FormModalPortalMenu @register="registerModalPortalMenu" />
   </div>
 </template>
 <script lang="ts" setup>
@@ -71,10 +82,11 @@
 
   import { BasicTable, useTable, TableAction } from '/@/components/Table';
 
-  // import { useModal } from '/@/components/Modal';
+  import { useModal } from '/@/components/Modal';
   import { useMessage } from '/@/hooks/web/useMessage';
   import FormDrawer from './formDrawer.vue';
   import ViewDrawer from './viewDrawer.vue';
+  import FormModalPortalMenu from './FormModalPortalMenu.vue';
   import { columns, searchFormSchema } from './data';
 
   import { sysPortalQueryPage, sysPortalRemove } from '/@/api/sys/sysPortalApi';
@@ -91,8 +103,13 @@
   // const [registerModal, { openModal }] = useModal();
   const [registerDrawer, { openDrawer }] = useDrawer();
   const [registerDrawerView, { openDrawer: openDrawerView }] = useDrawer();
+  const [registerModalPortalMenu, { openModal: openModalPortalMenu }] = useModal();
 
   const tableSort = ref([
+    {
+      field: 'sort',
+      direction: 'ASC',
+    },
     {
       field: 'create_time',
       direction: 'DESC',
@@ -100,7 +117,7 @@
   ]) as any;
 
   const [registerTable, { reload, getSelectRowKeys }] = useTable({
-    title: '门户列表 ',
+    title: ' ',
     api: sysPortalQueryPage,
     rowKey: 'id',
     columns,
@@ -121,7 +138,7 @@
     useSearchForm: true,
     bordered: true,
     actionColumn: {
-      width: 200,
+      width: 320,
       title: '操作',
       dataIndex: 'action',
     },
@@ -170,6 +187,14 @@
       });
     }
   }
+
+  // 分配菜单按钮事件
+  function handlePortalMenu(record: Recordable) {
+    console.log(record);
+    openModalPortalMenu(true, {
+      record,
+    });
+  }
   // 表格点击字段排序
   function handleSortFn(sortInfo) {
     if (sortInfo?.order && sortInfo?.columnKey) {

src/views/sys/sysTenant/package/FormModalAssignMenu.vue

@@ -43,7 +43,6 @@
     packageId.value = data.record.id;
     // 获取已选中列表
     const roleMenuList = (await sysPackageQueryMenuTree(packageId.value)) || [];
-    debugger;
     // 找出菜单的所有父节点ID
     treeData.value.map(item => {
       if (item.children.length) {