订单管理
This commit is contained in:
parent
19933d2315
commit
086fc44c7e
@ -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",
|
||||
|
||||
@ -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
|
||||
|
||||
@ -1,51 +1,56 @@
|
||||
import useUserStore from '@/store/modules/user';
|
||||
// src/utils/permission.ts
|
||||
import { useUserStore } from '@/store/modules/user';
|
||||
|
||||
/**
|
||||
* 字符权限校验
|
||||
* @param {Array} value 校验值
|
||||
* @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 = '*:*:*';
|
||||
// 权限校验方法（替代指令的核心逻辑）
|
||||
export const checkPermi = (perms: string[]): boolean => {
|
||||
const { permissions } = useUserStore();
|
||||
|
||||
const hasPermission = permissions.some((permission) => {
|
||||
return all_permission === permission || permissionDatas.includes(permission);
|
||||
});
|
||||
|
||||
if (!hasPermission) {
|
||||
return false;
|
||||
}
|
||||
return true;
|
||||
} else {
|
||||
console.error(`need roles! Like checkPermi="['system:user:add','system:user:edit']"`);
|
||||
return false;
|
||||
if (!Array.isArray(perms) || perms.length === 0) {
|
||||
throw new Error("权限参数格式错误，示例: checkPermi(['sys:user:edit'])");
|
||||
}
|
||||
|
||||
return permissions.some((p) => p === '*:*:*' || perms.includes(p));
|
||||
};
|
||||
|
||||
/**
|
||||
* 角色权限校验
|
||||
* @param {Array} value 校验值
|
||||
* @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';
|
||||
// 角色校验方法
|
||||
export const checkRoles = (roles: string[]): boolean => {
|
||||
const { roles: userRoles } = useUserStore();
|
||||
|
||||
const hasRole = roles.some((role) => {
|
||||
return super_admin === role || permissionRoles.includes(role);
|
||||
});
|
||||
if (!Array.isArray(roles) || roles.length === 0) {
|
||||
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;
|
||||
};
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -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="country" />
|
||||
<el-table-column label="运输方式" align="center" prop="shippingMethod" />
|
||||
<el-table-column label="渠道类型" align="center" prop="channelType">
|
||||
<template #default="scope">
|
||||
<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);
|
||||
|
||||
@ -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 {
|
||||
listLogisticsOrder,
|
||||
getLogisticsOrder,
|
||||
delLogisticsOrder,
|
||||
addLogisticsOrder,
|
||||
updateLogisticsOrder,
|
||||
createOrder
|
||||
} from '@/api/amz/logisticsOrder';
|
||||
import { listLogisticsOrder, getLogisticsOrder, delLogisticsOrder, addLogisticsOrder, updateLogisticsOrder } 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(
|
||||
|
||||
@ -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-column type="selection" width="55" align="center" />-->
|
||||
<!-- <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="fbaBoxNumber" />-->
|
||||
<!-- <el-table-column label="物流商ID" align="center" prop="logisticsProviderId" />-->
|
||||
<!-- <el-table-column label="物流商名称" align="center" prop="logisticsProviderName" />-->
|
||||
<!-- <el-table-column label="物流渠道" align="center" prop="logisticsChannel" />-->
|
||||
<!-- <el-table-column label="目的地仓库" align="center" prop="destination" />-->
|
||||
<!-- <el-table-column label="计划数量" align="center" prop="plannedQuantity" />-->
|
||||
<!-- <el-table-column label="实际货件数量" align="center" prop="shipmentQuantity" />-->
|
||||
<!-- <el-table-column label="物流追踪号" align="center" prop="trackingNumber" />-->
|
||||
<!-- <el-table-column label="供应商称重" align="center" prop="supplierWeight" />-->
|
||||
<!-- <el-table-column label="物流商计重" align="center" prop="logisticsWeight" />-->
|
||||
<!-- <el-table-column label="称重差异" align="center" prop="weightDiff" />-->
|
||||
<!-- <el-table-column label="物流单价" align="center" prop="pricePerKg" />-->
|
||||
<!-- <el-table-column label="物流计价重量" align="center" prop="logisticsCalculationPrice" />-->
|
||||
<!-- <el-table-column label="其他物流费用" align="center" prop="otherFee" />-->
|
||||
<!-- <el-table-column label="费用合计" align="center" prop="totalFee" />-->
|
||||
<!-- <el-table-column label="物流状态" align="center" prop="logisticsStatus" />-->
|
||||
<!-- <el-table-column label="预计签收日期" align="center" prop="estimatedDeliveryDate" width="180">-->
|
||||
<!-- <template #default="scope">-->
|
||||
<!-- <span>{{ parseTime(scope.row.estimatedDeliveryDate, '{y}-{m}-{d}') }}</span>-->
|
||||
<!-- </template>-->
|
||||
<!-- </el-table-column>-->
|
||||
<!-- <el-table-column label="实际签收日期" align="center" prop="actualDeliveryDate" width="180">-->
|
||||
<!-- <template #default="scope">-->
|
||||
<!-- <span>{{ parseTime(scope.row.actualDeliveryDate, '{y}-{m}-{d}') }}</span>-->
|
||||
<!-- </template>-->
|
||||
<!-- </el-table-column>-->
|
||||
<!-- <el-table-column label="运输时效" align="center" prop="timeliness" />-->
|
||||
<!-- <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:logisticsOrderDetail:edit']"></el-button>-->
|
||||
<!-- </el-tooltip>-->
|
||||
<!-- <el-tooltip content="删除" placement="top">-->
|
||||
<!-- <el-button-->
|
||||
<!-- link-->
|
||||
<!-- type="primary"-->
|
||||
<!-- icon="Delete"-->
|
||||
<!-- @click="handleDelete(scope.row)"-->
|
||||
<!-- v-hasPermi="['amz:logisticsOrderDetail:remove']"-->
|
||||
<!-- ></el-button>-->
|
||||
<!-- </el-tooltip>-->
|
||||
<!-- </template>-->
|
||||
<!-- </el-table-column>-->
|
||||
<!-- </el-table>-->
|
||||
|
||||
<ag-grid-vue
|
||||
class="ag-theme-alpine"
|
||||
style="height: 700px"
|
||||
:columnDefs="columnDefs"
|
||||
:rowData="logisticsOrderDetailList"
|
||||
:rowSelection="'multiple'"
|
||||
@selection-changed="handleSelectionChange"
|
||||
:overlayLoadingTemplate="loadingTemplate"
|
||||
/>
|
||||
<el-table v-loading="loading" :data="logisticsOrderDetailList" @selection-change="handleSelectionChange">
|
||||
<el-table-column type="selection" width="55" align="center" />
|
||||
<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="fbaBoxNumber" />
|
||||
<el-table-column label="物流商ID" align="center" prop="logisticsProviderId" />
|
||||
<el-table-column label="物流商名称" align="center" prop="logisticsProviderName" />
|
||||
<el-table-column label="物流渠道" align="center" prop="logisticsChannel" />
|
||||
<el-table-column label="目的地仓库" align="center" prop="destination" />
|
||||
<el-table-column label="计划数量" align="center" prop="plannedQuantity" />
|
||||
<el-table-column label="实际货件数量" align="center" prop="shipmentQuantity" />
|
||||
<el-table-column label="物流追踪号" align="center" prop="trackingNumber" />
|
||||
<el-table-column label="供应商称重" align="center" prop="supplierWeight" />
|
||||
<el-table-column label="物流商计重" align="center" prop="logisticsWeight" />
|
||||
<el-table-column label="称重差异" align="center" prop="weightDiff" />
|
||||
<el-table-column label="物流单价" align="center" prop="pricePerKg" />
|
||||
<el-table-column label="物流计价重量" align="center" prop="logisticsCalculationPrice" />
|
||||
<el-table-column label="其他物流费用" align="center" prop="otherFee" />
|
||||
<el-table-column label="费用合计" align="center" prop="totalFee" />
|
||||
<el-table-column label="物流状态" align="center" prop="logisticsStatus" />
|
||||
<el-table-column label="预计签收日期" align="center" prop="estimatedDeliveryDate" width="180">
|
||||
<template #default="scope">
|
||||
<span>{{ parseTime(scope.row.estimatedDeliveryDate, '{y}-{m}-{d}') }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="实际签收日期" align="center" prop="actualDeliveryDate" width="180">
|
||||
<template #default="scope">
|
||||
<span>{{ parseTime(scope.row.actualDeliveryDate, '{y}-{m}-{d}') }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="运输时效" align="center" prop="timeliness" />
|
||||
<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:logisticsOrderDetail:edit']"></el-button>
|
||||
</el-tooltip>
|
||||
<el-tooltip content="删除" placement="top">
|
||||
<el-button
|
||||
link
|
||||
type="primary"
|
||||
icon="Delete"
|
||||
@click="handleDelete(scope.row)"
|
||||
v-hasPermi="['amz:logisticsOrderDetail:remove']"
|
||||
></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" />
|
||||
</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 { AgGridVue } from 'ag-grid-vue3';
|
||||
import 'ag-grid-community/styles/ag-grid.css';
|
||||
import 'ag-grid-community/styles/ag-theme-alpine.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]);
|
||||
import { checkPermi } from '@/utils/permission';
|
||||
import { ref, computed, watch, onMounted, onUnmounted } from 'vue';
|
||||
import { HotTable } from '@handsontable/vue3';
|
||||
import { registerAllModules } from 'handsontable/registry';
|
||||
import 'handsontable/dist/handsontable.full.min.css';
|
||||
|
||||
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>
|
||||
|
||||
@ -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();
|
||||
|
||||
@ -725,6 +725,7 @@ const checkPrice = async () => {
|
||||
console.log('查询询价单', requestQuote);
|
||||
if (requestQuote.total == 0) {
|
||||
console.log('询价单也没数据');
|
||||
channelDialogVisible.value = false;
|
||||
ElMessageBox.confirm('未查询到价格信息,是否要向物流商发布询价？', 'Warning', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user