字典、角色管理

src/api/dict.ts

@@ -0,0 +1,21 @@
+import request from '@/utils/request'
+
+export function createDict(data: any) {
+  return request.post('/createDict', data)
+}
+
+export function updateDict(data: any) {
+  return request.post('/updateDict', data)
+}
+
+export function deleteDict(data: any) {
+  return request.post('/deleteDict', data)
+}
+
+export function findDict(data: any) {
+  return request.get('/findDict', data)
+}
+
+export function getDictList(data?: any) {
+  return request.get('/getDictList', data)
+}

src/api/user.ts

@@ -1,9 +1,11 @@
 import request from '@/utils/request'
 
 export function login(data: any) {
-  return request.post('/getAccessToken', data)
+  return request.post('/login', null, {
+    params: data
+  })
 }
 
 export function getUserInfo() {
-  return request.get('/v1/user/profile/query')
+  return request.get('/user')
 }

src/components/ProTable.vue

@@ -1,3 +1,9 @@
+<script lang="ts">
+export default {
+  inheritAttrs: false
+}
+</script>
+
 <script setup lang="ts">
 import router from '@/router'
 import { ElMessage, ElMessageBox, type DialogProps } from 'element-plus'
@@ -13,9 +19,9 @@ interface CRUD {
   getRecord: Function
 }
 interface CustomTable {
-  showOperate: boolean
+  showOperate?: boolean
+  operateWidth?: number
 }
-type Table = Partial<Omit<TableProps<any>, 'data'> & CustomTable>
 
 interface Props {
   crud: CRUD
@@ -23,7 +29,7 @@ interface Props {
   selection?: boolean
   formConfig: BasicForm | AdvancedForm
   dialogConfig?: DialogProps
-  tableConfig?: Table
+  tableConfig?: CustomTable
 }
 
 const props = withDefaults(defineProps<Props>(), {
@@ -62,8 +68,9 @@ const tableData = ref([])
 const total = ref(0)
 const curPage = ref(1)
 const loading = ref(false)
-const tableConfig = ref<Table>({
+const tableConfig = ref<CustomTable>({
   showOperate: true,
+  operateWidth: 120,
   ...props.tableConfig
 })
 
@@ -158,7 +165,7 @@ defineExpose({
 
 <template>
   <div class="flex flex-col" style="height: calc(100vh - 101px - var(--main-padding) * 2)">
-    <el-card class="mb-4" shadow="never">
+    <el-card class="mb-4" shadow="never" v-if="searchList.length">
       <el-form :inline="true">
         <el-form-item :label="item.label" v-for="(item, index) in searchList" :key="index">
           <form-comp :item="item" v-model="query[item.name]"></form-comp>
@@ -189,16 +196,18 @@ defineExpose({
         <el-table
           class="flex-grow-1 h-full"
           :data="tableData"
-          @selection-change="handleSelectionChange"
           v-loading="loading"
-          v-bind="tableConfig"
+          v-bind="$attrs"
+          @selection-change="handleSelectionChange"
         >
           <el-table-column type="selection" width="50" v-if="selection"></el-table-column>
           <slot></slot>
-          <el-table-column fixed="right" label="操作" width="120" v-if="tableConfig?.showOperate">
+          <el-table-column fixed="right" label="操作" :width="tableConfig.operateWidth" v-if="tableConfig.showOperate">
             <template #default="{ row }">
+              <slot name="operateBefore" :row="row"></slot>
               <el-button link type="primary" size="small" @click="handleUpdate(row)">编辑</el-button>
               <el-button link type="danger" size="small" @click="handleDelete(row.id)">删除</el-button>
+              <slot name="operateAfter" :row="row"></slot>
             </template>
           </el-table-column>
         </el-table>

src/router/asyncRouter.ts

@@ -36,6 +36,24 @@ const asyncRouter: RouteRecordRaw[] = [
           icon: 'user'
         }
       },
+      {
+        path: 'role',
+        name: 'systemRole',
+        component: () => import('@/views/system/Role.vue'),
+        meta: {
+          title: '角色管理',
+          icon: 'avatar'
+        }
+      },
+      {
+        path: 'dict',
+        name: 'systemDict',
+        component: () => import('@/views/system/Dict.vue'),
+        meta: {
+          title: '字典管理',
+          icon: 'memo'
+        }
+      },
       {
         path: 'menu',
         name: 'systemMenu',

src/stores/user.ts

@@ -10,13 +10,14 @@ export const useUserStore = defineStore({
   }),
   actions: {
     async getUserInfo() {
-      const userRes: any = await getUserInfo()
-      this.user = userRes.infos[0]
+      // const userRes: any = await getUserInfo()
+      // this.user = userRes.infos[0]
       this.flag = true
     },
     async login(data: any) {
       const res: any = await login(data)
-      this.token = res.accessToken
+      this.token = res.token
+      this.user = res.user
       localStorage.setItem('token', this.token)
 
       router.replace({ path: (router.currentRoute.value.query.redirect as string) || '/' })

src/utils/request.ts

@@ -4,7 +4,7 @@ import router from '@/router'
 import { ElMessage, ElMessageBox } from 'element-plus'
 
 const request = axios.create({
-  baseURL: '/api'
+  baseURL: '/apiSys'
 })
 
 // 异常拦截处理器
@@ -50,8 +50,8 @@ request.interceptors.request.use(config => {
 
 request.interceptors.response.use(res => {
   const data = res.data
-  if (data.success || data.code === 0) {
-    return data
+  if (data.success || data.code === 200) {
+    return data.data
   } else {
     ElMessage.error(data.msg)
     return Promise.reject(data)

src/views/system/Dict.vue

@@ -0,0 +1,96 @@
+<script setup lang="ts">
+import type { BasicForm } from '@/types/form'
+
+const CRUD = {
+  create() {
+    return Promise.resolve()
+  },
+  update() {
+    return Promise.resolve()
+  },
+  getList() {
+    return new Promise(resolve => {
+      return resolve({
+        data: [
+          {
+            name: 'test'
+          }
+        ],
+        total: 1
+      })
+    })
+  }
+}
+
+const dictFormConfig = reactive<BasicForm>({
+  span: 12,
+  formItems: [
+    {
+      label: '字典名称',
+      value: '',
+      name: 'name',
+      type: 'input',
+      rules: [{ required: true, message: '请输入字典名称', trigger: 'blur' }]
+    },
+    {
+      label: '字典值',
+      value: '',
+      name: 'value',
+      type: 'input',
+      rules: [{ required: true, message: '请输入字典值', trigger: 'blur' }]
+    }
+  ]
+})
+const handleRowClick = (row: any, column: any, event: any) => {
+  console.log(row, column, event)
+}
+
+const dictItemFormConfig = reactive<BasicForm>({
+  span: 12,
+  formItems: [
+    {
+      label: '字典名称',
+      value: '',
+      name: 'name',
+      type: 'input',
+      rules: [{ required: true, message: '请输入用户名', trigger: 'blur' }]
+    },
+    {
+      label: '字典值',
+      value: '',
+      name: 'value',
+      type: 'input',
+      rules: [{ required: true, message: '请输入密码', trigger: 'blur' }]
+    },
+    {
+      label: '排序',
+      value: '',
+      name: 'sort',
+      type: 'input',
+      props: {
+        maxlength: 11
+      }
+    }
+  ]
+})
+</script>
+
+<template>
+  <el-row :gutter="16">
+    <el-col :span="12">
+      <pro-table :crud="CRUD" :formConfig="dictFormConfig" @row-click="handleRowClick">
+        <el-table-column prop="name" label="字典名称"></el-table-column>
+        <el-table-column prop="value" label="字典值"></el-table-column>
+      </pro-table>
+    </el-col>
+    <el-col :span="12">
+      <pro-table :crud="CRUD" :formConfig="dictItemFormConfig">
+        <el-table-column prop="name" label="标签"></el-table-column>
+        <el-table-column prop="phone" label="键值"></el-table-column>
+        <el-table-column prop="gender" label="排序"></el-table-column>
+      </pro-table>
+    </el-col>
+  </el-row>
+</template>
+
+<style lang="scss" scoped></style>

src/views/system/Role.vue

@@ -0,0 +1,105 @@
+<script setup lang="ts">
+import type { BasicForm } from '@/types/form'
+
+const CRUD = {
+  create() {
+    return Promise.resolve()
+  },
+  update() {
+    return Promise.resolve()
+  },
+  getList() {
+    return new Promise(resolve => {
+      return resolve({
+        data: [
+          {
+            id: 1,
+            name: 'test'
+          }
+        ],
+        total: 1
+      })
+    })
+  }
+}
+
+const formConfig = reactive<BasicForm>({
+  span: 24,
+  formItems: [
+    {
+      label: '角色名称',
+      value: '',
+      name: 'name',
+      type: 'input',
+      rules: [{ required: true, message: '请输入角色名称', trigger: 'blur' }],
+      search: true
+    },
+    {
+      label: '备注',
+      value: '',
+      name: 'remarks',
+      type: 'input'
+    }
+  ]
+})
+
+const curRole = ref<any>(null)
+const handleRole = (row: any) => {
+  curRole.value = row
+}
+const handleUser = (row: any) => {
+  curRole.value = row
+}
+
+const handleSearchUser = () => {
+  console.log('search')
+}
+const handleDelete = (id: any) => {
+  console.log(id)
+}
+</script>
+
+<template>
+  <el-row :gutter="16">
+    <el-col :span="curRole ? 12 : 24">
+      <pro-table :crud="CRUD" :formConfig="formConfig" :tableConfig="{ operateWidth: 250 }">
+        <el-table-column prop="name" label="角色名称"></el-table-column>
+        <el-table-column prop="phone" label="备注"></el-table-column>
+        <template #operateBefore="{ row }">
+          <el-button link type="primary" size="small" @click="handleRole(row)">角色授权</el-button>
+          <el-button link type="primary" size="small" @click="handleUser(row)">分配用户</el-button>
+        </template>
+      </pro-table>
+    </el-col>
+    <el-col :span="12" v-if="curRole">
+      <el-card>
+        <template #header>
+          <div class="flex justify-between">
+            <div>分配用户</div>
+            <el-button icon="back" link @click="curRole = null">关闭</el-button>
+          </div>
+        </template>
+        <div class="flex justify-between mb-sm">
+          <el-button type="primary">添加用户</el-button>
+          <div>
+            <el-input placeholder="姓名">
+              <template #append><el-button icon="Search" @click="handleSearchUser" /></template>
+            </el-input>
+          </div>
+        </div>
+        <el-table border>
+          <el-table-column prop="name" label="登录名"></el-table-column>
+          <el-table-column prop="name" label="姓名"></el-table-column>
+          <el-table-column prop="phone" label="手机号"></el-table-column>
+          <el-table-column label="操作">
+            <template #default="{ row }">
+              <el-button link type="danger" size="small" @click="handleDelete(row.id)">删除</el-button>
+            </template>
+          </el-table-column>
+        </el-table>
+      </el-card>
+    </el-col>
+  </el-row>
+</template>
+
+<style lang="scss" scoped></style>

vite.config.ts

@@ -38,8 +38,9 @@ export default defineConfig({
   },
   server: {
     proxy: {
-      '/api': {
-        target: 'https://yunji.sxidc.com',
+      '/apiSys': {
+        // target: 'https://yunji.sxidc.com',
+        target: 'http://10.0.0.33:8080/',
         changeOrigin: true
       }
     }