Skip to content

F
factory_front
Commit 0c9aa467 by qinjianhui
Options

fix: Table组件、产品详情优化

parent 9b747eca
Showing with 339 additions and 274 deletions
src/api/order.ts
......@@ -173,7 +173,7 @@ export function backEndCommentsApi(id: number, remark: string) {
)
}
//重新生成
export function regenerateSingle(subNumber: string) {
export function regenerateSingle(subNumber: string | number) {
return axios.get<never, BaseRespData<SendOrderData[]>>(
'productionFile/regenerateSingle',
{
......
src/components/TableView.vue
......@@ -9,11 +9,25 @@
header-align="center"
height="100%"
>
<ElTableColumn
v-if="selectionable"
type="selection"
width="50"
header-align="center"
align="center"
></ElTableColumn>
<ElTableColumn
v-if="serialNumberable"
label="序号"
type="index"
width="50"
header-align="center"
align="center"
></ElTableColumn>
<template v-for="column in columns" :key="column.key">
<ElTableColumn
v-if="
column.type === 'index' ||
column.type === 'selection' ||
column.type === 'expand'
"
v-bind="column"
......@@ -70,6 +84,14 @@ defineProps({
type: Boolean,
default: false,
},
serialNumberable: {
type: Boolean,
default: false,
},
selectionable: {
type: Boolean,
default: false,
}
})
const attrs = useAttrs()
const slots = useSlots() as Record<string, Slot>
......
src/views/order/ProductInfo.vue
......@@ -7,231 +7,210 @@
:key="item.id"
class="order-list-expand_item"
>
<div class="order-list-expand_item_img">
<!-- <img :src="item.variantImage" style="width: 100%; height: 100%" /> -->
<ImageView :src="item.variantImage" width="98px" height="98px" />
</div>
<div class="order-list-expand_item_info">
<div
:title="item?.productName || '--'"
class="order-list-expand_item_info_title"
style="font-weight: bold"
>
<span class="order-list-expand_item_label">商品名:</span>
<div class="order-list-expand_item_value">
{{ item?.productName || '--' }}&emsp;
<img
v-show="
status == 4 &&
item?.num !== undefined &&
item?.shipmentNum !== undefined &&
item?.notPassNum !== undefined &&
(item.num || 0) -
((item.shipmentNum || 0) - (item.notPassNum || 0)) >
0 &&
item.notPassNum > 0
"
src="@/assets/images/jiaji.svg"
alt=""
width="24"
/>
</div>
</div>
<div
:title="item.baseSku || ''"
class="order-list-expand_item_info_title"
>
<span class="order-list-expand_item_label">Base SKU:</span>
<span class="order-list-expand_item_value"
>{{ item.baseSku || '--'
}}<el-icon class="icon" @click="copy(item.baseSku || '')"
><DocumentCopy /></el-icon
></span>
</div>
<div
:title="item.variantSku || ''"
class="order-list-expand_item_info_title"
>
<span class="order-list-expand_item_label">Variant SKU:</span>
<span class="order-list-expand_item_value"
>{{ item.variantSku || '--' }}
<el-icon class="icon" @click="copy(item.variantSku || '')"
><DocumentCopy
/></el-icon>
</span>
</div>
<div
:title="item.shopNumber || ''"
class="order-list-expand_item_info_title"
>
<span class="order-list-expand_item_label">店铺单号:</span>
<span class="order-list-expand_item_value"
>{{ item.shopNumber || '--' }}
<el-icon class="icon" @click="copy(item.shopNumber || '')"
><DocumentCopy
/></el-icon>
</span>
</div>
<div
:title="
isPod ? item.factorySubOrderNumber || '' : item.subOrderNumber || ''
"
class="order-list-expand_item_info_title"
>
<span class="order-list-expand_item_label">生产单号:</span>
<span class="order-list-expand_item_value"
>{{
isPod
? item.factorySubOrderNumber || ''
: item.subOrderNumber || '--'
}}<el-icon
class="icon"
@click="
copy(
isPod
? item.factorySubOrderNumber || ''
: item.subOrderNumber || '',
)
"
><DocumentCopy
/></el-icon>
</span>
<div class="order-list-expand_item_content">
<div class="order-list-expand_item_img">
<!-- <img :src="item.variantImage" style="width: 100%; height: 100%" /> -->
<ImageView :src="item.variantImage" width="98px" height="98px" />
</div>
<div class="order-list-expand_item_info_title">
<span class="order-list-expand_item_label">发货状态:</span>
<span
v-if="(item.shipmentNum || 0) - (item.notPassNum || 0) === item.num"
class="order-list-expand_item_value"
<div class="order-list-expand_item_info">
<div
:title="item?.productName || '--'"
class="order-list-expand_item_info_title"
style="font-weight: bold"
>
<span class="order-list-expand_item_label">商品名:</span>
<div class="order-list-expand_item_value">
{{ item?.productName || '--' }}&emsp;
<img
v-show="
status == 4 &&
item?.num !== undefined &&
item?.shipmentNum !== undefined &&
item?.notPassNum !== undefined &&
(item.num || 0) -
((item.shipmentNum || 0) - (item.notPassNum || 0)) >
0 &&
item.notPassNum > 0
"
src="@/assets/images/jiaji.svg"
alt=""
width="24"
/>
</div>
</div>
<div
:title="item.baseSku || ''"
class="order-list-expand_item_info_title"
>
<span class="order-list-expand_item_label">Base SKU:</span>
<span class="order-list-expand_item_value"
>{{ item.baseSku || '--'
}}<el-icon class="icon" @click="copy(item.baseSku || '')"
><DocumentCopy /></el-icon
></span>
</div>
<div
:title="item.variantSku || ''"
class="order-list-expand_item_info_title"
>
<span class="order-list-expand_item_label">Variant SKU:</span>
<span class="order-list-expand_item_value"
>{{ item.variantSku || '--' }}
<el-icon class="icon" @click="copy(item.variantSku || '')"
><DocumentCopy
/></el-icon>
</span>
</div>
<div
:title="item.shopNumber || ''"
class="order-list-expand_item_info_title"
>
<el-tag effect="dark" type="success"> 已发货 </el-tag>
</span>
<span
v-if="
item.num !== (item.shipmentNum || 0) - (item.notPassNum || 0) &&
(item.shipmentNum || 0) > 0
<span class="order-list-expand_item_label">店铺单号:</span>
<span class="order-list-expand_item_value"
>{{ item.shopNumber || '--' }}
<el-icon class="icon" @click="copy(item.shopNumber || '')"
><DocumentCopy
/></el-icon>
</span>
</div>
<div
:title="
isPod ? item.factorySubOrderNumber || '' : item.subOrderNumber || ''
"
class="order-list-expand_item_value"
class="order-list-expand_item_info_title"
>
<el-tag effect="dark"> 部分发货 </el-tag>
</span>
<span
v-if="item.shipmentNum === 0"
class="order-list-expand_item_value"
<span class="order-list-expand_item_label">生产单号:</span>
<span class="order-list-expand_item_value"
>{{
isPod
? item.factorySubOrderNumber || ''
: item.subOrderNumber || '--'
}}<el-icon
class="icon"
@click="
copy(
isPod
? item.factorySubOrderNumber || ''
: item.subOrderNumber || '',
)
"
><DocumentCopy
/></el-icon>
</span>
</div>
<div class="order-list-expand_item_info_title">
<span class="order-list-expand_item_label">发货状态:</span>
<span
v-if="(item.shipmentNum || 0) - (item.notPassNum || 0) === item.num"
class="order-list-expand_item_value"
>
<el-tag effect="dark" type="success"> 已发货 </el-tag>
</span>
<span
v-if="
item.num !== (item.shipmentNum || 0) - (item.notPassNum || 0) &&
(item.shipmentNum || 0) > 0
"
class="order-list-expand_item_value"
>
<el-tag effect="dark"> 部分发货 </el-tag>
</span>
<span
v-if="item.shipmentNum === 0"
class="order-list-expand_item_value"
>
<el-tag effect="dark" type="danger"> 未发货 </el-tag>
</span>
</div>
<div
v-if="!isPod"
:title="item.material || ''"
class="order-list-expand_item_info_title"
>
<el-tag effect="dark" type="danger"> 未发货 </el-tag>
</span>
</div>
<div
v-if="!isPod"
:title="item.material || ''"
class="order-list-expand_item_info_title"
>
<span class="order-list-expand_item_label">材质:</span>
<span class="order-list-expand_item_value"
>{{ item.material || '--' }}
</span>
<span class="order-list-expand_item_label">材质:</span>
<span class="order-list-expand_item_value"
>{{ item.material || '--' }}
</span>
</div>
<div
:title="item.remark || ''"
class="order-list-expand_item_info_title"
>
<span class="order-list-expand_item_label">备注:</span>
<span class="order-list-expand_item_value"
>{{ item.remark || '--' }}
</span>
</div>
</div>
<div :title="item.remark || ''" class="order-list-expand_item_info_title">
<span class="order-list-expand_item_label">备注:</span>
<span class="order-list-expand_item_value"
>{{ item.remark || '--' }}
</span>
<el-icon
class="icon"
style="color: #e6a23c"
@click="setRemarks(item.id, item.remark || '')"
><EditPen
/></el-icon>
<div class="order-list-expand_item_price">
<div class="order-list-expand_item_info_title">
<span class="order-list-expand_item_label">单价:</span>
<span class="order-list-expand_item_value">{{
item.price || '--'
}}</span>
</div>
<div class="order-list-expand_item_info_title font-bold">
<span class="order-list-expand_item_label">购买数:</span>
<span class="order-list-expand_item_value">{{ item.num || 0 }}</span>
</div>
<div class="order-list-expand_item_info_title">
<span class="order-list-expand_item_label">已发数:</span>
<span class="order-list-expand_item_value">{{
item.shipmentNum || 0
}}</span>
</div>
<div class="order-list-expand_item_info_title">
<span class="order-list-expand_item_label">未发数:</span>
<span v-if="!isPod" class="order-list-expand_item_value">{{
(item.num || 0) - ((item.shipmentNum || 0) - (item.notPassNum || 0))
}}</span>
<span v-else class="order-list-expand_item_value">{{
(item.num || 0) - (item.shipmentNum || 0)
}}</span>
</div>
<div v-if="isPod" class="order-list-expand_item_info_title">
<span class="order-list-expand_item_label">工艺:</span>
<span class="order-list-expand_item_value">{{
item?.processName || '--'
}}</span>
</div>
<div v-if="isPod" class="order-list-expand_item_info_title">
<span class="order-list-expand_item_label">工艺简称:</span>
<span class="order-list-expand_item_value">{{
item?.process || '--'
}}</span>
</div>
<div v-if="!isPod" class="order-list-expand_item_info_title">
<span class="order-list-expand_item_label">待质检:</span>
<span class="order-list-expand_item_value">{{
(item.shipmentNum || 0) -
((item.passNum || 0) + (item.notPassNum || 0))
}}</span>
</div>
<div v-if="!isPod" class="order-list-expand_item_info_title">
<span class="order-list-expand_item_label">质检(通过):</span>
<span class="order-list-expand_item_value">{{
item.passNum || 0
}}</span>
</div>
<div v-if="!isPod" class="order-list-expand_item_info_title">
<span class="order-list-expand_item_label">质检(不通过):</span>
<span class="order-list-expand_item_value">{{
item.notPassNum || 0
}}</span>
</div>
</div>
</div>
<div class="order-list-expand_item_price">
<div class="order-list-expand_item_info_title">
<span class="order-list-expand_item_label">单价:</span>
<span class="order-list-expand_item_value">{{
item.price || '--'
}}</span>
</div>
<div class="order-list-expand_item_info_title font-bold">
<span class="order-list-expand_item_label">购买数:</span>
<span class="order-list-expand_item_value">{{ item.num || 0 }}</span>
</div>
<div class="order-list-expand_item_info_title">
<span class="order-list-expand_item_label">已发数:</span>
<span class="order-list-expand_item_value">{{
item.shipmentNum || 0
}}</span>
</div>
<div class="order-list-expand_item_info_title">
<span class="order-list-expand_item_label">未发数:</span>
<span v-if="!isPod" class="order-list-expand_item_value">{{
(item.num || 0) - ((item.shipmentNum || 0) - (item.notPassNum || 0))
}}</span>
<span v-else class="order-list-expand_item_value">{{
(item.num || 0) - (item.shipmentNum || 0)
}}</span>
</div>
<div v-if="isPod" class="order-list-expand_item_info_title">
<span class="order-list-expand_item_label">工艺:</span>
<span class="order-list-expand_item_value">{{
item?.processName || '--'
}}</span>
</div>
<div v-if="isPod" class="order-list-expand_item_info_title">
<span class="order-list-expand_item_label">工艺简称:</span>
<span class="order-list-expand_item_value">{{
item?.process || '--'
}}</span>
</div>
<div v-if="!isPod" class="order-list-expand_item_info_title">
<span class="order-list-expand_item_label">待质检:</span>
<span class="order-list-expand_item_value">{{
(item.shipmentNum || 0) -
((item.passNum || 0) + (item.notPassNum || 0))
}}</span>
</div>
<div v-if="!isPod" class="order-list-expand_item_info_title">
<span class="order-list-expand_item_label">质检(通过):</span>
<span class="order-list-expand_item_value">{{
item.passNum || 0
}}</span>
</div>
<div v-if="!isPod" class="order-list-expand_item_info_title">
<span class="order-list-expand_item_label">质检(不通过):</span>
<span class="order-list-expand_item_value">{{
item.notPassNum || 0
}}</span>
</div>
<div
v-if="
(status === 3 || status === 4 || status === 2) &&
(item.shipmentNum === 0 ||
item.num !== (item.shipmentNum || 0) - (item.notPassNum || 0))
"
class="order-list-expand_item_info_title"
>
<el-button
type="success"
size="small"
@click="downloadManuscriptBySubOrder(item)"
>下载稿件</el-button
>
<el-button
type="primary"
size="small"
@click="regenerate(item.subOrderNumber || '')"
>重新生成</el-button
>
</div>
<div class="operation">
<slot name="operation" :product-item="item"></slot>
</div>
</div>
</template>
<script setup lang="ts">
import ImageView from '@/components/ImageView.vue'
import { DocumentCopy, EditPen } from '@element-plus/icons-vue'
import { filePath } from '@/api/axios'
import { downloadOrder } from '@/api/order'
import { OrderData, ProductList } from '@/types/api/order'
import { PropType, defineEmits } from 'vue'
import { DocumentCopy } from '@element-plus/icons-vue'
import { OrderData } from '@/types/api/order'
import { PropType } from 'vue'
defineProps({
row: {
type: Object as PropType<OrderData>,
......@@ -249,36 +228,24 @@ defineProps({
default: false,
},
})
// 传递多个emit 带参数的事件
const emit = defineEmits<{
(e: 'update-remark', payload: { id: number; remark: string }): void
(e: 'again-generated', payload: { id: string }): void
}>()
const downloadManuscriptBySubOrder = async (item: ProductList) => {
try {
const res = await downloadOrder(item.id)
window.open(filePath + res.message)
} catch (e) {
//showError(e)
}
}
const regenerate = async (id: string) => {
emit('again-generated', { id })
}
const copy = (text: string) => {
navigator.clipboard.writeText(text)
ElMessage.success('复制成功')
}
const setRemarks = (id: number, remark: string) => {
emit('update-remark', { id, remark })
}
</script>
<style lang="scss" scoped>
.order-list-expand_item {
display: flex;
border-bottom: 1px solid #eee;
padding: 20px;
& .operation {
display: flex;
justify-content: flex-end;
gap: 10px;
}
}
.order-list-expand_item_content {
display: flex;
}
.order-list-expand_item:last-child {
border-bottom: 0;
......
src/views/order/index.vue
......@@ -293,9 +293,60 @@
:row="row"
:is-pod="false"
:status="statusCode"
@update-remark="handleUpdateRemark"
@again-generated="handleAgainGenerated"
/>
>
<template #operation="{ productItem }">
<div class="operation-item" title="添加备注">
<el-icon
class="icon"
style="color: #e6a23c"
@click="handleUpdateRemark(productItem)"
><EditPen
/></el-icon>
</div>
<div
v-if="
(statusCode === 3 ||
statusCode === 4 ||
statusCode === 2) &&
(productItem.shipmentNum === 0 ||
productItem.num !==
(productItem.shipmentNum || 0) -
(productItem.notPassNum || 0))
"
class="operation-item"
>
<el-button
type="primary"
size="small"
@click="
handleAgainGenerated(
productItem.subOrderNumber || '',
)
"
>重新生成</el-button
>
</div>
<div
v-if="
(statusCode === 3 ||
statusCode === 4 ||
statusCode === 2) &&
(productItem.shipmentNum === 0 ||
productItem.num !==
(productItem.shipmentNum || 0) -
(productItem.notPassNum || 0))
"
class="operation-item"
>
<el-button
type="success"
size="small"
@click="downloadManuscriptBySubOrder(productItem)"
>下载稿件</el-button
>
</div></template
></ProductInfo
>
<template v-if="row.productList.length > 2">
<div class="order-list-expand_more">
<span @click="openAll(row)">
......@@ -608,16 +659,6 @@
<DocumentCopy />
</el-icon>
</div>
<!-- <div class="order-list-expand_item_info_title">-->
<!-- <span class="order-list-expand_item_label">工厂订单号:</span>-->
<!-- <span class="order-list-expand_item_value">{{-->
<!-- row.factoryOrderNumber || '&#45;&#45;'-->
<!-- }}</span>-->
<!-- <el-icon class="icon" @click="copy(row.factoryOrderNumber || '')"-->
<!-- ><DocumentCopy-->
<!-- /></el-icon>-->
<!-- </div>-->
<div class="order-list-expand_item_info_title">
<span class="order-list-expand_item_label"
>发货方式:</span
......@@ -884,10 +925,11 @@
<div class="header-search">
<el-input
v-model="shipmentUid"
style="width: 300px;"
style="width: 300px"
placeholder="请输入提货码"
size="large"
clearable />
clearable
/>
<el-input
ref="qaInputRef"
v-model="qaCode"
......@@ -948,7 +990,7 @@ import type {
} from '@/types/api/order'
import { nextTick, onMounted, reactive, ref } from 'vue'
import useElTableColumnWidth from '@/utils/hooks/useElTableColumnWidth'
import { ArrowDown, ArrowUp, DocumentCopy } from '@element-plus/icons-vue'
import { ArrowDown, ArrowUp, DocumentCopy, EditPen } from '@element-plus/icons-vue'
import usePageList from '@/utils/hooks/usePageList'
import {
getOrderList,
......@@ -966,6 +1008,7 @@ import {
reGenerateScriptUrlApi,
refreshProductInfo,
reCreateScriptUrlApi,
downloadOrder,
} from '@/api/order'
import { showConfirm } from '@/utils/ui'
import { useValue } from '@/utils/hooks/useValue'
......@@ -1164,7 +1207,10 @@ const {
{
...searchForm.value,
status: statusCode.value,
timeType: timeRange.value && timeRange.value.length > 0 ? searchForm.value.timeType : null,
timeType:
timeRange.value && timeRange.value.length > 0
? searchForm.value.timeType
: null,
startTime:
searchForm.value.timeType === ''
? null
......@@ -1235,6 +1281,14 @@ const getLogisticsList = async () => {
//showError(error)
}
}
const downloadManuscriptBySubOrder = async (item: ProductList) => {
try {
const res = await downloadOrder(item.id)
window.open(filePath + res.message)
} catch (e) {
//showError(e)
}
}
const sendOrderList = ref<SendOrderData[]>([])
const sendOrderVisible = ref(false)
// 获取发货单列表
......@@ -1262,15 +1316,15 @@ const changeTab = (item: Tab) => {
splitRef.value!.domResize()
})
}
const handleUpdateRemark = (payload: { id: number; remark: string }) => {
const handleUpdateRemark = (data: ProductList) => {
dialogVisible.value = true
inputValue.value = payload.remark
remarkId.value = payload.id
inputValue.value = data.remark || ''
remarkId.value = data.id
}
// 重新生成
const handleAgainGenerated = async (payload: { id: string }) => {
const handleAgainGenerated = async (id: number | string) => {
try {
const res = await regenerateSingle(payload.id)
const res = await regenerateSingle(id)
search()
ElMessage({
message: res.message,
......
src/views/order/pod/index.vue
......@@ -460,6 +460,7 @@
<TableView
:paginated-data="tableData"
:columns="tableColumns"
:selectionable="true"
default-expand-all
:span-method="arraySpanMethod"
@selection-change="handleSelectionChange"
......@@ -471,12 +472,37 @@
class="order-list-expand"
:style="{ width: `${thOrderDetailWidth + 50}px` }"
>
<ProductInfo
:row="row"
:status="status"
:is-pod="true"
@update-remark="handleUpdateRemark"
/>
<ProductInfo :row="row" :status="status" :is-pod="true">
<template #operation="{ productItem }">
<div class="operation-item" title="添加备注">
<el-icon
class="icon"
style="color: #e6a23c"
@click="
handleUpdateRemark(
productItem.id,
productItem.remark || '',
)
"
><EditPen
/></el-icon>
</div>
<div
v-if="status === 'TO_BE_RECEIPT'"
class="operation-item"
>
<el-button size="small" type="warning"
>申请补胚</el-button
>
</div>
<div
v-if="status === 'TO_BE_RECEIPT'"
class="operation-item"
>
<el-button size="small" type="danger">作废</el-button>
</div>
</template>
</ProductInfo>
<template v-if="row.productList.length > 2">
<div class="order-list-expand_more">
<span @click="openAll(row)">
......@@ -785,7 +811,9 @@
width="400px"
:close-on-click-modal="false"
>
<p>基版 <b>{{cardItem?.baseSku}}</b> 的统计数量为：<b> {{count}}</b></p>
<p>
基版 <b>{{ cardItem?.baseSku }}</b> 的统计数量为：<b> {{ count }}</b>
</p>
</el-dialog>
<right-menu
ref="rightMenuRef"
......@@ -853,7 +881,7 @@ import {
imageAryInter,
CardOrderData,
} from '@/types/api/podOrder'
import { ArrowUp, ArrowDown } from '@element-plus/icons-vue'
import { ArrowUp, ArrowDown, EditPen } from '@element-plus/icons-vue'
import { getLogisticsCompanyList } from '@/api/common'
import { ElButton, type FormRules } from 'element-plus'
import { showConfirm } from '@/utils/ui'
......@@ -1174,11 +1202,6 @@ const [searchForm] = useValue<SearchForm>({
const tableColumns = computed<CustomColumn<CardOrderData[]>>(() => {
return [
{
type: 'selection',
width: 50,
align: 'center',
},
{
type: 'expand',
align: 'center',
slot: 'expand',
......@@ -1661,8 +1684,7 @@ const openLog = async (id?: number) => {
console.error(e)
}
}
const handleUpdateRemark = (payload: { id: number; remark: string }) => {
const { id, remark } = payload
const handleUpdateRemark = (id: number, remark: string) => {
ElMessageBox.prompt('备注', '备注', {
confirmButtonText: '确定',
cancelButtonText: '取消',
......@@ -1672,7 +1694,7 @@ const handleUpdateRemark = (payload: { id: number; remark: string }) => {
inputPlaceholder: '备注',
}).then(async ({ value = remark }) => {
try {
await updateRemarkApi(id, value)
await updateRemarkApi(id, value as string)
ElMessage.success('操作成功')
loadDiffList()
} catch (e) {
......
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