allow delete order, add question box pagination

src/components/manage/PointOrderCard.vue

@@ -16,6 +16,7 @@ import {
   NButton,
   NDataTable,
   NDivider,
+  NEmpty,
   NFlex,
   NIcon,
   NInput,
@@ -60,6 +61,8 @@ const orderAsOwner = computed(() => {
 })
 const selectedItem = ref<DataTableRowKey[]>()
 
+const emit = defineEmits(['selectedItem'])
+
 const showDetailModal = ref(false)
 const orderDetail = ref<ResponsePointOrder2UserModel | ResponsePointOrder2OwnerModel>()
 const currentGoods = computed(() => {
@@ -350,6 +353,11 @@ onMounted(() => {
     :data="order"
     :pagination="{ showSizePicker: true, pageSizes: [10, 25, 50, 100], defaultPageSize: 10, size: 'small' }"
     size="small"
+    @update:checked-row-keys="keys => emit('selectedItem', keys)"
+  >
+    <template #empty>
+      <NEmpty description="暂无订单" />
+    </template>
   >
   </NDataTable>
   <NModal

src/views/manage/QuestionBoxManageView.vue

@@ -25,6 +25,7 @@ import {
   NList,
   NListItem,
   NModal,
+  NPagination,
   NPopconfirm,
   NScrollbar,
   NSelect,
@@ -44,7 +45,7 @@ import QrcodeVue from 'qrcode.vue'
 import { computed, onMounted, ref } from 'vue'
 import { useRoute } from 'vue-router'
 import QuestionItem from '@/components/QuestionItems.vue'
-import { Delete24Filled, Delete24Regular, Eye24Filled, EyeOff24Filled, Info24Filled, } from '@vicons/fluent'
+import { Delete24Filled, Delete24Regular, Eye24Filled, EyeOff24Filled, Info24Filled } from '@vicons/fluent'
 import { useQuestionBox } from '@/store/useQuestionBox'
 
 const accountInfo = useAccount()
@@ -65,6 +66,12 @@ const showSettingCard = ref(true)
 const shareCardRef = ref()
 const shareUrl = computed(() => 'https://vtsuru.live/@' + accountInfo.value?.name + '/question-box')
 
+const ps = ref(20)
+const pn = ref(1)
+const pagedQuestions = computed(() =>
+  useQB.recieveQuestionsFiltered.slice((pn.value - 1) * ps.value, pn.value * ps.value),
+)
+
 let isRevieveGetted = false
 let isSendGetted = false
 async function onTabChange(value: string) {
@@ -186,7 +193,6 @@ onMounted(() => {
   <NSpin v-if="useQB.isLoading" show />
   <NTabs v-else animated @update:value="onTabChange" v-model:value="selectedTabItem">
     <NTabPane tab="我收到的" name="0" display-directive="show:lazy">
-      <NDivider vertical />
       <NFlex align="center">
         <NButton @click="$router.push({ name: 'question-display' })" type="primary"> 打开展示页 </NButton>
         <NSelect
@@ -205,7 +211,17 @@ onMounted(() => {
       </NFlex>
       <NDivider style="margin: 10px 0 10px 0" />
       <NEmpty v-if="useQB.recieveQuestionsFiltered.length == 0" description="暂无收到的提问" />
-      <QuestionItem v-else :questions="useQB.recieveQuestionsFiltered">
+      <div v-else>
+        <NPagination
+          v-model:page="pn"
+          v-model:page-size="ps"
+          :item-count="useQB.recieveQuestionsFiltered.length"
+          show-quick-jumper
+          show-size-picker
+          :page-sizes="[20, 50, 100]"
+        />
+        <NDivider style="margin: 10px 0 10px 0" />
+        <QuestionItem :questions="pagedQuestions">
           <template #footer="{ item }">
             <NSpace>
               <NButton v-if="!item.isReaded" size="small" @click="useQB.read(item, true)" type="success">
@@ -214,7 +230,10 @@ onMounted(() => {
               <NButton v-else size="small" @click="useQB.read(item, false)" type="warning">重设为未读</NButton>
               <NButton size="small" @click="useQB.favorite(item, !item.isFavorite)">
                 <template #icon>
-                <NIcon :component="item.isFavorite ? Heart : HeartOutline" :color="item.isFavorite ? '#dd484f' : ''" />
+                  <NIcon
+                    :component="item.isFavorite ? Heart : HeartOutline"
+                    :color="item.isFavorite ? '#dd484f' : ''"
+                  />
                 </template>
                 收藏
               </NButton>
@@ -244,6 +263,16 @@ onMounted(() => {
             </NButton>
           </template>
         </QuestionItem>
+        <NDivider style="margin: 10px 0 10px 0" />
+        <NPagination
+          v-model:page="pn"
+          v-model:page-size="ps"
+          :item-count="useQB.recieveQuestionsFiltered.length"
+          show-quick-jumper
+          show-size-picker
+          :page-sizes="[20, 50, 100]"
+        />
+      </div>
     </NTabPane>
     <NTabPane ref="parentRef" tab="我发送的" name="1" display-directive="show:lazy">
       <NEmpty v-if="useQB.sendQuestions.length == 0" description="暂无发送的提问" />
@@ -362,6 +391,7 @@ onMounted(() => {
       </NSpin>
     </NTabPane>
   </NTabs>
+  <NDivider />
   <NModal preset="card" v-model:show="replyModalVisiable" style="max-width: 90vw; width: 500px">
     <template #header> 回复 </template>
     <NSpace vertical>

src/views/manage/point/PointOrderManage.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { useAccount } from '@/api/account'
 import { GoodsTypes, PointOrderStatus, ResponsePointGoodModel, ResponsePointOrder2OwnerModel } from '@/api/api-models'
-import { QueryGetAPI } from '@/api/query'
+import { QueryGetAPI, QueryPostAPI } from '@/api/query'
 import PointOrderCard from '@/components/manage/PointOrderCard.vue'
 import { POINT_API_URL } from '@/data/constants'
 import { objectsToCSV } from '@/Utils'
@@ -9,7 +9,19 @@ import { useStorage } from '@vueuse/core'
 import { format } from 'date-fns'
 import { saveAs } from 'file-saver'
 import { List } from 'linqts'
-import { NButton, NCard, NCheckbox, NDivider, NEmpty, NFlex, NSelect, NSpin, useMessage } from 'naive-ui'
+import {
+  DataTableRowKey,
+  NButton,
+  NCard,
+  NCheckbox,
+  NDivider,
+  NEmpty,
+  NFlex,
+  NPopconfirm,
+  NSelect,
+  NSpin,
+  useMessage,
+} from 'naive-ui'
 import { computed, onMounted, ref } from 'vue'
 
 type OrderFilterSettings = {
@@ -41,6 +53,7 @@ const filteredOrders = computed(() => {
   })
 })
 const isLoading = ref(false)
+const selectedItem = ref<DataTableRowKey[]>()
 
 async function getOrders() {
   try {
@@ -59,6 +72,21 @@ async function getOrders() {
   }
   return []
 }
+async function deleteOrder() {
+  try {
+    const data = await QueryPostAPI(POINT_API_URL + 'delete-orders', selectedItem.value)
+    if (data.code == 200) {
+      message.success('删除成功')
+      orders.value = orders.value.filter((o) => !selectedItem.value?.includes(o.id))
+      selectedItem.value = undefined
+    } else {
+      message.error('删除失败: ' + data.message)
+    }
+  } catch (err) {
+    message.error('删除失败: ' + err)
+    console.log(err)
+  }
+}
 const statusText = {
   [PointOrderStatus.Completed]: '已完成',
   [PointOrderStatus.Pending]: '等待发货',
@@ -161,8 +189,16 @@ onMounted(async () => {
           <NCheckbox v-model:checked="filterSettings.onlyRequireShippingInfo" label="仅包含未填写快递单号的订单" />
         </NFlex>
       </NCard>
-      <NDivider />
-      <PointOrderCard :order="filteredOrders" :goods="goods" type="owner" />
+      <NDivider v-if="(selectedItem?.length ?? 0) == 0" title-placement="left" />
+      <NDivider v-else title-placement="left">
+        <NPopconfirm @positive-click="deleteOrder">
+          <template #trigger>
+            <NButton size="tiny" type="error"> 删除选中的订单 | {{ selectedItem?.length }} </NButton>
+          </template>
+          确定删除吗?
+        </NPopconfirm>
+      </NDivider>
+      <PointOrderCard @selected-item="items => selectedItem = items" :order="filteredOrders" :goods="goods" type="owner" />
     </template>
   </NSpin>
 </template>