Skip to content

F
factory_front
Commit fb3b2796 by linjinhong
Options

podus订单跟踪

parent 6a561044
Showing with 352 additions and 264 deletions
src/components/TableView.vue
......@@ -5,9 +5,9 @@
:data="paginatedData"
border
:stripe="stripe"
v-bind="attrs"
header-align="center"
height="100%"
v-bind="attrs"
>
<ElTableColumn
v-if="selectionable"
......
src/components/splitDiv/splitDiv.vue
......@@ -10,7 +10,7 @@ const props = defineProps({
type: String || Number,
},
otherSize: {
default: 20,
default: '20',
type: String || Number,
},
})
......@@ -19,7 +19,7 @@ const domSize = ref<string>('0')
function domResize() {
const father = document.getElementsByClassName('splitpanes')[0]
const top = document.getElementById('top')
if(top && father){
if (top && father) {
const v = ((top.clientHeight / father?.clientHeight) * 100).toFixed(2)
if (props.size === '') {
......@@ -28,9 +28,8 @@ function domResize() {
domSize.value = props.size
}
}
}
onUnmounted(()=>{
onUnmounted(() => {
window.removeEventListener('resize', domResize)
})
onMounted(() => {
......@@ -38,7 +37,7 @@ onMounted(() => {
domResize()
})
defineExpose({
domResize
domResize,
})
</script>
......@@ -48,7 +47,6 @@ defineExpose({
<div id="top">
<slot name="top"></slot>
</div>
</pane>
<pane style="flex: 1; flex-shrink: 0">
<div id="bottom">
......@@ -67,15 +65,15 @@ defineExpose({
#top {
height: fit-content;
}
#other-pane{
#other-pane {
height: 100%;
}
#bottom {
height: 100%;
}
#top, #bottom {
#top,
#bottom {
display: flex;
flex-direction: column;
}
......@@ -99,11 +97,11 @@ defineExpose({
transform: translate(-50%);
width: 30px;
height: 1px;
content: "";
content: '';
position: absolute;
top: 50%;
left: 50%;
transition: background-color .3s;
transition: background-color 0.3s;
}
&::after {
......@@ -112,11 +110,11 @@ defineExpose({
transform: translate(-50%);
width: 30px;
height: 1px;
content: "";
content: '';
position: absolute;
top: 50%;
left: 50%;
transition: background-color .3s;
transition: background-color 0.3s;
}
}
......
src/router/menu.ts
......@@ -117,11 +117,11 @@ const menu: MenuItem[] = [
id: 8,
label: 'POD订单(US)',
},
// {
// index: '/pod-us-order/orderTracking',
// id: 8,
// label: 'POD(US)订单跟踪',
// },
{
index: '/pod-us-order/orderTracking',
id: 8,
label: 'POD(US)订单跟踪',
},
],
},
......
src/types/api/podUsOrder.ts
......@@ -8,7 +8,7 @@ export interface SearchForm {
shopNumber: string
shipmentType: string
userMark: string
logisticsTracking: string
processNumber: string
baseSku: string
factoryOrderNumber: string
sku: string
......
src/views/order/orderTracking/index.vue
......@@ -4,16 +4,26 @@ import {
warehouseInfo,
warehouseInfoGetAll,
} from '@/api/warehouse.ts'
import { getListCraftApi, getProductionClientApi } from '@/api/podUsOrder'
import {
getListCraftApi,
getProductionClientApi,
getOrderList,
getOperationLogApi,
getOrderTabData,
} from '@/api/podUsOrder'
import {
SearchForm,
CraftListData,
ProductionClient,
ProductList,
PodUsOrderListData,
LogListData,
Tab,
} from '@/types/api/podUsOrder'
import platformJson from '../../../json/platform.json'
import dayjs from 'dayjs'
import { getUserMarkList } from '@/api/common'
import { CaretBottom, CaretTop, DocumentCopy } from '@element-plus/icons-vue'
import { CaretBottom, CaretTop } from '@element-plus/icons-vue'
import SplitDiv from '@/components/splitDiv/splitDiv.vue'
import { useValue } from '@/utils/hooks/useValue'
......@@ -23,7 +33,7 @@ const [searchForm, resetSearchForm] = useValue<SearchForm>({
shopNumber: '',
shipmentType: '',
userMark: '',
logisticsTracking: '',
processNumber: '',
baseSku: '',
factoryOrderNumber: '',
sku: '',
......@@ -46,43 +56,203 @@ const [searchForm, resetSearchForm] = useValue<SearchForm>({
const tableColumns = computed(() => {
return [
{
label: '商品',
prop: 'goods',
slot: 'goods',
minWidth: 920,
label: '订单号',
prop: 'factoryOrderNumber',
width: 160,
align: 'center',
},
{
label: '第三方订单号',
prop: 'thirdOrderNumber',
width: 240,
align: 'center',
},
{
label: '店铺单号',
prop: 'shopNumber',
width: 160,
align: 'center',
},
{
label: '订单状态',
prop: 'status',
slot: 'status',
width: 160,
align: 'center',
},
{
label: '订单详情',
prop: 'orderDetail',
slot: 'orderDetail',
width: 300,
label: '物流类型',
slot: 'shipmentType',
prop: 'shipmentType',
width: 120,
align: 'center',
},
{
label: '单价',
slot: 'price',
label: '物流跟踪号',
prop: 'trackingNumber',
width: 160,
prop: 'price',
align: 'left',
align: 'center',
},
{
label: '总克重(g)',
prop: 'weight',
width: 100,
align: 'center',
},
{
label: '生产端',
prop: 'productionClient',
width: 100,
align: 'center',
},
{
label: '发货仓库',
prop: 'warehouseName',
width: 120,
align: 'center',
},
{
label: '物流方式',
prop: 'logisticsWayName',
width: 120,
align: 'center',
},
{
label: '收货人',
prop: 'receiverName',
width: 100,
align: 'center',
},
{
label: '收货人电话',
prop: 'receiverPhone',
width: 140,
align: 'center',
},
{
label: '收货人邮编',
prop: 'receiverPostCode',
width: 140,
align: 'center',
},
{
label: '收货地址',
prop: 'lanshouAddress',
width: 500,
align: 'center',
},
]
})
const goodsColumns = computed(() => {
return [
{
label: '商品图片',
prop: 'productImg',
slot: 'productImg',
width: 150,
},
{
label: '商品名称',
prop: 'productName',
width: 170,
align: 'center',
},
{
label: '生产单号',
prop: 'factorySubOrderNumber',
width: 170,
align: 'center',
},
{
label: '变体sku',
prop: 'variantSku',
width: 170,
align: 'center',
},
{
label: '第三方生产单号',
prop: 'thirdSubOrderNumber',
width: 170,
align: 'center',
},
{
label: '库存SKU',
prop: 'thirdSkuCode',
width: 170,
align: 'center',
},
{
label: '工厂',
prop: 'factoryCode',
width: 100,
align: 'center',
},
{
label: '货号',
prop: 'thirdStockSku',
width: 130,
align: 'center',
},
{
label: '时间',
slot: 'time',
width: 180,
prop: 'time',
align: 'left',
label: '款号',
prop: 'supplierProductNo',
width: 162,
align: 'center',
},
{
label: '工艺',
prop: 'craftName',
width: 140,
align: 'center',
},
{
label: '价格($)',
prop: 'productPrice',
align: 'center',
},
{
label: '模板金额($)',
prop: 'templatePrice',
width: 100,
align: 'center',
},
{
label: '工艺金额($)',
prop: 'craftPrice',
width: 100,
align: 'center',
},
{
label: '付款金额($)',
prop: 'payAmount',
width: 100,
align: 'center',
},
{
label: '异常原因',
width: 300,
prop: 'exceptionReason',
slot: 'exceptionReason',
align: 'left',
label: '补胚数量',
prop: 'replenishmentSumNum',
align: 'center',
},
{
label: '克重(g)',
prop: 'weight',
align: 'center',
},
{
label: '备注',
prop: 'remark',
align: 'center',
},
]
})
const tableData = ref([])
const tableData = ref<PodUsOrderListData[][]>([])
const goodsData = ref<ProductList[]>([])
const searchVisible = ref(false)
const goodsLoading = ref(false)
const logList = ref<LogListData[]>([])
const warehouseList = ref<warehouseInfo[]>([])
const timeRange = ref<string[]>([])
......@@ -140,7 +310,11 @@ const pagination = ref<factoryWarehouseInfo>({
currentPage: 1,
total: 0,
})
const search = () => {}
const search = () => {
goodsData.value = []
logList.value = []
getOrderListFn()
}
const getDateRange = (days = 0, type: 'past' | 'future' = 'past') => {
const end = dayjs()
......@@ -163,10 +337,6 @@ const getWeekRange = (weeks = 0, type: 'past' | 'future' = 'past') => {
async function getData() {}
const copy = (text: string) => {
navigator.clipboard.writeText(text)
ElMessage.success('复制成功')
}
const handleSizeChange = (pageSize: number) => {
pagination.value.pageSize = pageSize
getData()
......@@ -213,15 +383,97 @@ const loadCraftList = async () => {
console.error(e)
}
}
const getOrderListFn = async () => {
const loading = ElLoading.service({
fullscreen: true,
text: '操作中...',
background: 'rgba(0, 0, 0, 0.3)',
})
const { currentPage, pageSize } = pagination.value
try {
const { data } = await getOrderList(
{ ...searchForm.value },
currentPage,
pageSize,
)
tableData.value = data.records
pagination.value.total = data.total
} catch (e) {
console.error(e)
} finally {
loading.close()
}
}
const currentRowId = ref<number>()
function rowClick(row: PodUsOrderListData) {
currentRowId.value = row.id
goodsLoading.value = true
goodsData.value = row.productList as ProductList[]
const timer = setTimeout(() => {
goodsLoading.value = false
clearTimeout(timer)
}, 500)
}
const logLoading = ref(false)
const operationLog = async () => {
logLoading.value = true
try {
if (currentRowId.value) {
const res = await getOperationLogApi(currentRowId.value as number)
if (res.code !== 200) return
logList.value = res.data
}
} catch (e) {
console.error(e)
} finally {
const timer = setTimeout(() => {
logLoading.value = false
clearTimeout(timer)
}, 500)
}
}
const tabsNav = ref<Tab[]>([])
const loadTabData = async () => {
try {
const res = await getOrderTabData()
tabsNav.value = res.data.filter((el) => el.status !== 'BATCH_DOWNLOAD')
} catch (error) {
// showError(error)
}
}
function getStatus(status: string) {
const item = tabsNav.value.find((el) => el.status === status)
if (item) {
return item.statusName
}
return ''
}
watch(
() => currentRowId.value,
(newValue, oldValue) => {
if (newValue !== oldValue) {
operationLog()
}
},
)
loadTabData()
loadProductionClient()
getUserMark()
loadCraftList()
getData()
getWarehouse()
onMounted(() => {
getOrderListFn()
})
</script>
<template>
<split-div>
<split-div otherSize="35">
<template #top>
<el-card>
<ElForm :model="searchForm" size="default" inline class="search-form">
......@@ -324,17 +576,33 @@ getWarehouse()
style="width: 150px"
/>
</ElFormItem>
<ElFormItem label="状态">
<ElSelect
v-model="searchForm.status"
clearable
filterable
placeholder="请输入"
style="width: 150px"
>
<el-option
v-for="item in tabsNav"
:key="item.status"
:label="item.statusName"
:value="item.status"
></el-option>
</ElSelect>
</ElFormItem>
</div>
<ElFormItem label="类型">
<el-radio-group v-model="searchForm.customizedQuantity">
<el-radio-button label="single">单面</el-radio-button>
<el-radio-button label="multiple">多面</el-radio-button>
<el-radio-button value="single">单面</el-radio-button>
<el-radio-button value="multiple">多面</el-radio-button>
</el-radio-group>
</ElFormItem>
<ElFormItem label="数量">
<el-radio-group v-model="searchForm.multi">
<el-radio-button :label="false">单件</el-radio-button>
<el-radio-button :label="true">多件</el-radio-button>
<el-radio-button :value="false">单件</el-radio-button>
<el-radio-button :value="true">多件</el-radio-button>
</el-radio-group>
</ElFormItem>
<ElFormItem>
......@@ -438,7 +706,7 @@ getWarehouse()
</ElFormItem> -->
<ElFormItem label="物流跟踪号">
<ElInput
v-model.trim="searchForm.logisticsTracking"
v-model.trim="searchForm.processNumber"
placeholder="物流跟踪号"
clearable
style="width: 150px"
......@@ -503,211 +771,14 @@ getWarehouse()
:serial-numberable="true"
:selectionable="true"
:paginated-data="tableData"
highlight-current-row
@row-click="rowClick"
>
<template #goods="{ row }">
<div class="goods-info-box">
<div class="goods-list">
<div
v-for="item in row.productList"
:key="item"
class="goods-item"
>
<div class="goods-item-img">
<img :src="item.variantImage" alt="商品图片" />
</div>
<div class="goods-item-info">
<div class="goods-item-info-item">
<span class="goods-item-info-item-label"
>商品名称:</span
>
<span class="goods-item-info-item-value">
{{ item.productName }}
</span>
</div>
<div class="goods-item-info-item">
<span class="goods-item-info-item-label"
>变体SKU:</span
>
<span class="goods-item-info-item-value">
{{ item.variantSku }}
</span>
<el-icon
class="icon"
@click="copy(item.variantSku || '')"
>
<DocumentCopy />
</el-icon>
</div>
<div class="goods-item-info-item">
<span class="goods-item-info-item-label"
>库存SKU:</span
>
<span class="goods-item-info-item-value">
{{ item.thirdSkuCode }}
</span>
<el-icon
class="icon"
@click="copy(item.thirdSkuCode || '')"
>
<DocumentCopy />
</el-icon>
</div>
<div
v-if="item.thirdStockSku"
class="goods-item-info-item"
>
<span class="goods-item-info-item-label"
>货号:</span
>
<span class="goods-item-info-item-value">
{{ item.thirdStockSku }}
</span>
<el-icon
class="icon"
@click="copy(item.thirdStockSku || '')"
>
<DocumentCopy />
</el-icon>
</div>
<div class="goods-item-info-item">
<span class="goods-item-info-item-label"
>工艺:</span
>
<span class="goods-item-info-item-value">
{{ item.craftName }}
</span>
</div>
</div>
<div class="goods-item-info">
<div class="goods-item-info-item">
<span class="goods-item-info-item-label"
>生产单号:</span
>
<span
class="goods-item-info-item-value"
:title="item.factorySubOrderNumber"
>
{{ item.factorySubOrderNumber }}
</span>
<el-icon
class="icon"
@click="copy(item.factorySubOrderNumber || '')"
>
<DocumentCopy />
</el-icon>
</div>
<div class="goods-item-info-item">
<span class="goods-item-info-item-label"
>第三方生产单号:</span
>
<span
class="goods-item-info-item-value"
:title="item.thirdSubOrderNumber"
>
{{ item.thirdSubOrderNumber }}
</span>
<el-icon
class="icon"
@click="copy(item.thirdSubOrderNumber || '')"
>
<DocumentCopy />
</el-icon>
</div>
<div class="goods-item-info-item">
<span class="goods-item-info-item-label"
>工厂:</span
>
<span class="goods-item-info-item-value">
{{ item.factoryCode }}
</span>
</div>
<div class="goods-item-info-item">
<span class="goods-item-info-item-label"
>款号:</span
>
<span class="goods-item-info-item-value">
{{ item.supplierProductNo }}
</span>
</div>
<div
v-if="item.isReplenishment"
class="goods-item-info-item"
>
<!-- <span class="goods-item-info-item-label">补胚状态:</span> -->
<el-tag size="small" effect="dark" type="danger"
>补胚中
</el-tag>
</div>
</div>
<div class="goods-item-info">
<div class="goods-item-info-item">
<span class="goods-item-info-item-label"
>价格:</span
>
<span class="goods-item-info-item-value">
{{ item.productPrice }}($)
</span>
</div>
<div class="goods-item-info-item">
<span class="goods-item-info-item-label"
>模板金额:</span
>
<span class="goods-item-info-item-value">
{{ item.templatePrice }}($)
</span>
</div>
<div class="goods-item-info-item">
<span class="goods-item-info-item-label"
>工艺金额:</span
>
<span class="goods-item-info-item-value">
{{ item.craftPrice }}($)
</span>
</div>
<div class="goods-item-info-item">
<span class="goods-item-info-item-label"
>付款金额:</span
>
<span class="goods-item-info-item-value">
{{ item.payAmount }}($)
</span>
</div>
<div class="goods-item-info-item">
<span class="goods-item-info-item-label">{{
'已生产数量:'
}}</span>
<span class="goods-item-info-item-value">
{{ item.passNum }}
</span>
</div>
<div class="goods-item-info-item">
<span class="goods-item-info-item-label"
>补胚数量:</span
>
<span
class="goods-item-info-item-value"
:title="item.replenishmentSumNum"
>
{{ item.replenishmentSumNum || 0 }}
</span>
</div>
<div class="goods-item-info-item">
<span class="goods-item-info-item-label"
>克重:</span
>
<span
v-if="item.weight"
class="goods-item-info-item-value"
>
{{ item.weight }}g
</span>
</div>
</div>
</div>
</div>
</div>
<template #status="{ row }">
<div>{{ getStatus(row.status) }}</div>
</template>
<template #shipmentType="{ row }">
{{ ['自有物流', '工厂物流'][row.shipmentType] }}
</template>
</TableView>
</div>
......@@ -731,7 +802,26 @@ getWarehouse()
<template #other>
<div class="bottom-table">
<el-tabs>
<el-tab-pane label="库存操作明细"> </el-tab-pane>
<el-tab-pane label="商品明细">
<TableView
v-loading="goodsLoading"
ref="tableRef"
:columns="goodsColumns"
:serial-numberable="true"
:paginated-data="goodsData"
>
<template #productImg="{ row }">
<div><img :src="row.variantImage" alt="商品图片" /></div>
</template>
</TableView>
</el-tab-pane>
<el-tab-pane label="操作日志" @tab-click="operationLog">
<LogList
v-loading="logLoading"
:log-list="logList"
style="font-size: 14px; height: 100%"
/>
</el-tab-pane>
</el-tabs>
</div>
</template>
......
src/views/order/podUs/index.vue
......@@ -215,7 +215,7 @@
</ElFormItem> -->
<ElFormItem label="物流跟踪号">
<ElInput
v-model.trim="searchForm.logisticsTracking"
v-model.trim="searchForm.processNumber"
placeholder="物流跟踪号"
clearable
style="width: 150px"
......@@ -1946,7 +1946,7 @@ const [searchForm, resetSearchForm] = useValue<SearchForm>({
shopNumber: '',
shipmentType: '',
userMark: '',
logisticsTracking: '',
processNumber: '',
baseSku: '',
factoryOrderNumber: '',
sku: '',
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment