01

src/components/FinancialModule/ChoiceAddFinancialDocuments2.vue

+<style scoped>
+  ._nav{margin: 20px 0 0 0 ;background-color: #f5f5f5;}
+  ._nav li{float: left;font-size: 14px;color: #666666;padding: 15px 20px;cursor: pointer;position: relative;background-color: #f1f1f1;margin-right: 5px}
+  ._nav li._active{background-color:#FFFFFF;color: #333333 }
+  ._nav li._active::after{content: "";width: 20px;height: 3px;background-color: #E95252;display: inline-block;position: absolute;bottom: 0;left: 38%;}
+  ._conten li{display: flex;padding:10px 30px;margin-top: 20px;border: 1px solid #ebebeb;}
+  ._left{display: flex;flex: 6;align-items: center;border-right: 1px dashed #DCDFE6;padding-right: 20px !important;}
+  ._left>div{padding-left: 14px}
+  ._Icon{width: 50px;height: 50px;line-height: 50px;text-align: center;color: white;font-weight: bold;background-color: #2AAEF2;border-radius: 50%;font-size: 22px}
+  ._t{color: #333333;font-size: 14px;padding-bottom: 7px;font-weight: bold}
+  ._s{color: #666666;font-size: 12px;}
+  ._right{flex: 1;align-items: center;display: flex;padding-left: 20px !important;border-left: 1px dashed #DCDFE6;justify-content: center;}
+  ._right i{width: 30px;height: 30px;display: inline-block;color: white !important;border-radius: 50%;text-align: center;line-height: 30px;margin-right: 10px;cursor: pointer;outline: none;}
+  ._right i.icon-liucheng{background-color: #00C6FF}
+  ._right i.icon-liucheng:hover{background-color: #83d7ef}
+  ._right i.icon-liucheng:active{background-color: #038cb3}
+  ._right i.el-icon-circle-plus-outline{background-color: #47BF8C}
+  ._right i.el-icon-circle-plus-outline:hover{background-color: #47BF8C}
+  ._right i.el-icon-circle-plus-outline:active{background-color: #10a063}
+  ._log_t{padding: 10px;}
+</style>
+<template>
+  <div>
+    <ul class="_nav clearfix" v-if="showTab==0">
+      <li :class="active==1?'_active':''" @click="active=1,tabData(1)">收款单</li>
+      <li :class="active==2?'_active':''" @click="active=2,tabData(2)">付款单</li>
+    </ul>
+    <ul class="_nav clearfix" v-else>
+      <li :class="active==1?'_active':''"  v-if="showTab==1">收款单</li>
+      <li :class="active==2?'_active':''" v-if="showTab==2">付款单</li>
+    </ul>
+    <ul class="_conten">
+      <li v-for="(item,index) in GetList">
+        <div class="_left">
+          <span class="_Icon">{{item.Name.substring(0,1)}}</span>
+          <div>
+            <p class="_t">{{item.Name}}</p>
+            <p class="_s">{{item.DescribeInfo}}</p>
+          </div>
+        </div>
+        <div class="_right">
+          <el-tooltip popper-class="item _process" effect="dark" content="流程"  placement="top">
+            <el-popover
+              popper-class="detailsIT_Journal"
+              width="580"
+              trigger="click">
+              <div class="InfoChangeLog" >
+                <div class="changLog">
+                  <p class="_log_t">收款流程</p>
+                  <my-FlowChartModule :data="AuditListData"></my-FlowChartModule>
+                </div>
+              </div>
+              <i slot="reference" class="iconfont icon-liucheng" @click="getFlowChart(item.Id)"></i>
+            </el-popover>
+          </el-tooltip>
+          <el-tooltip class="item" effect="dark" content="新增"  placement="top">
+            <i class="edit el-icon-circle-plus-outline" @click="goUrl('addFinancialDocuments',item.Id,item.Name+'单',item.Type,item.IsUploadPic)"></i>
+          </el-tooltip>
+        </div>
+      </li>
+    </ul>
+    <div class="noData" v-show="noData">
+      {{$t('system.content_noData')}}
+    </div>
+  </div>
+</template>
+<script>
+  import myFlowChartModule from "./FinancialSubmodule/FlowChartModule.vue";
+  export default {
+    data(){
+      return{
+        GetList:[],
+        active:1,
+        AuditListData:{
+          AuditList:[]
+        },
+        collectList:[],
+        payList:[],
+        total:0,
+        currentPage:1,
+        noData:false,
+        lastID:-1,
+        orderObj:null,
+        showTab:0,
+      }
+    },methods:{
+      goUrl(path,id,Name,Type,IsUploadPic) {
+        if(this.active==1){
+          this.$router.push({ name: "addReceivablesDocuments",query:{"id":id,"Name":Name,"Type":Type,"orderObj":this.orderObj,'path':this.$route.query.path,'IsUploadPic':IsUploadPic,'Cmd':this.$route.query.Cmd,'companyID':this.$route.query.companyID,blank:'y',tab:'新增收款单'}})
+        }else{
+          this.$router.push({ name: path,query:{"id":id,"Name":Name,"Type":Type,"orderObj":this.orderObj,'path':this.$route.query.path,'IsUploadPic':IsUploadPic,'Cmd':this.$route.query.Cmd,'companyID':this.$route.query.companyID,blank:'y',tab:'新增付款单'}})
+        }
+      },
+      getFlowChart(id){  //获取流程图
+        if(this.lastID==id)return
+        this.apipost('FinancialFlowTemplate_post_GetProcessList',{ID:id,WorkFlowID:0,TemplateType:0},res=>{
+          if(res.data.resultCode==1){
+            this.lastID = id
+            res.data.data.forEach(y=>{
+              y.contentTips = y.AuditDescription+(y.AuditWay=="2"?'（会签）':'（或签）')
+            });
+            this.AuditListData.AuditList = res.data.data
+          }else{}
+        },err=>{})
+      },
+      tabData(t){  //切换
+        if(t==1){
+          this.GetList = this.collectList;
+        }else{
+          this.GetList = this.payList;
+        }
+        if(this.GetList.length<1){
+          this.noData = true;
+        }else{
+          this.noData = false;
+        }
+      },
+      Financial_post_GetList(){ //获取
+        this.apipost('Financial_post_GetList',{},res=>{
+          if(res.data.resultCode==1){
+            let data = res.data.data;
+            if(data){
+              data.forEach(x => {
+                if(x.Type==1){
+                  this.collectList.push(x);
+                }else{
+                  if(this.active===2){
+                     if(x.Id!=11){
+                       this.payList.push(x);
+                     }
+                  }else{
+                  this.payList.push(x);}
+                }
+              });
+            }
+            this.GetList = this.collectList;
+            if(this.GetList.length<1){
+              this.noData = true;
+            }
+            if(this.$route.query.Type){
+              this.tabData(this.$route.query.Type);
+            }
+          }else{
+            this.$message.error(res.data.message)
+          }
+        },err=>{})
+      },
+    },mounted(){
+      this.Financial_post_GetList();
+      this.showTab = this.$route.query.Type?this.$route.query.Type:0;
+      if(this.showTab==1){
+        this.GetList = this.collectList;
+      }else{
+        this.GetList = this.payList;
+      }
+      this.active = parseInt(this.$route.query.Type)?parseInt(this.$route.query.Type):1;
+      this.orderObj = this.$route.query.orderObj;
+    },components: {
+      "my-FlowChartModule": myFlowChartModule
+    }
+  }
+</script>