wzp/Commerce-System-Frontend
1
0
Fork 0
generated from wzp/v3-admin-vite
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix: fix build error bug

Browse Source
This commit is contained in:
wzp 2023-05-14 22:27:15 +08:00
parent 2d3a247988
commit 65c3ecb1c1
21 changed files with 886 additions and 78 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
src/api/permission/type/permission.ts
View File

@ -8,7 +8,10 @@ export interface AuthPermissions {
updateTime?: string
status?: boolean
}
export interface PermissionsIdName {
id: number
permissionName: string
}
export type AddAuthPermissionResponseData = boolean
export type ChangeAuthPermissionsResponseData = boolean
export type DeleteAuthPermissionsResponseData = boolean

36
src/api/register/index.ts
View File

@ -3,24 +3,40 @@ import { Md5 } from "ts-md5"
import { request } from "@/utils/service"
import * as AxiosType from "axios/index"
import * as Requests from "@/api/types/requests"
import { getAuthByRoleId } from "@/api/register/types/register"
import { useUserStore } from "@/store/modules/user"
const user = useUserStore()
export function registerApi(data: Register.IRegisterRequestData) {
const md5er = new Md5()
md5er.appendStr(data.password)
data.password = md5er.end(false) as string
const requestData = new URLSearchParams()
requestData.append("username", data.username)
requestData.append("password", data.password)
requestData.append("relName", data.relName)
requestData.append("email", data.email)
requestData.append("roleId", data.roleId.toString())
if (data.roleId != 5) {
const requestData = new URLSearchParams()
requestData.append("username", data.username)
requestData.append("password", data.password)
requestData.append("relName", data.relName)
requestData.append("email", data.email)
requestData.append("roleId", data.roleId.toString())
requestData.append("auth", getAuthByRoleId(data.roleId))
return request<AxiosType.AxiosResponse<Requests.IResponseData<Register.IRegisterResponseData>>>({
url: "/api/auth/register",
method: "post",
headers: {
"Content-Type": "application/x-www-form-urlencoded"
},
data: requestData,
withCredentials: true
})
}
data.auth = getAuthByRoleId(data.roleId)
data.createId = Number.parseInt(user.token)
return request<AxiosType.AxiosResponse<Requests.IResponseData<Register.IRegisterResponseData>>>({
url: "/api/auth/register",
url: "/account/addStoreAdmin",
method: "post",
headers: {
"Content-Type": "application/x-www-form-urlencoded"
"Content-Type": "application/json"
},
data: requestData,
data: data,
withCredentials: true
})
}

16
src/api/register/types/register.ts
View File

@ -4,6 +4,20 @@ export interface IRegisterRequestData {
relName: string
password: string
roleId: number
auth?: "系统管理员" | "租户管理员" | "商户管理员" | "商户"
countdown?: number
createId?: number
}
export const getAuthByRoleId = (roleId: number): "系统管理员" | "租户管理员" | "商户管理员" | "商户" => {
switch (roleId) {
case 1:
return "系统管理员"
case 3:
return "租户管理员"
case 4:
return "商户管理员"
default:
return "商户"
}
}
export type IRegisterResponseData = string

55
src/api/rolePermissions/index.ts Normal file
View File

@ -0,0 +1,55 @@
import { AxiosResponseData, IPageResponseData, pageSize } from "@/api/types/requests"
import { request } from "@/utils/service"
import { AuthRolesPermissions } from "@/api/rolePermissions/types/RolePermissions"
type ApiType = AuthRolesPermissions
const apiName = "authRolesPermission"
const upperName = "AuthRolesPermissions"
export function addRolePermissions(data: ApiType) {
return request<AxiosResponseData<boolean>>({
url: "/" + apiName + "/add" + upperName,
method: "POST",
data: data,
withCredentials: true
})
}
export function changePermissions(newData: ApiType) {
return request<AxiosResponseData<string>>({
url: "/" + apiName + "/change" + upperName,
method: "POST",
data: newData,
withCredentials: true
})
}
export function deletePermissions(roleId: number, permissionId: number) {
return request<AxiosResponseData<boolean>>({
url: "/" + apiName + "/del" + upperName,
method: "GET",
params: {
roleId: roleId,
permissionId: permissionId
},
withCredentials: true
})
}
export function get(page: number) {
return request<AxiosResponseData<IPageResponseData<ApiType>>>({
url: "/" + apiName + "/get" + upperName,
method: "GET",
params: {
page: page,
num: pageSize
},
withCredentials: true
})
}
export function status(id: number, status: boolean) {
return request<AxiosResponseData<string>>({
url: "/" + apiName + "/change" + upperName + "Stats",
method: "GET",
params: {
authPermissionId: id,
status: status
},
withCredentials: true
})
}

7
src/api/rolePermissions/types/RolePermissions.ts Normal file
View File

@ -0,0 +1,7 @@
export interface AuthRolesPermissions {
roleId: number
permissionId: number
createId?: number
createTime?: string
updateTime?: string
}

72
src/api/roles/index.ts Normal file
View File

@ -0,0 +1,72 @@
import { AxiosResponseData, IPageResponseData, pageSize } from "@/api/types/requests"
import { request } from "@/utils/service"
import { AuthRoles, RolePermission } from "@/api/roles/types/Roles"
import { PermissionsIdName } from "@/api/permission/type/permission"
type ApiType = AuthRoles
const apiName = "authRoles"
const upperName = "AuthRoles"
export function add(data: ApiType) {
return request<AxiosResponseData<boolean>>({
url: "/" + apiName + "/add" + upperName,
method: "POST",
data: data,
withCredentials: true
})
}
export function change(newData: ApiType) {
return request<AxiosResponseData<string>>({
url: "/" + apiName + "/change" + upperName,
method: "POST",
data: newData,
withCredentials: true
})
}
export function delete_(id: number) {
return request<AxiosResponseData<boolean>>({
url: "/" + apiName + "/del" + upperName,
method: "GET",
params: {
id: id
},
withCredentials: true
})
}
export function get(page: number) {
return request<AxiosResponseData<IPageResponseData<ApiType>>>({
url: "/" + apiName + "/get" + upperName,
method: "GET",
params: {
page: page,
num: pageSize
},
withCredentials: true
})
}
export function status(id: number, status: boolean) {
return request<AxiosResponseData<string>>({
url: "/" + apiName + "/change" + upperName + "Stats",
method: "GET",
params: {
authPermissionId: id,
status: status
},
withCredentials: true
})
}
export function getAuthPermissionId(roleId: number) {
return request<AxiosResponseData<RolePermission[]>>({
url: "/" + apiName + "/getAuthPermissionId",
method: "GET",
params: {
roleId: roleId
},
withCredentials: true
})
}
export function getAllPermissions() {
return request<AxiosResponseData<PermissionsIdName[]>>({
url: "/authPermissions/getAuthPermissionsId",
method: "GET",
withCredentials: true
})
}

17
src/api/roles/types/Roles.ts Normal file
View File

@ -0,0 +1,17 @@
export interface AuthRoles {
id?: number
roleName: string
description: string
createId?: number
createTime?: string
updateTime?: string
permissions?: RolePermission[]
status: boolean
}
export interface RolePermission {
name: string
id: number
description?: string
status?: boolean
code?: string
}

46
src/api/users/index.ts
View File

@ -10,6 +10,7 @@ import {
IGetAllUserResponseData
} from "@/api/users/types/users"
import { AxiosResponseData } from "@/api/types/requests"
import { getAuthByRoleId } from "@/api/register/types/register"
export function getAllUsersApi(page: number) {
return request<AxiosType.AxiosResponse<Requests.IResponseData<IGetAllUserResponseData>>>({
@ -33,6 +34,7 @@ export function delUserApi(userId: number) {
})
}
export function exChangeUserDataApi(newUser: IExChangeAccountRequestsData) {
newUser.auth = getAuthByRoleId(newUser.roleId)
return request<AxiosType.AxiosResponse<Requests.IResponseData<IExChangeUserResponseData>>>({
url: "/account/changeAccount",
method: "post",
@ -58,3 +60,47 @@ export function getUserInfoApi() {
withCredentials: true
})
}
export function getRemainderTime(userId: number) {
return request<AxiosResponseData<{ remainderTime: number }>>({
url: "/verify/getRemainderTime",
method: "get",
params: {
id: userId
},
withCredentials: true
})
}
export function verify(userId: number, name: string, phone: string) {
return request<AxiosResponseData<{ remainderTime: number }>>({
url: "/verify/verify",
method: "get",
params: {
id: userId,
name: name,
phone: phone
},
withCredentials: true
})
}
export function getVerifyMessage(userId: number) {
return request<AxiosResponseData<{ phone: string; name: string; storeId: number }[]>>({
url: "/verify/getVerifyMessage",
method: "get",
params: {
createId: userId
},
withCredentials: true
})
}
export function confirmVerify(createdId: number, storeId: number, status: boolean) {
return request<AxiosResponseData<string>>({
url: "/verify/confirmVerify",
method: "get",
params: {
createId: createdId,
storeId: storeId,
status: status
},
withCredentials: true
})
}

2
src/api/users/types/users.ts
View File

@ -6,6 +6,7 @@ export interface IExChangeAccountRequestsData {
email: string
relName: string
roleId: number
auth?: string
}
export type IDelUserResponseData = string
@ -21,5 +22,6 @@ export interface IPermission {
export interface IAccountInfo {
id: string
info: IPermission[]
roleId: string
roleName: string
}

61
src/layout/components/AppMain.vue
View File

@ -1,19 +1,74 @@
<script lang="ts" setup>
import { computed } from "vue"
import { useRoute } from "vue-router"
import { computed, onMounted, ref } from "vue"
import { useRoute, useRouter } from "vue-router"
import { useTagsViewStore } from "@/store/modules/tags-view"
import { ElCountdown, ElMessage, FormInstance, FormRules } from "element-plus"
import { useUserStore } from "@/store/modules/user"
import { verify } from "@/api/users"
const route = useRoute()
const tagsViewStore = useTagsViewStore()
const router = useRouter()
const user = useUserStore()
const valueTime = ref<number>(new Date().getTime() + 1000000000)
const storeInformation = ref<{ name: string; phone: string }>({ name: "", phone: "00000000000" })
const storeInformationForm = ref<FormInstance>()
const key = computed(() => {
return route.path
})
const valueRules: FormRules = {
name: [
{ required: true, message: "请输入店铺名", trigger: "blur" },
{ min: 3, max: 25, message: "长度在 3 到 25 个字符", trigger: "blur" },
{ pattern: "[A-Za-z0-9_-一-龥]+", message: "店铺名不符合要求" }
],
phone: [
{ required: true, message: "请输入手机号", trigger: "blur" },
{ len: 11, message: "手机号长度为11", trigger: "blur" }
]
}
const finished = () => {
ElMessage.error("超时未添加店铺信息！")
user.logout()
router.push("/login")
}
const upload = () => {
if (!storeInformationForm.value?.validate()) {
ElMessage.error("数据存在错误！")
return
}
verify(Number.parseInt(user.token), storeInformation.value.name, storeInformation.value.phone)
.then(() => {
ElMessage.success("上传成功，等待管理员审核！")
})
.catch((err) => {
ElMessage.error("上传失败，请重试！")
console.log(err)
})
}
onMounted(() => {
valueTime.value = new Date().getTime() + (user.countdown as number) * 1000
})
</script>
<template>
<section class="app-main">
<router-view v-slot="{ Component }">
<div v-if="user.countdown >= 0" style="margin: 10px 10px 10px 10px">
<el-countdown title="你需要在时间范围内添加店铺信息" :value="valueTime" :rules="valueRules" @finish="finished" />
<div style="width: 30%; margin-top: 10px">
<el-form :model="storeInformation" :rules="valueRules" title="店铺信息" ref="storeInformationForm">
<el-form-item prop="name" label="店铺名称">
<el-input v-model="storeInformation.name" />
</el-form-item>
<el-form-item prop="phone" label="手机号">
<el-input v-model="storeInformation.phone" />
</el-form-item>
</el-form>
</div>
<el-button type="success" @click="upload">提交</el-button>
</div>
<router-view v-slot="{ Component }" v-else>
<transition name="fade-transform" mode="out-in">
<keep-alive :include="tagsViewStore.cachedViews">
<component :is="Component" :key="key" />

32
src/router/index.ts
View File

@ -69,7 +69,7 @@ export const asyncRoutes: RouteRecordRaw[] = [
component: Layout,
redirect: "/user",
meta: {
roles: ["admin"]
roles: ["change:user"]
},
children: [
{
@ -79,7 +79,27 @@ export const asyncRoutes: RouteRecordRaw[] = [
meta: {
title: "用户管理",
elIcon: "User",
roles: ["admin"]
roles: ["change:user"]
}
}
]
},
{
path: "/roles",
component: Layout,
redirect: "/roles",
meta: {
roles: ["change:roles", "show:roles"]
},
children: [
{
path: "roles",
component: () => import("@/views/roles/index.vue"),
name: "Roles",
meta: {
title: "权限组管理",
elIcon: "Lock",
roles: ["change:roles", "show:roles"]
}
}
]
@ -106,7 +126,7 @@ export const asyncRoutes: RouteRecordRaw[] = [
component: Layout,
redirect: "/commission",
meta: {
roles: ["admin"]
roles: ["show:commission", "change:commission"]
},
children: [
{
@ -116,7 +136,7 @@ export const asyncRoutes: RouteRecordRaw[] = [
meta: {
title: "佣金管理",
elIcon: "Money",
roles: ["admin"]
roles: ["show:commission", "change:commission"]
}
}
]
@ -160,7 +180,7 @@ export const asyncRoutes: RouteRecordRaw[] = [
component: Layout,
redirect: "/permission",
meta: {
roles: ["show:order"] // 可以在根路由中设置角色
roles: ["change:root_perm"] // 可以在根路由中设置角色
},
children: [
{
@ -170,7 +190,7 @@ export const asyncRoutes: RouteRecordRaw[] = [
meta: {
title: "权限管理",
svgIcon: "lock",
roles: ["show:order"]
roles: ["change:root_perm"]
}
}
]

25
src/store/modules/user.ts
View File

@ -9,13 +9,15 @@ import { loginApi } from "@/api/login"
import { type ILoginRequestData } from "@/api/login/types/login"
import { type RouteRecordRaw } from "vue-router"
import asyncRouteSettings from "@/config/async-route"
import { getUserInfoApi } from "@/api/users"
import { getUserInfoApi, getRemainderTime } from "@/api/users"
export const useUserStore = defineStore("user", () => {
/** Token即用户id */
const token = ref<string>(getToken() || "null")
const roles = ref<string[]>([])
const username = ref<string>("")
const roleId = ref<number>(-1)
const countdown = ref<number>()
const permissionStore = usePermissionStore()
const tagsViewStore = useTagsViewStore()
@ -48,6 +50,7 @@ export const useUserStore = defineStore("user", () => {
.then((res) => {
const data = res.data
setToken(data.data.id)
roleId.value = Number.parseInt(data.data.roleId)
username.value = data.data.roleName
// 验证返回的 roles 是否是一个非空数组
if (data.data.info && data.data.info.length > 0) {
@ -58,6 +61,11 @@ export const useUserStore = defineStore("user", () => {
// 塞入一个没有任何作用的默认角色，不然路由守卫逻辑会无限循环
roles.value = asyncRouteSettings.defaultRoles
}
if (roleId.value == 5) {
getRemainderTime(Number.parseInt(res.data.data.id)).then((response) => {
countdown.value = response.data.data.remainderTime
})
}
resolve(res)
})
.catch((error) => {
@ -99,7 +107,20 @@ export const useUserStore = defineStore("user", () => {
return roles.value.some((e) => e === role)
}
return { token, roles, username, setRoles, login, getInfo, changeRoles, logout, resetToken, hasRole }
return {
token,
roles,
username,
setRoles,
login,
getInfo,
changeRoles,
logout,
resetToken,
hasRole,
roleId,
countdown
}
})
/** 在 setup 外使用 */

2
src/utils/service.ts
View File

@ -28,7 +28,7 @@ function createService() {
userStore.logout()
router.push("/login").then((_) => ElMessage.warning("登录过期，请重新登录！"))
}
return error
return Promise.reject(error)
}
)
return service

14
src/views/dashboard/admin/index.vue
View File

@ -1,14 +0,0 @@
<template>
<div class="app-container center">
<el-empty description="Admin 权限可见" />
</div>
</template>
<style lang="scss" scoped>
.center {
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
</style>

14
src/views/dashboard/editor/index.vue
View File

@ -1,14 +0,0 @@
<template>
<div class="app-container center">
<el-empty description="Editor 权限可见" />
</div>
</template>
<style lang="scss" scoped>
.center {
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
</style>

17
src/views/dashboard/index.vue
View File

@ -1,18 +1,5 @@
<script lang="ts" setup>
import { ref } from "vue"
import { useUserStore } from "@/store/modules/user"
import AdminDashboard from "./admin/index.vue"
import EditorDashboard from "./editor/index.vue"
type CurrentRoleType = "admin" | "editor"
const userStore = useUserStore()
const currentRole = ref<CurrentRoleType>("admin")
if (!userStore.roles.includes("admin")) {
currentRole.value = "editor"
}
</script>
<script lang="ts" setup></script>
<template>
<component :is="currentRole === 'admin' ? AdminDashboard : EditorDashboard" />
<h1 style="margin-left: 50%">管理系统后台</h1>
</template>

8
src/views/permission/index.vue
View File

@ -17,7 +17,7 @@ const tableShowData = ref<pageDataType[]>([])
// 总数据数（应在handleChangePage时写入）
const totalDataCount = ref<number>(0)
// 当前展示页面（应在handleChangePage中读取）
const nowPage = ref<number>(0)
const nowPage = ref<number>(1)
// 待修改数据（应在beforeClose中置空）
const exchangeData = ref<pageDataType>()
// 待添加数据（应在beforeClose中置空）
@ -138,14 +138,14 @@ onMounted(() => {
<el-table-column prop="permissionCode" label="权限ID" width="200px" />
<el-table-column prop="description" label="注释" width="200px" />
<el-table-column prop="createId" label="创建者ID" width="100px" />
<el-table-column prop="createTime" label="创建时间" width="400px" />
<el-table-column prop="updateTime" label="更新时间" width="400px" />
<el-table-column prop="createTime" label="创建时间" width="200px" />
<el-table-column prop="updateTime" label="更新时间" width="200px" />
<el-table-column prop="status" label="状态" width="100px">
<template #default="scope">
<el-switch :model-value="scope.row.status" @click="handleChangeStatus(scope.$index)" />
</template>
</el-table-column>
<el-table-column fixed="right" label="操作" width="210px">
<el-table-column fixed="right" label="操作">
<template #default="scope">
<el-button link type="primary" size="small" @click="handleExchangeButtonClick(scope.row)">修改</el-button>
<el-button link type="primary" size="small" @click="handleDeleteButtonClick(scope.row)">删除</el-button>

367
src/views/roles/index.vue Normal file
View File

@ -0,0 +1,367 @@
<script setup lang="ts">
import { pageSize } from "@/api/types/requests"
import { onMounted, ref } from "vue"
import { add, change, status, get, getAuthPermissionId, getAllPermissions } from "@/api/roles"
import { ElMessage } from "element-plus"
import { AuthRoles, RolePermission } from "@/api/roles/types/Roles"
import { addRolePermissions, deletePermissions } from "@/api/rolePermissions"
import { useUserStore } from "@/store/modules/user"
// 本页面所使用的类型
type pageDataType = AuthRoles
// 表格展示的数据
const tableShowData = ref<pageDataType[]>([])
// 总数据数（应在handleChangePage时写入）
const totalDataCount = ref<number>(0)
// 当前展示页面（应在handleChangePage中读取）
const nowPage = ref<number>(1)
// 待修改数据（应在beforeClose中置空）
const exchangeData = ref<pageDataType>()
// 待添加数据（应在beforeClose中置空）
const addData = ref<pageDataType>()
// 是否展示修改窗口
const showExchangeDialog = ref<boolean>(false)
// 是否展示添加窗口
const showAddDialog = ref<boolean>(false)
const user = useUserStore()
const showPermissionsDialog = ref<boolean>(false)
const permissionHas = ref<RolePermission[]>([])
const allPermissions = ref<RolePermission[]>([])
const nowPermissionIds = ref<number[]>([])
const isLoading = ref<boolean>(false)
const nowChanged = ref<number>()
/**
* 当添加按钮被点击（应将addData置空，且将showAddDialog置为true）
*/
const handleAddButtonClick = () => {
addData.value = {
description: "",
roleName: "",
status: true
}
showAddDialog.value = true
}
/**
* 添加方法（请求在这里发出）
*/
const handleAdd = () => {
add(addData.value as pageDataType)
.then(() => {
ElMessage.success("添加成功")
})
.catch((err) => {
ElMessage.error("添加失败！")
console.log(err)
})
showAddDialog.value = false
}
/**
* 当修改按钮被点击（应将exchangeData修改为入参data的值，且将showExchangeDialog置为true）
* @param data 待修改的数据
*/
const handleExchangeButtonClick = (data: pageDataType) => {
exchangeData.value = data
showExchangeDialog.value = true
}
/**
* 修改数据方法（请求在这里发出）
*/
const handleExchange = () => {
change(exchangeData.value as pageDataType)
.then(() => {
ElMessage.success("修改成功！")
})
.catch((err) => {
ElMessage.error("修改失败！")
console.log(err)
})
showExchangeDialog.value = false
}
/**
* 修改状态方法
* @param dataIndex 数据的index
*/
const handleChangeStatus = (dataIndex: number) => {
const nowData = tableShowData.value[dataIndex]
const newStatus = !nowData.status
status(nowData.id as number, newStatus)
.then(() => {
ElMessage.success("状态修改成功")
tableShowData.value[dataIndex].status = newStatus
})
.catch((err) => {
console.log(err)
ElMessage.error("修改状态失败")
})
}
/**
* 删除按钮点击时（可以发请求了）
* @param data 删除的项数据
*/
/*const handleDeleteButtonClick = (data: pageDataType) => {
delete_(data.id as number)
.then(() => {
ElMessage.success("删除成功！")
})
.catch((err) => {
console.log(err)
ElMessage.error("删除失败！")
})
}*/
const hasPermissionsData = ref<boolean>(false)
const hasAuthPermissionsData = ref<boolean>(false)
const handlePermissionButtonClick = (data: pageDataType) => {
permissionHas.value = []
nowPermissionIds.value = []
allPermissions.value = []
showPermissionsDialog.value = true
isLoading.value = true
hasPermissionsData.value = false
hasAuthPermissionsData.value = false
nowChanged.value = data.id as number
getAuthPermissionId(nowChanged.value).then((response) => {
permissionHas.value = response.data.data
for (const permission of permissionHas.value) {
nowPermissionIds.value.push(permission.id)
}
hasAuthPermissionsData.value = true
if (hasPermissionsData.value) {
isLoading.value = false
}
})
getAllPermissions().then((response) => {
response.data.data
for (const permission of response.data.data) {
allPermissions.value.push({ id: permission.id, name: permission.permissionName })
}
hasPermissionsData.value = true
if (hasAuthPermissionsData.value) {
isLoading.value = false
}
})
}
const handlePermissions = () => {
for (const id of nowPermissionIds.value) {
let flag = false
for (const has of permissionHas.value) {
const has_id = has.id
if (has_id == id) {
flag = true
}
}
if (!flag) {
addRolePermissions({
roleId: nowChanged.value as number,
permissionId: id
}).catch((err) => {
ElMessage.error(id + "添加失败！")
console.log(err)
})
}
}
for (const has of permissionHas.value) {
const has_id = has.id
let flag = false
for (const id of nowPermissionIds.value) {
if (id == has_id) {
flag = true
break
}
}
if (!flag) {
deletePermissions(nowChanged.value as number, has_id).catch((err) => {
ElMessage.error(has_id + "删除失败！")
console.log(err)
})
}
}
ElMessage.success("修改任务已发送，请等待页面提示，若5-10s无提示则成功")
showPermissionsDialog.value = false
}
/**
* 当页面更换时（应在Mounted时调用）
*/
const handleChangePage = () => {
get(nowPage.value)
.then((response) => {
totalDataCount.value = response.data.data.total
tableShowData.value = response.data.data.info
})
.catch((err) => {
ElMessage.error("获取页面数据失败！")
console.log(err)
})
}
const expanded = (e: pageDataType) => {
if (e.permissions) {
return
}
getAuthPermissionId(e.id as number).then((response) => {
e.permissions = response.data.data
})
}
onMounted(() => {
handleChangePage()
})
</script>
<template>
<div class="rolesManagerDiv">
<div class="rolesManagerSearchDiv">
<el-button style="margin-left: 10px" type="warning" @click="handleAddButtonClick">添加权限组</el-button>
</div>
<div class="rolesManagerTableDiv">
<el-table :data="tableShowData" style="width: 100%" table-layout="auto" @expand-change="expanded">
<el-table-column type="expand">
<template #default="props">
<el-table :data="props.row.permissions" style="width: 100%">
<el-table-column prop="name" label="权限名称" width="200px" />
<el-table-column prop="code" label="权限ID" width="200px" />
<el-table-column prop="description" label="注释" />
</el-table>
</template>
</el-table-column>
<el-table-column prop="id" label="ID" width="50px" />
<el-table-column prop="roleName" label="权限组名称" width="200px" />
<el-table-column prop="description" label="注释" width="200px" />
<el-table-column prop="createId" label="创建者ID" width="100px" />
<el-table-column prop="createTime" label="创建时间" width="200px" />
<el-table-column prop="updateTime" label="更新时间" width="200px" />
<el-table-column prop="status" label="状态" width="100px">
<template #default="scope">
<el-switch :model-value="scope.row.status" @click="handleChangeStatus(scope.$index)" />
</template>
</el-table-column>
<el-table-column fixed="right" label="操作">
<template #default="scope">
<el-button
link
type="primary"
size="small"
@click="handleExchangeButtonClick(scope.row)"
v-if="user.hasRole('change:roles')"
>修改</el-button
>
<el-button
link
type="primary"
size="small"
@click="handlePermissionButtonClick(scope.row)"
v-if="user.hasRole('change:roles')"
>修改权限</el-button
>
<!-- <el-button
link
type="primary"
size="small"
@click="handleDeleteButtonClick(scope.row)"
v-if="user.hasRole('change:roles') && scope.row.id != 1"
>删除</el-button
>-->
</template>
</el-table-column>
</el-table>
</div>
<div class="rolesManagerPaginationDiv">
<el-pagination
background
layout="prev, pager, next"
:total="totalDataCount"
:page-size="pageSize"
:current-page="nowPage"
@update:current-page="handleChangePage"
/>
</div>
<el-dialog
v-model="showExchangeDialog"
title="修改权限组"
width="30%"
:before-close="
() => {
exchangeData = {
id: -1,
description: '',
roleName: '',
status: true
}
}
"
>
<el-form :model="exchangeData" label-width="150px">
<el-form-item label="注释" prop="description">
<el-input v-model="exchangeData.description" />
</el-form-item>
<el-form-item label="权限组名称" prop="roleName">
<el-input v-model="exchangeData.roleName" />
</el-form-item>
</el-form>
<template #footer>
<span class="dialog-footer">
<el-button @click="showExchangeDialog = false">取消</el-button>
<el-button type="primary" @click="handleExchange">确认</el-button>
</span>
</template>
</el-dialog>
<el-dialog
v-model="showAddDialog"
title="添加权限组"
width="30%"
:before-close="
() => {
addData = {
description: '',
roleName: '',
status: true
}
}
"
>
<el-form :model="addData" label-width="150px">
<el-form-item label="注释" prop="description">
<el-input v-model="addData.description" />
</el-form-item>
<el-form-item label="权限组名称" prop="permissionName">
<el-input v-model="addData.roleName" />
</el-form-item>
</el-form>
<template #footer>
<span class="dialog-footer">
<el-button @click="showAddDialog = false">取消</el-button>
<el-button type="primary" @click="handleAdd">确认</el-button>
</span>
</template>
</el-dialog>
<el-dialog v-model="showPermissionsDialog" title="修改权限" width="30%">
<el-select multiple collapse-tags v-model="nowPermissionIds" :loading="isLoading">
<el-option v-for="i of allPermissions" :label="i.name" :value="i.id" :key="i.id" />
</el-select>
<template #footer>
<span class="dialog-footer">
<el-button @click="showPermissionsDialog = false">取消</el-button>
<el-button type="primary" @click="handlePermissions">确认</el-button>
</span>
</template>
</el-dialog>
</div>
</template>
<style scoped lang="scss">
.rolesManagerDiv {
width: calc(100% - 20px);
height: calc(100% - 20px);
margin: 10px 10px 10px 10px;
}
.rolesManagerTableDiv {
width: 100%;
height: calc(90% - 20px);
margin-top: 10px;
}
.rolesManagerPaginationDiv {
height: 5%;
margin-top: 10px;
min-height: 32px;
}
.rolesManagerSearchDiv {
height: 5%;
width: 100%;
}
</style>

51
src/views/user/TimePicker.vue Normal file
View File

@ -0,0 +1,51 @@
<script setup lang="ts">
import { onMounted, ref, watch } from "vue"
const props = defineProps(["modelValue"])
const emit = defineEmits(["update:modelValue"])
const day = ref<number>(0)
const hour = ref<number>(0)
const min = ref<number>(0)
const sec = ref<number>(0)
const updateValue = () => {
const result = day.value * 86400 + hour.value * 3600 + min.value * 60 + sec.value
emit("update:modelValue", result)
}
watch(day, updateValue)
watch(hour, updateValue)
watch(min, updateValue)
watch(sec, updateValue)
onMounted(() => {
if (props.modelValue == 0) {
day.value = 0
hour.value = 0
min.value = 0
sec.value = 0
}
})
</script>
<template>
<div class="inp">
<el-input-number v-model.number="day" :precision="0" :step="1" :max="365" :min="0" step-strictly />
<el-text>天</el-text>
</div>
<div class="inp">
<el-input-number v-model.number="hour" :precision="0" :step="1" :max="24" :min="0" step-strictly />
<el-text>时</el-text>
</div>
<div class="inp">
<el-input-number v-model.number="min" :precision="0" :step="1" :max="60" :min="0" step-strictly />
<el-text>分</el-text>
</div>
<div class="inp">
<el-input-number v-model.number="sec" :precision="0" :step="1" :max="60" :min="0" step-strictly />
<el-text>秒</el-text>
</div>
</template>
<style scoped lang="scss">
.inp {
margin-top: 4px;
}
</style>

113
src/views/user/index.vue
View File

@ -14,6 +14,7 @@
<el-switch :model-value="scope.row.status" @click="handleChangeUserStatus(scope.$index)" />
</template>
</el-table-column>
<el-table-column prop="countdown" label="剩余时间" v-if="user.roleId == 4" />
<el-table-column prop="roleId" label="权限等级" />
<el-table-column fixed="right" label="操作">
<template #default="scope">
@ -26,6 +27,14 @@
>删除</el-button
>
<el-button link type="primary" size="small" @click="handleExchange(scope.row)">修改</el-button>
<el-button
link
type="primary"
size="small"
@click="handleShowStoreInformation(scope.row.needShowInformation)"
v-if="scope.row.needShowInformation && scope.row.countdownSec >= 0"
>查看提交的店铺信息</el-button
>
</template>
</el-table-column>
</el-table>
@ -55,7 +64,15 @@
<el-input v-model="addAccountData.relName" autocomplete="off" />
</el-form-item>
<el-form-item label="权限等级" prop="roleId">
<el-input v-model.number="addAccountData.roleId" type="number" autocomplete="off" />
<el-select v-model="addAccountData.roleId">
<el-option v-if="user.roleId <= 1" :value="1" label="系统管理员" />
<el-option v-if="user.roleId < 3" :value="3" label="租户管理员" />
<el-option v-if="user.roleId < 4" :value="4" label="商户管理员" />
<el-option v-if="user.roleId == 4" :value="5" label="商户" />
</el-select>
</el-form-item>
<el-form-item label="剩余时间" prop="countdown" v-if="user.roleId == 4 && !modifyMode">
<TimePicker v-model="addAccountData.countdown" />
</el-form-item>
</el-form>
<template #footer>
@ -71,18 +88,28 @@
<script lang="ts" setup>
import { onMounted, ref } from "vue"
import { IAccount } from "@/views/user/types"
import { ElMessage, FormInstance, FormRules } from "element-plus"
import { ElMessage, ElMessageBox, FormInstance, FormRules } from "element-plus"
import { IRegisterRequestData } from "@/api/register/types/register"
import { registerApi } from "@/api/register"
import { changeUserStatusApi, delUserApi, exChangeUserDataApi, getAllUsersApi } from "@/api/users"
import {
changeUserStatusApi,
confirmVerify,
delUserApi,
exChangeUserDataApi,
getAllUsersApi,
getRemainderTime,
getVerifyMessage
} from "@/api/users"
import { getToken } from "@/utils/cache/cookies"
import { pageSize } from "@/api/types/requests"
import { useUserStore } from "@/store/modules/user"
import TimePicker from "@/views/user/TimePicker.vue"
const user = useUserStore()
const showTableData = ref<IAccount[]>([])
const totalUserCount = ref<number>(1)
const nowPage = ref<number>(1)
const addAccountDialogShow = ref<boolean>(false)
const addAccountData = ref<IRegisterRequestData>({ username: "", password: "", email: "", relName: "", roleId: 0 })
const addAccountData = ref<IRegisterRequestData>({ username: "", password: "", email: "", relName: "", roleId: 5 })
const addAccountRules: FormRules = {
username: [
{ required: true, message: "请输入用户名", trigger: "blur" },
@ -135,7 +162,8 @@ const handleAddAccountButtonClick = () => {
addAccountData.value.username = ""
addAccountData.value.email = ""
addAccountData.value.relName = ""
addAccountData.value.roleId = 0
addAccountData.value.roleId = 5
addAccountData.value.countdown = 0
}
const handleAddAccount = () => {
if (!addAccountFormRef.value?.validate()) {
@ -178,6 +206,34 @@ const handleChangePage = () => {
.then((response) => {
showTableData.value = response.data.data.info
totalUserCount.value = response.data.data.total
for (const iAccount of showTableData.value) {
getRemainderTime(iAccount.id).then((response) => {
const secTime = response.data.data.remainderTime
showTableData.value[showTableData.value.indexOf(iAccount)].countdownSec = secTime
if (secTime <= 0) {
// day.value * 86400 + hour.value * 3600 + min.value * 60 + sec.value
showTableData.value[showTableData.value.indexOf(iAccount)].countdown = "已到期"
return
}
const days = secTime / (24 * 60 * 60)
const hours = (secTime % (24 * 60 * 60)) / (60 * 60)
const minutes = (secTime % (60 * 60)) / 60
const seconds = secTime % 60
showTableData.value[showTableData.value.indexOf(iAccount)].countdown =
days.toFixed() + "天" + hours.toFixed() + "时" + minutes.toFixed() + "分" + seconds.toFixed() + "秒"
})
}
if (user.roleId === 4) {
getVerifyMessage(Number.parseInt(user.token)).then((response) => {
for (const datum of response.data.data) {
for (const valueElement of showTableData.value) {
if (valueElement.id === datum.storeId) {
showTableData.value[showTableData.value.indexOf(valueElement)].needShowInformation = datum
}
}
}
})
}
})
.catch(() => {
ElMessage.error("获取用户数据失败！")
@ -190,7 +246,7 @@ const getDialogTitle = (): string => {
return "添加用户"
}
const handleChangeUserStatus = (index: number) => {
if (getToken() !== showTableData.value[index].id) {
if (Number.parseInt(getToken() as string) !== showTableData.value[index].id) {
const userData = showTableData.value[index]
if (userData) {
showTableData.value[index].status = !showTableData.value[index].status
@ -207,8 +263,51 @@ const handleChangeUserStatus = (index: number) => {
ElMessage.error("用户不能修改自己的状态！")
}
}
const handleShowStoreInformation = (information: { phone: string; storeName: string; storeId: number }) => {
ElMessageBox.confirm("店铺名称：" + information.storeName + "\n电话：" + information.phone, "确认", {
confirmButtonText: "确认",
cancelButtonText: "否决",
type: "warning"
})
.then(() => {
confirmVerify(Number.parseInt(user.token), information.storeId, true)
.then(() => {
ElMessage.success("确认成功")
})
.catch((err) => {
ElMessage.error("确认失败，请重试！")
console.log(err)
})
})
.catch(() => {
confirmVerify(Number.parseInt(user.token), information.storeId, false)
.then(() => {
ElMessage.success("否决成功")
})
.catch((err) => {
ElMessage.error("否决失败，请重试！")
console.log(err)
})
})
}
onMounted(() => {
handleChangePage()
setInterval(() => {
for (const iAccount of showTableData.value) {
const secTime = iAccount.countdownSec as number
if (!secTime || secTime <= 0 || Number.isNaN(secTime)) {
showTableData.value[showTableData.value.indexOf(iAccount)].countdown = "已到期"
continue
}
const days = secTime / (24 * 60 * 60)
const hours = (secTime % (24 * 60 * 60)) / (60 * 60)
const minutes = (secTime % (60 * 60)) / 60
const seconds = secTime % 60
showTableData.value[showTableData.value.indexOf(iAccount)].countdown =
days.toFixed() + "天" + hours.toFixed() + "时" + minutes.toFixed() + "分" + seconds.toFixed() + "秒"
iAccount.countdownSec = secTime - 1
}
}, 1000)
})
</script>

4
src/views/user/types/index.ts
View File

@ -6,4 +6,8 @@ export interface IAccount {
password?: string
status: boolean
roleId: number
auth?: string
countdown?: string
countdownSec?: number
needShowInformation?: { phone: string; name: string; storeId: number }
}