zhaochencheng
3 years ago
parent
86617127b9
commit
90614ad7f2
@ -1,69 +0,0 @@
|
|||||||
<template lang="pug">
|
|
||||||
.item-select-wrapper
|
|
||||||
el-select(
|
|
||||||
v-model="value1"
|
|
||||||
filterable
|
|
||||||
remote
|
|
||||||
clearable
|
|
||||||
:remote-method="doSearch"
|
|
||||||
:loading="loading"
|
|
||||||
:size="size"
|
|
||||||
)
|
|
||||||
el-option(
|
|
||||||
v-for="item in options"
|
|
||||||
:key="item.id"
|
|
||||||
:label="item.itemName"
|
|
||||||
:value="item.id"
|
|
||||||
)
|
|
||||||
div {{item.itemName}}
|
|
||||||
.info {{item.itemNo}}
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
import { listWmsItem } from '@/api/wms/item'
|
|
||||||
|
|
||||||
export default {
|
|
||||||
name: 'ItemSelect',
|
|
||||||
props: {
|
|
||||||
value: {
|
|
||||||
type: [String, Number],
|
|
||||||
default: null
|
|
||||||
},
|
|
||||||
size: {
|
|
||||||
type: String,
|
|
||||||
default: 'small'
|
|
||||||
}
|
|
||||||
},
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
options: [],
|
|
||||||
loading: false
|
|
||||||
}
|
|
||||||
},
|
|
||||||
computed: {
|
|
||||||
value1: {
|
|
||||||
get() {
|
|
||||||
return this.value
|
|
||||||
},
|
|
||||||
set(v) {
|
|
||||||
this.$emit('input', v)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
created() {
|
|
||||||
this.doSearch();
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
doSearch(search) {
|
|
||||||
listWmsItem({search}, {page: 0, size: 20}).then(res => {
|
|
||||||
const { content, totalElements } = res
|
|
||||||
this.options = content
|
|
||||||
})
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style lang="stylus">
|
|
||||||
|
|
||||||
</style>
|
|
||||||
@ -1,3 +0,0 @@
|
|||||||
export const DICT_TYPES = [
|
|
||||||
'wms_receipt_type', 'wms_shipment_type', 'wms_movement_type'
|
|
||||||
]
|
|
||||||
@ -1,42 +0,0 @@
|
|||||||
import { allWmsItem } from '@/api/wms/item'
|
|
||||||
import { listByTypes } from '@/api/system/dict/data'
|
|
||||||
import { DICT_TYPES } from '@/config/business'
|
|
||||||
export default {
|
|
||||||
state: {
|
|
||||||
items: [],
|
|
||||||
dictTypeMap: {},
|
|
||||||
},
|
|
||||||
mutations: {
|
|
||||||
SET_ITEMS(state, list) {
|
|
||||||
state.items = list
|
|
||||||
},
|
|
||||||
SET_DICT_TYPE_MAP(state, list) {
|
|
||||||
const map = {};
|
|
||||||
list.forEach(it => {
|
|
||||||
const {dictType} = it;
|
|
||||||
let arr = map[dictType];
|
|
||||||
if (!arr) {
|
|
||||||
arr = [];
|
|
||||||
map[dictType] = arr;
|
|
||||||
}
|
|
||||||
arr.push(it);
|
|
||||||
})
|
|
||||||
state.dictTypeMap = map;
|
|
||||||
}
|
|
||||||
},
|
|
||||||
actions: {
|
|
||||||
loadItems({commit}) {
|
|
||||||
return allWmsItem()
|
|
||||||
.then(res => {
|
|
||||||
commit('SET_ITEMS', res);
|
|
||||||
return res
|
|
||||||
})
|
|
||||||
},
|
|
||||||
loadAllDict({ commit }) {
|
|
||||||
listByTypes(DICT_TYPES).then(res => {
|
|
||||||
const { rows } = res
|
|
||||||
commit('SET_DICT_TYPE_MAP', rows.map(it => ({value: it.dictValue, label: it.dictLabel, dictType: it.dictType})))
|
|
||||||
})
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@ -1,98 +0,0 @@
|
|||||||
import { listWmsSupplier } from "@/api/wms/supplier";
|
|
||||||
import { listWmsWarehouse } from "@/api/wms/warehouse";
|
|
||||||
import { listWmsArea } from "@/api/wms/area";
|
|
||||||
import { listWmsRack } from "@/api/wms/rack";
|
|
||||||
import {listWmsCustomer} from "@/api/wms/customer";
|
|
||||||
|
|
||||||
const state = {
|
|
||||||
supplierList: [],
|
|
||||||
customerList: [],
|
|
||||||
customerMap: new Map(),
|
|
||||||
supplierMap: new Map(),
|
|
||||||
warehouseList: [],
|
|
||||||
warehouseMap: new Map(),
|
|
||||||
areaList:[],
|
|
||||||
areaMap:new Map(),
|
|
||||||
rackList:[],
|
|
||||||
rackMap:new Map()
|
|
||||||
}
|
|
||||||
const mutations = {
|
|
||||||
SET_SUPPLIERS(state, list) {
|
|
||||||
state.supplierList = list;
|
|
||||||
state.supplierMap = new Map();
|
|
||||||
list.forEach((supplier) => {
|
|
||||||
state.supplierMap.set(supplier.id, supplier.supplierName)
|
|
||||||
})
|
|
||||||
},
|
|
||||||
SET_CUSTOMERS(state, list) {
|
|
||||||
state.customerList = list;
|
|
||||||
state.customerMap = new Map();
|
|
||||||
list.forEach((customer) => {
|
|
||||||
state.customerMap.set(customer.id, customer.customerName)
|
|
||||||
})
|
|
||||||
},
|
|
||||||
SET_WAREHOUSE(state, list){
|
|
||||||
state.warehouseList = list;
|
|
||||||
state.warehouseMap = new Map();
|
|
||||||
list.forEach((warehouse) => {
|
|
||||||
state.warehouseMap.set(warehouse.id, warehouse.warehouseName)
|
|
||||||
})
|
|
||||||
},
|
|
||||||
SET_AREA(state, list){
|
|
||||||
state.areaList = list;
|
|
||||||
state.areaMap = new Map();
|
|
||||||
list.forEach((area) => {
|
|
||||||
state.areaMap.set(area.id, area.areaName)
|
|
||||||
})
|
|
||||||
},
|
|
||||||
SET_RACK(state, list){
|
|
||||||
state.rackList = list;
|
|
||||||
state.rackMap = new Map();
|
|
||||||
list.forEach((rack) => {
|
|
||||||
state.rackMap.set(rack.id, rack.rackName)
|
|
||||||
})
|
|
||||||
},
|
|
||||||
}
|
|
||||||
const actions = {
|
|
||||||
getSuppliers({ commit }) {
|
|
||||||
return listWmsSupplier({}, { page: 0, size: 1000 })
|
|
||||||
.then(res => {
|
|
||||||
const { content } =res
|
|
||||||
commit('SET_SUPPLIERS', content);
|
|
||||||
})
|
|
||||||
},
|
|
||||||
getCustomer({ commit }) {
|
|
||||||
return listWmsCustomer({}, { page: 0, size: 1000 })
|
|
||||||
.then(res => {
|
|
||||||
const { content } =res
|
|
||||||
commit('SET_CUSTOMERS', content);
|
|
||||||
})
|
|
||||||
},
|
|
||||||
getWarehouseList({ commit }) {
|
|
||||||
return listWmsWarehouse({}, { page: 0, size: 1000 })
|
|
||||||
.then(res => {
|
|
||||||
const { content } =res
|
|
||||||
commit('SET_WAREHOUSE', content);
|
|
||||||
})
|
|
||||||
},
|
|
||||||
getAreaList({ commit }) {
|
|
||||||
return listWmsArea({}, { page: 0, size: 1000 })
|
|
||||||
.then(res => {
|
|
||||||
const { content } =res
|
|
||||||
commit('SET_AREA', content);
|
|
||||||
})
|
|
||||||
},
|
|
||||||
getRackList({ commit }) {
|
|
||||||
return listWmsRack({}, { page: 0, size: 1000 })
|
|
||||||
.then(res => {
|
|
||||||
const { content } =res
|
|
||||||
commit('SET_RACK', content);
|
|
||||||
})
|
|
||||||
},
|
|
||||||
}
|
|
||||||
export default {
|
|
||||||
namespaced: true,
|
|
||||||
state,
|
|
||||||
mutations,
|
|
||||||
actions
|
|
||||||
}
|
|
||||||
@ -1,213 +0,0 @@
|
|||||||
<template lang="pug">
|
|
||||||
.prod-sku-select-wrapper
|
|
||||||
.search
|
|
||||||
el-form(inline label-width="64")
|
|
||||||
el-form-item(label="商品类型")
|
|
||||||
.w200
|
|
||||||
el-select(v-model="query.itemType" clearable)
|
|
||||||
el-option(
|
|
||||||
v-for="dict in dict.type.wms_item_type"
|
|
||||||
:key="dict.value"
|
|
||||||
:label="dict.label"
|
|
||||||
:value="dict.value"
|
|
||||||
)
|
|
||||||
el-form-item(label="快速筛选")
|
|
||||||
el-input.w200(v-model="query.search" placeholder="编号、名称、ID" )
|
|
||||||
el-button(type="primary" @click="clickQuery") 查询
|
|
||||||
.center
|
|
||||||
.left.flex-one
|
|
||||||
.statistic {{total}} 个商品
|
|
||||||
.content
|
|
||||||
.header.flex-center
|
|
||||||
el-checkbox(
|
|
||||||
:value="leftAllChecked === 1"
|
|
||||||
@input="leftAllChecked = $event"
|
|
||||||
:indeterminate="leftAllChecked === 2"
|
|
||||||
:disabled="editableList.length === 0")
|
|
||||||
.flex-one.tc.ml8 商品信息
|
|
||||||
.prods
|
|
||||||
.prod.flex-center(v-for="p in list" :key="p.id")
|
|
||||||
el-checkbox(
|
|
||||||
v-model="p.checked"
|
|
||||||
:disabled="rightListKeySet.has(p.id)"
|
|
||||||
)
|
|
||||||
.flex-one.flex-center(@click="p.checked = !p.checked")
|
|
||||||
.ml8
|
|
||||||
div {{p.itemName}}
|
|
||||||
.mt8
|
|
||||||
el-tag(v-if="p.itemType" size="mini") {{p.itemType}}
|
|
||||||
span.ml8 {{p.itemNo}}
|
|
||||||
el-empty(v-if="list.length === 0" :image-size="64")
|
|
||||||
.tr
|
|
||||||
el-pagination(
|
|
||||||
:total="total",
|
|
||||||
:page-size="pageReq.size"
|
|
||||||
:current.sync="pageReq.page"
|
|
||||||
:pageSizeOpts="[10, 20, 50, 100]"
|
|
||||||
show-sizer
|
|
||||||
show-total
|
|
||||||
@on-change="handleChangePage"
|
|
||||||
@on-page-size-change="handleChangeSize",
|
|
||||||
)
|
|
||||||
.ops
|
|
||||||
div
|
|
||||||
el-button(@click="moveRight") >
|
|
||||||
br
|
|
||||||
el-button.mt8(@click="moveLeft") <
|
|
||||||
.right.flex-one
|
|
||||||
.statistic {{rightList.length}} 个商品已选
|
|
||||||
.content
|
|
||||||
.header.flex-center
|
|
||||||
el-checkbox(
|
|
||||||
:value="rightAllChecked === 1"
|
|
||||||
@input="rightAllChecked = $event"
|
|
||||||
:indeterminate="rightAllChecked === 2"
|
|
||||||
:disabled="rightList.length === 0")
|
|
||||||
.flex-one.tc.ml8 商品信息
|
|
||||||
.prods
|
|
||||||
.prod.flex-center(v-for="p in rightList")
|
|
||||||
el-checkbox(v-model="p.checked")
|
|
||||||
.flex-one.flex-center(@click="p.checked = !p.checked")
|
|
||||||
.ml8
|
|
||||||
div {{p.itemName}}
|
|
||||||
.mt8
|
|
||||||
el-tag(v-if="p.itemType" size="mini") {{p.itemType}}
|
|
||||||
span.ml8 {{p.itemNo}}
|
|
||||||
el-empty(v-if="rightList.length === 0" :image-size="64")
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
import { listWmsItem } from '@/api/wms/item'
|
|
||||||
|
|
||||||
export default {
|
|
||||||
name: "ItemSelect",
|
|
||||||
dicts: ['wms_item_type'],
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
query: {
|
|
||||||
itemType: null,
|
|
||||||
search: null
|
|
||||||
},
|
|
||||||
list: [],
|
|
||||||
total: 0,
|
|
||||||
pageReq: {
|
|
||||||
page: 1,
|
|
||||||
size: 10
|
|
||||||
},
|
|
||||||
rightList: []
|
|
||||||
}
|
|
||||||
},
|
|
||||||
computed: {
|
|
||||||
leftAllChecked: {
|
|
||||||
get() {
|
|
||||||
return this.editableList.length > 0 && this.editableList.every(it => it.checked) ? 1
|
|
||||||
: this.editableList.some(it => it.checked) ? 2 : 0
|
|
||||||
},
|
|
||||||
set(v) {
|
|
||||||
this.editableList.forEach(it => it.checked = v)
|
|
||||||
}
|
|
||||||
},
|
|
||||||
rightAllChecked: {
|
|
||||||
get() {
|
|
||||||
return this.rightList.length > 0 && this.rightList.every(it => it.checked) ? 1
|
|
||||||
: this.rightList.some(it => it.checked) ? 2 : 0
|
|
||||||
},
|
|
||||||
set(v) {
|
|
||||||
this.rightList.forEach(it => it.checked = v)
|
|
||||||
}
|
|
||||||
},
|
|
||||||
editableList() {
|
|
||||||
return this.list.filter(it => !this.rightListKeySet.has(it.id));
|
|
||||||
},
|
|
||||||
leftCheckedList() {
|
|
||||||
return this.list.filter(it => it.checked)
|
|
||||||
},
|
|
||||||
rightListKeySet() {
|
|
||||||
const set = new Set()
|
|
||||||
this.rightList.forEach(it => set.add(it.id))
|
|
||||||
return set
|
|
||||||
}
|
|
||||||
},
|
|
||||||
created() {
|
|
||||||
this.loadAll()
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
loadAll() {
|
|
||||||
const pageReq = {...this.pageReq}
|
|
||||||
pageReq.page -= 1
|
|
||||||
listWmsItem(this.query, pageReq).then(res => {
|
|
||||||
const {content, totalElements} = res
|
|
||||||
content.forEach(it => it.checked = false)
|
|
||||||
this.list = content
|
|
||||||
this.total = totalElements
|
|
||||||
})
|
|
||||||
},
|
|
||||||
clickQuery() {
|
|
||||||
this.pageReq.page = 1;
|
|
||||||
this.loadAll()
|
|
||||||
},
|
|
||||||
handleChangePage(p) {
|
|
||||||
this.pageReq.page = p
|
|
||||||
this.loadAll()
|
|
||||||
},
|
|
||||||
handleChangeSize(s) {
|
|
||||||
this.pageReq = {
|
|
||||||
page: 1,
|
|
||||||
size: s
|
|
||||||
}
|
|
||||||
this.loadAll()
|
|
||||||
},
|
|
||||||
moveRight() {
|
|
||||||
for (let it of this.leftCheckedList) {
|
|
||||||
if (!this.rightListKeySet.has(it.goodsId)) {
|
|
||||||
it.checked = false
|
|
||||||
this.rightList.push({...it, checked: false})
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
moveLeft() {
|
|
||||||
for (let i = this.rightList.length - 1; i >= 0; i--) {
|
|
||||||
if (this.rightList[i].checked) {
|
|
||||||
this.rightList.splice(i, 1);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style lang="stylus">
|
|
||||||
.prod-sku-select-wrapper
|
|
||||||
.center
|
|
||||||
display flex
|
|
||||||
align-items stretch
|
|
||||||
|
|
||||||
.left, .right
|
|
||||||
border 1px solid $gray-2
|
|
||||||
|
|
||||||
> div
|
|
||||||
padding 12px
|
|
||||||
|
|
||||||
.statistic
|
|
||||||
border-bottom 1px solid $gray-2
|
|
||||||
|
|
||||||
.header
|
|
||||||
background-color $gray-1
|
|
||||||
padding 12px
|
|
||||||
|
|
||||||
.prods
|
|
||||||
height 360px
|
|
||||||
overflow-y auto
|
|
||||||
|
|
||||||
> .prod
|
|
||||||
padding 12px
|
|
||||||
> .prod + .prod
|
|
||||||
border-top 1px solid var(--gray-2)
|
|
||||||
|
|
||||||
.ops
|
|
||||||
display flex
|
|
||||||
flex-direction column
|
|
||||||
justify-content center
|
|
||||||
margin 0 16px
|
|
||||||
|
|
||||||
</style>
|
|
||||||
Loading…
Reference in new issue