Browse Source
feat(order): 添加国际化支持并优化权限控制
feat(order): 添加国际化支持并优化权限控制
- 在多个组件中添加locale属性支持中英文切换 - 实现表格列标题的国际化显示 - 为首页代办功能添加菜单权限控制 - 移除菜单管理中不必要的"菜单"文字重复显示 - 禁止菜单路由字段在编辑时被修改 - 限制菜单删除功能仅对非一级菜单生效 - 新增英文版PO订单查询页面支持国际化显示master
qiankanghui
7 days ago
8 changed files with 1107 additions and 28 deletions
-
12src/views/common/home.vue
-
37src/views/modules/order/com_inspectionDetailList.vue
-
19src/views/modules/order/com_logisticsPoList.vue
-
87src/views/modules/order/com_poOrderDetail.vue
-
14src/views/modules/order/com_poPartAttribute.vue
-
960src/views/modules/order/poOrder_search_en.vue
-
2src/views/modules/sys/menu-add-or-update.vue
-
4src/views/modules/sys/menu.vue
@ -0,0 +1,960 @@ |
|||||
|
<template> |
||||
|
<div class="mod-config"> |
||||
|
<com-po-order-customer-picker |
||||
|
:site="searchData.site" |
||||
|
v-model="searchData.customer" |
||||
|
@change="onSessionCustomerChange" /> |
||||
|
<!-- Search Conditions --> |
||||
|
<el-form :inline="true" label-position="top" :model="searchData"> |
||||
|
<el-form-item label="PO No"> |
||||
|
<el-input v-model="searchData.poNo" clearable style="width: 140px" @keyup.enter.native="handleSearch"></el-input> |
||||
|
</el-form-item> |
||||
|
<el-form-item label="Order Type"> |
||||
|
<el-select v-model="searchData.orderType" placeholder="Please select" style="width: 120px" clearable> |
||||
|
<el-option |
||||
|
v-for="item in poOrderTypeSearchOptions" |
||||
|
:key="item.value" |
||||
|
:label="item.label" |
||||
|
:value="item.value" /> |
||||
|
</el-select> |
||||
|
</el-form-item> |
||||
|
<el-form-item> |
||||
|
<span style="cursor: pointer" slot="label" @click="openSearchBaseList(2017)"><a href="javascript:void(0)">Part No</a></span> |
||||
|
<el-input v-model="searchData.partNo" clearable style="width: 120px" @keyup.enter.native="handleSearch"></el-input> |
||||
|
</el-form-item> |
||||
|
<el-form-item> |
||||
|
<span style="cursor: pointer" slot="label" @click="openSearchBaseList(520)"><a href="javascript:void(0)">Supplier Code</a></span> |
||||
|
<el-input v-model="searchData.supplierNo" clearable style="width: 120px" @keyup.enter.native="handleSearch"></el-input> |
||||
|
</el-form-item> |
||||
|
<el-form-item label="SKU"> |
||||
|
<el-input v-model="searchData.sku" clearable style="width: 120px" @keyup.enter.native="handleSearch"></el-input> |
||||
|
</el-form-item> |
||||
|
<el-form-item label="Status"> |
||||
|
<el-select v-model="searchData.status" placeholder="Please select" style="width:100px" clearable> |
||||
|
<el-option label="All" value=""></el-option> |
||||
|
<el-option |
||||
|
v-for="item in poOrderStatusOptions" |
||||
|
:key="item.value" |
||||
|
:label="item.label" |
||||
|
:value="item.value" /> |
||||
|
</el-select> |
||||
|
</el-form-item> |
||||
|
</el-form> |
||||
|
|
||||
|
<el-form :inline="true" label-position="top" style="margin-top:10px"> |
||||
|
<el-form-item> |
||||
|
<el-button type="primary" @click="handleSearch" :disabled="!searchData.customer">Search</el-button> |
||||
|
<el-button type="primary" @click="exportExcel" style="margin-left: 2px">Export</el-button> |
||||
|
<el-button @click="resetSearch">Reset</el-button> |
||||
|
<el-button type="warning" plain @click="advancedQueryVisible = true" style="margin-left: 2px">Advanced Query</el-button> |
||||
|
</el-form-item> |
||||
|
</el-form> |
||||
|
|
||||
|
<!-- Data Table --> |
||||
|
<el-table |
||||
|
ref="poTable" |
||||
|
:height="height" |
||||
|
:data="dataList" |
||||
|
border |
||||
|
highlight-current-row |
||||
|
v-loading="loading" |
||||
|
@row-click="changeData" |
||||
|
style="width: 100%;"> |
||||
|
<el-table-column |
||||
|
v-for="(item, index) in visibleColumns" |
||||
|
:key="item.serialNumber || index" |
||||
|
:sortable="item.columnSortable" |
||||
|
:prop="item.columnProp" |
||||
|
:header-align="item.headerAlign" |
||||
|
:show-overflow-tooltip="item.showOverflowTooltip" |
||||
|
:align="item.align" |
||||
|
:fixed="item.fixed === '' ? false : item.fixed" |
||||
|
:min-width="item.columnWidth" |
||||
|
:label="item.columnLabel"> |
||||
|
<template slot-scope="scope"> |
||||
|
<span>{{ formatColumnCell(scope.row, item) }}</span> |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
</el-table> |
||||
|
|
||||
|
<!-- Pagination --> |
||||
|
<el-pagination |
||||
|
@size-change="sizeChangeHandle" |
||||
|
@current-change="currentChangeHandle" |
||||
|
:current-page="pageIndex" |
||||
|
:page-sizes="[20, 50, 100, 200, 500]" |
||||
|
:page-size="pageSize" |
||||
|
:total="totalPage" |
||||
|
layout="total, sizes, prev, pager, next, jumper"> |
||||
|
</el-pagination> |
||||
|
|
||||
|
<!-- Detail Tabs --> |
||||
|
<el-tabs v-model="activeTab" style="margin-top: 0px; width: 99%;" @tab-click="handleTabClick" class="customer-tab" type="border-card"> |
||||
|
<!-- Order Detail --> |
||||
|
<el-tab-pane label="Order Detail" name="orderDetail"> |
||||
|
<po-order-detail |
||||
|
:detail-data="currentRow" |
||||
|
:schema-fields="fieldSchemaFields" |
||||
|
locale="en" /> |
||||
|
</el-tab-pane> |
||||
|
<!-- Logistics --> |
||||
|
<el-tab-pane label="Logistics" name="logistics"> |
||||
|
<logistics-po-list ref="logisticsPoList" locale="en" /> |
||||
|
</el-tab-pane> |
||||
|
<!-- Inspection Detail --> |
||||
|
<el-tab-pane label="Inspection Detail" name="inspectionDetail"> |
||||
|
<inspection-detail-list ref="inspectionDetailList" locale="en" /> |
||||
|
</el-tab-pane> |
||||
|
<!-- Part Attribute (Read Only) --> |
||||
|
<el-tab-pane label="Part Attribute" name="partAttribute"> |
||||
|
<po-part-attribute ref="partAttributeTab" locale="en" /> |
||||
|
</el-tab-pane> |
||||
|
</el-tabs> |
||||
|
|
||||
|
<po-order-advanced-query |
||||
|
:visible.sync="advancedQueryVisible" |
||||
|
:advanced-query-data="advancedQueryData" |
||||
|
@query="handleSearch" /> |
||||
|
|
||||
|
<ChooselistEam ref="eamList" @getBaseData="getEamData" /> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import { searchPoDetailPage, searchPoDetailAdvancedPage, getPoFieldSchema } from '@/api/order/poOrder.js' |
||||
|
import { |
||||
|
createAdvancedQueryData, |
||||
|
createAdvancedQueryDataFromSchema, |
||||
|
buildPoOrderQueryParams |
||||
|
} from './poOrderAdvancedQueryHelper.js' |
||||
|
import { |
||||
|
applyFieldSchemaToColumns, |
||||
|
getAdvancedQueryFieldsFromSchema, |
||||
|
normalizeSchemaRowValues |
||||
|
} from './poOrderFieldSchemaHelper.js' |
||||
|
import excel from '@/utils/excel-util.js' |
||||
|
import LogisticsPoList from './com_logisticsPoList.vue' |
||||
|
import InspectionDetailList from './com_inspectionDetailList.vue' |
||||
|
import PoPartAttribute from './com_poPartAttribute.vue' |
||||
|
import PoOrderDetail from './com_poOrderDetail.vue' |
||||
|
import PoOrderAdvancedQuery from './com_poOrderAdvancedQuery.vue' |
||||
|
import ChooselistEam from '@/views/modules/common/Chooselist_eam.vue' |
||||
|
import ComPoOrderCustomerPicker from './com_poOrder_CustomerPicker.vue' |
||||
|
import { PO_ORDER_STATUS_OPTIONS } from './poOrderStatusOptions.js' |
||||
|
import { PO_ORDER_TYPE_OPTIONS, formatPoOrderTypeLabel } from './poOrderTypeOptions.js' |
||||
|
import { searchPartInfo } from '@/api/part/partInfo.js' |
||||
|
|
||||
|
export default { |
||||
|
components: { |
||||
|
LogisticsPoList, |
||||
|
InspectionDetailList, |
||||
|
PoPartAttribute, |
||||
|
PoOrderDetail, |
||||
|
PoOrderAdvancedQuery, |
||||
|
ChooselistEam, |
||||
|
ComPoOrderCustomerPicker |
||||
|
}, |
||||
|
name: 'PoOrderQueryEn', |
||||
|
data() { |
||||
|
return { |
||||
|
loading: false, |
||||
|
exportLoading: false, |
||||
|
height: 400, |
||||
|
activeTab: 'orderDetail', |
||||
|
pageIndex: 1, |
||||
|
pageSize: 20, |
||||
|
totalPage: 0, |
||||
|
dataList: [], |
||||
|
currentRow: {}, |
||||
|
advancedQueryVisible: false, |
||||
|
eamTagNo: '', |
||||
|
poOrderTypeSearchOptions: [{ label: 'All', value: '' }, ...PO_ORDER_TYPE_OPTIONS], |
||||
|
/** Advanced query object (read by search/export; only reset in dialog) */ |
||||
|
advancedQueryData: createAdvancedQueryData(), |
||||
|
fieldSchemaFields: [], |
||||
|
baseColumnList: null, |
||||
|
poOrderStatusOptions: PO_ORDER_STATUS_OPTIONS, |
||||
|
searchData: { |
||||
|
site: this.$store.state.user.site, |
||||
|
customer: '', |
||||
|
buyer: '', |
||||
|
poNo: '', |
||||
|
orderType: '', |
||||
|
partNo: '', |
||||
|
supplierNo: '', |
||||
|
sku: '', |
||||
|
status: '', |
||||
|
supplierName: '', |
||||
|
feeDateStart: '', |
||||
|
feeDateEnd: '' |
||||
|
}, |
||||
|
// Column config (consistent with original page, hides edit related columns) |
||||
|
columnList: [ |
||||
|
{ |
||||
|
columnProp: 'poNo', |
||||
|
columnLabel: 'PO No', |
||||
|
align: 'center', |
||||
|
columnWidth: 120, |
||||
|
showOverflowTooltip: true, |
||||
|
headerAlign: 'center' |
||||
|
}, |
||||
|
{ |
||||
|
columnProp: 'orderType', |
||||
|
columnLabel: 'Order Type', |
||||
|
align: 'center', |
||||
|
columnWidth: 100, |
||||
|
showOverflowTooltip: true, |
||||
|
headerAlign: 'center' |
||||
|
}, |
||||
|
{ |
||||
|
columnProp: 'customer', |
||||
|
columnLabel: 'Customer', |
||||
|
align: 'center', |
||||
|
columnWidth: 180, |
||||
|
showOverflowTooltip: true, |
||||
|
headerAlign: 'center' |
||||
|
}, |
||||
|
{ |
||||
|
columnProp: 'buyer', |
||||
|
columnLabel: 'Buyer', |
||||
|
align: 'center', |
||||
|
columnWidth: 90, |
||||
|
showOverflowTooltip: true, |
||||
|
headerAlign: 'center' |
||||
|
}, |
||||
|
{ |
||||
|
columnProp: 'supplierName', |
||||
|
columnLabel: 'Vendor Name', |
||||
|
align: 'center', |
||||
|
columnWidth: 180, |
||||
|
showOverflowTooltip: true, |
||||
|
headerAlign: 'center' |
||||
|
}, |
||||
|
{ |
||||
|
columnProp: 'shortOffice', |
||||
|
columnLabel: 'V_Short_Office', |
||||
|
align: 'center', |
||||
|
columnWidth: 110, |
||||
|
showOverflowTooltip: true, |
||||
|
headerAlign: 'center' |
||||
|
}, |
||||
|
{ |
||||
|
columnProp: 'shortNpc', |
||||
|
columnLabel: 'V_Short_NPC', |
||||
|
align: 'center', |
||||
|
columnWidth: 100, |
||||
|
showOverflowTooltip: true, |
||||
|
headerAlign: 'center' |
||||
|
}, |
||||
|
{ |
||||
|
columnProp: 'partNo', |
||||
|
columnLabel: 'Part No', |
||||
|
align: 'center', |
||||
|
columnWidth: 120, |
||||
|
showOverflowTooltip: true, |
||||
|
headerAlign: 'center' |
||||
|
}, |
||||
|
{ |
||||
|
columnProp: 'item', |
||||
|
columnLabel: 'Item', |
||||
|
align: 'center', |
||||
|
columnWidth: 120, |
||||
|
showOverflowTooltip: true, |
||||
|
headerAlign: 'center' |
||||
|
}, |
||||
|
{ |
||||
|
columnProp: 'categoryName', |
||||
|
columnLabel: 'Category', |
||||
|
align: 'center', |
||||
|
columnWidth: 90, |
||||
|
showOverflowTooltip: true, |
||||
|
headerAlign: 'center' |
||||
|
}, |
||||
|
{ |
||||
|
columnProp: 'sku', |
||||
|
columnLabel: 'SKU', |
||||
|
align: 'center', |
||||
|
columnWidth: 100, |
||||
|
showOverflowTooltip: true, |
||||
|
headerAlign: 'center' |
||||
|
}, |
||||
|
{ |
||||
|
columnProp: 'price', |
||||
|
columnLabel: 'Unit Price', |
||||
|
align: 'center', |
||||
|
columnWidth: 90, |
||||
|
showOverflowTooltip: true, |
||||
|
headerAlign: 'center' |
||||
|
}, |
||||
|
{ |
||||
|
columnProp: 'qty', |
||||
|
columnLabel: 'PO Qty', |
||||
|
align: 'center', |
||||
|
columnWidth: 80, |
||||
|
showOverflowTooltip: true, |
||||
|
headerAlign: 'center' |
||||
|
}, |
||||
|
{ |
||||
|
columnProp: 'value', |
||||
|
columnLabel: 'PO Value', |
||||
|
align: 'center', |
||||
|
columnWidth: 90, |
||||
|
showOverflowTooltip: true, |
||||
|
headerAlign: 'center' |
||||
|
}, |
||||
|
{ |
||||
|
columnProp: 'shipQty', |
||||
|
columnLabel: 'A-Qty', |
||||
|
align: 'center', |
||||
|
columnWidth: 80, |
||||
|
showOverflowTooltip: true, |
||||
|
headerAlign: 'center' |
||||
|
}, |
||||
|
{ |
||||
|
columnProp: 'sumPrice', |
||||
|
columnLabel: 'A-Value', |
||||
|
align: 'center', |
||||
|
columnWidth: 90, |
||||
|
showOverflowTooltip: true, |
||||
|
headerAlign: 'center' |
||||
|
}, |
||||
|
{ |
||||
|
columnProp: 'departure', |
||||
|
columnLabel: 'Departure Port', |
||||
|
align: 'center', |
||||
|
columnWidth: 100, |
||||
|
showOverflowTooltip: true, |
||||
|
headerAlign: 'center' |
||||
|
}, |
||||
|
{ |
||||
|
columnProp: 'destination', |
||||
|
columnLabel: 'Destination Port', |
||||
|
align: 'center', |
||||
|
columnWidth: 110, |
||||
|
showOverflowTooltip: true, |
||||
|
headerAlign: 'center' |
||||
|
}, |
||||
|
{ |
||||
|
columnProp: 'shipVia', |
||||
|
columnLabel: 'Method', |
||||
|
align: 'center', |
||||
|
columnWidth: 90, |
||||
|
showOverflowTooltip: true, |
||||
|
headerAlign: 'center' |
||||
|
}, |
||||
|
{ |
||||
|
columnProp: 'orderDate', |
||||
|
columnLabel: 'Buyer Release Date', |
||||
|
align: 'center', |
||||
|
columnWidth: 130, |
||||
|
showOverflowTooltip: true, |
||||
|
headerAlign: 'center' |
||||
|
}, |
||||
|
{ |
||||
|
columnProp: 'enquiry', |
||||
|
columnLabel: 'Planner Release Date', |
||||
|
align: 'center', |
||||
|
columnWidth: 140, |
||||
|
showOverflowTooltip: true, |
||||
|
headerAlign: 'center' |
||||
|
}, |
||||
|
{ |
||||
|
columnProp: 'status', |
||||
|
columnLabel: 'Status', |
||||
|
align: 'center', |
||||
|
columnWidth: 80, |
||||
|
showOverflowTooltip: true, |
||||
|
headerAlign: 'center' |
||||
|
}, |
||||
|
{ |
||||
|
columnProp: 'confirmed', |
||||
|
columnLabel: 'PI Confirmed Date', |
||||
|
align: 'center', |
||||
|
columnWidth: 120, |
||||
|
showOverflowTooltip: true, |
||||
|
headerAlign: 'center' |
||||
|
}, |
||||
|
{ |
||||
|
columnProp: 'wantReceiveDate', |
||||
|
columnLabel: 'Original Arrival Date', |
||||
|
align: 'center', |
||||
|
columnWidth: 130, |
||||
|
showOverflowTooltip: true, |
||||
|
headerAlign: 'center' |
||||
|
}, |
||||
|
{ |
||||
|
columnProp: 'narrival', |
||||
|
columnLabel: 'Final Confirmed Arrival Date', |
||||
|
align: 'center', |
||||
|
columnWidth: 110, |
||||
|
showOverflowTooltip: true, |
||||
|
headerAlign: 'center' |
||||
|
}, |
||||
|
{ |
||||
|
columnProp: 'crd', |
||||
|
columnLabel: 'PI Confirmed CRD', |
||||
|
align: 'center', |
||||
|
columnWidth: 120, |
||||
|
showOverflowTooltip: true, |
||||
|
headerAlign: 'center' |
||||
|
}, |
||||
|
{ |
||||
|
columnProp: 'crdOri', |
||||
|
columnLabel: 'Original CRD', |
||||
|
align: 'center', |
||||
|
columnWidth: 120, |
||||
|
showOverflowTooltip: true, |
||||
|
headerAlign: 'center' |
||||
|
}, |
||||
|
{ |
||||
|
columnProp: 'inspection', |
||||
|
columnLabel: 'Inspection Date', |
||||
|
align: 'center', |
||||
|
columnWidth: 100, |
||||
|
showOverflowTooltip: true, |
||||
|
headerAlign: 'center' |
||||
|
}, |
||||
|
{ |
||||
|
columnProp: 'realCrd', |
||||
|
columnLabel: 'Actual Completion Date', |
||||
|
align: 'center', |
||||
|
columnWidth: 150, |
||||
|
showOverflowTooltip: true, |
||||
|
headerAlign: 'center' |
||||
|
}, |
||||
|
{ |
||||
|
columnProp: 'eta', |
||||
|
columnLabel: 'ETA', |
||||
|
align: 'center', |
||||
|
columnWidth: 100, |
||||
|
showOverflowTooltip: true, |
||||
|
headerAlign: 'center' |
||||
|
}, |
||||
|
{ |
||||
|
columnProp: 'flexid', |
||||
|
columnLabel: 'Flexport Id', |
||||
|
align: 'center', |
||||
|
columnWidth: 90, |
||||
|
showOverflowTooltip: true, |
||||
|
headerAlign: 'center' |
||||
|
}, |
||||
|
{ |
||||
|
columnProp: 'obd', |
||||
|
columnLabel: 'On Board Date', |
||||
|
align: 'center', |
||||
|
columnWidth: 100, |
||||
|
showOverflowTooltip: true, |
||||
|
headerAlign: 'center' |
||||
|
}, |
||||
|
{ |
||||
|
columnProp: 'docSent', |
||||
|
columnLabel: 'Doc Sent', |
||||
|
align: 'center', |
||||
|
columnWidth: 90, |
||||
|
showOverflowTooltip: true, |
||||
|
headerAlign: 'center' |
||||
|
}, |
||||
|
{ |
||||
|
columnProp: 'telexRelease', |
||||
|
columnLabel: 'Telex Release', |
||||
|
align: 'center', |
||||
|
columnWidth: 100, |
||||
|
showOverflowTooltip: true, |
||||
|
headerAlign: 'center' |
||||
|
}, |
||||
|
{ |
||||
|
columnProp: 'advancePayment', |
||||
|
columnLabel: 'Advance Payment', |
||||
|
align: 'center', |
||||
|
columnWidth: 120, |
||||
|
showOverflowTooltip: true, |
||||
|
headerAlign: 'center' |
||||
|
}, |
||||
|
{ |
||||
|
columnProp: 'advancePaid', |
||||
|
columnLabel: 'Advanc Paid', |
||||
|
align: 'center', |
||||
|
columnWidth: 100, |
||||
|
showOverflowTooltip: true, |
||||
|
headerAlign: 'center' |
||||
|
}, |
||||
|
{ |
||||
|
columnProp: 'createTime', |
||||
|
columnLabel: 'Create Date', |
||||
|
align: 'center', |
||||
|
columnWidth: 100, |
||||
|
showOverflowTooltip: true, |
||||
|
headerAlign: 'center' |
||||
|
}, |
||||
|
{ |
||||
|
columnProp: 'planner', |
||||
|
columnLabel: 'M-Planner', |
||||
|
align: 'center', |
||||
|
columnWidth: 100, |
||||
|
showOverflowTooltip: true, |
||||
|
headerAlign: 'center' |
||||
|
}, |
||||
|
{ |
||||
|
columnProp: 'edit', |
||||
|
columnLabel: 'Edit Date', |
||||
|
align: 'center', |
||||
|
columnWidth: 100, |
||||
|
showOverflowTooltip: true, |
||||
|
headerAlign: 'center' |
||||
|
}, |
||||
|
{ |
||||
|
columnProp: 'endPlanner', |
||||
|
columnLabel: 'Last Editor', |
||||
|
align: 'center', |
||||
|
columnWidth: 100, |
||||
|
showOverflowTooltip: true, |
||||
|
headerAlign: 'center' |
||||
|
}, |
||||
|
{ |
||||
|
columnProp: 'remarkDelay', |
||||
|
columnLabel: 'Remark Delay', |
||||
|
align: 'center', |
||||
|
columnWidth: 110, |
||||
|
showOverflowTooltip: true, |
||||
|
headerAlign: 'center' |
||||
|
}, |
||||
|
{ |
||||
|
columnProp: 'remark', |
||||
|
columnLabel: 'Comments', |
||||
|
align: 'center', |
||||
|
columnWidth: 180, |
||||
|
showOverflowTooltip: true, |
||||
|
headerAlign: 'center' |
||||
|
}, |
||||
|
{ |
||||
|
columnProp: 'inspectionCompletedQty', |
||||
|
columnLabel: 'Inspection Completed Qty', |
||||
|
align: 'center', |
||||
|
columnWidth: 140, |
||||
|
showOverflowTooltip: true, |
||||
|
headerAlign: 'center' |
||||
|
} |
||||
|
] |
||||
|
} |
||||
|
}, |
||||
|
computed: { |
||||
|
visibleColumns() { |
||||
|
const source = this.baseColumnList || this.columnList |
||||
|
const applied = applyFieldSchemaToColumns(source, this.fieldSchemaFields) |
||||
|
return applied.filter(c => !c.columnHidden) |
||||
|
} |
||||
|
}, |
||||
|
created() { |
||||
|
this.baseColumnList = JSON.parse(JSON.stringify(this.columnList)) |
||||
|
}, |
||||
|
mounted() { |
||||
|
this.updateTableHeight() |
||||
|
window.addEventListener('resize', this.onWindowResize) |
||||
|
}, |
||||
|
activated () { |
||||
|
this.updateTableHeight() |
||||
|
this.refreshTableLayout() |
||||
|
}, |
||||
|
deactivated () { |
||||
|
this.refreshTableLayout() |
||||
|
}, |
||||
|
beforeDestroy () { |
||||
|
window.removeEventListener('resize', this.onWindowResize) |
||||
|
}, |
||||
|
methods: { |
||||
|
onWindowResize () { |
||||
|
this.updateTableHeight() |
||||
|
}, |
||||
|
updateTableHeight () { |
||||
|
const calculatedHeight = (window.innerHeight - 220) / 2 |
||||
|
this.height = calculatedHeight > 220 ? calculatedHeight : 220 |
||||
|
this.refreshTableLayout() |
||||
|
}, |
||||
|
refreshTableLayout () { |
||||
|
this.$nextTick(() => { |
||||
|
if (this.$refs.poTable && this.$refs.poTable.doLayout) { |
||||
|
this.$refs.poTable.doLayout() |
||||
|
} |
||||
|
}) |
||||
|
}, |
||||
|
formatColumnCell (row, item) { |
||||
|
if (item.columnProp === 'orderType') { |
||||
|
return formatPoOrderTypeLabel(row.orderType) |
||||
|
} |
||||
|
const prop = item && item.columnProp |
||||
|
if (!prop || !row) { |
||||
|
return '' |
||||
|
} |
||||
|
if (row[prop] !== undefined && row[prop] !== null) { |
||||
|
return row[prop] |
||||
|
} |
||||
|
if (row.extValues && typeof row.extValues === 'object' && |
||||
|
Object.prototype.hasOwnProperty.call(row.extValues, prop)) { |
||||
|
return row.extValues[prop] |
||||
|
} |
||||
|
return '' |
||||
|
}, |
||||
|
|
||||
|
buildQueryRequest() { |
||||
|
return buildPoOrderQueryParams({ |
||||
|
searchData: this.searchData, |
||||
|
advancedQueryData: this.advancedQueryData, |
||||
|
page: this.pageIndex, |
||||
|
limit: this.pageSize |
||||
|
}) |
||||
|
}, |
||||
|
|
||||
|
handleSearch() { |
||||
|
if (!this.searchData.customer) { |
||||
|
this.$message.warning('Please select Customer first') |
||||
|
return |
||||
|
} |
||||
|
this.pageIndex = 1 |
||||
|
this.getDataList() |
||||
|
}, |
||||
|
|
||||
|
onSessionCustomerChange (customer) { |
||||
|
this.searchData.customer = customer |
||||
|
this.advancedQueryData.rows = [] |
||||
|
this.pageIndex = 1 |
||||
|
this.dataList = [] |
||||
|
this.totalPage = 0 |
||||
|
this.currentRow = {} |
||||
|
this.clearDetailTabs() |
||||
|
if (!customer) { |
||||
|
this.fieldSchemaFields = [] |
||||
|
this.advancedQueryData.rows = [] |
||||
|
this.refreshTableLayout() |
||||
|
return |
||||
|
} |
||||
|
this.loadFieldSchema(customer).then(() => { |
||||
|
this.getDataList() |
||||
|
}) |
||||
|
}, |
||||
|
|
||||
|
loadFieldSchema (customer) { |
||||
|
return getPoFieldSchema({ |
||||
|
site: this.searchData.site, |
||||
|
customer, |
||||
|
scene: 'list' |
||||
|
}).then(({ data }) => { |
||||
|
if (data && data.code === 0 && data.data) { |
||||
|
this.fieldSchemaFields = data.data.fields || [] |
||||
|
const queryFields = getAdvancedQueryFieldsFromSchema(this.fieldSchemaFields) |
||||
|
this.advancedQueryData.rows = createAdvancedQueryDataFromSchema(queryFields).rows |
||||
|
} else { |
||||
|
this.fieldSchemaFields = [] |
||||
|
this.advancedQueryData.rows = [] |
||||
|
this.$message.error((data && data.msg) || 'Failed to load field permissions') |
||||
|
} |
||||
|
this.refreshTableLayout() |
||||
|
}).catch(() => { |
||||
|
this.fieldSchemaFields = [] |
||||
|
this.advancedQueryData.rows = [] |
||||
|
this.$message.error('Failed to load field permissions') |
||||
|
this.refreshTableLayout() |
||||
|
}) |
||||
|
}, |
||||
|
|
||||
|
handleListResponse(data) { |
||||
|
if (data.code === 0) { |
||||
|
this.dataList = ((data.page && data.page.list) || []).map(row => normalizeSchemaRowValues(row)) |
||||
|
this.pageIndex = data.page.currPage |
||||
|
this.pageSize = data.page.pageSize |
||||
|
this.totalPage = data.page.totalCount |
||||
|
|
||||
|
if (this.dataList.length > 0) { |
||||
|
this.$nextTick(() => { |
||||
|
if (this.$refs.poTable) { |
||||
|
this.$refs.poTable.setCurrentRow(this.dataList[0]) |
||||
|
} |
||||
|
this.changeData(this.dataList[0]) |
||||
|
}) |
||||
|
} else { |
||||
|
this.currentRow = {} |
||||
|
this.clearDetailTabs() |
||||
|
} |
||||
|
} else { |
||||
|
this.$message.error((data && data.msg) || 'Failed to get list') |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
getDataList() { |
||||
|
if (!this.searchData.customer) { |
||||
|
this.loading = false |
||||
|
this.dataList = [] |
||||
|
this.totalPage = 0 |
||||
|
this.currentRow = {} |
||||
|
this.clearDetailTabs() |
||||
|
this.refreshTableLayout() |
||||
|
return |
||||
|
} |
||||
|
this.loading = true |
||||
|
const { params, useAdvanced } = this.buildQueryRequest() |
||||
|
const request = useAdvanced ? searchPoDetailAdvancedPage(params) : searchPoDetailPage(params) |
||||
|
request.then(({ data }) => { |
||||
|
this.handleListResponse(data) |
||||
|
this.loading = false |
||||
|
this.refreshTableLayout() |
||||
|
}).catch(() => { |
||||
|
this.loading = false |
||||
|
this.$message.error('Request failed') |
||||
|
this.refreshTableLayout() |
||||
|
}) |
||||
|
}, |
||||
|
|
||||
|
/** External reset: only clears top basic conditions, not advancedQueryData */ |
||||
|
resetSearch() { |
||||
|
const currentCustomer = this.searchData.customer |
||||
|
this.searchData = { |
||||
|
site: this.$store.state.user.site, |
||||
|
customer: currentCustomer, |
||||
|
buyer: '', |
||||
|
poNo: '', |
||||
|
orderType: '', |
||||
|
partNo: '', |
||||
|
supplierNo: '', |
||||
|
sku: '', |
||||
|
status: '', |
||||
|
supplierName: '', |
||||
|
feeDateStart: '', |
||||
|
feeDateEnd: '' |
||||
|
} |
||||
|
this.pageIndex = 1 |
||||
|
this.getDataList() |
||||
|
}, |
||||
|
|
||||
|
openSearchBaseList (val) { |
||||
|
this.eamTagNo = val |
||||
|
let strVal = '' |
||||
|
let conSql = '' |
||||
|
if (val === 520) { |
||||
|
strVal = this.searchData.supplierNo || '' |
||||
|
conSql = " and supplier_no <> '' " |
||||
|
} else if (val === 2017) { |
||||
|
strVal = this.searchData.partNo || '' |
||||
|
conSql = " and part_no <> '' " |
||||
|
} |
||||
|
this.$nextTick(() => { |
||||
|
this.$refs.eamList.init(val, strVal, conSql) |
||||
|
}) |
||||
|
}, |
||||
|
|
||||
|
getEamData (val) { |
||||
|
if (this.eamTagNo === 520) { |
||||
|
this.searchData.supplierNo = val.supplier_no || val.code || '' |
||||
|
this.searchData.supplierName = val.supplier_name || val.name || '' |
||||
|
} else if (this.eamTagNo === 2017) { |
||||
|
this.searchData.partNo = val.part_no || val.code || '' |
||||
|
} |
||||
|
this.eamTagNo = '' |
||||
|
}, |
||||
|
// Export |
||||
|
exportExcel () { |
||||
|
if (!this.searchData.customer) { |
||||
|
this.$message.warning('Please select Customer first') |
||||
|
return |
||||
|
} |
||||
|
const now = new Date() |
||||
|
const year = now.getFullYear() |
||||
|
const month = String(now.getMonth() + 1).padStart(2, '0') |
||||
|
const day = String(now.getDate()).padStart(2, '0') |
||||
|
const hour = String(now.getHours()).padStart(2, '0') |
||||
|
const minute = String(now.getMinutes()).padStart(2, '0') |
||||
|
const second = String(now.getSeconds()).padStart(2, '0') |
||||
|
const exportName = `PO Order List ${year}${month}${day}${hour}${minute}${second}` |
||||
|
|
||||
|
const { params, useAdvanced } = buildPoOrderQueryParams({ |
||||
|
searchData: this.searchData, |
||||
|
advancedQueryData: this.advancedQueryData, |
||||
|
page: 1, |
||||
|
limit: 99999 |
||||
|
}) |
||||
|
|
||||
|
try { |
||||
|
excel.exportTable({ |
||||
|
url: useAdvanced ? 'pODetail/advancedPage' : 'pODetail/page', |
||||
|
columnMapping: this.visibleColumns, |
||||
|
mergeSetting: [], |
||||
|
params, |
||||
|
fileName: exportName + '.xlsx', |
||||
|
rowFetcher: res => { |
||||
|
const page = res.data && res.data.page |
||||
|
const rows = ((page && page.list) || []).map(row => normalizeSchemaRowValues(row)) |
||||
|
return { rows } |
||||
|
}, |
||||
|
columnFormatter: [], |
||||
|
dropColumns: [] |
||||
|
}) |
||||
|
} catch (error) { |
||||
|
this.$message.error('Export failed: ' + error.message) |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
// Page size |
||||
|
sizeChangeHandle(val) { |
||||
|
this.pageSize = val |
||||
|
this.pageIndex = 1 |
||||
|
this.getDataList() |
||||
|
}, |
||||
|
|
||||
|
// Current page |
||||
|
currentChangeHandle(val) { |
||||
|
this.pageIndex = val |
||||
|
this.getDataList() |
||||
|
}, |
||||
|
|
||||
|
// Row click event (similar to supplierList.vue changeData pattern) |
||||
|
changeData(row) { |
||||
|
if (!row) { |
||||
|
this.currentRow = {} |
||||
|
this.clearDetailTabs() |
||||
|
return |
||||
|
} |
||||
|
this.currentRow = JSON.parse(JSON.stringify(row)) |
||||
|
this.refreshCurrentTabTable() |
||||
|
}, |
||||
|
|
||||
|
// Refresh current tab table data (similar to supplierList.vue refreshCurrentTabTable) |
||||
|
refreshCurrentTabTable() { |
||||
|
if (!this.hasCurrentRowData()) { |
||||
|
this.clearDetailTabs() |
||||
|
return |
||||
|
} |
||||
|
if (this.activeTab === 'orderDetail') { |
||||
|
// Order detail does not need refresh, display currentRow directly |
||||
|
} |
||||
|
if (this.activeTab === 'logistics') { |
||||
|
this.refreshLogisticsTable() |
||||
|
} |
||||
|
if (this.activeTab === 'inspectionDetail') { |
||||
|
this.refreshInspectionTable() |
||||
|
} |
||||
|
if (this.activeTab === 'partAttribute') { |
||||
|
this.refreshPartAttribute() |
||||
|
} |
||||
|
}, |
||||
|
getDetailTabHeight () { |
||||
|
return Number(this.height) - 20 |
||||
|
}, |
||||
|
hasCurrentRowData () { |
||||
|
return !!(this.currentRow && typeof this.currentRow === 'object' && Object.keys(this.currentRow).length > 0) |
||||
|
}, |
||||
|
clearDetailTabs () { |
||||
|
const site = this.searchData.site || this.$store.state.user.site |
||||
|
const height = this.getDetailTabHeight() |
||||
|
if (this.$refs.logisticsPoList && this.$refs.logisticsPoList.init) { |
||||
|
this.$refs.logisticsPoList.init({ |
||||
|
flexId: '', |
||||
|
supplierNo: '', |
||||
|
site, |
||||
|
height |
||||
|
}) |
||||
|
} |
||||
|
if (this.$refs.inspectionDetailList && this.$refs.inspectionDetailList.init) { |
||||
|
this.$refs.inspectionDetailList.init({ |
||||
|
site, |
||||
|
orderNo: '', |
||||
|
itemNo: null, |
||||
|
height |
||||
|
}) |
||||
|
} |
||||
|
if (this.$refs.partAttributeTab && this.$refs.partAttributeTab.init) { |
||||
|
this.$refs.partAttributeTab.init({ |
||||
|
site, |
||||
|
partNo: '', |
||||
|
codeNo: '', |
||||
|
functionType: 'P', |
||||
|
height |
||||
|
}) |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
// Refresh logistics tab table (similar to supplierList.vue refreshShareTable) |
||||
|
refreshLogisticsTable() { |
||||
|
if (!this.hasCurrentRowData()) { |
||||
|
this.clearDetailTabs() |
||||
|
return |
||||
|
} |
||||
|
let inData = { |
||||
|
flexId: this.currentRow.flexid, |
||||
|
supplierNo: this.currentRow.supplierNo, |
||||
|
site: this.$store.state.user.site, |
||||
|
height: this.getDetailTabHeight() |
||||
|
} |
||||
|
this.$refs.logisticsPoList.init(inData) |
||||
|
}, |
||||
|
|
||||
|
// Refresh inspection detail tab table |
||||
|
refreshInspectionTable() { |
||||
|
if (!this.hasCurrentRowData()) { |
||||
|
this.clearDetailTabs() |
||||
|
return |
||||
|
} |
||||
|
let inData = { |
||||
|
site: this.$store.state.user.site, |
||||
|
orderNo: this.currentRow.orderNo || '', |
||||
|
itemNo: this.currentRow.itemNo || null, |
||||
|
height: this.getDetailTabHeight() |
||||
|
} |
||||
|
this.$refs.inspectionDetailList.init(inData) |
||||
|
}, |
||||
|
refreshPartAttribute () { |
||||
|
if (!this.hasCurrentRowData()) { |
||||
|
this.clearDetailTabs() |
||||
|
return |
||||
|
} |
||||
|
const site = this.currentRow.site || this.$store.state.user.site |
||||
|
const partNo = this.currentRow.partNo || '' |
||||
|
const inData = { |
||||
|
site, |
||||
|
partNo, |
||||
|
codeNo: this.currentRow.codeNo || '', |
||||
|
functionType: 'P', |
||||
|
height: this.getDetailTabHeight() |
||||
|
} |
||||
|
if (!partNo) { |
||||
|
this.initPartAttributeTab(inData) |
||||
|
return |
||||
|
} |
||||
|
if (inData.codeNo) { |
||||
|
this.initPartAttributeTab(inData) |
||||
|
return |
||||
|
} |
||||
|
searchPartInfo({ site, partNo }).then(({ data }) => { |
||||
|
const codeNo = (data && data.code === 0 && data.data) |
||||
|
? (data.data.codeNo || data.data.code_no || '') |
||||
|
: '' |
||||
|
this.$set(this.currentRow, 'codeNo', codeNo) |
||||
|
this.initPartAttributeTab({ |
||||
|
...inData, |
||||
|
codeNo |
||||
|
}) |
||||
|
}).catch(() => { |
||||
|
this.initPartAttributeTab(inData) |
||||
|
}) |
||||
|
}, |
||||
|
initPartAttributeTab (inData) { |
||||
|
if (this.$refs.partAttributeTab && this.$refs.partAttributeTab.init) { |
||||
|
this.$refs.partAttributeTab.init(inData) |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
// Tab click event (similar to supplierList.vue tabClick) |
||||
|
handleTabClick(tab, event) { |
||||
|
this.refreshCurrentTabTable() |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style scoped lang="scss"> |
||||
|
.el-table /deep/ .cell { |
||||
|
height: auto; |
||||
|
line-height: 1.5; |
||||
|
} |
||||
|
|
||||
|
/deep/ .customer-tab .el-tabs__content { |
||||
|
padding: 5px !important; |
||||
|
} |
||||
|
</style> |
||||
Write
Preview
Loading…
Cancel
Save
Reference in new issue