Skip to content

F
factory_front
Commit 7d5b27b1 by wusiyi
Options

feat: podcn podus选中的行数置为橙色

parent 30340fff
Showing with 159 additions and 50 deletions
src/views/order/orderTracking/index.vue
......@@ -757,6 +757,26 @@ const handleSelectionChange = (val: PodUsOrderListData[]) => {
selection.value = val
}
// 修改行样式方法
const getRowStyle = ({ row }: { row: PodUsOrderListData }) => {
// 如果行被选中，设置背景色为 #fdf6ec
if (selection.value.some((item) => item.id === row.id)) {
return {
backgroundColor: '#fdf6ec',
}
}
return {
backgroundColor: '',
}
}
// 获取行类名方法
const getRowClassName = ({ row }: { row: PodUsOrderListData }) => {
return selection.value.some((item) => item.id === row.id)
? 'row-selected'
: ''
}
/**
* @description: 页面添加回车监听
*/
......@@ -802,7 +822,7 @@ onMounted(() => {
</script>
<template>
<split-div otherSize="35">
<split-div other-size="35">
<template #top>
<el-card>
<ElForm
......@@ -1099,14 +1119,14 @@ onMounted(() => {
</ElFormItem>
<ElFormItem>
<span>
<ElButton link @click="resetSearchForm" style="font-size: 12px"
<ElButton link style="font-size: 12px" @click="resetSearchForm"
><span title="重置查询条件">重置</span></ElButton
>
</span>
</ElFormItem>
<ElFormItem>
<span>
<ElButton type="primary" @click="search" ref="searchBtnRef"
<ElButton ref="searchBtnRef" type="primary" @click="search"
>查询</ElButton
>
</span>
......@@ -1136,7 +1156,8 @@ onMounted(() => {
:serial-numberable="true"
:selectionable="true"
:paginated-data="tableData"
highlight-current-row
:row-style="getRowStyle"
:row-class-name="getRowClassName"
@row-click="rowClick"
@selection-change="handleSelectionChange"
>
......@@ -1172,9 +1193,9 @@ onMounted(() => {
</div>
<div class="pagination">
<el-pagination
size="small"
v-model:current-page="pagination.currentPage"
v-model:page-size="pagination.pageSize"
size="small"
:page-sizes="[50, 100, 150, 200]"
layout="total, sizes, prev, pager, next, jumper"
:total="pagination.total"
......@@ -1363,4 +1384,13 @@ onMounted(() => {
width: 75px;
}
}
// 确保选中行的背景色在 hover 时也保持
:deep(.el-table__body) {
.el-table__row.row-selected:hover {
td {
background-color: #fdf6ec !important;
}
}
}
</style>
src/views/order/orderTracking/indexcn.vue
......@@ -772,6 +772,27 @@ const handleSelectionChange = (val: PodCnOrderListData[]) => {
selection.value = val
}
// 修改行样式方法
const getRowStyle = ({ row }: { row: PodCnOrderListData }) => {
// 如果行被选中，设置背景色为 #fdf6ec
if (selection.value.some((item) => item.id === row.id)) {
return {
backgroundColor: '#fdf6ec',
}
}
return {
backgroundColor: '',
}
}
// 获取行类名方法
const getRowClassName = ({ row }: { row: PodCnOrderListData }) => {
return selection.value.some((item) => item.id === row.id)
? 'row-selected'
: ''
}
const handleRadioGroupClick = (event: Event) => {
const target = event.target as HTMLElement
const radioButton = target.closest('.el-radio-button')
......@@ -855,7 +876,7 @@ onMounted(() => {
</script>
<template>
<split-div otherSize="35">
<split-div other-size="35">
<template #top>
<el-card>
<ElForm
......@@ -1180,14 +1201,14 @@ onMounted(() => {
</ElFormItem>
<ElFormItem>
<span>
<ElButton link @click="resetSearchForm" style="font-size: 12px"
<ElButton link style="font-size: 12px" @click="resetSearchForm"
><span title="重置查询条件">重置</span></ElButton
>
</span>
</ElFormItem>
<ElFormItem>
<span>
<ElButton type="primary" @click="search" ref="searchBtnRef"
<ElButton ref="searchBtnRef" type="primary" @click="search"
>查询</ElButton
>
</span>
......@@ -1225,7 +1246,8 @@ onMounted(() => {
:serial-numberable="true"
:selectionable="true"
:paginated-data="tableData"
highlight-current-row
:row-style="getRowStyle"
:row-class-name="getRowClassName"
@row-click="rowClick"
@selection-change="handleSelectionChange"
>
......@@ -1268,9 +1290,9 @@ onMounted(() => {
</div>
<div class="pagination">
<el-pagination
size="small"
v-model:current-page="pagination.currentPage"
v-model:page-size="pagination.pageSize"
size="small"
:page-sizes="[50, 100, 150, 200]"
layout="total, sizes, prev, pager, next, jumper"
:total="pagination.total"
......@@ -1459,4 +1481,13 @@ onMounted(() => {
width: 75px;
}
}
// 确保选中行的背景色在 hover 时也保持
:deep(.el-table__body) {
.el-table__row.row-selected:hover {
td {
background-color: #fdf6ec !important;
}
}
}
</style>
src/views/order/podCN/index.vue
......@@ -11,7 +11,7 @@
label-width="70px"
>
<!-- 批量下载 -->
<ElFormItem label="创建时间" v-if="status === 'BATCH_DOWNLOAD'">
<ElFormItem v-if="status === 'BATCH_DOWNLOAD'" label="创建时间">
<el-date-picker
v-model="timeRange"
:teleported="false"
......@@ -29,7 +29,7 @@
>
</el-date-picker>
</ElFormItem>
<ElFormItem label="创建人" v-if="status === 'BATCH_DOWNLOAD'">
<ElFormItem v-if="status === 'BATCH_DOWNLOAD'" label="创建人">
<ElSelect
v-model="searchForm.employeeId"
placeholder="请选择"
......@@ -45,7 +45,7 @@
></ElOption>
</ElSelect>
</ElFormItem>
<ElFormItem label="工艺类型" v-if="status === 'BATCH_DOWNLOAD'">
<ElFormItem v-if="status === 'BATCH_DOWNLOAD'" label="工艺类型">
<ElSelect
v-model="searchForm.craftType"
placeholder="请选择"
......@@ -62,7 +62,7 @@
></ElOption>
</ElSelect>
</ElFormItem>
<ElFormItem label="下载状态" v-if="status === 'BATCH_DOWNLOAD'">
<ElFormItem v-if="status === 'BATCH_DOWNLOAD'" label="下载状态">
<ElSelect
v-model="searchForm.downloadStatus"
placeholder="下载状态"
......@@ -78,7 +78,7 @@
></ElOption>
</ElSelect>
</ElFormItem>
<ElFormItem label="排版状态" v-if="status === 'BATCH_DOWNLOAD'">
<ElFormItem v-if="status === 'BATCH_DOWNLOAD'" label="排版状态">
<ElSelect
v-model="searchForm.syntheticStatus"
placeholder="排版状态"
......@@ -94,7 +94,7 @@
></ElOption>
</ElSelect>
</ElFormItem>
<ElFormItem label="自动排版" v-if="status === 'BATCH_DOWNLOAD'">
<ElFormItem v-if="status === 'BATCH_DOWNLOAD'" label="自动排版">
<ElSelect
v-model="searchForm.automaticComposing"
placeholder="自动排版"
......@@ -111,7 +111,7 @@
</ElSelect>
</ElFormItem>
<ElFormItem label="仓库" v-if="status !== 'BATCH_DOWNLOAD'">
<ElFormItem v-if="status !== 'BATCH_DOWNLOAD'" label="仓库">
<ElSelect
v-model="searchForm.warehouseId"
clearable
......@@ -127,7 +127,7 @@
></el-option>
</ElSelect>
</ElFormItem>
<ElFormItem label="平台" v-if="status !== 'BATCH_DOWNLOAD'">
<ElFormItem v-if="status !== 'BATCH_DOWNLOAD'" label="平台">
<ElSelect
v-model="searchForm.platform"
value-key=""
......@@ -153,7 +153,7 @@
</ElSelect>
</ElFormItem>
<ElFormItem label="工艺" v-if="status !== 'BATCH_DOWNLOAD'">
<ElFormItem v-if="status !== 'BATCH_DOWNLOAD'" label="工艺">
<LogisticsWaySelect
v-model="searchForm.craftCode"
:company-list="craftList"
......@@ -162,7 +162,7 @@
start-placeholder="请选择工艺名称"
></LogisticsWaySelect>
</ElFormItem>
<ElFormItem label="库存SKU" v-if="status !== 'BATCH_DOWNLOAD'">
<ElFormItem v-if="status !== 'BATCH_DOWNLOAD'" label="库存SKU">
<ElInput
v-model.trim="searchForm.thirdSkuCode"
placeholder="库存SKU"
......@@ -170,7 +170,7 @@
style="width: 180px"
></ElInput>
</ElFormItem>
<ElFormItem label="款号" v-if="status !== 'BATCH_DOWNLOAD'">
<ElFormItem v-if="status !== 'BATCH_DOWNLOAD'" label="款号">
<ElInput
v-model.trim="searchForm.supplierProductNo"
placeholder="款号"
......@@ -186,7 +186,7 @@
style="width: 150px"
/>
</ElFormItem>
<ElFormItem label="生产单号" v-if="status !== 'BATCH_DOWNLOAD'">
<ElFormItem v-if="status !== 'BATCH_DOWNLOAD'" label="生产单号">
<ElInput
v-model.trim="searchForm.factorySubOrderNumber"
placeholder="生产单号"
......@@ -194,7 +194,7 @@
style="width: 150px"
/>
</ElFormItem>
<ElFormItem label="店铺单号" v-if="status !== 'BATCH_DOWNLOAD'">
<ElFormItem v-if="status !== 'BATCH_DOWNLOAD'" label="店铺单号">
<ElInput
v-model.trim="searchForm.shopNumber"
placeholder="店铺单号"
......@@ -202,7 +202,7 @@
style="width: 150px"
/>
</ElFormItem>
<ElFormItem label="尺码类型" v-if="status !== 'BATCH_DOWNLOAD'">
<ElFormItem v-if="status !== 'BATCH_DOWNLOAD'" label="尺码类型">
<ElSelect
v-model="searchForm.sizeType"
clearable
......@@ -218,7 +218,7 @@
></el-option>
</ElSelect>
</ElFormItem>
<ElFormItem label="排序方式" v-if="status !== 'BATCH_DOWNLOAD'">
<ElFormItem v-if="status !== 'BATCH_DOWNLOAD'" label="排序方式">
<el-select
v-model="searchForm.order"
clearable
......@@ -229,7 +229,7 @@
<el-option value="asc" label="按创建时间从旧到新"></el-option>
</el-select>
</ElFormItem>
<ElFormItem label="印刷" v-if="status !== 'BATCH_DOWNLOAD'">
<ElFormItem v-if="status !== 'BATCH_DOWNLOAD'" label="印刷">
<el-radio-group
v-model="searchForm.customizedQuantity"
@click.stop="(e: Event) => handleRadioGroupClick(e)"
......@@ -239,7 +239,7 @@
<el-radio-button label="normal">普品</el-radio-button>
</el-radio-group>
</ElFormItem>
<ElFormItem label="数量" v-if="status !== 'BATCH_DOWNLOAD'">
<ElFormItem v-if="status !== 'BATCH_DOWNLOAD'" label="数量">
<el-radio-group
v-model="searchForm.multi"
@click.stop="(e: Event) => handleMultiRadioGroupClick(e)"
......@@ -253,8 +253,8 @@
</el-radio-group>
</ElFormItem>
<ElFormItem
label="标签"
v-if="status == 'TO_BE_REPLENISHMENT' || status == 'PICKING'"
label="标签"
>
<ElSelect
v-model="searchForm.outOfStock"
......@@ -1121,6 +1121,7 @@
:paginated-data="tableData"
:cell-style="onCellStyle"
:row-style="getRowStyle"
:row-class-name="getRowClassName"
@selection-change="handleSelectionChange"
>
<template #serialNumber="{ row, index }">
......@@ -5401,13 +5402,27 @@ const onFastRefresh = () => {
}
// // 修改行样式方法
const getRowStyle = ({ row }: { row: PodCnOrderListData }) => {
// 如果行在补货成功列表中，设置绿色背景
if (stockOutSuccessIds.value.includes(row.id)) {
return {
backgroundColor: '#f0f9eb',
color: '#67c23a',
}
}
return {}
// 如果行被选中，设置背景色为 #fdf6ec
if (selection.value.some((item) => item.id === row.id)) {
return {
backgroundColor: '#fdf6ec',
}
}
return {
backgroundColor: '',
}
}
// 获取行类名方法
const getRowClassName = ({ row }: { row: PodCnOrderListData }) => {
return selection.value.some((item) => item.id === row.id) ? 'row-selected' : ''
}
const warehouseList = ref<WarehouseListData[]>([])
const loadWarehouseList = async () => {
......@@ -6372,6 +6387,15 @@ const onUpdateCustomsDeclarationInfo = () => {
width: 75px;
}
}
// 确保选中行的背景色在 hover 时也保持
:deep(.el-table__body) {
.el-table__row.row-selected:hover {
td {
background-color: #fdf6ec !important;
}
}
}
</style>
<style lang="scss">
.customize-select-style {
......
src/views/order/podUs/index.vue
......@@ -11,7 +11,7 @@
inline
>
<!-- 批量下载 -->
<ElFormItem label="创建时间" v-if="status === 'BATCH_DOWNLOAD'">
<ElFormItem v-if="status === 'BATCH_DOWNLOAD'" label="创建时间">
<el-date-picker
v-model="timeRange"
:teleported="false"
......@@ -29,7 +29,7 @@
>
</el-date-picker>
</ElFormItem>
<ElFormItem label="创建人" v-if="status === 'BATCH_DOWNLOAD'">
<ElFormItem v-if="status === 'BATCH_DOWNLOAD'" label="创建人">
<ElSelect
v-model="searchForm.employeeId"
placeholder="请选择"
......@@ -45,7 +45,7 @@
></ElOption>
</ElSelect>
</ElFormItem>
<ElFormItem label="工艺类型" v-if="status === 'BATCH_DOWNLOAD'">
<ElFormItem v-if="status === 'BATCH_DOWNLOAD'" label="工艺类型">
<ElSelect
v-model="searchForm.craftType"
placeholder="请选择"
......@@ -62,7 +62,7 @@
></ElOption>
</ElSelect>
</ElFormItem>
<ElFormItem label="下载状态" v-if="status === 'BATCH_DOWNLOAD'">
<ElFormItem v-if="status === 'BATCH_DOWNLOAD'" label="下载状态">
<ElSelect
v-model="searchForm.downloadStatus"
placeholder="下载状态"
......@@ -78,7 +78,7 @@
></ElOption>
</ElSelect>
</ElFormItem>
<ElFormItem label="排版状态" v-if="status === 'BATCH_DOWNLOAD'">
<ElFormItem v-if="status === 'BATCH_DOWNLOAD'" label="排版状态">
<ElSelect
v-model="searchForm.syntheticStatus"
placeholder="排版状态"
......@@ -94,7 +94,7 @@
></ElOption>
</ElSelect>
</ElFormItem>
<ElFormItem label="自动排版" v-if="status === 'BATCH_DOWNLOAD'">
<ElFormItem v-if="status === 'BATCH_DOWNLOAD'" label="自动排版">
<ElSelect
v-model="searchForm.automaticComposing"
placeholder="自动排版"
......@@ -111,7 +111,7 @@
</ElSelect>
</ElFormItem>
<!-- <div> -->
<ElFormItem label="仓库" v-if="status !== 'BATCH_DOWNLOAD'">
<ElFormItem v-if="status !== 'BATCH_DOWNLOAD'" label="仓库">
<ElSelect
v-model="searchForm.warehouseId"
clearable
......@@ -128,7 +128,7 @@
</ElSelect>
</ElFormItem>
<ElFormItem label="工艺" v-if="status !== 'BATCH_DOWNLOAD'">
<ElFormItem v-if="status !== 'BATCH_DOWNLOAD'" label="工艺">
<LogisticsWaySelect
v-model="searchForm.craftCode"
:company-list="craftList"
......@@ -137,7 +137,7 @@
start-placeholder="请选择工艺名称"
></LogisticsWaySelect>
</ElFormItem>
<ElFormItem label="库存SKU" v-if="status !== 'BATCH_DOWNLOAD'">
<ElFormItem v-if="status !== 'BATCH_DOWNLOAD'" label="库存SKU">
<ElInput
v-model.trim="searchForm.thirdSkuCode"
placeholder="库存SKU"
......@@ -145,7 +145,7 @@
style="width: 180px"
></ElInput>
</ElFormItem>
<ElFormItem label="款号" v-if="status !== 'BATCH_DOWNLOAD'">
<ElFormItem v-if="status !== 'BATCH_DOWNLOAD'" label="款号">
<ElInput
v-model="searchForm.supplierProductNo"
placeholder="款号"
......@@ -161,7 +161,7 @@
style="width: 150px"
/>
</ElFormItem>
<ElFormItem label="生产单号" v-if="status !== 'BATCH_DOWNLOAD'">
<ElFormItem v-if="status !== 'BATCH_DOWNLOAD'" label="生产单号">
<ElInput
v-model="searchForm.factorySubOrderNumber"
placeholder="生产单号"
......@@ -169,7 +169,7 @@
style="width: 150px"
/>
</ElFormItem>
<ElFormItem label="店铺单号" v-if="status !== 'BATCH_DOWNLOAD'">
<ElFormItem v-if="status !== 'BATCH_DOWNLOAD'" label="店铺单号">
<ElInput
v-model="searchForm.shopNumber"
placeholder="店铺单号"
......@@ -177,7 +177,7 @@
style="width: 150px"
/>
</ElFormItem>
<ElFormItem label="尺码类型" v-if="status !== 'BATCH_DOWNLOAD'">
<ElFormItem v-if="status !== 'BATCH_DOWNLOAD'" label="尺码类型">
<ElSelect
v-model="searchForm.sizeType"
clearable
......@@ -193,7 +193,7 @@
></el-option>
</ElSelect>
</ElFormItem>
<ElFormItem label="平台" v-if="status !== 'BATCH_DOWNLOAD'">
<ElFormItem v-if="status !== 'BATCH_DOWNLOAD'" label="平台">
<ElSelect
v-model="searchForm.platform"
value-key=""
......@@ -219,7 +219,7 @@
</ElSelect>
</ElFormItem>
<!-- </div> -->
<ElFormItem label="印刷" v-if="status !== 'BATCH_DOWNLOAD'">
<ElFormItem v-if="status !== 'BATCH_DOWNLOAD'" label="印刷">
<el-radio-group
v-model="searchForm.customizedQuantity"
@click.stop="(e: Event) => handleRadioGroupClick(e)"
......@@ -229,7 +229,7 @@
<el-radio-button label="normal">普品</el-radio-button>
</el-radio-group>
</ElFormItem>
<ElFormItem label="数量" v-if="status !== 'BATCH_DOWNLOAD'">
<ElFormItem v-if="status !== 'BATCH_DOWNLOAD'" label="数量">
<el-radio-group
v-model="searchForm.multi"
@click.stop="(e: Event) => handleMultiRadioGroupClick(e)"
......@@ -243,8 +243,8 @@
</el-radio-group>
</ElFormItem>
<ElFormItem
label="标签"
v-if="status == 'TO_BE_REPLENISHMENT' || status == 'PICKING'"
label="标签"
>
<ElSelect
v-model="searchForm.outOfStock"
......@@ -263,10 +263,10 @@
</ElFormItem>
<ElFormItem>
<ElPopover
v-if="status !== 'BATCH_DOWNLOAD'"
placement="bottom"
width="600"
trigger="click"
v-if="status !== 'BATCH_DOWNLOAD'"
>
<ElForm
ref="searchFormPopoverRef"
......@@ -491,8 +491,8 @@
</ElSelect>
</ElFormItem>
<ElFormItem
label="拦截订单"
v-if="status !== 'CANCEL' && status !== 'INTERCEPTED'"
label="拦截订单"
>
<ElSelect
v-model="searchForm.blocking"
......@@ -1210,6 +1210,7 @@
:cell-style="onCellStyle"
:cell-class-name="onCellClassName"
:row-style="getRowStyle"
:row-class-name="getRowClassName"
@selection-change="handleSelectionChange"
>
<template #serialNumber="{ row, index }">
......@@ -3142,7 +3143,7 @@
<uploadBox
v-if="status === 'BATCH_DOWNLOAD'"
:uploadList="uploadList"
:upload-list="uploadList"
></uploadBox>
</template>
<script setup lang="tsx">
......@@ -6157,13 +6158,27 @@ const onFastRefresh = () => {
}
// // 修改行样式方法
const getRowStyle = ({ row }: { row: PodUsOrderListData }) => {
// 如果行在补货成功列表中，设置绿色背景
if (stockOutSuccessIds.value.includes(row.id)) {
return {
backgroundColor: '#f0f9eb',
color: '#67c23a',
}
}
return {}
// 如果行被选中，设置背景色为 #fdf6ec
if (selection.value.some((item) => item.id === row.id)) {
return {
backgroundColor: '#fdf6ec',
}
}
return {
backgroundColor: '',
}
}
// 获取行类名方法
const getRowClassName = ({ row }: { row: PodUsOrderListData }) => {
return selection.value.some((item) => item.id === row.id) ? 'row-selected' : ''
}
const warehouseList = ref<WarehouseListData[]>([])
const loadWarehouseList = async () => {
......@@ -7292,6 +7307,15 @@ useRouter().beforeEach((to, from, next) => {
width: 75px;
}
}
// 确保选中行的背景色在 hover 时也保持
:deep(.el-table__body) {
.el-table__row.row-selected:hover {
td {
background-color: #fdf6ec !important;
}
}
}
</style>
<style lang="scss">
.customize-select-style {
......
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