From 9d8be8e7580ef577def96c852288a5a95eab4ea3 Mon Sep 17 00:00:00 2001
From: ludc
Date: 星期二, 11 七月 2023 19:22:53 +0800
Subject: [PATCH] 代码整合，前端代码打包
---
Source/UBCS-WEB/src/views/modeling/cycle.vue | 193 ++++++++++++++++++++++++++----------------------
1 files changed, 104 insertions(+), 89 deletions(-)
diff --git a/Source/UBCS-WEB/src/views/modeling/cycle.vue b/Source/UBCS-WEB/src/views/modeling/cycle.vue
index e0fac23..c7a5fd2 100644
--- a/Source/UBCS-WEB/src/views/modeling/cycle.vue
+++ b/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,14 +40,18 @@
: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"
@@ -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",
@@ -75,124 +92,122 @@
addBtn: false,
column: [
{
- label: "鍚嶇О",
- prop: "name",
+ label: "缂栧彿",
+ prop: "id",
},
{
- label: "鏍囩",
- prop: "label",
+ label: "鍚嶇О",
+ prop: "name",
+ search: true,
},
{
label: "璧峰鐘舵��",
- prop: "startState",
+ prop: "startStatusName",
+ 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,
};
},
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;
+ 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") {
- 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;
+ this.nodesEdgesData = {nodes: res.nodes, edges: res.edges}
+ });
+ } else {
this.title = "鏂板鐢熷懡鍛ㄦ湡娴佺▼鍥�";
this.dialogWidth = "95%";
+ this.visible = true;
}
- this.type = type;
- this.rowData = row;
- 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();
- console.log(JSON.stringify(flowData));
+ 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;
+ },
},
},
};
--
Gitblit v1.9.3