Skip to content

F
factory_front
Commit 0d7b48e1 by qinjianhui
Options

feat: 页面样式修改

parent bb6917a9
Showing with 630 additions and 143 deletions
.cursor/rules/factory-rule.mdc
...@@ -3,9 +3,27 @@ description ...@@ -3,9 +3,27 @@ description
glob glob
alwaysApply: true alwaysApply: true
--- ---
## 技术栈 ## 技术栈
Vue3 + Element Plus + Pinia + Axios + TypeScript + Vite Vue3 + Element Plus + Pinia + Axios + TypeScript + Vite
## UI 相关编码要求
-- 当有上下两个子表时，使用 `src/components/splitDiv/splitDiv.vue` 组件，使用时注意传递对应的 props 和插槽
-- 所有按钮都需要使用 `span` 标签包裹，并添加 `class="item"` 类名
-- 所有按钮都需要使用 `type` 属性，并且值为 `primary`、`success`、`warning`、`danger`
-- 表格相关布局时，使用 `src/components/TableView.vue` 组件，使用时注意传递对应的 props 和插槽
## 接口相关
-- 所有接口统一放在 `src/api/`目录下，当模块多时，可按模块创建子目录，例如 `src/api/factoryOrderNew/xxx1`、`src/api/factoryOrderNew/xxx2`、`src/api/factoryOrderNew/xxx3`
## TS 类型定义相关
-- 所有类型定义统一放在 `src/types/`目录下，当模块多时，可按模块创建子目录，例如 `src/types/factoryOrderNew/xxx1`、`src/types/factoryOrderNew/xxx2`、`src/types/factoryOrderNew/xxx3`
## 代码编写原则 ## 代码编写原则
-- 只编写解决问题所需的最少代码 -- 只编写解决问题所需的最少代码
-- 避免冗余实现和过渡设计 -- 避免冗余实现和过渡设计
-- 实现一个复杂功能时，需要合理拆分组件，使每个文件的代码更易维护 -- 实现一个复杂功能时，需要合理拆分组件，使每个文件的代码更易维护
......
src/views/order/factoryOrderNew/component/BatchManageTable.vue
<template> <template>
<div class="batch-manage"> <div class="batch-manage">
<div class="batch-manage-filter"> <div class="batch-manage-filter">
<ElForm :inline="true" :model="filterForm" size="default"> <ElForm class="search-form" :inline="true" :model="filterForm">
<ElFormItem label="创建时间"> <ElFormItem label="创建时间">
<el-date-picker <el-date-picker
v-model="filterForm.createTimeRange" v-model="filterForm.createTimeRange"
...@@ -12,26 +12,6 @@ ...@@ -12,26 +12,6 @@
style="width: 320px" style="width: 320px"
/> />
</ElFormItem> </ElFormItem>
<ElFormItem label="开始时间">
<el-date-picker
v-model="filterForm.startTimeRange"
type="datetimerange"
value-format="YYYY-MM-DD HH:mm:ss"
start-placeholder="开始时间"
end-placeholder="结束时间"
style="width: 320px"
/>
</ElFormItem>
<ElFormItem label="完成时间">
<el-date-picker
v-model="filterForm.finishTimeRange"
type="datetimerange"
value-format="YYYY-MM-DD HH:mm:ss"
start-placeholder="开始时间"
end-placeholder="结束时间"
style="width: 320px"
/>
</ElFormItem>
<ElFormItem label="创建人"> <ElFormItem label="创建人">
<ElInput <ElInput
v-model="filterForm.creator" v-model="filterForm.creator"
...@@ -40,14 +20,6 @@ ...@@ -40,14 +20,6 @@
style="width: 120px" style="width: 120px"
/> />
</ElFormItem> </ElFormItem>
<ElFormItem label="编排组">
<ElInput
v-model="filterForm.arrangeGroup"
placeholder="编排组"
clearable
style="width: 120px"
/>
</ElFormItem>
<ElFormItem label="工艺类型"> <ElFormItem label="工艺类型">
<ElSelect <ElSelect
v-model="filterForm.craftType" v-model="filterForm.craftType"
...@@ -105,45 +77,40 @@ ...@@ -105,45 +77,40 @@
</div> </div>
<div class="batch-manage-actions"> <div class="batch-manage-actions">
<span class="item">
<ElButton type="danger" @click="handleBatchDelete">批量删除</ElButton> <ElButton type="danger" @click="handleBatchDelete">批量删除</ElButton>
</span>
</div> </div>
<div class="batch-manage-table"> <div class="batch-manage-table">
<ElTable <TableView
v-loading="loading" :paginated-data="tableData"
:data="tableData" :columns="columns"
border selectionable
style="width: 100%"
@selection-change="handleSelectionChange" @selection-change="handleSelectionChange"
> >
<ElTableColumn type="selection" width="45" /> <template #downloadStatus="{ row }">
<ElTableColumn prop="batchNo" label="批次号" min-width="120" /> <el-tag
<ElTableColumn prop="downloadStatus" label="下载状态" min-width="90" align="center"> :type="row.downloadStatus === '已下载' ? 'success' : 'info'"
<template #default="{ row }"> size="small"
<el-tag :type="row.downloadStatus === '已下载' ? 'success' : 'info'" size="small"> >
{{ row.downloadStatus || '未下载' }} {{ row.downloadStatus || '未下载' }}
</el-tag> </el-tag>
</template> </template>
</ElTableColumn> <template #operation="{ row }">
<ElTableColumn prop="orderCount" label="订单数量" min-width="90" align="center" />
<ElTableColumn prop="totalCount" label="全部数量" min-width="90" align="center" />
<ElTableColumn prop="creator" label="创建人" min-width="80" />
<ElTableColumn prop="craftType" label="工艺类型" min-width="90" />
<ElTableColumn prop="timesRange" label="次数范围" min-width="90" />
<ElTableColumn prop="createTime" label="创建时间" min-width="160" sortable />
<ElTableColumn prop="createTime" label="创建时间排序" min-width="110" sortable />
<ElTableColumn prop="extractTimes" label="提取次数排序" min-width="110" sortable />
<ElTableColumn label="操作" min-width="200" fixed="right">
<template #default="{ row }">
<ElButton type="primary" link size="small" @click="handleView(row)"> <ElButton type="primary" link size="small" @click="handleView(row)">
查看 查看
</ElButton> </ElButton>
<ElButton type="primary" link size="small" @click="handleDownload(row)"> <ElButton
type="primary"
link
size="small"
@click="handleDownload(row)"
>
下载 下载
</ElButton> </ElButton>
</template> </template>
</ElTableColumn> </TableView>
</ElTable>
</div> </div>
<ElPagination <ElPagination
...@@ -153,7 +120,7 @@ ...@@ -153,7 +120,7 @@
background background
layout="total, sizes, prev, pager, next, jumper" layout="total, sizes, prev, pager, next, jumper"
:total="total" :total="total"
style="margin-top: 10px" style="margin: 10px auto 0"
@size-change="handlePageSizeChange" @size-change="handlePageSizeChange"
@current-change="handleCurrentPageChange" @current-change="handleCurrentPageChange"
/> />
...@@ -165,6 +132,8 @@ import { ref, reactive, onMounted } from 'vue' ...@@ -165,6 +132,8 @@ import { ref, reactive, onMounted } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus' import { ElMessage, ElMessageBox } from 'element-plus'
import { getBatchManageListApi, batchDeleteApi } from '@/api/factoryOrderNew' import { getBatchManageListApi, batchDeleteApi } from '@/api/factoryOrderNew'
import type { BatchManageData } from '@/types/api/factoryOrderNew' import type { BatchManageData } from '@/types/api/factoryOrderNew'
import type { CustomColumn } from '@/types/table'
import TableView from '@/components/TableView.vue'
const loading = ref(false) const loading = ref(false)
const tableData = ref<BatchManageData[]>([]) const tableData = ref<BatchManageData[]>([])
...@@ -173,6 +142,63 @@ const currentPage = ref(1) ...@@ -173,6 +142,63 @@ const currentPage = ref(1)
const pageSize = ref(50) const pageSize = ref(50)
const total = ref(0) const total = ref(0)
const columns: CustomColumn<BatchManageData>[] = [
{ key: 'batchNo', prop: 'batchNo', label: '批次号', minWidth: 120 },
{
key: 'downloadStatus',
prop: 'downloadStatus',
label: '下载状态',
minWidth: 90,
align: 'center',
slot: 'downloadStatus',
},
{
key: 'orderCount',
prop: 'orderCount',
label: '订单数量',
minWidth: 90,
align: 'center',
},
{
key: 'totalCount',
prop: 'totalCount',
label: '全部数量',
minWidth: 90,
align: 'center',
},
{ key: 'creator', prop: 'creator', label: '创建人', minWidth: 80 },
{ key: 'craftType', prop: 'craftType', label: '工艺类型', minWidth: 90 },
{ key: 'timesRange', prop: 'timesRange', label: '次数范围', minWidth: 90 },
{
key: 'createTime',
prop: 'createTime',
label: '创建时间',
minWidth: 160,
sortable: true,
},
{
key: 'createTimeSort',
prop: 'createTime',
label: '创建时间排序',
minWidth: 110,
sortable: true,
},
{
key: 'extractTimes',
prop: 'extractTimes',
label: '提取次数排序',
minWidth: 110,
sortable: true,
},
{
key: 'operation',
label: '操作',
minWidth: 120,
fixed: 'right',
slot: 'operation',
},
]
const filterForm = reactive({ const filterForm = reactive({
createTimeRange: [] as string[], createTimeRange: [] as string[],
startTimeRange: [] as string[], startTimeRange: [] as string[],
...@@ -220,8 +246,9 @@ const handleBatchDelete = async () => { ...@@ -220,8 +246,9 @@ const handleBatchDelete = async () => {
await batchDeleteApi(selectedRows.value.map((r) => r.id)) await batchDeleteApi(selectedRows.value.map((r) => r.id))
ElMessage.success('删除成功') ElMessage.success('删除成功')
loadData() loadData()
} catch (e: any) { } catch (e) {
ElMessage.error(e?.message || '删除失败') const err = e as Error & { message?: string }
ElMessage.error(err?.message || '删除失败')
} }
} }
...@@ -266,7 +293,8 @@ defineExpose({ refresh }) ...@@ -266,7 +293,8 @@ defineExpose({ refresh })
.batch-manage-filter { .batch-manage-filter {
flex-shrink: 0; flex-shrink: 0;
padding-bottom: 10px; width: 100%;
min-width: 0;
} }
.batch-manage-actions { .batch-manage-actions {
...@@ -278,4 +306,20 @@ defineExpose({ refresh }) ...@@ -278,4 +306,20 @@ defineExpose({ refresh })
flex: 1; flex: 1;
overflow: auto; overflow: auto;
} }
.search-form {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0;
min-width: 0;
:deep(.el-form-item) {
margin-right: 10px;
margin-bottom: 10px;
}
:deep(.el-form-item__content) {
min-width: 0;
}
}
</style> </style>
src/views/order/factoryOrderNew/component/CardLayout.vue
...@@ -26,7 +26,7 @@ ...@@ -26,7 +26,7 @@
</template> </template>
<template #top_right> <template #top_right>
<img <img
v-if="item.craftCode && ['ZPZY', 'CXZY', 'THZY'].includes(item.craftCode)" v-if="item.craftCode && ['ZPZY', 'CXZY', 'THZY'].includes(item.craftCode as string)"
:src="`/images/pic/${item.craftCode}.png`" :src="`/images/pic/${item.craftCode}.png`"
width="60" width="60"
height="60" height="60"
...@@ -40,7 +40,7 @@ ...@@ -40,7 +40,7 @@
<template #info> <template #info>
<div class="card-info-grid"> <div class="card-info-grid">
<div class="card-info-row full"> <div class="card-info-row full">
<span class="info-value ellipsis" :title="item.productName || ''"> <span class="info-value ellipsis" :title="(item.productName as string) || ''">
{{ item.productName }} {{ item.productName }}
</span> </span>
</div> </div>
...@@ -60,8 +60,8 @@ ...@@ -60,8 +60,8 @@
<span class="info-label">变体SKU</span> <span class="info-label">变体SKU</span>
<span <span
class="info-value clickable ellipsis" class="info-value clickable ellipsis"
:title="item.variantSku || ''" :title="(item.variantSku as string) || ''"
@click.stop="copyText(item.variantSku || '')" @click.stop="copyText((item.variantSku as string) || '')"
> >
{{ item.variantSku }} {{ item.variantSku }}
</span> </span>
...@@ -70,8 +70,8 @@ ...@@ -70,8 +70,8 @@
<span class="info-label">库存SKU</span> <span class="info-label">库存SKU</span>
<span <span
class="info-value clickable ellipsis" class="info-value clickable ellipsis"
:title="item.thirdSkuCode || ''" :title="(item.thirdSkuCode as string) || ''"
@click.stop="copyText(item.thirdSkuCode || '')" @click.stop="copyText((item.thirdSkuCode as string) || '')"
> >
{{ item.thirdSkuCode }} {{ item.thirdSkuCode }}
</span> </span>
...@@ -108,6 +108,7 @@ ...@@ -108,6 +108,7 @@
background background
layout="total, sizes, prev, pager, next, jumper" layout="total, sizes, prev, pager, next, jumper"
:total="total" :total="total"
style="margin: 0 auto"
@size-change="$emit('page-size-change', $event)" @size-change="$emit('page-size-change', $event)"
@current-change="$emit('current-page-change', $event)" @current-change="$emit('current-page-change', $event)"
/> />
......
src/views/order/factoryOrderNew/component/WaitingRestockTable.vue
<template> <template>
<div class="waiting-restock"> <div class="waiting-restock">
<div class="restock-filter"> <div class="restock-filter">
<ElForm :inline="true" :model="filterForm" size="default"> <ElForm :inline="true" :model="filterForm" size="default" class="search-form">
<ElFormItem label="仓库筛选" />
<ElFormItem label="库存SKU"> <ElFormItem label="库存SKU">
<ElInput <ElInput
v-model="filterForm.stockSku" v-model="filterForm.stockSku"
...@@ -27,11 +26,13 @@ ...@@ -27,11 +26,13 @@
</div> </div>
<div class="restock-table"> <div class="restock-table">
<ElTable v-loading="loading" :data="tableData" border style="width: 100%"> <TableView
<ElTableColumn type="index" label="序号" width="60" align="center" /> v-loading="loading"
<ElTableColumn prop="warehouseName" label="仓库名称" min-width="100" /> :paginated-data="pageData"
<ElTableColumn label="SKU图片" width="80" align="center"> :columns="columns"
<template #default="{ row }"> serial-numberable
>
<template #skuImage="{ row }">
<el-image <el-image
v-if="row.skuImage" v-if="row.skuImage"
:src="row.skuImage" :src="row.skuImage"
...@@ -41,49 +42,117 @@ ...@@ -41,49 +42,117 @@
preview-teleported preview-teleported
/> />
</template> </template>
</ElTableColumn> <template #shortageQuantity="{ row }">
<ElTableColumn prop="productName" label="商品名称" min-width="120" show-overflow-tooltip />
<ElTableColumn prop="styleNo" label="款号" min-width="80" />
<ElTableColumn prop="stockSku" label="库存SKU" min-width="120" />
<ElTableColumn prop="shortageQuantity" label="缺货数量" min-width="90" align="center">
<template #default="{ row }">
<span style="color: #f56c6c; font-weight: bold">{{ row.shortageQuantity }}</span> <span style="color: #f56c6c; font-weight: bold">{{ row.shortageQuantity }}</span>
</template> </template>
</ElTableColumn> <template #availableQuantity="{ row }">
<ElTableColumn prop="availableQuantity" label="可用数量" min-width="90" align="center">
<template #default="{ row }">
<span :style="{ color: (row.availableQuantity || 0) < 0 ? '#f56c6c' : '' }"> <span :style="{ color: (row.availableQuantity || 0) < 0 ? '#f56c6c' : '' }">
{{ row.availableQuantity }} {{ row.availableQuantity }}
</span> </span>
</template> </template>
</ElTableColumn> <template #operation="{ row }">
<ElTableColumn prop="stockQuantity" label="库存数量" min-width="90" align="center" /> <ElButton type="primary" link size="small" @click="handleRestockCheck(row)">
<ElTableColumn prop="occupiedQuantity" label="占用数量" min-width="90" align="center" />
<ElTableColumn label="操作" width="120" align="center" fixed="right">
<template #default="{ row }">
<ElButton
type="primary"
link
size="small"
@click="handleRestockCheck(row)"
>
补货校验 补货校验
</ElButton> </ElButton>
</template> </template>
</ElTableColumn> </TableView>
</ElTable>
</div> </div>
<ElPagination
v-model:current-page="currentPage"
v-model:page-size="pageSize"
:page-sizes="[50, 100, 200, 300]"
background
layout="total, sizes, prev, pager, next, jumper"
:total="total"
style="margin: 10px auto 0;"
@size-change="handlePageSizeChange"
@current-change="handleCurrentPageChange"
/>
</div> </div>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { ref, reactive, onMounted } from 'vue' import { computed, ref, reactive, onMounted } from 'vue'
import { ElMessage } from 'element-plus' import { ElMessage } from 'element-plus'
import { getRestockListApi, restockCheckApi } from '@/api/factoryOrderNew' import { getRestockListApi, restockCheckApi } from '@/api/factoryOrderNew'
import type { RestockData } from '@/types/api/factoryOrderNew' import type { RestockData } from '@/types/api/factoryOrderNew'
import type { CustomColumn } from '@/types/table'
import TableView from '@/components/TableView.vue'
const loading = ref(false) const loading = ref(false)
const tableData = ref<RestockData[]>([]) const allData = ref<RestockData[]>([])
const currentPage = ref(1)
const pageSize = ref(50)
const total = ref(0)
const pageData = computed(() => {
const start = (currentPage.value - 1) * pageSize.value
return allData.value.slice(start, start + pageSize.value)
})
const columns: CustomColumn<RestockData>[] = [
{
key: 'warehouseName',
prop: 'warehouseName',
label: '仓库名称',
minWidth: 100,
},
{
key: 'skuImage',
label: 'SKU图片',
width: 100,
align: 'center',
slot: 'skuImage',
},
{
key: 'productName',
prop: 'productName',
label: '商品名称',
minWidth: 120,
showOverflowTooltip: true,
},
{ key: 'styleNo', prop: 'styleNo', label: '款号', minWidth: 80 },
{ key: 'stockSku', prop: 'stockSku', label: '库存SKU', minWidth: 120 },
{
key: 'shortageQuantity',
prop: 'shortageQuantity',
label: '缺货数量',
minWidth: 90,
align: 'center',
slot: 'shortageQuantity',
},
{
key: 'availableQuantity',
prop: 'availableQuantity',
label: '可用数量',
minWidth: 90,
align: 'center',
slot: 'availableQuantity',
},
{
key: 'stockQuantity',
prop: 'stockQuantity',
label: '库存数量',
minWidth: 90,
align: 'center',
},
{
key: 'occupiedQuantity',
prop: 'occupiedQuantity',
label: '占用数量',
minWidth: 90,
align: 'center',
},
{
key: 'operation',
label: '操作',
width: 120,
align: 'center',
fixed: 'right',
slot: 'operation',
},
]
const filterForm = reactive({ const filterForm = reactive({
stockSku: '', stockSku: '',
...@@ -97,35 +166,50 @@ const loadData = async () => { ...@@ -97,35 +166,50 @@ const loadData = async () => {
stockSku: filterForm.stockSku || undefined, stockSku: filterForm.stockSku || undefined,
styleNo: filterForm.styleNo || undefined, styleNo: filterForm.styleNo || undefined,
}) })
tableData.value = res.data || [] allData.value = res.data || []
total.value = allData.value.length
} catch (_e) { } catch (_e) {
tableData.value = [] allData.value = []
total.value = 0
} finally { } finally {
loading.value = false loading.value = false
} }
} }
const handleSearch = () => { const handleSearch = () => {
currentPage.value = 1
loadData() loadData()
} }
const handleReset = () => { const handleReset = () => {
filterForm.stockSku = '' filterForm.stockSku = ''
filterForm.styleNo = '' filterForm.styleNo = ''
currentPage.value = 1
loadData() loadData()
} }
const handlePageSizeChange = (size: number) => {
pageSize.value = size
currentPage.value = 1
}
const handleCurrentPageChange = (page: number) => {
currentPage.value = page
}
const handleRestockCheck = async (row: RestockData) => { const handleRestockCheck = async (row: RestockData) => {
try { try {
await restockCheckApi(row.id) await restockCheckApi(row.id)
ElMessage.success('补货校验成功') ElMessage.success('补货校验成功')
loadData() loadData()
} catch (e: any) { } catch (e) {
ElMessage.error(e?.message || '补货校验失败') const err = e as Error & { message?: string }
ElMessage.error(err?.message || '补货校验失败')
} }
} }
const refresh = () => { const refresh = () => {
currentPage.value = 1
loadData() loadData()
} }
...@@ -153,4 +237,20 @@ defineExpose({ refresh }) ...@@ -153,4 +237,20 @@ defineExpose({ refresh })
flex: 1; flex: 1;
overflow: auto; overflow: auto;
} }
.search-form {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0;
min-width: 0;
:deep(.el-form-item) {
margin-right: 10px;
margin-bottom: 10px;
}
:deep(.el-form-item__content) {
min-width: 0;
}
}
</style> </style>
src/views/order/factoryOrderNew/index.vue
...@@ -421,23 +421,25 @@ ...@@ -421,23 +421,25 @@
</div> </div>
<!-- ====== 操作按钮栏 ====== --> <!-- ====== 操作按钮栏 ====== -->
<div v-if="!isSpecialLayout" class="operation-list"> <div v-if="!isSpecialLayout" class="operation-list">
<!-- 待接单 --> <span v-if="status === 'PENDING_ACCEPT'" class="item">
<template v-if="status === 'PENDING_ACCEPT'">
<ElButton type="success" @click="handleConfirmOrder" <ElButton type="success" @click="handleConfirmOrder"
>确认接单</ElButton >确认接单</ElButton
> >
</span>
<span v-if="status === 'PENDING_ACCEPT'" class="item">
<ElButton type="danger" @click="handleCancelOrder">取消订单</ElButton> <ElButton type="danger" @click="handleCancelOrder">取消订单</ElButton>
<ElButton type="primary" @click="handleRefreshProductInfo" </span>
>刷新商品信息</ElButton
<ElDropdown
v-if="status === 'PENDING_LOGISTICS'"
trigger="click"
@command="handleLogisticsCommand"
> >
<ElButton @click="handleTransferOldFlow">转旧流程</ElButton> <span class="item">
</template> <ElButton type="warning">
<!-- 待创建物流 -->
<template v-if="status === 'PENDING_LOGISTICS'">
<ElDropdown trigger="click" @command="handleLogisticsCommand">
<ElButton type="primary">
物流接口 <el-icon class="el-icon--right"><ArrowDown /></el-icon> 物流接口 <el-icon class="el-icon--right"><ArrowDown /></el-icon>
</ElButton> </ElButton>
</span>
<template #dropdown> <template #dropdown>
<ElDropdownMenu> <ElDropdownMenu>
<ElDropdownItem command="createLogistic" <ElDropdownItem command="createLogistic"
...@@ -455,26 +457,35 @@ ...@@ -455,26 +457,35 @@
</ElDropdownMenu> </ElDropdownMenu>
</template> </template>
</ElDropdown> </ElDropdown>
<ElButton type="warning" @click="handleSuspend">挂起</ElButton>
<ElButton @click="handleUpdateCustomsInfo">更新报关信息</ElButton> <span v-if="status === 'PENDING_LOGISTICS'" class="item">
</template> <ElButton type="success" @click="handleUpdateCustomsInfo"
<!-- 待排单/待派单 (卡片布局按钮) --> >更新报关信息</ElButton
<template v-if="status === 'PENDING_SCHEDULE'"> >
<ElButton type="primary" @click="handleArrange">派单</ElButton> </span>
<ElButton @click="handleDownloadMaterial">下载素材</ElButton> <span v-if="status === 'PENDING_ACCEPT'" class="item">
</template> <ElButton type="warning" @click="handleTransferOldFlow"
<!-- 配货中 (父级) --> >转旧流程</ElButton
<template v-if="status === 'DISTRIBUTING'">
<ElButton type="warning" @click="handleSuspend">挂起</ElButton>
</template>
<!-- 待拣胚 / 待补胚 -->
<template
v-if="status === 'PENDING_PICK' || status === 'PENDING_REPLENISH'"
> >
<ElDropdown trigger="click" @command="handleDtfCommand"> </span>
<span v-if="status === 'PENDING_SCHEDULE'" class="item">
<ElButton type="primary" @click="handleArrange">排单</ElButton>
</span>
<ElDropdown
v-if="
status === 'PENDING_PICK' ||
status === 'PENDING_REPLENISH' ||
status === 'PRODUCING'
"
trigger="click"
@command="handleDtfCommand"
>
<span class="item">
<ElButton type="primary"> <ElButton type="primary">
DTF排版 <el-icon class="el-icon--right"><ArrowDown /></el-icon> DTF排版 <el-icon class="el-icon--right"><ArrowDown /></el-icon>
</ElButton> </ElButton>
</span>
<template #dropdown> <template #dropdown>
<ElDropdownMenu> <ElDropdownMenu>
<ElDropdownItem command="tiff_42">TIF(40+2cm)</ElDropdownItem> <ElDropdownItem command="tiff_42">TIF(40+2cm)</ElDropdownItem>
...@@ -484,42 +495,161 @@ ...@@ -484,42 +495,161 @@
</ElDropdownMenu> </ElDropdownMenu>
</template> </template>
</ElDropdown> </ElDropdown>
<ElButton @click="handlePrintProductionOrder">打印生产单</ElButton> <span
<ElButton @click="handlePrintPickOrder">打印拣胚单</ElButton> v-if="
status === 'PENDING_PICK' ||
status === 'PENDING_REPLENISH' ||
status === 'PRODUCING'
"
class="item"
>
<ElButton type="success" @click="handlePrintProductionOrder"
>打印生产单</ElButton
>
</span>
<span v-if="status === 'PENDING_PICK'" class="item">
<ElButton type="warning" @click="handlePrintPickOrder"
>打印拣胚单</ElButton
>
</span>
<span v-if="status === 'PENDING_PICK'" class="item">
<ElButton type="success" @click="handlePickComplete" <ElButton type="success" @click="handlePickComplete"
>拣胚完成</ElButton >拣胚完成</ElButton
> >
</span>
<span v-if="status === 'PENDING_PICK'" class="item">
<ElButton type="danger" @click="handlePickFail">拣胚失败</ElButton> <ElButton type="danger" @click="handlePickFail">拣胚失败</ElButton>
</template> </span>
<!-- 生产中 --> <span v-if="status === 'PENDING_REPLENISH'" class="item">
<template v-if="status === 'PRODUCING'"> <ElButton type="success" @click="handleReplenishComplete"
>补胚完成</ElButton
>
</span>
<span v-if="status === 'PENDING_REPLENISH'" class="item">
<ElButton type="danger" @click="handleReplenishFail"
>补胚失败</ElButton
>
</span>
<span v-if="status === 'PENDING_DISTRIBUTE'" class="item">
<ElButton type="success" @click="handleSeedingWall"
>播种墙配货</ElButton
>
</span>
<span v-if="status === 'PENDING_DISTRIBUTE'" class="item">
<ElButton type="primary" @click="handleSinglePrint"
>单件打单</ElButton
>
</span>
<span
v-if="status === 'PRODUCING' || status === 'PENDING_DISTRIBUTE'"
class="item"
>
<ElButton type="warning" @click="handleApplyReplenish" <ElButton type="warning" @click="handleApplyReplenish"
>申请补胚</ElButton >申请补胚</ElButton
> >
</span>
<span v-if="status === 'PRODUCING'" class="item">
<ElButton type="success" @click="handleQuickProduction"
>快捷生产</ElButton
>
</span>
<span v-if="status === 'PRODUCING'" class="item">
<ElButton type="success" @click="handleProductionComplete" <ElButton type="success" @click="handleProductionComplete"
>生产完成</ElButton >生产完成</ElButton
> >
<ElButton @click="handleSeedingWall">播种墙配货</ElButton> </span>
</template>
<!-- 待发货 --> <!-- 待发货 -->
<template v-if="status === 'PENDING_SHIP'"> <template v-if="status === 'PENDING_SHIP'">
<ElButton type="primary" @click="handleWeightSort">称重分拣</ElButton> <span class="item">
<ElButton @click="handleDownloadMaterial">下载素材</ElButton> <ElButton type="primary" @click="handleWeightSort"
>称重分拣</ElButton
>
</span>
</template> </template>
<!-- 已完成 --> <!-- 已完成 -->
<template v-if="status === 'COMPLETED'"> <template v-if="status === 'COMPLETED'">
<ElButton @click="handleDownloadMaterial">下载素材</ElButton> <span class="item">
<ElButton type="warning" @click="handleArchiveOrder" <ElButton type="success" @click="handleArchiveOrder"
>订单归档</ElButton >订单归档</ElButton
> >
</span>
<span class="item">
<ElButton type="primary" @click="handleGetTrackingNumber"
>获取跟踪号</ElButton
>
</span>
<span class="item">
<ElButton type="warning" @click="handleStatusPush"
>状态推送</ElButton
>
</span>
</template> </template>
<!-- 挂起 --> <!-- 挂起 -->
<template v-if="status === 'SUSPENDED'"> <template v-if="status === 'SUSPENDED'">
<ElButton type="primary" @click="handleCancelSuspend" <span class="item">
<ElButton type="warning" @click="handleCancelSuspend"
>取消挂起</ElButton >取消挂起</ElButton
> >
<ElButton @click="handleSyncAddress">同步收货地址</ElButton> </span>
<span class="item">
<ElButton type="primary" @click="handleSyncAddress"
>同步收货地址</ElButton
>
</span>
<span class="item">
<ElButton type="danger" @click="handleCancelOrder"
>取消订单</ElButton
>
</span>
</template> </template>
<span
v-if="
[
'PENDING_ACCEPT',
'PENDING_LOGISTICS',
'PENDING_SCHEDULE',
'PENDING_SHIP',
'DISTRIBUTING',
].includes(status)
"
class="item"
>
<ElButton type="danger" @click="handleSuspend">挂起</ElButton>
</span>
<span
v-if="
status === 'PENDING_SCHEDULE' ||
status === 'PENDING_REPLENISH' ||
status === 'PRODUCING' ||
status === 'PENDING_SHIP' ||
status === 'SUSPENDED' ||
status === 'PENDING_PICK'
"
class="item"
>
<ElButton type="success" @click="handleDownloadMaterial"
>下载素材</ElButton
>
</span>
<span
v-if="
[
'PENDING_ACCEPT',
'PENDING_LOGISTICS',
'PENDING_SCHEDULE',
'PENDING_PICK',
'PENDING_REPLENISH',
'PRODUCING',
'PENDING_DISTRIBUTE',
].includes(status)
"
class="item"
>
<ElButton type="primary" @click="handleRefreshProductInfo"
>刷新商品信息</ElButton
>
</span>
</div> </div>
<!-- ====== 挂起状态 Tab ====== --> <!-- ====== 挂起状态 Tab ====== -->
<div v-if="status === 'SUSPENDED'" class="status-subtabs"> <div v-if="status === 'SUSPENDED'" class="status-subtabs">
...@@ -1224,10 +1354,10 @@ const handleStatusNodeClick = (node: StatusTreeNode) => { ...@@ -1224,10 +1354,10 @@ const handleStatusNodeClick = (node: StatusTreeNode) => {
currentRow.value = null currentRow.value = null
productList.value = [] productList.value = []
logList.value = [] logList.value = []
if (!isSpecialLayout.value) { // if (!isSpecialLayout.value) {
onCurrentPageChange(1) // onCurrentPageChange(1)
refresh() // refresh()
} // }
} }
const toggleExpand = (node: { expanded?: boolean }) => { const toggleExpand = (node: { expanded?: boolean }) => {
...@@ -1543,6 +1673,43 @@ const handleSyncAddress = async () => { ...@@ -1543,6 +1673,43 @@ const handleSyncAddress = async () => {
} }
} }
const handleReplenishComplete = () => {
if (!ensureSelection()) return
ElMessage.info('补胚完成功能待集成')
}
const handleReplenishFail = () => {
if (!ensureSelection()) return
ElMessage.info('补胚失败功能待集成')
}
const handleQuickProduction = () => {
if (!ensureSelection()) return
ElMessage.info('快捷生产功能待集成')
}
const handleSinglePrint = () => {
if (!ensureSelection()) return
ElMessage.info('单件打单功能待集成')
}
const handleGetTrackingNumber = async () => {
if (!ensureSelection()) return
await ElMessageBox.confirm('确定获取跟踪号吗？', '提示', { type: 'warning' })
try {
await getTrackingNumberApi(getSelectedIds() as number[])
ElMessage.success('获取跟踪号成功')
refreshCurrentView()
} catch (e: unknown) {
ElMessage.error((e as Error)?.message || '获取跟踪号失败')
}
}
const handleStatusPush = () => {
if (!ensureSelection()) return
ElMessage.info('状态推送功能待集成')
}
// ========== Watchers ========== // ========== Watchers ==========
watch( watch(
() => pendingAcceptSubTab.value, () => pendingAcceptSubTab.value,
...@@ -1677,9 +1844,7 @@ onMounted(() => { ...@@ -1677,9 +1844,7 @@ onMounted(() => {
.operation-list { .operation-list {
display: flex; display: flex;
align-items: center; align-items: center;
gap: 8px;
flex-wrap: wrap; flex-wrap: wrap;
padding: 8px 0;
} }
.table-content { .table-content {
......
src/views/order/factoryOrderNew/newOrder.md 0 → 100644
# 左侧状态树每个状态的页面说明：
## 待接单状态
### 页面布局
-- 分为上下两个表格，如图片1所示
### 主表格上面操作按钮栏，分别有如下按钮：
#### 确认接单
- 当主表格选中的数据大于 0 时，可以点击该按钮，否则提示请先选择订单
- 点击确认接单按钮后，弹出 “确认接单弹框”
- 确认接单弹框打开后，需要让用户选择发货仓库，使用下拉选择，数据源是仓库列表，仓库列表接口可调用 `src/api/common.ts` 中的 `loadWarehouseListApi` 接口
- 点击确认后，调用后端的接口(后端接口暂未提供，可预留占位)
- 加全局 loading 以防重复调用接口
- 调用成功后，弹出"接单成功"，并刷新主表格数据
- 调用失败后，弹出"接单失败"弹框(使用 `ElMessageBox.prompt` 显示)，并显示失败原因(这里是后端返回的错误信息)
#### 取消订单
- 当主表格选中的数据大于 0 时，可以点击该按钮，否则提示请先选择订单
- 点击取消订单按钮后，弹出 “取消订单弹框”
- 取消订单弹框打开后，需要让用户选择取消原因，使用下拉选择，数据源是分别是 `协商取消`、`客户取消`、`其他`
- 点击确认后，调用后端的接口(后端接口暂未提供，可预留占位)
- 加全局 loading 以防重复调用接口
- 调用成功后，弹出"取消订单成功"，并刷新主表格数据
- 调用失败后，弹出"取消订单失败"弹框(使用 `ElMessageBox.prompt` 显示)，并显示失败原因(这里是后端返回的错误信息)
#### 刷新商品信息
- 当主表格选中的数据大于 0 时，可以点击该按钮，否则提示请先选择订单
- 点击刷新商品信息按钮后，调用后端的接口(后端接口暂未提供，可预留占位)
- 成功后，弹出"刷新商品信息成功"，并刷新主表格数据
- 失败则展示错误信息
## 待创建物流状态
### 页面布局
-- 分为上下两个表格，如图片1所示
### 主表格上面操作按钮栏，分别有如下按钮：
#### 物流接口
-- 此功能为原有逻辑，可把 `src/views/order/podCN/index.vue` 中的 `物流接口` 功能拷贝过来
#### 挂起
-- 当主表格选中的数据大于 0 时，可以点击该按钮，否则提示请先选择订单
-- 点击挂起按钮后，弹出 “挂起订单”弹框
- 挂起订单弹框打开后，需要让用户选择挂起原因和是否需要客户处理，使用下拉选择，这两个字段都是必填的,其中挂起原因数据源是分别是 `客户拦截`、`地址异常`、`素材异常`、`其他`，是否需要客户处理数据源是分别是 `需要客户处理`、`无需客户处理`
- 点击确认后，调用后端的接口(后端接口暂未提供，可预留占位)
- 加全局 loading 以防重复调用接口
- 调用成功后，弹出"挂起订单成功"，并刷新主表格数据
- 调用失败后，弹出"挂起订单失败"弹框(使用 `ElMessageBox.prompt` 显示)，并显示失败原因(这里是后端返回的错误信息)
#### 更新报关信息
-- 此功能为原有逻辑，可把 `src/views/order/podCN/index.vue` 中的 `更新报关信息` 功能拷贝过来
## 待派单状态
### 页面布局
-- 卡片布局，页面样式如图片2所示
-- 注意：这里可用 `src/components/CommonCard.vue` 组件，使用时注意传递对应的 props 和插槽
-- 可参考 `src/views/order/podCN/index.vue` 中的卡片实现方法，但是内容需要根据图片2所示进行调整
### 该状态中的操作栏，分别有如下按钮：
#### 派单
-- 此为原有逻辑，可把 `src/views/order/podCN/index.vue` 中的 `派单` 功能拷贝过来
#### 下载素材
-- 此为原有逻辑，可把 `src/views/order/podCN/index.vue` 中的 `下载素材` 功能拷贝过来
## 批量管理状态
### 页面布局
-- 表格布局，页面样式如图片3所示
-- 注意：这里可封装组件，使代码更易维护
## 等待捕获
### 页面布局
-- 表格布局，页面样式如图片4所示
-- 注意：这里可封装组件，使代码更易维护
## 配货中状态
### 页面布局
-- 表格布局，页面样式如图片1所示
### 该状态中的操作栏，分别有如下按钮：
#### 挂起
-- 当主表格选中的数据大于 0 时，可以点击该按钮，否则提示请先选择订单
-- 点击挂起按钮后，弹出 “挂起订单”弹框
- 挂起订单弹框打开后，需要让用户选择挂起原因和是否需要客户处理，使用下拉选择，这两个字段都是必填的,其中挂起原因数据源是分别是 `客户拦截`、`地址异常`、`素材异常`、`其他`，是否需要客户处理数据源是分别是 `需要客户处理`、`无需客户处理`
- 点击确认后，调用后端的接口(后端接口暂未提供，可预留占位)
- 加全局 loading 以防重复调用接口
- 调用成功后，弹出"挂起订单成功"，并刷新主表格数据
- 调用失败后，弹出"挂起订单失败"弹框(使用 `ElMessageBox.prompt` 显示)，并显示失败原因(这里是后端返回的错误信息)
### 配货中子状态
#### 待拣胚
##### 页面布局
-- 卡片布局，页面样式如图片2所示
-- 注意：这里可用 `src/components/CommonCard.vue` 组件，使用时注意传递对应的 props 和插槽
-- 可参考 `src/views/order/podCN/index.vue` 中的卡片实现方法，但是内容需要根据图片2所示进行调整
##### 该状态中的操作栏，分别有如下按钮：
###### DTF排版
-- 此为原有逻辑，可把 `src/views/order/podCN/index.vue` 中的 `DTF排版` 功能拷贝过来
###### 打印生产单
-- 此为原有逻辑，可把 `src/views/order/podCN/index.vue` 中的 `打印生产单` 功能拷贝过来
###### 打印拣胚单
-- 当选择卡片数量大于0时，可以点击该按钮，否则提示请先选择订单
-- 点击打印拣胚单后，调用后端接口(后端接口暂未提供，可预留占位)
-- 给按钮加loading效果，防止重复点击
-- 调用成功后，弹出"打印拣胚单成功"，并刷新主表格数据
-- 调用失败后，弹出"打印拣胚单失败"弹框(使用 `ElMessageBox.prompt` 显示)，并显示失败原因(这里是后端返回的错误信息)
###### 拣胚完成
-- 当选择卡片数量大于0时，可以点击该按钮，否则提示请先选择订单
-- 当点击拣胚完成后，弹出“拣配完成”弹框，弹框页面如图片5所示(图片中紫色字体是描述和情况1文案，情况2文案，情况3文案都无需写上)
-- 此功能较难，可先实现页面
###### 拣胚失败
-- 当选择卡片数量大于0时，可以点击该按钮，否则提示请先选择订单
-- 当点击拣胚失败后，弹出“拣胚失败”弹框，弹框页面如图片6所示(图片中紫色字体是描述无需写上)
-- 此功能较难，可先实现页面
#### 待补胚
##### 页面布局
-- 卡片布局，页面样式如图片2所示
-- 注意：这里可用 `src/components/CommonCard.vue` 组件，使用时注意传递对应的 props 和插槽
-- 可参考 `src/views/order/podCN/index.vue` 中的卡片实现方法，但是内容需要根据图片2所示进行调整
##### 该状态中的操作栏和待拣胚一致：DTF排版、打印生产单、打印拣胚单、拣胚完成、拣胚失败
#### 生产中
-- -- 卡片布局，页面样式如图片2所示
-- 注意：这里可用 `src/components/CommonCard.vue` 组件，使用时注意传递对应的 props 和插槽
-- 可参考 `src/views/order/podCN/index.vue` 中的卡片实现方法，但是内容需要根据图片2所示进行调整
##### 该状态中的操作栏，分别有如下按钮：
###### 申请补胚
-- 当选择卡片数量大于0时，可以点击该按钮，否则提示请先选择订单
-- 点击申请补胚后，前端提示“确定申请补胚吗?”
-- 点击确认后，调用后端接口(后端接口暂未提供，可预留占位)
-- 点击取消后，关闭 `messageBox`，不进行任何操作
-- 加全局 loading 以防重复调用接口
-- 调用成功后，弹出"申请补胚成功"，并刷新主表格数据
-- 调用失败后，弹出"申请补胚失败"弹框(使用 `ElMessageBox.prompt` 显示)，并显示失败原因(这里是后端返回的错误信息)
###### 生产完成
-- 此为原有逻辑，可把 `src/views/order/podCN/index.vue` 中的 `生产完成` 功能拷贝过来
###### 播种墙配货
-- 此为原有逻辑，可把 `src/views/order/podUs/index.vue` 中的 `播种墙配货` 功能拷贝过来
## 待发货
### 页面布局
-- 表格布局，页面样式如图片1所示
### 该状态中的操作栏，分别有如下按钮：
#### 称重分拣
-- 此为原有逻辑，可把 `src/views/order/podCN/index.vue` 中的 `称重分拣` 功能拷贝过来
#### 下载素材
-- 此为原有逻辑，可把 `src/views/order/podCN/index.vue` 中的 `下载素材` 功能拷贝过来
## 已完成状态
### 页面布局
-- 表格布局，页面样式如图片1所示
### 该状态中的操作栏，分别有如下按钮：
#### 下载素材
#### 订单归档
-- 当主表格选中的数据大于 0 时，可以点击该按钮，否则提示请先选择订单
-- 点击订单归档按钮后，调用后端接口(后端接口暂未提供，可预留占位)
-- 加全局 loading 以防重复调用接口
-- 调用成功后，弹出"订单归档成功"，并刷新主表格数据
-- 调用失败后，弹出"订单归档失败"弹框(使用 `ElMessageBox.prompt` 显示)，并显示失败原因(这里是后端返回的错误信息)
## 挂起状态
### 页面布局
-- 表格布局，页面样式如图片1所示
-- 根据挂起原因，分多Tab展示
- 放再操作栏的上面，数据源分别是`客户拦截`、`地址异常`、`其他`
- 点击Tab后，表格数据会根据Tab切换，并刷新表格数据
- 具体样式可以参考现在已有“待派单状态”Tab的样式
### 该状态中的操作栏，分别有如下按钮：
#### 取消挂起
-- 当主表格选中的数据大于 0 时，可以点击该按钮，否则提示请先选择订单
-- 点击取消挂起按钮后，调用后端接口(后端接口暂未提供，可预留占位)
-- 加全局 loading 以防重复调用接口
-- 调用成功后，弹出"取消挂起成功"，并刷新主表格数据
#### 同步收货地址
-- 此为原有逻辑，可把 `src/views/order/podCN/index.vue` 中的 `同步收货地址` 功能拷贝过来
\ No newline at end of file
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