feat: 🚀 优化table表格展示，完成发货管理，修复icon图标

public/vite.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>

src/api/index.ts

@@ -12,7 +12,7 @@ let loadingInstance: LoadingType = {}
 
 const config = {
   // 默认地址请求地址，可在 .env.*** 文件中修改
-  baseURL: import.meta.env.VITE_BZD_ERP_APP_API as string,
+  // baseURL: import.meta.env.VITE_BZD_ERP_APP_API as string,
   // 设置超时时间（10s）
   timeout: ResultEnum.TIMEOUT as number,
   // 跨域时候允许携带凭证

src/api/storehouse/index.ts

@@ -104,3 +104,13 @@ export const Storehouse_StockOut_Add = (params: any) => $http.post('/testapi/sto
 export const Storehouse_StockOut_Get = (params: any) => $http.post('/testapi/storage/StockOut/Get', params)
 // 修改发货订单
 export const Storehouse_StockOut_Edit = (params: any) => $http.post('/testapi/storage/StockOut/Edit', params)
+
+/**
+ * 库存统计
+ */
+// 统计列表
+export const Storehouse_Stock_List = (params: any) => $http.post('/testapi/storage/Stock/List', params)
+// 查询明细
+export const Storehouse_Stock_Detail_List = (params: any) => $http.post('/testapi/storage/Stock/Detail_List', params)
+// 导出明细
+export const Storehouse_Stock_Detail_Excel = (params: any) => $http.post('/testapi/storage/Stock/Detail_Excel', params)

src/components/TableBase/index.scss

@@ -16,6 +16,7 @@
 // }
 
 .card {
+  flex: 1 1 0%;
   // height: calc(100% - 5rem - 0.75rem);
   transition: height 1.25s ease-in-out;
   box-sizing: border-box;

src/components/TableBase/index.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, onMounted, onUnmounted, CSSProperties } from 'vue'
+import { ref, onMounted, CSSProperties } from 'vue'
 import Pagination from './components/Pagination.vue'
 import { useTable } from '@/hooks/useTable'
 import { ElTable, TableProps } from 'element-plus'
@@ -17,7 +17,6 @@ interface ProTableProps extends Partial<Omit<TableProps<any>, 'data'>> {
   toolButton?: boolean // 是否显示表格功能按钮 ==> 非必传（默认为true）
   selectId?: string // 当表格数据多选时，所指定的 id ==> 非必传（默认为 id）
   displayHeader?: boolean // 是否隐藏头部
-  onResize?: () => number
   rowClick?: (row: any, column: any, event: any) => void // 点击行
   selectionChange?: (row: any) => void // 选择函数
   getRowKey?: ((row: any) => string) | string // 用于优化select勾选框
@@ -46,26 +45,10 @@ const { tableData, pageable, getTableList, searchTable, handleSizeChange, handle
 // 接收 columns 并设置为响应式
 const tableColumns = ref<ColumnProps[]>(props.columns)
 
-let cardHeight = 0
-const resize = () => {
-  if (props.onResize) {
-    cardHeight = props.onResize()
-  } else {
-    const height = document.documentElement.clientHeight
-    const header = document.querySelector('.table-header') as HTMLDivElement
-    cardHeight = height - header.clientHeight - 12 - 60 - 12 - 12
-  }
-}
 onMounted(() => {
   getTableList()
 })
-onMounted(() => {
-  resize()
-  window.onresize = resize
-})
-onUnmounted(() => {
-  window.onresize = null
-})
+
 defineExpose({
   getTableList,
   searchTable
@@ -77,7 +60,7 @@ defineExpose({
     <slot name="table-header" :pageable="pageable"></slot>
   </div>
 
-  <div class="card table" :style="{ height: cardHeight + 'px' }">
+  <div class="card table">
     <el-table
       :data="tableData"
       @row-click="props.rowClick"

src/hooks/useLoading.ts

@@ -1,9 +0,0 @@
-import { ElLoading } from 'element-plus'
-
-export const useLoading = () => {
-  const loading = ElLoading.service({
-    lock: true,
-    text: 'Loading',
-    background: 'rgba(0, 0, 0, 0.7)'
-  })
-}

src/hooks/useTable.ts

@@ -41,7 +41,7 @@ export const useTable = (
       // 总条数
       total: 0,
       RemainingTime: 0,
-      small: false,
+      small: true,
       disabled: false
     },
     // 查询参数(只包括查询)

src/router/modules/staticRouter.ts

@@ -14,142 +14,150 @@ export const staticRouter: RouteRecordRaw[] = [
       title: '起始页'
     },
     children: [
-      // {
-      //   path: '/list',
-      //   name: 'List',
-      //   component: () => import('@/views/storehouse/List.vue'),
-      //   meta: {
-      //     title: '仓库列表'
-      //   }
-      // },
-      // {
-      //   path: '/classify',
-      //   name: 'Classify',
-      //   component: () => import('@/views/storehouse/Classify.vue'),
-      //   meta: {
-      //     title: '产品分类'
-      //   }
-      // },
-      // {
-      //   path: '/productionList',
-      //   name: 'ProductionList',
-      //   component: () => import('@/views/storehouse/ProductionList.vue'),
-      //   meta: {
-      //     title: '产品列表'
-      //   }
-      // },
-      // {
-      //   path: '/ioTNetworkCard',
-      //   name: 'IoTNetworkCard',
-      //   component: () => import('@/views/storehouse/IoTNetworkCard.vue'),
-      //   meta: {
-      //     title: '物联网卡'
-      //   }
-      // },
-      // {
-      //   path: '/saleMange',
-      //   name: 'SaleMange',
-      //   component: () => import('@/views/storehouse/sales/index.vue'),
-      //   // redirect: '/contract',
-      //   meta: {
-      //     routerView: true,
-      //     title: '销售管理'
-      //   },
-      //   children: [
-      //     {
-      //       path: '/contract',
-      //       name: 'Contract',
-      //       component: () => import('@/views/storehouse/sales/Contract.vue'),
-      //       meta: {
-      //         title: '合同管理'
-      //       }
-      //     },
-      //     {
-      //       path: '/contractDetail/:id/:type',
-      //       name: 'ContractDetail',
-      //       component: () => import('@/views/storehouse/sales/ContractDetail.vue'),
-      //       meta: {
-      //         title: '合同详情'
-      //       }
-      //     },
-      //     {
-      //       path: '/contractSale',
-      //       name: 'ContractSale',
-      //       component: () => import('@/views/storehouse/sales/ContractSale.vue'),
-      //       meta: {
-      //         title: '合同详情(销售)'
-      //       }
-      //     }
-      //   ]
-      // },
-      // {
-      //   path: '/inventoryMange',
-      //   name: 'InventoryMange',
-      //   component: () => import('@/views/storehouse/inventory/index.vue'),
-      //   // redirect: '/contract',
-      //   meta: {
-      //     routerView: true,
-      //     title: '库存管理'
-      //   },
-      //   children: [
-      //     {
-      //       path: '/device',
-      //       name: 'Device',
-      //       component: () => import('@/views/storehouse/inventory/Device.vue'),
-      //       meta: {
-      //         title: '设备列表'
-      //       }
-      //     },
-      //     {
-      //       path: '/inStorage',
-      //       name: 'InStorage',
-      //       component: () => import('@/views/storehouse/inventory/InStorage.vue'),
-      //       meta: {
-      //         title: '入库管理'
-      //       }
-      //     },
-      //     {
-      //       path: '/inStorageDetail/:id',
-      //       name: 'InStorageDetail',
-      //       component: () => import('@/views/storehouse/inventory/InStorageDetail.vue'),
-      //       meta: {
-      //         title: '入库详情'
-      //       }
-      //     },
-      //     {
-      //       path: '/outStock',
-      //       name: 'OutStock',
-      //       component: () => import('@/views/storehouse/outStock/OutStock.vue'),
-      //       meta: {
-      //         title: '出库管理'
-      //       }
-      //     },
-      //     {
-      //       path: '/receiveOutStock',
-      //       name: 'ReceiveOutStock',
-      //       component: () => import('@/views/storehouse/outStock/ReceiveOutStock.vue'),
-      //       meta: {
-      //         title: '领料出库'
-      //       }
-      //     },
-      //     {
-      //       path: '/saleOutStock',
-      //       name: 'SaleOutStock',
-      //       component: () => import('@/views/storehouse/outStock/SaleOutStock.vue'),
-      //       meta: {
-      //         title: '销售出库'
-      //       }
-      //     },
-      //     {
-      //       path: '/outStockDetail/:number',
-      //       name: 'OutStockDetail',
-      //       component: () => import('@/views/storehouse/outStock/OutStockDetail.vue'),
-      //       meta: {
-      //         title: '出库详情'
-      //       }
-      //     }
-      //   ]
-      // },
+      {
+        path: '/list',
+        name: 'List',
+        component: () => import('@/views/storehouse/List.vue'),
+        meta: {
+          title: '仓库列表'
+        }
+      },
+      {
+        path: '/classify',
+        name: 'Classify',
+        component: () => import('@/views/storehouse/Classify.vue'),
+        meta: {
+          title: '产品分类'
+        }
+      },
+      {
+        path: '/productionList',
+        name: 'ProductionList',
+        component: () => import('@/views/storehouse/ProductionList.vue'),
+        meta: {
+          title: '产品列表'
+        }
+      },
+      {
+        path: '/ioTNetworkCard',
+        name: 'IoTNetworkCard',
+        component: () => import('@/views/storehouse/IoTNetworkCard.vue'),
+        meta: {
+          title: '物联网卡'
+        }
+      },
+      {
+        path: '/saleMange',
+        name: 'SaleMange',
+        component: () => import('@/views/storehouse/sales/index.vue'),
+        // redirect: '/contract',
+        meta: {
+          routerView: true,
+          title: '销售管理'
+        },
+        children: [
+          {
+            path: '/contract',
+            name: 'Contract',
+            component: () => import('@/views/storehouse/sales/Contract.vue'),
+            meta: {
+              title: '合同管理'
+            }
+          },
+          {
+            path: '/contractDetail/:id/:type',
+            name: 'ContractDetail',
+            component: () => import('@/views/storehouse/sales/ContractDetail.vue'),
+            meta: {
+              title: '合同详情'
+            }
+          },
+          {
+            path: '/contractSale',
+            name: 'ContractSale',
+            component: () => import('@/views/storehouse/sales/ContractSale.vue'),
+            meta: {
+              title: '合同详情(销售)'
+            }
+          }
+        ]
+      },
+      {
+        path: '/inventoryMange',
+        name: 'InventoryMange',
+        component: () => import('@/views/storehouse/inventory/index.vue'),
+        // redirect: '/contract',
+        meta: {
+          routerView: true,
+          title: '库存管理'
+        },
+        children: [
+          {
+            path: '/device',
+            name: 'Device',
+            component: () => import('@/views/storehouse/inventory/Device.vue'),
+            meta: {
+              title: '设备列表'
+            }
+          },
+          {
+            path: '/inStorage',
+            name: 'InStorage',
+            component: () => import('@/views/storehouse/inventory/InStorage.vue'),
+            meta: {
+              title: '入库管理'
+            }
+          },
+          {
+            path: '/inStorageDetail/:id',
+            name: 'InStorageDetail',
+            component: () => import('@/views/storehouse/inventory/InStorageDetail.vue'),
+            meta: {
+              title: '入库详情'
+            }
+          },
+          {
+            path: '/outStock',
+            name: 'OutStock',
+            component: () => import('@/views/storehouse/outStock/OutStock.vue'),
+            meta: {
+              title: '出库管理'
+            }
+          },
+          {
+            path: '/receiveOutStock',
+            name: 'ReceiveOutStock',
+            component: () => import('@/views/storehouse/outStock/ReceiveOutStock.vue'),
+            meta: {
+              title: '领料出库'
+            }
+          },
+          {
+            path: '/saleOutStock',
+            name: 'SaleOutStock',
+            component: () => import('@/views/storehouse/outStock/SaleOutStock.vue'),
+            meta: {
+              title: '销售出库'
+            }
+          },
+          {
+            path: '/outStockDetail/:number',
+            name: 'OutStockDetail',
+            component: () => import('@/views/storehouse/outStock/OutStockDetail.vue'),
+            meta: {
+              title: '出库详情'
+            }
+          },
+          {
+            path: '/inventoryStatistics',
+            name: 'InventoryStatistics',
+            component: () => import('@/views/storehouse/InventoryStatistics.vue'),
+            meta: {
+              title: '库存统计'
+            }
+          }
+        ]
+      },
       // {
       //   path: '/contract',
       //   name: 'Contract',

src/styles/var.scss

@@ -0,0 +1,5 @@
+@mixin f-direction {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+}

src/views/account/roles/Roles.vue

@@ -185,7 +185,7 @@ const searchHandle = () => {
 </script>
 
 <template>
-  <div>
+  <div class="roles">
     <TableBase ref="TableRef" :columns="columns" :requestApi="User_Power_List" :initParam="initParam">
       <template #table-header>
         <div class="input-suffix">
@@ -257,6 +257,10 @@ const searchHandle = () => {
 
 <style scoped lang="scss">
 @import './index.scss';
+@import '@/styles/var.scss';
+.roles {
+  @include f-direction;
+}
 /* fade-transform */
 .fade-transform-leave-active,
 .fade-transform-enter-active {

src/views/account/users/Users.vue

@@ -125,13 +125,17 @@ const SearchInfo = () => {
 </template>
 
 <style scoped lang="scss">
-.input-suffix {
-  width: 100%;
-  .w-50 {
-    width: 12.5rem;
+@import '@/styles/var.scss';
+.users {
+  @include f-direction;
+  .input-suffix {
+    width: 100%;
+    .w-50 {
+      width: 12.5rem;
+    }
+  }
+  .form {
+    margin-top: 3rem;
   }
-}
-.form {
-  margin-top: 3rem;
 }
 </style>

src/views/salary/SalaryMy.vue

@@ -171,6 +171,11 @@ getMySalary()
 </template>
 
 <style lang="scss" scoped>
+@import '@/styles/var.scss';
+
+.SalaryMy {
+  @include f-direction;
+}
 .d-flex {
   display: flex;
   justify-content: start;
@@ -179,6 +184,7 @@ getMySalary()
 }
 .salary-content {
   overflow-y: auto;
-  max-height: calc(100% - 60px - 72px - 24px);
+  // max-height: calc(100% - 60px - 72px - 24px);
+  flex: 1;
 }
 </style>

src/views/salary/salary/Salary.vue

@@ -101,7 +101,7 @@ const tableRowClassName = (data: any): any => {
 
 <template>
   <div class="salary">
-    <div style="width: 290px">
+    <div style="width: 290px" class="salary-table">
       <TableBase
         ref="TableRef"
         :columns="columns"

src/views/salary/salary/index.scss

@@ -1,6 +1,12 @@
+@import '@/styles/var.scss';
+
 .salary {
+  height: 100%;
   display: flex;
   overflow: hidden;
+  .salary-table {
+    @include f-direction;
+  }
 }
 
 .submit {

src/views/storehouse/Classify.vue

@@ -162,6 +162,11 @@ const searchHandle = () => {
 </template>
 
 <style scoped lang="scss">
+@import '@/styles/var.scss';
+
+.Classify {
+  @include f-direction;
+}
 .input-suffix {
   width: 100%;
   .w-50 {

src/views/storehouse/InventoryStatistics.vue

@@ -0,0 +1,142 @@
+<script setup lang="ts">
+import {
+  Storehouse_Stock_List,
+  Storehouse_Depot_List,
+  Storehouse_Stock_Detail_List,
+  Storehouse_Stock_Detail_Excel
+} from '@/api/storehouse/index'
+import { ref, reactive, nextTick, onMounted } from 'vue'
+import { List, Picture, ArrowUpBold, ArrowDownBold } from '@element-plus/icons-vue'
+import { GlobalStore } from '@/stores/index'
+import TableBase from '@/components/TableBase/index.vue'
+import type { ColumnProps } from '@/components/TableBase/interface/index'
+const globalStore = GlobalStore()
+const TableRef = ref<InstanceType<typeof TableBase> | null>(null)
+
+const searchShow = ref(false)
+const initParam = reactive({
+  User_tokey: globalStore.GET_User_tokey,
+  T_depot_id: '',
+  T_product_class: '',
+  T_product_name: '',
+  T_product_model: ''
+})
+const columns: ColumnProps[] = [
+  { type: 'index', label: '序号', width: 80 },
+  { prop: 'T_iccid', label: '仓库名称', ellipsis: true },
+  { prop: 'T_product_img', label: '产品图片', name: 'T_product_img' },
+  { prop: 'T_product_name', label: '产品名称' },
+  { prop: 'T_product_class_name', label: '产品分类' },
+  { prop: 'T_product_model', label: '产品型号', ellipsis: true },
+  { prop: 'T_product_spec', label: '产品规格' },
+  { prop: 'T_total', label: '库存数量' },
+  { prop: 'operation', label: '操作', width: 200, fixed: 'right' }
+]
+
+const searchShowHandle = () => {
+  searchShow.value = !searchShow.value
+}
+
+// 拿到仓库列表
+interface ItemType {
+  T_name: string
+  Id: number
+}
+const options = ref<ItemType[]>([])
+const getDepotList = async () => {
+  if (globalStore.GET_depotList.length) return
+  const res: any = await Storehouse_Depot_List({ User_tokey: globalStore.GET_User_tokey, page: 1, page_z: 999 })
+  options.value = res.Data.Data
+  globalStore.SET_depotList(options.value)
+}
+onMounted(() => {
+  getDepotList()
+})
+</script>
+
+<template>
+  <div class="inventory-statistics">
+    <TableBase ref="TableRef" :columns="columns" :requestApi="Storehouse_Stock_List" :initParam="initParam">
+      <template #table-header>
+        <div class="head-search" :class="searchShow ? 'active' : ''">
+          <el-form :model="initParam" class="result-form" label-width="100px">
+            <el-row>
+              <el-col :span="6"
+                ><el-form-item label="产品分类" :inline-message="true"> <el-input /> </el-form-item
+              ></el-col>
+              <el-col :span="6"
+                ><el-form-item label="产品名称"> <el-input /> </el-form-item
+              ></el-col>
+              <el-col :span="6"
+                ><el-form-item label="产品型号"> <el-input /> </el-form-item
+              ></el-col>
+              <el-col :span="6">
+                <el-button :icon="ArrowDownBold" @click="searchShowHandle" />
+                <el-button type="primary">搜索</el-button>
+                <el-button type="success">导出</el-button>
+              </el-col>
+            </el-row>
+            <el-row class="search-bottom">
+              <el-col :span="6"
+                ><el-form-item label="仓库列表" :inline-message="true"> <el-input /> </el-form-item
+              ></el-col>
+            </el-row>
+          </el-form>
+        </div>
+      </template>
+      <template #T_product_img="{ row }">
+        <el-image
+          fit="cover"
+          style="width: 50px; height: 50px"
+          :src="row.T_product_img"
+          :preview-src-list="[row.T_product_img]"
+          :preview-teleported="true"
+        >
+          <template #error>
+            <div class="image-slot">
+              <el-icon><Picture /></el-icon>
+            </div>
+          </template>
+        </el-image>
+      </template>
+      <template #right="{ row }">
+        <el-button link type="primary" size="small" :icon="List">明细</el-button>
+      </template>
+    </TableBase>
+  </div>
+</template>
+
+<style scoped lang="scss">
+@import '@/styles/var.scss';
+.inventory-statistics {
+  @include f-direction;
+  .head-search {
+    width: 100%;
+    height: 32px;
+    overflow: hidden;
+    transition: all 0.5s ease-in-out;
+    .result-form.el-form .el-form-item {
+      margin-bottom: 0 !important;
+    }
+    .search-bottom {
+      margin-top: 18px;
+    }
+  }
+  .head-search.active {
+    height: 82px;
+  }
+  .image-slot {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 100%;
+    height: 100%;
+    background: var(--el-fill-color-light);
+    color: var(--el-text-color-secondary);
+    font-size: 30px;
+  }
+  .image-slot .el-icon {
+    font-size: 30px;
+  }
+}
+</style>

src/views/storehouse/IoTNetworkCard.vue

@@ -223,7 +223,10 @@ const searchHandle = () => {
 </template>
 
 <style scoped lang="scss">
+@import '@/styles/var.scss';
+
 .IoTNetworkCard {
+  @include f-direction;
   :deep(.el-drawer__header) {
     margin-bottom: 0;
   }

src/views/storehouse/List.vue

@@ -158,6 +158,11 @@ const searchHandle = () => {
 </template>
 
 <style scoped lang="scss">
+@import '@/styles/var.scss';
+
+.list {
+  @include f-direction;
+}
 .input-suffix {
   width: 100%;
   .w-50 {

src/views/storehouse/ProductionList.vue

@@ -11,7 +11,6 @@ import { GlobalStore } from '@/stores/index'
 import { ref, reactive, nextTick, onMounted } from 'vue'
 import Upload from '@/components/Upload/index.vue'
 import Drawer from '@/components/Drawer/index.vue'
-import Dialog from '@/components/dialog/Dialog.vue'
 import TableBase from '@/components/TableBase/index.vue'
 import { ElMessageBox, ElMessage } from 'element-plus'
 import type { FormInstance, FormRules } from 'element-plus'
@@ -140,15 +139,6 @@ const searchHandle = () => {
   TableRef.value?.searchTable()
 }
 
-// 预览图片
-const url = ref('')
-const srcList = ref<any[]>([])
-const dialog = ref<InstanceType<typeof Dialog> | null>(null)
-const previewImg = (str: string) => {
-  dialog.value?.DialogOpen()
-  url.value = str
-  srcList.value.push(str)
-}
 // 获取产品分类
 const options = ref<any[]>([])
 const getProductClassList = async () => {
@@ -198,13 +188,12 @@ onMounted(() => {
       </template>
       <template #T_img="{ row }">
         <el-image
-          v-if="row.T_img"
-          style="width: 100px; height: 100px"
+          style="width: 50px; height: 50px"
           :src="row.T_img"
           fit="cover"
-          @click="previewImg(row.T_img)"
-        />
-        <el-image v-else style="width: 100px; height: 100px">
+          :preview-src-list="[row.T_img]"
+          :preview-teleported="true"
+        >
           <template #error>
             <div class="image-slot">
               <el-icon><Picture /></el-icon>
@@ -277,19 +266,18 @@ onMounted(() => {
         </el-form-item>
       </el-form>
     </Drawer>
-    <Dialog ref="dialog" width="50%">
-      <el-image :src="url" :zoom-rate="1.2" :preview-src-list="srcList" fit="cover" />
-    </Dialog>
   </div>
 </template>
 
 <style scoped lang="scss">
+@import '@/styles/var.scss';
 .tooltip-content {
   max-width: 500px;
   overflow-y: auto;
 }
 .production-list {
-  height: 100%;
+  @include f-direction;
+
   .el-image {
     cursor: pointer;
   }

src/views/storehouse/inventory/Device.vue

@@ -96,7 +96,11 @@ const searchHandle = () => {
 </template>
 
 <style scoped lang="scss">
+@import '@/styles/var.scss';
+
 .Device {
+  @include f-direction;
+
   .input-suffix {
     width: 100%;
     .inline-flex {

src/views/storehouse/inventory/InStorage.vue

@@ -109,7 +109,11 @@ onMounted(() => {
 </template>
 
 <style scoped lang="scss">
+@import '@/styles/var.scss';
+
 .InStorage {
+  @include f-direction;
+
   .input-suffix {
     width: 100%;
     .inline-flex {

src/views/storehouse/inventory/InStorageDetail.vue

@@ -55,22 +55,13 @@ const callbackSnDrawer = (done: () => void) => done()
 
 const previewSn = (devicelist: string[]) => {
   drawerSnRef.value?.openDrawer()
+  if (!devicelist) return
   tableSnData.value = devicelist.map((item: string) => {
     return {
       sn: item
     }
   })
 }
-/**
- * 查看图片
- */
-const srcList = ref<any[]>([])
-const previewImg = (str: string) => {
-  // dialog.value?.DialogOpen()
-  // url.value = str
-  srcList.value.push(str)
-}
-
 onMounted(() => {
   getStorehouseContractGet()
 })
@@ -128,7 +119,6 @@ onMounted(() => {
                       :preview-src-list="[row.T_product_img]"
                       :preview-teleported="true"
                       fit="cover"
-                      @click="previewImg(row.T_product_img)"
                     />
                     <el-tooltip
                       v-if="item.prop === 'T_product_model'"

src/views/storehouse/outStock/OutStock.vue

@@ -28,7 +28,7 @@ const delivery_type = [
 const columns: ColumnProps[] = [
   { type: 'index', label: '序号', width: 80 },
   { prop: 'T_number', label: '出库单号' },
-  { prop: 'T_receive', label: '领取人' },
+  { prop: 'T_receive_name', label: '领取人' },
   { prop: 'T_depot_name', label: '出库仓库' },
   { prop: 'T_date', label: '出库日期' },
   { prop: 'T_type', label: '出库类型', name: 'T_type' },
@@ -226,7 +226,11 @@ onMounted(() => {
 </template>
 
 <style scoped lang="scss">
+@import '@/styles/var.scss';
+
 .out-stock {
+  @include f-direction;
+
   :deep(.el-drawer__header) {
     margin-bottom: 0;
   }
@@ -235,12 +239,12 @@ onMounted(() => {
     .inline-flex {
       white-space: nowrap;
     }
-    .btn {
-      display: flex;
-      justify-content: end;
-      .el-button {
-        padding: 0 20px;
-      }
+  }
+  .btn {
+    display: flex;
+    justify-content: center;
+    .el-button {
+      padding: 0 20px;
     }
   }
 }

src/views/storehouse/outStock/OutStockDetail.vue

@@ -2,20 +2,31 @@
 import { ref, onMounted } from 'vue'
 import { GlobalStore } from '@/stores/index'
 import { useRoute, useRouter } from 'vue-router'
+import Drawer from '@/components/Drawer/index.vue'
 import { Storehouse_StockOut_Get } from '@/api/storehouse/index'
 
 interface InfoType {
   Id: number
+  T_type: number
   T_depot_name: string
   T_date: string
   T_number: string
   T_remark: string
   T_submit: string
+  T_signer?: string
+  T_signer_phone?: string
+  T_signer_date?: string
+  T_signer_unit?: string
   T_submit_name: string
+  T_receive_name: string
+  T_delivery_type?: string
+  T_courier_number?: number
 }
 
+const tableSnData = ref<any[]>([])
 const info = ref<InfoType | undefined>()
 const globalStore = GlobalStore()
+const drawerSnRef = ref<InstanceType<typeof Drawer> | null>(null)
 const route = useRoute()
 const router = useRouter()
 
@@ -30,6 +41,12 @@ const columns = [
   { label: '数量', prop: 'T_num', align: 'center ' },
   { prop: 'operation', label: '关联设备', width: 100, fixed: 'right', align: 'center ' }
 ]
+
+const snColumns = [
+  { type: 'index', label: '序号', width: 80, align: 'center ' },
+  { label: 'SN', prop: 'sn', align: 'center ' }
+]
+
 const getStorehouseContractGet = async () => {
   const res: any = await Storehouse_StockOut_Get({
     User_tokey: globalStore.GET_User_tokey,
@@ -43,6 +60,27 @@ const getStorehouseContractGet = async () => {
 
 const tableData = ref<any[]>([])
 
+/**
+ * 回调
+ */
+const callbackSnDrawer = (done: () => void) => done()
+
+const previewSn = (devicelist: string[]) => {
+  drawerSnRef.value?.openDrawer()
+  if (!devicelist) return
+  tableSnData.value = devicelist.map((item: string) => {
+    return {
+      sn: item
+    }
+  })
+}
+
+const delivery_type = {
+  1: '自送',
+  2: '自提',
+  3: '快递'
+}
+
 onMounted(() => {
   getStorehouseContractGet()
 })
@@ -60,18 +98,6 @@ onMounted(() => {
           >
         </el-row>
         <el-row>
-          <el-col :xs="8" :sm="6" :md="4" :lg="3" :xl="2"> <span>入库仓库：</span></el-col>
-          <el-col :xs="11" :sm="9" :md="7" :lg="6" :xl="5"
-            ><span>{{ info?.T_depot_name! }}</span></el-col
-          >
-        </el-row>
-        <el-row>
-          <el-col :xs="8" :sm="6" :md="4" :lg="3" :xl="2"> <span>入库日期：</span></el-col>
-          <el-col :xs="11" :sm="9" :md="7" :lg="6" :xl="5"
-            ><span>{{ info?.T_date! }}</span></el-col
-          >
-        </el-row>
-        <el-row>
           <el-col :xs="8" :sm="6" :md="4" :lg="3" :xl="2"><span>入库明细：</span></el-col>
           <el-col :span="21">
             <el-table
@@ -97,6 +123,7 @@ onMounted(() => {
                       style="height: 50px"
                       :src="row.T_product_img"
                       :preview-src-list="[row.T_product_img]"
+                      :preview-teleported="true"
                       fit="cover"
                     />
                     <el-tooltip
@@ -111,7 +138,12 @@ onMounted(() => {
                 </el-table-column>
                 <el-table-column v-bind="item" v-if="item.fixed === 'right'">
                   <template #default="{ row }">
-                    <el-button type="primary" :disabled="!row.T_product_relation_sn">查看</el-button>
+                    <el-button
+                      type="primary"
+                      :disabled="!row.T_product_relation_sn"
+                      @click="previewSn(row.T_device_list)"
+                      >查看</el-button
+                    >
                   </template>
                 </el-table-column>
               </template>
@@ -119,6 +151,62 @@ onMounted(() => {
           </el-col>
         </el-row>
         <el-row>
+          <el-col :xs="8" :sm="6" :md="4" :lg="3" :xl="2"> <span>入库仓库：</span></el-col>
+          <el-col :xs="11" :sm="9" :md="7" :lg="6" :xl="5"
+            ><span>{{ info?.T_depot_name! }}</span></el-col
+          >
+        </el-row>
+        <el-row>
+          <el-col :xs="8" :sm="6" :md="4" :lg="3" :xl="2"> <span>入库日期：</span></el-col>
+          <el-col :xs="11" :sm="9" :md="7" :lg="6" :xl="5"
+            ><span>{{ info?.T_date! }}</span></el-col
+          >
+        </el-row>
+        <el-row>
+          <el-col :xs="8" :sm="6" :md="4" :lg="3" :xl="2"> <span>领取人：</span></el-col>
+          <el-col :xs="11" :sm="9" :md="7" :lg="6" :xl="5"
+            ><span>{{ info?.T_date! }}</span></el-col
+          >
+        </el-row>
+        <div v-if="info?.T_type === 2">
+          <el-row>
+            <el-col :xs="8" :sm="6" :md="4" :lg="3" :xl="2"> <span>送货方式：</span></el-col>
+            <el-col :xs="11" :sm="9" :md="7" :lg="6" :xl="5"
+              ><span>{{ info.T_delivery_type ? delivery_type[info.T_delivery_type as string] : '无' }}</span></el-col
+            >
+          </el-row>
+          <el-row>
+            <el-col :xs="8" :sm="6" :md="4" :lg="3" :xl="2"> <span>签收单位：</span></el-col>
+            <el-col :xs="11" :sm="9" :md="7" :lg="6" :xl="5"
+              ><span>{{ info.T_signer_unit ? info.T_signer_unit : '无' }}</span></el-col
+            >
+          </el-row>
+          <el-row>
+            <el-col :xs="8" :sm="6" :md="4" :lg="3" :xl="2"> <span>签收人：</span></el-col>
+            <el-col :xs="11" :sm="9" :md="7" :lg="6" :xl="5"
+              ><span>{{ info.T_signer ? info.T_signer : '无' }}</span></el-col
+            >
+          </el-row>
+          <el-row>
+            <el-col :xs="8" :sm="6" :md="4" :lg="3" :xl="2"> <span>签收人联系电话：</span></el-col>
+            <el-col :xs="11" :sm="9" :md="7" :lg="6" :xl="5"
+              ><span>{{ info.T_signer_phone ? info.T_signer_phone : '无' }}</span></el-col
+            >
+          </el-row>
+          <el-row>
+            <el-col :xs="8" :sm="6" :md="4" :lg="3" :xl="2"> <span>签收日期：</span></el-col>
+            <el-col :xs="11" :sm="9" :md="7" :lg="6" :xl="5"
+              ><span>{{ info.T_signer_date ? info.T_signer_date : '无' }}</span></el-col
+            >
+          </el-row>
+          <el-row>
+            <el-col :xs="8" :sm="6" :md="4" :lg="3" :xl="2"> <span>物流单号：</span></el-col>
+            <el-col :xs="11" :sm="9" :md="7" :lg="6" :xl="5"
+              ><span>{{ info.T_courier_number ? info.T_courier_number : '无' }}</span></el-col
+            >
+          </el-row>
+        </div>
+        <el-row>
           <el-col :xs="8" :sm="6" :md="4" :lg="3" :xl="2"><span>备注：</span></el-col>
           <el-col :xs="11" :sm="9" :md="7" :lg="6" :xl="5"
             ><span>{{ info?.T_remark! }}</span></el-col
@@ -130,6 +218,21 @@ onMounted(() => {
         <el-button type="primary" round @click="router.back()">返回</el-button>
       </div>
     </div>
+    <Drawer ref="drawerSnRef" :handleClose="callbackSnDrawer" size="30%">
+      <el-table
+        :data="tableSnData"
+        style="width: 100%; height: 99%"
+        :header-cell-style="{
+          background: '#dedfe0',
+          height: '50px'
+        }"
+      >
+        <template v-for="item in snColumns" :key="item">
+          <el-table-column v-if="item.type === 'index'" v-bind="item" />
+          <el-table-column v-if="item.prop" v-bind="item" />
+        </template>
+      </el-table>
+    </Drawer>
   </div>
 </template>
 

src/views/storehouse/outStock/ReceiveOutStock.vue

@@ -76,7 +76,7 @@ const columns = [
 const countBlurHandle = () => {
   form.T_product = tableData.value.map(item => {
     if (!item.count && item.T_relation_sn !== 1) return undefined
-    return `${item.Id},${item.count}|`
+    return `${item.T_product_id},${item.count}|`
   })
 }
 const getDeviceSnToProduct = () => {
@@ -89,16 +89,16 @@ const getDeviceSnToProduct = () => {
     let product: any = ''
     if (item.T_relation_sn === 1) {
       DeviceSnData?.forEach((value: any, key: number) => {
-        if (item.Id === key) {
+        if (item.T_product_id === key) {
           let str = ''
           value.forEach(
             (snObj: any, index: number, arr: any[]) => (str += `${snObj.sn}${index === arr.length - 1 ? '' : ','}`)
           )
-          product = `${item.Id}-${item.count}-${str}`
+          product = `${item.T_product_id}-${item.count}-${str}`
         }
       })
     } else {
-      product = `${item.Id}-${item.count}-`
+      product = `${item.T_product_id}-${item.count}-`
     }
     return product + '|'
   })
@@ -193,7 +193,7 @@ const addDeviceSn = (id: number) => {
  */
 const autoGetCount = (length: number, id: number) => {
   tableData.value.forEach((item: any) => {
-    if (item.Id === id) {
+    if (item.T_product_id === id) {
       item.count = length
     }
   })
@@ -247,7 +247,7 @@ const options = globalStore.GET_depotList
           type="text"
           placeholder="请选择经办人"
           class="w-50"
-          @focus="selectApprover"
+          @click="selectApprover"
         />
       </el-form-item>
       <el-form-item label="出库明细：" :label-width="formLabelWidth" prop="T_product">
@@ -281,7 +281,7 @@ const options = globalStore.GET_depotList
                     type="primary"
                     size="small"
                     :icon="CirclePlus"
-                    @click="addDeviceSn(row.Id)"
+                    @click="addDeviceSn(row.T_product_id)"
                     >添加</el-button
                   >
                   <span v-else>-</span>

src/views/storehouse/outStock/SaleOutStock.vue

@@ -97,7 +97,7 @@ const rules = reactive<FormRules>({
 const countBlurHandle = () => {
   form.T_product = tableData.value.map(item => {
     if (!item.count && item.T_product_relation_sn !== 1) return undefined
-    return `${item.Id},${item.count}|`
+    return `${item.T_product_id},${item.count}|`
   })
 }
 const getDeviceSnToProduct = () => {
@@ -110,16 +110,16 @@ const getDeviceSnToProduct = () => {
     let product: any = ''
     if (item.T_product_relation_sn === 1) {
       DeviceSnData?.forEach((value: any, key: number) => {
-        if (item.Id === key) {
+        if (item.T_product_id === key) {
           let str = ''
           value.forEach(
             (snObj: any, index: number, arr: any[]) => (str += `${snObj.sn}${index === arr.length - 1 ? '' : ','}`)
           )
-          product = `${item.Id}-${item.count}-${str}`
+          product = `${item.T_product_id}-${item.count}-${str}`
         }
       })
     } else {
-      product = `${item.Id}-${item.count}-`
+      product = `${item.T_product_id}-${item.count}-`
     }
     return product + '|'
   })
@@ -146,7 +146,7 @@ const addDeviceSn = (id: number) => {
  */
 const autoGetCount = (length: number, id: number) => {
   tableData.value.forEach((item: any) => {
-    if (item.Id === id) {
+    if (item.T_product_id === id) {
       item.count = length
     }
   })
@@ -215,7 +215,8 @@ const AddSaleOutStock = (formEl: FormInstance | undefined) => {
       const res: any = await Storehouse_StockOut_Add({
         User_tokey: globalStore.GET_User_tokey,
         ...form,
-        T_product: form.T_product.join('')
+        T_product: form.T_product.join(''),
+        T_receive: form.T_uuid
       })
       console.log(res)
       if (res.Code === 200) {
@@ -305,7 +306,7 @@ const options = globalStore.GET_depotList
                     type="primary"
                     size="small"
                     :icon="CirclePlus"
-                    @click="addDeviceSn(row.Id)"
+                    @click="addDeviceSn(row.T_product_id)"
                     >添加</el-button
                   >
                   <span v-else>-</span>

src/views/storehouse/sales/Contract.vue

@@ -134,7 +134,11 @@ const searchHandle = () => {
 </template>
 
 <style scoped lang="scss">
+@import '@/styles/var.scss';
+
 .contract {
+  @include f-direction;
+
   :deep(.el-drawer__header) {
     margin-bottom: 0;
   }

src/views/storehouse/sales/ContractDetail.vue

@@ -4,6 +4,7 @@ import { useRoute, useRouter } from 'vue-router'
 import { GlobalStore } from '@/stores/index'
 import { fnMd5 } from '@/utils/common'
 import { ElMessage } from 'element-plus'
+import Drawer from '@/components/Drawer/index.vue'
 import { Storehouse_Contract_Get, Storehouse_Contract_Approval } from '@/api/storehouse/index'
 
 interface InfoType {
@@ -23,11 +24,13 @@ interface InfoType {
   T_type: number
 }
 
+const route = useRoute()
+const router = useRouter()
 const isSale = ref(false)
+const tableSnData = ref<any[]>([])
 const info = ref<InfoType | undefined>()
 const globalStore = GlobalStore()
-const route = useRoute()
-const router = useRouter()
+const drawerSnRef = ref<InstanceType<typeof Drawer> | null>(null)
 
 const columns = [
   { type: 'index', label: '序号', width: 80, align: 'center ' },
@@ -41,6 +44,12 @@ const columns = [
   { label: '已出库数量', prop: 'T_product_out', align: 'center ' },
   { prop: 'operation', label: '操作', width: 100, fixed: 'right', align: 'center ' }
 ]
+
+const snColumns = [
+  { type: 'index', label: '序号', width: 80, align: 'center ' },
+  { label: 'SN', prop: 'sn', align: 'center ' }
+]
+
 const getStorehouseContractGet = async () => {
   const res: any = await Storehouse_Contract_Get({ User_tokey: globalStore.GET_User_tokey, T_number: route.params.id })
   if (res.Code === 200) {
@@ -73,6 +82,21 @@ const getState = (val: number, type: string) => {
 }
 const tableData = ref<any[]>([])
 
+/**
+ * 回调
+ */
+const callbackSnDrawer = (done: () => void) => done()
+
+const previewSn = (devicelist: string[]) => {
+  drawerSnRef.value?.openDrawer()
+  if (!devicelist) return
+  tableSnData.value = devicelist.map((item: string) => {
+    return {
+      sn: item
+    }
+  })
+}
+
 onMounted(() => {
   const { params } = route
   if (params.type === fnMd5('contract')) {
@@ -151,7 +175,12 @@ onUnmounted(() => {
                 </el-table-column>
                 <el-table-column v-bind="item" v-if="item.fixed === 'right'">
                   <template #default="{ row }">
-                    <el-button type="primary" :disabled="!row.T_product_relation_sn">查看</el-button>
+                    <el-button
+                      type="primary"
+                      :disabled="!row.T_product_relation_sn"
+                      @click="previewSn(row.T_device_list)"
+                      >查看</el-button
+                    >
                   </template>
                 </el-table-column>
               </template>
@@ -215,6 +244,21 @@ onUnmounted(() => {
         <el-button type="primary" round @click="router.back()">返回</el-button>
       </div>
     </div>
+    <Drawer ref="drawerSnRef" :handleClose="callbackSnDrawer" size="30%">
+      <el-table
+        :data="tableSnData"
+        style="width: 100%; height: 99%"
+        :header-cell-style="{
+          background: '#dedfe0',
+          height: '50px'
+        }"
+      >
+        <template v-for="item in snColumns" :key="item">
+          <el-table-column v-if="item.type === 'index'" v-bind="item" />
+          <el-table-column v-if="item.prop" v-bind="item" />
+        </template>
+      </el-table>
+    </Drawer>
   </div>
 </template>
 

src/views/storehouse/sales/ContractSale.vue

@@ -71,7 +71,7 @@ const searchHandle = () => {
 </script>
 
 <template>
-  <div class="contract">
+  <div class="contract-sale">
     <TableBase ref="TableRef" :columns="columns" :requestApi="Storehouse_Contract_User_List" :initParam="initParam">
       <template #table-header>
         <div class="input-suffix">
@@ -132,7 +132,11 @@ const searchHandle = () => {
 </template>
 
 <style scoped lang="scss">
-.contract {
+@import '@/styles/var.scss';
+
+.contract-sale {
+  @include f-direction;
+
   :deep(.el-drawer__header) {
     margin-bottom: 0;
   }

src/views/workAttendance/Leave.vue

@@ -93,7 +93,7 @@ const tableRowClassName = (data: any): any => {
 
 <template>
   <div class="Leave">
-    <div style="width: 290px">
+    <div style="width: 290px" class="Leave-table">
       <TableBase
         ref="TableRef"
         :columns="columns"
@@ -161,9 +161,15 @@ const tableRowClassName = (data: any): any => {
 </template>
 
 <style scoped lang="scss">
+@import '@/styles/var.scss';
+
 .Leave {
+  height: 100%;
   display: flex;
   overflow: hidden;
+  .Leave-table {
+    @include f-direction;
+  }
   .b-show-0 {
     box-shadow: none;
   }

src/views/workAttendance/MyLeave.vue

@@ -201,7 +201,7 @@ onMounted(() => {
 </script>
 
 <template>
-  <div>
+  <div class="my-leave">
     <TableBase ref="TableRef" :columns="columns" :requestApi="Leave_User_list" :initParam="initParam">
       <template #table-header>
         <el-row :gutter="24" class="input-suffix">
@@ -325,6 +325,10 @@ onMounted(() => {
   </div>
 </template>
 <style scoped lang="scss">
+@import '@/styles/var.scss';
+.my-leave {
+  @include f-direction;
+}
 .input-suffix {
   width: 100%;
 }

src/views/workAttendance/MyOvertime.vue

@@ -201,7 +201,7 @@ const onResize = () => {
 
 <template>
   <el-row :gutter="24" class="h-100">
-    <el-col :span="12" class="padding-right-0 h-100">
+    <el-col :span="12" class="padding-right-0 h-100 my-overtime-table-left">
       <TableBase
         ref="TableRef"
         :columns="columns"
@@ -244,7 +244,7 @@ const onResize = () => {
         </template>
       </TableBase></el-col
     >
-    <el-col :span="12" class="h-100" style="overflow: hidden">
+    <el-col :span="12" class="h-100 my-overtime-table-right" style="overflow: hidden">
       <TableBase
         ref="TableStatRef"
         :columns="columns_Stat"
@@ -368,6 +368,12 @@ const onResize = () => {
 </template>
 
 <style scoped lang="scss">
+@import '@/styles/var.scss';
+.my-overtime-table-left,
+.my-overtime-table-right {
+  @include f-direction;
+}
+
 .table-header {
   width: 100%;
   display: flex;

src/views/workAttendance/Overtime.vue

@@ -98,8 +98,8 @@ const tableRowClassName = (data: any): any => {
 </script>
 
 <template>
-  <div class="Leave">
-    <div style="width: 290px">
+  <div class="Overtime">
+    <div style="width: 290px" class="Overtime-table">
       <TableBase
         ref="TableRef"
         :columns="columns"
@@ -185,8 +185,12 @@ const tableRowClassName = (data: any): any => {
 </template>
 
 <style scoped lang="scss">
-.Leave {
-  display: flex;
+@import '@/styles/var.scss';
+.Overtime {
+  height: 100%;
+  .Overtime-table {
+    @include f-direction;
+  }
   overflow: hidden;
   .img {
     width: 200px;

src/views/workAttendance/RecordsFinance.vue

@@ -230,30 +230,7 @@ const searchHandle = () => TableRef.value?.searchTable()
 
 <template>
   <div class="RecordsFinance">
-    <!-- <div style="width: 290px; display: flex; padding: 20px; background: #fff; flex-direction: column">
-      <el-table
-        class="h-100"
-        style="width: 100%; height: 100%; flex: 1"
-        :data="TableData"
-        @row-click="getSalaryParams"
-        :row-style="tableRowClassName"
-      >
-        <el-table-column
-          align="center"
-          v-for="item in columns"
-          :label="item.label"
-          :prop="item.prop"
-          :key="item.prop"
-        />
-      </el-table>
-      <Pagination
-        layout="total, prev, pager, next"
-        :pageable="pageable"
-        :handleSizeChange="handleSizeChange"
-        :handleCurrentChange="handleCurrentChange"
-      />
-    </div> -->
-    <div style="width: 290px">
+    <div style="width: 290px" class="RecordsFinance-table">
       <TableBase
         ref="TableRef"
         :columns="columns"
@@ -379,7 +356,11 @@ const searchHandle = () => TableRef.value?.searchTable()
 </template>
 
 <style scoped lang="scss">
+@import '@/styles/var.scss';
 .RecordsFinance {
+  .RecordsFinance-table {
+    @include f-direction;
+  }
   display: flex;
   height: 100%;
   overflow: hidden;

src/views/workAttendance/records/Records.vue

@@ -209,7 +209,7 @@ const searchHandle = () => TableRef.value?.searchTable()
         :handleCurrentChange="handleCurrentChange"
       />
     </div> -->
-    <div style="width: 290px">
+    <div style="width: 290px" class="records-table">
       <TableBase
         ref="TableRef"
         :columns="columns"
@@ -384,4 +384,9 @@ const searchHandle = () => TableRef.value?.searchTable()
 
 <style scoped lang="scss">
 @import './index.scss';
+@import '@/styles/var.scss';
+
+.records-table {
+  @include f-direction;
+}
 </style>

vite.config.ts

@@ -22,22 +22,22 @@ export default defineConfig(({ mode }: ConfigEnv): UserConfig => {
     },
     server: {
       open: true,
-      host: '0.0.0.0'
-      // proxy: {
-      //   '/api': {
-      //     target: 'https://erp.baozhida.cn',
-      //     changeOrigin: true,
-      //     rewrite: path => path.replace(/^\/api/, '/testapi')
-      //   },
-      //   '/testapi': {
-      //     target: 'https://erp.baozhida.cn',
-      //     changeOrigin: true
-      //   },
-      //   '/ams': {
-      //     target: 'http://erp.baozhida.cn',
-      //     changeOrigin: true
-      //   }
-      // }
+      host: '0.0.0.0',
+      proxy: {
+        '/api': {
+          target: 'https://erp.baozhida.cn',
+          changeOrigin: true,
+          rewrite: path => path.replace(/^\/api/, '/testapi')
+        },
+        '/testapi': {
+          target: 'https://erp.baozhida.cn',
+          changeOrigin: true
+        },
+        '/ams': {
+          target: 'http://erp.baozhida.cn',
+          changeOrigin: true
+        }
+      }
     },
     plugins: [
       vue(),