|
|
@@ -0,0 +1,499 @@
|
|
|
+<template>
|
|
|
+ <div class="p-2 page-container">
|
|
|
+ <div class="flex h-full">
|
|
|
+ <!-- 左侧学院树 -->
|
|
|
+ <div class="w-80 mr-4">
|
|
|
+ <el-card shadow="never" class="h-full">
|
|
|
+ <template #header>
|
|
|
+ <div class="flex items-center">
|
|
|
+ <span class="text-lg font-medium">二级学院</span>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ <el-tree
|
|
|
+ ref="collegeTreeRef"
|
|
|
+ :data="collegeTreeData"
|
|
|
+ :props="treeProps"
|
|
|
+ :current-node-key="currentNodeKey"
|
|
|
+ node-key="deptId"
|
|
|
+ highlight-current
|
|
|
+ @node-click="handleCollegeNodeClick"
|
|
|
+ class="college-tree"
|
|
|
+ >
|
|
|
+ <template #default="{ node, data }">
|
|
|
+ <div class="flex items-start py-1">
|
|
|
+ <span class="text-sm leading-6">{{ node.label }}</span>
|
|
|
+ <span class="text-xs text-gray-400 ml-2 leading-6">({{ data.deptCategory }})</span>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </el-tree>
|
|
|
+ </el-card>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- 右侧专业列表 -->
|
|
|
+ <div class="flex-1">
|
|
|
+ <transition :enter-active-class="proxy?.animate.searchAnimate.enter" :leave-active-class="proxy?.animate.searchAnimate.leave">
|
|
|
+ <div v-show="showSearch" class="mb-[10px]">
|
|
|
+ <el-card shadow="hover">
|
|
|
+ <el-form ref="queryFormRef" :model="queryParams" label-width="100px">
|
|
|
+ <el-row :gutter="20">
|
|
|
+ <el-col :span="8">
|
|
|
+ <el-form-item label="专业名称" prop="deptName">
|
|
|
+ <el-input v-model="queryParams.deptName" placeholder="请输入专业名称" clearable @keyup.enter="handleQuery" />
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="8">
|
|
|
+ <el-form-item label="部门类别" prop="deptCategory">
|
|
|
+ <el-input v-model="queryParams.deptCategory" placeholder="请输入部门类别" clearable @keyup.enter="handleQuery" />
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="8">
|
|
|
+ <el-form-item label="状态" prop="status">
|
|
|
+ <el-select v-model="queryParams.status" placeholder="请选择状态" clearable>
|
|
|
+ <el-option label="正常" :value="'0'" />
|
|
|
+ <el-option label="停用" :value="'1'" />
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ <el-row>
|
|
|
+ <el-col :span="24" class="search-btn-container">
|
|
|
+ <el-form-item>
|
|
|
+ <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
|
|
|
+ <el-button icon="Refresh" @click="resetQuery">重置</el-button>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ </el-form>
|
|
|
+ </el-card>
|
|
|
+ </div>
|
|
|
+ </transition>
|
|
|
+
|
|
|
+ <el-card shadow="never">
|
|
|
+ <template #header>
|
|
|
+ <el-row :gutter="10" class="mb8">
|
|
|
+ <el-col :span="1.5">
|
|
|
+ <el-button type="primary" plain icon="Plus" @click="handleAdd" v-hasPermi="['majormsg:major:add']">新增</el-button>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="1.5">
|
|
|
+ <el-button type="success" plain icon="Edit" :disabled="single" @click="handleUpdate()" v-hasPermi="['majormsg:major:edit']"
|
|
|
+ >修改</el-button
|
|
|
+ >
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="1.5">
|
|
|
+ <el-button type="danger" plain icon="Delete" :disabled="multiple" @click="handleDelete()" v-hasPermi="['majormsg:major:remove']"
|
|
|
+ >删除</el-button
|
|
|
+ >
|
|
|
+ </el-col>
|
|
|
+ <right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
|
|
|
+ </el-row>
|
|
|
+ </template>
|
|
|
+
|
|
|
+ <div class="table-wrapper">
|
|
|
+ <el-table v-loading="loading" border :data="majorList" @selection-change="handleSelectionChange" style="min-width: 900px; width: auto">
|
|
|
+ <el-table-column type="selection" width="55" align="center" />
|
|
|
+ <el-table-column label="部门ID" align="center" prop="deptId" :min-width="120" />
|
|
|
+ <el-table-column label="专业名称" align="center" prop="deptName" :min-width="220" />
|
|
|
+ <el-table-column label="部门类别" align="center" prop="deptCategory" :min-width="150" />
|
|
|
+ <el-table-column label="所属学院" align="center" prop="parentName" :min-width="180" />
|
|
|
+ <el-table-column label="显示顺序" align="center" prop="orderNum" :min-width="100" />
|
|
|
+ <el-table-column label="状态" align="center" prop="status" :min-width="100">
|
|
|
+ <template #default="scope">
|
|
|
+ <el-tag :type="scope.row.status === '0' ? 'success' : 'danger'">
|
|
|
+ {{ scope.row.status === '0' ? '正常' : '停用' }}
|
|
|
+ </el-tag>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="255" fixed="right">
|
|
|
+ <template #default="scope">
|
|
|
+ <el-tooltip content="修改" placement="top">
|
|
|
+ <el-button
|
|
|
+ link
|
|
|
+ type="primary"
|
|
|
+ plain
|
|
|
+ icon="Edit"
|
|
|
+ @click="handleUpdate(scope.row)"
|
|
|
+ v-hasPermi="['majormsg:major:edit']"
|
|
|
+ ></el-button>
|
|
|
+ </el-tooltip>
|
|
|
+ <el-tooltip content="删除" placement="top">
|
|
|
+ <el-button
|
|
|
+ link
|
|
|
+ type="danger"
|
|
|
+ plain
|
|
|
+ icon="Delete"
|
|
|
+ @click="handleDelete(scope.row)"
|
|
|
+ v-hasPermi="['majormsg:major:remove']"
|
|
|
+ ></el-button>
|
|
|
+ </el-tooltip>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ </el-table>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <pagination
|
|
|
+ v-show="total > 0"
|
|
|
+ :total="total"
|
|
|
+ v-model:page="queryParams.pageNum"
|
|
|
+ v-model:limit="queryParams.pageSize"
|
|
|
+ @pagination="getList"
|
|
|
+ />
|
|
|
+ </el-card>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- 添加或修改专业对话框 -->
|
|
|
+ <el-dialog :title="dialog.title" v-model="dialog.visible" width="500px" append-to-body>
|
|
|
+ <el-form ref="majorFormRef" :model="form" :rules="rules" label-width="100px">
|
|
|
+ <el-form-item label="所属学院" prop="parentId">
|
|
|
+ <el-select v-model="form.parentId" placeholder="请选择所属学院" style="width: 100%" @change="handleCollegeChange">
|
|
|
+ <el-option v-for="item in collegeOptions" :key="item.deptId" :label="item.deptName" :value="item.deptId" />
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="专业名称" prop="deptName">
|
|
|
+ <el-input v-model="form.deptName" placeholder="请输入专业名称" />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="部门类别" prop="deptCategory">
|
|
|
+ <el-input v-model="form.deptCategory" placeholder="请输入部门类别编码(zy-开头)" />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="显示顺序" prop="orderNum">
|
|
|
+ <el-input-number v-model="form.orderNum" :min="0" :max="999" controls-position="right" placeholder="请输入显示顺序" />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="状态" prop="status">
|
|
|
+ <el-select v-model="form.status" placeholder="请选择状态" style="width: 100%">
|
|
|
+ <el-option label="正常" :value="'0'" />
|
|
|
+ <el-option label="停用" :value="'1'" />
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+ <template #footer>
|
|
|
+ <div class="dialog-footer">
|
|
|
+ <el-button :loading="buttonLoading" type="primary" @click="submitForm">确 定</el-button>
|
|
|
+ <el-button @click="cancel">取 消</el-button>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </el-dialog>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script setup name="MajorMsg" lang="ts">
|
|
|
+import { listMajor, getMajor, delMajor, addMajor, updateMajor, getCollegeTree } from '@/api/xg/xsjcxx/classmsg/majormsg';
|
|
|
+import { MajorVO, MajorQuery, MajorForm, CollegeTreeNode } from '@/api/xg/xsjcxx/classmsg/majormsg/types';
|
|
|
+import { ComponentInternalInstance, ref, reactive, toRefs, onMounted, getCurrentInstance } from 'vue';
|
|
|
+import type { FormInstance as ElFormInstance } from 'element-plus';
|
|
|
+import type { ElTree } from 'element-plus';
|
|
|
+
|
|
|
+interface DialogOption {
|
|
|
+ visible: boolean;
|
|
|
+ title: string;
|
|
|
+}
|
|
|
+
|
|
|
+interface PageData<T, Q> {
|
|
|
+ form: T;
|
|
|
+ queryParams: Q;
|
|
|
+ rules: Record<string, any[]>;
|
|
|
+}
|
|
|
+
|
|
|
+const { proxy } = getCurrentInstance() as ComponentInternalInstance;
|
|
|
+
|
|
|
+const majorList = ref<MajorVO[]>([]);
|
|
|
+const buttonLoading = ref(false);
|
|
|
+const loading = ref(false);
|
|
|
+const showSearch = ref(true);
|
|
|
+const ids = ref<Array<string | number>>([]);
|
|
|
+const single = ref(true);
|
|
|
+const multiple = ref(true);
|
|
|
+const total = ref(0);
|
|
|
+const collegeTreeData = ref<CollegeTreeNode[]>([]);
|
|
|
+const collegeOptions = ref<MajorVO[]>([]);
|
|
|
+const selectedCollegeId = ref<number | string>('');
|
|
|
+const currentNodeKey = ref<number | string | null>(null);
|
|
|
+
|
|
|
+const queryFormRef = ref<ElFormInstance>();
|
|
|
+const majorFormRef = ref<ElFormInstance>();
|
|
|
+const collegeTreeRef = ref<InstanceType<typeof ElTree>>();
|
|
|
+
|
|
|
+const treeProps = {
|
|
|
+ children: 'children',
|
|
|
+ label: 'deptName'
|
|
|
+};
|
|
|
+
|
|
|
+const dialog = reactive<DialogOption>({
|
|
|
+ visible: false,
|
|
|
+ title: ''
|
|
|
+});
|
|
|
+
|
|
|
+const initFormData: MajorForm = {
|
|
|
+ deptId: undefined,
|
|
|
+ parentId: undefined,
|
|
|
+ deptName: undefined,
|
|
|
+ deptCategory: 'zy-',
|
|
|
+ orderNum: 0,
|
|
|
+ status: '0',
|
|
|
+ delFlag: undefined,
|
|
|
+ ancestors: undefined
|
|
|
+};
|
|
|
+
|
|
|
+const data = reactive<PageData<MajorForm, MajorQuery>>({
|
|
|
+ form: { ...initFormData },
|
|
|
+ queryParams: {
|
|
|
+ pageNum: 1,
|
|
|
+ pageSize: 10,
|
|
|
+ deptName: undefined,
|
|
|
+ deptCategory: undefined,
|
|
|
+ deptCategoryLike: 'zy-',
|
|
|
+ parentId: undefined,
|
|
|
+ status: undefined,
|
|
|
+ params: {}
|
|
|
+ },
|
|
|
+ rules: {
|
|
|
+ parentId: [{ required: true, message: '所属学院不能为空', trigger: 'change' }],
|
|
|
+ deptName: [{ required: true, message: '专业名称不能为空', trigger: 'blur' }],
|
|
|
+ deptCategory: [{ required: true, message: '部门类别不能为空', trigger: 'blur' }],
|
|
|
+ orderNum: [{ required: true, message: '显示顺序不能为空', trigger: 'change' }],
|
|
|
+ status: [{ required: true, message: '状态不能为空', trigger: 'change' }]
|
|
|
+ }
|
|
|
+});
|
|
|
+
|
|
|
+const { queryParams, form, rules } = toRefs(data);
|
|
|
+
|
|
|
+/** 查询专业列表 */
|
|
|
+const getList = async () => {
|
|
|
+ // 确保学院数据已加载
|
|
|
+ if (collegeOptions.value.length === 0) {
|
|
|
+ await getCollegeList();
|
|
|
+ }
|
|
|
+
|
|
|
+ loading.value = true;
|
|
|
+ const res: any = await listMajor(queryParams.value);
|
|
|
+
|
|
|
+ // 处理后端返回的数据:由于后端接口不支持分页,返回所有数据,需要前端实现分页
|
|
|
+ let allMajors = (res && (res.rows || res.data)) || [];
|
|
|
+ const totalCount = allMajors.length;
|
|
|
+
|
|
|
+ // 为每个专业设置所属学院名称
|
|
|
+ allMajors = allMajors.map((major: MajorVO) => {
|
|
|
+ const college = collegeOptions.value.find((college) => college.deptId === major.parentId);
|
|
|
+ return {
|
|
|
+ ...major,
|
|
|
+ parentName: college ? college.deptName : ''
|
|
|
+ };
|
|
|
+ });
|
|
|
+
|
|
|
+ // 前端分页:计算当前页的数据
|
|
|
+ const { pageNum, pageSize } = queryParams.value;
|
|
|
+ const startIndex = (pageNum - 1) * pageSize;
|
|
|
+ const endIndex = startIndex + pageSize;
|
|
|
+ const pageMajors = allMajors.slice(startIndex, endIndex);
|
|
|
+
|
|
|
+ majorList.value = pageMajors;
|
|
|
+ total.value = totalCount;
|
|
|
+ loading.value = false;
|
|
|
+};
|
|
|
+
|
|
|
+/** 获取学院树形结构 */
|
|
|
+const getCollegeList = async () => {
|
|
|
+ const res = await getCollegeTree();
|
|
|
+ collegeTreeData.value = res.data || [];
|
|
|
+ collegeOptions.value = res.data || [];
|
|
|
+};
|
|
|
+
|
|
|
+/** 学院树节点点击事件 */
|
|
|
+const handleCollegeNodeClick = (data: CollegeTreeNode) => {
|
|
|
+ selectedCollegeId.value = data.deptId as string;
|
|
|
+ currentNodeKey.value = data.deptId as string;
|
|
|
+ queryParams.value.parentId = data.deptId as number;
|
|
|
+ getList();
|
|
|
+};
|
|
|
+
|
|
|
+/** 学院选择框变化事件 */
|
|
|
+const handleCollegeChange = (value: number) => {
|
|
|
+ if (value) {
|
|
|
+ const college = collegeOptions.value.find((item) => item.deptId === value);
|
|
|
+ if (college) {
|
|
|
+ form.value.parentName = college.deptName;
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ form.value.parentName = undefined;
|
|
|
+ }
|
|
|
+};
|
|
|
+
|
|
|
+/** 取消按钮 */
|
|
|
+const cancel = () => {
|
|
|
+ reset();
|
|
|
+ dialog.visible = false;
|
|
|
+};
|
|
|
+
|
|
|
+/** 表单重置 */
|
|
|
+const reset = () => {
|
|
|
+ form.value = { ...initFormData };
|
|
|
+ majorFormRef.value?.resetFields();
|
|
|
+};
|
|
|
+
|
|
|
+/** 搜索按钮操作 */
|
|
|
+const handleQuery = () => {
|
|
|
+ queryParams.value.pageNum = 1;
|
|
|
+ getList();
|
|
|
+};
|
|
|
+
|
|
|
+/** 重置按钮操作 */
|
|
|
+const resetQuery = () => {
|
|
|
+ queryFormRef.value?.resetFields();
|
|
|
+ // 只重置搜索条件,保持选中的学院不变
|
|
|
+ queryParams.value.deptName = undefined;
|
|
|
+ queryParams.value.deptCategory = undefined;
|
|
|
+ queryParams.value.pageNum = 1;
|
|
|
+ // 重置后重新查询当前选中的学院
|
|
|
+ getList();
|
|
|
+};
|
|
|
+
|
|
|
+/** 多选框选中数据 */
|
|
|
+const handleSelectionChange = (selection: MajorVO[]) => {
|
|
|
+ ids.value = selection.map((item) => item.deptId);
|
|
|
+ single.value = selection.length != 1;
|
|
|
+ multiple.value = !selection.length;
|
|
|
+};
|
|
|
+
|
|
|
+/** 新增按钮操作 */
|
|
|
+const handleAdd = () => {
|
|
|
+ if (!selectedCollegeId.value) {
|
|
|
+ proxy?.$modal.msgWarning('请先选择左侧的二级学院');
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ reset();
|
|
|
+ form.value.parentId = selectedCollegeId.value;
|
|
|
+ dialog.visible = true;
|
|
|
+ dialog.title = '添加专业';
|
|
|
+};
|
|
|
+
|
|
|
+/** 修改按钮操作 */
|
|
|
+const handleUpdate = async (row?: MajorVO) => {
|
|
|
+ reset();
|
|
|
+ const _deptId = row?.deptId || ids.value[0];
|
|
|
+ const res = await getMajor(_deptId);
|
|
|
+ Object.assign(form.value, res.data);
|
|
|
+ dialog.visible = true;
|
|
|
+ dialog.title = '修改专业';
|
|
|
+};
|
|
|
+
|
|
|
+/** 提交按钮 */
|
|
|
+const submitForm = () => {
|
|
|
+ majorFormRef.value?.validate(async (valid: boolean) => {
|
|
|
+ if (valid) {
|
|
|
+ buttonLoading.value = true;
|
|
|
+ if (form.value.deptId) {
|
|
|
+ await updateMajor(form.value).finally(() => (buttonLoading.value = false));
|
|
|
+ } else {
|
|
|
+ await addMajor(form.value).finally(() => (buttonLoading.value = false));
|
|
|
+ }
|
|
|
+ proxy?.$modal.msgSuccess('操作成功');
|
|
|
+ dialog.visible = false;
|
|
|
+ await getList();
|
|
|
+ }
|
|
|
+ });
|
|
|
+};
|
|
|
+
|
|
|
+/** 删除按钮操作 */
|
|
|
+const handleDelete = async (row?: MajorVO) => {
|
|
|
+ const _deptIds = row?.deptId || ids.value;
|
|
|
+
|
|
|
+ // 获取要删除的专业名称
|
|
|
+ let deptNames = '';
|
|
|
+ if (row) {
|
|
|
+ // 单个删除时直接使用行数据中的专业名称
|
|
|
+ deptNames = row.deptName;
|
|
|
+ } else {
|
|
|
+ // 批量删除时,根据ids查找对应的专业名称并拼接
|
|
|
+ deptNames = majorList.value
|
|
|
+ .filter((item) => ids.value.includes(item.deptId))
|
|
|
+ .map((item) => item.deptName)
|
|
|
+ .join('、');
|
|
|
+ }
|
|
|
+
|
|
|
+ await proxy?.$modal.confirm('是否确认删除专业"' + deptNames + '"?').finally(() => (loading.value = false));
|
|
|
+ await delMajor(_deptIds);
|
|
|
+ proxy?.$modal.msgSuccess('删除成功');
|
|
|
+ await getList();
|
|
|
+};
|
|
|
+
|
|
|
+onMounted(() => {
|
|
|
+ getCollegeList();
|
|
|
+ // 页面初始化时不加载专业数据,等待用户选择学院
|
|
|
+});
|
|
|
+</script>
|
|
|
+
|
|
|
+<style scoped>
|
|
|
+/* 页面容器样式 */
|
|
|
+.page-container {
|
|
|
+ padding: 8px;
|
|
|
+ height: calc(100vh - 120px);
|
|
|
+}
|
|
|
+
|
|
|
+/* 搜索按钮容器样式 */
|
|
|
+.search-btn-container {
|
|
|
+ display: flex;
|
|
|
+ justify-content: flex-end;
|
|
|
+ margin-top: 10px;
|
|
|
+}
|
|
|
+
|
|
|
+.search-btn-container .el-form-item {
|
|
|
+ margin-bottom: 0 !important;
|
|
|
+}
|
|
|
+
|
|
|
+/* 学院树样式 */
|
|
|
+.college-tree {
|
|
|
+ height: calc(100vh - 200px);
|
|
|
+ overflow-y: auto;
|
|
|
+}
|
|
|
+
|
|
|
+:deep(.el-tree-node__content) {
|
|
|
+ height: 40px;
|
|
|
+ padding: 0 8px;
|
|
|
+}
|
|
|
+
|
|
|
+:deep(.el-tree-node__label) {
|
|
|
+ font-size: 14px;
|
|
|
+}
|
|
|
+
|
|
|
+/* 表格布局修复:固定表格布局并允许横向滚动,避免无数据时列宽异常扩展 */
|
|
|
+.table-wrapper {
|
|
|
+ overflow-x: auto;
|
|
|
+}
|
|
|
+/* 防止空数据时 el-table 的空白块被拉伸过宽 */
|
|
|
+.table-wrapper :deep(.el-table__empty-block) {
|
|
|
+ min-width: 0 !important;
|
|
|
+ width: auto !important;
|
|
|
+ max-width: 100% !important;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+}
|
|
|
+.table-wrapper :deep(.el-table) {
|
|
|
+ width: auto !important;
|
|
|
+}
|
|
|
+/* 使用固定布局防止列在空数据时被浏览器不稳定拉伸 */
|
|
|
+.table-wrapper :deep(.el-table) {
|
|
|
+ table-layout: fixed !important;
|
|
|
+ width: 100% !important;
|
|
|
+}
|
|
|
+.table-wrapper :deep(.el-table__body-wrapper) {
|
|
|
+ overflow-x: auto;
|
|
|
+}
|
|
|
+</style>
|
|
|
+
|
|
|
+<style scoped>
|
|
|
+/* 选中节点样式:加深背景并突出文字(覆盖 element-plus 默认) */
|
|
|
+::deep(.el-tree-node__content.is-current) {
|
|
|
+ background-color: #409eff !important;
|
|
|
+ border-left: 4px solid #2b7cd1 !important;
|
|
|
+ border-radius: 4px 0 0 4px;
|
|
|
+ box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1);
|
|
|
+}
|
|
|
+
|
|
|
+/* 覆盖Element Plus默认的浅色选中样式 */
|
|
|
+::deep(.el-tree--highlight-current .el-tree-node.is-current > .el-tree-node__content) {
|
|
|
+ background-color: #409eff !important;
|
|
|
+}
|
|
|
+::deep(.el-tree-node__content.is-current .el-tree-node__label) {
|
|
|
+ color: #409eff;
|
|
|
+ font-weight: 600;
|
|
|
+}
|
|
|
+</style>
|