全局下拉框添加filterable属性
This commit is contained in:
guanj
@@ -1,185 +1,188 @@
|
||||
<template>
|
||||
<el-form label-width='100px'>
|
||||
<el-form-item label='规则类型' prop='candidateStrategy'>
|
||||
<el-select
|
||||
v-model='userTaskForm.candidateStrategy'
|
||||
clearable
|
||||
style='width: 100%'
|
||||
@change='changeCandidateStrategy'
|
||||
>
|
||||
<el-option
|
||||
v-for='dict in RuleTypeList'
|
||||
:key='dict.code'
|
||||
:label='dict.name'
|
||||
:value='dict.code'
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
v-if='userTaskForm.candidateStrategy == 10'
|
||||
label='指定角色'
|
||||
prop='candidateParam'
|
||||
>
|
||||
<el-select
|
||||
v-model='userTaskForm.candidateParam'
|
||||
clearable
|
||||
multiple
|
||||
style='width: 100%'
|
||||
@change='updateElementTask'
|
||||
>
|
||||
<el-option v-for='item in roleOptions' :key='item.id' :label='item.name' :value='item.id' />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
v-if='userTaskForm.candidateStrategy == 20'
|
||||
label='指定部门'
|
||||
prop='candidateParam'
|
||||
span='24'
|
||||
>
|
||||
<el-tree-select
|
||||
ref='treeRef'
|
||||
v-model='userTaskForm.candidateParam'
|
||||
:data='deptTreeOptions'
|
||||
:props='defaultProps'
|
||||
empty-text='加载中，请稍后'
|
||||
multiple
|
||||
node-key='id'
|
||||
show-checkbox
|
||||
@change='updateElementTask'
|
||||
/>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item
|
||||
v-if='userTaskForm.candidateStrategy == 30'
|
||||
label='指定用户'
|
||||
prop='candidateParam'
|
||||
span='24'
|
||||
>
|
||||
<el-select
|
||||
v-model='userTaskForm.candidateParam'
|
||||
clearable
|
||||
multiple
|
||||
style='width: 100%'
|
||||
@change='updateElementTask'
|
||||
>
|
||||
<el-option
|
||||
v-for='item in userOptions'
|
||||
:key='item.id'
|
||||
:label='item.name'
|
||||
:value='item.id'
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
|
||||
</el-form>
|
||||
</template>
|
||||
|
||||
<script lang='ts' setup>
|
||||
import { defaultProps, handleTree } from '@/utils/tree'
|
||||
import { useDictData } from '@/stores/dictData'
|
||||
const dictData = useDictData()
|
||||
const RuleTypeList = ref()
|
||||
import { getRoleSimpleList } from '@/api/user-boot/role'
|
||||
import { getUserSimpleList } from '@/api/user-boot/user'
|
||||
|
||||
defineOptions({ name: 'UserTask' })
|
||||
const props = defineProps({
|
||||
id: String,
|
||||
type: String
|
||||
})
|
||||
const userTaskForm = ref({
|
||||
candidateStrategy: '', // 分配规则
|
||||
candidateParam: [] // 分配选项
|
||||
})
|
||||
const bpmnElement = ref()
|
||||
const bpmnInstances = () => (window as any)?.bpmnInstances
|
||||
|
||||
export interface optionVO {
|
||||
id: string
|
||||
name: string
|
||||
}
|
||||
|
||||
const roleOptions = ref<optionVO[]>([]) // 角色列表
|
||||
const userOptions = ref<optionVO[]>([]) // 用户列表
|
||||
const deptTreeOptions = ref() // 部门树
|
||||
|
||||
const resetTaskForm = () => {
|
||||
const businessObject = bpmnElement.value.businessObject
|
||||
if (!businessObject) {
|
||||
return
|
||||
}
|
||||
if (businessObject.candidateStrategy != undefined) {
|
||||
userTaskForm.value.candidateStrategy = businessObject.candidateStrategy
|
||||
} else {
|
||||
userTaskForm.value.candidateStrategy = undefined
|
||||
}
|
||||
if (businessObject.candidateParam && businessObject.candidateParam.length > 0) {
|
||||
if (userTaskForm.value.candidateStrategy === 60) {
|
||||
// 特殊：流程表达式，只有一个 input 输入框
|
||||
userTaskForm.value.candidateParam = [businessObject.candidateParam]
|
||||
} else {
|
||||
userTaskForm.value.candidateParam = businessObject.candidateParam.split(',')
|
||||
}
|
||||
} else {
|
||||
userTaskForm.value.candidateParam = []
|
||||
}
|
||||
}
|
||||
|
||||
/** 更新 candidateStrategy 字段时，需要清空 candidateParam，并触发 bpmn 图更新 */
|
||||
const changeCandidateStrategy = () => {
|
||||
userTaskForm.value.candidateParam = []
|
||||
updateElementTask()
|
||||
}
|
||||
|
||||
/** 选中某个 options 时候，更新 bpmn 图 */
|
||||
const updateElementTask = () => {
|
||||
bpmnInstances().modeling.updateProperties(toRaw(bpmnElement.value), {
|
||||
candidateStrategy: userTaskForm.value.candidateStrategy,
|
||||
candidateParam: userTaskForm.value.candidateParam.join(',')
|
||||
})
|
||||
}
|
||||
|
||||
// 打开监听器弹窗
|
||||
const processExpressionDialogRef = ref()
|
||||
const openProcessExpressionDialog = async () => {
|
||||
processExpressionDialogRef.value.open()
|
||||
}
|
||||
const selectProcessExpression = (expression) => {
|
||||
userTaskForm.value.candidateParam = [expression.expression]
|
||||
}
|
||||
|
||||
watch(
|
||||
() => props.id,
|
||||
() => {
|
||||
bpmnElement.value = bpmnInstances().bpmnElement
|
||||
nextTick(() => {
|
||||
resetTaskForm()
|
||||
})
|
||||
},
|
||||
{ immediate: true }
|
||||
)
|
||||
|
||||
|
||||
onMounted(async () => {
|
||||
// 获得角色列表
|
||||
await getRoleSimpleList().then(res => {
|
||||
roleOptions.value = res.data
|
||||
})
|
||||
|
||||
// 获得用户列表
|
||||
await getUserSimpleList().then(res => {
|
||||
userOptions.value = res.data
|
||||
})
|
||||
//传入type的名称
|
||||
RuleTypeList.value = dictData.getBasicData('rule_type')
|
||||
|
||||
//
|
||||
// // 获得部门列表
|
||||
// const deptOptions = await DeptApi.getSimpleDeptList()
|
||||
// deptTreeOptions.value = handleTree(deptOptions, 'id')
|
||||
})
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
bpmnElement.value = null
|
||||
})
|
||||
</script>
|
||||
<template>
|
||||
<el-form label-width='100px'>
|
||||
<el-form-item label='规则类型' prop='candidateStrategy'>
|
||||
<el-select
|
||||
v-model='userTaskForm.candidateStrategy'
|
||||
clearable
|
||||
style='width: 100%'
|
||||
@change='changeCandidateStrategy'
|
||||
filterable
|
||||
>
|
||||
<el-option
|
||||
v-for='dict in RuleTypeList'
|
||||
:key='dict.code'
|
||||
:label='dict.name'
|
||||
:value='dict.code'
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
v-if='userTaskForm.candidateStrategy == 10'
|
||||
label='指定角色'
|
||||
prop='candidateParam'
|
||||
>
|
||||
<el-select
|
||||
v-model='userTaskForm.candidateParam'
|
||||
clearable
|
||||
multiple
|
||||
style='width: 100%'
|
||||
@change='updateElementTask'
|
||||
filterable
|
||||
>
|
||||
<el-option v-for='item in roleOptions' :key='item.id' :label='item.name' :value='item.id' />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
v-if='userTaskForm.candidateStrategy == 20'
|
||||
label='指定部门'
|
||||
prop='candidateParam'
|
||||
span='24'
|
||||
>
|
||||
<el-tree-select
|
||||
ref='treeRef'
|
||||
v-model='userTaskForm.candidateParam'
|
||||
:data='deptTreeOptions'
|
||||
:props='defaultProps'
|
||||
empty-text='加载中，请稍后'
|
||||
multiple
|
||||
node-key='id'
|
||||
show-checkbox
|
||||
@change='updateElementTask'
|
||||
/>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item
|
||||
v-if='userTaskForm.candidateStrategy == 30'
|
||||
label='指定用户'
|
||||
prop='candidateParam'
|
||||
span='24'
|
||||
>
|
||||
<el-select
|
||||
v-model='userTaskForm.candidateParam'
|
||||
clearable
|
||||
multiple
|
||||
style='width: 100%'
|
||||
@change='updateElementTask'
|
||||
filterable
|
||||
>
|
||||
<el-option
|
||||
v-for='item in userOptions'
|
||||
:key='item.id'
|
||||
:label='item.name'
|
||||
:value='item.id'
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
|
||||
</el-form>
|
||||
</template>
|
||||
|
||||
<script lang='ts' setup>
|
||||
import { defaultProps, handleTree } from '@/utils/tree'
|
||||
import { useDictData } from '@/stores/dictData'
|
||||
const dictData = useDictData()
|
||||
const RuleTypeList = ref()
|
||||
import { getRoleSimpleList } from '@/api/user-boot/role'
|
||||
import { getUserSimpleList } from '@/api/user-boot/user'
|
||||
|
||||
defineOptions({ name: 'UserTask' })
|
||||
const props = defineProps({
|
||||
id: String,
|
||||
type: String
|
||||
})
|
||||
const userTaskForm = ref({
|
||||
candidateStrategy: '', // 分配规则
|
||||
candidateParam: [] // 分配选项
|
||||
})
|
||||
const bpmnElement = ref()
|
||||
const bpmnInstances = () => (window as any)?.bpmnInstances
|
||||
|
||||
export interface optionVO {
|
||||
id: string
|
||||
name: string
|
||||
}
|
||||
|
||||
const roleOptions = ref<optionVO[]>([]) // 角色列表
|
||||
const userOptions = ref<optionVO[]>([]) // 用户列表
|
||||
const deptTreeOptions = ref() // 部门树
|
||||
|
||||
const resetTaskForm = () => {
|
||||
const businessObject = bpmnElement.value.businessObject
|
||||
if (!businessObject) {
|
||||
return
|
||||
}
|
||||
if (businessObject.candidateStrategy != undefined) {
|
||||
userTaskForm.value.candidateStrategy = businessObject.candidateStrategy
|
||||
} else {
|
||||
userTaskForm.value.candidateStrategy = undefined
|
||||
}
|
||||
if (businessObject.candidateParam && businessObject.candidateParam.length > 0) {
|
||||
if (userTaskForm.value.candidateStrategy === 60) {
|
||||
// 特殊：流程表达式，只有一个 input 输入框
|
||||
userTaskForm.value.candidateParam = [businessObject.candidateParam]
|
||||
} else {
|
||||
userTaskForm.value.candidateParam = businessObject.candidateParam.split(',')
|
||||
}
|
||||
} else {
|
||||
userTaskForm.value.candidateParam = []
|
||||
}
|
||||
}
|
||||
|
||||
/** 更新 candidateStrategy 字段时，需要清空 candidateParam，并触发 bpmn 图更新 */
|
||||
const changeCandidateStrategy = () => {
|
||||
userTaskForm.value.candidateParam = []
|
||||
updateElementTask()
|
||||
}
|
||||
|
||||
/** 选中某个 options 时候，更新 bpmn 图 */
|
||||
const updateElementTask = () => {
|
||||
bpmnInstances().modeling.updateProperties(toRaw(bpmnElement.value), {
|
||||
candidateStrategy: userTaskForm.value.candidateStrategy,
|
||||
candidateParam: userTaskForm.value.candidateParam.join(',')
|
||||
})
|
||||
}
|
||||
|
||||
// 打开监听器弹窗
|
||||
const processExpressionDialogRef = ref()
|
||||
const openProcessExpressionDialog = async () => {
|
||||
processExpressionDialogRef.value.open()
|
||||
}
|
||||
const selectProcessExpression = (expression) => {
|
||||
userTaskForm.value.candidateParam = [expression.expression]
|
||||
}
|
||||
|
||||
watch(
|
||||
() => props.id,
|
||||
() => {
|
||||
bpmnElement.value = bpmnInstances().bpmnElement
|
||||
nextTick(() => {
|
||||
resetTaskForm()
|
||||
})
|
||||
},
|
||||
{ immediate: true }
|
||||
)
|
||||
|
||||
|
||||
onMounted(async () => {
|
||||
// 获得角色列表
|
||||
await getRoleSimpleList().then(res => {
|
||||
roleOptions.value = res.data
|
||||
})
|
||||
|
||||
// 获得用户列表
|
||||
await getUserSimpleList().then(res => {
|
||||
userOptions.value = res.data
|
||||
})
|
||||
//传入type的名称
|
||||
RuleTypeList.value = dictData.getBasicData('rule_type')
|
||||
|
||||
//
|
||||
// // 获得部门列表
|
||||
// const deptOptions = await DeptApi.getSimpleDeptList()
|
||||
// deptTreeOptions.value = handleTree(deptOptions, 'id')
|
||||
})
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
bpmnElement.value = null
|
||||
})
|
||||
</script>
|
||||
|
||||
Reference in New Issue
Block a user