全局下拉框添加filterable属性
This commit is contained in:
guanj
@@ -1,46 +1,46 @@
|
||||
<!-- 数据字典 Select 选择器 -->
|
||||
<template>
|
||||
<el-select class="w-1/1" v-bind="attrs">
|
||||
<template v-if="valueType === 'int'">
|
||||
<el-option
|
||||
v-for="(dict, index) in getIntDictOptions(dictType)"
|
||||
:key="index"
|
||||
:label="dict.label"
|
||||
:value="dict.value"
|
||||
/>
|
||||
</template>
|
||||
<template v-if="valueType === 'str'">
|
||||
<el-option
|
||||
v-for="(dict, index) in getStrDictOptions(dictType)"
|
||||
:key="index"
|
||||
:label="dict.label"
|
||||
:value="dict.value"
|
||||
/>
|
||||
</template>
|
||||
<template v-if="valueType === 'bool'">
|
||||
<el-option
|
||||
v-for="(dict, index) in getBoolDictOptions(dictType)"
|
||||
:key="index"
|
||||
:label="dict.label"
|
||||
:value="dict.value"
|
||||
/>
|
||||
</template>
|
||||
</el-select>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { getBoolDictOptions, getIntDictOptions, getStrDictOptions } from '@/utils/dict'
|
||||
|
||||
// 接受父组件参数
|
||||
interface Props {
|
||||
dictType: string // 字典类型
|
||||
valueType: string // 字典值类型
|
||||
}
|
||||
|
||||
withDefaults(defineProps<Props>(), {
|
||||
dictType: '',
|
||||
valueType: 'str'
|
||||
})
|
||||
const attrs = useAttrs()
|
||||
defineOptions({ name: 'DictSelect' })
|
||||
</script>
|
||||
<!-- 数据字典 Select 选择器 -->
|
||||
<template>
|
||||
<el-select class="w-1/1" v-bind="attrs" filterable>
|
||||
<template v-if="valueType === 'int'">
|
||||
<el-option
|
||||
v-for="(dict, index) in getIntDictOptions(dictType)"
|
||||
:key="index"
|
||||
:label="dict.label"
|
||||
:value="dict.value"
|
||||
/>
|
||||
</template>
|
||||
<template v-if="valueType === 'str'">
|
||||
<el-option
|
||||
v-for="(dict, index) in getStrDictOptions(dictType)"
|
||||
:key="index"
|
||||
:label="dict.label"
|
||||
:value="dict.value"
|
||||
/>
|
||||
</template>
|
||||
<template v-if="valueType === 'bool'">
|
||||
<el-option
|
||||
v-for="(dict, index) in getBoolDictOptions(dictType)"
|
||||
:key="index"
|
||||
:label="dict.label"
|
||||
:value="dict.value"
|
||||
/>
|
||||
</template>
|
||||
</el-select>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { getBoolDictOptions, getIntDictOptions, getStrDictOptions } from '@/utils/dict'
|
||||
|
||||
// 接受父组件参数
|
||||
interface Props {
|
||||
dictType: string // 字典类型
|
||||
valueType: string // 字典值类型
|
||||
}
|
||||
|
||||
withDefaults(defineProps<Props>(), {
|
||||
dictType: '',
|
||||
valueType: 'str'
|
||||
})
|
||||
const attrs = useAttrs()
|
||||
defineOptions({ name: 'DictSelect' })
|
||||
</script>
|
||||
|
||||
@@ -2,14 +2,14 @@
|
||||
<div class="panel-tab__content">
|
||||
<el-form :model="flowConditionForm" label-width="90px" size="small">
|
||||
<el-form-item label="流转类型">
|
||||
<el-select v-model="flowConditionForm.type" @change="updateFlowType">
|
||||
<el-select v-model="flowConditionForm.type" @change="updateFlowType" filterable>
|
||||
<el-option label="普通流转路径" value="normal" />
|
||||
<el-option label="默认流转路径" value="default" />
|
||||
<el-option label="条件流转路径" value="condition" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="条件格式" v-if="flowConditionForm.type === 'condition'" key="condition">
|
||||
<el-select v-model="flowConditionForm.conditionType">
|
||||
<el-select v-model="flowConditionForm.conditionType" filterable>
|
||||
<el-option label="表达式" value="expression" />
|
||||
<el-option label="脚本" value="script" />
|
||||
</el-select>
|
||||
@@ -33,7 +33,7 @@
|
||||
<el-input v-model="flowConditionForm.language" clearable @change="updateFlowCondition" />
|
||||
</el-form-item>
|
||||
<el-form-item label="脚本类型" key="scriptType">
|
||||
<el-select v-model="flowConditionForm.scriptType">
|
||||
<el-select v-model="flowConditionForm.scriptType" filterable>
|
||||
<el-option label="内联脚本" value="inlineScript" />
|
||||
<el-option label="外部脚本" value="externalScript" />
|
||||
</el-select>
|
||||
|
||||
@@ -1,481 +1,481 @@
|
||||
<template>
|
||||
<div class="panel-tab__content">
|
||||
<el-form label-width="80px">
|
||||
<el-form-item label="流程表单">
|
||||
<!-- <el-input v-model="formKey" clearable @change="updateElementFormKey" />-->
|
||||
<el-select v-model="formKey" clearable @change="updateElementFormKey">
|
||||
<el-option v-for="form in formList" :key="form.id" :label="form.name" :value="form.id" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<!-- <el-form-item label="业务标识">-->
|
||||
<!-- <el-select v-model="businessKey" @change="updateElementBusinessKey">-->
|
||||
<!-- <el-option v-for="i in fieldList" :key="i.id" :value="i.id" :label="i.label" />-->
|
||||
<!-- <el-option label="无" value="" />-->
|
||||
<!-- </el-select>-->
|
||||
<!-- </el-form-item>-->
|
||||
</el-form>
|
||||
|
||||
<!--字段列表-->
|
||||
<!-- <div class="element-property list-property">-->
|
||||
<!-- <el-divider><Icon icon="ep:coin" /> 表单字段</el-divider>-->
|
||||
<!-- <el-table :data="fieldList" max-height="240" fit border>-->
|
||||
<!-- <el-table-column label="序号" type="index" width="50px" />-->
|
||||
<!-- <el-table-column label="字段名称" prop="label" min-width="80px" show-overflow-tooltip />-->
|
||||
<!-- <el-table-column-->
|
||||
<!-- label="字段类型"-->
|
||||
<!-- prop="type"-->
|
||||
<!-- min-width="80px"-->
|
||||
<!-- :formatter="(row) => fieldType[row.type] || row.type"-->
|
||||
<!-- show-overflow-tooltip-->
|
||||
<!-- />-->
|
||||
<!-- <el-table-column-->
|
||||
<!-- label="默认值"-->
|
||||
<!-- prop="defaultValue"-->
|
||||
<!-- min-width="80px"-->
|
||||
<!-- show-overflow-tooltip-->
|
||||
<!-- />-->
|
||||
<!-- <el-table-column label="操作" width="90px">-->
|
||||
<!-- <template #default="scope">-->
|
||||
<!-- <el-button type="primary" link @click="openFieldForm(scope, scope.$index)"-->
|
||||
<!-- >编辑</el-button-->
|
||||
<!-- >-->
|
||||
<!-- <el-divider direction="vertical" />-->
|
||||
<!-- <el-button-->
|
||||
<!-- type="primary"-->
|
||||
<!-- link-->
|
||||
<!-- style="color: #ff4d4f"-->
|
||||
<!-- @click="removeField(scope, scope.$index)"-->
|
||||
<!-- >移除</el-button-->
|
||||
<!-- >-->
|
||||
<!-- </template>-->
|
||||
<!-- </el-table-column>-->
|
||||
<!-- </el-table>-->
|
||||
<!-- </div>-->
|
||||
<!-- <div class="element-drawer__button">-->
|
||||
<!-- <XButton type="primary" proIcon="ep:plus" title="添加字段" @click="openFieldForm(null, -1)" />-->
|
||||
<!-- </div>-->
|
||||
|
||||
<!--字段配置侧边栏-->
|
||||
<!-- <el-drawer-->
|
||||
<!-- v-model="fieldModelVisible"-->
|
||||
<!-- title="字段配置"-->
|
||||
<!-- :size="`${width}px`"-->
|
||||
<!-- append-to-body-->
|
||||
<!-- destroy-on-close-->
|
||||
<!-- >-->
|
||||
<!-- <el-form :model="formFieldForm" label-width="90px">-->
|
||||
<!-- <el-form-item label="字段ID">-->
|
||||
<!-- <el-input v-model="formFieldForm.id" clearable />-->
|
||||
<!-- </el-form-item>-->
|
||||
<!-- <el-form-item label="类型">-->
|
||||
<!-- <el-select-->
|
||||
<!-- v-model="formFieldForm.typeType"-->
|
||||
<!-- placeholder="请选择字段类型"-->
|
||||
<!-- clearable-->
|
||||
<!-- @change="changeFieldTypeType"-->
|
||||
<!-- >-->
|
||||
<!-- <el-option v-for="(value, key) of fieldType" :label="value" :value="key" :key="key" />-->
|
||||
<!-- </el-select>-->
|
||||
<!-- </el-form-item>-->
|
||||
<!-- <el-form-item label="类型名称" v-if="formFieldForm.typeType === 'custom'">-->
|
||||
<!-- <el-input v-model="formFieldForm.type" clearable />-->
|
||||
<!-- </el-form-item>-->
|
||||
<!-- <el-form-item label="名称">-->
|
||||
<!-- <el-input v-model="formFieldForm.label" clearable />-->
|
||||
<!-- </el-form-item>-->
|
||||
<!-- <el-form-item label="时间格式" v-if="formFieldForm.typeType === 'date'">-->
|
||||
<!-- <el-input v-model="formFieldForm.datePattern" clearable />-->
|
||||
<!-- </el-form-item>-->
|
||||
<!-- <el-form-item label="默认值">-->
|
||||
<!-- <el-input v-model="formFieldForm.defaultValue" clearable />-->
|
||||
<!-- </el-form-item>-->
|
||||
<!-- </el-form>-->
|
||||
|
||||
<!-- <!– 枚举值设置 –>-->
|
||||
<!-- <template v-if="formFieldForm.type === 'enum'">-->
|
||||
<!-- <el-divider key="enum-divider" />-->
|
||||
<!-- <p class="listener-filed__title" key="enum-title">-->
|
||||
<!-- <span><Icon icon="ep:menu" />枚举值列表：</span>-->
|
||||
<!-- <el-button type="primary" @click="openFieldOptionForm(null, -1, 'enum')"-->
|
||||
<!-- >添加枚举值</el-button-->
|
||||
<!-- >-->
|
||||
<!-- </p>-->
|
||||
<!-- <el-table :data="fieldEnumList" key="enum-table" max-height="240" fit border>-->
|
||||
<!-- <el-table-column label="序号" width="50px" type="index" />-->
|
||||
<!-- <el-table-column label="枚举值编号" prop="id" min-width="100px" show-overflow-tooltip />-->
|
||||
<!-- <el-table-column label="枚举值名称" prop="name" min-width="100px" show-overflow-tooltip />-->
|
||||
<!-- <el-table-column label="操作" width="90px">-->
|
||||
<!-- <template #default="scope">-->
|
||||
<!-- <el-button-->
|
||||
<!-- type="primary"-->
|
||||
<!-- link-->
|
||||
<!-- @click="openFieldOptionForm(scope, scope.$index, 'enum')"-->
|
||||
<!-- >编辑</el-button-->
|
||||
<!-- >-->
|
||||
<!-- <el-divider direction="vertical" />-->
|
||||
<!-- <el-button-->
|
||||
<!-- type="primary"-->
|
||||
<!-- link-->
|
||||
<!-- style="color: #ff4d4f"-->
|
||||
<!-- @click="removeFieldOptionItem(scope, scope.$index, 'enum')"-->
|
||||
<!-- >移除</el-button-->
|
||||
<!-- >-->
|
||||
<!-- </template>-->
|
||||
<!-- </el-table-column>-->
|
||||
<!-- </el-table>-->
|
||||
<!-- </template>-->
|
||||
|
||||
<!-- <!– 校验规则 –>-->
|
||||
<!-- <el-divider key="validation-divider" />-->
|
||||
<!-- <p class="listener-filed__title" key="validation-title">-->
|
||||
<!-- <span><Icon icon="ep:menu" />约束条件列表：</span>-->
|
||||
<!-- <el-button type="primary" @click="openFieldOptionForm(null, -1, 'constraint')"-->
|
||||
<!-- >添加约束</el-button-->
|
||||
<!-- >-->
|
||||
<!-- </p>-->
|
||||
<!-- <el-table :data="fieldConstraintsList" key="validation-table" max-height="240" fit border>-->
|
||||
<!-- <el-table-column label="序号" width="50px" type="index" />-->
|
||||
<!-- <el-table-column label="约束名称" prop="name" min-width="100px" show-overflow-tooltip />-->
|
||||
<!-- <el-table-column label="约束配置" prop="config" min-width="100px" show-overflow-tooltip />-->
|
||||
<!-- <el-table-column label="操作" width="90px">-->
|
||||
<!-- <template #default="scope">-->
|
||||
<!-- <el-button-->
|
||||
<!-- type="primary"-->
|
||||
<!-- link-->
|
||||
<!-- @click="openFieldOptionForm(scope, scope.$index, 'constraint')"-->
|
||||
<!-- >编辑</el-button-->
|
||||
<!-- >-->
|
||||
<!-- <el-divider direction="vertical" />-->
|
||||
<!-- <el-button-->
|
||||
<!-- type="primary"-->
|
||||
<!-- link-->
|
||||
<!-- style="color: #ff4d4f"-->
|
||||
<!-- @click="removeFieldOptionItem(scope, scope.$index, 'constraint')"-->
|
||||
<!-- >移除</el-button-->
|
||||
<!-- >-->
|
||||
<!-- </template>-->
|
||||
<!-- </el-table-column>-->
|
||||
<!-- </el-table>-->
|
||||
|
||||
<!-- <!– 表单属性 –>-->
|
||||
<!-- <el-divider key="property-divider" />-->
|
||||
<!-- <p class="listener-filed__title" key="property-title">-->
|
||||
<!-- <span><Icon icon="ep:menu" />字段属性列表：</span>-->
|
||||
<!-- <el-button type="primary" @click="openFieldOptionForm(null, -1, 'property')"-->
|
||||
<!-- >添加属性</el-button-->
|
||||
<!-- >-->
|
||||
<!-- </p>-->
|
||||
<!-- <el-table :data="fieldPropertiesList" key="property-table" max-height="240" fit border>-->
|
||||
<!-- <el-table-column label="序号" width="50px" type="index" />-->
|
||||
<!-- <el-table-column label="属性编号" prop="id" min-width="100px" show-overflow-tooltip />-->
|
||||
<!-- <el-table-column label="属性值" prop="value" min-width="100px" show-overflow-tooltip />-->
|
||||
<!-- <el-table-column label="操作" width="90px">-->
|
||||
<!-- <template #default="scope">-->
|
||||
<!-- <el-button-->
|
||||
<!-- type="primary"-->
|
||||
<!-- link-->
|
||||
<!-- @click="openFieldOptionForm(scope, scope.$index, 'property')"-->
|
||||
<!-- >编辑</el-button-->
|
||||
<!-- >-->
|
||||
<!-- <el-divider direction="vertical" />-->
|
||||
<!-- <el-button-->
|
||||
<!-- type="primary"-->
|
||||
<!-- link-->
|
||||
<!-- style="color: #ff4d4f"-->
|
||||
<!-- @click="removeFieldOptionItem(scope, scope.$index, 'property')"-->
|
||||
<!-- >移除</el-button-->
|
||||
<!-- >-->
|
||||
<!-- </template>-->
|
||||
<!-- </el-table-column>-->
|
||||
<!-- </el-table>-->
|
||||
|
||||
<!-- <!– 底部按钮 –>-->
|
||||
<!-- <div class="element-drawer__button">-->
|
||||
<!-- <el-button>取 消</el-button>-->
|
||||
<!-- <el-button type="primary" @click="saveField">保 存</el-button>-->
|
||||
<!-- </div>-->
|
||||
<!-- </el-drawer>-->
|
||||
|
||||
<!-- <el-dialog-->
|
||||
<!-- v-model="fieldOptionModelVisible"-->
|
||||
<!-- :title="optionModelTitle"-->
|
||||
<!-- width="600px"-->
|
||||
<!-- append-to-body-->
|
||||
<!-- destroy-on-close-->
|
||||
<!-- >-->
|
||||
<!-- <el-form :model="fieldOptionForm" label-width="96px">-->
|
||||
<!-- <el-form-item label="编号/ID" v-if="fieldOptionType !== 'constraint'" key="option-id">-->
|
||||
<!-- <el-input v-model="fieldOptionForm.id" clearable />-->
|
||||
<!-- </el-form-item>-->
|
||||
<!-- <el-form-item label="名称" v-if="fieldOptionType !== 'property'" key="option-name">-->
|
||||
<!-- <el-input v-model="fieldOptionForm.name" clearable />-->
|
||||
<!-- </el-form-item>-->
|
||||
<!-- <el-form-item label="配置" v-if="fieldOptionType === 'constraint'" key="option-config">-->
|
||||
<!-- <el-input v-model="fieldOptionForm.config" clearable />-->
|
||||
<!-- </el-form-item>-->
|
||||
<!-- <el-form-item label="值" v-if="fieldOptionType === 'property'" key="option-value">-->
|
||||
<!-- <el-input v-model="fieldOptionForm.value" clearable />-->
|
||||
<!-- </el-form-item>-->
|
||||
<!-- </el-form>-->
|
||||
<!-- <template #footer>-->
|
||||
<!-- <el-button @click="fieldOptionModelVisible = false">取 消</el-button>-->
|
||||
<!-- <el-button type="primary" @click="saveFieldOption">确 定</el-button>-->
|
||||
<!-- </template>-->
|
||||
<!-- </el-dialog>-->
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { getFormSimpleList } from '@/api/bpm-boot/form'
|
||||
|
||||
|
||||
defineOptions({ name: 'ElementForm' })
|
||||
|
||||
const props = defineProps({
|
||||
id: String,
|
||||
type: String
|
||||
})
|
||||
const prefix = inject('prefix')
|
||||
const width = inject('width')
|
||||
|
||||
const formKey = ref('')
|
||||
const businessKey = ref('')
|
||||
const optionModelTitle = ref('')
|
||||
const fieldList = ref<any[]>([])
|
||||
const formFieldForm = ref<any>({})
|
||||
const fieldType = ref({
|
||||
long: '长整型',
|
||||
string: '字符串',
|
||||
boolean: '布尔类',
|
||||
date: '日期类',
|
||||
enum: '枚举类',
|
||||
custom: '自定义类型'
|
||||
})
|
||||
const formFieldIndex = ref(-1) // 编辑中的字段， -1 为新增
|
||||
const formFieldOptionIndex = ref(-1) // 编辑中的字段配置项， -1 为新增
|
||||
const fieldModelVisible = ref(false)
|
||||
const fieldOptionModelVisible = ref(false)
|
||||
const fieldOptionForm = ref<any>({}) // 当前激活的字段配置项数据
|
||||
const fieldOptionType = ref('') // 当前激活的字段配置项弹窗 类型
|
||||
const fieldEnumList = ref<any[]>([]) // 枚举值列表
|
||||
const fieldConstraintsList = ref<any[]>([]) // 约束条件列表
|
||||
const fieldPropertiesList = ref<any[]>([]) // 绑定属性列表
|
||||
const bpmnELement = ref()
|
||||
const elExtensionElements = ref()
|
||||
const formData = ref()
|
||||
const otherExtensions = ref()
|
||||
|
||||
const bpmnInstances = () => (window as any)?.bpmnInstances
|
||||
const resetFormList = () => {
|
||||
bpmnELement.value = bpmnInstances().bpmnElement
|
||||
formKey.value = bpmnELement.value.businessObject.formKey
|
||||
// if (formKey.value?.length > 0) {
|
||||
// formKey.value = parseInt(formKey.value)
|
||||
// }
|
||||
// 获取元素扩展属性 或者 创建扩展属性
|
||||
elExtensionElements.value =
|
||||
bpmnELement.value.businessObject.get('extensionElements') ||
|
||||
bpmnInstances().moddle.create('bpmn:ExtensionElements', { values: [] })
|
||||
// 获取元素表单配置 或者 创建新的表单配置
|
||||
formData.value =
|
||||
elExtensionElements.value.values.filter((ex) => ex.$type === `${prefix}:FormData`)?.[0] ||
|
||||
bpmnInstances().moddle.create(`${prefix}:FormData`, { fields: [] })
|
||||
|
||||
// 业务标识 businessKey， 绑定在 formData 中
|
||||
businessKey.value = formData.value.businessKey
|
||||
|
||||
// 保留剩余扩展元素，便于后面更新该元素对应属性
|
||||
otherExtensions.value = elExtensionElements.value.values.filter(
|
||||
(ex) => ex.$type !== `${prefix}:FormData`
|
||||
)
|
||||
|
||||
// 复制原始值，填充表格
|
||||
fieldList.value = JSON.parse(JSON.stringify(formData.value.fields || []))
|
||||
|
||||
// 更新元素扩展属性，避免后续报错
|
||||
updateElementExtensions()
|
||||
}
|
||||
const updateElementFormKey = () => {
|
||||
bpmnInstances().modeling.updateProperties(toRaw(bpmnELement.value), {
|
||||
formKey: formKey.value
|
||||
})
|
||||
}
|
||||
const updateElementBusinessKey = () => {
|
||||
bpmnInstances().modeling.updateModdleProperties(toRaw(bpmnELement.value), formData.value, {
|
||||
businessKey: businessKey.value
|
||||
})
|
||||
}
|
||||
// 根据类型调整字段type
|
||||
const changeFieldTypeType = (type) => {
|
||||
// this.$set(this.formFieldForm, "type", type === "custom" ? "" : type);
|
||||
formFieldForm.value['type'] = type === 'custom' ? '' : type
|
||||
}
|
||||
|
||||
// 打开字段详情侧边栏
|
||||
const openFieldForm = (field, index) => {
|
||||
formFieldIndex.value = index
|
||||
if (index !== -1) {
|
||||
const FieldObject = formData.value.fields[index]
|
||||
formFieldForm.value = JSON.parse(JSON.stringify(field))
|
||||
// 设置自定义类型
|
||||
// this.$set(this.formFieldForm, "typeType", !this.fieldType[field.type] ? "custom" : field.type);
|
||||
formFieldForm.value['typeType'] = !fieldType.value[field.type] ? 'custom' : field.type
|
||||
// 初始化枚举值列表
|
||||
field.type === 'enum' &&
|
||||
(fieldEnumList.value = JSON.parse(JSON.stringify(FieldObject?.values || [])))
|
||||
// 初始化约束条件列表
|
||||
fieldConstraintsList.value = JSON.parse(
|
||||
JSON.stringify(FieldObject?.validation?.constraints || [])
|
||||
)
|
||||
// 初始化自定义属性列表
|
||||
fieldPropertiesList.value = JSON.parse(JSON.stringify(FieldObject?.properties?.values || []))
|
||||
} else {
|
||||
formFieldForm.value = {}
|
||||
// 初始化枚举值列表
|
||||
fieldEnumList.value = []
|
||||
// 初始化约束条件列表
|
||||
fieldConstraintsList.value = []
|
||||
// 初始化自定义属性列表
|
||||
fieldPropertiesList.value = []
|
||||
}
|
||||
fieldModelVisible.value = true
|
||||
}
|
||||
// 打开字段 某个 配置项 弹窗
|
||||
const openFieldOptionForm = (option, index, type) => {
|
||||
fieldOptionModelVisible.value = true
|
||||
fieldOptionType.value = type
|
||||
formFieldOptionIndex.value = index
|
||||
if (type === 'property') {
|
||||
fieldOptionForm.value = option ? JSON.parse(JSON.stringify(option)) : {}
|
||||
return (optionModelTitle.value = '属性配置')
|
||||
}
|
||||
if (type === 'enum') {
|
||||
fieldOptionForm.value = option ? JSON.parse(JSON.stringify(option)) : {}
|
||||
return (optionModelTitle.value = '枚举值配置')
|
||||
}
|
||||
fieldOptionForm.value = option ? JSON.parse(JSON.stringify(option)) : {}
|
||||
return (optionModelTitle.value = '约束条件配置')
|
||||
}
|
||||
|
||||
// 保存字段 某个 配置项
|
||||
const saveFieldOption = () => {
|
||||
if (formFieldOptionIndex.value === -1) {
|
||||
if (fieldOptionType.value === 'property') {
|
||||
fieldPropertiesList.value.push(fieldOptionForm.value)
|
||||
}
|
||||
if (fieldOptionType.value === 'constraint') {
|
||||
fieldConstraintsList.value.push(fieldOptionForm.value)
|
||||
}
|
||||
if (fieldOptionType.value === 'enum') {
|
||||
fieldEnumList.value.push(fieldOptionForm.value)
|
||||
}
|
||||
} else {
|
||||
fieldOptionType.value === 'property' &&
|
||||
fieldPropertiesList.value.splice(formFieldOptionIndex.value, 1, fieldOptionForm.value)
|
||||
fieldOptionType.value === 'constraint' &&
|
||||
fieldConstraintsList.value.splice(formFieldOptionIndex.value, 1, fieldOptionForm.value)
|
||||
fieldOptionType.value === 'enum' &&
|
||||
fieldEnumList.value.splice(formFieldOptionIndex.value, 1, fieldOptionForm.value)
|
||||
}
|
||||
fieldOptionModelVisible.value = false
|
||||
fieldOptionForm.value = {}
|
||||
}
|
||||
// 保存字段配置
|
||||
const saveField = () => {
|
||||
const { id, type, label, defaultValue, datePattern } = formFieldForm.value
|
||||
const Field = bpmnInstances().moddle.create(`${prefix}:FormField`, { id, type, label })
|
||||
defaultValue && (Field.defaultValue = defaultValue)
|
||||
datePattern && (Field.datePattern = datePattern)
|
||||
// 构建属性
|
||||
if (fieldPropertiesList.value && fieldPropertiesList.value.length) {
|
||||
const fieldPropertyList = fieldPropertiesList.value.map((fp) => {
|
||||
return bpmnInstances().moddle.create(`${prefix}:Property`, {
|
||||
id: fp.id,
|
||||
value: fp.value
|
||||
})
|
||||
})
|
||||
Field.properties = bpmnInstances().moddle.create(`${prefix}:Properties`, {
|
||||
values: fieldPropertyList
|
||||
})
|
||||
}
|
||||
// 构建校验规则
|
||||
if (fieldConstraintsList.value && fieldConstraintsList.value.length) {
|
||||
const fieldConstraintList = fieldConstraintsList.value.map((fc) => {
|
||||
return bpmnInstances().moddle.create(`${prefix}:Constraint`, {
|
||||
name: fc.name,
|
||||
config: fc.config
|
||||
})
|
||||
})
|
||||
Field.validation = bpmnInstances().moddle.create(`${prefix}:Validation`, {
|
||||
constraints: fieldConstraintList
|
||||
})
|
||||
}
|
||||
// 构建枚举值
|
||||
if (fieldEnumList.value && fieldEnumList.value.length) {
|
||||
Field.values = fieldEnumList.value.map((fe) => {
|
||||
return bpmnInstances().moddle.create(`${prefix}:Value`, { name: fe.name, id: fe.id })
|
||||
})
|
||||
}
|
||||
// 更新数组 与 表单配置实例
|
||||
if (formFieldIndex.value === -1) {
|
||||
fieldList.value.push(formFieldForm.value)
|
||||
formData.value.fields.push(Field)
|
||||
} else {
|
||||
fieldList.value.splice(formFieldIndex.value, 1, formFieldForm.value)
|
||||
formData.value.fields.splice(formFieldIndex.value, 1, Field)
|
||||
}
|
||||
updateElementExtensions()
|
||||
fieldModelVisible.value = false
|
||||
}
|
||||
|
||||
// 移除某个 字段的 配置项
|
||||
const removeFieldOptionItem = (option, index, type) => {
|
||||
// console.log(option, 'option')
|
||||
if (type === 'property') {
|
||||
fieldPropertiesList.value.splice(index, 1)
|
||||
return
|
||||
}
|
||||
if (type === 'enum') {
|
||||
fieldEnumList.value.splice(index, 1)
|
||||
return
|
||||
}
|
||||
fieldConstraintsList.value.splice(index, 1)
|
||||
}
|
||||
// 移除 字段
|
||||
const removeField = (field, index) => {
|
||||
console.log(field, 'field')
|
||||
fieldList.value.splice(index, 1)
|
||||
formData.value.fields.splice(index, 1)
|
||||
updateElementExtensions()
|
||||
}
|
||||
|
||||
const updateElementExtensions = () => {
|
||||
// 更新回扩展元素
|
||||
const newElExtensionElements = bpmnInstances().moddle.create(`bpmn:ExtensionElements`, {
|
||||
values: otherExtensions.value.concat(formData.value)
|
||||
})
|
||||
// 更新到元素上
|
||||
bpmnInstances().modeling.updateProperties(toRaw(bpmnELement.value), {
|
||||
extensionElements: newElExtensionElements
|
||||
})
|
||||
}
|
||||
|
||||
const formList = ref([]) // 流程表单的下拉框的数据
|
||||
onMounted(async () => {
|
||||
await getFormSimpleList().then(res => {
|
||||
formList.value = res.data
|
||||
})
|
||||
})
|
||||
|
||||
watch(
|
||||
() => props.id,
|
||||
(val) => {
|
||||
val &&
|
||||
val.length &&
|
||||
nextTick(() => {
|
||||
resetFormList()
|
||||
})
|
||||
},
|
||||
{ immediate: true }
|
||||
)
|
||||
</script>
|
||||
<template>
|
||||
<div class="panel-tab__content">
|
||||
<el-form label-width="80px">
|
||||
<el-form-item label="流程表单">
|
||||
<!-- <el-input v-model="formKey" clearable @change="updateElementFormKey" />-->
|
||||
<el-select v-model="formKey" clearable @change="updateElementFormKey" filterable>
|
||||
<el-option v-for="form in formList" :key="form.id" :label="form.name" :value="form.id" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<!-- <el-form-item label="业务标识">-->
|
||||
<!-- <el-select v-model="businessKey" @change="updateElementBusinessKey">-->
|
||||
<!-- <el-option v-for="i in fieldList" :key="i.id" :value="i.id" :label="i.label" />-->
|
||||
<!-- <el-option label="无" value="" />-->
|
||||
<!-- </el-select>-->
|
||||
<!-- </el-form-item>-->
|
||||
</el-form>
|
||||
|
||||
<!--字段列表-->
|
||||
<!-- <div class="element-property list-property">-->
|
||||
<!-- <el-divider><Icon icon="ep:coin" /> 表单字段</el-divider>-->
|
||||
<!-- <el-table :data="fieldList" max-height="240" fit border>-->
|
||||
<!-- <el-table-column label="序号" type="index" width="50px" />-->
|
||||
<!-- <el-table-column label="字段名称" prop="label" min-width="80px" show-overflow-tooltip />-->
|
||||
<!-- <el-table-column-->
|
||||
<!-- label="字段类型"-->
|
||||
<!-- prop="type"-->
|
||||
<!-- min-width="80px"-->
|
||||
<!-- :formatter="(row) => fieldType[row.type] || row.type"-->
|
||||
<!-- show-overflow-tooltip-->
|
||||
<!-- />-->
|
||||
<!-- <el-table-column-->
|
||||
<!-- label="默认值"-->
|
||||
<!-- prop="defaultValue"-->
|
||||
<!-- min-width="80px"-->
|
||||
<!-- show-overflow-tooltip-->
|
||||
<!-- />-->
|
||||
<!-- <el-table-column label="操作" width="90px">-->
|
||||
<!-- <template #default="scope">-->
|
||||
<!-- <el-button type="primary" link @click="openFieldForm(scope, scope.$index)"-->
|
||||
<!-- >编辑</el-button-->
|
||||
<!-- >-->
|
||||
<!-- <el-divider direction="vertical" />-->
|
||||
<!-- <el-button-->
|
||||
<!-- type="primary"-->
|
||||
<!-- link-->
|
||||
<!-- style="color: #ff4d4f"-->
|
||||
<!-- @click="removeField(scope, scope.$index)"-->
|
||||
<!-- >移除</el-button-->
|
||||
<!-- >-->
|
||||
<!-- </template>-->
|
||||
<!-- </el-table-column>-->
|
||||
<!-- </el-table>-->
|
||||
<!-- </div>-->
|
||||
<!-- <div class="element-drawer__button">-->
|
||||
<!-- <XButton type="primary" proIcon="ep:plus" title="添加字段" @click="openFieldForm(null, -1)" />-->
|
||||
<!-- </div>-->
|
||||
|
||||
<!--字段配置侧边栏-->
|
||||
<!-- <el-drawer-->
|
||||
<!-- v-model="fieldModelVisible"-->
|
||||
<!-- title="字段配置"-->
|
||||
<!-- :size="`${width}px`"-->
|
||||
<!-- append-to-body-->
|
||||
<!-- destroy-on-close-->
|
||||
<!-- >-->
|
||||
<!-- <el-form :model="formFieldForm" label-width="90px">-->
|
||||
<!-- <el-form-item label="字段ID">-->
|
||||
<!-- <el-input v-model="formFieldForm.id" clearable />-->
|
||||
<!-- </el-form-item>-->
|
||||
<!-- <el-form-item label="类型">-->
|
||||
<!-- <el-select-->
|
||||
<!-- v-model="formFieldForm.typeType"-->
|
||||
<!-- placeholder="请选择字段类型"-->
|
||||
<!-- clearable-->
|
||||
<!-- @change="changeFieldTypeType"-->
|
||||
<!-- >-->
|
||||
<!-- <el-option v-for="(value, key) of fieldType" :label="value" :value="key" :key="key" />-->
|
||||
<!-- </el-select>-->
|
||||
<!-- </el-form-item>-->
|
||||
<!-- <el-form-item label="类型名称" v-if="formFieldForm.typeType === 'custom'">-->
|
||||
<!-- <el-input v-model="formFieldForm.type" clearable />-->
|
||||
<!-- </el-form-item>-->
|
||||
<!-- <el-form-item label="名称">-->
|
||||
<!-- <el-input v-model="formFieldForm.label" clearable />-->
|
||||
<!-- </el-form-item>-->
|
||||
<!-- <el-form-item label="时间格式" v-if="formFieldForm.typeType === 'date'">-->
|
||||
<!-- <el-input v-model="formFieldForm.datePattern" clearable />-->
|
||||
<!-- </el-form-item>-->
|
||||
<!-- <el-form-item label="默认值">-->
|
||||
<!-- <el-input v-model="formFieldForm.defaultValue" clearable />-->
|
||||
<!-- </el-form-item>-->
|
||||
<!-- </el-form>-->
|
||||
|
||||
<!-- <!– 枚举值设置 –>-->
|
||||
<!-- <template v-if="formFieldForm.type === 'enum'">-->
|
||||
<!-- <el-divider key="enum-divider" />-->
|
||||
<!-- <p class="listener-filed__title" key="enum-title">-->
|
||||
<!-- <span><Icon icon="ep:menu" />枚举值列表：</span>-->
|
||||
<!-- <el-button type="primary" @click="openFieldOptionForm(null, -1, 'enum')"-->
|
||||
<!-- >添加枚举值</el-button-->
|
||||
<!-- >-->
|
||||
<!-- </p>-->
|
||||
<!-- <el-table :data="fieldEnumList" key="enum-table" max-height="240" fit border>-->
|
||||
<!-- <el-table-column label="序号" width="50px" type="index" />-->
|
||||
<!-- <el-table-column label="枚举值编号" prop="id" min-width="100px" show-overflow-tooltip />-->
|
||||
<!-- <el-table-column label="枚举值名称" prop="name" min-width="100px" show-overflow-tooltip />-->
|
||||
<!-- <el-table-column label="操作" width="90px">-->
|
||||
<!-- <template #default="scope">-->
|
||||
<!-- <el-button-->
|
||||
<!-- type="primary"-->
|
||||
<!-- link-->
|
||||
<!-- @click="openFieldOptionForm(scope, scope.$index, 'enum')"-->
|
||||
<!-- >编辑</el-button-->
|
||||
<!-- >-->
|
||||
<!-- <el-divider direction="vertical" />-->
|
||||
<!-- <el-button-->
|
||||
<!-- type="primary"-->
|
||||
<!-- link-->
|
||||
<!-- style="color: #ff4d4f"-->
|
||||
<!-- @click="removeFieldOptionItem(scope, scope.$index, 'enum')"-->
|
||||
<!-- >移除</el-button-->
|
||||
<!-- >-->
|
||||
<!-- </template>-->
|
||||
<!-- </el-table-column>-->
|
||||
<!-- </el-table>-->
|
||||
<!-- </template>-->
|
||||
|
||||
<!-- <!– 校验规则 –>-->
|
||||
<!-- <el-divider key="validation-divider" />-->
|
||||
<!-- <p class="listener-filed__title" key="validation-title">-->
|
||||
<!-- <span><Icon icon="ep:menu" />约束条件列表：</span>-->
|
||||
<!-- <el-button type="primary" @click="openFieldOptionForm(null, -1, 'constraint')"-->
|
||||
<!-- >添加约束</el-button-->
|
||||
<!-- >-->
|
||||
<!-- </p>-->
|
||||
<!-- <el-table :data="fieldConstraintsList" key="validation-table" max-height="240" fit border>-->
|
||||
<!-- <el-table-column label="序号" width="50px" type="index" />-->
|
||||
<!-- <el-table-column label="约束名称" prop="name" min-width="100px" show-overflow-tooltip />-->
|
||||
<!-- <el-table-column label="约束配置" prop="config" min-width="100px" show-overflow-tooltip />-->
|
||||
<!-- <el-table-column label="操作" width="90px">-->
|
||||
<!-- <template #default="scope">-->
|
||||
<!-- <el-button-->
|
||||
<!-- type="primary"-->
|
||||
<!-- link-->
|
||||
<!-- @click="openFieldOptionForm(scope, scope.$index, 'constraint')"-->
|
||||
<!-- >编辑</el-button-->
|
||||
<!-- >-->
|
||||
<!-- <el-divider direction="vertical" />-->
|
||||
<!-- <el-button-->
|
||||
<!-- type="primary"-->
|
||||
<!-- link-->
|
||||
<!-- style="color: #ff4d4f"-->
|
||||
<!-- @click="removeFieldOptionItem(scope, scope.$index, 'constraint')"-->
|
||||
<!-- >移除</el-button-->
|
||||
<!-- >-->
|
||||
<!-- </template>-->
|
||||
<!-- </el-table-column>-->
|
||||
<!-- </el-table>-->
|
||||
|
||||
<!-- <!– 表单属性 –>-->
|
||||
<!-- <el-divider key="property-divider" />-->
|
||||
<!-- <p class="listener-filed__title" key="property-title">-->
|
||||
<!-- <span><Icon icon="ep:menu" />字段属性列表：</span>-->
|
||||
<!-- <el-button type="primary" @click="openFieldOptionForm(null, -1, 'property')"-->
|
||||
<!-- >添加属性</el-button-->
|
||||
<!-- >-->
|
||||
<!-- </p>-->
|
||||
<!-- <el-table :data="fieldPropertiesList" key="property-table" max-height="240" fit border>-->
|
||||
<!-- <el-table-column label="序号" width="50px" type="index" />-->
|
||||
<!-- <el-table-column label="属性编号" prop="id" min-width="100px" show-overflow-tooltip />-->
|
||||
<!-- <el-table-column label="属性值" prop="value" min-width="100px" show-overflow-tooltip />-->
|
||||
<!-- <el-table-column label="操作" width="90px">-->
|
||||
<!-- <template #default="scope">-->
|
||||
<!-- <el-button-->
|
||||
<!-- type="primary"-->
|
||||
<!-- link-->
|
||||
<!-- @click="openFieldOptionForm(scope, scope.$index, 'property')"-->
|
||||
<!-- >编辑</el-button-->
|
||||
<!-- >-->
|
||||
<!-- <el-divider direction="vertical" />-->
|
||||
<!-- <el-button-->
|
||||
<!-- type="primary"-->
|
||||
<!-- link-->
|
||||
<!-- style="color: #ff4d4f"-->
|
||||
<!-- @click="removeFieldOptionItem(scope, scope.$index, 'property')"-->
|
||||
<!-- >移除</el-button-->
|
||||
<!-- >-->
|
||||
<!-- </template>-->
|
||||
<!-- </el-table-column>-->
|
||||
<!-- </el-table>-->
|
||||
|
||||
<!-- <!– 底部按钮 –>-->
|
||||
<!-- <div class="element-drawer__button">-->
|
||||
<!-- <el-button>取 消</el-button>-->
|
||||
<!-- <el-button type="primary" @click="saveField">保 存</el-button>-->
|
||||
<!-- </div>-->
|
||||
<!-- </el-drawer>-->
|
||||
|
||||
<!-- <el-dialog-->
|
||||
<!-- v-model="fieldOptionModelVisible"-->
|
||||
<!-- :title="optionModelTitle"-->
|
||||
<!-- width="600px"-->
|
||||
<!-- append-to-body-->
|
||||
<!-- destroy-on-close-->
|
||||
<!-- >-->
|
||||
<!-- <el-form :model="fieldOptionForm" label-width="96px">-->
|
||||
<!-- <el-form-item label="编号/ID" v-if="fieldOptionType !== 'constraint'" key="option-id">-->
|
||||
<!-- <el-input v-model="fieldOptionForm.id" clearable />-->
|
||||
<!-- </el-form-item>-->
|
||||
<!-- <el-form-item label="名称" v-if="fieldOptionType !== 'property'" key="option-name">-->
|
||||
<!-- <el-input v-model="fieldOptionForm.name" clearable />-->
|
||||
<!-- </el-form-item>-->
|
||||
<!-- <el-form-item label="配置" v-if="fieldOptionType === 'constraint'" key="option-config">-->
|
||||
<!-- <el-input v-model="fieldOptionForm.config" clearable />-->
|
||||
<!-- </el-form-item>-->
|
||||
<!-- <el-form-item label="值" v-if="fieldOptionType === 'property'" key="option-value">-->
|
||||
<!-- <el-input v-model="fieldOptionForm.value" clearable />-->
|
||||
<!-- </el-form-item>-->
|
||||
<!-- </el-form>-->
|
||||
<!-- <template #footer>-->
|
||||
<!-- <el-button @click="fieldOptionModelVisible = false">取 消</el-button>-->
|
||||
<!-- <el-button type="primary" @click="saveFieldOption">确 定</el-button>-->
|
||||
<!-- </template>-->
|
||||
<!-- </el-dialog>-->
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { getFormSimpleList } from '@/api/bpm-boot/form'
|
||||
|
||||
|
||||
defineOptions({ name: 'ElementForm' })
|
||||
|
||||
const props = defineProps({
|
||||
id: String,
|
||||
type: String
|
||||
})
|
||||
const prefix = inject('prefix')
|
||||
const width = inject('width')
|
||||
|
||||
const formKey = ref('')
|
||||
const businessKey = ref('')
|
||||
const optionModelTitle = ref('')
|
||||
const fieldList = ref<any[]>([])
|
||||
const formFieldForm = ref<any>({})
|
||||
const fieldType = ref({
|
||||
long: '长整型',
|
||||
string: '字符串',
|
||||
boolean: '布尔类',
|
||||
date: '日期类',
|
||||
enum: '枚举类',
|
||||
custom: '自定义类型'
|
||||
})
|
||||
const formFieldIndex = ref(-1) // 编辑中的字段， -1 为新增
|
||||
const formFieldOptionIndex = ref(-1) // 编辑中的字段配置项， -1 为新增
|
||||
const fieldModelVisible = ref(false)
|
||||
const fieldOptionModelVisible = ref(false)
|
||||
const fieldOptionForm = ref<any>({}) // 当前激活的字段配置项数据
|
||||
const fieldOptionType = ref('') // 当前激活的字段配置项弹窗 类型
|
||||
const fieldEnumList = ref<any[]>([]) // 枚举值列表
|
||||
const fieldConstraintsList = ref<any[]>([]) // 约束条件列表
|
||||
const fieldPropertiesList = ref<any[]>([]) // 绑定属性列表
|
||||
const bpmnELement = ref()
|
||||
const elExtensionElements = ref()
|
||||
const formData = ref()
|
||||
const otherExtensions = ref()
|
||||
|
||||
const bpmnInstances = () => (window as any)?.bpmnInstances
|
||||
const resetFormList = () => {
|
||||
bpmnELement.value = bpmnInstances().bpmnElement
|
||||
formKey.value = bpmnELement.value.businessObject.formKey
|
||||
// if (formKey.value?.length > 0) {
|
||||
// formKey.value = parseInt(formKey.value)
|
||||
// }
|
||||
// 获取元素扩展属性 或者 创建扩展属性
|
||||
elExtensionElements.value =
|
||||
bpmnELement.value.businessObject.get('extensionElements') ||
|
||||
bpmnInstances().moddle.create('bpmn:ExtensionElements', { values: [] })
|
||||
// 获取元素表单配置 或者 创建新的表单配置
|
||||
formData.value =
|
||||
elExtensionElements.value.values.filter((ex) => ex.$type === `${prefix}:FormData`)?.[0] ||
|
||||
bpmnInstances().moddle.create(`${prefix}:FormData`, { fields: [] })
|
||||
|
||||
// 业务标识 businessKey， 绑定在 formData 中
|
||||
businessKey.value = formData.value.businessKey
|
||||
|
||||
// 保留剩余扩展元素，便于后面更新该元素对应属性
|
||||
otherExtensions.value = elExtensionElements.value.values.filter(
|
||||
(ex) => ex.$type !== `${prefix}:FormData`
|
||||
)
|
||||
|
||||
// 复制原始值，填充表格
|
||||
fieldList.value = JSON.parse(JSON.stringify(formData.value.fields || []))
|
||||
|
||||
// 更新元素扩展属性，避免后续报错
|
||||
updateElementExtensions()
|
||||
}
|
||||
const updateElementFormKey = () => {
|
||||
bpmnInstances().modeling.updateProperties(toRaw(bpmnELement.value), {
|
||||
formKey: formKey.value
|
||||
})
|
||||
}
|
||||
const updateElementBusinessKey = () => {
|
||||
bpmnInstances().modeling.updateModdleProperties(toRaw(bpmnELement.value), formData.value, {
|
||||
businessKey: businessKey.value
|
||||
})
|
||||
}
|
||||
// 根据类型调整字段type
|
||||
const changeFieldTypeType = (type) => {
|
||||
// this.$set(this.formFieldForm, "type", type === "custom" ? "" : type);
|
||||
formFieldForm.value['type'] = type === 'custom' ? '' : type
|
||||
}
|
||||
|
||||
// 打开字段详情侧边栏
|
||||
const openFieldForm = (field, index) => {
|
||||
formFieldIndex.value = index
|
||||
if (index !== -1) {
|
||||
const FieldObject = formData.value.fields[index]
|
||||
formFieldForm.value = JSON.parse(JSON.stringify(field))
|
||||
// 设置自定义类型
|
||||
// this.$set(this.formFieldForm, "typeType", !this.fieldType[field.type] ? "custom" : field.type);
|
||||
formFieldForm.value['typeType'] = !fieldType.value[field.type] ? 'custom' : field.type
|
||||
// 初始化枚举值列表
|
||||
field.type === 'enum' &&
|
||||
(fieldEnumList.value = JSON.parse(JSON.stringify(FieldObject?.values || [])))
|
||||
// 初始化约束条件列表
|
||||
fieldConstraintsList.value = JSON.parse(
|
||||
JSON.stringify(FieldObject?.validation?.constraints || [])
|
||||
)
|
||||
// 初始化自定义属性列表
|
||||
fieldPropertiesList.value = JSON.parse(JSON.stringify(FieldObject?.properties?.values || []))
|
||||
} else {
|
||||
formFieldForm.value = {}
|
||||
// 初始化枚举值列表
|
||||
fieldEnumList.value = []
|
||||
// 初始化约束条件列表
|
||||
fieldConstraintsList.value = []
|
||||
// 初始化自定义属性列表
|
||||
fieldPropertiesList.value = []
|
||||
}
|
||||
fieldModelVisible.value = true
|
||||
}
|
||||
// 打开字段 某个 配置项 弹窗
|
||||
const openFieldOptionForm = (option, index, type) => {
|
||||
fieldOptionModelVisible.value = true
|
||||
fieldOptionType.value = type
|
||||
formFieldOptionIndex.value = index
|
||||
if (type === 'property') {
|
||||
fieldOptionForm.value = option ? JSON.parse(JSON.stringify(option)) : {}
|
||||
return (optionModelTitle.value = '属性配置')
|
||||
}
|
||||
if (type === 'enum') {
|
||||
fieldOptionForm.value = option ? JSON.parse(JSON.stringify(option)) : {}
|
||||
return (optionModelTitle.value = '枚举值配置')
|
||||
}
|
||||
fieldOptionForm.value = option ? JSON.parse(JSON.stringify(option)) : {}
|
||||
return (optionModelTitle.value = '约束条件配置')
|
||||
}
|
||||
|
||||
// 保存字段 某个 配置项
|
||||
const saveFieldOption = () => {
|
||||
if (formFieldOptionIndex.value === -1) {
|
||||
if (fieldOptionType.value === 'property') {
|
||||
fieldPropertiesList.value.push(fieldOptionForm.value)
|
||||
}
|
||||
if (fieldOptionType.value === 'constraint') {
|
||||
fieldConstraintsList.value.push(fieldOptionForm.value)
|
||||
}
|
||||
if (fieldOptionType.value === 'enum') {
|
||||
fieldEnumList.value.push(fieldOptionForm.value)
|
||||
}
|
||||
} else {
|
||||
fieldOptionType.value === 'property' &&
|
||||
fieldPropertiesList.value.splice(formFieldOptionIndex.value, 1, fieldOptionForm.value)
|
||||
fieldOptionType.value === 'constraint' &&
|
||||
fieldConstraintsList.value.splice(formFieldOptionIndex.value, 1, fieldOptionForm.value)
|
||||
fieldOptionType.value === 'enum' &&
|
||||
fieldEnumList.value.splice(formFieldOptionIndex.value, 1, fieldOptionForm.value)
|
||||
}
|
||||
fieldOptionModelVisible.value = false
|
||||
fieldOptionForm.value = {}
|
||||
}
|
||||
// 保存字段配置
|
||||
const saveField = () => {
|
||||
const { id, type, label, defaultValue, datePattern } = formFieldForm.value
|
||||
const Field = bpmnInstances().moddle.create(`${prefix}:FormField`, { id, type, label })
|
||||
defaultValue && (Field.defaultValue = defaultValue)
|
||||
datePattern && (Field.datePattern = datePattern)
|
||||
// 构建属性
|
||||
if (fieldPropertiesList.value && fieldPropertiesList.value.length) {
|
||||
const fieldPropertyList = fieldPropertiesList.value.map((fp) => {
|
||||
return bpmnInstances().moddle.create(`${prefix}:Property`, {
|
||||
id: fp.id,
|
||||
value: fp.value
|
||||
})
|
||||
})
|
||||
Field.properties = bpmnInstances().moddle.create(`${prefix}:Properties`, {
|
||||
values: fieldPropertyList
|
||||
})
|
||||
}
|
||||
// 构建校验规则
|
||||
if (fieldConstraintsList.value && fieldConstraintsList.value.length) {
|
||||
const fieldConstraintList = fieldConstraintsList.value.map((fc) => {
|
||||
return bpmnInstances().moddle.create(`${prefix}:Constraint`, {
|
||||
name: fc.name,
|
||||
config: fc.config
|
||||
})
|
||||
})
|
||||
Field.validation = bpmnInstances().moddle.create(`${prefix}:Validation`, {
|
||||
constraints: fieldConstraintList
|
||||
})
|
||||
}
|
||||
// 构建枚举值
|
||||
if (fieldEnumList.value && fieldEnumList.value.length) {
|
||||
Field.values = fieldEnumList.value.map((fe) => {
|
||||
return bpmnInstances().moddle.create(`${prefix}:Value`, { name: fe.name, id: fe.id })
|
||||
})
|
||||
}
|
||||
// 更新数组 与 表单配置实例
|
||||
if (formFieldIndex.value === -1) {
|
||||
fieldList.value.push(formFieldForm.value)
|
||||
formData.value.fields.push(Field)
|
||||
} else {
|
||||
fieldList.value.splice(formFieldIndex.value, 1, formFieldForm.value)
|
||||
formData.value.fields.splice(formFieldIndex.value, 1, Field)
|
||||
}
|
||||
updateElementExtensions()
|
||||
fieldModelVisible.value = false
|
||||
}
|
||||
|
||||
// 移除某个 字段的 配置项
|
||||
const removeFieldOptionItem = (option, index, type) => {
|
||||
// console.log(option, 'option')
|
||||
if (type === 'property') {
|
||||
fieldPropertiesList.value.splice(index, 1)
|
||||
return
|
||||
}
|
||||
if (type === 'enum') {
|
||||
fieldEnumList.value.splice(index, 1)
|
||||
return
|
||||
}
|
||||
fieldConstraintsList.value.splice(index, 1)
|
||||
}
|
||||
// 移除 字段
|
||||
const removeField = (field, index) => {
|
||||
console.log(field, 'field')
|
||||
fieldList.value.splice(index, 1)
|
||||
formData.value.fields.splice(index, 1)
|
||||
updateElementExtensions()
|
||||
}
|
||||
|
||||
const updateElementExtensions = () => {
|
||||
// 更新回扩展元素
|
||||
const newElExtensionElements = bpmnInstances().moddle.create(`bpmn:ExtensionElements`, {
|
||||
values: otherExtensions.value.concat(formData.value)
|
||||
})
|
||||
// 更新到元素上
|
||||
bpmnInstances().modeling.updateProperties(toRaw(bpmnELement.value), {
|
||||
extensionElements: newElExtensionElements
|
||||
})
|
||||
}
|
||||
|
||||
const formList = ref([]) // 流程表单的下拉框的数据
|
||||
onMounted(async () => {
|
||||
await getFormSimpleList().then(res => {
|
||||
formList.value = res.data
|
||||
})
|
||||
})
|
||||
|
||||
watch(
|
||||
() => props.id,
|
||||
(val) => {
|
||||
val &&
|
||||
val.length &&
|
||||
nextTick(() => {
|
||||
resetFormList()
|
||||
})
|
||||
},
|
||||
{ immediate: true }
|
||||
)
|
||||
</script>
|
||||
|
||||
@@ -64,7 +64,7 @@
|
||||
prop='event'
|
||||
:rules="{ required: true, trigger: ['blur', 'change'] }"
|
||||
>
|
||||
<el-select v-model='listenerForm.event'>
|
||||
<el-select v-model='listenerForm.event' filterable>
|
||||
<el-option label='start' value='start' />
|
||||
<el-option label='end' value='end' />
|
||||
</el-select>
|
||||
@@ -74,7 +74,7 @@
|
||||
prop='listenerType'
|
||||
:rules="{ required: true, trigger: ['blur', 'change'] }"
|
||||
>
|
||||
<el-select v-model='listenerForm.listenerType'>
|
||||
<el-select v-model='listenerForm.listenerType' filterable>
|
||||
<el-option
|
||||
v-for='i in Object.keys(listenerTypeObject)'
|
||||
:key='i'
|
||||
@@ -125,7 +125,7 @@
|
||||
key='listener-script-type'
|
||||
:rules="{ required: true, trigger: ['blur', 'change'], message: '请选择脚本类型' }"
|
||||
>
|
||||
<el-select v-model='listenerForm.scriptType'>
|
||||
<el-select v-model='listenerForm.scriptType' filterable>
|
||||
<el-option label='内联脚本' value='inlineScript' />
|
||||
<el-option label='外部脚本' value='externalScript' />
|
||||
</el-select>
|
||||
@@ -228,7 +228,7 @@
|
||||
prop='fieldType'
|
||||
:rules="{ required: true, trigger: ['blur', 'change'] }"
|
||||
>
|
||||
<el-select v-model='listenerFieldForm.fieldType'>
|
||||
<el-select v-model='listenerFieldForm.fieldType' filterable>
|
||||
<el-option
|
||||
v-for='i in Object.keys(fieldTypeObject)'
|
||||
:key='i'
|
||||
|
||||
@@ -62,7 +62,7 @@
|
||||
prop="event"
|
||||
:rules="{ required: true, trigger: ['blur', 'change'] }"
|
||||
>
|
||||
<el-select v-model="listenerForm.event">
|
||||
<el-select v-model="listenerForm.event" filterable>
|
||||
<el-option
|
||||
v-for="i in Object.keys(listenerEventTypeObject)"
|
||||
:key="i"
|
||||
@@ -83,7 +83,7 @@
|
||||
prop="listenerType"
|
||||
:rules="{ required: true, trigger: ['blur', 'change'] }"
|
||||
>
|
||||
<el-select v-model="listenerForm.listenerType">
|
||||
<el-select v-model="listenerForm.listenerType" filterable>
|
||||
<el-option
|
||||
v-for="i in Object.keys(listenerTypeObject)"
|
||||
:key="i"
|
||||
@@ -134,7 +134,7 @@
|
||||
key="listener-script-type"
|
||||
:rules="{ required: true, trigger: ['blur', 'change'], message: '请选择脚本类型' }"
|
||||
>
|
||||
<el-select v-model="listenerForm.scriptType">
|
||||
<el-select v-model="listenerForm.scriptType" filterable>
|
||||
<el-option label="内联脚本" value="inlineScript" />
|
||||
<el-option label="外部脚本" value="externalScript" />
|
||||
</el-select>
|
||||
@@ -161,7 +161,7 @@
|
||||
|
||||
<template v-if="listenerForm.event === 'timeout'">
|
||||
<el-form-item label="定时器类型" prop="eventDefinitionType" key="eventDefinitionType">
|
||||
<el-select v-model="listenerForm.eventDefinitionType">
|
||||
<el-select v-model="listenerForm.eventDefinitionType" filterable>
|
||||
<el-option label="统计时间" value="date" />
|
||||
<el-option label="持续时长" value="duration" />
|
||||
<el-option label="循环" value="cycle" />
|
||||
@@ -259,7 +259,7 @@
|
||||
prop="fieldType"
|
||||
:rules="{ required: true, trigger: ['blur', 'change'] }"
|
||||
>
|
||||
<el-select v-model="listenerFieldForm.fieldType">
|
||||
<el-select v-model="listenerFieldForm.fieldType" filterable>
|
||||
<el-option
|
||||
v-for="i in Object.keys(fieldTypeObject)"
|
||||
:key="i"
|
||||
|
||||
@@ -1,280 +1,280 @@
|
||||
<template>
|
||||
<div class="panel-tab__content">
|
||||
<el-form label-width="90px">
|
||||
<el-form-item label="快捷配置">
|
||||
<el-button size="small" @click="changeConfig('依次审批')">依次审批</el-button>
|
||||
<el-button size="small" @click="changeConfig('会签')">会签</el-button>
|
||||
<el-button size="small" @click="changeConfig('或签')">或签</el-button>
|
||||
</el-form-item>
|
||||
<el-form-item label="会签类型">
|
||||
<el-select v-model="loopCharacteristics" @change="changeLoopCharacteristicsType">
|
||||
<el-option label="并行多重事件" value="ParallelMultiInstance" />
|
||||
<el-option label="时序多重事件" value="SequentialMultiInstance" />
|
||||
<el-option label="无" value="Null" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<template
|
||||
v-if="
|
||||
loopCharacteristics === 'ParallelMultiInstance' ||
|
||||
loopCharacteristics === 'SequentialMultiInstance'
|
||||
"
|
||||
>
|
||||
<el-form-item label="循环数量" key="loopCardinality">
|
||||
<el-input
|
||||
v-model="loopInstanceForm.loopCardinality"
|
||||
clearable
|
||||
@change="updateLoopCardinality"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="集合" key="collection" v-show="false">
|
||||
<el-input v-model="loopInstanceForm.collection" clearable @change="updateLoopBase" />
|
||||
</el-form-item>
|
||||
<!-- add by 芋艿：由于「元素变量」暂时用不到，所以这里 display 为 none -->
|
||||
<el-form-item label="元素变量" key="elementVariable" style="display: none">
|
||||
<el-input v-model="loopInstanceForm.elementVariable" clearable @change="updateLoopBase" />
|
||||
</el-form-item>
|
||||
<el-form-item label="完成条件" key="completionCondition">
|
||||
<el-input
|
||||
v-model="loopInstanceForm.completionCondition"
|
||||
clearable
|
||||
@change="updateLoopCondition"
|
||||
/>
|
||||
</el-form-item>
|
||||
<!-- add by 芋艿：由于「异步状态」暂时用不到，所以这里 display 为 none -->
|
||||
<el-form-item label="异步状态" key="async" style="display: none">
|
||||
<el-checkbox
|
||||
v-model="loopInstanceForm.asyncBefore"
|
||||
label="异步前"
|
||||
@change="updateLoopAsync('asyncBefore')"
|
||||
/>
|
||||
<el-checkbox
|
||||
v-model="loopInstanceForm.asyncAfter"
|
||||
label="异步后"
|
||||
@change="updateLoopAsync('asyncAfter')"
|
||||
/>
|
||||
<el-checkbox
|
||||
v-model="loopInstanceForm.exclusive"
|
||||
v-if="loopInstanceForm.asyncAfter || loopInstanceForm.asyncBefore"
|
||||
label="排除"
|
||||
@change="updateLoopAsync('exclusive')"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
label="重试周期"
|
||||
prop="timeCycle"
|
||||
v-if="loopInstanceForm.asyncAfter || loopInstanceForm.asyncBefore"
|
||||
key="timeCycle"
|
||||
>
|
||||
<el-input v-model="loopInstanceForm.timeCycle" clearable @change="updateLoopTimeCycle" />
|
||||
</el-form-item>
|
||||
</template>
|
||||
</el-form>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
defineOptions({ name: 'ElementMultiInstance' })
|
||||
|
||||
const props = defineProps({
|
||||
businessObject: Object,
|
||||
type: String
|
||||
})
|
||||
const prefix = inject('prefix')
|
||||
const loopCharacteristics = ref('')
|
||||
//默认配置，用来覆盖原始不存在的选项，避免报错
|
||||
const defaultLoopInstanceForm = ref({
|
||||
completionCondition: '',
|
||||
loopCardinality: '',
|
||||
extensionElements: [],
|
||||
asyncAfter: false,
|
||||
asyncBefore: false,
|
||||
exclusive: false
|
||||
})
|
||||
const loopInstanceForm = ref<any>({})
|
||||
const bpmnElement = ref(null)
|
||||
const multiLoopInstance = ref(null)
|
||||
const bpmnInstances = () => (window as any)?.bpmnInstances
|
||||
|
||||
const getElementLoop = (businessObject) => {
|
||||
if (!businessObject.loopCharacteristics) {
|
||||
loopCharacteristics.value = 'Null'
|
||||
loopInstanceForm.value = {}
|
||||
return
|
||||
}
|
||||
if (businessObject.loopCharacteristics.$type === 'bpmn:StandardLoopCharacteristics') {
|
||||
loopCharacteristics.value = 'StandardLoop'
|
||||
loopInstanceForm.value = {}
|
||||
return
|
||||
}
|
||||
if (businessObject.loopCharacteristics.isSequential) {
|
||||
loopCharacteristics.value = 'SequentialMultiInstance'
|
||||
} else {
|
||||
loopCharacteristics.value = 'ParallelMultiInstance'
|
||||
}
|
||||
// 合并配置
|
||||
loopInstanceForm.value = {
|
||||
...defaultLoopInstanceForm.value,
|
||||
...businessObject.loopCharacteristics,
|
||||
completionCondition: businessObject.loopCharacteristics?.completionCondition?.body ?? '',
|
||||
loopCardinality: businessObject.loopCharacteristics?.loopCardinality?.body ?? ''
|
||||
}
|
||||
// 保留当前元素 businessObject 上的 loopCharacteristics 实例
|
||||
multiLoopInstance.value = bpmnInstances().bpmnElement.businessObject.loopCharacteristics
|
||||
// 更新表单
|
||||
if (
|
||||
businessObject.loopCharacteristics.extensionElements &&
|
||||
businessObject.loopCharacteristics.extensionElements.values &&
|
||||
businessObject.loopCharacteristics.extensionElements.values.length
|
||||
) {
|
||||
loopInstanceForm.value['timeCycle'] =
|
||||
businessObject.loopCharacteristics.extensionElements.values[0].body
|
||||
}
|
||||
}
|
||||
|
||||
const changeLoopCharacteristicsType = (type) => {
|
||||
// this.loopInstanceForm = { ...this.defaultLoopInstanceForm }; // 切换类型取消原表单配置
|
||||
// 取消多实例配置
|
||||
if (type === 'Null') {
|
||||
bpmnInstances().modeling.updateProperties(toRaw(bpmnElement.value), {
|
||||
loopCharacteristics: null
|
||||
})
|
||||
return
|
||||
}
|
||||
// 配置循环
|
||||
if (type === 'StandardLoop') {
|
||||
const loopCharacteristicsObject = bpmnInstances().moddle.create(
|
||||
'bpmn:StandardLoopCharacteristics'
|
||||
)
|
||||
bpmnInstances().modeling.updateProperties(toRaw(bpmnElement.value), {
|
||||
loopCharacteristics: loopCharacteristicsObject
|
||||
})
|
||||
multiLoopInstance.value = null
|
||||
return
|
||||
}
|
||||
// 时序
|
||||
if (type === 'SequentialMultiInstance') {
|
||||
multiLoopInstance.value = bpmnInstances().moddle.create(
|
||||
'bpmn:MultiInstanceLoopCharacteristics',
|
||||
{ isSequential: true }
|
||||
)
|
||||
} else {
|
||||
multiLoopInstance.value = bpmnInstances().moddle.create(
|
||||
'bpmn:MultiInstanceLoopCharacteristics',
|
||||
{ collection: '${coll_userList}' }
|
||||
)
|
||||
}
|
||||
bpmnInstances().modeling.updateProperties(toRaw(bpmnElement.value), {
|
||||
loopCharacteristics: toRaw(multiLoopInstance.value)
|
||||
})
|
||||
}
|
||||
|
||||
// 循环基数
|
||||
const updateLoopCardinality = (cardinality) => {
|
||||
let loopCardinality = null
|
||||
if (cardinality && cardinality.length) {
|
||||
loopCardinality = bpmnInstances().moddle.create('bpmn:FormalExpression', {
|
||||
body: cardinality
|
||||
})
|
||||
}
|
||||
bpmnInstances().modeling.updateModdleProperties(
|
||||
toRaw(bpmnElement.value),
|
||||
multiLoopInstance.value,
|
||||
{
|
||||
loopCardinality
|
||||
}
|
||||
)
|
||||
}
|
||||
|
||||
// 完成条件
|
||||
const updateLoopCondition = (condition) => {
|
||||
let completionCondition = null
|
||||
if (condition && condition.length) {
|
||||
completionCondition = bpmnInstances().moddle.create('bpmn:FormalExpression', {
|
||||
body: condition
|
||||
})
|
||||
}
|
||||
bpmnInstances().modeling.updateModdleProperties(
|
||||
toRaw(bpmnElement.value),
|
||||
multiLoopInstance.value,
|
||||
{
|
||||
completionCondition
|
||||
}
|
||||
)
|
||||
}
|
||||
|
||||
// 重试周期
|
||||
const updateLoopTimeCycle = (timeCycle) => {
|
||||
const extensionElements = bpmnInstances().moddle.create('bpmn:ExtensionElements', {
|
||||
values: [
|
||||
bpmnInstances().moddle.create(`${prefix}:FailedJobRetryTimeCycle`, {
|
||||
body: timeCycle
|
||||
})
|
||||
]
|
||||
})
|
||||
bpmnInstances().modeling.updateModdleProperties(
|
||||
toRaw(bpmnElement.value),
|
||||
multiLoopInstance.value,
|
||||
{
|
||||
extensionElements
|
||||
}
|
||||
)
|
||||
}
|
||||
|
||||
// 直接更新的基础信息
|
||||
const updateLoopBase = () => {
|
||||
bpmnInstances().modeling.updateModdleProperties(
|
||||
toRaw(bpmnElement.value),
|
||||
multiLoopInstance.value,
|
||||
{
|
||||
collection: loopInstanceForm.value.collection || null,
|
||||
elementVariable: loopInstanceForm.value.elementVariable || null
|
||||
}
|
||||
)
|
||||
}
|
||||
|
||||
// 各异步状态
|
||||
const updateLoopAsync = (key) => {
|
||||
const { asyncBefore, asyncAfter } = loopInstanceForm.value
|
||||
let asyncAttr = Object.create(null)
|
||||
if (!asyncBefore && !asyncAfter) {
|
||||
// this.$set(this.loopInstanceForm, "exclusive", false);
|
||||
loopInstanceForm.value['exclusive'] = false
|
||||
asyncAttr = { asyncBefore: false, asyncAfter: false, exclusive: false, extensionElements: null }
|
||||
} else {
|
||||
asyncAttr[key] = loopInstanceForm.value[key]
|
||||
}
|
||||
bpmnInstances().modeling.updateModdleProperties(
|
||||
toRaw(bpmnElement.value),
|
||||
multiLoopInstance.value,
|
||||
asyncAttr
|
||||
)
|
||||
}
|
||||
|
||||
const changeConfig = (config) => {
|
||||
if (config === '依次审批') {
|
||||
changeLoopCharacteristicsType('SequentialMultiInstance')
|
||||
updateLoopCardinality('1')
|
||||
updateLoopCondition('${ nrOfCompletedInstances >= nrOfInstances }')
|
||||
} else if (config === '会签') {
|
||||
changeLoopCharacteristicsType('ParallelMultiInstance')
|
||||
updateLoopCondition('${ nrOfCompletedInstances >= nrOfInstances }')
|
||||
} else if (config === '或签') {
|
||||
changeLoopCharacteristicsType('ParallelMultiInstance')
|
||||
updateLoopCondition('${ nrOfCompletedInstances > 0 }')
|
||||
}
|
||||
}
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
multiLoopInstance.value = null
|
||||
bpmnElement.value = null
|
||||
})
|
||||
|
||||
watch(
|
||||
() => props.businessObject,
|
||||
(val) => {
|
||||
bpmnElement.value = bpmnInstances().bpmnElement
|
||||
getElementLoop(val)
|
||||
},
|
||||
{ immediate: true }
|
||||
)
|
||||
</script>
|
||||
<template>
|
||||
<div class="panel-tab__content">
|
||||
<el-form label-width="90px">
|
||||
<el-form-item label="快捷配置">
|
||||
<el-button size="small" @click="changeConfig('依次审批')">依次审批</el-button>
|
||||
<el-button size="small" @click="changeConfig('会签')">会签</el-button>
|
||||
<el-button size="small" @click="changeConfig('或签')">或签</el-button>
|
||||
</el-form-item>
|
||||
<el-form-item label="会签类型">
|
||||
<el-select v-model="loopCharacteristics" @change="changeLoopCharacteristicsType" filterable>
|
||||
<el-option label="并行多重事件" value="ParallelMultiInstance" />
|
||||
<el-option label="时序多重事件" value="SequentialMultiInstance" />
|
||||
<el-option label="无" value="Null" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<template
|
||||
v-if="
|
||||
loopCharacteristics === 'ParallelMultiInstance' ||
|
||||
loopCharacteristics === 'SequentialMultiInstance'
|
||||
"
|
||||
>
|
||||
<el-form-item label="循环数量" key="loopCardinality">
|
||||
<el-input
|
||||
v-model="loopInstanceForm.loopCardinality"
|
||||
clearable
|
||||
@change="updateLoopCardinality"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="集合" key="collection" v-show="false">
|
||||
<el-input v-model="loopInstanceForm.collection" clearable @change="updateLoopBase" />
|
||||
</el-form-item>
|
||||
<!-- add by 芋艿：由于「元素变量」暂时用不到，所以这里 display 为 none -->
|
||||
<el-form-item label="元素变量" key="elementVariable" style="display: none">
|
||||
<el-input v-model="loopInstanceForm.elementVariable" clearable @change="updateLoopBase" />
|
||||
</el-form-item>
|
||||
<el-form-item label="完成条件" key="completionCondition">
|
||||
<el-input
|
||||
v-model="loopInstanceForm.completionCondition"
|
||||
clearable
|
||||
@change="updateLoopCondition"
|
||||
/>
|
||||
</el-form-item>
|
||||
<!-- add by 芋艿：由于「异步状态」暂时用不到，所以这里 display 为 none -->
|
||||
<el-form-item label="异步状态" key="async" style="display: none">
|
||||
<el-checkbox
|
||||
v-model="loopInstanceForm.asyncBefore"
|
||||
label="异步前"
|
||||
@change="updateLoopAsync('asyncBefore')"
|
||||
/>
|
||||
<el-checkbox
|
||||
v-model="loopInstanceForm.asyncAfter"
|
||||
label="异步后"
|
||||
@change="updateLoopAsync('asyncAfter')"
|
||||
/>
|
||||
<el-checkbox
|
||||
v-model="loopInstanceForm.exclusive"
|
||||
v-if="loopInstanceForm.asyncAfter || loopInstanceForm.asyncBefore"
|
||||
label="排除"
|
||||
@change="updateLoopAsync('exclusive')"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
label="重试周期"
|
||||
prop="timeCycle"
|
||||
v-if="loopInstanceForm.asyncAfter || loopInstanceForm.asyncBefore"
|
||||
key="timeCycle"
|
||||
>
|
||||
<el-input v-model="loopInstanceForm.timeCycle" clearable @change="updateLoopTimeCycle" />
|
||||
</el-form-item>
|
||||
</template>
|
||||
</el-form>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
defineOptions({ name: 'ElementMultiInstance' })
|
||||
|
||||
const props = defineProps({
|
||||
businessObject: Object,
|
||||
type: String
|
||||
})
|
||||
const prefix = inject('prefix')
|
||||
const loopCharacteristics = ref('')
|
||||
//默认配置，用来覆盖原始不存在的选项，避免报错
|
||||
const defaultLoopInstanceForm = ref({
|
||||
completionCondition: '',
|
||||
loopCardinality: '',
|
||||
extensionElements: [],
|
||||
asyncAfter: false,
|
||||
asyncBefore: false,
|
||||
exclusive: false
|
||||
})
|
||||
const loopInstanceForm = ref<any>({})
|
||||
const bpmnElement = ref(null)
|
||||
const multiLoopInstance = ref(null)
|
||||
const bpmnInstances = () => (window as any)?.bpmnInstances
|
||||
|
||||
const getElementLoop = (businessObject) => {
|
||||
if (!businessObject.loopCharacteristics) {
|
||||
loopCharacteristics.value = 'Null'
|
||||
loopInstanceForm.value = {}
|
||||
return
|
||||
}
|
||||
if (businessObject.loopCharacteristics.$type === 'bpmn:StandardLoopCharacteristics') {
|
||||
loopCharacteristics.value = 'StandardLoop'
|
||||
loopInstanceForm.value = {}
|
||||
return
|
||||
}
|
||||
if (businessObject.loopCharacteristics.isSequential) {
|
||||
loopCharacteristics.value = 'SequentialMultiInstance'
|
||||
} else {
|
||||
loopCharacteristics.value = 'ParallelMultiInstance'
|
||||
}
|
||||
// 合并配置
|
||||
loopInstanceForm.value = {
|
||||
...defaultLoopInstanceForm.value,
|
||||
...businessObject.loopCharacteristics,
|
||||
completionCondition: businessObject.loopCharacteristics?.completionCondition?.body ?? '',
|
||||
loopCardinality: businessObject.loopCharacteristics?.loopCardinality?.body ?? ''
|
||||
}
|
||||
// 保留当前元素 businessObject 上的 loopCharacteristics 实例
|
||||
multiLoopInstance.value = bpmnInstances().bpmnElement.businessObject.loopCharacteristics
|
||||
// 更新表单
|
||||
if (
|
||||
businessObject.loopCharacteristics.extensionElements &&
|
||||
businessObject.loopCharacteristics.extensionElements.values &&
|
||||
businessObject.loopCharacteristics.extensionElements.values.length
|
||||
) {
|
||||
loopInstanceForm.value['timeCycle'] =
|
||||
businessObject.loopCharacteristics.extensionElements.values[0].body
|
||||
}
|
||||
}
|
||||
|
||||
const changeLoopCharacteristicsType = (type) => {
|
||||
// this.loopInstanceForm = { ...this.defaultLoopInstanceForm }; // 切换类型取消原表单配置
|
||||
// 取消多实例配置
|
||||
if (type === 'Null') {
|
||||
bpmnInstances().modeling.updateProperties(toRaw(bpmnElement.value), {
|
||||
loopCharacteristics: null
|
||||
})
|
||||
return
|
||||
}
|
||||
// 配置循环
|
||||
if (type === 'StandardLoop') {
|
||||
const loopCharacteristicsObject = bpmnInstances().moddle.create(
|
||||
'bpmn:StandardLoopCharacteristics'
|
||||
)
|
||||
bpmnInstances().modeling.updateProperties(toRaw(bpmnElement.value), {
|
||||
loopCharacteristics: loopCharacteristicsObject
|
||||
})
|
||||
multiLoopInstance.value = null
|
||||
return
|
||||
}
|
||||
// 时序
|
||||
if (type === 'SequentialMultiInstance') {
|
||||
multiLoopInstance.value = bpmnInstances().moddle.create(
|
||||
'bpmn:MultiInstanceLoopCharacteristics',
|
||||
{ isSequential: true }
|
||||
)
|
||||
} else {
|
||||
multiLoopInstance.value = bpmnInstances().moddle.create(
|
||||
'bpmn:MultiInstanceLoopCharacteristics',
|
||||
{ collection: '${coll_userList}' }
|
||||
)
|
||||
}
|
||||
bpmnInstances().modeling.updateProperties(toRaw(bpmnElement.value), {
|
||||
loopCharacteristics: toRaw(multiLoopInstance.value)
|
||||
})
|
||||
}
|
||||
|
||||
// 循环基数
|
||||
const updateLoopCardinality = (cardinality) => {
|
||||
let loopCardinality = null
|
||||
if (cardinality && cardinality.length) {
|
||||
loopCardinality = bpmnInstances().moddle.create('bpmn:FormalExpression', {
|
||||
body: cardinality
|
||||
})
|
||||
}
|
||||
bpmnInstances().modeling.updateModdleProperties(
|
||||
toRaw(bpmnElement.value),
|
||||
multiLoopInstance.value,
|
||||
{
|
||||
loopCardinality
|
||||
}
|
||||
)
|
||||
}
|
||||
|
||||
// 完成条件
|
||||
const updateLoopCondition = (condition) => {
|
||||
let completionCondition = null
|
||||
if (condition && condition.length) {
|
||||
completionCondition = bpmnInstances().moddle.create('bpmn:FormalExpression', {
|
||||
body: condition
|
||||
})
|
||||
}
|
||||
bpmnInstances().modeling.updateModdleProperties(
|
||||
toRaw(bpmnElement.value),
|
||||
multiLoopInstance.value,
|
||||
{
|
||||
completionCondition
|
||||
}
|
||||
)
|
||||
}
|
||||
|
||||
// 重试周期
|
||||
const updateLoopTimeCycle = (timeCycle) => {
|
||||
const extensionElements = bpmnInstances().moddle.create('bpmn:ExtensionElements', {
|
||||
values: [
|
||||
bpmnInstances().moddle.create(`${prefix}:FailedJobRetryTimeCycle`, {
|
||||
body: timeCycle
|
||||
})
|
||||
]
|
||||
})
|
||||
bpmnInstances().modeling.updateModdleProperties(
|
||||
toRaw(bpmnElement.value),
|
||||
multiLoopInstance.value,
|
||||
{
|
||||
extensionElements
|
||||
}
|
||||
)
|
||||
}
|
||||
|
||||
// 直接更新的基础信息
|
||||
const updateLoopBase = () => {
|
||||
bpmnInstances().modeling.updateModdleProperties(
|
||||
toRaw(bpmnElement.value),
|
||||
multiLoopInstance.value,
|
||||
{
|
||||
collection: loopInstanceForm.value.collection || null,
|
||||
elementVariable: loopInstanceForm.value.elementVariable || null
|
||||
}
|
||||
)
|
||||
}
|
||||
|
||||
// 各异步状态
|
||||
const updateLoopAsync = (key) => {
|
||||
const { asyncBefore, asyncAfter } = loopInstanceForm.value
|
||||
let asyncAttr = Object.create(null)
|
||||
if (!asyncBefore && !asyncAfter) {
|
||||
// this.$set(this.loopInstanceForm, "exclusive", false);
|
||||
loopInstanceForm.value['exclusive'] = false
|
||||
asyncAttr = { asyncBefore: false, asyncAfter: false, exclusive: false, extensionElements: null }
|
||||
} else {
|
||||
asyncAttr[key] = loopInstanceForm.value[key]
|
||||
}
|
||||
bpmnInstances().modeling.updateModdleProperties(
|
||||
toRaw(bpmnElement.value),
|
||||
multiLoopInstance.value,
|
||||
asyncAttr
|
||||
)
|
||||
}
|
||||
|
||||
const changeConfig = (config) => {
|
||||
if (config === '依次审批') {
|
||||
changeLoopCharacteristicsType('SequentialMultiInstance')
|
||||
updateLoopCardinality('1')
|
||||
updateLoopCondition('${ nrOfCompletedInstances >= nrOfInstances }')
|
||||
} else if (config === '会签') {
|
||||
changeLoopCharacteristicsType('ParallelMultiInstance')
|
||||
updateLoopCondition('${ nrOfCompletedInstances >= nrOfInstances }')
|
||||
} else if (config === '或签') {
|
||||
changeLoopCharacteristicsType('ParallelMultiInstance')
|
||||
updateLoopCondition('${ nrOfCompletedInstances > 0 }')
|
||||
}
|
||||
}
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
multiLoopInstance.value = null
|
||||
bpmnElement.value = null
|
||||
})
|
||||
|
||||
watch(
|
||||
() => props.businessObject,
|
||||
(val) => {
|
||||
bpmnElement.value = bpmnInstances().bpmnElement
|
||||
getElementLoop(val)
|
||||
},
|
||||
{ immediate: true }
|
||||
)
|
||||
</script>
|
||||
|
||||
@@ -1,125 +1,125 @@
|
||||
<template>
|
||||
<div style="margin-top: 16px">
|
||||
<el-form-item label="消息实例">
|
||||
<div
|
||||
style="
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
flex-wrap: nowrap;
|
||||
"
|
||||
>
|
||||
<el-select v-model="bindMessageId" @change="updateTaskMessage">
|
||||
<el-option
|
||||
v-for="key in Object.keys(messageMap)"
|
||||
:value="key"
|
||||
:label="messageMap[key]"
|
||||
:key="key"
|
||||
/>
|
||||
</el-select>
|
||||
<XButton
|
||||
type="primary"
|
||||
preIcon="ep:plus"
|
||||
style="margin-left: 8px"
|
||||
@click="openMessageModel"
|
||||
/>
|
||||
</div>
|
||||
</el-form-item>
|
||||
<el-dialog
|
||||
v-model="messageModelVisible"
|
||||
:close-on-click-modal="false"
|
||||
title="创建新消息"
|
||||
width="400px"
|
||||
append-to-body
|
||||
destroy-on-close
|
||||
>
|
||||
<el-form :model="newMessageForm" size="small" label-width="90px">
|
||||
<el-form-item label="消息ID">
|
||||
<el-input v-model="newMessageForm.id" clearable />
|
||||
</el-form-item>
|
||||
<el-form-item label="消息名称">
|
||||
<el-input v-model="newMessageForm.name" clearable />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<template #footer>
|
||||
<el-button size="small" type="primary" @click="createNewMessage">确 认</el-button>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
defineOptions({ name: 'ReceiveTask' })
|
||||
const props = defineProps({
|
||||
id: String,
|
||||
type: String
|
||||
})
|
||||
|
||||
const message = useMessage()
|
||||
|
||||
const bindMessageId = ref('')
|
||||
const newMessageForm = ref<any>({})
|
||||
const messageMap = ref<any>({})
|
||||
const messageModelVisible = ref(false)
|
||||
const bpmnElement = ref<any>()
|
||||
const bpmnMessageRefsMap = ref<any>()
|
||||
const bpmnRootElements = ref<any>()
|
||||
|
||||
const bpmnInstances = () => (window as any).bpmnInstances
|
||||
const getBindMessage = () => {
|
||||
bpmnElement.value = bpmnInstances().bpmnElement
|
||||
bindMessageId.value = bpmnElement.value.businessObject?.messageRef?.id || '-1'
|
||||
}
|
||||
const openMessageModel = () => {
|
||||
messageModelVisible.value = true
|
||||
newMessageForm.value = {}
|
||||
}
|
||||
const createNewMessage = () => {
|
||||
if (messageMap.value[newMessageForm.value.id]) {
|
||||
message.error('该消息已存在，请修改id后重新保存')
|
||||
return
|
||||
}
|
||||
const newMessage = bpmnInstances().moddle.create('bpmn:Message', newMessageForm.value)
|
||||
bpmnRootElements.value.push(newMessage)
|
||||
messageMap.value[newMessageForm.value.id] = newMessageForm.value.name
|
||||
bpmnMessageRefsMap.value[newMessageForm.value.id] = newMessage
|
||||
messageModelVisible.value = false
|
||||
}
|
||||
const updateTaskMessage = (messageId) => {
|
||||
if (messageId === '-1') {
|
||||
bpmnInstances().modeling.updateProperties(toRaw(bpmnElement.value), {
|
||||
messageRef: null
|
||||
})
|
||||
} else {
|
||||
bpmnInstances().modeling.updateProperties(toRaw(bpmnElement.value), {
|
||||
messageRef: bpmnMessageRefsMap.value[messageId]
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
bpmnMessageRefsMap.value = Object.create(null)
|
||||
bpmnRootElements.value = bpmnInstances().modeler.getDefinitions().rootElements
|
||||
bpmnRootElements.value
|
||||
.filter((el) => el.$type === 'bpmn:Message')
|
||||
.forEach((m) => {
|
||||
bpmnMessageRefsMap.value[m.id] = m
|
||||
messageMap.value[m.id] = m.name
|
||||
})
|
||||
messageMap.value['-1'] = '无'
|
||||
})
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
bpmnElement.value = null
|
||||
})
|
||||
watch(
|
||||
() => props.id,
|
||||
() => {
|
||||
// bpmnElement.value = bpmnInstances().bpmnElement
|
||||
nextTick(() => {
|
||||
getBindMessage()
|
||||
})
|
||||
},
|
||||
{ immediate: true }
|
||||
)
|
||||
</script>
|
||||
<template>
|
||||
<div style="margin-top: 16px">
|
||||
<el-form-item label="消息实例">
|
||||
<div
|
||||
style="
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
flex-wrap: nowrap;
|
||||
"
|
||||
>
|
||||
<el-select v-model="bindMessageId" @change="updateTaskMessage" filterable>
|
||||
<el-option
|
||||
v-for="key in Object.keys(messageMap)"
|
||||
:value="key"
|
||||
:label="messageMap[key]"
|
||||
:key="key"
|
||||
/>
|
||||
</el-select>
|
||||
<XButton
|
||||
type="primary"
|
||||
preIcon="ep:plus"
|
||||
style="margin-left: 8px"
|
||||
@click="openMessageModel"
|
||||
/>
|
||||
</div>
|
||||
</el-form-item>
|
||||
<el-dialog
|
||||
v-model="messageModelVisible"
|
||||
:close-on-click-modal="false"
|
||||
title="创建新消息"
|
||||
width="400px"
|
||||
append-to-body
|
||||
destroy-on-close
|
||||
>
|
||||
<el-form :model="newMessageForm" size="small" label-width="90px">
|
||||
<el-form-item label="消息ID">
|
||||
<el-input v-model="newMessageForm.id" clearable />
|
||||
</el-form-item>
|
||||
<el-form-item label="消息名称">
|
||||
<el-input v-model="newMessageForm.name" clearable />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<template #footer>
|
||||
<el-button size="small" type="primary" @click="createNewMessage">确 认</el-button>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
defineOptions({ name: 'ReceiveTask' })
|
||||
const props = defineProps({
|
||||
id: String,
|
||||
type: String
|
||||
})
|
||||
|
||||
const message = useMessage()
|
||||
|
||||
const bindMessageId = ref('')
|
||||
const newMessageForm = ref<any>({})
|
||||
const messageMap = ref<any>({})
|
||||
const messageModelVisible = ref(false)
|
||||
const bpmnElement = ref<any>()
|
||||
const bpmnMessageRefsMap = ref<any>()
|
||||
const bpmnRootElements = ref<any>()
|
||||
|
||||
const bpmnInstances = () => (window as any).bpmnInstances
|
||||
const getBindMessage = () => {
|
||||
bpmnElement.value = bpmnInstances().bpmnElement
|
||||
bindMessageId.value = bpmnElement.value.businessObject?.messageRef?.id || '-1'
|
||||
}
|
||||
const openMessageModel = () => {
|
||||
messageModelVisible.value = true
|
||||
newMessageForm.value = {}
|
||||
}
|
||||
const createNewMessage = () => {
|
||||
if (messageMap.value[newMessageForm.value.id]) {
|
||||
message.error('该消息已存在，请修改id后重新保存')
|
||||
return
|
||||
}
|
||||
const newMessage = bpmnInstances().moddle.create('bpmn:Message', newMessageForm.value)
|
||||
bpmnRootElements.value.push(newMessage)
|
||||
messageMap.value[newMessageForm.value.id] = newMessageForm.value.name
|
||||
bpmnMessageRefsMap.value[newMessageForm.value.id] = newMessage
|
||||
messageModelVisible.value = false
|
||||
}
|
||||
const updateTaskMessage = (messageId) => {
|
||||
if (messageId === '-1') {
|
||||
bpmnInstances().modeling.updateProperties(toRaw(bpmnElement.value), {
|
||||
messageRef: null
|
||||
})
|
||||
} else {
|
||||
bpmnInstances().modeling.updateProperties(toRaw(bpmnElement.value), {
|
||||
messageRef: bpmnMessageRefsMap.value[messageId]
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
bpmnMessageRefsMap.value = Object.create(null)
|
||||
bpmnRootElements.value = bpmnInstances().modeler.getDefinitions().rootElements
|
||||
bpmnRootElements.value
|
||||
.filter((el) => el.$type === 'bpmn:Message')
|
||||
.forEach((m) => {
|
||||
bpmnMessageRefsMap.value[m.id] = m
|
||||
messageMap.value[m.id] = m.name
|
||||
})
|
||||
messageMap.value['-1'] = '无'
|
||||
})
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
bpmnElement.value = null
|
||||
})
|
||||
watch(
|
||||
() => props.id,
|
||||
() => {
|
||||
// bpmnElement.value = bpmnInstances().bpmnElement
|
||||
nextTick(() => {
|
||||
getBindMessage()
|
||||
})
|
||||
},
|
||||
{ immediate: true }
|
||||
)
|
||||
</script>
|
||||
|
||||
@@ -1,99 +1,99 @@
|
||||
<template>
|
||||
<div style="margin-top: 16px">
|
||||
<el-form-item label="脚本格式">
|
||||
<el-input
|
||||
v-model="scriptTaskForm.scriptFormat"
|
||||
clearable
|
||||
@input="updateElementTask()"
|
||||
@change="updateElementTask()"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="脚本类型">
|
||||
<el-select v-model="scriptTaskForm.scriptType">
|
||||
<el-option label="内联脚本" value="inline" />
|
||||
<el-option label="外部资源" value="external" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="脚本" v-show="scriptTaskForm.scriptType === 'inline'">
|
||||
<el-input
|
||||
v-model="scriptTaskForm.script"
|
||||
type="textarea"
|
||||
resize="vertical"
|
||||
:autosize="{ minRows: 2, maxRows: 4 }"
|
||||
clearable
|
||||
@input="updateElementTask()"
|
||||
@change="updateElementTask()"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="资源地址" v-show="scriptTaskForm.scriptType === 'external'">
|
||||
<el-input
|
||||
v-model="scriptTaskForm.resource"
|
||||
clearable
|
||||
@input="updateElementTask()"
|
||||
@change="updateElementTask()"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="结果变量">
|
||||
<el-input
|
||||
v-model="scriptTaskForm.resultVariable"
|
||||
clearable
|
||||
@input="updateElementTask()"
|
||||
@change="updateElementTask()"
|
||||
/>
|
||||
</el-form-item>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
defineOptions({ name: 'ScriptTask' })
|
||||
const props = defineProps({
|
||||
id: String,
|
||||
type: String
|
||||
})
|
||||
const defaultTaskForm = ref({
|
||||
scriptFormat: '',
|
||||
script: '',
|
||||
resource: '',
|
||||
resultVariable: ''
|
||||
})
|
||||
const scriptTaskForm = ref<any>({})
|
||||
const bpmnElement = ref()
|
||||
|
||||
const bpmnInstances = () => (window as any)?.bpmnInstances
|
||||
|
||||
const resetTaskForm = () => {
|
||||
for (let key in defaultTaskForm.value) {
|
||||
let value = bpmnElement.value?.businessObject[key] || defaultTaskForm.value[key]
|
||||
scriptTaskForm.value[key] = value
|
||||
}
|
||||
scriptTaskForm.value.scriptType = scriptTaskForm.value.script ? 'inline' : 'external'
|
||||
}
|
||||
const updateElementTask = () => {
|
||||
let taskAttr = Object.create(null)
|
||||
taskAttr.scriptFormat = scriptTaskForm.value.scriptFormat || null
|
||||
taskAttr.resultVariable = scriptTaskForm.value.resultVariable || null
|
||||
if (scriptTaskForm.value.scriptType === 'inline') {
|
||||
taskAttr.script = scriptTaskForm.value.script || null
|
||||
taskAttr.resource = null
|
||||
} else {
|
||||
taskAttr.resource = scriptTaskForm.value.resource || null
|
||||
taskAttr.script = null
|
||||
}
|
||||
bpmnInstances().modeling.updateProperties(toRaw(bpmnElement.value), taskAttr)
|
||||
}
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
bpmnElement.value = null
|
||||
})
|
||||
|
||||
watch(
|
||||
() => props.id,
|
||||
() => {
|
||||
bpmnElement.value = bpmnInstances().bpmnElement
|
||||
nextTick(() => {
|
||||
resetTaskForm()
|
||||
})
|
||||
},
|
||||
{ immediate: true }
|
||||
)
|
||||
</script>
|
||||
<template>
|
||||
<div style="margin-top: 16px">
|
||||
<el-form-item label="脚本格式">
|
||||
<el-input
|
||||
v-model="scriptTaskForm.scriptFormat"
|
||||
clearable
|
||||
@input="updateElementTask()"
|
||||
@change="updateElementTask()"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="脚本类型">
|
||||
<el-select v-model="scriptTaskForm.scriptType" filterable>
|
||||
<el-option label="内联脚本" value="inline" />
|
||||
<el-option label="外部资源" value="external" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="脚本" v-show="scriptTaskForm.scriptType === 'inline'">
|
||||
<el-input
|
||||
v-model="scriptTaskForm.script"
|
||||
type="textarea"
|
||||
resize="vertical"
|
||||
:autosize="{ minRows: 2, maxRows: 4 }"
|
||||
clearable
|
||||
@input="updateElementTask()"
|
||||
@change="updateElementTask()"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="资源地址" v-show="scriptTaskForm.scriptType === 'external'">
|
||||
<el-input
|
||||
v-model="scriptTaskForm.resource"
|
||||
clearable
|
||||
@input="updateElementTask()"
|
||||
@change="updateElementTask()"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="结果变量">
|
||||
<el-input
|
||||
v-model="scriptTaskForm.resultVariable"
|
||||
clearable
|
||||
@input="updateElementTask()"
|
||||
@change="updateElementTask()"
|
||||
/>
|
||||
</el-form-item>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
defineOptions({ name: 'ScriptTask' })
|
||||
const props = defineProps({
|
||||
id: String,
|
||||
type: String
|
||||
})
|
||||
const defaultTaskForm = ref({
|
||||
scriptFormat: '',
|
||||
script: '',
|
||||
resource: '',
|
||||
resultVariable: ''
|
||||
})
|
||||
const scriptTaskForm = ref<any>({})
|
||||
const bpmnElement = ref()
|
||||
|
||||
const bpmnInstances = () => (window as any)?.bpmnInstances
|
||||
|
||||
const resetTaskForm = () => {
|
||||
for (let key in defaultTaskForm.value) {
|
||||
let value = bpmnElement.value?.businessObject[key] || defaultTaskForm.value[key]
|
||||
scriptTaskForm.value[key] = value
|
||||
}
|
||||
scriptTaskForm.value.scriptType = scriptTaskForm.value.script ? 'inline' : 'external'
|
||||
}
|
||||
const updateElementTask = () => {
|
||||
let taskAttr = Object.create(null)
|
||||
taskAttr.scriptFormat = scriptTaskForm.value.scriptFormat || null
|
||||
taskAttr.resultVariable = scriptTaskForm.value.resultVariable || null
|
||||
if (scriptTaskForm.value.scriptType === 'inline') {
|
||||
taskAttr.script = scriptTaskForm.value.script || null
|
||||
taskAttr.resource = null
|
||||
} else {
|
||||
taskAttr.resource = scriptTaskForm.value.resource || null
|
||||
taskAttr.script = null
|
||||
}
|
||||
bpmnInstances().modeling.updateProperties(toRaw(bpmnElement.value), taskAttr)
|
||||
}
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
bpmnElement.value = null
|
||||
})
|
||||
|
||||
watch(
|
||||
() => props.id,
|
||||
() => {
|
||||
bpmnElement.value = bpmnInstances().bpmnElement
|
||||
nextTick(() => {
|
||||
resetTaskForm()
|
||||
})
|
||||
},
|
||||
{ immediate: true }
|
||||
)
|
||||
</script>
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<div :style="{ width: isMinuteData ? '750px' : '610px' }">
|
||||
<el-select v-model="interval" style="min-width: 90px; width: 90px; margin-right: 10px" @change="timeChange">
|
||||
<el-select v-model="interval" style="min-width: 90px; width: 90px; margin-right: 10px" @change="timeChange" filterable>
|
||||
<el-option v-for="item in timeOptions" :key="item.value" :label="item.label" :value="item.value" />
|
||||
</el-select>
|
||||
|
||||
|
||||
@@ -1,8 +1,7 @@
|
||||
<template>
|
||||
|
||||
<Tree ref="treRef" :data="tree" style="height: 100%" :width="'100%'" :expanded="expanded" />
|
||||
</template>
|
||||
<!-- <div class="mb10">
|
||||
<!-- <div class="mb10">
|
||||
<el-button type="primary" icon="el-icon-Download" size="small" @click="exportExcelTemplate" :loading="loading">模版下载</el-button>
|
||||
<el-button type="primary" icon="el-icon-Upload" size="small">导入</el-button>
|
||||
<el-button type="primary" icon="el-icon-Download" size="small" @click="ledgerEverywhere" :loading="loading1">导出</el-button>
|
||||
@@ -11,7 +10,7 @@
|
||||
import { ref, nextTick } from 'vue'
|
||||
import Tree from './index.vue'
|
||||
|
||||
import { getTerminalTree,downTerminalTemplate,exportTerminalBase } from '@/api/device-boot/Business'
|
||||
import { getTerminalTree, downTerminalTemplate, exportTerminalBase } from '@/api/device-boot/Business'
|
||||
import { useConfig } from '@/stores/config'
|
||||
const VITE_FLAG = import.meta.env.VITE_NAME == 'jibei'
|
||||
defineOptions({
|
||||
@@ -88,40 +87,48 @@ const info = (id: any) => {
|
||||
// })
|
||||
// })
|
||||
// } else {
|
||||
res.data.forEach((item: any) => {
|
||||
item.icon = 'el-icon-Menu'
|
||||
item.plevel = item.level
|
||||
item.level = (item.level + 1) * 100
|
||||
item.children.forEach((item2: any) => {
|
||||
item2.icon = 'el-icon-HomeFilled'
|
||||
item2.plevel = item2.level
|
||||
item2.level = (item2.level + 1) * 100
|
||||
expanded.value.push(item2.id)
|
||||
item2.children.forEach((item3: any) => {
|
||||
item3.icon = 'el-icon-CollectionTag'
|
||||
item3.plevel = item3.level
|
||||
item3.level = (item3.level + 1) * 100
|
||||
item3.children.forEach((item4: any) => {
|
||||
item4.icon = 'el-icon-Flag'
|
||||
item4.plevel = item4.level
|
||||
item4.level = (item4.level + 1) * 100
|
||||
item4.children.forEach((item5: any) => {
|
||||
item5.icon = 'el-icon-OfficeBuilding'
|
||||
item5.plevel = item5.level
|
||||
item5.level = (item5.level == 7 ? 4 : item5.level + 1) * 100
|
||||
item5.children.forEach((item6: any) => {
|
||||
item6.icon = 'el-icon-Film'
|
||||
item6.plevel = item6.level
|
||||
item6.level = (item6.level + 1) * 100
|
||||
item6.children.forEach((item7: any) => {
|
||||
item7.icon = 'el-icon-Share'
|
||||
item7.plevel = item7.level
|
||||
item7.level = (item7.level + 1) * 100
|
||||
item7.children.forEach((item8: any) => {
|
||||
item8.icon = 'el-icon-Location'
|
||||
item8.plevel = item8.level
|
||||
item8.level = (item8.level + 1) * 100
|
||||
})
|
||||
res.data.forEach((item: any) => {
|
||||
item.icon = 'el-icon-Menu'
|
||||
item.color = 'var(--el-color-primary)'
|
||||
item.plevel = item.level
|
||||
item.level = (item.level + 1) * 100
|
||||
item.children.forEach((item2: any) => {
|
||||
item2.icon = 'el-icon-HomeFilled'
|
||||
item2.color = 'var(--el-color-primary)'
|
||||
item2.plevel = item2.level
|
||||
item2.level = (item2.level + 1) * 100
|
||||
expanded.value.push(item2.id)
|
||||
item2.children.forEach((item3: any) => {
|
||||
item3.icon = 'el-icon-CollectionTag'
|
||||
item3.color = 'var(--el-color-primary)'
|
||||
item3.plevel = item3.level
|
||||
item3.level = (item3.level + 1) * 100
|
||||
item3.children.forEach((item4: any) => {
|
||||
item4.icon = 'el-icon-Flag'
|
||||
item4.color = 'var(--el-color-primary)'
|
||||
item4.plevel = item4.level
|
||||
item4.level = (item4.level + 1) * 100
|
||||
item4.children.forEach((item5: any) => {
|
||||
item5.icon = 'el-icon-OfficeBuilding'
|
||||
item5.color = 'var(--el-color-primary)'
|
||||
item5.plevel = item5.level
|
||||
item5.level = (item5.level == 7 ? 4 : item5.level + 1) * 100
|
||||
item5.children.forEach((item6: any) => {
|
||||
item6.icon =
|
||||
item6.children?.[0]?.children?.length > 0 ? 'el-icon-Film' : 'el-icon-Share'
|
||||
item6.color = 'var(--el-color-primary)'
|
||||
item6.plevel = item6.level
|
||||
item6.level = (item6.level + 1) * 100
|
||||
item6.children.forEach((item7: any) => {
|
||||
item7.icon = item7.children.length > 0 ? 'el-icon-Share' : 'el-icon-Location'
|
||||
item7.color = 'var(--el-color-primary)'
|
||||
item7.plevel = item7.level
|
||||
item7.level = (item7.level + 1) * 100
|
||||
item7.children.forEach((item8: any) => {
|
||||
item8.icon = 'el-icon-Location'
|
||||
item8.color = 'var(--el-color-primary)'
|
||||
item8.plevel = item8.level
|
||||
item8.level = (item8.level + 1) * 100
|
||||
})
|
||||
})
|
||||
})
|
||||
@@ -129,6 +136,7 @@ const info = (id: any) => {
|
||||
})
|
||||
})
|
||||
})
|
||||
})
|
||||
// }
|
||||
|
||||
tree.value = res.data
|
||||
@@ -149,7 +157,7 @@ const info = (id: any) => {
|
||||
})
|
||||
}
|
||||
// 下载模版
|
||||
const exportExcelTemplate = async() => {
|
||||
const exportExcelTemplate = async () => {
|
||||
loading.value = true
|
||||
downTerminalTemplate().then((res: any) => {
|
||||
let blob = new Blob([res], {
|
||||
@@ -168,7 +176,7 @@ const exportExcelTemplate = async() => {
|
||||
}, 0)
|
||||
}
|
||||
// 导出台账
|
||||
const ledgerEverywhere = async() => {
|
||||
const ledgerEverywhere = async () => {
|
||||
loading1.value = true
|
||||
exportTerminalBase().then((res: any) => {
|
||||
let blob = new Blob([res], {
|
||||
|
||||
@@ -6,6 +6,7 @@
|
||||
style="min-width: unset; padding: 10px 10px 0"
|
||||
@change="loadData"
|
||||
v-if="props.showSelect"
|
||||
filterable
|
||||
>
|
||||
<el-option
|
||||
v-for="item in classificationData"
|
||||
|
||||
Reference in New Issue
Block a user