FE_bankTeaching/src/components/checkPhoto/index.vue

<template>
    <div class="relative -translate-y-2/4 overflow-hidden" style="margin-top: 10px;color: black;" id="checkPhoto" v-drag>
        <!-- <div class="bg-gray-400" @click="closeIt">关闭</div> -->
        <template v-if="imgSrcId==413">
            <img class="absolute cursor-pointer hover:bg-red-700" src="@/assets/svg/close.svg" alt="" @click="closeIt"  style="right: 20px; top: 10px;" />
        </template>
        <template v-else>
            <img class="absolute cursor-pointer hover:bg-red-700" src="@/assets/svg/close.svg" alt="" @click="closeIt"  style="right: 50px; top: 30px;" />
        </template>
        <template v-if="imgSrcId==14">
            <h3 class="text-xl" style="left: 105px;top: 120px;">{{ dataFlow.userName }}</h3>
            <h3 class="text-xl" v-if="dataFlow.sex==1" style="left: 446px;top: 110px;">√</h3>
            <h3 class="text-xl" v-else style="left: 470px;top: 120px;">√</h3>
            <h3 class="text-xl" style="left: 595px;top: 120px;word-spacing: 5px;">{{ dataFlow.birthday.split('-').join('&emsp;&emsp;') }}</h3>
            <h3 class="text-xl" style="left: 104px;top: 146px;">√</h3>
            <h3 class="text-xl" style="left: 100px;top: 175px;">{{ dataFlow.idNumber }}</h3>
            <h3 class="text-xl" style="left: 120px;top: 243px;">{{ dataFlow.phone }}</h3>
            <h3 class="text-xl" style="left: 356px;top: 243px;">{{ dataFlow.staticPhone }}</h3>
            <h3 class="text-xl" style="left: 676px;top: 218px;">{{ dataFlow.mailNumber }}</h3>
            <h3 class="text-xl" style="left: 80px;top: 263px;">√</h3>
            <h3 class="text-xl" style="left: 110px;top: 195px;">{{ dataFlow.mailbox.slice(0, dataFlow.mailbox.indexOf('省')) }}</h3>
            <h3 class="text-xl" style="left: 200px;top: 195px;">{{ dataFlow.mailbox.slice(dataFlow.mailbox.indexOf('省') + 1, dataFlow.mailbox.indexOf('市'))   }}</h3>
            <h3 class="text-xl" style="left: 290px;top: 195px;">{{ dataFlow.mailbox.slice(dataFlow.mailbox.indexOf('市') + 1, dataFlow.mailbox.indexOf('村' || '区' || '县'))   }}</h3>
            <!-- <img :src="imgSrc" class="imgPop imgIndex min-w-full " :alt="imgSrcName" :title="imgSrcName"> -->
        </template>
        <template v-else-if="imgSrcId==13 || imgSrcId==442 || imgSrcId==23 || imgSrcId==431">
            <h3 class="text-xl" style="left: 96px;top: 82px;">姓名：&nbsp;&nbsp;{{ dataFlow.userName }}</h3>
            <h3 class="text-xl" style="left: 96px;top: 160px;">性别：&nbsp;&nbsp;{{ dataFlow.sex==1? '男': '女' }}</h3>
            <!-- <h3 class="text-xl" style="left: 270px;top: 115px;">汉</h3> -->
            <h3 class="text-xl" style="left: 96px;top: 237px;">生日：&nbsp;&nbsp;{{ dataFlow.birthday }}</h3>
            <!-- <h3 class="text-xl" style="left: 220px;top: 177px;">{{ dataFlow.birthday.split('-')[1] }}</h3>
            <h3 class="text-xl" style="left: 290px;top: 187px;">{{ dataFlow.birthday.split('-')[2] }}</h3> -->
            <h3 class="text-xl text-left" style="left: -200px;top: 282px;width: 100%;">
                <span style="background-color: rgb(223, 230,238); display: inline-block; height: 28px; border-radius: 5px; width: 60px;margin-left: -10px;text-align: right;">地址：</span>
                <span style="margin-left: 10px; display: inline-block;">{{ dataFlow.mailbox }}</span>
            </h3>
            <h3 class="text-xl" style="left: 96px;top: 356px;">NO.：&nbsp;&nbsp;{{ dataFlow.idNumber }}</h3>
            <!-- <img :src="imgSrc" class="imgPop imgIndex min-w-full dia-header" :alt="imgSrcName" :title="imgSrcName"> -->
        </template>
        <template v-else-if="imgSrcId==16 || imgSrcId==563" >
            <h3 class="text-4xl text-white" style="left: 300px;top: 35px;">No: {{ dataFlow.voucherNumber }}</h3>
            <h3 class="text-4xl text-white" style="left: 300px;top: 390px;">:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{ dataFlow.userName }}</h3>
        </template>
        <template v-else-if="imgSrcId==411" >
            <h3 class="text-xl" style="left: 630px;top: 10px;">00242986</h3>
            <h3 class="text-xl" style="left: 690px;top: 70px;">商业银行</h3>
            <h3 class="text-xl" style="left: 680px;top: 95px;">12802851701099</h3>
            <h3 class="text-xl" style="left: 300px;top: 95px;">{{ dataFlow.collectingCompany }}</h3>
            <h3 class="text-xl" style="left: 340px;top: 129px;">{{ transMoney(dataFlow.transMoney) }}</h3>
            <h3 class="text-xl" style="left: 667px;top: 135px;letter-spacing: 2px">{{ ('' + dataFlow.transMoney).padStart(8, 0).padEnd(10, 0) }}</h3>
            <h3 class="text-xl" style="left: 300px;top: 172px;">工资性支出</h3>
            <h3 class="text-xs" style="left: 350px;top: 78px;">{{ mapNumber(getNowYear(0)) }}</h3>
            <h3 class="text-xs" :style="{left: getNowYear(1)>10?'420px':'430px',top: '78px'}">{{ mapNumber(getNowYear(1)) }}</h3>
            <h3 class="text-xs" :style="{left: getNowYear(2)>10?'471px':'485px',top: '78px'}">{{ mapNumber(getNowYear(2)) }}</h3>
            <h3 class="text-xs" style="left: 76px;top: 189px;">{{ getNowYear(0) }}</h3>
            <h3 class="text-xs" style="left: 126px;top: 189px;">{{ getNowYear(1) }}</h3>
            <h3 class="text-xs" style="left: 163px;top: 189px;">{{ getNowYear(2) }}</h3>
        </template>
        
        <template v-else-if="imgSrcId==412" >
            <h3 class="text-xl" style="left: 630px;top: 10px;">00246862</h3>
            <h3 class="text-xs" style="left: 700px;top: 80px;">{{ dataFlow.collectingCompany }}</h3>
            <h3 class="text-xs" style="left: 305px;top: 103px;">六品居股份有限公司</h3>
            <h3 class="text-xs" style="left: 490px;top: 103px;">62270072009899</h3>
            <h3 class="text-xs" style="left: 700px;top: 103px;">12802851701099</h3>
            <h3 class="text-xl" style="left: 340px;top: 130px;">{{ transMoney(dataFlow.transMoney) }}</h3>
            <h3 class="text-xl" style="left: 682px;top: 140px;letter-spacing: 2px">{{ ('' + dataFlow.transMoney).padStart(8, 0).padEnd(10, 0) }}</h3>
            <h3 class="text-xs" :style="{ left: '355px',top: '80px' }">{{ mapNumber(getNowYear(0)) }}</h3>
            <h3 class="text-xs" :style="{left: getNowYear(1)>10?'430px':'445px',top: '80px'}">{{ mapNumber(getNowYear(1)) }}</h3>
            <h3 class="text-xs" :style="{left: getNowYear(2)>10?'482px':'497px',top: '80px'}">{{ mapNumber(getNowYear(2)) }}</h3>
            <h3 class="text-xs" style="left: 80px;top: 194px;">{{ getNowYear(0) }}</h3>
            <h3 class="text-xs" style="left: 128px;top: 194px;">{{ getNowYear(1) }}</h3>
            <h3 class="text-xs" style="left: 167px;top: 194px;">{{ getNowYear(2) }}</h3>
        </template>
        <template v-else-if="imgSrcId==434 || imgSrcId==435" >

            <h3 class="text-xl" style="left: 475px;top: 418px;">：913403005685450862</h3>
            <h3 class="text-xl" style="left: 220px;top: 480px;">：{{ dataFlow.collectingCompany }}</h3>
        </template>
        <template v-else-if="imgSrcId==409" >
            <h3 class="text-xs" style="left: 645px;top: 126px;">{{ getNowYear(0) }}</h3>
            <h3 class="text-xs" style="left: 700px;top: 126px;">{{ getNowYear(1) }}</h3>
            <h3 class="text-xs" style="left: 740px;top: 126px;">{{ getNowYear(2) }}</h3>
            <h3 class="text-xs" style="left: 300px;top: 169px;">备用金</h3>
            <h3 class="text-xs" style="left: 670px;top: 169px;">商业银行</h3>
            <h3 class="text-xs" style="left: 250px;top: 145px;">{{ dataFlow.collectingCompany }}</h3>
            <h3 class="text-xs" style="left: 640px;top: 145px;">12802851701099</h3>
            <h3 class="text-xl" style="left: 340px;top: 195px;">{{ transMoney(dataFlow.transMoney) }}</h3>
            <h3 class="text-lg" style="left: 607px;top: 205px;letter-spacing: 4.8px">{{ ('' + dataFlow.transMoney).padStart(9, 0).padEnd(11, 0) }}</h3>
        </template>
        <template v-else-if="imgSrcId==407" >
            <h3 class="text-lg" style="left: 200px;top: 95px;">{{ dataFlow.userName }}</h3>
            <h3 class="text-lg" style="left: 500px;top: 95px;">{{ dataFlow.voucherNumber }}</h3>
            <h3 class="text-lg" style="left: 170px;top: 137px;">{{ dataFlow.idNumber }}</h3>
            <h3 class="text-lg" style="left: 170px;top: 158px;">{{ dataFlow.phone }}</h3>
            <h3 class="text-lg" style="left: 450px;top: 158px;">{{ dataFlow.mailbox }}</h3>
        </template> 
        <template v-else-if="imgSrcId==406" >
            <h3 class="text-xl" style="left: 325px;top: 103px;">√</h3>
            <h3 class="text-lg" style="left: 160px;top: 175px;">{{ dataFlow.userName }}</h3>
            <h3 class="text-lg" style="left: 490px;top: 175px;">{{ dataFlow.idNumber }}</h3>
            <h3 class="text-md" style="left: 160px;top: 205px;">{{ dataFlow.phone }}</h3>
            <h3 class="text-md" style="left: 450px;top: 205px;">{{ dataFlow.mailbox }}</h3>
            <h3 class="text-md" style="left: 120px;top: 370px;">人民币</h3>
            <h3 class="text-md" style="left: 260px;top: 370px;">{{ dataFlow.voucherNumber }}</h3>
        </template>  
        <template v-else-if="imgSrcId==468" >
            <h3 class="text-xl" style="left: 325px;top: 103px;">√</h3>
            <h3 class="text-lg" style="left: 160px;top: 175px;">{{ dataFlow.userName }}</h3>
            <h3 class="text-lg" style="left: 490px;top: 175px;">{{ dataFlow.idNumber }}</h3>
            <h3 class="text-md" style="left: 160px;top: 205px;">{{ dataFlow.phone }}</h3>
            <h3 class="text-md" style="left: 450px;top: 205px;">{{ dataFlow.mailbox }}</h3>
            <h3 class="text-md" style="left: 120px;top: 370px;">人民币</h3>
            <h3 class="text-md" style="left: 260px;top: 370px;">{{ dataFlow.voucherNumber }}</h3>
            <h3 class="text-md" style="left: 700px;top: 370px;">{{ nowDate }}</h3>
            <h3 class="text-lg" style="left: 560px;top: 405px;">{{ dataFlow.userName }}</h3>
        </template>  
        <template v-else-if="imgSrcId==413" >
            <h3 class="text-lg" style="left: 690px;top: 21px;">{{ getNowYear(0) }}</h3>
            <h3 class="text-lg" style="left: 755px;top: 21px;">{{ getNowYear(1) }}</h3>
            <h3 class="text-lg" style="left: 280px;top: 75px;">{{ dataFlow.collectingCompany }}</h3>
            <h3 class="text-lg" style="left: 620px;top: 75px;">12802851701099</h3>
            <h3 class="text-lg" style="left: 620px;top: 75px;">12802851701099</h3>
            <h3 class="text-lg" style="left: 330px;top: 115px;">10</h3>
            <h3 class="text-lg" style="left: 540px;top: 111px;">00242986</h3>
            <h3 class="text-lg" style="left: 690px;top: 111px;">00242996</h3>
        </template>
        <template v-else-if="imgSrcId==426" >
            <h3 class="text-md" style="left: 180px;top: 205px;">{{ dataFlow.voucherNumber }}</h3>
            <h3 class="text-md" style="left: 450px;top: 205px;">{{ dataFlow.userName }}</h3>
            <h3 class="text-md" style="left: 180px;top: 235px;">6227007200580123</h3>
            <h3 class="text-md" style="left: 450px;top: 235px;">郭平安</h3>
            <h3 class="text-md" style="left: 116px;top: 306px;letter-spacing: 3.3px">{{ ('' + dataFlow.transMoney).padStart(8, 0).padEnd(10, 0) }}</h3>
        </template>
        <img :src="imgSrc" class="imgPop imgIndex min-w-full dia-header" :alt="imgSrcName" :title="imgSrcName" ref="showPage">
        <slot />
    </div>
    
</template>

<script>
import { mapGetters } from 'vuex'
import { getOperation } from '@/api/http';
import Sortable from 'sortablejs'

export default {
    props: {
        imgSrc: {
            type: String,
            require: true
        },
        imgSrcId: {
            require: true
        },
        imgSrcName: {
            require: true
        },
        showImg: {
            type: Boolean,
            default: false
        }
        // requireTalk: {
        //     type: String,
        //     default: ''
        // },
        // others: {
        //     type: Object,
        //     default: {
        //         left: '0px',
        //         top: '0px'
        //     }
        // }
    },
    data() {
        return {
            nowDate: ''
        }
        
    },
    created() {
        // dataFlow.transMoney 表示要从钱箱中取出多少钱
        this.nowDate = (() => {
            const date = new Date()
            var y = date.getFullYear();  
            var m = date.getMonth() + 1;  
            m = m < 10 ? '0' + m : m;  
            var d = date.getDate();  
            d = d < 10 ? ('0' + d) : d;  
            return y + '-' + m + '-' + d; 
        })()
    },
    watch: {
        showImg: {
            handler(newVal) {
                if(newVal) {
                    
                }
            },
            immediate: true
        }
    },
    methods: {
        closeIt() {
            this.$emit('update:showImg', false)
        }
    },
    
    computed: {
        ...mapGetters({
            dataFlow: 'system/dataFlow'
        }),
        getNowYear() {
            console.log(this.dataFlow)
            return (index) => {
                return this.nowDate.split('-')[index]
            }
        },
        transMoney() {
            return (str) => {
                var num = parseFloat(str);

                var strOutput = "",

                strUnit = '仟佰拾亿仟佰拾萬仟佰拾圆角分';

                num += "00";

                var intPos = num.indexOf('.'); 

                if (intPos >= 0){

                    num = num.substring(0, intPos) + num.substr(intPos + 1, 2);
                }

                strUnit = strUnit.substr(strUnit.length - num.length);

                for (var i=0; i < num.length; i++){

                    strOutput += '零壹贰叁肆伍陆柒捌玖'.substr(num.substr(i,1),1) + strUnit.substr(i,1);

                }
                return strOutput.replace(/零角零分$/, '').replace(/零[仟佰拾]/g, '零').replace(/零{2,}/g, '零').replace(/零([亿|萬])/g, '$1').replace(/零+圆/, '圆').replace(/亿零{0,3}萬/, '亿').replace(/^圆/, "零圆")
                
            }
        },
        mapNumber() {
            const myMap = new Map([
                ['0', '零'],
                ['1', '壹'],
                ['2', '贰'],
                ['3', '叁'],
                ['4', '肆'],
                ['5', '伍'],
                ['6', '陆'],
                ['7', '柒'],
                ['8', '捌'],
                ['9', '玖']
            ])
            return (str) => {
                let myStr = str + ''
                let strEnd = ''
                if(str.length === 4) {
                    for(const val of myStr) {
                        strEnd += myMap.get(val)
                    }
                }else {
                    if(str.charAt(0) == '0') {
                        strEnd = myMap.get(str.charAt(1))
                    }else {
                        strEnd = myMap.get(str.charAt(0)) + '拾'
                        if(str.charAt(1) != '0') {
                            strEnd += myMap.get(str.charAt(1))
                        }
                    }
                }
                
                return strEnd
            }
        }
    }
}
</script>

<style lang="scss" scoped>
    h3 {
        position: absolute;
        z-index: 9999;
        text-align: center;
        -webkit-font-smoothing: auto;
        -moz-osx-font-smoothing: auto;
        &:hover{
            cursor: text!important;
        }
    }
</style>