我的工作台，我的页面，修改密码页面样式修改

package.json

@@ -48,6 +48,7 @@
     "vue-count-to": "1.0.13",
     "vue-cropper": "^0.2.9",
     "vue-gantt-schedule-timeline-calendar": "^1.0.33",
+    "vue-grid-layout": "^2.3.12",
     "vue-i18n": "7.3.2",
     "vue-okr-tree": "^1.0.10",
     "vue-print-nb": "^1.7.5",

src/main.js

@@ -21,6 +21,9 @@ import  'echarts/map/js/china.js'
 import * as filters from './filters' // global filters
 import Print from 'vue-print-nb'
 
+
+
+
 Vue.prototype.$echarts = echarts
 Vue.use(Print); //注册
 Vue.use(Element, {

src/router/routes_my_work.js

@@ -9,21 +9,30 @@ export default {
 			component: Layout,
 			name: '我的工作台',
 			meta: {
-				title: 'TaskCenter',
+				title: '我的工作台',
 				icon: 'task'
 			},
 			iconCls: 'fa el-icon-menu',
             // leaf: true,
 			children: [
+				{
+				    path: 'index',
+					component: _import('myWork/my/index'),
+					name: '我的',
+					meta: {
+						title: '我的',
+						icon: 'component'
+					}
+				},
                 {
-                  path: 'updateUserInfo',
-                  component: _import('mdp/sys/user/UpdateUserInfo'),
-                  name: '账户设置',
-                  meta: {
-                    title: '修改个人信息',
-                    icon: 'component'
-                  }
-                }
+                    path: 'updateUserInfo',
+                    component: _import('myWork/set/index'),
+                    name: '账户设置',
+                    meta: {
+                    	title: '设置',
+                    	icon: 'component'
+                    }
+                },
 			]
 		}
 	]

src/styles/variables.scss

@@ -11,3 +11,8 @@ $panGreen: #30B08F;
 $menuBg: #F4F5F8;
 $subMenuBg:#1f2d3d;
 $menuHover:#001528;
+
+
+
+//MyWork
+$bgCor: #F4F5F8

src/views/mdp/workflow/ru/task/TaskMng.vue

@@ -8,6 +8,7 @@
           <el-input v-model="filters.key" class="input-width"  placeholder="模糊查询"> 
           </el-input> 
           <el-button type="primary"  @click="searchAssigneeToMeTasks" icon="el-icon-search">查询</el-button>
+          
           <el-popover placement="top" width="375" trigger="manual" v-model="weixinContentVisible">
             <p>{{weixinContent}}</p>
             <div style="text-align: right; margin: 0">
@@ -17,17 +18,13 @@
             <el-button slot="reference" v-show="assigneeToMe===false"
               v-on:click="showWeixin" class="hidden-sm-and-down">微信催办</el-button>
           </el-popover>
-          <el-button v-show="assigneeToMe===false" class="hidden-sm-and-down" v-on:click="showSendSms">短信催办</el-button>
 
+          <el-button v-show="assigneeToMe===false" class="hidden-sm-and-down" v-on:click="showSendSms">短信催办</el-button>
           <el-button v-show="assigneeToMe===false" class="hidden-sm-and-down" v-on:click="showOaMsg">OAMSG催办</el-button>
-
           <el-button @click.native="showTagSelect(false)" icon="el-icon-plus">标签</el-button>
           <el-button @click="moreFilterVisible = true" circle icon="el-icon-more"></el-button>
-
-
           <el-drawer title="更多查询条件" :visible.sync="moreFilterVisible"   append-to-body :size="400">
             <el-row class="page-container more-filter"> 
-              
               <el-divider content-position="left">查询条件</el-divider>
               <el-row>
                 <font>
@@ -37,7 +34,6 @@
                   <el-option v-for="item in categorys" :key="item" :label="item" :value="item"></el-option>
                 </el-select>
               </el-row>
-
               <el-row>
                 <font >
                   标签查找
@@ -79,14 +75,15 @@
                 <el-button @click="handleDownload">导出数据</el-button>
               </el-row>
             </el-row>
-
           </el-drawer>
           <el-row class="page-tips"><span></span></el-row>
         </el-row>
+        
         <el-row v-if="showCalendar==false" class="page-main">
           <!--列表 Task act_ru_task-->
+          <!-- :height="tableHeight" -->
           <el-table ref="table" :data="tasks" highlight-current-row v-loading="listLoading" border
-            @selection-change="selsChange" @row-click="rowClick" style="width: 100%;" :height="tableHeight">
+            @selection-change="selsChange" @row-click="rowClick" style="width: 100%;" height="tableHeight">
             <el-table-column type="selection" width="40" v-if="screenWidth>=500" :class="'hidden-sm-and-down'">
             </el-table-column>
             <el-table-column type="index" width="40" :class="'hidden-sm-and-down'"></el-table-column>

src/views/myWork/common.scss

@@ -0,0 +1,10 @@
+.m_container {
+    width: 100%;
+    height: 100%;
+    background: rgb(238, 238, 238);
+    .m_content {
+        padding:30px 18px 18px 18px;
+        overflow: hidden;
+        position: relative;
+    }
+}

src/views/myWork/my/components/boxCard.vue

@@ -0,0 +1,176 @@
+<template>
+    <div class="my_grid" style="width: 100%; min-height: 800px; margin-top: 10px">
+        <grid-layout
+            :layout.sync="layout"
+            :col-num="12"
+            :row-height="120"
+            :is-draggable="true"
+            :is-resizable="true"
+            :vertical-compact="true"
+            :margin="[10, 10]"
+            :use-css-transforms="true"
+        >   
+            <grid-item 
+                v-for="item in layout"
+                :x="item.x"
+                :y="item.y"
+                :w="item.w"
+                :h="item.h"
+                :i="item.i"
+                :key="item.i">
+                <div class="m_content_card_title">
+                    <span><b>{{item.moduleName}}</b></span>
+                </div>
+                <dsp v-if="item.name == 'dsp'"></dsp>
+                <wdrw v-if="item.name == 'wdrw'"></wdrw>
+                <wdcp v-if="item.name == 'wdcp'"></wdcp>
+                <wdxm v-if="item.name == 'wdxm'"></wdxm>
+            </grid-item>
+        </grid-layout>
+    </div>
+</template>
+
+<script>
+import dsp from  '@/views/mdp/workflow/ru/task/TaskListAssigneeToMe.vue';
+import wdrw from '@/views/xm/core/xmTask/xmTaskCenter.vue';
+import wdcp from '@/views/xm/core/xmProduct/XmProductAllMng.vue';
+import wdxm from '@/views/xm/core/xmProject/XmProjectMng';
+import VueGridLayout from 'vue-grid-layout';
+
+
+
+export default {
+    components: {
+        dsp,
+        wdrw,
+        wdcp,
+        wdxm,
+        GridLayout: VueGridLayout.GridLayout,
+        GridItem: VueGridLayout.GridItem
+    },
+    data() {
+        return {
+            layout: [
+                {
+                    moduleName: '待审批',
+                    name: 'dsp',
+                    isOpen: false,
+                    x: 0,
+                    y: 0,
+                    w: 6,
+                    h: 4,
+                    i: 0
+                },
+                {
+                    moduleName: '我的任务',
+                    name: 'wdrw',
+                    isOpen: false,
+                    x: 6,
+                    y: 0,
+                    w: 6,
+                    h: 4,
+                    i: 1
+                },
+                {
+                    moduleName: '我的产品',
+                    name: 'wdcp',
+                    isOpen: false,
+                    x: 0,
+                    y: 2,
+                    w: 6,
+                    h: 4,
+                    i: 2
+                },
+                {
+                    moduleName: '我的项目',
+                    name: 'wdxm',
+                    isOpen: false,
+                    x: 6,
+                    y: 2,
+                    w: 6,
+                    h: 4,
+                    i: 3
+                }
+            ],
+        }
+    },
+    methods: {
+    }
+
+}
+</script>
+
+<style>
+.my_grid .vue-grid-item.vue-grid-placeholder {
+    background: rgb(214, 214, 214) !important;
+}
+</style>
+
+<style lang="scss" scoped>
+@import '../../common.scss';
+@import '../index.scss';
+.vue-grid-layout {
+    background-image: linear-gradient(90deg, rgba(0, 0, 0, 0.15) 1%, rgba(0, 0, 0, 0) 1%) 
+    ,linear-gradient(0deg,rgba(0, 0, 0, 0.15) 1%, rgba(0, 0, 0, 0) 1%);
+    background-size: calc(100% / 12) calc(100% / 12); /*调节格子宽 高*/
+}
+
+.vue-grid-item:not(.vue-grid-placeholder) {
+    background: #fff;
+    box-shadow: 1px 1px 1px 1px #ccc;
+}
+
+.vue-grid-item .resizing {
+    opacity: 0.9;
+}
+.vue-grid-item .static {
+    background: #cce;
+}
+.vue-grid-item .text {
+    font-size: 24px;
+    text-align: center;
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    margin: auto;
+    height: 100%;
+    width: 100%;
+}
+.vue-grid-item .no-drag {
+    height: 100%;
+    width: 100%;
+}
+.vue-grid-item .minMax {
+    font-size: 12px;
+}
+.vue-grid-item .add {
+    cursor: pointer;
+}
+.vue-draggable-handle {
+    position: absolute;
+    width: 20px;
+    height: 20px;
+    top: 0;
+    left: 0;
+    background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10'><circle cx='5' cy='5' r='5' fill='#999999'/></svg>") no-repeat;
+    background-position: bottom right;
+    padding: 0 8px 8px 0;
+    background-repeat: no-repeat;
+    background-origin: content-box;
+    box-sizing: border-box;
+    cursor: pointer;
+}
+
+.m_content_card_title {
+    height: 45px;
+    padding: 20px 20px 40px 20px;
+    span {
+        font-size: 18px;
+        font-weight: bold;
+        color: #7D7D7D;
+    }
+}
+
+</style>

src/views/myWork/my/components/moduleSet.vue

@@ -0,0 +1,218 @@
+<template>
+  <el-dialog
+    top="5vh"
+    class="moduleset"
+    :visible.sync="visible"
+    width="60%">
+    <div slot="title" class="dialog-title">
+        <p>模块编辑</p>
+        <el-divider style="margin: 0 !important;"></el-divider>
+    </div>
+    <div class="toolBox">
+        <el-input v-model="searchResult" @change="searchMenu" placeholder="模糊搜索, enter回车键搜索">
+            <i slot="prefix" class="el-input__icon el-icon-search"></i>
+        </el-input>
+        <div class="selectItem">
+            <div class="item">
+                <img src="../../img/qb.png">
+                <span>全部</span>
+            </div>
+            <div class="item">
+                <img src="../../img/ty.png">
+                <span>通用</span>
+            </div>
+        </div>
+    </div>
+    <div class="nav">
+       <div class="nav_item" :class="{itemActive:selectArr.indexOf(item.index) != -1}" v-for="(item, index) in (tempMenu.length > 0 ?  tempMenu : menus)" :key="index" @click="selectItem(item, index)">
+           <img :src="item.img" alt="">
+           <div class="desc">
+               <p>{{item.name}}</p>
+               <span>
+                  {{item.desc}}
+               </span>
+           </div>
+           <i v-if="selectArr.indexOf(item.index) != -1" class="el-icon-success"></i>
+       </div>
+    </div>
+    <span slot="footer" class="dialog-footer">
+        <el-button @click="visible = false">取 消</el-button>
+        <el-button type="primary">确 定</el-button>
+    </span>
+  </el-dialog>
+</template>
+
+<script>
+import img1 from '../../img/dsp.png'
+import img2 from '../../img/wdrw.png'
+import img3 from '../../img/wdxm.png'
+import img4 from '../../img/wdcp.png'
+export default {
+    props: ['value'],
+    computed: {
+        visible: {
+            get: function () {
+                return this.value;
+            },
+            set: function (val) {
+                this.$emit('input', val)
+            }
+        }
+    },
+    data() {
+        return {
+            searchResult: '',
+            selectArr: [],
+            tempMenu: [],
+            menus: [
+                {
+                    index: 0,
+                    img: img1,
+                    name: '待审批',
+                    desc: '可以直接显示全部待审批列表，也可根据审批分类详细筛选单条待审批事项'
+                },
+                {
+                    index: 1,
+                    img: img2,
+                    name: '我的任务',
+                    desc: '可以直接显示全部任务列表，也可根据状态、类型详细筛选分类的任务'
+                },
+                {
+                    index: 2,
+                    img: img3,
+                    name: '我的项目',
+                    desc: '可以直接显示全部项目列表，也可根据项目状态产品筛选单条项目'
+                },
+                {
+                    index: 3,
+                    img: img4,
+                    name: '我的产品',
+                    desc: '可以直接显示全部产品列表，可新增我的产品'
+                }
+            ]
+        }
+    },
+
+    methods: {
+        searchMenu(val) {
+            console.log("查询菜单" + val);
+            let tempArr = [];
+            this.menus.forEach(element => {
+                if(element.name.indexOf(val) != -1) {
+                    tempArr.push(element);
+                }                
+            });
+            this.tempMenu = tempArr;
+        },
+        selectItem(item, index) {
+            let arrIndex = this.selectArr.indexOf(item.index);
+            if(arrIndex != -1) {
+                this.selectArr.splice(arrIndex, 1);
+            }else {
+                this.selectArr.push(item.index);
+            }
+        },
+    }
+
+}
+</script>
+
+<style lang="scss">
+.moduleset .el-dialog__header {
+    padding: 0;
+}
+.moduleset .el-divider--horizontal {
+    margin: 0 !important;
+}
+</style>
+
+<style lang="scss" scoped>
+.moduleset {
+    .dialog-title {
+        font-size: 22px;
+        font-weight: bold;
+        color: #7D7D7D;
+        height: 68px;
+        p {
+           line-height: 68px;
+           margin-left: 28px;
+        }
+    }
+    .toolBox {
+        display: flex;
+        flex-direction: column;
+        .selectItem {
+            display: flex;
+            flex-direction: row;
+            height: 70px;
+            .item {
+                display: flex;
+                flex-direction: row;
+                margin-right: 120px;
+                cursor: pointer;
+                margin: 25px 50px 0 20px;
+                img {
+                    width: 45px;
+                    height: 45px;
+                }
+                span {
+                    margin-left: 8px;
+                }
+            }
+        }
+    }
+
+    .nav {
+        height: 350px;
+        overflow: auto;
+        padding:0px 10px 0 20px;
+        display:flex;
+        align-items:center;
+        justify-content: space-between;
+        flex-wrap:wrap;
+        .nav_item {
+            display: flex;
+            height: 138px;
+            flex-direction: row;
+            width: 49%;
+            border: 2px solid #EDF0F9;
+            box-shadow: 0px 3px 4px 0px rgba(186, 184, 184, 0.1);
+            border-radius: 8px;
+            align-items: center;
+            position: relative;
+            cursor: pointer;
+            margin-top: 10px;
+            img {
+                width: 94px;
+                height: 94px;
+                margin: 0 18px;
+            }
+            p {
+                font-size: 20px;
+                font-weight: bold;
+                color: #7D7D7D;
+                margin-bottom: 10px;
+            }
+            span {
+                font-size: 14px;
+                color: #7D7D7D;
+                line-height: 26px;
+            }
+            i {
+                position: absolute;
+                top: 10px;
+                right: 20px;
+                font-size: 36px;
+                color: #90B1F4;
+            }
+        }
+        .itemActive {
+            border: 2px solid #90B1F4;
+            box-shadow: 0px 3px 4px 0px rgba(186, 184, 184, 0.1);
+        }
+    }
+}
+
+
+
+</style>

src/views/myWork/my/index.scss

@@ -0,0 +1,96 @@
+.m_top {
+    background: #fff;
+    display: flex;
+    flex-direction: row;
+    height: 100px;
+    align-items: center;
+    border: 1px solid #ebeef5;
+    box-shadow: 0 2px 12px 0 rgba($color: #000000, $alpha: .2);
+    .m_avatar {
+        width: 58px;
+        height: 58px;
+        margin-left: 34px;
+    }
+    .m_msg {
+        margin-left: 22px;
+        p:nth-child(1) {
+            font-size: 22px;
+            font-weight: bold;
+            color: #7D7D7D;
+            opacity: 0.92;
+        }
+        p:nth-child(2) {
+            margin-top: 12px;
+            font-size: 16px;
+            font-weight: bold;
+            color: #7D7D7D;
+            opacity: 0.53;
+        }
+    }
+    .m_btn {
+        margin-left: auto;
+        margin-right: 20px;
+    }
+}
+
+
+.m_middle {
+    display: flex;
+    flex-direction: row;
+    margin-top: 20px;
+    height: 280px;
+    .m_left, .m_right {
+        flex: 1;
+        padding: 30px;
+        background: #fff;
+        border: 1px solid #ebeef5;
+        box-shadow: 0 2px 12px 0 rgba($color: #000000, $alpha: .2);
+    }
+    .m_left {
+        display: flex;
+        flex-direction: row;
+        margin-right: 10px;
+        .m_left_1 {
+            flex: 1.5;
+            p {
+                font-size: 20px;
+                margin-bottom: 30px;
+            }
+            span {
+                font-size: 16px;
+                line-height: 42px;
+                color: #7D7D7D;
+            }
+        }
+        .m_left_2 {
+            flex: 1;
+            img {
+                width: 100%;
+                margin-left: 20px;
+            }
+        }
+    }
+
+    .m_right {
+        display: flex;
+        flex-direction: row;
+        flex-wrap: wrap;
+        .m_right_menu {
+            display: flex;
+            width: 33.3%;
+            flex-direction: column;
+            align-items: center;
+            justify-content: center;
+            font-size: 16px;
+            cursor: pointer;
+            img {
+                width: 68px;
+                height: 68px;
+            }
+            span {
+                margin-top: 12px;
+            }
+        }
+    }
+}
+

src/views/myWork/my/index.vue

@@ -0,0 +1,97 @@
+<template>
+  <div class="m_container">
+    <div class="m_content">
+      <div class="m_top">
+        <el-avatar class="m_avatar" :src="userInfo.headimgurl"></el-avatar>
+        <div class="m_msg">
+          <p>{{getDate}}</p>
+          <p>{{getTimeStatus}}，{{userInfo.username}}，今天也要元气满满哦！</p>
+        </div>
+        <el-button class="m_btn" type="primary" @click="moduleSetVisible = true">模块编辑</el-button>
+      </div>
+
+      <div class="m_middle">
+        <div class="m_left">
+          <div class="m_left_1">
+            <p>简介</p>
+            <span>唛盟是新一代项目管理平台，提供一站式研发写作工具，帮助企业提升研发效能，使用于多种研发工作场景，支持多种角色协同管理。</span>
+          </div>
+          <div class="m_left_2">
+            <img src="../img/l1.png" alt="">
+          </div>
+        </div>
+        <div class="m_right">
+          <div class="m_right_menu">
+            <img src="../img/cp.png" alt="">
+            <span>产品管理</span>
+          </div>
+           <div class="m_right_menu">
+            <img src="../img/xqgl.png" alt="">
+            <span>需求管理</span>
+          </div>
+           <div class="m_right_menu">
+            <img src="../img/xmgl.png" alt="">
+            <span>项目管理</span>
+          </div>
+           <div class="m_right_menu">
+            <img src="../img/tdgl.png" alt="">
+            <span>团队管理</span>
+          </div>
+           <div class="m_right_menu">
+            <img src="../img/kfrw.png" alt="">
+            <span>开发任务</span>
+          </div>
+           <div class="m_right_menu">
+            <img src="../img/qx.png" alt="">
+            <span>缺陷管理</span>
+          </div>
+        </div>
+      </div>
+      <box-card />
+    </div>
+    <module-set v-model="moduleSetVisible" />
+  </div>
+</template>
+
+<script>
+import moduleSet from './components/moduleSet'
+import boxCard from './components/boxCard'
+import { mapGetters } from 'vuex' 
+import dayjs from 'dayjs'
+
+export default {
+  components: {moduleSet, boxCard},
+  computed: {
+    ...mapGetters([
+      'userInfo' 
+    ]),
+    getDate() {
+      return dayjs().format('YYYY/M/D');
+    },
+    getTimeStatus() {
+      let hour = dayjs().hour();
+      let msg = '早上好';
+      if(hour >= 13 || hour <= 18) {
+        msg = '下午好';
+      }else if (hour >= 19 || hour <= 24){
+        msg = '晚上好';
+      }
+      return msg;
+    }
+  },
+  data() {
+    return {
+      moduleSetVisible: false
+        
+    }
+  },
+  mounted() {
+    
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+@import '../common.scss';
+@import './index.scss';
+</style>

src/views/myWork/set/index.scss

@@ -0,0 +1,57 @@
+.m_msgcard {
+    width: 100%;
+    height: 120px;
+    background: #E0D6CB;
+    display: flex;
+    align-items: center;
+    .m_avater {
+        margin-left: 50px;
+        width: 107px;
+        height: 107px;
+    }
+    .m_msg {
+        margin-left: 33px;
+        display: flex;
+        flex-direction: column;
+        .m_name {
+            margin-bottom: 10px;
+            font-weight: bold;
+            color: #7D7D7D;
+            font-size: 20px;
+        }
+        .m_dept {
+            margin-bottom: 10px;
+            font-size: 16px;
+            font-weight: bold;
+            color: #7D7D7D;
+        }
+        .m_btn {
+            width: 100px !important;
+        }
+    }
+}
+
+.m_opercard {
+    width: 100%;
+    background: #fff;
+    margin-top: 15px;
+    padding: 50px;
+    display: flex;
+    h3 {
+        margin-top: 16px;
+        font-size: 24px;
+        color: #7D7D7D;
+    }
+    h3:before {
+        content: " ";
+        border-left: 10px #AEB8CE solid;
+        margin-right: 12px;
+    }
+    .m_base, .m_setpwd {
+        flex: 1;
+    }
+    
+    .m_f {
+        margin: 80px 0 0 0;
+    }
+}

src/views/myWork/set/index.vue

@@ -0,0 +1,280 @@
+<template>
+	<div class="m_container">
+		<div class="m_content">
+			<div class="m_msgcard">
+				<el-avatar class="m_avater" :src="editForm.headimgurl || defaultImg">
+				</el-avatar>
+				<div class="m_msg">
+					<span class="m_name">{{userInfo.username}}</span>
+					<span class="m_dept">所在部门：{{userInfo.deptName}}</span>
+					<el-button @click="showUploadHeadimg" class="m_btn">修改头像</el-button>
+				</div>
+			</div>
+			<div class="m_opercard">
+				<div class="m_base">
+					<h3>基本信息</h3>
+					<el-form class="m_f m_from1" :model="editForm"  label-width="120px" :rules="editFormRules"  ref="editForm">
+						<el-form-item label="用户名称" prop="username" :rules="[{required:true,message:'用户名称不能为空'}]">
+							<el-input style="width:400px;"  v-model="editForm.username" auto-complete="off"></el-input>
+						</el-form-item> 
+						<el-form-item label="登录账号" prop="displayUserid" :rules="[{required:true,message:'登录账号不能为空'}]">
+							<el-input style="width:400px;" v-model="editForm.displayUserid" auto-complete="off"></el-input>
+						</el-form-item>    
+						<el-form-item label="邮箱" prop="email" :rules="[{required:true,message:'邮箱不能为空'},{validator:validateEmail}]">
+							<el-input style="width:400px;" v-model="editForm.email" auto-complete="off"></el-input>
+						</el-form-item>    
+						<el-form-item> 
+							<el-button type="primary" @click.native="editSubmit" :loading="editLoading">保存</el-button>   
+						</el-form-item> 
+					</el-form>
+				</div>
+				<div class="m_setpwd">
+					<h3>密码设置</h3>
+					<el-form class="m_f m_from1" :model="editForm"  label-width="80px" ref="passwordForm">
+						<el-form-item>
+							<el-form-item label="原密码" prop="oldPassword" :rules="[{required:true,message:'原密码不能为空'}]">
+								<el-input style="width:400px;" type="password" v-model="passwordForm.oldPassword" auto-complete="off"></el-input>
+							</el-form-item>  
+							<el-form-item label="新密码" prop="newPassword" :rules="[{required:true,message:'新密码不能为空'}]">
+								<el-input style="width:400px;" type="password" v-model="passwordForm.newPassword" auto-complete="off"></el-input>
+							</el-form-item> 
+							<el-form-item>
+								<el-button style="margin-left: 80px" type="primary" @click.native="doChangePassword" :loading="setLoading">保存</el-button>  
+							</el-form-item> 
+						</el-form-item>
+					</el-form>
+				</div>
+			</div>
+		</div>
+
+		<single-shear-upload ref="uploadImg" v-show="false"	
+			:img-width="100"
+			:img-height="100"
+			:show-title="true"
+			v-model="editForm.headimgurl"
+			:branch-id="userInfo.branchId"
+			:deptid="userInfo.deptid"
+			:remark="userInfo.username"
+		>
+			<span slot="title">商品高清大图</span>
+		</single-shear-upload>
+	</div>
+
+	<!-- <section>
+		<el-row class="padding" v-show="changePasswordVisible==true" >
+			<el-form :model="passwordForm"  label-width="120px"   ref="passwordForm">
+				<el-form-item label="" prop="headimgurl">
+					<el-avatar :size="100" :src="editForm.headimgurl"></el-avatar> 
+				</el-form-item>  
+				<el-form-item label="原密码" prop="oldPassword" :rules="[{required:true,message:'原密码不能为空'}]">
+					<el-input style="width:400px;" type="password" v-model="passwordForm.oldPassword" auto-complete="off"></el-input>
+				</el-form-item>  
+				<el-form-item label="新密码" prop="newPassword" :rules="[{required:true,message:'新密码不能为空'}]">
+					<el-input style="width:400px;" type="password" v-model="passwordForm.newPassword" auto-complete="off"></el-input>
+				</el-form-item>  
+				<el-form-item> 
+						<el-button type="primary" @click.native="doChangePassword" :loading="editLoading">保存</el-button>  
+						<el-button  @click.native="changePasswordVisible=false" :loading="editLoading">返回</el-button>   
+				</el-form-item> 
+			</el-form>
+			</el-row>
+			<el-row class="padding" v-show="changePasswordVisible==false" >
+
+			<el-form :model="editForm"  label-width="120px" :rules="editFormRules"  ref="editForm">
+				<el-form-item  label="" prop="headimgurl">
+					<el-avatar :size="100" :src="editForm.headimgurl"  @click="showUploadHeadimg"></el-avatar> 
+					<br>
+					<el-button type="text" @click="showUploadHeadimg">更换头像</el-button>
+				</el-form-item> 
+				
+				<el-form-item label="" v-show="false" prop="headimgurl">
+					<single-shear-upload ref="uploadImg"	
+						:img-width="100"
+						:img-height="100"
+						:show-title="true"
+						v-model="editForm.headimgurl"
+						:branch-id="userInfo.branchId"
+						:deptid="userInfo.deptid"
+						:remark="userInfo.username"
+					>
+						<span slot="title">商品高清大图</span>
+					</single-shear-upload>
+				</el-form-item>  
+				<el-form-item label="用户名称" prop="username" :rules="[{required:true,message:'用户名称不能为空'}]">
+					<el-input style="width:400px;"  v-model="editForm.username" auto-complete="off"></el-input>
+				</el-form-item> 
+				<el-form-item label="登录账号" prop="displayUserid" :rules="[{required:true,message:'登录账号不能为空'}]">
+					<el-input style="width:400px;" v-model="editForm.displayUserid" auto-complete="off"></el-input>
+				</el-form-item>    
+				<el-form-item label="邮箱" prop="email" :rules="[{required:true,message:'邮箱不能为空'},{validator:validateEmail}]">
+					<el-input style="width:400px;" v-model="editForm.email" auto-complete="off"></el-input>
+				</el-form-item>    
+				<el-form-item> 
+						<el-button  @click.native="changePasswordVisible=true" :loading="editLoading">修改密码</el-button>   
+						<el-button type="primary" @click.native="editSubmit" :loading="editLoading">保存</el-button>   
+				</el-form-item> 
+			</el-form>
+		</el-row>
+	</section> -->
+
+
+
+</template>
+
+<script>
+import { editUser,changePassword } from '@/api/mdp/sys/user';
+import { mapGetters } from 'vuex' 
+import SingleShearUpload from "@/components/Image/Single/Index";
+	
+import md5 from "js-md5";
+	export default {
+	    computed: {
+		    ...mapGetters([
+		      'userInfo'
+		    ])
+		},
+		props:['user'],
+		watch: {
+	      'user':function(data) {
+	        this.editForm=data;
+	      } 
+	    },
+		data() {
+			var validatePhoneno = (rule, value, callback) => {
+				if (!value) {
+					callback();
+				} else {
+				if (value) {
+					if(value.length<11 || value.length>11){
+						callback(new Error('手机号码必须11位'));
+					}
+					if(!(/^1[3456789]\d{9}$/.test(value))){ 
+						callback(new Error('手机号码格式不正确'));
+					}
+
+				}
+				callback();
+				}
+			};
+			
+			var validateEmail = (rule, value, callback) => {
+				if (value=='') {
+					callback();
+				} else {
+				if (value !== '') {
+					var reg = /^([a-zA-Z]|[0-9])(\w|\-)+@[a-zA-Z0-9]+\.([a-zA-Z]{2,4})$/;
+					if(!reg.test(value)){
+						 callback(new Error('邮箱格式不正确'));
+					}  
+				}
+				callback();
+				}
+			};
+			
+			var validateIdCardNo = (rule, value, callback) => {
+				if (value === ''|| value==null) {
+				//callback(nPhonenoew Error('请输入密码'));
+					callback();
+				}else {
+					if (value !== '' && value.length>15) {
+						var reg = /^[1-9]\d{5}(18|19|20)\d{2}((0[1-9])|(1[0-2]))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/;
+						if(!reg.test(value)){
+							callback(new Error('身份证号码格式不正确'));
+						}else{
+							callback();
+						}
+					}else if(value !== '' && value.length<15){
+						callback(new Error('请输入15位或者18位长度身份证号码'));
+					}else{
+						callback();
+					}
+				
+				}
+			}; 
+			return {
+				validateEmail:validateEmail,
+				uploadHeadimgVisible:false,
+				changePasswordVisible:false,
+				options:{},//下拉选择框的所有静态数据
+				editLoading: false,
+				setLoading: false,
+				defaultImg: 'https://www.qingqinkj.com/api/m1/arc/arc/image/qqkj_001/IM1632611467940176/IM1633550409547158.png',
+				editFormRules: {
+					displayUserid: [
+						{ required: true, message: '账号必填', trigger: 'blur' }
+					],
+					username: [
+						{ required: true, message: '用户名称必填', trigger: 'blur' }
+					],  
+					email: [ 
+						{ validator:validateEmail, trigger: 'blur' }
+					] 
+				},
+				//编辑界面数据  User sys_user
+				editForm: {
+					unionid:'',displayUserid:'',userid:'',locked:'',startdate:'',nickname:'',username:'',phoneno:'',password:'',salt:'',fingerpassword1:'',fingerpassword2:'',fingerpassword3:'',fingerpassword4:'',pwdtype:'',headimgurl:'',country:'',city:'',province:'',address:'',sex:'',enddate:'',districtId:'',userid:'',userAccount:'',userPwd:'',userName:'',userDesc:'',officePhoneno:'',idCardNo:'',email:''
+				},
+				passwordForm:{
+					newPassword:'',oldPassword:''
+				}
+			}
+		},
+		methods: {
+			// 取消按钮点击 父组件监听@cancel="editFormVisible=false" 监听
+			handleCancel:function(){
+				this.$emit('cancel');
+			},
+			//编辑提交User sys_user父组件监听@submit="afterEditSubmit"
+			editSubmit: function () {
+				this.$refs.editForm.validate((valid) => {
+					if (valid) {
+						this.$confirm('确认提交吗？', '提示', {}).then(() => {
+							this.editLoading = true; 
+							let params = Object.assign({}, this.editForm); 
+							editUser(params).then((res) => {
+								this.editLoading = false; 
+								var tips=res.data.tips;
+								if(tips.isOk){ 
+									this.$emit('submit');//  @submit="afterEditSubmit"
+								}
+								this.$message({ message: tips.msg, type: tips.isOk?'success':'error' }); 
+							}).catch(() => {
+								this.editLoading = false;
+							});
+						});
+					}
+				});
+			},
+
+			doChangePassword(){
+				console.log("修改密码");
+				this.$refs.passwordForm.validate((valid) => {
+					if (valid) {
+						this.setLoading = true
+						changePassword({oldPassword:md5(this.passwordForm.oldPassword),newPassword:md5(this.passwordForm.newPassword)}).then(res=>{
+							var tips = res.data.tips;
+							this.$message({ message: tips.msg, type: tips.isOk?'success':'error' }); 
+						}).finally(r => this.setLoading = false)
+					}
+				})
+			},
+
+			showUploadHeadimg(){
+				this.$refs.uploadImg.showAdd();
+			}
+		},
+		components: {  
+			SingleShearUpload
+		},
+		mounted() {
+			console.log(this.userInfo, "this.userInfo");
+			this.editForm=Object.assign(this.editForm, this.userInfo);
+		}
+	}
+
+</script>
+
+<style lang="scss" scoped>
+@import './index.scss';
+@import '../common.scss';
+</style>