审批暂存

src/views/approve_manage/approveEdit.vue

@@ -20,7 +20,10 @@
         </div>
         <!-- 审批流画布 -->
         <div class="flow-editor-wrap">
-            <FlowEdiotr></FlowEdiotr>
+            <FlowEdiotr
+                ref='floweditor'
+                :flowConfig="approveForm.flowConfig"
+            />
         </div>
     </div>
 </template>
@@ -31,7 +34,7 @@ import FlowEdiotr from './components/flowEdiotr.vue';
 export default {
     data() {
         return {
-            approveForm:{}
+            approveForm:{},
         };
     },
     methods: {},

src/views/approve_manage/approveList.vue

@@ -2,39 +2,57 @@
     <!-- 审批管理列表页 -->
     <div class="approve-list-wrap page-wrap">
         <div class="head-tab">
-            <el-tabs v-model="activeTabs" @tab-click="handleClick">
-                <el-tab-pane label="待处理" name="first"></el-tab-pane>
-                <el-tab-pane label="已处理" name="second"></el-tab-pane>
-                <el-tab-pane label="我发起的" name="third"></el-tab-pane>
+            <el-tabs v-model="activeTab" @tab-click="handleClick">
+                <el-tab-pane label="待处理" name="pending"></el-tab-pane>
+                <el-tab-pane label="已处理" name="processed"></el-tab-pane>
+                <el-tab-pane label="我发起的" name="originate"></el-tab-pane>
             </el-tabs>
         </div>
         <div class="approve-list">
             <div class="select-box">
                 <div class="box">
                     <el-select placeholder="请选择关联报告" style="margin-right: 20px;"></el-select>
-                    <el-select v-show="activeTabs!=='first'" placeholder="时间类型" style="width:120px;"></el-select>
+                    <el-select v-show="activeTab!=='pending'" placeholder="时间类型" style="width:120px;">
+                        <el-option label="提交时间" :value="1" />
+                        <el-option label="处理时间" :value="2" v-if="activeTab==='processed'"/>
+                        <el-option label="审批时间" :value="3" v-if="activeTab==='originate'"/>
+                    </el-select>
                     <el-date-picker type="daterange"
                         range-separator="至"
                         start-placeholder="开始日期"
                         end-placeholder="结束日期">
                     </el-date-picker>
-                    <el-select placeholder="请选择处理状态" style="margin-left: 20px;"></el-select>
+                    <el-select placeholder="请选择处理状态" style="margin-left: 20px;">
+                        <el-option label="已同意" :value="1" />
+                        <el-option label="已驳回" :value="2" />
+                    </el-select>
                 </div>
                 <el-input placeholder="请输入报告标题" style="width:260px;"></el-input>
             </div>
             <div class="list-box">
-                <el-table :data="tableData" border>
+                <el-table :data="tableData" @sort-change="sortChange" border>
                 <el-table-column
                     v-for="item in tableColumns"
                     :key="item.key"
                     :label="item.label"
                     :prop="item.key"
+                    :sortable="item.sortable"
                     align="center"
                 ></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>
+                        <template v-if="activeTab==='pending'">
+                            <el-button type="text" style="padding:0;">审批</el-button>
+                        </template>
+                        <template v-if="activeTab==='processed'">
+                            <el-button type="text" style="padding:0;">详情</el-button>
+                            <el-button type="text" style="padding:0" @click="handleShowDetail(row)">驳回理由</el-button>
+                        </template>
+                        <template v-if="activeTab==='originate'">
+                            <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="handleShowDetail(row)">驳回理由</el-button>
+                        </template>
                     </template>
                     
                 </el-table-column>
@@ -52,44 +70,55 @@
             </div>
             </div>
         </div>
+        <RejectDialog 
+            :isDetailDialogShow="isDetailDialogShow"
+            :isEdit="false"
+            :data="currentData"
+            @close="isDetailDialogShow=false;currentData={};"
+        />
     </div>
 </template>
 
 <script>
+import RejectDialog from './components/rejectDialog.vue';
+import {
+        approve_pending_columns,
+        approve_processed_columns,
+        approve_originate_columns,
+    } from './config/tableConfig'
+const columnsMap = {
+    'pending':approve_pending_columns,
+    'processed':approve_processed_columns,
+    'originate':approve_originate_columns
+}
 export default {
     data() {
         return {
-            activeTabs:'first',
-            tableData:[{name:1}],
-            tableColumns:[{
-                label:'报告标题',
-                key:'name'
-            },{
-                label:'关联报告',
-                key:'catalog'
-            },{
-                label:'提交人',
-                key:'approve'
-            },{
-                label:'提交时间',
-                key:'time'
-            },{
-                label:'处理时间',
-                key:'time2'
-            },{
-                label:'处理结果',
-                key:'result'
-            }],
-            page:1,
-            pageSize:10,
-            total:0,
+            activeTab: 'pending',
+            tableData: [{ name: 1 }],
+            tableColumns: approve_pending_columns,
+            page: 1,
+            pageSize: 10,
+            total: 0,
+            currentData: {},
+            isDetailDialogShow: false
         };
     },
     methods: {
-        handleCurrentChange(page){
-            this.page = page
+        handleCurrentChange(page) {
+            this.page = page;
+        },
+        sortChange({ prop, order }) {
+        },
+        handleClick() {
+            this.tableColumns = columnsMap[this.activeTab];
+        },
+        handleShowDetail(data) {
+            this.currentData = data;
+            this.isDetailDialogShow = true;
         }
     },
+    components: { RejectDialog }
 };
 </script>
 

src/views/approve_manage/approveSetting.vue

@@ -1,5 +1,5 @@
 <template>
-    <!-- 审批流配置 -->
+    <!-- 审批流配置列表 -->
     <div class="approve-setting-wrap page-wrap">
         <div class="head-box">
             <el-button type="primary" @click="$router.push('/approveEdit')">添加审批流</el-button>
@@ -7,12 +7,13 @@
             <el-input placeholder="请输入审批名称" style="width:260px;"></el-input>
         </div>
         <div class="list-box">
-            <el-table :data="tableData" border>
+            <el-table :data="tableData" @sort-change="sortChange" border>
                 <el-table-column
                     v-for="item in tableColumns"
                     :key="item.key"
                     :label="item.label"
                     :prop="item.key"
+                    :sortable="item.sortable"
                     align="center"
                 ></el-table-column>
                 <el-table-column label="操作" align="center">
@@ -51,7 +52,8 @@ export default {
                 key:'catalog'
             },{
                 label:'创建时间',
-                key:'time'
+                key:'time',
+                sortable:'custom'
             }],
             page:1,
             pageSize:10,
@@ -61,6 +63,9 @@ export default {
     methods: {
         handleCurrentChange(page){
             this.page = page
+        },
+        sortChange({prop,order}){
+
         }
     },
 };

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

@@ -0,0 +1,25 @@
+<template>
+    <div class="start-node-wrap">
+        开始节点
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+
+        };
+    },
+    methods: {
+
+    },
+};
+</script>
+
+<style scoped lang="scss">
+.start-node-wrap{
+    color:#fff;
+    background-color:#02BBD1;
+}
+</style>

src/views/approve_manage/components/rejectDialog.vue

@@ -0,0 +1,75 @@
+<template>
+    <el-dialog custom-class="approve-reject-dialog"
+        title="审批驳回"
+        :visible.sync="isDetailDialogShow"
+        :close-on-click-modal="false"
+        :modal-append-to-body="false"
+        @close="$emit('close')"
+        width="692px"
+        v-dialogDrag
+        center
+    >
+        <div class="dialog-content-wrap">
+            <el-input type="textarea" v-model="content" :disabled="!isEdit" :rows="10" placeholder="驳回理由为空"></el-input>
+        </div>
+        <div class="dialog-btn-wrap">
+            
+            <template v-if="isEdit">
+                <el-button>取消</el-button>
+                <el-button @click="$emit('close')">确认</el-button>
+            </template>
+            <el-button v-else>知道了</el-button>
+        </div>
+    </el-dialog>
+</template>
+
+<script>
+export default {
+    props:{
+        isDetailDialogShow:{
+            type:Boolean,
+            default:false
+        },
+        isEdit:{
+            type:Boolean,
+            default:true
+        },
+        data:{
+            type:Object,
+            default:[]
+        }
+    },
+    watch:{
+        isDetailDialogShow(val){
+            if(val){
+                this.content = this.data.content||''
+            }
+        }
+    },
+    data() {
+        return {
+            content:''
+        };
+    },
+    methods: {
+
+    },
+};
+</script>
+
+<style lang="scss">
+.approve-reject-dialog{
+    .dialog-content-wrap{
+        .el-textarea{
+            textarea{
+                resize: none !important;
+            }
+        }
+    }
+    .dialog-btn-wrap{
+        text-align: center;
+        margin-top: 20px;
+        padding-bottom: 25px;
+    }
+}
+</style>

src/views/approve_manage/config/tableConfig.js

@@ -0,0 +1,95 @@
+//审批管理-待处理
+export const approve_pending_columns = [
+    {
+        key:'title',
+        label:'报告标题'
+    },{
+        key:'classify',
+        label:'关联报告'
+    },{
+        key:'approver',
+        label:'提交人'
+    },{
+        key:'time',
+        label:'提交时间',
+        sortable:'custom'
+    },{
+        key:'status',
+        label:'审批状态',
+    }
+]
+export const appreve_pending_status = [
+    {
+        type:1,
+        label:'待审批'
+    }
+]
+//审批管理-已处理
+export const approve_processed_columns=[
+    {
+        key:'title',
+        label:'报告标题'
+    },{
+        key:'classify',
+        label:'关联报告'
+    },{
+        key:'approver',
+        label:'提交人'
+    },{
+        key:'time',
+        label:'提交时间',
+        sortable:'custom'
+    },{
+        key:'time2',
+        label:'处理时间',
+        sortable:'custom'
+    },{
+        key:'result',
+        label:'处理结果',
+    }
+]
+export const approve_processed_status = [
+    {
+        type:1,
+        label:'已同意'
+    },{
+        type:2,
+        label:'已驳回'
+    }
+]
+//审批管理-我发起的
+export const approve_originate_columns=[
+    {
+        key:'title',
+        label:'报告标题'
+    },{
+        key:'classify',
+        label:'关联报告'
+    },{
+        key:'time',
+        label:'提交时间',
+        sortable:'custom'
+    },{
+        key:'time2',
+        label:'审批时间',
+        sortable:'custom'
+    },{
+        key:'result',
+        label:'审批状态',
+    }
+]
+export const approve_originate_status=[
+    {
+        type:1,
+        label:'待审批'
+    },{
+        type:2,
+        label:'已通过'
+    },{
+        type:3,
+        label:'已驳回'
+    },{
+        type:4,
+        label:'已撤销'
+    }
+]