提交

src/api/index.ts

@@ -1,7 +1,7 @@
 import instance from '@/tool/axios'
 
 import type { UserData } from '@/types/User'
-import type { Pages, AsProp } from '@/types/Tool'
+import type { Pages, AsProp, Role } from '@/types/Tool'
 import type { IAsSpace } from '@/types/AsSpace'
 import type { ISourceMaterialProps } from '@/types/SourceMaterial'
 import type { CatalogTreeOri } from '@/types/Catalog'
@@ -217,3 +217,43 @@ export const getUserDetail = () => instance.get('/ad/users/info')
  */
 export const addMaterial = (data: { creativeId: number; stuffIds: number[] }) =>
   instance.post('/ad/stuffs/copy', data)
+
+/**
+ * 获取用户列表
+ */
+export const getUserList = (data: Pages) => instance.post('/ad/users/list', data)
+
+/**
+ * 创建用户
+ */
+export const createUser = (data: UserData) => instance.post('/ad/users/create', data)
+
+/**
+ * 修改用户
+ */
+export const updateUser = (data: UserData) => instance.post('/ad/users/update', data)
+
+/**
+ * 删除用户
+ */
+export const deleteUser = (id: number) => instance.post(`/ad/users/delete/${id}`)
+
+/**
+ * 获取角色列表
+ */
+export const getRole = () => instance.get('/ad/roles/list')
+
+/**
+ * 创建角色
+ */
+export const createRole = (data: Role) => instance.post('/ad/roles/create', data)
+
+/**
+ * 修改角色
+ */
+export const updateRole = (data: Role) => instance.post('/ad/roles/update', data)
+
+/**
+ * 删除角色
+ */
+export const deleteRole = (id: number) => instance.post(`/ad/roles/delete/${id}`)

src/router/index.ts

@@ -77,6 +77,16 @@ const router = createRouter({
           name: 'Examine',
           component: () => import('../views/ExaminePage.vue'),
         },
+        {
+          path: 'usermanage',
+          name: 'UserManage',
+          component: () => import('../views/UserManagePage.vue'),
+        },
+        {
+          path: 'permission',
+          name: 'Permission',
+          component: () => import('../views/PermissionPage.vue'),
+        },
       ],
     },
   ],
@@ -113,6 +123,7 @@ router.beforeEach((to, from, next) => {
   }: { role: { menus: menu[] } } = localStorage.getItem('user')
     ? JSON.parse(localStorage.getItem('user') || '')
     : { role: { menus: [] } }
+
   const haveAuth = checkAuth(menus, to.path)
   if (!token || !haveAuth.path) {
     localStorage.removeItem('phone')

src/types/Role.d.ts

@@ -0,0 +1,8 @@
+import type { menu } from '@/types/Tool'
+
+export interface Role {
+  menus: string
+  roleId: number
+  roleName: string
+  menusList: menu[]
+}

src/types/Tool.d.ts

@@ -58,4 +58,15 @@ export interface menu {
   title?: string
   path?: string
   children?: menu[]
+  menuId?: number
+  sortNo?: number
+  pid?: number
+}
+
+export interface Role {
+  menus?: string
+  menu?: number[]
+  menusList?: menu[]
+  roleId?: number
+  roleName?: string
 }

src/types/User.d.ts

@@ -2,4 +2,7 @@ export interface UserData {
   phone?: string
   code?: string
   token?: string
+  userName?: string
+  roleId?: number
+  uid?: number
 }

src/views/PermissionPage.vue

@@ -0,0 +1,134 @@
+<!-- 权限 -->
+<template>
+  <el-form :inline="true">
+    <el-form-item>
+      <el-button type="primary" link @click="() => creatEditPlan()">创建权限</el-button>
+    </el-form-item>
+  </el-form>
+
+  <el-table :data="tableData" stripe style="width: 100%">
+    <el-table-column prop="roleName" label="角色名" />
+    <el-table-column label="操作">
+      <template #default="scope">
+        <el-popconfirm
+          @confirm="() => deleteAdvertiserFunc(scope.row.roleId)"
+          title="确定删除该权限吗?"
+        >
+          <template #reference>
+            <el-button link type="primary" size="small">删除</el-button>
+          </template>
+        </el-popconfirm>
+        <el-button link type="primary" size="small" @click="() => creatEditPlan(scope.row)">
+          修改
+        </el-button>
+      </template>
+    </el-table-column>
+  </el-table>
+
+  <el-dialog v-model="dialogVisible" title="权限">
+    <el-form :rules="rules" ref="ruleFormRef" :model="form" label-width="auto">
+      <el-form-item label="权限名称" prop="roleName">
+        <el-input v-model="form.roleName" />
+      </el-form-item>
+      <el-form-item label="菜单" prop="menu">
+        <el-select
+          multiple
+          collapse-tags
+          v-model="form.menu"
+          placeholder="请选择菜单"
+          style="width: 240px"
+        >
+          <el-option
+            v-for="item in menus"
+            :key="item.menuId"
+            :label="item.title"
+            :value="item.menuId"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item>
+        <el-button type="primary" @click="createOrUpdate(ruleFormRef)">确定</el-button>
+      </el-form-item>
+    </el-form>
+  </el-dialog>
+</template>
+
+<script setup lang="ts">
+import type { Role, menu } from '@/types/Tool'
+import type { FormInstance } from 'element-plus'
+import { deleteRole, updateRole, createRole, getRole } from '@/api/index'
+import { ref } from 'vue'
+// import { statusList } from '@/tool'
+import { ElMessage } from 'element-plus'
+const dialogVisible = ref(false)
+const form = ref<Role>({
+  roleName: '',
+  menu: [],
+})
+const ruleFormRef = ref<FormInstance>()
+const menus: menu[] = JSON.parse(localStorage.getItem('user') || '{}').role?.menus
+const tableData = ref<Role[]>()
+
+const rules = {
+  roleName: [
+    {
+      required: true,
+      message: '请输入权限名',
+      trigger: 'blur',
+    },
+  ],
+  menu: [
+    {
+      required: true,
+      message: '请选择角色',
+      trigger: 'change',
+    },
+  ],
+}
+
+const onSubmit = () => {
+  getRole().then(({ data }) => {
+    tableData.value = data
+  })
+}
+
+const creatEditPlan = (data?: Role) => {
+  if (data != undefined) {
+    form.value = data
+    form.value.menu = (data.menus ? data.menus.split(',') : []).map((item) => Number(item))
+  } else
+    form.value = {
+      roleName: '',
+      menu: [],
+    }
+  dialogVisible.value = !dialogVisible.value
+}
+
+const deleteAdvertiserFunc = (id: number) =>
+  deleteRole(id).then(() => {
+    ElMessage.success('删除成功')
+    onSubmit()
+  })
+
+const createOrUpdate = (formEl: FormInstance | undefined) => {
+  if (!formEl) return
+  formEl.validate((valid) => {
+    if (!valid) return
+    const Func = form.value.roleId == undefined ? createRole : updateRole
+    const p = {
+      roleName: form.value.roleName,
+      roleId: form.value.roleId,
+      menus: form.value.menu?.join(','),
+    }
+    Func(p).then(() => {
+      ElMessage.success(p.roleId == undefined ? '更新成功' : '修改成功')
+      onSubmit()
+      dialogVisible.value = false
+    })
+  })
+}
+
+onSubmit()
+</script>
+
+<style></style>

src/views/UserManagePage.vue

@@ -0,0 +1,175 @@
+<!-- 用户 -->
+<template>
+  <el-form :inline="true">
+    <el-form-item label="用户名称">
+      <el-input v-model="pages.keyword" placeholder="输入用户关键词" clearable />
+    </el-form-item>
+    <el-form-item>
+      <el-button type="primary" @click="onSubmit">搜索</el-button>
+      <el-button type="primary" link @click="() => creatEditPlan()">创建用户</el-button>
+    </el-form-item>
+  </el-form>
+
+  <el-table :data="tableData" stripe style="width: 100%">
+    <el-table-column prop="userName" label="昵称" />
+    <el-table-column prop="phone" label="联系电话" />
+
+    <el-table-column label="操作">
+      <template #default="scope">
+        <el-popconfirm
+          @confirm="() => deleteAdvertiserFunc(scope.row.uid)"
+          title="确定删除该用户吗?"
+        >
+          <template #reference>
+            <el-button link type="primary" size="small">删除</el-button>
+          </template>
+        </el-popconfirm>
+        <el-button link type="primary" size="small" @click="() => creatEditPlan(scope.row)">
+          修改
+        </el-button>
+      </template>
+    </el-table-column>
+  </el-table>
+  <br />
+  <el-pagination
+    background
+    layout="prev, pager, next"
+    :total="pages.total"
+    @current-change="page"
+  />
+
+  <el-dialog v-model="dialogVisible" title="用户">
+    <el-form :rules="rules" ref="ruleFormRef" :model="form" label-width="auto">
+      <el-form-item label="用户名称" prop="userName">
+        <el-input v-model="form.userName" />
+      </el-form-item>
+      <el-form-item label="手机号" prop="phone">
+        <el-input v-model="form.phone" />
+      </el-form-item>
+      <el-form-item label="角色" prop="roleId">
+        <el-select v-model="form.roleId" placeholder="请选择角色" style="width: 240px">
+          <el-option
+            v-for="item in role"
+            :key="item.roleId"
+            :label="item.roleName"
+            :value="item.roleId"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item>
+        <el-button type="primary" @click="createOrUpdate(ruleFormRef)">确定</el-button>
+      </el-form-item>
+    </el-form>
+  </el-dialog>
+</template>
+
+<script setup lang="ts">
+import type { Pages } from '@/types/Tool'
+import type { UserData } from '@/types/User'
+import type { FormInstance } from 'element-plus'
+import type { Role } from '@/types/Role'
+import { getUserList, deleteUser, updateUser, createUser, getRole } from '@/api/index'
+import { ref } from 'vue'
+// import { statusList } from '@/tool'
+import { ElMessage } from 'element-plus'
+const pages = ref<Pages>({
+  pageNum: 1,
+  pageSize: 10,
+  total: 0,
+})
+const dialogVisible = ref(false)
+const form = ref<UserData>({
+  userName: '',
+  phone: '',
+})
+const ruleFormRef = ref<FormInstance>()
+
+const tableData = ref<UserData[]>()
+const role = ref<Role[]>()
+
+getRole().then(({ data }) => {
+  role.value = data
+  console.log(data)
+})
+
+const rules = {
+  phone: [
+    {
+      required: true,
+      message: '请输入手机号',
+      trigger: 'blur',
+    },
+    {
+      pattern: /^1[3456789]\d{9}$/,
+      message: '请输入正确的手机号',
+      trigger: 'blur',
+    },
+  ],
+  userName: [
+    {
+      required: true,
+      message: '请输入用户名',
+      trigger: 'blur',
+    },
+  ],
+  roleId: [
+    {
+      required: true,
+      message: '请选择角色',
+      trigger: 'change',
+    },
+  ],
+}
+
+const onSubmit = () => {
+  getUserList(pages.value).then(({ data }) => {
+    tableData.value = data.records
+    pages.value.total = data.total
+  })
+}
+
+const page = (val: number) => {
+  pages.value.pageNum = val
+  onSubmit()
+}
+
+const creatEditPlan = (data?: UserData) => {
+  if (data != undefined) form.value = data
+  else
+    form.value = {
+      userName: '',
+      phone: '',
+    }
+  dialogVisible.value = !dialogVisible.value
+}
+
+const deleteAdvertiserFunc = (id: number) =>
+  deleteUser(id).then(() => {
+    ElMessage.success('删除成功')
+    onSubmit()
+  })
+
+const createOrUpdate = (formEl: FormInstance | undefined) => {
+  if (!formEl) return
+  formEl.validate((valid) => {
+    console.log(valid)
+    if (!valid) return
+    const Func = form.value.uid == undefined ? createUser : updateUser
+    const p = {
+      userName: form.value.userName,
+      phone: form.value.phone,
+      roleId: form.value.roleId,
+      uid: form.value.uid,
+    }
+    Func(p).then(() => {
+      ElMessage.success(p.uid == undefined ? '更新成功' : '修改成功')
+      onSubmit()
+      dialogVisible.value = false
+    })
+  })
+}
+
+onSubmit()
+</script>
+
+<style></style>