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

@@ -1,6 +1,18 @@
<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"
      selection
      @size-change="search('size', ...arguments)"
      @current-change="search('current', ...arguments)"
      @refresh-change="search"
      @search-change="search('search', ...arguments)"
      @search-reset="search('reset', ...arguments)"
      @selection-change="selectionChange"
    >
      <template slot-scope="scope" slot="menuLeft">
        <el-button
          type="primary"
@@ -9,12 +21,22 @@
          @click="openDialog('add', {})"
          >新增</el-button
        >
        <el-button
          type="danger"
          icon="el-icon-delete"
          size="small"
          @click="batchDel()"
          v-if="selectedData.length > 0"
          :loading="delLoading"
          >删除</el-button
        >
      </template>
      <template slot-scope="{ row, index }" slot="menu">
        <el-button
          type="text"
          icon="el-icon-edit"
          size="mini"
          :loading="row.editLoading"
          @click="openDialog('edit', row)"
          >编辑</el-button
        >
@@ -22,8 +44,18 @@
          type="text"
          icon="el-icon-view"
          size="mini"
          :loading="row.detailLoading"
          @click="openDialog('detail', row)"
          >预览</el-button
        >
        <el-button
          class="btn_link_del"
          type="text"
          icon="el-icon-delete"
          size="mini"
          :loading="row.delLoading"
          @click="rowDel(row)"
          >删除</el-button
        >
      </template></avue-crud
    >
@@ -32,21 +64,31 @@
      :width="dialogWidth"
      :title="title"
      append-to-body
      :before-close="() => {visible = false}"
      :before-close="
        () => {
          visible = false;
        }
      "
      top="10vh"
    >
      <CycleFlow
        v-if="visible"
        class="cycle_flow"
        :type="type"
        :chart-data="rowData.data || {}"
        :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="primary"
          size="mini"
          @click="submit"
          :loading="submitLoading"
          >保存</el-button
        >
        <el-button type="" size="mini" @click="visible = false">取消</el-button>
      </template>
    </el-dialog>
@@ -54,18 +96,28 @@
</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: {
        height:'auto',
        calcHeight:20,
        columnBtn:false,
        tip:false,
        selection: true,
        searchMenuSpan: 6,
        searchMenuPosition: "right",
        border: true,
        align: "center",
        menuAlign: "center",
@@ -75,124 +127,338 @@
        addBtn: false,
        column: [
          {
            label: "名称",
            prop: "name",
            label: "编号",
            prop: "id",
            search: true,
          },
          {
            label: "标签",
            prop: "label",
            label: "名称",
            prop: "name",
            search: true,
          },
          {
            label: "起始状态",
            prop: "startState",
            prop: "startStatus",
            search: true,
          },
          {
            label: "描述",
            prop: "remark",
            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,
              },
            ],
          },
        },
      ],
      data: [],
      title: "预览生命周期流程图",
      visible: false,
      flowChartNodeItems: [],
      rowData: {},
      nodesEdgesData: {},
      dialogWidth: "50%",
      type: "detail",
      loading: false
      loading: false,
      delLoading: false,
      submitLoading: false,
      selectedData: [],
    };
  },
  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,
        };
      } else if (type === "size") {
        this.page.pageSize = params;
      } else if (type === "current") {
        this.page.currentPage = params;
      }
      this.loading = true;
      API.getList(
        Object.assign({}, params, {
          size: this.page.pageSize,
          current: this.page.currentPage,
        })
      ).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") {
        this.title = "预览生命周期流程图";
        this.dialogWidth = "50%";
      } else if (type === "edit") {
      this.type = type;
      if (type === "edit") {
        this.$set(row, "editLoading", true);
        this.title = "编辑生命周期流程图";
        this.dialogWidth = "95%";
      } else if (type === "add") {
      } 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;
          const nodes = res.data.data.nodes.map((item) => {
            item.label = item.id;
            item.index = item.indexNum;
            return item;
          });
          const edges = res.data.data.edges.map((item) => {
            item.label = item.name;
            item.width = 80;
            item.height = 48;
            item.index = 1;
            item.index = item.indexNum;
            return item;
          });
          this.nodesEdgesData = { nodes, edges };
          this.visible = true;
        });
      } else {
        this.nodesEdgesData = {};
        this.rowData = {};
        this.title = "新增生命周期流程图";
        this.dialogWidth = "95%";
        this.visible = true;
      }
      this.type = type;
      this.rowData = row;
      this.visible = true;
    },
    // 选中数据
    selectionChange(selectedData) {
      this.selectedData = selectedData;
    },
    // 删除
    rowDel(row) {
      this.$confirm("确认删除该条数据?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        this.$set(row, "delLoading", true);
        API.del({ oid: row.oid, id: row.id })
          .then((res) => {
            this.$set(row, "delLoading", false);
            if (res.data.code === 200) {
              this.$message.success("删除成功！");
              this.search();
            }
          })
          .catch(() => {
            this.$set(row, "delLoading", false);
          });
      });
    },
    batchDel() {
      this.$confirm("确认删除所选数据?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        const data = this.selectedData.map((item) => {
          return {
            id: item.id,
            oid: item.oid,
          };
        });
        this.delLoading = true;
        API.del(data, true)
          .then((res) => {
            this.delLoading = false;
            if (res.data.code === 200) {
              this.$message.success("删除成功！");
              this.search();
            }
          })
          .catch(() => {
            this.delLoading = false;
          });
      });
    },
    async submit() {
      // const data = {
      //   startStatus: "Auditing",
      //   name: "22",
      //   id: "asas",
      //   nodes: [
      //     {
      //       type: "node",
      //       size: "80*48",
      //       shape: "flow-rect",
      //       color: "#1890FF",
      //       label: "Auditing",
      //       x: 278.60856031183397,
      //       y: 84.12841612613737,
      //       id: "Auditing",
      //       change: true,
      //       index: 0,
      //       name: "Auditing",
      //       indexNum: 0,
      //     },
      //     {
      //       type: "node",
      //       size: "80*48",
      //       shape: "flow-rect",
      //       color: "#1890FF",
      //       label: "Editing",
      //       x: 294.17388658989535,
      //       y: 299.9676071819219,
      //       id: "Editing",
      //       change: true,
      //       index: 1,
      //       name: "Editing",
      //       indexNum: 1,
      //     },
      //     {
      //       type: "node",
      //       size: "80*48",
      //       shape: "flow-rect",
      //       color: "#1890FF",
      //       label: "drg",
      //       x: 278.60856031183397,
      //       y: 463.92237731083515,
      //       id: "drg",
      //       change: true,
      //       index: 3,
      //       name: "drg",
      //       indexNum: 3,
      //     },
      //   ],
      //   edges: [
      //     {
      //       source: "Auditing",
      //       sourceAnchor: 2,
      //       target: "Editing",
      //       targetAnchor: 0,
      //       id: "3083896f",
      //       index: 2,
      //       indexNum: 2,
      //       events: [
      //         {
      //           eventFullName:
      //             "plm.bs.omd.lifecycle.server.pubimpl.TransationEvente",
      //           eventShowName: "TransationEventE",
      //           description: "",
      //           bizDomain: "mdm",
      //           oid: "5",
      //           creator: "",
      //           createTime: "",
      //           lastModifier: "",
      //           lastModifyTime: "",
      //           ts: "",
      //         },
      //       ],
      //     },
      //     {
      //       source: "Editing",
      //       sourceAnchor: 2,
      //       target: "drg",
      //       targetAnchor: 0,
      //       id: "b941a21d",
      //       index: 4,
      //       indexNum: 4,
      //       events: [
      //         {
      //           eventFullName:
      //             "plm.bs.omd.lifecycle.server.pubimpl.TransationEventf",
      //           eventShowName: "TransationEventF",
      //           description: "",
      //           bizDomain: "mdm",
      //           oid: "6",
      //           creator: "",
      //           createTime: "",
      //           lastModifier: "",
      //           lastModifyTime: "",
      //           ts: "",
      //         },
      //         {
      //           eventFullName:
      //             "plm.bs.omd.lifecycle.server.pubimpl.TransationEvente",
      //           eventShowName: "TransationEventE",
      //           description: "",
      //           bizDomain: "mdm",
      //           oid: "5",
      //           creator: "",
      //           createTime: "",
      //           lastModifier: "",
      //           lastModifyTime: "",
      //           ts: "",
      //         },
      //       ],
      //     },
      //   ],
      // };
      // API.add(data)
      //   .then((res) => {
      //     this.submitLoading = false;
      //     if (res.data.code === 200) {
      //       this.$message.success(
      //         this.type === "edit" ? "修改成功！" : "新增成功！"
      //       );
      //       this.visible = false;
      //       this.search();
      //     }
      //   })
      //   .catch(() => {
      //     this.submitLoading = false;
      //   });
      // return;
      const newRowData = await this.$refs.vueFlowchartEditor.getNewRowData();
      if (!newRowData) {
        return;
      }
      const flowData = this.$refs.vueFlowchartEditor.getFlowData();
      console.log(JSON.stringify(flowData));
      // const edgeEvents = this.$refs.vueFlowchartEditor.getEdgesEvents();
      const flowData = await this.$refs.vueFlowchartEditor.getFlowData();
      if (Array.isArray(flowData.nodes)) {
        flowData.nodes = flowData.nodes.map((item) => {
          item.name = item.id;
          item.indexNum = item.index;
          return item;
        });
      }
      if (Array.isArray(flowData.edges)) {
        flowData.edges = flowData.edges.map((item) => {
          item.name = item.label;
          item.indexNum = item.index;
          // item.events = edgeEvents[item.id] || [];
          return item;
        });
      }
      let params = {
        ...newRowData,
        ...flowData,
      };

      console.log('params',params)
      this.submitLoading = true;
      let APIFun = API.add;
      if (this.type === "edit") {
        APIFun = API.edit;
        // this.$delete(params, "id");
      }
      APIFun(params)
        .then((res) => {
          this.submitLoading = false;
          if (res.data.code === 200) {
            this.$message.success(
              this.type === "edit" ? "修改成功！" : "新增成功！"
            );
            this.visible = false;
            this.search();
          }
        })
        .catch(() => {
          this.submitLoading = false;
        });
    },
  },
};
@@ -209,4 +475,7 @@
  margin: 0;
  padding: 0;
}
.btn_link_del {
  color: red;
}
</style>