| 提交 | 用户 | 时间 | ||
| 820397 | 1 | <template> |
| H | 2 | <div class="panel-tab__content"> |
| 3 | <el-form label-width="90px" :model="needProps" :rules="rules"> | |
| 4 | <div v-if="needProps.type == 'bpmn:Process'"> | |
| 5 | <!-- 如果是 Process 信息的时候，使用自定义表单 --> | |
| 6 | <el-form-item label="流程标识" prop="id"> | |
| 7 | <el-input | |
| 8 | v-model="needProps.id" | |
| 9 | placeholder="请输入流标标识" | |
| 10 | :disabled="needProps.id !== undefined && needProps.id.length > 0" | |
| 11 | @change="handleKeyUpdate" | |
| 12 | /> | |
| 13 | </el-form-item> | |
| 14 | <el-form-item label="流程名称" prop="name"> | |
| 15 | <el-input | |
| 16 | v-model="needProps.name" | |
| 17 | placeholder="请输入流程名称" | |
| 18 | clearable | |
| 19 | @change="handleNameUpdate" | |
| 20 | /> | |
| 21 | </el-form-item> | |
| 22 | </div> | |
| 23 | <div v-else> | |
| 24 | <el-form-item label="ID"> | |
| 25 | <el-input v-model="elementBaseInfo.id" clearable @change="updateBaseInfo('id')" /> | |
| 26 | </el-form-item> | |
| 27 | <el-form-item label="名称"> | |
| 28 | <el-input v-model="elementBaseInfo.name" clearable @change="updateBaseInfo('name')" /> | |
| 29 | </el-form-item> | |
| 30 | </div> | |
| 31 | </el-form> | |
| 32 | </div> | |
| 33 | </template> | |
| 34 | <script lang="ts" setup> | |
| 35 | defineOptions({ name: 'ElementBaseInfo' }) | |
| 36 | ||
| 37 | const props = defineProps({ | |
| 38 | businessObject: { | |
| 39 | type: Object, | |
| 40 | default: () => {} | |
| 41 | }, | |
| 42 | model: { | |
| 43 | type: Object, | |
| 44 | default: () => {} | |
| 45 | } | |
| 46 | }) | |
| 47 | const needProps = ref<any>({}) | |
| 48 | const bpmnElement = ref() | |
| 49 | const elementBaseInfo = ref<any>({}) | |
| 50 | // 流程表单的下拉框的数据 | |
| 51 | // const forms = ref([]) | |
| 52 | // 流程模型的校验 | |
| 53 | const rules = reactive({ | |
| 54 | id: [{ required: true, message: '流程标识不能为空', trigger: 'blur' }], | |
| 55 | name: [{ required: true, message: '流程名称不能为空', trigger: 'blur' }] | |
| 56 | }) | |
| 57 | ||
| 58 | const bpmnInstances = () => (window as any)?.bpmnInstances | |
| 59 | const resetBaseInfo = () => { | |
| 60 | console.log(window, 'window') | |
| 61 | console.log(bpmnElement.value, 'bpmnElement') | |
| 62 | ||
| 63 | bpmnElement.value = bpmnInstances()?.bpmnElement | |
| 64 | // console.log(bpmnElement.value, 'resetBaseInfo11111111111') | |
| 65 | elementBaseInfo.value = bpmnElement.value.businessObject | |
| 66 | needProps.value['type'] = bpmnElement.value.businessObject.$type | |
| 67 | // elementBaseInfo.value['typess'] = bpmnElement.value.businessObject.$type | |
| 68 | ||
| 69 | // elementBaseInfo.value = JSON.parse(JSON.stringify(bpmnElement.value.businessObject)) | |
| 70 | // console.log(elementBaseInfo.value, 'elementBaseInfo22222222222') | |
| 71 | } | |
| 72 | const handleKeyUpdate = (value) => { | |
| 73 | // 校验 value 的值，只有 XML NCName 通过的情况下，才进行赋值。否则，会导致流程图报错，无法绘制的问题 | |
| 74 | if (!value) { | |
| 75 | return | |
| 76 | } | |
| 77 | if (!value.match(/[a-zA-Z_][\-_.0-9a-zA-Z$]*/)) { | |
| 78 | console.log('key 不满足 XML NCName 规则，所以不进行赋值') | |
| 79 | return | |
| 80 | } | |
| 81 | console.log('key 满足 XML NCName 规则，所以进行赋值') | |
| 82 | ||
| 83 | // 在 BPMN 的 XML 中，流程标识 key，其实对应的是 id 节点 | |
| 84 | elementBaseInfo.value['id'] = value | |
| 85 | ||
| 86 | setTimeout(() => { | |
| 87 | updateBaseInfo('id') | |
| 88 | }, 100) | |
| 89 | } | |
| 90 | const handleNameUpdate = (value) => { | |
| 91 | console.log(elementBaseInfo, 'elementBaseInfo') | |
| 92 | if (!value) { | |
| 93 | return | |
| 94 | } | |
| 95 | elementBaseInfo.value['name'] = value | |
| 96 | ||
| 97 | setTimeout(() => { | |
| 98 | updateBaseInfo('name') | |
| 99 | }, 100) | |
| 100 | } | |
| 101 | // const handleDescriptionUpdate=(value)=> { | |
| 102 | // TODO 芋艿：documentation 暂时无法修改，后续在看看 | |
| 103 | // this.elementBaseInfo['documentation'] = value; | |
| 104 | // this.updateBaseInfo('documentation'); | |
| 105 | // } | |
| 106 | const updateBaseInfo = (key) => { | |
| 107 | console.log(key, 'key') | |
| 108 | // 触发 elementBaseInfo 对应的字段 | |
| 109 | const attrObj = Object.create(null) | |
| 110 | // console.log(attrObj, 'attrObj') | |
| 111 | attrObj[key] = elementBaseInfo.value[key] | |
| 112 | // console.log(attrObj, 'attrObj111') | |
| 113 | // const attrObj = { | |
| 114 | // id: elementBaseInfo.value[key] | |
| 115 | // // di: { id: `${elementBaseInfo.value[key]}_di` } | |
| 116 | // } | |
| 117 | // console.log(elementBaseInfo, 'elementBaseInfo11111111111') | |
| 118 | needProps.value = { ...elementBaseInfo.value, ...needProps.value } | |
| 119 | ||
| 120 | if (key === 'id') { | |
| 121 | // console.log('jinru') | |
| 122 | console.log(window, 'window') | |
| 123 | console.log(bpmnElement.value, 'bpmnElement') | |
| 124 | console.log(toRaw(bpmnElement.value), 'bpmnElement') | |
| 125 | bpmnInstances().modeling.updateProperties(toRaw(bpmnElement.value), { | |
| 126 | id: elementBaseInfo.value[key], | |
| 127 | di: { id: `${elementBaseInfo.value[key]}_di` } | |
| 128 | }) | |
| 129 | } else { | |
| 130 | console.log(attrObj, 'attrObj') | |
| 131 | bpmnInstances().modeling.updateProperties(toRaw(bpmnElement.value), attrObj) | |
| 132 | } | |
| 133 | } | |
| 134 | ||
| 135 | watch( | |
| 136 | () => props.businessObject, | |
| 137 | (val) => { | |
| 138 | // console.log(val, 'val11111111111111111111') | |
| 139 | if (val) { | |
| 140 | // nextTick(() => { | |
| 141 | resetBaseInfo() | |
| 142 | // }) | |
| 143 | } | |
| 144 | } | |
| 145 | ) | |
| 146 | ||
| 147 | watch( | |
| 148 | () => props.model?.key, | |
| 149 | (val) => { | |
| 150 | // 针对上传的 bpmn 流程图时，保证 key 和 name 的更新 | |
| 151 | if (val) { | |
| 152 | handleKeyUpdate(props.model.key) | |
| 153 | handleNameUpdate(props.model.name) | |
| 154 | } | |
| 155 | } | |
| 156 | ) | |
| 157 | ||
| 158 | // watch( | |
| 159 | // () => ({ ...props }), | |
| 160 | // (oldVal, newVal) => { | |
| 161 | // console.log(oldVal, 'oldVal') | |
| 162 | // console.log(newVal, 'newVal') | |
| 163 | // if (newVal) { | |
| 164 | // needProps.value = newVal | |
| 165 | // } | |
| 166 | // }, | |
| 167 | // { | |
| 168 | // immediate: true | |
| 169 | // } | |
| 170 | // ) | |
| 171 | // 'model.key': { | |
| 172 | // immediate: false, | |
| 173 | // handler: function (val) { | |
| 174 | // this.handleKeyUpdate(val) | |
| 175 | // } | |
| 176 | // } | |
| 177 | onBeforeUnmount(() => { | |
| 178 | bpmnElement.value = null | |
| 179 | }) | |
| 180 | </script> | |
