角色管理、用户管理对接

.env.development

@@ -1,4 +1,4 @@
 NODE_ENV = 'development'
 
 VITE_BASE_API = /apiSys
-VITE_BASE_PATH = https://blue.sxidc.com
+VITE_BASE_PATH = http://10.0.0.35:8080

src/api/role.ts

@@ -0,0 +1,28 @@
+import request from '@/utils/request'
+
+// 角色管理列表
+export function getRoleList(data: any) {
+  return request.post('/sys/role/data', data)
+}
+// 新增角色
+export function saveRole(data: any) {
+  return request.post('/sys/role/save', data)
+}
+// 分配用户列表
+export function getRoleUser(data: any) {
+  return request.post('/sys/role/assign', data)
+}
+// 新增分配用户
+export function addRoleUser(data: any) {
+  return request.post('/sys/role/assignrole', data)
+}
+// 移除用户
+export function deleteRoleUser(data: any) {
+  return request.post('/sys/role/outrole', data)
+}
+//删除角色
+export function deleteRole(data: any) {
+  return request.get('/sys/role/delete', {
+    params: data
+  })
+}

src/api/user.ts

@@ -9,3 +9,24 @@ export function login(data: any) {
 export function getUserInfo() {
   return request.get('/user')
 }
+
+// 用户列表
+export function getUserList(data?: any) {
+  return request.post('/sys/user/list', data)
+}
+// 新增用户
+export function saveUser(data: any) {
+  return request.post('/sys/user/save', data)
+}
+//删除用户
+export function deleteUser(data: any) {
+  return request.get('/sys/user/deleteAll', {
+    params: data
+  })
+}
+// 登录名查重
+export function checkLoginName(data: any) {
+  return request.get('/sys/user/checkLoginName', {
+    params: data
+  })
+}

src/components/ProTable.vue

@@ -24,6 +24,7 @@ interface Props {
   dialogConfig?: DialogProps
   tableConfig?: CustomTable
   showToolbar?: boolean
+  height?: string
 }
 
 const props = withDefaults(defineProps<Props>(), {
@@ -32,7 +33,7 @@ const props = withDefaults(defineProps<Props>(), {
   showToolbar: true
 })
 
-const emits = defineEmits(['click-edit'])
+const emits = defineEmits(['click-create', 'click-edit'])
 
 // ============== 查询部分开始 ===============
 const query = ref<any>({})
@@ -115,6 +116,7 @@ const handleSelectionChange = (columns: any[]) => {
 // ============== crud部分开始 ===============
 const formRoute = ref<any>(props.formConfig.route)
 const handleCreate = () => {
+  emits('click-create')
   if (formRoute.value) {
     router.push(formRoute.value)
   } else {
@@ -189,7 +191,7 @@ defineExpose({
 </script>
 
 <template>
-  <div class="flex flex-col" style="height: calc(100vh - 101px - var(--main-padding) * 2)">
+  <div class="flex flex-col" :style="{ height: height || 'calc(100vh - 101px - var(--main-padding) * 2)' }">
     <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">

src/views/system/Dict.vue

@@ -15,7 +15,7 @@ const CRUD: ICRUD = {
         curRow.value = res.rows[0]
       }
       return {
-        data: res.rows,
+        list: res.rows,
         total: res.total
       }
     })
@@ -44,12 +44,7 @@ const itemCRUD: ICRUD = {
     })
   },
   getList() {
-    return getDictValue(curRow.value.id).then((res: any) => {
-      return {
-        data: res.rows,
-        total: res.total
-      }
-    })
+    return getDictValue(curRow.value.id)
   },
   delete(data: any) {
     return deleteDictValue({ dictValueId: data.id, dictTypeId: curRow.value.id })

src/views/system/Role.vue

@@ -1,28 +1,26 @@
 <script setup lang="ts">
 import type { BasicForm, ICRUD } from '@/types/form'
+import { getRoleList, saveRole, deleteRole, getRoleUser, addRoleUser, deleteRoleUser } from '@/api/role'
+import { getUserList } from '@/api/user'
 
 const CRUD: ICRUD = {
   create(data: any) {
-    return Promise.resolve(data)
+    return saveRole(data)
   },
   update(data: any) {
-    return Promise.resolve(data)
+    return saveRole(data)
   },
-  getList() {
-    return new Promise(resolve => {
-      return resolve({
-        data: [
-          {
-            id: 1,
-            name: 'test'
-          }
-        ],
-        total: 1
-      })
+  getList(data: any) {
+    return getRoleList({
+      name: '',
+      ...data
     })
   },
   delete(data: any) {
-    return Promise.resolve(data)
+    return deleteRole({ ids: data.id })
+  },
+  deleteBatch(data: any) {
+    return deleteRole(data)
   }
 }
 
@@ -38,127 +36,122 @@ const formConfig = reactive<BasicForm>({
       search: true
     },
     {
-      label: '备注',
+      label: '英文名称',
       value: '',
-      name: 'remarks',
-      type: 'input'
+      name: 'enname',
+      type: 'input',
+      rules: [{ required: true, message: '请输入角色英文名称', trigger: 'blur' }]
     }
   ]
 })
 
 const curRole = ref<any>(null)
-const handleRole = (row: any) => {
-  curRole.value = row
-}
+// 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)
+  userRef.value?.refresh()
 }
 
 // 用户table
-const userTableData = ref([])
-const total = ref(0)
-const curPage = ref(1)
-const loading = ref(false)
-
-const getUserTableData = () => {
-  loading.value = true
-  // props.crud
-  //   ?.getList({
-  //     ...query.value,
-  //     pageSize: props.pageSize,
-  //     page: curPage.value
-  //   })
-  //   .then((res: any) => {
-  //     tableData.value = res.data
-  //     total.value = res.total
-  //   })
-  //   .finally(() => {
-  //     loading.value = false
-  //   })
-}
-getUserTableData()
-
-const pageChange = () => {
-  getUserTableData()
+const UserCRUD: ICRUD = {
+  create(data: any) {
+    return addRoleUser(data)
+  },
+  update(data: any) {
+    return addRoleUser(data)
+  },
+  getList(data: any) {
+    return getRoleUser({ id: curRole.value.id, ...data }).then((res: any) => {
+      slectedUser.value = res.rows.map((item: any) => item.id)
+      return res
+    })
+  },
+  delete(data: any) {
+    return deleteRoleUser({ roleId: curRole.value.id, userId: data.id })
+  }
 }
+const userFormConfig = reactive<BasicForm>({
+  span: 24,
+  formItems: []
+})
 
 const dialogVisible = ref(false)
 const slectedUser = ref<any>([])
 const userList = ref<any>([])
+const userRef = ref<any>(null)
 
 const handleAddUser = () => {
   dialogVisible.value = true
+  getUserList({
+    pageSize: -1
+  }).then((res: any) => {
+    userList.value = res.rows
+  })
 }
 const closeDialog = () => {
   dialogVisible.value = false
 }
 const handleSubmit = () => {
-  //
+  addRoleUser({
+    role: { id: curRole.value.id },
+    ids: slectedUser.value
+  }).then(() => {
+    userRef.value.refresh()
+    dialogVisible.value = false
+  })
 }
 </script>
 
 <template>
   <el-row :gutter="16">
     <el-col :span="curRole ? 12 : 24">
-      <pro-table :crud="CRUD" :formConfig="formConfig" :tableConfig="{ operateWidth: 300 }">
+      <pro-table :crud="CRUD" :formConfig="formConfig" :tableConfig="{ operateWidth: 220 }">
         <el-table-column prop="name" label="角色名称"></el-table-column>
-        <el-table-column prop="phone" label="备注"></el-table-column>
+        <el-table-column prop="enname" label="英文名称"></el-table-column>
         <template #operateBefore="{ row }">
-          <el-button type="primary" size="small" @click="handleRole(row)">角色授权</el-button>
+          <!-- <el-button type="primary" size="small" @click="handleRole(row)">角色授权</el-button> -->
           <el-button type="primary" size="small" @click="handleUser(row)">分配用户</el-button>
         </template>
       </pro-table>
     </el-col>
     <el-col :span="12" v-if="curRole">
-      <el-card class="h-full" :body-style="{ height: '100%' }">
+      <el-card class="h-full" shadow="never" :body-style="{ height: '100%', padding: 0 }">
         <template #header>
           <div class="flex justify-between">
             <div>分配用户</div>
             <el-button icon="back" link @click="curRole = null">关闭</el-button>
           </div>
         </template>
-        <div class="flex flex-col" style="height: calc(100% - 53px)">
-          <div class="flex justify-between mb-sm">
-            <el-button type="primary" @click="handleAddUser">添加用户</el-button>
-            <div>
-              <el-input placeholder="姓名">
-                <template #append><el-button icon="Search" @click="handleSearchUser" /></template>
-              </el-input>
+        <pro-table
+          ref="userRef"
+          height="calc(100% - 53px)"
+          :crud="UserCRUD"
+          :formConfig="userFormConfig"
+          :showToolbar="false"
+          :tableConfig="{ operateWidth: 100, showEdit: false }"
+          :selection="false"
+        >
+          <template #header>
+            <div class="mb-20px">
+              <el-button type="primary" @click="handleAddUser">添加用户</el-button>
             </div>
-          </div>
-          <el-table class="flex-grow-1 h-full" border :data="userTableData">
-            <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>
-          <div class="flex justify-end shrink-0">
-            <el-pagination
-              background
-              layout="prev, pager, next, jumper, total"
-              :page-size="10"
-              :total="total"
-              @current-change="pageChange"
-              class="mt-16px"
-            />
-          </div>
-        </div>
+          </template>
+          <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>
+        </pro-table>
       </el-card>
     </el-col>
   </el-row>
   <el-dialog v-model="dialogVisible" title="添加用户" @close="closeDialog">
-    <el-transfer v-model="slectedUser" :data="userList" :titles="['用户列表', '已选用户']" />
+    <el-transfer
+      v-model="slectedUser"
+      :data="userList"
+      :titles="['用户列表', '已选用户']"
+      :props="{ key: 'id', label: 'name' }"
+    />
     <template #footer>
       <el-button icon="Close" @click="closeDialog">取消</el-button>
       <el-button icon="Check" type="primary" @click="handleSubmit">保存</el-button>

src/views/system/User.vue

@@ -1,53 +1,61 @@
 <script setup lang="ts">
 import type { BasicForm, ICRUD } from '@/types/form'
+import { getUserList, saveUser, deleteUser, checkLoginName } from '@/api/user'
+import { getRoleList } from '@/api/role'
+
+const curRow = ref<any>(null)
 
 const CRUD: ICRUD = {
   create(data: any) {
-    return Promise.resolve(data)
+    return saveUser(data)
   },
   update(data: any) {
-    return Promise.resolve(data)
+    if (data.password) {
+      data.newPassword = data.password
+    } else {
+      delete data.password
+    }
+    delete data.roleList
+    data.oldLoginName = curRow.value.loginName
+    return saveUser(data)
   },
-  getList() {
-    return new Promise(resolve => {
-      return resolve({
-        data: [
-          {
-            id: 1,
-            phone: '187',
-            name: 'test',
-            state: true,
-            gender: '1'
-          }
-        ],
-        total: 1
-      })
-    })
+  getList(data: any) {
+    return getUserList(data)
   },
   delete(data: any) {
-    return Promise.resolve(data)
+    return deleteUser({ ids: data.id })
+  },
+  deleteBatch(data: any) {
+    return deleteUser({ ids: data.id })
   }
 }
 
-const testGetRole = () => {
-  Promise.resolve().then(() => {
-    formConfig.formItems[3].options = [
-      {
-        label: '测试角色',
-        value: '1'
-      }
-    ]
+// 角色列表
+const roleList = ref<any>([])
+getRoleList({
+  pageSize: -1,
+  name: ''
+}).then((res: any) => {
+  roleList.value = res.rows.map((item: any) => {
+    return {
+      value: item.id,
+      label: item.name
+    }
   })
-}
-testGetRole()
-const test = () => {
-  console.log('object input')
-}
-const change = (e: any) => {
-  console.log('focus')
-  console.log(e)
-}
+})
 
+const duplicate = (rule: any, value: any, callback: any) => {
+  checkLoginName({
+    oldLoginName: curRow.value?.loginName || '',
+    loginName: value
+  }).then((res: any) => {
+    if (res === 'true') {
+      callback()
+    } else {
+      callback(new Error('此登录名已存在'))
+    }
+  })
+}
 const formConfig = reactive<BasicForm>({
   span: 12,
   formItems: [
@@ -57,11 +65,18 @@ const formConfig = reactive<BasicForm>({
       name: 'name',
       type: 'input',
       rules: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
-      search: true,
-      events: {
-        input: test,
-        focus: change
-      }
+      search: true
+    },
+    {
+      label: '登录名',
+      value: '',
+      name: 'loginName',
+      type: 'input',
+      rules: [
+        { required: true, message: '请输入登录名', trigger: 'blur' },
+        { validator: duplicate, trigger: 'blur' }
+      ],
+      search: true
     },
     {
       label: '密码',
@@ -83,41 +98,43 @@ const formConfig = reactive<BasicForm>({
     {
       label: '角色',
       value: '',
-      name: 'role',
+      name: 'roleIdList',
       type: 'select',
-      options: []
+      options: roleList,
+      rules: [{ required: true, message: '请选择角色', trigger: 'blur' }],
+      props: {
+        multiple: true,
+        clearable: true
+      }
     },
-    // {
-    //   label: '性别',
-    //   value: '1',
-    //   name: 'gender',
-    //   type: 'radio-group',
-    //   options: [
-    //     {
-    //       label: '1',
-    //       value: '男'
-    //     },
-    //     {
-    //       label: '2',
-    //       value: '女'
-    //     }
-    //   ]
-    // },
     {
       label: '启用',
-      value: true,
-      name: 'state',
-      type: 'switch'
+      value: '1',
+      name: 'loginFlag',
+      type: 'switch',
+      props: {
+        'active-value': '1',
+        'inactive-value': '0'
+      }
     }
   ]
 })
+
+const handleCreate = () => {
+  curRow.value = null
+  formConfig.formItems[2].rules = [{ required: true, message: '请输入密码', trigger: 'blur' }]
+}
+const handleEdit = (row: any) => {
+  curRow.value = row
+  formConfig.formItems[2].rules = []
+}
 </script>
 
 <template>
-  <pro-table :crud="CRUD" :formConfig="formConfig">
+  <pro-table :crud="CRUD" :formConfig="formConfig" @click-create="handleCreate" @click-edit="handleEdit">
     <el-table-column prop="name" label="用户名"></el-table-column>
+    <el-table-column prop="loginName" label="登录名"></el-table-column>
     <el-table-column prop="phone" label="手机号"></el-table-column>
-    <el-table-column prop="gender" label="性别"></el-table-column>
   </pro-table>
 </template>