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

<template>
	<div class="column-page-wrap create-approval">
		<div class="create-approval-header flex flex_align-center">
			<div class="create-approval-header-back" @click="router.push('/flow/group')">
				<el-icon :size="20">
					<ArrowLeft />
				</el-icon>
			</div>
			<div class="create-approval-header-left-zh">
				<div class="create-approval-header-name">
					<LeIcon class="icon-shower" :icon-class="`${flowIconPrefix}${processIcon}`" style="margin-right: 8px" />
					<le-text :value="processName"></le-text>
				</div>
				<div v-if="false" class="create-approval-header-time">最近保存：6 分钟前</div>
			</div>
			<el-scrollbar class="scrollbar">
				<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>
			</el-scrollbar>
			<div class="create-approval-header-right">
				<el-button v-show="!isView" type="primary" @click="submitHandler">发布</el-button>
			</div>
		</div>
		<div v-loading="loading" 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_index">
import { computed, nextTick, ref, onActivated } 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'
import { flowIconPrefix } from '@/utils'
const { tagsView } = useStore()
const router = useRouter()
const route = useRoute()
const flowStore = useFlowStore()
const loading = ref(false)
const { categoryId, processId, processIcon, processKey, processName, remark, modelContent, processForm, processSetting, processPermissionList } =
	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 () => {
	// 基础信息
	// 表单设计
	// 流程设计
	// 扩展设置
	let leavePageFlag = await validateTabs()
	// let _id = queryObj.value.id
	// if (_id) {
	//
	// } else {
	// 	leavePageFlag = await validateTabs()
	// }
	if (!leavePageFlag) return
	const params = {
		categoryId: categoryId.value,
		processIcon: processIcon.value,
		processType: 'main',
		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,
		processPermissionList: processPermissionList.value
	}
	const res = await process.progressCreateApi(params)
	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]) {
			cache_components.value[index] = true
			// 更新数据
			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 isView = computed(() => {
	return queryObj.value?.view === '1'
})

const lastId = ref()
const getCurrentProcessDetailEv = async () => {
	let _id = queryObj.value.id
	if (lastId.value !== _id) {
		activeTab.value = '基础信息'
		lastId.value = _id
		flowStore.$reset()
		flowStore.setProcessType('main')
		if (_id) {
			loading.value = true
			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.setProcessSetting(res.processSetting)
					processPermissionList.value = (res.processPermissionList || []).map(i => ({
						...i,
						id: i.userId,
						name: i.userName
					}))
					// 默认执行一次保存
					const _refs = compRefs.value
					for (let i = 0; i < _refs.length; i++) {
						const updateCompInfo = compRefs.value[i]?.updateCompInfo
						if (updateCompInfo) {
							cache_components.value[i] = true
							updateCompInfo()
						}
					}
				})
				.finally(() => {
					loading.value = false
				})
		} else {
			cache_components.value = {}
			nextTick(() => {
				// 默认执行一次保存
				const _refs = compRefs.value
				for (let i = 0; i < _refs.length; i++) {
					const updateCompInfo = compRefs.value[i]?.updateCompInfo
					if (updateCompInfo) {
						cache_components.value[i] = true
						updateCompInfo()
					}
				}
			})
		}
	}
}
getCurrentProcessDetailEv()
onActivated(() => {
	getCurrentProcessDetailEv()
})
</script>

<style scoped lang="scss">
.create-approval {
	//height: 100%;
	//min-width: 1200px;
	//min-height: 600px;
	//overflow: auto;
	.scrollbar {
		//height: 64px;
		//padding: 0 12px;
		margin: 0 6px;
		//background-color: var(--el-bg-color);
		//box-shadow: 0 1px 6px 0 rgba(0, 0, 0, 0.06);
		//height: 100%;
		//background-color: var(--el-color-info-light-9);
		:deep(.el-scrollbar__bar) {
			&.is-horizontal {
				height: 2px;
			}
		}
	}
	&-header {
		justify-content: flex-start;
		height: 64px;
		//z-index: 12;
		position: relative;
		box-shadow: 0 1px 6px 0 rgba(0, 0, 0, 0.06);
		background-color: var(--el-bg-color);
		padding-right: 12px;
		//padding-right: 20px;
		&-back {
			display: flex;
			justify-content: flex-start;
			align-items: center;
			//height: 100%;
			margin-left: 4px;
			margin-right: 4px;
			padding: 8px;
			cursor: pointer;
			&:hover {
				color: var(--el-color-primary);
			}
		}

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

		&-name {
			font-weight: 500;
			font-size: 14px;
			//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;
			display: flex;
			align-items: center;
			.icon-shower {
				width: 24px;
				font-size: 24px;
				//height: 48px;
				border-radius: 50%;
				overflow: hidden;
				flex-shrink: 0;
			}
		}

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

		&-tab-list {
			//margin: 0 6px;
			//flex-shrink: 0;
			display: flex;
			justify-content: center;
			width: max-content;
		}

		&-tab-item {
			flex-shrink: 0;
			font-size: 18px;
			line-height: 26px;
			color: #646a73;
			margin-right: 18px;
			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 {
		//flex: 1;
		height: calc(100% - 64px);
		overflow: auto;
	}
}
// 手机端兼容
.app-mobile {
	.create-approval-header-tab {
		&-item {
			//background: #f00;
			font-size: 14px;
			margin-right: 6px;
		}
		&-counter {
			width: 18px;
			height: 18px;
			line-height: 16px;
			margin-right: 4px;
			font-size: 13px;
		}
	}
}
</style>