From 7d2a2488ad5ee9e8102464e39ef206d42d1124dc Mon Sep 17 00:00:00 2001
From: wangting <675591594@qq.com>
Date: 星期一, 08 四月 2024 11:11:18 +0800
Subject: [PATCH] UI上下文展示引擎
---
Source/ProjectWeb/src/router/avue-router.js | 1
Source/ProjectWeb/src/components/dynamic-components/dynamic-custom.vue | 108 ++++++--------
Source/ProjectWeb/src/page/index/index.vue | 230 ++++++++++++++++----------------
Source/ProjectWeb/src/store/modules/user.js | 18 --
Source/ProjectWeb/src/util/validate.js | 8 +
Source/ProjectWeb/src/views/base/UIContentViewer.vue | 2
Source/ProjectWeb/src/util/util.js | 17 ++
7 files changed, 190 insertions(+), 194 deletions(-)
diff --git a/Source/ProjectWeb/src/components/dynamic-components/dynamic-custom.vue b/Source/ProjectWeb/src/components/dynamic-components/dynamic-custom.vue
index 4ed2338..9d7d32f 100644
--- a/Source/ProjectWeb/src/components/dynamic-components/dynamic-custom.vue
+++ b/Source/ProjectWeb/src/components/dynamic-components/dynamic-custom.vue
@@ -1,6 +1,6 @@
<template>
<div class="UI-dynamic" :id="'UI-dynamic-'+areasName+componentVO.oid">
- <div v-if="isError" style="color: #F56C6C">杩欎釜鑷畾涔夐〉闈㈢殑鍦板潃鏍煎紡涓嶆纭�傛帹鑽愪娇鐢╞s=?type=xxx&context=yyy&pparam=zzz杩欑褰㈠紡</div>
+ <div v-if="isError" style="color: #F56C6C">杩欎釜鑷畾涔夐〉闈㈢殑鍦板潃鏍煎紡涓嶆纭�傛帹鑽愪娇鐢╞s=缁勪欢name?type=xxx&context=yyy&pparam=zzz杩欑褰㈠紡</div>
<component v-else :is="currentComponent"
:btmType="btmType"
:content="content"
@@ -15,38 +15,39 @@
</template>
<script>
+import {queryStringToObject} from '@/util/util'
export default {
name: "dynamic-custom",
- components:{
- 'UI':()=>import('@/views/base/UIContentViewerInDialog'),
- 'test':()=>import('@/views/custom-ui/test'),
- 'test2':()=>import('@/views/custom-ui/test2'),
+ components: {
+ 'UI': () => import('@/views/base/UIContentViewerInDialog'),
+ 'test': () => import('@/views/custom-ui/test'),
+ 'test2': () => import('@/views/custom-ui/test2'),
},
- props:{
- componentVO:{
- type:Object,
+ props: {
+ componentVO: {
+ type: Object,
default: {}
},
inDialog: {
type: Boolean,
default: false
},
- areasName:{
- type:String,
- default:''
+ areasName: {
+ type: String,
+ default: ''
},
- sourceData:{
+ sourceData: {
//鎵�灞炲尯鍩熺殑涓婁竴鍖哄煙閫変腑鏁版嵁
- type:Object,
+ type: Object,
default: {}
},
- dataStore:{
+ dataStore: {
//寮圭獥鏃舵寜閽墍灞炲尯鍩熼�変腑鏁版嵁
- type:Array,
+ type: Array,
default: []
},
- paramVOS:{
- type:Object,
+ paramVOS: {
+ type: Object,
default: {}
},
isShow: {
@@ -57,17 +58,17 @@
},
data() {
return {
- btmType:'',
- content:'',
- urlParams:{},
- height:'300px',
- customClass:this.componentVO.customClass, //bs=?type=xxx&context=yyy¶m=zzz 鎴栬�� bs=缁勪欢name?type=xxx&context=yyy¶m=zzz
- isError:false, //璺緞瑙ｆ瀽澶辫触
+ btmType: '',
+ content: '',
+ urlParams: {},
+ height: '300px',
+ customClass: this.componentVO.customClass, //bs=?type=xxx&context=yyy¶m=zzz 鎴栬�� bs=缁勪欢name?type=xxx&context=yyy¶m=zzz
+ isError: false, //璺緞瑙ｆ瀽澶辫触
currentComponent: 'UI',//缁勪欢name
}
},
- watch:{
- sourceData:{
+ watch: {
+ sourceData: {
handler(newval) {
//婧愭暟鎹湁鍙樺寲鏃跺彉鏇村綋鍓嶅尯鍩熸暟鎹�
console.log(this.areasName);
@@ -75,51 +76,38 @@
}
}
},
- computed:{
- },
+ computed: {},
created() {
},
mounted() {
- if(this.customClass.indexOf("bs=") <0){
- this.isError=true;
- return ;
+ if (this.customClass.indexOf("bs=") < 0) {
+ this.isError = true;
+ return;
}
- this.customClass=this.componentVO.customClass.split("bs=")[1];
- if(this.customClass.indexOf("?") <0 || this.customClass.indexOf("type=") <0 || this.customClass.indexOf("context=") <0){
- this.isError=true;
- return ;
+ this.customClass = this.componentVO.customClass.split("bs=")[1];
+ if (this.customClass.indexOf("?") < 0 || this.customClass.indexOf("type=") < 0 || this.customClass.indexOf("context=") < 0) {
+ this.isError = true;
+ return;
}
- if(this.customClass.split('?')[0]!='' && this.customClass.split('?')[0]!='UI' && this.customClass.split('?')[0]!='ui'){
- this.currentComponent=this.customClass.split('?')[0];
+ if (this.customClass.split('?')[0] != '' && this.customClass.split('?')[0] != 'UI' && this.customClass.split('?')[0] != 'ui') {
+ this.currentComponent = this.customClass.split('?')[0];
}
- this.customClass=this.componentVO.customClass.split("?")[1].split('&');
- let urlParams={};
- let btmType=''
- let content=''
- this.customClass.forEach(item=>{
- var preParam =item.split("=");
- if(preParam[0]=='type'){
- btmType=preParam[1];
- }else if(preParam[0]=='context'){
- content=preParam[1];
- }else{
- urlParams[preParam[0]] = preParam[1];
- }
- })
+ let urlParams = queryStringToObject(this.customClass);
+ let btmType = urlParams.type;
+ let content = urlParams.context;
-
- this.btmType=btmType,
- this.content=content,
- this.urlParams=Object.assign(this.paramVOS,urlParams)
+ this.btmType = btmType;
+ this.content = content;
+ this.urlParams = Object.assign(this.paramVOS, urlParams)
//this.getHeight(this.$parent);
- },
- methods:{
- getHeight(el){
- if(el.$el.clientHeight>50){
- this.height=el.$el.clientHeight+'px';
- }else {
+ },
+ methods: {
+ getHeight(el) {
+ if (el.$el.clientHeight > 50) {
+ this.height = el.$el.clientHeight + 'px';
+ } else {
this.getHeight(el.$parent);
}
}
diff --git a/Source/ProjectWeb/src/page/index/index.vue b/Source/ProjectWeb/src/page/index/index.vue
index 1fdad95..733a9ba 100644
--- a/Source/ProjectWeb/src/page/index/index.vue
+++ b/Source/ProjectWeb/src/page/index/index.vue
@@ -29,129 +29,129 @@
</template>
<script>
- import {mapGetters} from "vuex";
- import tags from "./tags";
- import search from "./search";
- import top from "./top/";
- import sidebar from "./sidebar/";
- import admin from "@/util/admin";
- import {validatenull} from "@/util/validate";
- import {calcDate} from "@/util/date.js";
- import {getStore} from "@/util/store.js";
+import {mapGetters} from "vuex";
+import tags from "./tags";
+import search from "./search";
+import top from "./top/";
+import sidebar from "./sidebar/";
+import admin from "@/util/admin";
+import {validatenull} from "@/util/validate";
+import {calcDate} from "@/util/date.js";
+import {getStore} from "@/util/store.js";
- export default {
- components: {
- top,
- tags,
- search,
- sidebar
+export default {
+ components: {
+ top,
+ tags,
+ search,
+ sidebar
+ },
+ name: "index",
+ provide() {
+ return {
+ index: this
+ };
+ },
+ data() {
+ return {
+ //鎼滅储鎺у埗
+ isSearch: false,
+ //鍒锋柊token閿�
+ refreshLock: false,
+ //鍒锋柊token鐨勬椂闂�
+ refreshTime: "",
+ loading:true
+ };
+ },
+
+ created() {
+ //瀹炴椂妫�娴嬪埛鏂皌oken
+ this.refreshToken();
+
+ },
+ mounted() {
+ this.init();
+ // 宸︿晶鑿滃崟鍔犺浇
+ setTimeout(()=>{
+ this.loading=false
+ },600)
+ },
+ computed: mapGetters(["isMenu", "isLock", "isCollapse", "website", "menu"]),
+ props: [],
+ methods: {
+ showCollapse() {
+ this.$store.commit("SET_COLLAPSE");
},
- name: "index",
- provide() {
- return {
- index: this
+ // 鍒濆鍖�
+ init() {
+ this.$store.commit("SET_SCREEN", admin.getScreen());
+ window.onresize = () => {
+ setTimeout(() => {
+ this.$store.commit("SET_SCREEN", admin.getScreen());
+ }, 0);
+
};
+ this.$store.dispatch("FlowRoutes").then(() => {
+ });
},
- data() {
- return {
- //鎼滅储鎺у埗
- isSearch: false,
- //鍒锋柊token閿�
- refreshLock: false,
- //鍒锋柊token鐨勬椂闂�
- refreshTime: "",
- loading:true
- };
- },
-
- created() {
- //瀹炴椂妫�娴嬪埛鏂皌oken
- this.refreshToken();
-
- },
- mounted() {
- this.init();
- // 宸︿晶鑿滃崟鍔犺浇
- setTimeout(()=>{
- this.loading=false
- },600)
- },
- computed: mapGetters(["isMenu", "isLock", "isCollapse", "website", "menu"]),
- props: [],
- methods: {
- showCollapse() {
- this.$store.commit("SET_COLLAPSE");
- },
- // 鍒濆鍖�
- init() {
- this.$store.commit("SET_SCREEN", admin.getScreen());
- window.onresize = () => {
- setTimeout(() => {
- this.$store.commit("SET_SCREEN", admin.getScreen());
- }, 0);
-
- };
- this.$store.dispatch("FlowRoutes").then(() => {
- });
- },
- //鎵撳紑鑿滃崟
- openMenu(item = {}) {
- this.$store.dispatch("GetMenu", item.id).then(data => {
- if (data.length !== 0) {
- this.$router.$avueRouter.formatRoutes(data, true);
- }
- //褰撶偣鍑婚《閮ㄨ彍鍗曞悗榛樿鎵撳紑绗竴涓彍鍗�
- /*if (!this.validatenull(item)) {
- let itemActive = {},
- childItemActive = 0;
- if (item.path) {
- itemActive = item;
+ //鎵撳紑鑿滃崟
+ openMenu(item = {}) {
+ this.$store.dispatch("GetMenu", item.id).then(data => {
+ if (data.length !== 0) {
+ this.$router.$avueRouter.formatRoutes(data, true);
+ }
+ //褰撶偣鍑婚《閮ㄨ彍鍗曞悗榛樿鎵撳紑绗竴涓彍鍗�
+ /*if (!this.validatenull(item)) {
+ let itemActive = {},
+ childItemActive = 0;
+ if (item.path) {
+ itemActive = item;
+ } else {
+ if (this.menu[childItemActive].length === 0) {
+ itemActive = this.menu[childItemActive];
} else {
- if (this.menu[childItemActive].length === 0) {
- itemActive = this.menu[childItemActive];
- } else {
- itemActive = this.menu[childItemActive].children[childItemActive];
- }
+ itemActive = this.menu[childItemActive].children[childItemActive];
}
- this.$store.commit('SET_MENU_ID', item);
- this.$router.push({
- path: this.$router.$avueRouter.getPath({
- name: (itemActive.label || itemActive.name),
- src: itemActive.path
- }, itemActive.meta)
- });
- }*/
-
- });
- },
- // 瀹氭椂妫�娴媡oken
- refreshToken() {
- this.refreshTime = setInterval(() => {
- const token = getStore({
- name: "token",
- debug: true
- }) || {};
- const date = calcDate(token.datetime, new Date().getTime());
- if (validatenull(date)) return;
- if (date.seconds >= this.website.tokenTime && !this.refreshLock) {
- this.refreshLock = true;
- this.$store
- .dispatch("refreshToken")
- .then(() => {
- this.refreshLock = false;
- })
- .catch(() => {
- this.refreshLock = false;
- });
}
- }, 10000);
- }
+ this.$store.commit('SET_MENU_ID', item);
+ this.$router.push({
+ path: this.$router.$avueRouter.getPath({
+ name: (itemActive.label || itemActive.name),
+ src: itemActive.path
+ }, itemActive.meta)
+ });
+ }*/
+
+ });
+ },
+ // 瀹氭椂妫�娴媡oken
+ refreshToken() {
+ this.refreshTime = setInterval(() => {
+ const token = getStore({
+ name: "token",
+ debug: true
+ }) || {};
+ const date = calcDate(token.datetime, new Date().getTime());
+ if (validatenull(date)) return;
+ if (date.seconds >= this.website.tokenTime && !this.refreshLock) {
+ this.refreshLock = true;
+ this.$store
+ .dispatch("refreshToken")
+ .then(() => {
+ this.refreshLock = false;
+ })
+ .catch(() => {
+ this.refreshLock = false;
+ });
+ }
+ }, 10000);
}
- };
+ }
+};
</script>
<style lang="scss">
- #avue-view .avue-view{
- height: 100%;
- padding: 0 6px !important;
- }
+#avue-view > .avue-view{
+ height: 100%;
+ padding: 0 6px !important;
+}
</style>
diff --git a/Source/ProjectWeb/src/router/avue-router.js b/Source/ProjectWeb/src/router/avue-router.js
index 9d2fc30..e8f5e4b 100644
--- a/Source/ProjectWeb/src/router/avue-router.js
+++ b/Source/ProjectWeb/src/router/avue-router.js
@@ -90,7 +90,6 @@
* first: 涓轰簡鍖哄垎澶栫晫 璋冪敤formatRoutes 鍜� 褰撳墠鏂囦欢璋冪敤 formatRoutes
*/
formatRoutes: function (aMenu = [], first) {
- // debugger;
const aRouter = []
// 鑾峰彇鍒板叏灞�閰嶇疆涓殑 props
const propsConfig = this.$website.menu.props;
diff --git a/Source/ProjectWeb/src/store/modules/user.js b/Source/ProjectWeb/src/store/modules/user.js
index 4f07444..a5bf964 100644
--- a/Source/ProjectWeb/src/store/modules/user.js
+++ b/Source/ProjectWeb/src/store/modules/user.js
@@ -2,7 +2,7 @@
import {Message} from 'element-ui'
import {setStore, getStore} from '@/util/store'
import {isURL, validatenull} from '@/util/validate'
-import {deepClone} from '@/util/util'
+import {deepClone,queryStringToObject} from '@/util/util'
import website from '@/config/website'
import {loginByUsername, loginBySocial, loginBySso, getUserInfo, logout, refreshToken, getButtons} from '@/api/user'
import {getTopMenu, getRoutes} from '@/api/system/menu'
@@ -38,25 +38,11 @@
item.path = '/' + item.code;
item.query = {}; // 鍒濆鍖� item.query
item.query = queryStringToObject(item.pathValue)
- console.log('item', item);
if (item.children && item.children.length > 0) {
updateCode(item.children);
}
});
}
-function queryStringToObject(queryString) {
- const index = queryString.indexOf('?');
- if (index !== -1) {
- queryString = queryString.substring(index + 1);
- }
- const params = new URLSearchParams(queryString);
- const obj = {};
- for (const [key, value] of params.entries()) {
- obj[key] = value;
- }
- return obj;
-}
-
const user = {
state: {
@@ -77,7 +63,6 @@
loginByUsername(userInfo.tenantId, userInfo.deptId, userInfo.roleId, userInfo.username, md5(userInfo.password), userInfo.type, userInfo.key,).then(res => {
const data = res.data;
if (data.success) {
- debugger;
commit('SET_TOKEN', data.obj.sessionInfo.token);
commit('SET_REFRESH_TOKEN', data.obj.sessionInfo.token);
commit('SET_TENANT_ID', data.tenant_id);
@@ -257,7 +242,6 @@
},
mutations: {
SET_TOKEN: (state, token) => {
- debugger;
setToken(token);
state.token = token;
setStore({name: 'token', content: state.token})
diff --git a/Source/ProjectWeb/src/util/util.js b/Source/ProjectWeb/src/util/util.js
index 9df90d0..64fe71e 100644
--- a/Source/ProjectWeb/src/util/util.js
+++ b/Source/ProjectWeb/src/util/util.js
@@ -389,3 +389,20 @@
window.open(URL.createObjectURL(file));
}
}
+
+/**
+ * 瑙ｆ瀽鍦板潃鍙傛暟
+ * @param {String} queryString - 鍦板潃?鍚庨潰閮ㄥ垎
+ */
+export const queryStringToObject = (queryString) => {
+ const index = queryString.indexOf('?');
+ if (index !== -1) {
+ queryString = queryString.substring(index + 1);
+ }
+ const params = new URLSearchParams(queryString);
+ const obj = {};
+ for (const [key, value] of params.entries()) {
+ obj[key] = value;
+ }
+ return obj;
+}
diff --git a/Source/ProjectWeb/src/util/validate.js b/Source/ProjectWeb/src/util/validate.js
index c4e4de8..80e2d65 100644
--- a/Source/ProjectWeb/src/util/validate.js
+++ b/Source/ProjectWeb/src/util/validate.js
@@ -173,6 +173,14 @@
else return true;
};
+/**
+ * URL鍦板潃
+ * @param {*} s
+ */
+export function isURL(s) {
+ return /^http[s]?:\/\/.*/.test(s)
+}
+
// 鐧诲綍璐﹀彿 (瀛楁瘝寮�澶达紝鍏佽5-16瀛楄妭锛屽厑璁稿瓧姣嶆暟瀛椾笅鍒掔嚎)
export const verifyAccount = (val) => {
const petter = /^[a-zA-Z][a-zA-Z0-9_]{4,15}$/;
diff --git a/Source/ProjectWeb/src/views/base/UIContentViewer.vue b/Source/ProjectWeb/src/views/base/UIContentViewer.vue
index 7eb33d1..60f6004 100644
--- a/Source/ProjectWeb/src/views/base/UIContentViewer.vue
+++ b/Source/ProjectWeb/src/views/base/UIContentViewer.vue
@@ -77,7 +77,7 @@
computed: {},
created() {
if (verifyNull(this.$route.query.type) || (verifyNull(this.$route.query.context) && verifyNull(this.$route.query.content))) {
- this.$message.error("閰嶇疆鐨勪俊鎭敊璇紝璇峰弬鑰僢s=?type=xxx&context=yyy¶m=zzz杩欑褰㈠紡銆傚叾涓璽ype鏄笟鍔＄被鍨嬶紙鎴栭摼鎺ョ被鍨嬶級锛宑ontext鏄疷I涓婁笅鏂囩殑鍚嶇О");
+ this.$message.error("閰嶇疆鐨勪俊鎭敊璇紝璇峰弬鑰僢s=缁勪欢name?type=xxx&context=yyy¶m=zzz杩欑褰㈠紡銆傚叾涓璽ype鏄笟鍔＄被鍨嬶紙鎴栭摼鎺ョ被鍨嬶級锛宑ontext鏄疷I涓婁笅鏂囩殑鍚嶇О");
return false;
}
this.btmType=this.$route.query.type;
--
Gitblit v1.9.3