流程设计更新
This commit is contained in:
XaoLi717
parent
44d52fc731
commit
296cdb991e
@ -58,7 +58,8 @@
|
||||
<el-collapse v-model="tab_active">
|
||||
<el-collapse-item name="condition" v-if="formVisible" key="form">
|
||||
<template #title><Icon icon="ep:list" />表单</template>
|
||||
<element-form :id="elementId" :type="elementType" />
|
||||
<!-- <element-form :id="elementId" :type="elementType" /> 久组件-->
|
||||
<ElementFormNew :id="elementId" :type="elementType" />
|
||||
</el-collapse-item>
|
||||
</el-collapse>
|
||||
</div>
|
||||
@ -90,6 +91,7 @@ import FlowCondition from './flow-condition/FlowCondition.vue'
|
||||
import SignalAndMassage from './signal-message/SignalAndMessage.vue'
|
||||
import ElementListeners from './listeners/ElementListeners.vue'
|
||||
import ElementProperties from './properties/ElementProperties.vue'
|
||||
import ElementFormNew from './form/ElementFormNew.vue'
|
||||
// import ElementForm from './form/ElementForm2.vue'
|
||||
import UserTaskListeners from './listeners/UserTaskListeners.vue'
|
||||
// 切换tab自动刷新实现 begin+++++++++++++
|
||||
|
||||
@ -20,11 +20,70 @@
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
|
||||
<div class="panel-tab__content" v-if="itemType == 1 ">
|
||||
<el-input v-model="itemContent" @change="updateElementItemContent" />
|
||||
<div v-if="itemType == 1 ">
|
||||
|
||||
<el-table
|
||||
:data="parsedData"
|
||||
max-height="240"
|
||||
fit
|
||||
border
|
||||
>
|
||||
<el-table-column label="序号" width="60px" type="index" />
|
||||
<el-table-column label="字段名" prop="key" min-width="100px" show-overflow-tooltip />
|
||||
<el-table-column label="字段值" prop="value" min-width="100px" show-overflow-tooltip />
|
||||
<el-table-column label="操作" width="110px">
|
||||
<template #default="scope">
|
||||
<el-button link @click="EditForm(scope.row, scope.$index)" size="small">
|
||||
编辑
|
||||
</el-button>
|
||||
<el-divider direction="vertical" />
|
||||
<el-button link size="small" style="color: #ff4d4f" @click="removeForm(scope.$index)">
|
||||
移除
|
||||
</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
|
||||
<div class="element-drawer__button">
|
||||
<XButton
|
||||
type="primary"
|
||||
preIcon="ep:plus"
|
||||
title="添加字段"
|
||||
@click="addNew()"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<el-dialog
|
||||
v-model="Visible"
|
||||
title="字段配置"
|
||||
width="600px"
|
||||
append-to-body
|
||||
destroy-on-close
|
||||
>
|
||||
|
||||
<el-form
|
||||
:model="propertyForm"
|
||||
:rules="formRules"
|
||||
label-width="80px"
|
||||
>
|
||||
<el-form-item label="字段名：" prop="key">
|
||||
<el-input v-model="propertyForm.key" clearable />
|
||||
</el-form-item>
|
||||
<el-form-item label="字段值：" prop="value">
|
||||
<el-input v-model="propertyForm.value" clearable />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
|
||||
<template #footer>
|
||||
<el-button @click="Visible = false">取 消</el-button>
|
||||
<el-button type="primary" @click="saveAttribute">确 定</el-button>
|
||||
</template>
|
||||
|
||||
</el-dialog>
|
||||
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
@ -69,6 +128,98 @@ const bpmnELement = ref()
|
||||
const elExtensionElements = ref()
|
||||
const formData = ref()
|
||||
const otherExtensions = ref()
|
||||
// ----------------------------------------------------------------------------- 扩展组件应用
|
||||
const parsedData =ref([]); // 定义存放JSON数组对象
|
||||
const Visible = ref(false); // 弹窗控制
|
||||
const idEditIndex = ref(null); // 编辑索引判断是否编辑
|
||||
// 表单数据模型
|
||||
const propertyForm = ref({
|
||||
key:undefined,
|
||||
value:undefined
|
||||
})
|
||||
// 表单校验
|
||||
const formRules = reactive({
|
||||
key: [{ required: true, message: '字段名不能为空', trigger: 'blur' }],
|
||||
value: [{ required: true, message: '字段值不能为空', trigger: 'blur' }],
|
||||
})
|
||||
|
||||
// 新建修改字段
|
||||
const addNew = ()=> {
|
||||
resetForm();
|
||||
Visible.value = true;
|
||||
}
|
||||
|
||||
// 清空表单数据
|
||||
const resetForm = ()=> {
|
||||
propertyForm.value={
|
||||
key:undefined,
|
||||
value:undefined
|
||||
}
|
||||
idEditIndex.value = null;
|
||||
}
|
||||
|
||||
// 保存数据并更新itemContent
|
||||
const saveAttribute = ()=> {
|
||||
// console.log("保存idEditIndex--------: ",idEditIndex.value)
|
||||
|
||||
// 深拷贝后添加，避免引用问题
|
||||
const newAttribute = { ...propertyForm.value };
|
||||
|
||||
// 判断idEditIndex 为空新建,不为空更新
|
||||
if (idEditIndex.value === null) {
|
||||
parsedData.value.push(newAttribute)
|
||||
} else {
|
||||
parsedData.value[idEditIndex.value] = newAttribute;
|
||||
}
|
||||
|
||||
resetForm(); // 清空数据
|
||||
|
||||
updateContent(); // 更新itemContent
|
||||
|
||||
Visible.value = false // 关闭弹窗
|
||||
}
|
||||
|
||||
// 删除数据
|
||||
const removeForm = (index:any)=> {
|
||||
|
||||
// 删除弹框
|
||||
ElMessageBox.confirm('确认移除该字段吗？', '提示', {
|
||||
confirmButtonText: '确 认',
|
||||
cancelButtonText: '取 消'
|
||||
})
|
||||
.then(() => {
|
||||
// 判断index删除数据
|
||||
if (index >= 0 && index < parsedData.value.length) {
|
||||
parsedData.value.splice(index, 1);
|
||||
}
|
||||
// 更新itemContent
|
||||
updateContent();
|
||||
})
|
||||
.catch(() => console.info('操作取消'))
|
||||
}
|
||||
|
||||
// 编辑数据
|
||||
const EditForm = (attr:any,index:any)=> {
|
||||
|
||||
propertyForm.value = { ...attr}; // 赋值数据
|
||||
idEditIndex.value = index; // 赋值索引
|
||||
Visible.value = true; // 打开弹窗
|
||||
}
|
||||
|
||||
// XML数据每次改变更新
|
||||
const updateContent = ()=> {
|
||||
|
||||
// JSON数组 转换为字符串
|
||||
itemContent.value = JSON.stringify(parsedData.value)
|
||||
|
||||
// 更新itemContent
|
||||
updateElementItemContent();
|
||||
|
||||
// console.log("更新parsedData-------: ",parsedData.value)
|
||||
// console.log("更新itemContent--------:",itemContent.value)
|
||||
}
|
||||
|
||||
// ----------------------------------------------------------------------------- 扩展组件应用
|
||||
|
||||
const bpmnInstances = () => (window as any)?.bpmnInstances
|
||||
const resetFormList = () => { //
|
||||
@ -76,6 +227,14 @@ const resetFormList = () => { //
|
||||
formKey.value = bpmnELement.value.businessObject.formKey
|
||||
itemType.value = bpmnELement.value.businessObject.itemType
|
||||
itemContent.value = bpmnELement.value.businessObject.itemContent
|
||||
|
||||
try {
|
||||
// 转换为JSON数组
|
||||
parsedData.value = JSON.parse(itemContent.value);
|
||||
} catch (error) {
|
||||
console.error("无效JSON格式", error);
|
||||
}
|
||||
|
||||
if (formKey.value?.length > 0) {
|
||||
formKey.value = parseInt(formKey.value)
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user