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

<template>
	<div class="create-approval">
		<div class="create-approval-header flex flex_align-center">
			<div class="create-approval-header-back" v-if="false">
				<el-icon :size="18"><ArrowLeft /></el-icon>
			</div>
			<div class="create-approval-header-left-zh">
				<div class="create-approval-header-name">{{ flowName }}</div>
				<div class="create-approval-header-time" v-if="false">最近保存：6 分钟前</div>
			</div>
			<div class="create-approval-header-tab-list">
				<div
					v-for="(item, idx) in componentsArr"
					:key="idx"
					class="create-approval-header-tab-item"
					:class="[item.label === activeName ? 'active' : '']"
					@click="activeComponent(item)"
				>
					<span class="create-approval-header-tab-counter">{{ idx + 1 }}</span>
					<span>{{ item.label }}</span>
				</div>
			</div>
			<div class="create-approval-header-right">
				<el-button type="primary" @click="submitHandler">发布</el-button>
			</div>
		</div>
		<div class="create-approval-main">
			<component :is="currentComponent" ref="dyncComponent" />
		</div>
	</div>
</template>

<script setup name="flow_create">
import { computed, ref } from 'vue'
import { storeToRefs } from 'pinia'
import useFlowStore from '@/store/modules/flow'
import BasicInfoTab from './components/BasicInfo.vue'
import ExtendSetTab from './components/ExtendSet.vue'
import FlowDesignTab from './components/FlowDesign.vue'
import FormDesignTab from './components/FormDesign.vue'
import { ElMessage } from 'element-plus'
import { useRoute } from 'vue-router'
const route = useRoute()
const flowStore = useFlowStore()
const { flowName, flowProcessId } = storeToRefs(flowStore)
const dyncComponent = ref() // 实例化子组件
const componentsArr = [
	{
		component: BasicInfoTab,
		label: '基础信息',
		name: '基础信息'
		// ref: 'basicInfoRef'
	},
	{
		component: FormDesignTab,
		label: '表单设计',
		name: '表单设计'
		// ref: 'formDesignRef'
	},
	{
		component: FlowDesignTab,
		label: '流程设计',
		name: '流程设计'
		// ref: 'flowDesignRef'
	},
	{
		component: ExtendSetTab,
		label: '扩展设置',
		name: '扩展设置'
		// ref: 'extendSetRef'
	}
]
const activeName = ref('基础信息')

const submitHandler = () => {
	// 基础信息
	// 表单设计
	// 流程设计
	if (activeName.value === '流程设计') {
		dyncComponent.value.validate().then(res => {
			dyncComponent.value.saveDesign(res)
		})
	}
	// 扩展设置
}

const activeComponent = item => {
	if (!flowProcessId.value && JSON.stringify(queryObj.value) === '{}') {
		return ElMessage({
			message: '请先保存基础信息',
			type: 'error'
		})
	}
	activeName.value = item.label
}

const currentComponent = computed(() => {
	return componentsArr.find(item => item.label === activeName.value)?.component
})
const queryObj = computed(() => route.query)
</script>

<style scoped lang="scss">
.create-approval {
	height: 100%;
	min-width: 1200px;
	min-height: 600px;
	overflow: auto;

	&-header {
		justify-content: flex-start;
		height: 64px;
		z-index: 12;
		position: relative;
		box-shadow: 0 1px 6px 0 rgba(0, 0, 0, 0.06);
		padding-left: 16px;
		padding-right: 20px;

		&-back {
			display: flex;
			justify-content: flex-start;
			align-items: center;
			height: 100%;
			margin-right: 15px;
		}

		&-left-zh {
			width: calc(50% - 316.5px);
			min-width: 248px;
		}

		&-name {
			font-weight: 500;
			font-size: 16px;
			white-space: nowrap;
			cursor: pointer;
			width: -webkit-fit-content;
			width: -moz-fit-content;
			width: fit-content;
			max-width: 100%;
			height: 24px;
			overflow: hidden;
			text-overflow: ellipsis;
		}

		&-time {
			width: 100%;
			height: 20px;
			line-height: 20px;
			font-size: 12px;
			color: #8f959e;
			overflow: hidden;
			white-space: nowrap;
			text-overflow: ellipsis;
		}

		&-tab-list {
			margin-left: 10px;
			flex-shrink: 0;
			display: flex;
			justify-content: center;
		}

		&-tab-item {
			font-family: PingFang SC, Microsoft YaHei;
			font-size: 18px;
			line-height: 28px;
			color: #646a73;
			margin-right: 42px;
			padding: 18px 0;
			border-bottom: 2px solid transparent;
			cursor: pointer;

			&.active {
				// var(--el-color-primary);
				border-bottom-color: var(--el-color-primary);
				color: var(--el-color-primary);
				font-weight: 500;

				.create-approval-header-tab-counter {
					border-color: var(--el-color-primary);
					background-color: var(--el-color-primary);
					color: var(--el-color-white);
					font-weight: 400;
				}
			}
		}

		&-tab-counter {
			display: inline-block;
			margin-right: 6px;
			width: 24px;
			height: 24px;
			border-radius: 50%;
			border: 1px solid #646a73;
			font-size: 16px;
			line-height: 22px;
			text-align: center;
		}

		&-right {
			flex: 1 1;
			flex-shrink: 0;
			display: flex;
			justify-content: flex-end;
			align-items: center;
			position: relative;
			height: 100%;
			width: -webkit-fit-content;
			width: -moz-fit-content;
			width: fit-content;
		}
	}

	&-main {
		height: calc(100% - 64px);
	}
}
</style>