工业互联网平台前端 vue3版本
查看 | 历史 | 提交 | 提交对比
潘志宝
9 天以前 273cb85713ed1d194eb4cc245daf29cd33be89e7
提交 | 用户 | 时间
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   console.log(window, 'windowwindowwindowwindowwindowwindowwindow')
79   bpmnElement.value = bpmnInstances().bpmnElement
80   otherExtensionList.value = [] // 其他扩展配置
81   bpmnElementProperties.value =
82     // bpmnElement.value.businessObject?.extensionElements?.filter((ex) => {
3e359e 83     bpmnElement.value.businessObject?.extensionElements?.values?.filter((ex) => {
820397 84       if (ex.$type !== `${prefix}:Properties`) {
H 85         otherExtensionList.value.push(ex)
86       }
87       return ex.$type === `${prefix}:Properties`
88     }) ?? []
89
90   // 保存所有的 扩展属性字段
91   bpmnElementPropertyList.value = bpmnElementProperties.value.reduce(
92     (pre, current) => pre.concat(current.values),
93     []
94   )
95   // 复制 显示
96   elementPropertyList.value = JSON.parse(JSON.stringify(bpmnElementPropertyList.value ?? []))
97 }
98 const openAttributesForm = (attr, index) => {
99   editingPropertyIndex.value = index
100   propertyForm.value = index === -1 ? {} : JSON.parse(JSON.stringify(attr))
101   propertyFormModelVisible.value = true
102   nextTick(() => {
103     if (attributeFormRef.value) attributeFormRef.value.clearValidate()
104   })
105 }
106 const removeAttributes = (attr, index) => {
107   console.log(attr, 'attr')
108   ElMessageBox.confirm('确认移除该属性吗？', '提示', {
109     confirmButtonText: '确 认',
110     cancelButtonText: '取 消'
111   })
112     .then(() => {
113       elementPropertyList.value.splice(index, 1)
114       bpmnElementPropertyList.value.splice(index, 1)
115       // 新建一个属性字段的保存列表
116       const propertiesObject = bpmnInstances().moddle.create(`${prefix}:Properties`, {
117         values: bpmnElementPropertyList.value
118       })
119       updateElementExtensions(propertiesObject)
120       resetAttributesList()
121     })
122     .catch(() => console.info('操作取消'))
123 }
124 const saveAttribute = () => {
125   console.log(propertyForm.value, 'propertyForm.value')
126   const { name, value } = propertyForm.value
127   if (editingPropertyIndex.value !== -1) {
128     bpmnInstances().modeling.updateModdleProperties(
129       toRaw(bpmnElement.value),
130       toRaw(bpmnElementPropertyList.value)[toRaw(editingPropertyIndex.value)],
131       {
132         name,
133         value
134       }
135     )
136   } else {
137     // 新建属性字段
138     const newPropertyObject = bpmnInstances().moddle.create(`${prefix}:Property`, {
139       name,
140       value
141     })
142     // 新建一个属性字段的保存列表
143     const propertiesObject = bpmnInstances().moddle.create(`${prefix}:Properties`, {
144       values: bpmnElementPropertyList.value.concat([newPropertyObject])
145     })
146     updateElementExtensions(propertiesObject)
147   }
148   propertyFormModelVisible.value = false
149   resetAttributesList()
150 }
151 const updateElementExtensions = (properties) => {
152   const extensions = bpmnInstances().moddle.create('bpmn:ExtensionElements', {
153     values: otherExtensionList.value.concat([properties])
154   })
155   bpmnInstances().modeling.updateProperties(toRaw(bpmnElement.value), {
156     extensionElements: extensions
157   })
158 }
159
160 watch(
161   () => props.id,
162   (val) => {
163     if (val) {
164       val && val.length && resetAttributesList()
165     }
166   },
167   { immediate: true }
168 )
169 </script>