|
|
@@ -17,24 +17,11 @@
|
|
|
</el-col>
|
|
|
<el-col :span="6">
|
|
|
<el-form-item label="所属校区" prop="campusId">
|
|
|
- <el-select v-model="queryParams.campusId" placeholder="请选择所属校区" clearable @change="handleCampusChange">
|
|
|
+ <el-select v-model="queryParams.campusId" placeholder="请选择所属校区" clearable>
|
|
|
<el-option v-for="item in campusList" :key="item.id" :label="item.campusName" :value="item.id" />
|
|
|
</el-select>
|
|
|
</el-form-item>
|
|
|
</el-col>
|
|
|
- <el-col :span="6">
|
|
|
- <el-form-item label="所属宿舍区" prop="areaId">
|
|
|
- <el-tree-select
|
|
|
- v-model="queryParams.areaId"
|
|
|
- :data="areaTreeData"
|
|
|
- :props="{ label: 'areaName', value: 'id' }"
|
|
|
- placeholder="请选择所属宿舍区"
|
|
|
- clearable
|
|
|
- />
|
|
|
- </el-form-item>
|
|
|
- </el-col>
|
|
|
- </el-row>
|
|
|
- <el-row :gutter="20">
|
|
|
<el-col :span="6">
|
|
|
<el-form-item label="宿舍楼类型" prop="buildingType">
|
|
|
<el-select v-model="queryParams.buildingType" placeholder="请选择宿舍楼类型" clearable>
|
|
|
@@ -72,9 +59,6 @@
|
|
|
>删除</el-button
|
|
|
>
|
|
|
</el-col>
|
|
|
- <!-- <el-col :span="1.5">
|
|
|
- <el-button type="warning" plain icon="Download" @click="handleExport" v-hasPermi="['sslxx:dormBuilding:export']">导出</el-button>
|
|
|
- </el-col> -->
|
|
|
<right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
|
|
|
</el-row>
|
|
|
</template>
|
|
|
@@ -85,7 +69,6 @@
|
|
|
<el-table-column label="宿舍楼编码" align="center" prop="buildingCode" />
|
|
|
<el-table-column label="宿舍楼名称" align="center" prop="buildingName" />
|
|
|
<el-table-column label="所属校区" align="center" prop="campusName" />
|
|
|
- <el-table-column label="所属宿舍区" align="center" prop="areaName" />
|
|
|
<el-table-column label="总楼层数" align="center" prop="floors" />
|
|
|
<el-table-column label="宿舍楼类型" align="center" prop="buildingType">
|
|
|
<template #default="scope">
|
|
|
@@ -112,19 +95,10 @@
|
|
|
<el-dialog :title="dialog.title" v-model="dialog.visible" width="500px" append-to-body>
|
|
|
<el-form ref="dormBuildingFormRef" :model="form" :rules="rules" label-width="120px">
|
|
|
<el-form-item label="所属校区" prop="campusId">
|
|
|
- <el-select v-model="form.campusId" placeholder="请选择所属校区" clearable @change="handleFormCampusChange">
|
|
|
+ <el-select v-model="form.campusId" placeholder="请选择所属校区" clearable>
|
|
|
<el-option v-for="item in campusList" :key="item.id" :label="item.campusName" :value="item.id" />
|
|
|
</el-select>
|
|
|
</el-form-item>
|
|
|
- <el-form-item label="所属宿舍区" prop="areaId">
|
|
|
- <el-tree-select
|
|
|
- v-model="form.areaId"
|
|
|
- :data="formAreaTreeData"
|
|
|
- :props="{ label: 'areaName', value: 'id' }"
|
|
|
- placeholder="请选择所属宿舍区"
|
|
|
- clearable
|
|
|
- />
|
|
|
- </el-form-item>
|
|
|
<el-form-item label="宿舍楼编码" prop="buildingCode">
|
|
|
<el-input v-model="form.buildingCode" placeholder="请输入宿舍楼编码" />
|
|
|
</el-form-item>
|
|
|
@@ -171,13 +145,12 @@ import {
|
|
|
delDormBuilding,
|
|
|
addDormBuilding,
|
|
|
updateDormBuilding,
|
|
|
- listCampusOptions,
|
|
|
- listAreaTreeData
|
|
|
+ listCampusOptions
|
|
|
} from '@/api/xg/xgss/sslxx/dormBuilding';
|
|
|
import { DormBuildingVO, DormBuildingQuery, DormBuildingForm } from '@/api/xg/xgss/sslxx/dormBuilding/types';
|
|
|
import { DormCampusVO } from '@/api/xg/xgss/xqxx/dormCampus/types';
|
|
|
-import { DormAreaVO } from '@/api/xg/xgss/ssqxx/dormArea/types';
|
|
|
import { getCurrentInstance, ComponentInternalInstance, ref, reactive, toRefs, onMounted } from 'vue';
|
|
|
+import { ElForm, ElMessageBox, ElMessage } from 'element-plus';
|
|
|
|
|
|
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
|
|
|
const { dorm_type } = toRefs<any>(proxy?.useDict('dorm_type'));
|
|
|
@@ -191,11 +164,9 @@ const single = ref(true);
|
|
|
const multiple = ref(true);
|
|
|
const total = ref(0);
|
|
|
const campusList = ref<DormCampusVO[]>([]); // 校区列表
|
|
|
-const areaTreeData = ref<any[]>([]); // 宿舍区树形数据
|
|
|
-const formAreaTreeData = ref<any[]>([]); // 表单宿舍区树形数据
|
|
|
|
|
|
-const queryFormRef = ref<ElFormInstance>();
|
|
|
-const dormBuildingFormRef = ref<ElFormInstance>();
|
|
|
+const queryFormRef = ref<InstanceType<typeof ElForm>>();
|
|
|
+const dormBuildingFormRef = ref<InstanceType<typeof ElForm>>();
|
|
|
|
|
|
const dialog = reactive<DialogOption>({
|
|
|
visible: false,
|
|
|
@@ -206,7 +177,6 @@ const initFormData: DormBuildingForm = {
|
|
|
id: undefined,
|
|
|
buildingCode: undefined,
|
|
|
buildingName: undefined,
|
|
|
- areaId: undefined,
|
|
|
campusId: undefined,
|
|
|
buildingType: undefined,
|
|
|
buildingDescription: undefined,
|
|
|
@@ -220,7 +190,6 @@ const data = reactive<PageData<DormBuildingForm, DormBuildingQuery>>({
|
|
|
pageSize: 10,
|
|
|
buildingCode: undefined,
|
|
|
buildingName: undefined,
|
|
|
- areaId: undefined,
|
|
|
campusId: undefined,
|
|
|
buildingType: undefined,
|
|
|
sortOrder: undefined,
|
|
|
@@ -230,7 +199,6 @@ const data = reactive<PageData<DormBuildingForm, DormBuildingQuery>>({
|
|
|
id: [{ required: true, message: '主键ID不能为空', trigger: 'blur' }],
|
|
|
buildingCode: [{ required: true, message: '宿舍楼编码不能为空', trigger: 'blur' }],
|
|
|
buildingName: [{ required: true, message: '宿舍楼名称不能为空', trigger: 'blur' }],
|
|
|
- areaId: [{ required: true, message: '所属宿舍区ID不能为空', trigger: 'blur' }],
|
|
|
campusId: [{ required: true, message: '所属校区ID不能为空', trigger: 'blur' }]
|
|
|
}
|
|
|
});
|
|
|
@@ -252,102 +220,6 @@ const loadCampusOptions = async () => {
|
|
|
campusList.value = res.rows || [];
|
|
|
};
|
|
|
|
|
|
-/** 加载宿舍区树形数据 */
|
|
|
-const loadAreaTreeData = async (campusId?: string | number) => {
|
|
|
- const res = await listAreaTreeData(campusId);
|
|
|
- if (campusId) {
|
|
|
- // 如果指定了校区ID,只展示该校区的宿舍区
|
|
|
- areaTreeData.value = res.rows || [];
|
|
|
- formAreaTreeData.value = res.rows || []; // 同时更新表单树形数据
|
|
|
- } else {
|
|
|
- // 如果没有指定校区ID,按照校区分组展示宿舍区
|
|
|
- const campusMap = new Map();
|
|
|
-
|
|
|
- // 先将校区列表转为Map
|
|
|
- campusList.value.forEach((campus) => {
|
|
|
- campusMap.set(campus.id, {
|
|
|
- id: campus.id,
|
|
|
- areaName: campus.campusName,
|
|
|
- children: []
|
|
|
- });
|
|
|
- });
|
|
|
-
|
|
|
- // 将宿舍区按校区分组
|
|
|
- const areas = res.rows || [];
|
|
|
- areas.forEach((area: DormAreaVO) => {
|
|
|
- if (campusMap.has(area.campusId)) {
|
|
|
- campusMap.get(area.campusId).children.push({
|
|
|
- id: area.id,
|
|
|
- areaName: area.areaName
|
|
|
- });
|
|
|
- }
|
|
|
- });
|
|
|
-
|
|
|
- // 转换为树形结构
|
|
|
- areaTreeData.value = Array.from(campusMap.values());
|
|
|
- formAreaTreeData.value = Array.from(campusMap.values());
|
|
|
- }
|
|
|
-};
|
|
|
-
|
|
|
-/** 校区选择变化处理函数 */
|
|
|
-const handleCampusChange = (value: string | number) => {
|
|
|
- queryParams.value.areaId = undefined; // 清空已选择的宿舍区
|
|
|
- loadAreaTreeData(value);
|
|
|
-};
|
|
|
-
|
|
|
-/** 表单校区选择变化处理函数 */
|
|
|
-const handleFormCampusChange = (value: string | number) => {
|
|
|
- form.value.areaId = undefined; // 清空已选择的宿舍区
|
|
|
- loadFormAreaTreeData(value);
|
|
|
-};
|
|
|
-
|
|
|
-/** 加载表单宿舍区树形数据 */
|
|
|
-const loadFormAreaTreeData = async (campusId?: string | number) => {
|
|
|
- const res = await listAreaTreeData(campusId);
|
|
|
- if (campusId) {
|
|
|
- // 如果指定了校区ID,只展示该校区的宿舍区
|
|
|
- formAreaTreeData.value = res.rows || [];
|
|
|
- } else {
|
|
|
- // 如果没有指定校区ID,按照校区分组展示宿舍区
|
|
|
- const campusMap = new Map();
|
|
|
-
|
|
|
- // 先将校区列表转为Map
|
|
|
- campusList.value.forEach((campus) => {
|
|
|
- campusMap.set(campus.id, {
|
|
|
- id: campus.id,
|
|
|
- areaName: campus.campusName,
|
|
|
- children: []
|
|
|
- });
|
|
|
- });
|
|
|
-
|
|
|
- // 将宿舍区按校区分组
|
|
|
- const areas = res.rows || [];
|
|
|
- areas.forEach((area: DormAreaVO) => {
|
|
|
- if (campusMap.has(area.campusId)) {
|
|
|
- campusMap.get(area.campusId).children.push({
|
|
|
- id: area.id,
|
|
|
- areaName: area.areaName
|
|
|
- });
|
|
|
- }
|
|
|
- });
|
|
|
-
|
|
|
- // 转换为树形结构
|
|
|
- formAreaTreeData.value = Array.from(campusMap.values());
|
|
|
- }
|
|
|
-};
|
|
|
-
|
|
|
-/** 取消按钮 */
|
|
|
-const cancel = () => {
|
|
|
- reset();
|
|
|
- dialog.visible = false;
|
|
|
-};
|
|
|
-
|
|
|
-/** 表单重置 */
|
|
|
-const reset = () => {
|
|
|
- form.value = { ...initFormData };
|
|
|
- dormBuildingFormRef.value?.resetFields();
|
|
|
-};
|
|
|
-
|
|
|
/** 搜索按钮操作 */
|
|
|
const handleQuery = () => {
|
|
|
queryParams.value.pageNum = 1;
|
|
|
@@ -363,7 +235,7 @@ const resetQuery = () => {
|
|
|
/** 多选框选中数据 */
|
|
|
const handleSelectionChange = (selection: DormBuildingVO[]) => {
|
|
|
ids.value = selection.map((item) => item.id);
|
|
|
- single.value = selection.length != 1;
|
|
|
+ single.value = selection.length !== 1;
|
|
|
multiple.value = !selection.length;
|
|
|
};
|
|
|
|
|
|
@@ -380,10 +252,6 @@ const handleUpdate = async (row?: DormBuildingVO) => {
|
|
|
const _id = row?.id || ids.value[0];
|
|
|
const res = await getDormBuilding(_id);
|
|
|
Object.assign(form.value, res.data);
|
|
|
- // 加载表单中的宿舍区数据
|
|
|
- if (form.value.campusId) {
|
|
|
- loadFormAreaTreeData(form.value.campusId);
|
|
|
- }
|
|
|
dialog.visible = true;
|
|
|
dialog.title = '修改宿舍楼信息';
|
|
|
};
|
|
|
@@ -394,13 +262,22 @@ const submitForm = () => {
|
|
|
if (valid) {
|
|
|
buttonLoading.value = true;
|
|
|
if (form.value.id) {
|
|
|
- await updateDormBuilding(form.value).finally(() => (buttonLoading.value = false));
|
|
|
+ await updateDormBuilding(form.value)
|
|
|
+ .then(() => {
|
|
|
+ ElMessage.success('修改成功');
|
|
|
+ dialog.visible = false;
|
|
|
+ getList();
|
|
|
+ })
|
|
|
+ .finally(() => (buttonLoading.value = false));
|
|
|
} else {
|
|
|
- await addDormBuilding(form.value).finally(() => (buttonLoading.value = false));
|
|
|
+ await addDormBuilding(form.value)
|
|
|
+ .then(() => {
|
|
|
+ ElMessage.success('新增成功');
|
|
|
+ dialog.visible = false;
|
|
|
+ getList();
|
|
|
+ })
|
|
|
+ .finally(() => (buttonLoading.value = false));
|
|
|
}
|
|
|
- proxy?.$modal.msgSuccess('操作成功');
|
|
|
- dialog.visible = false;
|
|
|
- await getList();
|
|
|
}
|
|
|
});
|
|
|
};
|
|
|
@@ -408,148 +285,48 @@ const submitForm = () => {
|
|
|
/** 删除按钮操作 */
|
|
|
const handleDelete = async (row?: DormBuildingVO) => {
|
|
|
const _ids = row?.id || ids.value;
|
|
|
+ await ElMessageBox.confirm('是否确认删除宿舍楼信息编号为"' + _ids + '"的数据项?')
|
|
|
+ .then(() => {
|
|
|
+ loading.value = true;
|
|
|
+ return delDormBuilding(_ids);
|
|
|
+ })
|
|
|
+ .then(() => {
|
|
|
+ loading.value = false;
|
|
|
+ getList();
|
|
|
+ ElMessage.success('删除成功');
|
|
|
+ })
|
|
|
+ .catch(() => {
|
|
|
+ loading.value = false;
|
|
|
+ });
|
|
|
+};
|
|
|
|
|
|
- let confirmMsg = '';
|
|
|
- if (row) {
|
|
|
- confirmMsg = `是否确认删除宿舍楼信息编号为"${row?.buildingName}"的数据项?`;
|
|
|
- } else if (Array.isArray(ids.value) && ids.value.length > 1) {
|
|
|
- confirmMsg = `是否确认删除选中的${ids.value.length}个宿舍楼信息?`;
|
|
|
- } else {
|
|
|
- confirmMsg = '是否确认删除选中的宿舍楼信息?';
|
|
|
- }
|
|
|
- await proxy?.$modal.confirm(confirmMsg).finally(() => (loading.value = false));
|
|
|
-
|
|
|
- await delDormBuilding(_ids);
|
|
|
- proxy?.$modal.msgSuccess('删除成功');
|
|
|
- await getList();
|
|
|
+/** 重置操作表单 */
|
|
|
+const reset = () => {
|
|
|
+ form.value = { ...initFormData };
|
|
|
+ dormBuildingFormRef.value?.resetFields();
|
|
|
};
|
|
|
|
|
|
-/** 导出按钮操作 */
|
|
|
-const handleExport = () => {
|
|
|
- proxy?.download(
|
|
|
- 'sslxx/dormBuilding/export',
|
|
|
- {
|
|
|
- ...queryParams.value
|
|
|
- },
|
|
|
- `dormBuilding_${new Date().getTime()}.xlsx`
|
|
|
- );
|
|
|
+/** 取消按钮 */
|
|
|
+const cancel = () => {
|
|
|
+ dialog.visible = false;
|
|
|
+ reset();
|
|
|
};
|
|
|
|
|
|
onMounted(() => {
|
|
|
getList();
|
|
|
- loadCampusOptions().then(() => {
|
|
|
- loadAreaTreeData();
|
|
|
- });
|
|
|
+ loadCampusOptions();
|
|
|
});
|
|
|
</script>
|
|
|
+
|
|
|
<style scoped>
|
|
|
-/* 页面容器样式 */
|
|
|
.page-container {
|
|
|
- padding: 8px;
|
|
|
-}
|
|
|
-
|
|
|
-/* 表格卡片布局 */
|
|
|
-.table-card {
|
|
|
- margin-top: 0;
|
|
|
-}
|
|
|
-
|
|
|
-.table-card :deep(.el-card__body) {
|
|
|
- padding: 0px 20px 20px 20px !important;
|
|
|
-}
|
|
|
-
|
|
|
-/* 移除按钮栏底部边框 */
|
|
|
-.button-card :deep(.el-card__header) {
|
|
|
- border-bottom: none !important;
|
|
|
-}
|
|
|
-
|
|
|
-.image-gallery {
|
|
|
- display: flex;
|
|
|
- flex-wrap: wrap;
|
|
|
- gap: 12px;
|
|
|
- padding: 8px;
|
|
|
-}
|
|
|
-
|
|
|
-.image-item {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: center;
|
|
|
- border: 1px solid #dcdfe6;
|
|
|
- border-radius: 6px;
|
|
|
- background-color: #fff;
|
|
|
- padding: 4px;
|
|
|
- box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
|
|
- transition: all 0.3s ease;
|
|
|
-}
|
|
|
-
|
|
|
-.image-item:hover {
|
|
|
- transform: translateY(-2px);
|
|
|
- box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
|
|
|
-}
|
|
|
-
|
|
|
-.no-image {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: center;
|
|
|
- width: 120px;
|
|
|
- height: 80px;
|
|
|
- border: 1px dashed #dcdfe6;
|
|
|
- border-radius: 4px;
|
|
|
- background-color: #fafafa;
|
|
|
-}
|
|
|
-
|
|
|
-.no-image-text {
|
|
|
- color: #909399;
|
|
|
- font-size: 12px;
|
|
|
- text-align: center;
|
|
|
-}
|
|
|
-
|
|
|
-.table-no-image {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: center;
|
|
|
- width: 50px;
|
|
|
- height: 50px;
|
|
|
- border: 1px dashed #dcdfe6;
|
|
|
- border-radius: 4px;
|
|
|
- background-color: #fafafa;
|
|
|
- margin: 0 auto;
|
|
|
-}
|
|
|
-
|
|
|
-.table-no-image-text {
|
|
|
- color: #909399;
|
|
|
- font-size: 10px;
|
|
|
- text-align: center;
|
|
|
-}
|
|
|
-
|
|
|
-.view-text {
|
|
|
- font-size: 14px;
|
|
|
- color: #303133;
|
|
|
- line-height: 1.5;
|
|
|
+ background-color: #f5f5f5;
|
|
|
}
|
|
|
|
|
|
-.view-description {
|
|
|
- padding: 12px;
|
|
|
- border: 1px solid #e4e7ed;
|
|
|
- border-radius: 4px;
|
|
|
- width: 100%;
|
|
|
- height: 200px;
|
|
|
- font-size: 14px;
|
|
|
- color: #303133;
|
|
|
- line-height: 1.6;
|
|
|
- white-space: pre-wrap;
|
|
|
- word-break: break-word;
|
|
|
- overflow-y: auto;
|
|
|
-}
|
|
|
-/* 搜索按钮容器样式 */
|
|
|
.search-btn-container {
|
|
|
- display: flex;
|
|
|
- justify-content: flex-end;
|
|
|
- margin-top: 10px;
|
|
|
-
|
|
|
- .el-form-item {
|
|
|
- margin-bottom: 0 !important;
|
|
|
- }
|
|
|
+ text-align: left;
|
|
|
}
|
|
|
+
|
|
|
.fixed-width-input {
|
|
|
width: 100%;
|
|
|
}
|