工业互联网平台前端 vue3版本
查看 | 历史 | 提交 | 提交对比
潘志宝
6 天以前 ca22cdd5550cfa0defb0f430c538698182cdaec1
提交 | 用户 | 时间
820397 1 <template>
H 2   <div class="panel-tab__content">
3     <el-table :data="elementPropertyList" max-height="240" fit border>
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="110px">
8         <template #default="scope">
9           <el-button link @click="openAttributesForm(scope.row, scope.$index)" size="small">
10             编辑
11           </el-button>
12           <el-divider direction="vertical" />
13           <el-button
14             link
15             size="small"
16             style="color: #ff4d4f"
17             @click="removeAttributes(scope.row, scope.$index)"
18           >
19             移除
20           </el-button>
21         </template>
22       </el-table-column>
23     </el-table>
24     <div class="element-drawer__button">
25       <XButton
26         type="primary"
27         preIcon="ep:plus"
28         title="添加属性"
29         @click="openAttributesForm(null, -1)"
30       />
31     </div>
32
33     <el-dialog
34       v-model="propertyFormModelVisible"
35       title="属性配置"
36       width="600px"
37       append-to-body
38       destroy-on-close
39     >
40       <el-form :model="propertyForm" label-width="80px" ref="attributeFormRef">
41         <el-form-item label="属性名：" prop="name">
42           <el-input v-model="propertyForm.name" clearable />
43         </el-form-item>
44         <el-form-item label="属性值：" prop="value">
45           <el-input v-model="propertyForm.value" clearable />
46         </el-form-item>
47       </el-form>
48       <template #footer>
49         <el-button @click="propertyFormModelVisible = false">取 消</el-button>
50         <el-button type="primary" @click="saveAttribute">确 定</el-button>
51       </template>
52     </el-dialog>
53   </div>
54 </template>
55
56 <script lang="ts" setup>
57 import { ElMessageBox } from 'element-plus'
58 defineOptions({ name: 'ElementProperties' })
59 const props = defineProps({
60   id: String,
61   type: String
62 })
63 const prefix = inject('prefix')
64 // const width = inject('width')
65
66 const elementPropertyList = ref<any[]>([])
67 const propertyForm = ref<any>({})
68 const editingPropertyIndex = ref(-1)
69 const propertyFormModelVisible = ref(false)
70 const bpmnElement = ref()
71 const otherExtensionList = ref()
72 const bpmnElementProperties = ref()
73 const bpmnElementPropertyList = ref()
74 const attributeFormRef = ref()
75 const bpmnInstances = () => (window as any)?.bpmnInstances
76
77 const resetAttributesList = () => {
78   bpmnElement.value = bpmnInstances().bpmnElement
79   otherExtensionList.value = [] // 其他扩展配置
80   bpmnElementProperties.value =
81     // bpmnElement.value.businessObject?.extensionElements?.filter((ex) => {
3e359e 82     bpmnElement.value.businessObject?.extensionElements?.values?.filter((ex) => {
820397 83       if (ex.$type !== `${prefix}:Properties`) {
H 84         otherExtensionList.value.push(ex)
85       }
86       return ex.$type === `${prefix}:Properties`
9259c2 87     }) ?? [];
820397 88
H 89   // 保存所有的 扩展属性字段
90   bpmnElementPropertyList.value = bpmnElementProperties.value.reduce(
91     (pre, current) => pre.concat(current.values),
92     []
93   )
94   // 复制 显示
95   elementPropertyList.value = JSON.parse(JSON.stringify(bpmnElementPropertyList.value ?? []))
96 }
97 const openAttributesForm = (attr, index) => {
98   editingPropertyIndex.value = index
99   propertyForm.value = index === -1 ? {} : JSON.parse(JSON.stringify(attr))
100   propertyFormModelVisible.value = true
101   nextTick(() => {
102     if (attributeFormRef.value) attributeFormRef.value.clearValidate()
103   })
104 }
105 const removeAttributes = (attr, index) => {
106   console.log(attr, 'attr')
107   ElMessageBox.confirm('确认移除该属性吗？', '提示', {
108     confirmButtonText: '确 认',
109     cancelButtonText: '取 消'
110   })
111     .then(() => {
112       elementPropertyList.value.splice(index, 1)
113       bpmnElementPropertyList.value.splice(index, 1)
114       // 新建一个属性字段的保存列表
115       const propertiesObject = bpmnInstances().moddle.create(`${prefix}:Properties`, {
116         values: bpmnElementPropertyList.value
117       })
118       updateElementExtensions(propertiesObject)
119       resetAttributesList()
120     })
121     .catch(() => console.info('操作取消'))
122 }
123 const saveAttribute = () => {
124   console.log(propertyForm.value, 'propertyForm.value')
125   const { name, value } = propertyForm.value
126   if (editingPropertyIndex.value !== -1) {
127     bpmnInstances().modeling.updateModdleProperties(
128       toRaw(bpmnElement.value),
129       toRaw(bpmnElementPropertyList.value)[toRaw(editingPropertyIndex.value)],
130       {
131         name,
132         value
133       }
134     )
135   } else {
136     // 新建属性字段
137     const newPropertyObject = bpmnInstances().moddle.create(`${prefix}:Property`, {
138       name,
139       value
140     })
141     // 新建一个属性字段的保存列表
142     const propertiesObject = bpmnInstances().moddle.create(`${prefix}:Properties`, {
143       values: bpmnElementPropertyList.value.concat([newPropertyObject])
144     })
145     updateElementExtensions(propertiesObject)
146   }
147   propertyFormModelVisible.value = false
148   resetAttributesList()
149 }
150 const updateElementExtensions = (properties) => {
151   const extensions = bpmnInstances().moddle.create('bpmn:ExtensionElements', {
152     values: otherExtensionList.value.concat([properties])
153   })
154   bpmnInstances().modeling.updateProperties(toRaw(bpmnElement.value), {
155     extensionElements: extensions
156   })
157 }
158
159 watch(
160   () => props.id,
161   (val) => {
162     if (val) {
163       val && val.length && resetAttributesList()
164     }
165   },
166   { immediate: true }
167 )
168 </script>