发票列表

src/views/order/invoice/index.vue

@@ -0,0 +1,128 @@
+<template>
+  <div class="app-container">
+    <el-form
+      v-show="showSearch"
+      :model="queryParams"
+      ref="queryFormRef"
+      :inline="true"
+      label-width="68px"
+    >
+      <el-form-item label="状态" prop="status">
+        <el-select v-model="queryParams.status">
+          <el-option label="已开票" :value="1"></el-option>
+          <el-option label="未开票" :value="0"></el-option>
+        </el-select>
+      </el-form-item>
+
+      <el-form-item>
+        <el-button
+          type="primary"
+          icon="search"
+          size="default"
+          @click="handleQuery"
+          >搜索</el-button
+        >
+        <el-button icon="refresh" size="default" @click="resetQuery"
+          >重置</el-button
+        >
+      </el-form-item>
+    </el-form>
+
+    <el-table v-loading="loading" :data="dataList">
+      <!-- <el-table-column label="订单号" align="center" prop="id" /> -->
+      <el-table-column label="订单号" align="center" prop="orderNumber" />
+      <el-table-column label="公司名称" align="center" prop="companyName" />
+      <el-table-column label="税号" align="center" prop="taxNumber" />
+      <el-table-column label="订单类型" align="center">
+        <template #default="{ row }">
+          {{ orderTypeDic[row.orderType] }}
+        </template>
+      </el-table-column>
+      <el-table-column label="金额" align="center" prop="amount" />
+      <el-table-column label="数量" align="center" prop="total" />
+      <el-table-column label="支付时间" align="center" prop="payTime" />
+      <el-table-column label="状态" align="center" prop="status">
+        <template #default="{ row }">
+          <el-tag v-if="row.status == 0" type="warning">未开票</el-tag>
+          <el-tag v-else-if="row.status == 1" type="success">已开票</el-tag>
+          <el-tag v-else>未知</el-tag>
+        </template>
+      </el-table-column>
+      <el-table-column label="操作" align="center" prop="status">
+        <template #default="{ row }">
+          <el-button
+            type="primary"
+            round
+            @click="confirmInvoice(row.id)"
+            size="small"
+            :disabled="row.status == 1"
+            >确认开票</el-button
+          >
+        </template>
+      </el-table-column>
+    </el-table>
+    <pagination
+      v-show="total > 0"
+      :total="total"
+      v-model:page="queryParams.pageNum"
+      v-model:limit="queryParams.pageSize"
+      @pagination="getList"
+    />
+  </div>
+</template>
+<script setup name="Invoice">
+import { reactive } from "vue";
+import { billList, updateDealLog, DealLogDetail } from "@/api/order";
+import { ElMessage } from "element-plus";
+
+const orderTypeDic = {
+  1: "创新币充值",
+  2: "活动报名",
+};
+const statusDic = {
+  0: "未开票",
+  1: "已开票",
+};
+const data = reactive({
+  queryParams: {
+    pageNum: 1,
+    pageSize: 10,
+  },
+});
+const { queryParams } = toRefs(data);
+
+const dataList = ref([]);
+const loading = ref(true);
+const queryFormRef = ref();
+const showSearch = ref(true);
+const total = ref(0);
+
+const getList = async () => {
+  loading.value = true;
+  const resp = await billList(queryParams.value);
+  dataList.value = resp.rows;
+  total.value = resp.total;
+  loading.value = false;
+};
+
+/** 搜索按钮操作 */
+const handleQuery = () => {
+  queryParams.value.pageNum = 1;
+  getList();
+};
+/** 重置按钮操作 */
+const resetQuery = () => {
+  if (queryFormRef.value) {
+    queryFormRef.value.resetFields();
+  }
+  handleQuery();
+};
+// 确认开票
+const confirmInvoice = async (id) => {
+  const { data } = await DealLogDetail(id);
+  await updateDealLog({ ...data, status: 1 });
+  ElMessage.success("确认开票成功");
+  getList();
+};
+getList();
+</script>