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

@@ -1,66 +1,227 @@
<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"
      :page="page"
      :table-loading="loading"
      @refresh-change="search"
      @search-change="search('search', ...arguments)"
      @search-reset="search('reset', ...arguments)"
    >
      <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="nodesEdgesData"
        :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: {
        pageSize: 10,
        total: 0,
        currentPage: 1,
        layout: "total, sizes, prev, pager, next, jumper",
      },
    }
  },
  computed:{
    option(){
      return{
        tabs:this.tabs,
        tabsActive:2,
        column: [{
          label: '内容1',
          prop: 'text1',
        }],
        group:[
      option: {
        searchMenuSpan: 12,
        searchMenuPosition: "right",
        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",
            search: true,
          },
          {
            label: "起始状态",
            prop: "startStatusName",
            search: true,
          },
          {
            label: "描述",
            prop: "description",
          },
        ],
      },
      data: [],
      title: "预览生命周期流程图",
      visible: false,
      flowChartNodeItems: [],
      rowData: {},
      nodesEdgesData: {},
      dialogWidth: "50%",
      type: "detail",
      loading: false,
    };
  },
  created() {
    this.search("search", {});
  },
  methods: {
    search(type, params, done) {
      if (type === "search") {
        this.page.currentPage = 1;
      } else if (type === "reset") {
        this.page = {
          pageSize: 10,
          total: 0,
          currentPage: 1,
        };
      }
    }
  }
}
      this.loading = true;
      const { limit, page } = this.page;
      API.getList(Object.assign({}, params, { limit, page })).then((res) => {
        this.loading = false;
        this.data = res.data.data.records;
        this.page.total = res.data.data.total;
        this.loading = false;
        done && done();
      });
    },
    openDialog(type, row) {
      this.type = type;
      if (type === "edit") {
        this.$set(row, "editLoading", true);
        this.title = "编辑生命周期流程图";
        this.dialogWidth = "95%";
      } else if (type === "detail") {
        this.$set(row, "detailLoading", true);
        this.title = "预览生命周期流程图";
        this.dialogWidth = "50%";
      }
      if (type !== "add") {
        API.detail({ id: row.id }).then((res) => {
          this.$set(row, "detailLoading", false);
          this.$set(row, "editLoading", false);
          this.rowData = row;
          this.nodesEdgesData = {nodes: res.nodes, edges: res.edges}
        });
      } else {
        this.title = "新增生命周期流程图";
        this.dialogWidth = "95%";
        this.visible = true;
      }
    },
    async submit() {
      const newRowData = await this.$refs.vueFlowchartEditor.getNewRowData();
      console.log(newRowData, "newRowDatanewRowData");
      if (!newRowData) {
        return;
      }
      const flowData = this.$refs.vueFlowchartEditor.getFlowData();
      if (Array.isArray(flowData.nodes)) {
        flowData.nodes = flowData.nodes.map((item) => {
          item.name = item.id;
          return item;
        });
      }
      if (Array.isArray(flowData.edges)) {
        flowData.edges = flowData.edges.map((item) => {
          item.name = item.label;
          return item;
        });
      }

      let params = {
        ...flowData,
        ...newRowData,
      };
      console.log(flowData, newRowData);
      API.add(params).then((res) => {
        console.log(res, "res");
      });
    },
  },
  watch: {
    page: {
      deep: true,
      immediate: true,
      handler(newV) {
        this.page.page = newV.currentPage;
        this.page.limit = newV.pageSize;
      },
    },
  },
};
</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>