新增凭证

src/router/index.js

@@ -2451,6 +2451,16 @@ export const constantRoutes = [
     },
     component: (resolve) => require(['@/views/yinnong/detailedLedger'], resolve)
   },
+  {
+    
+    path: '/yinnong/detailedVoucher',
+    name: 'yinnongDetailedVoucher',
+    meta: {
+      title: '记账凭证',
+      hidden: true,
+    },
+    component: (resolve) => require(['@/views/yinnong/voucher'], resolve)
+  },
   {
     path: '/lawEnforcement',
     name: 'lawEnforcement',

src/views/yinnong/detailedLedger.vue

@@ -296,7 +296,7 @@ export default {
     subjectNameFun(num){
         let endNum = num.split("-");
         this.$router.push({
-            path: "/sunVillage_info/voucher",
+            path: "/yinnong/detailedVoucher",
             query: {
                 vocherId: endNum[1],
                 num:encodeURI(num)

src/views/yinnong/voucher.vue

@@ -0,0 +1,388 @@
+<template>
+    <div class="home_wrapper">
+        <div class="head_main">
+            <div class="header_main">
+                记账凭证
+                <div class="return_btn" @click="onClickLeft"></div>
+            </div>
+            <div class="Account_sleeve">
+                <div class="flex_block">
+                    <div class="x_m"></div>
+                    <div class="title">账套：</div>
+                    <div class="desc">{{$store.state.user.bookName}}</div>
+                </div>
+                <div class="flex_block">
+                    <div class="x_m"></div>
+                    <div class="title">日期：</div>
+                    <div class="desc">{{vaocherObj.bookDate}}</div>
+                </div>
+                <div class="flex_block">
+                    <div class="x_m"></div>
+                    <div class="title">凭证号：</div>
+                    <div class="desc">{{voucherNum}}号</div>
+                </div>
+            </div>
+        </div>
+        <div class="vocher_mian">
+            <div class="minimum_hd">{{vaocherObj.detailList.length}}条</div>
+            <!--1-->
+            <div class="vocher_block" v-for="(item,index) in vaocherObj.detailList" :key="index">
+                <div class="flex_block">
+                    <div class="m_title">
+                        <div class="icon">1</div>
+                        摘要
+                    </div>
+                    <div class="m_cont">{{item.voucherSummary}}</div>
+                </div>
+                <div class="flex_block">
+                    <div class="m_title">会计科目</div>
+                    <div class="m_cont">{{ item.subjectNameAll }}</div>
+                </div>
+                <div class="flex_block">
+                    <div class="m_title">借方金额</div>
+                    <div class="m_cont money" v-if="item.jieAmount">¥ {{item.jieAmount}} 元</div>
+                </div>
+                <div class="flex_block">
+                    <div class="m_title">贷方金额</div>
+                    <div class="m_cont money" v-if="item.daiAmount">¥ {{item.daiAmount}} 元</div>
+                </div>
+            </div>
+            <!--1-->
+            <!-- <div class="vocher_block">
+                <div class="flex_block">
+                    <div class="m_title">
+                        <div class="icon">1</div>
+                        摘要
+                    </div>
+                    <div class="m_cont">购买设备</div>
+                </div>
+                <div class="flex_block">
+                    <div class="m_title">会计科目</div>
+                    <div class="m_cont">财政资金-人居环境整治</div>
+                </div>
+                <div class="flex_block">
+                    <div class="m_title">借方金额</div>
+                    <div class="m_cont money">¥ 10,000.00 元</div>
+                </div>
+                <div class="flex_block">
+                    <div class="m_title">贷方金额</div>
+                    <div class="m_cont money">¥ 10,000.00 元</div>
+                </div>
+            </div> -->
+        </div>
+
+        <div class="vocher_footer">
+            <div class="total_wrap">合计：<span class="money">{{capitalAmount}}</span></div>
+            <div class="personnel_wrap">
+                <div class="f_block">制单员：{{ vaocherObj.preparedBy }}</div>
+                <div class="f_block">审核员：{{ vaocherObj.checkedBy }}</div>
+            </div>
+        </div>
+       
+    </div>
+</template>
+<script>
+import { voucherDetail } from "@/api/sunVillage_info/fixedAssets";
+export default {
+  name: "sunVillageInfoVoucher",
+  data() {
+    return {
+        //凭证号
+        voucherId:'',
+        voucherNum:'',
+        //凭证数据
+        vaocherObj:{
+            detailList:[]
+        },
+        //大写总金额
+        capitalAmount:''
+    }
+  },
+  mounted(){
+    this.voucherId =  this.$route.query.vocherId;
+    this.voucherNum = decodeURI(this.$route.query.num);
+    this.initAxiox()
+  },
+  methods:{
+    initAxiox(){
+        voucherDetail({id:this.voucherId}).then((res)=>{
+            if(res.code == 200){
+                let content = res.data;
+                this.vaocherObj = content;
+                let totalAmount = 0;
+                if(content.detailList.length && content.detailList.length>0){
+                    content.detailList.forEach((v,i)=>{
+                        totalAmount +=v.jieAmount
+                    })
+                }
+                this.capitalAmount = this.convertCurrency(totalAmount);
+            }
+        })
+    },
+    convertCurrency(money) {
+      //汉字的数字
+      var cnNums = new Array(
+        "零",
+        "壹",
+        "贰",
+        "叁",
+        "肆",
+        "伍",
+        "陆",
+        "柒",
+        "捌",
+        "玖"
+      );
+      //基本单位
+      var cnIntRadice = new Array("", "拾", "佰", "仟");
+      //对应整数部分扩展单位
+      var cnIntUnits = new Array("", "万", "亿", "兆");
+      //对应小数部分单位
+      var cnDecUnits = new Array("角", "分", "毫", "厘");
+      //整数金额时后面跟的字符
+      var cnInteger = "整";
+      //整型完以后的单位
+      var cnIntLast = "元";
+      //最大处理的数字
+      var maxNum = 999999999999999.9999;
+      //金额整数部分
+      var integerNum;
+      //金额小数部分
+      var decimalNum;
+      //输出的中文金额字符串
+      var chineseStr = "";
+      //分离金额后用的数组，预定义
+      var parts;
+      if (money == "") {
+        return "";
+      }
+      money = parseFloat(money);
+      if (money >= maxNum) {
+        //超出最大处理数字
+        return "";
+      }
+      if (money == 0) {
+        chineseStr = cnNums[0] + cnIntLast + cnInteger;
+        return chineseStr;
+      }
+      //转换为字符串
+      money = money.toString();
+      if (money.indexOf(".") == -1) {
+        integerNum = money;
+        decimalNum = "";
+      } else {
+        parts = money.split(".");
+        integerNum = parts[0];
+        decimalNum = parts[1].substr(0, 4);
+      }
+      //获取整型部分转换
+      if (parseInt(integerNum, 10) > 0) {
+        var zeroCount = 0;
+        var IntLen = integerNum.length;
+        for (var i = 0; i < IntLen; i++) {
+          var n = integerNum.substr(i, 1);
+          var p = IntLen - i - 1;
+          var q = p / 4;
+          var m = p % 4;
+          if (n == "0") {
+            zeroCount++;
+          } else {
+            if (zeroCount > 0) {
+              chineseStr += cnNums[0];
+            }
+            //归零
+            zeroCount = 0;
+            chineseStr += cnNums[parseInt(n)] + cnIntRadice[m];
+          }
+          if (m == 0 && zeroCount < 4) {
+            chineseStr += cnIntUnits[q];
+          }
+        }
+        chineseStr += cnIntLast;
+      }
+      //小数部分
+      if (decimalNum != "") {
+        var decLen = decimalNum.length;
+        for (var i = 0; i < decLen; i++) {
+          var n = decimalNum.substr(i, 1);
+          if (n != "0") {
+            chineseStr += cnNums[Number(n)] + cnDecUnits[i];
+          }
+        }
+      }
+      if (chineseStr == "") {
+        chineseStr += cnNums[0] + cnIntLast + cnInteger;
+      } else if (decimalNum == "") {
+        chineseStr += cnInteger;
+      }
+      return chineseStr;
+    },
+  }
+}
+</script>
+<style scoped lang="scss">
+.home_wrapper{
+   background: #e9e9e9;
+   min-height: 100vh;
+   width: 100vw;
+   .head_main{
+        height: 440px;
+        background: url('../../assets/images/sunVillage_info/vocher_bg.png') no-repeat;
+        background-size: 100% 100%;
+        .header_main {
+                height: 116px;
+                // position: fixed;
+                top: 0;
+                left: 0;
+                width: 100%;
+                font-size: 36px;
+                line-height: 116px;
+                text-align: center;
+                color: #fff;
+                position: relative;
+
+                .return_btn {
+                    width: 24px;
+                    height: 43.2px;
+                    background: url('../../assets/images/sunVillage_info/list_icon_5.png') center center no-repeat;
+                    background-size: 20px 36px;
+                    position: absolute;
+                    left: 38px;
+                    top: 36px;
+                }
+
+        }
+        .Account_sleeve{
+            padding-left: 75px;
+            margin-top: 20px;
+            .flex_block{
+                padding-left: 30px;
+                display: flex;
+                font-size: 30px;
+                line-height: 30px;
+                color: #fff;
+                margin-bottom: 28px;
+                position: relative;
+                .x_m{
+                    position: absolute;
+                    width: 8px;
+                    height: 30px;
+                    left: 0;
+                    top: 0;
+                    background: #fff;
+                    border-radius: 8px;
+                }
+                .title{
+                    width: 125px;
+                }
+            }
+        }
+
+
+
+
+
+
+
+        // <div class="Account_sleeve">
+        //         <div class="flex_block">
+        //             <div class="title">账套：</div>
+        //             <div class="desc">长山镇李四村经济合作社</div>
+        //         </div>
+        //         <div class="flex_block">
+        //             <div class="title">日期：</div>
+        //             <div class="desc">2022-02-03</div>
+        //         </div>
+        //         <div class="flex_block">
+        //             <div class="title">凭证号：</div>
+        //             <div class="desc">记-55号</div>
+        //         </div>
+        //     </div>
+   }
+   .vocher_mian{
+        margin:-120px 28px 0;
+        background: #fff;
+        box-shadow: 4px 6px 5px rgba(63, 68, 75, 0.1);
+        border-radius: 20px;
+        padding:  40px 40px 60px;
+        .minimum_hd{
+            background: #2FACFE;
+            padding:0 22px;
+            height: 50px;
+            color: #fff;
+            line-height: 50px;
+            border-radius: 50px;
+            font-size: 30px;
+            display: inline-block;
+
+        }
+        .vocher_block{
+            padding-top: 20px;
+            padding-bottom: 15px;
+            border-bottom: 1px dashed #DCDCDC;
+            .flex_block{
+                display: flex;
+                justify-content: space-between;
+                height: 60px;
+                font-size: 30px;
+                .m_title{
+                    display: flex;
+                    justify-content: center;
+                    align-items: center;
+                    color: #878787;
+                
+                    .icon{
+                        height: 38px;
+                        width: 38px;
+                        background: #2FACFE;
+                        border-radius: 50%;
+                        color: #fff;
+                        display: flex;
+                        align-items: center;
+                        justify-content: center;
+                        margin-right: 12px;
+
+                    }
+                }
+                .money{
+                    color: #E90000;
+                }
+            }
+        }
+   }
+   .vocher_footer{
+        margin:0 28px;
+        padding: 38px 0;
+        font-size: 30px;
+        border-bottom: 1px dashed #dedede;
+        .total_wrap{
+            margin:0 45px;
+            // height: 60px;
+            padding:18px 0;
+            // line-height: 60px;
+            display: flex;
+            align-items: center;
+          
+            .money{
+                color: #f00;
+            }
+        }
+        .personnel_wrap{
+            margin:0 45px;
+            height: 50px;
+            line-height: 50px;
+            color: #2FACFE;
+            justify-content: space-between;
+            display: flex;
+        }
+
+        // <div class="vocher_footer">
+        //     <div class="total_wrap">合计：<span class="money">贰万元整</span></div>
+        //     <div class="personnel_wrap">
+        //         <div class="f_block">制单员：张三</div>
+        //         <div class="f_block">审核员：王五</div>
+        //     </div>
+        // </div>
+   }
+}
+</style>