zant-admin 1.0.4 → 2.0.1

package/src/views/system/sysRole.vue

@@ -1,207 +1,207 @@
-<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>
+<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>