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

<!--
@ 作者: 秦东
@ 时间: 2023-11-24 08:50:26
@ 备注: 查看或操作工作流记录
-->
<script lang='ts' setup>
import {
    json2string,
    objToStringify,
    string2json,
    stringToObj
} from '@/utils/DesignForm/form'

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

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

// watch(()=>props.isshow,(val:any)=>{
// 	console.log("监听打开关闭",val)
// 	if(!val){
// 		emits("getmytodolist")
// 	}
// })
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 formType = computed(() => {
    // 带有参数id为编辑状态
    if (true) {
      return 2
    } else {
      return 1
    }
})





const formEl = ref()

const drawerBeforeClose = () => {
	console.log("监听打开关闭",false)
	emits("getmytodolist")
	emits("update:isshow", false);
	
}


onMounted(()=>{
	versiontitle.value = props.flowLogInfo.title
	console.log("props.flowLogInfo---4-------->",props.flowLogInfo)
	flowMap.value = JSON.parse(props.flowLogInfo.flowcont)
	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)
	nextTick(() => {
		console.log("res----------->", formEl.value)
		formEl.value.getData({ id: props.flowLogInfo.flowkeys})
	})
	
})
const changeKeyVal = (key:any,val:any,type:any,attribute:any) => {}
const afterSubmit = (type: string, res: any) => {}
const beforeSubmit = (params: any) => {}
const closeAppSubmit = () => {}
</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"
							:after-submit="afterSubmit"
							:close-app-submit="closeAppSubmit"
							:change-key-val="changeKeyVal"
						/>
						
					</div>
				</td>
				<td valign="top" width="350">
					<RunFlowStep :flow-key="props.flowLogInfo.flowkeys" :current-progress="currentProgress"   />
				</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>