appFormLowcode/src/views/formTable/pageInfo.vue

<!--
@ 作者: 秦东
@ 时间: 2024-11-13 11:10:41
@ 备注: 自定义表单显示页面
-->
<script lang='ts' setup>
import { gainTaskFormInfo,gainEditDataLog,afreshRunWorkflow } from '@/api/lowCode/taskapi/management'
import{ json2string,string2json,stringToObj } from '@/utils/lowCode/form'
import { judgeSubmitCancel } from '@/api/lowCode/form/index'

import { afreshSubmitButton,editFormCont,draftSubmitButton,submitButtonEs,submitButton } from '@/utils/lowCode/const'

const props = defineProps({
	isShow:{
		type:Boolean,
		default:false,
	},
    appInfo:{
		type:Object,
		default(){
			return {}
		}
	},
    appPageInfo:{
		type:Object,
		default(){
			return {}
		}
	},
    stateForm:{
		type:Object,
		default(){
			return {}
		}
	},
	appFlowInfo:{
		type:Object,
		default(){
			return {}
		}
	},
    formTableStr:{
        type:String,
		default:"",
    }
});
const emits = defineEmits(["update:isShow","searchData"])
const openPage =computed({
	get() {
        return props.isShow 
	},
	set(val: any) {
		emits("update:isShow",val)
	}
});
const formDesign = ref<any>();
const flowLogPage = ref<any>(); //流程与历史记录
const pageLog = ref<any[]>([]); //历史记录
const loadPage = ref(false)



/**
@ 作者: 秦东
@ 时间: 2024-11-17 14:52:44
@ 功能: 关闭表单
*/
const handleClose = () =>{
    formDesign.value.resetFields()
    openPage.value = false
    emits("update:isShow",false)
}

watch(() => openPage.value,(val:boolean) => {
    console.log("前置数据2",val,props.stateForm.type,props.appPageInfo)
    if(val) {
        nextTick(() =>{
                // console.log("前置数据3",props.appPageInfo.masters_key)
                if(props.appPageInfo.masters_key&&props.appPageInfo.masters_key != ''&&props.appPageInfo.masters_key!=null){
                    loadPage.value = true
                
                    gainTaskFormInfo({ id: props.appPageInfo.masters_key })
                        .then(({ data }) => {
                            console.log("获取自定义表单内容---->", data, data.structure);
                            props.stateForm.formData = stringToObj(data.structure.mastesform);
                            props.stateForm.dict = string2json(data.structure.dict);
                            if(props.stateForm.type != 3){
                                judgeSubmitCancel({ name: data.structure.mastesformjson }).then((data: any) => {
                                    if (props.stateForm.type == 1) {    
                                        // console.log("添加按钮---------------->",props.stateForm.type,submitButtonEs);
                                        props.stateForm.formData.list.push(submitButton);
                                    } else if (props.stateForm.type == 2) {
                                        props.stateForm.formData.list.push(submitButtonEs);
                                    } else if (props.stateForm.type == 4) {
                                        props.stateForm.formData.list.push(afreshSubmitButton);
                                    } else if (props.stateForm.type == 5) {
                                        props.stateForm.formData.list.push(afreshSubmitButton);
                                    } else if (props.stateForm.type == 6) {
                                        props.stateForm.formData.list.push(editFormCont);
                                    }
                                })
                            }
                            nextTick(() => {
                                // console.log("获取自定义表单内容-1111-->", props.stateForm, data.tableData);
                                if(props.stateForm.type != 1){
                                    formDesign.value.setValue(data.tableData);
                                }
                            });
                        })
                        .finally(() => {
                            loadPage.value = false
                            if(props.stateForm.type != 1){
                                gainEditDataLog({ id: props.appPageInfo.masters_key }).then(({ data }) => {
                                    console.log("获取修改记录-1111-->",data)
                                    pageLog.value = data;
                                });
                            }
                        });
                }
                // formDesign.value.setValue(props.appPageInfo);
            })
    }else{
        props.stateForm.formData = {
            list: [],
                form: {},
                config: {},
                powerstr: {},
        }
        // props.stateForm =   {
        //     type: 1, // 1新增；2修改；3查看（表单模式） 
        //     formData: {
        //         list: [],
        //         form: {},
        //         config: {},
        //         powerstr: {},
        //     },
        //     dict: {},
        //     appKey: props.appInfo.appKey,
        //     appId: props.appInfo.appId,
        //     taskTitle: props.appInfo.taskTitle,
        //     taskId:props.appInfo.taskId,
        //     taskKey:props.appInfo.taskKey,
        //     flowIsTrue:false,
        //     loading: true,
        // }
    }
},{deep: true})

/**
@ 作者: 秦东
@ 时间: 2024-04-07 10:55:34
@ 功能: 表单动作回调
*/
const afterSubmit = (type: string,val?:any) => {
  console.log("表单提交成功",type)

  switch (type) {
    case "success":
        emits("searchData")
        handleClose()
        break;
    case "runFlow":
        flowLogPage.value.runWorkFlow(val)
        emits("searchData")
        handleClose()
        break
    case "reapplyFlow":
        flowLogPage.value.reapplyWorkFlow(val)
        
        handleClose()
        emits("searchData")
        break;
    case "draftRunFlow":
        flowLogPage.value.rundraftWorkFlow(val)
        handleClose()
        emits("searchData")
        break;
    case "closePage":
        emits("searchData")
        handleClose()
        break;
    default:
  }
};
</script>
<template>
    <div class="newDrawerCont">
        <el-drawer
            v-model="openPage"
            :title="props.appInfo.taskTitle"
            :before-close="handleClose"
            size="100%"
        >
            <el-scrollbar v-loading="loadPage" ref="taskScrollbar" class="appFormTableScrollbarCss" >
                <FormDesign 
                    ref="formDesign"
                    v-if="openPage"
                    :type="stateForm.type"
                    :form-data="stateForm.formData"
                    :is-work-flow="stateForm.flowIsTrue"
                    :app-info="props.appInfo"
                    :after-submit="afterSubmit"
                />
                <FlowAndLog ref="flowLogPage" v-if="openPage" :types="props.stateForm.type" :app-flow-info="props.appFlowInfo" :app-info="props.appInfo" :log-list="pageLog" :app-page-info="props.appPageInfo" :state-form="props.stateForm" />
                <!-- {{stateForm.flowIsTrue}}<br>
                {{pageLog}} -->
                <!-- {{ props.appInfo }}<br><br><br><br>
                {{ props.appPageInfo }}<br><br><br><br>
                {{stateForm}}<br><br><br><br>
                {{appFlowInfo}} -->
            </el-scrollbar>
        </el-drawer>
    </div>
</template>
<style  lang='scss' scoped>
.newDrawerCont{
    :deep .el-drawer__header{
        padding: 10px 5px;
        margin-bottom: 0px;
    }
    :deep .el-drawer__body{
        padding: 0px;
    }
    .appFormTableScrollbarCss{
        width: 100%;
        padding: 0px 10px 0 10px;
        height: calc(100vh - 45px);
    }
}
</style>