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