cxc-szcx-uniapp/pages/userlist/index.vue
2025-02-27 09:34:41 +08:00

337 lines
6.9 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<template>
<view :class="['content',{'gray':store.isgray==1}]">
<uni-data-picker @popupclosed="popclose($event)" :step-searh="false" :map="{text:'departName',value:'id'}"
:localdata="departList" popup-title="请选择部门" placeholder="请选择部门" @nodeclick="onnodeclick">
</uni-data-picker>
<view class="search_box">
<view class="username f-row aic">
用户姓名<input v-model="realname" type="text" placeholder="请输入姓名"
placeholder-style="color: grey;font-size: 28rpx;">
</view>
<view class="username f-row aic">
用户账号:<input v-model="username" type="text" placeholder="请输入账号"
placeholder-style="color: grey;font-size: 28rpx;">
</view>
<view class="btn f-row aic jca">
<view class="f-row aic" @click="search">
<uni-icons type="search" size="15" color="#fff"></uni-icons>
查询
</view>
<view class="f-row aic" @click="refresh">
<uni-icons type="refreshempty" size="15" color="#fff"></uni-icons>
重置
</view>
</view>
</view>
<view class="list">
<view class="title f-row aic box">
<view class="">
</view>
<view class="">
序号
</view>
<view class="username">
用户账号
</view>
<view class="">
用户姓名
</view>
</view>
<view class="item f-row aic box" v-for="item,i in userlist" :key="i">
<view class="f-row aic img" @click="choose(item.id)">
<image v-if="chooseArr.includes(item.id)" src="../../static/login/checked.png" mode=""></image>
<image v-else src="../../static/login/nocheck.png" mode=""></image>
</view>
<view class="order">
{{i+1}}
</view>
<view class="username f-col aic">
<view class="">
{{item.username}}
</view>
</view>
<view class="realname">
<view class="">
{{item.realname}}
</view>
</view>
</view>
</view>
<view class="confirm f-col aic">
<view class="" @click="handleprocess">
确认
</view>
</view>
</view>
</template>
<script setup>
import {
onLoad
} from '@dcloudio/uni-app';
import {
ref,
getCurrentInstance
} from 'vue';
import {
queryMyDeptTreeListApi,
queryUserByDepIdApi,
taskEntrustApi,
processCompleteApi
} from '@/api/api.js';
import {
useStore
} from '@/store';
const store = useStore()
const {
proxy
} = getCurrentInstance()
const departList = ref([])
/**部门列表*/
const queryMyDeptTreeList = () => {
queryMyDeptTreeListApi().then((res) => {
departList.value = res.result
currentId = res.result[0].id
queryUserByDepId(res.result[0].id)
}).catch((err) => {
console.log(err);
})
}
const userlist = ref([])
/**根据部门查询人员*/
const queryUserByDepId = (id, username, realname) => {
queryUserByDepIdApi({
id,
username: username || '',
realname: realname || ''
}).then((res) => {
if (res.success) {
userlist.value = res.result
}
}).catch((err) => {
console.log(err);
})
}
let currentId = null
let departArr = []
const onnodeclick = (e) => {
queryUserByDepId(e.id)
currentId = e.id
if (departArr.indexOf(e.title) != -1) {
departArr.splice(departArr.indexOf(e.title), 1, e.title)
} else {
departArr.push(e.title)
}
}
const popclose = (e) => {
}
const chooseArr = ref([])
const choose = (id) => {
if (isradio) { //单选
if (chooseArr.value.indexOf(id) != -1) return
chooseArr.value.splice(chooseArr.value.indexOf(id), 1, id)
} else { //多选
if (chooseArr.value.indexOf(id) != -1) {
chooseArr.value.splice(chooseArr.value.indexOf(id), 1)
} else {
chooseArr.value.push(id)
}
}
}
/**0为多选1单选*/
let isradio = 0
/**任务id*/
let taskId = null
/**nextnode*/
let nextnode = null
/**reason*/
let reason = null
onLoad((options) => {
isradio = options.isradio
taskId = options.id
reason = options.reason
if (options.nextnode) {
nextnode = JSON.parse(options.nextnode)
}
queryMyDeptTreeList()
})
const username = ref('')
const realname = ref('')
const search = () => {
if (username.value.trim() || realname.value.trim()) {
userlist.value = []
queryUserByDepId(currentId, username.value, realname.value)
}
}
const refresh = () => {
username.value = ''
realname.value = ''
userlist.value = []
queryUserByDepId(currentId, username.value, realname.value)
}
/**委托*/
const taskEntrust = () => {
if (!chooseArr.value.length) return proxy.$toast('请选择被委托人')
taskEntrustApi({
taskAssignee: userlist.value.filter(item => item.id == chooseArr.value[0])[0].username,
taskId
}).then((res) => {
if (res.success) {
proxy.$toast(res.message)
setTimeout(() => {
uni.navigateBack()
}, 2000)
}
})
}
const handleprocess = () => {
if (nextnode) {
processComplete()
} else {
taskEntrust()
}
}
/**流程办理接口*/
const processComplete = () => {
processCompleteApi({
taskId,
reason,
processModel: 1,
nextnode: nextnode[0].nextnode,
nextUserName: userlist.value.filter(item => item.id == chooseArr.value[0])[0].realname,
nextUserId: chooseArr.value[0],
}).then((res) => {
proxy.$toast(res.message)
setTimeout(() => {
uni.navigateBack()
}, 2000)
})
}
</script>
<style lang="scss" scoped>
.content {
padding-bottom: 130rpx;
}
.confirm {
position: fixed;
bottom: 0;
left: 50%;
transform: translateX(-50%);
background-color: #fff;
border-top: 1px solid #efefef;
width: 100%;
padding: 20rpx 0;
view {
width: 630rpx;
height: 88rpx;
background: #01508B;
border-radius: 44rpx;
font-size: 32rpx;
color: #FFFFFF;
text-align: center;
line-height: 88rpx;
}
}
.search_box {
font-size: 28rpx;
.username {
padding: 0 20rpx;
border-bottom: 1px solid #e5e5e5;
height: 100rpx;
input {
flex: 1;
height: 100%;
}
}
.btn {
color: #fff;
padding: 20rpx 0;
view {
width: 178rpx;
height: 80rpx;
background-color: #01508B;
border-radius: 40rpx;
justify-content: center;
}
}
}
.list {
word-break: break-all;
font-size: 28rpx;
color: #333333;
.box {
view:first-child {
flex: 0.3;
}
view:nth-child(2) {
flex: 0.3;
}
view:nth-child(3) {
flex: 1;
}
view:nth-child(4) {
flex: 1;
}
}
.title {
text-align: center;
border-bottom: 1px solid #e5e5e5;
background-color: #f8f8f8;
height: 100rpx;
}
.item {
text-align: center;
border-bottom: 1px solid #e5e5e5;
.order {
border-right: 1px solid #e5e5e5;
height: 100rpx;
line-height: 100rpx;
}
.username {
border-right: 1px solid #e5e5e5;
height: 100rpx;
justify-content: center;
overflow-y: auto;
}
.realname {
height: 100rpx;
line-height: 100rpx;
overflow-y: auto;
justify-content: center;
}
.img {
border-right: 1px solid #e5e5e5;
height: 100rpx;
justify-content: center;
}
image {
width: 40rpx;
height: 40rpx;
}
}
}
</style>