Browse Source
Merge branch 'master' of http://www.qingqinkj.com/gitlab/qqkj/mmcloud/xm/xm-ui-web
master
Merge branch 'master' of http://www.qingqinkj.com/gitlab/qqkj/mmcloud/xm/xm-ui-web
master
陈裕财
4 years ago
25 changed files with 966 additions and 17 deletions
-
1package.json
-
3src/main.js
-
27src/router/routes_my_work.js
-
5src/styles/variables.scss
-
13src/views/mdp/workflow/ru/task/TaskMng.vue
-
10src/views/myWork/common.scss
-
BINsrc/views/myWork/img/cp.png
-
BINsrc/views/myWork/img/dsp.png
-
BINsrc/views/myWork/img/kfrw.png
-
BINsrc/views/myWork/img/l1.png
-
BINsrc/views/myWork/img/qb.png
-
BINsrc/views/myWork/img/qx.png
-
BINsrc/views/myWork/img/tdgl.png
-
BINsrc/views/myWork/img/ty.png
-
BINsrc/views/myWork/img/wdcp.png
-
BINsrc/views/myWork/img/wdrw.png
-
BINsrc/views/myWork/img/wdxm.png
-
BINsrc/views/myWork/img/xmgl.png
-
BINsrc/views/myWork/img/xqgl.png
-
176src/views/myWork/my/components/boxCard.vue
-
218src/views/myWork/my/components/moduleSet.vue
-
96src/views/myWork/my/index.scss
-
97src/views/myWork/my/index.vue
-
57src/views/myWork/set/index.scss
-
280src/views/myWork/set/index.vue
@ -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; |
|||
} |
|||
} |
|||
|
After Width: 800 | Height: 800 | Size: 17 KiB |
|
After Width: 800 | Height: 800 | Size: 4.7 KiB |
|
After Width: 800 | Height: 800 | Size: 18 KiB |
|
After Width: 1252 | Height: 1040 | Size: 602 KiB |
|
After Width: 800 | Height: 800 | Size: 16 KiB |
|
After Width: 800 | Height: 800 | Size: 11 KiB |
|
After Width: 800 | Height: 800 | Size: 16 KiB |
|
After Width: 800 | Height: 800 | Size: 9.2 KiB |
|
After Width: 800 | Height: 800 | Size: 3.8 KiB |
|
After Width: 800 | Height: 800 | Size: 4.6 KiB |
|
After Width: 800 | Height: 800 | Size: 3.8 KiB |
|
After Width: 800 | Height: 800 | Size: 12 KiB |
|
After Width: 800 | Height: 800 | Size: 13 KiB |
@ -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> |
|||
@ -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> |
|||
@ -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; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
|
|||
@ -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> |
|||
@ -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; |
|||
} |
|||
} |
|||
@ -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> |
|||
Write
Preview
Loading…
Cancel
Save
Reference in new issue