From 10c2ee4be4508c62b5980cc7059b1e8e95f7a3cc Mon Sep 17 00:00:00 2001
From: ludc
Date: 星期二, 04 七月 2023 17:22:11 +0800
Subject: [PATCH] Merge branch 'master' of http://dev.vci-tech.com:1065/r/ubcs
---
Source/UBCS-WEB/src/views/modeling/cycle.vue | 243 +++++++++++++++++++++++++++++++++++++-----------
1 files changed, 188 insertions(+), 55 deletions(-)
diff --git a/Source/UBCS-WEB/src/views/modeling/cycle.vue b/Source/UBCS-WEB/src/views/modeling/cycle.vue
index 4e3a4d6..ef721e2 100644
--- a/Source/UBCS-WEB/src/views/modeling/cycle.vue
+++ b/Source/UBCS-WEB/src/views/modeling/cycle.vue
@@ -1,66 +1,199 @@
<template>
- <div>
- <p>鐢熷懡鍛ㄦ湡妯″瀷</p>
- <el-button @click="tabs=!tabs">杞寲</el-button><br /><br />
- <avue-form @tab-click="handleTabClick" :option="option" v-model="form" @submit="handleSubmit">
- <template slot="group1Header">
- <h4>鑷畾涔夎〃澶�</h4>
- </template>
- </avue-form>
- </div>
+ <basic-container class="">
+ <avue-crud :data="data" :option="option" @refresh-change="gettableList" :table-loading="loading">
+ <template slot-scope="scope" slot="menuLeft">
+ <el-button
+ type="primary"
+ icon="el-icon-plus"
+ size="small"
+ @click="openDialog('add', {})"
+ >鏂板</el-button
+ >
+ </template>
+ <template slot-scope="{ row, index }" slot="menu">
+ <el-button
+ type="text"
+ icon="el-icon-edit"
+ size="mini"
+ @click="openDialog('edit', row)"
+ >缂栬緫</el-button
+ >
+ <el-button
+ type="text"
+ icon="el-icon-view"
+ size="mini"
+ @click="openDialog('detail', row)"
+ >棰勮</el-button
+ >
+ </template></avue-crud
+ >
+ <el-dialog
+ :visible="visible"
+ :width="dialogWidth"
+ :title="title"
+ append-to-body
+ :before-close="() => {visible = false}"
+ top="10vh"
+ >
+ <CycleFlow
+ v-if="visible"
+ class="cycle_flow"
+ :type="type"
+ :chart-data="rowData.data || {}"
+ :chart-data-node-items="flowChartNodeItems"
+ :rowData="rowData"
+ ref="vueFlowchartEditor"
+ @save-data="save"
+ />
+ <template #footer v-if="type !== 'detail'">
+ <el-button type="primary" size="mini" @click="submit">淇濆瓨</el-button>
+ <el-button type="" size="mini" @click="visible = false">鍙栨秷</el-button>
+ </template>
+ </el-dialog>
+ </basic-container>
</template>
<script>
+import CycleFlow from "@/components/flow-cycle/flowchartEditor.vue";
export default {
name: "cycle.vue",
- data(){
- return{
- tabs:true,
- form:{
- text:'鏂囨湰',
- text1:'鏂囨湰1',
- text2:'鏂囨湰2',
- text3:'鏂囨湰3',
- },
- }
- },
- computed:{
- option(){
- return{
- tabs:this.tabs,
- tabsActive:2,
- column: [{
- label: '鍐呭1',
- prop: 'text1',
- }],
- group:[
+ components: { CycleFlow },
+ data() {
+ return {
+ option: {
+ border: true,
+ align: "center",
+ menuAlign: "center",
+ menu: true,
+ delBtn: false,
+ editBtn: false,
+ addBtn: false,
+ column: [
{
- icon:'el-icon-info',
- label: '鍒嗙粍1',
- prop: 'group1',
- column: [{
- label: '鍐呭1',
- prop: 'text1',
- }]
- },{
- icon:'el-icon-info',
- label: '鍒嗙粍2',
- prop: 'group2',
- column: [{
- label: '閫夐」鍗�2',
- prop: 'text2',
- }, {
- label: '閫夐」鍗�3',
- prop: 'text3',
- }]
- }
- ]
+ label: "鍚嶇О",
+ prop: "name",
+ },
+ {
+ label: "鏍囩",
+ prop: "label",
+ },
+ {
+ label: "璧峰鐘舵��",
+ prop: "startState",
+ },
+ {
+ label: "鎻忚堪",
+ prop: "remark",
+ },
+ ],
+ },
+ data: [
+ {
+ name: "鎴戞槸name",
+ label: "鎴戞槸label",
+ startState: "鎴戞槸startState",
+ remark: "鎴戞槸remark",
+ data: {
+ nodes: [
+ {
+ type: "node",
+ size: "80*48",
+ shape: "flow-rect",
+ color: "#1890FF",
+ label: "Auditing",
+ x: 110.50303650877106,
+ y: 59.22389408123915,
+ id: "Auditing",
+ index: 0,
+ },
+ {
+ type: "node",
+ size: "80*48",
+ shape: "flow-rect",
+ color: "#1890FF",
+ label: "Editing",
+ x: 120.87992069414531,
+ y: 156.76660542375714,
+ id: "Editing",
+ index: 1,
+ },
+ {
+ type: "node",
+ size: "80*48",
+ shape: "flow-rect",
+ color: "#1890FF",
+ label: "Released",
+ x: 100.12615232339681,
+ y: 252.2339399292003,
+ id: "Released",
+ index: 2,
+ },
+ ],
+ edges: [
+ {
+ source: "Auditing",
+ sourceAnchor: 1,
+ target: "Released",
+ targetAnchor: 1,
+ },
+ {
+ source: "Editing",
+ sourceAnchor: 3,
+ target: "Auditing",
+ targetAnchor: 3,
+ },
+ ],
+ },
+ },
+ ],
+ title: "棰勮鐢熷懡鍛ㄦ湡娴佺▼鍥�",
+ visible: false,
+ flowChartNodeItems: [],
+ rowData: {},
+ dialogWidth: "50%",
+ type: "detail",
+ };
+ },
+ methods: {
+ gettableList() {
+ this.loading = true
+ },
+ openDialog(type, row) {
+ if (type === "detail") {
+ this.title = "棰勮鐢熷懡鍛ㄦ湡娴佺▼鍥�";
+ this.dialogWidth = "50%";
+ } else if (type === "edit") {
+ this.title = "缂栬緫鐢熷懡鍛ㄦ湡娴佺▼鍥�";
+ this.dialogWidth = "95%";
+ } else if (type === "add") {
+ this.title = "鏂板鐢熷懡鍛ㄦ湡娴佺▼鍥�";
+ this.dialogWidth = "95%";
}
- }
- }
-}
+ this.type = type;
+ this.rowData = row;
+ this.visible = true;
+ },
+ async submit() {
+ const newRowData = await this.$refs.vueFlowchartEditor.getNewRowData();
+ if (!newRowData) {
+ return;
+ }
+ const flowData = this.$refs.vueFlowchartEditor.getFlowData();
+ console.log(JSON.stringify(flowData));
+ },
+ },
+};
</script>
-<style scoped>
-
+<style lang="scss" scoped>
+/deep/ .el-dialog__body {
+ padding: 0 20px;
+}
+.cycle_flow {
+ height: 600px !important;
+ display: flex;
+ flex-direction: column;
+ margin: 0;
+ padding: 0;
+}
</style>
--
Gitblit v1.9.3