init

src/views/pms/role/index.vue

@@ -0,0 +1,243 @@
+<!--------------------------------
+ - @Author: Ronnie Zhang
+ - @LastEditor: Ronnie Zhang
+ - @LastEditTime: 2023/12/05 21:29:38
+ - @Email: zclzone@outlook.com
+ - Copyright © 2023 Ronnie Zhang(大脸怪) | https://isme.top
+ --------------------------------->
+
+<template>
+  <CommonPage>
+    <template #action>
+      <n-button type="primary" @click="handleAdd()">
+        <i class="i-material-symbols:add mr-4 text-18" />
+        新增角色
+      </n-button>
+    </template>
+
+    <MeCrud
+      ref="$table"
+      v-model:query-items="queryItems"
+      :scroll-x="1200"
+      :columns="columns"
+      :get-data="api.read"
+    >
+      <MeQueryItem label="角色名" :label-width="50">
+        <n-input
+          v-model:value="queryItems.name"
+          type="text"
+          placeholder="请输入角色名"
+          clearable
+          @keydown.enter="$table?.handleSearch"
+        />
+      </MeQueryItem>
+      <MeQueryItem label="状态" :label-width="50">
+        <n-select
+          v-model:value="queryItems.enable"
+          clearable
+          :options="[
+            { label: '启用', value: 1 },
+            { label: '停用', value: 0 },
+          ]"
+        />
+      </MeQueryItem>
+    </MeCrud>
+    <MeModal ref="modalRef" width="520px">
+      <n-form
+        ref="modalFormRef"
+        label-placement="left"
+        label-align="left"
+        :label-width="80"
+        :model="modalForm"
+      >
+        <n-form-item
+          label="角色名"
+          path="name"
+          :rule="{
+            required: true,
+            message: '请输入角色名',
+            trigger: ['input', 'blur'],
+          }"
+        >
+          <n-input v-model:value="modalForm.name" />
+        </n-form-item>
+        <n-form-item
+          label="角色编码"
+          path="code"
+          :rule="{
+            required: true,
+            message: '请输入角色编码',
+            trigger: ['input', 'blur'],
+          }"
+        >
+          <n-input v-model:value="modalForm.code" :disabled="modalAction !== 'add'" />
+        </n-form-item>
+        <n-form-item label="权限" path="permissionIds">
+          <CascadeTree
+            v-model:value="modalForm.permissionIds"
+            :tree-data="permissionTree"
+            label-field="name"
+            key-field="id"
+            class="cus-scroll max-h-200 w-full"
+          />
+        </n-form-item>
+        <n-form-item label="状态" path="enable">
+          <n-switch v-model:value="modalForm.enable">
+            <template #checked>启用</template>
+            <template #unchecked>停用</template>
+          </n-switch>
+        </n-form-item>
+      </n-form>
+    </MeModal>
+  </CommonPage>
+</template>
+
+<script setup>
+import { NButton, NSwitch } from 'naive-ui'
+import { MeCrud, MeQueryItem, MeModal } from '@/components'
+import { useCrud } from '@/composables'
+import api from './api'
+import CascadeTree from './components/CascadeTree.vue'
+
+defineOptions({ name: 'RoleMgt' })
+
+const router = useRouter()
+
+const $table = ref(null)
+/** QueryBar筛选参数（可选） */
+const queryItems = ref({})
+
+onMounted(() => {
+  $table.value?.handleSearch()
+})
+
+const columns = [
+  { title: '角色名', key: 'name' },
+  { title: '角色编码', key: 'code' },
+  {
+    title: '状态',
+    key: 'enable',
+    render: (row) =>
+      h(
+        NSwitch,
+        {
+          size: 'small',
+          rubberBand: false,
+          value: row.enable,
+          loading: !!row.enableLoading,
+          disabled: row.code === 'SUPER_ADMIN',
+          onUpdateValue: () => handleEnable(row),
+        },
+        {
+          checked: () => '启用',
+          unchecked: () => '停用',
+        }
+      ),
+  },
+  {
+    title: '操作',
+    key: 'actions',
+    width: 320,
+    align: 'right',
+    fixed: 'right',
+    render(row) {
+      return [
+        h(
+          NButton,
+          {
+            size: 'small',
+            type: 'primary',
+            secondary: true,
+            onClick: () =>
+              router.push({ path: `/pms/role/user/${row.id}`, query: { roleName: row.name } }),
+          },
+          {
+            default: () => '分配用户',
+            icon: () => h('i', { class: 'i-fe:user-plus text-14' }),
+          }
+        ),
+        h(
+          NButton,
+          {
+            size: 'small',
+            type: 'primary',
+            style: 'margin-left: 12px;',
+            disabled: row.code === 'SUPER_ADMIN',
+            onClick: () => handleEdit(row),
+          },
+          {
+            default: () => '编辑',
+            icon: () => h('i', { class: 'i-material-symbols:edit-outline text-14' }),
+          }
+        ),
+
+        h(
+          NButton,
+          {
+            size: 'small',
+            type: 'error',
+            style: 'margin-left: 12px;',
+            disabled: row.code === 'SUPER_ADMIN',
+            onClick: () => handleDelete(row.id),
+          },
+          {
+            default: () => '删除',
+            icon: () => h('i', { class: 'i-material-symbols:delete-outline text-14' }),
+          }
+        ),
+      ]
+    },
+  },
+]
+
+async function handleEnable(row) {
+  row.enableLoading = true
+  try {
+    await api.update({ id: row.id, enable: !row.enable })
+    row.enableLoading = false
+    $message.success('操作成功')
+    $table.value?.handleSearch()
+  } catch (error) {
+    row.enableLoading = false
+  }
+}
+
+const {
+  modalRef,
+  modalFormRef,
+  modalAction,
+  modalForm,
+  okLoading,
+  handleAdd,
+  handleDelete,
+  handleOpen,
+} = useCrud({
+  name: '角色',
+  doCreate: api.create,
+  doDelete: api.delete,
+  doUpdate: api.update,
+  initForm: { enable: true },
+  refresh: () => $table.value?.handleSearch(),
+})
+
+function handleEdit(row) {
+  handleOpen({ action: 'edit', title: '修改角色', row, onSave })
+}
+
+async function onSave() {
+  await modalFormRef.value?.validate()
+  okLoading.value = true
+  try {
+    await api.update(modalForm.value)
+    okLoading.value = false
+    $message.success('保存成功')
+    $table.value?.handleSearch()
+  } catch (error) {
+    okLoading.value = false
+    return false
+  }
+}
+
+const permissionTree = ref([])
+api.getAllPermissionTree().then(({ data = [] }) => (permissionTree.value = data))
+</script>