aizuda-web-vue3/src/views/flow/create/components/BasicInfo.vue

<script setup name="BasicInfo">
import { ref } from 'vue'
const props = defineProps({
	label: {
		type: String
	},
	name: {
		type: String
	}
})
const formRef = ref()
const form = ref({
	图标: '',
	名称: 'test@example.com',
	分组: 'Lolowan',
	谁可以发起该流程: '100',
	管理员: ''
})
const rules = {
	图标: [
		{
			required: true,
			message: '请选择图标'
		}
	],
	名称: [
		{
			required: true,
			message: '请输入名称'
		}
	],
	分组: [
		{
			required: true,
			message: '请选择分组'
		}
	],
	管理员: [
		{
			required: true,
			message: '请选择管理员'
		}
	]
}
// const submitHandler = (cb: ((value: any) => any)) => {
const validate = () => {
	return new Promise((resolve, reject) => {
		formRef.value.validate((valid, errObj) => {
			if (valid) {
				console.error('valid 成功')
				// cb?.(form.value)
				resolve(form.value)
				// return form.value
				return
			}
			return reject([props.name, errObj])
		})
	})
}
defineExpose({
	formRef,
	validate
})
</script>

<template>
	<el-tab-pane class="basic-info-wrap" :label="label" :name="name">
		<!--		<template #label>
			<span class="flow-name">{{ 'flowName' }}</span>
			基础信息
		</template>-->
		<el-form ref="formRef" :model="form" :rules="rules" label-position="top">
			<el-form-item label="图标" prop="图标">
<!--				todo...-->
<!--				<scUpload v-model="form.图标" title="图标" />-->
			</el-form-item>
			<el-form-item label="名称" prop="名称">
				<el-input v-model="form.名称" clearable></el-input>
			</el-form-item>
			<el-form-item label="分组" prop="分组">
				<el-input v-model="form.分组" clearable></el-input>
			</el-form-item>
			<el-form-item label="谁可以发起该流程（默认全员）" prop="谁可以发起该流程">
				<el-input v-model="form.谁可以发起该流程"></el-input>
			</el-form-item>
			<el-form-item label="管理员" prop="管理员">
				<el-input v-model="form.管理员"></el-input>
			</el-form-item>
		</el-form>
	</el-tab-pane>
</template>

<style scoped>
.basic-info-wrap {
	//background: var(--el-color-danger);
}
.flow-name {
	padding-right: 4px;
	color: var(--el-color-danger);
}
</style>