ShutongInterconnectedChemicalCloudPlatform/src/views/sysworkflow/lowcodepage/appPage/createAppFormPage.vue

<!--
@ 作者: 秦东
@ 时间: 2024-05-07 11:26:40
@ 备注: 编辑表单
-->
<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 PageForm from "@/views/sysworkflow/lowcodepage/appPage/appPageForm/pageForm.vue"
import PageFlow from "@/views/sysworkflow/lowcodepage/appPage/appPageForm/pageFlow.vue"
import PageList from "@/views/sysworkflow/lowcodepage/appPage/appPageForm/pageList.vue"
const props = defineProps({
	appCont:{
		type:Object,
		default(){
			return {}
		}
	},
	isShow:{
		type: Boolean,
		default: false,
	},
	isNew:{
		type: Boolean,
		default: false,
	},
	drawerWith:{
		type:Number,
		default:0
	},
	formKey:{
		type:String,
		default:""
	},
	groupKey:{
		type:String,
		default:""
	},
	menuId:{
		type:String,
		default:""
	},
	appPageKey:{
		type:String,
		default:""
	}
});
const emits = defineEmits(["update:isShow","update:isNew","update:appPageKey","gainSunAppContent","updateInit"]);
const tabsActive = ref(1)
const route: any = useRoute().query || {}
const formConfigCont = reactive<customerFormConfig>({
	formName:"",
	formlogo:"",
	signCode:""
})
const appPageKey =  computed({
	get() {
		return props.appPageKey
	},
	set(val: any) {
		emits('update:appPageKey', val)
	}
});
//表单版本ID
const formVersion = ref<string>("")
const formPageId = ref<string>("")
const state = reactive<formStruct>({
    formData: {
		list: [],
		form: {
			size: 'default',
			name:'',
			formName: formConfigCont.formName,
			dataTitle: []
		},
		config: {
			groupKey:props.groupKey
		},
		styles:{
			divStyle:{},
			labelStyle:{},
			inputStyle:{}
		},
		purview:[]
    },
    editor: {},
    loading: false,
    formDataPreview: {},
    previewVisible: false, // 预览窗口
    designType: route.type, // 当前页面设计类型，有效值search
    formDict: {},
    formOtherData: {
		source: route.source || '',
		formName: formConfigCont.formName
    }
})
const appPageInfo = ref(null)
/**
@ 作者: 秦东
@ 时间: 2024-05-07 15:11:24
@ 功能: 关闭页面
*/
const closeSavePageForm = () =>{
	emits("update:isShow",false)
	emits("gainSunAppContent")
	emits("updateInit")
	emits("update:isNew",false)
	// console.log("appPageInfo.value",appPageInfo.value)
	appPageInfo.value.gainTableForm()
}

onBeforeMount(() => {
	console.log("onBeforeMount",props.isNew)
	console.log("onBeforeMount--->appPageKey",props.appPageKey)
	let send = {
		types:3
	}
	if(props.isNew){
		props.appPageKey = ""
		state.formData.list= []
		formVersion.value = ""
		appPageKey.value = ""
		getProductionMarkForm(send)
			.then(({data})=>{
				formConfigCont.formlogo = data.formlogo
				formConfigCont.formName = data.formname
				formConfigCont.signCode = data.signCode
				state.formData.form.name = data.formlogo
				state.formData.form.formName = data.formname
				state.formOtherData.formName = data.formname
			})
			.finally(()=>{
				
			})
	}
	console.log("onBeforeMount",props.isNew)
	console.log("onBeforeMount--2->appPageKey",props.appPageKey)
	if(props.appPageKey == ""){
		getProductionMarkForm(send)
			.then(({data})=>{
				formConfigCont.formlogo = data.formlogo
				formConfigCont.formName = data.formname
				formConfigCont.signCode = data.signCode
				state.formData.form.name = data.formlogo
				state.formData.form.formName = data.formname
				state.formOtherData.formName = data.formname
			})
			.finally(()=>{
				
			})
	}
	console.log("state------------>",state)
})
</script>
<template>
	<el-drawer  v-model="props.isShow" title="设置/编辑自定义表单" :with-header="false" :close-on-click-modal="false" :close-on-press-escape="false" :destroy-on-close="true" :size="props.drawerWith">
		<div class="common-layout">
			<el-container>
				<el-header class="headerBox">
					<div class="headLeft">
						<el-space wrap>
							<el-avatar shape="square" :size="25" :src="props.appCont.appSvg" />
							<el-tooltip
								class="box-item"
								effect="dark"
								:content="props.appCont.appName"
								placement="bottom"
							>
								<el-text class="w-150px mb-2" truncated>{{ props.appCont.appName }}</el-text>
							</el-tooltip>
							<i class="fa fa-angle-right"></i>
							<el-tooltip
								class="box-item"
								effect="dark"
								:content="state.formData.form.formName"
								placement="bottom"
							>
								<el-text class="w-150px mb-2" truncated>{{ state.formData.form.formName }}</el-text>
							</el-tooltip>
						</el-space>
					</div>
					<div>
						<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-tabs>
					</div>
					<div class="headRight">
						<el-button type="danger" size="small" @click="closeSavePageForm" >关闭</el-button>
					</div>
				</el-header>
				<el-container>
					<PageForm ref="appPageInfo" v-if="tabsActive==1" :form-Key="props.formKey" :app-cont="props.appCont" :menu-id="menuId" :group-key="props.groupKey" v-model:state="state" v-model:form-version="formVersion" :formconfigcont="formConfigCont" v-model:app-page-key="appPageKey" />
					<PageFlow v-if="tabsActive==2" v-model:state="state" :form-Key="props.formKey" :app-cont="props.appCont" :menu-id="menuId" :group-key="props.groupKey"  v-model:app-page-key="appPageKey" v-model:form-version="formVersion"  />
					<PageList v-if="tabsActive==3" v-model:state="state" :form-Key="props.formKey" :app-cont="props.appCont" :menu-id="menuId" :group-key="props.groupKey" v-model:app-page-key="appPageKey" v-model:form-version="formVersion" />
				</el-container>
			</el-container>
		</div>
	</el-drawer>
</template>
<style  lang='scss' scoped>
.headerBox{
	padding: 0px;
	border-bottom: 2px solid #ECECEC;
	display: flex;
	align-items: center;
	justify-content: space-between;
	.headLeft{
		width: 300px;
		padding-left: 5px;
		span{
			max-width:100px;
		}
	}
	.headRight{
		width: 300px;
		text-align: right;
		padding-right: 5px;
	}
	.tabsMain{
		::v-deep .el-tabs__header{
			margin: 0px;
		}
		::v-deep .el-tabs__nav-scroll{
			margin: 0 auto!important;
		}

		::v-deep .el-drawer__body{
			padding: 0;
		}
	}
}

</style>