订单管理

package.json

@@ -20,12 +20,11 @@
     "url": "https://gitee.com/"
   },
   "dependencies": {
-    "@ag-grid-community/client-side-row-model": "^32.3.4",
     "@element-plus/icons-vue": "2.3.1",
+    "@handsontable/vue3": "^15.2.0",
     "@highlightjs/vue-plugin": "2.1.0",
     "@vueup/vue-quill": "1.2.0",
     "@vueuse/core": "11.3.0",
-    "ag-grid-vue3": "^32.3.4",
     "animate.css": "4.1.1",
     "await-to-js": "3.0.0",
     "axios": "1.7.8",
@@ -36,6 +35,7 @@
     "element-plus": "2.8.8",
     "file-saver": "2.0.5",
     "fuse.js": "7.0.0",
+    "handsontable": "^15.2.0",
     "highlight.js": "11.9.0",
     "image-conversion": "2.1.1",
     "js-cookie": "3.0.5",

src/api/amz/logisticsQuote/index.ts

@@ -42,6 +42,17 @@ export const getLogisticsQuote = (id: string | number): AxiosPromise<LogisticsQu
   });
 };
 
+/**
+ * 查询 今天的报价情况
+ * @param id
+ */
+export const getTodayQuoteStatus = () => {
+  return request({
+    url: '/amz/logisticsQuote/today-quote-status',
+    method: 'get'
+  });
+};
+
 /**
  * 新增物流报价
  * @param data

src/utils/permission.ts

@@ -1,51 +1,56 @@
-import useUserStore from '@/store/modules/user';
+// src/utils/permission.ts
+import { useUserStore } from '@/store/modules/user';
 
-/**
+// 权限校验方法（替代指令的核心逻辑）
- * 字符权限校验
+export const checkPermi = (perms: string[]): boolean => {
- * @param {Array} value 校验值
+  const { permissions } = useUserStore();
- * @returns {Boolean}
- */
-export const checkPermi = (value: any) => {
-  if (value && value instanceof Array && value.length > 0) {
-    const permissions = useUserStore().permissions;
-    const permissionDatas = value;
-    const all_permission = '*:*:*';
 
-    const hasPermission = permissions.some((permission) => {
+  if (!Array.isArray(perms) || perms.length === 0) {
-      return all_permission === permission || permissionDatas.includes(permission);
+    throw new Error("权限参数格式错误，示例: checkPermi(['sys:user:edit'])");
-    });
-
-    if (!hasPermission) {
-      return false;
-    }
-    return true;
-  } else {
-    console.error(`need roles! Like checkPermi="['system:user:add','system:user:edit']"`);
-    return false;
   }
+
+  return permissions.some((p) => p === '*:*:*' || perms.includes(p));
 };
 
-/**
+// 角色校验方法
- * 角色权限校验
+export const checkRoles = (roles: string[]): boolean => {
- * @param {Array} value 校验值
+  const { roles: userRoles } = useUserStore();
- * @returns {Boolean}
- */
-export const checkRole = (value: any): boolean => {
-  if (value && value instanceof Array && value.length > 0) {
-    const roles = useUserStore().roles;
-    const permissionRoles = value;
-    const super_admin = 'admin';
 
-    const hasRole = roles.some((role) => {
+  if (!Array.isArray(roles) || roles.length === 0) {
-      return super_admin === role || permissionRoles.includes(role);
+    throw new Error("角色参数格式错误，示例: checkRoles(['admin'])");
-    });
-
-    if (!hasRole) {
-      return false;
-    }
-    return true;
-  } else {
-    console.error(`need roles! Like checkRole="['admin','editor']"`);
-    return false;
   }
+
+  return userRoles.some((r) => r === 'superadmin' || r === 'admin' || roles.includes(r));
+};
+
+// 操作列权限渲染器
+export const actionRenderer: Handsontable.renderers.Base = (instance, td, row, col, prop, value, cellProperties) => {
+  const rowData = instance.getDataAtRow(row);
+  const canEdit = checkPermi(['amz:logisticsOrderDetail:edit']);
+  const canDelete = checkPermi(['amz:logisticsOrderDetail:remove']);
+
+  td.innerHTML = `
+    <div class="htCenter">
+      ${
+        canEdit
+          ? `
+        <button class="btn-edit" data-row="${row}">
+          <i class="el-icon-edit"></i>
+        </button>
+      `
+          : ''
+      }
+      ${
+        canDelete
+          ? `
+        <button class="btn-delete" data-row="${row}">
+          <i class="el-icon-delete"></i>
+        </button>
+      `
+          : ''
+      }
+    </div>
+  `;
+
+  return td;
 };

src/views/amz/inquiryRequest/index.vue

@@ -109,7 +109,7 @@
         <el-table-column type="selection" width="55" align="center" />
         <el-table-column label="询价单号" align="center" prop="inquiryNo" />
         <el-table-column label="发起人id" align="center" prop="requesterId" />
-        <el-table-column label="目标物流商ID列表" align="center" prop="targetProviders" />
+        <!--        <el-table-column label="目标物流商ID列表" align="center" prop="targetProviders" />-->
         <el-table-column label="目的地" align="center" prop="destination" />
         <el-table-column label="运输方式" align="center" prop="transportChannel" />
         <el-table-column label="询价状态" align="center" prop="inquiryStatus" />
@@ -320,6 +320,7 @@ const initFormData: InquiryRequestForm = {
   effectiveEndTime: undefined
 };
 const initQuoteForm: LogisticsMostQuoteForm = {
+  id: undefined,
   userId: undefined,
   destination: undefined,
   transportChannel: undefined,
@@ -468,6 +469,10 @@ const submitQuoteForm = async () => {
   console.log('submitQuoteForm', data.quoteForm);
   const res = await addMostLogisticsQuote(data.quoteForm);
   console.log('submitQuoteForm', res);
+  if (res.code === 200) {
+    ElMessage.success('提交成功');
+    quoteDialog.visible = false;
+  }
 };
 
 const saveQuoteForm = () => {
@@ -492,6 +497,7 @@ const handleDelete = async (row?: InquiryRequestVO) => {
 const handleSubmit = async (row?: InquiryRequestVO) => {
   console.log('handleSubmit');
   console.log(row.channelId);
+  data.quoteForm.id = row.id;
   data.quoteForm.destination = row.destination;
   data.quoteForm.transportChannel = row.transportChannel;
   data.quoteForm.channelId = row.channelId;

src/views/amz/logisticsChannel/index.vue

@@ -75,9 +75,21 @@
         <el-table-column label="物流商用户ID" align="center" prop="userId" />
         <el-table-column label="渠道名称" align="center" prop="channelName" />
         <el-table-column label="渠道描述" align="center" prop="description" />
-        <el-table-column label="渠道类型" align="center" prop="channelType" />
+        <el-table-column label="渠道类型" align="center" prop="channelType">
-        <el-table-column label="国家" align="center" prop="country" />
+          <template #default="scope">
-        <el-table-column label="运输方式" align="center" prop="shippingMethod" />
+            <dict-tag :options="biz_channel_type" :value="scope.row.channelType" />
+          </template>
+        </el-table-column>
+        <el-table-column label="国家" align="center" prop="country">
+          <template #default="scope">
+            <dict-tag :options="biz_country" :value="scope.row.country" />
+          </template>
+        </el-table-column>
+        <el-table-column label="运输方式" align="center" prop="shippingMethod">
+          <template #default="scope">
+            <dict-tag :options="biz_shipping_method" :value="scope.row.shippingMethod" />
+          </template>
+        </el-table-column>
         <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
           <template #default="scope">
             <el-tooltip content="修改" placement="top">
@@ -108,7 +120,7 @@
         </el-form-item>
         <el-form-item label="运输方式" prop="shippingMethod">
           <el-select v-model="form.shippingMethod" clearable placeholder="运输方式">
-            <el-option v-for="dict in biz_channel_type" :key="dict.value" :label="dict.label" :value="dict.value" />
+            <el-option v-for="dict in biz_shipping_method" :key="dict.value" :label="dict.label" :value="dict.value" />
           </el-select>
         </el-form-item>
       </el-form>
@@ -138,6 +150,8 @@ const { biz_country } = toRefs<any>(proxy?.useDict('biz_country'));
 
 const { biz_channel_type } = toRefs<any>(proxy?.useDict('biz_channel_type'));
 
+const { biz_shipping_method } = toRefs<any>(proxy?.useDict('biz_shipping_method'));
+
 const logisticsChannelList = ref<LogisticsChannelVO[]>([]);
 const buttonLoading = ref(false);
 const loading = ref(true);

src/views/amz/logisticsOrder/index.vue

@@ -74,7 +74,6 @@
 
       <el-table v-loading="loading" :data="logisticsOrderList" @selection-change="handleSelectionChange">
         <el-table-column type="selection" width="55" align="center" />
-        <el-table-column label="主键" align="center" prop="id" />
         <el-table-column label="FBA货件编号" align="center" prop="fbaShipmentId" />
         <el-table-column label="订单编号" align="center" prop="orderId" />
         <el-table-column label="物流商ID" align="center" prop="logisticsProviderId" />
@@ -92,23 +91,36 @@
         <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
           <template #default="scope">
             <el-tooltip content="修改" placement="top">
-              <el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)" v-hasPermi="['amz:logisticsOrder:edit']"></el-button>
+              <el-button
+                link
+                type="primary"
+                icon="Edit"
+                @click="handleUpdate(scope.row)"
+                v-hasRoles="['superadmin']"
+                v-hasPermi="['amz:logisticsOrder:edit']"
+              ></el-button>
             </el-tooltip>
             <el-tooltip content="删除" placement="top">
               <el-button link type="primary" icon="Delete" @click="handleDelete(scope.row)" v-hasPermi="['amz:logisticsOrder:remove']"></el-button>
             </el-tooltip>
+            <el-tooltip content="查看订单明细" placement="top">
+              <el-button  type="primary" @click="openDetail(scope.row)" v-hasRoles="['wuliu']"> 编辑订单明细</el-button>
+            </el-tooltip>
           </template>
         </el-table-column>
       </el-table>
 
-      <pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize" @pagination="getList" />
+      <pagination
+        v-show="total > 0"
+        :total="detailTotal"
+        v-model:page="queryDetailParams.pageNum"
+        v-model:limit="queryDetailParams.pageSize"
+        @pagination="getList"
+      />
     </el-card>
     <!-- 添加或修改物流订单对话框 -->
     <el-dialog :title="dialog.title" v-model="dialog.visible" width="500px" append-to-body>
       <el-form ref="logisticsOrderFormRef" :model="form" :rules="rules" label-width="80px">
-        <el-form-item label="主键" prop="id">
-          <el-input v-model="form.id" placeholder="请输入主键" />
-        </el-form-item>
         <el-form-item label="FBA货件编号" prop="fbaShipmentId">
           <el-input v-model="form.fbaShipmentId" placeholder="请输入FBA货件编号" />
         </el-form-item>
@@ -154,30 +166,280 @@
         </div>
       </template>
     </el-dialog>
+
+    <el-drawer size="80%" v-model="hotTableDrawer" :direction="'ttb'">
+      <template #header>
+        <h4>订单明细</h4>
+      </template>
+      <template #default>
+        <HotTable class="hot-container" ref="hotTable" :settings="hotSettings" :data="processedData" :key="tableKey"></HotTable>
+        <pagination
+          v-show="detailTotal > 0"
+          :total="detailTotal"
+          v-model:page="queryParams.pageNum"
+          v-model:limit="queryParams.pageSize"
+          @pagination="getDetailList"
+        />
+      </template>
+      <template #footer>
+        <div style="flex: auto">
+          <el-button @click="cancelDataClick">cancel</el-button>
+          <el-button type="primary" @click="submitDataClick">confirm</el-button>
+        </div>
+      </template>
+    </el-drawer>
   </div>
 </template>
 
 <script setup name="LogisticsOrder" lang="ts">
-import {
+import { listLogisticsOrder, getLogisticsOrder, delLogisticsOrder, addLogisticsOrder, updateLogisticsOrder } from '@/api/amz/logisticsOrder';
-  listLogisticsOrder,
-  getLogisticsOrder,
-  delLogisticsOrder,
-  addLogisticsOrder,
-  updateLogisticsOrder,
-  createOrder
-} from '@/api/amz/logisticsOrder';
 import { LogisticsOrderVO, LogisticsOrderQuery, LogisticsOrderForm } from '@/api/amz/logisticsOrder/types';
+import { registerAllModules } from 'handsontable/registry';
+import { computed, ref, watch } from 'vue';
+import { HotTable } from '@handsontable/vue3';
+import { checkPermi } from '@/utils/permission';
+import { LogisticsOrderDetailVO } from '@/api/amz/logisticsOrderDetail/types';
+import { listLogisticsOrderDetail } from '@/api/amz/logisticsOrderDetail';
+import 'handsontable/dist/handsontable.full.min.css';
 
 const { proxy } = getCurrentInstance() as ComponentInternalInstance;
 
+// 初始化注册所有模块
+registerAllModules();
+
+// 表格实例引用
+const hotTable = ref<InstanceType<typeof HotTable>>();
+const tableKey = ref(0);
+const logisticsOrderDetailList = ref<LogisticsOrderDetailVO[]>([]);
+const logisticsOrderDetailFormRef = ref<ElFormInstance>();
+
+// 处理后的表格数据（包含派生字段）
+const processedData = computed(() => {
+  return logisticsOrderDetailList.value.map((item) => ({
+    ...item,
+    weightDiff: item.logisticsWeight - item.supplierWeight,
+    estimatedDeliveryDateFormatted: proxy.parseTime(item.estimatedDeliveryDate, '{y}-{m}-{d}'),
+    actualDeliveryDateFormatted: proxy.parseTime(item.actualDeliveryDate, '{y}-{m}-{d}')
+  }));
+});
+
+const hotTableDrawer = ref(false);
+
+// 表格配置-------
+const hotSettings = ref({
+  licenseKey: 'non-commercial-and-evaluation',
+  manualColumnResize: true, // 手动调整列宽默认 false
+  rowHeaders: false, // 关闭行号
+  filters: true, // 启用筛选
+  // dropdownMenu: true, // 启用菜单
+  // contextMenu: true, // 启用右键菜单
+  height: 'auto', // 初始高度
+  manualRowResize: true, // 允许行高调整
+  autoWrapRow: true, // 自动换行
+  multiSelect: true, // 多选支持
+  stretchH: 'all', // 列宽自适应
+  afterGetColHeader: (col: number, th: HTMLElement) => {
+    const columnDef = hotSettings.value.columns[col];
+    const isEditable = !columnDef?.readOnly; // 判断是否可编辑
+
+    // 添加可编辑标识
+    if (isEditable) {
+      th.style.backgroundColor = '#f0f9eb'; // Element Plus 成功色浅版
+      th.style.borderLeft = '3px solid #67c23a';
+      th.innerHTML = `
+        ${th.innerText}
+      `;
+    }
+  },
+  afterChange: (changes) => {
+    if (!changes) return;
+    console.log('changes:', changes);
+    // changes.forEach(([row, prop, oldVal, newVal]) => {
+    //   console.log('修改的行:', row);
+    //   console.log('修改的列:', prop);
+    //   console.log('旧值:', oldVal);
+    //   console.log('新值:', newVal);
+    // });
+  },
+  colHeaders: [
+    '选择',
+    '订单号',
+    'FBA货件编号',
+    'FBA箱号',
+    '物流商ID',
+    '物流商名称',
+    '物流渠道',
+    '目的地仓库',
+    '计划数量',
+    '实际货件数量',
+    '物流追踪号',
+    '供应商称重',
+    '物流商计重',
+    '称重差异',
+    '物流单价',
+    '物流计价重量',
+    '其他物流费用',
+    '费用合计',
+    '物流状态',
+    '预计签收日期',
+    '实际签收日期',
+    '运输时效',
+    '操作'
+  ],
+  columns: [
+    {
+      // 选择列
+      type: 'checkbox',
+      className: 'htCenter',
+      width: 55
+    },
+    { data: 'orderId', className: 'htCenter', readOnly: true },
+    { data: 'fbaShipmentId', className: 'htCenter', readOnly: true },
+    // ... 其他数据列配置
+    { data: 'fbaBoxNumber', className: 'htCenter', readOnly: true }, // FBA箱号
+    { data: 'logisticsProviderId', className: 'htCenter', readOnly: true }, // 物流商ID
+    { data: 'logisticsProviderName', className: 'htCenter', readOnly: true }, // 物流商名称
+    { data: 'logisticsChannel', className: 'htCenter', readOnly: true }, // 物流渠道
+    { data: 'destinationWarehouse', className: 'htCenter', readOnly: true }, // 目的地仓库
+    { data: 'plannedQuantity', className: 'htCenter', readOnly: true }, // 计划数量
+    { data: 'actualShipmentQuantity', className: 'htCenter', readOnly: true }, // 实际货件数量
+    { data: 'trackingNumber', className: 'htCenter', readOnly: false }, // 物流追踪号
+    { data: 'supplierWeight', className: 'htCenter', readOnly: true }, // 供应商称重
+    { data: 'logisticsWeight', className: 'htCenter', readOnly: true }, // 物流商计重
+    {
+      data: 'weightDiff', // 称重差异
+      className: 'htCenter',
+      renderer: (instance, td) => {
+        // 添加差异颜色标识
+        const value = instance.getDataAtCell(td.row, td.col);
+        td.style.color = value > 0 ? '#67C23A' : '#F56C6C';
+        td.innerText = value;
+        return td;
+      }
+    },
+    { data: 'pricePerKg', className: 'htCenter', readOnly: true }, // 物流单价
+    { data: 'logisticsBillingWeight', className: 'htCenter', readOnly: true }, // 物流计价重量
+    { data: 'otherLogisticsFee', className: 'htCenter', readOnly: true }, // 其他物流费用
+    { data: 'totalFee', className: 'htCenter', readOnly: true }, // 费用合计
+    {
+      data: 'logisticsStatus',
+      className: 'htCenter',
+      readOnly: false,
+      type: 'dropdown',
+      source: ['水果', '蔬菜', '肉类']
+    }, // 物流状态
+    {
+      // 预计签收日期
+      data: 'estimatedDeliveryDateFormatted',
+      className: 'htCenter',
+      width: 180
+    },
+    {
+      // 实际签收日期
+      data: 'actualDeliveryDateFormatted',
+      className: 'htCenter',
+      width: 180
+    },
+    {
+      // 操作列
+      // renderer: (instance, td, row, col, prop, value, cellProperties) => {
+      //   const canEdit = checkPermi(['amz:logisticsOrderDetail:edit']);
+      //   const canDelete = checkPermi(['amz:logisticsOrderDetail:remove']);
+      //
+      //   td.innerHTML = `
+      //     <div class="action-buttons">
+      //       ${
+      //         canEdit
+      //           ? `
+      //         <button
+      //           class="edit-btn"
+      //           data-row="${row}"
+      //           :disabled="buttonLoading"
+      //         >
+      //           <i class="icon-edit"></i>
+      //         </button>
+      //       `
+      //           : ''
+      //       }
+      //       ${
+      //         canDelete
+      //           ? `
+      //         <button
+      //           class="delete-btn"
+      //           data-row="${row}"
+      //           :disabled="buttonLoading"
+      //         >
+      //           <i class="icon-delete"></i>
+      //         </button>
+      //       `
+      //           : ''
+      //       }
+      //     </div>
+      //   `;
+      //   td.className = 'htCenter';
+      //   return td;
+      // },
+      readOnly: true,
+      width: 150
+    }
+  ],
+  afterOnCellMouseDown: (event, coords) => {
+    if (buttonLoading.value) return;
+
+    if (coords.col === 21) {
+      const rowData = logisticsOrderDetailList.value[coords.row];
+      const target = event.target.closest('button');
+
+      if (target?.classList.contains('edit-btn')) {
+        buttonLoading.value = true;
+        handleUpdate(rowData).finally(() => {
+          buttonLoading.value = false;
+        });
+      } else if (target?.classList.contains('delete-btn')) {
+        buttonLoading.value = true;
+        handleDelete(rowData).finally(() => {
+          buttonLoading.value = false;
+        });
+      }
+    }
+  },
+  contextMenu: {
+    items: {
+      editRow: {
+        name: '修改',
+        disabled: () => !checkPermi(['amz:logisticsOrderDetail:edit']) || buttonLoading.value,
+        callback: (_, selection) => {
+          const rowData = logisticsOrderDetailList.value[selection[0].start.row];
+          buttonLoading.value = true;
+          handleUpdate(rowData).finally(() => {
+            buttonLoading.value = false;
+          });
+        }
+      }
+    }
+  }
+});
+
+// 监听数据变化
+watch(
+  logisticsOrderDetailList,
+  () => {
+    tableKey.value++;
+  },
+  { deep: true }
+);
+
 const logisticsOrderList = ref<LogisticsOrderVO[]>([]);
 const buttonLoading = ref(false);
 const loading = ref(true);
+const detailLoading = ref(true);
+
 const showSearch = ref(true);
 const ids = ref<Array<string | number>>([]);
 const single = ref(true);
 const multiple = ref(true);
 const total = ref(0);
+const detailTotal = ref(0);
 
 const queryFormRef = ref<ElFormInstance>();
 const logisticsOrderFormRef = ref<ElFormInstance>();
@@ -217,6 +479,11 @@ const data = reactive<PageData<LogisticsOrderForm, LogisticsOrderQuery>>({
     shelfTimeliness: undefined,
     params: {}
   },
+  queryDetailParams: {
+    pageNum: 1,
+    pageSize: 10,
+    orderId: undefined
+  },
   rules: {
     id: [{ required: true, message: '主键不能为空', trigger: 'blur' }],
     fbaShipmentId: [{ required: true, message: 'FBA货件编号不能为空', trigger: 'blur' }],
@@ -232,9 +499,7 @@ const data = reactive<PageData<LogisticsOrderForm, LogisticsOrderQuery>>({
   }
 });
 
-const { queryParams, form, rules } = toRefs(data);
+const { queryParams, queryDetailParams, form, rules } = toRefs(data);
-
-
 
 /** 查询物流订单列表 */
 const getList = async () => {
@@ -245,6 +510,14 @@ const getList = async () => {
   loading.value = false;
 };
 
+const getDetailList = async () => {
+  detailLoading.value = true;
+  const res = await listLogisticsOrderDetail(queryParams.value);
+  logisticsOrderDetailList.value = res.rows;
+  detailTotal.value = res.total;
+  detailLoading.value = false;
+};
+
 /** 取消按钮 */
 const cancel = () => {
   reset();
@@ -319,6 +592,19 @@ const handleDelete = async (row?: LogisticsOrderVO) => {
   await getList();
 };
 
+/** 查看详情按钮操作 */
+const openDetail = async (row?: LogisticsOrderVO) => {
+  hotTableDrawer.value = true;
+  const _ids = row?.id || ids.value;
+  console.log(_ids);
+  detailLoading.value = true;
+  queryDetailParams.value.orderId = row.orderId;
+  const res = await listLogisticsOrderDetail(queryDetailParams.value);
+  logisticsOrderDetailList.value = res.rows;
+  detailTotal.value = res.total;
+  detailLoading.value = false;
+};
+
 /** 导出按钮操作 */
 const handleExport = () => {
   proxy?.download(

src/views/amz/logisticsOrderDetail/index.vue

@@ -104,71 +104,82 @@
           <el-col :span="1.5">
             <el-button type="warning" plain icon="Download" @click="handleExport" v-hasPermi="['amz:logisticsOrderDetail:export']">导出 </el-button>
           </el-col>
+          <el-col :span="1.5">
+            <el-button type="warning" plain icon="Download" @click="openEdit" v-hasPermi="['amz:logisticsOrderDetail:export']"
+              >打开编辑模式
+            </el-button>
+          </el-col>
           <right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
         </el-row>
       </template>
 
-      <!--      <el-table v-loading="loading" :data="logisticsOrderDetailList" @selection-change="handleSelectionChange">-->
+      <el-table v-loading="loading" :data="logisticsOrderDetailList" @selection-change="handleSelectionChange">
-      <!--        <el-table-column type="selection" width="55" align="center" />-->
+        <el-table-column type="selection" width="55" align="center" />
-      <!--        <el-table-column label="订单号" align="center" prop="orderId" />-->
+        <el-table-column label="订单号" align="center" prop="orderId" />
-      <!--        <el-table-column label="FBA货件编号" align="center" prop="fbaShipmentId" />-->
+        <el-table-column label="FBA货件编号" align="center" prop="fbaShipmentId" />
-      <!--        <el-table-column label="FBA箱号" align="center" prop="fbaBoxNumber" />-->
+        <el-table-column label="FBA箱号" align="center" prop="fbaBoxNumber" />
-      <!--        <el-table-column label="物流商ID" align="center" prop="logisticsProviderId" />-->
+        <el-table-column label="物流商ID" align="center" prop="logisticsProviderId" />
-      <!--        <el-table-column label="物流商名称" align="center" prop="logisticsProviderName" />-->
+        <el-table-column label="物流商名称" align="center" prop="logisticsProviderName" />
-      <!--        <el-table-column label="物流渠道" align="center" prop="logisticsChannel" />-->
+        <el-table-column label="物流渠道" align="center" prop="logisticsChannel" />
-      <!--        <el-table-column label="目的地仓库" align="center" prop="destination" />-->
+        <el-table-column label="目的地仓库" align="center" prop="destination" />
-      <!--        <el-table-column label="计划数量" align="center" prop="plannedQuantity" />-->
+        <el-table-column label="计划数量" align="center" prop="plannedQuantity" />
-      <!--        <el-table-column label="实际货件数量" align="center" prop="shipmentQuantity" />-->
+        <el-table-column label="实际货件数量" align="center" prop="shipmentQuantity" />
-      <!--        <el-table-column label="物流追踪号" align="center" prop="trackingNumber" />-->
+        <el-table-column label="物流追踪号" align="center" prop="trackingNumber" />
-      <!--        <el-table-column label="供应商称重" align="center" prop="supplierWeight" />-->
+        <el-table-column label="供应商称重" align="center" prop="supplierWeight" />
-      <!--        <el-table-column label="物流商计重" align="center" prop="logisticsWeight" />-->
+        <el-table-column label="物流商计重" align="center" prop="logisticsWeight" />
-      <!--        <el-table-column label="称重差异" align="center" prop="weightDiff" />-->
+        <el-table-column label="称重差异" align="center" prop="weightDiff" />
-      <!--        <el-table-column label="物流单价" align="center" prop="pricePerKg" />-->
+        <el-table-column label="物流单价" align="center" prop="pricePerKg" />
-      <!--        <el-table-column label="物流计价重量" align="center" prop="logisticsCalculationPrice" />-->
+        <el-table-column label="物流计价重量" align="center" prop="logisticsCalculationPrice" />
-      <!--        <el-table-column label="其他物流费用" align="center" prop="otherFee" />-->
+        <el-table-column label="其他物流费用" align="center" prop="otherFee" />
-      <!--        <el-table-column label="费用合计" align="center" prop="totalFee" />-->
+        <el-table-column label="费用合计" align="center" prop="totalFee" />
-      <!--        <el-table-column label="物流状态" align="center" prop="logisticsStatus" />-->
+        <el-table-column label="物流状态" align="center" prop="logisticsStatus" />
-      <!--        <el-table-column label="预计签收日期" align="center" prop="estimatedDeliveryDate" width="180">-->
+        <el-table-column label="预计签收日期" align="center" prop="estimatedDeliveryDate" width="180">
-      <!--          <template #default="scope">-->
+          <template #default="scope">
-      <!--            <span>{{ parseTime(scope.row.estimatedDeliveryDate, '{y}-{m}-{d}') }}</span>-->
+            <span>{{ parseTime(scope.row.estimatedDeliveryDate, '{y}-{m}-{d}') }}</span>
-      <!--          </template>-->
+          </template>
-      <!--        </el-table-column>-->
+        </el-table-column>
-      <!--        <el-table-column label="实际签收日期" align="center" prop="actualDeliveryDate" width="180">-->
+        <el-table-column label="实际签收日期" align="center" prop="actualDeliveryDate" width="180">
-      <!--          <template #default="scope">-->
+          <template #default="scope">
-      <!--            <span>{{ parseTime(scope.row.actualDeliveryDate, '{y}-{m}-{d}') }}</span>-->
+            <span>{{ parseTime(scope.row.actualDeliveryDate, '{y}-{m}-{d}') }}</span>
-      <!--          </template>-->
+          </template>
-      <!--        </el-table-column>-->
+        </el-table-column>
-      <!--        <el-table-column label="运输时效" align="center" prop="timeliness" />-->
+        <el-table-column label="运输时效" align="center" prop="timeliness" />
-      <!--        <el-table-column label="操作" align="center" class-name="small-padding fixed-width">-->
+        <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
-      <!--          <template #default="scope">-->
+          <template #default="scope">
-      <!--            <el-tooltip content="修改" placement="top">-->
+            <el-tooltip content="修改" placement="top">
-      <!--              <el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)" v-hasPermi="['amz:logisticsOrderDetail:edit']"></el-button>-->
+              <el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)" v-hasPermi="['amz:logisticsOrderDetail:edit']"></el-button>
-      <!--            </el-tooltip>-->
+            </el-tooltip>
-      <!--            <el-tooltip content="删除" placement="top">-->
+            <el-tooltip content="删除" placement="top">
-      <!--              <el-button-->
+              <el-button
-      <!--                link-->
+                link
-      <!--                type="primary"-->
+                type="primary"
-      <!--                icon="Delete"-->
+                icon="Delete"
-      <!--                @click="handleDelete(scope.row)"-->
+                @click="handleDelete(scope.row)"
-      <!--                v-hasPermi="['amz:logisticsOrderDetail:remove']"-->
+                v-hasPermi="['amz:logisticsOrderDetail:remove']"
-      <!--              ></el-button>-->
+              ></el-button>
-      <!--            </el-tooltip>-->
+            </el-tooltip>
-      <!--          </template>-->
+          </template>
-      <!--        </el-table-column>-->
+        </el-table-column>
-      <!--      </el-table>-->
+      </el-table>
-
-      <ag-grid-vue
-        class="ag-theme-alpine"
-        style="height: 700px"
-        :columnDefs="columnDefs"
-        :rowData="logisticsOrderDetailList"
-        :rowSelection="'multiple'"
-        @selection-changed="handleSelectionChange"
-        :overlayLoadingTemplate="loadingTemplate"
-      />
 
       <pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize" @pagination="getList" />
     </el-card>
+    <el-drawer size="70%" v-model="hotTableDrawer" :direction="'ttb'">
+      <template #header>
+        <h4>set title by slot</h4>
+      </template>
+      <template #default>
+        <HotTable class="hot-container" ref="hotTable" :settings="hotSettings" :data="processedData" :key="tableKey"></HotTable>
+        <pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize" @pagination="getList" />
+      </template>
+      <template #footer>
+        <div style="flex: auto">
+          <el-button @click="cancelDataClick">cancel</el-button>
+          <el-button type="primary" @click="submitDataClick">confirm</el-button>
+        </div>
+      </template>
+    </el-drawer>
+
     <!-- 添加或修改物流订单明细（按箱子维度存储）对话框 -->
     <el-dialog :title="dialog.title" v-model="dialog.visible" width="500px" append-to-body>
       <el-form ref="logisticsOrderDetailFormRef" :model="form" :rules="rules" label-width="80px">
@@ -266,92 +277,14 @@ import {
   updateLogisticsOrderDetail
 } from '@/api/amz/logisticsOrderDetail';
 import { LogisticsOrderDetailVO, LogisticsOrderDetailQuery, LogisticsOrderDetailForm } from '@/api/amz/logisticsOrderDetail/types';
-
+import { checkPermi } from '@/utils/permission';
-import { AgGridVue } from 'ag-grid-vue3';
+import { ref, computed, watch, onMounted, onUnmounted } from 'vue';
-import 'ag-grid-community/styles/ag-grid.css';
+import { HotTable } from '@handsontable/vue3';
-import 'ag-grid-community/styles/ag-theme-alpine.css';
+import { registerAllModules } from 'handsontable/registry';
-
+import 'handsontable/dist/handsontable.full.min.css';
-import { ClientSideRowModelModule } from '@ag-grid-community/client-side-row-model';
-import { ModuleRegistry } from '@ag-grid-community/core';
-// 注册必需模块
-ModuleRegistry.registerModules([ClientSideRowModelModule]);
-
-// 如果使用其他功能，需要添加对应模块
-// import { RowGroupingModule } from '@ag-grid-enterprise/row-grouping';
-// import { ClipboardModule } from '@ag-grid-enterprise/clipboard';
-
-// ModuleRegistry.registerModules([RowGroupingModule, ClipboardModule]);
 
 const { proxy } = getCurrentInstance() as ComponentInternalInstance;
 
-import { checkPermi } from '@/utils/permission';
-
-const parseTimeGlobal = (value, format) => {
-  return proxy.$parseTime(value, format);
-};
-
-const loadingTemplate = '<span class="ag-overlay-loading-center">加载中...</span>';
-
-const columnDefs = ref([
-  {
-    headerName: '',
-    field: 'selected',
-    checkboxSelection: true,
-    headerCheckboxSelection: true,
-    width: 55,
-    cellStyle: { 'text-align': 'center' }
-  },
-  { headerName: '订单号', field: 'orderId', cellStyle: { 'text-align': 'center' } },
-  { headerName: 'FBA货件编号', field: 'fbaShipmentId', cellStyle: { 'text-align': 'center' } },
-  { headerName: 'FBA箱号', field: 'fbaBoxNumber', cellStyle: { 'text-align': 'center' } },
-  // 其他普通列...
-  {
-    headerName: '预计签收日期',
-    field: 'estimatedDeliveryDate',
-    width: 180,
-    valueFormatter: (params) => (params.value ? parseTimeGlobal(params.value, '{y}-{m}-{d}') : ''),
-    cellStyle: { 'text-align': 'center' }
-  },
-  // 实际签收日期列同理...
-  {
-    headerName: '操作',
-    cellStyle: { 'text-align': 'center' },
-    cellRenderer: (params) => {
-      // 权限检查
-      const canEdit = checkPermi(['amz:logisticsOrderDetail:edit']);
-      const canDelete = checkPermi(['amz:logisticsOrderDetail:remove']);
-
-      // 动态生成 HTML
-      let buttons = '';
-      if (canEdit) {
-        buttons += `
-          <el-tooltip content="修改">
-            <el-button
-              link
-              type="primary"
-              icon="Edit"
-              @click="ctx.handleUpdate(${JSON.stringify(params.data)})"
-            ></el-button>
-          </el-tooltip>
-        `;
-      }
-      if (canDelete) {
-        buttons += `
-          <el-tooltip content="删除">
-            <el-button
-              link
-              type="primary"
-              icon="Delete"
-              @click="ctx.handleDelete(${JSON.stringify(params.data)})"
-            ></el-button>
-          </el-tooltip>
-        `;
-      }
-      return `<div class="cell-action">${buttons}</div>`;
-    }
-  }
-]);
-
 const logisticsOrderDetailList = ref<LogisticsOrderDetailVO[]>([]);
 const buttonLoading = ref(false);
 const loading = ref(true);
@@ -359,11 +292,249 @@ const showSearch = ref(true);
 const ids = ref<Array<string | number>>([]);
 const single = ref(true);
 const multiple = ref(true);
+const hotTableDrawer = ref(false);
 const total = ref(0);
 
 const queryFormRef = ref<ElFormInstance>();
 const logisticsOrderDetailFormRef = ref<ElFormInstance>();
 
+// 初始化注册所有模块
+registerAllModules();
+
+// 表格实例引用
+const hotTable = ref<InstanceType<typeof HotTable>>();
+const tableKey = ref(0);
+
+// 处理后的表格数据（包含派生字段）
+const processedData = computed(() => {
+  return logisticsOrderDetailList.value.map((item) => ({
+    ...item,
+    weightDiff: item.logisticsWeight - item.supplierWeight,
+    estimatedDeliveryDateFormatted: proxy.parseTime(item.estimatedDeliveryDate, '{y}-{m}-{d}'),
+    actualDeliveryDateFormatted: proxy.parseTime(item.actualDeliveryDate, '{y}-{m}-{d}')
+  }));
+});
+
+// 表格配置-------
+const hotSettings = ref({
+  licenseKey: 'non-commercial-and-evaluation',
+  manualColumnResize: true, // 手动调整列宽默认 false
+  rowHeaders: false, // 关闭行号
+  filters: true, // 启用筛选
+  // dropdownMenu: true, // 启用菜单
+  // contextMenu: true, // 启用右键菜单
+  height: 'auto', // 初始高度
+  manualRowResize: true, // 允许行高调整
+  autoWrapRow: true, // 自动换行
+  multiSelect: true, // 多选支持
+  stretchH: 'all', // 列宽自适应
+  afterGetColHeader: (col: number, th: HTMLElement) => {
+    const columnDef = hotSettings.value.columns[col];
+    const isEditable = !columnDef?.readOnly; // 判断是否可编辑
+
+    // 添加可编辑标识
+    if (isEditable) {
+      th.style.backgroundColor = '#f0f9eb'; // Element Plus 成功色浅版
+      th.style.borderLeft = '3px solid #67c23a';
+      th.innerHTML = `
+        ${th.innerText}
+      `;
+    }
+  },
+  afterChange: (changes) => {
+    if (!changes) return;
+    console.log('changes:', changes);
+    // changes.forEach(([row, prop, oldVal, newVal]) => {
+    //   console.log('修改的行:', row);
+    //   console.log('修改的列:', prop);
+    //   console.log('旧值:', oldVal);
+    //   console.log('新值:', newVal);
+    // });
+  },
+  colHeaders: [
+    '选择',
+    '订单号',
+    'FBA货件编号',
+    'FBA箱号',
+    '物流商ID',
+    '物流商名称',
+    '物流渠道',
+    '目的地仓库',
+    '计划数量',
+    '实际货件数量',
+    '物流追踪号',
+    '供应商称重',
+    '物流商计重',
+    '称重差异',
+    '物流单价',
+    '物流计价重量',
+    '其他物流费用',
+    '费用合计',
+    '物流状态',
+    '预计签收日期',
+    '实际签收日期',
+    '运输时效',
+    '操作'
+  ],
+  columns: [
+    {
+      // 选择列
+      type: 'checkbox',
+      className: 'htCenter',
+      width: 55
+    },
+    { data: 'orderId', className: 'htCenter', readOnly: true },
+    { data: 'fbaShipmentId', className: 'htCenter', readOnly: true },
+    // ... 其他数据列配置
+    { data: 'fbaBoxNumber', className: 'htCenter', readOnly: true }, // FBA箱号
+    { data: 'logisticsProviderId', className: 'htCenter', readOnly: true }, // 物流商ID
+    { data: 'logisticsProviderName', className: 'htCenter', readOnly: true }, // 物流商名称
+    { data: 'logisticsChannel', className: 'htCenter', readOnly: true }, // 物流渠道
+    { data: 'destinationWarehouse', className: 'htCenter', readOnly: true }, // 目的地仓库
+    { data: 'plannedQuantity', className: 'htCenter', readOnly: true }, // 计划数量
+    { data: 'actualShipmentQuantity', className: 'htCenter', readOnly: true }, // 实际货件数量
+    { data: 'trackingNumber', className: 'htCenter', readOnly: false }, // 物流追踪号
+    { data: 'supplierWeight', className: 'htCenter', readOnly: true }, // 供应商称重
+    { data: 'logisticsWeight', className: 'htCenter', readOnly: true }, // 物流商计重
+    {
+      data: 'weightDiff', // 称重差异
+      className: 'htCenter',
+      renderer: (instance, td) => {
+        // 添加差异颜色标识
+        const value = instance.getDataAtCell(td.row, td.col);
+        td.style.color = value > 0 ? '#67C23A' : '#F56C6C';
+        td.innerText = value;
+        return td;
+      }
+    },
+    { data: 'pricePerKg', className: 'htCenter', readOnly: true }, // 物流单价
+    { data: 'logisticsBillingWeight', className: 'htCenter', readOnly: true }, // 物流计价重量
+    { data: 'otherLogisticsFee', className: 'htCenter', readOnly: true }, // 其他物流费用
+    { data: 'totalFee', className: 'htCenter', readOnly: true }, // 费用合计
+    {
+      data: 'logisticsStatus',
+      className: 'htCenter',
+      readOnly: false,
+      type: 'dropdown',
+      source: ['水果', '蔬菜', '肉类']
+    }, // 物流状态
+    {
+      // 预计签收日期
+      data: 'estimatedDeliveryDateFormatted',
+      className: 'htCenter',
+      width: 180
+    },
+    {
+      // 实际签收日期
+      data: 'actualDeliveryDateFormatted',
+      className: 'htCenter',
+      width: 180
+    },
+    {
+      // 操作列
+      // renderer: (instance, td, row, col, prop, value, cellProperties) => {
+      //   const canEdit = checkPermi(['amz:logisticsOrderDetail:edit']);
+      //   const canDelete = checkPermi(['amz:logisticsOrderDetail:remove']);
+      //
+      //   td.innerHTML = `
+      //     <div class="action-buttons">
+      //       ${
+      //         canEdit
+      //           ? `
+      //         <button
+      //           class="edit-btn"
+      //           data-row="${row}"
+      //           :disabled="buttonLoading"
+      //         >
+      //           <i class="icon-edit"></i>
+      //         </button>
+      //       `
+      //           : ''
+      //       }
+      //       ${
+      //         canDelete
+      //           ? `
+      //         <button
+      //           class="delete-btn"
+      //           data-row="${row}"
+      //           :disabled="buttonLoading"
+      //         >
+      //           <i class="icon-delete"></i>
+      //         </button>
+      //       `
+      //           : ''
+      //       }
+      //     </div>
+      //   `;
+      //   td.className = 'htCenter';
+      //   return td;
+      // },
+      readOnly: true,
+      width: 150
+    }
+  ],
+  afterOnCellMouseDown: (event, coords) => {
+    if (buttonLoading.value) return;
+
+    if (coords.col === 21) {
+      const rowData = logisticsOrderDetailList.value[coords.row];
+      const target = event.target.closest('button');
+
+      if (target?.classList.contains('edit-btn')) {
+        buttonLoading.value = true;
+        handleUpdate(rowData).finally(() => {
+          buttonLoading.value = false;
+        });
+      } else if (target?.classList.contains('delete-btn')) {
+        buttonLoading.value = true;
+        handleDelete(rowData).finally(() => {
+          buttonLoading.value = false;
+        });
+      }
+    }
+  },
+  contextMenu: {
+    items: {
+      editRow: {
+        name: '修改',
+        disabled: () => !checkPermi(['amz:logisticsOrderDetail:edit']) || buttonLoading.value,
+        callback: (_, selection) => {
+          const rowData = logisticsOrderDetailList.value[selection[0].start.row];
+          buttonLoading.value = true;
+          handleUpdate(rowData).finally(() => {
+            buttonLoading.value = false;
+          });
+        }
+      }
+    }
+  }
+});
+
+// 监听数据变化
+watch(
+  logisticsOrderDetailList,
+  () => {
+    tableKey.value++;
+  },
+  { deep: true }
+);
+
+//表格结束-----
+
+const submitDataClick = () => {
+  // 提交数据
+  console.log('提交数据');
+};
+
+const cancelDataClick = () => {
+  // 取消数据
+  console.log('取消数据');
+};
+
+const openEdit = () => {
+  hotTableDrawer.value = true;
+};
+
 const dialog = reactive<DialogOption>({
   visible: false,
   title: ''
@@ -544,6 +715,16 @@ const handleExport = () => {
 };
 
 onMounted(() => {
+  console.log('组件已挂载，hotInstance:', hotTable.value?.hotInstance);
+
   getList();
 });
 </script>
+<style scoped>
+.hot-container {
+  height: 70vh; /* 可视区域高度的70% */
+  min-height: 400px; /* 最小高度保证 */
+  max-height: 1000px; /* 防止数据过多时过高 */
+  overflow: auto; /* 容器内滚动 */
+}
+</style>

src/views/amz/logisticsQuote/index.vue

@@ -32,7 +32,7 @@
               <el-input v-model="queryParams.unit" placeholder="请输入单位" clearable @keyup.enter="handleQuery" />
             </el-form-item>
             <el-form-item>
-              <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
+              <el-button type="primary" icon="Search" @click="checkStatus">搜索</el-button>
               <el-button icon="Refresh" @click="resetQuery">重置</el-button>
             </el-form-item>
           </el-form>
@@ -89,7 +89,6 @@
 
       <el-table v-loading="loading" :data="logisticsQuoteList" @selection-change="handleSelectionChange">
         <el-table-column type="selection" width="55" align="center" />
-        <el-table-column label="主键ID" align="center" prop="id" />
         <el-table-column label="物流商用户ID" align="center" prop="userId" />
         <el-table-column label="目的地" align="center" prop="destination" />
         <el-table-column label="渠道名称" align="center" prop="channelName" />
@@ -101,19 +100,36 @@
             <span>{{ parseTime(scope.row.quoteDate, '{y}-{m}-{d}') }}</span>
           </template>
         </el-table-column>
-        <el-table-column label="提交状态" align="center" prop="isSubmitted" />
+        <el-table-column label="提交状态" align="center" prop="isSubmitted">
+          <template #default="scope">
+            <dict-tag :options="sys_yes_no" :value="scope.row.isSubmitted" />
+          </template>
+        </el-table-column>
         <el-table-column label="报价备注" align="center" prop="remark" />
         <el-table-column label="渠道类型" align="center" prop="channelType" />
-        <el-table-column label="渠道ID" align="center" prop="channelId" />
         <el-table-column label="是否双清包税" align="center" prop="isDdp" />
         <el-table-column label="单位" align="center" prop="unit" />
         <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
           <template #default="scope">
             <el-tooltip content="修改" placement="top">
-              <el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)" v-hasRoles="['wuliu']" v-hasPermi="['amz:logisticsQuote:edit']"></el-button>
+              <el-button
+                link
+                type="primary"
+                icon="Edit"
+                @click="handleUpdate(scope.row)"
+                v-hasRoles="['wuliu']"
+                v-hasPermi="['amz:logisticsQuote:edit']"
+              ></el-button>
             </el-tooltip>
             <el-tooltip content="删除" placement="top">
-              <el-button link type="primary" icon="Delete" @click="handleDelete(scope.row)" v-hasRoles="['superadmin']" v-hasPermi="['amz:logisticsQuote:remove']"></el-button>
+              <el-button
+                link
+                type="primary"
+                icon="Delete"
+                @click="handleDelete(scope.row)"
+                v-hasRoles="['superadmin']"
+                v-hasPermi="['amz:logisticsQuote:remove']"
+              ></el-button>
             </el-tooltip>
           </template>
         </el-table-column>
@@ -170,11 +186,20 @@
 </template>
 
 <script setup name="LogisticsQuote" lang="ts">
-import { listLogisticsQuote, getLogisticsQuote, delLogisticsQuote, addLogisticsQuote, updateLogisticsQuote } from '@/api/amz/logisticsQuote';
+import {
+  listLogisticsQuote,
+  getLogisticsQuote,
+  delLogisticsQuote,
+  addLogisticsQuote,
+  updateLogisticsQuote,
+  getTodayQuoteStatus
+} from '@/api/amz/logisticsQuote';
 import { LogisticsQuoteVO, LogisticsQuoteQuery, LogisticsQuoteForm } from '@/api/amz/logisticsQuote/types';
 
 const { proxy } = getCurrentInstance() as ComponentInternalInstance;
 
+const { sys_yes_no } = toRefs<any>(proxy?.useDict('sys_yes_no'));
+
 const logisticsQuoteList = ref<LogisticsQuoteVO[]>([]);
 const buttonLoading = ref(false);
 const loading = ref(true);
@@ -256,6 +281,11 @@ const getList = async () => {
   loading.value = false;
 };
 
+const checkStatus = async () => {
+  const res2 = await getTodayQuoteStatus();
+  console.log(res2);
+};
+
 /** 取消按钮 */
 const cancel = () => {
   reset();

src/views/amz/shipmentPlan/index.vue

@@ -725,6 +725,7 @@ const checkPrice = async () => {
     console.log('查询询价单', requestQuote);
     if (requestQuote.total == 0) {
       console.log('询价单也没数据');
+      channelDialogVisible.value = false;
       ElMessageBox.confirm('未查询到价格信息,是否要向物流商发布询价？', 'Warning', {
         confirmButtonText: '确定',
         cancelButtonText: '取消',