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

@@ -1,6 +1,14 @@
<template>
  <basic-container class="">
    <avue-crud :data="data" :option="option" @refresh-change="search" :table-loading="loading">
    <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"
@@ -32,7 +40,11 @@
      :width="dialogWidth"
      :title="title"
      append-to-body
      :before-close="() => {visible = false}"
      :before-close="
        () => {
          visible = false;
        }
      "
      top="10vh"
    >
      <CycleFlow
@@ -54,18 +66,23 @@
</template>

<script>
import API from '@/api/modeling/cycle'
import API from "@/api/modeling/cycle";
import CycleFlow from "@/components/flow-cycle/flowchartEditor.vue";
export default {
  name: "cycle.vue",
  components: { CycleFlow },
  data() {
    return {
      form: {
        page: 1,
        limit: 10
      form: {},
      page: {
        pageSize: 10,
        total: 0,
        currentPage: 1,
        layout: "total, sizes, prev, pager, next, jumper"
      },
      option: {
        searchMenuSpan: 12,
        searchMenuPosition: "right",
        border: true,
        align: "center",
        menuAlign: "center",
@@ -81,10 +98,12 @@
          {
            label: "名称",
            prop: "name",
            search: true,
          },
          {
            label: "起始状态",
            prop: "startStatusName",
            search: true,
          },
          {
            label: "描述",
@@ -92,84 +111,43 @@
          },
        ],
      },
      // 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,
      //         },
      //       ],
      //     },
      //   },
      // ],
      data: [],
      title: "预览生命周期流程图",
      visible: false,
      flowChartNodeItems: [],
      rowData: {},
      dialogWidth: "50%",
      type: "detail",
      loading: false
      loading: false,
    };
  },
  created() {
    this.search()
    this.search("search", {});
  },
  methods: {
    search() {
      this.loading = true
      API.getList(this.form).then(res => {
        this.loading = false
        this.data = res.data.data
      })
    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;
      console.log(
        Object.assign({}, params, this.page),
        "Object.assign({}, params, this.page)"
      );
      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) {
      if (type === "detail") {
@@ -188,11 +166,29 @@
    },
    async submit() {
      const newRowData = await this.$refs.vueFlowchartEditor.getNewRowData();
      console.log(newRowData, 'newRowDatanewRowData');
      if (!newRowData) {
        return;
      }
      const flowData = this.$refs.vueFlowchartEditor.getFlowData();
      console.log(JSON.stringify(flowData));
      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;
      },
    },
  },
};