流程节点管理界面提交

whyczyk

2021-11-05 d291d4b450aab57b6c98cd0637f8b43f55bc370b

流程节点管理界面提交

 package-lock.json

@@ -1687,16 +1687,6 @@
          "integrity": "sha1-/q7SVZc9LndVW4PbwIhRpsY1IPo=",
          "dev": true
        },
        "ansi-styles": {
          "version": "4.3.0",
          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
          "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
          "dev": true,
          "optional": true,
          "requires": {
            "color-convert": "^2.0.1"
          }
        },
        "cacache": {
          "version": "13.0.1",
          "resolved": "https://registry.npm.taobao.org/cacache/download/cacache-13.0.1.tgz?cache=0&sync_timestamp=1594429684526&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fcacache%2Fdownload%2Fcacache-13.0.1.tgz",
@@ -1723,53 +1713,6 @@
            "unique-filename": "^1.1.1"
          }
        },
        "chalk": {
          "version": "4.1.2",
          "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
          "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
          "dev": true,
          "optional": true,
          "requires": {
            "ansi-styles": "^4.1.0",
            "supports-color": "^7.1.0"
          }
        },
        "color-convert": {
          "version": "2.0.1",
          "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
          "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
          "dev": true,
          "optional": true,
          "requires": {
            "color-name": "~1.1.4"
          }
        },
        "color-name": {
          "version": "1.1.4",
          "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
          "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
          "dev": true,
          "optional": true
        },
        "has-flag": {
          "version": "4.0.0",
          "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
          "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
          "dev": true,
          "optional": true
        },
        "loader-utils": {
          "version": "2.0.1",
          "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-2.0.1.tgz",
          "integrity": "sha512-g4miPa9uUrZz4iElkaVJgDFwKJGh8aQGM7pUL4ejXl6cu7kSb30seQOVGNMP6sW8j7DW77X68hJZ+GM7UGhXeQ==",
          "dev": true,
          "optional": true,
          "requires": {
            "big.js": "^5.2.2",
            "emojis-list": "^3.0.0",
            "json5": "^2.1.2"
          }
        },
        "source-map": {
          "version": "0.6.1",
          "resolved": "https://registry.npm.taobao.org/source-map/download/source-map-0.6.1.tgz",
@@ -1784,16 +1727,6 @@
          "requires": {
            "figgy-pudding": "^3.5.1",
            "minipass": "^3.1.1"
          }
        },
        "supports-color": {
          "version": "7.2.0",
          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
          "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
          "dev": true,
          "optional": true,
          "requires": {
            "has-flag": "^4.0.0"
          }
        },
        "terser-webpack-plugin": {
@@ -1811,18 +1744,6 @@
            "source-map": "^0.6.1",
            "terser": "^4.6.12",
            "webpack-sources": "^1.4.3"
          }
        },
        "vue-loader-v16": {
          "version": "npm:vue-loader@16.8.2",
          "resolved": "https://registry.npmjs.org/vue-loader/-/vue-loader-16.8.2.tgz",
          "integrity": "sha512-Nkq+z9mAsMEK+qkXgK+9Ia7D8w9uu9j4ut0IMT5coMfux3rCgIp1QBB1CYwY0M34A1nRMSONEaWXxAAw6xSl/Q==",
          "dev": true,
          "optional": true,
          "requires": {
            "chalk": "^4.1.0",
            "hash-sum": "^2.0.0",
            "loader-utils": "^2.0.0"
          }
        }
      }
@@ -10508,6 +10429,87 @@
        }
      }
    },
    "vue-loader-v16": {
      "version": "npm:vue-loader@16.8.3",
      "resolved": "https://registry.npmjs.org/vue-loader/-/vue-loader-16.8.3.tgz",
      "integrity": "sha512-7vKN45IxsKxe5GcVCbc2qFU5aWzyiLrYJyUuMz4BQLKctCj/fmCa0w6fGiiQ2cLFetNcek1ppGJQDCup0c1hpA==",
      "dev": true,
      "optional": true,
      "requires": {
        "chalk": "^4.1.0",
        "hash-sum": "^2.0.0",
        "loader-utils": "^2.0.0"
      },
      "dependencies": {
        "ansi-styles": {
          "version": "4.3.0",
          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
          "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
          "dev": true,
          "optional": true,
          "requires": {
            "color-convert": "^2.0.1"
          }
        },
        "chalk": {
          "version": "4.1.2",
          "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
          "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
          "dev": true,
          "optional": true,
          "requires": {
            "ansi-styles": "^4.1.0",
            "supports-color": "^7.1.0"
          }
        },
        "color-convert": {
          "version": "2.0.1",
          "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
          "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
          "dev": true,
          "optional": true,
          "requires": {
            "color-name": "~1.1.4"
          }
        },
        "color-name": {
          "version": "1.1.4",
          "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
          "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
          "dev": true,
          "optional": true
        },
        "has-flag": {
          "version": "4.0.0",
          "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
          "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
          "dev": true,
          "optional": true
        },
        "loader-utils": {
          "version": "2.0.2",
          "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-2.0.2.tgz",
          "integrity": "sha512-TM57VeHptv569d/GKh6TAYdzKblwDNiumOdkFnejjD0XwTH87K90w3O7AiJRqdQoXygvi1VQTJTLGhJl7WqA7A==",
          "dev": true,
          "optional": true,
          "requires": {
            "big.js": "^5.2.2",
            "emojis-list": "^3.0.0",
            "json5": "^2.1.2"
          }
        },
        "supports-color": {
          "version": "7.2.0",
          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
          "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
          "dev": true,
          "optional": true,
          "requires": {
            "has-flag": "^4.0.0"
          }
        }
      }
    },
    "vue-router": {
      "version": "3.4.9",
      "resolved": "https://registry.npm.taobao.org/vue-router/download/vue-router-3.4.9.tgz?cache=0&sync_timestamp=1607347284428&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fvue-router%2Fdownload%2Fvue-router-3.4.9.tgz",

 package.json

@@ -10,7 +10,7 @@
    "axios": "^0.19.2",
    "core-js": "^3.6.5",
    "echarts": "^5.1.1",
    "element-ui": "^2.13.2",
    "element-ui": "^2.15.6",
    "js-md5": "^0.7.3",
    "vue": "^2.6.11",
    "vue-router": "^3.2.0",

 src/assets/css/reset.css

@@ -17,9 +17,9 @@
    height: 100%;
}

input[type="submit"],
input[type="reset"],
input[type="button"],
input[type='submit'],
input[type='reset'],
input[type='button'],
input {
    font-family: Arial, Helvetica, sans-serif;
    resize: none;
@@ -156,7 +156,7 @@
}

.clearfix:after {
    content: "";
  content: '';
    display: block;
    visibility: hidden;
    height: 0;
@@ -222,16 +222,10 @@
    -webkit-tap-highlight-color: transparent;
}

input[type=button],
input[type=submit],
input[type=file],
input[type='button'],
input[type='submit'],
input[type='file'],
button {
    cursor: pointer;
    -webkit-appearance: none;
}

.van-nav-bar .van-icon.van-icon-arrow-left {
    color: #4B88F9 !important;
    font-size: 36px;
    font-weight: bold;
}

 src/assets/js/constants.js

New file
@@ -0,0 +1,11 @@
export const workType = {
  1: '告警工单',
  2: '任务工单',
}

export const linkLevel = {
  1: '一级',
  2: '二级',
  3: '三级',
}


 src/layout/components/PageMenu.vue

@@ -39,6 +39,18 @@
                        name: '已处理',
                    },
                ]
            }, {
                id: '2',
                name: '管理界面',
                url: 'manage',
                icon: 'el-icon-s-order',
                subMenus: [
                    {
                        id: '2-1',
                        url: 'nodeManage',
                        name: '流程节点管理',
                    },
                ]
            },],
            id: '1-2'
        }

 src/pages/manage/js/api.js

New file
@@ -0,0 +1,34 @@
import axios from '@/assets/js/axios';


//查询工单流属性列表
export const getPropertyList = () => {
  return axios({
    method: 'GET',
    url: '/workflowProperty/propertyList',
  });
}
//删除节点
export const delWorkflowProperty = (params) => {
  return axios({
    method: 'DELETE',
    url: '/workflowProperty',
    params: params,
  });
}
//新增节点
export const addWorkflowProperty = (data) => {
  return axios({
    method: 'POST',
    url: '/workflowProperty',
    data: data,
  });
}
//修改节点
export const editWorkflowProperty = (data) => {
  return axios({
    method: 'PUT',
    url: '/workflowProperty',
    data: data,
  });
}

 src/pages/manage/node/addNode.vue

New file
@@ -0,0 +1,161 @@
<template>
    <div class="main">
        <div class="contain">
            <div class="title">{{title}}</div>
            <el-form ref="form" :model="form" label-width="10em">
                <el-form-item label="节点名称:">
                    <el-input v-model="form.linkName" placeholder="请输入节点名称"></el-input>
                </el-form-item>
                <el-form-item label="节点层级:">
                    <el-select v-model="form.linkType" placeholder="请选择节点层级">
                        <el-option :label="value" :value="key" v-for="(value,key,index) in linkLevel" :key="index"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="节点所含角色:">
                    <el-button type="primary" size="mini" @click="addRole">添加角色</el-button>
                </el-form-item>
                <el-form-item label="角色" v-for="(item,i) in form.roleList" :key="i">
                    <el-input v-model="item.name" style="margin-right:8px" placeholder="请输入角色名称"></el-input>
                    <el-input v-model="item.type" style="margin-right:8px" type="number" placeholder="请输入角色编码"></el-input>
                    <i class="el-icon-delete delIcon" @click="removeList(i)"></i>
                </el-form-item>
                <el-form-item label="所属工单类型:">
                    <el-select v-model="form.type" placeholder="请选择所属工单类型">
                        <el-option :label="value" :value="key" v-for="(value,key,index) in workType" :key="index"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="onSubmit" v-if="pageType==1">确认提交</el-button>
                    <el-button type="primary" @click="onSubmit" v-else>确认修改</el-button>
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>

<script>
import {
    addWorkflowProperty,
    editWorkflowProperty
} from '../js/api';
import {
    workType,
    linkLevel
} from '@/assets/js/constants';
export default {
    name: "",

    data() {
        return {
            workType,
            linkLevel,
            title: '新建流程节点',
            form: {
                linkName: "",
                linkType: '',
                roleList: [],
                type: '',
            },
            pageType: 1
        };
    },
    components: {},
    methods: {
        addRole() {
            this.form.roleList.push({
                name: "",
                type: ""
            })
        },
        removeList(index) {
            this.form.roleList.splice(index, 1)
        },
        onSubmit() {
            if (this.pageType == 1) {
                this.addFrom()
            } else {
                this.editFrom()
            }
        },
        editFrom() {
            editWorkflowProperty(this.form).then((res) => {
                if (res.data.code == 1) {
                    this.$message({
                        message: '修改成功!',
                        type: 'success'
                    });
                    setTimeout(() => {
                        this.$router.go(-1)
                    }, 1000)
                }
            }).catch((err) => {
                console.log(err)
            });
        },
        addFrom() {
            addWorkflowProperty(this.form).then((res) => {
                if (res.data.code == 1) {
                    this.$message({
                        message: '添加成功!',
                        type: 'success'
                    });
                    setTimeout(() => {
                        this.$router.go(-1)
                    }, 1000)
                }
            }).catch((err) => {
                console.log(err)
            });
        },
    },

    mounted() {
        let postData = JSON.parse(this.$route.query.data);
        console.log(postData)
        if (postData.linkName) {
            this.title = '编辑流程节点'
            this.pageType = 2;
            this.form.linkName = postData.linkName;
            this.form.linkType = postData.linkType + '';
            this.form.roleList = postData.roleList;
            this.form.type = postData.type + '';
        } else {
            this.title = '新建流程节点'
            this.pageType = 1
        }
    },
};
</script>

<style scoped>
.main {
    height: 100%;
    padding-top: 10px;
    padding-left: 10px;
    display: flex;
}
.contain {
    background: #fff;
    flex: 1;
    overflow-y: auto;
    padding: 20px;
}
.title {
    color: #04409a;
    font-size: 24px;
    margin-bottom: 15px;
}
>>> .el-input {
    width: 30em;
}
>>> .el-textarea {
    width: 40em;
}

.delIcon {
    color: #e10000;
    font-size: 20px;
    margin-left: 16px;
    cursor: pointer;
}
</style>

 src/pages/manage/node/index.vue

New file
@@ -0,0 +1,16 @@
<template>
    <router-view></router-view>
</template>

<script>
export default {
    data() {
        return {

        }
    },
}
</script>

<style scoped>
</style>

 src/pages/manage/node/nodeManage.vue

New file
@@ -0,0 +1,162 @@
<template>
    <div class="nodeManageWarp">
        <flex-layout class="list-contain">
            <div class="scroll">
                <el-table :data="tableData" stripe border style="width: 100%">
                    <el-table-column prop="linkName" label="节点名称">
                    </el-table-column>
                    <el-table-column prop="linkLevel" label="节点层级">
                    </el-table-column>
                    <el-table-column prop="roleListName" label="节点所含角色">
                    </el-table-column>
                    <el-table-column prop="typeName" label="所属工单类型">
                    </el-table-column>
                    <el-table-column fixed="right" label="操作">
                        <template slot-scope="scope">
                            <el-button type="text" style="margin-right:8px;" @click="toAddPage(scope.row)">编辑</el-button>
                            <el-popconfirm title="确定删除该节点吗？" @confirm="remove(scope.row)">
                                <el-button slot="reference" type="text">删除</el-button>
                            </el-popconfirm>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
            <!-- 分页 -->
            <div class="pagination" slot="footer">
                <!-- <el-button type="primary" size="mini" icon="el-icon-arrow-left">上一页</el-button>
                <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="page.currentPage" :page-sizes="page.pageSizes" :page-size="page.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="page.total">
                </el-pagination>
                <el-button type="primary" size="mini" icon="el-icon-arrow-right">下一页</el-button> -->
                <el-button type="primary" size="mini" icon="el-icon-circle-plus-outline" @click="toAddPage">新增节点</el-button>
            </div>
        </flex-layout>
    </div>
</template>

<script>
import {
    getPropertyList,
    delWorkflowProperty
} from '../js/api';
import {
    workType,
    linkLevel
} from '@/assets/js/constants';
export default {
    data() {
        return {
            tableData: [],
            page: {
                currentPage: 1,
                pageSizes: [1, 5, 10, 20],
                pageSize: 5,
                total: 0
            }
        }
    },
    mounted() {
        this.loadList()
    },
    methods: {
        loadList() {
            getPropertyList().then((res) => {
                if (res.data.code == 1) {
                    let resData = res.data.data;
                    let arr = [];
                    resData.map(item => {
                        let roleListName = '';
                        item.roleList.map(jtem => {
                            roleListName += jtem.name + ','
                        })
                        let obj = {
                            linkName: item.linkName,
                            linkType: item.linkType,
                            linkLevel: linkLevel[item.linkType],
                            roleList: item.roleList,
                            roleListName: roleListName,
                            typeName: workType[item.type],
                            type: item.type,
                        }
                        arr.push(obj)
                    })
                    this.tableData = arr
                }
            }).catch((err) => {
                console.log(err)
            });
        },
        remove(rowData) {
            let postData = {
                linkType: rowData.linkType,
                type: rowData.type,
            }
            delWorkflowProperty(postData).then((res) => {
                if (res.data.code == 1) {
                    this.loadList()
                    this.$message({
                        message: '删除成功!',
                        type: 'success'
                    });
                }
            }).catch((err) => {
                console.log(err)
            });
        },
        toAddPage(data) {
            if (data) {
                this.$router.push({
                    path: '/manage/addNode',
                    query: { data: JSON.stringify(data) }
                })
            } else {
                this.$router.push({
                    path: '/manage/addNode',
                })
            }
        }
    }
}
</script>

<style scoped>
.nodeManageWarp {
    padding: 16px 0 0 16px;
    width: 100%;
    height: 100%;
}
.list-contain {
    background: #fff;
    border: 1px #c4c4c4 solid;
    padding: 30px 0 10px 30px;
}
.scroll {
    overflow-y: auto;
    padding-right: 30px;
}

.pagination {
    display: flex;
    padding-top: 10px;
    justify-content: center;
}
>>> .el-pagination {
    display: flex;
    padding: 0 1em;
}
>>> .el-pagination .el-input__inner {
    background: #343345;
    color: #fff;
}
>>> .el-input {
    width: 30em;
}
>>> .el-textarea {
    width: 40em;
}
>>> .el-select .el-input {
    width: 16em;
}
>>> .el-pagination .el-input {
    width: auto;
}
</style>

 src/router/routes.js

@@ -34,6 +34,30 @@
                    component: (resolve) => require(['@/pages/alarmWork/list.vue'], resolve),
                },
            ]
        },
        {
            path: 'manage',
            meta: {
                title: '管理界面',
            },
            component: (resolve) => require(['@/pages/manage/node/index.vue'], resolve),
            redirect: '/manage/nodeManage',
            children: [
                {
                    path: 'nodeManage',
                    meta: {
                        title: '流程节点列表',
                    },
                    component: (resolve) => require(['@/pages/manage/node/nodeManage.vue'], resolve),
                },
                {
                    path: 'addNode',
                    meta: {
                        title: '流程节点管理',
                    },
                    component: (resolve) => require(['@/pages/manage/node/addNode.vue'], resolve),
                },
            ]
        }
    ]
}];