Files
lc_frontend/src/components/BpmTaskAssign/TaskSelectAssigneeForm.vue

106 lines
2.5 KiB
Vue
Raw Normal View History

<template>
<ContentWrap>
<el-form ref="formRef" :model="formData" :rules="formRules" label-width="80px">
<div v-for="taskAssignRule in props?.taskAssignRules" :key="taskAssignRule.taskDefinitionKey">
<el-divider content-position="left">{{ taskAssignRule?.taskDefinitionName }}</el-divider>
<el-form-item :label="taskAssignRule.taskDefinitionName+'候选人'"
:prop="taskAssignRule.taskDefinitionKey"
label-width="200">
<UserSelect
v-model="formData[taskAssignRule.taskDefinitionKey]"
:column="userSelectColumn"
:prop="taskAssignRule.taskDefinitionKey"
type="edit"
:func="(value)=>{console.log(JSON.stringify(value))}"
>
</UserSelect>
</el-form-item>
</div>
</el-form>
</ContentWrap>
</template>
<script lang="ts" setup>
// 从 UserSelect 组件导入 Column 类型
import type {Column} from '@/components/LowDesign/src/shareControl/UserSelect.vue'
// 定义组件选项
defineOptions({
name: "BpmTaskSelectAssigneeForm"
})
interface TaskAssignRule {
id: number
modelId: string
processDefinitionId: string
taskDefinitionKey: string
taskDefinitionName: string
type: number
options: number[]
}
const props = defineProps<{
taskAssignRules: TaskAssignRule[]
modelValue: {}
}>()
const formRef = ref()
const formData = ref(props.modelValue)
const formRules = ref({})
const userSelectColumn: Column = {
label: '候选人',
findType: 'all',
multiple: false,
columnKey: ['sex', 'post', 'deptName']
}
const emit = defineEmits(['updateModelValue'])
watch(
() => props.modelValue,
(val: {}) => {
formData.value = val
},
{
deep: true,
immediate: true,
}
)
watch(
() => formData.value,
(val: {}) => {
emit('updateModelValue', val)
},
{
deep: true,
immediate: true,
}
)
const validateAssignee = (successCallBack: () => void, failCallback: () => void) => {
formRef.value.validate((valid: boolean) => {
if (valid) successCallBack()
else failCallback()
})
}
defineExpose({validateAssignee})
// 初始化 formData
onMounted(() => {
if (props.taskAssignRules) {
props.taskAssignRules.forEach(rule => {
formData.value[rule.taskDefinitionKey] = ''
formRules.value[rule.taskDefinitionKey] = [
{
required: true,
message: '请选择候选人',
trigger: 'blur'
}
]
})
}
})
</script>