<template>
|
<div>
|
<div class="tree_data_box">
|
<el-form
|
ref="form"
|
size="mini"
|
label-width="80px"
|
:model="newRowData"
|
:rules="rules"
|
>
|
<el-form-item label="名称" prop="name">
|
<el-input v-model.trim="newRowData.name" :maxLength="20" clearable />
|
</el-form-item>
|
<el-form-item label="编号" prop="id">
|
<el-input v-model.trim="newRowData.id" clearable />
|
</el-form-item>
|
<el-form-item label="起始状态" prop="startStatus">
|
<el-select
|
v-model="newRowData.startStatus"
|
placeholder="请选择起始状态"
|
:disabled="type === 'edit'"
|
style="width: 100%"
|
>
|
<el-option
|
v-for="item in existNodes"
|
:key="item.id"
|
:label="item.id"
|
:value="item.id"
|
>
|
</el-option>
|
</el-select>
|
</el-form-item>
|
<el-form-item label="描述">
|
<el-input v-model.trim="newRowData.remark" type="textarea"></el-input>
|
</el-form-item>
|
</el-form>
|
</div>
|
<detail-panel>
|
<template v-slot="{ status }">
|
<node-panel :status="status">
|
<detail-form type="node" />
|
</node-panel>
|
<edge-panel :status="status">
|
<detail-form type="edge" />
|
</edge-panel>
|
<group-panel :status="status">
|
<detail-form type="group" />
|
</group-panel>
|
<node-panel :status="status">
|
<div class="event">
|
<hr />
|
<div class="btn_box">
|
<el-button type="primary" size="mini">新增</el-button>
|
<el-button type="danger" size="mini">删除</el-button>
|
<el-button type="primary" size="mini">保存</el-button>
|
</div>
|
<div class="flex" v-for="(item, index) in eventList" :key="index" :class="{active: index === currentActive}">
|
<el-select size="mini" style="width: 70%" v-if="item.isEdit">
|
<el-option></el-option>
|
</el-select>
|
<span v-else style="width: 70%">{{item.evenName}}</span>
|
<el-button size="mini" type="text" class="red">删除</el-button>
|
<el-button size="mini" type="text" @click="editChange(item)">{{item.isEdit ? '暂存' : '编辑'}}</el-button>
|
</div>
|
</div>
|
</node-panel>
|
|
<!-- <multi-panel :status="status" /> -->
|
<!-- <canvas-panel :status="status" /> -->
|
</template>
|
</detail-panel>
|
</div>
|
</template>
|
|
<script>
|
import {
|
NodePanel,
|
EdgePanel,
|
GroupPanel,
|
MultiPanel,
|
CanvasPanel,
|
DetailPanel,
|
} from "vue-flowchart-editor";
|
import DetailForm from "./DetailForm";
|
|
export default {
|
name: "EditorDetailPanel",
|
components: {
|
NodePanel,
|
EdgePanel,
|
GroupPanel,
|
MultiPanel,
|
CanvasPanel,
|
DetailPanel,
|
DetailForm,
|
},
|
props: ["rowData", "existNodes", "type"],
|
data() {
|
return {
|
newRowData: {
|
startStatus: undefined,
|
name: undefined,
|
id: undefined,
|
remark: undefined,
|
},
|
rules: {
|
name: [{ required: true, message: "名称不能为空", trigger: "blur" }],
|
id: [
|
{ required: true, message: "标签不能为空", trigger: "blur" },
|
{
|
pattern: /^[A-z]+$/g,
|
message: "标签只能输入英文",
|
trigger: "blur",
|
},
|
],
|
startStatus: [
|
{ required: true, message: "起始状态不能为空", trigger: "change" },
|
],
|
},
|
eventList: [{evenName: '123123'}],
|
currentActive: 0
|
};
|
},
|
methods: {
|
getNewRowDate() {
|
return new Promise((resolve) => {
|
this.$refs.form.validate((flag) => {
|
if (!flag) {
|
resolve(false);
|
} else {
|
resolve(this.newRowData);
|
}
|
});
|
});
|
},
|
editChange(row) {
|
this.$set(row, 'isEdit', !row.isEdit)
|
}
|
},
|
watch: {
|
rowData: {
|
deep: true,
|
immediate: true,
|
handler(newV) {
|
if (
|
typeof newV === "object" &&
|
newV !== null &&
|
Object.keys(this.rowData).length > 0
|
) {
|
this.newRowData = Object.assign({}, newV);
|
}
|
},
|
},
|
existNodes(newV) {
|
const flag = newV.some((item) => item.id === this.newRowData.startStatus);
|
if (!flag) {
|
this.newRowData.startStatus = undefined;
|
}
|
},
|
},
|
};
|
</script>
|
<style lang="scss" scoped>
|
.event {
|
margin-top: 20px;
|
text-align: center;
|
}
|
.flex {
|
margin-top: 10px;
|
display: flex;
|
justify-content: space-between;
|
}
|
.red {
|
color: red;
|
}
|
.active {
|
box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.4)
|
}
|
</style>
|
