✨ Introducing new features. 增加部门菜单功能

src/api/admin/tenant-menu.ts

@@ -0,0 +1,57 @@
+import request from "/@/utils/request"
+
+export function fetchList(query?: Object) {
+    return request({
+        url: '/admin/tenant-menu/page',
+        method: 'get',
+        params: query
+    })
+}
+
+
+export function addObj (obj: object) {
+    return request({
+        url: '/admin/tenant-menu',
+        method: 'post',
+        data: obj
+    })
+}
+
+export function getObj(id: string) {
+    return request({
+        url: '/admin/tenant-menu/',
+        method: 'get',
+        params: {
+            id: id
+        }
+    })
+}
+
+export function delObj(id: string) {
+    return request({
+        url: '/admin/tenant-menu/' + id,
+        method: 'delete'
+    })
+}
+
+export function putObj(obj:Object) {
+    return request({
+        url: '/admin/tenant-menu',
+        method: 'put',
+        data: obj
+    })
+}
+
+export function menuList() {
+    return request({
+        url: '/admin/tenant-menu/list',
+        method: 'get'
+    })
+}
+
+export function treemenu(){
+    return request({
+        url: '/admin/tenant-menu/tree/menu',
+        method: 'get'
+    })
+}

src/utils/request.ts

@@ -1,4 +1,4 @@
-import axios, {AxiosInstance, AxiosRequestConfig, InternalAxiosRequestConfig} from 'axios';
+import axios, {AxiosInstance, InternalAxiosRequestConfig} from 'axios';
 import errorCode from './errorCode'
 import {ElMessage, ElMessageBox} from 'element-plus';
 import {Session} from '/@/utils/storage';

src/views/admin/tenant/i18n/en.ts

@@ -28,5 +28,7 @@ export default {
         inputcreateTimeTip: 'input createTime',
         inputupdateTimeTip: 'input updateTime',
         inputmenuIdTip: 'input menuId',
+   }, tenantmenu: {
+          name: 'tenantmenu', index: 'index', status: 'status', createTime: 'createTime',
      }
 }

src/views/admin/tenant/i18n/zh-cn.ts

@@ -28,5 +28,11 @@ export default {
         inputcreateTimeTip: '请输入创建',
         inputupdateTimeTip: '请输入更新时间',
         inputmenuIdTip: '请输入menuId',
+    },
+    tenantmenu: {
+        name: '租户套餐',
+        index: '序号',
+        status: '状态',
+        createTime: '创建',
     }
 }

src/views/admin/tenant/index.vue

@@ -29,10 +29,15 @@
             v-auth="'admin_systenant_add'">
             {{ $t('common.exportBtn') }}
           </el-button>
+
           <el-button  :disabled="multiple" icon="Delete" type="primary" class="ml10"
             v-auth="'admin_systenant_del'" @click="handleDelete(undefined)">
             {{ $t('common.delBtn') }}
           </el-button>
+
+          <el-button  type="primary" class="ml10" @click="handleTenantMenu()" v-auth="'admin_systenant_tenantmenu'">
+            {{ $t('tenantmenu.name') }}
+          </el-button>
           <right-toolbar v-model:showSearch="showSearch" class="ml10" style="float: right;margin-right: 20px"
             @queryTable="getDataList"></right-toolbar>
         </div>
@@ -80,6 +85,8 @@
     <!-- 导入excel -->
     <upload-excel ref="excelUploadRef" :title="$t('tenant.importTenantTip')" url="/admin/tenant/import"
       temp-url="/admin/sys-file/local/file/tenant.xlsx" @refreshDataList="getDataList" />
+
+    <tenant-menu ref="TenantMenuRef"></tenant-menu>
   </div>
 </template>
 
@@ -92,11 +99,13 @@ import { useDict } from "/@/hooks/dict";
 
 // 引入组件
 const FormDialog = defineAsyncComponent(() => import('./form.vue'));
+const TenantMenu = defineAsyncComponent(() => import('./tenantMenu/index.vue'))
 const { t } = useI18n()
 
 // 定义变量内容
 const formDialogRef = ref()
 const excelUploadRef = ref()
+const TenantMenuRef = ref()
 // 搜索变量
 const queryRef = ref()
 const showSearch = ref(true)
@@ -157,4 +166,9 @@ const handleDelete = (row: any) => {
       })
     })
 };
+
+const handleTenantMenu = () => {
+  TenantMenuRef.value.open()
+}
+
 </script>

src/views/admin/tenant/tenantMenu/form.vue

@@ -0,0 +1,175 @@
+<template>
+  <el-dialog :title="form.id ? $t('common.editBtn') : $t('common.addBtn')" v-model="visible"
+             :close-on-click-modal="false" draggable>
+    <el-form ref="dataFormRef" :model="form" :rules="dataRules" size="default" label-width="90px">
+      <el-row :gutter="24">
+        <el-col :span="12" class="mb20">
+          <el-form-item :label="t('tenant.name')" prop="name">
+            <el-input v-model="form.name" :placeholder="t('tenant.inputnameTip')" />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12" class="mb20">
+          <el-form-item :label="t('tenant.status')" prop="status">
+            <el-radio-group v-model="form.status">
+              <el-radio :label="item.value" border v-for="(item,index) in status_type" :key="index">{{item.label}}</el-radio>
+            </el-radio-group>
+          </el-form-item>
+        </el-col>
+        <el-col :span="24" class="mb20">
+          <el-form-item prop="menuIds">
+            <el-tree show-checkbox ref="menuTreeRef"
+                     :check-strictly="false"
+                     v-loading="treeLoading"
+                     :data="menuData"
+                     :props="defaultProps"
+                     :default-checked-keys="checkedMenu"
+                     node-key="id"
+                     highlight-current
+                     default-expand-all
+            />
+          </el-form-item>
+        </el-col>
+      </el-row>
+    </el-form>
+    <template #footer>
+      <span class="dialog-footer">
+        <el-button @click="visible = false" size="default">{{ $t('common.cancelButtonText') }}</el-button>
+        <el-button type="primary" @click="onSubmit" size="default" :disabled="loading">{{ $t('common.confirmButtonText') }}</el-button>
+      </span>
+    </template>
+  </el-dialog>
+</template>
+
+<script setup lang="ts" name="tenant-menu-form">
+
+
+import {getObj} from "/@/api/admin/tenant-menu";
+import {useDict} from "/@/hooks/dict";
+import {useI18n} from "vue-i18n";
+const { status_type } = useDict('status_type')
+const { t } = useI18n()
+import { treemenu, addObj, putObj } from '/@/api/admin/tenant-menu'
+import {useMessage} from "/@/hooks/message";
+const emit = defineEmits(['refresh']);
+
+const dataFormRef = ref();
+const visible = ref(false)
+const menuTreeRef = ref()
+
+const form = reactive({
+  id: '',
+  status: '',
+  name: '',
+  menuIds: ''
+});
+
+const dataRules = reactive({
+
+})
+
+const menuData = ref<any[]>([])
+
+const defaultProps = reactive({
+  label: 'name',
+  value: 'id'
+})
+
+const checkedMenu = ref<any[]>([])
+
+// 打开弹窗
+const openDialog = (id: string) => {
+  visible.value = true
+  form.id = ''
+
+  // 重置表单数据
+  if (dataFormRef.value) {
+    dataFormRef.value.resetFields()
+  }
+  checkedMenu.value = []
+  // 获取Tenant信息
+  if (id) {
+    form.id = id
+    getTenantMenuData(id)
+  }
+  getMenuData()
+};
+
+
+const loading = ref(false)
+
+const onSubmit = () => {
+  loading.value = true
+  dataFormRef.value.validate((valid: boolean) => {
+    if (!valid) {
+      return false
+    }
+    form.menuIds = [...menuTreeRef.value.getCheckedKeys(),...menuTreeRef.value.getHalfCheckedKeys()].join(",")
+    if (form.id) {
+      putObj(form).then(() => {
+        useMessage().success(t('common.editSuccessText'))
+        visible.value = false // 关闭弹窗
+        loading.value = false
+        emit('refresh')
+      }).catch((err: any) => {
+        useMessage().error(err.msg)
+        loading.value = false
+      })
+    } else {
+      addObj(form).then(() => {
+        useMessage().success(t('common.addSuccessText'))
+        visible.value = false // 关闭弹窗
+        loading.value = false
+        emit('refresh')
+      }).catch((err: any) => {
+        useMessage().error(err.msg)
+        loading.value = false
+      })
+    }
+  })
+}
+
+const treeLoading = ref(false)
+const getMenuData = () => {
+  treeLoading.value = true
+  treemenu().then(res =>{
+    menuData.value = res.data
+    if (form.menuIds) {
+      checkedMenu.value = resolveAllEunuchNodeId(menuData.value,form.menuIds.split(','),[])
+    } else {
+      checkedMenu.value = []
+    }
+    treeLoading.value = false
+  })
+}
+const resolveAllEunuchNodeId = (json: any[], idArr: any[], temp: any[]) => {
+  for (let i = 0; i < json.length; i++) {
+    const item = json[i]
+    // 国际化
+    item.name = t(item.name)
+    // 存在子节点，递归遍历;不存在子节点，将json的id添加到临时数组中
+    if (item.children && item.children.length !== 0) {
+      resolveAllEunuchNodeId(item.children, idArr, temp)
+    } else {
+      temp.push(idArr.filter(id => id === item.id))
+    }
+  }
+  return temp
+}
+
+const getTenantMenuData = (id: string) => {
+  // 获取部门数据
+  getObj(id).then((res: any) => {
+    Object.assign(form, res.data[0])
+  })
+}
+
+// 暴露变量
+defineExpose({
+  openDialog
+});
+
+</script>
+
+<style scoped>
+
+</style>

src/views/admin/tenant/tenantMenu/index.vue

@@ -0,0 +1,91 @@
+<template>
+  <el-drawer v-model="visible" title="租户套餐" size="80%">
+    <el-card shadow="hover" class="layout-padding-auto">
+      <el-row>
+        <div class="mb8" style="width: 100%">
+          <el-button icon="folder-add" type="primary" class="ml10" @click="tenantMenuDialogRef.openDialog()"
+                     v-auth="'admin_systenantmenu_add'">
+            {{ $t('common.addBtn') }}
+          </el-button>
+          <right-toolbar :search='false' class="ml10" style="float: right;margin-right: 20px"
+                         @queryTable="getDataList"></right-toolbar>
+        </div>
+
+      </el-row>
+      <el-table :data="state.dataList" v-loading="state.loading" style="width: 100%">
+        <el-table-column type="index" :label="$t('tenantmenu.index')" width="80" />
+        <el-table-column prop="name" :label="$t('tenantmenu.name')" show-overflow-tooltip></el-table-column>
+        <el-table-column :label="$t('tenantmenu.status')" show-overflow-tooltip>
+          <template #default="scope">
+            <dict-tag :options="status_type" :value="scope.row.status"></dict-tag>
+          </template>
+        </el-table-column>
+        <el-table-column prop="createTime" :label="$t('tenantmenu.createTime')"
+                         show-overflow-tooltip></el-table-column>
+        <el-table-column :label="$t('common.action')" width="150">
+          <template #default="scope">
+            <el-button   text type="primary" @click="tenantMenuDialogRef.openDialog(scope.row.id)"
+                         v-auth="'admin_systenantmenu_edit'"> {{
+                $t('common.editBtn')
+              }}
+            </el-button>
+            <el-button text type="primary" @click="handleDelete(scope.row)" v-auth="'admin_systenantmenu_del'">
+              {{ $t('common.delBtn') }}
+            </el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+      <pagination @size-change="sizeChangeHandle" @current-change="currentChangeHandle" v-bind="state.pagination">
+      </pagination>
+      <tenant-menu-dialog ref="tenantMenuDialogRef" @refresh="getDataList"></tenant-menu-dialog>
+    </el-card>
+  </el-drawer>
+</template>
+
+<script setup lang="ts" name="tenant-menu">
+import {BasicTableProps, useTable} from "/@/hooks/table";
+import { fetchList,delObj } from "/@/api/admin/tenant-menu";
+import {useDict} from "/@/hooks/dict";
+import {useMessage, useMessageBox} from "/@/hooks/message";
+import {useI18n} from "vue-i18n";
+const { t } = useI18n()
+const TenantMenuDialog = defineAsyncComponent(() => import('./form.vue'))
+
+const { status_type } = useDict('status_type')
+const visible = ref(false)
+const tenantMenuDialogRef = ref()
+
+const state: BasicTableProps = reactive<BasicTableProps>({
+  pageList: fetchList
+})
+const {
+  getDataList,
+  currentChangeHandle,
+  sizeChangeHandle,
+} = useTable(state)
+
+const handleDelete = (row: any) => {
+  useMessageBox().confirm(`${t('common.delConfirmText')}：${row.name} ?`).then(() => {
+    // 删除用户的接口
+    delObj(row.id).then(() => {
+      getDataList();
+      useMessage().success(t('common.delSuccessText'))
+    }).catch(err => {
+      useMessage().error(err.msg)
+    })
+  })
+};
+
+const open = () => {
+  visible.value = true
+}
+
+// 暴露变量
+defineExpose({
+  open,
+});
+</script>
+
+<style scoped>
+
+</style>

src/views/admin/user/index.vue

@@ -134,7 +134,7 @@ const state: BasicTableProps = reactive<BasicTableProps>({
     username: '',
     phone: ''
   },
-  pageList: pageList // H
+  pageList: pageList
 });
 
 // 部门树使用的数据