角色管理页面接口对接

src/api/calibration/roleManagement/index.ts

@@ -0,0 +1,81 @@
+// roleManagement
+import request from '@/utils/request'
+const AUTH_BASE_URL = '/api2'
+
+/*
+ * 角色管理
+ * */
+
+// 添加角色
+export const BusinessAddRole = (data: any) => {
+  const formData = new FormData()
+  formData.append('RoleName', data.RoleName)
+  formData.append('remark', data.remark)
+  return request({
+    url: `${AUTH_BASE_URL}/business/addRole`,
+    method: 'post',
+    data: formData,
+    headers: {
+      'Content-Type': 'multipart/form-data'
+    }
+  })
+}
+
+// 编辑角色
+export const BusinessEditRole = (data: any) => {
+  const formData = new FormData()
+  formData.append('id', data.id)
+  formData.append('RoleName', data.RoleName)
+  formData.append('remark', data.remark)
+  return request({
+    url: `${AUTH_BASE_URL}/business/EditRole`,
+    method: 'post',
+    data: formData,
+    headers: {
+      'Content-Type': 'multipart/form-data'
+    }
+  })
+}
+
+// 角色展示
+export const BusinessDisplayRole = (data: any) => {
+  const formData = new FormData()
+  formData.append('RoleName', data.RoleName)
+  return request({
+    url: `${AUTH_BASE_URL}/business/displayRole`,
+    method: 'post',
+    data: formData,
+    headers: {
+      'Content-Type': 'multipart/form-data'
+    }
+  })
+}
+
+// 删除角色
+export const BusinessDeleteRole = (id: string) => {
+  const formData = new FormData()
+  formData.append('id', id)
+  return request({
+    url: `${AUTH_BASE_URL}/business/DeleteRole`,
+    method: 'post',
+    data: formData,
+    headers: {
+      'Content-Type': 'multipart/form-data'
+    }
+  })
+}
+
+// 赋予权限
+export const BusinessModifypermissions = (data: any) => {
+  const formData = new FormData()
+  formData.append('id', data.id)
+  formData.append('permissionId', data.permissionId)
+  return request({
+    url: `${AUTH_BASE_URL}/business/modifypermissions`,
+    method: 'post',
+    data: formData,
+    headers: {
+      'Content-Type': 'multipart/form-data'
+    }
+  })
+}

src/router/index.ts

@@ -92,6 +92,14 @@ export const constantRoutes: RouteRecordRaw[] = [
         meta: {
           title: '权限管理'
         }
+      },
+      {
+        path: 'roleManagement',
+        name: 'RoleManagement',
+        component: () => import('@/views/calibration/roleManagement/index.vue'),
+        meta: {
+          title: '角色管理'
+        }
       }
     ]
   },

src/views/calibration/permissionManagement/index.vue

@@ -173,7 +173,7 @@ function handleSelectionChange(selection: any) {
 }
 
 // 打开角色弹窗
-function handleOpenDialog(data?: any, parentId: string) {
+function handleOpenDialog(data?: any, parentId?: string) {
   dialog.visible = true
   if (data?.id) {
     functionDialogBox(

src/views/calibration/personnelManagement/index.vue

@@ -92,6 +92,7 @@
             v-loading="loading"
             :data="pageData"
             border
+            :resizable="false"
             stripe
             highlight-current-row
             class="data-table__content"
@@ -106,7 +107,11 @@
             <!--                <DictLabel v-model="scope.row.gender" code="gender" />-->
             <!--              </template>-->
             <!--            </el-table-column>-->
-            <el-table-column label="部门" align="center" prop="department" />
+            <el-table-column label="部门" align="center" prop="department">
+              <template #default="{ row }">
+                <span>{{ row.department.map((item: any) => item.username).join('，') }}</span>
+              </template>
+            </el-table-column>
             <el-table-column label="手机号码" align="center" prop="mobilePhone" />
             <el-table-column label="学历证书" align="center" prop="AcademicResume">
               <template #default="{ row }">
@@ -222,11 +227,23 @@
           <el-input v-model="formData.mobilePhone" placeholder="请输入手机号" maxlength="11" />
         </el-form-item>
         <el-form-item label="所属部门" prop="department">
-          <el-select v-model="formData.department" placeholder="请选择所属部门">
-            <el-option key="行政部" label="行政部" value="行政部" />
-            <el-option key="财务部" label="财务部" value="财务部" />
-            <el-option key="执业律师" label="执业律师" value="执业律师" />
-            <el-option key="实习律师" label="实习律师" value="实习律师" />
+          <el-select v-model="formData.department" multiple placeholder="请选择所属部门">
+            <el-option
+              v-for="(item, index) in deptList"
+              :key="index"
+              :label="item.name"
+              :value="item.id"
+            />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="角色" prop="role">
+          <el-select v-model="formData.role" multiple placeholder="请选择">
+            <el-option
+              v-for="(item, index) in roleList"
+              :key="index"
+              :label="item.RoleName"
+              :value="item.id"
+            />
           </el-select>
         </el-form-item>
         <el-form-item label="岗位" prop="position">
@@ -435,6 +452,8 @@ import {
   UserPersonnelList
 } from '@/api/calibration/personnelManagement'
 import { getFileInfo, convertFilePathsToObject, isValidJson } from '@/utils/auxiliaryFunction'
+import { UserDepartment } from '@/api/calibration/department'
+import { BusinessDisplayRole } from '@/api/calibration/roleManagement'
 
 // ==================== 组件配置 ====================
 defineOptions({
@@ -462,6 +481,8 @@ const queryParams = reactive<any>({
 
 // 列表数据
 const pageData = ref<any[]>([])
+const deptList = ref<any[]>([])
+const roleList = ref<any[]>([])
 const total = ref(0)
 const loading = ref(false)
 
@@ -478,9 +499,10 @@ const formData = reactive<any>({
   password: '',
   nation: '',
   IdCard: '',
-  department: '',
+  department: [],
   mobilePhone: '',
   position: '',
+  role: [],
   team: '',
   Dateofjoining: '',
   Confirmationtime: '',
@@ -557,6 +579,13 @@ const rules = reactive({
       trigger: 'blur'
     }
   ],
+  role: [
+    {
+      required: true,
+      message: '请选择',
+      trigger: 'blur'
+    }
+  ],
   mobilePhone: [
     {
       required: true,
@@ -637,6 +666,17 @@ const fetchUserList = useDebounceFn(async () => {
   }
 })
 
+const DepartmentList = (name: string = '') => {
+  UserDepartment(name).then((res: any) => {
+    deptList.value = res.data
+  })
+}
+const onBusinessDisplayRole = (name: string = '') => {
+  BusinessDisplayRole({ RoleName: name }).then((res: any) => {
+    roleList.value = res.data
+  })
+}
+
 // ==================== 表格选择 ====================
 const { selectedIds, hasSelection, handleSelectionChange } = useTableSelection<UserPageVO>()
 
@@ -969,6 +1009,8 @@ async function handleExport(): Promise<void> {
  */
 onMounted(() => {
   handleQuery()
+  DepartmentList()
+  onBusinessDisplayRole()
 })
 watch(
   () => queryParams.department,

src/views/calibration/roleManagement/components/GrantPermissionsForm.vue

@@ -0,0 +1,108 @@
+<template>
+  <div class="pre-registration-form">
+    <el-tree
+      ref="deptTreeRef"
+      class="mt-2"
+      :data="permissionList"
+      :default-checked-keys="permission"
+      :default-expanded-keys="permission"
+      :props="{ children: 'children', label: 'permission_name', disabled: '' }"
+      node-key="id"
+      highlight-current
+      check-on-click-node
+      :expand-on-click-node="false"
+      show-checkbox
+      :current-node-key="permissionList?.length ? permissionList[0].id : ''"
+      @check="handleCheck"
+    />
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { BusinessDisplayRermission } from '@/api/calibration/permissionManagement'
+
+const props = defineProps({
+  newData: {
+    type: Array,
+    default: () => []
+  }
+})
+const deptTreeRef = ref()
+const permission = ref<any[]>([])
+const permissionList = ref<any[]>([])
+
+const onBusinessDisplayRermission = () => {
+  BusinessDisplayRermission().then((res: any) => {
+    permissionList.value = res.data
+  })
+}
+
+function handleCheck(_: any, data: any) {
+  permission.value = data.checkedKeys
+
+  console.log('permission.value', data.checkedKeys)
+}
+
+onMounted(() => {
+  setFormData(props.newData)
+  onBusinessDisplayRermission()
+})
+
+function deepCloneByJSON(obj: any) {
+  try {
+    return JSON.parse(JSON.stringify(obj))
+  } catch (error) {
+    console.error('深拷贝失败:', error)
+    return obj
+  }
+}
+
+const setFormData = (data: any) => {
+  permission.value = deepCloneByJSON(data)
+}
+
+const getForm = () => {
+  return permission.value
+}
+
+const submit = (): Promise<boolean> => {
+  return new Promise((resolve) => {
+    resolve(true)
+  })
+}
+defineExpose({
+  submit,
+  getForm
+})
+</script>
+
+<style scoped lang="scss">
+.pre-registration-form {
+  width: 100%;
+  padding-right: 20px;
+  overflow: hidden;
+  overflow-y: auto;
+
+  &::-webkit-scrollbar {
+    width: 6px;
+  }
+
+  &::-webkit-scrollbar-track {
+    background: transparent;
+  }
+
+  &::-webkit-scrollbar-thumb {
+    background: rgba(0, 0, 0, 0.3);
+    border-radius: 3px;
+  }
+
+  &::-webkit-scrollbar-thumb:hover {
+    background: rgba(0, 0, 0, 0.5);
+  }
+}
+.section {
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+}
+</style>

src/views/calibration/roleManagement/components/RoleForm.vue

@@ -0,0 +1,112 @@
+<template>
+  <div class="pre-registration-form">
+    <el-form
+      ref="formRef"
+      :model="formData"
+      :rules="formRules"
+      label-width="auto"
+      label-position="top"
+    >
+      <el-form-item label="角色名称" prop="RoleName">
+        <el-input v-model="formData.RoleName" placeholder="请输入" />
+      </el-form-item>
+      <el-form-item label="备注" prop="remark">
+        <el-input v-model="formData.remark" type="textarea" placeholder="请输入" />
+      </el-form-item>
+    </el-form>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { ElMessage } from 'element-plus'
+
+const props = defineProps({
+  newData: {
+    type: Object,
+    default: () => ({})
+  }
+})
+const formRef = ref()
+// 表单数据
+const formData = reactive<any>({
+  RoleName: '',
+  remark: ''
+})
+
+const formRules = reactive<any>({
+  RoleName: [{ required: true, message: '请输入', trigger: 'blur' }]
+  // remark: [{ required: true, message: '请输入', trigger: 'blur' }]
+})
+
+onMounted(() => {
+  setFormData(props.newData)
+})
+
+function deepCloneByJSON(obj: any) {
+  try {
+    return JSON.parse(JSON.stringify(obj))
+  } catch (error) {
+    console.error('深拷贝失败:', error)
+    return obj
+  }
+}
+
+const setFormData = (data: any) => {
+  if (data && Object.keys(data).length > 0) {
+    const data1 = deepCloneByJSON(data)
+    Object.assign(formData, data1)
+  }
+}
+
+const getForm = () => {
+  return formData
+}
+
+const submit = (): Promise<boolean> => {
+  return new Promise((resolve, reject) => {
+    formRef.value?.validate((valid: boolean) => {
+      if (valid) {
+        resolve(true)
+      } else {
+        ElMessage.error('请完善必填信息')
+        reject(false)
+      }
+    })
+  })
+}
+defineExpose({
+  submit,
+  getForm
+})
+</script>
+
+<style scoped lang="scss">
+.pre-registration-form {
+  width: 100%;
+  padding-right: 20px;
+  overflow: hidden;
+  overflow-y: auto;
+
+  &::-webkit-scrollbar {
+    width: 6px;
+  }
+
+  &::-webkit-scrollbar-track {
+    background: transparent;
+  }
+
+  &::-webkit-scrollbar-thumb {
+    background: rgba(0, 0, 0, 0.3);
+    border-radius: 3px;
+  }
+
+  &::-webkit-scrollbar-thumb:hover {
+    background: rgba(0, 0, 0, 0.5);
+  }
+}
+.section {
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+}
+</style>

src/views/calibration/roleManagement/index.vue

@@ -0,0 +1,308 @@
+<template>
+  <div class="app-container">
+    <!-- 搜索区域 -->
+    <!--    <div class="search-container">-->
+    <!--      <el-form ref="queryFormRef" :model="queryParams" :inline="true">-->
+    <!--        <el-form-item prop="unit" label="单位">-->
+    <!--          <el-input-->
+    <!--            v-model="queryParams.unit"-->
+    <!--            placeholder="请输入"-->
+    <!--            clearable-->
+    <!--            @keyup.enter="handleQuery"-->
+    <!--          />-->
+    <!--        </el-form-item>-->
+    <!--        <el-form-item label="创建时间" prop="times">-->
+    <!--          <el-date-picker-->
+    <!--            v-model="queryParams.times"-->
+    <!--            type="daterange"-->
+    <!--            value-format="YYYY-MM-DD"-->
+    <!--            placeholder="请选择创建时间"-->
+    <!--            range-separator="至"-->
+    <!--            start-placeholder="开始时间"-->
+    <!--            end-placeholder="结束时间"-->
+    <!--          />-->
+    <!--        </el-form-item>-->
+    <!--        <el-form-item class="search-buttons">-->
+    <!--          <el-button type="primary" icon="search" @click="handleQuery">搜索</el-button>-->
+    <!--          <el-button icon="refresh" @click="handleResetQuery">重置</el-button>-->
+    <!--        </el-form-item>-->
+    <!--      </el-form>-->
+    <!--    </div>-->
+    <el-card shadow="hover" class="data-table">
+      <div class="data-table__toolbar">
+        <div class="data-table__toolbar--actions">
+          <el-button type="success" icon="plus" @click="handleOpenDialog()">新增</el-button>
+          <el-button
+            type="danger"
+            :disabled="ids.length === 0"
+            icon="delete"
+            @click="handleDelete()"
+          >
+            删除
+          </el-button>
+        </div>
+      </div>
+      <el-table
+        ref="dataTableRef"
+        v-loading="loading"
+        :data="roleList"
+        highlight-current-row
+        border
+        class="data-table__content"
+        default-expand-all
+        row-key="id"
+        @selection-change="handleSelectionChange"
+      >
+        <!--        <el-table-column type="selection" width="55" align="center" />-->
+        <el-table-column label="角色名称" prop="RoleName" />
+        <el-table-column label="备注" prop="remark" />
+        <!--        <el-table-column label="时间" prop="times" />-->
+        <el-table-column fixed="right" label="操作" width="240">
+          <template #default="scope">
+            <el-button
+              type="primary"
+              size="small"
+              link
+              icon="edit"
+              @click="grantPermissions(scope.row?.id)"
+            >
+              赋予权限
+            </el-button>
+            <el-button
+              type="primary"
+              size="small"
+              link
+              icon="edit"
+              @click="handleOpenDialog(scope.row)"
+            >
+              编辑
+            </el-button>
+            <el-button
+              type="danger"
+              size="small"
+              link
+              icon="delete"
+              @click="onUserDeleteDepartment(scope.row.id)"
+            >
+              删除
+            </el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+
+      <pagination
+        v-if="total > 0"
+        v-model:total="total"
+        v-model:page="queryParams.pageNum"
+        v-model:limit="queryParams.pageSize"
+        @pagination="fetchData"
+      />
+    </el-card>
+  </div>
+</template>
+
+<script setup lang="ts">
+import RoleAPI, { RolePageVO } from '@/api/system/role-api'
+import { UserPersonneldisplay } from '@/api/calibration/personnelManagement'
+import { functionDialogBox } from '@/utils/functionDialogBox'
+import RoleForm from './components/RoleForm.vue'
+import GrantPermissionsForm from './components/GrantPermissionsForm.vue'
+import {
+  BusinessAddRole,
+  BusinessDeleteRole,
+  BusinessDisplayRole,
+  BusinessEditRole,
+  BusinessModifypermissions
+} from '@/api/calibration/roleManagement'
+
+defineOptions({
+  name: 'Role',
+  inheritAttrs: false
+})
+
+const queryFormRef = ref()
+
+const loading = ref(false)
+const ids = ref<number[]>([])
+const total = ref(0)
+const personinchargeList = ref<any[]>([])
+
+const queryParams = reactive<any>({
+  pageNum: 1,
+  pageSize: 10,
+  RoleName: ''
+})
+
+// 表格数据
+const roleList = ref<RolePageVO[]>()
+
+// 弹窗
+const dialog = reactive({
+  title: '',
+  visible: false
+})
+
+// 获取数据
+function fetchData() {
+  loading.value = true
+  BusinessDisplayRole({ RoleName: queryParams.RoleName })
+    .then((res: any) => {
+      roleList.value = res.data
+    })
+    .finally(() => {
+      loading.value = false
+    })
+}
+
+// 查询（重置页码后获取数据）
+function handleQuery() {
+  queryParams.pageNum = 1
+  fetchData()
+}
+
+// 重置查询
+function handleResetQuery() {
+  if (queryFormRef.value) queryFormRef.value.resetFields()
+  queryParams.pageNum = 1
+  fetchData()
+}
+
+// 行复选框选中
+function handleSelectionChange(selection: any) {
+  ids.value = selection.map((item: any) => item.id)
+}
+
+// 打开角色弹窗
+function handleOpenDialog(data?: any) {
+  dialog.visible = true
+  if (data?.id) {
+    functionDialogBox(
+      RoleForm,
+      {
+        newData: data
+      },
+      {
+        title: '编辑角色',
+        width: '900',
+        ok(value: any) {
+          handleSubmit({ ...value, id: data?.id })
+        }
+      }
+    )
+  } else {
+    functionDialogBox(
+      RoleForm,
+      {},
+      {
+        title: '新增角色',
+        width: '900',
+        ok(value: any) {
+          handleSubmit(value)
+        }
+      }
+    )
+  }
+}
+
+// 提交角色表单
+function handleSubmit(data: any) {
+  loading.value = true
+  const roleId = data.id
+  if (roleId) {
+    BusinessEditRole(data)
+      .then(() => {
+        ElMessage.success('修改成功')
+        handleResetQuery()
+      })
+      .finally(() => (loading.value = false))
+  } else {
+    BusinessAddRole(data)
+      .then(() => {
+        ElMessage.success('新增成功')
+        handleResetQuery()
+      })
+      .finally(() => (loading.value = false))
+  }
+}
+
+const grantPermissions = (id: string) => {
+  functionDialogBox(
+    GrantPermissionsForm,
+    {},
+    {
+      title: '权限分配',
+      width: '900',
+      ok(value: any) {
+        console.log(value)
+        onBusinessModifypermissions({ id, permissionId: value })
+      }
+    }
+  )
+}
+
+const onBusinessModifypermissions = (data: any) => {
+  BusinessModifypermissions(data).then(() => {
+    ElMessage.success('操作成功')
+  })
+}
+
+const onUserDeleteDepartment = (id: string) => {
+  ElMessageBox.confirm('确认删除已选中的数据项?', '警告', {
+    confirmButtonText: '确定',
+    cancelButtonText: '取消',
+    type: 'warning'
+  }).then(
+    () => {
+      loading.value = true
+      BusinessDeleteRole(id)
+        .then(() => {
+          ElMessage.success('删除成功')
+          handleResetQuery()
+        })
+        .finally(() => (loading.value = false))
+    },
+    () => {
+      ElMessage.info('已取消删除')
+    }
+  )
+}
+
+// 删除角色
+function handleDelete(roleId?: number) {
+  const roleIds = [roleId || ids.value].join(',')
+  if (!roleIds) {
+    ElMessage.warning('请勾选删除项')
+    return
+  }
+
+  ElMessageBox.confirm('确认删除已选中的数据项?', '警告', {
+    confirmButtonText: '确定',
+    cancelButtonText: '取消',
+    type: 'warning'
+  }).then(
+    () => {
+      loading.value = true
+      RoleAPI.deleteByIds(roleIds)
+        .then(() => {
+          ElMessage.success('删除成功')
+          handleResetQuery()
+        })
+        .finally(() => (loading.value = false))
+    },
+    () => {
+      ElMessage.info('已取消删除')
+    }
+  )
+}
+
+const DepartmentList = () => {
+  UserPersonneldisplay().then((res: any) => {
+    personinchargeList.value = res.data
+  })
+}
+
+onMounted(() => {
+  handleQuery()
+  DepartmentList()
+})
+</script>

vite.config.ts

@@ -47,7 +47,9 @@ export default defineConfig(({ mode }: ConfigEnv) => {
         '/dev-api/api2': {
           changeOrigin: true,
           // target: 'http://47.108.113.7:8000',
-          target: 'http://192.168.31.69:8006',
+          target: 'http://47.108.113.7:8000',
+          // target: 'http://192.168.31.69:8006',
+          // target: 'http://199.168.137.123:8000',
           rewrite: (path: string) => {
             return path.replace(/^\/dev-api\/api2/, '')
           }