北斗启航科技教育平台管理系统

This commit is contained in:
2026-03-27 17:33:34 +08:00
commit 86a383e719
150 changed files with 21746 additions and 0 deletions

View File

@@ -0,0 +1,655 @@
<template>
<div>
<!-- 表格 -->
<el-card>
<div class="flex justify-center flex-wrap">
<TabelTools @showTools="showTools" :dialogObj="organizationMsgActive" />
<AddNewData newDataLabel="新增用户单位" @showAddForm="showAddForm" />
<el-table
ref="tableRef"
:data="tableData"
style="width: 100%"
max-height="50rem"
table-layout="auto"
scrollbar-always-on
@selection-change="handleSelectionChange"
>
<TabelSelect
v-if="dialogOperationVisible"
ref="EditSelectRef"
:holderText="editSelectHold"
singleColor="primary"
multipleColor="warning"
allColor="danger"
singleSize="small"
multipleSize="small"
allSize="small"
:singlePlain="true"
:multiplePlain="false"
:allPlain="false"
operateType="edit"
singleType="single"
@showComfirmDialog="showComfirmDialog"
/>
<TabelSelect
v-if="dialogOperationVisible"
ref="DelSelectRef"
:holderText="delSelectHold"
singleColor="danger"
multipleColor="warning"
allColor="danger"
singleSize="small"
multipleSize="small"
allSize="small"
:singlePlain="true"
:multiplePlain="false"
:allPlain="false"
operateType="del"
@showComfirmDialog="showComfirmDialog"
/>
<el-table-column min-width="150" column-key="uid">
<template #header>
<div>
<SearchKey
v-if="dialogSearchVisible"
ref="SearchUidKeyRef"
holderText="输入单位uid以搜索相关数据"
@search="organizationMsg"
/>
<div>
<el-text class="mx-1"> 单位uid </el-text>
</div>
</div>
</template>
<template #default="scope">
<div class="flex justify-start items-center text-base">
{{ scope.row.uid }}
</div>
</template>
</el-table-column>
<el-table-column min-width="200" column-key="organization_name">
<template #header>
<div>
<SearchKey
v-if="dialogSearchVisible"
ref="SearchOrganizationNameKeyRef"
holderText="输入单位名称以搜索相关数据"
@search="organizationMsg"
/>
<div>
<el-text class="mx-1"> 单位名称 </el-text>
</div>
</div>
</template>
<template #default="scope">
<div class="flex justify-start items-center text-base">
{{ scope.row.organization_name }}
</div>
</template>
</el-table-column>
<el-table-column min-width="200" column-key="address">
<template #header>
<div>
<SearchKey
v-if="dialogSearchVisible"
ref="SearchAddressKeyRef"
holderText="输入通信地址以搜索相关数据"
@search="organizationMsg"
/>
<div>
<el-text class="mx-1"> 通信地址 </el-text>
</div>
</div>
</template>
<template #default="scope">
<div class="flex justify-start items-center text-base">
{{ scope.row.address }}
</div>
</template>
</el-table-column>
<el-table-column min-width="100" column-key="liaison_name">
<template #header>
<div>
<SearchKey
v-if="dialogSearchVisible"
ref="SearchLiaisonNameKeyRef"
holderText="输入联系人姓名以搜索相关数据"
@search="organizationMsg"
/>
<div>
<el-text class="mx-1"> 联系人姓名 </el-text>
</div>
</div>
</template>
<template #default="scope">
<div class="flex justify-start items-center text-base">
{{ scope.row.liaison_name }}
</div>
</template>
</el-table-column>
<el-table-column min-width="120" column-key="phone">
<template #header>
<div>
<SearchKey
v-if="dialogSearchVisible"
ref="SearchPhoneKeyRef"
holderText="输入联系人电话以搜索相关数据"
@search="organizationMsg"
/>
<div>
<el-text class="mx-1"> 联系人电话 </el-text>
</div>
</div>
</template>
<template #default="scope">
<div class="flex justify-start items-center text-base">
{{ scope.row.phone }}
</div>
</template>
</el-table-column>
<el-table-column min-width="200" column-key="email">
<template #header>
<div>
<SearchKey
v-if="dialogSearchVisible"
ref="SearchEmailKeyRef"
holderText="输入单位邮箱以搜索相关数据"
@search="organizationMsg"
/>
<div>
<el-text class="mx-1"> 单位邮箱 </el-text>
</div>
</div>
</template>
<template #default="scope">
<div class="flex justify-start items-center text-base">
{{ scope.row.email }}
</div>
</template>
</el-table-column>
<el-table-column min-width="200" column-key="other_information">
<template #header>
<div>
<SearchKey
v-if="dialogSearchVisible"
ref="SearchOtherInformationKeyRef"
holderText="输入信息关键字以搜索相关数据"
@search="organizationMsg"
/>
<div>
<el-text class="mx-1"> 其他信息 </el-text>
</div>
</div>
</template>
<template #default="scope">
<div class="flex justify-start items-center text-base">
{{ scope.row.other_information }}
</div>
</template>
</el-table-column>
<el-table-column min-width="100" column-key="post_code">
<template #header>
<div>
<SearchKey
v-if="dialogSearchVisible"
ref="SearchPostCodeKeyRef"
holderText="输入邮政编码以搜索相关数据"
@search="organizationMsg"
/>
<div>
<el-text class="mx-1"> 邮政编码 </el-text>
</div>
</div>
</template>
<template #default="scope">
<div class="flex justify-start items-center text-base">
{{ scope.row.post_code }}
</div>
</template>
</el-table-column>
<el-table-column min-width="200" column-key="created_at">
<template #header>
<DateTimePicker
v-if="dialogSearchVisible"
ref="createdDateTimePickerRef"
DateTimePicker="createdDateTimePicker"
@search="organizationMsg"
/>
<div>
<el-text class="mx-1"> 添加时间 </el-text>
<SortSearch
v-if="dialogSortVisible"
ref="createdSortDateTimeRef"
activeText="顺序"
inactiveText="倒序"
@search="organizationMsg"
/>
</div>
</template>
<template #default="scope">
<div class="flex justify-start items-center text-base">
{{ scope.row.created_at }}
</div>
</template>
</el-table-column>
<el-table-column min-width="200" column-key="updated_at">
<template #header>
<DateTimePicker
v-if="dialogSearchVisible"
ref="updatedDateTimePickerRef"
DateTimePicker="updatedMsgDateTimePicker"
@search="organizationMsg"
/>
<div>
<el-text class="mx-1"> 上次信息变更时间 </el-text>
<SortSearch
v-if="dialogSortVisible"
ref="updatedSortDateTimeRef"
activeText="顺序"
inactiveText="倒序"
@search="organizationMsg"
/>
</div>
</template>
<template #default="scope">
<div class="flex justify-start items-center text-base">
{{ scope.row.updated_at }}
</div>
</template>
</el-table-column>
</el-table>
<!-- 表格 -->
<Pagination
ref="PaginationRef"
:active="organizationMsgActive"
@sizeChangeBack="changePage"
@search="organizationMsg"
/>
</div>
</el-card>
<AddOrganizationForm
ref="addOrganizationFormRef"
title="新增用户单位"
@reloadData="organizationMsg"
/>
<EditOrganizationForm
ref="editOrganizationFormRef"
operateLabel="编辑用户单位"
@requestOperate="requestOperate"
/>
<PasswordOauth
ref="delPasswordOauthRef"
operateLabel="删除用户单位"
@requestOperate="requestOperate"
/>
</div>
</template>
<script setup>
import { ref, reactive, watch, onMounted, nextTick } from "vue";
import { ElMessage } from "element-plus";
import TabelTools from "../operate/tabelTools.vue";
import AddNewData from "../operate/addNewData.vue";
import TabelSelect from "../operate/tabelSelect.vue";
import SearchKey from "../search/searchKey.vue";
import SortSearch from "../search/sortSearch.vue";
import DateTimePicker from "../search/dateTimePicker.vue";
import Pagination from "../search/pagination.vue";
import AddOrganizationForm from "../addNewData/organizationForm/organizationForm.vue";
import EditOrganizationForm from "../editData/organizationForm.vue";
import PasswordOauth from "../operate/passwordOauth.vue";
import organizationActiveStore from "../../stores/organization";
import moment from "moment";
import $http from "../../api/index";
import $url from "../../api/url";
import { encrypt } from "../../utils/aes";
import { judgment } from "../../utils/judgment.js";
import { hasNullOrEmptyPropertyWithTypeof } from "../../utils/hasNullOrEmptyPropertyWithTypeof.js";
const organizationMsgActive = organizationActiveStore();
const editSelectHold = {
single: "编辑",
multiple: "编辑选中",
all: "编辑所有",
label: "编辑用户单位",
};
const delSelectHold = {
single: "删除",
multiple: "删除选中",
all: "删除所有",
label: "删除用户单位",
};
const EditSelectRef = ref(null);
const DelSelectRef = ref(null);
const SearchUidKeyRef = ref(null);
const SearchOrganizationNameKeyRef = ref(null);
const SearchAddressKeyRef = ref(null);
const SearchLiaisonNameKeyRef = ref(null);
const SearchPhoneKeyRef = ref(null);
const SearchEmailKeyRef = ref(null);
const SearchOtherInformationKeyRef = ref(null);
const SearchPostCodeKeyRef = ref(null);
const createdDateTimePickerRef = ref(null);
const updatedDateTimePickerRef = ref(null);
const createdSortDateTimeRef = ref(null);
const updatedSortDateTimeRef = ref(null);
const PaginationRef = ref(null);
const addOrganizationFormRef = ref(null);
const editOrganizationFormRef = ref(null);
const delPasswordOauthRef = ref(null);
const dialogSearchVisible = ref(false);
const dialogSortVisible = ref(false);
const dialogOperationVisible = ref(false);
const tableRef = ref();
const offsetOff = ref(true);
const pageCount = ref(0);
const operate = ref("edit");
const searchOptions = reactive({
uid: "",
organization_name: "",
address: "",
liaison_name: "",
phone: "",
email: "",
other_information: "",
post_code: "",
created_at: "",
updated_at: "",
});
const sortOptions = reactive({
created_at: false,
updated_at: false,
});
const tableData = ref([]);
let singleData = reactive({});
let operateData = reactive({});
let operateDataClone = reactive({});
const showAddForm = () => {
addOrganizationFormRef.value.dialogVisible = true;
};
const showTools = (operateType) => {
switch (operateType) {
case "search":
dialogSearchVisible.value = !dialogSearchVisible.value;
organizationMsgActive.dialogSearchVisible = dialogSearchVisible.value;
break;
case "sort":
dialogSortVisible.value = !dialogSortVisible.value;
organizationMsgActive.dialogSortVisible = dialogSortVisible.value;
break;
case "operation":
dialogOperationVisible.value = !dialogOperationVisible.value;
organizationMsgActive.dialogOperationVisible = dialogOperationVisible.value;
break;
default:
break;
}
};
const resetOffset = () => {
if (hasNullOrEmptyPropertyWithTypeof(searchOptions)) {
if (PaginationRef.value.offset !== 1 && offsetOff.value) {
PaginationRef.value.handleCurrentChange(1);
offsetOff.value = false;
}
} else {
offsetOff.value = true;
}
};
const organizationMsg = () => {
judgment(searchOptions, "uid", SearchUidKeyRef.value, "searchMsg");
judgment(
searchOptions,
"organization_name",
SearchOrganizationNameKeyRef.value,
"searchMsg"
);
judgment(searchOptions, "address", SearchAddressKeyRef.value, "searchMsg");
judgment(searchOptions, "liaison_name", SearchLiaisonNameKeyRef.value, "searchMsg");
judgment(searchOptions, "phone", SearchPhoneKeyRef.value, "searchMsg");
judgment(searchOptions, "email", SearchEmailKeyRef.value, "searchMsg");
judgment(
searchOptions,
"other_information",
SearchOtherInformationKeyRef.value,
"searchMsg"
);
judgment(searchOptions, "post_code", SearchPostCodeKeyRef.value, "searchMsg");
judgment(searchOptions, "created_at", createdDateTimePickerRef.value, "searchMsg");
judgment(searchOptions, "updated_at", updatedDateTimePickerRef.value, "searchMsg");
judgment(sortOptions, "created_at", createdSortDateTimeRef.value, "searchMsg");
judgment(sortOptions, "updated_at", updatedSortDateTimeRef.value, "searchMsg");
resetOffset();
const data = {
uid: localStorage.data,
offset: PaginationRef.value == null ? 1 : PaginationRef.value.offset,
limit: PaginationRef.value == null ? 10 : PaginationRef.value.limit,
searchOptions: searchOptions,
sortOptions: sortOptions,
};
$http.post($url.showOrganization, data).then((res) => {
if (res.data.code === 200) {
tableData.value = res.data.OrganizationMsg;
tableData.value.forEach((item) => {
item.origin_createdAt = item.created_at;
item.created_at = moment
.utc(item.created_at)
.add(8, "hours")
.format("YYYY-MM-DD-HH:mm:ss");
item.origin_updatedAt = item.updated_at;
item.updated_at = moment
.utc(item.updated_at)
.add(8, "hours")
.format("YYYY-MM-DD-HH:mm:ss");
});
PaginationRef.value.dataCount = res.data.count;
organizationMsgActive.dataCount = PaginationRef.value.dataCount;
pageCount.value = Math.ceil(
PaginationRef.value.dataCount / PaginationRef.value.limit
);
organizationMsgActive.pageCount = pageCount.value;
if (!operateData[PaginationRef.value.offset]) return;
operateData[PaginationRef.value.offset].forEach((element) => {
tableData.value.forEach((item) => {
if (item.created_at == element.created_at) {
nextTick(() => {
tableRef.value.toggleRowSelection(item, true);
});
}
});
});
} else {
tableData.value = [];
ElMessage.error("未查找到相关数据!");
}
});
};
const changePage = (val) => {
pageCount.value = Math.ceil(PaginationRef.value.dataCount / val);
operateData = {};
for (let i = 0; i < pageCount.value; i++) {
operateData[i + 1] = [];
for (const key in operateDataClone) {
operateDataClone[key].forEach((element) => {
// 判断数据在第几页
if (Math.ceil(element.location / PaginationRef.value.limit) == i + 1) {
operateData[i + 1].push(element);
}
});
}
}
};
const handleSelectionChange = (val) => {
operateData[PaginationRef.value.offset] = val;
tableData.value.forEach((item, index) => {
operateData[PaginationRef.value.offset].forEach((element) => {
if (item.created_at == element.created_at) {
// 数据在表格中的位置
element.location =
(PaginationRef.value.offset - 1) * PaginationRef.value.limit + (index + 1);
}
});
});
operateDataClone = JSON.parse(JSON.stringify(operateData));
for (const key in operateDataClone) {
operateDataClone[key].forEach((item) => {
if (item.origin_createdAt) {
item.created_at = item.origin_createdAt;
}
if (item.origin_updatedAt) {
item.created_at = item.origin_updatedAt;
}
delete item.origin_createdAt;
delete item.origin_updatedAt;
delete item.location;
});
}
};
const showComfirmDialog = (singleMsg) => {
singleData = { ...singleMsg.data };
singleData.created_at = singleData.origin_createdAt;
singleData.updated_at = singleData.origin_updatedAt;
delete singleData.origin_createdAt;
delete singleData.origin_updatedAt;
operate.value = singleMsg.operateType;
if (singleMsg.operateType == "edit") {
editOrganizationFormRef.value.originForm({ ...singleMsg.data });
editOrganizationFormRef.value.operateDialogVisible = true;
editOrganizationFormRef.value.model = EditSelectRef.value.model;
}
if (singleMsg.operateType == "del") {
delPasswordOauthRef.value.operateDialogVisible = true;
}
};
const requestOperate = () => {
let operateType, url, model, password;
if (operate.value == "edit") {
operateType = "编辑";
url = $url.editOrganization;
model = EditSelectRef.value.model;
password = editOrganizationFormRef.value.password;
} else if (operate.value == "del") {
operateType = "删除";
url = $url.deleteOrganization;
model = DelSelectRef.value.model;
password = delPasswordOauthRef.value.ruleForm.password;
}
const data = {
uid: localStorage.data,
model: encrypt(model),
password: encrypt(password),
requestMsg:
model == "single" ? singleData : model == "multiple" ? operateDataClone : "",
};
if (operate.value == "edit") {
data.updateMsg = { ...editOrganizationFormRef.value.ruleForm };
}
$http.post(url, data).then((res) => {
if (res.data.code === 200) {
tableRef.value.clearSelection();
operateData = {};
operateDataClone = {};
ElMessage({
message: `${operateType}成功!`,
type: "success",
});
organizationMsg();
} else {
ElMessage.error(`${operateType}失败!`);
}
});
};
defineExpose({ organizationMsg });
watch(searchOptions, (value) => {
organizationMsgActive.searchOptions = value;
});
watch(sortOptions, (value) => {
organizationMsgActive.sortOptions = value;
});
onMounted(() => {
pageCount.value = organizationMsgActive.pageCount;
dialogSearchVisible.value = organizationMsgActive.dialogSearchVisible;
dialogSortVisible.value = organizationMsgActive.dialogSortVisible;
dialogOperationVisible.value = organizationMsgActive.dialogOperationVisible;
if (dialogSearchVisible.value) {
searchOptions.uid = organizationMsgActive.searchOptions.uid;
searchOptions.organization_name =
organizationMsgActive.searchOptions.organization_name;
searchOptions.address = organizationMsgActive.searchOptions.address;
searchOptions.liaison_name = organizationMsgActive.searchOptions.liaison_name;
searchOptions.phone = organizationMsgActive.searchOptions.phone;
searchOptions.email = organizationMsgActive.searchOptions.email;
searchOptions.other_information =
organizationMsgActive.searchOptions.other_information;
searchOptions.post_code = organizationMsgActive.searchOptions.post_code;
searchOptions.type = organizationMsgActive.searchOptions.type;
searchOptions.status = organizationMsgActive.searchOptions.status;
searchOptions.created_at = organizationMsgActive.searchOptions.created_at;
searchOptions.updated_at = organizationMsgActive.searchOptions.updated_at;
}
if (dialogSortVisible.value) {
sortOptions.created_at = organizationMsgActive.sortOptions.created_at;
sortOptions.updated_at = organizationMsgActive.sortOptions.updated_at;
}
if (dialogOperationVisible.value) {
}
setTimeout(() => {
organizationMsg();
}, 200);
setTimeout(() => {
if (dialogSearchVisible.value) {
SearchUidKeyRef.value.searchMsg = organizationMsgActive.searchOptions.uid;
SearchOrganizationNameKeyRef.value.searchMsg =
organizationMsgActive.searchOptions.organization_name;
SearchAddressKeyRef.value.searchMsg = organizationMsgActive.searchOptions.address;
SearchLiaisonNameKeyRef.value.searchMsg =
organizationMsgActive.searchOptions.liaison_name;
SearchPhoneKeyRef.value.searchMsg = organizationMsgActive.searchOptions.phone;
SearchEmailKeyRef.value.searchMsg = organizationMsgActive.searchOptions.email;
SearchOtherInformationKeyRef.value.searchMsg =
organizationMsgActive.searchOptions.other_information;
SearchPostCodeKeyRef.value.searchMsg =
organizationMsgActive.searchOptions.post_code;
createdDateTimePickerRef.value.created_at =
organizationMsgActive.searchOptions.created_at;
updatedDateTimePickerRef.value.updated_at =
organizationMsgActive.searchOptions.updated_at;
}
if (dialogSortVisible.value) {
createdSortDateTimeRef.value.searchMsg =
organizationMsgActive.sortOptions.created_at;
updatedSortDateTimeRef.value.searchMsg =
organizationMsgActive.sortOptions.updated_at;
}
if (dialogOperationVisible.value) {
}
}, 0);
});
</script>
<style scoped></style>