New file |
| | |
| | | <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"> |
| | | <el-col :span="8"> |
| | | <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> |
| | | </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"> |
| | | <el-col :span="8"> |
| | | <div class="grid-content bg-purple" :title="user[obj.name]"> |
| | | {{ user[obj.name] || "--" }} |
| | | </div> |
| | | </el-col> |
| | | <el-col :span="6"> |
| | | <div class="grid-content bg-purple" :title="user.internalReference"> |
| | | <span class="name">{{ user.internalReference || "--" }}</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="4"> |
| | | <div class="grid-content bg-purple" :title="user.unit"> |
| | | {{ user.unit || "--" }} |
| | | </div> |
| | | </el-col> |
| | | </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 } 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" |
| | | } |
| | | } |
| | | }, |
| | | // 更新搜索列表 |
| | | 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) { |
| | | // 其他 |
| | | } else { |
| | | // 产品 |
| | | 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: 630px; |
| | | .el-select-dropdown__wrap { |
| | | min-width: 509px; |
| | | 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> |