Compare commits
2
Commits
| Author | SHA1 | Date | |
|---|---|---|---|
|
|
2908a10ee5 | ||
|
|
4433cf521b |
@@ -7,18 +7,13 @@ export function roleListApi() {
|
|||||||
return request({ url: '/api/role' });
|
return request({ url: '/api/role' });
|
||||||
}
|
}
|
||||||
/**
|
/**
|
||||||
* 登录
|
* 编辑角色
|
||||||
*
|
*
|
||||||
* @param username User name
|
|
||||||
* @param password Password
|
|
||||||
*/
|
*/
|
||||||
export function fetchLogin(username: string, password: string) {
|
export function editRoleApi(params: { id: number, intro: string, name: string, perms: string[] }) {
|
||||||
return request({
|
return request({
|
||||||
url: '/api/auth/login',
|
url: '/api/role',
|
||||||
method: 'post',
|
method: 'post',
|
||||||
data: {
|
data: params
|
||||||
username,
|
|
||||||
password
|
|
||||||
}
|
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -0,0 +1,19 @@
|
|||||||
|
<script setup lang="ts">
|
||||||
|
const props = defineProps<{ status: any }>();
|
||||||
|
const BIG_STAGES = ["申请审批", "实施与关闭", "变更关闭"];
|
||||||
|
const bigStageOf = (s: any) => (s === "审批中" ? 0 : s === "已关闭" ? 2 : 1);
|
||||||
|
const cur = bigStageOf(props.status);
|
||||||
|
const pct = ((cur + 1) / BIG_STAGES.length) * 100;
|
||||||
|
const size = 34, stroke = 4, r = (size - stroke) / 2, c = 2 * Math.PI * r;
|
||||||
|
const title = `阶段进度 ${cur + 1}/${BIG_STAGES.length}:${BIG_STAGES.slice(0, cur + 1).join(" → ")}${cur < BIG_STAGES.length - 1 ? " → …" : ""}`;
|
||||||
|
</script>
|
||||||
|
<template>
|
||||||
|
<span class="relative inline-flex shrink-0 items-center justify-center" :style="{ width: size + 'px', height: size + 'px' }" :title="title">
|
||||||
|
<svg :width="size" :height="size" class="-rotate-90">
|
||||||
|
<circle :cx="size / 2" :cy="size / 2" :r="r" stroke="#E2E8F0" :stroke-width="stroke" fill="none" />
|
||||||
|
<circle :cx="size / 2" :cy="size / 2" :r="r" stroke="#2080f0" :stroke-width="stroke" fill="none"
|
||||||
|
:stroke-dasharray="c" :stroke-dashoffset="c * (1 - pct / 100)" stroke-linecap="round" />
|
||||||
|
</svg>
|
||||||
|
<span class="absolute inset-0 flex items-center justify-center text-[9px] font-bold text-[#2080f0] dark:text-white">{{ cur + 1 }}/3</span>
|
||||||
|
</span>
|
||||||
|
</template>
|
||||||
@@ -7,8 +7,8 @@ import {
|
|||||||
countOpenStatus, type ChangeLevel, type ChangeOrder, type ChangeStatus, type ChangeType,
|
countOpenStatus, type ChangeLevel, type ChangeOrder, type ChangeStatus, type ChangeType,
|
||||||
} from "@/typings/model";
|
} from "@/typings/model";
|
||||||
import { getColorWithOpacity } from "@/utils/common";
|
import { getColorWithOpacity } from "@/utils/common";
|
||||||
import HighlightText from "@/views/home/modules/HighlightText.vue";
|
import HighlightText from "@/views/my/modules/HighlightText.vue";
|
||||||
import Ed from "@/views/home/modules/Ed.vue";
|
import Ed from "@/views/my/modules/Ed.vue";
|
||||||
|
|
||||||
|
|
||||||
const themeStore = useThemeStore();
|
const themeStore = useThemeStore();
|
||||||
|
|||||||
@@ -4,8 +4,8 @@ import { useAppStore } from '@/store/modules/app';
|
|||||||
import { Icon } from '@iconify/vue'
|
import { Icon } from '@iconify/vue'
|
||||||
import { useThemeStore } from '@/store/modules/theme';
|
import { useThemeStore } from '@/store/modules/theme';
|
||||||
import { useRouter } from 'vue-router';
|
import { useRouter } from 'vue-router';
|
||||||
import { NButton, NPopconfirm } from 'naive-ui';
|
import { NButton } from 'naive-ui';
|
||||||
import { roleListApi } from '@/service/api/role';
|
import { roleListApi, editRoleApi } from '@/service/api/role';
|
||||||
|
|
||||||
const router = useRouter();
|
const router = useRouter();
|
||||||
const appStore = useAppStore();
|
const appStore = useAppStore();
|
||||||
@@ -14,11 +14,12 @@ const gap = computed(() => (appStore.isMobile ? 0 : 16));
|
|||||||
|
|
||||||
const loading = ref<boolean>(false);
|
const loading = ref<boolean>(false);
|
||||||
const btnLoading = ref<boolean>(false);
|
const btnLoading = ref<boolean>(false);
|
||||||
const currentType = ref<string>('add');
|
|
||||||
const formRef = ref<any>(null);
|
const formRef = ref<any>(null);
|
||||||
const currentRole = ref<{ id: number, name: string }>({
|
const currentRole = ref<{ id: number, intro: string, name: string, perms: string[] }>({
|
||||||
id: 0,
|
id: 0,
|
||||||
|
intro: '',
|
||||||
name: '',
|
name: '',
|
||||||
|
perms: [],
|
||||||
});
|
});
|
||||||
const rules = ref({
|
const rules = ref({
|
||||||
name: { required: true, message: '角色名称不能为空', trigger: ['blur'] }
|
name: { required: true, message: '角色名称不能为空', trigger: ['blur'] }
|
||||||
@@ -72,30 +73,6 @@ const columns = ref([
|
|||||||
// 渲染按钮文本
|
// 渲染按钮文本
|
||||||
default: () => '编辑'
|
default: () => '编辑'
|
||||||
}),
|
}),
|
||||||
h(NPopconfirm, {
|
|
||||||
// 组件 Props
|
|
||||||
positiveText: '确定',
|
|
||||||
negativeText: '取消',
|
|
||||||
onPositiveClick: () => {
|
|
||||||
handleDelete(row)
|
|
||||||
},
|
|
||||||
// 可选:自定义确认/取消按钮的样式
|
|
||||||
positiveButtonProps: { size: 'tiny', type: 'primary' },
|
|
||||||
negativeButtonProps: { size: 'tiny' }
|
|
||||||
}, {
|
|
||||||
// 插槽 (Slots)
|
|
||||||
trigger: () => h(NButton,
|
|
||||||
{
|
|
||||||
text: true,
|
|
||||||
size: 'tiny',
|
|
||||||
type: 'error',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
default: () => '删除' // 按钮文字
|
|
||||||
}
|
|
||||||
),
|
|
||||||
default: () => '确定要删除吗?' // 弹出框的提示内容
|
|
||||||
}),
|
|
||||||
]
|
]
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
@@ -114,66 +91,46 @@ const getList = async () => {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// 打开添加角色弹框
|
|
||||||
const addRole = () => {
|
|
||||||
currentType.value = 'add';
|
|
||||||
currentRole.value = {
|
|
||||||
id: 0,
|
|
||||||
name: '',
|
|
||||||
};
|
|
||||||
roleModal.value = true;
|
|
||||||
}
|
|
||||||
// 设置权限
|
// 设置权限
|
||||||
const handleSetPermission = (row: any) => {
|
const handleSetPermission = (row: any) => {
|
||||||
currentRole.value = {
|
currentRole.value = JSON.parse(JSON.stringify(row));
|
||||||
id: row.id,
|
|
||||||
name: row.name,
|
|
||||||
};
|
|
||||||
permissionModal.value = true;
|
permissionModal.value = true;
|
||||||
}
|
}
|
||||||
// 编辑角色
|
// 编辑角色
|
||||||
const handleEdit = (row: any) => {
|
const handleEdit = (row: any) => {
|
||||||
currentType.value = 'edit';
|
currentRole.value = JSON.parse(JSON.stringify(row));
|
||||||
currentRole.value = {
|
|
||||||
id: row.id,
|
|
||||||
name: row.name,
|
|
||||||
};
|
|
||||||
roleModal.value = true;
|
roleModal.value = true;
|
||||||
}
|
}
|
||||||
// 删除角色
|
|
||||||
const handleDelete = (row: any) => {
|
|
||||||
loading.value = true;
|
|
||||||
setTimeout(() => {
|
|
||||||
loading.value = false;
|
|
||||||
list.value = list.value.filter((item: any) => item.id !== row.id);
|
|
||||||
window.$message?.success('删除成功')
|
|
||||||
}, 1000)
|
|
||||||
}
|
|
||||||
// 保存角色
|
// 保存角色
|
||||||
const saveRole = async (e: MouseEvent) => {
|
const saveRole = (e: MouseEvent) => {
|
||||||
e.preventDefault()
|
e.preventDefault()
|
||||||
formRef.value?.validate((errors: any) => {
|
formRef.value?.validate(async (errors: any) => {
|
||||||
if (!errors) {
|
if (!errors) {
|
||||||
btnLoading.value = true;
|
btnLoading.value = true;
|
||||||
setTimeout(() => {
|
try {
|
||||||
// 新增
|
await editRoleApi(currentRole.value);
|
||||||
if(currentType.value === 'add'){
|
const target = list.value.find((item:any) => item.id === currentRole.value.id);
|
||||||
list.value.push({id:list.value.length+1,name:currentRole.value?.name})
|
if (target) {
|
||||||
}
|
target.name = currentRole.value.name;
|
||||||
// 编辑
|
|
||||||
if(currentType.value === 'edit'){
|
|
||||||
const target = list.value.find((item:any) => item.id === currentRole.value.id);
|
|
||||||
if (target) {
|
|
||||||
target.name = currentRole.value?.name;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
window.$message?.success('操作成功')
|
window.$message?.success('操作成功')
|
||||||
btnLoading.value = false;
|
btnLoading.value = false;
|
||||||
roleModal.value = false;
|
roleModal.value = false;
|
||||||
}, 1000)
|
} finally {
|
||||||
|
btnLoading.value = false;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
// 保存权限
|
||||||
|
const savePermission = async () => {
|
||||||
|
btnLoading.value = true;
|
||||||
|
setTimeout(() => {
|
||||||
|
window.$message?.success('操作成功')
|
||||||
|
btnLoading.value = false;
|
||||||
|
permissionModal.value = false;
|
||||||
|
}, 1000)
|
||||||
|
}
|
||||||
|
|
||||||
onMounted(() => {
|
onMounted(() => {
|
||||||
const allRoutes = router.getRoutes();
|
const allRoutes = router.getRoutes();
|
||||||
@@ -186,20 +143,14 @@ onMounted(() => {
|
|||||||
<!-- 角色管理 -->
|
<!-- 角色管理 -->
|
||||||
<NCard :bordered="false" size="small" :style="{ borderRadius: themeStore.themeRadius + 'px' }">
|
<NCard :bordered="false" size="small" :style="{ borderRadius: themeStore.themeRadius + 'px' }">
|
||||||
<div class="border mb-3 py-2 px-3" :style="{ borderRadius: themeStore.themeRadius + 'px' }">
|
<div class="border mb-3 py-2 px-3" :style="{ borderRadius: themeStore.themeRadius + 'px' }">
|
||||||
<NGrid :x-gap="gap" :y-gap="16" responsive="screen" item-responsive>
|
<NGrid :x-gap="gap" :y-gap="16" responsive="screen" item-responsive>
|
||||||
<NGi span="24 s:12 m:12">
|
<NGi span="24 s:24 m:24">
|
||||||
<div class="h-100% flex items-center gap-2">
|
<div class="h-100% flex items-center gap-2">
|
||||||
<Icon icon="lucide:user" class="size-16px" :style="{ color: themeStore.themeColor }" />
|
<Icon icon="lucide:user" class="size-16px" :style="{ color: themeStore.themeColor }" />
|
||||||
<p class="text-[16px] font-600">角色管理</p>
|
<p class="text-[16px] font-600">角色管理</p>
|
||||||
</div>
|
</div>
|
||||||
</NGi>
|
</NGi>
|
||||||
<NGi span="24 s:12 m:12" class="flex items-center justify-end gap-12px">
|
</NGrid>
|
||||||
<NButton type="primary" size="small" @click="addRole">
|
|
||||||
<Icon icon="ic:round-plus" class="size-16px" />
|
|
||||||
添加角色
|
|
||||||
</NButton>
|
|
||||||
</NGi>
|
|
||||||
</NGrid>
|
|
||||||
</div>
|
</div>
|
||||||
<div class="scroll">
|
<div class="scroll">
|
||||||
<NDataTable
|
<NDataTable
|
||||||
@@ -216,7 +167,7 @@ onMounted(() => {
|
|||||||
<NModal
|
<NModal
|
||||||
v-model:show="roleModal"
|
v-model:show="roleModal"
|
||||||
preset="card"
|
preset="card"
|
||||||
:title="currentType === 'add' ? '新增角色' : '编辑角色'"
|
title="编辑角色"
|
||||||
:auto-focus="false"
|
:auto-focus="false"
|
||||||
:style="{ width: '450px', height: 'auto' }"
|
:style="{ width: '450px', height: 'auto' }"
|
||||||
:segmented="{ content: true, footer: true }"
|
:segmented="{ content: true, footer: true }"
|
||||||
@@ -241,7 +192,12 @@ onMounted(() => {
|
|||||||
<!-- 设置权限抽屉 -->
|
<!-- 设置权限抽屉 -->
|
||||||
<NDrawer v-model:show="permissionModal" :width="502" placement="right">
|
<NDrawer v-model:show="permissionModal" :width="502" placement="right">
|
||||||
<NDrawerContent :title="`设置权限-${currentRole.name}`" closable>
|
<NDrawerContent :title="`设置权限-${currentRole.name}`" closable>
|
||||||
|
<template #footer>
|
||||||
|
<div class="flex justify-end gap-[10px]">
|
||||||
|
<NButton @click="permissionModal = false">取消</NButton>
|
||||||
|
<NButton type="primary" :loading="btnLoading" @click="savePermission">保存</NButton>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
</NDrawerContent>
|
</NDrawerContent>
|
||||||
</NDrawer>
|
</NDrawer>
|
||||||
</NCard>
|
</NCard>
|
||||||
|
|||||||
@@ -546,7 +546,7 @@ onMounted(() => {
|
|||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
<p class="mt-2 border-t pt-2 text-[11px] leading-4 text-slate-400">
|
<p class="mt-2 border-t pt-2 text-[11px] leading-4 text-slate-400">
|
||||||
点击层级查看该层级全员名录;右键(或悬停点 ···)可编辑、添加子级、删除。
|
点击层级查看该层级全员名录;右键(或点击 ···)可编辑、添加子级、删除。
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
<div class="flex-1">
|
<div class="flex-1">
|
||||||
|
|||||||
Reference in New Issue
Block a user