357 lines
9.4 KiB
Vue
357 lines
9.4 KiB
Vue
<!-- 选择评价人员 -->
|
|
<template>
|
|
<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="filters.realname"
|
|
show-action
|
|
input-align="center"
|
|
label="姓名"
|
|
placeholder="请输入姓名"
|
|
@search="onSearch"
|
|
>
|
|
<template #action>
|
|
<div @click="onSearch">搜索</div>
|
|
</template>
|
|
</van-search>
|
|
<van-list
|
|
v-model="loading"
|
|
:finished="listFinished"
|
|
:finished-text="listData.length > 0 ? '没有更多了' : '暂无数据'"
|
|
@load="onLoadMore"
|
|
: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"
|
|
>
|
|
<div class="item-box">
|
|
<van-checkbox :name="item.id" @click="checkboxClick(item)" shape="square" :disabled="readonly"></van-checkbox>
|
|
<div>
|
|
<div class="item-title">
|
|
<span class="title">{{ item.realname }}</span>
|
|
<span class="score">工号({{ item.username || '暂无数据' }})</span>
|
|
</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>
|
|
</div>
|
|
</div>
|
|
</van-swipe-cell>
|
|
</van-checkbox-group>
|
|
<van-radio-group v-else v-model="checkedArr" ref="checkboxGroup">
|
|
<van-swipe-cell
|
|
v-for="(item, index) in listData"
|
|
:key="index"
|
|
:name="index"
|
|
stop-propagation
|
|
:before-close="handleBeforeClose"
|
|
>
|
|
<div class="item-box">
|
|
<van-radio :name="item.id" @click="checkboxClick(item)" :disabled="readonly"></van-radio>
|
|
<div>
|
|
<div class="item-title">
|
|
<span class="title">{{ item.realname }}</span>
|
|
<span class="score">工号({{ item.username || '暂无数据' }})</span>
|
|
</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>
|
|
</div>
|
|
</div>
|
|
</van-swipe-cell>
|
|
</van-radio-group>
|
|
</van-list>
|
|
|
|
<!-- 底部的按钮 -->
|
|
<div class="bottom-button-container">
|
|
<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 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()">取消
|
|
</van-button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</van-popup>
|
|
</template>
|
|
|
|
<script>
|
|
import ListMixin from '../mixins/ListMixin'
|
|
import CustomHeader from '@/components/CustomHeader'
|
|
|
|
export default {
|
|
name: 'SelectUser',
|
|
components: { CustomHeader },
|
|
mixins: [ListMixin],
|
|
props: {
|
|
selectedData: {
|
|
type: String,
|
|
required: false,
|
|
default: () => {
|
|
return ''
|
|
}
|
|
},
|
|
// 一些其他的查询参数
|
|
filterData: {
|
|
type: Object,
|
|
required: false,
|
|
default: () => {
|
|
return {}
|
|
}
|
|
},
|
|
readonly: {
|
|
type: Boolean,
|
|
required: false,
|
|
default: false
|
|
},
|
|
type: {
|
|
type: String,
|
|
required: false,
|
|
default: 'radio'
|
|
}
|
|
},
|
|
// watch: {
|
|
// selectedData: {
|
|
// immediate: true,
|
|
// deep: true,
|
|
// handler (val) {
|
|
// console.log(val)
|
|
// this.handleCheckedArr()
|
|
// }
|
|
// }
|
|
// },
|
|
data () {
|
|
return {
|
|
isShow: false,
|
|
loading: false, // 加载数据的标识，
|
|
listFinished: false, // 完成加载的标识
|
|
refreshing: false, // 下拉刷新的标志
|
|
listData: [], // 列表页的数据
|
|
listCount: 0, // 所有数据的数量
|
|
/* 分页的配置 */
|
|
ipagination: {
|
|
pageNo: 1,
|
|
pageSize: 10
|
|
},
|
|
url: {
|
|
list: '/sys/user/page'
|
|
},
|
|
checkedArr: [],
|
|
selectedDataArr: []
|
|
}
|
|
},
|
|
computed: {
|
|
disabled () {
|
|
return this.listData.length === 0 || this.readonly
|
|
}
|
|
},
|
|
methods: {
|
|
open () {
|
|
this.isShow = true
|
|
this.initData()
|
|
this.getListData()
|
|
},
|
|
checkboxClick (item) {
|
|
console.log(item)
|
|
if (this.type === 'checkbox') {
|
|
if (this.checkedArr.includes(item.id)) {
|
|
console.log('------------增加了数据------------')
|
|
// 说明是增加了数据,为了顺序和列表顺序保持一致，用循环设置
|
|
const arr = []
|
|
for (const i of this.listData) {
|
|
if (this.checkedArr.includes(i.id)) {
|
|
arr.push(i)
|
|
}
|
|
}
|
|
this.selectedDataArr = arr
|
|
} else {
|
|
console.log('------------删除了数据------------')
|
|
// 说明是删除了数据
|
|
this.selectedDataArr = this.selectedDataArr.filter(i => i.id !== item.id)
|
|
}
|
|
} else {
|
|
this.selectedDataArr = [item]
|
|
}
|
|
console.log(this.selectedDataArr)
|
|
},
|
|
handleCheckedArr () {
|
|
// 清空选中的数据
|
|
if (this.type === 'checkbox') {
|
|
if (this.selectedData) {
|
|
this.checkedArr = this.selectedData.split(',')
|
|
} else {
|
|
this.checkedArr = []
|
|
}
|
|
} else {
|
|
if (this.selectedData) {
|
|
this.checkedArr = this.selectedData
|
|
} else {
|
|
this.checkedArr = ''
|
|
}
|
|
}
|
|
},
|
|
// 初始化数据
|
|
initData () {
|
|
this.ipagination.pageNo = 1
|
|
this.listData = []
|
|
this.listFinished = false
|
|
this.refreshing = false
|
|
this.loading = true
|
|
this.handleCheckedArr()
|
|
},
|
|
// 重置按钮点击的方法
|
|
resetFunc () {
|
|
this.checkedArr = []
|
|
},
|
|
checkAll () {
|
|
this.$refs.checkboxGroup.toggleAll(true)
|
|
this.selectedDataArr = [...this.listData]
|
|
},
|
|
// 确定 按钮触发的方法
|
|
confirmFunc () {
|
|
console.log(this.checkedArr)
|
|
// 先判断是否选择数据，没有提示
|
|
if ((this.type === 'checkbox' && this.checkedArr.length === 0) || (this.type === 'radio' && (!this.checkedArr || this.checkedArr.length === 0))) {
|
|
this.$message('请至少选择一条数据')
|
|
return
|
|
}
|
|
if (this.type === 'checkbox') {
|
|
this.$emit('selected-change', this.checkedArr.join(','))
|
|
} else {
|
|
this.$emit('selected-change', this.checkedArr)
|
|
}
|
|
this.$emit('selected-change-name', this.selectedDataArr.map(item => item.realname + '(' + item.username + ')').join(','))
|
|
this.hide()
|
|
},
|
|
onSearch () {
|
|
this.ipagination.pageNo = 1
|
|
this.getListData()
|
|
},
|
|
handleLeft () {
|
|
this.hide()
|
|
},
|
|
hide () {
|
|
this.isShow = false
|
|
}
|
|
}
|
|
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="less">
|
|
@import '~@assets/less/list.less';
|
|
@import '~@assets/less/common.less';
|
|
|
|
.history-list-popup{
|
|
background: @global-bg;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.list-container{
|
|
flex: 1;
|
|
display: flex;
|
|
flex-direction: column;
|
|
height: 0;
|
|
}
|
|
|
|
.van-list {
|
|
padding: @pad-base;
|
|
flex: 1;
|
|
overflow: auto;
|
|
}
|
|
|
|
// 中间内容
|
|
.item-box {
|
|
background: #FFFFFF;
|
|
padding: @pad-base;
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
.van-checkbox{
|
|
display: block;
|
|
margin: 0 20px 0 0;
|
|
}
|
|
|
|
.van-radio {
|
|
display: block;
|
|
margin: 0 20px 0 0;
|
|
}
|
|
|
|
/deep/ .van-checkbox__icon--checked {
|
|
.van-icon {
|
|
background: @primary-color;
|
|
border-color: @primary-color;
|
|
}
|
|
}
|
|
|
|
/deep/ .van-radio__icon--checked {
|
|
.van-icon {
|
|
background: @primary-color;
|
|
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;
|
|
}
|
|
}
|
|
}
|
|
|
|
// 底部按钮
|
|
.bottom-button-container {
|
|
height: 1.28rem;
|
|
line-height: 1.28rem;
|
|
padding: 0 0.2rem;
|
|
background: #FFFFFF;
|
|
}
|
|
.bottom-justify-div {
|
|
height: 100%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-around;
|
|
gap: 0.2rem;
|
|
|
|
.van-button {
|
|
height: 0.8rem;
|
|
flex: 1;
|
|
}
|
|
/deep/ .van-button--plain {
|
|
color: #898989 !important;
|
|
}
|
|
}
|
|
|
|
</style>
|