xiejiahao
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