feat: 系统各项配置功能实现

src/App.vue

@@ -5,13 +5,14 @@
 </template>
 
 <script setup lang="ts">
-import { ref, reactive, computed, nextTick, provide } from "vue";
+import { ref, reactive, computed, nextTick, provide, onMounted } from "vue";
 import { GlobalStore } from "@/stores";
 // import { useTheme } from "@/hooks/useTheme";
 import { getBrowserLang } from "@/utils/util";
 import { ElConfigProvider } from "element-plus";
 import zhCn from "element-plus/es/locale/lang/zh-cn";
 import en from "element-plus/es/locale/lang/en";
+import { getSystemConfig } from "@/api/modules/jxjview";
 
 // // 初始化主题配置
 // const { initTheme } = useTheme();
@@ -42,6 +43,24 @@ const i18nLocale = computed(() => {
 
 // 配置全局组件大小
 const assemblySize = computed(() => globalStore.assemblySize);
+
+onMounted(async () => {
+	const res = await getSystemConfig({ configKey: "system_login_background" });
+	console.log(res);
+	if (res.result && res.result.length > 0) {
+		globalStore.systemConfigBg = res.result[0].configValue;
+	}
+	const res2 = await getSystemConfig({ configKey: "system_logo" });
+	console.log(res2);
+	if (res2.result && res2.result.length > 0) {
+		globalStore.systemConfigLogo = res2.result[0].configValue;
+	}
+	const res3 = await getSystemConfig({ configKey: "system_name" });
+	console.log(res3);
+	if (res3.result && res3.result.length > 0) {
+		globalStore.systemConfigName = res3.result[0].configValue;
+	}
+});
 </script>
 <style lang="scss">
 // 地图的搜索层级功能 去掉或者加上scope就会导致地图搜索失效

src/api/modules/jxjview.ts

@@ -87,6 +87,10 @@ export const getDictionaryDetail = (params: User.ReqUserParams) => {
 export const getDicList = (params: User.ReqUserParams) => {
 	return http.post<ResPage<User.ResResults>>(BASEURL + `/xmgl/systemDictData/list`, params);
 };
+// 查询系统配置
+export const getSystemConfig = (params: User.ReqUserParams) => {
+	return http.post<ResPage<User.ResResults>>(BASEURL + `/xmgl/systemConfig/queryByKey`, params);
+};
 // * 新增用户
 export const addDictionary = (params: FormData) => {
 	return http.post(BASEURL + `/xmgl/systemDictType/add`, params);

src/components/layoutTop/index.scss

@@ -31,7 +31,8 @@
 			}
 			img {
 				width: 28px;
-				object-fit: contain;
+				height: 28px;
+				// object-fit: contain;
 				margin-right: 6px;
 			}
 		}

src/components/layoutTop/index.vue

@@ -4,8 +4,12 @@
 			<div class="header-lf">
 				<div @click="goHome" class="logo flx-center">
 					<!-- <img src="@/assets/images/logo.svg" alt="logo" /> -->
-					<img src="@/assets/images/login/china.png" style="margin: 0 15px" alt="logo" />
+					<img
-					<span>数字化政务监管平台</span>
+						:src="globalStore.systemConfigBg ? globalStore.systemConfigBg : '@/assets/images/login/china.png'"
+						style="margin: 0 15px"
+						alt="logo"
+					/>
+					<span>{{ globalStore.systemConfigName }}</span>
 					<span style="margin: 0 20px">|</span>
 					<span>{{ moduleTitle }}</span>
 				</div>

src/directives/modules/waterMarker.ts

@@ -20,11 +20,22 @@ let style = `
 	background-repeat: repeat;
 	pointer-events: none;
 `;
+let systemConfig = {};
 import type { Directive, DirectiveBinding } from "vue";
+import { getSystemConfig } from "@/api/modules/jxjview";
+// 获取系统配置水印
+const getConfigMarker = async () => {
+	// 获取起重机械设备类型字典
+	const { result } = await getSystemConfig({ configKey: "system_watermark" });
+	systemConfig = result;
+	console.log(result);
+};
+// 设置水印
 const addWaterMarker = (parentNode: any, binding: any = {}) => {
 	console.log(binding);
 	// 水印文字，父元素，字体，文字颜色
 	let can: HTMLCanvasElement = document.createElement("canvas");
+	let changeStyle = ""; // 需要修改的样式
 	parentNode.appendChild(can);
 	can.width = 205;
 	can.height = 140;
@@ -35,13 +46,13 @@ const addWaterMarker = (parentNode: any, binding: any = {}) => {
 	cans.fillStyle = binding.textColor || "rgba(180, 180, 180, 0.3)";
 	cans.textAlign = "left";
 	cans.textBaseline = "Middle" as CanvasTextBaseline;
-	cans.fillText(binding.text, can.width / 10, can.height / 2);
+	cans.fillText(binding.configValue, can.width / 10, can.height / 2);
 
 	// 创建waterMark父元素
 	const waterMark = document.createElement("div");
 	waterMark.className = `water-mark`; // 方便自定义展示结果
-	style = `${style}background-image: url(${can.toDataURL("image/png")})`;
+	changeStyle = `${style}background-image: url(${can.toDataURL("image/png")})`;
-	waterMark.setAttribute("style", style);
+	waterMark.setAttribute("style", changeStyle);
 	// 将对应图片的父容器作为定位元素
 	parentNode.setAttribute("style", "position:relative;");
 	// 将图片元素移动到waterMark中
@@ -52,8 +63,13 @@ const addWaterMarker = (parentNode: any, binding: any = {}) => {
 const waterMarker = {
 	mounted(el: HTMLElement, binding: any) {
 		console.log(666);
+		new Promise(async (resolve, reject) => {
+			await getConfigMarker();
+			resolve("success");
+		}).then(res => {
+			el.onload = init(el, systemConfig);
+		});
 		// addWaterMarker(binding.value.text, el, binding.value.font, binding.value.textColor);
-		el.onload = init(el, binding);
 	}
 };
 
@@ -68,7 +84,7 @@ const createObserver = (el: HTMLElement, binding: any) => {
 			// 证明被删除了
 			if (removedNodes[0] === waterMarkEl) {
 				observer.disconnect();
-				init(el, binding);
+				init(el, systemConfig);
 			} else if (type === "attributes" && target === waterMarkEl && currStyle !== style) {
 				waterMarkEl.setAttribute("style", style);
 			}
@@ -83,8 +99,8 @@ const createObserver = (el: HTMLElement, binding: any) => {
 const init = (el: HTMLElement, binding: any = {}) => {
 	console.log(666);
 	// 设置水印
-	addWaterMarker(el, binding.value);
+	addWaterMarker(el, binding);
 	// 启动监控
-	createObserver(el, binding.value);
+	createObserver(el, binding);
 };
 export default waterMarker;

src/layouts/LayoutClassic/index.scss

@@ -45,7 +45,8 @@
 				// }
 				img {
 					width: 28px;
-					object-fit: contain;
+					height: 28px;
+					// object-fit: contain;
 					margin-right: 6px;
 				}
 			}

src/layouts/LayoutClassic/index.vue

@@ -5,8 +5,12 @@
 			<div class="header-lf">
 				<div @click="goHome" class="logo flx-center">
 					<!-- <img src="@/assets/images/logo.svg" alt="logo" /> -->
-					<img src="@/assets/images/login/china.png" style="margin: 0 15px" alt="logo" />
+					<img
-					<span>数字化政务监管平台</span>
+						:src="globalStore.systemConfigBg ? globalStore.systemConfigBg : '@/assets/images/login/china.png'"
+						style="margin: 0 15px"
+						alt="logo"
+					/>
+					<span>{{ globalStore.systemConfigName }}</span>
 					<span v-if="moduleTitle" style="margin: 0 20px">|</span>
 					<span class="title">{{ moduleTitle }}</span>
 				</div>
@@ -14,7 +18,7 @@
 			</div>
 			<ToolBarRight />
 		</el-header>
-		<el-container class="classic-content">
+		<el-container class="classic-content" v-waterMarker>
 			<el-aside>
 				<!-- <div class="menu" :style="{ width: isCollapse ? '65px' : '210px' }">  根据屏幕自动收缩 -->
 				<div class="menu">

src/stores/index.ts

@@ -31,6 +31,12 @@ export const GlobalStore = defineStore({
 		path: null,
 		// 工程Sn
 		engineeringSn: "",
+		// 系统配置名称
+		systemConfigName: "",
+		// 系统配置登录页背景
+		systemConfigBg: "",
+		// 系统配置Logo
+		systemConfigLogo: "",
 		// themeConfig
 		themeConfig: {
 			// 当前页面是否全屏

src/stores/interface/index.ts

@@ -16,6 +16,9 @@ export interface GlobalState {
 	path: string | null;
 	isManager: string | null;
 	engineeringSn: string;
+	systemConfigName: string;
+	systemConfigBg: string;
+	systemConfigLogo: string;
 }
 
 /* themeConfigProp */

src/views/goverment/engineeringAcceptance/acceptancePlan/index.vue

@@ -1,5 +1,5 @@
 <template>
-	<div class="warning-page" v-waterMarker="{ text: '版权所有', textColor: 'rgba(180, 180, 180, 0.4)' }">
+	<div class="warning-page">
 		<LeftMenu
 			v-model="active"
 			:tabs="['项目名称', '工程名称']"

src/views/home/index.scss

@@ -37,7 +37,7 @@
 				}
 				img {
 					width: 28px;
-					object-fit: contain;
+					height: 28px;
 					margin-right: 6px;
 				}
 			}

src/views/home/index.vue

@@ -5,15 +5,19 @@
 			<div class="header-lf">
 				<div class="logo flx-center">
 					<!-- <img src="@/assets/images/logo.svg" alt="logo" /> -->
-					<img src="@/assets/images/login/china.png" style="margin: 0 15px" alt="logo" />
+					<img
-					<span>数字化政务监管平台</span>
+						:src="globalStore.systemConfigBg ? globalStore.systemConfigBg : '@/assets/images/login/china.png'"
+						style="margin: 0 15px"
+						alt="logo"
+					/>
+					<span>{{ globalStore.systemConfigName }}</span>
 				</div>
 				<ToolBarLeft />
 			</div>
 			<ToolBarRight />
 		</el-header>
 
-		<div class="contain-section">
+		<div class="contain-section" v-waterMarker>
 			<div class="contain-header">
 				<div class="header-important" v-for="item in data['important']" :key="item.moduleId">
 					<div class="header-item" @click="onChange(item)">

src/views/jxjview/system/index.vue

@@ -29,47 +29,99 @@
 				<el-button type="danger" link :icon="Delete" @click="deleteAccount(scope.row)">删除</el-button>
 			</template>
 		</ProTable>
-
+		<!-- 配置窗口 -->
-		<DialogForm
+		<el-dialog class="imgDialog" :title="title" v-model="visible" width="700px" show-close>
-			:title="title"
+			<el-form class="diaForm" :rules="rules" :model="formData" ref="ruleFormRef" label-width="160px">
-			:formConfig="formConfig"
+				<el-form-item label="配置名称：" prop="configName">
-			:formData="formData"
+					<el-input v-model="formData.configName" placeholder="请输入" />
-			v-model:visible="visible"
+				</el-form-item>
-			append-to-body
+				<el-form-item label="配置键名：" prop="configKey">
-			width="700px"
+					<el-input v-model="formData.configKey" placeholder="请输入" />
-			@confirm="saveItem"
+				</el-form-item>
+				<el-form-item label="配置类型：" prop="configValueType">
+					<el-radio-group v-model="formData.configValueType" @change="radioChange">
+						<el-radio :label="1">文字描述</el-radio>
+						<el-radio :label="2">图片</el-radio>
+					</el-radio-group>
+				</el-form-item>
+				<el-form-item label="配置键值：" prop="configValue" v-if="formData.configValueType == 1">
+					<el-input v-model="formData.configValue" placeholder="请输入" />
+				</el-form-item>
+				<el-form-item label="图片：" prop="configValueUrl" v-if="formData.configValueType == 2">
+					<div class="face-img" v-if="!formData.configValueUrl">
+						<el-upload
+							class="face-uploader"
+							:action="`${baseUrl}` + '/xmgl/file/upload'"
+							:show-file-list="false"
+							:on-success="handleAvatarSuccess"
+							accept="image/jpg, image/jpeg, image/png"
 						>
-		</DialogForm>
+							<img v-if="formData.configValueUrl" :src="formData.configValueUrl" class="face-avatar" />
+							<el-icon v-else><plus /></el-icon>
+						</el-upload>
+					</div>
+					<img class="showImg" v-else :src="formData.configValueUrl" />
+				</el-form-item>
+				<el-form-item label="备注：" prop="remark">
+					<el-input v-model="formData.remark" placeholder="请输入" />
+				</el-form-item>
+			</el-form>
+			<template #footer>
+				<div>
+					<el-button class="hzCancelStyle" @click="visible = false">取消</el-button>
+					<el-button type="primary" @click="submitConfirm(ruleFormRef, formData)"> 保存 </el-button>
+				</div>
+			</template>
+		</el-dialog>
 	</div>
 </template>
 
 <script setup lang="tsx" name="jxjSystem">
 import { ref, reactive } from "vue";
-import { ElMessage, ElMessageBox } from "element-plus";
+import { ElMessage, ElMessageBox, UploadProps } from "element-plus";
 import { useRouter } from "vue-router";
 import { User } from "@/api/interface";
 import { ColumnProps } from "@/components/ProTable/interface";
 import { useHandleData } from "@/hooks/useHandleData";
 import { useDownload } from "@/hooks/useDownload";
 import ProTable from "@/components/ProTable/index.vue";
-import DialogForm from "@/components/DialogForm/index.vue";
 import { CirclePlus, Delete, EditPen, Download, Upload, View, Refresh } from "@element-plus/icons-vue";
 import { getUserList, deleteUser, editUser, addUser } from "@/api/modules/jxjview";
+import type { FormRules, FormInstance } from "element-plus";
+import { GlobalStore } from "@/stores";
 
+const globalStore = GlobalStore();
+const ruleFormRef = ref<FormInstance>();
 const router = useRouter();
-
+const baseUrl = import.meta.env.VITE_API_URL;
+const fileList = ref([]);
+const headers = ref({ Authorization: "Bearer " + globalStore.token });
 const visible = ref(false);
 const title = ref("");
-const formData = ref({});
+const formData = ref({
+	configValueType: 1,
+	configValueUrl: ""
+});
 const mode = ref("");
 // 获取 ProTable 元素，调用其获取刷新数据方法（还能获取到当前查询参数，方便导出携带参数）
 const proTable = ref();
+// 单选按钮组切换
+const radioChange = () => {
+	// formData.value.configValue = "";
+	fileList.value = [];
+};
 // 添加数据按钮
 const handleAddItem = () => {
 	mode.value = "add";
 	visible.value = true;
 	title.value = "新增配置";
-	formData.value = reactive({});
+	formData.value = reactive({
+		configValueType: 1,
+		configValueUrl: ""
+	});
+	setTimeout(function () {
+		ruleFormRef.value?.clearValidate();
+	}, 20);
 };
 
 // 修改数据按钮
@@ -78,6 +130,12 @@ function handleEditItem(index: string, row: any) {
 	visible.value = true;
 	title.value = "编辑配置";
 	formData.value = reactive({ ...row });
+	if (formData.value.configValueType == 2) {
+		formData.value.configValueUrl = formData.value.configValue;
+	}
+	setTimeout(function () {
+		ruleFormRef.value?.clearValidate();
+	}, 20);
 }
 
 // 表格配置项
@@ -98,47 +156,86 @@ const columns: ColumnProps[] = [
 	{ prop: "remark", label: "备注" },
 	{ prop: "operation", label: "操作", fixed: "right", width: 330 }
 ];
-
+const rules = reactive<FormRules>({
-// 弹窗中的配置
-const formConfig = {
-	formItemConfig: [
-		{
-			label: "配置名称",
-			prop: "configName",
-			type: "input"
-		},
-		{
-			label: "配置键名",
-			prop: "configKey",
-			type: "input"
-		},
-		{
-			label: "配置键值",
-			prop: "configValue",
-			type: "input"
-		},
-		{
-			label: "备注",
-			prop: "remark",
-			type: "input"
-		}
-	],
-	rules: {
 	configName: [
 		{
 			required: true,
-				message: "请输入配置名称",
+			message: "请输入",
 			trigger: "blur"
 		}
-		]
+	],
+	configKey: [
+		{
+			required: true,
+			message: "请输入",
+			trigger: "blur"
 		}
-};
+	],
+	configValueType: [
+		{
+			required: true,
+			message: "请输入",
+			trigger: "blur"
+		}
+	],
+	configValue: [
+		{
+			required: true,
+			message: "请输入",
+			trigger: "blur"
+		}
+	],
+	configValueUrl: [
+		{
+			required: true,
+			message: "请选择",
+			trigger: "change"
+		}
+	]
+});
 
 // 如果表格需要初始化请求参数，直接定义传给 ProTable(之后每次请求都会自动带上该参数，此参数更改之后也会一直带上，改变此参数会自动刷新表格数据)
 const initParam = reactive({
 	// type: 1
 });
 
+const submitConfirm = async (formEl: FormInstance | undefined, form: any) => {
+	// 标记表单校验
+	if (!formEl) return;
+	await formEl.validate(async (valid, fields) => {
+		if (valid) {
+			if (form.configValueType == 2) {
+				form.configValue = form.configValueUrl;
+				delete form.configValueUrl;
+			}
+			if (form.id) {
+				const res = await editUser(form);
+				proTable.value.getTableList();
+				ElMessage.success("编辑成功");
+				visible.value = false;
+			} else {
+				const res = await addUser(form);
+				proTable.value.getTableList();
+				ElMessage.success("新增成功");
+				visible.value = false;
+			}
+		} else {
+			console.log("error submit!", fields);
+			ElMessage({
+				showClose: true,
+				message: "请完善表单信息！",
+				type: "error"
+			});
+		}
+	});
+};
+// 图片上传成功后的钩子
+const handleAvatarSuccess: UploadProps["onSuccess"] = (response, uploadFile) => {
+	console.log(response.result.url);
+	console.log(response, uploadFile);
+	formData.value.configValueUrl = response.result.url;
+	ruleFormRef.value?.validateField("configValueUrl");
+};
 // dataCallback 是对于返回的表格数据做处理，如果你后台返回的数据不是 list && total && pageNum && pageSize 这些字段，那么你可以在这里进行处理成这些字段
 // 或者直接去 hooks/useTable.ts 文件中把字段改为你后端对应的就行
 const dataCallback = (data: any) => {
@@ -158,24 +255,46 @@ const getTableList = (params: any) => {
 	return getUserList(newParams);
 };
 
-// 新增，编辑数据
-const saveItem = async (form: any) => {
-	if (form.configId) {
-		console.log(form.configId);
-		const res = await editUser(form);
-		proTable.value.getTableList();
-		ElMessage.success("编辑成功");
-	} else {
-		const res = await addUser(form);
-		ElMessage.success("新增成功");
-		proTable.value.getTableList();
-	}
-	visible.value = false;
-};
-
 // 删除用户信息
 const deleteAccount = async (params: User.ResUserList) => {
 	await useHandleData(deleteUser, { configId: params.configId }, `删除【${params.configName}】`);
 	proTable.value.getTableList();
 };
 </script>
+<style lang="scss" scoped>
+.imgDialog {
+	.face-img {
+		width: 100%;
+		align-self: flex-start;
+		:deep(.face-uploader .el-upload) {
+			border: 1px dashed #d9d9d9 !important;
+			border-radius: 6px !important;
+			cursor: pointer !important;
+			position: relative !important;
+			overflow: hidden !important;
+		}
+		.face-uploader .el-upload:hover {
+			border-color: #409eff !important;
+		}
+		:deep(.el-icon) {
+			font-size: 24px;
+			color: #8c939d;
+			width: 50px;
+			height: 50px;
+			line-height: 50px;
+			text-align: center;
+		}
+		.face-avatar {
+			width: 50px;
+			height: 50px;
+			display: block;
+		}
+	}
+
+	.showImg {
+		width: 50px;
+		height: 50px;
+		border-radius: 6px;
+	}
+}
+</style>

src/views/login/CompanyLogon/index.vue

@@ -3,8 +3,12 @@
 		<div class="header-lf">
 			<div class="logo">
 				<!-- <img src="@/assets/images/logo.svg" alt="logo" /> -->
-				<img src="@/assets/images/login/china.png" style="margin: 0 15px" alt="logo" />
+				<img
-				<span>数字化政务监管平台</span>
+					:src="globalStore.systemConfigBg ? globalStore.systemConfigBg : '@/assets/images/login/china.png'"
+					style="margin: 0 15px"
+					alt="logo"
+				/>
+				<span>{{ globalStore.systemConfigName }}</span>
 				<span class="middle">|</span>
 				<span>企业注册</span>
 			</div>
@@ -36,8 +40,10 @@ import { addCompany } from "@/api/modules/jxjview";
 import type { RuleFormData } from "./basic-form.vue";
 import type { EnterpriseMains } from "./entrepreneur.vue";
 import { ElMessage } from "element-plus";
+import { GlobalStore } from "@/stores";
 
 const router = useRouter();
+const globalStore = GlobalStore();
 const datas = reactive(values);
 const active = ref(0);
 const requestData = ref({});

src/views/login/ProJectForm/index.vue

@@ -4,8 +4,12 @@
 			<div class="logo">
 				<!-- <img src="@/assets/images/logo.svg" alt="logo" /> -->
 				<div>
-					<img src="@/assets/images/login/china.png" style="margin: 0 15px" alt="logo" />
+					<img
-					<span>数字化政务监管平台</span>
+						:src="globalStore.systemConfigBg ? globalStore.systemConfigBg : '@/assets/images/login/china.png'"
+						style="margin: 0 15px"
+						alt="logo"
+					/>
+					<span>{{ globalStore.systemConfigName }}</span>
 				</div>
 
 				<span class="middle">|</span>
@@ -77,8 +81,10 @@ import AMap from "@/components/AMap/AMap.vue";
 import { ElMessage, FormInstance, ElForm, FormRules } from "element-plus";
 // import router from "@/routers";
 import { LOGIN_URL } from "@/config/config";
+import { GlobalStore } from "@/stores";
 
 const router = useRouter();
+const globalStore = GlobalStore();
 
 type FormInstance = InstanceType<typeof ElForm>;
 const loginFormRef = ref<FormInstance>();

src/views/login/index.scss

@@ -1,10 +1,10 @@
 .login-container {
 	height: 100%;
 	min-height: 550px;
-	background: url("@/assets/images/login/loginBackground.jpg") center center no-repeat;
+	// background: url("@/assets/images/login/loginBackground.jpg") center center no-repeat;
 	background-color: #eeeeee;
 	background-size: 100% 100%;
-	background-size: cover;
+	// background-size: cover;
 	.login-box {
 		position: relative;
 		box-sizing: border-box;
@@ -14,7 +14,6 @@
 		width: 96%;
 		height: 94%;
 		padding: 0 50px;
-
 		// background-color: hsl(0deg 0% 100% / 80%);
 		border-radius: 10px;
 		.dark {
@@ -27,8 +26,8 @@
 			height: 473px;
 
 			// margin: 0 10px 0 0;
-			background: url("@/assets/images/login/Group 2585.jpg") repeat-x 0 0;
+			// background: url("@/assets/images/login/Group 2585.jpg") repeat-x 0 0;
-			background-size: 100%;
+			background-size: 100% 100%;
 			img {
 				// width: 100%;
 				// height: 100%;

src/views/login/index.vue

@@ -1,11 +1,11 @@
 <template>
-	<div class="login-container flx-center">
+	<div class="login-container flx-center" :style="{ backgroundImage: `url(${globalStore.systemConfigBg})` }">
 		<div class="login-box">
 			<!-- <SwitchDark class="dark" /> -->
-			<div class="login-left">
+			<div class="login-left" :style="{ backgroundImage: `url(${globalStore.systemConfigBg})` }">
 				<!-- <img src="@/assets/images/login_left.png" alt="login" /> -->
 				<img src="@/assets/images/login/computerIcon.png" alt="" /><br />
-				<span>数字化政务监管平台</span>
+				<span>{{ globalStore.systemConfigName }}</span>
 			</div>
 			<div class="login-form">
 				<div class="login-logo">
@@ -21,8 +21,9 @@
 <script setup lang="ts" name="login">
 import SwitchDark from "@/components/SwitchDark/index.vue";
 import LoginForm from "./components/LoginForm.vue";
+import { GlobalStore } from "@/stores";
+const globalStore = GlobalStore();
 </script>
-
 <style scoped lang="scss">
 @import "./index.scss";
 </style>