ylyx-cli 1.0.0

package/templates/vue-app/files/src/views/login.vue

@@ -0,0 +1,243 @@
+<template>
+  <div class="login" :style="'background-image:url(' + Background + ');'">
+    <el-form
+      ref="loginForm"
+      :model="loginForm"
+      :rules="loginRules"
+      label-position="left"
+      label-width="0px"
+      class="login-form">
+      <div class="text-center">
+        <!-- <img :src="logoUrl" width="55"> -->
+      </div>
+
+      <h3 class="title">安徽省医疗影像云监测平台</h3>
+      <el-form-item prop="username">
+        <el-input v-model="loginForm.username" type="text" auto-complete="off" placeholder="账号">
+          <svg-icon slot="prefix" icon-class="user" class="el-input__icon input-icon" />
+        </el-input>
+      </el-form-item>
+      <el-form-item prop="password">
+        <el-input
+          v-model="loginForm.password"
+          type="password"
+          auto-complete="off"
+          placeholder="密码">
+          <svg-icon slot="prefix" icon-class="password" class="el-input__icon input-icon" />
+        </el-input>
+      </el-form-item>
+      <el-form-item prop="code">
+        <el-row :gutter="15">
+          <el-col :span="15">
+            <el-input
+              v-model="loginForm.code"
+              type="text"
+              auto-complete="off"
+              placeholder="请输入验证码"
+              @keyup.enter.native="handleLogin">
+              <i
+                slot="prefix"
+                class="el-icon-key"
+                style="line-height: 40px; font-szie: 16px; font-weight: 700; color: #c0c4cc"></i>
+            </el-input>
+          </el-col>
+          <el-col :span="9" style="height: 38px">
+            <el-image @click="getCodeImg" style="width: 100%; height: 38px" :src="base64Code">
+            </el-image>
+          </el-col>
+        </el-row>
+      </el-form-item>
+      <el-form-item style="width: 100%">
+        <el-button
+          :loading="loading"
+          size="medium"
+          type="primary"
+          style="width: 100%"
+          @click.native.prevent="handleLogin">
+          <span v-if="!loading">登 录</span>
+          <span v-else>登 录 中...</span>
+        </el-button>
+      </el-form-item>
+    </el-form>
+    <!--  底部  -->
+    <div v-if="$store.state.settings.showFooter" id="el-login-footer">
+      <p v-html="$store.state.settings.footerTxt" />
+      <p>
+        <span v-html="$store.state.settings.caseNumber" style="padding-right: 15px"></span>
+        <img :src="gongan" width="12" />
+        <span v-html="$store.state.settings.gonganNumber"></span>
+      </p>
+    </div>
+  </div>
+</template>
+
+<script>
+import { encrypt } from '@/utils/rsaEncrypt';
+import Cookies from 'js-cookie';
+import Background from '@/assets/images/background.jpg';
+import logoUrl from '@/assets/images/logo.png';
+// import dataGif from '@/assets/images/data.gif'
+import { getCodeImg } from '@/api/login';
+import { mapGetters } from 'vuex';
+export default {
+  name: 'Login',
+  data() {
+    return {
+      Background,
+      logoUrl,
+      // dataGif,
+      cookiePass: '',
+      loginForm: {
+        username: '',
+        password: '',
+        uuid: '',
+        code: '',
+      },
+      loginRules: {
+        username: [{ required: true, trigger: 'blur', message: '用户名不能为空' }],
+        password: [{ required: true, trigger: 'blur', message: '密码不能为空' }],
+        code: [{ required: true, trigger: 'blur', message: '验证码不能为空' }],
+      },
+      loading: false,
+      redirect: undefined,
+      base64Code: '',
+    };
+  },
+  watch: {
+    $route: {
+      handler: function (route) {
+        this.redirect = route.query && route.query.redirect;
+      },
+      immediate: true,
+    },
+  },
+  computed: {
+    ...mapGetters(['sidebarRouters', 'sidebar']),
+    routes() {
+      return this.$store.state.permission.routers;
+    },
+    user() {
+      return this.$store.state.user.user;
+    },
+  },
+  created() {
+    // 获取用户名密码等Cookie
+    this.getCookie();
+    // token 过期提示
+    this.point();
+    // 验证码
+    this.getCodeImg();
+  },
+  methods: {
+    getCodeImg() {
+      getCodeImg()
+        .then(res => {
+          this.base64Code = res.img;
+          this.loginForm.uuid = res.uuid;
+        })
+        .catch(res => {
+          console.log(res);
+        });
+    },
+    getCookie() {
+      const username = Cookies.get('username');
+      let password = Cookies.get('password');
+      // 保存cookie里面的加密后的密码
+      this.cookiePass = password === undefined ? '' : password;
+      password = password === undefined ? this.loginForm.password : password;
+      this.loginForm = {
+        username: username === undefined ? this.loginForm.username : username,
+        password: password,
+      };
+    },
+    handleLogin() {
+      this.$refs.loginForm.validate(valid => {
+        const user = {
+          username: this.loginForm.username,
+          password: this.loginForm.password,
+          uuid: this.loginForm.uuid,
+          code: this.loginForm.code,
+        };
+        if (user.password !== this.cookiePass) {
+          user.password = encrypt(user.password);
+        }
+        if (valid) {
+          this.loading = true;
+          this.$store
+            .dispatch('Login', user)
+            .then(() => {
+              this.loading = false;
+              sessionStorage.removeItem('key');
+              // this.$router.push({ path: this.redirect || '/' })
+              this.$router.push({
+                path:
+                  this.redirect || this.user.defaultHomePage !== undefined
+                    ? this.user.defaultHomePage
+                    : '/',
+              });
+            })
+            .catch(() => {
+              this.loading = false;
+              this.getCodeImg();
+              this.loginForm.code = '';
+            });
+          if (this.routes) console.log(this.routes, 'permission_routers');
+        } else {
+          return false;
+        }
+      });
+    },
+    point() {
+      const point = Cookies.get('point') !== undefined;
+      if (point) {
+        this.$notify({
+          title: '提示',
+          message: '当前登录状态已过期，请重新登录！',
+          type: 'warning',
+          duration: 5000,
+        });
+        Cookies.remove('point');
+      }
+    },
+  },
+};
+</script>
+
+<style rel="stylesheet/scss" lang="scss">
+.login {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 100%;
+  background-size: cover;
+}
+.title {
+  margin: 20px auto 30px auto;
+  text-align: center;
+  color: #fff;
+}
+
+.login-form {
+  border-radius: 6px;
+  background: rgba(255, 255, 255, 0.1);
+  width: 385px;
+  padding: 45px 35px 45px 35px;
+  box-shadow: 0px 0px 16px #ffffff47;
+  .el-input {
+    height: 38px;
+    input {
+      height: 38px;
+    }
+  }
+  .input-icon {
+    height: 39px;
+    width: 14px;
+    margin-left: 2px;
+  }
+}
+.login-tip {
+  font-size: 13px;
+  text-align: center;
+  color: #bfbfbf;
+}
+</style>

package/templates/vue-app/files/src/views/qualityLogin.vue

@@ -0,0 +1,280 @@
+<template>
+  <div class="login" :style="'background-image:url(' + Background + ');'">
+    <div class="app-login">
+      <p class="login-title">
+        <!-- <img :src="logoUrl" width="25" /> -->
+        <svg-icon icon-class="loginOneWhite" class="loginSvg" />
+        <span>安徽省影像云医学影像质控系统</span>
+      </p>
+      <div class="enter" :style="'background-image:url(' + logintitle + ');'">
+        <p><em></em> <span>登 录</span> <em></em></p>
+        <p>LOGIN</p>
+      </div>
+      <el-form ref="loginForm" :model="loginForm" :rules="loginRules" class="loginForm">
+        <el-form-item prop="username">
+          <el-input v-model="loginForm.username" type="text" auto-complete="off" placeholder="账号">
+            <svg-icon slot="prefix" icon-class="user" class="el-input__icon input-icon" />
+          </el-input>
+        </el-form-item>
+        <el-form-item prop="password">
+          <el-input
+            v-model="loginForm.password"
+            type="password"
+            auto-complete="off"
+            placeholder="密码">
+            <svg-icon slot="prefix" icon-class="password" class="el-input__icon input-icon" />
+          </el-input>
+        </el-form-item>
+        <el-form-item prop="code">
+          <el-row :gutter="15">
+            <el-col :span="15">
+              <el-input
+                v-model="loginForm.code"
+                type="text"
+                auto-complete="off"
+                placeholder="请输入验证码"
+                @keyup.enter.native="handleLogin">
+                <i
+                  slot="prefix"
+                  class="el-icon-key"
+                  style="font-szie: 16px; font-weight: 700; color: #c0c4cc"></i>
+              </el-input>
+            </el-col>
+            <el-col :span="9" style="height: 32px">
+              <el-image @click="getCodeImg" style="width: 100%; height: 32px" :src="base64Code">
+              </el-image>
+            </el-col>
+          </el-row>
+        </el-form-item>
+        <el-form-item style="width: 100%">
+          <el-button
+            :loading="loading"
+            size="medium"
+            type="primary"
+            style="width: 100%"
+            @click.native.prevent="handleLogin">
+            <span v-if="!loading">登 录</span>
+            <span v-else>登 录 中...</span>
+          </el-button>
+        </el-form-item>
+      </el-form>
+
+      <p class="jianli">建立影像专科医联体·助力安徽影像云建设</p>
+    </div>
+    <!--  底部  -->
+    <div id="el-login-footer">
+      <p v-html="$store.state.settings.footerTxt" />
+      <p>
+        <span v-html="$store.state.settings.caseNumber" style="padding-right: 15px"></span>
+        <img :src="gongan" width="12" />
+        <span v-html="$store.state.settings.gonganNumber"></span>
+      </p>
+    </div>
+  </div>
+</template>
+
+<script>
+import { encrypt } from '@/utils/rsaEncrypt';
+import Cookies from 'js-cookie';
+import Background from '@/assets/images/qualityBg.jpg';
+import logoUrl from '@/assets/images/logo.png';
+import gongan from '@/assets/images/gongan.png';
+import logintitle from '@/assets/images/logintitle.jpg';
+
+import { getCodeImg } from '@/api/login';
+
+import { mapGetters } from 'vuex';
+export default {
+  name: 'qualityLogin',
+  data() {
+    return {
+      Background,
+      logoUrl,
+      gongan,
+      logintitle,
+      cookiePass: '',
+      loginForm: {
+        username: '',
+        password: '',
+        uuid: '',
+        code: '',
+      },
+      loginRules: {
+        username: [{ required: true, trigger: 'blur', message: '用户名不能为空' }],
+        password: [{ required: true, trigger: 'blur', message: '密码不能为空' }],
+        code: [{ required: true, trigger: 'blur', message: '验证码不能为空' }],
+      },
+      loading: false,
+      redirect: undefined,
+      base64Code: '',
+    };
+  },
+  watch: {
+    $route: {
+      handler: function (route) {
+        this.redirect = route.query && route.query.redirect;
+      },
+      immediate: true,
+    },
+  },
+  computed: {
+    ...mapGetters(['sidebarRouters', 'sidebar']),
+    routes() {
+      return this.$store.state.permission.routers;
+    },
+    user() {
+      return this.$store.state.user.user;
+    },
+  },
+  created() {
+    // 获取用户名密码等Cookie
+    this.getCookie();
+    // token 过期提示
+    this.point();
+    // 验证码
+    this.getCodeImg();
+  },
+  methods: {
+    getCodeImg() {
+      getCodeImg()
+        .then(res => {
+          this.base64Code = res.img;
+          this.loginForm.uuid = res.uuid;
+        })
+        .catch(res => {
+          console.log(res);
+        });
+    },
+    getCookie() {
+      const username = Cookies.get('username');
+      let password = Cookies.get('password');
+      // 保存cookie里面的加密后的密码
+      this.cookiePass = password === undefined ? '' : password;
+      password = password === undefined ? this.loginForm.password : password;
+      this.loginForm = {
+        username: username === undefined ? this.loginForm.username : username,
+        password: password,
+      };
+    },
+    handleLogin() {
+      this.$refs.loginForm.validate(valid => {
+        const user = {
+          username: this.loginForm.username,
+          password: this.loginForm.password,
+          uuid: this.loginForm.uuid,
+          code: this.loginForm.code,
+        };
+        if (user.password !== this.cookiePass) {
+          user.password = encrypt(user.password);
+        }
+        if (valid) {
+          this.loading = true;
+          this.$store
+            .dispatch('Login', user)
+            .then(() => {
+              this.loading = false;
+              console.log(this.user, 'user');
+              sessionStorage.setItem('key', 1);
+              // this.$router.push({ path: this.redirect || '/' })
+              this.$router.push({
+                path:
+                  this.redirect || this.user.defaultHomePage !== undefined
+                    ? this.user.defaultHomePage
+                    : '/',
+              });
+            })
+            .catch(() => {
+              this.loading = false;
+              this.getCodeImg();
+              this.loginForm.code = '';
+            });
+          if (this.routes) console.log(this.routes, 'permission_routers');
+        } else {
+          return false;
+        }
+      });
+    },
+    point() {
+      const point = Cookies.get('point') !== undefined;
+      if (point) {
+        this.$notify({
+          title: '提示',
+          message: '当前登录状态已过期，请重新登录！',
+          type: 'warning',
+          duration: 5000,
+        });
+        Cookies.remove('point');
+      }
+    },
+  },
+};
+</script>
+
+<style rel="stylesheet/scss" lang="scss">
+.login {
+  justify-content: center;
+  align-items: center;
+  display: flex;
+  height: 100%;
+  background-size: cover;
+  .app-login {
+    margin: 0 auto;
+    width: 500px;
+    text-align: center;
+    padding: 45px 35px;
+    height: calc(100% - 20vh);
+    .login-title {
+      text-align: center;
+      color: #fff;
+      letter-spacing: 1px;
+      font-size: 20px;
+      font-weight: bold;
+      .loginSvg {
+        position: relative;
+        top: 3px;
+        font-size: 36px;
+      }
+    }
+    .enter {
+      margin-top: 45px;
+      height: 95px;
+      border-top-left-radius: 5px;
+      border-top-right-radius: 5px;
+      p {
+        margin: 0;
+        font-size: 10px;
+        padding-top: 15px;
+        color: #999;
+        em {
+          display: inline-block;
+          border: 1px solid #dddddd;
+          width: 120px;
+        }
+        span {
+          display: inline-block;
+          font-size: 17px;
+          position: relative;
+          top: 7px;
+          padding: 0 15px;
+          color: #333;
+        }
+        &:first-child {
+          padding-top: 25px;
+        }
+      }
+    }
+    .loginForm {
+      background: #fff;
+      padding: 45px 55px;
+      border-bottom-left-radius: 5px;
+      border-bottom-right-radius: 5px;
+    }
+    .jianli {
+      color: #fff;
+      font-size: 17px;
+      letter-spacing: 2px;
+      padding-top: 35px;
+    }
+  }
+}
+</style>