feat<部门管理>:添加部门权限管理

src/views/system/dept/components/DeptUserCom/api.ts

@@ -65,3 +65,27 @@ export function getDeptInfoById(id: string, type: string) {
 		method: 'get',
 	});
 }
+
+export function getDeptUser(query:any) {
+	return request({
+		url: `/api/system/dept/role/`,
+		method: 'get',
+		params: query,
+	});
+}
+
+export function getRoleList(query:any) {
+	return request({
+		url: `/api/system/role/list/`,
+		method: 'get',
+		params: query,
+	});
+}
+
+export function createRole(data:any) {
+	return request({
+		url: '/api/system/dept/role/update/',
+		method: 'post',
+		data: data
+	})
+}

src/views/system/dept/components/DeptUserCom/component/deptDialog.vue

@@ -0,0 +1,115 @@
+<script lang="ts" setup>/**
+ * @Name: deptDialog.vue
+ * @Description: 部门权限管理-弹窗
+ * @Author: xinyan
+ */
+import { ref } from 'vue';
+import { ElMessage, FormInstance, FormRules } from 'element-plus';
+import { Close, Finished } from '@element-plus/icons-vue';
+import { createRole, getDeptUser, getRoleList } from '../api';
+
+
+const props = defineProps({
+  deptId: Object,
+  // deptInfo: Object
+});
+
+const { deptId } = props;
+const createOpen = defineModel({ default: false });
+const deptInfo = ref({});
+const usersOptions = ref([]);
+
+interface RuleForm {
+  dept_role: string[]; // 确保这里的类型匹配
+}
+
+const ruleFormRef = ref<FormInstance>();
+const ruleForm = reactive<RuleForm>({
+  // name: '',
+  dept_role: [],
+});
+
+const rules = reactive<FormRules<RuleForm>>({
+  dept_role: [
+    { required: true, message: '请选择部门角色', trigger: 'change' }
+  ]
+});
+
+async function getList() {
+  const res = await getDeptUser({ id: deptId });
+  deptInfo.value = res.data;
+  if (deptInfo.value.length > 0) {
+    ruleForm.dept_role = deptInfo.value[0].dept_role || []; // 赋值
+  }
+}
+
+async function fetchRoleList() {
+  try {
+    const resp = await getRoleList({ id: deptId });
+    usersOptions.value = resp.data.map((item: any) => {
+      return { value: item.id, label: item.name };
+    });
+  } catch (error) {
+    console.log(error);
+  }
+}
+
+const submitForm = async (formEl: FormInstance | undefined) => {
+  if (!formEl) return;
+  await formEl.validate(async (valid, fields) => {
+    if (valid) {
+      const body = {
+        deptId: deptId,
+        roleIdList: ruleForm.dept_role,
+      };
+      const res = await createRole(body);
+      if (res.code === 2000) {
+        ElMessage.success('更新成功');
+        createOpen.value = false;
+      }
+    } else {
+      // createOpen.value = false;
+      ElMessage.error('创建失败，请检查表单');
+    }
+  });
+};
+
+function cancelDialog() {
+  createOpen.value = false;
+}
+
+onMounted(() => {
+  getList();
+  fetchRoleList();
+});
+
+</script>
+
+<template>
+  <el-dialog ref="createDialog" v-model="createOpen" :close-on-click-modal="false" :close-on-press-escape="false"
+             :title="`部门权限`" style="width: 30%">
+    <el-form ref="ruleFormRef" :model="ruleForm" :rules="rules" class="mx-2.5 mt-5" label-width="auto" status-icon>
+      <el-form-item class="font-medium" label="部门名称:" prop="name">
+        <span>{{ deptInfo[0]?.name || '' }}</span>
+      </el-form-item>
+      <el-form-item class="font-medium" label="部门角色:" prop="dept_role">
+        <el-select v-model="ruleForm.dept_role" clearable multiple>
+          <el-option
+              v-for="item in usersOptions"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value"
+          />
+        </el-select>
+      </el-form-item>
+    </el-form>
+    <template #footer>
+      <el-button :icon="Close" @click="cancelDialog">取 消</el-button>
+      <el-button :icon="Finished" :loading="loading" type="primary" @click="submitForm(ruleFormRef)">确 定</el-button>
+    </template>
+  </el-dialog>
+</template>
+
+<style scoped>
+
+</style>

src/views/system/dept/components/DeptUserCom/index.vue

@@ -41,8 +41,10 @@
 		</template>
 		<template #actionbar-right>
 			<importExcel api="api/system/user/">导入 </importExcel>
+      <el-button class="ml-1"  type="primary" @click="openDeptPermission" :disabled="!currentDeptId">部门权限</el-button>
 		</template>
 	</fs-crud>
+  <DeptDialog v-if="createOpen" v-model="createOpen" :deptId="currentDeptId"></DeptDialog>
 </template>
 
 <script lang="ts" setup name="user">
@@ -54,6 +56,8 @@ import * as echarts from 'echarts';
 import { ECharts, EChartsOption, init } from 'echarts';
 import { getDeptInfoById } from './api';
 import { HeadDeptInfoType } from '../../types';
+import { FormInstance } from 'element-plus';
+import DeptDialog from '/@/views/system/dept/components/DeptUserCom/component/deptDialog.vue';
 
 let deptCountChart: ECharts;
 let deptSexChart: ECharts;
@@ -65,7 +69,10 @@ const crudBinding = ref();
 // 暴露的方法
 const { crudExpose } = useExpose({ crudRef, crudBinding });
 
-let currentDeptId = ref('');
+// const deptId = inject('deptId')
+const createOpen = ref(false);
+
+let currentDeptId = ref(1);
 let deptCountBar = ref();
 let deptSexPie = ref();
 let isShowChildFlag = ref(false);
@@ -185,6 +192,13 @@ const handleDoRefreshUser = (id: string) => {
 	getDeptInfo();
 };
 
+/**
+ * 部门管理权限弹窗
+ */
+const openDeptPermission = () => {
+  createOpen.value = true;
+};
+
 const handleSwitchChange = () => {
 	handleDoRefreshUser(currentDeptId.value);
 };