Source/UBCS-WEB/src/views/modeling/cycle.vue

@@ -1,190 +1,199 @@
<template>
  <el-container>
  <el-aside width="240px">
    <el-button @click="addHandlers"></el-button>
    <basic-container style="margin-top: 10px">
      <avue-tree id="basic" :data="treeData" :option="treeOption"  >
      </avue-tree>
    </basic-container>
  </el-aside>
  <basic-container >
    <el-button type="primary" @click="dialogTableVisible=true" size="small">创建模板</el-button>
    <el-button type="primary"  size="small" @click="addHandlers">编辑模板</el-button>
    <el-button type="primary" size="small" @click="$refs.flow.addNode('ffff')">添加节点</el-button>
    <br/><br/>
    <avue-flow ref="flow" v-model="form" :height="703" :option="option" :width="1500">
      <template slot="header" slot-scope="scope">
        <i class="el-icon-delete" @click="$refs.flow.deleteNode(scope.node.id)" style="margin-top: 8px"></i>
  <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>
      <div slot-scope="{node}">
        <span>{{ (node || {}).name }}</span>
      </div>
    </avue-flow>
    <!--    创建对话框-->
    <el-dialog title="创建模板" :visible.sync="dialogTableVisible" append-to-body>
      <avue-form :data="addData" :option="addoption" v-model="forms">

        <template slot="filetype">
          <el-select v-model="forms.select" slot="prepend" placeholder="请选择" style="max-width: 300px">
            <el-option label="测试1" value="1"></el-option>
            <el-option label="测试2" value="2"></el-option>
            <el-option label="测试3" value="3"></el-option>
          </el-select>
          <el-button  type="primary" @click="handelLife" style="display: inline-block;margin-left: 5px">
            添加起始状态
          </el-button>
        </template>
      </avue-form>
      <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>


  </el-container>

</template>

<script>
import CycleFlow from "@/components/flow-cycle/flowchartEditor.vue";
export default {
  name: "cycle.vue",
  components: { CycleFlow },
  data() {
    return {
      //模板对话框,
      dialogTableVisible:false,
      forms:{
        select:""
      },
      addData:[],
      addoption:{
        formslot:true,
        column:[
      option: {
        border: true,
        align: "center",
        menuAlign: "center",
        menu: true,
        delBtn: false,
        editBtn: false,
        addBtn: false,
        column: [
          {
            label:"名称",
            prop:"name"
            label: "名称",
            prop: "name",
          },
          {
            label:"标签",
            prop:"tag"
            label: "标签",
            prop: "label",
          },
          {
            label:"起始状态",
            prop:"filetype",
            formslot: true,
            span:24
            label: "起始状态",
            prop: "startState",
          },
          {
            label: "描述",
            prop:"desc",
            type:"textarea",
            span:13
          }
        ]
      },
      count: 0,
      form: {},
      treeData: [{
        value: 0,
        label: '生命周期模板列表',
        children: [
          {
            value: 1,
            label: 'A',
            prop: "remark",
          },
          {
            value: 2,
            label: 'B',
          },
          {
            value: 3,
            label: 'C',
          },
          {
            value: 4,
            label: 'D',
          },
          {
            value: 5,
            label: 'E',
          }
        ]
      }],
      treeOption: {
        defaultExpandAll: true,
      },
      option: {
        nodeList: [
          {
            "id": "nodeA",
            "name": "流程A-节点A",
            "left": 39,
            "top": 110,
          },
          {
            "id": "nodeB",
            "name": "流程A-节点B",
            "left": 340,
            "top": 161,
          },
          {
            "id": "nodeC",
            "name": "流程A-节点C",
            "left": 739,
            "top": 161,
          },
          {
            "id": "nodeD",
            "name": "节点D",
            "left": 739,
            "top": 20,
          }
        ],
        lineList: [
          {
            "from": "nodeA",
            "to": "nodeB"
      },
      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,
              },
            ],
          },
          {
            "from": "nodeB",
            "to": "nodeC"
          },
          {
            "from": "nodeC",
            "to": "nodeD"
          }
        ]
      },
      computed: {
        nodeList() {
          return this.option.nodeList
        }
      },
      mounted() {
        this.form = this.nodeList[this.count].id;
      },
      methods: {
        handleClick(node) {
          this.$message.success(JSON.stringify(node))
          console.log(node)
        },
        addHandler(){
          this.dialogTableVisible=true
          console.log(1)
        },

        handelLife(){
          console.log("点击成功")
        },
        addHandlers(){
          console.log(111)
        }
      ],
      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 lang="scss">
#basic {
  height: 761px;
  border-radius: 10px;
<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>