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

@@ -1,66 +1,201 @@
<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>
  <el-container>
  <el-aside width="240px">
    <basic-container style="margin-top: 10px">
      <avue-tree id="basic" :data="treeData" :option="treeOption" @node-click="nodeClick"  >
      </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">编辑模板</el-button>
    <el-button type="primary" size="small" @click="$refs.flow.addNode('测试节点')">添加节点</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>
      </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>
    </el-dialog>
  </basic-container>


  </el-container>

</template>

<script>
export default {
  name: "cycle.vue",
  data(){
    return{
      tabs:true,
      form:{
        text:'文本',
        text1:'文本1',
        text2:'文本2',
        text3:'文本3',
  data() {
    return {
      //模板对话框
      dialogTableVisible:false,
      forms:{
        select:""
      },
    }
  },
  computed:{
    option(){
      return{
        tabs:this.tabs,
        tabsActive:2,
        column: [{
          label: '内容1',
          prop: 'text1',
        }],
        group:[
      addData:[],
      addoption:{
        formslot:true,
        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:"tag"
          },
          {
            label:"起始状态",
            prop:"filetype",
            formslot: true,
            span:24
            // type:"select",
            // dicData:[
            //   {
            //     label:"测试1",
            //     value:0
            //   },
            //   {
            //     label:"测试2",
            //     value:1
            //   },
            //   {
            //     label:"测试3",
            //     value:2
            //   },
            // ]
          },
          {
            label: "描述",
            prop:"desc",
            type:"textarea",
            span:13
          }
        ]
      },
      count: 0,
      form: {},
      treeData: [{
        value: 0,
        label: '生命周期模板列表',
        children: [
          {
            value: 1,
            label: 'A',
          },
          {
            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"
          },
          {
            "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)

        },
        deleteNode(id){
          console.log(id)
        }
      }
    }
  }
}
</script>

<style scoped>

<style lang="scss">
#basic {
  height: 761px;
  border-radius: 10px;
}
</style>