提交 d5ea64a2 编写于 作者: KK's avatar KK

编辑器调整

上级 056a58c5
.app-mobile-select-drop-down{
.app-mobile-select-drop-down {
width: 100%;
.cancel-icon {
width: 16px;
......@@ -12,16 +12,16 @@
display: flex;
justify-content: center;
align-items: center;
ion-icon{
ion-icon {
position: absolute;
font-size: 16px;
right: 0;
top: 0;
color:#969696;
z-index:9999;
color: #969696;
z-index: 9999;
}
}
ion-select{
ion-select {
width: 100%;
max-width: 100%;
padding-left: 0;
......@@ -49,5 +49,11 @@
border-left: 5px solid transparent;
color: #969696;
}
.select_text {
height: 40px;
line-height: 40px;
text-align: right;
padding-right: 25px;
color: #969696;
}
}
......@@ -2,7 +2,8 @@
<div class="app-mobile-select-drop-down">
<div class="cancel-icon" v-if="curvalue"><ion-icon name="close-circle-outline" @click="clear"></ion-icon></div>
<div v-if="curvalue== null || curvalue==''" class="ion-select-icon"></div>
<ion-select :value="curvalue" :disabled="disabled " @click="onSearch(null)" @ionChange="change" interface="action-sheet" :cancel-text="$t('app.button.cancel')">
<div class="select_text" style="height: 40px;" @click="openSelect">{{curvalue}}</div>
<ion-select :value="selectValue" :ref="name+'select'" v-show="false" :disabled="disabled " @ionChange="change" interface="action-sheet" :cancel-text="$t('app.button.cancel')">
<ion-select-option v-for="option of items" :key="option.value" :value="option.value">{{option.text}}</ion-select-option>
</ion-select>
</div>
......@@ -32,6 +33,7 @@ import { ViewOpenService } from '../../utils/view-open-service/view-open-service
}
})
export default class AppSelectDropDown extends Vue {
/**
* 视图上下文
*
......@@ -197,7 +199,8 @@ export default class AppSelectDropDown extends Vue {
* @type {string}
* @memberof AppSelectDropDown
*/
public selectValue = this.value;
public selectValue = "";
/**
* 视图打开服务
......@@ -207,6 +210,7 @@ export default class AppSelectDropDown extends Vue {
*/
public openService: ViewOpenService = ViewOpenService.getInstance();
/**
* 获取关联数据项值
*
......@@ -215,14 +219,11 @@ export default class AppSelectDropDown extends Vue {
*/
get curvalue() {
if (this.value && this.items.length > 0) { // 判断是否拿到表单传来的值、列表项是否加载完成
let isIncluded = this.items.some((item:any)=>{return item.name === this.value});
if (isIncluded) {
if (this.valueitem && this.items.every((item:any)=>{return item[this.deKeyField] != this.value })) {
return this.value;
}
} else if (this.valueitem && this.data) { // 是否有配置值项
return this.data[this.valueitem];
}
return "";
return this.value;
}
/**
......@@ -339,12 +340,14 @@ export default class AppSelectDropDown extends Vue {
* @param item
*/
public onACSelect(item: any): void {
this.selectValue = item[this.deMajorField];
if (this.valueitem) {
this.$emit('formitemvaluechange', { name: this.valueitem, value: item[this.deKeyField] });
let tempvalue = item[this.deKeyField] ? item[this.deKeyField] : item.srfkey;
this.$emit('formitemvaluechange', { name: this.valueitem, value: tempvalue });
}
if (this.name) {
this.$emit('formitemvaluechange', { name: this.name, value: item[this.deKeyField] });
let temptext = item[this.deMajorField] ? item[this.deMajorField] : item.srfmajortext;
this.$emit('formitemvaluechange', { name: this.name, value: temptext });
}
}
......@@ -355,7 +358,7 @@ export default class AppSelectDropDown extends Vue {
* @memberof AppSelectDropDown
*/
public onSelect(val: string) {
let index = this.items.findIndex((item) => Object.is(item[this.deKeyField], val));
let index = this.items.findIndex((item) => {return item[this.deKeyField] == val} );
if (index >= 0) {
this.onACSelect(this.items[index]);
}
......@@ -748,7 +751,6 @@ export default class AppSelectDropDown extends Vue {
*/
public change(value: any) {
this.curvalue = value.detail.value;
this.$emit("change", value.detail.value);
}
/**
......@@ -759,6 +761,20 @@ export default class AppSelectDropDown extends Vue {
this.curvalue = "";
this.$emit('change', '')
}
/**
* open选择器
*
* @type {*}
* @memberof AppSelectDropDown
*/
public openSelect(){
this.onSearch(null);
let select :any= this.$refs[this.name+'select'];
if(select){
select.open();
}
}
}
</script>
<style lang="less">
......
Markdown 格式
0% or
您添加了 0 到此讨论。请谨慎行事。
先完成此消息的编辑!
想要评论请 注册