Skip to content

V
vue-gic-people
Commit ebdcb931 by 无尘
Options

fix: 优化搜索下拉多选数据

parent 0d76fbfb
Showing with 106 additions and 14 deletions
README.md
......@@ -103,3 +103,16 @@ methods: {
```
>公共样式中需要增加的样式
```
.input-search-select .el-select__tags-text {
max-width: 262px;
overflow: hidden;
text-overflow: ellipsis;
display: inline-block;
vertical-align: top;
}
```
dist/vue-gic-people.js
This source diff could not be displayed because it is too large. You can view the blob instead.
dist/vue-gic-people.js.map
This source diff could not be displayed because it is too large. You can view the blob instead.
index.html
......@@ -6,7 +6,6 @@
<title>vue-gic-people</title>
</head>
<body>
<div id="app"></div>
<!-- <script src="/dist/build.js"></script> -->
<script src="/dist/vue-gic-people.js"></script>
......
package.json
......@@ -2,7 +2,7 @@
"name": "@gic-test/vue-gic-people",
"description": "vue-gic-people Plugin",
"author": "fairyly <498745097@qq.com>",
"version": "1.1.42",
"version": "1.1.46",
"license": "MIT",
"private": false,
"main": "dist/vue-gic-people.js",
......
src/lib/public.js 0 → 100644
// 防抖
export function _debounce(fn, delay) {
var delay = delay || 200;
var timer;
console.log(fn)
return function () {
var th = this;
var args = arguments;
if (timer) {
clearTimeout(timer);
}
timer = setTimeout(function () {
timer = null;
fn.apply(th, args);
}, delay);
};
}
// 节流
export function _throttle(fn, interval) {
var last;
var timer;
var interval = interval || 200;
return function () {
var th = this;
var args = arguments;
var now = +new Date();
if (last && now - last < interval) {
clearTimeout(timer);
timer = setTimeout(function () {
last = now;
fn.apply(th, args);
}, interval);
} else {
last = now;
fn.apply(th, args);
}
}
}
src/lib/vue-gic-people.vue
......@@ -119,7 +119,7 @@
</div>
<!-- 搜索后出现下列 最后控件-->
<div class="gic-select-wrap inline-block" v-if="childCell.templateCode == 'com005'">
<div class="gic-select-wrap inline-block input-search-select" v-if="childCell.templateCode == 'com005'">
<el-select
v-model="childCell.levelModel"
multiple
......@@ -144,6 +144,7 @@
<el-date-picker
v-model="childCell.levelModel"
type="daterange"
:editable="false"
range-separator="至"
start-placeholder="开始日期"
end-placeholder="结束日期"
......@@ -174,6 +175,7 @@
<el-date-picker
v-model="childCell.levelModel"
type="daterange"
:editable="false"
range-separator="至"
start-placeholder="开始日期"
end-placeholder="结束日期"
......@@ -232,6 +234,7 @@
<el-date-picker
v-model="childCell.levelModel"
type="daterange"
:editable="false"
range-separator="至"
start-placeholder="开始日期"
end-placeholder="结束日期"
......@@ -307,7 +310,8 @@
// import vueAreaAb from './vue-area-ab'
import localforage from 'localforage'
import localforage from 'localforage';
import { _debounce } from "./public";
export default {
name: "vue-gic-people",
props: {
......@@ -956,12 +960,21 @@
var that = this
console.log("输入值To:",e.target.value,that.conditionsList[that.andIndex].children[that.orIndex])
var value = !Number(e.target.value.replace(/[^\.\d]/g,''))? Number(0): Number(e.target.value.replace(/[^\.\d]/g,''))
console.log(value)
let t1 = that.conditionsList[that.andIndex].children[that.orIndex].children[2].levelModel[0];
let t2 = that.conditionsList[that.andIndex].children[that.orIndex].children[2].levelModel[1]
if ((!Number(t1) && Number(t1)!=0) || (Number(t1) >= Number(t2))) {
that.conditionsList[that.andIndex].children[that.orIndex].children[2].levelModel[0] = Number(t2) - 1 >=0? (Number(Number(t2) - 1)): Number(0)
that.conditionsList[that.andIndex].children[that.orIndex].children[2].levelModel[1] = value
that.conditionsList[that.andIndex].children[that.orIndex].children[2].levelModel[0] = Number(t2) - 1 >=0? (Number(Number(t2) - 1)): !!Number(t1)? Number(t1): Number(0);
var newValue = null;
newValue = !!Number(t1)? (Number(t1)+1) : 1;
that.conditionsList[that.andIndex].children[that.orIndex].children[2].levelModel[1] = value || newValue
if (Number(t1) > Number(t2)&& !Number(t2)) {
that.conditionsList[that.andIndex].children[that.orIndex].children[2].levelModel[1] = Number(t1) +1
}
if (Number(t1) > Number(t2)&& !!Number(t1) && !!Number(t2)) {
that.conditionsList[that.andIndex].children[that.orIndex].children[2].levelModel[0] = Number(t2) -1
}
that.$forceUpdate();
that.conditionsList[that.andIndex].children[that.orIndex].columnValue = that.conditionsList[that.andIndex].children[that.orIndex].children[2].levelModel.join(',')
return
......@@ -1122,27 +1135,37 @@
},100)
},
// 搜索后出现下拉列表
// 搜索
remoteMethod(query) {
remoteMethod: _debounce(function (query) {
var that = this;
console.log("query:",query)
var selectValue = that.conditionsList[that.andIndex].children[that.orIndex].children[that.componentIndex].levelModel
// console.log(selectValue)
var selectLevelOptions = that.conditionsList[that.andIndex].children[that.orIndex].children[that.componentIndex].levelOptions
// console.log(selectValue,selectLevelOptions,selectLevelOptions.length)
if (query !== '') {
var newOptions = []
if (!!selectLevelOptions && !!selectLevelOptions.length) {
selectLevelOptions.forEach(function(ele,index){
// !!selectValue && !!selectValue.length
if (selectValue.indexOf(ele.key)!= -1) {
newOptions.push(ele)
}
})
}
that.conditionsList[that.andIndex].children[that.orIndex].children[that.componentIndex].levelOptions = newOptions
var url = that.conditionsList[that.andIndex].children[that.orIndex].children[that.componentIndex-1].url
// console.log("取到当前组前一个保存的",url)
that.getCurrentData(url,query)
// 获取搜索列表数据
// that.getStoreList(query,selectValue);
}else {
// that.conditionsList[that.andIndex].children[that.orIndex].children[that.componentIndex].levelOptions = [];
}
},
}, 600),
// 获取门店列表
getStoreList(query,threeLevelValue) {
......@@ -1193,7 +1216,7 @@
}
that.axios.post(that.baseUrl+url,qs.stringify(para))
.then((res) => {
// console.log(res,res.data,res.data.errorCode)
console.log(that.conditionsList[that.andIndex].children[that.orIndex].children[that.componentIndex].levelOptions)
var resData = res.data
if (resData.errorCode == 0) {
resData.result.forEach(function(ele,index){
......@@ -1796,6 +1819,7 @@
}
.el-select {
width: 195px;
/*height: 40px;*/
border-radius: 2px;
line-height: 40px;
......@@ -1804,6 +1828,23 @@
cursor: pointer;
color: #888;
}
.input-search-select {
.el-select {
width: 320px;
overflow: hidden;
text-overflow: ellipsis;
/deep/.el-select__tags-text {
max-width: 262px;
overflow: hidden;
text-overflow: ellipsis;
display: inline-block;
vertical-align: top;
}
}
}
}
.el-select .el-input__inner {
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment