feat:选择发票组件

src/api/wallet/wallet-recharge-invoice.ts

@@ -1,5 +1,17 @@
 import request from "/@/utils/request"
 
+/**
+ * 根据申请id获取发票详情
+ * @param id 申请id
+ */
+export function invoiceSelect(query: any) {
+	return request({
+		url: "/wallet/walletRechargeInvoice/select",
+		method: "get",
+		params: query,
+	})
+}
+
 /**
  * 根据申请id获取发票详情
  * @param id 申请id

src/components/Select/SelectWalletInvoice.vue

@@ -0,0 +1,112 @@
+<template>
+    <el-select style="width: 100%" v-model="state.selectId" :placeholder="props.placeholder"
+        :clearable="props.clearable" remote-show-suffix filterable remote :disabled="props.disabled"
+        :remote-method="remoteSearch" :loading="state.loading" @visible-change="(e: boolean) => e && getOptions()"
+        @change="change">
+        <el-option v-for="v in state.options" :key="v.id"
+            :label="`向${v.payeeDept}汇款${displayPrice(v.totalPrice)}用于充值-创建于${v.createTime}`" :value="v.id">
+            <div class="flex items-center">
+                向
+                <span class="color-danger">{{ v.payeeDept }}</span>
+                汇款
+                <span class="color-danger">{{ displayPrice(v.totalPrice) }}</span>
+                用于充值
+                <span>-创建于{{ v.createTime }}</span>
+            </div>
+        </el-option>
+    </el-select>
+</template>
+
+<script setup lang="ts" name="select-wallet-invoice">
+import { reactive } from "vue"
+import { useDict } from "/@/hooks/dict"
+import { displayPrice } from "/@/utils/formatMoney"
+
+import * as invoiceManager from "/@/api/wallet/wallet-recharge-invoice"
+
+const emit = defineEmits(["change"])
+
+const selectId = defineModel()
+
+const props = withDefaults(
+    defineProps<{
+        placeholder?: string
+        disabled?: boolean
+        clearable?: boolean
+        autoFirst?: boolean
+        apiParams?: any
+    }>(),
+    {
+        placeholder: "请选择",
+        disabled: false,
+        clearable: true,
+        autoFirst: false,
+        apiParams: {
+            status: "1"
+        },
+    },
+)
+
+const queryForm = reactive<any>({
+    name: "",
+    current: 1,
+    size: 10,
+})
+
+const state = reactive<any>({
+    loading: true,
+    selectId: selectId,
+    options: [],
+    hardType: [],
+})
+
+watch(
+    selectId,
+    (newVal, oldValue) => {
+        if (newVal == oldValue) return
+        state.selectId = newVal
+        getOptions()
+    },
+    { immediate: true },
+)
+
+async function getOptions() {
+    try {
+        state.loading = true
+        const _pa = {
+            ...queryForm,
+            ...props.apiParams,
+        }
+        const { data } = await invoiceManager.invoiceSelect(_pa)
+        state.options = data.records ?? []
+        if (props.autoFirst && state.options.length != 0) {
+            state.selectId = state.options[0].id
+            emit("change", state.selectId)
+        }
+        const { hard_type } = useDict("hard_type")
+        state.hardType = hard_type
+    } finally {
+        setTimeout(() => (state.loading = false), 500)
+    }
+}
+
+function remoteSearch(params: string) {
+    if (params != queryForm.name) {
+        queryForm.name = params
+        getOptions()
+    }
+}
+
+function clear() {
+    state.selectId = null
+    getOptions()
+}
+
+function change() {
+    emit("change", selectId)
+}
+
+onMounted(() => {
+    props.autoFirst && getOptions()
+})
+</script>

src/components/index.ts

@@ -35,6 +35,7 @@ import SelectRole from "/@/components/Select/SelectRole.vue"
 import SelectCabinet from "/@/components/Select/SelectCabinet.vue"
 import SelectMchCatory from "/@/components/Select/SelectMchCatory.vue"
 import SelectCanteenSupplier from "/@/components/Select/SelectCanteenSupplier.vue"
+import SelectWalletInvoice from "/@/components/Select/SelectWalletInvoice.vue"
 
 // 第三方组件
 import ElementPlus from "element-plus"
@@ -91,6 +92,7 @@ export default {
 		app.component("SelectRole", SelectRole)
 		app.component("SelectCabinet", SelectCabinet)
 		app.component("SelectCanteenSupplier", SelectCanteenSupplier)
+		app.component("SelectWalletInvoice", SelectWalletInvoice)
 
 		// 导入全部的elmenet-plus的图标
 		for (const [key, component] of Object.entries(ElementPlusIconsVue)) {

src/views/wallet/wallet-recharge-invoice/index.vue

@@ -1,6 +1,25 @@
 <template>
   <div class="layout-padding">
     <div class="layout-padding-auto layout-padding-view">
+      <el-form v-show="showSearch" ref="queryRef" :inline="true" :model="state.queryForm" @keyup.enter="getDataList">
+        <el-row>
+          <el-form-item style="width: 300px" label="申请用户" prop="userIds">
+            <select-user v-model="state.queryForm.userIds" placeholder="申请用户" />
+          </el-form-item>
+          <el-form-item style="width: 300px" label="发票状态" prop="userIds">
+            <dict-select v-model="state.queryForm.status" dict-code="recharge_invoice_status" />
+          </el-form-item>
+          <el-form-item style="width: 450px" label="创建时间" prop="createTimeList">
+            <el-date-picker v-model="state.queryForm.createTimeList" value-format="YYYY-MM-DD HH:mm:ss"
+              type="datetimerange" />
+          </el-form-item>
+          <el-form-item>
+            <el-button icon="Search" type="primary" @click="getDataList">{{ $t("common.queryBtn")
+              }}</el-button>
+            <el-button icon="Refresh" @click="resetQuery">{{ $t("common.resetBtn") }}</el-button>
+          </el-form-item>
+        </el-row>
+      </el-form>
       <el-row>
         <div class="mb8" style="width: 100%">
           <el-button icon="folder-add" type="primary" class="ml10" @click="uploadExcelRef.show()"