lihang
2023-07-10 f4c578e2d3334e8bcb70ac0552a058029c35b5af
Source/UBCS-WEB/src/views/modeling/cycle.vue
@@ -1,66 +1,212 @@
<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="search" :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 API from '@/api/modeling/cycle'
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',
  components: { CycleFlow },
  data() {
    return {
      form: {
        page: 1,
        limit: 10
      },
    }
  },
  computed:{
    option(){
      return{
        tabs:this.tabs,
        tabsActive:2,
        column: [{
          label: '内容1',
          prop: 'text1',
        }],
        group:[
      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: "id",
          },
          {
            label: "名称",
            prop: "name",
          },
          {
            label: "起始状态",
            prop: "startStatusName",
          },
          {
            label: "描述",
            prop: "description",
          },
        ],
      },
      // 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",
      loading: false
    };
  },
  created() {
    this.search()
  },
  methods: {
    search() {
      this.loading = true
      API.getList(this.form).then(res => {
        this.loading = false
        this.data = res.data.data
      })
    },
    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>