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

<!--
@ 作者: 秦东
@ 时间: 2024-07-20 15:31:12
@ 备注: 应用设置
-->
<script lang='ts' setup>
import { SearchForm,customerFormCont,customerFormConfig } from "@/api/DesignForm/type";
import { customerFormGroupList,editFormGroupState,createApp,gainAppEditPsge } from '@/api/DesignForm/requestapi'

import { Search } from '@element-plus/icons-vue'

//引入页面
import AppCardPage from "@/views/sysworkflow/lowcodepage/appCardPage.vue"
import AppListPage from "@/views/sysworkflow/lowcodepage/appListPage.vue"
import LowCodeFormPage from "@/views/sysworkflow/lowcodepage/lowCodeFormPage.vue"
import LowCodeFormGroupPage from "@/views/sysworkflow/lowcodepage/lowCodeFormGroupPage.vue"
import DesignAPPpage from "@/views/sysworkflow/lowcodepage/appPage/index.vue"	//自建应用


const contbody = ref()	//实例化内容容器
const carPage = ref()
const appListPage = ref()
const appGroup = ref("1")
const page = ref<number>(1)			//页码
const pageSize = ref<number>(12000)	//每页显示几个
const pageTotal = ref<number>(0)	//总记录数
const groupFormList = ref<any[]>([]) //记录数组
const drawerWith = ref();	//抽屉宽度
const appPageShow = ref(false)
const addFormGroupIsShow = ref(false)
const formKey = ref<string>("") //表单标识
const formGroupKey = ref<string>("") //表单标识
const drawerGroupWith = ref();	//编辑表单时抽屉宽度
const groupKey = ref<string>("") //分组标识
const squareUrl = ref<string>('https://cube.elemecdn.com/9/c2/f0ee8a3c7c9638a54940382568c9dpng.png')

const searchQuery = reactive({
	page:1,
	pagesize:20,
	searchWork:""
})
const isClick = ref(1)
/**
@ 作者: 秦东
@ 时间: 2024-03-21 09:30:27
@ 功能: 获取表单分组
*/
const gainFormGroup = () => {
	let sendInfo = {
		page:page.value,
		pagesize:pageSize.value,
		state:1
	}
	customerFormGroupList(sendInfo)
		.then((data) =>{
			
			pageTotal.value = data.data.total
			// pageTotal.value = 400
			groupFormList.value = data.data.list
			if(data.data.list&&data.data.list.length > 0){
				let otherGroup = true
				data.data.list.forEach((item,index)=>{
					if(item.isTrue){
						appGroup.value = item.idStr.toString()
						otherGroup = false
					}
				})
				if(otherGroup){
					let lengNum = data.data.list.length
					data.data.list.forEach((item,index)=>{
						if(lengNum > 1){
							if(index == 1){
								appGroup.value = item.idStr.toString()
							}
						}else{
							if(index == 0){
								appGroup.value = item.idStr.toString()
							}
						}
						
					})
				}
			}			
		})
		
}
const handleClick = (val:any) => {
	// console.log("换挡",val,appGroup)
}

/**
@ 作者: 秦东
@ 时间: 2024-07-22 08:50:03
@ 功能: 改变视图展示模式
*/
const viewChannel = (val:number) =>{
	isClick.value = val;
}

onMounted(()=>{
	drawerWith.value = contbody.value?.clientWidth
	gainFormGroup()
})
/**
@ 作者: 秦东
@ 时间: 2024-07-20 16:19:45
@ 功能: 获取表单数据
*/
const handleCurrentChange = (val:any) => {}

/**
@ 作者: 秦东
@ 时间: 2024-07-22 10:08:33
@ 功能: 搜索
*/
const searchSub = () =>{
	if(isClick.value == 1){
		carPage.value.getFormAppList(searchQuery)
	}else{
		appListPage.value.getFormAppList(searchQuery)
	}
}
/**
@ 作者: 秦东
@ 时间: 2024-04-01 14:27:51
@ 功能: 获取容器宽度
*/
const getRongQiAttr = () => {
	drawerWith.value = contbody.value?.clientWidth
}

/**
@ 作者: 秦东
@ 时间: 2024-03-09 09:06:32
@ 功能: 选择添加项目
*/
const handleCommand = (command: string,groupId: string) => {
	// ElMessage(`click on item ${command}`)
	if (command == "addForm"){
		formKey.value = ""
		formGroupKey.value = groupId
		// addFormIsShow.value = true
		drawerWith.value = contbody.value?.clientWidth
		addFormIsShow.value = true;
	}else if(command == "addFormApp"){	
		
		drawerWith.value = contbody.value?.clientWidth
		let sendInfo = {
			id:groupId.toString()
		}
		createApp(sendInfo)
			.then((data)=>{
				formKey.value = data.data.uuid
				groupKey.value = groupId.toString()
				nextTick(() =>{
					appPageShow.value = true
				});
			})
			.finally(() => {
				
			})
		
	}else{
		addFormGroupIsShow.value = true
		drawerGroupWith.value = 400
	}
}
/**
@ 作者: 秦东
@ 时间: 2024-03-21 13:53:29
@ 功能: 编辑分组
*/
const editFormGroup = (id: string) =>{
	groupKey.value = id
	addFormGroupIsShow.value = true
	drawerGroupWith.value = 400
}
/**
@ 作者: 秦东
@ 时间: 2024-03-09 09:06:44
@ 功能: 刷新页面
*/
const refreshPage = (pageType:string) =>{
	if(pageType == "formPage"){
		addFormIsShow.value = false;
	}else{
		addFormGroupIsShow.value = false;
	}
	gainFormGroup()
}

/**
@ 作者: 秦东
@ 时间: 2024-03-21 14:22:58
@ 功能: 改变分组状态
*/
const eidtGroupStatus = (id: string, state: number) => {

	ElMessageBox.confirm(
		'您确定要删除此分组吗？一经删除！数据将不可恢复！请慎重执行此操作！！！',
		'温馨提示',
		{
			confirmButtonText: '确定',
			cancelButtonText: '取消',
			type: 'warning',
		}
	)
	.then(() => {
		let sendInfo = {
			id: id.toString(),
			status: state
		}
		editFormGroupState(sendInfo)
			.then((data) =>{
				ElMessageBox.alert(data.msg, '温馨提示！', {
						confirmButtonText: '确定',
						callback: (action: Action) => {
							gainFormGroup()
						}
				});
			})
	})

	
}
</script>
<template>

	<div ref="contbody" class="tab-box">
		<el-tabs v-model="appGroup" class="demo-tabs" @tab-click="handleClick">
			<el-tab-pane v-for="item in groupFormList" :key="item.idStr" :label="item.title" :name="item.idStr"></el-tab-pane>
			
		</el-tabs>

		<div class="appSubButton">
			<el-input
					v-model="searchQuery.searchWork"
					style="max-width: 150px;margin: 15px 10px 15px 0;"
					placeholder="请输入名称"
					class="input-with-select"
					clearable
				>
				<template #append>
					<el-button :icon="Search" @click="searchSub()" />
				</template>
			</el-input>
			<el-button-group class="butGroup">
				<el-button class="fa fa-object-group"  :color="isClick==1?'#a0cfff':''"  @click="viewChannel(1)"   />
				<el-button class="fa fa-table" :color="isClick!=1?'#a0cfff':''" @click="viewChannel(2)" />
				
				<el-dropdown>
					<el-button class="fa fa-reorder leftLink" />
					<template #dropdown>
						<el-dropdown-item @click="handleCommand('addFormGroup',appGroup)" >新增分组</el-dropdown-item>
						<el-dropdown-item @click="handleCommand('addForm',appGroup)" style="display:none" >添加表单</el-dropdown-item>
						<el-dropdown-item @click="handleCommand('addFormApp',appGroup)" >添加应用</el-dropdown-item>
						<el-dropdown-item @click="editFormGroup(appGroup)" divided>编辑</el-dropdown-item>
						<el-dropdown-item @click="eidtGroupStatus(appGroup,3)">删除</el-dropdown-item>
					</template>
				</el-dropdown>
			</el-button-group>
		</div>
	</div>
	
	<div class="app-container">
        <AppCardPage ref="carPage" v-if="isClick==1" :app-group="appGroup" :search-query="searchQuery" :drawer-with="drawerWith" @getRongQiAttr="getRongQiAttr" />
		<AppListPage ref="appListPage" v-else :app-group="appGroup" :search-query="searchQuery" :drawer-with="drawerWith" @getRongQiAttr="getRongQiAttr" />
	</div>
	<DesignAPPpage v-model:is-show="appPageShow"  :drawer-with="drawerWith" v-model:form-key="formKey" :group-key="groupKey" @refreshPage="refreshPage"  />
			
		<LowCodeFormPage v-if="addFormIsShow" :drawer-with="drawerWith" v-model:form-key="formKey" :form-group-key="formGroupKey" @refreshPage="refreshPage" />
		<LowCodeFormGroupPage v-if="addFormGroupIsShow" :drawer-with="drawerGroupWith"  :group-key="groupKey" @refreshPage="refreshPage" />
</template>
<style  lang='scss' scoped>
.app-container {
    height: calc(100% - 125px);
    width: calc(100% - 40px);
}

.tab-box{
    margin: 20px;
    height: 63px;
    background: #fff;
    border-radius: 5px;
    padding: 0 20px;
	display: flex;
	justify-content: space-between;
	.appSubButton{
		display: flex;
		justify-content: space-between;
		.butGroup{
			margin-top: 15px;
		}
		.leftLink{
			border-left : 1px solid #ccc;
		}
	}
	::v-deep(.el-tabs){
		height: 63px;
		width: calc(100% - 300px);
	}
	
	::v-deep(.el-tabs__nav){
		height: 63px;
		font-size: 16px;
	}
	::v-deep(.el-tabs__item){
		margin-top: 15px;
		font-size: 16px;
	}
	::v-deep(.el-tabs__nav-prev){
		line-height:0px;
		margin-top:30px;
	}
	::v-deep(.el-tabs__nav-next){
		line-height:0px;
		margin-top:30px;
	}
}

.el-dropdown-link{
	font-size:30px;
	margin-top: 20px;
	margin-left: 10px;
}
</style>