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) { ...@@ -467,11 +467,14 @@ export function updateSortingApi(data: IsortingInfo) {
data, data,
) )
} }
export function deleteSortingApi(ids: string) { export function deleteSortingApi(params: {
ids: string
type: string | number
}) {
return axios.get<never, BaseRespData<never>>( return axios.get<never, BaseRespData<never>>(
'logistics/sortingConfig/delete', 'logistics/sortingConfig/delete',
{ {
params: { ids }, params,
}, },
) )
} }
......
src/types/api/logistics.ts
...@@ -19,4 +19,5 @@ export interface IsortingInfo { ...@@ -19,4 +19,5 @@ export interface IsortingInfo {
sortingArea: number | null sortingArea: number | null
sortingAreaName?: string | null sortingAreaName?: string | null
serviceCode: string | null serviceCode: string | null
} type?: string | number
\ No newline at end of file }
src/utils/hooks/useImagePreview..ts
...@@ -37,11 +37,19 @@ export default function useImagePreview() { ...@@ -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() ev.preventDefault()
if (show.value === true) return if (show.value === true) return
img.src = url img.src = url
img.style.backgroundColor = '#eee' img.style.backgroundColor = '#eee'
if (newBorder) img.style.border = '1px solid #eee'
if (newWitdh) img.style.width = newWitdh
const cW = document.body.clientWidth const cW = document.body.clientWidth
const cH = document.body.clientHeight const cH = document.body.clientHeight
const cX = ev.clientX const cX = ev.clientX
...@@ -55,6 +63,31 @@ export default function useImagePreview() { ...@@ -55,6 +63,31 @@ export default function useImagePreview() {
div.style.left = x + 'px' div.style.left = x + 'px'
div.style.top = y + 'px' div.style.top = y + 'px'
div.style.display = 'block' 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 show.value = true
currentTarget = ev.currentTarget as HTMLElement currentTarget = ev.currentTarget as HTMLElement
window.addEventListener('mousemove', mousemoveHandler) window.addEventListener('mousemove', mousemoveHandler)
......
src/views/logistics/sortingConfiguration.vue
<script setup lang="ts"> <script setup lang="ts">
import { Ilogistics, IsortingInfo } from '@/types/api/logistics' 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 { import {
getsortingConfigListApi, getsortingConfigListApi,
usableAllList, usableAllList,
...@@ -9,7 +18,7 @@ import { ...@@ -9,7 +18,7 @@ import {
deleteSortingApi, deleteSortingApi,
} from '@/api/logistics' } from '@/api/logistics'
import { nextTick, ref } from 'vue' import { nextTick, ref } from 'vue'
import SplitDiv from '@/components/splitDiv/splitDiv.vue'
import usePageList from '@/utils/hooks/usePageList' import usePageList from '@/utils/hooks/usePageList'
import { ElMessage, ElMessageBox } from 'element-plus' import { ElMessage, ElMessageBox } from 'element-plus'
interface InterForm { interface InterForm {
...@@ -43,15 +52,25 @@ const createData = ref({ ...@@ -43,15 +52,25 @@ const createData = ref({
serviceCode: [], serviceCode: [],
}, },
}) })
const rules = { const activeName = ref('1')
sortingFacility: [
{ required: true, message: '请输入分拣设备', trigger: 'blur' }, const rules = computed(() => {
], return {
sortingArea: [{ required: true, message: '请选择分拣口', trigger: 'change' }], sortingFacility: [
serviceCode: [ { required: true, message: '请输入分拣设备', trigger: 'blur' },
{ required: true, message: '请选择物流方式', trigger: 'change' }, ],
], sortingArea: [
} { required: true, message: '请选择分拣口', trigger: 'change' },
],
serviceCode: [
{
required: true,
message: `请选择${activeName.value == '1' ? '物流方式' : '平台'}`,
trigger: 'change',
},
],
}
})
const { const {
currentPage, currentPage,
pageSize, pageSize,
...@@ -66,6 +85,7 @@ const { ...@@ -66,6 +85,7 @@ const {
{ {
...searchForm.value, ...searchForm.value,
serviceCode: searchForm.value.serviceCode.join(','), serviceCode: searchForm.value.serviceCode.join(','),
type: activeName.value,
}, },
page, page,
pageSize, pageSize,
...@@ -76,6 +96,7 @@ const getlogisticsMethods = async () => { ...@@ -76,6 +96,7 @@ const getlogisticsMethods = async () => {
const res = await usableAllList() const res = await usableAllList()
logisticsMethodsList.value = res.data || [] logisticsMethodsList.value = res.data || []
} }
interface interSorting { interface interSorting {
label: string label: string
value: number value: number
...@@ -127,11 +148,13 @@ const handleConfirm = async () => { ...@@ -127,11 +148,13 @@ const handleConfirm = async () => {
await createSortingApi({ await createSortingApi({
...form.value, ...form.value,
serviceCode: form.value.serviceCode.join(','), serviceCode: form.value.serviceCode.join(','),
type: activeName.value,
}) })
} else { } else {
await updateSortingApi({ await updateSortingApi({
...form.value, ...form.value,
serviceCode: form.value.serviceCode.join(','), serviceCode: form.value.serviceCode.join(','),
type: activeName.value,
}) })
} }
createData.value.show = false createData.value.show = false
...@@ -151,9 +174,9 @@ const handleBatchDelete = async (row: IsortingInfo | null) => { ...@@ -151,9 +174,9 @@ const handleBatchDelete = async (row: IsortingInfo | null) => {
row && row.id row && row.id
? row.id?.toString() ? row.id?.toString()
: selections.value.map((el: IsortingInfo) => el.id).join(',') : selections.value.map((el: IsortingInfo) => el.id).join(',')
await deleteSortingApi(str) await deleteSortingApi({ ids: str, type: activeName.value })
ElMessage.success('删除成功') ElMessage.success('删除成功')
await search() search()
} }
const addLogistics = () => { const addLogistics = () => {
ElMessageBox.prompt('', '物流方式', { ElMessageBox.prompt('', '物流方式', {
...@@ -208,25 +231,320 @@ const sortingChange = (v: number) => { ...@@ -208,25 +231,320 @@ const sortingChange = (v: number) => {
const warehouse = sortingList.value.find((w: interSorting) => w.value == v) const warehouse = sortingList.value.find((w: interSorting) => w.value == v)
form.value.sortingAreaName = warehouse ? warehouse.label : '' 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> </script>
<template> <template>
<split-div> <div class="user-page flex-column card h-100 overflow-hidden">
<template #top> <el-tabs
<el-card> v-model="activeName"
<el-form inline :model="searchForm"> type="card"
<el-form-item label="分拣设备"> class="demo-tabs"
<el-input @tab-change="handleClick"
v-model.trim="searchForm.sortingFacility" >
placeholder="分拣设备" <el-tab-pane
clearable label="按物流方式分拣(优先级高)"
></el-input> name="1"
</el-form-item> class="flex-column h-100 overflow-hidden"
<el-form-item label="分拣口"> >
<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 <el-select
v-model="searchForm.sortingArea" v-model="form.sortingArea"
clearable clearable
style="width: 160px" style="width: 320px"
@change="sortingChange"
> >
<el-option <el-option
v-for="item in sortingList" v-for="item in sortingList"
...@@ -235,14 +553,29 @@ const sortingChange = (v: number) => { ...@@ -235,14 +553,29 @@ const sortingChange = (v: number) => {
:value="item.value" :value="item.value"
></el-option> ></el-option>
</el-select> </el-select>
</el-form-item> &ensp;
<el-form-item label="物流方式"> <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 <el-select
v-model="searchForm.serviceCode" v-model="form.serviceCode"
style="width: 320px"
clearable clearable
filterable filterable
multiple multiple
style="width: 160px"
> >
<el-option <el-option
v-for="item in logisticsMethodsList" v-for="item in logisticsMethodsList"
...@@ -251,163 +584,46 @@ const sortingChange = (v: number) => { ...@@ -251,163 +584,46 @@ const sortingChange = (v: number) => {
:value="item.serviceCode" :value="item.serviceCode"
></el-option> ></el-option>
</el-select> </el-select>
</el-form-item> &ensp;
<el-form-item> <el-icon
<el-button type="primary" @click="search">查询</el-button> color="#409eff"
<el-button type="success" @click="createWarehouse">新增</el-button> size="30"
<el-button type="danger" @click="handleBatchDelete(null)" title="添加物流方式"
>删除</el-button class="add-btn"
> @click="addLogistics"
</el-form-item> ><CirclePlus
</el-form> /></el-icon>
</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>
</div> </div>
<el-dialog </el-form-item>
v-model="createData.show" <el-form-item label="平台" v-else prop="serviceCode">
width="500px" <el-select
:title="createData.title" v-model="form.serviceCode"
clearable
filterable
multiple
popper-class="customize-select-style"
> >
<el-form <el-option
ref="formRef" v-for="item in platformJson"
label-width="110px" :key="item.type"
:rules="rules" :label="item.type"
:model="form" :value="item.type"
> >
<el-form-item label="分拣设备" prop="sortingFacility"> <img
<el-input :src="`/images/icon/${item.icon.split('/').pop()}`"
v-model.trim="form.sortingFacility" style="height: 20px; margin: 5px 10px 0 0"
placeholder="分拣设备" />
clearable <span :title="item.type">{{ item.type }}</span></el-option
></el-input> >
</el-form-item> </el-select>
<el-form-item label="分拣口" prop="sortingArea"> </el-form-item>
<el-select </el-form>
v-model="form.sortingArea" <template #footer>
clearable <el-button @click="createData.show = false">取消</el-button>
@change="sortingChange" <el-button type="primary" @click="handleConfirm">确定</el-button>
> </template>
<el-option </el-dialog>
v-for="item in sortingList" </div>
: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>
</template> </template>
<style scoped lang="scss"> <style scoped lang="scss">
...@@ -416,6 +632,16 @@ const sortingChange = (v: number) => { ...@@ -416,6 +632,16 @@ const sortingChange = (v: number) => {
height: 100%; height: 100%;
} }
} }
.customize-select-style {
.el-select-dropdown__list {
width: 500px;
display: flex;
flex-wrap: wrap;
.el-select-dropdown__item {
width: 160px;
}
}
}
.manage { .manage {
height: 100%; height: 100%;
...@@ -461,4 +687,7 @@ const sortingChange = (v: number) => { ...@@ -461,4 +687,7 @@ const sortingChange = (v: number) => {
.add-btn :hover { .add-btn :hover {
cursor: pointer; cursor: pointer;
} }
.demo-tabs {
height: 100%;
}
</style> </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