aizuda-web-vue3/src/views/flow/group/index.vue

<template>
	<el-container class="flex flex-v flex-align-center group-container">
		<div class="ApprovalList">
			<el-header class="flex flex-align-center" style="width: 100%; padding: 0px">
				<div style="width: 100%">
					<el-row style="width: 100%" justify="space-between">
						<el-col :span="4"><el-input v-model="keyword" placeholder="搜索" clearable @blur="searchProcess" /></el-col>
						<el-col :span="8">
							<template v-if="!sortFlag">
								<el-space wrap><el-button @click="addNewGroupEv">新建分组</el-button></el-space>
								<el-space wrap><el-button @click="changeComponent">分组排序</el-button></el-space>
							</template>
							<template v-else>
								<el-space wrap><el-button type="primary" plain :icon="CircleCheck" @click="changeComponent('sort')">完 成</el-button></el-space>
								<el-space wrap><el-button type="info" plain @click="changeComponent">取 消</el-button></el-space>
							</template>
							<el-space wrap
								><el-button :type="sortFlag ? 'info' : 'primary'" :icon="Plus" :disabled="sortFlag" @click="createProcessEv"
									>创建审批</el-button
								></el-space
							>
						</el-col>
					</el-row>
				</div>
			</el-header>
			<div>
				<component :is="typeComponentMap[pageType]" ref="dyncComponent"></component>
			</div>
		</div>
	</el-container>
</template>
<script lang="tsx" setup name="flow_group">
import { ref } from 'vue'
import { Plus, CircleCheck } from '@element-plus/icons-vue'
import SortGroup from './components/sortGroup'
import ListGroup from './components/listGroup'
import flowGroup from '@/api/flow/group'
import router from '@/router'

const sortFlag = ref(false)
const dyncComponent = ref() // 实例化子组件
const typeComponentMap = {
	1: ListGroup,
	2: SortGroup
}
const pageType = ref(1)
const keyword = ref('')

const changeComponent: (sort) => void = async sort => {
	sortFlag.value = !sortFlag.value
	if (pageType.value === 1) {
		pageType.value = 2
		return
	}
	if (pageType.value === 2) {
		if (sort) {
			const data = dyncComponent.value.exportSortData()
			await flowGroup.flowGroupSortApi(data)
		}
		pageType.value = 1
	}
}

const addNewGroupEv = () => {
	dyncComponent.value.showAddInput()
}

// 调用子组件的方法
const searchProcess = async () => {
	if (!keyword.value) return
	await dyncComponent.value.searchProcessEv({ keyword: keyword.value })
}

const createProcessEv = () => {
	router.push('/flow/create')
}
</script>
<style scoped lang="scss">
.group-container {
	background-color: var(--el-bg-color);
	overflow-y: scroll;
	padding-bottom: 15px;
}
.ApprovalList {
	width: 100%;
	max-width: 1000px;
}
</style>