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

<template>
	<div class="create-approval">
		<div class="create-approval-header flex flex_align-center">
			<div v-if="false" class="create-approval-header-back">
				<el-icon :size="18">
					<ArrowLeft />
				</el-icon>
			</div>
			<div class="create-approval-header-left-zh">
				<div class="create-approval-header-name">{{ processName }}</div>
				<div v-if="false" class="create-approval-header-time">最近保存：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 { useRoute, useRouter } from 'vue-router'
import process from '@/api/flow/process'
import useStore from '@/store'
import { ElMessage } from 'element-plus'
const { tagsView } = useStore()
const router = useRouter()
const route = useRoute()
const flowStore = useFlowStore()
const { categoryId, processId, processIcon, processKey, processName, remark, modelContent, processForm, processSetting } = 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 removeCurTab = () => {
	const _view = tagsView.visitedViews.find(v => v.path === '/flow_create/index')
	if (_view)
		tagsView.delView(_view).then(res => {
			const latestView = res.visitedViews.slice(-1)[0]
			if (latestView && latestView.fullPath) {
				router.push(latestView.fullPath)
			} else {
				router.push('/')
			}
		})
}
const submitHandler = async () => {
	// 基础信息
	// 表单设计
	// 流程设计
	// 扩展设置
	const leavePageFlag = changeTab()
	if (leavePageFlag) return // 说明表单设计的值有重复的
	const params = {
		categoryId: categoryId.value,
		processIcon: processIcon.value,
		processKey: processKey.value,
		processName: processName.value,
		remark: remark.value,
		processId: processId.value,
		processForm: processForm.value,
		modelContent: JSON.stringify({
			key: processKey.value,
			name: processName.value,
			nodeConfig: JSON.parse(modelContent.value)
		}),
		processSetting: processSetting.value
	}
	const res = await process.progressCreateApi(params)
	console.log('---r-e-s----', res)
	// 创建完成 删除 当前tab页
	removeCurTab()
}

// 切换选项卡之前，做相应的保存操作
const changeTab = () => {
	let leavePageFlag = false
	if (activeName.value === '表单设计') {
		// 这里针对表单设计单独处理,如果不符合条件,则不允许切换
		dyncComponent.value.exportJsonEv()
		leavePageFlag = dyncComponent.value.validateOnlyEv() // FormDesign.vue中的方法
		if (leavePageFlag) {
			return ElMessage.error(`表单设计中字段ID不能重复，请确认唯一值`)
		}
	} else if (activeName.value === '流程设计') {
		dyncComponent.value.saveDesign()
	}
	return leavePageFlag
}

const activeComponent = item => {
	const leavePageFlag = changeTab()
	if (!leavePageFlag) {
		activeName.value = item.label
	}
}

const currentComponent = computed(() => {
	return componentsArr.find(item => item.label === activeName.value)?.component
})

const queryObj = computed(() => route.query)

const getCurrentProcessDetailEv = () => {
	let _id = queryObj.value.id
	if (_id) {
		process.processDetailApi(_id).then(res => {
			processId.value = res.processId
			categoryId.value = res.categoryId
			processIcon.value = res.processIcon
			processKey.value = res.processKey
			processName.value = res.processName
			remark.value = res.remark
			let nodeConfig = JSON.parse(res.modelContent).nodeConfig
			modelContent.value = JSON.stringify(nodeConfig)
			processForm.value = res.processForm
			flowStore.setProcessForm(processForm)
		})
	}
}

getCurrentProcessDetailEv()
</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>