From dedbadd96ab7e1533572b25511fd201678c64dad Mon Sep 17 00:00:00 2001
From: ludc
Date: 星期四, 17 十月 2024 09:56:18 +0800
Subject: [PATCH] Merge remote-tracking branch 'origin/master'
---
Source/UBCS-WEB/src/views/modeling/cycle.vue | 336 ++++++++++++++++++++++++++++++++++++++++++-------------
1 files changed, 255 insertions(+), 81 deletions(-)
diff --git a/Source/UBCS-WEB/src/views/modeling/cycle.vue b/Source/UBCS-WEB/src/views/modeling/cycle.vue
index ef721e2..5194d87 100644
--- a/Source/UBCS-WEB/src/views/modeling/cycle.vue
+++ b/Source/UBCS-WEB/src/views/modeling/cycle.vue
@@ -1,13 +1,36 @@
<template>
<basic-container class="">
- <avue-crud :data="data" :option="option" @refresh-change="gettableList" :table-loading="loading">
+ <avue-crud
+ :data="data"
+ :option="option"
+ :page="page"
+ :table-loading="loading"
+ :permission="permissionList"
+ 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"
icon="el-icon-plus"
size="small"
+ v-if="permissionList.addBtn"
@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">
@@ -15,6 +38,8 @@
type="text"
icon="el-icon-edit"
size="mini"
+ v-if="permissionList.editBtn"
+ :loading="row.editLoading"
@click="openDialog('edit', row)"
>缂栬緫</el-button
>
@@ -22,8 +47,20 @@
type="text"
icon="el-icon-view"
size="mini"
+ v-if="permissionList.openBtn"
+ :loading="row.detailLoading"
@click="openDialog('detail', row)"
>棰勮</el-button
+ >
+ <el-button
+ class="btn_link_del"
+ type="text"
+ icon="el-icon-delete"
+ size="mini"
+ v-if="permissionList.delBtn"
+ :loading="row.delLoading"
+ @click="rowDel(row)"
+ >鍒犻櫎</el-button
>
</template></avue-crud
>
@@ -32,21 +69,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,13 +101,29 @@
</template>
<script>
+import API from "@/api/modeling/cycle";
import CycleFlow from "@/components/flow-cycle/flowchartEditor.vue";
+import {mapGetters} from "vuex";
export default {
name: "cycle.vue",
components: { CycleFlow },
data() {
return {
+ 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",
@@ -70,116 +133,224 @@
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,
+ delLoading: false,
+ submitLoading: false,
+ selectedData: [],
};
},
+ computed:{
+ ...mapGetters(["permission"]),
+ permissionList(){
+ return{
+ addBtn: this.vaildData(this.permission.modeling_cycle.cycle_add,false),
+ delBtn: this.vaildData(this.permission.modeling_cycle.cycle_delete,false),
+ editBtn: this.vaildData(this.permission.modeling_cycle.cycle_edit,false),
+ openBtn: this.vaildData(this.permission.modeling_cycle.cycle_open,false),
+ }
+ },
+ },
+ created() {
+ this.search("search", {});
+ },
methods: {
- gettableList() {
- this.loading = true
+ 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;
+ item.x = Number(item.x);
+ item.y = Number(item.y);
+ 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;
+ console.log('nodesEdgesData',this.nodesEdgesData)
+ });
+ } 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 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,
+ };
+
+ 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;
+ });
},
},
};
@@ -196,4 +367,7 @@
margin: 0;
padding: 0;
}
+.btn_link_del {
+ color: red;
+}
</style>
--
Gitblit v1.9.3