更新vue工程

.gitignore

@@ -1,4 +1,5 @@
**/node_modules
.sass-cache
.settings
.project
.project
/.idea/

common/vue/project/ipu-admin-element/src/assets/styles/common.css

@@ -1,5 +1,7 @@
/* 项目公共样式 */
@import "./ipuUI";      /* ipuUI中关于flex的样式定义  */
* :after,
* :before,
* {
@@ -53,3 +55,4 @@ textarea:-webkit-autofill,
select:-webkit-autofill {
  -webkit-box-shadow: 0 0 0 1000px white inset;
}

common/vue/project/ipu-admin-element/src/assets/styles/element-customer.scss

@@ -1,8 +0,0 @@
/* 改变主题色变量 */
$--color-primary: $c-primary;
/* 改变 icon 字体路径变量，必需 */
$--font-path: '~element-ui/lib/theme-chalk/fonts';
@import "~element-ui/packages/theme-chalk/src/index";

common/vue/project/ipu-admin-element/src/assets/styles/index.scss

@@ -1,9 +1,7 @@
@import './variable';   // 变量定义
@import '~remixicon/fonts/remixicon.css';   // 字体图标样式
@import "element-customer";   // element样式自定义
@import './third';      // 第三方样式
@import "./reset";      // 浏览器样式重置
@import './common';     // 项目通用样式
@import "./ipuUI";      // ipuUI中关于flex的样式定义
// 普通样式随组件定义，不放这里

common/vue/project/ipu-admin-element/src/assets/styles/third.scss

@@ -0,0 +1,9 @@
@import '~remixicon/fonts/remixicon.css';   // 字体图标样式
/* 定义element-ui主题色 */
$--color-primary: $c-primary;
/* 改变 icon 字体路径变量，必需 */
$--font-path: '~element-ui/lib/theme-chalk/fonts';
@import "~element-ui/packages/theme-chalk/src/index";   // element-ui样式

common/vue/project/ipu-admin-element/src/routes.js

@@ -5,13 +5,13 @@
import Layout from './views/layout/Layout';
import Welcome from './views/Welcome';
import Login from './views/user/Login';
import NotFind from './views/NotFind';
import NotFound from './views/NotFound';
import HelloWorldAa from './views/HelloWorldAa';
import HelloWorldBb from './views/HelloWorldBb';
import HelloWorldCc from './views/HelloWorldCc';
import HelloA from './views/HelloA';
import HelloB from './views/HelloB';
import HelloC from './views/HelloB';
 
export default [{
    path: '/login',
    name: 'Login',
@@ -33,27 +33,27 @@ export default [{
      }
    }, {
      path: '/a',
      name: 'HelloWorldAa',
      component: HelloWorldAa
      name: 'HelloA',
      component: HelloA
    }, {
      path: '/b',
      name: 'HelloWorldBb',
      component: HelloWorldBb
      name: 'HelloB',
      component: HelloB
    }, {
      path: '/c',
      name: 'HelloWorldCc',
      component: HelloWorldCc,
      name: 'HelloC',
      component: HelloC,
      meta:{
        noCache: true
      }
    }, {
      path: '/*',
      name: 'NotFind',
      component: NotFind,
      name: 'NotFound',
      component: NotFound,
    }]
  }, {    // 404页面匹配*,要放最后面
    path: '/*',
    name: 'NotFind',
    component: NotFind
    name: 'NotFound',
    component: NotFound
  }
]

common/vue/project/ipu-admin-element/src/services/index.js

@@ -9,31 +9,35 @@ import menuSer from "./service-menu"
/*
模块服务配置参考
调用服务 service.moudleName.postForm(data, config)  // data都是以json格式传入，根据内容格式调用contTypes对应方法转换数据
若未设置模块名称，方法直接挂在根目录下 service.postForm(data, config)
可通过service.$http，取则axios对象自定义调用接口请求，但是数据转换与请求拦截代码仍会生效
let paths = {
  deleteApp: "/qb/deleteApp"    // 请求数据格式与config一致，直接配置路径
  getAppDetail: {
  postForm: {
    path: "/getAppDetail",
    contentType: 'form'   // form接口请求
    method：'post'        //  请求方式
  },
   getAppDetail: {
   json: {
    path: "getAppDetail",
    contentType: 'rest'   // rest接口请求
    contentType: 'json'   // rest接口请求
  },
   getAppDetail: {
   file: {
    path: "/getAppDetail",
    contentType: 'file'   // 文件上传请求
  }
}
let config = {
  mname: "app",        // 服务模块名
  mname: "moudleName",        // 服务模块名，可为空
  prefix: "/qb/",      // 路径公共前缀
  paths
}
export default config
调用服务 service.app.deleteApp(data, config)  // data都是以json格式传入，调用content-types对应方法转换数据
*/
let contType = process.env.VUE_APP_MODE == 'mock' ? 'json' : 'form'  // 模拟接口用的是json格式请求，服务用的是form

common/vue/project/ipu-admin-element/src/store.js

@@ -1,6 +1,9 @@
import Vue from 'vue'
import Vuex from 'vuex'
// 模块范围内的store，可在模块内定义
Vue.use(Vuex)
// 使用sessionStorage存储，可在页面刷新时不丢失数据

common/vue/project/ipu-admin-element/src/views/HelloA.vue

@@ -0,0 +1,33 @@
<template>
  <div class="hello">
    <input type="text" value="Hello A">
  </div>
</template>
<script>
  export default {
    name: 'HelloA',
    props: {
      msg: String
    }
  }
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  h3 {
    margin: 40px 0 0;
  }
  ul {
    list-style-type: none;
    padding: 0;
  }
  li {
    display: inline-block;
    margin: 0 10px;
  }
  a {
    color: #42b983;
  }
</style>

common/vue/project/ipu-admin-element/src/views/HelloWorldBb.vue

@@ -7,7 +7,7 @@
<script>
export default {
  name: 'HelloWorld',
  name: 'HelloB',
  props: {
    msg: String
  }

common/vue/project/ipu-admin-element/src/views/HelloWorldCc.vue

@@ -7,7 +7,7 @@
<script>
export default {
  name: 'HelloWorld',
  name: 'HelloC',
  props: {
    msg: String
  }

common/vue/project/ipu-admin-element/src/views/HelloWorld.vue

@@ -1,58 +0,0 @@
<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <p>
      For a guide and recipes on how to configure / customize this project,<br>
      check out the
      <a href="https://cli.vuejs.org" target="_blank" rel="noopener">vue-cli documentation</a>.
    </p>
    <h3>Installed CLI Plugins</h3>
    <ul>
      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel" target="_blank" rel="noopener">babel</a></li>
      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-eslint" target="_blank" rel="noopener">eslint</a></li>
    </ul>
    <h3>Essential Links</h3>
    <ul>
      <li><a href="https://vuejs.org" target="_blank" rel="noopener">Core Docs</a></li>
      <li><a href="https://forum.vuejs.org" target="_blank" rel="noopener">Forum</a></li>
      <li><a href="https://chat.vuejs.org" target="_blank" rel="noopener">Community Chat</a></li>
      <li><a href="https://twitter.com/vuejs" target="_blank" rel="noopener">Twitter</a></li>
      <li><a href="https://news.vuejs.org" target="_blank" rel="noopener">News</a></li>
    </ul>
    <h3>Ecosystem</h3>
    <ul>
      <li><a href="https://router.vuejs.org" target="_blank" rel="noopener">vue-router</a></li>
      <li><a href="https://vuex.vuejs.org" target="_blank" rel="noopener">vuex</a></li>
      <li><a href="https://github.com/vuejs/vue-devtools#vue-devtools" target="_blank" rel="noopener">vue-devtools</a></li>
      <li><a href="https://vue-loader.vuejs.org" target="_blank" rel="noopener">vue-loader</a></li>
      <li><a href="https://github.com/vuejs/awesome-vue" target="_blank" rel="noopener">awesome-vue</a></li>
    </ul>
  </div>
</template>
<script>
export default {
  name: 'HelloWorld',
  props: {
    msg: String
  }
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h3 {
  margin: 40px 0 0;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>

common/vue/project/ipu-admin-element/src/views/HelloWorldAa.vue

@@ -1,33 +0,0 @@
<template>
  <div class="hello">
    <input type="text" value="Hello A">
  </div>
</template>
<script>
export default {
  name: 'HelloWorldA',
  props: {
    msg: String
  }
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h3 {
  margin: 40px 0 0;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>

common/vue/project/ipu-admin-element/vue.config.js

@@ -1,12 +1,12 @@
module.exports = {
  publicPath: './',   // 默认是'/'
  publicPath: './',   // 静态资源路径前缀设置，默认是'/'
  css: {
    sourceMap: true
  },
  lintOnSave: 'warning',  // lint错误生成为警告不导致编译失败
  chainWebpack: (config) => { // 对webpack配置进行定制
  lintOnSave: 'warning',          // lint错误生成为警告不导致编译失败
  chainWebpack: (config) => {     // 对webpack配置进行定制
    config.plugin('html').tap(args => {
      args[0].title = "基础工程";
      args[0].title = "基础工程";   // 修改首页标题
      return args;
    })
  }

common/vue/project/ipu-admin-v1/src/service/modules/account.js

@@ -0,0 +1,11 @@
// 账号相关，不用登录的业务，如登录、注册、找回密码等
let config = {
  moduleName: "account",    // 服务模块名
  prefix: "/qb",      // 模块公共路径前缀
  paths:{
    login: "/login"
  }
}
export default config

common/vue/project/ipu-admin-v1/src/service/modules/app.js

@@ -0,0 +1,13 @@
let config = {
  moduleName: "app",    // 服务模块名
  prefix: "",      // 路径公共前缀
  paths: {
    getAppList: "/qb/getAppList",
    createApp: "/qb/createApp",   // 修改当前用户信息？
    getAppDetail: "/qb/getAppDetail",
    modifyAppInfo: "/qb/modifyAppInfo",
    deleteApp: "/qb/deleteApp"
  }
}
export default config

common/vue/project/ipu-admin-v1/src/service/modules/index.js

@@ -0,0 +1,11 @@
import account from './account';
import app from './app';
import menu from './menu';
import user from './user';
export default {
  account,
  app,
  menu,
  user
}

common/vue/project/ipu-admin-v1/src/service/modules/menu.js

@@ -0,0 +1,16 @@
let config = {
  moduleName: "menu",    // 服务模块名
  prefix: "",       // 模块下公共路径前缀
  paths: {
    getMenuList: "/qb/getAppMenus",
    createMenu: "/qb/createMenu",   // 修改当前用户信息？
    getMenuDetail: "/qb/getMenuDetail",
    modifyMenu: "/qb/modifyMenu",
    deleteMenu: "/qb/deleteMenu",
    modifyMenuAttr: "/qb/modifyMenuAttr",  // 调整菜单位置
    modifyMenuSort: "/qb/modifyMenuSort",  // 调整菜单位置
    getMenuCatalog: "/qb/getMenuCatalog"  // 获取目录列表
  }
}
export default config

common/vue/project/ipu-admin-v1/src/service/modules/user.js

@@ -0,0 +1,16 @@
let config = {
  moduleName: "user",    // 服务模块名
  prefix: "",    // 路径公共前缀
  paths: {
    getUserInfoDetail: "/qb/getUserInfoDetail",
    modifyUserInfo: "/qb/modifyUserInfo",   // 修改当前用户信息？
    modifyPasswd: "/qb/modifyPasswd",
    getUserList: "/qb/getUserList",
    createUser: "/qb/createUser",
    modifyUser: "/qb/modifyUser",            // 修改别的用户信息
    deleteUser: "/qb/deleteUser",            // 修改别的用户信息
    resetPasswd: "/qb/resetPasswd",            // 修改别的用户信息
  }
}
export default config

common/vue/project/ipu-admin-v1/src/views/login/index.vue

@@ -0,0 +1,288 @@
<template>
  <div class="pages-login">
    <div class="login-form">
      <div class="ipu-flex-middle-center login-form-header">
        <div class="logo"></div>
        <div class="ipu-flex sys-name">
          后台管理平台
        </div>
      </div>
      <div class="login-form-body">
        <div class="login-form-row">
          <div class="ipu-flex-middle login-form-input login-form-input-account">
            <div class="ipu-flex-grow-0 ipu-flex-center form-icon icon-user">
              <i class="ri-user-line"></i>
            </div>
            <div class="ipu-flex-grow-1 form-input-wrap">
              <input type="text" class="form-input" v-model="username" placeholder="请输入账号" autocomplete="new-password">
            </div>
            <div class="ipu-flex-grow-0 form-input-clear" v-show="username!=''" @click="username=''">
              <i class="ri-close-circle-fill"></i>
            </div>
          </div>
          <div class="login-form-row-tips">
            账号不存在，请重新输入
          </div>
        </div>
        <div class="login-form-row">
          <div class="ipu-flex-middle login-form-input login-form-input-pass">
            <div class="ipu-flex-grow-0 ipu-flex-center form-icon icon-user">
              <i class="ri-lock-line"></i>
            </div>
            <div class="ipu-flex-grow-1 form-input-wrap">
              <input type="password" v-model="password" class="form-input" placeholder="请输入密码" autocomplete="new-password">
            </div>
            <div class="ipu-flex-grow-0 form-input-clear" v-show="password!=''" @click="password=''">
              <i class="ri-close-circle-fill"></i>
            </div>
          </div>
          <div class="login-form-row-tips">
            密码错误，请重新输入
          </div>
        </div>
        <div class="ipu-flex-middle ipu-flex-justify-space login-form-row login-form-row-asset">
          <el-checkbox v-model="autoLogin">自动登录</el-checkbox>
          <a href="javascript:;" class="link-to-forget">忘记密码</a>
        </div>
        <div class="login-form-row">
          <button class="form-btn" @click="login">登录</button>
        </div>
      </div>
      <div class="login-form-footer">
        还没有账号？<a href="javascript:;" class="link-to-register">注册账号</a>
      </div>
    </div>
    <div class="sys-power">
      Powered by AISWare IPU
    </div>
  </div>
</template>
<script>
  export default {
    name: 'Login',
    props: {},
    data() {
      return {
        username: "",   // 登录用户名
        password: "",   // 登录密码
        autoLogin: true   // 下次是否自动登录
      }
    },
    created() {
      this.resetInput()
    },
    mounted() {
      this.resetInput()
    },
    methods: {
      resetInput() {
        this.username = ""
        this.password = ""
      },
      login() {
        console.log(this.username, this.password);
        this.$router.push({name: "Welcome"})
      }
    }
  }
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" rel="stylesheet/scss" scoped>
  @import "@/assets/styles/variable.scss";
  .pages-login {
    width: 100%;
    height: 100%;
    position: relative;
    background: linear-gradient(360deg, #36527C 0%, #071A34 100%);
    min-height: 600px;
    min-width: 600px;
  }
  .login-form {
    position: relative;
    left: 50%;
    top: 45%;
    transform: translate(-50%, -50%);
    background-color: #fff;
    width: 480px;
    border-radius: 8px;
    padding: 60px;
  }
  .login-form-header .logo {
    width: 36px;
    height: 36px;
    background: url("~@/assets/img/logo-black.png") center no-repeat;
    background-size: 100%;
    margin-right: 12px;
  }
  .form-input-wrap {
    margin: 0 10px;
  }
  .login-form-header .sys-name {
    font-size: 32px;
    font-weight: 500;
    color: rgba(0, 0, 0, .85);
    line-height: 50px;
  }
  .login-form-header .sys-name .parent {
    margin-right: 5px;
  }
  .login-form-row .form-btn {
    margin-top: 16px;
    -webkit-appearance: none;
    display: block;
    width: 100%;
    background: $c-primary;
    border-radius: 4px;
    text-align: center;
    font-size: 16px;
    font-weight: 400;
    color: #FFFFFF;
    line-height: 40px;
    cursor: pointer;
  }
  .login-form-input {
    height: 40px;
    border-radius: 4px;
    border: 1px solid rgba(0, 0, 0, .15);
  }
  .form-input {
    display: block;
    width: 100%;
    border: none;
    font-size: 16px;
    font-weight: 400;
    color: rgba(0, 0, 0, .65);
    line-height: 24px;
    padding: 0 2px;
    background-color: transparent;
  }
  .form-input::-webkit-input-placeholder {
    color: rgba(0, 0, 0, .25);
  }
  .form-input::-moz-placeholder { /* Mozilla Firefox 19+ */
    color: rgba(0, 0, 0, .25);
  }
  .form-input:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
    color: rgba(0, 0, 0, .25);
  }
  .form-input:-ms-input-placeholder { /* Internet Explorer 10-11 */
    color: rgba(0, 0, 0, .25);
  }
  .form-icon {
    margin-left: 12px;
  }
  .form-icon i {
    font-size: 16px;
    width: 16px;
    line-height: 1;
    color: rgba(0, 0, 0, .25);
  }
  .login-form-row-asset {
    font-size: 14px;
    font-weight: 400;
    color: rgba(0, 0, 0, .65);
    line-height: 22px;
  }
  .login-form-row-tips {
    font-size: 12px;
    font-weight: 400;
    color: #F5222D;
    line-height: 16px;
    height: 16px;
    visibility: hidden;
  }
  .login-form-body {
    margin-top: 40px;
  }
  .login-captcha-img {
    width: 62px;
    height: 38px;
    margin: 0 7px;
    display: block;
  }
  .form-input-clear {
    width: 30px;
    height: 30px;
    text-align: center;
    line-height: 30px;
    font-size: 14px;
    cursor: pointer;
    color: rgba(0, 0, 0, .25);
  }
  .login-form-row-invalid .login-form-input {
    border-color: #F5222D;
  }
  .login-form-row-invalid .form-input-clear {
    display: block;
  }
  .login-form-row-invalid .login-form-row-tips {
    visibility: visible;
  }
  .form-input { /* 火狐下有效，输入框有历史记住数据，背景是黄色 */
    background: none;
    outline: none;
  }
  .sys-power {
    position: absolute;
    left: 50%;
    transform: translate(-50%, 0);
    font-size: 12px;
    font-weight: 400;
    color: rgba(255, 255, 255, .25);
    line-height: 20px;
    bottom: 5%;
  }
  .link-to-forget {
    font-size: 14px;
    font-weight: 400;
    color: rgba(0, 0, 0, .45);
    line-height: 22px;
  }
  .login-form-footer {
    margin-top: 40px;
    text-align: center;
    font-size: 14px;
    font-weight: 400;
    color: rgba(0, 0, 0, .65);
    line-height: 22px;
  }
  .link-to-register {
    color: $c-primary;
  }
</style>