admin/wisdomisitezwfront-web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
kun 2023-09-22 11:50:33 +08:00
parent b970a8ebf8
commit 43e213caff
17 changed files with 289 additions and 96 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
src/App.vue
View File

@ -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就会导致地图搜索失效

4
src/api/modules/jxjview.ts
View File

@ -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);

3
src/components/layoutTop/index.scss
View File

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

8
src/components/layoutTop/index.vue
View File

@ -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" />
<span>数字化政务监管平台</span>
<img
: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>

30
src/directives/modules/waterMarker.ts
View File

@ -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")})`;
waterMark.setAttribute("style", style);
changeStyle = `${style}background-image: url(${can.toDataURL("image/png")})`;
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;

3
src/layouts/LayoutClassic/index.scss
View File

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

10
src/layouts/LayoutClassic/index.vue
View File

@ -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" />
<span>数字化政务监管平台</span>
<img
: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">

6
src/stores/index.ts
View File

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

3
src/stores/interface/index.ts
View File

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

2
src/views/goverment/engineeringAcceptance/acceptancePlan/index.vue
View File

@ -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="['项目名称', '工程名称']"

2
src/views/home/index.scss
View File

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

10
src/views/home/index.vue
View File

@ -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" />
<span>数字化政务监管平台</span>
<img
: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)">

237
src/views/jxjview/system/index.vue
View File

@ -29,47 +29,99 @@
<el-button type="danger" link :icon="Delete" @click="deleteAccount(scope.row)">删除</el-button>
</template>
</ProTable>
<DialogForm
:title="title"
:formConfig="formConfig"
:formData="formData"
v-model:visible="visible"
append-to-body
width="700px"
@confirm="saveItem"
<!-- 配置窗口 -->
<el-dialog class="imgDialog" :title="title" v-model="visible" width="700px" show-close>
<el-form class="diaForm" :rules="rules" :model="formData" ref="ruleFormRef" label-width="160px">
<el-form-item label="配置名称：" prop="configName">
<el-input v-model="formData.configName" placeholder="请输入" />
</el-form-item>
<el-form-item label="配置键名：" prop="configKey">
<el-input v-model="formData.configKey" placeholder="请输入" />
</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 formConfig = {
formItemConfig: [
{
label: "配置名称",
prop: "configName",
type: "input"
},
{
label: "配置键名",
prop: "configKey",
type: "input"
},
{
label: "配置键值",
prop: "configValue",
type: "input"
},
{
label: "备注",
prop: "remark",
type: "input"
}
],
rules: {
const rules = reactive<FormRules>({
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>

10
src/views/login/CompanyLogon/index.vue
View File

@ -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" />
<span>数字化政务监管平台</span>
<img
: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({});

10
src/views/login/ProJectForm/index.vue
View File

@ -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" />
<span>数字化政务监管平台</span>
<img
: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>();

9
src/views/login/index.scss
View File

@ -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-size: 100%;
// background: url("@/assets/images/login/Group 2585.jpg") repeat-x 0 0;
background-size: 100% 100%;
img {
// width: 100%;
// height: 100%;

9
src/views/login/index.vue
View File

@ -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>