联调审批流列表接口,编辑审批流样式更改

src/views/approve_manage/approveEdit.vue

@@ -2,22 +2,26 @@
     <!-- 添加编辑审批流 -->
     <div class="approve-edit-wrap page-wrap">
         <div class="head-box">
-            <el-form :inline="true" :model="approveForm">
-                <el-form-item label="审批流名称">
+            <el-form :inline="true" :model="approveForm" label-width="100px" label-position="left">
+                <el-form-item label="审批流名称" :rules="{required: true}">
                     <el-input v-model="approveForm.name" placeholder="请输入审批流名称"></el-input>
                 </el-form-item>
-                <el-form-item label="关联报告">
-                    <el-select v-model="approveForm.region" placeholder="活动区域">
-                    <el-option label="区域一" value="shanghai"></el-option>
-                    <el-option label="区域二" value="beijing"></el-option>
-                    </el-select>
+                <el-form-item label="关联报告" :rules="{required: true}">
+                    <el-cascader v-model="approveForm.classify"
+                        placeholder="请选择关联报告" clearable
+                        :options="classifyTree"
+                        :props="{value:'ClassifyId',label:'ClassifyName',children:'Children'}"
+                        style="margin-right: auto;margin-left: 15px;"></el-cascader>
                 </el-form-item>
-                </el-form>
+            </el-form>
             <div class="form-btn">
                 <el-button>取消</el-button>
                 <el-button @click="checkFlow">保存</el-button>
             </div>
         </div>
+        <div class="form-item" style="color:#606266;width:100px;">
+            <span style="color:#F56C6C;margin-right: 4px;">*</span>流程配置
+        </div>
         <!-- 审批流画布 -->
         <div class="flow-editor-wrap">
             <FlowEdiotr
@@ -36,9 +40,10 @@ export default {
         return {
             approveForm:{
                 name:'',
-                region:'',
+                classify:'',
                 flowConfig:{}
             },
+            classifyTree:[]
         };
     },
     methods: {
@@ -62,8 +67,8 @@ export default {
         justify-content: space-between;
     }
     .flow-editor-wrap{
-        flex:1;
-        overflow: hidden;
+        padding-left: 100px;
+        overflow: auto;
     }
 }
 </style>

src/views/approve_manage/approveSetting.vue

@@ -3,8 +3,14 @@
     <div class="approve-setting-wrap page-wrap">
         <div class="head-box">
             <el-button type="primary" @click="$router.push('/approveEdit')">添加审批流</el-button>
-            <el-select placeholder="请选择关联报告" style="margin-right: auto;margin-left: 15px;"></el-select>
-            <el-input placeholder="请输入审批名称" style="width:260px;"></el-input>
+            <el-cascader v-model="classify"
+                placeholder="请选择关联报告" clearable
+                :options="classifyTree"
+                :props="{value:'ClassifyId',label:'ClassifyName',children:'Children'}"
+                @change="handleSearchChange"
+                style="margin-right: auto;margin-left: 15px;"></el-cascader>
+            <el-input v-model="Keyword"
+                placeholder="请输入审批流名称" prefix-icon="el-icon-search" style="width:260px;"></el-input>
         </div>
         <div class="list-box">
             <el-table :data="tableData" @sort-change="sortChange" border>
@@ -40,19 +46,37 @@
 </template>
 
 <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;
+        }
+    })
+}
 export default {
     data() {
         return {
-            tableData:[{name:'a'}],
+            /* 列表筛选项 */
+            ClassifyFirstId:0,//研报倒数第二级分类id
+            ClassifySecondId:0,//研报最后一级分类id
+            ReportType:0,//研报类型 1-中文研报；2-英文研报；3-智能研报
+            SortRule:0,//排序规则:1-正序; 2-倒序(默认)
+            Keyword:'',
+            classify:'',
+            classifyTree:[],
+
+            tableData:[],
             tableColumns:[{
                 label:'审批流名称',
-                key:'name'
+                key:'FlowName'
             },{
                 label:'关联报告',
-                key:'catalog'
+                key:'ReportClassify'
             },{
                 label:'创建时间',
-                key:'time',
+                key:'CreateTime',
                 sortable:'custom'
             }],
             page:1,
@@ -63,10 +87,49 @@ export default {
     methods: {
         handleCurrentChange(page){
             this.page = page
+            this.getTableData()
+        },
+        handleSearchChange(){
+            this.ReportType = this.classify[0]||0
+            this.ClassifySecondId = this.classify[this.classify.length-1]||0
+            if(this.classify.length>=3){
+                this.ClassifyFirstId = this.classify[this.classify.length-2]||0
+            }else{
+                this.ClassifyFirstId = 0
+            }
+            this.handleCurrentChange(1)
         },
         sortChange({prop,order}){
-
-        }
+            this.SortRule = order==='ascending'?1:2
+            this.handleCurrentChange(1)
+        },
+        getTableData(){
+            approveInterence.getApproveFlowList({
+                PageSize:this.pageSize,
+                CurrentIndex:this.page,
+                ReportType:this.ReportType,
+                ClassifyFirstId:this.ClassifyFirstId,
+                ClassifySecondId:this.ClassifySecondId,
+                Keyword:this.Keyword,
+                SortRule:this.SortRule
+            }).then(res=>{
+                if(res.Ret!==200) return 
+                const {List=[],Paging={}} = res.Data||{}
+                this.tableData = List||[]
+                this.total = Paging.Totals||0
+            })
+        },
+        getClassifyTree(){
+            approveInterence.getReportClassifyTree().then(res=>{
+                if(res.Ret!==200) return 
+                this.classifyTree = res.Data||[]
+                filterNodes(this.classifyTree)
+            })
+        },
+    },
+    mounted(){
+        this.getClassifyTree()
+        this.getTableData()
     },
 };
 </script>

src/views/approve_manage/components/flowEdiotr.vue

@@ -1,6 +1,8 @@
 <template>
     <!-- 审批流内容 -->
     <div class="flow-editor">
+        <span class="circle-point"></span>
+        <span class="circle-point end"></span>
         <component v-for="(node,index) in flowData" :key="index"
             :is="node.nodeName"
             :flowNode="{...node,...{index}}"
@@ -87,8 +89,29 @@ export default {
 <style scoped lang="scss">
 @import url('../css/nodeStyle.scss');
 .flow-editor{
-    width:100%;
-    height: 100%;
-    overflow:auto;
+    margin-left: 20px;
+    position:relative;
+    .circle-point{
+            position:absolute;
+            top:0;
+            left:-22px;
+            width:6px;
+            height:6px;
+            border-radius: 50%;
+            background-color: #0052D9;
+            &.end{
+                top:auto;
+                bottom:0;
+            }
+        }
+        &::before{
+            content: '';
+            top:0;
+            left:-20px;
+            bottom: 0;
+            width:2px;
+            background-color: #0052D9;
+            position: absolute;
+        }
 }
 </style>

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

@@ -1,17 +1,8 @@
 <template>
-    <div class="add-node-wrap node-wrap">
-        <div class="node-content">
-            <div class="line"></div>
-            <span class="line-arrow"></span>
-            <el-popover placement="right-start" trigger="hover" v-model="visible">
-                <div class="add-node-popover-body">
-                    <div class="popover-item" @click="handleAddApprove">
-                        <div class="icon"><i class="el-icon-s-check"></i></div>
-                        <p>审批人</p>
-                    </div>
-                </div>
-                <span class="add-btn el-icon-circle-plus" slot="reference"></span>
-            </el-popover>
+    <div class="add-node-wrap">
+        <div class="add-btn" @click="handleAddApprove">
+            <span> <i class="el-icon-circle-plus-outline"></i></span>
+            <span>添加审批人</span>
         </div>
     </div>
 </template>
@@ -39,72 +30,14 @@ export default {
 };
 </script>
 
-<style lang="scss">
-.add-node-popover-body{
-    display: flex;
-    .popover-item{
-        text-align: center;
-        .icon{
-            width:40px;
-            height:40px;
-            border-radius: 50%;
-            font-size: 24px;
-            line-height: 40px;
-            border:1px solid black;
-            margin-bottom: 10px;
-        }
-    }
-}
-</style>
 <style scoped lang="scss">
 .add-node-wrap{
-    position:relative;
-    .node-content{
-        background-color: transparent;
-        border:none;
-    }
-    .line,.line-arrow,.add-btn{
-        position: absolute;
-        left:50%;
-        transform: translateX(-50%);
-    }
-    .line{
-        width:2px;
-        height:calc(100px - 10px);
-        background-color: #cacaca;
-    }
-    .line-arrow{
-        height: 0;
-        width:0;
-        border-style: solid;
-        border-width: 10px 6px 4px;
-        border-color: #cacaca transparent transparent;
-        bottom:-2px;
-    }
+    margin: 20px 0;
     .add-btn{
-        border-radius: 50%;
-        color:blue;
-        font-size: 28px;
-        top:50%;
-        transform: translate(-50%,-50%);
-        width:28px;
-        height:28px;
-        &::before{
-            position: absolute;
-            z-index: 3;
-            top:0;
-            left:0;
-        }
-        &::after{
-            z-index: 1;
-            content:'';
-            position:absolute;
-            width:14px;
-            height:14px;
-            top:5px;
-            left:5px;
-            background-color: #fff;
-        }
+        user-select: none;
+        cursor: pointer;
+        color:#0052D9;
+        display: inline-block;
     }
 }
 </style>

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

@@ -2,7 +2,7 @@
     <div class="approve-node-wrap node-wrap">
         <div class="node-content">
             <div class="head">
-                <span class="icon"><i class="el-icon-s-check"></i></span>
+                <span class="icon"></span>
                 <span class="name">审核人</span>
                 <span class="icon-btn" @click="removeNode"><i class="el-icon-close"></i></span>
             </div>
@@ -12,7 +12,10 @@
                         {{item.ItemName}}、
                     </li>
                 </ul>
-                <span v-else>请选择审批人</span>
+                <span v-else style="color:#0052D9;display: flex;align-items: center;">
+                    <img src="~@/assets/img/approve_m/select.png">
+                    请选择审批人
+                </span>
             </div>
         </div>
         <AddNode :node="flowNode" v-on="$listeners"/>
@@ -32,7 +35,10 @@
                         <p>选择审批人</p>
                         <div class="choose-box">
                             <el-radio v-model="block1" :label="1">指定人员</el-radio>
-                            <el-button @click="chooseDialogShow=true">选择人员</el-button>
+                            <el-button @click="chooseDialogShow=true" type="primary">
+                                <i class="el-icon-circle-plus-outline" style="margin-right: 5px;"></i>
+                                选择人员
+                            </el-button>
                         </div>
                         <draggable 
                             v-model="choosedList"
@@ -42,19 +48,20 @@
                             <li class="list-item" v-for="item in choosedList" :key="item.ItemId">
                                 <span class="name">{{item.ItemName}}</span>
                                 <span class="icon-btn">
-                                    <i class="el-icon-circle-close" @click.stop="removeChoosedItem(item)"></i>
+                                    <i class="el-icon-close" @click.stop="removeChoosedItem(item)"></i>
                                 </span>
                             </li>
                         </draggable>
                     </div>
-                    <div class="block">
+                    <div class="line"></div>
+                    <div class="block" style="margin-top:30px;">
                         <p>多人审批时</p>
                         <el-radio-group v-model="block2">
                             <el-radio :label="1">
                                 依次审批
                                 <el-tooltip effect="dark" placement="top" content="多个审批人依次进行审批；只有当所有审批人同意，该节点才能通过；按选择顺序审批" >
                                     <span class="hint-text">
-                                        <i class="el-icon-warning-outline"></i>
+                                        <i class="el-icon-warning"></i>
                                     </span>
                                 </el-tooltip>
                             </el-radio>
@@ -62,7 +69,7 @@
                                 会签
                                 <el-tooltip effect="dark" placement="top" content="所有审批人同意，该节点才能通过；审批无先后顺序" >
                                     <span class="hint-text">
-                                        <i class="el-icon-warning-outline"></i>
+                                        <i class="el-icon-warning"></i>
                                     </span>
                                 </el-tooltip>
                             </el-radio>
@@ -70,7 +77,7 @@
                                 或签
                                 <el-tooltip effect="dark" placement="top" content="所有审批人同意，该节点才能通过；审批无先后顺序" >
                                     <span class="hint-text">
-                                        <i class="el-icon-warning-outline"></i>
+                                        <i class="el-icon-warning"></i>
                                     </span>
                                 </el-tooltip>
                             </el-radio>
@@ -78,18 +85,19 @@
                     </div>
                 </div>
                 <div class="drawer-btn">
-                    <el-button @click="drawerShow=false">取消</el-button>
-                    <el-button @click="editApproveNode">确认</el-button>
+                    <el-button type="primary" plain @click="drawerShow=false">取消</el-button>
+                    <el-button type="primary" @click="editApproveNode">确认</el-button>
                 </div>
             </div>
         </el-drawer>
         <!-- 选择人员弹窗 -->
         <el-dialog 
             title="选择人员"
-            width="600"
+            width="600px"
             :visible.sync="chooseDialogShow"
             :modal-append-to-body="false"
             :append-to-body="false"
+            @close="chooseDialogShow=false"
         >
             <div class="dialog-wrap">
                 <TreeTransfer 
@@ -99,8 +107,8 @@
                 />
             </div>
             <div class="dialog-btn">
-                <el-button>取消</el-button>
-                <el-button @click="getChoosedList">确认</el-button>
+                <el-button type="primary" plain @click="chooseDialogShow=false">取消</el-button>
+                <el-button type="primary" @click="getChoosedList">确认</el-button>
             </div>
         </el-dialog>
     </div>
@@ -143,6 +151,10 @@ export default {
         },
         getChoosedList(){
             this.choosedList = _.cloneDeep(this.$refs["tree-trans"].choosedList)
+            if(!this.choosedList.length){
+                this.$message.warning("请至少选择一人")
+                return
+            }
             this.chooseDialogShow = false
         },
         removeChoosedItem(item){
@@ -165,12 +177,23 @@ export default {
     .el-drawer__body{
         overflow: hidden;
     }
+    .dialog-btn{
+        margin-top:60px;
+        padding-bottom: 40px;
+        text-align: center;
+    }
 }
 </style>
 <style scoped lang="scss">
 .approve-node-wrap{
     .head{
-        background-color: brown;
+        background-color: #0052D9;
+        .icon{
+            background-image: url('~@/assets/img/approve_m/approve.png');
+        }
+        .icon-btn{
+            font-size: 20px;
+        }
     }
     .approve-drawer-wrap{
         height: 100%;
@@ -181,19 +204,30 @@ export default {
             display: flex;
             align-items: center;
             justify-content: space-between;
-            font-weight: bold;
+            /* font-weight: bold; */
             font-size: 18px;
             height:35px;
-            padding:10px;
-            border-bottom: 1px solid gray;
+            padding:20px;
+            border-bottom: 1px solid #C8CDD9;
         }
         .drawer-content{
             flex:1;
             overflow-y: auto;
             box-sizing: border-box;
-            padding:10px;
+            padding:30px;
             .block{
-                margin-bottom: 20px;
+                min-height: 340px;
+                .choose-box{
+                    margin-top: 20px;
+                    display: flex;
+                    justify-content: space-between;
+                    align-items: center;
+                }
+            }
+            .line{
+                margin:0 -30px;
+                height: 1px;
+                background-color:#C8CDD9;
             }
             .approve-list{
                 margin-top: 10px;
@@ -201,15 +235,23 @@ export default {
                 flex-wrap: wrap;
                 gap:10px;
                 .list-item{
-                    padding:5px;
-                    border:1px solid black;
+                    padding:8px;
+                    border-radius: 4px;
+                    border:1px solid #C8CDD9;
+                    .icon-btn{
+                        cursor: pointer;
+                    }
                 }
             }
             .el-radio-group{
-                margin-top: 10px;
+                margin-top: 20px;
                 .el-radio{
                     display: block;
                     margin-bottom: 10px;
+                    .hint-text{
+                        color:#C0C4CC;
+                    }
+
                 }
             }
         }

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

@@ -19,15 +19,8 @@ export default {
 
 <style scoped lang="scss">
 .end-node-wrap{
-    margin-bottom: 20px;
     .end-content{
-        cursor: pointer;
-        width:150px;
-        height:35px;
-        border-radius: 16px;
-        background-color: blueviolet;
-        text-align: center;
-        line-height: 35px;
+        color:#C0C4CC;
     }
 }
 </style>

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

@@ -1,7 +1,10 @@
 <template>
     <div class="start-node-wrap node-wrap">
         <div class="node-content">
-            <div class="head">发起人</div>
+            <div class="head">
+                <span class="icon"></span>
+                <p class="name">发起人</p>
+            </div>
             <div class="content">所有人</div>
         </div>
         <AddNode :node="flowNode" v-on="$listeners"/>
@@ -27,9 +30,14 @@ export default {
 
 <style scoped lang="scss">
 .start-node-wrap{
-    margin-top:20px;
     .head{
-        background-color: #02BBD1;
+        background-color: #ECF2FE;
+        .name{
+            color:#0052D9;
+        }
+        .icon{
+            background-image: url('~@/assets/img/approve_m/start.png');
+        }
     }
 }
 </style>

src/views/approve_manage/components/treeTransfer.vue

@@ -2,9 +2,9 @@
     <!-- 选择审批人组件 -->
     <div class="tree-transfer">
         <div class="before-transfer transfer">
-            <div class="head">{{beforeNum}}项</div>
             <div class="search">
-                <el-input placeholder="搜索" v-model="searchText" @input="$refs['trans-tree'].filter(searchText)"></el-input>
+                <el-input placeholder="搜索" style="width:100%;"
+                    v-model="searchText" @input="$refs['trans-tree'].filter(searchText)"></el-input>
             </div>
             <div class="content">
                 <el-tree 
@@ -33,8 +33,8 @@
                 class="content">
                 <li class="list-item" v-for="item in choosedList" :key="item.ItemId">
                     <span class="name">{{item.ItemName}}</span>
-                    <span class="icon-btn">
-                        <i class="el-icon-circle-close" @click.stop="removeItem(item)"></i>
+                    <span class="icon-btn" style="color:#C0C4CC;">
+                        <i class="el-icon-close" @click.stop="removeItem(item)"></i>
                     </span>
                 </li>
             </draggable>
@@ -59,10 +59,9 @@ export default {
     },
     data() {
         return {
-            beforeNum:10,
+            totalNum:0,
             treeData:[],
             searchText:'',
-            afterNum:5,
             choosedList:[]
         };
     },
@@ -147,18 +146,19 @@ export default {
 .tree-transfer{
     display: flex;
     align-items: center;
+    gap:12px;
     .transfer{
         display: flex;
         flex-direction: column;
-        width:200px;
+        width:254px;
         height: 400px;
-        border:1px solid gray;
-        border-radius: 4px;
+        border:1px solid #DCDCDC;
+        border-radius: 6px;
+        padding:8px;
         .head,.search,.content{
             padding:10px;
         }
         .head{
-            border-bottom: 1px solid gray;
             display: flex;
             justify-content: space-between;
             .btn-text{
@@ -174,8 +174,7 @@ export default {
             margin-bottom: 10px;
             .list-item{
                 cursor: pointer;
-                padding:5px 0;
-                border-bottom:1px solid gray;
+                padding:6px 0;
                 display: flex;
                 justify-content: space-between;
             }

src/views/approve_manage/css/nodeStyle.scss

@@ -1,25 +1,33 @@
 .node-wrap{
     display: flex;
     flex-direction: column;
-    align-items: center;
+    /* align-items: center; */
     .node-content{
+        overflow: hidden;
         cursor: pointer;
         border-radius: 4px;
         width:300px;
         min-height: 100px;
         background-color: #fff;
-        border:1px solid black;
+        border:1px solid #0052D9;
         .head{
+            user-select: none;
             color:#fff;
             height:35px;
             display: flex;
             align-items: center;
             padding: 5px;
             justify-content: space-between;
+            border-bottom: 1px solid #0052D9;
             .name{
                 margin-left: 5px;
                 margin-right: auto;
             }
+            .icon{
+                display: inline-block;
+                width:20px;
+                height:20px;
+            }
         }
         .content{
             padding:5px;