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 } from 'vue-router'
import process from '@/api/flow/process'

const route = useRoute()
const flowStore = useFlowStore()
const { flowProcessId, processKey, processName, 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 submitHandler = async () => {
	// 基础信息
	// 表单设计
	// 流程设计
	// 扩展设置
	changeTab()
	const params = {
		...basicInfo.value,
		processId: flowProcessId.value,
		processForm: processForm.value,
		modelContent: modelContent.value,
		processSetting: processSetting.value
	}
	// console.log('---r-e-s----', params)
	const res = await process.progressCreateApi(params)
	console.log('---r-e-s----', res)
}

// 切换选项卡
const changeTab = () => {
	if (activeName.value === '表单设计') {
		dyncComponent.value.exportJsonEv()
	} else if (activeName.value === '流程设计') {
		dyncComponent.value.saveDesign()
	}
}

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

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

const queryObj = computed(() => route.query)
const getCurrentProcessDetailEv = () => {
	process.processDetailApi(queryObj.value.id).then(res => {
		console.log('===res===res====res==', res)
		processKey.value = res.processKey
		processName.value = res.processName
		modelContent.value = res.modelContent
		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>