1、封装组件 workflowPropertiesForm.vue
<template>
<div class="content">
<el-form :model="dataForm" ref="dataFormRef">
<template v-for="item in formConfig" :key="item.id">
<el-form-item prop="projectTypeId" v-if="item.id == 'projectTypeId' && item.readable" :rules="{ required: item.required, message: '请选择项目类型', trigger: 'change' }">
<el-select v-model="dataForm[`${item.id}`]" @change="handleChange" :disabled="!item.writable" :placeholder="item.name"> <el-option v-for="item in projectTypeOption" :key="item.id" :label="item.typeName" :value="item.id" /> </el-select>
</el-form-item>
<el-form-item prop="projectFunds" v-else-if="item.id == 'projectFunds' && item.readable" :rules="{ required: item.required, validator: checkProjectFunds, trigger: 'blur' }">
<el-input v-model="dataForm[`${item.id}`]" type="number" :placeholder="item.name" :disabled="!item.writable" @change="checkFunds">
<template #append>
<div style="width: 90px; text-align: center">{{ bonusRange }}</div>
</template>
</el-input>
</el-form-item>
<template v-else>
<el-form-item v-if="item.readable" :prop="item.id" :rules="{ required: item.required, message: `请输入${item.name}`, trigger: 'blur' }">
<el-input v-model="dataForm[`${item.id}`]" :placeholder="item.name" :disabled="!item.writable"></el-input>
</el-form-item>
</template>
</template>
</el-form>
</div>
</template>
<script setup>
import baseService from "@/service/baseService";
import { computed, watch, ref, onMounted, reactive } from "vue";
let $emit = defineEmits(["update:modelValue"]);
let props = defineProps({
// 双向绑定 修改表单值需要改变list内对应的value
modelValue: {
type: Array,
default: () => {
return [];
}
},
formProperties: {
type: Array,
default: () => {
return [];
}
},
processDefinitionKey: {
type: String,
default: ""
}
});
let dataForm = ref({});
let dataFormRef = ref(null);
// 校验项目奖金
const checkProjectFunds = (rule, value, callback) => {
let bonusObj = projectTypeOption.value.find((item) => item.id == dataForm.value.projectTypeId);
if (!value) {
return callback(new Error(""));
} else if (!dataForm.value.projectTypeId) {
return callback(new Error("请先选择项目类型"));
} else if (value < bonusObj.bonusAmountMin || value > bonusObj.bonusAmountMax) {
return callback(new Error(`请输入${bonusObj.bonusAmountMin}~${bonusObj.bonusAmountMax}区间的值`));
} else {
callback();
}
};
watch(
() => dataForm.value,
(newForm) => {
let newConfig = formConfig.value.map((item) => {
item.value = newForm[item.id];
return item;
});
$emit("update:modelValue", newConfig);
},
{ deep: true }
);
let formConfig = computed(() => {
return props.formProperties;
});
let bonusRange = computed(() => {
let bonusObj = projectTypeOption.value.find((item) => item.id == dataForm.value.projectTypeId);
return bonusObj ? bonusObj.bonusAmountMin + "~" + bonusObj.bonusAmountMax : "";
});
// 奖金>最低金額
const checkFunds = () => {
let bonusObj = projectTypeOption.value.find((item) => item.id == dataForm.value.projectTypeId);
if (bonusObj) {
dataForm.value.projectFunds = dataForm.value.projectFunds < bonusObj.bonusAmountMin ? bonusObj.bonusAmountMin : dataForm.value.projectFunds > bonusObj.bonusAmountMax ? bonusObj.bonusAmountMax : dataForm.value.projectFunds;
} else {
}
dataForm.value.projectFunds = dataForm.value.projectFunds < 0 ? 0 : dataForm.value.projectFunds;
};
// 项目类型
let projectTypeOption = ref([]);
const getProjectTypeOption = () => {
baseService.get("/api", { page: 1, limit: 1000 }).then((res) => {
projectTypeOption.value = res.data.list;
});
};
onMounted(() => {
if (props.processDefinitionKey == "development_project_proposal") {
getProjectTypeOption();
}
});
</script>
<style scoped lang="less">
.content {
.el-form {
.el-form-item {
&:last-child {
margin-bottom: 0;
}
}
}
}
</style>
配置式表单 仅供参考
2、使用组件
<el-timeline-item v-for="(node, index) in historyNodes" :key="index">
<!-- 填写表单 -->
<!-- v-model="node.formProperties" 双向绑定 组件的值发生变化后会重新整合数据改变 -->
<template v-if="node.formProperties">
<workflowPropertiesForm class="comment"
:ref="(el) => (workflowPropertiesFormRefs[index] = el)"
v-model="node.formProperties"
:processDefinitionKey="node.processDefinitionKey" :formProperties="node.formProperties" />
</template>
</el-timeline-item>
<el-button v-debounce="() => processingFlow('agree')" type="primary">同意</el-button>
3、提交校验
const workflowFormRef = ref(null);
const workflowPropertiesFormRefs = ref([]);
const processingFlow = async (type) => {
if (type == "agree") {
const validatePromises = workflowPropertiesFormRefs.value.map((formComponent) => {
if (formComponent) {
return new Promise((resolve) => {
formComponent.$refs.dataFormRef.validate((valid) => {
resolve(valid);
});
});
}
});
const results = await Promise.all(validatePromises);
const allValid = results.every((valid) => valid);
if (!allValid) return;
}
workflowFormRef.value.init();
}