新增订单开票

src/views/order/components/invoice.vue

@@ -0,0 +1,119 @@
+<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";
+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
+        const res = await syjprintqrcode({
+            id: ewmInfo.value.id
+        })
+        ElMessage.success('打印成功')
+        showEwmDialog.value = false
+        printEwmLoading.value = false
+    } 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>

src/views/order/index.vue

@@ -133,7 +133,7 @@
           " type="primary" @click="recharge = true">退单</el-button>
         </div>
         <div class="orderbox_right_buttonbutton">
-          <!-- <el-button style="flex: 1" @click="invoiveHandle">开发票</el-button> -->
+          <el-button style="flex: 1" :loading="invoiceLoading" @click="invoiveHandle">开发票</el-button>
           <el-button @click="print('normal')" style="flex: 1">重打小票</el-button>
           <el-button @click="print('label')" style="flex: 1">重打标签</el-button>
         </div>
@@ -274,6 +274,7 @@
     </el-dialog>
   </div>
   <takeFoodCode ref="takeFoodCodeRef" title="支付密码" type="password" placeholder="请输入支付密码" @success="passwordSuccess" />
+  <invoice ref="invoiceRef" @load-complete="invoiceLoading = false" />
 </template>
 
 <script setup>
@@ -294,10 +295,12 @@ import cashTable from "@/views/order/components/cashTable.vue";
 import { clearNoNum } from "@/utils";
 import md5 from "js-md5";
 import dateRange from './components/dateRange.vue'
-
 import { useGlobal } from "@/store/global.js";
-
 import takeFoodCode from "@/components/takeFoodCode.vue";
+import invoice from './components/invoice.vue'
+
+const invoiceLoading = ref(false)
+const invoiceRef = ref(null)
 const takeFoodCodeRef = ref(null);
 
 const global = useGlobal();
@@ -330,16 +333,10 @@ const handlerecharge = () => {
 const buttonloading = ref(); //loading
 
 
-// 获取开票人列表
-async function invoiveHandle() {
-  try {
-    const res = await issuedby({
-      store_id: store.userInfo.loginName,
-      is_pc: 1
-    })
-  } catch (error) {
-    console.log(error);
-  }
+// 显示开票人列表
+function invoiveHandle() {
+  invoiceLoading.value = true
+  invoiceRef.value.show(printLabelOrder.value)
 }
 
 // 确认选择时间