feat:订单页面

src/api/hard/hard-car.ts

@@ -1,5 +1,13 @@
 import request from "/@/utils/request"
 
+export function getCarByOrderId(query?: Object) {
+  return request({
+    url: '/hard/hard-car/order-id',
+    method: 'get',
+    params: query
+  })
+}
+
 export function pageJoin(query?: Object) {
   return request({
     url: '/hard/hard-car/page-join',

src/views/hard/components/shop-car.vue

@@ -0,0 +1,62 @@
+<template>
+    <el-dialog title="购物车" v-model="visible" :close-on-click-modal="false" draggable>
+        <el-table :data="state.dataList" v-loading="state.loading" border :cell-style="tableStyle.cellStyle"
+            :header-cell-style="tableStyle.headerCellStyle" @sort-change="sortChangeHandle">
+            <el-table-column label="商品名" align="center" prop="productName" />
+            <el-table-column label="商品图片" align="center" prop="code">
+                <template #default="{ row }">
+                    <preview-image v-if="row.productPic" :src="row.productPic" />
+                </template>
+            </el-table-column>
+            <el-table-column label="商品价格" align="center" prop="ticketId">
+                <template #default="{ row }">
+                    <span>{{ displayPrice(row.productPrice) }}</span>
+                </template>
+            </el-table-column>
+            <el-table-column label="商品数量" align="center" prop="productCount" />
+            <el-table-column label="商品总额" align="center" prop="totalPrice">
+                <template #default="{ row }">
+                    <span>{{ displayPrice(row.totalPrice) }}</span>
+                </template>
+            </el-table-column>
+        </el-table>
+        <pagination @size-change="sizeChangeHandle" @current-change="currentChangeHandle" v-bind="state.pagination" />
+        <template #footer>
+            <span class="dialog-footer">
+                <el-button @click="visible = false">取消</el-button>
+            </span>
+        </template>
+    </el-dialog>
+</template>
+
+<script setup lang="ts" name="shop-car">
+import { BasicTableProps, useTable } from "/@/hooks/table";
+import * as hardCar from "/@/api/hard/hard-car";
+import { displayPrice } from "/@/utils/formatMoney"
+
+// 定义变量内容
+const visible = ref(false)
+
+const state: BasicTableProps = reactive<BasicTableProps>({
+    createdIsNeed: false,
+    queryForm: {},
+    pageList: hardCar.getCarByOrderId
+})
+
+//  table hook
+const { getDataList, currentChangeHandle, sizeChangeHandle, sortChangeHandle, downBlobFile, tableStyle } = useTable(state)
+
+// 打开弹窗
+const openDialog = (id: string) => {
+    visible.value = true
+    if (id) {
+        state.queryForm.orderId = id
+        getDataList()
+    }
+};
+
+// 暴露变量
+defineExpose({
+    openDialog
+});
+</script>

src/views/hard/hard-order/index.vue

@@ -1,35 +1,118 @@
 <template>
   <div class="layout-padding">
     <div class="layout-padding-auto layout-padding-view">
-      <el-row>
+      <el-form ref="queryRef" :inline="true" :model="state.queryForm" @keyup.enter="getDataList">
-        <div class="mb8" style="width: 100%">
+        <el-row :gutter="24">
-          <el-button icon="folder-add" type="primary" class="ml10" @click="formDialogRef.openDialog()"
+          <el-col :span="4">
-            v-auth="'hard_hardwareOrder_add'">
+            <el-form-item class="w100" label="用户" prop="userIds">
-            新 增
+              <select-user v-model="state.queryForm.userIds" />
-          </el-button>
+            </el-form-item>
-          <el-button plain :disabled="multiple" icon="Delete" type="primary" v-auth="'hard_hardwareOrder_del'"
+          </el-col>
-            @click="handleDelete(selectObjs)">
+          <el-form-item>
-            删除
+            <el-button icon="Search" type="primary" @click="getDataList">{{ $t('common.queryBtn')
-          </el-button>
+              }}</el-button>
-          <right-toolbar v-model:showSearch="showSearch" :export="'hard_hardwareOrder_export'"
+            <el-button icon="Refresh" @click="resetQuery">{{ $t('common.resetBtn') }}</el-button>
-            @exportExcel="exportExcel" class="ml10 mr20" style="float: right;"
+          </el-form-item>
-            @queryTable="getDataList"></right-toolbar>
+        </el-row>
+      </el-form>
+      <el-tabs v-if="tabList && tabList.length" v-model="activeName" @tab-click="handleClick">
+        <div v-for="(v) in tabList" :key="v.value">
+          <el-tab-pane :label="v.label" :name="v.value">
+            <div></div>
+          </el-tab-pane>
         </div>
-      </el-row>
+      </el-tabs>
       <el-table :data="state.dataList" v-loading="state.loading" border :cell-style="tableStyle.cellStyle"
         :header-cell-style="tableStyle.headerCellStyle" @selection-change="selectionChangHandle"
         @sort-change="sortChangeHandle">
         <el-table-column type="selection" width="40" align="center" />
         <el-table-column type="index" label="#" width="40" />
-        <el-table-column prop="userId" label="用户id" show-overflow-tooltip />
+        <el-table-column prop="username" label="用户" />
-        <el-table-column prop="merchantId" label="商户id" show-overflow-tooltip />
+        <el-table-column prop="userAvatar" label="头像">
-        <el-table-column prop="hardId" label="设备id" show-overflow-tooltip />
+          <template #default="{ row }">
+            <preview-image :src="row.userAvatar" />
+          </template>
+        </el-table-column>
+        <el-table-column prop="userMobile" width="120" label="手机号" />
+        <el-table-column width="200px" label="设备信息">
+          <template #default="{ row }">
+            <div class="status">
+              <span>商户</span>
+              <span>
+                {{ row.merchantName }}
+              </span>
+            </div>
+            <div class="status">
+              <span>设备名</span>
+              <span>
+                {{ row.hardName }}
+              </span>
+            </div>
+            <div class="status">
+              <span>设备类型</span>
+              <span>
+                {{ row.hardType }}
+              </span>
+            </div>
+          </template>
+        </el-table-column>
+        <el-table-column width="250px" label="订单信息">
+          <template #default="{ row }">
+            <div class="status">
+              <span>订单类型</span>
+              <span>
+                <dict-tag :options="hard_order_type" :value="row.orderType" />
+              </span>
+            </div>
+            <div class="status">
+              <span>支付方式</span>
+              <span>
+                <dict-tag :options="hard_pay_type" :value="row.payType" />
+              </span>
+            </div>
+            <div class="status">
+              <span>订单状态</span>
+              <span>
+                <dict-tag :options="hard_order_status" :value="row.orderStatus" />
+              </span>
+            </div>
+          </template>
+        </el-table-column>
+        <el-table-column width="200px" label="订单信息">
+          <template #default="{ row }">
+            <div class="status">
+              <span>商品总价</span>
+              <span class="color-success">
+                {{ displayPrice(row.totalPrice) }}
+              </span>
+            </div>
+            <div class="status">
+              <span>额外支付</span>
+              <span class="color-danger">
+                {{ displayPrice(row.extraPrice) }}
+              </span>
+            </div>
+            <div class="status">
+              <span>实际支付</span>
+              <span class="color-primary">
+                {{ displayPrice(row.payPrice) }}
+              </span>
+            </div>
+          </template>
+        </el-table-column>
+        <el-table-column label="支付时间" align="center" prop="payTime" width="180px" />
         <el-table-column label="操作" width="150">
-          <template #default="scope">
+          <template #default="{ row }">
-            <el-button icon="edit-pen" text type="primary" v-auth="'hard_hardwareOrder_edit'"
+            <el-button icon="ShoppingCartFull" text type="primary"
-              @click="formDialogRef.openDialog(scope.row.id)">编辑</el-button>
+              @click="shopCarDialogRef.openDialog(row.id)">购物车</el-button>
-            <el-button icon="delete" text type="primary" v-auth="'hard_hardwareOrder_del'"
+            <el-button icon="WalletFilled" v-if="!row.payRefundId && row.orderType != 3 && row.orderType != 4 && false"
-              @click="handleDelete([scope.row.id])">删除</el-button>
+              link type="primary" @click="formDialogRef.openDialog(row)">
+              退款
+            </el-button>
+            <el-button v-if="false" icon="edit-pen" text type="primary" v-auth="'hard_hardwareOrder_edit'"
+              @click="formDialogRef.openDialog(row.id)">编辑</el-button>
+            <el-button v-if="false" icon="delete" text type="primary" v-auth="'hard_hardwareOrder_del'"
+              @click="handleDelete([row.id])">删除</el-button>
           </template>
         </el-table-column>
       </el-table>
@@ -38,6 +121,7 @@
 
     <!-- 编辑、新增  -->
     <form-dialog ref="formDialogRef" @refresh="getDataList(false)" />
+    <shop-car ref="shopCarDialogRef" />
 
   </div>
 </template>
@@ -46,15 +130,21 @@
 import { BasicTableProps, useTable } from "/@/hooks/table";
 import * as hardOrder from "/@/api/hard/hard-order";
 import * as hardCar from "/@/api/hard/hard-car";
+import { getDicts } from '/@/api/admin/dict';
 import { useMessage, useMessageBox } from "/@/hooks/message";
 import { useDict } from '/@/hooks/dict';
+import { displayPrice } from "/@/utils/formatMoney"
 
 // 引入组件
 const FormDialog = defineAsyncComponent(() => import('./form.vue'));
+const ShopCar = defineAsyncComponent(() => import('../components/shop-car.vue'));
 // 定义查询字典
-
+const { hard_pay_type, hard_order_type, hard_order_status, hard_type } = useDict("hard_pay_type", "hard_order_type", "hard_order_status", "hard_type")
 // 定义变量内容
 const formDialogRef = ref()
+const shopCarDialogRef = ref()
+const tabList = ref<any>([{}])
+const activeName = ref(null)
 // 搜索变量
 const queryRef = ref()
 const showSearch = ref(true)
@@ -77,6 +167,12 @@ const {
   tableStyle
 } = useTable(state)
 
+onMounted(async () => {
+  const { data } = await getDicts("hard_order_type")
+  data.unshift({ label: '全部', value: null })
+  tabList.value = data
+})
+
 // 清空搜索条件
 const resetQuery = () => {
   // 清空搜索条件
@@ -86,6 +182,11 @@ const resetQuery = () => {
   getDataList()
 }
 
+const handleClick = (e: any) => {
+  state.queryForm.orderType = tabList.value[e.index].value
+  getDataList()
+}
+
 // 导出excel
 const exportExcel = () => {
   downBlobFile('/hard/hardwareOrder/export', Object.assign(state.queryForm, { ids: selectObjs }), 'hardwareOrder.xlsx')
@@ -114,3 +215,24 @@ const handleDelete = async (ids: string[]) => {
   }
 };
 </script>
+
+<style scoped lang="scss">
+.status {
+  display: flex;
+  align-items: center;
+  margin-bottom: 2px;
+
+  span {
+    display: inline-block;
+  }
+
+  span:nth-child(1) {
+    width: 100px;
+    text-align: left;
+  }
+
+  span:nth-child(2) {
+    flex: 1;
+  }
+}
+</style>