hxgksystemapp/src/views/taskplatform/taskmanagement/lookFlowInfo.vue

<!--
@ 作者: 秦东
@ 时间: 2023-11-27 15:14:55
@ 备注: 
-->
<script lang='ts' setup>
import { submitButton, afreshSubmitButton,editFormCont,draftSubmitButton } from "@/utils/workflow/const";
import {
    json2string,
    objToStringify,
    string2json,
    stringToObj
} from '@/utils/DesignForm/form'

import { haveCustomerFormVersion,generateFlow } from '@/api/taskapi/management'

import RunFlowStep from '@/views/taskplatform/taskmanagement/runFlowStep.vue'

import { judgeSubmitCancel,startRunFlow,afreshRunFlow } from '@/api/DesignForm/requestapi'



const props = defineProps({
	isshow:{
		type:Boolean,
		default:true
	},
	drawerWith:{
		type:Number,
		default:0
	},
	flowLogInfo:{
		type:Object,
		default(){
			return {}
		}
	},
	operState:{
		type:Number,
		default:1
	}
})
const emits = defineEmits(["update:isshow","getmytodolist"]);
const isOpen =   computed({
	get: () => props.isshow,
	set: (val) => {
		emits("update:isshow", val);
	},
});

const formLoading  = ref(false)
const loadingData = ref(false)			//加载表单数据
const flowLoading = ref(false)			//加载流程数据
const versiontitle = ref<any>("1")
const flowMap = ref<any>()
const nextStep = ref(0)
const nodeKey = ref<string>('');
const currentProgress  = ref<number>(1);

//表单相关内容
const formState = reactive({
    formData: {
      list: [],
      form: {},
      config: {}
    },
    dict: {},
    formId: 25,
    id: 1,
    loading: true
})
//获取表单内容
const gainFormData = () =>{
	formLoading.value = true;
	console.log("获取表单内容--->",props.flowLogInfo)
	nextStep.value = props.flowLogInfo.nextStep
	nodeKey.value = props.flowLogInfo.nodeKey;
	currentProgress.value = props.flowLogInfo.currentStep
	console.log("props.flowLogInfo--5-------->",props.flowLogInfo.mastesform)
	formState.formData = stringToObj(props.flowLogInfo.mastesform)
	// formState.formData.list.push(submitButton)
	haveCustomerFormVersion({id:props.flowLogInfo.formVersionId})
		.then(({ data }) =>{
			console.log("res----------->",props.flowLogInfo.flowkeys, data)
			// formState.formData = stringToObj(data.mastesform)
			formState.dict = string2json(data.dict)
			if(props.operState == 2 || props.operState == 3 || props.operState == 4){
				judgeSubmitCancel({"name":data.mastesformjson})
						.then((dataBut:any) =>{
							console.log("res----判断按钮------->",dataBut,props.operState)
							if(dataBut.code == 0){
								// formState.formData.list.push(afreshSubmitButton)
								// console.log("res----判断按钮------->",dataBut,props.operState)
								if (dataBut.data == 3 || dataBut.data == 4){
									console.log("res----判断按钮------->",dataBut.data,props.operState)
									if(props.operState == 2){
										formState.formData.list.push(afreshSubmitButton)
									}else if(props.operState == 3){
										formState.formData.list.push(editFormCont)
									}else if(props.operState == 4){
										formState.formData.list.push(draftSubmitButton)
									}
									
								}
							}
						})
			}
			nextTick(() => {
				formEl.value.getData({ id: props.flowLogInfo.flowkeys,version: props.flowLogInfo.formVersionId})
				formState.loading = false
			})
			formLoading.value = false
		})
		
}

const formType = computed(() => {
    // 带有参数id为编辑状态
    if (true) {
      return 2
    } else {
      return 1
    }
	// return props.operState
})

const formEl = ref<any>()
const drawerBeforeClose = () => {
	console.log("监听打开关闭",false)
	emits("getmytodolist")
	emits("update:isshow", false);
}
onMounted(()=>{
	versiontitle.value = props.flowLogInfo.title
	flowMap.value = JSON.parse(props.flowLogInfo.flowcont)
	gainFormData()
})
//关闭拉窗
const closeAppSubmit = () => {
	drawerBeforeClose();
}
const runstep = ref(null)
//重新提交审核
const anewSubmit = (type: string,val?:any) => {
	console.log("重新提交数据---<",type,val)
	if(type == "success"){
		afreshRunFlow({id:props.flowLogInfo.flowkeys})
			.then((data:any) => {
				console.log("重新提交数据---<",data,runstep.value)
				runstep.value.gainRunFlowTask()
			})
			.finally(() => {
				drawerBeforeClose();
			})
	}
}
//保存草稿箱
const saveEditFormInfo  = (type: string,val?:any) => {
	
	if(type == "success"){
		runstep.value.gainRunFlowTask()
		drawerBeforeClose();
	}
}
//草稿提交审批
const sendDraftSubmit =  (type: string,val?:any) => {
	
	if(type == "success"){
		runstep.value.gainRunFlowTask()
		drawerBeforeClose();
	}
}
</script>
<template>
	<el-drawer  v-model="isOpen" v-loading="loadingData" element-loading-my-text="Loading..." :title="versiontitle"  :close-on-click-modal="false" :close-on-press-escape="false" :destroy-on-close="true" :size="props.drawerWith" class="drawerClass" :before-close="drawerBeforeClose">
		<table border="0"  class="tableFlowBox">
			<tr>
				<td valign="top">
					<div class="drawerFormBox boxLeft">
						<ak-form
							ref="formEl"
							v-loading="formLoading" element-loading-text="Loading..."
							:form-data="formState.formData"
							:type="formType"
							:dict="formState.dict"
							request-url="getFormContent"
							add-url="saveFormContent"
							edit-url="editFormContent"
							:before-submit="beforeSubmit"
							:close-app-submit="closeAppSubmit"
							:change-key-val="changeKeyVal"
							:anew-submit = "anewSubmit"
							:save-edit-form-info="saveEditFormInfo"
							:send-draft-submit= "sendDraftSubmit"
						/>
					</div>
				</td>
				<td valign="top" width="350">
					<RunFlowStep ref="runstep" :flow-key="props.flowLogInfo.flowkeys" :current-progress="currentProgress"  @updatelist="drawerBeforeClose" />
				</td>
			</tr>
		</table>
	</el-drawer>
</template>
<style  lang='scss' scoped>
.tableFlowBox{
	width: 100%;
	height: 100%;
	// background-color: #000000;
	.drawerFormBox{
		width: 100%;
		height: 100%;
		// background-color: #ff0000;
	}
}
.boxLeft{
	padding: 0 10px 0 15px;
	overflow: hidden;
	overflow-y: auto;
}
.flowBox{
	padding: 0 5px 0 10px;
}
.boxRight{
	overflow: hidden;
	overflow-y: auto;
	border-left: 1px solid #EEEEEE;
}
.approvalBoard{
	padding: 5px 10px;
	background-color: #FFFFFF;
	border-top: 1px solid #EEEEEE;
	.juzhong{
		padding: 10px 0;
		text-align: center;
	}
	.appBoardTitle{
		padding: 5px 0 10px 0;
		display: block;
	}
}
</style>
<style  lang='scss'>

.drawerClass ::v-deep.el-drawer__header {
        font-size: 22px;
        text-align: center;
        margin-bottom: 0px;
        padding: 0;
        .el-drawer__close-btn{
            background-color: rgb(255, 77, 79);
            color: white;
        }
    }
    ::v-deep .el-drawer__body {
        padding: 0px;
    }
    .details {
        width: 80%;
        margin-right: 0px;
        margin-left: 20%;
        box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
    }
.drawerBody{
	padding: 20px;
	
}

</style>