<template>
|
<el-select
|
v-model="selectValue"
|
ref="search-select"
|
popper-class="user-simple-search-input-popper"
|
:popper-append-to-body="true"
|
:disabled="disabled"
|
:placeholder="placeholder"
|
style="width: 100%"
|
class="user-simple-search-input"
|
@visible-change="changeSelectStatus"
|
:clearable="clearable"
|
filterable
|
size="mini"
|
@clear="selectClear"
|
>
|
<el-option :label="selectLabel" :value="selectValue">
|
<div class="container" @click="endSelect">
|
<div class="search">
|
<el-input
|
placeholder="搜索产品名称"
|
v-model.trim="keyword"
|
maxlength="20"
|
@keyup.enter.native="updateSearchList(true)"
|
>
|
<i slot="suffix" class="el-input__icon el-icon-search" @click="updateSearchList(true)"></i>
|
</el-input>
|
</div>
|
<div v-if="checkedNum > 1">
|
<div class="selected-text">
|
已选({{ selectedUser.length }})：
|
<span class="user-text" v-for="(user, index) in selectedUser" :key="index">
|
{{ user[obj.name] }}
|
<span class="iconfont ico-delete-user" @click="deleteUser(user.id)"></span>
|
{{ selectedUser.length > index + 1 ? "," : "" }}
|
</span>
|
</div>
|
<p class="fs12-tip" v-show="selectedUser.length == checkedNum">提示：最多选择{{ checkedNum }}人！</p>
|
</div>
|
<!-- <div class="bar">
|
<span class="desc">请选择产品（{{ listData.length }}）</span>
|
</div> -->
|
<div class="list" v-loading="loading" element-loading-text="拼命加载中">
|
<ul class="infinite-list" @scroll="loadList">
|
<div class="background_color_eee">
|
<el-row :gutter="0">
|
<template v-if="request==2">
|
<el-col :span="12">
|
<div class="grid-content bg-purple">
|
<span class="name">人员名称</span>
|
</div>
|
</el-col>
|
<el-col :span="12">
|
<div class="grid-content bg-purple">人员ID</div>
|
</el-col>
|
|
<!-- <el-col :span="5">
|
<div class="grid-content bg-purple">在库数量</div>
|
</el-col> -->
|
</template>
|
<template v-else>
|
<el-col :span="13">
|
<div class="grid-content bg-purple">
|
<span class="name">产品名称</span>
|
</div>
|
</el-col>
|
<el-col :span="8">
|
<div class="grid-content bg-purple">产品编码</div>
|
</el-col>
|
|
<!-- <el-col :span="5">
|
<div class="grid-content bg-purple">在库数量</div>
|
</el-col> -->
|
<el-col :span="3">
|
<div class="grid-content bg-purple">单位</div>
|
</el-col>
|
</template>
|
</el-row>
|
</div>
|
<li class="empty" v-if="listData.length === 0">暂无数据</li>
|
<template v-else>
|
<li
|
v-for="(user, index) in listData"
|
:key="index"
|
@click="selectUser(user)"
|
:class="selectValue == user.id ? 'highlight-color' : ''"
|
>
|
<el-row :gutter="0">
|
<template v-if="request==2">
|
<el-col :span="12">
|
<div class="grid-content bg-purple" :title="user[obj.name]">
|
{{ user[obj.name] || "--" }}
|
</div>
|
</el-col>
|
<el-col :span="12">
|
<div class="grid-content bg-purple" :title="user.id">
|
<span class="name">{{ user.id || "--" }}</span>
|
</div>
|
</el-col>
|
<!-- <el-col :span="6">
|
<div class="grid-content bg-purple" :title="user.amount">
|
{{ user.amount || "--" }}
|
</div>
|
</el-col> -->
|
</template>
|
<template v-else>
|
<el-col :span="13">
|
<div class="grid-content bg-purple" :title="user[obj.name]">
|
{{ user[obj.name] || "--" }}
|
</div>
|
</el-col>
|
<el-col :span="8">
|
<div class="grid-content bg-purple" :title="user.id">
|
<span class="name">{{ user.id || "--" }}</span>
|
</div>
|
</el-col>
|
<!-- <el-col :span="6">
|
<div class="grid-content bg-purple" :title="user.amount">
|
{{ user.amount || "--" }}
|
</div>
|
</el-col> -->
|
<el-col :span="3">
|
<div class="grid-content bg-purple" :title="user.unit">
|
{{ user.unit || "--" }}
|
</div>
|
</el-col>
|
</template>
|
</el-row>
|
</li>
|
<li class="loading">{{ loading ? "加载中" : "已经到底" }}</li>
|
</template>
|
</ul>
|
</div>
|
</div>
|
</el-option>
|
<!-- <DataSet ref="dataSet" moduleName="物料管理"></DataSet> -->
|
</el-select>
|
</template>
|
|
<script>
|
import { getProductList,getPersonnelList } from "@/api/product/product"
|
// import DataSet from "@/views/ShopFloorControl/facilty/components/DataSet";
|
export default {
|
name: "UserSimpleSearchInput",
|
components: {
|
// DataSet,
|
},
|
props: {
|
placeholder: {
|
type: [String],
|
default: "请选择"
|
},
|
disabled: {
|
type: [Boolean],
|
default: false
|
},
|
// 回显值code
|
echoName: {
|
type: [String],
|
default: ""
|
},
|
// 回显名称name
|
echoValue: {
|
type: [String],
|
default: ""
|
},
|
// 可选数量
|
checkedNum: {
|
type: [String, Number],
|
default: 1
|
},
|
//可否清空
|
clearable: {
|
type: [Boolean],
|
default: false
|
},
|
// 请求接口的参数
|
// types: {
|
// type: [Array],
|
// default: () => ["半成品", "成品"]
|
// },
|
request: {
|
type: [String, Number],
|
defalut: ""
|
},
|
size: {
|
type: [String],
|
defalut: "medium"
|
},
|
|
},
|
data() {
|
return {
|
// e-select组件model绑定变量，占位使用
|
selectValue: this.echoValue ? this.echoValue : this.echoName ? this.echoName : "",
|
selectLabel: "",
|
// 搜索框搜索词
|
keyword: "",
|
// 查询页
|
page: 1,
|
// 每页展示数量
|
pageSize: 10,
|
// 数据总量
|
count: 0,
|
// 搜索用户结果数组
|
listData: [],
|
// 是否结束选择
|
isEndSelect: false,
|
selectedUser: [],
|
loading: true,
|
num: 0,
|
obj: {
|
name: "name",
|
id: "id"
|
}
|
}
|
},
|
computed: {},
|
watch: {
|
echoName(val) {
|
console.log(val)
|
this.selectValue = this.echoValue ? this.echoValue : this.echoName ? this.echoName : ""
|
this.checkMoreInit()
|
},
|
request(val) {
|
this.getName(val)
|
}
|
},
|
beforeMount() {
|
this.checkMoreInit()
|
this.getName(this.request)
|
this.num = 0
|
},
|
methods: {
|
getName(val) {
|
if (val == 1) {
|
// 其他搜索配置这里
|
this.obj = {
|
name: "gaugeName",
|
id: "id"
|
}
|
}else if (val == 2) {
|
// 其他搜索配置这里
|
this.obj = {
|
name: "name",
|
id: "id"
|
}
|
}
|
},
|
// 更新搜索列表
|
async updateSearchList(needInit = false, param = {}) {
|
let listParams
|
// 初始化用户信息列表入参
|
if (needInit) {
|
this.page = 1
|
this.count = 0
|
this.listData = []
|
}
|
console.log(this.keyword)
|
listParams = {
|
keyWord: this.keyword,
|
page: this.page,
|
pageSize: this.pageSize,
|
...param
|
}
|
this.loading = true
|
if (this.request) {
|
// 其他
|
// 人员
|
if (this.request == 2) {
|
//人员 request==1
|
listParams = {
|
condition: this.keyword,
|
page: this.page,
|
pageSize: this.pageSize,
|
...param,
|
};
|
const res = await getPersonnelList(listParams);
|
if (res && res.code == "200" && res.data) {
|
this.loading = false;
|
this.page = res.page + 1;
|
this.count = res.total;
|
if (res.data && Array.isArray(res.data)) {
|
let arr = JSON.parse(JSON.stringify(res.data));
|
this.listData = this.listData.concat(arr);
|
}
|
this.num += 1;
|
}
|
}
|
} else {
|
// 产品
|
await getProductList(listParams).then((res) => {
|
if (res && res.code === 200 && res.data) {
|
this.loading = false
|
this.page = this.page + 1
|
this.count = res.total
|
if (res.data && Array.isArray(res.data)) {
|
let arr = JSON.parse(JSON.stringify(res.data))
|
this.listData = this.listData.concat(arr)
|
}
|
// if (this.num == 0 && this.listData.length == 0) {
|
// this.$refs.dataSet.materialVisible = true
|
// }
|
this.num += 1
|
}
|
})
|
}
|
|
setTimeout(() => {
|
this.loading = false
|
}, 10000)
|
},
|
// 动态加载列表
|
loadList(event) {
|
const { clientHeight, scrollTop, scrollHeight } = event.currentTarget
|
// 当滚动top距离大于一屏的距离，加载下一页数据
|
if (scrollTop > scrollHeight - clientHeight * 2) {
|
// 当loading动画未结束时、或者列表数据条数大于接口返回总条数时不再请求数据
|
if (!this.loading && this.listData.length <= this.count) {
|
this.updateSearchList()
|
}
|
}
|
},
|
// 选择用户
|
selectUser(user) {
|
if (this.checkedNum > 1) {
|
if (this.selectedUser.length < this.checkedNum) {
|
if (this.selectValue.indexOf(user.id) == -1) {
|
this.selectedUser.push(user)
|
this.selectValue = this.selectedUser
|
.map((item) => {
|
return item.id
|
})
|
.join(",")
|
this.selectLabel = this.selectedUser
|
.map((item) => {
|
return item[this.obj.name]
|
})
|
.join(",")
|
}
|
}
|
this.$emit("select-user", this.selectValue, this.selectLabel, this.selectedUser)
|
} else {
|
// 变更选择开关
|
this.isEndSelect = false
|
// 赋值el-select组件值
|
this.selectValue = user.id
|
this.selectLabel = user[this.obj.name]
|
// 告知父组件所选用户数据
|
this.selectedUser = user
|
this.$emit("select-user", user)
|
}
|
},
|
deleteUser(id) {
|
for (let i = 0; i < this.selectedUser.length; i++) {
|
if (this.selectedUser[i].id == id) {
|
this.selectedUser.splice(i, 1)
|
}
|
}
|
this.selectValue = this.selectedUser
|
.map((item) => {
|
return item.id
|
})
|
.join(",")
|
this.selectLabel = this.selectedUser
|
.map((item) => {
|
return item[this.obj.name]
|
})
|
.join(",")
|
this.$emit("select-user", this.selectValue, this.selectLabel, this.selectedUser)
|
},
|
// 多选时候
|
checkMoreInit() {
|
if (this.checkedNum > 1 && this.echoName) {
|
this.selectedUser = []
|
this.selectLabel = this.echoName
|
let arr = this.echoName.split(",")
|
let arr2 = this.echoValue.split(",")
|
for (let i = 0; i < arr.length; i++) {
|
let item = { id: arr2[i] }
|
item[this.obj.name] = arr[i]
|
this.selectedUser.push(item)
|
}
|
} else {
|
if (this.echoName) {
|
this.selectedUser = []
|
this.selectLabel = this.echoName ? this.echoName : ""
|
let item = { id: this.echoValue }
|
item[this.obj.name] = this.echoName
|
this.selectedUser.push(item)
|
this.selectValue = this.echoValue ? this.echoValue : this.echoName ? this.echoName : ""
|
} else {
|
this.selectedUser = []
|
this.selectLabel = ""
|
this.selectValue = ""
|
}
|
}
|
},
|
// 结束选择、关闭弹窗
|
endSelect(event) {
|
this.isEndSelect && event.stopPropagation()
|
},
|
// 变更选择状态
|
changeSelectStatus(status, value) {
|
this.isEndSelect = status
|
// 当status为true时，dialog打开，初始化page
|
if (status) {
|
this.keyword = ""
|
if (value != "clear") {
|
this.updateSearchList(true)
|
}
|
}
|
},
|
selectClear() {
|
if (this.checkedNum > 1) {
|
this.selectValue = []
|
this.selectLabel = []
|
this.selectedUser = []
|
this.$emit("select-user", this.selectValue)
|
} else {
|
this.isEndSelect = true
|
// 赋值el-select组件值
|
this.selectValue = ""
|
this.selectLabel = ""
|
// 告知父组件所选用户数据
|
this.selectedUser = ""
|
this.$emit("select-user", this.selectedUser)
|
}
|
this.changeSelectStatus(true, "clear")
|
}
|
}
|
}
|
</script>
|
|
<style lang="scss">
|
.user-simple-search-input-popper {
|
max-width: 500px;
|
.el-select-dropdown__wrap {
|
min-width: 409px;
|
width: 100%;
|
min-height: 370px;
|
|
.el-select-dropdown__list {
|
width: 100%;
|
height: 350px;
|
padding: 0;
|
|
& > .el-select-dropdown__item {
|
width: 100%;
|
height: 350px;
|
background-color: rgba(255, 255, 255, 1);
|
padding: 0;
|
|
& > .container {
|
width: 96%;
|
height: 100%;
|
padding: 2%;
|
|
.search {
|
margin-bottom: 5px;
|
|
& > .el-input {
|
& > input {
|
width: 100%;
|
height: 40px;
|
background: rgba(255, 255, 255, 1);
|
border-radius: 4px;
|
font-size: 14px;
|
|
font-weight: 400;
|
color: rgba(175, 179, 190, 1);
|
}
|
|
& > .el-input__suffix {
|
& > .el-input__suffix-inner {
|
font-size: 19px;
|
}
|
|
& > .el-icon-circle-close {
|
display: none;
|
}
|
|
& > i.el-input__icon.el-input__validateIcon.el-icon-circle-check {
|
display: none;
|
}
|
}
|
}
|
}
|
|
.bar {
|
width: 100%;
|
height: 40px;
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
|
& > .desc {
|
font-size: 14px;
|
|
font-weight: 400;
|
color: rgba(102, 102, 102, 1);
|
}
|
}
|
|
.list {
|
width: 100%;
|
height: calc(100% - 40px);
|
background: rgba(250, 250, 252, 1);
|
border: 1px solid rgba(250, 250, 252, 1);
|
|
& > ul {
|
width: 100%;
|
overflow-y: auto;
|
overflow-x: hidden;
|
height: 100%;
|
div {
|
height: 40px;
|
font-size: 14px;
|
line-height: 40px;
|
font-weight: 600;
|
color: rgba(51, 51, 51, 1);
|
padding: 0 4px;
|
// background:#eee;
|
}
|
.highlight-color {
|
background: #eee;
|
}
|
}
|
|
& > ul > li {
|
width: 100%;
|
height: 40px;
|
font-size: 14px;
|
line-height: 40px;
|
font-weight: 400;
|
color: rgba(51, 51, 51, 1);
|
padding: 0 4px;
|
display: inline-block;
|
float: left;
|
&:hover {
|
background: rgba(255, 255, 255, 1);
|
}
|
|
&.empty {
|
width: 100%;
|
height: calc(100% - 80px);
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
|
&:hover {
|
background-color: transparent;
|
}
|
}
|
|
&.loading {
|
width: 100%;
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
}
|
|
& > .el-row > .el-col {
|
& > .grid-content {
|
line-height: 48px;
|
padding: 0 7px;
|
text-overflow: ellipsis;
|
overflow: hidden;
|
white-space: nowrap;
|
}
|
|
&:nth-of-type(1) > .grid-content {
|
display: flex;
|
align-items: center;
|
justify-content: flex-start;
|
|
& > span.name {
|
width: calc(100% - 26px - 10px);
|
margin-left: 10px;
|
text-overflow: ellipsis;
|
overflow: hidden;
|
white-space: nowrap;
|
}
|
}
|
}
|
}
|
}
|
.user-text {
|
display: inline-block;
|
line-height: 24px;
|
}
|
.ico-delete-user {
|
color: #aaa;
|
font-weight: normal;
|
font-size: 16px;
|
display: none;
|
line-height: 24px;
|
padding: 0 4px 0 2px;
|
vertical-align: middle;
|
margin-top: -2px;
|
}
|
.user-text:hover .ico-delete-user {
|
display: inline-block;
|
}
|
.fs12-tip {
|
font-size: 12px;
|
font-weight: normal;
|
line-height: 16px;
|
}
|
.selected-text {
|
white-space: normal;
|
line-height: 24px;
|
}
|
}
|
}
|
}
|
}
|
}
|
</style>
|
