update 选人组件调整
This commit is contained in:
赵霄
+158
-54
@@ -1,52 +1,84 @@
|
||||
<!-- 选择评价人员 -->
|
||||
<template>
|
||||
<van-popup class="history-list-popup" v-model="isShow" position="right" :style="{ width: '100%', height: '100%' }" >
|
||||
<van-popup class="history-list-popup" v-model="isShow" position="right" :style="{ width: '100%', height: '100%' }">
|
||||
<!-- 增加一个标题-->
|
||||
<custom-header :title="$t('selectUser')" :leftArrow="true" :handle-left="handleLeft"></custom-header>
|
||||
<div class="list-container">
|
||||
<van-search
|
||||
v-model="realname"
|
||||
v-model="realnameOrUsername"
|
||||
show-action
|
||||
input-align="center"
|
||||
label="姓名"
|
||||
placeholder="请输入姓名"
|
||||
@search="onSearch"
|
||||
>
|
||||
placeholder="请输入姓名/工号"
|
||||
@search="onSearch">
|
||||
<template #action>
|
||||
<div @click="onSearch">搜索</div>
|
||||
</template>
|
||||
</van-search>
|
||||
|
||||
<van-dropdown-menu :close-on-click-overlay="false" :close-on-click-outside="false">
|
||||
<!--组织机构-->
|
||||
<van-dropdown-item :title="selectedDepart" ref="departDropdownItem">
|
||||
<van-cascader
|
||||
v-model="departId"
|
||||
title="请选择所在地区"
|
||||
:options="categoryTreeList"
|
||||
:closeable="false"
|
||||
:show-header="false"
|
||||
:field-names="{text: 'departName'}"
|
||||
@change="handleDepartChange" />
|
||||
<div class="dropdown-operate-box">
|
||||
<van-button @click="handleClearDepart" class="dropdown-confirm-btn" type="primary" round plain size="small">清空</van-button>
|
||||
<van-button @click="handleConfirmDepart" class="dropdown-confirm-btn" type="primary" round size="small">确定</van-button>
|
||||
</div>
|
||||
</van-dropdown-item>
|
||||
<!--角色-->
|
||||
<van-dropdown-item :title="selectedRole" ref="roleDropdownItem">
|
||||
<van-picker
|
||||
ref="rolePicker"
|
||||
show-toolbar
|
||||
toolbar-position="bottom"
|
||||
:columns="rolesList"
|
||||
@confirm="handleConfirmRole"
|
||||
@cancel="handleCancelRole">
|
||||
<template v-slot:default>
|
||||
<div class="dropdown-operate-box">
|
||||
<van-button @click="handleClearRole" class="dropdown-confirm-btn" type="primary" round plain size="small">清空
|
||||
</van-button>
|
||||
<van-button @click="confirmRole" class="dropdown-confirm-btn" type="primary" round size="small">确定</van-button>
|
||||
</div>
|
||||
</template>
|
||||
</van-picker>
|
||||
</van-dropdown-item>
|
||||
</van-dropdown-menu>
|
||||
|
||||
<van-list
|
||||
v-model="loading"
|
||||
:finished="listFinished"
|
||||
:finished-text="listData.length > 0 ? '没有更多了' : '暂无数据'"
|
||||
@load="onLoadMore"
|
||||
:immediate-check="false"
|
||||
>
|
||||
:immediate-check="false">
|
||||
<van-checkbox-group v-if="type === 'checkbox'" v-model="checkedArr" ref="checkboxGroup">
|
||||
<van-swipe-cell
|
||||
v-for="(item, index) in listData"
|
||||
:key="index"
|
||||
:name="index"
|
||||
stop-propagation
|
||||
:before-close="handleBeforeClose"
|
||||
>
|
||||
:before-close="handleBeforeClose">
|
||||
<div class="item-box">
|
||||
<van-checkbox :name="item.id" @click="checkboxClick(item)" shape="square" :disabled="readonly"></van-checkbox>
|
||||
<div>
|
||||
<div class="item-container">
|
||||
<div class="item-title">
|
||||
<span class="title">{{ item.realname }}</span>
|
||||
<span class="score">工号({{ item.username || '暂无数据' }})</span>
|
||||
{{ item.realname }}({{ item.username }})
|
||||
</div>
|
||||
<div class="item-content">
|
||||
<span>
|
||||
<span class="label">角色: </span>
|
||||
<span class="text">{{ item.roleTxt || '暂无数据' }}</span>
|
||||
</span>
|
||||
<span>
|
||||
<span class="label">岗位: </span>
|
||||
<span class="text">{{ item.post || '暂无数据' }}</span>
|
||||
</span>
|
||||
<div class="item-content-item">
|
||||
<span class="label">角色：</span>
|
||||
<span class="text">{{ item.roleTxt }}</span>
|
||||
</div>
|
||||
<div class="item-content-item">
|
||||
<span class="label">岗位：</span>
|
||||
<span class="text">{{ item.post }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -58,24 +90,22 @@
|
||||
:key="index"
|
||||
:name="index"
|
||||
stop-propagation
|
||||
:before-close="handleBeforeClose"
|
||||
>
|
||||
:before-close="handleBeforeClose">
|
||||
<div class="item-box">
|
||||
<van-radio :name="item.id" @click="checkboxClick(item)" :disabled="readonly"></van-radio>
|
||||
<div>
|
||||
<div class="item-container">
|
||||
<div class="item-title">
|
||||
<span class="title">{{ item.realname }}</span>
|
||||
<span class="score">工号({{ item.username || '暂无数据' }})</span>
|
||||
{{ item.realname }}({{ item.username }})
|
||||
</div>
|
||||
<div class="item-content">
|
||||
<span>
|
||||
<span class="label">角色: </span>
|
||||
<span class="text">{{ item.roleTxt || '暂无数据' }}</span>
|
||||
</span>
|
||||
<span>
|
||||
<span class="label">岗位: </span>
|
||||
<span class="text">{{ item.post || '暂无数据' }}</span>
|
||||
</span>
|
||||
<div class="item-content-item">
|
||||
<span class="label">角色：</span>
|
||||
<span class="text">{{ item.roleTxt }}</span>
|
||||
</div>
|
||||
<div class="item-content-item">
|
||||
<span class="label">岗位：</span>
|
||||
<span class="text">{{ item.post }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -88,7 +118,9 @@
|
||||
<div class="bottom-btn bottom-justify-div">
|
||||
<van-button size="small" color="#C6C7CA" native-type="button" plain :disabled="disabled" @click="resetFunc">重置
|
||||
</van-button>
|
||||
<van-button v-if="type === 'checkbox'" size="small" color="#E63636" native-type="button" :disabled="disabled" @click="checkAll">全选</van-button>
|
||||
<van-button v-if="type === 'checkbox'" size="small" color="#E63636" native-type="button" :disabled="disabled" @click="checkAll">
|
||||
全选
|
||||
</van-button>
|
||||
<van-button size="small" color="#E63636" native-type="button" :disabled="disabled" @click="confirmFunc()">确定
|
||||
</van-button>
|
||||
<van-button size="small" color="#C6C7CA" native-type="button" plain :disabled="disabled" @click="hide()">取消
|
||||
@@ -102,6 +134,7 @@
|
||||
<script>
|
||||
import ListMixin from '../mixins/ListMixin'
|
||||
import CustomHeader from '@/components/CustomHeader'
|
||||
import { queryAllRole, queryDepartTreeList } from '../api/api'
|
||||
|
||||
export default {
|
||||
name: 'SelectUser',
|
||||
@@ -147,6 +180,7 @@ export default {
|
||||
data () {
|
||||
return {
|
||||
realname: '', // 搜索框数据
|
||||
realnameOrUsername: null, // 搜索框数据（姓名和工号一起搜索改的）
|
||||
isShow: false,
|
||||
loading: false, // 加载数据的标识，
|
||||
listFinished: false, // 完成加载的标识
|
||||
@@ -162,7 +196,14 @@ export default {
|
||||
list: '/sys/user/page'
|
||||
},
|
||||
checkedArr: [],
|
||||
selectedDataArr: []
|
||||
selectedDataArr: [],
|
||||
selectedDepart: '组织机构', // 回显在页面上的选中部门的名字
|
||||
selectedRole: '角色', // 回显在页面上的选中角色的名字
|
||||
categoryTreeList: [], // 组织机构数据
|
||||
departId: null, // 查询时候传给后端的参数
|
||||
tempSelectedDepart: {}, // change的时候记录一下选中的部门
|
||||
rolesList: [], // 角色下拉框
|
||||
roleId: null // 查询时候传给后端的参数
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
@@ -175,6 +216,8 @@ export default {
|
||||
this.isShow = true
|
||||
this.initData()
|
||||
this.getListData()
|
||||
this.getSysCategoryTree()
|
||||
this.initRoleList()
|
||||
},
|
||||
checkboxClick (item) {
|
||||
console.log(item)
|
||||
@@ -252,8 +295,11 @@ export default {
|
||||
if (this.realname) {
|
||||
this.filters.realname = '*' + this.realname + '*'
|
||||
} else {
|
||||
this.filters.realname = ''
|
||||
this.filters.realname = null
|
||||
}
|
||||
this.filters.realnameOrUsername = this.realnameOrUsername || null
|
||||
this.filters.departId = this.departId
|
||||
this.filters.roleId = this.roleId
|
||||
this.ipagination.pageNo = 1
|
||||
this.getListData()
|
||||
},
|
||||
@@ -262,9 +308,58 @@ export default {
|
||||
},
|
||||
hide () {
|
||||
this.isShow = false
|
||||
},
|
||||
// 获取组织机构树
|
||||
getSysCategoryTree () {
|
||||
queryDepartTreeList().then((res) => {
|
||||
if (res.success) {
|
||||
this.categoryTreeList = res.result
|
||||
} else {
|
||||
this.categoryTreeList = []
|
||||
}
|
||||
})
|
||||
},
|
||||
handleDepartChange ({ value, selectedOptions }) {
|
||||
this.tempSelectedDepart = selectedOptions.find(tt => tt.value === value) || {}
|
||||
console.log(this.tempSelectedDepart)
|
||||
},
|
||||
handleConfirmDepart () {
|
||||
this.$refs.departDropdownItem.toggle()
|
||||
this.selectedDepart = this.tempSelectedDepart.departName
|
||||
},
|
||||
handleClearDepart () {
|
||||
this.$refs.departDropdownItem.toggle()
|
||||
this.selectedDepart = '组织机构'
|
||||
this.tempSelectedDepart = {}
|
||||
this.departId = null
|
||||
},
|
||||
// 初始化角色字典
|
||||
initRoleList () {
|
||||
queryAllRole().then((res) => {
|
||||
if (res.success) {
|
||||
this.rolesList = res.result.map((item) => {
|
||||
return { text: item.roleName, value: item.id }
|
||||
})
|
||||
}
|
||||
})
|
||||
},
|
||||
confirmRole () {
|
||||
this.$refs.rolePicker.confirm()
|
||||
},
|
||||
handleClearRole () {
|
||||
this.$refs.roleDropdownItem.toggle()
|
||||
this.selectedRole = '角色'
|
||||
this.roleId = null
|
||||
},
|
||||
handleConfirmRole (value) {
|
||||
this.$refs.roleDropdownItem.toggle()
|
||||
this.roleId = value.value
|
||||
this.selectedRole = value.text
|
||||
},
|
||||
handleCancelRole () {
|
||||
this.$refs.roleDropdownItem.toggle()
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -272,13 +367,13 @@ export default {
|
||||
@import '~@assets/less/list.less';
|
||||
@import '~@assets/less/common.less';
|
||||
|
||||
.history-list-popup{
|
||||
.history-list-popup {
|
||||
background: @global-bg;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.list-container{
|
||||
.list-container {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
@@ -294,11 +389,13 @@ export default {
|
||||
// 中间内容
|
||||
.item-box {
|
||||
background: #FFFFFF;
|
||||
padding: @pad-base;
|
||||
padding: 0.24rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
border-bottom: 1px solid #C9CDD4;
|
||||
border-radius: 0;
|
||||
|
||||
.van-checkbox{
|
||||
.van-checkbox {
|
||||
display: block;
|
||||
margin: 0 20px 0 0;
|
||||
}
|
||||
@@ -321,19 +418,10 @@ export default {
|
||||
border-color: @primary-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
& + .item-box {
|
||||
margin-top: 0.24rem;
|
||||
}
|
||||
|
||||
// 左滑后 样式的变化
|
||||
&.item-box-has-swipe {
|
||||
border-radius: 0.1rem 0 0 0.1rem;
|
||||
|
||||
.item-state {
|
||||
border-radius: 0 0 0 0.1rem;
|
||||
}
|
||||
}
|
||||
.item-container {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
// 底部按钮
|
||||
@@ -343,6 +431,7 @@ export default {
|
||||
padding: 0 0.2rem;
|
||||
background: #FFFFFF;
|
||||
}
|
||||
|
||||
.bottom-justify-div {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
@@ -354,9 +443,24 @@ export default {
|
||||
height: 0.8rem;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
/deep/ .van-button--plain {
|
||||
color: #898989 !important;
|
||||
}
|
||||
}
|
||||
|
||||
.dropdown-operate-box {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
padding: 0.24rem;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.dropdown-confirm-btn {
|
||||
width: calc(50% - 0.12rem);
|
||||
}
|
||||
|
||||
/deep/ .van-picker__toolbar {
|
||||
height: auto;
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user