手机端选人组件
This commit is contained in:
shenyanpei
@@ -0,0 +1,9 @@
|
||||
import axios from "@/common/axiosV2";
|
||||
|
||||
export function phoneUser(params) {
|
||||
return axios({
|
||||
url: "api/sys/user/getUserByPhone",
|
||||
method: "get",
|
||||
params
|
||||
});
|
||||
}
|
||||
@@ -27,6 +27,8 @@ import SQTree from './SQTree'
|
||||
import OrgTable from './OrgTable'
|
||||
import MySelect from './mySelect'
|
||||
|
||||
import phoneRole from './phoneRole'
|
||||
|
||||
const install = function (Vue) {
|
||||
Vue.component('loading', Loading)
|
||||
Vue.component('navMenu', NavMenu)
|
||||
@@ -52,6 +54,7 @@ const install = function (Vue) {
|
||||
Vue.component('RoleTree', RoleTree)
|
||||
Vue.component('MechanismTree', MechanismTree)
|
||||
Vue.component('MySelect', MySelect)
|
||||
Vue.component('phoneRole', phoneRole)
|
||||
}
|
||||
|
||||
export default {
|
||||
|
||||
@@ -0,0 +1,250 @@
|
||||
<template>
|
||||
<div class="phoneRole phoneBox">
|
||||
<van-action-sheet
|
||||
v-model="isShowPhone2"
|
||||
:title="roleTitle"
|
||||
>
|
||||
<el-form
|
||||
ref="phoneForm"
|
||||
class="label-input-form"
|
||||
:inline="true"
|
||||
:model="phoneForm"
|
||||
@submit.native.prevent
|
||||
>
|
||||
<el-form-item class="form-item-disabled" style="margin: 10px;">
|
||||
<el-input
|
||||
size="small"
|
||||
clearable
|
||||
v-model="phoneForm.name"
|
||||
placeholder="请输入姓名"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item class="form-item-disabled" style="margin: 10px;">
|
||||
<el-button type="primary" size="small" @click="queryPhone">查询</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<van-pull-refresh v-model="refreshing" @refresh="onRefresh">
|
||||
<van-list
|
||||
v-model="loading"
|
||||
:finished="finished"
|
||||
finished-text="没有更多了"
|
||||
@load="onLoad"
|
||||
:immediate-check="false"
|
||||
:offset="300"
|
||||
>
|
||||
<van-checkbox-group v-if="!checkMore" v-model="result" :max="1">
|
||||
<van-cell-group>
|
||||
<van-cell
|
||||
v-for="(item, index) in roleList"
|
||||
clickable
|
||||
:key="index"
|
||||
:title="item.userName"
|
||||
@click="toggle(index)"
|
||||
>
|
||||
<template #right-icon>
|
||||
<van-checkbox :name="item" ref="checkbox"/>
|
||||
</template>
|
||||
</van-cell>
|
||||
</van-cell-group>
|
||||
</van-checkbox-group>
|
||||
<van-checkbox-group v-if="checkMore" v-model="result">
|
||||
<van-cell-group>
|
||||
<van-cell
|
||||
v-for="(item, index) in roleList"
|
||||
clickable
|
||||
:key="index"
|
||||
:title="item.userName"
|
||||
@click="toggle(index)"
|
||||
>
|
||||
<template #right-icon>
|
||||
<van-checkbox :name="item" ref="checkbox"/>
|
||||
</template>
|
||||
</van-cell>
|
||||
</van-cell-group>
|
||||
</van-checkbox-group>
|
||||
</van-list>
|
||||
</van-pull-refresh>
|
||||
<div class="phoneBtn">
|
||||
<van-button type="default" @click="roleClear">取消</van-button>
|
||||
<van-button type="info" @click="roleSumit">确认</van-button>
|
||||
</div>
|
||||
</van-action-sheet>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Vue from 'vue';
|
||||
import {ActionSheet, Checkbox, CheckboxGroup, Cell, CellGroup, Button, List, PullRefresh} from 'vant';
|
||||
import {phoneUser} from '@/api/phone'
|
||||
|
||||
Vue.use(ActionSheet, Checkbox, CheckboxGroup, Cell, CellGroup, Button, List, PullRefresh);
|
||||
|
||||
export default {
|
||||
name: "phoneRole",
|
||||
props: {
|
||||
isShowPhone: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
checkMore: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
roleTitle: {
|
||||
type: String,
|
||||
},
|
||||
resultList: { // 回显
|
||||
type: Array,
|
||||
default: () => {
|
||||
return []
|
||||
}
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
filterText: '',
|
||||
isShowPhone2: false,
|
||||
result: [],
|
||||
phoneForm: {
|
||||
name: '',
|
||||
page: 1
|
||||
},
|
||||
roleList: [],
|
||||
loading: false,
|
||||
finished: false,
|
||||
refreshing: false,
|
||||
total: '',
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
isShowPhone(val) {
|
||||
this.isShowPhone2 = val
|
||||
if (val) {
|
||||
this.result = this.resultList
|
||||
}
|
||||
},
|
||||
isShowPhone2(val) {
|
||||
this.$emit('update:isShowPhone', val)
|
||||
},
|
||||
resultList (val) {
|
||||
this.result = val
|
||||
},
|
||||
result() {
|
||||
this.$emit('resultList', this.result)
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.getPhoneData()
|
||||
},
|
||||
methods: {
|
||||
/** 查询 */
|
||||
queryPhone() {
|
||||
this.getPhoneData()
|
||||
},
|
||||
/** 获取人员数据 */
|
||||
async getPhoneData() {
|
||||
this.phoneForm.page = 1
|
||||
this.roleList = []
|
||||
phoneUser(this.phoneForm).then(res => {
|
||||
if (res.ok) {
|
||||
this.roleList = res.data
|
||||
this.total = this.roleList[0].total
|
||||
this.loading = false
|
||||
if (this.total === this.roleList.length) {
|
||||
this.finished = true
|
||||
} else {
|
||||
this.finished = false
|
||||
}
|
||||
this.refreshing = false
|
||||
this.loading = false
|
||||
}
|
||||
})
|
||||
},
|
||||
toggle(index) {
|
||||
if (!this.checkMore) {
|
||||
this.result = []
|
||||
this.$refs.checkbox[index].toggle();
|
||||
} else {
|
||||
this.$refs.checkbox[index].toggle();
|
||||
}
|
||||
|
||||
},
|
||||
roleSumit() {
|
||||
this.$emit('checkedRole', this.result)
|
||||
this.isShowPhone2 = false
|
||||
},
|
||||
roleClear() {
|
||||
this.result = []
|
||||
this.isShowPhone2 = false
|
||||
},
|
||||
|
||||
// 下滑加载数据
|
||||
onLoad() {
|
||||
phoneUser(this.phoneForm).then(res => {
|
||||
this.roleList = this.roleList.concat(res.data)
|
||||
this.total = this.roleList[0].total
|
||||
this.loading = false
|
||||
if (this.roleList.length < this.total) {
|
||||
this.phoneForm.page ++
|
||||
this.loading = false
|
||||
} else {
|
||||
this.finished = true
|
||||
this.loading = true
|
||||
}
|
||||
})
|
||||
},
|
||||
// 下拉刷新
|
||||
onRefresh() {
|
||||
this.getPhoneData()
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
@import '~@/assets/styles/phone';
|
||||
|
||||
.phoneRole {
|
||||
|
||||
|
||||
.van-action-sheet {
|
||||
height: 100%;
|
||||
max-height: 100%;
|
||||
}
|
||||
|
||||
.van-action-sheet__cancel {
|
||||
border-radius: 5px;
|
||||
background-color: #0c91e5;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.van-action-sheet__content {
|
||||
overflow-y: hidden;
|
||||
}
|
||||
|
||||
.van-list {
|
||||
//min-height: 9rem;
|
||||
height: 9.5rem;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.van-popup--bottom.van-popup--round {
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.phoneBtn {
|
||||
padding: 5px;
|
||||
|
||||
.van-button--info {
|
||||
width: 49%;
|
||||
float: right;
|
||||
}
|
||||
|
||||
.van-button--default {
|
||||
width: 49%;
|
||||
float: left;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
@@ -134,6 +134,7 @@
|
||||
show-submit
|
||||
show-back
|
||||
approval
|
||||
show-transfer
|
||||
@back="handleSubmitNo"
|
||||
:submitLoading="isSubmit"
|
||||
:isSubmitBack="backLoading"
|
||||
@@ -152,12 +153,19 @@
|
||||
>
|
||||
</el-upload>
|
||||
</el-dialog>
|
||||
<Role-tree
|
||||
<!-- <Role-tree
|
||||
check-box
|
||||
:is-title="drawerTitle"
|
||||
:is-visible.sync="modalshowflag"
|
||||
:nodeList="nodeList"
|
||||
@checkedRole="drawerCheck"
|
||||
/>-->
|
||||
<!-- 写有 check-more 是多人，没有就是单人 -->
|
||||
<phone-role
|
||||
:role-title="roleTitle"
|
||||
:result-list="phoneRoleList"
|
||||
:is-show-phone.sync="showPage"
|
||||
@checkedRole="phoneSumit"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
@@ -207,6 +215,12 @@ export default {
|
||||
// 驳回弹窗状态
|
||||
backDialog: false,
|
||||
|
||||
// 储存手机端选人集合
|
||||
phoneRoleList: [],
|
||||
roleTitle: '',
|
||||
showPage: false,
|
||||
phoneRole: '',
|
||||
|
||||
}
|
||||
},
|
||||
components: {
|
||||
@@ -308,11 +322,18 @@ export default {
|
||||
this.isSubmit = false
|
||||
})
|
||||
},
|
||||
drawerCheck (data) {
|
||||
this.turnLoading = true
|
||||
|
||||
// 转办按钮
|
||||
handleTurnTo() {
|
||||
this.showPage = true
|
||||
this.roleTitle = '转办处理人'
|
||||
},
|
||||
// 转办选人框
|
||||
phoneSumit (data) {
|
||||
this.phoneRoleList = data
|
||||
changeAssigneeNew({
|
||||
taskId: this.taskIds, // 任务id
|
||||
assignee: data[0].id, // 被委托人
|
||||
assignee: data[0].usId, // 被委托人
|
||||
userId: this.userId, // 委托人
|
||||
pId: this.pId // 流程实例
|
||||
}).then(res =>{
|
||||
@@ -324,12 +345,7 @@ export default {
|
||||
this.$message.warning(res.message)
|
||||
}
|
||||
})
|
||||
this.modalshowflag = false
|
||||
},
|
||||
// 转办按钮
|
||||
handleTurnTo() {
|
||||
this.modalshowflag = true
|
||||
this.drawerTitle = '转办处理人'
|
||||
// this.showPage = false
|
||||
},
|
||||
handleSubmitNo() {
|
||||
this.backLoading = true
|
||||
@@ -402,6 +418,9 @@ export default {
|
||||
pageSizeChange () {
|
||||
this.getTableByPage()
|
||||
},
|
||||
showPagePC() {
|
||||
this.showPage = true
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
Reference in New Issue
Block a user