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

<!--
@ 作者: 秦东
@ 时间: 2024-03-06 11:43:49
@ 备注: 表单列表
-->
<script lang='ts' setup>
import { SearchForm,customerFormCont,customerFormConfig } from "@/api/DesignForm/type";
import { getCustomerFormList,getProductionMarkForm,editProductionFormStatus } from '@/api/DesignForm/requestapi'
/**
@ 作者: 秦东
@ 时间: 2024-03-09 08:59:37
@ 功能: 引入组件页面
*/
import LowCodeFormPage from "@/views/sysworkflow/lowcodepage/lowCodeFormPage.vue"
import LowCodeFormGroupPage from "@/views/sysworkflow/lowcodepage/lowCodeFormGroupPage.vue"

const contbody = ref()	//实例化内容容器
const addFormIsShow = ref(false)
const addFormGroupIsShow = ref(false)
const drawerWith = ref();	//编辑表单时抽屉宽度
const formKey = ref<string>("") //表单标识
const groupKey = ref<string>("") //分组标识

/**
@ 作者: 秦东
@ 时间: 2024-03-09 09:06:32
@ 功能: 选择添加项目
*/
const handleCommand = (command: string) => {
	// ElMessage(`click on item ${command}`)
	if (command == "addForm"){
		formKey.value = ""
		// addFormIsShow.value = true
		drawerWith.value = contbody.value?.clientWidth
		addFormIsShow.value = true;
		
	}else{
		addFormGroupIsShow.value = true
		drawerWith.value = 400
	}
}
/**
@ 作者: 秦东
@ 时间: 2024-03-09 09:06:44
@ 功能: 刷新页面
*/
const refreshPage = (pageType:string) =>{
	if(pageType == "formPage"){
		addFormIsShow.value = false;
	}else{
		addFormGroupIsShow.value = false;
	}
}

</script>
<template>
	<div ref="contbody" class="box_content">
		
		<el-affix :offset="100" class="affix_box">
			<el-dropdown  @command="handleCommand">
				<el-button type="primary" class="fa fa-plus" circle ></el-button>
				<template #dropdown>
					<el-dropdown-menu>
						<el-dropdown-item command="addForm">创建新表单</el-dropdown-item>
          				<el-dropdown-item command="addFormGroup">创建表单分组</el-dropdown-item>
					</el-dropdown-menu>
				</template>
			</el-dropdown>
		</el-affix>


		<LowCodeFormPage v-if="addFormIsShow" :drawer-with="drawerWith" v-model:form-key="formKey" @refreshPage="refreshPage" />
		<LowCodeFormGroupPage v-if="addFormGroupIsShow" :drawer-with="drawerWith"  :group-key="groupKey" @refreshPage="refreshPage" />



			
		
	</div>
</template>
<style  lang='scss' scoped>
.box_content{
	width: 100%;
	height: calc(100vh - 90px);
	overflow: hidden;
	overflow-y: auto;
}
.affix_box{
	margin-left: 10px;
}

</style>