266 lines
6.5 KiB
Vue
266 lines
6.5 KiB
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> |