[add] 增加选人组件
This commit is contained in:
lideqin
@@ -1,6 +1,8 @@
|
|||||||
@primary-color: #E63636;
|
@primary-color: #E63636;
|
||||||
@font-color: #1D2129;
|
@font-color: #1D2129;
|
||||||
@label-font-color: #767676;
|
@label-font-color: #767676;
|
||||||
|
@global-bg: #F4F4F4;
|
||||||
|
@pad-base: 0.32rem;
|
||||||
|
|
||||||
.page-box {
|
.page-box {
|
||||||
height: 100%;
|
height: 100%;
|
||||||
|
|||||||
@@ -0,0 +1,133 @@
|
|||||||
|
.list-container {
|
||||||
|
height: 100%;
|
||||||
|
background: @global-bg;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
.list-box {
|
||||||
|
flex: 1;
|
||||||
|
overflow: auto;
|
||||||
|
padding: @pad-base;
|
||||||
|
.van-swipe-cell{
|
||||||
|
border-radius: 0.1rem;
|
||||||
|
}
|
||||||
|
.van-swipe-cell + .van-swipe-cell{
|
||||||
|
margin-top: 0.24rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
//每一个面板对应的样式
|
||||||
|
.item-box {
|
||||||
|
background: #FFFFFF;
|
||||||
|
padding: @pad-base;
|
||||||
|
position: relative;
|
||||||
|
border-radius: 0.1rem;
|
||||||
|
|
||||||
|
& + .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-title {
|
||||||
|
font-size: 0.28rem;
|
||||||
|
text-align: left;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
span {
|
||||||
|
display: inline-block;
|
||||||
|
text-align: left;
|
||||||
|
}
|
||||||
|
|
||||||
|
.title {
|
||||||
|
width: 3.05rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.score {
|
||||||
|
font-size: 0.2rem;
|
||||||
|
line-height: 0.2rem;
|
||||||
|
border-radius: .16rem .16rem .16rem .02rem;
|
||||||
|
background-color: #F2F2F2;
|
||||||
|
padding: 0.07rem 0.15rem;
|
||||||
|
max-width: 2rem;
|
||||||
|
.green{
|
||||||
|
color: #25C4A0;
|
||||||
|
}
|
||||||
|
.red{
|
||||||
|
color: #FF4C4C;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 内容部分
|
||||||
|
.item-content {
|
||||||
|
padding: 0.2rem 0;
|
||||||
|
& > span {
|
||||||
|
display: flex;
|
||||||
|
align-items: baseline;
|
||||||
|
color: @font-color;
|
||||||
|
font-size: 0.22rem;
|
||||||
|
text-align: left;
|
||||||
|
}
|
||||||
|
& > span + span {
|
||||||
|
margin-top: 0.1rem;
|
||||||
|
}
|
||||||
|
.label {
|
||||||
|
display: inline-block;
|
||||||
|
width: 1.2rem;
|
||||||
|
text-align: left;
|
||||||
|
}
|
||||||
|
.text{
|
||||||
|
white-space: pre-wrap;
|
||||||
|
word-break: break-all;
|
||||||
|
flex: 1;
|
||||||
|
width: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
//操作部分
|
||||||
|
.item-ope {
|
||||||
|
font-size: 0.24rem;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
& > span {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
img{
|
||||||
|
width: 0.36rem;
|
||||||
|
height: 0.36rem;
|
||||||
|
}
|
||||||
|
span {
|
||||||
|
margin-left: 0.1rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.item-state{
|
||||||
|
width: 1rem;
|
||||||
|
height: 0.48rem;
|
||||||
|
line-height: 0.48rem;
|
||||||
|
background: @primary-color;
|
||||||
|
border-radius: 0 0.1rem;
|
||||||
|
font-size: 0.2rem;
|
||||||
|
color: #FFFFFF;
|
||||||
|
text-align: center;
|
||||||
|
position: absolute;
|
||||||
|
right: 0;
|
||||||
|
top: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.item-state-have-evaluation {
|
||||||
|
background: rgba(48, 116, 246, 0.1);
|
||||||
|
color: @primary-color;
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
@@ -16,5 +16,18 @@ module.exports = {
|
|||||||
expirationDate: '截止日期',
|
expirationDate: '截止日期',
|
||||||
processExplain: '流程说明',
|
processExplain: '流程说明',
|
||||||
pleaseSelect: '请选择',
|
pleaseSelect: '请选择',
|
||||||
pleaseEnter: '请输入'
|
pleaseEnter: '请输入',
|
||||||
|
basicInfo: '基础信息',
|
||||||
|
personalInfo: '人员信息',
|
||||||
|
turnTo: '转办',
|
||||||
|
agree: '同意',
|
||||||
|
reject: '驳回',
|
||||||
|
processApprovalInfo: '流程审批信息',
|
||||||
|
remark: '备注',
|
||||||
|
clickSelect: '点击选择',
|
||||||
|
selectUser: '选择人员',
|
||||||
|
standardEntryOrChange: {
|
||||||
|
source: '来源',
|
||||||
|
operationType: '操作类型'
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -24,6 +24,8 @@ module.exports = {
|
|||||||
reject: '驳回',
|
reject: '驳回',
|
||||||
processApprovalInfo: '流程审批信息',
|
processApprovalInfo: '流程审批信息',
|
||||||
remark: '备注',
|
remark: '备注',
|
||||||
|
clickSelect: '点击选择',
|
||||||
|
selectUser: '选择人员',
|
||||||
standardEntryOrChange: {
|
standardEntryOrChange: {
|
||||||
source: '来源',
|
source: '来源',
|
||||||
operationType: '操作类型'
|
operationType: '操作类型'
|
||||||
|
|||||||
@@ -0,0 +1,56 @@
|
|||||||
|
<template>
|
||||||
|
<div class="">
|
||||||
|
<van-nav-bar
|
||||||
|
:title="title"
|
||||||
|
:left-arrow="leftArrow"
|
||||||
|
placeholder
|
||||||
|
@click-left="handleBack"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name: 'CustomHeader',
|
||||||
|
props: {
|
||||||
|
title: {
|
||||||
|
type: String,
|
||||||
|
default: '主页'
|
||||||
|
},
|
||||||
|
leftArrow: {
|
||||||
|
type: Boolean,
|
||||||
|
default: false
|
||||||
|
},
|
||||||
|
handleLeft: {
|
||||||
|
type: Function,
|
||||||
|
required: false
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
handleBack () {
|
||||||
|
if (this.handleLeft) {
|
||||||
|
this.handleLeft()
|
||||||
|
} else {
|
||||||
|
this.$router.go(-1)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped lang="less">
|
||||||
|
::v-deep .van-nav-bar{
|
||||||
|
height: 0.88rem;
|
||||||
|
line-height: 0.88rem;
|
||||||
|
&__content {
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
.van-icon-arrow-left{
|
||||||
|
font-size: 0.3rem;
|
||||||
|
}
|
||||||
|
.van-nav-bar__title{
|
||||||
|
font-size: 0.3rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
</style>
|
||||||
@@ -0,0 +1,331 @@
|
|||||||
|
<!-- 选择评价人员 -->
|
||||||
|
<template>
|
||||||
|
<div class="list-container">
|
||||||
|
<van-search
|
||||||
|
v-model="filters.realname"
|
||||||
|
show-action
|
||||||
|
:clearable="true"
|
||||||
|
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="$emit('cancel')">取消
|
||||||
|
</van-button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import ListMixin from '../mixins/ListMixin'
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: 'SelectUser',
|
||||||
|
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 {
|
||||||
|
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: {
|
||||||
|
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(','))
|
||||||
|
},
|
||||||
|
onSearch () {
|
||||||
|
this.getListData()
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped lang="less">
|
||||||
|
@import '~@assets/less/list.less';
|
||||||
|
@import '~@assets/less/common.less';
|
||||||
|
|
||||||
|
.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>
|
||||||
@@ -0,0 +1,233 @@
|
|||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<van-field
|
||||||
|
v-model="selectedDataNames"
|
||||||
|
:label="label"
|
||||||
|
:placeholder="$t('clickSelect') + label"
|
||||||
|
readonly
|
||||||
|
rows="1"
|
||||||
|
autosize
|
||||||
|
type="textarea"
|
||||||
|
@click="handleSelect"
|
||||||
|
>
|
||||||
|
|
||||||
|
</van-field>
|
||||||
|
<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>
|
||||||
|
|
||||||
|
<select-user
|
||||||
|
ref="evaluatePersonSelectedList"
|
||||||
|
:selected-data="value"
|
||||||
|
:filter-data="filterData"
|
||||||
|
@selected-change="selectedChange"
|
||||||
|
@selected-change-name="selectedChangeName"
|
||||||
|
@cancel="hide()"
|
||||||
|
v-bind="$attrs"
|
||||||
|
:readonly="readonly"
|
||||||
|
></select-user>
|
||||||
|
</van-popup>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import SelectUser from './SelectUser'
|
||||||
|
import CustomHeader from './CustomHeader'
|
||||||
|
export default {
|
||||||
|
name: 'SelectUserField',
|
||||||
|
components: { SelectUser, CustomHeader },
|
||||||
|
props: {
|
||||||
|
// 选中的多个id 以逗号“,”拼接
|
||||||
|
value: {
|
||||||
|
type: String,
|
||||||
|
required: true,
|
||||||
|
default: () => {
|
||||||
|
return ''
|
||||||
|
}
|
||||||
|
},
|
||||||
|
// 一些其他的查询参数
|
||||||
|
filterData: {
|
||||||
|
type: Object,
|
||||||
|
required: false,
|
||||||
|
default: () => {
|
||||||
|
return {}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
readonly: {
|
||||||
|
type: Boolean,
|
||||||
|
required: false,
|
||||||
|
default: false
|
||||||
|
},
|
||||||
|
checkedNames: {
|
||||||
|
type: String,
|
||||||
|
required: false,
|
||||||
|
default: () => {
|
||||||
|
return ''
|
||||||
|
}
|
||||||
|
},
|
||||||
|
label: {
|
||||||
|
type: String,
|
||||||
|
required: false,
|
||||||
|
default: '人员'
|
||||||
|
},
|
||||||
|
fieldName: {
|
||||||
|
type: String,
|
||||||
|
required: false,
|
||||||
|
default: ''
|
||||||
|
}
|
||||||
|
},
|
||||||
|
watch: {
|
||||||
|
checkedNames: {
|
||||||
|
immediate: true,
|
||||||
|
// deep: true,
|
||||||
|
handler (val) {
|
||||||
|
this.selectedDataNames = val
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
data () {
|
||||||
|
return {
|
||||||
|
isShow: false,
|
||||||
|
selectedDataNames: ''
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
handleSelect () {
|
||||||
|
if (this.readonly) {
|
||||||
|
return
|
||||||
|
}
|
||||||
|
this.isShow = true
|
||||||
|
this.$nextTick(() => {
|
||||||
|
this.$refs.evaluatePersonSelectedList.initData()
|
||||||
|
this.$refs.evaluatePersonSelectedList.getListData()
|
||||||
|
})
|
||||||
|
},
|
||||||
|
handleLeft () {
|
||||||
|
this.hide()
|
||||||
|
},
|
||||||
|
hide () {
|
||||||
|
this.isShow = false
|
||||||
|
},
|
||||||
|
// 选择人员组件 选择后返回的方法
|
||||||
|
selectedChange (value) {
|
||||||
|
this.$emit('select', value)
|
||||||
|
this.hide()
|
||||||
|
},
|
||||||
|
selectedChangeName (value) {
|
||||||
|
this.selectedDataNames = value
|
||||||
|
this.$emit('selectNameChange', value, this.fieldName)
|
||||||
|
}
|
||||||
|
},
|
||||||
|
model: {
|
||||||
|
prop: 'value',
|
||||||
|
event: 'select'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped lang="less">
|
||||||
|
@import '~@assets/less/common.less';
|
||||||
|
|
||||||
|
.history-list-popup{
|
||||||
|
background: @global-bg;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
.van-list{
|
||||||
|
padding: @pad-base;
|
||||||
|
flex: 1;
|
||||||
|
overflow: auto;
|
||||||
|
}
|
||||||
|
.item-box .item-title.full-width .title{
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
// 底部按钮
|
||||||
|
.bottom-justify-div{
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-around;
|
||||||
|
.van-button{
|
||||||
|
padding: 0 @pad-base;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
// 中间内容
|
||||||
|
.item-box{
|
||||||
|
background: #FFFFFF;
|
||||||
|
padding: @pad-base;
|
||||||
|
& + .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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.van-checkbox{
|
||||||
|
width: 100%;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
/deep/.van-checkbox__label{
|
||||||
|
flex: 1;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
align-items: center;
|
||||||
|
margin-left: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.left-img{
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
flex-basis: 1.5rem;
|
||||||
|
.van-image{
|
||||||
|
width: 1.2rem;
|
||||||
|
height: 1.2rem;
|
||||||
|
margin: 0 0.24rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.right-content{
|
||||||
|
width: 0;
|
||||||
|
flex: 1;
|
||||||
|
.title{
|
||||||
|
width: 3.05rem;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
.item-title{
|
||||||
|
font-size: 0.28rem;
|
||||||
|
text-align: left;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
span {
|
||||||
|
display: inline-block;
|
||||||
|
text-align: left;
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
.item-content{
|
||||||
|
padding: 0.2rem 0 0;
|
||||||
|
span {
|
||||||
|
display: flex;
|
||||||
|
align-items: baseline;
|
||||||
|
color: @font-color;
|
||||||
|
font-size: 0.22rem;
|
||||||
|
text-align: left;
|
||||||
|
white-space: pre-wrap;
|
||||||
|
word-break: break-all;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.history-btn{
|
||||||
|
padding: 0 @pad-base;
|
||||||
|
|
||||||
|
}
|
||||||
|
//.van-cell{
|
||||||
|
// padding: 0.27rem 0!important;
|
||||||
|
//}
|
||||||
|
|
||||||
|
</style>
|
||||||
@@ -0,0 +1,156 @@
|
|||||||
|
import { Toast, Dialog } from 'vant'
|
||||||
|
import { getAction, deleteAction } from '../api/manage'
|
||||||
|
|
||||||
|
const ListMixin = {
|
||||||
|
data () {
|
||||||
|
return {
|
||||||
|
loading: false, // 加载数据的标识，
|
||||||
|
listFinished: false, // 完成加载的标识
|
||||||
|
refreshing: false, // 下拉刷新的标志
|
||||||
|
|
||||||
|
listData: [], // 列表页的数据
|
||||||
|
listCount: 0, // 所有数据的数量
|
||||||
|
/* 分页的配置 */
|
||||||
|
ipagination: {
|
||||||
|
pageNo: 1,
|
||||||
|
pageSize: 10
|
||||||
|
},
|
||||||
|
/* 排序参数 */
|
||||||
|
isorter: {
|
||||||
|
column: 'createTime',
|
||||||
|
order: 'desc'
|
||||||
|
},
|
||||||
|
/* 筛选参数 */
|
||||||
|
filters: {},
|
||||||
|
showDialog: false // 是否显示删除二次确认弹框，解决 在二次确认的时候可以关闭列表中的滑块
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
// 刷新数据的方法
|
||||||
|
onRefresh () {
|
||||||
|
// 可以调用获得数据的方法，并且把数据的页码重置
|
||||||
|
this.initData()
|
||||||
|
const callback = () => {
|
||||||
|
Toast('刷新成功')
|
||||||
|
}
|
||||||
|
this.getListData(callback)
|
||||||
|
},
|
||||||
|
// 加载更多数据的方法
|
||||||
|
onLoadMore () {
|
||||||
|
++this.ipagination.pageNo
|
||||||
|
this.getListData()
|
||||||
|
},
|
||||||
|
|
||||||
|
// 获得所有的信息
|
||||||
|
getListData (callback) {
|
||||||
|
if (!this.url.list) {
|
||||||
|
Toast('请设置url.list属性!')
|
||||||
|
return
|
||||||
|
}
|
||||||
|
const params = Object.assign({}, this.ipagination, this.isorter, this.filters)
|
||||||
|
|
||||||
|
this.loading = true
|
||||||
|
getAction(this.url.list, params).then(res => {
|
||||||
|
if (res.success) {
|
||||||
|
const dataSource = res.result.records || res.result
|
||||||
|
// 判断是否有处理返回数据的方法，有则先进行处理
|
||||||
|
this.handleList && this.handleList(dataSource)
|
||||||
|
// 判断是否是首页，首页则重新赋值，其他的是合并
|
||||||
|
this.listData = this.ipagination.pageNo === 1 ? dataSource : this.listData.concat(dataSource)
|
||||||
|
this.ipagination.pageNo = res.result.current || 1
|
||||||
|
this.listCount = res.result.total
|
||||||
|
if (this.listData.length >= this.listCount || dataSource.length === 0) {
|
||||||
|
this.listFinished = true
|
||||||
|
}
|
||||||
|
callback && callback()
|
||||||
|
} else {
|
||||||
|
this.listFinished = true
|
||||||
|
}
|
||||||
|
}, () => {
|
||||||
|
this.listFinished = true
|
||||||
|
}).finally(() => {
|
||||||
|
this.loading = false
|
||||||
|
})
|
||||||
|
},
|
||||||
|
// 初始化数据
|
||||||
|
initData () {
|
||||||
|
this.ipagination.pageNo = 1
|
||||||
|
this.listData = []
|
||||||
|
this.listFinished = false
|
||||||
|
this.refreshing = false
|
||||||
|
this.loading = true
|
||||||
|
},
|
||||||
|
// 滑块打开事件
|
||||||
|
handleSwipeOpen ({ name }) {
|
||||||
|
this.listData[name].showSwipe = true
|
||||||
|
this.$set(this.listData, name, this.listData[name])
|
||||||
|
},
|
||||||
|
// 滑块关闭事件
|
||||||
|
handleSwipeClose ({ position, name }) {
|
||||||
|
console.log(position, name)
|
||||||
|
this.listData[name].showSwipe = false
|
||||||
|
this.$set(this.listData, name, this.listData[name])
|
||||||
|
if (position === 'right') {
|
||||||
|
// 代表的是点击删除按钮
|
||||||
|
}
|
||||||
|
},
|
||||||
|
/*
|
||||||
|
* description: 删除滑块关闭前触发的方法
|
||||||
|
* params: name - 标识符 String
|
||||||
|
* params: position -关闭时的点击位置 (left right cell outside)
|
||||||
|
* params: instance -SwipeCell 实例，用于调用实例方法
|
||||||
|
*
|
||||||
|
* */
|
||||||
|
handleBeforeClose ({ name, position, instance }) {
|
||||||
|
const that = this
|
||||||
|
// console.log("position---------", position)
|
||||||
|
switch (position) {
|
||||||
|
case 'left':
|
||||||
|
case 'cell':
|
||||||
|
case 'outside':
|
||||||
|
if (!that.showDialog) {
|
||||||
|
instance.close()
|
||||||
|
}
|
||||||
|
break
|
||||||
|
case 'right':
|
||||||
|
that.showDialog = true
|
||||||
|
Dialog.confirm({
|
||||||
|
message: '确定要删除此条数据吗？'
|
||||||
|
}).then(() => {
|
||||||
|
// on confirm
|
||||||
|
// 调用删除的接口
|
||||||
|
console.log('调用删除的接口-------', name)
|
||||||
|
const id = that.listData[name].id
|
||||||
|
if (!this.url.delete) {
|
||||||
|
Toast('请设置url.delete!')
|
||||||
|
instance.close()
|
||||||
|
return
|
||||||
|
}
|
||||||
|
deleteAction(that.url.delete, { id }).then((res) => {
|
||||||
|
if (res.success) {
|
||||||
|
Toast('删除成功')
|
||||||
|
that.ipagination.pageNo = 1
|
||||||
|
that.listFinished = false
|
||||||
|
that.getListData()
|
||||||
|
} else {
|
||||||
|
Toast(res.message)
|
||||||
|
}
|
||||||
|
instance.close()
|
||||||
|
that.showDialog = false
|
||||||
|
}, () => {
|
||||||
|
// 接口404等异常处理
|
||||||
|
instance.close()
|
||||||
|
that.showDialog = false
|
||||||
|
})
|
||||||
|
}).catch(() => {
|
||||||
|
// on cancel
|
||||||
|
instance.close()
|
||||||
|
that.showDialog = false
|
||||||
|
})
|
||||||
|
break
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export default ListMixin
|
||||||
@@ -26,6 +26,15 @@
|
|||||||
type="date"
|
type="date"
|
||||||
readonly
|
readonly
|
||||||
/>
|
/>
|
||||||
|
<select-user-field
|
||||||
|
class="form-item"
|
||||||
|
v-model="processInfoForm.appraiserObjArr"
|
||||||
|
:checked-names="processInfoForm.appraiserObjArr_dictText"
|
||||||
|
fieldName="appraiserObjArr"
|
||||||
|
@selectNameChange="selectUserNameChange"
|
||||||
|
:readonly="false"
|
||||||
|
type="radio"
|
||||||
|
/>
|
||||||
</van-form>
|
</van-form>
|
||||||
</div>
|
</div>
|
||||||
<!-- 业务基本信息 -->
|
<!-- 业务基本信息 -->
|
||||||
@@ -37,6 +46,11 @@
|
|||||||
<div class="process-part-title">{{ $t('processApprovalInformation') }}</div>
|
<div class="process-part-title">{{ $t('processApprovalInformation') }}</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
<template v-slot:operation>
|
||||||
|
<van-button icon="revoke" class="operation-common-btn">{{ $t('turnTo') }}</van-button>
|
||||||
|
<van-button icon="revoke" class="operation-common-btn" type="primary" @click="handleAgree">{{ $t('agree') }}</van-button>
|
||||||
|
<van-button icon="revoke" class="operation-common-btn light-color-button">{{ $t('reject') }}</van-button>
|
||||||
|
</template>
|
||||||
</process-common-layout>
|
</process-common-layout>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
@@ -44,22 +58,35 @@
|
|||||||
import ProcessCommonLayout from '@/components/ProcessCommonLayout'
|
import ProcessCommonLayout from '@/components/ProcessCommonLayout'
|
||||||
import { ProcessKey } from '@/enums/commonEnums'
|
import { ProcessKey } from '@/enums/commonEnums'
|
||||||
import CalendarField from '@/components/CalendarField'
|
import CalendarField from '@/components/CalendarField'
|
||||||
|
import SelectUserField from '@/components/SelectUserField'
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: 'EnterpriseStandardInitChange',
|
name: 'EnterpriseStandardInitChange',
|
||||||
components: {
|
components: {
|
||||||
ProcessCommonLayout,
|
ProcessCommonLayout,
|
||||||
CalendarField
|
CalendarField,
|
||||||
|
SelectUserField
|
||||||
},
|
},
|
||||||
data () {
|
data () {
|
||||||
return {
|
return {
|
||||||
ProcessKey,
|
ProcessKey,
|
||||||
readonly: false,
|
readonly: false,
|
||||||
processInfoForm: {} // 流程信息表单
|
processInfoForm: {
|
||||||
|
appraiserObjArr: ''
|
||||||
|
} // 流程信息表单
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
|
selectUserNameChange (value, fieldName) {
|
||||||
|
this.processInfoForm[fieldName + '_dictText'] = value
|
||||||
|
},
|
||||||
|
onFailed () {},
|
||||||
|
onSubmit () {
|
||||||
|
console.log(this.processInfoForm)
|
||||||
|
},
|
||||||
|
handleAgree () {
|
||||||
|
this.onSubmit()
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|||||||
Reference in New Issue
Block a user