zant-admin 1.0.0

package/src/views/system/sysMenu.vue

@@ -0,0 +1,223 @@
+<template>
+  <form-table
+    :formState="formState"
+    :columns="columns"
+    modulePath="sysMenu"
+    pageAction="MenuTreeList"
+   :permissionModulePath="permissionModulePath"
+    method="get"
+    :page="false"
+    @update="edit"
+    @edit="edit"
+    ref="childRef"
+  >
+    <!-- 可以通过插槽自定义单元格 -->
+      <!-- <template #custom-title="{ record }">
+        {{record.type != 4 ? record.title : record.btnName}}
+    </template> -->
+    <template #custom-isEnable="{ record }">
+      <a-switch
+        v-model:checked="record.isEnable"
+        checked-children="是"
+        un-checked-children="否"
+        @change="handleSwitchIsEnableChange(record)"
+      />
+    </template>
+    <template #custom-cache="{ record }">
+      <a-switch
+        v-if="record.type != 4"
+        v-model:checked="record.cache"
+        checked-children="是"
+        un-checked-children="否"
+        @change="handleSwitchCacheChange(record)"
+      />
+    </template>
+    <template #custom-isShowMenu="{ record }">
+      <a-switch
+        v-if="record.type != 4"
+        v-model:checked="record.isShowMenu"
+        checked-children="是"
+        un-checked-children="否"
+        @change="handleSwitchIsShowMenuChange(record)"
+      />
+    </template>
+
+
+   <template #custom-icon="{ record }">
+      <component v-if="record.icon && $icons[record.icon]" :is="$icons[record.icon]" />
+      <span v-else>{{ record.icon }}</span>
+    </template>
+    <template #custom-type="{ record }">
+     <a-tag v-if="record.type == 1" color="blue">目录</a-tag>
+     <a-tag v-if="record.type == 2" color="cyan">菜单</a-tag>
+     <a-tag v-if="record.type == 3" color="purple">链接</a-tag>
+     <a-tag v-if="record.type == 4" color="orange">按钮</a-tag>
+    </template>
+    <template #custom-operation="{ record }">
+      <a-divider type="vertical" />
+      <a v-if="record.type == 1" @click="addSubmenu(record)">新增子菜单</a>
+      <a v-if="record.type == 2" @click="addSubtn(record)">新增按钮</a>
+    </template>
+  </form-table>
+  <!-- 新增修改 -->
+  <sysMenuEdit
+    :open="editopen"
+    @close="editopen = false"
+    @updateData="refreshData"
+    ref="editRef"
+  >
+  </sysMenuEdit>
+</template>
+
+<style></style>
+
+<script setup>
+import { ref, inject, getCurrentInstance } from 'vue'
+import FormTable from '@/components/FormTable.vue'
+import sysMenuEdit from '@/components/edit/sysMenuEdit.vue'
+import sysMenu from '@/api/methods/sysMenu'
+import { menuStore } from '@/stores/menu'
+// 权限模块路径
+const permissionModulePath = ref('system:sysRole')
+// 获取当前实例，以便访问全局图标
+const { proxy } = getCurrentInstance()
+const $icons = proxy.$icons
+// 注入父组件的方法
+const menuinit = inject('menuinit')
+const formState = ref({
+  name: { label: '菜单名', value: '', type: 'text' },
+})
+const columns = ref([
+  {
+    title: '菜单名',
+    dataIndex: 'title',
+    resizable: true,
+  },
+  {
+    title: '图标',
+    key: 'icon',
+    resizable: true,
+    width: 50,
+  },
+  {
+    title: '类型',
+    key: 'type',
+    resizable: true,
+  },
+  {
+    title: '命名路由',
+    dataIndex: 'path',
+    resizable: true,
+  },
+  {
+    title: '权限标识',
+    dataIndex: 'perms',
+    resizable: true,
+  },
+  {
+    title: '排序',
+    dataIndex: 'sort',
+    resizable: true,
+  },
+  {
+    title: '是否启用',
+    key: 'isEnable',
+    resizable: true,
+  },
+    {
+    title: '显示系统菜单栏',
+    key: 'isShowMenu',
+    resizable: 'true',
+  },
+  {
+    title: '是否缓存',
+    key: 'cache',
+    resizable: true,
+  },
+  {
+    title: '创建时间',
+    dataIndex: 'createTime',
+    resizable: true,
+
+  },
+  {
+    title: '操作',
+    key: 'operation',
+    fixed: 'right',
+    width: 200,
+  },
+])
+const childRef = ref(null)
+
+//编辑
+const editopen = ref(false)
+const editRef = ref(null)
+const edit = record => {
+      editRef.value.getMenuTree()
+  editRef.value.init(record.id)
+  editopen.value = true
+}
+//新增子菜单
+const addSubmenu = record => {
+    editRef.value.getMenuTree()
+  editRef.value.addSubmenu(record)
+  editopen.value = true
+}
+const addSubtn = record => {
+      editRef.value.getMenuTree()
+  editRef.value.addSubtn(record)
+  editopen.value = true
+}
+const refreshData = () => {
+  const menu = menuStore()
+  sysMenu.getRoutesMenu().then(res => {
+    menu.menus = res.data
+    if (menuinit) {
+      menuinit()
+    }
+  })
+  childRef.value.tableLoad()
+}
+//修改是否启用
+const handleSwitchIsEnableChange = record => {
+  var data = {
+    id: record.id,
+    isEnabled: record.isEnable,
+  }
+  sysMenu.updateIsEnabled(data).then(() => {
+    childRef.value.tableLoad()
+  })
+}
+//修改是否缓存
+const handleSwitchCacheChange = record => {
+  var data = {
+    id: record.id,
+    cache: record.cache,
+  }
+  sysMenu.updateCache(data).then(() => {
+    childRef.value.tableLoad()
+  })
+}
+//修改是否启用
+const handleSwitchIsShowMenuChange = record => {
+  var data = {
+    id: record.id,
+    isShowMenu: record.isShowMenu,
+  }
+  sysMenu.updateIsShowMenu(data).then(() => {
+    childRef.value.tableLoad()
+  })
+}
+</script>
+
+<style>
+.slide-enter-active, .slide-leave-active {
+  transition: transform 0.5s;
+}
+.slide-enter {
+  transform: translateX(-100%);
+}
+.slide-leave-to {
+  transform: translateX(-100%);
+}
+</style>

package/src/views/system/sysRole.vue

@@ -0,0 +1,184 @@
+<template>
+  <form-table
+    :formState="formState"
+    :columns="columns"
+    modulePath="sysRole"
+    :permissionModulePath="permissionModulePath"
+    @edit="edit"
+    @empower="empower"
+    ref="childRef"
+  >
+    <!-- 可以通过插槽自定义单元格 -->
+    <template #custom-isEnable="{ record }">
+      <a-switch
+        v-model:checked="record.isEnable"
+        checked-children="是"
+        un-checked-children="否"
+        @change="handleSwitchChange(record)"
+      />
+    </template>
+     <template #custom-operation="{ record }">
+      <a-divider type="vertical" />
+      <a @click="empower(record)"  v-permission="permissionModulePath+':empower'">关联菜单</a>
+    </template>
+  </form-table>
+  <!-- 新增修改 -->
+  <SysRoleEdit
+    :open="editopen"
+    @close="editopen = false"
+    @updateData="refreshData"
+    ref="editRef"
+  >
+  </SysRoleEdit>
+  <a-drawer
+    title="关联菜单"
+    :width="540"
+    :open="empoweropen"
+    :body-style="{ paddingBottom: '80px' }"
+    :footer-style="{ textAlign: 'right' }"
+    @close="()=>{empoweropen=false}"
+    :destroyOnClose="true"
+  >
+   <a-tree
+      v-model:checkedKeys="checkedKeys"
+      checkable
+      :tree-data="roleMenutreeData"
+      :checkStrictly="true"
+      @check="onTreeCheck"
+    >
+      <template #title="{ title,type,btnName }">
+        {{ title }}
+         <span v-if="type === 1" class="padding-left-20 text-font-11 text-color-textgray">目录</span>
+          <span v-if="type === 2" class="padding-left-20 text-font-11 text-color-primary">菜单</span>
+          <span v-if="type === 3" class="padding-left-20 text-font-11 text-color-yellow">链接</span>
+           <span v-if="type === 4" class="padding-left-20 text-font-11 text-color-lime">按钮</span>
+      </template>
+    </a-tree>
+
+    <template #extra>
+      <a-space>
+        <a-button type="primary" @click="empowerSave">保存</a-button>
+      </a-space>
+    </template>
+  </a-drawer>
+</template>
+<script setup>
+import { ref, inject } from 'vue'
+import FormTable from '@/components/FormTable.vue'
+import SysRoleEdit from '@/components/edit/SysRoleEdit.vue'
+import sysRole from '@/api/methods/sysRole'
+import { message } from 'ant-design-vue'
+import { menuStore } from '@/stores/menu'
+import sysMenu from '@/api/methods/sysMenu'
+import { refreshRoutes } from '@/router'
+// 注入父组件的方法
+const menuinit = inject('menuinit')
+// 权限模块路径
+const permissionModulePath = ref('system:sysRole')
+
+const formState = ref({
+  name: { label: '角色名称', value: '',defaultvalue:'', type: 'text' },
+})
+const columns = ref([
+  {
+    title: '角色名称',
+    dataIndex: 'name',
+     resizable: true,
+  },
+  {
+    title: '备注',
+    dataIndex: 'remark',
+     resizable: true,
+  },
+  {
+    title: '是否启用',
+    key: 'isEnable',
+     resizable: true,
+  },
+  {
+    title: '创建时间',
+    dataIndex: 'createTime',
+     resizable: true,
+  },
+  {
+    title: '操作',
+    key: 'operation',
+    fixed: 'right',
+    width: 200,
+  },
+])
+const childRef = ref(null)
+
+//编辑
+const editopen = ref(false)
+const editRef = ref(null)
+const edit = record => {
+  editRef.value.init(record.id)
+  editopen.value = true
+}
+const refreshData = () => {
+  childRef.value.tableLoad()
+}
+
+//修改是否启用
+const handleSwitchChange = record => {
+  var data = {
+    id: record.id,
+    isEnabled: record.isEnable,
+  }
+  sysRole.updateIsEnabled(data).then(() => {
+    childRef.value.tableLoad()
+  })
+}
+
+const empoweropen = ref(false)
+const roleMenutreeData = ref([])
+const halfCheckedKeys = ref([])
+const checkedKeys = ref([])
+const recordId = ref(0)
+//关联菜单
+const empower = record => {
+  recordId.value = record.id
+  sysRole.getRoleMenu({ roleId: record.id }).then(res => {
+    roleMenutreeData.value = res.data.output
+    checkedKeys.value = res.data.checkedKeys
+    empoweropen.value = true
+  })
+}
+
+//处理Tree组件的check事件，获取半选状态的父节点
+const onTreeCheck = (checkedKeysValue, e) => {
+  checkedKeys.value = checkedKeysValue
+  halfCheckedKeys.value = e.halfCheckedKeys || []
+}
+//关联菜单保存
+const empowerSave = () => {
+  var data = {
+    Id: recordId.value,
+    Menus:checkedKeys.value.checked,
+  }
+  sysRole.savePower(data).then(() => {
+    const menu = menuStore()
+    sysMenu
+      .getRoutesMenu()
+      .then(res => {
+        menu.menus = res.data
+        message.success('成功', 1, () => {
+          if (menuinit) {
+                refreshRoutes().then(() => {
+                // 重新加载菜单树（如果你有菜单组件）
+                 menuinit()
+                // 跳转到新菜单页面，或者刷新当前页
+              // router.replace(router.currentRoute.value.fullPath)
+              })
+
+          }
+          empoweropen.value = false
+        })
+      })
+      .catch()
+  })
+}
+</script>
+
+<style></style>

package/templates/env.production

@@ -0,0 +1,2 @@
+# 生产环境配置
+VITE_BASE_API=http://your-production-server.com/api/