vue版本上线

jshERP-web/src/components/tools/Breadcrumb.vue

@@ -0,0 +1,48 @@
+<template>
+  <a-breadcrumb class="breadcrumb">
+    <a-breadcrumb-item v-for="(item, index) in breadList" :key="index">
+      <router-link v-if="item.name != name" :to="{ path: item.path }">
+        {{ item.meta.title }}
+      </router-link>
+      <span v-else>{{ item.meta.title }}</span>
+    </a-breadcrumb-item>
+  </a-breadcrumb>
+</template>
+
+<script>
+export default {
+    data() {
+      return {
+        name: '',
+        breadList: [],
+      }
+    },
+  created () {
+    this.getBreadcrumb()
+  },
+  methods: {
+    getBreadcrumb() {
+
+      console.log('this.$route.matched', this.$route.matched)
+
+      this.breadList = []
+      this.breadList.push({ name: 'dashboard-analysis', path: '/dashboard/analysis', meta: { title: '首页' } })
+
+      this.name = this.$route.name
+      this.$route.matched.forEach((item) => {
+        // item.meta.name === 'dashboard' ? item.path = '/dashboard' : this.$route.path === item.path
+          this.breadList.push(item)
+      })
+    }
+  },
+  watch: {
+    $route() {
+      this.getBreadcrumb()
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>

jshERP-web/src/components/tools/DepartSelect.vue

@@ -0,0 +1,162 @@
+<template>
+  <a-modal
+    :title="currTitle"
+    :width="450"
+    :visible="visible"
+    :closable="false"
+    :maskClosable="closable">
+    <template slot="footer">
+      <a-button v-if="closable" @click="close">关闭</a-button>
+      <a-button type="primary" @click="departOk">确认</a-button>
+    </template>
+
+    <a-form>
+      <a-form-item
+        :labelCol="{span:4}"
+        :wrapperCol="{span:20}"
+        style="margin-bottom:10px"
+        :validate-status="validate_status">
+        <a-tooltip placement="topLeft" >
+          <template slot="title">
+            <span>您隶属于多部门，请选择当前所在部门</span>
+          </template>
+          <a-avatar style="backgroundColor:#87d068" icon="gold" />
+        </a-tooltip>
+        <a-select v-model="departSelected" :class="{'valid-error':validate_status=='error'}" placeholder="请选择登录部门" style="margin-left:10px;width: 80%">
+          <a-icon slot="suffixIcon" type="gold" />
+          <a-select-option
+            v-for="d in departList"
+            :key="d.id"
+            :value="d.orgCode">
+            {{ d.departName }}
+          </a-select-option>
+        </a-select>
+      </a-form-item>
+    </a-form>
+
+
+  </a-modal>
+    
+</template>
+
+<script>
+  import { getAction,putAction } from '@/api/manage'
+  import Vue from 'vue'
+  import store from '@/store/'
+  import { USER_INFO } from "@/store/mutation-types"
+
+  export default {
+    name: 'DepartSelect',
+    props:{
+      title:{
+        type:String,
+        default:"部门选择",
+        required:false
+      },
+      closable:{
+        type:Boolean,
+        default:false,
+        required:false
+      },
+      username:{
+        type:String,
+        default:"",
+        required:false
+      }
+    },
+    watch:{
+      username(val){
+        if(val){
+          this.loadDepartList()
+        }
+      }
+    },
+    data(){
+      return {
+        currTitle:this.title,
+        visible:false,
+        departList:[],
+        departSelected:"",
+        validate_status:"",
+        currDepartName:"",
+      }
+    },
+    created(){
+      //this.loadDepartList()
+    },
+    methods:{
+      loadDepartList(){
+        return new Promise(resolve => {
+          let url = "/sys/user/getCurrentUserDeparts"
+          this.currDepartName=''
+          getAction(url).then(res=>{
+            if(res.success){
+              let departs = res.result.list
+              let orgCode = res.result.orgCode
+              if(departs && departs.length>0){
+                for(let i of departs){
+                  if(i.orgCode == orgCode){
+                    this.currDepartName = i.departName
+                    break
+                  }
+                }
+              }
+              this.departSelected = orgCode
+              this.departList  = departs
+              if(this.currDepartName){
+                this.currTitle ="部门切换（当前部门 : "+this.currDepartName+"）"
+              }
+
+            }
+            resolve()
+          })
+        })
+      },
+      close(){
+        this.departClear()
+      },
+      departOk(){
+        if(!this.departSelected){
+          this.validate_status='error'
+          return false
+        }
+        let obj = {
+          orgCode:this.departSelected,
+          username:this.username
+        }
+        putAction("/sys/selectDepart",obj).then(res=>{
+          if(res.success){
+            const userInfo = res.result.userInfo;
+            Vue.ls.set(USER_INFO, userInfo, 7 * 24 * 60 * 60 * 1000);
+            store.commit('SET_INFO', userInfo);
+            //console.log("---切换组织机构---userInfo-------",store.getters.userInfo.orgCode);
+            this.departClear()
+          }
+        })
+      },
+      show(){
+        //如果组件传值username此处就不用loadDepartList了
+        this.loadDepartList().then(()=>{
+          this.visible=true
+          if(!this.departList || this.departList.length<=0){
+            this.$message.warning("您尚未设置部门信息!")
+            this.departClear()
+          }
+        })
+      },
+      departClear(){
+        this.departList=[]
+        this.departSelected=""
+        this.visible=false
+        this.validate_status=''
+        this.currDepartName=""
+      },
+    }
+
+  }
+</script>
+<style scoped>
+  .valid-error .ant-select-selection__placeholder{
+    color: #f5222d;
+  }
+</style>

jshERP-web/src/components/tools/DetailList.vue

@@ -0,0 +1,147 @@
+<template>
+  <div :class="['detail-list', size, layout === 'vertical' ? 'vertical': 'horizontal']">
+    <div v-if="title" class="title">{{ title }}</div>
+    <a-row>
+      <slot></slot>
+    </a-row>
+  </div>
+</template>
+
+<script>
+  import { Col } from 'ant-design-vue/es/grid/'
+
+  const Item = {
+    name: 'DetailListItem',
+    props: {
+      term: {
+        type: String,
+        default: '',
+        required: false
+      },
+    },
+    inject: {
+      col: {
+        type: Number
+      }
+    },
+    render () {
+      return (
+        <Col {...{props: responsive[this.col]}}>
+          <div class="term">{this.$props.term}</div>
+          <div class="content">{this.$slots.default}</div>
+        </Col>
+      )
+    }
+  }
+
+  const responsive = {
+    1: { xs: 24 },
+    2: { xs: 24, sm: 12 },
+    3: { xs: 24, sm: 12, md: 8 },
+    4: { xs: 24, sm: 12, md: 6 }
+  }
+
+  export default {
+    name: "DetailList",
+    Item: Item,
+    components: {
+      Col
+    },
+    props: {
+      title: {
+        type: String,
+        default: '',
+        required: false
+      },
+      col: {
+        type: Number,
+        required: false,
+        default: 3
+      },
+      size: {
+        type: String,
+        required: false,
+        default: 'large'
+      },
+      layout: {
+        type: String,
+        required: false,
+        default: 'horizontal'
+      }
+    },
+    provide () {
+      return {
+        col: this.col > 4 ? 4 : this.col
+      }
+    }
+  }
+</script>
+
+<style lang="less">
+
+  .detail-list {
+
+    .title {
+      color: rgba(0,0,0,.85);
+      font-size: 14px;
+      font-weight: 500;
+      margin-bottom: 16px;
+    }
+
+    .term {
+      color: rgba(0,0,0,.85);
+      display: table-cell;
+      line-height: 20px;
+      margin-right: 8px;
+      padding-bottom: 16px;
+      white-space: nowrap;
+
+      &:after {
+        content: ":";
+        margin: 0 8px 0 2px;
+        position: relative;
+        top: -.5px;
+      }
+    }
+
+    .content {
+      color: rgba(0,0,0,.65);
+      display: table-cell;
+      line-height: 22px;
+      padding-bottom: 16px;
+      width: 100%;
+    }
+
+    &.small {
+
+      .title {
+        font-size: 14px;
+        color: rgba(0, 0, 0, .65);
+        font-weight: normal;
+        margin-bottom: 12px;
+      }
+      .term, .content {
+        padding-bottom: 8px;
+      }
+    }
+
+    &.large {
+      .term, .content {
+        padding-bottom: 16px;
+      }
+
+      .title {
+        font-size: 16px;
+      }
+    }
+
+    &.vertical {
+      .term {
+        padding-bottom: 8px;
+      }
+      .term, .content {
+        display: block;
+      }
+    }
+  }
+</style>

jshERP-web/src/components/tools/DynamicNotice.vue

@@ -0,0 +1,36 @@
+<template>
+  <component
+    :is="comp"
+    :formData="formData"
+    ref="compModel"
+    v-if="comp">
+  </component>
+</template>
+<script>
+  export default {
+    name: 'DynamicNotice',
+    data () {
+      return {
+        compName: this.path
+      }
+    },
+    computed: {
+      comp: function () {
+        if(!this.path){
+          return null;
+        }
+        return () => import(`@/views/${this.path}.vue`)
+      }
+    },
+    props: ['path','formData'],
+    methods: {
+      detail () {
+        setTimeout(() => {
+          if(this.path){
+            this.$refs.compModel.view(this.formData);
+          }
+        }, 200)
+      },
+    }
+  }
+</script>

jshERP-web/src/components/tools/FooterToolBar.vue

@@ -0,0 +1,32 @@
+<template>
+  <div class="toolbar">
+    <div style="float: left">
+      <slot name="extra"></slot>
+    </div>
+    <div style="float: right">
+      <slot></slot>
+    </div>
+  </div>
+</template>
+
+<script>
+  export default {
+    name: "FooterToolBar"
+  }
+</script>
+
+<style lang="less" scoped>
+  .toolbar {
+    position: fixed;
+    width: 100%;
+    bottom: 0;
+    right: 0;
+    height: 56px;
+    line-height: 56px;
+    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.03);
+    background: #fff;
+    border-top: 1px solid #e8e8e8;
+    padding: 0 24px;
+    z-index: 9;
+  }
+</style>

jshERP-web/src/components/tools/HeadInfo.vue

@@ -0,0 +1,66 @@
+<template>
+  <div class="head-info" :class="center && 'left'">
+    <p>￥{{ content }}</p>
+    <em v-if="bordered"/>
+  </div>
+</template>
+
+<script>
+  export default {
+    name: "HeadInfo",
+    props: {
+      title: {
+        type: String,
+        default: ''
+      },
+      content: {
+        type: Number,
+        default: ''
+      },
+      bordered: {
+        type: Boolean,
+        default: false
+      },
+      center: {
+        type: Boolean,
+        default: true
+      }
+    }
+  }
+</script>
+
+<style lang="less" scoped>
+  .head-info {
+    position: relative;
+    text-align: left;
+    padding: 0 32px 0 0;
+    min-width: 125px;
+
+    &.center {
+      text-align: center;
+      padding: 0 32px;
+    }
+
+    span {
+      color: rgba(0, 0, 0, .45);
+      display: inline-block;
+      font-size: 14px;
+      line-height: 22px;
+      margin-bottom: 4px;
+    }
+    p {
+      color: rgba(0, 0, 0, .85);
+      font-size: 28px;
+      line-height: 32px;
+      margin: 0;
+    }
+    em {
+      background-color: #e8e8e8;
+      position: absolute;
+      height: 56px;
+      width: 1px;
+      top: 0;
+      right: 0;
+    }
+  }
+</style>

jshERP-web/src/components/tools/HeaderNotice.vue

@@ -0,0 +1,319 @@
+<template>
+  <a-popover
+    trigger="click"
+    placement="bottomRight"
+    :autoAdjustOverflow="true"
+    :arrowPointAtCenter="true"
+    overlayClassName="header-notice-wrapper"
+    @visibleChange="handleHoverChange"
+    :overlayStyle="{ width: '300px', top: '50px' }">
+    <template slot="content">
+      <a-spin :spinning="loadding">
+        <a-tabs>
+          <a-tab-pane :tab="msg1Title" key="1">
+            <a-list>
+              <a-list-item :key="index" v-for="(record, index) in announcement1">
+                <div style="margin-left: 5%;width: 80%">
+                  <p><a @click="showAnnouncement(record)">{{ record.titile }}</a></p>
+                  <p style="color: rgba(0,0,0,.45);margin-bottom: 0px">{{ record.createTime }} 发布</p>
+                </div>
+                <div style="text-align: right">
+                  <a-tag @click="showAnnouncement(record)" v-if="record.priority === 'L'" color="blue">一般消息</a-tag>
+                  <a-tag @click="showAnnouncement(record)" v-if="record.priority === 'M'" color="orange">重要消息</a-tag>
+                  <a-tag @click="showAnnouncement(record)" v-if="record.priority === 'H'" color="red">紧急消息</a-tag>
+                </div>
+              </a-list-item>
+              <div style="margin-top: 5px;text-align: center">
+                <a-button @click="toMyAnnouncement()" type="dashed" block>查看更多</a-button>
+              </div>
+            </a-list>
+          </a-tab-pane>
+          <a-tab-pane :tab="msg2Title" key="2">
+            <a-list>
+              <a-list-item :key="index" v-for="(record, index) in announcement2">
+                <div style="margin-left: 5%;width: 80%">
+                  <p><a @click="showAnnouncement(record)">{{ record.titile }}</a></p>
+                  <p style="color: rgba(0,0,0,.45);margin-bottom: 0px">{{ record.createTime }} 发布</p>
+                </div>
+                <div style="text-align: right">
+                  <a-tag @click="showAnnouncement(record)" v-if="record.priority === 'L'" color="blue">一般消息</a-tag>
+                  <a-tag @click="showAnnouncement(record)" v-if="record.priority === 'M'" color="orange">重要消息</a-tag>
+                  <a-tag @click="showAnnouncement(record)" v-if="record.priority === 'H'" color="red">紧急消息</a-tag>
+                </div>
+              </a-list-item>
+              <div style="margin-top: 5px;text-align: center">
+                <a-button @click="toMyAnnouncement()" type="dashed" block>查看更多</a-button>
+              </div>
+            </a-list>
+          </a-tab-pane>
+        </a-tabs>
+      </a-spin>
+    </template>
+    <span @click="fetchNotice" class="header-notice">
+      <a-badge :count="msgTotal">
+        <a-icon style="font-size: 16px; padding: 4px" type="bell" />
+      </a-badge>
+    </span>
+    <show-announcement ref="ShowAnnouncement" @ok="modalFormOk"></show-announcement>
+    <dynamic-notice ref="showDynamNotice" :path="openPath" :formData="formData"/>
+  </a-popover>
+</template>
+
+<script>
+  import { getAction,putAction } from '@/api/manage'
+  import ShowAnnouncement from './ShowAnnouncement'
+  import store from '@/store/'
+  import DynamicNotice from './DynamicNotice'
+
+
+  export default {
+    name: "HeaderNotice",
+    components: {
+      DynamicNotice,
+      ShowAnnouncement,
+    },
+    data () {
+      return {
+        loadding: false,
+        url:{
+          listCementByUser:"/sys/annountCement/listByUser",
+          editCementSend:"/sys/sysAnnouncementSend/editByAnntIdAndUserId",
+          queryById:"/sys/annountCement/queryById",
+        },
+        hovered: false,
+        announcement1:[],
+        announcement2:[],
+        msg1Count:"0",
+        msg2Count:"0",
+        msg1Title:"通知(0)",
+        msg2Title:"",
+        stopTimer:false,
+        websock: null,
+        lockReconnect:false,
+        heartCheck:null,
+        formData:{},
+        openPath:''
+      }
+    },
+    computed:{
+      msgTotal () {
+        return parseInt(this.msg1Count)+parseInt(this.msg2Count);
+      }
+    },
+    mounted() {
+      //this.loadData();
+      //this.timerFun();
+      //this.initWebSocket(); //注释by jishenghua  2021年1月13日
+     // this.heartCheckFun();
+    },
+    destroyed: function () { // 离开页面生命周期函数
+      this.websocketclose();
+    },
+    methods: {
+      timerFun() {
+        this.stopTimer = false;
+        let myTimer = setInterval(()=>{
+          // 停止定时器
+          if (this.stopTimer == true) {
+            clearInterval(myTimer);
+            return;
+          }
+          this.loadData()
+        },6000)
+      },
+      loadData (){
+        try {
+          // 获取系统消息
+          getAction(this.url.listCementByUser).then((res) => {
+            if (res.success) {
+              this.announcement1 = res.result.anntMsgList;
+              this.msg1Count = res.result.anntMsgTotal;
+              this.msg1Title = "通知(" + res.result.anntMsgTotal + ")";
+              this.announcement2 = res.result.sysMsgList;
+              this.msg2Count = res.result.sysMsgTotal;
+              this.msg2Title = "系统消息(" + res.result.sysMsgTotal + ")";
+            }
+          }).catch(error => {
+            console.log("系统消息通知异常",error);//这行打印permissionName is undefined
+            this.stopTimer = true;
+            console.log("清理timer");
+          });
+        } catch (err) {
+          this.stopTimer = true;
+          console.log("通知异常",err);
+        }
+      },
+      fetchNotice () {
+        if (this.loadding) {
+          this.loadding = false
+          return
+        }
+        this.loadding = true
+        setTimeout(() => {
+          this.loadding = false
+        }, 200)
+      },
+      showAnnouncement(record){
+        putAction(this.url.editCementSend,{anntId:record.id}).then((res)=>{
+          if(res.success){
+            this.loadData();
+          }
+        });
+        this.hovered = false;
+        if(record.openType==='component'){
+          this.openPath = record.openPage;
+          this.formData = {id:record.busId};
+          this.$refs.showDynamNotice.detail(record.openPage);
+        }else{
+          this.$refs.ShowAnnouncement.detail(record);
+        }
+      },
+      toMyAnnouncement(){
+
+        this.$router.push({
+          path: '/isps/userAnnouncement',
+          name: 'isps-userAnnouncement'
+        });
+      },
+      modalFormOk(){
+      },
+      handleHoverChange (visible) {
+        this.hovered = visible;
+      },
+
+      initWebSocket: function () {
+        // WebSocket与普通的请求所用协议有所不同，ws等同于http，wss等同于https
+        var userId = store.getters.userInfo.id;
+        var url = window._CONFIG['domianURL'].replace("https://","wss://").replace("http://","ws://")+"/websocket/"+userId;
+        console.log(url);
+        this.websock = new WebSocket(url);
+        this.websock.onopen = this.websocketOnopen;
+        this.websock.onerror = this.websocketOnerror;
+        this.websock.onmessage = this.websocketOnmessage;
+        this.websock.onclose = this.websocketOnclose;
+      },
+      websocketOnopen: function () {
+        console.log("WebSocket连接成功");
+        //心跳检测重置
+        //this.heartCheck.reset().start();
+      },
+      websocketOnerror: function (e) {
+        console.log("WebSocket连接发生错误");
+        this.reconnect();
+      },
+      websocketOnmessage: function (e) {
+        console.log("-----接收消息-------",e.data);
+        var data = eval("(" + e.data + ")"); //解析对象
+        if(data.cmd == "topic"){
+            //系统通知
+          this.loadData();
+        }else if(data.cmd == "user"){
+            //用户消息
+          this.loadData();
+        }
+        //心跳检测重置
+        //this.heartCheck.reset().start();
+      },
+      websocketOnclose: function (e) {
+        console.log("connection closed (" + e.code + ")");
+        this.reconnect();
+      },
+      websocketSend(text) { // 数据发送
+        try {
+          this.websock.send(text);
+        } catch (err) {
+          console.log("send failed (" + err.code + ")");
+        }
+      },
+
+      openNotification (data) {
+        var text = data.msgTxt;
+        const key = `open${Date.now()}`;
+        this.$notification.open({
+          message: '消息提醒',
+          placement:'bottomRight',
+          description: text,
+          key,
+          btn: (h)=>{
+            return h('a-button', {
+              props: {
+                type: 'primary',
+                size: 'small',
+              },
+              on: {
+                click: () => this.showDetail(key,data)
+              }
+            }, '查看详情')
+          },
+        });
+      },
+
+      reconnect() {
+        var that = this;
+        if(that.lockReconnect) return;
+        that.lockReconnect = true;
+        //没连接上会一直重连，设置延迟避免请求过多
+        setTimeout(function () {
+          console.info("尝试重连...");
+          that.initWebSocket();
+          that.lockReconnect = false;
+        }, 5000);
+      },
+      heartCheckFun(){
+        var that = this;
+        //心跳检测,每20s心跳一次
+        that.heartCheck = {
+          timeout: 20000,
+          timeoutObj: null,
+          serverTimeoutObj: null,
+          reset: function(){
+            clearTimeout(this.timeoutObj);
+            //clearTimeout(this.serverTimeoutObj);
+            return this;
+          },
+          start: function(){
+            var self = this;
+            this.timeoutObj = setTimeout(function(){
+              //这里发送一个心跳，后端收到后，返回一个心跳消息，
+              //onmessage拿到返回的心跳就说明连接正常
+              that.websocketSend("HeartBeat");
+              console.info("客户端发送心跳");
+              //self.serverTimeoutObj = setTimeout(function(){//如果超过一定时间还没重置，说明后端主动断开了
+              //  that.websock.close();//如果onclose会执行reconnect，我们执行ws.close()就行了.如果直接执行reconnect 会触发onclose导致重连两次
+              //}, self.timeout)
+            }, this.timeout)
+          }
+        }
+      },
+
+
+      showDetail(key,data){
+        this.$notification.close(key);
+        var id = data.msgId;
+        getAction(this.url.queryById,{id:id}).then((res) => {
+          if (res.success) {
+            var record = res.result;
+            this.showAnnouncement(record);
+          }
+        })
+
+      },
+    }
+  }
+</script>
+
+<style lang="css">
+  .header-notice-wrapper {
+    top: 50px !important;
+  }
+</style>
+<style lang="less" scoped>
+  .header-notice{
+    display: inline-block;
+    transition: all 0.3s;
+
+    span {
+      vertical-align: initial;
+    }
+  }
+</style>

jshERP-web/src/components/tools/Logo.vue

@@ -0,0 +1,57 @@
+<template>
+  <div class="logo">
+    <router-link :to="{name:'dashboard'}">
+      <!-- update-begin- author:sunjianlei --- date:20190814 --- for: logo颜色根据主题颜色变化 -->
+      <img v-if="layoutMode === 'sidemenu'" src="~@/assets/logo.png" alt="logo">
+      <img v-else src="~@/assets/logo_top.png" alt="logo">
+      <!-- update-begin- author:sunjianlei --- date:20190814 --- for: logo颜色根据主题颜色变化 -->
+      <h1 v-if="showTitle">{{ title }}</h1>
+    </router-link>
+  </div>
+</template>
+
+<script>
+  import { mixin } from '@/utils/mixin.js'
+
+  export default {
+    name: 'Logo',
+    mixins: [mixin],
+    props: {
+      title: {
+        type: String,
+        default: window.SYS_TITLE,
+        required: false
+      },
+      showTitle: {
+        type: Boolean,
+        default: true,
+        required: false
+      }
+    }
+  }
+</script>
+<style lang="less" scoped>
+  /*缩小首页布 局顶部的高度*/
+  @height: 59px;
+
+  .sider {
+    box-shadow: none !important;
+    .logo {
+      height: @height !important;
+      line-height: @height !important;
+      box-shadow: none !important;
+      transition: background 300ms;
+
+      a {
+        color: white;
+        &:hover {
+          color: rgba(255, 255, 255, 0.8);
+        }
+      }
+    }
+
+    &.light .logo {
+      background-color: @primary-color;
+    }
+  }
+</style>

jshERP-web/src/components/tools/ShowAnnouncement.vue

@@ -0,0 +1,139 @@
+<template>
+  <j-modal
+    :title="title"
+    :width="modelStyle.width"
+    :visible="visible"
+    :bodyStyle ="bodyStyle"
+    :switchFullscreen="switchFullscreen"
+    @cancel="handleCancel"
+   >
+    <template slot="footer">
+      <a-button key="back" @click="handleCancel">关闭</a-button>
+      <a-button v-if="record.openType==='url'" type="primary" @click="toHandle">去处理</a-button>
+    </template>
+    <a-card class="daily-article" :loading="loading">
+      <a-card-meta
+        :title="record.titile"
+        :description="'发布人：'+record.sender + ' 发布时间： ' + record.sendTime">
+      </a-card-meta>
+      <a-divider />
+      <span v-html="record.msgContent" class="article-content"></span>
+    </a-card>
+  </j-modal>
+</template>
+
+<script>
+  export default {
+    name: "SysAnnouncementModal",
+    components: {
+    },
+    data () {
+      return {
+        title:"通知消息",
+        record: {},
+        labelCol: {
+          xs: { span: 24 },
+          sm: { span: 5 },
+        },
+        wrapperCol: {
+          xs: { span: 24 },
+          sm: { span: 16 },
+        },
+        visible: false,
+        switchFullscreen: true,
+        loading: false,
+        bodyStyle:{
+          padding: "0",
+          height:(window.innerHeight*0.8)+"px",
+          "overflow-y":"auto",
+
+        },
+        modelStyle:{
+          width: '60%',
+          style: { top: '20px' },
+          fullScreen: false
+        }
+      }
+    },
+    created () {
+    },
+    methods: {
+      detail (record) {
+        this.visible = true;
+        this.record = record;
+      },
+      handleCancel () {
+        this.visible = false;
+      },
+      /** 切换全屏显示 */
+      handleClickToggleFullScreen() {
+        let mode = !this.modelStyle.fullScreen
+        if (mode) {
+          this.modelStyle.width = '100%'
+          this.modelStyle.style.top = '20px'
+        } else {
+          this.modelStyle.width = '60%'
+          this.modelStyle.style.top = '50px'
+        }
+        this.modelStyle.fullScreen = mode
+      },
+      toHandle(){
+        if(this.record.openType==='url'){
+          this.visible = false;
+          //链接跳转
+          this.$router.push({path: this.record.openPage})
+        }
+      },
+    }
+  }
+</script>
+
+<style lang="less">
+  .announcementCustomModal{
+    .ant-modal-header {
+      border: none;
+      display: inline-block;
+      position: absolute;
+      z-index: 1;
+      right: 56px;
+      padding: 0;
+      .ant-modal-title{
+        .custom-btn{
+          width: 56px;
+          height: 56px;
+          border: none;
+          box-shadow: none;
+        }
+      }
+    }
+    .daily-article{
+      border-bottom: 0;
+    }
+  }
+</style>
+<style scoped lang="less">
+  .daily-article {
+    .article-button {
+      font-size: 1.2rem !important;
+    }
+    .ant-card-body {
+      padding: 18px !important;
+    }
+    .ant-card-head {
+      padding: 0 1rem;
+    }
+    .ant-card-meta {
+      margin-bottom: 1rem;
+    }
+    .article-content {
+      p {
+        word-wrap: break-word;
+        word-break: break-all;
+        text-overflow: initial;
+        white-space: normal;
+        font-size: .9rem !important;
+        margin-bottom: .8rem;
+      }
+    }
+  }
+</style>

jshERP-web/src/components/tools/TwoStepCaptcha.vue

@@ -0,0 +1,89 @@
+<template>
+  <!-- 两步验证 -->
+  <a-modal
+    centered
+    v-model="visible"
+    @cancel="handleCancel"
+    :maskClosable="false"
+  >
+    <div slot="title" :style="{ textAlign: 'center' }">两步验证</div>
+    <template slot="footer">
+      <div :style="{ textAlign: 'center' }">
+        <a-button key="back" @click="handleCancel">返回</a-button>
+        <a-button key="submit" type="primary" :loading="stepLoading" @click="handleStepOk">
+          继续
+        </a-button>
+      </div>
+    </template>
+
+    <a-spin :spinning="stepLoading">
+      <a-form layout="vertical" :auto-form-create="(form)=>{this.form = form}">
+        <div class="step-form-wrapper">
+          <p style="text-align: center" v-if="!stepLoading">请在手机中打开 Google Authenticator 或两步验证 APP<br />输入 6 位动态码</p>
+          <p style="text-align: center" v-else>正在验证..<br/>请稍后</p>
+          <a-form-item
+            :style="{ textAlign: 'center' }"
+            hasFeedback
+            fieldDecoratorId="stepCode"
+            :fieldDecoratorOptions="{rules: [{ required: true, message: '请输入 6 位动态码!', pattern: /^\d{6}$/, len: 6 }]}"
+          >
+            <a-input :style="{ textAlign: 'center' }" @keyup.enter.native="handleStepOk" placeholder="000000" />
+          </a-form-item>
+          <p style="text-align: center">
+            <a @click="onForgeStepCode">遗失手机?</a>
+          </p>
+        </div>
+      </a-form>
+    </a-spin>
+  </a-modal>
+</template>
+
+<script>
+export default {
+  props: {
+    visible: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data() {
+    return {
+      stepLoading: false,
+
+      form: null
+    };
+  },
+  methods: {
+    handleStepOk() {
+      const vm = this
+      this.stepLoading = true
+      this.form.validateFields((err, values) => {
+        if (!err) {
+          console.log('values', values)
+          setTimeout( () => {
+            vm.stepLoading = false
+            vm.$emit('success', { values })
+          }, 2000)
+          return;
+        }
+        this.stepLoading = false
+        this.$emit('error', { err })
+      })
+    },
+    handleCancel () {
+      this.visible = false
+      this.$emit('cancel')
+    },
+    onForgeStepCode() {
+      
+    }
+  }
+};
+</script>
+<style lang="less" scoped>
+  .step-form-wrapper {
+    margin: 0 auto;
+    width: 80%;
+    max-width: 400px;
+  }
+</style>

jshERP-web/src/components/tools/UserMenu.vue

@@ -0,0 +1,242 @@
+<template>
+  <div class="user-wrapper" :class="theme">
+    <!-- update_begin author:zhaoxin date:20191129 for: 做头部菜单栏导航 -->
+    <!-- update-begin author:sunjianlei date:20191@20 for: 解决全局样式冲突的问题 -->
+    <span class="action" @click="showClick">
+      <a-icon type="search"></a-icon>
+    </span>
+    <!-- update-begin author:sunjianlei date:20200219 for: 菜单搜索改为动态组件，在手机端呈现出弹出框 -->
+<!--    <component :is="searchMenuComp" v-show="searchMenuVisible || isMobile()" class="borders" :visible="searchMenuVisible" title="搜索菜单" :footer="null" @cancel="searchMenuVisible=false">-->
+<!--      <a-select-->
+<!--        class="search-input"-->
+<!--        showSearch-->
+<!--        :showArrow="false"-->
+<!--        placeholder="搜索菜单"-->
+<!--        optionFilterProp="children"-->
+<!--        :filterOption="filterOption"-->
+<!--        :open="isMobile()?true:null"-->
+<!--        :getPopupContainer="(node) => node.parentNode"-->
+<!--        :style="isMobile()?{width: '100%',marginBottom:'50px'}:{}"-->
+<!--        @change="searchMethods"-->
+<!--        @blur="hiddenClick"-->
+<!--      >-->
+<!--        <a-select-option v-for="(site,index) in searchMenuOptions" :key="index" :value="site.id">{{site.meta.title}}</a-select-option>-->
+<!--      </a-select>-->
+<!--    </component>-->
+    <!-- update-end author:sunjianlei date:20200219 for: 菜单搜索改为动态组件，在手机端呈现出弹出框 -->
+    <!-- update-end author:sunjianlei date:20191220 for: 解决全局样式冲突的问题 -->
+    <!-- update_end  author:zhaoxin date:20191129 for: 做头部菜单栏导航 -->
+    <span class="action">
+      <a class="logout_title" target="_blank" href="http://www.huaxiaerp.com/">
+        <a-icon type="bank" />
+      </a>
+    </span>
+    <header-notice class="action"/>
+    <a-dropdown>
+      <span v-if="isDesktop()" class="action ant-dropdown-link user-dropdown-menu">
+<!--        <a-avatar class="avatar" size="small" :src="getAvatar()"/>-->
+        <span>欢迎您，{{ nickname() }}</span>
+      </span>
+      <a-menu slot="overlay" class="user-dropdown-menu-wrapper">
+        <a-menu-item key="0">
+          <router-link :to="{ name: 'account-center' }">
+            <a-icon type="user"/>
+            <span>个人中心</span>
+          </router-link>
+        </a-menu-item>
+        <a-menu-item key="1">
+          <router-link :to="{ name: 'account-settings-base' }">
+            <a-icon type="setting"/>
+            <span>账户设置</span>
+          </router-link>
+        </a-menu-item>
+        <a-menu-item key="3"  @click="systemSetting">
+           <a-icon type="tool"/>
+           <span>系统设置</span>
+        </a-menu-item>
+        <a-menu-item key="4" @click="updatePassword">
+          <a-icon type="setting"/>
+          <span>密码修改</span>
+        </a-menu-item>
+       <!-- <a-menu-item key="2" disabled>
+          <a-icon type="setting"/>
+          <span>测试</span>
+        </a-menu-item>
+        <a-menu-divider/>
+        <a-menu-item key="3">
+          <a href="javascript:;" @click="handleLogout">
+            <a-icon type="logout"/>
+            <span>退出登录</span>
+          </a>
+        </a-menu-item>-->
+      </a-menu>
+    </a-dropdown>
+    <span class="action">
+      <a class="logout_title" href="javascript:;" @click="handleLogout">
+        <a-icon type="logout"/>
+        <span v-if="isDesktop()">&nbsp;退出登录</span>
+      </a>
+    </span>
+    <user-password ref="userPassword"></user-password>
+    <depart-select ref="departSelect" :closable="true" title="部门切换"></depart-select>
+    <setting-drawer ref="settingDrawer" :closable="true" title="系统设置"></setting-drawer>
+  </div>
+</template>
+
+<script>
+  import HeaderNotice from './HeaderNotice'
+  import UserPassword from './UserPassword'
+  import SettingDrawer from "@/components/setting/SettingDrawer";
+  import DepartSelect from './DepartSelect'
+  import { mapActions, mapGetters,mapState } from 'vuex'
+  import { mixinDevice } from '@/utils/mixin.js'
+  import { getFileAccessHttpUrl } from "@/api/manage"
+
+  export default {
+    name: "UserMenu",
+    mixins: [mixinDevice],
+    data(){
+      return{
+        // update-begin author:sunjianlei date:20200219 for: 头部菜单搜索规范命名 --------------
+        searchMenuOptions:[],
+        searchMenuComp: 'span',
+        searchMenuVisible: false,
+        // update-begin author:sunjianlei date:20200219 for: 头部菜单搜索规范命名 --------------
+      }
+    },
+    components: {
+      HeaderNotice,
+      UserPassword,
+      DepartSelect,
+      SettingDrawer
+    },
+    props: {
+      theme: {
+        type: String,
+        required: false,
+        default: 'dark'
+      }
+    },
+    /* update_begin author:zhaoxin date:20191129 for: 做头部菜单栏导航*/
+    created() {
+      let lists = []
+      this.searchMenus(lists,this.permissionMenuList)
+      this.searchMenuOptions=[...lists]
+    },
+    computed: {
+      ...mapState({
+        // 后台菜单
+        permissionMenuList: state => state.user.permissionList
+
+      })
+    },
+    /* update_end author:zhaoxin date:20191129 for: 做头部菜单栏导航*/
+    watch: {
+      // update-begin author:sunjianlei date:20200219 for: 菜单搜索改为动态组件，在手机端呈现出弹出框
+      device: {
+        immediate: true,
+        handler() {
+          this.searchMenuVisible = false
+          this.searchMenuComp = this.isMobile() ? 'a-modal' : 'span'
+        },
+      },
+      // update-end author:sunjianlei date:20200219 for: 菜单搜索改为动态组件，在手机端呈现出弹出框
+    },
+    methods: {
+      /* update_begin author:zhaoxin date:20191129 for: 做头部菜单栏导航*/
+      showClick() {
+        this.searchMenuVisible = true
+      },
+      hiddenClick(){
+        this.shows = false
+      },
+      /* update_end author:zhaoxin date:20191129 for: 做头部菜单栏导航*/
+      ...mapActions(["Logout"]),
+      ...mapGetters(["nickname","userInfo"]),
+      // getAvatar(){
+      //   return getFileAccessHttpUrl(this.avatar())
+      // },
+      handleLogout() {
+        const that = this
+
+        this.$confirm({
+          title: '提示',
+          content: '真的要注销登录吗 ?',
+          onOk() {
+            return that.Logout({}).then(() => {
+                window.location.href="/";
+              //window.location.reload()
+            }).catch(err => {
+              that.$message.error({
+                title: '错误',
+                description: err.message
+              })
+            })
+          },
+          onCancel() {
+          },
+        });
+      },
+      updatePassword(){
+        let userId = this.userInfo().id
+        this.$refs.userPassword.show(userId)
+      },
+      systemSetting(){
+        this.$refs.settingDrawer.showDrawer()
+      },
+      /* update_begin author:zhaoxin date:20191129 for: 做头部菜单栏导航*/
+      searchMenus(arr,menus){
+        for(let i of menus){
+          if(!i.hidden && "layouts/RouteView"!==i.component){
+           arr.push(i)
+          }
+          if(i.children&& i.children.length>0){
+            this.searchMenus(arr,i.children)
+          }
+        }
+      },
+      filterOption(input, option) {
+        return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
+      },
+      // update_begin author:sunjianlei date:20191230 for: 解决外部链接打开失败的问题
+      searchMethods(value) {
+        let route = this.searchMenuOptions.filter(item => item.id === value)[0]
+        if (route.meta.internalOrExternal === true || route.component.includes('layouts/IframePageView')) {
+          window.open(route.meta.url, '_blank')
+        } else {
+          this.$router.push({ path: route.path })
+        }
+        this.searchMenuVisible = false
+      }
+      // update_end author:sunjianlei date:20191230 for: 解决外部链接打开失败的问题
+      /*update_end author:zhaoxin date:20191129 for: 做头部菜单栏导航*/
+    }
+  }
+</script>
+
+<style lang="less" scoped>
+  /* update_begin author:zhaoxin date:20191129 for: 让搜索框颜色能随主题颜色变换*/
+  /* update-begin author:sunjianlei date:20191220 for: 解决全局样式冲突问题 */
+  .user-wrapper .search-input {
+    width: 180px;
+    color: inherit;
+
+    /deep/ .ant-select-selection {
+      background-color: inherit;
+      border: 0;
+      border-bottom: 1px solid white;
+      &__placeholder, &__field__placeholder {
+        color: inherit;
+      }
+    }
+  }
+  /* update-end author:sunjianlei date:20191220 for: 解决全局样式冲突问题 */
+  /* update_end author:zhaoxin date:20191129 for: 让搜索框颜色能随主题颜色变换*/
+</style>
+
+<style scoped>
+  .logout_title {
+    color: inherit;
+    text-decoration: none;
+  }
+</style>

jshERP-web/src/components/tools/UserPassword.vue

@@ -0,0 +1,157 @@
+<template>
+  <a-modal
+    :title="title"
+    :width="modalWidth"
+    :visible="visible"
+    :confirmLoading="confirmLoading"
+    @ok="handleOk"
+    @cancel="handleCancel"
+    cancelText="关闭"
+  >
+    <a-spin :spinning="confirmLoading">
+      <a-form :form="form">
+
+        <a-form-item
+          :labelCol="labelCol"
+          :wrapperCol="wrapperCol"
+          label="旧密码">
+          <a-input type="password" placeholder="请输入旧密码" v-decorator="[ 'oldpassword', validatorRules.oldpassword]" />
+        </a-form-item>
+
+        <a-form-item
+          :labelCol="labelCol"
+          :wrapperCol="wrapperCol"
+          label="新密码">
+          <a-input type="password" placeholder="请输入新密码" v-decorator="[ 'password', validatorRules.password]" />
+        </a-form-item>
+
+        <a-form-item
+          :labelCol="labelCol"
+          :wrapperCol="wrapperCol"
+          label="确认新密码">
+          <a-input type="password" @blur="handleConfirmBlur" placeholder="请确认新密码" v-decorator="[ 'confirmpassword', validatorRules.confirmpassword]"/>
+        </a-form-item>
+
+      </a-form>
+    </a-spin>
+  </a-modal>
+</template>
+
+<script>
+
+  import { putAction } from '@/api/manage'
+
+  export default {
+    name: "UserPassword",
+    data () {
+      return {
+        title:"修改密码",
+        modalWidth:800,
+        visible: false,
+        confirmLoading: false,
+        validatorRules:{
+          oldpassword:{
+            rules: [{
+              required: true, message: '请输入旧密码!',
+            }],
+          },
+          password:{
+            rules: [{
+              required: true, message: '请输入新密码!',
+            }, {
+              validator: this.validateToNextPassword,
+            }],
+          },
+          confirmpassword:{
+            rules: [{
+              required: true, message: '请确认新密码!',
+            }, {
+              validator: this.compareToFirstPassword,
+            }],
+          }
+        },
+        confirmDirty:false,
+        labelCol: {
+          xs: { span: 24 },
+          sm: { span: 5 },
+        },
+        wrapperCol: {
+          xs: { span: 24 },
+          sm: { span: 16 },
+        },
+
+        form:this.$form.createForm(this),
+        url: "/user/updatePwd",
+        userId:"",
+      }
+    },
+    methods: {
+      show(userId){
+        if(!userId){
+          this.$message.warning("当前系统无登陆用户!");
+          return
+        }else{
+          this.userId = userId
+          this.form.resetFields();
+          this.visible = true;
+        }
+      },
+      handleCancel () {
+        this.close()
+      },
+      close () {
+        this.$emit('close');
+        this.visible = false;
+        this.disableSubmit = false;
+        this.selectedRole = [];
+      },
+      handleOk () {
+        const that = this;
+        // 触发表单验证
+        this.form.validateFields((err, values) => {
+          if (!err) {
+            that.confirmLoading = true;
+            let params = Object.assign({userId:this.userId},values)
+            console.log("修改密码提交数据",params)
+            putAction(this.url,params).then((res)=>{
+              if(res.code === 200){
+                console.log(res)
+                that.$message.success(res.data.message);
+                that.close();
+              }else{
+                that.$message.warning(res.data.message);
+              }
+            }).finally(() => {
+              that.confirmLoading = false;
+            })
+          }
+        })
+      },
+      validateToNextPassword  (rule, value, callback) {
+        const form = this.form;
+        if (value && this.confirmDirty) {
+          form.validateFields(['confirm'], { force: true })
+        }
+        callback();
+      },
+      compareToFirstPassword  (rule, value, callback) {
+        const form = this.form;
+        if (value && value !== form.getFieldValue('password')) {
+          callback('两次输入的密码不一样！');
+        } else {
+          callback()
+        }
+      },
+      handleConfirmBlur  (e) {
+        const value = e.target.value
+        this.confirmDirty = this.confirmDirty || !!value
+      }
+
+    }
+  }
+</script>
+
+<style scoped>
+
+</style>
+

jshERP-web/src/components/tools/setting.js

@@ -0,0 +1,95 @@
+import { message } from 'ant-design-vue/es';
+// import defaultSettings from '../defaultSettings';
+
+let lessNodesAppended;
+
+const colorList = [
+  {
+    key: '薄暮', color: '#F5222D',
+  },
+  {
+    key: '火山', color: '#FA541C',
+  },
+  {
+    key: '日暮', color: '#FAAD14',
+  },
+  {
+    key: '明青', color: '#13C2C2',
+  },
+  {
+    key: '极光绿', color: '#52C41A',
+  },
+  {
+    key: '拂晓蓝（默认）', color: '#1890FF',
+  },
+  {
+    key: '极客蓝', color: '#2F54EB',
+  },
+  {
+    key: '酱紫', color: '#722ED1',
+  },
+];
+
+const updateTheme = primaryColor => {
+  // Don't compile less in production!
+  /* if (process.env.NODE_ENV === 'production') {
+    return;
+  } */
+  // Determine if the component is remounted
+  if (!primaryColor) {
+    return;
+  }
+  const hideMessage = message.loading('正在编译主题！', 0);
+  console.info(`正在编译主题!`)
+  function buildIt() {
+    // 正确的判定less是否已经加载less.modifyVars可用
+    if (!window.less || !window.less.modifyVars) {
+      return;
+    }
+    // less.modifyVars可用
+    window.less.modifyVars({
+        '@primary-color': primaryColor,
+      })
+      .then(() => {
+        hideMessage();
+      })
+      .catch(() => {
+        message.error('Failed to update theme');
+        hideMessage();
+      });
+  }
+  if (!lessNodesAppended) {
+    // insert less.js and color.less
+    const lessStyleNode = document.createElement('link');
+    const lessConfigNode = document.createElement('script');
+    const lessScriptNode = document.createElement('script');
+    lessStyleNode.setAttribute('rel', 'stylesheet/less');
+    lessStyleNode.setAttribute('href', '/color.less');
+    lessConfigNode.innerHTML = `
+      window.less = {
+        async: true,
+        env: 'production',
+        javascriptEnabled: true
+      };
+    `;
+    lessScriptNode.src = 'https://gw.alipayobjects.com/os/lib/less.js/3.8.1/less.min.js';
+    lessScriptNode.async = true;
+    lessScriptNode.onload = () => {
+      buildIt();
+      lessScriptNode.onload = null;
+    };
+    document.body.appendChild(lessStyleNode);
+    document.body.appendChild(lessConfigNode);
+    document.body.appendChild(lessScriptNode);
+    lessNodesAppended = true;
+  } else {
+    buildIt();
+  }
+};
+
+const updateColorWeak = colorWeak => {
+  // document.body.className = colorWeak ? 'colorWeak' : '';
+  colorWeak ? document.body.classList.add('colorWeak') : document.body.classList.remove('colorWeak')
+};
+
+export { updateTheme, colorList, updateColorWeak }