<template>
|
<div>
|
<a-input-group v-if="kind === 'material'" compact style="width:100%;top:0px">
|
<a-select placeholder="输入条码或名称" :dropdownMatchSelectWidth="false" showSearch :showArrow="false"
|
v-model="names" optionFilterProp="children" :style="searchWidth" notFoundContent="需在商品管理先新增才能使用"
|
@search="handleSearch" @change="handleChange">
|
<div slot="dropdownRender" slot-scope="menu">
|
<v-nodes :vnodes="menu" />
|
<a-divider v-if="materialData.length===20" style="margin: 4px 0;" />
|
<div v-if="materialData.length===20" style="padding: 4px 8px; cursor: pointer;"
|
@mousedown="e => e.preventDefault()">此处最多显示20条，如需更多请点击放大镜查询</div>
|
</div>
|
<a-select-option v-for="item in materialData" :key="item.barCode">
|
{{ item.materialStr }}
|
</a-select-option>
|
</a-select>
|
<a-button icon="search" @click="onSearch" />
|
</a-input-group>
|
<a-input-search v-if="kind === 'batch'||kind === 'sn'||kind === 'snAdd'" v-model="names" placeholder="请点开弹窗" readOnly @search="onSearch"></a-input-search>
|
<j-select-material-modal v-if="kind === 'material'" ref="selectModal" :rows="rows" :multi="multi" :bar-code="value" @ok="selectOK" @initComp="initComp"/>
|
<j-select-batch-modal v-if="kind === 'batch'" ref="selectModal" :rows="rows" :multi="multi" :bar-code="value" @ok="selectOK" @initComp="initComp"/>
|
<j-select-sn-modal v-if="kind === 'sn'" ref="selectModal" :rows="rows" :multi="multi" :bar-code="value" @ok="selectOK" @initComp="initComp"/>
|
<j-select-sn-add-modal v-if="kind === 'snAdd'" ref="selectModal" :rows="rows" :multi="multi" :bar-code="value" @ok="selectOK" @initComp="initComp"/>
|
</div>
|
</template>
|
|
<script>
|
import JSelectMaterialModal from './modal/JSelectMaterialModal'
|
import JSelectBatchModal from './modal/JSelectBatchModal'
|
import JSelectSnModal from './modal/JSelectSnModal'
|
import JSelectSnAddModal from './modal/JSelectSnAddModal'
|
import { getMaterialByParam } from '@/api/api'
|
|
export default {
|
name: 'JSelectList',
|
components: {
|
JSelectMaterialModal, JSelectBatchModal, JSelectSnModal, JSelectSnAddModal,
|
VNodes: {
|
functional: true,
|
render: (h, ctx) => ctx.props.vnodes,
|
}
|
},
|
props: {
|
value: {
|
type: String,
|
required: false
|
},
|
disabled: {
|
type: Boolean,
|
required: false,
|
default: false
|
},
|
rows: {
|
type: String,
|
required: false
|
},
|
kind: {
|
type: String,
|
required: false
|
},
|
multi: {
|
type: Boolean,
|
default: true,
|
required: false
|
}
|
},
|
data() {
|
return {
|
ids: "",
|
names: "",
|
materialData: [],
|
setTimeFlag: null,
|
searchWidth: ""
|
}
|
},
|
mounted() {
|
this.ids = this.value
|
},
|
watch: {
|
value(val) {
|
this.ids = val
|
}
|
},
|
created () {
|
const currentWidth = window.screen.width
|
if(currentWidth<1500) {
|
this.searchWidth = 'width:75%'
|
} else {
|
this.searchWidth = 'width:81%'
|
}
|
},
|
model: {
|
prop: 'value',
|
event: 'change'
|
},
|
methods: {
|
initComp(name) {
|
this.names = name ? name : undefined
|
},
|
onSearch() {
|
this.$refs.selectModal.showModal()
|
},
|
handleSearch(value) {
|
let that = this
|
if(this.setTimeFlag != null){
|
clearTimeout(this.setTimeFlag);
|
}
|
this.setTimeFlag = setTimeout(()=>{
|
getMaterialByParam({q: value}).then((res) => {
|
if (res && res.code === 200) {
|
that.materialData = res.data
|
}
|
})
|
},500)
|
},
|
handleChange(value) {
|
this.$emit("change", value)
|
},
|
selectOK(rows, idstr) {
|
console.log("选中id", idstr)
|
if (!rows) {
|
this.ids = ''
|
} else {
|
this.ids = idstr
|
}
|
this.$emit("change", this.ids)
|
}
|
}
|
}
|
</script>
|
|
<style scoped>
|
|
</style>
|
