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.value === activeTab ? 'active' : '']"
					@click="activeComponent(idx)"
				>
					<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="item.component" v-for="(item, idx) in componentsArr" v-show="item.value === activeTab" ref="compRefs" :key="idx" />
		</div>
	</div>
</template>

<script setup name="flow_create">
import { computed, nextTick, 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 compRefs = ref() // 实例化子组件
const cache_components = ref({})
const componentsArr = [
	{
		component: BasicInfoTab,
		label: '基础信息',
		value: '基础信息'
		// ref: 'basicInfoRef'
	},
	{
		component: FormDesignTab,
		label: '表单设计',
		value: '表单设计'
		// ref: 'formDesignRef'
	},
	{
		component: FlowDesignTab,
		label: '流程设计',
		value: '流程设计'
		// ref: 'flowDesignRef'
	},
	{
		component: ExtendSetTab,
		label: '扩展设置',
		value: '扩展设置'
		// ref: 'extendSetRef'
	}
]
const activeTab = ref('基础信息')
const removeCurTab = () => {
	cache_components.value = {}
	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('/')
			}
			flowStore.$reset()
		})
}
const submitHandler = async () => {
	// 基础信息
	// 表单设计
	// 流程设计
	// 扩展设置
	const leavePageFlag = await validateTabs()
	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)
	ElMessage.success('操作成功')
	// 创建完成 删除 当前tab页
	removeCurTab()
}

// 切换选项卡之前，做相应的保存操作
const validateTabs = async () => {
	const _refs = compRefs.value
	// await nextTick()
	for (let i = 0; i < _refs.length; i++) {
		let bool = true
		/*// 若没开启过的 tab 需要尝试 进行更新数据
		if (!cache_components.value[i]) {
			cache_components.value[i]?.updateCompInfo()
		}*/
		const _validate =
			_refs[i]?.validate ||
			function () {
				return Promise.resolve()
			}
		await _validate().catch(e => {
			activeTab.value = componentsArr[i].label
			if (activeTab.value === '表单设计') {
				ElMessage.error('请为流程设计表单内容')
			}
			bool = false
		})
		if (!bool) return false
	}
	return true
}

const activeComponent = index => {
	const cur = componentsArr[index]
	if (activeTab.value !== cur.value) {
		if (activeTab.value === '表单设计') {
			compRefs.value[1]?.exportJsonEv()
		}
		// 当前缓存
		if (!cache_components.value[index]) {
			// 更新数据
			const updateCompInfo = compRefs.value[index]?.updateCompInfo
			// console.error('刷新数据')
			// console.error(updateCompInfo, 'updateCompInfo')
			if (updateCompInfo) {
				updateCompInfo()
			}
		}
		activeTab.value = cur.value
	}
}

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

const getCurrentProcessDetailEv = () => {
	let _id = queryObj.value.id
	if (_id) {
		cache_components.value = {}
		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)
			flowStore.setProcessSetting(res.processSetting)
		})
	}
}

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>