104e9a2d by lihua

登录角色选择,数据提供方首页

1 parent 7e785a08

2.44 MB | W: | H:

514 KB | W: | H:

src/assets/images/login-bg.png
src/assets/images/login-bg.png
src/assets/images/login-bg.png
src/assets/images/login-bg.png
  • 2-up
  • Swipe
  • Onion skin
1 import type { RouteRecordRaw } from 'vue-router'
2 function Layout() {
3 return import('@/layouts/index.vue')
4 }
5 const routes: RouteRecordRaw[] = [
6 {
7 path: '/data-home-index',
8 component: Layout,
9 meta: {
10 title: '首页',
11 icon: 'sidebar-videos',
12 },
13 children: [{
14 path: '',
15 name: 'homeIndex',
16 component: () => import('@/views/homeIndex.vue'),
17 meta: {
18 title: '首页',
19 sidebar: false,
20 breadcrumb: false,
21 cache: true
22 },
23 }]
24 },
25 ]
26 export default routes
...@@ -5,6 +5,7 @@ import DataAssess from './modules/dataAsset'; ...@@ -5,6 +5,7 @@ import DataAssess from './modules/dataAsset';
5 import DataService from './modules/dataService'; 5 import DataService from './modules/dataService';
6 import DataSmartContract from './modules/dataSmartContract'; 6 import DataSmartContract from './modules/dataSmartContract';
7 import DataFacilitator from './modules/dataFacilitator'; 7 import DataFacilitator from './modules/dataFacilitator';
8 import HomeIndex from './modules/homeIndex';
8 9
9 import useSettingsStore from '@/store/modules/settings' 10 import useSettingsStore from '@/store/modules/settings'
10 11
...@@ -95,6 +96,7 @@ const asyncRoutes: RouteRecordRaw[] = [ ...@@ -95,6 +96,7 @@ const asyncRoutes: RouteRecordRaw[] = [
95 ...DataService, 96 ...DataService,
96 ...DataSmartContract, 97 ...DataSmartContract,
97 ...DataFacilitator, 98 ...DataFacilitator,
99 ...HomeIndex,
98 // ...DataAssetRegistry, 100 // ...DataAssetRegistry,
99 ] 101 ]
100 102
......
...@@ -30,6 +30,7 @@ const useUserStore = defineStore( ...@@ -30,6 +30,7 @@ const useUserStore = defineStore(
30 /* idass的登录页面url,退出登录需要跳转到登录页。*/ 30 /* idass的登录页面url,退出登录需要跳转到登录页。*/
31 const idassLoginUrl = import.meta.env.VITE_IDASS_BASEURL; 31 const idassLoginUrl = import.meta.env.VITE_IDASS_BASEURL;
32 const timer: any = ref(null); 32 const timer: any = ref(null);
33 const isGetCurrUserInfo = ref(false); //记录登录时是否已经获取登录用户的信息,根据用户信息展示角色选择对话框。
33 //获取token. 34 //获取token.
34 function getToken(data, state) { 35 function getToken(data, state) {
35 data.platformGuid = "28c1bc94919d410a85d6d4ce6cbb702f"; 36 data.platformGuid = "28c1bc94919d410a85d6d4ce6cbb702f";
...@@ -63,29 +64,58 @@ const useUserStore = defineStore( ...@@ -63,29 +64,58 @@ const useUserStore = defineStore(
63 ElMessage.error(res.msg) 64 ElMessage.error(res.msg)
64 } 65 }
65 }) 66 })
66 return getCurrentUserInfo({ tenantGuid: currentTenantGuid.value }).then((res: any) => { 67 return getCurrentUserInfo({tenantGuid: currentTenantGuid.value}).then((res: any) => {
67 console.log(res, 'getCurrentUserInfo'); 68 console.log(res, 'getCurrentUserInfo');
68 if (res.code == '00000') { 69 if (res.code == '00000') {
69 userName.value = res.data.staffName; 70 userName.value = res.data.staffName;
70 localStorage.setItem('userName', res.data?.staffName); 71 localStorage.setItem('userName', res.data?.staffName);
71 localStorage.setItem('userData', JSON.stringify(res.data)); 72 localStorage.setItem('userData', JSON.stringify(res.data));
72 userData.value = localStorage.getItem('userData'); 73 userData.value = localStorage.getItem('userData');
73 return getSystemMenu({ tenantGuid: currentTenantGuid.value }, res.data?.isAdmin == 'Y' && (!res.data?.superTubeFlag || res.data?.superTubeFlag == 'Y')).then((info: any) => { //解决页面调用流程接口传递staffGuid,为空的问题 74 isGetCurrUserInfo.value = true
74 if (info.code == '00000') { 75 // return getSystemMenu({ tenantGuid: currentTenantGuid.value }, res.data?.isAdmin == 'Y' && (!res.data?.superTubeFlag || res.data?.superTubeFlag == 'Y')).then((info: any) => { //解决页面调用流程接口传递staffGuid,为空的问题
75 localStorage.setItem('userInfoData', JSON.stringify(info.data)); 76 // if (info.code == '00000') {
76 userInfoData.value = info.data; 77 // localStorage.setItem('userInfoData', JSON.stringify(info.data));
77 // window.location.href = location.origin + info.data[0].menuList[0].path 78 // userInfoData.value = info.data;
79 // // window.location.href = location.origin + info.data[0].menuList[0].path
80 // } else {
81 // ElMessage.error(info.msg)
82 // }
83 // })
78 } else { 84 } else {
79 ElMessage.error(info.msg) 85 ElMessage.error(res.msg)
80 } 86 }
81 }) 87 })
82 } else { 88 } else {
83 ElMessage.error(res.msg) 89 isLogin.value = false;
90 isGetCurrUserInfo.value = false;
91 // ElMessage.error(res.msg);//授权码被重复使用,不抛出异常。
84 } 92 }
85 }) 93 })
94 // } else {
95 // isLogin.value = false;
96 // // ElMessage.error(res.msg);//授权码被重复使用,不抛出异常。
97 // }
98 // });
99 }
100
101 /** 根据选择的角色获取用户菜单 */
102 function getUserSystemMenuByRole(role) {
103 let data = localStorage.getItem('userData');
104 let userData = data && JSON.parse(data);
105 return getSystemMenu(
106 { tenantGuid: localStorage.getItem('currentTenantGuid') },
107 userData?.isAdmin == "Y" &&
108 (!userData?.superTubeFlag ||
109 userData?.superTubeFlag == "Y")
110 ).then((info: any) => {
111 //解决页面调用流程接口传递staffGuid,为空的问题
112 if (info.code == "00000") {
113 localStorage.setItem("userInfoData", JSON.stringify(info.data));
114 userInfoData.value = info.data;
115 // window.location.href = location.origin + info.data[0].menuList[0].path
116 return true;
86 } else { 117 } else {
87 isLogin.value = false; 118 ElMessage.error(info.msg);
88 // ElMessage.error(res.msg);//授权码被重复使用,不抛出异常。
89 } 119 }
90 }); 120 });
91 } 121 }
...@@ -181,6 +211,7 @@ const useUserStore = defineStore( ...@@ -181,6 +211,7 @@ const useUserStore = defineStore(
181 token.value = ''; 211 token.value = '';
182 timer.value && clearInterval(timer.value); 212 timer.value && clearInterval(timer.value);
183 isLogin.value = false; 213 isLogin.value = false;
214 isGetCurrUserInfo.value = false;
184 userInfoData.value = []; 215 userInfoData.value = [];
185 routeStore.removeRoutes() 216 routeStore.removeRoutes()
186 menuStore.setActived(0) 217 menuStore.setActived(0)
...@@ -199,6 +230,7 @@ const useUserStore = defineStore( ...@@ -199,6 +230,7 @@ const useUserStore = defineStore(
199 token.value = ''; 230 token.value = '';
200 timer.value && clearInterval(timer.value); 231 timer.value && clearInterval(timer.value);
201 isLogin.value = false; 232 isLogin.value = false;
233 isGetCurrUserInfo.value = false;
202 userInfoData.value = []; 234 userInfoData.value = [];
203 routeStore.removeRoutes() 235 routeStore.removeRoutes()
204 menuStore.setActived(0) 236 menuStore.setActived(0)
...@@ -323,9 +355,11 @@ const useUserStore = defineStore( ...@@ -323,9 +355,11 @@ const useUserStore = defineStore(
323 currentTime, 355 currentTime,
324 permissions, 356 permissions,
325 isLogin, 357 isLogin,
358 isGetCurrUserInfo,
326 isLoginOut, 359 isLoginOut,
327 getTokenPromise, 360 getTokenPromise,
328 getToken, 361 getToken,
362 getUserSystemMenuByRole,
329 login, 363 login,
330 logout, 364 logout,
331 getPermissions, 365 getPermissions,
......
...@@ -8,48 +8,98 @@ meta: ...@@ -8,48 +8,98 @@ meta:
8 8
9 <script lang="ts" setup> 9 <script lang="ts" setup>
10 import useUserStore from '@/store/modules/user'; 10 import useUserStore from '@/store/modules/user';
11 import { ElMessage } from 'element-plus';
11 12
12 const userStore = useUserStore() 13 const userStore = useUserStore()
13 const router = useRouter() 14 const router = useRouter()
15 const route = useRoute()
14 16
15 const data = ref({ 17 /** 对话框显示隐藏 */
16 inter: NaN, 18 const dialogVisible = computed(() => {
17 countdown: 5, 19 return route.query.code && userStore.isGetCurrUserInfo;
18 }) 20 });
21
22 const loading = ref(false);
23
24 /** 记录用户选择的角色 */
25 const selectRole = ref('use');
19 26
20 onBeforeRouteLeave(() => { 27 onBeforeRouteLeave(() => {
21 data.value.inter && clearInterval(data.value.inter)
22 }) 28 })
23 29
24 onMounted(() => { 30 onMounted(() => {
25 // data.value.inter = setInterval(() => {
26 // data.value.countdown--
27 // if (data.value.countdown === 0) {
28 // data.value.inter && clearInterval(data.value.inter)
29 // goBack()
30 // }
31 // }, 1000)
32 goBack() 31 goBack()
33 }) 32 })
34 33
35 function goBack() { 34 function goBack() {
35 }
36
37 const beforeLogin = () => {
36 if (userStore.getTokenPromise) { 38 if (userStore.getTokenPromise) {
37 userStore.getTokenPromise.then(() => { 39 userStore.getTokenPromise.then(() => {
38 router.push('/') 40 userStore.getUserSystemMenuByRole(selectRole.value).then((res) => {
41 if (res === true) {
42 userStore.isGetCurrUserInfo = false;
43 }
44 router.push('/')
45 })
39 }); 46 });
40 } else { 47 } else {
41 router.push('/') 48 userStore.getUserSystemMenuByRole(selectRole.value).then((res) => {
49 if (res === true) {
50 userStore.isGetCurrUserInfo = false;
51 }
52 router.push('/')
53 })
42 } 54 }
43 } 55 }
56
44 </script> 57 </script>
45 58
46 <template> 59 <template>
47 <div class="notfound"> 60 <div class="full-page">
48 <img style="width: 480px; height: 110px;" src="../../public/swzl_logo.gif"> 61 <div class="notfound" v-show="!dialogVisible">
62 <img style="width: 480px; height: 110px;" src="../../public/swzl_logo.gif">
63 </div>
64 <div class="bg-banner" v-if="dialogVisible">
65 <div id="login-box">
66 <div class="login_form login-size">
67 <div class="login-title">选择角色</div>
68 <div class="row-main">
69 <div class="per" :class="selectRole == 'use' ? 'selected' : ''" @click="selectRole = 'use'">
70 <div class="img-use"></div>
71 <div class="title">数据使用方</div>
72 </div>
73 <div class="per" :class="selectRole == 'provider' ? 'selected' : ''" @click="selectRole = 'provider'">
74 <div class="img-provider"></div>
75 <div class="title">数据提供方</div>
76 </div>
77 <div class="per" :class="selectRole == 'operation' ? 'selected' : ''" @click="selectRole = 'operation'">
78 <div class="img-operation"></div>
79 <div class="title">平台运营方</div>
80 </div>
81 </div>
82 <div class="login-footer">
83 <el-button :loading="loading" ref="loginButton" type="primary" size="large" style="width: 100%;"
84 @click.prevent="beforeLogin">确认</el-button>
85 </div>
86 </div>
87 </div>
88 <div class="copyright_text">
89 <span>Copyright © 2015-2024</span>
90 <a style="color: #4FA1A4;margin: 0 8px;" href="https://beian.miit.gov.cn" target="_blank">京ICP备2024044205号</a>
91 <span>北京传世博润科技有限公司</span>
92 </div>
93 </div>
49 </div> 94 </div>
50 </template> 95 </template>
51 96
52 <style lang="scss" scoped> 97 <style lang="scss" scoped>
98 .full-page {
99 height: 100%;
100 width: 100%;
101 }
102
53 .notfound { 103 .notfound {
54 display: flex; 104 display: flex;
55 align-items: center; 105 align-items: center;
...@@ -77,4 +127,166 @@ function goBack() { ...@@ -77,4 +127,166 @@ function goBack() {
77 } 127 }
78 } 128 }
79 } 129 }
130
131 .bg-banner {
132 // position: fixed;
133 // z-index: 1001;
134 width: 100%;
135 height: 100%;
136 background-image: url('@/assets/images/login-bg.png');
137 background-size: cover;
138 /* 背景图覆盖整个元素 */
139 background-position: center;
140 /* 背景图居中 */
141 background-repeat: no-repeat;
142 /* 防止背景图重复 */
143 }
144
145 #login-box {
146 display: flex;
147 justify-content: center;
148 align-items: center;
149 height: 100%;
150
151 .login-form {
152 display: flex;
153 flex-direction: column;
154 justify-content: center;
155 min-height: 500px;
156 width: 368px;
157 overflow: hidden;
158
159 .title-container {
160 position: relative;
161
162 .title {
163 font-size: 28px;
164 color: #212121;
165 letter-spacing: 0;
166 text-align: center;
167 line-height: 42px;
168 font-weight: 600;
169 margin-bottom: 32px;
170 }
171 }
172 }
173
174 }
175
176 .login-title {
177 font-family: PingFangSC-Semibold;
178 font-size: 24px;
179 color: #212121;
180 letter-spacing: 0;
181 line-height: 36px;
182 font-weight: 600;
183 margin-bottom: 33px;
184 }
185
186 .login_form {
187 position: relative;
188 background: #FFFFFF;
189 box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.2);
190 border-radius: 2px;
191
192 .row-main {
193 display: flex;
194 flex-direction: row;
195 column-gap: 40px;
196
197 .per {
198 cursor: pointer;
199
200 &.selected {
201 .img-use {
202 background-image: url('@/assets/images/dataUser-select.png');
203 }
204
205 .img-provider {
206 background-image: url('@/assets/images/dataProvider-select.png');
207 }
208
209 .img-operation {
210 background-image: url('@/assets/images/dataOperation-select.png');
211 }
212
213 .title {
214 color: #1478E9;
215 }
216 }
217
218 .img-use {
219 width: 100px;
220 height: 100px;
221 background-image: url('@/assets/images/dataUser-default.png');
222 background-size: cover;
223 /* 背景图覆盖整个元素 */
224 background-position: center;
225 /* 背景图居中 */
226 background-repeat: no-repeat;
227 }
228
229 .img-provider {
230 width: 100px;
231 height: 100px;
232 background-image: url('@/assets/images/dataProvider-default.png');
233 background-size: cover;
234 /* 背景图覆盖整个元素 */
235 background-position: center;
236 /* 背景图居中 */
237 background-repeat: no-repeat;
238 }
239
240 .img-operation {
241 width: 100px;
242 height: 100px;
243 background-image: url('@/assets/images/dataOperation-default.png');
244 background-size: cover;
245 /* 背景图覆盖整个元素 */
246 background-position: center;
247 /* 背景图居中 */
248 background-repeat: no-repeat;
249 }
250
251 .title {
252 margin-top: 8px;
253 font-family: PingFangSC-Regular;
254 font-size: 14px;
255 color: #666666;
256 line-height: 21px;
257 font-weight: 400;
258 text-align: center;
259 }
260 }
261 }
262 }
263
264 .login-size {
265 padding: 40px 32px;
266 width: 444px;
267 height: 420px;
268 }
269
270 .login-footer {
271 display: flex;
272 flex-direction: column;
273 margin-top: 54px;
274 }
275
276 :deep(.el-button--primary) {
277 background-image: linear-gradient(116deg, #0C48F5 0%, #23D6D1 95%);
278 }
279
280 .copyright_text {
281 width: 100%;
282 font-size: 12px;
283 color: #2c3e50;
284 line-height: 18px;
285 text-align: center;
286 font-weight: 400;
287 position: absolute;
288 bottom: 2px;
289 left: 50%;
290 transform: translateX(-50%);
291 }
80 </style> 292 </style>
......
...@@ -21,7 +21,7 @@ import { ...@@ -21,7 +21,7 @@ import {
21 getRegisterCatalogTableList, 21 getRegisterCatalogTableList,
22 checkDamTableChange, 22 checkDamTableChange,
23 getTenantList, 23 getTenantList,
24 getDamTypesList 24 getDamTypesList,//获取数据目录分类。
25 } from "@/api/modules/dataAsset"; 25 } from "@/api/modules/dataAsset";
26 import { 26 import {
27 getValidApi, 27 getValidApi,
......
Styling with Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!