添加,编辑,删除审批流

src/views/approve_manage/approveEdit.vue

@@ -2,11 +2,12 @@
     <!-- 添加编辑审批流 -->
     <div class="approve-edit-wrap page-wrap">
         <div class="head-box">
-            <el-form :inline="true" :model="approveForm" label-width="100px" label-position="left">
-                <el-form-item label="审批流名称" :rules="{required: true}">
+            <el-form :inline="true" :model="approveForm" ref="approve-form" :rules="formRules"
+                label-width="100px" label-position="left">
+                <el-form-item label="审批流名称" prop="name">
                     <el-input v-model="approveForm.name" placeholder="请输入审批流名称"></el-input>
                 </el-form-item>
-                <el-form-item label="关联报告" :rules="{required: true}">
+                <el-form-item label="关联报告" prop="classify">
                     <el-cascader v-model="approveForm.classify"
                         placeholder="请选择关联报告" clearable
                         :options="classifyTree"
@@ -15,7 +16,7 @@
                 </el-form-item>
             </el-form>
             <div class="form-btn">
-                <el-button>取消</el-button>
+                <el-button @click="$router.back()">取消</el-button>
                 <el-button @click="checkFlow">保存</el-button>
             </div>
         </div>
@@ -26,7 +27,7 @@
         <div class="flow-editor-wrap">
             <FlowEdiotr
                 ref='floweditor'
-                :flowConfig="approveForm.flowConfig"
+                :flowNodes="approveForm.flowNodes"
             />
         </div>
     </div>
@@ -34,23 +35,117 @@
 
 <script>
 import FlowEdiotr from './components/flowEdiotr';
-
+import {approveInterence} from '@/api/modules/approve.js';
+import approveMixins from './mixins/approveMixins';
+const findParentNode = (arr, id)=>{
+      // 遍历取父级code push数组
+      for (let i of arr) {
+        if (i.ClassifyId === id) {
+          return [i.ClassifyId];
+        }
+        if (i.Children) {
+          let node = findParentNode(i.Children, id);
+          if (node) {
+            return node.concat(i.ClassifyId);
+          }
+        }
+      }
+    }
 export default {
+    mixins:[approveMixins],
     data() {
         return {
             approveForm:{
                 name:'',
                 classify:'',
-                flowConfig:{}
+                /* flowNodes:null */
+            },
+            formRules:{
+                name:[{ required: true, message: '请输入审批流名称名称', trigger: 'blur' },],
+                classify:[{ required: true, message: '请选择关联报告', trigger: 'blur' },]
             },
-            classifyTree:[]
+            classifyTree:[],
+
         };
     },
     methods: {
-        checkFlow(){
+        async checkFlow(){
             //检查name,region是否为空
+            await this.$refs["approve-form"].validate()
             //检查审批流内容:每个审批节点是否都选择了审批人
+            const data = this.$refs.floweditor.flowData
+            if(data.length<3){
+                this.$message.warning("请添加审批节点")
+                return
+            }
+            for(let item of data){
+                if(item.nodeType===2&&!item.approvers.length){
+                    this.$message.warning("有节点未选择审批人,请检查")
+                    return
+                }
+            }
+            let Nodes = []
+            //不需要data的第一项和最后一项,其余转换为接口所需格式
+            for(let i=1;i<data.length-1;i++){
+                const Users = data[i].approvers.map((item,index)=>{
+                    return {
+                        UserType:'user',//目前只有审批节点,都是user
+                        UserId:item.ItemId,
+                        UserName:item.ItemName,
+                        Sort:data[i].ApproveType===1?index+1:0
+                    }
+                })
+                Nodes.push({
+                    ApproveType:data[i].ApproveType,
+                    Users
+                })
+            }
+            this.modifyFlow(Nodes)
+        },
+        async modifyFlow(Nodes){
+            const {name,classify} = this.approveForm
+            const params = {
+                FlowName:name,
+                ReportType:classify[0],
+                ClassifyFirstId:classify[classify.length-2]||0,
+                ClassifySecondId:classify[classify.length-1]||0,
+                Nodes
+            }
+            let res
+            const id = this.$route.query.flowId||0
+            if(id){
+                res = await approveInterence.editApproveFlow({
+                    ...params,
+                    ReportApproveFlowId:Number(id)
+                })
+            }else{
+                res = await approveInterence.addNewApproveFlow(params)
+            }
+            if(res.Ret!==200) return
+            this.$message.success(`${id?'编辑':'新增'}成功`)
+            this.$router.push('/approveSetting')
         },
+        getFlowDetail(){
+            const id = this.$route.query.flowId||0
+            if(id){
+                approveInterence.getApproveFlowDetail({
+                    ReportApproveFlowId:Number(id)
+                }).then(res=>{
+                    if(res.Ret!==200) return 
+                    const {FlowName,ReportType,ClassifySecondId,Nodes} = res.Data||{}
+                    this.approveForm.name = FlowName||''
+                    //递归获取所有父级id
+                    const classify = this.classifyTree.find(i=>i.ClassifyId===ReportType)||{}
+                    const tempArr = findParentNode(classify.Children||[],ClassifySecondId)
+                    tempArr.push(ReportType)
+                    this.approveForm.classify = tempArr.reverse()
+                    this.approveForm.flowNodes = Nodes||[]
+                })
+            }
+        }
+    },
+    async mounted(){
+        this.getClassifyTree()
     },
     components: { FlowEdiotr }
 };

src/views/approve_manage/approveSetting.vue

@@ -24,8 +24,8 @@
                 ></el-table-column>
                 <el-table-column label="操作" align="center">
                     <template slot-scope="{row}">
-                        <el-button type="text" style="padding:0;">编辑</el-button>
-                        <el-button type="text" style="padding:0">删除</el-button>
+                        <el-button type="text" style="padding:0;" @click="handleEditFlow(row)">编辑</el-button>
+                        <el-button type="text" style="padding:0;color:red;" @click="handleDeleteFlow(row)">删除</el-button>
                     </template>
                     
                 </el-table-column>
@@ -47,15 +47,9 @@
 
 <script>
 import {approveInterence} from '@/api/modules/approve.js'
-const filterNodes = (arr)=>{
-    arr.length &&arr.forEach((item) => {
-        item.Children.length && filterNodes(item.Children);
-        if (!item.Children.length) {
-            delete item.Children;
-        }
-    })
-}
+import approveMixins from './mixins/approveMixins';
 export default {
+    mixins:[approveMixins],
     data() {
         return {
             /* 列表筛选项 */
@@ -119,13 +113,27 @@ export default {
                 this.total = Paging.Totals||0
             })
         },
-        getClassifyTree(){
-            approveInterence.getReportClassifyTree().then(res=>{
-                if(res.Ret!==200) return 
-                this.classifyTree = res.Data||[]
-                filterNodes(this.classifyTree)
+        handleEditFlow(item){
+            this.$router.push({
+                path:'/approveEdit',
+                query:{
+                    flowId:item.ReportApproveFlowId
+                }
             })
         },
+        handleDeleteFlow(item){
+            this.$confirm("删除后不可恢复,确认删除吗?","提示",{
+                type:"warning"
+            }).then(()=>{
+                approveInterence.deleteApproveFlow({
+                    ReportApproveFlowId:item.ReportApproveFlowId
+                }).then(res=>{
+                    if(res.Ret!==200) return 
+                    this.$message.success("删除成功")
+                    this.handleCurrentChange(1)
+                })
+            }).catch(()=>{})
+        }
     },
     mounted(){
         this.getClassifyTree()

src/views/approve_manage/components/flowEdiotr.vue

@@ -20,49 +20,44 @@ import ApproveNode from './flowNode/approveNode.vue';
 import EndNode from './flowNode/endNode.vue';
 export default {
     props:{
-        flowConfig:{ //审批流原数据,只包含审批节点
-            type:Object,
-            default:{}
+        flowNodes:{ //审批流原数据,只包含审批节点
+            type:Array,
+            default:[]
         }
     },
     data() {
         return {
-            mockFlow: { //如果审批流是树形结构,通过getNode拍平
+            flowData:[{
                 nodeType: 1,
                 nodeName: 'StartNode',
-                childrenNode: {
-                    nodeType: 2,
-                    nodeName: 'ApproveNode',
-                    approvers: [],//审批人数组
-                    childrenNode: {
-                        nodeType:2,
-                        nodeName:'ApproveNode',
-                        approvers:[],
-                        childrenNode: {
-                            nodeType:3,
-                            nodeName:'EndNode',
-                        }
-                    }
-                }
-            },
-            flowData:[]
+            },{
+                nodeType:3,
+                nodeName:'EndNode'
+            }]
         };
     },
+    watch:{
+        flowNodes(val){
+            this.initFlowData()
+        }
+    },
     methods: {
-        getNode(node) {
-            let result = []
-            let _getNode = function (node) {
-                let tmp = _.cloneDeep(node)
-                delete tmp.childrenNode
-                result.push(tmp) //移除拍平数组的子元素,只保留节点相干元素
-                let child = node.childrenNode
-                if (child != undefined) {
-                    _getNode(child)
+        initFlowData(){
+            const approveData = this.flowNodes.map(n=>{
+                const approvers = n.Users.map(i=>{
+                    return {
+                        ItemId:i.UserId,
+                        ItemName:i.UserName
+                    }
+                })
+                return {
+                    ...n,
+                    nodeType:2,
+                    nodeName:'ApproveNode',
+                    approvers
                 }
-            }
-            _getNode(node)
-            _getNode=null
-            return result
+            })
+            this.flowData.splice(1,0,...approveData)
         },
         addFlowNode(node){
             const {prevNode} = node
@@ -80,7 +75,7 @@ export default {
         }
     },
     mounted(){
-        this.flowData = this.getNode(this.mockFlow)
+        //this.initFlowData()
     },
     components: { StartNode,AddNode,ApproveNode,EndNode }
 };

src/views/approve_manage/components/flowNode/addNode.vue

@@ -20,6 +20,7 @@ export default {
             this.visible = false
             const data = {
                 nodeType:2,
+                ApproveType:1,
                 nodeName:'ApproveNode',
                 approvers:[],
                 prevNode:this.node

src/views/approve_manage/components/flowNode/approveNode.vue

@@ -56,7 +56,7 @@
                     <div class="line"></div>
                     <div class="block" style="margin-top:30px;">
                         <p>多人审批时</p>
-                        <el-radio-group v-model="block2">
+                        <el-radio-group v-model="approveType">
                             <el-radio :label="1">
                                 依次审批
                                 <el-tooltip effect="dark" placement="top" content="多个审批人依次进行审批；只有当所有审批人同意，该节点才能通过；按选择顺序审批" >
@@ -129,7 +129,7 @@ export default {
         return {
             drawerShow: false,
             block1: 1,
-            block2: 1,
+            approveType: 1,
             chooseDialogShow: false,
             choosedList:[]
         };
@@ -138,6 +138,7 @@ export default {
         drawerShow(val){
             if(val){
                 this.choosedList = _.cloneDeep(this.flowNode.approvers||[])
+                this.approveType = this.flowNode.ApproveType
             }
         }
     },
@@ -164,6 +165,7 @@ export default {
         editApproveNode(){
             const node = _.cloneDeep(this.flowNode)
             node.approvers = _.cloneDeep(this.choosedList)
+            node.ApproveType = this.approveType
             this.$emit('editNode',node)
             this.drawerShow = false
         },

src/views/approve_manage/components/treeTransfer.vue

@@ -69,6 +69,7 @@ export default {
         chooseDialogShow:{
             handler(val){
                 if(val){
+                    this.searchText=''
                     this.getTreeData()
                 }
             },

src/views/approve_manage/mixins/approveMixins.js

@@ -0,0 +1,25 @@
+import {approveInterence} from '@/api/modules/approve.js'
+const filterNodes = (arr)=>{
+    arr.length &&arr.forEach((item) => {
+        item.disabled = item.HasFlow
+        item.Children.length && filterNodes(item.Children);
+        if (!item.Children.length) {
+            delete item.Children;
+        }
+    })
+}
+
+export default{
+    methods:{
+        getClassifyTree(){
+            approveInterence.getReportClassifyTree().then(res=>{
+                if(res.Ret!==200) return 
+                this.classifyTree = res.Data||[]
+                filterNodes(this.classifyTree)
+                if(this.getFlowDetail){
+                    this.getFlowDetail()
+                }
+            })
+        },
+    }
+}