<template>
|
<div class="panel-tab__content">
|
<el-table :data="elementPropertyList" size="mini" 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="操作" width="90px">
|
<template slot-scope="{ row, $index }">
|
<el-button size="mini" type="text" style="color: #ff4d4f" @click="removeAttributes(row, $index)">移除</el-button>
|
</template>
|
</el-table-column>
|
</el-table>
|
<div class="element-drawer__button">
|
<el-button size="mini" type="primary" icon="el-icon-setting" @click="openAttributesForm(null, -1)">属性设置</el-button>
|
</div>
|
|
<el-dialog :visible.sync="propertyFormModelVisible" title="属性配置" width="600px" @close="closeProperty" append-to-body :destroy-on-close="true" :close-on-click-modal="false">
|
<div v-for="item in canConfigPropertyList" style="margin-bottom: 20px; display: flex; align-items: center;">
|
<!-- Name -->
|
<span style="flex: 0 0 100px; text-align: right; margin-right: 20px;">{{ item.name }}</span>
|
<!-- 组件 -->
|
<div >
|
<!-- Switch -->
|
<div v-if="item.vueType === 'switch'">
|
<el-switch
|
v-model="item.value"
|
@change="(val) => item.method(item.name, val === true ? '是' : '否')"
|
active-color="#13ce66"
|
inactive-color="#ff4949"
|
>
|
</el-switch>
|
</div>
|
<!-- Select -->
|
<div v-if="item.vueType === 'select'">
|
<el-select
|
v-model="item.value"
|
@change="(val) => item.method(item.name, val)"
|
placeholder="请选择"
|
>
|
<el-option
|
v-for="option in item.options"
|
:key="option.value"
|
:label="option.label"
|
:value="option.value"
|
>
|
</el-option>
|
</el-select>
|
</div>
|
</div>
|
</div>
|
<!-- <el-form :model="propertyForm" label-width="80px" size="mini" ref="attributeFormRef" @submit.native.prevent>-->
|
<!-- <el-form-item label="属性名：" prop="name">-->
|
<!-- <el-input v-model="propertyForm.name" clearable />-->
|
<!-- </el-form-item>-->
|
<!-- <el-form-item label="属性值：" prop="value">-->
|
<!-- <el-input v-model="propertyForm.value" clearable />-->
|
<!-- </el-form-item>-->
|
<!-- </el-form>-->
|
<template slot="footer">
|
<el-button size="mini" @click="closeProperty">关 闭</el-button>
|
</template>
|
</el-dialog>
|
</div>
|
</template>
|
|
<script>
|
import {StrUtil} from "@/utils/StrUtil";
|
|
export default {
|
name: "PropertiesPanel",
|
props: {
|
id: {
|
type: String,
|
required: true
|
},
|
},
|
data() {
|
return {
|
canConfigPropertyList: [
|
{
|
name: '是否审批节点',
|
value: false,
|
vueType: 'switch',
|
method: (name, value) => {
|
this.propertyForm.name = name
|
this.propertyForm.value = value
|
this.saveAttribute()
|
}
|
},
|
{
|
name: '是否允许跳过',
|
value: false,
|
vueType: 'switch',
|
method: (name, value) => {
|
this.propertyForm.name = name
|
this.propertyForm.value = value
|
this.saveAttribute()
|
}
|
},
|
{
|
name: '是否允许容缺',
|
value: false,
|
vueType: 'switch',
|
method: (name, value) => {
|
this.propertyForm.name = name
|
this.propertyForm.value = value
|
this.saveAttribute()
|
}
|
},
|
{
|
name: '是否允许挂起',
|
value: false,
|
vueType: 'switch',
|
method: (name, value) => {
|
this.propertyForm.name = name
|
this.propertyForm.value = value
|
this.saveAttribute()
|
}
|
},
|
{
|
name: '项目阶段',
|
value: null,
|
vueType: 'select',
|
options: [
|
{label: '储备规划阶段',value: '储备规划阶段'},
|
{label: '项目前期阶段',value: '项目前期阶段'},
|
{label: '实施阶段',value: '实施阶段'},
|
{label: '竣工投用阶段',value: '竣工投用阶段'}
|
],
|
method: (name, value) => {
|
this.propertyForm.name = name
|
this.propertyForm.value = value
|
this.saveAttribute()
|
}
|
}
|
], // 可以配置的属性列表
|
elementPropertyList: [], // 扩展属性列表
|
otherExtensionList: [],
|
propertyForm: {},
|
editingPropertyIndex: -1,
|
propertyFormModelVisible: false
|
};
|
},
|
watch: {
|
id: {
|
immediate: true,
|
handler(val) {
|
if (StrUtil.isNotBlank(val)) {
|
this.resetAttributesList();
|
}
|
}
|
}
|
},
|
methods: {
|
closeProperty() {
|
this.propertyFormModelVisible = false
|
// this.resetList()
|
},
|
resetList() {
|
this.canConfigPropertyList = [
|
{
|
name: '是否审批节点',
|
value: false,
|
vueType: 'switch',
|
method: (name, value) => {
|
this.propertyForm.name = name
|
this.propertyForm.value = value
|
this.saveAttribute()
|
}
|
},
|
{
|
name: '是否允许跳过',
|
value: false,
|
vueType: 'switch',
|
method: (name, value) => {
|
this.propertyForm.name = name
|
this.propertyForm.value = value
|
this.saveAttribute()
|
}
|
},
|
{
|
name: '是否允许容缺',
|
value: false,
|
vueType: 'switch',
|
method: (name, value) => {
|
this.propertyForm.name = name
|
this.propertyForm.value = value
|
this.saveAttribute()
|
}
|
}
|
]
|
},
|
resetAttributesList() {
|
this.bpmnElement = this.modelerStore.element;
|
this.otherExtensionList = []; // 其他扩展配置
|
this.bpmnElementProperties =
|
this.bpmnElement.businessObject?.extensionElements?.values?.filter(ex => {
|
if (ex.$type !== `flowable:Properties`) {
|
this.otherExtensionList.push(ex);
|
}
|
return ex.$type === `flowable:Properties`;
|
}) ?? [];
|
// 保存所有的 扩展属性字段
|
this.bpmnElementPropertyList = this.bpmnElementProperties.reduce((pre, current) => {
|
// 检查 current.values 是否是数组，如果不是则使用空数组
|
const values = current.values ? current.values : [];
|
return pre.concat(values);
|
}, []);
|
console.log("bpmnElementProperties",this.bpmnElementProperties)
|
// 回显
|
this.canConfigPropertyList.forEach(item => {
|
const find = this.bpmnElementPropertyList.find(el => el.name === item.name);
|
if (find) {
|
if (item.vueType === 'switch') {
|
item.value = find.value === '是' ? true : false
|
}else if (item.vueType === 'select') {
|
item.value = find.value
|
}
|
} else {
|
item.value = null
|
}
|
})
|
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 = this.modelerStore.moddle.create(`flowable:Properties`, {
|
values: this.bpmnElementPropertyList
|
});
|
this.updateElementExtensions(propertiesObject);
|
this.resetAttributesList();
|
})
|
.catch(() => console.info("操作取消"));
|
},
|
saveAttribute() {
|
const { name, value } = this.propertyForm;
|
console.log(this.bpmnElementPropertyList, "属性列表");
|
if (this.editingPropertyIndex !== -1) {
|
this.modelerStore.modeling.updateModdleProperties(this.bpmnElement, this.bpmnElementPropertyList[this.editingPropertyIndex], {
|
name,
|
value
|
});
|
} else {
|
// 如果已经存在这个属性,就做修改
|
const find = this.bpmnElementPropertyList.find(item => item.name === name);
|
if (find) {
|
this.modelerStore.modeling.updateModdleProperties(this.bpmnElement, this.bpmnElementPropertyList[this.bpmnElementPropertyList.indexOf(find)], {
|
name,
|
value
|
});
|
} else {
|
// 新建属性字段
|
const newPropertyObject = this.modelerStore.moddle.create(`flowable:Property`, { name, value });
|
// 新建一个属性字段的保存列表
|
const propertiesObject = this.modelerStore.moddle.create(`flowable:Properties`, {
|
values: this.bpmnElementPropertyList.concat([newPropertyObject])
|
});
|
this.updateElementExtensions(propertiesObject);
|
}
|
}
|
// this.propertyFormModelVisible = false;
|
this.$message.success("操作成功")
|
this.resetAttributesList();
|
},
|
updateElementExtensions(properties) {
|
const extensions = this.modelerStore.moddle.create("bpmn:ExtensionElements", {
|
values: this.otherExtensionList.concat([properties])
|
});
|
|
this.modelerStore.modeling.updateProperties(this.bpmnElement, {
|
extensionElements: extensions
|
});
|
}
|
}
|
};
|
</script>
|
