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 @@ ...@@ -5,9 +5,9 @@
:data="paginatedData" :data="paginatedData"
border border
:stripe="stripe" :stripe="stripe"
v-bind="attrs"
header-align="center" header-align="center"
height="100%" height="100%"
v-bind="attrs"
> >
<ElTableColumn <ElTableColumn
v-if="selectionable" v-if="selectionable"
......
src/components/splitDiv/splitDiv.vue
...@@ -10,7 +10,7 @@ const props = defineProps({ ...@@ -10,7 +10,7 @@ const props = defineProps({
type: String || Number, type: String || Number,
}, },
otherSize: { otherSize: {
default: 20, default: '20',
type: String || Number, type: String || Number,
}, },
}) })
...@@ -19,7 +19,7 @@ const domSize = ref<string>('0') ...@@ -19,7 +19,7 @@ const domSize = ref<string>('0')
function domResize() { function domResize() {
const father = document.getElementsByClassName('splitpanes')[0] const father = document.getElementsByClassName('splitpanes')[0]
const top = document.getElementById('top') const top = document.getElementById('top')
if(top && father){ if (top && father) {
const v = ((top.clientHeight / father?.clientHeight) * 100).toFixed(2) const v = ((top.clientHeight / father?.clientHeight) * 100).toFixed(2)
if (props.size === '') { if (props.size === '') {
...@@ -28,9 +28,8 @@ function domResize() { ...@@ -28,9 +28,8 @@ function domResize() {
domSize.value = props.size domSize.value = props.size
} }
} }
} }
onUnmounted(()=>{ onUnmounted(() => {
window.removeEventListener('resize', domResize) window.removeEventListener('resize', domResize)
}) })
onMounted(() => { onMounted(() => {
...@@ -38,7 +37,7 @@ onMounted(() => { ...@@ -38,7 +37,7 @@ onMounted(() => {
domResize() domResize()
}) })
defineExpose({ defineExpose({
domResize domResize,
}) })
</script> </script>
...@@ -48,7 +47,6 @@ defineExpose({ ...@@ -48,7 +47,6 @@ defineExpose({
<div id="top"> <div id="top">
<slot name="top"></slot> <slot name="top"></slot>
</div> </div>
</pane> </pane>
<pane style="flex: 1; flex-shrink: 0"> <pane style="flex: 1; flex-shrink: 0">
<div id="bottom"> <div id="bottom">
...@@ -67,15 +65,15 @@ defineExpose({ ...@@ -67,15 +65,15 @@ defineExpose({
#top { #top {
height: fit-content; height: fit-content;
} }
#other-pane{ #other-pane {
height: 100%; height: 100%;
} }
#bottom { #bottom {
height: 100%; height: 100%;
} }
#top, #bottom { #top,
#bottom {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
} }
...@@ -99,11 +97,11 @@ defineExpose({ ...@@ -99,11 +97,11 @@ defineExpose({
transform: translate(-50%); transform: translate(-50%);
width: 30px; width: 30px;
height: 1px; height: 1px;
content: ""; content: '';
position: absolute; position: absolute;
top: 50%; top: 50%;
left: 50%; left: 50%;
transition: background-color .3s; transition: background-color 0.3s;
} }
&::after { &::after {
...@@ -112,11 +110,11 @@ defineExpose({ ...@@ -112,11 +110,11 @@ defineExpose({
transform: translate(-50%); transform: translate(-50%);
width: 30px; width: 30px;
height: 1px; height: 1px;
content: ""; content: '';
position: absolute; position: absolute;
top: 50%; top: 50%;
left: 50%; left: 50%;
transition: background-color .3s; transition: background-color 0.3s;
} }
} }
......
src/router/menu.ts
...@@ -117,11 +117,11 @@ const menu: MenuItem[] = [ ...@@ -117,11 +117,11 @@ const menu: MenuItem[] = [
id: 8, id: 8,
label: 'POD订单(US)', label: 'POD订单(US)',
}, },
// { {
// index: '/pod-us-order/orderTracking', index: '/pod-us-order/orderTracking',
// id: 8, id: 8,
// label: 'POD(US)订单跟踪', label: 'POD(US)订单跟踪',
// }, },
], ],
}, },
......
src/types/api/podUsOrder.ts
...@@ -8,7 +8,7 @@ export interface SearchForm { ...@@ -8,7 +8,7 @@ export interface SearchForm {
shopNumber: string shopNumber: string
shipmentType: string shipmentType: string
userMark: string userMark: string
logisticsTracking: string processNumber: string
baseSku: string baseSku: string
factoryOrderNumber: string factoryOrderNumber: string
sku: string sku: string
......
src/views/order/orderTracking/index.vue
...@@ -4,16 +4,26 @@ import { ...@@ -4,16 +4,26 @@ import {
warehouseInfo, warehouseInfo,
warehouseInfoGetAll, warehouseInfoGetAll,
} from '@/api/warehouse.ts' } from '@/api/warehouse.ts'
import { getListCraftApi, getProductionClientApi } from '@/api/podUsOrder' import {
getListCraftApi,
getProductionClientApi,
getOrderList,
getOperationLogApi,
getOrderTabData,
} from '@/api/podUsOrder'
import { import {
SearchForm, SearchForm,
CraftListData, CraftListData,
ProductionClient, ProductionClient,
ProductList,
PodUsOrderListData,
LogListData,
Tab,
} from '@/types/api/podUsOrder' } from '@/types/api/podUsOrder'
import platformJson from '../../../json/platform.json' import platformJson from '../../../json/platform.json'
import dayjs from 'dayjs' import dayjs from 'dayjs'
import { getUserMarkList } from '@/api/common' 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 SplitDiv from '@/components/splitDiv/splitDiv.vue'
import { useValue } from '@/utils/hooks/useValue' import { useValue } from '@/utils/hooks/useValue'
...@@ -23,7 +33,7 @@ const [searchForm, resetSearchForm] = useValue<SearchForm>({ ...@@ -23,7 +33,7 @@ const [searchForm, resetSearchForm] = useValue<SearchForm>({
shopNumber: '', shopNumber: '',
shipmentType: '', shipmentType: '',
userMark: '', userMark: '',
logisticsTracking: '', processNumber: '',
baseSku: '', baseSku: '',
factoryOrderNumber: '', factoryOrderNumber: '',
sku: '', sku: '',
...@@ -46,43 +56,203 @@ const [searchForm, resetSearchForm] = useValue<SearchForm>({ ...@@ -46,43 +56,203 @@ const [searchForm, resetSearchForm] = useValue<SearchForm>({
const tableColumns = computed(() => { const tableColumns = computed(() => {
return [ return [
{ {
label: '商品', label: '订单号',
prop: 'goods', prop: 'factoryOrderNumber',
slot: 'goods', width: 160,
minWidth: 920, 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: '订单详情', label: '物流类型',
prop: 'orderDetail', slot: 'shipmentType',
slot: 'orderDetail', prop: 'shipmentType',
width: 300, width: 120,
align: 'center',
}, },
{ {
label: '单价', label: '物流跟踪号',
slot: 'price', prop: 'trackingNumber',
width: 160, width: 160,
prop: 'price', align: 'center',
align: 'left', },
{
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: '时间', label: '款号',
slot: 'time', prop: 'supplierProductNo',
width: 180, width: 162,
prop: 'time', align: 'center',
align: 'left', },
{
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: '异常原因', label: '补胚数量',
width: 300, prop: 'replenishmentSumNum',
prop: 'exceptionReason', align: 'center',
slot: 'exceptionReason', },
align: 'left', {
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 searchVisible = ref(false)
const goodsLoading = ref(false)
const logList = ref<LogListData[]>([])
const warehouseList = ref<warehouseInfo[]>([]) const warehouseList = ref<warehouseInfo[]>([])
const timeRange = ref<string[]>([]) const timeRange = ref<string[]>([])
...@@ -140,7 +310,11 @@ const pagination = ref<factoryWarehouseInfo>({ ...@@ -140,7 +310,11 @@ const pagination = ref<factoryWarehouseInfo>({
currentPage: 1, currentPage: 1,
total: 0, total: 0,
}) })
const search = () => {} const search = () => {
goodsData.value = []
logList.value = []
getOrderListFn()
}
const getDateRange = (days = 0, type: 'past' | 'future' = 'past') => { const getDateRange = (days = 0, type: 'past' | 'future' = 'past') => {
const end = dayjs() const end = dayjs()
...@@ -163,10 +337,6 @@ const getWeekRange = (weeks = 0, type: 'past' | 'future' = 'past') => { ...@@ -163,10 +337,6 @@ const getWeekRange = (weeks = 0, type: 'past' | 'future' = 'past') => {
async function getData() {} async function getData() {}
const copy = (text: string) => {
navigator.clipboard.writeText(text)
ElMessage.success('复制成功')
}
const handleSizeChange = (pageSize: number) => { const handleSizeChange = (pageSize: number) => {
pagination.value.pageSize = pageSize pagination.value.pageSize = pageSize
getData() getData()
...@@ -213,15 +383,97 @@ const loadCraftList = async () => { ...@@ -213,15 +383,97 @@ const loadCraftList = async () => {
console.error(e) 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() loadProductionClient()
getUserMark() getUserMark()
loadCraftList() loadCraftList()
getData() getData()
getWarehouse() getWarehouse()
onMounted(() => {
getOrderListFn()
})
</script> </script>
<template> <template>
<split-div> <split-div otherSize="35">
<template #top> <template #top>
<el-card> <el-card>
<ElForm :model="searchForm" size="default" inline class="search-form"> <ElForm :model="searchForm" size="default" inline class="search-form">
...@@ -324,17 +576,33 @@ getWarehouse() ...@@ -324,17 +576,33 @@ getWarehouse()
style="width: 150px" style="width: 150px"
/> />
</ElFormItem> </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> </div>
<ElFormItem label="类型"> <ElFormItem label="类型">
<el-radio-group v-model="searchForm.customizedQuantity"> <el-radio-group v-model="searchForm.customizedQuantity">
<el-radio-button label="single">单面</el-radio-button> <el-radio-button value="single">单面</el-radio-button>
<el-radio-button label="multiple">多面</el-radio-button> <el-radio-button value="multiple">多面</el-radio-button>
</el-radio-group> </el-radio-group>
</ElFormItem> </ElFormItem>
<ElFormItem label="数量"> <ElFormItem label="数量">
<el-radio-group v-model="searchForm.multi"> <el-radio-group v-model="searchForm.multi">
<el-radio-button :label="false">单件</el-radio-button> <el-radio-button :value="false">单件</el-radio-button>
<el-radio-button :label="true">多件</el-radio-button> <el-radio-button :value="true">多件</el-radio-button>
</el-radio-group> </el-radio-group>
</ElFormItem> </ElFormItem>
<ElFormItem> <ElFormItem>
...@@ -438,7 +706,7 @@ getWarehouse() ...@@ -438,7 +706,7 @@ getWarehouse()
</ElFormItem> --> </ElFormItem> -->
<ElFormItem label="物流跟踪号"> <ElFormItem label="物流跟踪号">
<ElInput <ElInput
v-model.trim="searchForm.logisticsTracking" v-model.trim="searchForm.processNumber"
placeholder="物流跟踪号" placeholder="物流跟踪号"
clearable clearable
style="width: 150px" style="width: 150px"
...@@ -503,211 +771,14 @@ getWarehouse() ...@@ -503,211 +771,14 @@ getWarehouse()
:serial-numberable="true" :serial-numberable="true"
:selectionable="true" :selectionable="true"
:paginated-data="tableData" :paginated-data="tableData"
highlight-current-row
@row-click="rowClick"
> >
<template #goods="{ row }"> <template #status="{ row }">
<div class="goods-info-box"> <div>{{ getStatus(row.status) }}</div>
<div class="goods-list"> </template>
<div <template #shipmentType="{ row }">
v-for="item in row.productList" {{ ['自有物流', '工厂物流'][row.shipmentType] }}
: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> </template>
</TableView> </TableView>
</div> </div>
...@@ -731,7 +802,26 @@ getWarehouse() ...@@ -731,7 +802,26 @@ getWarehouse()
<template #other> <template #other>
<div class="bottom-table"> <div class="bottom-table">
<el-tabs> <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> </el-tabs>
</div> </div>
</template> </template>
......
src/views/order/podUs/index.vue
...@@ -215,7 +215,7 @@ ...@@ -215,7 +215,7 @@
</ElFormItem> --> </ElFormItem> -->
<ElFormItem label="物流跟踪号"> <ElFormItem label="物流跟踪号">
<ElInput <ElInput
v-model.trim="searchForm.logisticsTracking" v-model.trim="searchForm.processNumber"
placeholder="物流跟踪号" placeholder="物流跟踪号"
clearable clearable
style="width: 150px" style="width: 150px"
...@@ -1946,7 +1946,7 @@ const [searchForm, resetSearchForm] = useValue<SearchForm>({ ...@@ -1946,7 +1946,7 @@ const [searchForm, resetSearchForm] = useValue<SearchForm>({
shopNumber: '', shopNumber: '',
shipmentType: '', shipmentType: '',
userMark: '', userMark: '',
logisticsTracking: '', processNumber: '',
baseSku: '', baseSku: '',
factoryOrderNumber: '', factoryOrderNumber: '',
sku: '', 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