@@ -8897,4 +8897,107 @@ h5.dulilabel{ | |||
} | |||
.redbtn{ | |||
color: #d6243a!important | |||
} | |||
} | |||
/* 竖线 */ | |||
.vertical-line { | |||
position: relative; | |||
top: 12px; | |||
width: 1px; | |||
height: 24px; | |||
background-color: rgba(153, 155, 157, 1); | |||
margin: 0 7px 0 0; | |||
} | |||
/* 使用flex布局 */ | |||
.use-flex { | |||
display: flex; | |||
flex-wrap: wrap; | |||
} | |||
/* 相对定位 */ | |||
.use-relative { | |||
position: relative; | |||
} | |||
/* 新项目人员列表超出部分滚动条样式 */ | |||
/* 滚动条样式 */ | |||
.personnel-list .content-wrap::-webkit-scrollbar, | |||
.right-part .part-wrap::-webkit-scrollbar { | |||
width: 8px; | |||
/* padding-right: 4px; */ | |||
border-radius: 4px; | |||
/*其他样式,比如圆角等*/ | |||
} | |||
/*滑块样式*/ | |||
.personnel-list .content-wrap::-webkit-scrollbar-thumb, | |||
.right-part .part-wrap::-webkit-scrollbar-thumb { | |||
-webkit-border-radius: 4px; | |||
border-radius: 4px; | |||
height: 300px; | |||
background-color: #adadad; | |||
} | |||
/*当前窗口失去焦点时的滑块样式*/ | |||
.personnel-list .content-wrap::-webkit-scrollbar-thumb:window-inactive, | |||
.right-part .part-wrap::-webkit-scrollbar-thumb:window-inactive { | |||
background-color: #adadad; | |||
} | |||
/* 当前选中的工作负责人的框 */ | |||
.active-manager-mark { | |||
border: 2px solid #7850ff; | |||
border-radius: 8px; | |||
background-color: #dededf; | |||
} | |||
.active-manager-mark-bottom-name { | |||
position: absolute; | |||
bottom: -22px; | |||
border-bottom-right-radius: 8px; | |||
border-bottom-left-radius: 8px; | |||
padding: 8px 0 5px; | |||
width: 100%; | |||
background-color: #7850ff; | |||
color: rgba(255, 255, 255, 100); | |||
font-size: 11px; | |||
text-align: center; | |||
z-index: 1; | |||
font-family: PingFangSC-Regular; | |||
} | |||
/* 展示的负责人的框 */ | |||
.manager-mark { | |||
border: 4px dashed rgba(140, 0, 255, 1) !important; | |||
} | |||
.mr-8 { | |||
margin: 0 8px 0 0; | |||
} | |||
.ml-4 { | |||
margin: 0 0 0 4px; | |||
} | |||
.mb-32 { | |||
margin: 0 0 32px 0 !important; | |||
} | |||
.mt-32 { | |||
margin: 32px 0 0 0; | |||
} | |||
/* 当前要进行工作指派的文件夹样式 */ | |||
.active-folder { | |||
background-color: #dededf; | |||
border-radius: 8px; | |||
background-color: rgba(50, 50, 60, 0.15); | |||
} | |||
.folder-hover:hover { | |||
border-radius: 8px; | |||
background-color: rgba(50, 50, 60, 0.15); | |||
} | |||
/* 清除 浮动 */ | |||
.clear-fix::after { | |||
content: ''; | |||
display: block; | |||
clear: both; | |||
height: 0; | |||
visibility: hidden; | |||
} |
@@ -0,0 +1,14 @@ | |||
<?xml version="1.0" encoding="UTF-8"?> | |||
<svg width="48px" height="48px" viewBox="0 0 48 48" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> | |||
<title>编组</title> | |||
<g id="项目管理" stroke="none" stroke-width="1" fill="#fcfcfc" fill-rule="evenodd"> | |||
<g id="普通职员查看时/开始备份" transform="translate(-744.000000, -416.000000)"> | |||
<g id="编组" transform="translate(744.000000, 416.000000)"> | |||
<circle id="椭圆形" stroke-opacity="0.38" stroke="#000" cx="24" cy="24" r="23.5"></circle> | |||
<text id="暂无" font-family="PingFangSC-Regular, PingFang SC" font-size="12" font-weight="normal" line-spacing="16" fill="#000" fill-opacity="1"> | |||
<tspan x="12" y="29">暂无</tspan> | |||
</text> | |||
</g> | |||
</g> | |||
</g> | |||
</svg> |
@@ -40,6 +40,8 @@ Vue.prototype.$fetchApi = fetchApi; | |||
Vue.filter('resolveImg', resolveImg); | |||
Vue.filter('resolveAvator', resolveAvator); | |||
// 事件总线 | |||
Vue.prototype.$bus = new Vue(); | |||
//右键菜单 | |||
Vue.use(VueContextMenu) | |||
Vue.config.productionTip = false | |||
@@ -17,6 +17,12 @@ const router = new Router({ | |||
name: 'demo', | |||
component: () => import('@/views/demo'), | |||
}, | |||
{ | |||
path:'/projdetail', | |||
name: 'projdetail', | |||
component: () => import('@/views/components_web/projDetail/projDetail') | |||
}, | |||
{ | |||
path: '/watch', | |||
name: 'watch', | |||
@@ -0,0 +1,122 @@ | |||
<template> | |||
<div class="people-item"> | |||
<div class="people-wrap" :class="{'rt-0': isShowManagerMark}"> | |||
<div class="people" :class="{'manager-mark': isShowManagerMark }"> | |||
<img class="proj-avatarface" v-if="Object.keys(user).length > 0" | |||
:src="user.headImgUrl | resolveAvator" alt/> | |||
<div class="add-btn" v-else-if="!isShowEmptyAvatar"> | |||
<i class="el-icon-plus proj-avatarface"></i> | |||
</div> | |||
<img v-else src="/static/img/暂无2.svg" alt="" class="proj-avatarface empty"> | |||
</div> | |||
<div class="people-name" :class="{'rt-2': isEnterEdit && isShowManagerMark, 'rt-4': isEnterEdit && !isShowManagerMark}">{{user.cnName}}</div> | |||
</div> | |||
</div> | |||
</template> | |||
<script> | |||
export default { | |||
data() { | |||
return { | |||
} | |||
}, | |||
computed: { | |||
}, | |||
props: { | |||
user: { | |||
type: Object, | |||
default() { | |||
return {} | |||
} | |||
}, | |||
isShowManagerMark: {//是否显示 圆圈边框 | |||
type: Boolean, | |||
default: false, | |||
}, | |||
isEnterEdit: {//控制是展示还是编辑 | |||
type: Boolean, | |||
default: false, | |||
}, | |||
isShowEmptyAvatar: {//是否显示暂无 | |||
type: Boolean, | |||
defualt: false | |||
} | |||
}, | |||
methods: { | |||
}, | |||
} | |||
</script> | |||
<style scoped> | |||
.rt-2 { | |||
top: 2px !important; | |||
} | |||
.rt-0 { | |||
top: 0 !important; | |||
} | |||
.rt-4 { | |||
top: 4px !important; | |||
} | |||
.empty { | |||
background-color: #eaeaea; | |||
} | |||
.people-item { | |||
display: flex; | |||
position: relative; | |||
z-index: 9; | |||
text-align: center; | |||
width: 64px; | |||
padding: 0 0 8px 0; | |||
} | |||
.people-item .people-wrap { | |||
position: relative; | |||
top: 4px; | |||
border-radius: 50%; | |||
margin: 0 auto; | |||
} | |||
.people-item .people { | |||
border-radius: 50%; | |||
} | |||
.active-manager-mark .people-name { | |||
top:-2px; | |||
} | |||
/* 加号选择框 */ | |||
.people-item .el-icon-plus { | |||
display: block; | |||
text-align: center; | |||
height: 48px; | |||
line-height: 48px; | |||
font-size: 24px; | |||
color: #999B9D; | |||
} | |||
.proj-avatarface { | |||
vertical-align: bottom; | |||
width: 48px; | |||
height: 48px; | |||
border-radius: 50%; | |||
overflow: hidden; | |||
background-color: rgba(246, 246, 246, 1); | |||
} | |||
.people-name { | |||
position: relative; | |||
width: 100%; | |||
height: 16px; | |||
line-height: 16px; | |||
color: rgba(17, 19, 21, 100); | |||
font-size: 12px; | |||
text-align: center; | |||
font-family: PingFangSC-Regular; | |||
margin: 8px auto 0; | |||
} | |||
.add-btn { | |||
cursor: pointer; | |||
margin: 0 4px; | |||
} | |||
</style> |
@@ -0,0 +1,208 @@ | |||
<template> | |||
<div class="personnel-list" v-if="listDept.length > 0"> | |||
<div class="top-title">选择人员</div> | |||
<div class="search-bar"> | |||
<i class="search-icon"></i> | |||
<input placeholder="搜索职业"/> | |||
</div> | |||
<!-- 下面按企业 / 部门 显示人员 --> | |||
<div class="content-wrap"> | |||
<!-- 折叠面板 --> | |||
<el-collapse accordion> | |||
<!-- 添加协作群与工作 --> | |||
<el-collapse-item name="1"> | |||
<template slot="title"> | |||
<span class="company-title">我的企业</span> | |||
</template> | |||
<el-collapse accordion v-for="(dept, group_index) in listDept" v-show="dept.listUser && dept.listUser.length>0" :key="dept.id"> | |||
<!-- 二级折叠面板 --> | |||
<el-collapse-item> | |||
<template slot="title" class="dept-entry"> | |||
<span class="dept-name">{{ dept.deptName }}</span> | |||
<el-checkbox class="dept-select-all-btn" v-model="dept.selected" @change="handleCheckItemAll(group_index, $event)">全选</el-checkbox> | |||
</template> | |||
<div class="user-info-item" v-for="user in dept.listUser" :label="user" :key="user.id"> | |||
<img :src="user.headImgUrl | resolveAvator" alt="" class="avatar-img" /> | |||
<span class="user-info-name">{{user.cnName}}</span> | |||
<el-checkbox v-model="user.selected" @change=" | |||
handleCheckedOne( | |||
group_index, | |||
user, | |||
$event | |||
) | |||
" > | |||
</el-checkbox> | |||
</div> | |||
</el-collapse-item> | |||
</el-collapse> | |||
</el-collapse-item> | |||
</el-collapse> | |||
</div> | |||
</div> | |||
</template> | |||
<script> | |||
// 选择人员 人员列表组件 | |||
export default { | |||
data() { | |||
return { | |||
ischeckAll: false, | |||
} | |||
}, | |||
methods: { | |||
/* | |||
* 部门全选 | |||
*/ | |||
// handleCheckDeptTopAll(isChecked,dept_index) { | |||
// this.$emit('handleCheckDeptTopAll',isChecked, dept_index); | |||
// } | |||
}, | |||
props: { | |||
listDept: { | |||
type: Array, | |||
default() { | |||
return [] | |||
} | |||
}, | |||
handleCheckItemAll: Function, | |||
handleCheckedOne: Function, | |||
}, | |||
} | |||
</script> | |||
<style scoped> | |||
.personnel-list { | |||
width: 100%; | |||
background-color: #fcfcfc; | |||
box-shadow: 0px 4px 10px 1px rgba(0, 0, 0, 0.1), 0px 1px 3px 0px rgba(0, 0, 0, 0.1); | |||
} | |||
.top-title { | |||
height: 50px; | |||
line-height: 50px; | |||
padding: 0 0 0 24px; | |||
color: rgba(12, 13, 16, 100); | |||
font-size: 20px; | |||
text-align: left; | |||
font-family: PingFangSC-Medium; | |||
} | |||
.search-bar { | |||
position: relative; | |||
margin: 6px 15px 7px; | |||
padding: 0 5px; | |||
} | |||
.search-icon { | |||
position: absolute; | |||
width: 22px; | |||
height:22px; | |||
background-color: gold; | |||
margin: 4px 0; | |||
} | |||
.search-bar input { | |||
outline: none; | |||
width:100%; | |||
height: 30px; | |||
color: #E9E9EB; | |||
border-radius: 8px; | |||
background-color: rgba(233, 233, 235, 1); | |||
border: 0.5px solid rgba(174, 174, 174, 1); | |||
} | |||
.search-bar::-webkit-input-placeholder { | |||
height: 20px; | |||
line-height: 20px; | |||
color: rgba(0, 0, 0, 0.56); | |||
font-size: 14px; | |||
text-align: left; | |||
font-family: PingFangSC-Regular; | |||
margin: 0 0 0 30px; | |||
} | |||
.content-wrap { | |||
padding: 0 8px; | |||
overflow-y: scroll; | |||
height: calc(100vh - 144px); | |||
} | |||
/* 我的企业文字样式 */ | |||
.company-title { | |||
margin: 12px 0 10px 16px; | |||
height: 22px; | |||
line-height: 22px; | |||
color: rgba(50, 50, 60, 100); | |||
font-size: 18px; | |||
text-align: left; | |||
font-family: PingFangSC-Regular; | |||
} | |||
.dept-name { | |||
margin: 0 0 0 16px; | |||
} | |||
.user-info-item { | |||
display: flex; | |||
padding:0 8px 0 16px; | |||
height: 44px; | |||
line-height: 44px; | |||
align-items: center; | |||
cursor: pointer; | |||
border-radius: 8px; | |||
} | |||
.user-info-item:hover { | |||
background-color: #f6f6f6; | |||
} | |||
.avatar-img { | |||
width: 32px; | |||
height:32px; | |||
border-radius: 50%; | |||
margin: 0 13px 0 0; | |||
} | |||
.user-info-name { | |||
flex: 1; | |||
font-size: 14px; | |||
font-family: PingFangSC-Regular; | |||
} | |||
</style> | |||
<style> | |||
.dept-select-all-btn .el-checkbox__label { | |||
padding: 0 0 0 6px !important; | |||
margin: 0 8px 0 0; | |||
} | |||
.personnel-list .el-collapse { | |||
border: none !important; | |||
} | |||
.el-checkbox.dept-select-all-btn { | |||
margin: 0 0 0 auto; | |||
} | |||
.dept-select-all-btn+.el-collapse-item__arrow { | |||
margin: 0 !important; | |||
margin: 0 8px 0 0; | |||
} | |||
.personnel-list .el-collapse-item__header { | |||
height: 44px !important; | |||
line-height: 44px !important; | |||
border: none !important; | |||
} | |||
.user-info-item .el-checkbox__inner { | |||
width: 20px; | |||
height: 20px; | |||
color: #cbcbce; | |||
} | |||
.personnel-list .el-collapse-item__header { | |||
margin: 0 4px 0 0 !important; | |||
} | |||
/* 全选圆圈的样式 */ | |||
.personnel-list .el-checkbox__input.is-checked .el-checkbox__inner, .el-checkbox__input.is-indeterminate .el-checkbox__inner { | |||
background-color: #7850ff !important; | |||
border-color: #7850ff !important; | |||
} | |||
.el-checkbox__input.is-focus .el-checkbox__inner { | |||
background-color: #7850ff !important; | |||
border-color: #7850ff !important; | |||
} | |||
/* 全选文字样式 */ | |||
.personnel-list .el-checkbox__input.is-checked+.el-checkbox__label { | |||
color: #7850ff; | |||
} | |||
</style> |
@@ -0,0 +1,325 @@ | |||
<template> | |||
<div> | |||
<div | |||
v-for="folder in folderList" | |||
:key="folder.id" | |||
> | |||
<div @click.stop="activeFolderClick(folder)" | |||
class="folder-wrap" | |||
:class="{'active-folder': folder.id === activeFolderId && isEnterEdit, | |||
'folder-hover': !isEnterEdit }"> | |||
<div class="edit-btn" v-if="isEnterEdit && folder.id === activeFolderId">编辑</div> | |||
<div class="folder-name" | |||
:class="{'opacity-5': !isAllowedAssignedStaffFolder }"> | |||
<span>{{folder.folderName}}</span> | |||
<span v-if="!isProjManager" class="user-perm-text"></span> | |||
<!-- <h5 :class="{notclick:!(isAllowedAssignedFolder(folder)||isStaff(folder))}"> | |||
<i | |||
class="hand" | |||
:class="!!folder.expanded ? 'el-icon-caret-bottom' : 'el-icon-caret-right'" | |||
v-show="folder.listChildren && folder.listChildren.length" | |||
@click="toggleFolderExpand(folder)" | |||
/> | |||
{{ folder.folderName }} | |||
</h5> | |||
<div class="selfoptiongroup"> | |||
<el-button v-if="folder.default == false" v-on:click="eidtTitle(folderIndex)">编辑</el-button> | |||
</div> --> | |||
</div> | |||
<div v-if="!isEnterEdit || activeFolderId !== folder.id" | |||
class="use-flex adjust-position" | |||
:class="{'mb-32': folder.id === activeFolderId && isEnterEdit}" | |||
> | |||
<div> | |||
<div v-if="folder.manageUser && folder.manageUser.length == 0"> | |||
<div class="use-relative" v-if="isAllowedAssignedFolder(folder)"> | |||
<people-item :class="{'mr-8': !isEnterEdit}" | |||
@click.native.stop="aloneAddUserForFolder(folder),enterEditFolderClick(folder.id)"/> | |||
</div> | |||
<div class="notclick" v-else> | |||
<people-item :isShowEmptyAvatar="true" :class="{'mr-8': !isEnterEdit}" /> | |||
</div> | |||
<!-- <div v-if="isAllowedAssignedFolder(folder)" | |||
@click="aloneAddUserForFolder(folder)"> | |||
<people-item @click.native.stop="enterEditFolderClick"/> | |||
</div> --> | |||
<!-- <div v-else lass="notclick"> | |||
<img src="/static/img/暂无.svg" alt="" srcset=""> | |||
</div> --> | |||
</div> | |||
<div class="use-flex" v-else> | |||
<div v-for="(user, index) in folder.manageUser" :key="user.id"> | |||
<div class="use-relative"> | |||
<people-item :user="user" :isShowManagerMark="isEnterEdit" | |||
:class="{'notclick': !isAllowedAssignedStaffFolder(folder), 'mr-8': !isEnterEdit}"/> | |||
</div> | |||
<!-- <div class="use-relative" v-else> | |||
<people-item :class="{'mr-8': !isEnterEdit}" | |||
:user="user" | |||
:isManager="true" | |||
:isEnterEdit="isEnterEdit" | |||
:isActiveEdit="activeFolderId === folder.id"/> | |||
</div> --> | |||
<!-- <div class="avtarface" title="编辑" v-if="isAllowedAssignedFolder(folder)"> | |||
<img | |||
:src="user.headImgUrl | resolveAvator" | |||
@click="aloneAddUserForFolder(folder)" | |||
/> | |||
</div> | |||
<div class="avtarface notclick" title="编辑" :class="{allopacity:isStaff(folder)}" v-else> | |||
<img | |||
:src="user.headImgUrl | resolveAvator" | |||
/> | |||
</div> | |||
<span class="Text_tiny tinyText_wirte" :class="{notclick:!isAllowedAssignedFolder(folder),allopacity:isStaff(folder)}">{{ user.cnName }}</span> --> | |||
</div> | |||
</div> | |||
</div> | |||
<!-- 竖线 --> | |||
<div class="vertical-line" v-show="!isEnterEdit"/> | |||
<!-- 添加职员 --> | |||
<!-- <div | |||
class="fl addBtn_new" | |||
title="添加职员" | |||
v-if="isAllowedAssignedStaffFolder(folder)" | |||
@click="aloneAddUserOnlyStaff(folder)" | |||
> | |||
<i class="el-icon-plus middleaddEC"></i> | |||
</div> --> | |||
<div class="use-flex"> | |||
<div | |||
v-for="(user, index) in listUserComputed(folder.listUser)" | |||
:key="user.id" | |||
> | |||
<div v-if="index < 14 || showAll"> | |||
<!-- <div class="avtarface" title="编辑"> | |||
<img :src="user.headImgUrl | resolveAvator" /> | |||
</div> | |||
<span class="Text_tiny tinyText_wirte">{{ user.cnName }}</span> --> | |||
<people-item :user="user" :isEnterEdit="isEnterEdit"/> | |||
</div> | |||
<div class v-if="index == 14 && !showAll" @click="showAllClick"> | |||
<span class="zhangkai_down"></span> | |||
<span class="Text_tiny tinyText_wirte">展开全部</span> | |||
</div> | |||
<div | |||
v-if=" | |||
showAll && index == listUserComputed(folder.listUser).length -1 && index >14 | |||
" | |||
@click="showAll = false" | |||
class="newweizhi" | |||
> | |||
<span class="zhangkai_up"></span> | |||
<span class="Text_tiny tinyText_wirte">收起职员</span> | |||
</div> | |||
</div> | |||
</div> | |||
<div class="add-btn" v-if="folder.manageUser && folder.manageUser.length > 0 && isAllowedAssignedStaffFolder(folder)"> | |||
<people-item v-if="!isEnterEdit" | |||
@click.native.stop="aloneAddUserOnlyStaff(folder),enterEditFolderClick(folder.id)"/> | |||
</div> | |||
</div> | |||
<div v-if="isEnterEdit && activeFolderId == folder.id" | |||
class="use-relative ml-4 use-flex" | |||
:class="{'mb-32': folder.id === activeFolderId && isEnterEdit }" | |||
> | |||
<temp-selected-user-list :selectedUserList="selectedUser" | |||
@changeManagerClick="changeManagerClick" | |||
@setFirstPeopleToManager="setFirstPeopleToManager"/> | |||
</div> | |||
</div> | |||
<template v-if="folder.listChildren && folder.listChildren.length > 0"> | |||
<plain-folder-list | |||
:folderList="folder.listChildren" | |||
:id="id" | |||
:allManager="allManager" | |||
:allManagerChild="allManagerChild" | |||
:aloneAddUserForFolder="aloneAddUserForFolder" | |||
:aloneAddUserOnlyStaff="aloneAddUserOnlyStaff" | |||
:allChildrenLists="allChildrenLists" | |||
:isEnterEdit="isEnterEdit" | |||
:activeFolderId="activeFolderId" | |||
:selectedUser="selectedUser" | |||
:isProjManager="isProjManager" | |||
/> | |||
</template> | |||
</div> | |||
</div> | |||
</template> | |||
<script> | |||
import PeopleItem from './people-item'; | |||
import TempSelectedUserList from './temp-selected-user-list'; | |||
export default { | |||
name: 'PlainFolderList', | |||
components: { | |||
PeopleItem, | |||
TempSelectedUserList, | |||
}, | |||
props: { | |||
id:String,//用户的id, | |||
allManager:Object, | |||
allManagerChild:Array, | |||
folderList: Array, | |||
aloneAddUserForFolder: Function, | |||
aloneAddUserOnlyStaff: Function, | |||
allChildrenLists:Array, | |||
isEnterEdit: { | |||
type: Boolean, | |||
default: false, | |||
}, | |||
isProjManager: { | |||
type: Boolean, | |||
default: false | |||
}, | |||
activeFolderId: { | |||
type: String, | |||
defualt: '' | |||
}, | |||
selectedUser: { | |||
type: Array, | |||
default() { | |||
return [] | |||
} | |||
} | |||
}, | |||
data(){ | |||
return{ | |||
showAll:false, | |||
} | |||
}, | |||
methods: { | |||
// 设置第一个选择的人员为节点负责人 | |||
setFirstPeopleToManager(user) { | |||
this.$bus.$emit('setFirstPeopleToManager', user) | |||
}, | |||
// 切换工作负责人 | |||
changeManagerClick(user) { | |||
this.$bus.$emit('changeManagerClick', user) | |||
}, | |||
// 点击进入文件夹编辑 | |||
activeFolderClick(folder) { | |||
if(this.isEnterEdit && this.isAllowedAssignedStaffFolder(folder)) { | |||
this.$bus.$emit('activeFolderClick', folder) | |||
} | |||
}, | |||
// 点击了添加职员的按钮 进入编辑状态 | |||
// 因为这里用的是递归组件 所以就不用父子组件通信 用事件总线 | |||
enterEditFolderClick(folderId) { | |||
if(!this.isEnterEdit) { | |||
this.$bus.$emit('enterEditFolderClick', folderId); | |||
} | |||
}, | |||
showAllClick(){ | |||
this.showAll = true; | |||
}, | |||
toggleFolderExpand(folder) { | |||
folder.expanded = !folder.expanded; | |||
this.$forceUpdate(); | |||
}, | |||
isAllowedAssignedFolder(folder) { | |||
return this.allManager.id == this.id //总负责人 | |||
|| (this.allManagerChild.length > 0 && this.allManagerChild.find(item => item.id == this.id))//是不是负责人 | |||
||(this.allChildrenLists.length > 0 && this.allChildrenLists.includes(folder))//它的所有子节点 | |||
//||folder.manageUser && folder.manageUser[0].id == this.id | |||
}, | |||
isAllowedAssignedStaffFolder(folder){ | |||
return (folder.manageUser && folder.manageUser.length > 0 && folder.manageUser[0].id == this.id) || this.isAllowedAssignedFolder(folder); | |||
}, | |||
isStaff(folder){ | |||
return folder.listUser.some(item=>{ | |||
return item.id === this.id; | |||
}) | |||
} | |||
}, | |||
computed: { | |||
listUserComputed: function () { | |||
var thisApp=this; | |||
return function (listUsers) { | |||
return listUsers.filter(function(user) { | |||
return user.folderPerm != 2; | |||
}); | |||
}; | |||
}, | |||
}, | |||
} | |||
</script> | |||
<style scoped> | |||
.opacity-5 { | |||
opacity: 0.5; | |||
} | |||
.user-perm-text { | |||
margin: 0 0 0 8px; | |||
} | |||
.notclick{ | |||
cursor:not-allowed !important; | |||
opacity: 0.5; | |||
} | |||
.notclick .avtarface { | |||
cursor:not-allowed; | |||
} | |||
.allopacity{ | |||
opacity: 1; | |||
} | |||
.noManagerText { | |||
font-size: 0; | |||
} | |||
.active-folder .people-item { | |||
cursor: pointer; | |||
} | |||
.folder-name { | |||
color: #32323C; | |||
height: 20px; | |||
line-height: 20px; | |||
margin: 0 0 6px 12px;; | |||
color: rgba(50, 50, 60, 100); | |||
font-size: 14px; | |||
text-align: left; | |||
font-family: PingFangSC-Regular; | |||
} | |||
.adjust-position { | |||
position: relative; | |||
left: 4px; | |||
} | |||
.folder-wrap { | |||
position: relative; | |||
padding: 6px 0 0 0; | |||
} | |||
/* 编辑按钮 */ | |||
.edit-btn { | |||
position: absolute; | |||
top: 4px; | |||
right: 4px; | |||
width: 64px; | |||
height: 24px; | |||
line-height: 24px; | |||
font-size: 14px; | |||
text-align: center; | |||
font-family: PingFangSC-Regular; | |||
color: #979797; | |||
border-radius: 4px; | |||
background-color: rgba(255, 255, 255, 1); | |||
border: 0.5px solid rgba(151, 151, 151, 1); | |||
cursor: pointer; | |||
} | |||
</style> |
@@ -0,0 +1,65 @@ | |||
<!-- 用来编辑人员时 存储编辑的状态 --> | |||
<template> | |||
<div class="temp-selected-user-list"> | |||
<div class="use-flex"> | |||
<div v-for="(user, index) in selectedUserList" :key="user.id" class="use-relative" :class="{'mt-32': index > 8 }"> | |||
<people-item @click.native.stop="changeManagerClick(user)" | |||
:class="{'active-manager-mark': user.folderPerm == 2}" | |||
:user="user"/> | |||
<div v-if="user.folderPerm == 2" class="active-manager-mark-bottom-name">工作负责人</div> | |||
</div> | |||
<div v-if="selectedUserList.length == 0" class="use-relative"> | |||
<people-item class="active-manager-mark"/> | |||
<div class="active-manager-mark-bottom-name">工作负责人</div> | |||
</div> | |||
</div> | |||
</div> | |||
</template> | |||
<script> | |||
import PeopleItem from './people-item'; | |||
export default { | |||
data() { | |||
return { | |||
} | |||
}, | |||
components: { | |||
PeopleItem | |||
}, | |||
props: { | |||
selectedUserList: {//选择的人员列表 利用folderPerm是否为2来区分是否是普通人员 | |||
type: Array, | |||
default() { | |||
return [] | |||
} | |||
}, | |||
}, | |||
watch: { | |||
selectedUserList: { | |||
immediate: true, | |||
handler(val) { | |||
if(val.length > 0) { | |||
let isExistsManager = val.find(user => user.folderPerm && user.folderPerm == 2); | |||
if(!isExistsManager) { | |||
val[0].folderPerm = 2; | |||
this.$emit('setFirstPeopleToManager', val[0]); | |||
} | |||
} | |||
} | |||
} | |||
}, | |||
methods: { | |||
changeManagerClick(user) { | |||
console.log('click'); | |||
this.$emit('changeManagerClick', user); | |||
} | |||
} | |||
} | |||
</script> | |||
<style scoped> | |||
</style> |
@@ -72,6 +72,7 @@ | |||
:addNewFolders="addNewFolders" | |||
:scrollLoad="scrollLoad" | |||
@watchAllBtnClick="watchAllBtnClick" | |||
@lookProjDetailClick="lookProjDetailClick" | |||
> | |||
</ProjItem> | |||
@@ -256,6 +257,18 @@ export default { | |||
} | |||
}, | |||
methods: { | |||
// 新版项目管理入口 | |||
lookProjDetailClick(projData) { | |||
sessionStorage.projId = projData.Id; | |||
sessionStorage.createUserID = projData.CreateUserId; | |||
sessionStorage.templateID = projData.TemplateId; | |||
sessionStorage.allocated = projData.Allocated; | |||
this.$router.push({ | |||
name: 'projdetail' | |||
}).catch(err => { | |||
console.log(err); | |||
}) | |||
}, | |||
// 接收到proj-item发来的点击 | |||
watchAllBtnClick(projItem, i) { | |||
const temp = ['341999987607363584','341984912360235008','342002217261621248']; | |||
@@ -51,7 +51,7 @@ | |||
<img src="/static/img/global.svg" alt="" srcset=""> | |||
<p>观全局</p> | |||
</div><!-- | |||
--><div class="btn_manage"> | |||
--><div class="btn_manage" @click.stop="lookProjDetailClick(projItem)"> | |||
<img src="/static/img/prjManage.svg" alt="" srcset=""> | |||
<p>项目管理</p> | |||
</div> | |||
@@ -109,6 +109,10 @@ export default { | |||
} | |||
}, | |||
methods:{ | |||
// 点击了项目管理按钮 | |||
lookProjDetailClick(projItem) { | |||
this.$emit('lookProjDetailClick', projItem); | |||
}, | |||
//ProjName处理 | |||
subProjName(name){ | |||
let len = name.length; | |||