Merge pull request #202 from det101/master

Adamyuanyuan · web-flow · commit 1b8157e121dc · 2020-07-06T15:58:18.000+08:00
fix bug
diff --git a/web/src/assets/styles/login.scss b/web/src/assets/styles/login.scss
@@ -44,7 +44,6 @@
     }
     .login-main {
         width: 380px;
-        height: 300px;
         background-color: $body-background;
         margin-right: 9.5%;
         padding: 20px;
@@ -76,9 +75,15 @@
         }
     }
     .remember-user-name {
-        margin: 5px 0 0 10px;
+        margin: 0px 0 10px 10px;
     }
     .ivu-form-item {
         margin-bottom: 20px;
     }
+    .captcha-wp {
+        display: flex;
+        img{
+            height: 44px;
+        }
+    }
 }
diff --git a/web/src/assets/styles/workspace.scss b/web/src/assets/styles/workspace.scss
@@ -213,6 +213,8 @@
             display: flex;
             align-items: center;
             margin-top: -10px;
+            margin-right: 50px;
+            flex-wrap: wrap;
 
             .title-sub {
               margin-right: 10px;
diff --git a/web/src/commonData/i18n/common/en.json b/web/src/commonData/i18n/common/en.json
@@ -800,7 +800,8 @@
             "password": "Please enter password！",
             "loginSuccess": "Login Success",
             "haveLogin": "You have already logged in, please do not login repeatedly",
-            "vaildFaild": "Authentication failed!"
+            "vaildFaild": "Authentication failed!",
+            "captcha": "Please enter captcha"
         },
         "userMenu": {
             "title": "Warning",
@@ -1065,7 +1066,8 @@
                 "running": "running",
                 "stop": "disable",
                 "searchPlaceholder": "Search application",
-                "tips": "No data or no addition"
+                "tips": "No data or no addition",
+                "repeat": "You cannot add the same application repeatedly"
             }
         },
         "database": {
diff --git a/web/src/commonData/i18n/common/zh.json b/web/src/commonData/i18n/common/zh.json
@@ -800,7 +800,8 @@
             "password": "请输入密码！",
             "loginSuccess": "登录成功",
             "haveLogin": "您已经登录，请不要重复登录",
-            "vaildFaild": "验证未通过！"
+            "vaildFaild": "验证未通过！",
+            "captcha": "请输入验证码"
         },
         "userMenu": {
             "title": "警告",
@@ -1065,7 +1066,8 @@
                 "running": "运行中",
                 "stop": "不可用",
                 "searchPlaceholder": "搜索应用系统",
-                "tips": "没有数据或者未添加"
+                "tips": "没有数据或者未添加",
+                "repeat": "不能重复添加相同的应用"
             }
         },
         "database": {
diff --git a/web/src/js/component/navMenu/index.vue b/web/src/js/component/navMenu/index.vue
@@ -47,166 +47,7 @@ export default {
   data() {
     return {
       menuList: [
-        {
-          "id": 1,
-          "title": "应用开发",
-          "order": null,
-          "appInstances": [
-            {
-              "id": 1,
-              "title": "工作流开发",
-              "description": "工作流开发是微众银行微数域(WeDataSphere)打造的数据应用开发工具，以任意桥(Linkis)做为内核，将满足从数据交换、脱敏清洗、分析挖掘、质量检测、可视化展现、定时调度到数据输出等数据应用开发全流程场景需求。",
-              "labels": "工作流,数仓开发",
-              "accessButton": "进入工作流开发",
-              "accessButtonUrl": "/project",
-              "manualButton": "用户手册",
-              "manualButtonUrl": "https://www.baidu.com",
-              "projectUrl": "/workflow",
-              "name": "workflow",
-              "icon": "fi-scriptis|rgb(102, 102, 255)",
-              "order": null,
-              "active": true
-            },
-            {
-              "id": 2,
-              "title": "StreamSQL开发",
-              "description": "实时应用开发是微众银行微数域(WeDataSphere)、Boss直聘大数据团队 和 中国电信天翼云大数据团队 社区联合共建的流式解决方案，以 Linkis 做为内核，基于 Flink Engine 构建的批流统一的 Flink SQL，助力实时化转型。",
-              "labels": "流式,实时",
-              "accessButton": "联合共建中",
-              "accessButtonUrl": "/streamSQL",
-              "manualButton": "相关资讯",
-              "manualButtonUrl": "https://www.baidu.com",
-              "projectUrl": "/streamSQL/project",
-              "name": "streamSQL",
-              "icon": "fi-scriptis|rgb(102, 102, 255)",
-              "order": null,
-              "active": false
-            },
-            {
-              "id": 3,
-              "title": "数据服务开发",
-              "description": "数据服务是微众银行微数域(WeDataSphere)与 艾佳生活大数据团队 社区联合共建的统一API服务，以 Linkis 和 DataSphere Studio 做为内核，提供快速将 Scriptis 脚本生成数据API的能力，协助企业统一管理对内对外的API服务。",
-              "labels": "API,数据服务",
-              "accessButton": "联合共建中",
-              "accessButtonUrl": "/dataService",
-              "manualButton": "相关资讯",
-              "manualButtonUrl": "https://www.baidu.com",
-              "projectUrl": "/dataService/project",
-              "name": "dataService",
-              "icon": "fi-scriptis|rgb(102, 102, 255)",
-              "order": null,
-              "active": false
-            }]
-        },
-        {
-          "id": 2,
-          "title": "数据分析",
-          "order": null,
-          "appInstances": [
-            {
-              "id": 4,
-              "title": "Scriptis",
-              "description": "Scriptis是微众银行微数域(WeDataSphere)打造的一站式交互式数据探索分析工具，以任意桥(Linkis)做为内核，提供多种计算存储引擎(如Spark、Hive、TiSpark等)、Hive数据库管理功能、资源(如Yarn资源、服务器资源)管理、应用管理和各种用户资源(如UDF、变量等)管理的能力。",
-              "labels": "脚本开发,IDE",
-              "accessButton": "进入Scriptis",
-              "accessButtonUrl": "/home",
-              "manualButton": "用户手册",
-              "manualButtonUrl": "https://www.baidu.com",
-              "projectUrl": "/home",
-              "name": "scriptis",
-              "icon": "fi-scriptis|rgb(102, 102, 255)",
-              "order": null,
-              "active": true
-            },
-            {
-              "id": 5,
-              "title": "Visualis",
-              "description": "Visualis是基于宜信开源项目Davinci开发的数据可视化BI工具，以任意桥(Linkis)做为内核，支持拖拽式报表定义、图表联动、钻取、全局筛选、多维分析、实时查询等数据开发探索的分析模式，并做了水印、数据质量校验等金融级增强。",
-              "labels": "可视化,报表",
-              "accessButton": "进入Visualis",
-              "accessButtonUrl": "http://42.123.106.20:8088/dss/visualis/#/projects ",
-              "manualButton": "用户手册",
-              "manualButtonUrl": "https://www.baidu.com",
-              "projectUrl": "http://42.123.106.20:8088/dss/visualis/#/project/${projectId}",
-              "name": "visualis",
-              "icon": "fi-scriptis|rgb(102, 102, 255)",
-              "order": null,
-              "active": true
-            }]
-        },
-        {
-          "id": 3,
-          "title": "生产运维",
-          "order": null,
-          "appInstances": [
-            {
-              "id": 6,
-              "title": "Schedulis",
-              "description": "Scriptis是微众银行微数域(WeDataSphere)打造的一站式交互式数据探索分析工具，以任意桥(Linkis)做为内核，提供多种计算存储引擎(如Spark、Hive、TiSpark等)、Hive数据库管理功能、资源(如Yarn资源、服务器资源)管理、应用管理和各种用户资源(如UDF、变量等)管理的能力。",
-              "labels": "调度,工作流",
-              "accessButton": "进入Schedulis",
-              "accessButtonUrl": "http://***REMOVED***:8091/homepage",
-              "manualButton": "用户手册",
-              "manualButtonUrl": "https://www.baidu.com",
-              "projectUrl": "http://***REMOVED***:8091/manager?project=${projectName}",
-              "name": "schedulis",
-              "icon": "fi-scriptis|rgb(102, 102, 255)",
-              "order": null,
-              "active": true
-            },
-            {
-              "id": 7,
-              "title": "应用运维中心",
-              "description": "Scriptis是微众银行微数域(WeDataSphere)打造的一站式交互式数据探索分析工具，以任意桥(Linkis)做为内核，提供多种计算存储引擎(如Spark、Hive、TiSpark等)、Hive数据库管理功能、资源(如Yarn资源、服务器资源)管理、应用管理和各种用户资源(如UDF、变量等)管理的能力。",
-              "labels": "生产,运维",
-              "accessButton": "进入应用运维中心",
-              "accessButtonUrl": "/devops",
-              "manualButton": "用户手册",
-              "manualButtonUrl": "https://www.baidu.com",
-              "projectUrl": "/devops/project",
-              "name": "devops",
-              "icon": "fi-scriptis|rgb(102, 102, 255)",
-              "order": null,
-              "active": false
-            }]
-        },
-        {
-          "id": 4,
-          "title": "数据质量",
-          "order": null,
-          "appInstances": [
-            {
-              "id": 8,
-              "title": "Qualitis",
-              "description": "Qualitis是一套金融级、一站式的数据质量管理平台，提供了数据质量模型定义，数据质量结果可视化、可监控等功能，并用一整套统一的流程来定义和检测数据集的质量并及时报告问题。",
-              "labels": "生产,运维",
-              "accessButton": "进入Qualitis",
-              "accessButtonUrl": "http://***REMOVED***:8090/#/dashboard",
-              "manualButton": "用户手册",
-              "manualButtonUrl": "https://www.baidu.com",
-              "projectUrl": "http://***REMOVED***:8090/#/projects/list?id=${projectId}&flow=true",
-              "name": "qualitis",
-              "icon": "fi-scriptis|rgb(102, 102, 255)",
-              "order": null,
-              "active": true
-            },
-            {
-              "id": 9,
-              "title": "Exchangis",
-              "description": "Exchangis是一个轻量级的、高扩展性的数据交换平台，支持对结构化及无结构化的异构数据源之间的数据传输，在应用层上具有数据权限管控、节点服务高可用和多租户资源隔离等业务特性，而在数据层上又具有传输架构多样化、模块插件化和组件低耦合等架构特点。",
-              "labels": "生产,运维",
-              "accessButton": "进入Exchangis",
-              "accessButtonUrl": "http://42.123.106.20:9503",
-              "manualButton": "用户手册",
-              "manualButtonUrl": "https://www.baidu.com",
-              "projectUrl": "http://42.123.106.20:19503",
-              "name": "exchangis",
-              "icon": "fi-scriptis|rgb(102, 102, 255)",
-              "order": null,
-              "active": true
-            }]
-        }]
-      ,
+      ],
       current: null
     }
   },
diff --git a/web/src/js/view/login/index.vue b/web/src/js/view/login/index.vue
@@ -23,13 +23,23 @@
           <Input
             v-model="loginForm.password"
             type="password"
-            placeholder="请输入密码"
+            :placeholder="this.$t('message.login.password')"
             size="large" />
-          <Checkbox
-            v-model="rememberUserNameAndPass"
-            class="remember-user-name"
-            style="">{{$t('message.login.remenber')}}</Checkbox>
         </FormItem>
+        <FormItem prop="captcha" v-if="captImg">
+          <div class="captcha-wp">
+            <Input
+              v-model="loginForm.captcha"
+              type="text"
+              :placeholder="$t('message.login.captcha')"
+              size="large"/>
+            <div><img :src="captImg" @click="getCapt"></div>
+          </div>
+        </FormItem>
+        <Checkbox
+          v-model="rememberUserNameAndPass"
+          class="remember-user-name"
+          style="">{{$t('message.login.remenber')}}</Checkbox>
         <FormItem>
           <Button
             :loading="loading"
@@ -47,13 +57,17 @@
 import api from '@/js/service/api';
 import storage from '@/js/helper/storage';
 import socket from '@js/module/webSocket';
+import axios from 'axios';
 export default {
   data() {
     return {
       loading: false,
+      captImg: null,
+
       loginForm: {
         user: '',
         password: '',
+        captcha: ''
       },
       ruleInline: {
         user: [
@@ -64,6 +78,10 @@ export default {
           { required: true, message: this.$t('message.login.password'), trigger: 'blur' },
           // {type: 'string', pattern: /^(?=.*[0-9])(?=.*[a-z])(?=.*[A-Z])[0-9a-zA-Z]{8,18}$/, message: '请输入6至12位的密码', trigger: 'change'},
         ],
+        captcha: [
+          { required: true, message: this.$t('message.login.captcha'), trigger: 'blur' }
+        ]
+
       },
       rememberUserNameAndPass: false,
     };
@@ -75,6 +93,7 @@ export default {
       this.loginForm.user = userNameAndPass.split('&')[0];
       this.loginForm.password = userNameAndPass.split('&')[1];
     }
+    this.getCapt();
   },
   mounted() {
     // 如果有登录状态，且用户手动跳转到login页，则判断登录态是否过期
@@ -85,6 +104,18 @@ export default {
     socket.methods.close();
   },
   methods: {
+    getCapt(){
+      axios.get('/api/rest_j/v1/user/captcha').then(data=>{
+        api.fetch('/user/captcha', 'get').then((data)=>{
+          this.captImg = data.image
+        }).catch(()=>{
+          this.captImg = null;        
+        })
+      }).catch(err=>{
+        this.captImg = null;
+        console.warn('err', err);
+      })
+    },
     getIfLogin() {
       api.fetch('/dss/getBaseInfo', 'get').then(() => {
         this.$router.push('/');
@@ -103,6 +134,7 @@ export default {
           const params = {
             userName: this.loginForm.user,
             password: this.loginForm.password,
+            captcha: this.loginForm.captcha,
           };
           api
             .fetch(`/user/login`, params)
@@ -133,6 +165,7 @@ export default {
           this.$Message.error(this.$t('message.login.vaildFaild'));
         }
       });
+      this.getCapt();
     },
     clearSession() {
       storage.clear();
diff --git a/web/src/js/view/newhome/module/workspace/index.vue b/web/src/js/view/newhome/module/workspace/index.vue
@@ -169,15 +169,18 @@ export default {
     this.getVideos();
   },
   mounted(){
-    this.listWrap = this.$refs.row.$el.offsetWidth;
+    this.listWrap = this.$refs.row.$el && this.$refs.row.$el.offsetWidth;
     this.initWorkspace();
     window.onresize = () => {
       const that = this
       return (() => {
-        that.listWrap = this.$refs.row.$el.offsetWidth;
+        that.listWrap = this.$refs.row.$el && this.$refs.row.$el.offsetWidth;
       })()
     }
   },
+  beforeDestroy(){
+    window.onresize = null;
+  },
   watch: {
     'listWrap': function(val){ //监听容器宽度变化
       this.pageSize = Math.floor(val / 252)
diff --git a/web/src/js/view/workspace/index.vue b/web/src/js/view/workspace/index.vue

Original file line number	Diff line number	Diff line change
`@@ -44,7 +44,6 @@`
`44`	`44`	`}`
`45`	`45`	`.login-main {`
`46`	`46`	`width: 380px;`
`47`		`- height: 300px;`
`48`	`47`	`background-color: $body-background;`
`49`	`48`	`margin-right: 9.5%;`
`50`	`49`	`padding: 20px;`
`@@ -76,9 +75,15 @@`
`76`	`75`	`}`
`77`	`76`	`}`
`78`	`77`	`.remember-user-name {`
`79`		`- margin: 5px 0 0 10px;`
	`78`	`+ margin: 0px 0 10px 10px;`
`80`	`79`	`}`
`81`	`80`	`.ivu-form-item {`
`82`	`81`	`margin-bottom: 20px;`
`83`	`82`	`}`
	`83`	`+ .captcha-wp {`
	`84`	`+ display: flex;`
	`85`	`+ img{`
	`86`	`+ height: 44px;`
	`87`	`+ }`
	`88`	`+ }`
`84`	`89`	`}`