jeecgBootUniapp/src/pages-process/components/taskDeal.vue

<template>
	<view class="containerTask">
		<view class="cu-bar bg-white solid-bottom height">
			<view class="action">
				当前环节：
				<text class="text-bold">[部门领导]</text>
			</view>
		</view>

		<view class="margin-top-sm">
			<wd-collapse style="width: 100%;" v-model="value">
				<wd-collapse-item name="item1">
					<template #title="{expanded,disabled, isFirst }">
						<view class="header">
							<wd-img class="taskImg" src="/static/user27.png" />
							<text class="text-collapse">委托人办理</text>
							<wd-icon v-if="expanded" style="float: right;color: #d8d8d8;" name="arrow-down"
								size="22px"></wd-icon>
							<wd-icon v-else style="float: right;color: #d8d8d8;" name="arrow-up" size="22px"></wd-icon>
						</view>
					</template>
					<view
						style="position: relative; display: inline-block; min-width: 60px; margin: 2px 5px;text-align: center;">
						<wd-img v-if="!model.entrust" @click="showSelectuser('show1')"
							style="width: 32px; height: 32px; margin: 0px auto;margin-top: 10px;"
							src="/static/add.png" />
						<view v-if="!model.entrust" style="margin-bottom: 10px;">选择</view>
						<view @click="reset('show1')">
							<wd-img v-if="model.entrust"
								style="width: 32px; height: 32px; margin: 0px auto;margin-top: 10px;"
								:src="getFileAccessHttpUrl(modelShow.avatar1)" />
							<view v-if="model.entrust" style="margin-bottom: 10px;">
								{{modelShow.text1}}
							</view>
						</view>
						<SelectUserModal v-if="modelShow.show1" :selected="model.entrust"
							@change="(val)=>{show1Change(val,'show1')}" modalTitle="用户选择" :multi="false"
							@close="() => (modelShow.show1 = false)"></SelectUserModal>
					</view>

				</wd-collapse-item>
			</wd-collapse>
		</view>
		<view>
			<view class="cu-bar bg-white solid-bottom margin-top-sm">
				<view class="action">
					<text>
						<span>处理意见</span>
					</text>
					<wd-picker :columns="dropOptions" label="单列选项" v-model="model.reason"  use-default-slot>
						<view class="cu-tag line-blue margin-left-sm">
							<span>选择常用审批语</span>
						</view>
					</wd-picker>
				</view>
			</view>
			<view class="bg-white" style="height: 100px;">
				<wd-textarea v-model="model.reason" placeholder="请输入审批语句" />
			</view>
			<view class="cu-bar bg-white solid-top">
				<view class="action">
					<view>
						<text class="text" style="font-size: 15px;">
							<span>上传附件</span>
						</text>
					</view>
					<Mupload></Mupload>
				</view>
			</view>
		</view>

	</view>
</template>

<script setup lang="ts">
	import { ref, reactive, onMounted, computed, watch, nextTick } from 'vue';
	import SelectUserModal from '@/components/SelectUser/components/SelectUserModal.vue'
	import { getFileAccessHttpUrl } from '@/common/uitls'
	import { useQueue } from 'wot-design-uni'
	import Mupload from '@/components/Mupload/Mupload.vue'

	defineOptions({
		name: 'taskDeal',
		options: {
			styleIsolation: 'shared',
		},
	})
	const value = ref([])
	const modelShow = ref({
		show1: false,
		text1: '',
		avatar1: ''
	})
	const model = ref({
		taskId: '', //taskid 
		nextnode: '', //下一个节点
		nextCodeCount: '',
		reason: '同意', //原因
		processModel: 1, //分支模式:单分支、多分支
		rejectModelNode: '', //驳回节点
		nextUserName: '', //下一步会签人员
		nextUserId: '', //下一步会签人员id
		ccUserIds: '', //抄送人员ids
		ccUserRealNames: '', //抄送人员usernames
		fileList: '', //文件上传list
		ysjqx: true, //压缩机数据权限
		entrust: '', //委托人员
	})
	const { closeOutside } = useQueue()
	const dropOptions = ref([  //审批语配置
		{ label: '同意', value: '同意' },
		{ label: '同意***的意见', value: '同意***的意见' },
		{ label: '请指示', value: '请指示' },
		{ label: '请***阅示', value: '请***阅示' },
		{ label: '请处理', value: '请处理' },
		{ label: '不同意', value: '不同意' },
		{ label: '请审批', value: '请审批' },
		{ label: '审核无误', value: '审核无误' },
	])

	const props = defineProps({
		formData: {
			type: Object,
			default: () => { },
		}

	})

	const showSelectuser = (val : string) => { //选人组件
		modelShow.value[val] = true;
	}

	const show1Change = (val, type) => {
		let selectUser = val[0]
		console.log(selectUser)
		switch (type) {
			case 'show1':
				model.value.entrust = selectUser.username
				modelShow.value['text1'] = selectUser.realname
				modelShow.value['avatar1'] = selectUser.avatar
				break;
			default:
				break;
		}
	}

	const reset = (val : string) => { //重置
		switch (val) {
			case 'show1':
				model.value.entrust = ''
				modelShow.value['text1'] = ''
				modelShow.value['avatar1'] = ''
				break;
			default:
				break;
		}
	}
</script>

<style lang="scss" scoped>
	.bg-white {
		background-color: #fff;
		color: #666;
	}

	.height {
		height: 48px;
	}

	.cu-bar {
		display: flex;
		position: relative;
		align-items: center;
		min-height: 50px;
		justify-content: space-between;
	}

	.cu-bar .action:last-child {
		margin-right: 15px;
	}

	.cu-bar .action:first-child {
		margin-left: 15px;
		font-size: 15px;
	}

	.cu-bar .action {
		display: flex;
		align-items: center;
		height: 100%;
		justify-content: center;
		max-width: 100%;
	}

	.margin-top-sm {
		margin-top: 10px;
	}

	.containerTask {
		background-color: #f7f7f7;
	}

	.text-bold {
		font-weight: 700;
	}

	.text-collapse {
		flex: 1;
		font-size: 14px;
		white-space: nowrap;
		color: inherit;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.taskImg {
		height: 17px;
		width: 17px;
		margin-right: 10px;
		vertical-align: -15%
	}
	.solid-bottom::after {
	    border-bottom: 1px solid rgba(0, 0, 0, .1);
	}
	
	.text-blue, .line-blue, .lines-blue {
	    color: #0081ff;
	}
	.margin-left-sm {
	    margin-left: 10px;
	}
	.cu-tag {
	    font-size: 12px;
	    vertical-align: middle;
	    position: relative;
	    display: inline-flex;
	    align-items: center;
	    justify-content: center;
	    box-sizing: border-box;
	    padding: 0px 8px;
	    height: 24px;
	    font-family: Helvetica Neue, Helvetica, sans-serif;
	    white-space: nowrap;
	}
	
	.cu-tag[class*="line-"]::after {
	    border-radius: 0;
	}
	.cu-tag[class*="line-"]::after {
	    content: " ";
	    width: 200%;
	    height: 200%;
	    position: absolute;
	    top: 0;
	    left: 0;
	    border: 1px solid currentColor;
	    -webkit-transform: scale(.5);
	    transform: scale(.5);
	    -webkit-transform-origin: 0 0;
	    transform-origin: 0 0;
	    box-sizing: border-box;
	    border-radius: inherit;
	    z-index: 1;
	    pointer-events: none;
	}
</style>