|
|
|
@ -4,32 +4,55 @@ |
|
|
|
|
<img class="absolute cursor-pointer hover:bg-red-700" src="@/assets/svg/close.svg" alt="" @click="closeIt" style="right: 50px; top: 30px;" /> |
|
|
|
|
|
|
|
|
|
<template v-if="imgSrcId==14"> |
|
|
|
|
<h3 class="subpixel-antialiased text-2xl text-center absolute" style="left: 95px;top: 110px;">{{ dataFlow.userName }}</h3> |
|
|
|
|
<h3 class="subpixel-antialiased text-2xl text-center absolute" v-if="dataFlow.sex==1" style="left: 446px;top: 110px;">√</h3> |
|
|
|
|
<h3 class="subpixel-antialiased text-2xl text-center absolute" v-else style="left: 474px;top: 110px;">√</h3> |
|
|
|
|
<h3 class="subpixel-antialiased text-2xl text-center absolute" style="left: 480px;top: 110px;">{{ dataFlow.birthday.split('-').join(' ') }}</h3> |
|
|
|
|
<h3 class="subpixel-antialiased text-2xl text-center absolute" style="left: 96px;top: 135px;">√</h3> |
|
|
|
|
<h3 class="subpixel-antialiased text-2xl text-center absolute" style="left: 96px;top: 135px;">√</h3> |
|
|
|
|
<h3 class="subpixel-antialiased text-xl text-center absolute" style="left: 96px;top: 165px;">{{ dataFlow.idNumber }}</h3> |
|
|
|
|
<h3 class="subpixel-antialiased text-xl text-center absolute" style="left: 340px;top: 230px;">{{ dataFlow.phone }}</h3> |
|
|
|
|
<h3 class="subpixel-antialiased text-2xl text-center absolute" style="left: 76px;top: 250px;">√</h3> |
|
|
|
|
<h3 class="subpixel-antialiased text-2xl text-center absolute" style="left: 169px;top: 432px;">√</h3> |
|
|
|
|
<h3 class="text-2xl" style="left: 95px;top: 110px;">{{ dataFlow.userName }}</h3> |
|
|
|
|
<h3 class="text-2xl" v-if="dataFlow.sex==1" style="left: 446px;top: 110px;">√</h3> |
|
|
|
|
<h3 class="text-2xl" v-else style="left: 474px;top: 110px;">√</h3> |
|
|
|
|
<h3 class="text-2xl" style="left: 480px;top: 110px;">{{ dataFlow.birthday.split('-').join(' ') }}</h3> |
|
|
|
|
<h3 class="text-2xl" style="left: 96px;top: 135px;">√</h3> |
|
|
|
|
<h3 class="text-2xl" style="left: 96px;top: 135px;">√</h3> |
|
|
|
|
<h3 class="text-xl" style="left: 96px;top: 165px;">{{ dataFlow.idNumber }}</h3> |
|
|
|
|
<h3 class="text-xl" style="left: 340px;top: 230px;">{{ dataFlow.phone }}</h3> |
|
|
|
|
<h3 class="text-2xl" style="left: 76px;top: 250px;">√</h3> |
|
|
|
|
<h3 class="text-2xl" style="left: 169px;top: 432px;">√</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="subpixel-antialiased text-2xl text-center absolute" style="left: 100px;top: 82px;">姓名:{{ dataFlow.userName }}</h3> |
|
|
|
|
<h3 class="subpixel-antialiased text-2xl text-center absolute" style="left: 100px;top: 160px;">性别:{{ dataFlow.sex==1? '男': '女' }}</h3> |
|
|
|
|
<!-- <h3 class="subpixel-antialiased text-2xl text-center absolute" style="left: 270px;top: 115px;">汉</h3> --> |
|
|
|
|
<h3 class="subpixel-antialiased text-2xl text-center absolute" style="left: 98px;top: 232px;">生日:{{ dataFlow.birthday }}</h3> |
|
|
|
|
<!-- <h3 class="subpixel-antialiased text-2xl text-center absolute" style="left: 220px;top: 177px;">{{ dataFlow.birthday.split('-')[1] }}</h3> |
|
|
|
|
<h3 class="subpixel-antialiased text-2xl text-center absolute" style="left: 290px;top: 187px;">{{ dataFlow.birthday.split('-')[2] }}</h3> --> |
|
|
|
|
<h3 class="subpixel-antialiased text-xl text-center absolute" style="left: 105px;top: 282px;">地址:{{ dataFlow.mailbox }}</h3> |
|
|
|
|
<h3 class="subpixel-antialiased text-2xl text-center absolute" style="left: 99px;top: 353px;">NO.:{{ dataFlow.idNumber }}</h3> |
|
|
|
|
<h3 class="text-xl" style="left: 96px;top: 82px;">姓名: {{ dataFlow.userName }}</h3> |
|
|
|
|
<h3 class="text-xl" style="left: 96px;top: 160px;">性别: {{ dataFlow.sex==1? '男': '女' }}</h3> |
|
|
|
|
<!-- <h3 class="text-xl" style="left: 270px;top: 115px;">汉</h3> --> |
|
|
|
|
<h3 class="text-xl" style="left: 96px;top: 237px;">生日: {{ 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.: {{ dataFlow.idNumber }}</h3> |
|
|
|
|
<!-- <img :src="imgSrc" class="imgPop imgIndex min-w-full dia-header" :alt="imgSrcName" :title="imgSrcName"> --> |
|
|
|
|
</template> |
|
|
|
|
<template v-else-if="imgSrcId==412"> |
|
|
|
|
<h3 class="subpixel-antialiased text-xs text-center absolute" style="left: 820px;top: 123px;">12802851701099</h3> |
|
|
|
|
<h3 class="subpixel-antialiased text-xs text-center absolute" style="left: 357px;top: 123px;">袋鼠互联网科技有限公司</h3> |
|
|
|
|
<h3 class="text-xs" style="left: 820px;top: 123px;">12802851701099</h3> |
|
|
|
|
<h3 class="text-xs" style="left: 357px;top: 123px;">袋鼠互联网科技有限公司</h3> |
|
|
|
|
</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;">: {{ 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;">袋鼠互联网科技有限公司</h3> |
|
|
|
|
<h3 class="text-xl" style="left: 340px;top: 129px;">{{ transMoney(dataFlow.getMoney) }}</h3> |
|
|
|
|
<h3 class="text-xl" style="left: 667px;top: 135px;letter-spacing: 2px">{{ ('' + dataFlow.getMoney).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: 420px;top: 78px;">{{ mapNumber(getNowYear(1)) }}</h3> |
|
|
|
|
<h3 class="text-xs" style="left: 480px;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> |
|
|
|
|
<img :src="imgSrc" class="imgPop imgIndex min-w-full dia-header" :alt="imgSrcName" :title="imgSrcName" ref="showPage"> |
|
|
|
|
<slot /> |
|
|
|
@ -70,16 +93,23 @@ export default { |
|
|
|
|
// } |
|
|
|
|
// } |
|
|
|
|
}, |
|
|
|
|
mounted() { |
|
|
|
|
// new Sortable(this.$refs.showPage, { |
|
|
|
|
// animation: 150, |
|
|
|
|
// group: { |
|
|
|
|
// name:'shared', |
|
|
|
|
// pull:'clone',// 是否可以被移出或克隆 |
|
|
|
|
// put:false// 禁止拖入 |
|
|
|
|
// }, |
|
|
|
|
// }) |
|
|
|
|
console.log(this.$refs.showPage) |
|
|
|
|
data() { |
|
|
|
|
return { |
|
|
|
|
nowDate: '' |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
}, |
|
|
|
|
created() { |
|
|
|
|
// dataFlow.getMoney 表示要从钱箱中取出多少钱 |
|
|
|
|
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: { |
|
|
|
@ -100,14 +130,82 @@ export default { |
|
|
|
|
computed: { |
|
|
|
|
...mapGetters({ |
|
|
|
|
dataFlow: 'system/dataFlow' |
|
|
|
|
}) |
|
|
|
|
}), |
|
|
|
|
getNowYear() { |
|
|
|
|
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.indexOf('0' === 0)) { |
|
|
|
|
strEnd = myMap.get(str.charAt(1)) |
|
|
|
|
}else { |
|
|
|
|
strEnd = myMap.get(str.charAt(0)) + '拾' + |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
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; |
|
|
|
|
} |
|
|
|
|