| 提交 | 用户 | 时间 | ||
| 722af2 | 1 | <template> |
| X | 2 | <div class="panel-tab__content"> |
| 3 | <el-table :data="elementPropertyList" size="mini" max-height="240" border fit> | |
| 4 | <el-table-column label="序号" width="50px" type="index" /> | |
| 5 | <el-table-column label="属性名" prop="name" min-width="100px" show-overflow-tooltip /> | |
| 6 | <el-table-column label="属性值" prop="value" min-width="100px" show-overflow-tooltip /> | |
| 7 | <el-table-column label="操作" width="90px"> | |
| 8 | <template slot-scope="{ row, $index }"> | |
| 9 | <el-button size="mini" type="text" @click="openAttributesForm(row, $index)">编辑</el-button> | |
| 10 | <el-divider direction="vertical" /> | |
| 11 | <el-button size="mini" type="text" style="color: #ff4d4f" @click="removeAttributes(row, $index)">移除</el-button> | |
| 12 | </template> | |
| 13 | </el-table-column> | |
| 14 | </el-table> | |
| 15 | <div class="element-drawer__button"> | |
| 16 | <el-button size="mini" type="primary" icon="el-icon-plus" @click="openAttributesForm(null, -1)">添加属性</el-button> | |
| 17 | </div> | |
| 18 | ||
| 19 | <el-dialog :visible.sync="propertyFormModelVisible" title="属性配置" width="600px" append-to-body destroy-on-close> | |
| 20 | <el-form :model="propertyForm" label-width="80px" size="mini" ref="attributeFormRef" @submit.native.prevent> | |
| 21 | <el-form-item label="属性名：" prop="name"> | |
| 22 | <el-input v-model="propertyForm.name" clearable /> | |
| 23 | </el-form-item> | |
| 24 | <el-form-item label="属性值：" prop="value"> | |
| 25 | <el-input v-model="propertyForm.value" clearable /> | |
| 26 | </el-form-item> | |
| 27 | </el-form> | |
| 28 | <template slot="footer"> | |
| 29 | <el-button size="mini" @click="propertyFormModelVisible = false">取 消</el-button> | |
| 30 | <el-button size="mini" type="primary" @click="saveAttribute">确 定</el-button> | |
| 31 | </template> | |
| 32 | </el-dialog> | |
| 33 | </div> | |
| 34 | </template> | |
| 35 | ||
| 36 | <script> | |
| 37 | export default { | |
| 38 | name: "ElementProperties", | |
| 39 | props: { | |
| 40 | id: String, | |
| 41 | type: String | |
| 42 | }, | |
| 43 | inject: { | |
| 44 | prefix: "prefix", | |
| 45 | width: "width" | |
| 46 | }, | |
| 47 | data() { | |
| 48 | return { | |
| 49 | elementPropertyList: [], | |
| 50 | propertyForm: {}, | |
| 51 | editingPropertyIndex: -1, | |
| 52 | propertyFormModelVisible: false | |
| 53 | }; | |
| 54 | }, | |
| 55 | watch: { | |
| 56 | id: { | |
| 57 | immediate: true, | |
| 58 | handler(val) { | |
| 59 | val && val.length && this.resetAttributesList(); | |
| 60 | } | |
| 61 | } | |
| 62 | }, | |
| 63 | methods: { | |
| 64 | resetAttributesList() { | |
| 65 | this.bpmnElement = window.bpmnInstances.bpmnElement; | |
| 66 | this.otherExtensionList = []; // 其他扩展配置 | |
| 67 | this.bpmnElementProperties = | |
| 68 | this.bpmnElement.businessObject?.extensionElements?.values?.filter(ex => { | |
| 69 | if (ex.$type !== `${this.prefix}:Properties`) { | |
| 70 | this.otherExtensionList.push(ex); | |
| 71 | } | |
| 72 | return ex.$type === `${this.prefix}:Properties`; | |
| 73 | }) ?? []; | |
| 74 | ||
| 75 | // 保存所有的 扩展属性字段 | |
| 76 | this.bpmnElementPropertyList = this.bpmnElementProperties.reduce((pre, current) => pre.concat(current.values), []); | |
| 77 | // 复制 显示 | |
| 78 | this.elementPropertyList = JSON.parse(JSON.stringify(this.bpmnElementPropertyList ?? [])); | |
| 79 | }, | |
| 80 | openAttributesForm(attr, index) { | |
| 81 | this.editingPropertyIndex = index; | |
| 82 | this.propertyForm = index === -1 ? {} : JSON.parse(JSON.stringify(attr)); | |
| 83 | this.propertyFormModelVisible = true; | |
| 84 | this.$nextTick(() => { | |
| 85 | if (this.$refs["attributeFormRef"]) this.$refs["attributeFormRef"].clearValidate(); | |
| 86 | }); | |
| 87 | }, | |
| 88 | removeAttributes(attr, index) { | |
| 89 | this.$confirm("确认移除该属性吗？", "提示", { | |
| 90 | confirmButtonText: "确 认", | |
| 91 | cancelButtonText: "取 消" | |
| 92 | }) | |
| 93 | .then(() => { | |
| 94 | this.elementPropertyList.splice(index, 1); | |
| 95 | this.bpmnElementPropertyList.splice(index, 1); | |
| 96 | // 新建一个属性字段的保存列表 | |
| 97 | const propertiesObject = window.bpmnInstances.moddle.create(`${this.prefix}:Properties`, { | |
| 98 | values: this.bpmnElementPropertyList | |
| 99 | }); | |
| 100 | this.updateElementExtensions(propertiesObject); | |
| 101 | this.resetAttributesList(); | |
| 102 | }) | |
| 103 | .catch(() => console.info("操作取消")); | |
| 104 | }, | |
| 105 | saveAttribute() { | |
| 106 | const { name, value } = this.propertyForm; | |
| 107 | if (this.editingPropertyIndex !== -1) { | |
| 108 | window.bpmnInstances.modeling.updateModdleProperties(this.bpmnElement, this.bpmnElementPropertyList[this.editingPropertyIndex], { | |
| 109 | name, | |
| 110 | value | |
| 111 | }); | |
| 112 | } else { | |
| 113 | // 新建属性字段 | |
| 114 | const newPropertyObject = window.bpmnInstances.moddle.create(`${this.prefix}:Property`, { name, value }); | |
| 115 | // 新建一个属性字段的保存列表 | |
| 116 | const propertiesObject = window.bpmnInstances.moddle.create(`${this.prefix}:Properties`, { | |
| 117 | values: this.bpmnElementPropertyList.concat([newPropertyObject]) | |
| 118 | }); | |
| 119 | this.updateElementExtensions(propertiesObject); | |
| 120 | } | |
| 121 | this.propertyFormModelVisible = false; | |
| 122 | this.resetAttributesList(); | |
| 123 | }, | |
| 124 | updateElementExtensions(properties) { | |
| 125 | const extensions = window.bpmnInstances.moddle.create("bpmn:ExtensionElements", { | |
| 126 | values: this.otherExtensionList.concat([properties]) | |
| 127 | }); | |
| 128 | window.bpmnInstances.modeling.updateProperties(this.bpmnElement, { | |
| 129 | extensionElements: extensions | |
| 130 | }); | |
| 131 | } | |
| 132 | } | |
| 133 | }; | |
| 134 | </script> | |
