hxgksystemapp/src/views/sysworkflow/lowcodepage/lowCodeFormPage.vue

<!--
@ 作者: 秦东
@ 时间: 2024-03-09 08:58:23
@ 备注: 编辑表单页面
-->
<script lang='ts' setup>
import { useRoute, useRouter } from 'vue-router'
import { formStruct } from '@/api/DesignForm/types'
import { customerFormConfig } from "@/api/DesignForm/type";
import { getProductionMarkForm } from '@/api/DesignForm/requestapi'
// import PageDesign from "@/views/sysworkflow/lowcodepage/pageDesign.vue"
import PageDesignEs from "@/views/sysworkflow/lowcodepage/pageDesignes.vue"
import WorkFlow from "@/views/sysworkflow/lowcodepage/workFlow.vue"
import PageList from "@/views/sysworkflow/lowcodepage/pageList.vue"
import PageLists from "@/views/sysworkflow/lowcodepage/pageshiyan/pageLists.vue"



const props = defineProps({
	drawerWith:{
		type:Number,
		default:true
	},
	formKey:{
		type:String,
		default:""
	},
	formGroupKey:{
		type:String,
		default:""
	}
});
const formConfigCont = reactive<customerFormConfig>({
	formName:"",
	formlogo:""
})
const loading = ref(false)
const pageDesignIsWrite = ref(true);
const flowIsWrite = ref(true);
const emits = defineEmits(["refreshPage"]);
const drawerOpenOrClose = ref(true);
const tabsActive = ref(1);
const creetTabsActive = ref(1);

const route: any = useRoute().query || {}
const state = reactive<formStruct>({
    formData: {
		list: [],
		form: {
			size: 'default',
			name:'',
			formName: formConfigCont.formName
		},
		config: {
			groupKey:props.formGroupKey
		},
		styles:{
			divStyle:{},
			labelStyle:{},
			inputStyle:{}
		},
		purview:[]
    },
    editor: {},
    loading: false,
    formDataPreview: {},
    previewVisible: false, // 预览窗口
    designType: route.type, // 当前页面设计类型，有效值search
    formDict: {},
    formOtherData: {
		source: route.source || '',
		formName: formConfigCont.formName
    }
})
//表单ID
const formKeyStr =  computed({
	get() {
		return props.formKey
	},
	set(val: formStruct) {
		emits('update:formKey', val)
	}
});
//表单版本ID
const formVersion = ref<string>("")

const judgeFormIsEdit = (val:boolean,wval:boolean) => {
	pageDesignIsWrite.value = val;
	flowIsWrite.value = wval
}

const handleClick = (tab: TabsPaneContext, event: Event) =>{
	console.log("选项卡--->",creetTabsActive.value,tab.paneName, event)
	switch (tab.paneName) {
		case 2:
			if (creetTabsActive.value != 2){
				if(PreOperation()){
					creetTabsActive.value = tab.paneName
				}
			}
			break;
		case 3:
			if (creetTabsActive.value != 3){
				if(PreOperation()){
					creetTabsActive.value = tab.paneName
				}
			}
			break;
		case 4:
			if (creetTabsActive.value != 4){
				if(PreOperation()){
					creetTabsActive.value = tab.paneName
				}
			}
			break;
		default:
			tabsActive.value = 1
			creetTabsActive.value = 1
			break;
	}
}
/**
@ 作者: 秦东
@ 时间: 2024-03-09 13:42:24
@ 功能: 判断tabs要执行得前置操作
*/
const PreOperation = () =>{
	switch (creetTabsActive.value) {
		case 2:
			if(flowIsWrite.value){
				ElMessageBox.alert('你设置的流程还未保存！', '温馨提示！', {
					confirmButtonText: 'OK',
					callback: (action: Action) => {
						tabsActive.value = 2
						creetTabsActive.value = 2
					}
				});
				flowIsWrite.value = true
			}else{
				creetTabsActive.value = tabsActive.value
				console.log("选项卡-1-->",tabsActive.value,creetTabsActive.value)
			}
			return true;
			break;
		case 3:
			return true;
			break;
		case 4:
			return true;
			break;
		default:
			if(pageDesignIsWrite.value){
				ElMessageBox.alert('你设置的表单还未保存！', '温馨提示！', {
					confirmButtonText: 'OK',
					callback: (action: Action) => {
						tabsActive.value = 1
						creetTabsActive.value = 1
					}
				});
				pageDesignIsWrite.value = true
			}else{
				creetTabsActive.value = tabsActive.value
				tabsActive.value = 1
			}
			return true;
			break;
	}
}
const judgeFlowIsEdit = (val:boolean) => {
	flowIsWrite.value = val;
	// creetTabsActive.value = 2
}


const closeFormPage = () => {
	emits("refreshPage","formPage");
	
}
onBeforeMount(() => {
	getProductionMarkForm()
		.then(({data})=>{
			formConfigCont.formlogo = data.formlogo
			formConfigCont.formName = data.formname
			state.formData.form.name = data.formlogo
			state.formData.form.formName = data.formname
			state.formOtherData.formName = data.formname
		})
		.finally(()=>{
			
		})
})
/**
@ 作者: 秦东
@ 时间: 2024-03-11 08:44:43
@ 功能: 执行下一个窗口
*/
const runNextWindows = (val:number) => {
	creetTabsActive.value = val
	tabsActive.value = val
}
onMounted(()=>{
	// formKeyStr.value = "13"
})
</script>
<template>
	<div  class="drawerClass">
		
		<el-drawer  v-model="drawerOpenOrClose" title="设置/编辑自定义表单" :with-header="false" :close-on-click-modal="false" :close-on-press-escape="false" :destroy-on-close="true" :size="props.drawerWith">
			<el-tabs v-model="tabsActive" @tab-click="handleClick" :stretch="true" class="tabsMain">
				<el-tab-pane label="① 页面设计" :name="1">
				</el-tab-pane>
				<el-tab-pane label="② 流程设计" :name="2">
				</el-tab-pane>
				<el-tab-pane label="③ 列表设计" :name="3">
				</el-tab-pane>
				<el-tab-pane label="④ 页面设置" :name="4">
					{{creetTabsActive}} ==》 {{tabsActive}}
				</el-tab-pane>
			</el-tabs>
			<PageDesignEs v-if="tabsActive==1" v-model:state="state"  v-model:form-key="formKeyStr" v-model:form-version="formVersion" :formconfigcont="formConfigCont" @judgeFormIsEdit="judgeFormIsEdit" @runNextWindows="runNextWindows" @closeFormPage="closeFormPage" />
			<WorkFlow v-if="tabsActive==2" v-model:state="state"  v-model:form-key="formKeyStr" v-model:form-version="formVersion" @judgeFlowIsEdit="judgeFlowIsEdit" @runNextWindows="runNextWindows" @closeFormPage="closeFormPage" />
			<PageList v-if="tabsActive==3" v-model:state="state"  v-model:form-key="formKeyStr" v-model:form-version="formVersion" :tabs-active="tabsActive" />
		</el-drawer>
	</div>
</template>
<style  lang='scss' scoped>
.tabsMain{
	::v-deep .el-tabs__header{
		margin: 0px;
	}
	::v-deep .el-tabs__nav-scroll{
		width: 50%!important;
		margin: 0 auto!important;
	}

	::v-deep .el-drawer__body{
		padding: 0;
	}
}
 
</style>