发票抬头选择

src/components/CtTable/index.vue

@@ -13,18 +13,19 @@
       :headers="headers"
       :items="items"
       :item-key="itemKey"
-      :show-select="false"
+      :show-select="showSelect"
       :loading="loading"
+      :select-strategy="selectStrategy"
       color="primary"
       hover
       hide-default-footer
       loading-text="Loading... Please wait"
       fixed-header
-      return-object
       :disable-sort="disableSort"
       :items-per-page="itemsPerPage"
       :no-data-text="noDataText"
       :hide-default-header="hideDefaultHeader"
+      @update:modelValue="handleSelect"
     >
       <template v-for="name in itemSlot" v-slot:[`item.${name}`]="slotProps">
         <slot :name="name" v-bind="slotProps"></slot>
@@ -52,7 +53,7 @@
 defineOptions({ name: 'CtTable'})
 import { ref, computed, useSlots } from 'vue'
 
-const emit = defineEmits(['pageHandleChange', 'del', 'edit', 'add'])
+const emit = defineEmits(['pageHandleChange', 'del', 'edit', 'add', 'selected'])
 defineProps({
   elevation: {
     type: [Number, String],
@@ -116,6 +117,14 @@ defineProps({
   noDataText: {
     type: String,
     default: 'No data available'
+  },
+  showSelect: {
+    type: Boolean,
+    default: false
+  },
+  selectStrategy: {
+    type: String,
+    default: 'single'
   }
 })
 
@@ -147,6 +156,10 @@ const del = (item) => {
 const handleChangePage = (e) => {
   emit('pageHandleChange', e)
 }
+
+const handleSelect = (e) => {
+  emit('selected', e)
+}
 </script>
 
 <style scoped lang="scss">

src/views/recruit/enterprise/memberCenter/invoice/header.vue

@@ -35,12 +35,12 @@ const { t } = useI18n()
 const total = ref(0)
 const items = ref([])
 const headers = [
+  { title: '抬头类型', key: 'category', sortable: false, value: item => item.category === 0 ? '个人' : '企业' },
   { title: '发票抬头', key: 'title', sortable: false },
   { title: '税号', key: 'code', sortable: false },
   { title: '联系邮箱', key: 'email', sortable: false },
   { title: '联系电话', key: 'phone', sortable: false },
-  { title: '抬头类型', key: 'category', sortable: false, value: item => item.category === 0 ? '个人' : '企业' },
-  { title: '操作', key: 'actions', sortable: false },
+  { title: '操作', key: 'actions', sortable: false }
 ]
 
 const query = ref({

src/views/recruit/enterprise/memberCenter/tradingOrder/components/transaction.vue

@@ -12,26 +12,35 @@
     itemKey="id"
     @pageHandleChange="handleChangePage"
   >
+    <template #id="{ item }">
+      {{ !invoiceStatus(item.payOrderId) ? '待申请开票' : invoiceStatus(item.payOrderId, true)?.status === 0 ? '开票中，请耐心等待...' : '已开票' }}
+    </template>
     <template #action="{ item }">
       <v-btn v-if="!invoiceStatus(item.payOrderId)" color="primary" variant="text" @click="handleInvoice(item)">申请开票</v-btn>
       <v-btn v-if="invoiceStatus(item.payOrderId, true)?.status === 1" color="success" variant="text" @click="handleDownload(item)">下载发票</v-btn>
-      <span v-if="invoiceStatus(item.payOrderId, true)?.status === 0" class="color-warning">开票中，请耐心等待...</span>
     </template>
   </CtTable>
 
-  <CtDialog :visible="show" :widthType="2" titleClass="text-h6" title="选择要开票的抬头信息" @close="handleClose" @submit="handleSubmit">
-    <v-radio-group v-model="radio" color="primary">
-      <v-radio v-for="k in invoiceTitleList" :key="k.id" :value="k.id">
-        <template v-slot:label>
-          <div>{{ k.title }}-{{ k.code }}</div>
-        </template>
-      </v-radio>
-    </v-radio-group>
-    <div class="text-start ml-5 mt-5">
+  <CtDialog :visible="show" :widthType="1" titleClass="text-h6" title="选择要开票的抬头信息" @close="handleClose" @submit="handleSubmit">
+    <CtTable
+      :items="invoiceTitleList"
+      :headers="invoiceHeaders"
+      :loading="false"
+      :elevation="0"
+      :showSelect="true"
+      :isTools="false"
+      :showPage="true"
+      :total="invoiceTotal"
+      :page-info="invoiceQuery"
+      itemKey="id"
+      @pageHandleChange="handleChangeInvoicePage"
+      @selected="handleInvoiceSelected"
+    ></CtTable>
+    <!-- <div class="text-start ml-5 mt-5">
       开票金额：
       <span class="color-error font-weight-bold font-size-20">{{ (order.price / 10.0).toFixed(2) }}</span>
       元
-    </div>
+    </div> -->
   </CtDialog>
 </template>
 
@@ -51,6 +60,7 @@ const headers = [
   { title: '是否已支付', key: 'payStatus', sortable: false, value: item => item.payStatus ? '已支付' : '未支付' },
   { title: '支付订单编号', key: 'payOrderId', sortable: false },
   { title: '订单支付时间', key: 'payTime', value: item =>  timesTampChange(item.payTime), sortable: false },
+  { title: '开票状态', key: 'id', sortable: false },
   { title: '操作', key: 'action', sortable: false }
 ]
 
@@ -94,12 +104,30 @@ const handleChangePage = (e) => {
 
 // 获取发票抬头列表
 const invoiceTitleList = ref([])
+const invoiceTotal = ref(0)
+const invoiceQuery = ref({
+  pageNo: 1,
+  pageSize: 10
+})
+const invoiceHeaders = [
+  { title: '发票类型', key: 'category', sortable: false, value: item => item.category === 0 ? '个人' : '企业' },
+  { title: '发票抬头', key: 'title', sortable: false },
+  { title: '税号', key: 'code', sortable: false },
+  { title: '联系邮箱', key: 'email', sortable: false },
+  { title: '联系电话', key: 'phone', sortable: false }
+]
 const getInvoiceTitleList = async () => {
-  const { list } = await getInvoiceTitlePage({})
+  const { list, total } = await getInvoiceTitlePage(invoiceQuery.value)
   invoiceTitleList.value = list
+  invoiceTotal.value = total
 }
 getInvoiceTitleList()
 
+const handleChangeInvoicePage = (e) => {
+  invoiceQuery.value.pageNo = e
+  getInvoiceTitleList()
+}
+
 // 申请开票
 const show = ref(false)
 const radio = ref()
@@ -109,6 +137,11 @@ const handleInvoice = (item) => {
   show.value = true
 }
 
+const handleInvoiceSelected = (e) => {
+  if (e.length) radio.value = e[0]
+  else radio.value = null
+}
+
 const handleClose = () => {
   show.value = false
   order.value = {}