基础设置

2024-05-20 15:36:39 +08:00
parent 0dcc807b34
commit 28c328d191
237 changed files with 1013 additions and 29597 deletions
--- a/src/views/Basic/Role/index.vue
+++ b/src/views/Basic/Role/index.vue
@@ -0,0 +1,124 @@
+<template>
+  <div class="flex">
+    <el-card shadow="always" :body-style="{ padding: '10px' }">
+      <div class="flex justify-between items-center" style="width: 300px">
+        <div class="text-16px font-bold">角色列表</div>
+        <el-button type="primary" style="padding: 0px" text @click="openForm('create')">
+          新增
+        </el-button>
+      </div>
+      <div class="border-top-1px mt-10px pt-10px">
+        <div
+          class="flex justify-between items-center pl-10px pr-10px cursor-pointer pt-5px pb-5px"
+          v-for="(item, index) in list"
+          :key="index"
+          :class="{ actived: libraryIndex == index }"
+          @click="libraryIndex = index"
+        >
+          <div class="flex-1 text-14px">{{ item.name }}</div>
+          <div class="ml-10px">
+            <el-button
+              type="primary"
+              style="padding: 0px"
+              text
+              @click="openForm('update', item.id)"
+            >
+              修改
+            </el-button>
+            <el-button
+              type="primary"
+              class="ml-10px"
+              style="padding: 0px"
+              text
+              @click="handleDelete(index)"
+            >
+              删除
+            </el-button>
+          </div>
+        </div>
+        <Pagination
+          v-model:limit="queryParams.pageSize"
+          v-model:page="queryParams.pageNo"
+          :total="total"
+          @pagination="getList"
+        />
+      </div>
+    </el-card>
+    <el-card class="ml-20px" style="flex: 1" shadow="always" :body-style="{ padding: '10px' }">
+      <el-tabs v-model="roleOperateIndex" type="card">
+        <el-tab-pane label="角色用户" :name="1">
+          <RoleEmployee />
+        </el-tab-pane>
+        <el-tab-pane label="菜单权限" :name="2">
+          <RoleAssignMenuForm ref="assignMenuFormRef" @success="getList" />
+        </el-tab-pane>
+        <el-tab-pane label="数据权限" :name="3">
+          <RoleDataPermissionForm ref="dataPermissionFormRef" @success="getList" />
+        </el-tab-pane>
+      </el-tabs>
+    </el-card>
+    <!-- 表单弹窗：添加/修改 -->
+    <RoleForm ref="formRef" @success="getList" />
+  </div>
+</template>
+<script lang="ts" name="SystemRole" setup>
+import RoleForm from './RoleForm.vue'
+import RoleEmployee from './Comp/RoleEmployee.vue'
+import RoleAssignMenuForm from './RoleAssignMenuForm.vue'
+import RoleDataPermissionForm from './RoleDataPermissionForm.vue'
+
+const message = useMessage() // 消息弹窗
+const { t } = useI18n() // 国际化
+
+const total = ref(0) // 列表的总页数
+const list = ref([]) // 列表的数据
+
+const libraryIndex = ref(0)
+const queryParams = reactive({
+  pageNo: 1,
+  pageSize: 10
+})
+
+/** 查询角色列表 */
+const getList = async () => {
+  // const data = await RoleApi.getRolePage(queryParams)
+  list.value = [{ id: 1, name: '管理员' }]
+  total.value = 0
+}
+
+/** 添加/修改操作 */
+const formRef = ref()
+const openForm = (type: string, id?: number) => {
+  formRef.value.open(type, id)
+}
+
+/** 数据权限操作 */
+const dataPermissionFormRef = ref()
+
+/** 菜单权限操作 */
+const assignMenuFormRef = ref()
+
+/** 删除按钮操作 */
+const handleDelete = async (id: number) => {
+  try {
+    console.log(id)
+
+    // 删除的二次确认
+    await message.delConfirm()
+    // 发起删除
+    // await RoleApi.deleteRole(id)
+    message.success(t('common.delSuccess'))
+    // 刷新列表
+    await getList()
+  } catch {}
+}
+
+const roleOperateIndex = ref(1)
+
+/** 初始化 **/
+onMounted(() => {
+  getList()
+})
+</script>
+
+<style lang="scss" scoped></style>