You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
913 lines
30 KiB
913 lines
30 KiB
<!--
|
|
@ 作者: 秦东
|
|
@ 时间: 2024-11-19 09:50:45
|
|
@ 备注: 流程和历史记录
|
|
-->
|
|
<script lang='ts' setup>
|
|
import { orgform,searchUserListForm } from '@/api/hr/org/type'
|
|
import { getOrgFormTree,searchUserList } from '@/api/hr/org/index'
|
|
import { gainRunFlowStart,gainRunTaskFlow,startRunFlow,runTaskFlow,afreshRunWorkflow,realTimeUpdateFlow } from '@/api/lowCode/taskapi/management'
|
|
import squareUrl from '@/assets/image/1.png'
|
|
|
|
|
|
|
|
const props = defineProps({
|
|
types:{
|
|
type:Number,
|
|
default:1,
|
|
},
|
|
logList:{
|
|
type:Object,
|
|
default(){
|
|
return {}
|
|
}
|
|
},
|
|
appInfo:{
|
|
type:Object,
|
|
default(){
|
|
return {}
|
|
}
|
|
},
|
|
appPageInfo:{
|
|
type:Object,
|
|
default(){
|
|
return {}
|
|
}
|
|
},
|
|
appFlowInfo:{
|
|
type:Object,
|
|
default(){
|
|
return {}
|
|
}
|
|
},
|
|
stateForm:{
|
|
type:Object,
|
|
default(){
|
|
return {}
|
|
}
|
|
}
|
|
|
|
});
|
|
const types = computed({
|
|
get() {
|
|
return props.types
|
|
},
|
|
set(val: number) {
|
|
return val
|
|
}
|
|
});
|
|
const pageLog = computed({
|
|
get() {
|
|
if(props.logList&&props.logList.length>0){
|
|
return props.logList
|
|
}else{
|
|
return []
|
|
}
|
|
|
|
},
|
|
set(val: number) {
|
|
return val
|
|
}
|
|
});
|
|
//获取行政组织树
|
|
const orgTreeAry = ref<orgform[]>([])
|
|
const orgProps = {
|
|
value: "id",
|
|
label: "name",
|
|
children: "children",
|
|
};
|
|
//工作流相关
|
|
const flowLoading = ref(false) //loading
|
|
const flowMap = ref<any[]>([]); //工作流
|
|
const nextStep = ref<number>(0);
|
|
const currentProgress = ref<number>(1);
|
|
const nodeKey = ref<string>('');
|
|
const ruleForm = ref(); //表单
|
|
const flowOpinion = ref(false) //是否可以写评论
|
|
const sendFlowInfo = ref<string>() //审批意见
|
|
const flowAndLog = ref<number>(1); //1：啥都有;2:只有流程；3：只有历史记录；4：啥都没有
|
|
const activeName = ref<string>("log")
|
|
onBeforeMount(() => {
|
|
newAddPageData()
|
|
|
|
})
|
|
const emits = defineEmits(["searchcontent"])
|
|
watch(()=>props.stateForm,(val)=>{
|
|
newAddPageData()
|
|
},{deep:true})
|
|
|
|
/**
|
|
@ 作者: 秦东
|
|
@ 时间: 2024-11-19 10:41:41
|
|
@ 功能: 新增时获取流程列表
|
|
*/
|
|
const newAddPageData = () => {
|
|
flowLoading.value = true
|
|
console.log("新增时获取流程列表3--->",types.value)
|
|
if(types.value == 1){
|
|
console.log("新增时获取流程列表3",props.stateForm)
|
|
console.log("新增时获取流程列表1",props.stateForm.flowIsTrue,props.stateForm.flowKey)
|
|
if(props.stateForm&&props.stateForm.flowIsTrue&&props.stateForm.flowKey){
|
|
|
|
gainRunFlowStart({id:props.stateForm.flowKey.toString()})
|
|
.then(({data})=>{
|
|
console.log("获取流程==1==>",data)
|
|
flowMap.value = data.flowList
|
|
nextStep.value = data.nextStep
|
|
currentProgress.value = data.Step
|
|
nodeKey.value = data.nodeKey
|
|
flowLoading.value = false;
|
|
if(data.flowList&&data.flowList.length > 0){
|
|
activeName.value = "flow"
|
|
}else{
|
|
activeName.value = "log"
|
|
}
|
|
})
|
|
}
|
|
|
|
}else{
|
|
console.log("获取流程==2=1=>",props)
|
|
|
|
console.log("获取流程==2=2==1=>",props.appPageInfo)
|
|
console.log("获取流程==2=2==2=>",props.appPageInfo.runFlowInfo)
|
|
// console.log("获取流程==2=2==1=>",flowRunId)
|
|
|
|
if(props.appPageInfo && props.appPageInfo.runFlowInfo && props.appPageInfo.runFlowInfo != "0" && props.appPageInfo.runFlowInfo != ""){
|
|
let flowRunId = props.appPageInfo.runFlowInfo?props.appPageInfo.runFlowInfo:props.appPageInfo.runFlowIdStr?props.appPageInfo.runFlowIdStr:"0";
|
|
console.log("获取流程==2=2=>",flowRunId)
|
|
gainRunTaskFlow({id:flowRunId})
|
|
.then(({data})=>{
|
|
console.log("获取流程==2==>",data)
|
|
flowMap.value = data.flowList
|
|
flowOpinion.value = data.operational
|
|
currentProgress.value = data.current_step
|
|
flowLoading.value = false;
|
|
if(data.flowList&&data.flowList.length > 0){
|
|
activeName.value = "flow"
|
|
}else{
|
|
activeName.value = "log"
|
|
}
|
|
})
|
|
}
|
|
|
|
}
|
|
}
|
|
|
|
const handleClick = () => {
|
|
|
|
}
|
|
/**
|
|
@ 作者: 秦东
|
|
@ 时间: 2024-11-20 13:28:04
|
|
@ 功能: 启动流程
|
|
*/
|
|
const messagesss = inject('searchList')
|
|
|
|
const runWorkFlow = (val:any) => {
|
|
// console.log("启动流程--------1---------->",val)
|
|
let sendInfo ={
|
|
id:val.uuid,
|
|
flowList:flowMap.value,
|
|
state:3
|
|
}
|
|
startRunFlow(sendInfo)
|
|
.then((data:any)=>{
|
|
console.log("流程提交成功--------1---------->",typeof messagesss)
|
|
if (typeof messagesss === 'function') {
|
|
messagesss(); // 调用父组件提供的函数
|
|
}
|
|
console.log("刷新页面------3----------->")
|
|
})
|
|
}
|
|
/**
|
|
@ 作者: 秦东
|
|
@ 时间: 2024-11-21 16:26:52
|
|
@ 功能: 草稿箱建立流程
|
|
*/
|
|
const rundraftWorkFlow = (val:any) => {
|
|
// console.log("启动流程--------2---------->",val,val.data)
|
|
let sendInfo ={
|
|
id:val.data.uuid,
|
|
flowList:flowMap.value,
|
|
state:1
|
|
}
|
|
// console.log("流程提交成功--------3---------->",sendInfo)
|
|
startRunFlow(sendInfo)
|
|
.then((data:any)=>{
|
|
// console.log("流程提交成功--------2---------->",data)
|
|
})
|
|
}
|
|
/**
|
|
@ 作者: 秦东
|
|
@ 时间: 2024-11-21 15:14:54
|
|
@ 功能: 重新发起流程
|
|
*/
|
|
const reapplyWorkFlow = (val:any) => {
|
|
// console.log("重新发起流程--------2---------->",val)
|
|
if(val.data.runFlowId != "0" && val.data.runFlowId != ""){
|
|
afreshRunWorkflow({ id: val.data.runFlowId })
|
|
.then((data:any)=>{
|
|
// console.log("流程提交成功--------1---------->",data)
|
|
})
|
|
}else{
|
|
|
|
}
|
|
|
|
}
|
|
const butLoad = ref(false)
|
|
/**
|
|
@ 作者: 秦东
|
|
@ 时间: 2024-11-20 15:44:03
|
|
@ 功能: 提交审批
|
|
*/
|
|
const yesOrNo = (val:string,agreeOrRefuse:number) => {
|
|
butLoad.value = true;
|
|
let sendInfo = {
|
|
id:props.appPageInfo.runFlowInfo,
|
|
agreeOrRefuse:agreeOrRefuse,
|
|
suggest:sendFlowInfo.value,
|
|
flowlist:flowMap.value
|
|
}
|
|
runTaskFlow(sendInfo)
|
|
.then((data:any)=>{
|
|
|
|
console.log("提交审批----22222->",data)
|
|
if(data.code == 0){
|
|
ElMessage({
|
|
message: '处理完成！',
|
|
type: 'success'
|
|
})
|
|
}else{
|
|
ElMessage({
|
|
message: data.msg,
|
|
type: 'error'
|
|
})
|
|
}
|
|
|
|
|
|
})
|
|
.finally(()=>{
|
|
butLoad.value = false;
|
|
newAddPageData();
|
|
|
|
})
|
|
}
|
|
/**
|
|
@ 作者: 秦东
|
|
@ 时间: 2025-05-12 10:15:03
|
|
@ 功能: 刷新流程
|
|
*/
|
|
const refreshWorkFlow = (taskKey: any,flowFactor: any,nodelUserList: any) => {
|
|
console.log("获取工作流不进图-new--刷新>", props.types);
|
|
let gainFlowChart = {
|
|
id:props.stateForm.flowKey.toString(),
|
|
conditionList:flowFactor,
|
|
nodelPeople:nodelUserList,
|
|
oldFlow:flowMap.value
|
|
}
|
|
if(props.stateForm.flowIsTrue && props.types == 1){
|
|
realTimeUpdateFlow(gainFlowChart).then((data: any) => {
|
|
console.log("获取工作流不进图-new-->", data);
|
|
flowMap.value = data.data.flowList;
|
|
nextStep.value = data.data.nextStep;
|
|
currentProgress.value = data.data.Step;
|
|
nodeKey.value = data.data.nodeKey;
|
|
// // console.log("获取工作流不进图-1-->",flowMap.value)
|
|
flowLoading.value = false;
|
|
});
|
|
}
|
|
|
|
}
|
|
//判断是否有增加人员按钮
|
|
const judgeAddUser = (val:any):boolean =>{
|
|
// console.log("val----->",val)
|
|
if(val.customNode == "beginnode"){
|
|
val.runscope = val.runscope!=0?val.runscope:1
|
|
return true
|
|
}
|
|
switch(val.runtype){
|
|
case 1:
|
|
val.runscope = val.runscope!=0?val.runscope:1
|
|
return true
|
|
break;
|
|
case 3:
|
|
if(val.customNode == nodeKey.value){
|
|
val.runscope = val.runscope!=0?val.runscope:1
|
|
return true
|
|
}
|
|
break;
|
|
case 4:
|
|
if(val.runscope==1){
|
|
val.runscope = val.runscope!=0?val.runscope:1
|
|
return true
|
|
}
|
|
break;
|
|
default:
|
|
if(val.runscope != 0){
|
|
return true
|
|
}
|
|
return false
|
|
}
|
|
|
|
return false
|
|
}
|
|
//获取行政组织
|
|
const getOrgTreeAry = (orgId:number) => {
|
|
getOrgFormTree({id:orgId})
|
|
.then(({ data }) => {
|
|
console.log(data)
|
|
orgTreeAry.value = data.list
|
|
}).finally(()=>{
|
|
pageSetup.page = 1
|
|
pageSetup.department = orgId
|
|
getUserListAry()
|
|
})
|
|
}
|
|
|
|
|
|
const presetPersonnel = ref<any>([]); //预设选择人
|
|
const selectedPeople = ref<any>([]); //已选择人
|
|
const openclosebox = ref(false)
|
|
const openOrClose = ref(false)
|
|
const packNodeInfo = ref()
|
|
const drawerRefBox = ref()
|
|
const scrollbarHeight = ref("100px")
|
|
const unPickUSerList = ref<any[]>([])
|
|
const myPickUs = ref<any[]>([])
|
|
const myPickUsCode = ref<string[]>([])
|
|
const pageSetup = reactive({
|
|
page:1,
|
|
pageSize:10,
|
|
total:0,
|
|
name:"",
|
|
department:0
|
|
})
|
|
const treeSelectOrgId = ref("")
|
|
const loadUser = ref(false)
|
|
//获取人员列表
|
|
const getUserListAry = () => {
|
|
loadUser.value = true
|
|
const params = {
|
|
page: pageSetup.page,
|
|
pagesize: pageSetup.pageSize,
|
|
name: pageSetup.name,
|
|
department: pageSetup.department*1
|
|
}
|
|
// unPickUSerList.value = []
|
|
// pageSetup.total = 0
|
|
searchUserList(params).then(({ data })=>{ myPickUsCode
|
|
|
|
if(Array.isArray(data.list) && data.list.length > 0){
|
|
if(Array.isArray(myPickUsCode.value) && myPickUsCode.value.length > 0){
|
|
data.list.forEach((item:any)=>{
|
|
if(myPickUsCode.value.includes(item.number)){
|
|
item.isPick = true
|
|
}else{
|
|
item.isPick = false
|
|
}
|
|
|
|
})
|
|
|
|
}
|
|
unPickUSerList.value = data.list
|
|
}else{
|
|
unPickUSerList.value = data.list
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
pageSetup.total = data.total
|
|
console.log("获取人员列表",unPickUSerList.value)
|
|
}).finally(()=>{
|
|
callBackWritePick()
|
|
pickHuiXie()
|
|
loadUser.value = false
|
|
|
|
})
|
|
}
|
|
let zhiXingStep = 1
|
|
const oldPickUSer = ref([])
|
|
//添加操作人
|
|
const addPeople = (val:any) =>{
|
|
|
|
|
|
//
|
|
|
|
packNodeInfo.value = val
|
|
zhiXingStep = val.step
|
|
presetPersonnel.value = val.pendpers
|
|
selectedPeople.value = val.operator
|
|
if(val.runscope == 1){
|
|
openclosebox.value = true
|
|
}else{
|
|
openOrClose.value = true
|
|
}
|
|
openclosebox.value = true
|
|
oldPickUSer.value = []
|
|
nextTick(()=>{
|
|
oldPickUSer.value = val.operator
|
|
console.log("userDrwaer==========>",drawerRefBox.value.offsetHeight)
|
|
if(packNodeInfo.value.runscope == 1){
|
|
scrollbarHeight.value = (drawerRefBox.value.offsetHeight - 100 ) + "px"
|
|
getOrgTreeAry(0)
|
|
|
|
}else{
|
|
scrollbarHeight.value = (drawerRefBox.value.offsetHeight ) + "px"
|
|
unPickUSerList.value = val.pendpers
|
|
if(val.pendpers.length){
|
|
pageSetup.total = val.pendpers.length
|
|
}else{
|
|
pageSetup.total = 0
|
|
}
|
|
|
|
if(Array.isArray(val.operator) && val.operator.length && val.operator.length > 0){
|
|
callBackWritePick()
|
|
}
|
|
|
|
|
|
}
|
|
|
|
})
|
|
console.log("PresetPersonnel.value--------1-------->",val)
|
|
// console.log("PresetPersonnel.value--------2-------->",val.runscope)
|
|
// console.log("PresetPersonnel.value--------3-------->",val.operator)
|
|
// console.log("PresetPersonnel.value--------4-------->",selectedPeople.value)
|
|
}
|
|
|
|
//回写已选中的人
|
|
const callBackWritePick = () => {
|
|
if(Array.isArray(oldPickUSer.value) && oldPickUSer.value.length > 0){
|
|
oldPickUSer.value.forEach((item:any)=>{
|
|
// if(!myPickUsCode.value.includes(item.number)){
|
|
// myPickUsCode.value.push(item.number)
|
|
// }
|
|
pickUserCont(item)
|
|
|
|
|
|
})
|
|
}
|
|
|
|
}
|
|
|
|
const pickHuiXie = () => {
|
|
if(Array.isArray(unPickUSerList.value) && unPickUSerList.value.length > 0){
|
|
unPickUSerList.value.forEach((item:any)=>{
|
|
if(myPickUsCode.value.includes(item.number)){
|
|
item.isPick = true
|
|
}else{
|
|
item.isPick = false
|
|
}
|
|
})
|
|
}
|
|
}
|
|
|
|
|
|
const serachVal = ref("")
|
|
//查看已选择人员
|
|
const openOrClosePick = ref(false)
|
|
const openPickBox = () => {
|
|
openOrClosePick.value = true
|
|
}
|
|
//关闭已经选在的人员
|
|
const closePickUserAry = () => {
|
|
openOrClosePick.value = false
|
|
}
|
|
|
|
//翻页
|
|
const pickPageTion = (val:number) => {
|
|
|
|
pageSetup.page = val
|
|
getUserListAry()
|
|
}
|
|
//搜索内容
|
|
const searchUserCont = (val:any) => {
|
|
console.log("搜索内容--------1-------->",val)
|
|
pageSetup.name = val
|
|
getUserListAry()
|
|
}
|
|
//监听行政组织
|
|
watch(()=>treeSelectOrgId,(val:any)=>{
|
|
console.log("监听行政组织--------1-------->",val.value)
|
|
if(val.value){
|
|
pageSetup.department = val.value
|
|
}
|
|
getUserListAry()
|
|
},{deep:true})
|
|
//点击选中或删除
|
|
const piclAllToale = ref(0)
|
|
const pickUserCont = (val:any) => {
|
|
|
|
if(Array.isArray(myPickUs.value) && myPickUs.value.length > 0){
|
|
let isIn = false
|
|
myPickUs.value.forEach((item:any,index:number)=>{
|
|
if(item.number == val.number){
|
|
isIn = true
|
|
myPickUs.value.splice(index,1)
|
|
val.isPick = false
|
|
}
|
|
})
|
|
if(!isIn){
|
|
val.isPick = true
|
|
myPickUs.value.push(val)
|
|
}
|
|
}else{
|
|
val.isPick = true
|
|
myPickUs.value.push(val)
|
|
|
|
}
|
|
if(Array.isArray(myPickUsCode.value) && myPickUsCode.value.length > 0){
|
|
if(myPickUsCode.value.includes(val.number)){
|
|
let goTo:any = []
|
|
myPickUsCode.value.forEach((item:any)=>{
|
|
if(item.number != val.number){
|
|
goTo.push(item)
|
|
}
|
|
})
|
|
myPickUsCode.value = goTo
|
|
}else{
|
|
myPickUsCode.value.push(val.number)
|
|
}
|
|
}else{
|
|
myPickUsCode.value.push(val.number)
|
|
}
|
|
piclAllToale.value = myPickUs.value.length
|
|
}
|
|
//删除我已经选中的人员
|
|
const delMyPickUser = (val:string) => {
|
|
if(Array.isArray(myPickUs.value) && myPickUs.value.length > 0){
|
|
myPickUs.value.forEach((item:any,index:number)=>{
|
|
if(item.number == val){
|
|
myPickUs.value.splice(index,1)
|
|
}
|
|
})
|
|
}
|
|
if(Array.isArray(myPickUsCode.value) && myPickUsCode.value.length > 0){
|
|
myPickUsCode.value.forEach((item:string,index:number)=>{
|
|
if(item == val){
|
|
myPickUsCode.value.splice(index,1)
|
|
}
|
|
})
|
|
}
|
|
if(Array.isArray(unPickUSerList.value) && unPickUSerList.value.length > 0){
|
|
unPickUSerList.value.forEach((item:any)=>{
|
|
if(myPickUsCode.value.includes(item.number)){
|
|
item.isPick = true
|
|
}else{
|
|
item.isPick = false
|
|
}
|
|
})
|
|
}
|
|
}
|
|
//取消选择
|
|
const cancelClose = () => {
|
|
openclosebox.value = false;
|
|
openOrClosePick.value = false;
|
|
piclAllToale.value = 0
|
|
myPickUsCode.value = []
|
|
myPickUs.value = []
|
|
oldPickUSer.value = []
|
|
if(Array.isArray(unPickUSerList.value) && unPickUSerList.value.length > 0){
|
|
unPickUSerList.value.forEach((item:any)=>{
|
|
item.isPick = false
|
|
})
|
|
}
|
|
unPickUSerList.value = []
|
|
|
|
}
|
|
//清空选中的
|
|
const clearPick = () => {
|
|
openOrClosePick.value = false;
|
|
piclAllToale.value = 0
|
|
myPickUs.value = []
|
|
if(Array.isArray(unPickUSerList.value) && unPickUSerList.value.length > 0){
|
|
unPickUSerList.value.forEach((item:any)=>{
|
|
item.isPick = false
|
|
})
|
|
}
|
|
}
|
|
//更新到流程节点
|
|
const updateNode = () => {
|
|
let yixuanz = unref(myPickUs)
|
|
flowMap.value.forEach((item:any)=>{
|
|
if(item.step == zhiXingStep){
|
|
// console.log("P更新节点操作人---1-->",item.step , zhiXingStep)
|
|
item.operator = yixuanz
|
|
}
|
|
})
|
|
cancelClose()
|
|
}
|
|
defineExpose({
|
|
runWorkFlow,
|
|
reapplyWorkFlow,
|
|
rundraftWorkFlow,
|
|
refreshWorkFlow
|
|
})
|
|
</script>
|
|
<template>
|
|
|
|
<el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
|
|
<el-tab-pane v-if="flowMap&&flowMap.length > 0" label="审批流程" name="flow">
|
|
|
|
<el-steps direction="vertical" :active="currentProgress">
|
|
<el-step v-for="item in flowMap" :key="item.step">
|
|
|
|
<template #title>
|
|
{{ item.nodeName }}<span v-if="item.examinemode==1"> ● 依次审批</span><span v-if="item.examinemode==2"> ● 会签</span><span v-if="item.examinemode==3"> ● 或签</span>
|
|
<el-tooltip
|
|
v-if="item.helpTips!=''&&item.helpTips!='<p><br></p>'"
|
|
:content="item.helpTips"
|
|
raw-content
|
|
effect="light"
|
|
>
|
|
<i class="fa fa-question-circle-o"></i>
|
|
</el-tooltip>
|
|
</template>
|
|
<template #description>
|
|
<div class="logCards">
|
|
<table>
|
|
<tbody>
|
|
<tr v-for="items in item.operator" :key="items.id">
|
|
<td valign="top" align="center" width="50">
|
|
<el-avatar v-if="items.iconbase64==''&&items.icon!=''" shape="square" fit="cover" :src="items.icon" />
|
|
<el-avatar v-else-if="items.iconbase64!=''" shape="square" fit="cover" :src="items.iconbase64" />
|
|
<el-avatar v-else shape="square" fit="cover" :src="squareUrl" />
|
|
</td>
|
|
<td valign="top" align="left">
|
|
<el-row>
|
|
<el-col :span="24">
|
|
<el-text>{{ items.departmentname }}</el-text>
|
|
<el-text><span v-if="items.departmentname"> - </span>{{ items.postname }}</el-text>
|
|
<el-text><span v-if="items.departmentname||items.postname"> - </span>{{ items.name }}</el-text>
|
|
</el-col>
|
|
<el-col :span="24">
|
|
<ul>
|
|
<li v-for="(logItem,logIndex) in items.log" :key="logIndex" class="logLi">
|
|
<el-text v-if="logItem.state==2" type="success">
|
|
<span v-if="logItem.cause">{{logItem.cause}}</span><span v-else>已同意</span>
|
|
</el-text>
|
|
<el-text v-else-if="logItem.state==3" type="danger">
|
|
<span v-if="logItem.cause">{{logItem.cause}}</span><span v-else>已驳回</span>
|
|
</el-text>
|
|
<el-text v-else>
|
|
<span v-if="logItem.cause">{{logItem.cause}}</span><span v-else>未操作</span>
|
|
</el-text> · {{ logItem.time }}
|
|
</li>
|
|
</ul>
|
|
</el-col>
|
|
</el-row>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
<div v-if="judgeAddUser(item)" class="addUser" @click="addPeople(item)">
|
|
<svg-icon icon-class="addxuxian" size="50" />
|
|
</div>
|
|
</td>
|
|
<td></td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
|
|
</div>
|
|
</template>
|
|
|
|
|
|
</el-step>
|
|
</el-steps>
|
|
|
|
<el-drawer
|
|
ref="userDrwaer"
|
|
v-model="openclosebox"
|
|
title="选择人员"
|
|
direction="btt"
|
|
size="60%"
|
|
>
|
|
<div ref="drawerRefBox" class="drawerBox">
|
|
<div v-if="packNodeInfo.runscope==1" class="">
|
|
<el-tree-select
|
|
ref="flowOrgTree"
|
|
style="width: 100%; "
|
|
v-model="treeSelectOrgId"
|
|
:data="orgTreeAry"
|
|
:props="orgProps"
|
|
node-key="id"
|
|
check-strictly
|
|
placeholder="请选择行政组织"
|
|
clearable
|
|
/>
|
|
<el-input v-model="serachVal" clearable placeholder="请输入人们或工号" @input="searchUserCont"/>
|
|
</div>
|
|
<el-scrollbar class="scroBox" :height="scrollbarHeight" v-loading="loadUser">
|
|
|
|
<div v-for="item in unPickUSerList" :class="item.isPick?'userBox active':'userBox'" @click="pickUserCont(item)">
|
|
<el-avatar shape="square" :size="50" :src="item.icon?item.icon:item.iconbase64?item.iconbase64:squareUrl" />
|
|
<div class="userInfBox">
|
|
<div>{{item.name}}（{{item.number}}）</div>
|
|
<div>{{item.departmentname}}{{item.postname}}</div>
|
|
</div>
|
|
<div class="delSvg">
|
|
|
|
</div>
|
|
</div>
|
|
|
|
|
|
</el-scrollbar>
|
|
<el-pagination
|
|
v-if="packNodeInfo.runscope==1"
|
|
:page-size="pageSetup.pageSize"
|
|
:pager-count="7"
|
|
layout="prev, pager, next"
|
|
:total="pageSetup.total"
|
|
@change="pickPageTion"
|
|
/>
|
|
</div>
|
|
<template #footer>
|
|
<div class="pickUserFootBox">
|
|
<el-text @click="openPickBox">已选择（{{piclAllToale}}）</el-text>
|
|
<div style="flex: auto">
|
|
<el-button @click="cancelClose">取消</el-button>
|
|
<el-button type="primary" @click="updateNode" >确定选择</el-button>
|
|
</div>
|
|
|
|
</div>
|
|
</template>
|
|
</el-drawer>
|
|
|
|
<el-dialog
|
|
v-model:="openOrClosePick"
|
|
title="已选中的人员"
|
|
:before-close="closePickUserAry"
|
|
>
|
|
<el-scrollbar class="scroBox" :height="scrollbarHeight">
|
|
|
|
<div v-for="item in myPickUs" class="userBox " >
|
|
<el-avatar shape="square" :size="50" :src="item.icon?item.icon:item.iconbase64?item.iconbase64:squareUrl" />
|
|
<div class="userInfBox">
|
|
<div>{{item.name}}（{{item.number}}）</div>
|
|
<div>{{item.departmentname}}{{item.postname}}</div>
|
|
</div>
|
|
<div class="delSvg">
|
|
<svg-icon icon-class="delet" :size="'15px'" @click="delMyPickUser(item.number)" />
|
|
</div>
|
|
</div>
|
|
|
|
</el-scrollbar>
|
|
<template #footer>
|
|
<el-button type="primary" @click="clearPick">清空</el-button>
|
|
</template>
|
|
</el-dialog>
|
|
|
|
<el-affix v-if="flowOpinion" position="bottom" :offset="0">
|
|
<div class="approvalBoard">
|
|
<el-text size="large" class="appBoardTitle">审批意见</el-text>
|
|
<el-row :gutter="20">
|
|
<el-col :span="24">
|
|
<el-input
|
|
v-model="sendFlowInfo"
|
|
:autosize="{ minRows: 2, maxRows: 6 }"
|
|
type="textarea"
|
|
placeholder="请输入审批意见"
|
|
/>
|
|
</el-col>
|
|
</el-row>
|
|
<el-row :gutter="20">
|
|
<el-col :span="4"></el-col>
|
|
<el-col :span="8" class="juzhong"><el-button v-loading="butLoad" type="primary" style="width:100%" @click="yesOrNo(props.stateForm.flowKey,1)">同意</el-button></el-col>
|
|
<el-col :span="8" class="juzhong"><el-button v-loading="butLoad" type="danger" style="width:100%" @click="yesOrNo(props.stateForm.flowKey,2)">驳回</el-button></el-col>
|
|
<el-col :span="4"></el-col>
|
|
</el-row>
|
|
</div>
|
|
</el-affix>
|
|
</el-tab-pane>
|
|
<el-tab-pane v-if="pageLog&&pageLog.length > 0" label="修改记录" name="log">
|
|
|
|
<el-timeline>
|
|
<el-timeline-item v-for="(item,index) in pageLog" :key="index" :timestamp="item.time+' 操作人：'+item.creater" placement="top">
|
|
<el-card class="logCard">
|
|
<table cellspacing="0" >
|
|
<tbody>
|
|
<tr v-for="(mastItem,mastIndex) in item.masterdata" :key="mastIndex">
|
|
<td class="biankuang" width="100" >{{mastItem.label}}：</td>
|
|
<td class="biankuang" >{{mastItem.value}}</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
<el-tabs v-if="item.sunData" type="border-card" style="margin-top:20px;">
|
|
<el-tab-pane v-for="(sonItem,sonIndex) in item.sunData" :label="sonIndex.toString()" :key="sonIndex">
|
|
<el-card v-for="(sunItem,sunIndex) in sonItem" :key="sunIndex" class="logCard" style="margin-top:10px;">
|
|
<table cellspacing="0" >
|
|
<tbody>
|
|
<tr v-for="(mastSununItem,mastSunIndex) in sunItem" :key="mastSunIndex">
|
|
<td class="biankuang" width="100" >{{mastSununItem.label}}：</td>
|
|
<td class="biankuang" ><el-text v-if="mastSununItem.types=='index'">{{sunIndex+1}}</el-text><el-text v-else>{{mastSununItem.value}}</el-text></td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</el-card>
|
|
</el-tab-pane>
|
|
</el-tabs>
|
|
<table v-if="item.explicate" style="margin-top:20px;">
|
|
<tbody>
|
|
<tr>
|
|
<td class="biankuang" width="100">修改说明：</td>
|
|
<td class="biankuang">{{item.explicate}}</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</el-card>
|
|
|
|
</el-timeline-item>
|
|
</el-timeline>
|
|
|
|
</el-tab-pane>
|
|
</el-tabs>
|
|
|
|
</template>
|
|
<style lang='scss' scoped>
|
|
.logCard{
|
|
table {
|
|
width: 100%;
|
|
margin: 0;
|
|
// border: 1px solid #EBEEF5;
|
|
border-collapse: collapse;
|
|
}
|
|
|
|
th,
|
|
td {
|
|
// border: 1px solid #EBEEF5;
|
|
text-align: left;
|
|
padding: 0.5em;
|
|
vertical-align: top;
|
|
}
|
|
:deep .el-tabs__content{
|
|
padding: 5px;
|
|
}
|
|
}
|
|
.logCards{
|
|
td {
|
|
vertical-align: top;
|
|
}
|
|
}
|
|
.approvalBoard{
|
|
|
|
background-color: #FFFFFF;
|
|
border-top: 1px solid #EBEEF5;
|
|
.juzhong{
|
|
padding: 10px 0;
|
|
text-align: center;
|
|
}
|
|
.appBoardTitle{
|
|
padding: 5px 0 10px 0;
|
|
display: block;
|
|
}
|
|
}
|
|
.demo-tabs{
|
|
:deep .el-drawer__footer {
|
|
border-top: 1px solid #EBEEF5;
|
|
}
|
|
:deep .el-drawer__header{
|
|
border-bottom: 1px solid #EBEEF5;
|
|
}
|
|
}
|
|
.pickUserFootBox{
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
|
|
}
|
|
.scroBox{
|
|
width: 100%;
|
|
height: auto;
|
|
}
|
|
.pageBox{
|
|
width: 100%;
|
|
text-align: center;
|
|
}
|
|
.drawerBox{
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
.userBox{
|
|
width: 100%;
|
|
padding: 5px 10px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
border-bottom: 1px dotted #EBEEF5;
|
|
.userInfBox{
|
|
width: calc(100% - 90px);
|
|
padding: 2px 0;
|
|
}
|
|
.delSvg{
|
|
width: 30px;
|
|
height: 100%;
|
|
}
|
|
}
|
|
|
|
.active{
|
|
color: #000000;
|
|
background-color:rgb(233, 233, 235);
|
|
}
|
|
</style>
|