lw-cdp-ui 1.0.19 → 1.0.21

package/dist/components/lwLogin/index.vue

@@ -1,383 +1,446 @@
-<template>
-  <div class="login_bg">
-    <div class="video-container">
-      <img class="mask"
-           src="/images/video-poster.png"
-           alt="videoMask" />
-      <video autoplay
-             loop
-             class="video"
-             muted>
-        <source src="/images/video-bg.mp4"
-                type="video/mp4" />
-      </video>
-    </div>
-    <div class="login_main">
-      <div class="login_config">
-        <Lang />
-      </div>
-      <div class="login-form">
-        <div class="login-header">
-          <div class="logo">
-            <img :alt="$config.APP_NAME"
-                 src="/images/logo2.png">
-          </div>
-        </div>
-        <el-form ref="loginForm"
-                 class="form-body"
-                 :model="ruleForm"
-                 :rules="rules"
-                 label-width="0"
-                 size="large">
-          <el-form-item>
-            <div class="title-name">{{$t('login.accountLogin')}}</div>
-          </el-form-item>
-          <el-form-item prop="user">
-            <el-input v-model="ruleForm.user"
-                      prefix-icon="el-icon-user"
-                      clearable
-                      :placeholder="$t('login.userPlaceholder')">
-            </el-input>
-          </el-form-item>
-          <el-form-item prop="password">
-            <el-input v-model="ruleForm.password"
-                      prefix-icon="el-icon-lock"
-                      clearable
-                      show-password
-                      :placeholder="$t('login.PWPlaceholder')">
-            </el-input>
-          </el-form-item>
-          <el-form-item style="margin-bottom: 10px">
-            <el-row>
-              <el-col :span="12">
-                <el-checkbox :label="$t('login.rememberMe')"
-                             v-model="ruleForm.autologin"></el-checkbox>
-              </el-col>
-              <el-col :span="12"
-                      style="text-align: right">
-                <el-button type="primary"
-                           text>{{ $t("login.forgetPassword") }}？
-                </el-button>
-              </el-col>
-            </el-row>
-          </el-form-item>
-          <el-form-item>
-            <el-button type="primary"
-                       style="width: 100%"
-                       :loading="islogin"
-                       @click="login">{{ $t("login.signIn") }}</el-button>
-          </el-form-item>
-        </el-form>
-      </div>
-    </div>
-  </div>
-
-</template>
-
-<script>
-import JSEncrypt from 'jsencrypt/bin/jsencrypt.min'
-import Lang from '../lwLayout/components/lang.vue'
-export default {
-  name: 'lwLogin',
-  props: {
-    // 是否要校验初始化
-    isInitialized: {
-      type: Boolean,
-      default: true
-    },
-    // 是否手动合并菜单到同一个项目
-    isCombined: {
-      type: Boolean,
-      default: true
-    },
-
-  },
-  components: {
-    Lang,
-  },
-  data() {
-    return {
-      ruleForm: {
-        user: "",
-        password: "",
-        role: 0,
-        autologin: false,
-      },
-      rules: {
-        user: [
-          {
-            required: true,
-            message: this.$t("login.userError"),
-            trigger: "blur",
-          },
-        ],
-        password: [
-          {
-            required: true,
-            message: this.$t("login.PWError"),
-            trigger: "blur",
-          },
-        ],
-      },
-      islogin: false,
-
-    };
-  },
-
-  created: function () {
-    this.$tool.data.clear();
-    this.$store.commit("clearViewTags");
-    this.$store.commit("clearKeepLive");
-    this.$store.commit("clearIframeList");
-  },
-  methods: {
-    // 加密
-    encrypt(publicKey, txt) {
-      const encryptor = new JSEncrypt()
-      encryptor.setPublicKey(publicKey) // 设置公钥
-      return encryptor.encrypt(txt) // 对数据进行加密
-    },
-    async login() {
-      let validate = await this.$refs.loginForm
-        .validate()
-        .catch(() => { });
-      if (!validate) {
-        return false;
-      }
-
-      this.islogin = true;
-      const publicKey = await this.$api.auth.key()
-      let data = {
-        username: this.encrypt(publicKey, this.ruleForm.user),
-        password: this.encrypt(publicKey, this.ruleForm.password),
-      };
-      //获取token
-      let token = await this.$api.auth.token(data);
-      this.$tool.data.set("TOKEN", token);
-
-
-      // 获取所有bu
-      let bu = await this.$api.auth.bu()
-      this.$tool.data.set('buList', bu)
-      this.$tool.data.set('buCode', bu[0].code)
-
-      // 获取用户信息
-      let user = await this.$api.auth.user()
-      this.$tool.data.set('tenantId', user.userAuthInfo.tenantId)
-      this.$tool.data.set('userAuthInfo', user.userAuthInfo)
-      this.$tool.data.set('MenuPath', user.userAuthInfo.grantedApplications)
-      this.$store.state.user = user.userAuthInfo
-
-      // 获取合并菜单信息  isCombined  这参数后期要加是否要合并菜单展示 现在默认tue
-      /**
-       * 此处进行 获取的数据路由router文件进行合并
-       * 需要开发一个接口返回  权限与具体页面路径映射数据 （这个功能要开发）
-       * 需要在  platform  菜单管理中  配置isCombined参数  用于标识是否合并项目菜单
-       * 原有的数据要加两个配置项 icon  path
-       * 返回的数据是
-       * [
-       *  {
-          "id": "ma_menu.workplace",
-          "tenantId": "connext",
-          "name": "工作台",
-          "type": "MENU",
-          ...
-          "applications": ["ma"],
-          "icon": 'el-icon-discount', // icon
-          "path": '/reach/flow-template/, // 菜单路径
-          "authority": [
-            "ma.marketing_center.locate",
-            "ma.marketing_center_operation.locate",
-          ]
-        }
-      * ]
-      */
-      if (user.combined || this.isCombined) {
-        let menu = await this.$api.auth.menu();
-        this.$tool.data.set("MENUCOMBINED", menu);
-        // 注入 用于判断子项目 是否扁平化
-        this.$tool.data.set("MENUCOMBINEDNMAE", this.$config.APP_NAME);
-      } else {
-        this.$tool.data.remove("MENUCOMBINED");
-        this.$tool.data.remove("MENUCOMBINEDNMAE");
-      }
-
-      // 检验是否初始化
-
-      if (this.isInitialized) {
-        let initialized = await this.$api.auth.initialized()
-        this.$tool.data.set('zoneInitialized', initialized)
-        if (initialized) {
-          this.$router.push(this.$config.DASHBOARD_URL);
-        } else {
-          this.$router.push(this.$config.INIT_URL);
-        }
-      } else {
-        this.$router.push(this.$config.DASHBOARD_URL);
-      }
-
-
-      this.$message.success("登录成功");
-      this.islogin = false;
-    },
-
-  },
-};
-</script>
-
-<style lang="scss" scoped>
-.login_bg {
-  width: 100%;
-  height: 100%;
-  background: #fff;
-  display: flex;
-}
-
-.video-container {
-  position: fixed;
-  top: 0;
-  left: 0;
-  width: 100vw;
-  height: 100vh;
-
-  .mask {
-    position: fixed;
-    z-index: 1;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    object-fit: cover;
-  }
-
-  .video {
-    position: absolute;
-    z-index: 0;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    object-fit: cover;
-  }
-}
-
-.login_main {
-  flex: 1;
-  overflow: auto;
-  display: flex;
-}
-.login-form {
-  margin: auto;
-  padding: 20px 0;
-  position: relative;
-  z-index: 9;
-  display: flex;
-  align-items: center;
-  gap: 150px;
-}
-.login-header {
-  margin-bottom: 40px;
-}
-.login-header .logo {
-  display: flex;
-  align-items: center;
-}
-.login-header .logo img {
-  width: auto;
-  height: 40px;
-  vertical-align: bottom;
-  margin-right: 10px;
-}
-.login-header .logo label {
-  font-size: 26px;
-  font-weight: bold;
-}
-.login-oauth {
-  display: flex;
-  justify-content: space-around;
-}
-.login-form .el-divider {
-  margin-top: 40px;
-}
-
-.form-body {
-  width: 364px;
-  height: 324px;
-  padding: 24px;
-  overflow: hidden;
-  border-radius: 4px;
-  background-color: #fff;
-  box-shadow: 0 4px 16px rgba(39, 40, 42, 0.5);
-  color: #27282a;
-  .title-name {
-    font-size: 20px;
-    font-weight: 500;
-    line-height: 28px;
-  }
-}
-
-.login-form:deep(.el-tabs) .el-tabs__header {
-  margin-bottom: 25px;
-}
-.login-form:deep(.el-tabs) .el-tabs__header .el-tabs__item {
-  font-size: 14px;
-}
-
-.login-form:deep(.login-forgot) {
-  text-align: right;
-}
-.login-form:deep(.login-forgot) a {
-  color: var(--el-color-primary);
-}
-.login-form:deep(.login-forgot) a:hover {
-  color: var(--el-color-primary-light-3);
-}
-.login-form:deep(.login-reg) {
-  font-size: 14px;
-  color: var(--el-text-color-primary);
-}
-.login-form:deep(.login-reg) a {
-  color: var(--el-color-primary);
-}
-.login-form:deep(.login-reg) a:hover {
-  color: var(--el-color-primary-light-3);
-}
-
-.login_config {
-  position: absolute;
-  top: 20px;
-  right: 20px;
-}
-
-.login-form:deep(.login-msg-yzm) {
-  display: flex;
-  width: 100%;
-}
-.login-form:deep(.login-msg-yzm) .el-button {
-  margin-left: 10px;
-  --el-button-size: 42px;
-}
-
-.qrCodeLogin {
-  text-align: center;
-  position: relative;
-  padding: 20px 0;
-}
-.qrCodeLogin img.qrCode {
-  background: #fff;
-  padding: 20px;
-  border-radius: 10px;
-}
-.qrCodeLogin p.msg {
-  margin-top: 15px;
-}
-.qrCodeLogin .qrCodeLogin-result {
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  text-align: center;
-  background: var(--el-mask-color);
-}
-</style>
+<template>
+  <div v-show="isShow" class="login_bg">
+    <div class="video-container">
+      <img class="mask"
+           :src="poster"
+           alt="videoMask" />
+      <video autoplay
+             loop
+             class="video"
+             muted>
+        <source :src="video"
+                type="video/mp4" />
+      </video>
+    </div>
+    <div class="login_main">
+      <div class="login_config">
+        <Lang />
+      </div>
+      <div class="login-form">
+        <div class="login-header">
+          <div class="logo">
+            <img :alt="$config.APP_NAME"
+                 :src="logo2">
+          </div>
+        </div>
+        <el-form ref="loginForm"
+                 class="form-body"
+                 :model="ruleForm"
+                 :rules="rules"
+                 label-width="0"
+                 size="large">
+          <el-form-item>
+            <div class="title-name">{{$t('login.accountLogin')}}</div>
+          </el-form-item>
+          <el-form-item prop="user">
+            <el-input v-model="ruleForm.user"
+                      prefix-icon="el-icon-user"
+                      clearable
+                      :placeholder="$t('login.userPlaceholder')">
+            </el-input>
+          </el-form-item>
+          <el-form-item prop="password">
+            <el-input v-model="ruleForm.password"
+                      prefix-icon="el-icon-lock"
+                      clearable
+                      show-password
+                      :placeholder="$t('login.PWPlaceholder')">
+            </el-input>
+          </el-form-item>
+          <el-form-item style="margin-bottom: 10px">
+            <el-row>
+              <el-col :span="12">
+                <el-checkbox :label="$t('login.rememberMe')"
+                             v-model="ruleForm.autologin"></el-checkbox>
+              </el-col>
+              <el-col :span="12"
+                      style="text-align: right">
+                <el-button type="primary"
+                           text>{{ $t("login.forgetPassword") }}？
+                </el-button>
+              </el-col>
+            </el-row>
+          </el-form-item>
+          <el-form-item>
+            <el-button type="primary"
+                       style="width: 100%"
+                       :loading="islogin"
+                       @click="login">{{ $t("login.signIn") }}</el-button>
+          </el-form-item>
+        </el-form>
+      </div>
+    </div>
+  </div>
+
+</template>
+
+<script>
+import JSEncrypt from 'jsencrypt/bin/jsencrypt.min'
+import Lang from '../lwLayout/components/lang.vue'
+
+import poster from '/images/video-poster.png';
+import video from '/images/video-bg.mp4';
+import logo2 from '/images/logo2.png';
+export default {
+  name: 'lwLogin',
+  props: {
+    // 是否要校验初始化
+    isInitialized: {
+      type: Boolean,
+      default: true
+    },
+    // 是否手动合并菜单到同一个项目
+    isCombined: {
+      type: Boolean,
+      default: true
+    },
+
+  },
+  components: {
+    Lang,
+  },
+  data() {
+    return {
+      poster,
+      video,
+      logo2,
+      ruleForm: {
+        user: "",
+        password: "",
+        role: 0,
+        autologin: false,
+      },
+      rules: {
+        user: [
+          {
+            required: true,
+            message: this.$t("login.userError"),
+            trigger: "blur",
+          },
+        ],
+        password: [
+          {
+            required: true,
+            message: this.$t("login.PWError"),
+            trigger: "blur",
+          },
+        ],
+      },
+      islogin: false,
+      isShow: false,
+
+    };
+  },
+
+  created: function () {
+    this.$tool.data.clear();
+    this.$store.commit("clearViewTags");
+    this.$store.commit("clearKeepLive");
+    this.$store.commit("clearIframeList");
+    sessionStorage.clear()
+
+    // 旧项目处理兼容  后期要去掉
+    this.getOldData()
+  },
+  methods: {
+    // 旧项目处理兼容
+    getOldData() {
+      let curret_user = sessionStorage.getItem('easyweb_session_passport_current_user')
+      let curret_bu = sessionStorage.getItem('easyweb_session_passport_bu')
+      let curret_list = sessionStorage.getItem('easyweb_session_passport_bu_list')
+      function getCookie(name) {
+        // 构建目标 cookie 名称的前缀
+        const nameEQ = name + "=";
+        // 获取所有 cookies
+        const cookies = document.cookie.split(';');
+
+        // 遍历所有 cookies
+        for (let i = 0; i < cookies.length; i++) {
+          // 去掉 cookies 字符串的开头和结尾的空白字符
+          let cookie = cookies[i].trim();
+
+          // 检查这个 cookie 是否以目标名称开头
+          if (cookie.indexOf(nameEQ) === 0) {
+            // 如果是，返回 cookie 的值
+            return cookie.substring(nameEQ.length, cookie.length);
+          }
+        }
+
+        // 如果没有找到，返回 null
+        return null;
+      }
+
+      if (curret_user) {
+
+        const authorization = getCookie('Authorization')
+        const decodedToken = decodeURIComponent(authorization)
+        const parts = decodedToken.split(' ');
+        this.$tool.data.set('TOKEN', parts[1])
+
+        let user = JSON.parse(curret_user)
+        let bu = JSON.parse(curret_bu)
+        let bu_list = JSON.parse(curret_list)
+
+        console.log(parts, user, bu, bu_list)
+
+        this.$tool.data.set('userAuthInfo', user.v.userAuthInfo)
+        this.$tool.data.set('MenuPath', user.v.userAuthInfo.grantedApplications)
+        this.$tool.data.set('buCode', bu.v.code)
+        this.$tool.data.set('tenantId', bu.v.tenantId)
+        this.$tool.data.set('buList', bu_list.v)
+
+        this.$router.push(this.$config.DASHBOARD_URL);
+      } else {
+        this.isShow = true;
+      }
+    },
+    // 加密
+    encrypt(publicKey, txt) {
+      const encryptor = new JSEncrypt()
+      encryptor.setPublicKey(publicKey) // 设置公钥
+      return encryptor.encrypt(txt) // 对数据进行加密
+    },
+    async login() {
+      let validate = await this.$refs.loginForm
+        .validate()
+        .catch(() => { });
+      if (!validate) {
+        return false;
+      }
+
+      this.islogin = true;
+      const publicKey = await this.$api.auth.key()
+      let data = {
+        username: this.encrypt(publicKey, this.ruleForm.user),
+        password: this.encrypt(publicKey, this.ruleForm.password),
+      };
+      //获取token
+      let token = await this.$api.auth.token(data);
+      this.$tool.data.set("TOKEN", token);
+
+
+      // 获取所有bu
+      let bu = await this.$api.auth.bu()
+      this.$tool.data.set('buList', bu)
+      this.$tool.data.set('buCode', bu[0].code)
+
+      // 获取用户信息
+      let user = await this.$api.auth.user()
+      this.$tool.data.set('tenantId', user.userAuthInfo.tenantId)
+      this.$tool.data.set('userAuthInfo', user.userAuthInfo)
+      this.$tool.data.set('MenuPath', user.userAuthInfo.grantedApplications)
+      this.$store.state.user = user.userAuthInfo
+
+      // 获取合并菜单信息  isCombined  这参数后期要加是否要合并菜单展示 现在默认tue
+      /**
+       * 此处进行 获取的数据路由router文件进行合并
+       * 需要开发一个接口返回  权限与具体页面路径映射数据 （这个功能要开发）
+       * 需要在  platform  菜单管理中  配置isCombined参数  用于标识是否合并项目菜单
+       * 原有的数据要加两个配置项 icon  path
+       * 返回的数据是
+       * [
+       *  {
+          "id": "ma_menu.workplace",
+          "tenantId": "connext",
+          "name": "工作台",
+          "type": "MENU",
+          ...
+          "applications": ["ma"],
+          "icon": 'el-icon-discount', // icon
+          "path": '/reach/flow-template/, // 菜单路径
+          "authority": [
+            "ma.marketing_center.locate",
+            "ma.marketing_center_operation.locate",
+          ]
+        }
+      * ]
+      */
+      if (user.combined || this.isCombined) {
+        let menu = await this.$api.auth.menu();
+        this.$tool.data.set("MENUCOMBINED", menu);
+        // 注入 用于判断子项目 是否扁平化
+        this.$tool.data.set("MENUCOMBINEDNMAE", this.$config.APP_NAME);
+      } else {
+        this.$tool.data.remove("MENUCOMBINED");
+        this.$tool.data.remove("MENUCOMBINEDNMAE");
+      }
+
+      // 检验是否初始化
+
+      if (this.isInitialized) {
+        let initialized = await this.$api.auth.initialized()
+        this.$tool.data.set('zoneInitialized', initialized)
+        if (initialized) {
+          this.$router.push(this.$config.DASHBOARD_URL);
+        } else {
+          this.$router.push(this.$config.INIT_URL);
+        }
+      } else {
+        this.$router.push(this.$config.DASHBOARD_URL);
+      }
+
+
+      this.$message.success("登录成功");
+      this.islogin = false;
+    },
+
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.login_bg {
+  width: 100%;
+  height: 100%;
+  background: #fff;
+  display: flex;
+}
+
+.video-container {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100vw;
+  height: 100vh;
+
+  .mask {
+    position: fixed;
+    z-index: 1;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+  }
+
+  .video {
+    position: absolute;
+    z-index: 0;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+  }
+}
+
+.login_main {
+  flex: 1;
+  overflow: auto;
+  display: flex;
+}
+.login-form {
+  margin: auto;
+  padding: 20px 0;
+  position: relative;
+  z-index: 9;
+  display: flex;
+  align-items: center;
+  gap: 150px;
+}
+.login-header {
+  margin-bottom: 40px;
+}
+.login-header .logo {
+  display: flex;
+  align-items: center;
+}
+.login-header .logo img {
+  width: auto;
+  height: 40px;
+  vertical-align: bottom;
+  margin-right: 10px;
+}
+.login-header .logo label {
+  font-size: 26px;
+  font-weight: bold;
+}
+.login-oauth {
+  display: flex;
+  justify-content: space-around;
+}
+.login-form .el-divider {
+  margin-top: 40px;
+}
+
+.form-body {
+  width: 364px;
+  height: 324px;
+  padding: 24px;
+  overflow: hidden;
+  border-radius: 4px;
+  background-color: #fff;
+  box-shadow: 0 4px 16px rgba(39, 40, 42, 0.5);
+  color: #27282a;
+  .title-name {
+    font-size: 20px;
+    font-weight: 500;
+    line-height: 28px;
+  }
+}
+
+.login-form:deep(.el-tabs) .el-tabs__header {
+  margin-bottom: 25px;
+}
+.login-form:deep(.el-tabs) .el-tabs__header .el-tabs__item {
+  font-size: 14px;
+}
+
+.login-form:deep(.login-forgot) {
+  text-align: right;
+}
+.login-form:deep(.login-forgot) a {
+  color: var(--el-color-primary);
+}
+.login-form:deep(.login-forgot) a:hover {
+  color: var(--el-color-primary-light-3);
+}
+.login-form:deep(.login-reg) {
+  font-size: 14px;
+  color: var(--el-text-color-primary);
+}
+.login-form:deep(.login-reg) a {
+  color: var(--el-color-primary);
+}
+.login-form:deep(.login-reg) a:hover {
+  color: var(--el-color-primary-light-3);
+}
+
+.login_config {
+  position: absolute;
+  top: 20px;
+  right: 20px;
+}
+
+.login-form:deep(.login-msg-yzm) {
+  display: flex;
+  width: 100%;
+}
+.login-form:deep(.login-msg-yzm) .el-button {
+  margin-left: 10px;
+  --el-button-size: 42px;
+}
+
+.qrCodeLogin {
+  text-align: center;
+  position: relative;
+  padding: 20px 0;
+}
+.qrCodeLogin img.qrCode {
+  background: #fff;
+  padding: 20px;
+  border-radius: 10px;
+}
+.qrCodeLogin p.msg {
+  margin-top: 15px;
+}
+.qrCodeLogin .qrCodeLogin-result {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  text-align: center;
+  background: var(--el-mask-color);
+}
+</style>