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,45 +211,68 @@ 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>
-        <template #footer="{ item }">
+        <NPagination
-          <NSpace>
+          v-model:page="pn"
-            <NButton v-if="!item.isReaded" size="small" @click="useQB.read(item, true)" type="success">
+          v-model:page-size="ps"
-              设为已读
+          :item-count="useQB.recieveQuestionsFiltered.length"
-            </NButton>
+          show-quick-jumper
-            <NButton v-else size="small" @click="useQB.read(item, false)" type="warning">重设为未读</NButton>
+          show-size-picker
-            <NButton size="small" @click="useQB.favorite(item, !item.isFavorite)">
+          :page-sizes="[20, 50, 100]"
-              <template #icon>
+        />
-                <NIcon :component="item.isFavorite ? Heart : HeartOutline" :color="item.isFavorite ? '#dd484f' : ''" />
+        <NDivider style="margin: 10px 0 10px 0" />
-              </template>
+        <QuestionItem :questions="pagedQuestions">
-              收藏
+          <template #footer="{ item }">
-            </NButton>
+            <NSpace>
-            <NPopconfirm @positive-click="useQB.DelQA(item.id)">
+              <NButton v-if="!item.isReaded" size="small" @click="useQB.read(item, true)" type="success">
-              <template #trigger>
+                设为已读
-                <NButton size="small" type="error">
+              </NButton>
-                  <template #icon>
+              <NButton v-else size="small" @click="useQB.read(item, false)" type="warning">重设为未读</NButton>
-                    <NIcon :component="Delete24Filled"/>
+              <NButton size="small" @click="useQB.favorite(item, !item.isFavorite)">
-                  </template>
+                <template #icon>
-                  删除
+                  <NIcon
-                </NButton>
+                    :component="item.isFavorite ? Heart : HeartOutline"
-              </template>
+                    :color="item.isFavorite ? '#dd484f' : ''"
-              确认删除这条提问？
+                  />
-            </NPopconfirm>
+                </template>
-            <!-- <NTooltip>
+                收藏
+              </NButton>
+              <NPopconfirm @positive-click="useQB.DelQA(item.id)">
+                <template #trigger>
+                  <NButton size="small" type="error">
+                    <template #icon>
+                      <NIcon :component="Delete24Filled" />
+                    </template>
+                    删除
+                  </NButton>
+                </template>
+                确认删除这条提问？
+              </NPopconfirm>
+              <!-- <NTooltip>
                         <template #trigger>
                           <NButton size="small"> 举报 </NButton>
                         </template>
                         暂时还没写
                       </NTooltip> -->
-            <NButton size="small" @click="useQB.blacklist(item)" type="warning"> 拉黑 </NButton>
+              <NButton size="small" @click="useQB.blacklist(item)" type="warning"> 拉黑 </NButton>
-          </NSpace>
+            </NSpace>
-        </template>
+          </template>
-        <template #header-extra="{ item }">
+          <template #header-extra="{ item }">
-          <NButton @click="onOpenModal(item)" :type="item.isReaded ? 'default' : 'info'" :secondary="item.isReaded">
+            <NButton @click="onOpenModal(item)" :type="item.isReaded ? 'default' : 'info'" :secondary="item.isReaded">
-            {{ item.answer ? '查看回复' : '回复' }}
+              {{ item.answer ? '查看回复' : '回复' }}
-          </NButton>
+            </NButton>
-        </template>
+          </template>
-      </QuestionItem>
+        </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 />
+      <NDivider v-if="(selectedItem?.length ?? 0) == 0" title-placement="left" />
-      <PointOrderCard :order="filteredOrders" :goods="goods" type="owner" />
+      <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>