cashier_desktop/src/views/order/components/invoice.vue

134 lines
3.7 KiB
Vue

<template>
<el-dialog title="选择开票人" width="60%" v-model="dialogVisible">
<el-table :data="tableData.list" border>
<el-table-column label="开票人" prop="name"></el-table-column>
<el-table-column label="操作" width="140">
<template v-slot="scope">
<el-button type="primary" icon="" :loading="scope.row.loading"
@click="selectHandle(scope.row)">选择</el-button>
</template>
</el-table-column>
</el-table>
</el-dialog>
<el-dialog title="扫描二维码开票" width="330px" v-model="showEwmDialog">
<canvas class="ewm" ref="canvasRef"></canvas>
<div class="footer">
<el-button type="primary" style="width: 100%" :loading="printEwmLoading"
@click="printEwmHandle">打印二维码</el-button>
</div>
</el-dialog>
</template>
<script setup>
import QRCode from 'qrcode'
import { ElMessage } from 'element-plus'
import { reactive, ref } from 'vue'
import { issuedby, carsubinvoicing, syjprintqrcode } from '@/api/invoice.js'
import { useUser } from "@/store/user.js";
import { usePrint } from "@/store/print.js";
const printStore = usePrint();
const store = useUser();
const emits = defineEmits(['loadComplete', 'success'])
const dialogVisible = ref(false)
const showEwmDialog = ref(false)
const canvasRef = ref(null)
const ewmInfo = ref({})
const printEwmLoading = ref(false)
const tableData = reactive({
list: []
})
const orderInfo = ref({})
// 打印二维码
async function printEwmHandle() {
try {
printEwmLoading.value = true
if (printStore.deviceNoteList.length) {
printStore.printInvoice({
url: ewmInfo.value.wechat_url
})
ElMessage.success('打印成功')
showEwmDialog.value = false
setTimeout(() => {
printEwmLoading.value = false
}, 1000)
} else {
const res = await syjprintqrcode({
id: ewmInfo.value.id
})
ElMessage.success('打印成功')
showEwmDialog.value = false
setTimeout(() => {
printEwmLoading.value = false
}, 1000)
}
} catch (error) {
console.log(error);
printEwmLoading.value = false
}
}
// 选择开票
async function selectHandle(row) {
try {
row.loading = true
const res = await carsubinvoicing({
store_id: store.userInfo.loginName,
orderNo: orderInfo.value.id,
dlzh: row.id
})
console.log(res);
row.loading = false
ewmInfo.value = res
dialogVisible.value = false
showEwmDialog.value = true
setTimeout(() => {
QRCode.toCanvas(canvasRef.value, ewmInfo.value.wechat_url, function (error) {
if (error) console.error(error)
// console.log('success!');
})
}, 10)
} catch (error) {
row.loading = false
console.log(error);
}
}
// 获取开票人列表
async function getTableData() {
try {
const res = await issuedby({
store_id: store.userInfo.loginName
})
emits('loadComplete', false)
dialogVisible.value = true
tableData.list = res.map(item => {
item.loading = false
return item
})
} catch (error) {
console.log(error);
emits('loadComplete', false)
}
}
function show(order) {
console.log(order);
orderInfo.value = order
getTableData()
}
defineExpose({
show
})
</script>
<style scoped lang="scss">
.ewm {
width: 300px !important;
height: 300px !important;
}
</style>