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"


const contbody = ref()	//实例化内容容器
const carPage = 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 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){
				data.data.list.forEach((item,index)=>{
					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)
	}
}
/**
@ 作者: 秦东
@ 时间: 2024-04-01 14:27:51
@ 功能: 获取容器宽度
*/
const getRongQiAttr = () => {
	drawerWith.value = contbody.value?.clientWidth
}
</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>
</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>