feat: 添加格口操作记录功能并优化样式

- 新增格口操作记录页面及API接口，支持查看格口开启记录
- 在商品管理页面添加“开启记录”按钮，跳转至操作记录页面
- 优化按钮间距及样式，修复样式文件中多余的空行
- 为CabinetCellDTO接口添加orderCount字段，用于记录购买次数

src/api/cabinet/cabinet-cell.ts

@@ -7,27 +7,48 @@ export interface CabinetCellQuery extends BasePageQuery {
 }
 
 export interface CabinetCellDTO {
+  /** 格口唯一ID */
   cellId?: number;
+  /** 关联柜机ID */
   cabinetId: number;
+  /** 格口号 */
   cellNo: number;
+  /** 针脚序号 */
   pinNo: number;
+  /** 格口类型（1小格 2中格 3大格 4超大格） */
   cellType: number;
+  /** 使用状态（1空闲 2已占用） */
   usageStatus: number;
+  /** 可用状态（1正常 2故障） */
   availableStatus: number;
+  /** 操作人 */
   operator?: string;
+  /** 关联商品ID */
   goodsId?: number;
+  /** 商品名称 */
   goodsName?: string;
+  /** 商品价格 */
   price?: number;
+  /** 商品封面图 */
   coverImg?: string;
+  /** 库存数量 */
   stock?: number;
+  /** 历史订单数量 */
+  orderCount?: number;
 }
 
 export interface AddCabinetCellCommand {
+  /** 关联柜机ID */
   cabinetId: number;
+  /** 格口号 */
   cellNo: number;
+  /** 针脚序号 */
   pinNo: number;
+  /** 格口类型（1小格 2中格 3大格 4超大格） */
   cellType: number;
+  /** 使用状态（1空闲 2已占用） */
   usageStatus: number;
+  /** 可用状态（1正常 2故障） */
   availableStatus: number;
 }
 

src/api/cabinet/cell-operation.ts

@@ -0,0 +1,78 @@
+import { http } from '@/utils/http';
+
+export interface SearchCabinetCellOperationQuery extends BasePageQuery {
+  /** 关联格口ID */
+  cellId?: number;
+  /** 关联商品ID */
+  goodsId?: number;
+  /** 操作类型（1: 用户操作 2: 管理员操作） */
+  operationType?: number;
+  /** 操作状态（1: 正常 2: 操作失败） */
+  status?: number;
+}
+
+export interface CabinetCellOperationDTO {
+  /** 操作流水号 */
+  operationId: number;
+  /** 关联格口ID */
+  cellId: number;
+  /** 关联商品ID */
+  goodsId: number;
+  /** 商品名称 */
+  goodsName: string;
+  /** 企业微信用户ID */
+  userid: string;
+  /** 是否内部用户（false: 否 true: 是） */
+  isInternal: boolean;
+  /** 成员名称 */
+  name: string;
+  /** 手机号码 */
+  mobile: string;
+  /** 操作类型（1: 用户操作 2: 管理员操作） */
+  operationType: number;
+  /** 操作状态（1: 正常 2: 操作失败） */
+  status: number;
+  /** 状态说明 */
+  statusDesc: string;
+  /** 操作人 */
+  operator: string;
+  /** 创建时间 */
+  createTimeStr: string;
+}
+
+export interface AddCabinetCellOperationCommand {
+  /** 关联格口ID */
+  cellId: number;
+  /** 关联商品ID */
+  goodsId: number;
+  /** 操作类型（1: 用户操作 2: 管理员操作） */
+  operationType: number;
+  /** 操作状态（1: 正常 2: 操作失败） */
+  status: number;
+}
+
+export interface UpdateCabinetCellOperationCommand extends AddCabinetCellOperationCommand {
+  operationId: number;
+}
+
+export const getCabinetCellOperationList = (params?: SearchCabinetCellOperationQuery) => {
+  return http.request<ResponseData<PageDTO<CabinetCellOperationDTO>>>('get', '/cabinet/cellOperations', {
+    params
+  });
+};
+
+export const addCabinetCellOperation = (data: AddCabinetCellOperationCommand) => {
+  return http.request<ResponseData<void>>('post', '/cabinet/cellOperations', {
+    data
+  });
+};
+
+export const updateCabinetCellOperation = (operationId: number, data: UpdateCabinetCellOperationCommand) => {
+  return http.request<ResponseData<void>>('put', `/cabinet/cellOperations/${operationId}`, {
+    data
+  });
+};
+
+export const deleteCabinetCellOperation = (ids: string) => {
+  return http.request<ResponseData<void>>('delete', `/cabinet/cellOperations/${ids}`);
+};

src/style/element-plus.scss

@@ -41,6 +41,11 @@
   margin-left: 2px !important;
 }
 
+/* 移除所有相邻按钮的左侧间距 */
+.el-button+.el-button {
+  margin-left: 0 !important;
+}
+
 /* 自定义 popover 的类名 */
 .pure-popper {
   padding: 0 !important;
@@ -93,6 +98,7 @@
 }
 
 .el-icon {
+
   &.el-dialog__close,
   &.el-drawer__close,
   &.el-message-box__close,

src/views/cabinet/operation/index.vue

@@ -0,0 +1,144 @@
+<script setup lang="ts">
+import { ref } from "vue";
+import { PureTableBar } from "@/components/RePureTableBar";
+import { useRenderIcon } from "@/components/ReIcon/src/hooks";
+import { getCabinetCellOperationList, type CabinetCellOperationDTO, type SearchCabinetCellOperationQuery } from "@/api/cabinet/cell-operation";
+import Search from "@iconify-icons/ep/search";
+import Refresh from "@iconify-icons/ep/refresh";
+import { useRoute } from 'vue-router'
+import { watch } from 'vue';
+
+defineOptions({
+  name: "CellOperation"
+});
+
+const formRef = ref();
+const tableRef = ref();
+
+const searchFormParams = ref<SearchCabinetCellOperationQuery>({
+  cellId: null,
+  goodsId: null,
+  operationType: null,
+  status: null
+});
+
+const pagination = ref({
+  pageSize: 10,
+  currentPage: 1,
+  total: 0
+});
+
+const loading = ref(false);
+const dataList = ref<CabinetCellOperationDTO[]>([]);
+
+const getList = async () => {
+  try {
+    loading.value = true;
+    const { data } = await getCabinetCellOperationList({
+      ...searchFormParams.value,
+      pageSize: pagination.value.pageSize,
+      pageNum: pagination.value.currentPage
+    });
+    dataList.value = data.rows;
+    pagination.value.total = data.total;
+  } finally {
+    loading.value = false;
+  }
+};
+
+const onSearch = () => {
+  pagination.value.currentPage = 1;
+  getList();
+};
+
+const resetForm = () => {
+  formRef.value.resetFields();
+  onSearch();
+};
+
+const onSizeChange = (val: number) => {
+  pagination.value.pageSize = val;
+  getList();
+};
+
+const onCurrentChange = (val: number) => {
+  pagination.value.currentPage = val;
+  getList();
+};
+
+const route = useRoute();
+
+watch(() => route.query.cellId,
+  (newVal) => {
+    searchFormParams.value.cellId = newVal ? Number(newVal) : null;
+    getList();
+  },
+  {
+    immediate: true
+  });
+getList();
+</script>
+
+<template>
+  <div class="main">
+    <el-form ref="formRef" :inline="true" :model="searchFormParams"
+      class="search-form bg-bg_color w-[99/100] pl-8 pt-[12px]">
+      <el-form-item label="格口ID：" prop="cellId">
+        <el-input v-model="searchFormParams.cellId" placeholder="请输入格口ID" clearable class="!w-[200px]" />
+      </el-form-item>
+      <el-form-item label="操作类型：" prop="operationType">
+        <el-select v-model="searchFormParams.operationType" placeholder="请选择类型" clearable class="!w-[180px]">
+          <el-option label="用户操作" :value="1" />
+          <el-option label="管理员操作" :value="2" />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="操作状态：" prop="status">
+        <el-select v-model="searchFormParams.status" placeholder="请选择状态" clearable class="!w-[180px]">
+          <el-option label="正常" :value="1" />
+          <el-option label="操作失败" :value="2" />
+        </el-select>
+      </el-form-item>
+      <el-form-item>
+        <el-button type="primary" :icon="useRenderIcon(Search)" @click="onSearch">
+          搜索
+        </el-button>
+        <el-button :icon="useRenderIcon(Refresh)" @click="resetForm">
+          重置
+        </el-button>
+      </el-form-item>
+    </el-form>
+
+    <PureTableBar title="格口开启记录" @refresh="getList">
+      <el-table ref="tableRef" v-loading="loading" :data="dataList" row-key="operationId" border>
+        <el-table-column label="操作ID" prop="operationId" width="120" />
+        <el-table-column label="操作人" prop="name" width="120" />
+        <el-table-column label="手机号" prop="mobile" width="120" />
+        <el-table-column label="商品名称" prop="goodsName" width="180" />
+        <el-table-column label="操作类型" prop="operationType" width="120">
+          <template #default="{ row }">
+            <el-tag :type="row.operationType === 1 ? 'success' : 'warning'">
+              {{ { 1: '用户', 2: '管理员' }[row.operationType] }}
+            </el-tag>
+          </template>
+        </el-table-column>
+        <el-table-column label="操作状态" prop="status" width="120">
+          <template #default="{ row }">
+            <el-tag :type="row.status === 1 ? 'success' : 'danger'">
+              {{ { 1: '正常', 2: '操作失败' }[row.status] }}
+            </el-tag>
+          </template>
+        </el-table-column>
+        <el-table-column label="操作时间" prop="createTimeStr" width="180" />
+      </el-table>
+      <el-pagination v-model:current-page="pagination.currentPage" v-model:page-size="pagination.pageSize"
+        :page-sizes="[10, 20, 50]" layout="total, sizes, prev, pager, next, jumper" :total="pagination.total"
+        @size-change="onSizeChange" @current-change="onCurrentChange" />
+    </PureTableBar>
+  </div>
+</template>
+
+<style scoped>
+.right-btn {
+  margin: 0;
+}
+</style>

src/views/shop/cabinet-goods/index.vue

@@ -37,7 +37,7 @@ const pagination = ref({
 });
 
 const loading = ref(false);
-const dataList = ref([]);
+const dataList = ref<CabinetCellDTO[]>([]);
 const multipleSelection = ref<number[]>([]);
 const currentRow = ref<CabinetCellDTO>();
 const configVisible = ref(false);
@@ -275,17 +275,22 @@ const handleClearGoods = async (row: CabinetCellDTO) => {
           </el-table-column>
           <el-table-column label="价格" prop="price" width="80" />
           <el-table-column label="库存" prop="stock" width="80" />
-          <el-table-column label="单元格类型" prop="cellType">
+          <el-table-column label="单元格类型" prop="cellType" width="120">
             <template #default="{ row }">
               {{ switchCellType(row.cellType) }}
             </template>
           </el-table-column>
+          <el-table-column label="购买次数" prop="orderCount" width="100" />
           <el-table-column label="相关信息" width="150" fixed="right">
             <template #default="{ row }">
-              <el-button type="primary" link :icon="useRenderIcon('document')"
+              <el-button type="success" link :icon="useRenderIcon('document')"
                 @click="router.push({ path: '/shop/order/index', query: { cellId: row.cellId } })">
                 购买记录
               </el-button>
+              <el-button type="warning" link :icon="useRenderIcon('document')"
+                @click="router.push({ path: '/cabinet/operation/index', query: { cellId: row.cellId } })">
+                开启记录
+              </el-button>
             </template>
           </el-table-column>
           <el-table-column label="操作" width="150" fixed="right">
@@ -315,7 +320,7 @@ const handleClearGoods = async (row: CabinetCellDTO) => {
   </div>
 </template>
 
-<style scoped>
+<style lang="scss" scoped>
 .flex {
   display: flex;
 }