-
{{ receiptData.date || " 年 月 日".replace(/ /g, " ") }}
-
No. {{ receiptData.receiptNo || "0000000" }}
+
{{ receiptData.time || " 年 月 日".replace(/ /g, " ") }}
+
No. {{ receiptData.code || "0000000" }}
@@ -15,43 +15,43 @@
| 交款单位（或个人） |
- {{ receiptData.payer }}
+
|
| 款项内容 |
金额 |
-
- | {{}} |
- {{}} |
-
-
- | {{}} |
- {{}} |
-
-
- | {{}} |
- {{}} |
+
+ | {{ receiptDataItems[item - 1]?.name }} |
+ {{ receiptDataItems[item - 1]?.price }} |
|
- 合计人民币（大写）：
- {{}}
+
+ 合计人民币（大写）：
+
+
+
+
|
- ￥：
- {{ receiptData.amountInWords }}
+
+ ￥：
+
+
+
+
|
收款单位
（盖章） |
- |
+ {{ receiptData.payeeDept }} |
收款人
（签名） |
- {{}} |
+ {{ receiptData.payeeUser }} |
备注：
- {{}}
+ {{ receiptData.remark }}
|
@@ -64,8 +64,8 @@
关闭
- 保存
- 打印
+ 保存
+ 打印
@@ -75,80 +75,97 @@ import { ref, computed } from "vue"
import * as htmlToImage from "html-to-image"
import { toPng, toJpeg, toBlob, toPixelData, toSvg } from "html-to-image"
import { useMessage } from "/@/hooks/message"
+import request from "/@/utils/request"
+import { displayPrice } from "/@/utils/formatMoney"
interface ReceiptData {
- receiptNo?: string
- date?: string
- payer?: string
- content?: string
- amount?: string
- amountInWords?: string
- cashier?: string
+ itemJson: string
+ code: string
+ time: string
+ deptOrUser: string
+ totalPrice: string
+ payeeDept: string
+ payeeUser: string
+ remark: string
+ totalPriceCnStr: string
}
-const props = defineProps<{
- modelValue: boolean
- receiptData?: ReceiptData
-}>()
-
-const emit = defineEmits(["update:modelValue"])
-
-const visible = ref(props.modelValue)
-const receiptData = computed(
- () =>
- props.receiptData || {
- receiptNo: "",
- date: "",
- payer: "",
- content: "",
- amount: "",
- amountInWords: "",
- cashier: "",
- },
-)
+const visible = ref(false)
+const receiptData = ref
({
+ itemJson: "", // 款项json
+ code: "", // 发票代码(七位数)
+ time: "", // 发票日期
+ deptOrUser: "", // 交款单位或个人
+ totalPrice: "", // 合计人民币
+ totalPriceCnStr: "", // 合计人民币大写
+ payeeDept: "", // 收款单位
+ payeeUser: "", // 收款人
+ remark: "", // 备注
+})
+const loading = ref(false)
+const receiptDataItems = computed(() => {
+ try {
+ return JSON.parse(receiptData.value.itemJson)
+ } catch (error) {
+ return 3
+ }
+})
+const totalPrice = computed(() => {
+ return displayPrice(receiptData.value.totalPrice)
+})
const receiptRef = ref()
-watch(
- () => visible.value,
- (newVal) => {
- emit("update:modelValue", newVal)
- },
-)
-
-watch(
- () => props.modelValue,
- (newVal) => {
- visible.value = newVal
- },
-)
+const openDialog = (data: ReceiptData) => {
+ visible.value = true
+ receiptData.value = data
+}
const handleClose = () => {
visible.value = false
}
-const saveReceipt = () => {
+const saveReceipt = async () => {
if (receiptRef.value) {
- htmlToImage
- .toPng(receiptRef.value, {
+ try {
+ loading.value = true
+ const blob = await htmlToImage.toBlob(receiptRef.value, {
canvasWidth: 1920,
canvasHeight: 900,
backgroundColor: "#ffffff",
- // style: {},
})
- .then((dataUrl: string) => {
- console.log(dataUrl)
- const img = new Image()
- img.src = dataUrl
- })
- .catch((err) => {
- useMessage().error(err)
- })
- }
- // visible.value = false
+ if (blob) {
+ const formData = new FormData()
+ formData.append("file", blob, "receipt.png")
+
+ const { code, data } = await request({
+ url: "/admin/sys-file/upload",
+ method: "post",
+ headers: {
+ "Content-Type": "multipart/form-data",
+ },
+ data: formData,
+ })
+ if (code == 0) {
+ useMessage().success("保存成功")
+ console.log(data)
+ return data
+ }
+ useMessage().error(data.msg || "保存失败")
+ }
+ } catch (err) {
+ useMessage().error(err as string)
+ } finally {
+ loading.value = false
+ }
+ }
}
const handlePrint = () => {
window.print()
}
+
+defineExpose({
+ openDialog,
+})