保存、预览流程
This commit is contained in:
@ -1,23 +1,65 @@
|
||||
<template>
|
||||
<div class="panel-tab__content">
|
||||
<el-table :data="elementPropertyList" size="small" max-height="240" border fit>
|
||||
<el-table
|
||||
:data="elementPropertyList"
|
||||
size="small"
|
||||
max-height="240"
|
||||
border
|
||||
fit
|
||||
>
|
||||
<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="value" min-width="100px" show-overflow-tooltip />
|
||||
<el-table-column
|
||||
label="属性名"
|
||||
prop="name"
|
||||
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 slot-scope="{ row, $index }">
|
||||
<el-button size="small" type="text" @click="openAttributesForm(row, $index)">编辑</el-button>
|
||||
<el-button size="small" link @click="openAttributesForm(row, $index)"
|
||||
>编辑</el-button
|
||||
>
|
||||
<el-divider direction="vertical" />
|
||||
<el-button size="small" type="text" style="color: #ff4d4f" @click="removeAttributes(row, $index)">移除</el-button>
|
||||
<el-button
|
||||
size="small"
|
||||
link
|
||||
style="color: #ff4d4f"
|
||||
@click="removeAttributes(row, $index)"
|
||||
>移除</el-button
|
||||
>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<div class="element-drawer__button">
|
||||
<el-button size="small" type="primary" icon="el-icon-plus" @click="openAttributesForm(null, -1)">添加属性</el-button>
|
||||
<el-button
|
||||
size="small"
|
||||
type="primary"
|
||||
icon="el-icon-plus"
|
||||
@click="openAttributesForm(null, -1)"
|
||||
>添加属性</el-button
|
||||
>
|
||||
</div>
|
||||
|
||||
<el-dialog v-model="propertyFormModelVisible" title="属性配置" width="600px" append-to-body destroy-on-close>
|
||||
<el-form :model="propertyForm" label-width="80px" size="small" ref="attributeFormRef" @submit.native.prevent>
|
||||
<el-dialog
|
||||
v-model="propertyFormModelVisible"
|
||||
title="属性配置"
|
||||
width="600px"
|
||||
append-to-body
|
||||
destroy-on-close
|
||||
>
|
||||
<el-form
|
||||
:model="propertyForm"
|
||||
label-width="80px"
|
||||
size="small"
|
||||
ref="attributeFormRef"
|
||||
@submit.native.prevent
|
||||
>
|
||||
<el-form-item label="属性名：" prop="name">
|
||||
<el-input v-model="propertyForm.name" clearable />
|
||||
</el-form-item>
|
||||
@ -25,110 +67,139 @@
|
||||
<el-input v-model="propertyForm.value" clearable />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<template slot="footer">
|
||||
<el-button size="small" @click="propertyFormModelVisible = false">取 消</el-button>
|
||||
<el-button size="small" type="primary" @click="saveAttribute">确 定</el-button>
|
||||
<template #footer>
|
||||
<el-button size="small" @click="propertyFormModelVisible = false"
|
||||
>取 消</el-button
|
||||
>
|
||||
<el-button size="small" type="primary" @click="saveAttribute"
|
||||
>确 定</el-button
|
||||
>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
<script setup name="ElementProperties">
|
||||
import { ElMessageBox } from "element-plus";
|
||||
import { toRefs } from "vue";
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "ElementProperties",
|
||||
props: {
|
||||
id: String,
|
||||
type: String
|
||||
},
|
||||
inject: {
|
||||
prefix: "prefix",
|
||||
width: "width"
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
elementPropertyList: [],
|
||||
propertyForm: {},
|
||||
editingPropertyIndex: -1,
|
||||
propertyFormModelVisible: false
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
id: {
|
||||
immediate: true,
|
||||
handler(val) {
|
||||
val && val.length && this.resetAttributesList();
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
resetAttributesList() {
|
||||
this.bpmnElement = window.bpmnInstances.bpmnElement;
|
||||
this.otherExtensionList = []; // 其他扩展配置
|
||||
this.bpmnElementProperties =
|
||||
this.bpmnElement.businessObject?.extensionElements?.values?.filter(ex => {
|
||||
if (ex.$type !== `${this.prefix}:Properties`) {
|
||||
this.otherExtensionList.push(ex);
|
||||
}
|
||||
return ex.$type === `${this.prefix}:Properties`;
|
||||
}) ?? [];
|
||||
const props = defineProps({
|
||||
id: String,
|
||||
type: String,
|
||||
});
|
||||
const { id, type } = toRefs(props);
|
||||
const prefix = inject("prefix");
|
||||
const width = inject("width");
|
||||
const data = reactive({
|
||||
propertyForm: {},
|
||||
});
|
||||
const { propertyForm } = toRefs(data);
|
||||
|
||||
// 保存所有的 扩展属性字段
|
||||
this.bpmnElementPropertyList = this.bpmnElementProperties.reduce((pre, current) => pre.concat(current.values), []);
|
||||
// 复制 显示
|
||||
this.elementPropertyList = JSON.parse(JSON.stringify(this.bpmnElementPropertyList ?? []));
|
||||
},
|
||||
openAttributesForm(attr, index) {
|
||||
this.editingPropertyIndex = index;
|
||||
this.propertyForm = index === -1 ? {} : JSON.parse(JSON.stringify(attr));
|
||||
this.propertyFormModelVisible = true;
|
||||
this.$nextTick(() => {
|
||||
if (this.$refs["attributeFormRef"]) this.$refs["attributeFormRef"].clearValidate();
|
||||
});
|
||||
},
|
||||
removeAttributes(attr, index) {
|
||||
this.$confirm("确认移除该属性吗？", "提示", {
|
||||
confirmButtonText: "确 认",
|
||||
cancelButtonText: "取 消"
|
||||
})
|
||||
.then(() => {
|
||||
this.elementPropertyList.splice(index, 1);
|
||||
this.bpmnElementPropertyList.splice(index, 1);
|
||||
// 新建一个属性字段的保存列表
|
||||
const propertiesObject = window.bpmnInstances.moddle.create(`${this.prefix}:Properties`, {
|
||||
values: this.bpmnElementPropertyList
|
||||
});
|
||||
this.updateElementExtensions(propertiesObject);
|
||||
this.resetAttributesList();
|
||||
})
|
||||
.catch(() => console.info("操作取消"));
|
||||
},
|
||||
saveAttribute() {
|
||||
const { name, value } = this.propertyForm;
|
||||
if (this.editingPropertyIndex !== -1) {
|
||||
window.bpmnInstances.modeling.updateModdleProperties(this.bpmnElement, this.bpmnElementPropertyList[this.editingPropertyIndex], {
|
||||
name,
|
||||
value
|
||||
});
|
||||
} else {
|
||||
// 新建属性字段
|
||||
const newPropertyObject = window.bpmnInstances.moddle.create(`${this.prefix}:Property`, { name, value });
|
||||
// 新建一个属性字段的保存列表
|
||||
const propertiesObject = window.bpmnInstances.moddle.create(`${this.prefix}:Properties`, {
|
||||
values: this.bpmnElementPropertyList.concat([newPropertyObject])
|
||||
});
|
||||
this.updateElementExtensions(propertiesObject);
|
||||
let bpmnElement;
|
||||
let otherExtensionList;
|
||||
let bpmnElementPropertyList;
|
||||
let bpmnElementProperties;
|
||||
const elementPropertyList = ref([]);
|
||||
const editingPropertyIndex = ref(-1);
|
||||
const propertyFormModelVisible = ref(false);
|
||||
|
||||
watch(
|
||||
id,
|
||||
(val) => {
|
||||
val && val.length && resetAttributesList();
|
||||
},
|
||||
{ immediate: true }
|
||||
);
|
||||
|
||||
function resetAttributesList() {
|
||||
bpmnElement = window.bpmnInstances.bpmnElement;
|
||||
otherExtensionList = []; // 其他扩展配置
|
||||
bpmnElementProperties =
|
||||
bpmnElement.businessObject?.extensionElements?.values?.filter((ex) => {
|
||||
if (ex.$type !== `${prefix}:Properties`) {
|
||||
otherExtensionList.push(ex);
|
||||
}
|
||||
this.propertyFormModelVisible = false;
|
||||
this.resetAttributesList();
|
||||
},
|
||||
updateElementExtensions(properties) {
|
||||
const extensions = window.bpmnInstances.moddle.create("bpmn:ExtensionElements", {
|
||||
values: this.otherExtensionList.concat([properties])
|
||||
});
|
||||
window.bpmnInstances.modeling.updateProperties(this.bpmnElement, {
|
||||
extensionElements: extensions
|
||||
});
|
||||
}
|
||||
return ex.$type === `${prefix}:Properties`;
|
||||
}) ?? [];
|
||||
|
||||
// 保存所有的 扩展属性字段
|
||||
bpmnElementPropertyList = bpmnElementProperties.reduce(
|
||||
(pre, current) => pre.concat(current.values),
|
||||
[]
|
||||
);
|
||||
// 复制 显示
|
||||
elementPropertyList.value = JSON.parse(
|
||||
JSON.stringify(bpmnElementPropertyList ?? [])
|
||||
);
|
||||
}
|
||||
const attributeFormRef = ref();
|
||||
|
||||
function openAttributesForm(attr, index) {
|
||||
editingPropertyIndex.value = index;
|
||||
propertyForm.value = index === -1 ? {} : JSON.parse(JSON.stringify(attr));
|
||||
propertyFormModelVisible.value = true;
|
||||
nextTick(() => {
|
||||
if (attributeFormRef.value) attributeFormRef.value.clearValidate();
|
||||
});
|
||||
}
|
||||
|
||||
function removeAttributes(attr, index) {
|
||||
ElMessageBox.confirm("确认移除该属性吗？", "提示", {
|
||||
confirmButtonText: "确 认",
|
||||
cancelButtonText: "取 消",
|
||||
})
|
||||
.then(() => {
|
||||
elementPropertyList.value.splice(index, 1);
|
||||
bpmnElementPropertyList.splice(index, 1);
|
||||
// 新建一个属性字段的保存列表
|
||||
const propertiesObject = window.bpmnInstances.moddle.create(
|
||||
`${prefix}:Properties`,
|
||||
{
|
||||
values: bpmnElementPropertyList,
|
||||
}
|
||||
);
|
||||
updateElementExtensions(propertiesObject);
|
||||
resetAttributesList();
|
||||
})
|
||||
.catch(() => console.info("操作取消"));
|
||||
}
|
||||
function saveAttribute() {
|
||||
const { name, value } = propertyForm.value;
|
||||
if (editingPropertyIndex.value !== -1) {
|
||||
window.bpmnInstances.modeling.updateModdleProperties(
|
||||
bpmnElement,
|
||||
bpmnElementPropertyList[editingPropertyIndex.value],
|
||||
{
|
||||
name,
|
||||
value,
|
||||
}
|
||||
);
|
||||
} else {
|
||||
// 新建属性字段
|
||||
const newPropertyObject = window.bpmnInstances.moddle.create(
|
||||
`${prefix}:Property`,
|
||||
{ name, value }
|
||||
);
|
||||
// 新建一个属性字段的保存列表
|
||||
const propertiesObject = window.bpmnInstances.moddle.create(
|
||||
`${prefix}:Properties`,
|
||||
{
|
||||
values: bpmnElementPropertyList.concat([newPropertyObject]),
|
||||
}
|
||||
);
|
||||
updateElementExtensions(propertiesObject);
|
||||
}
|
||||
};
|
||||
propertyFormModelVisible.value = false;
|
||||
resetAttributesList();
|
||||
}
|
||||
function updateElementExtensions(properties) {
|
||||
const extensions = window.bpmnInstances.moddle.create(
|
||||
"bpmn:ExtensionElements",
|
||||
{
|
||||
values: otherExtensionList.concat([properties]),
|
||||
}
|
||||
);
|
||||
window.bpmnInstances.modeling.updateProperties(bpmnElement, {
|
||||
extensionElements: extensions,
|
||||
});
|
||||
}
|
||||
</script>
|
||||
|
||||
Reference in New Issue
Block a user