Skip to content

F
factory_front
Commit f56cf599 by linjinhong
Options

分拣配置修改

parent e2f049d1
Showing with 455 additions and 190 deletions
src/api/logistics.ts
......@@ -467,11 +467,14 @@ export function updateSortingApi(data: IsortingInfo) {
data,
)
}
export function deleteSortingApi(ids: string) {
export function deleteSortingApi(params: {
ids: string
type: string | number
}) {
return axios.get<never, BaseRespData<never>>(
'logistics/sortingConfig/delete',
{
params: { ids },
params,
},
)
}
......
src/types/api/logistics.ts
......@@ -19,4 +19,5 @@ export interface IsortingInfo {
sortingArea: number | null
sortingAreaName?: string | null
serviceCode: string | null
}
\ No newline at end of file
type?: string | number
}
src/utils/hooks/useImagePreview..ts
......@@ -37,11 +37,19 @@ export default function useImagePreview() {
}
}
const mouseoverImg = (ev: MouseEvent, url: string) => {
const mouseoverImg = (
ev: MouseEvent,
url: string,
newWitdh?: string,
newBorder?: boolean,
positionBOOTTOM?: boolean,
) => {
ev.preventDefault()
if (show.value === true) return
img.src = url
img.style.backgroundColor = '#eee'
if (newBorder) img.style.border = '1px solid #eee'
if (newWitdh) img.style.width = newWitdh
const cW = document.body.clientWidth
const cH = document.body.clientHeight
const cX = ev.clientX
......@@ -55,6 +63,31 @@ export default function useImagePreview() {
div.style.left = x + 'px'
div.style.top = y + 'px'
div.style.display = 'block'
if (positionBOOTTOM) {
// 获取图片实际尺寸
const imgWidth = img.clientWidth
const imgHeight = img.clientHeight
// 计算新位置（鼠标正下方）
let x = cX / 2
let y = cY + 150 // 20px 垂直偏移
// 边界检测
if (x + imgWidth > cW) {
x = cW - imgWidth - 10
}
if (x < 0) {
x = 10
}
if (y + imgHeight > cH) {
y = cY - imgHeight - 20
}
if (y < 0) {
y = 10
}
div.style.left = x + 'px'
div.style.top = y + 'px'
}
show.value = true
currentTarget = ev.currentTarget as HTMLElement
window.addEventListener('mousemove', mousemoveHandler)
......
src/views/logistics/sortingConfiguration.vue
<script setup lang="ts">
import { Ilogistics, IsortingInfo } from '@/types/api/logistics'
import { Edit, Delete, CirclePlus } from '@element-plus/icons-vue'
import {
Edit,
Delete,
CirclePlus,
QuestionFilled,
} from '@element-plus/icons-vue'
import platformJson from '@/json/platform.json'
import useImagePreview from '@/utils/hooks/useImagePreview.'
const { mouseoverImg, mouseleaveImg } = useImagePreview()
import sortingImg from '@/assets/images/分拣口说明.png'
import {
getsortingConfigListApi,
usableAllList,
......@@ -9,7 +18,7 @@ import {
deleteSortingApi,
} from '@/api/logistics'
import { nextTick, ref } from 'vue'
import SplitDiv from '@/components/splitDiv/splitDiv.vue'
import usePageList from '@/utils/hooks/usePageList'
import { ElMessage, ElMessageBox } from 'element-plus'
interface InterForm {
......@@ -43,15 +52,25 @@ const createData = ref({
serviceCode: [],
},
})
const rules = {
sortingFacility: [
{ required: true, message: '请输入分拣设备', trigger: 'blur' },
],
sortingArea: [{ required: true, message: '请选择分拣口', trigger: 'change' }],
serviceCode: [
{ required: true, message: '请选择物流方式', trigger: 'change' },
],
}
const activeName = ref('1')
const rules = computed(() => {
return {
sortingFacility: [
{ required: true, message: '请输入分拣设备', trigger: 'blur' },
],
sortingArea: [
{ required: true, message: '请选择分拣口', trigger: 'change' },
],
serviceCode: [
{
required: true,
message: `请选择${activeName.value == '1' ? '物流方式' : '平台'}`,
trigger: 'change',
},
],
}
})
const {
currentPage,
pageSize,
......@@ -66,6 +85,7 @@ const {
{
...searchForm.value,
serviceCode: searchForm.value.serviceCode.join(','),
type: activeName.value,
},
page,
pageSize,
......@@ -76,6 +96,7 @@ const getlogisticsMethods = async () => {
const res = await usableAllList()
logisticsMethodsList.value = res.data || []
}
interface interSorting {
label: string
value: number
......@@ -127,11 +148,13 @@ const handleConfirm = async () => {
await createSortingApi({
...form.value,
serviceCode: form.value.serviceCode.join(','),
type: activeName.value,
})
} else {
await updateSortingApi({
...form.value,
serviceCode: form.value.serviceCode.join(','),
type: activeName.value,
})
}
createData.value.show = false
......@@ -151,9 +174,9 @@ const handleBatchDelete = async (row: IsortingInfo | null) => {
row && row.id
? row.id?.toString()
: selections.value.map((el: IsortingInfo) => el.id).join(',')
await deleteSortingApi(str)
await deleteSortingApi({ ids: str, type: activeName.value })
ElMessage.success('删除成功')
await search()
search()
}
const addLogistics = () => {
ElMessageBox.prompt('', '物流方式', {
......@@ -208,25 +231,320 @@ const sortingChange = (v: number) => {
const warehouse = sortingList.value.find((w: interSorting) => w.value == v)
form.value.sortingAreaName = warehouse ? warehouse.label : ''
}
const handleClick = () => {
const loading = ElLoading.service({
fullscreen: true,
text: '操作中...',
background: 'rgba(0, 0, 0, 0.3)',
})
try {
searchForm.value = {
sortingFacility: '',
sortingArea: null,
serviceCode: [],
}
search()
} catch (error) {
console.log(error)
} finally {
loading.close()
}
}
</script>
<template>
<split-div>
<template #top>
<el-card>
<el-form inline :model="searchForm">
<el-form-item label="分拣设备">
<el-input
v-model.trim="searchForm.sortingFacility"
placeholder="分拣设备"
clearable
></el-input>
</el-form-item>
<el-form-item label="分拣口">
<div class="user-page flex-column card h-100 overflow-hidden">
<el-tabs
v-model="activeName"
type="card"
class="demo-tabs"
@tab-change="handleClick"
>
<el-tab-pane
label="按物流方式分拣(优先级高)"
name="1"
class="flex-column h-100 overflow-hidden"
>
<div class="header-filter-form">
<el-form inline :model="searchForm">
<el-form-item label="分拣设备">
<el-input
v-model.trim="searchForm.sortingFacility"
placeholder="分拣设备"
clearable
></el-input>
</el-form-item>
<el-form-item label="分拣口">
<el-select
v-model="searchForm.sortingArea"
clearable
style="width: 160px"
>
<el-option
v-for="item in sortingList"
:key="item.value"
:label="item.label"
:value="item.value"
></el-option>
</el-select>
</el-form-item>
<el-form-item label="物流方式">
<el-select
v-model="searchForm.serviceCode"
clearable
filterable
multiple
collapse-tags
collapse-tags-tooltip
style="width: 200px"
>
<el-option
v-for="item in logisticsMethodsList"
:key="item.serviceCode"
:label="item.serviceCode"
:value="item.serviceCode"
></el-option>
</el-select>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="search">查询</el-button>
<el-button type="success" @click="createWarehouse"
>新增</el-button
>
<el-button type="danger" @click="handleBatchDelete(null)"
>删除</el-button
>
</el-form-item>
</el-form>
</div>
<div class="user-content flex-1 flex-column overflow-hidden">
<div class="user-list flex-1 overflow-hidden">
<el-table
height="100%"
:data="tableData"
border
@selection-change="handleSelectionChange"
>
<el-table-column type="selection" />
<el-table-column
type="index"
label="序号"
width="60"
align="center"
/>
<el-table-column
align="center"
label="分拣设备"
show-overflow-tooltip
prop="sortingFacility"
></el-table-column>
<el-table-column
align="center"
label="分拣口名称"
prop="sortingAreaName"
>
</el-table-column>
<el-table-column
align="center"
label="物流编码"
show-overflow-tooltip
prop="serviceCode"
></el-table-column>
<el-table-column label="操作" align="center" width="100">
<template #default="{ row }">
<el-icon
size="24"
title="编辑"
color="#EF6C00"
style="cursor: pointer; vertical-align: middle"
@click="updateSorting(row)"
>
<Edit />
</el-icon>
<el-icon
size="24"
title="删除"
color="#f56c6c"
style="cursor: pointer; vertical-align: middle"
@click="handleBatchDelete(row)"
>
<Delete />
</el-icon>
</template>
</el-table-column>
</el-table>
</div>
<ElPagination
v-model:current-page="currentPage"
v-model:page-size="pageSize"
:page-sizes="[100, 200, 300, 400, 500]"
background
layout="total, sizes, prev, pager, next, jumper"
:total="total"
style="margin: 10px auto 0; text-align: right"
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
></ElPagination>
</div>
</el-tab-pane>
<el-tab-pane
label="按平台分拣(优先级低)"
name="2"
class="flex-column h-100 overflow-hidden"
>
<div class="header-filter-form">
<el-form inline :model="searchForm">
<el-form-item label="分拣设备">
<el-input
v-model.trim="searchForm.sortingFacility"
placeholder="分拣设备"
clearable
></el-input>
</el-form-item>
<el-form-item label="分拣口">
<el-select
v-model="searchForm.sortingArea"
clearable
style="width: 160px"
>
<el-option
v-for="item in sortingList"
:key="item.value"
:label="item.label"
:value="item.value"
></el-option>
</el-select>
</el-form-item>
<el-form-item label="平台">
<el-select
v-model="searchForm.serviceCode"
clearable
filterable
multiple
collapse-tags
collapse-tags-tooltip
popper-class="customize-select-style"
style="width: 200px"
>
<el-option
v-for="item in platformJson"
:key="item.type"
:label="item.type"
:value="item.type"
>
<img
:src="`/images/icon/${item.icon.split('/').pop()}`"
style="height: 20px; margin: 5px 10px 0 0"
/>
<span :title="item.type">{{ item.type }}</span></el-option
>
</el-select>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="search">查询</el-button>
<el-button type="success" @click="createWarehouse"
>新增</el-button
>
<el-button type="danger" @click="handleBatchDelete(null)"
>删除</el-button
>
</el-form-item>
</el-form>
</div>
<div class="user-content flex-1 flex-column overflow-hidden">
<div class="user-list flex-1 overflow-hidden">
<el-table
height="100%"
:data="tableData"
border
@selection-change="handleSelectionChange"
>
<el-table-column type="selection" />
<el-table-column
type="index"
label="序号"
width="60"
align="center"
/>
<el-table-column
align="center"
label="分拣设备"
show-overflow-tooltip
prop="sortingFacility"
></el-table-column>
<el-table-column
align="center"
label="分拣口名称"
prop="sortingAreaName"
>
</el-table-column>
<el-table-column
align="center"
label="平台"
show-overflow-tooltip
prop="serviceCode"
></el-table-column>
<el-table-column label="操作" align="center" width="100">
<template #default="{ row }">
<el-icon
size="24"
title="编辑"
color="#EF6C00"
style="cursor: pointer; vertical-align: middle"
@click="updateSorting(row)"
>
<Edit />
</el-icon>
<el-icon
size="24"
title="删除"
color="#f56c6c"
style="cursor: pointer; vertical-align: middle"
@click="handleBatchDelete(row)"
>
<Delete />
</el-icon>
</template>
</el-table-column>
</el-table>
</div>
<ElPagination
v-model:current-page="currentPage"
v-model:page-size="pageSize"
:page-sizes="[100, 200, 300, 400, 500]"
background
layout="total, sizes, prev, pager, next, jumper"
:total="total"
style="margin: 10px auto 0; text-align: right"
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
></ElPagination></div
></el-tab-pane>
</el-tabs>
<el-dialog
v-model="createData.show"
width="500px"
:title="createData.title"
>
<el-form ref="formRef" label-width="110px" :rules="rules" :model="form">
<el-form-item label="分拣设备" prop="sortingFacility">
<el-input
v-model.trim="form.sortingFacility"
placeholder="分拣设备"
clearable
></el-input>
</el-form-item>
<el-form-item label="分拣口" prop="sortingArea">
<div class="flex">
<el-select
v-model="searchForm.sortingArea"
v-model="form.sortingArea"
clearable
style="width: 160px"
style="width: 320px"
@change="sortingChange"
>
<el-option
v-for="item in sortingList"
......@@ -235,14 +553,29 @@ const sortingChange = (v: number) => {
:value="item.value"
></el-option>
</el-select>
</el-form-item>
<el-form-item label="物流方式">
&ensp;
<el-icon
size="30"
title="分拣口示意图"
style="cursor: pointer"
@mouseover="(ev:MouseEvent) => mouseoverImg(ev, sortingImg,'700px',true,true)"
@mouseleave="mouseleaveImg"
><QuestionFilled
/></el-icon>
</div>
</el-form-item>
<el-form-item
v-if="activeName == '1'"
label="物流方式"
prop="serviceCode"
>
<div class="flex">
<el-select
v-model="searchForm.serviceCode"
v-model="form.serviceCode"
style="width: 320px"
clearable
filterable
multiple
style="width: 160px"
>
<el-option
v-for="item in logisticsMethodsList"
......@@ -251,163 +584,46 @@ const sortingChange = (v: number) => {
:value="item.serviceCode"
></el-option>
</el-select>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="search">查询</el-button>
<el-button type="success" @click="createWarehouse">新增</el-button>
<el-button type="danger" @click="handleBatchDelete(null)"
>删除</el-button
>
</el-form-item>
</el-form>
</el-card>
</template>
<template #bottom>
<el-card style="height: 100%">
<div class="manage">
<div class="table-flex">
<div class="left-table">
<div class="table-container">
<el-table
height="100%"
:data="tableData"
border
@selection-change="handleSelectionChange"
>
<el-table-column type="selection" />
<el-table-column
type="index"
label="序号"
width="60"
align="center"
/>
<el-table-column
align="center"
label="分拣设备"
width="540"
show-overflow-tooltip
prop="sortingFacility"
></el-table-column>
<el-table-column
align="center"
label="分拣口名称"
prop="sortingAreaName"
></el-table-column>
<el-table-column
align="center"
label="物流编码"
width="540"
show-overflow-tooltip
prop="serviceCode"
></el-table-column>
<el-table-column label="操作" align="center" width="100">
<template #default="{ row }">
<el-icon
size="24"
title="编辑"
color="#EF6C00"
style="cursor: pointer; vertical-align: middle"
@click="updateSorting(row)"
>
<Edit />
</el-icon>
<el-icon
size="24"
title="删除"
color="#f56c6c"
style="cursor: pointer; vertical-align: middle"
@click="handleBatchDelete(row)"
>
<Delete />
</el-icon>
</template>
</el-table-column>
</el-table>
</div>
<div class="pagination">
<ElPagination
v-model:current-page="currentPage"
v-model:page-size="pageSize"
:page-sizes="[100, 200, 300, 400, 500]"
background
layout="total, sizes, prev, pager, next, jumper"
:total="total"
style="margin: 10px auto 0; text-align: right"
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
></ElPagination>
</div>
</div>
&ensp;
<el-icon
color="#409eff"
size="30"
title="添加物流方式"
class="add-btn"
@click="addLogistics"
><CirclePlus
/></el-icon>
</div>
<el-dialog
v-model="createData.show"
width="500px"
:title="createData.title"
</el-form-item>
<el-form-item label="平台" v-else prop="serviceCode">
<el-select
v-model="form.serviceCode"
clearable
filterable
multiple
popper-class="customize-select-style"
>
<el-form
ref="formRef"
label-width="110px"
:rules="rules"
:model="form"
<el-option
v-for="item in platformJson"
:key="item.type"
:label="item.type"
:value="item.type"
>
<el-form-item label="分拣设备" prop="sortingFacility">
<el-input
v-model.trim="form.sortingFacility"
placeholder="分拣设备"
clearable
></el-input>
</el-form-item>
<el-form-item label="分拣口" prop="sortingArea">
<el-select
v-model="form.sortingArea"
clearable
@change="sortingChange"
>
<el-option
v-for="item in sortingList"
:key="item.value"
:label="item.label"
:value="item.value"
></el-option>
</el-select>
</el-form-item>
<el-form-item label="物流方式" prop="serviceCode">
<div class="flex">
<el-select
v-model="form.serviceCode"
style="width: 320px"
clearable
filterable
multiple
>
<el-option
v-for="item in logisticsMethodsList"
:key="item.serviceCode"
:label="item.serviceCode"
:value="item.serviceCode"
></el-option>
</el-select>
&ensp;
<el-icon
color="#409eff"
size="30"
title="添加物流方式"
class="add-btn"
@click="addLogistics"
><CirclePlus
/></el-icon>
</div>
</el-form-item>
</el-form>
<template #footer>
<el-button @click="createData.show = false">取消</el-button>
<el-button type="primary" @click="handleConfirm">确定</el-button>
</template>
</el-dialog>
</div>
</el-card>
</template>
</split-div>
<img
:src="`/images/icon/${item.icon.split('/').pop()}`"
style="height: 20px; margin: 5px 10px 0 0"
/>
<span :title="item.type">{{ item.type }}</span></el-option
>
</el-select>
</el-form-item>
</el-form>
<template #footer>
<el-button @click="createData.show = false">取消</el-button>
<el-button type="primary" @click="handleConfirm">确定</el-button>
</template>
</el-dialog>
</div>
</template>
<style scoped lang="scss">
......@@ -416,6 +632,16 @@ const sortingChange = (v: number) => {
height: 100%;
}
}
.customize-select-style {
.el-select-dropdown__list {
width: 500px;
display: flex;
flex-wrap: wrap;
.el-select-dropdown__item {
width: 160px;
}
}
}
.manage {
height: 100%;
......@@ -461,4 +687,7 @@ const sortingChange = (v: number) => {
.add-btn :hover {
cursor: pointer;
}
.demo-tabs {
height: 100%;
}
</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