Skip to content

F
factory_front
Commit 253f46ce by qinjianhui
Options

fix: 样式修改

parent 0d7b48e1
Showing with 234 additions and 103 deletions
.cursor/rules/factory-rule.mdc
......@@ -9,10 +9,10 @@ alwaysApply: true
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 和插槽
-- `ElDialog`组件中`footer`插槽都放在中间位置
## 接口相关
......
src/views/order/factoryOrderNew/component/PickCompleteDialog.vue
......@@ -6,27 +6,21 @@
:close-on-click-modal="false"
@close="handleClose"
>
<div class="pick-complete-tip">
根据拣胚情况分三种提示：
</div>
<div class="pick-complete-hints">
<div>情况1文案：本次选择的操作单可以直接拣胚完成</div>
<div>情况2文案：本次选择的操作单只能部分拣胚完成</div>
<div>情况3文案：本次选择操作单库存不足，无法拣胚完成</div>
</div>
<div class="pick-complete-actions" style="margin-bottom: 10px">
<ElButton type="primary" @click="handleCreateInbound">
<span class="item">
<ElButton type="success" @click="handleCreateInbound">
创建入库单
</ElButton>
</span>
</div>
<ElTable :data="tableData" border style="width: 100%">
<ElTableColumn type="selection" width="40" />
<ElTableColumn type="index" label="序号" width="60" align="center" />
<ElTableColumn prop="warehouseName" label="仓库名称" min-width="100" />
<ElTableColumn label="SKU图片" width="80" align="center">
<template #default="{ row }">
<div class="table-view">
<TableView
:paginated-data="tableData"
:columns="columns"
serial-numberable
selectionable
>
<template #skuImage="{ row }">
<el-image
v-if="row.skuImage"
:src="row.skuImage"
......@@ -36,43 +30,38 @@
preview-teleported
/>
</template>
</ElTableColumn>
<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="pickQuantity" label="本次拣胚数量" min-width="110" align="center">
<template #default="{ row }">
<span style="color: #e6a23c; font-weight: bold">{{ row.pickQuantity }}</span>
<template #pickQuantity="{ row }">
<span style="color: #e6a23c; font-weight: bold">{{
row.pickQuantity
}}</span>
</template>
</ElTableColumn>
<ElTableColumn prop="availableStock" label="可调配库存" min-width="100" align="center" />
<ElTableColumn prop="stockQuantity" label="库存数量" min-width="90" align="center" />
<ElTableColumn prop="producingQuantity" label="生产中数量" min-width="100" align="center" />
<ElTableColumn prop="occupiedQuantity" label="占用数量" min-width="90" align="center" />
<ElTableColumn label="拣胚情况" min-width="130" align="center" fixed="right">
<template #default="{ row }">
<template #pickStatus="{ row }">
<span v-if="row.pickStatus === 'fail'" style="color: #f56c6c">
✕ 无法拣胚
</span>
<ElButton
v-else-if="row.pickStatus === 'partial'"
type="warning"
size="small"
>
调整拣胚顺序
</ElButton>
<span v-else style="color: #67c23a">
✓ 直接拣胚
<span v-else-if="row.pickStatus === 'partial'" class="item">
<ElButton type="warning" size="small">调整拣胚顺序</ElButton>
</span>
<span v-else style="color: #67c23a"> ✓ 直接拣胚 </span>
</template>
</ElTableColumn>
</ElTable>
</TableView>
</div>
<template #footer>
<div class="dialog-footer" style="text-align: center">
<span class="item">
<ElButton @click="visible = false">取消</ElButton>
<ElButton type="primary" :loading="submitLoading" @click="handleSubmit">
</span>
<span class="item">
<ElButton
type="primary"
:loading="submitLoading"
@click="handleSubmit"
>
确定
</ElButton>
</span>
</div>
</template>
</ElDialog>
</template>
......@@ -82,6 +71,8 @@ import { ref } from 'vue'
import { ElMessage } from 'element-plus'
import { pickCompleteApi } from '@/api/factoryOrderNew'
import type { PickCompleteData } from '@/types/api/factoryOrderNew'
import TableView from '@/components/TableView.vue'
import type { CustomColumn } from '@/types/table'
const emit = defineEmits<{
success: []
......@@ -92,6 +83,75 @@ const submitLoading = ref(false)
const tableData = ref<PickCompleteData[]>([])
const orderIds = ref<(number | string)[]>([])
const columns: CustomColumn<PickCompleteData>[] = [
{
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: 'pickQuantity',
prop: 'pickQuantity',
label: '本次拣胚数量',
minWidth: 110,
align: 'center',
slot: 'pickQuantity',
},
{
key: 'availableStock',
prop: 'availableStock',
label: '可调配库存',
minWidth: 100,
align: 'center',
},
{
key: 'stockQuantity',
prop: 'stockQuantity',
label: '库存数量',
minWidth: 90,
align: 'center',
},
{
key: 'producingQuantity',
prop: 'producingQuantity',
label: '生产中数量',
minWidth: 100,
align: 'center',
},
{
key: 'occupiedQuantity',
prop: 'occupiedQuantity',
label: '占用数量',
minWidth: 90,
align: 'center',
},
{
key: 'pickStatus',
label: '拣胚情况',
minWidth: 130,
align: 'center',
fixed: 'right',
slot: 'pickStatus',
},
]
const open = async (ids: (number | string)[]) => {
orderIds.value = ids
visible.value = true
......@@ -128,15 +188,7 @@ defineExpose({ open })
</script>
<style scoped lang="scss">
.pick-complete-tip {
font-size: 14px;
color: #606266;
margin-bottom: 8px;
}
.pick-complete-hints {
font-size: 13px;
color: #909399;
margin-bottom: 12px;
line-height: 1.8;
.table-view {
height: 600px;
}
</style>
src/views/order/factoryOrderNew/component/PickFailDialog.vue
......@@ -8,19 +8,20 @@
>
<div class="pick-fail-info">
<span>
您选择了 <strong>{{ orderIds.length }}</strong> 件操作单，如拣胚失败，库位没有实物库存，
<ElButton type="primary" link @click="handleCreateInbound">
建议创建出库单
</ElButton>
您选择了
<strong>{{ orderIds.length }}</strong>
件操作单，如拣胚失败，库位没有实物库存，
<strong style="color: #f56c6c"> 建议创建出库单 </strong>
，详细库存信息如下：
</span>
</div>
<ElTable :data="tableData" border style="width: 100%; margin-top: 10px">
<ElTableColumn type="index" label="序号" width="60" align="center" />
<ElTableColumn prop="warehouseName" label="仓库名称" min-width="90" />
<ElTableColumn label="SKU图片" width="80" align="center">
<template #default="{ row }">
<div class="table-view">
<TableView
:paginated-data="tableData"
:columns="columns"
serial-numberable
>
<template #skuImage="{ row }">
<el-image
v-if="row.skuImage"
:src="row.skuImage"
......@@ -30,34 +31,28 @@
preview-teleported
/>
</template>
</ElTableColumn>
<ElTableColumn prop="productName" label="商品名称" min-width="110" show-overflow-tooltip />
<ElTableColumn prop="styleNo" label="款号" min-width="70" />
<ElTableColumn prop="stockSku" label="库存SKU" min-width="110" />
<ElTableColumn prop="currentStock" label="当前库存数量" min-width="100" align="center" />
<ElTableColumn prop="occupiedQuantity" label="占用数量" min-width="80" align="center" />
<ElTableColumn prop="currentAvailableStock" label="当前可用库存" min-width="100" align="center" />
<ElTableColumn prop="producingQuantity" label="生产中数量" min-width="90" align="center">
<template #default="{ row }">
<span style="color: #e6a23c; font-weight: bold">{{ row.producingQuantity }}</span>
<template #producingQuantity="{ row }">
<span style="color: #e6a23c; font-weight: bold">{{
row.producingQuantity
}}</span>
</template>
</ElTableColumn>
<ElTableColumn label="建议出库数量" min-width="100" align="center">
<template #default="{ row }">
<span style="color: #f56c6c; font-weight: bold">{{ row.suggestOutQuantity }}</span>
<template #suggestOutQuantity="{ row }">
<span style="color: #f56c6c; font-weight: bold">{{
row.suggestOutQuantity
}}</span>
</template>
</ElTableColumn>
<ElTableColumn label="出库后库存数量" min-width="110" align="center">
<template #default="{ row }">
<template #afterOutStock="{ row }">
<span style="color: #f56c6c">{{ row.afterOutStock }}</span>
</template>
</ElTableColumn>
<ElTableColumn prop="afterOutOccupied" label="出库后占用数量" min-width="110" align="center" />
<ElTableColumn prop="afterOutAvailable" label="出库后可用库存" min-width="110" align="center" />
</ElTable>
</TableView>
</div>
<template #footer>
<div class="dialog-footer" style="text-align: center">
<span class="item">
<ElButton @click="visible = false">取消</ElButton>
</span>
<span class="item">
<ElButton
type="primary"
:loading="submitLoading"
......@@ -65,6 +60,8 @@
>
快速创建出库单
</ElButton>
</span>
</div>
</template>
</ElDialog>
</template>
......@@ -74,6 +71,8 @@ import { ref } from 'vue'
import { ElMessage } from 'element-plus'
import { pickFailApi, createOutboundOrderApi } from '@/api/factoryOrderNew'
import type { PickFailData } from '@/types/api/factoryOrderNew'
import TableView from '@/components/TableView.vue'
import type { CustomColumn } from '@/types/table'
const emit = defineEmits<{
success: []
......@@ -84,6 +83,90 @@ const submitLoading = ref(false)
const tableData = ref<PickFailData[]>([])
const orderIds = ref<(number | string)[]>([])
const columns: CustomColumn<PickFailData>[] = [
{
key: 'warehouseName',
prop: 'warehouseName',
label: '仓库名称',
minWidth: 120,
},
{
key: 'skuImage',
label: 'SKU图片',
width: 100,
align: 'center',
slot: 'skuImage',
},
{
key: 'productName',
prop: 'productName',
label: '商品名称',
minWidth: 160,
showOverflowTooltip: true,
},
{ key: 'styleNo', prop: 'styleNo', label: '款号', minWidth: 70 },
{ key: 'stockSku', prop: 'stockSku', label: '库存SKU', minWidth: 110 },
{
key: 'currentStock',
prop: 'currentStock',
label: '当前库存数量',
minWidth: 120,
align: 'center',
},
{
key: 'occupiedQuantity',
prop: 'occupiedQuantity',
label: '占用数量',
minWidth: 90,
align: 'center',
},
{
key: 'currentAvailableStock',
prop: 'currentAvailableStock',
label: '当前可用库存',
minWidth: 120,
align: 'center',
},
{
key: 'producingQuantity',
prop: 'producingQuantity',
label: '生产中数量',
minWidth: 110,
align: 'center',
slot: 'producingQuantity',
},
{
key: 'suggestOutQuantity',
prop: 'suggestOutQuantity',
label: '建议出库数量',
minWidth: 120,
align: 'center',
slot: 'suggestOutQuantity',
},
{
key: 'afterOutStock',
prop: 'afterOutStock',
label: '出库后库存数量',
minWidth: 130,
align: 'center',
slot: 'afterOutStock',
},
{
key: 'afterOutOccupied',
prop: 'afterOutOccupied',
label: '出库后占用数量',
minWidth: 130,
align: 'center',
},
{
key: 'afterOutAvailable',
prop: 'afterOutAvailable',
label: '出库后可用库存',
minWidth: 130,
align: 'center',
},
]
const open = async (ids: (number | string)[]) => {
orderIds.value = ids
visible.value = true
......@@ -99,10 +182,6 @@ const handleClose = () => {
tableData.value = []
}
const handleCreateInbound = () => {
ElMessage.info('创建出库单功能待实现')
}
const handleCreateOutbound = async () => {
submitLoading.value = true
try {
......@@ -110,8 +189,8 @@ const handleCreateOutbound = async () => {
ElMessage.success('创建出库单成功')
visible.value = false
emit('success')
} catch (e: any) {
ElMessage.error(e?.message || '创建出库单失败')
} catch (e: unknown) {
ElMessage.error((e as Error)?.message || '创建出库单失败')
} finally {
submitLoading.value = false
}
......@@ -126,4 +205,7 @@ defineExpose({ open })
color: #606266;
line-height: 1.8;
}
.table-view {
height: 600px;
}
</style>
src/views/order/factoryOrderNew/index.vue
......@@ -426,7 +426,10 @@
>确认接单</ElButton
>
</span>
<span v-if="status === 'PENDING_ACCEPT'" class="item">
<span
v-if="status === 'PENDING_ACCEPT' || status === 'SUSPENDED'"
class="item"
>
<ElButton type="danger" @click="handleCancelOrder">取消订单</ElButton>
</span>
......@@ -597,16 +600,10 @@
>同步收货地址</ElButton
>
</span>
<span class="item">
<ElButton type="danger" @click="handleCancelOrder"
>取消订单</ElButton
>
</span>
</template>
<span
v-if="
[
'PENDING_ACCEPT',
'PENDING_LOGISTICS',
'PENDING_SCHEDULE',
'PENDING_SHIP',
......@@ -1411,7 +1408,7 @@ const handleConfirmOrder = () => {
}
const handleCancelOrder = () => {
if (!ensureSelection()) return
// if (!ensureSelection()) return
cancelOrderDialogRef.value?.open(getSelectedIds())
}
......@@ -1584,7 +1581,7 @@ const handlePickComplete = () => {
}
const handlePickFail = () => {
if (!ensureSelection()) return
// if (!ensureSelection()) return
pickFailDialogRef.value?.open(getSelectedIds())
}
......
src/views/order/factoryOrderNew/newOrder.md
......@@ -49,8 +49,8 @@
-- 注意：这里可用 `src/components/CommonCard.vue` 组件，使用时注意传递对应的 props 和插槽
-- 可参考 `src/views/order/podCN/index.vue` 中的卡片实现方法，但是内容需要根据图片2所示进行调整
### 该状态中的操作栏，分别有如下按钮：
#### 派单
-- 此为原有逻辑，可把 `src/views/order/podCN/index.vue` 中的 `派单` 功能拷贝过来
#### 排单
-- 此为原有逻辑，可把 `src/views/order/podCN/index.vue` 中的 `排单` 功能拷贝过来
#### 下载素材
-- 此为原有逻辑，可把 `src/views/order/podCN/index.vue` 中的 `下载素材` 功能拷贝过来
## 批量管理状态
......
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