update point views

src/components/manage/PointOrderCard.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import {
+  GoodsStatus,
   GoodsTypes,
   PointOrderStatus,
   ResponsePointGoodModel,
@@ -8,6 +9,8 @@ import {
 } from '@/api/api-models'
 import {
   DataTableColumns,
+  DataTableRowKey,
+  NAutoComplete,
   NButton,
   NCard,
   NDataTable,
@@ -15,17 +18,25 @@ import {
   NFlex,
   NIcon,
   NInput,
+  NInputGroup,
+  NInputGroupLabel,
   NModal,
   NScrollbar,
+  NStep,
+  NSteps,
   NTag,
   NText,
   NTime,
   NTooltip,
+  useDialog,
+  useMessage,
 } from 'naive-ui'
-import { computed, h, ref, watch } from 'vue'
+import { computed, h, onMounted, ref, watch } from 'vue'
 import AddressDisplay from './AddressDisplay.vue'
 import PointGoodsItem from './PointGoodsItem.vue'
 import { Info24Filled } from '@vicons/fluent'
+import { QueryPostAPI } from '@/api/query'
+import { POINT_API_URL } from '@/data/constants'
 
 const props = defineProps<{
   order: ResponsePointOrder2UserModel[] | ResponsePointOrder2OwnerModel[]
@@ -33,6 +44,9 @@ const props = defineProps<{
   goods?: ResponsePointGoodModel[]
   loading?: boolean
 }>()
+const message = useMessage()
+const dialog = useDialog()
+
 const isLoading = ref(false)
 watch(
   () => props.loading,
@@ -46,6 +60,7 @@ const orderAsUser = computed(() => {
 const orderAsOwner = computed(() => {
   return props.order as ResponsePointOrder2OwnerModel[]
 })
+const selectedItem = ref<DataTableRowKey[]>()
 
 const showDetailModal = ref(false)
 const orderDetail = ref<ResponsePointOrder2UserModel | ResponsePointOrder2OwnerModel>()
@@ -55,8 +70,32 @@ const currentGoods = computed(() => {
   //@ts-ignore
   else return props.goods.find((g) => g.id == orderDetail.value.goodsId)
 })
+const expressOptions = computed(() => {
+  if (!orderAsOwner.value) return []
+  return orderAsOwner.value.map((o) => ({
+    label: o.expressCompany,
+    value: o.expressCompany,
+  }))
+})
 
 const orderColumn: DataTableColumns<ResponsePointOrder2UserModel | ResponsePointOrder2OwnerModel> = [
+  {
+    type: 'selection',
+
+    disabled: () => props.type == 'user',
+    options: [
+      'all',
+      'none',
+      {
+        label: '选中未发货的',
+        key: 'f2',
+        onSelect: (pageData) => {
+          selectedItem.value = pageData.filter((row) => row.status == PointOrderStatus.Pending).map((row) => row.id)
+          console.log(selectedItem.value)
+        },
+      },
+    ],
+  },
   {
     title: '订单号',
     key: 'id',
@@ -72,17 +111,36 @@ const orderColumn: DataTableColumns<ResponsePointOrder2UserModel | ResponsePoint
   {
     title: '使用积分',
     key: 'point',
+    sorter: 'default',
   },
   {
     title: '订单状态',
     key: 'status',
-    sorter: 'default',
+    filter: (filterOptionValue: unknown, row: ResponsePointOrder2UserModel | ResponsePointOrder2OwnerModel) => {
+      return row.status == filterOptionValue
+    },
+    filterOptions: [
+      {
+        label: '等待发货',
+        value: PointOrderStatus.Pending,
+      },
+      {
+        label: '已发货',
+        value: PointOrderStatus.Shipped,
+      },
+      {
+        label: '已完成',
+        value: PointOrderStatus.Completed,
+      },
+    ],
     render: (row: ResponsePointOrder2UserModel | ResponsePointOrder2OwnerModel) => {
       switch (row.status) {
         case PointOrderStatus.Pending:
           return h(NTag, { size: 'small' }, () => '等待发货')
         case PointOrderStatus.Shipped:
-          return h(NTag, { size: 'small', type: 'info' }, () => '已发货')
+          return h(NTag, { size: 'small', type: row.expressCompany ? 'info' : 'warning', bordered: false }, () =>
+            row.expressCompany ? '已发货 | 已填写单号' : '已发货 | 未填写单号',
+          )
         case PointOrderStatus.Completed:
           return h(NTag, { size: 'small', type: 'success' }, () => '已完成')
       }
@@ -114,10 +172,45 @@ const orderColumn: DataTableColumns<ResponsePointOrder2UserModel | ResponsePoint
     title: '地址',
     key: 'address',
     render: (row: ResponsePointOrder2UserModel | ResponsePointOrder2OwnerModel) => {
+      const collectUrl =
+        row.instanceOf == 'user' ? row.goods.collectUrl : props.goods?.find((g) => g.id == row.goodsId)?.collectUrl
       if (row.type == GoodsTypes.Physical) {
-        return h(AddressDisplay, { address: row.address })
+        return collectUrl
+          ? h(NButton, { tag: 'a', href: collectUrl, target: '_blank', text: true, type: 'info' }, () =>
+              h(NText, { italic: true }, () => '通过站外链接收集'),
+            )
+          : h(AddressDisplay, { address: row.address })
       } else {
-        return h(NText, { depth: 3 }, () => '无需发货')
+        return h(NText, { depth: 3, italic: true }, () => '无需发货')
+      }
+    },
+  },
+  {
+    title: '快递信息',
+    key: 'express',
+    render: (row: ResponsePointOrder2UserModel | ResponsePointOrder2OwnerModel) => {
+      if (row.type == GoodsTypes.Physical) {
+        return row.trackingNumber
+          ? h(
+              NFlex,
+              {
+                depth: 3,
+              },
+              () => [
+                h(
+                  NTag,
+                  {
+                    size: 'tiny',
+                    bordered: false,
+                  },
+                  () => row.expressCompany,
+                ),
+                h(NText, { depth: 3 }, () => row.trackingNumber),
+              ],
+            )
+          : h(NText, { depth: 3, italic: true }, () => '尚未发货')
+      } else {
+        return h(NText, { depth: 3, italic: true }, () => '无需发货')
       }
     },
   },
@@ -140,10 +233,73 @@ const orderColumn: DataTableColumns<ResponsePointOrder2UserModel | ResponsePoint
     },
   },
 ]
+function onChangeStatus(id: number, status: PointOrderStatus) {
+  dialog.info({
+    title: '提示',
+    content: '确认修改订单状态?',
+    positiveText: '确认',
+    negativeText: '取消',
+    onPositiveClick: () => {
+      updateStatus([id], status)
+    },
+  })
+}
+async function updateStatus(id: number[], status: PointOrderStatus) {
+  try {
+    const data = await QueryPostAPI(POINT_API_URL + 'update-orders-status', {
+      ids: id,
+      status,
+    })
+    if (data.code == 200) {
+      message.success('操作成功')
+      props.order?.forEach((row) => {
+        if (id.includes(row.id)) {
+          row.status = status
+        }
+      })
+    } else {
+      message.error('操作失败: ' + data.message)
+    }
+  } catch (err) {
+    message.error('操作失败: ' + err)
+    console.log(err)
+  }
+}
+async function updateExpress(item: ResponsePointOrder2OwnerModel) {
+  if (!item.trackingNumber || !item.expressCompany) {
+    message.error('请填写快递单号和快递公司')
+    return
+  }
+  try {
+    isLoading.value = true
+    const data = await QueryPostAPI(POINT_API_URL + 'update-order-express', {
+      id: item.id,
+      trackingNumber: item.trackingNumber,
+      expressCompany: item.expressCompany,
+    })
+    if (data.code == 200) {
+      message.success('操作成功')
+    } else {
+      message.error('操作失败: ' + data.message)
+    }
+  } catch (err) {
+    message.error('操作失败: ' + err)
+    console.log(err)
+  }
+  isLoading.value = false
+}
+
+onMounted(() => {
+  props.order?.forEach((row) => {
+    row.instanceOf = props.type
+  })
+})
 </script>
 
 <template>
   <NDataTable
+    v-model:checked-row-keys="selectedItem"
+    :row-key="(row) => row.id"
     :loading="isLoading"
     :columns="orderColumn"
     :data="order"
@@ -159,9 +315,9 @@ const orderColumn: DataTableColumns<ResponsePointOrder2UserModel | ResponsePoint
   >
     <NScrollbar style="max-height: 80vh">
       <div style="width: 97%">
-        <template v-if="type == 'user'">
+        <template v-if="orderDetail.instanceOf == 'user'">
           <NDivider style="margin-top: 0">
-            商品快照
+            礼物快照
             <NTooltip>
               <template #trigger>
                 <NIcon :component="Info24Filled" />
@@ -176,8 +332,65 @@ const orderColumn: DataTableColumns<ResponsePointOrder2UserModel | ResponsePoint
             <NDivider> 虚拟礼物内容 </NDivider>
             <NInput :value="currentGoods?.content" type="textarea" readonly placeholder="无内容" />
           </template>
+          <template
+            v-if="
+              orderDetail.type == GoodsTypes.Physical &&
+              orderDetail.status == PointOrderStatus.Pending &&
+              orderDetail.goods.embedCollectUrl &&
+              orderDetail.goods.collectUrl
+            "
+          >
+            <NDivider> 填写收货地址 </NDivider>
+            <NButton tag="a" :href="orderDetail.goods.collectUrl" target="_blank" type="info">
+              在新窗口中打开地址填写表格
+            </NButton>
+            <br />
+            <iframe
+              height="1200"
+              width="800"
+              :src="orderDetail.goods.collectUrl"
+              frameborder="0"
+              allowfullscreen
+              sandbox="allow-same-origin allow-scripts allow-modals allow-downloads allow-forms allow-popups"
+            ></iframe>
+          </template>
+        </template>
+        <template v-else-if="orderDetail.instanceOf == 'owner'">
+          <NDivider> 设置订单状态 </NDivider>
+          <NFlex justify="center" style="width: 100%">
+            <NSteps
+              :current="orderDetail.status + 1"
+              size="small"
+              @update:current="(c) => onChangeStatus(orderDetail?.id ?? -1, c - 1)"
+            >
+              <NStep title="等待中" description="等待主播发货" :disabled="orderDetail.status >= 0" />
+              <NStep title="已发货" description="已经发货了" :disabled="orderDetail.status >= 1" />
+              <NStep title="已完成" description="就是已完成" :disabled="orderDetail.status >= 2" />
+            </NSteps>
+          </NFlex>
+          <template v-if="orderDetail.status == PointOrderStatus.Shipped && orderDetail.instanceOf == 'owner'">
+            <NDivider> 快递 </NDivider>
+            <NFlex vertical>
+              <NAutoComplete
+                v-model:value="orderDetail.expressCompany"
+                placeholder="快递公司"
+                :options="expressOptions"
+                style="max-width: 100px"
+              />
+              <NInputGroup>
+                <NInputGroupLabel> 快递单号 </NInputGroupLabel>
+                <NInput
+                  v-model:value="orderDetail.trackingNumber"
+                  placeholder="就是快递单号"
+                  style="max-width: 200px"
+                />
+              </NInputGroup>
+              <NButton type="primary" @click="updateExpress(orderDetail)" style="width: 120px" :loading="isLoading">
+                更新快递信息
+              </NButton>
+            </NFlex>
+          </template>
         </template>
-        <template v-else-if="type == 'owner'"> </template>
       </div>
     </NScrollbar>
   </NModal>