/**
|
* CSelect
|
* @author Tevin
|
*/
|
|
<template>
|
<view
|
class="c-select"
|
:class="readOnly ? 'read-only':''"
|
>
|
<!-- 下拉选择模式 -->
|
<view
|
v-if="!selectByPage"
|
class="c-select-slot-mode"
|
>
|
<picker
|
class="c-select-input"
|
mode="selector"
|
:range="options"
|
:value="current"
|
range-key="name"
|
@change="evt=>handleChange(evt.detail)"
|
>
|
<AtInput
|
ref="input"
|
:name="itemRes.name"
|
:title="itemRes.label"
|
:required="itemRes.required"
|
:disabled="itemRes.disabled"
|
:error="itemRes.error"
|
:placeholder="placeholder"
|
:value="selected"
|
>
|
<view
|
v-show="!readOnly"
|
class="at-icon at-icon-chevron-right"
|
/>
|
</AtInput>
|
</picker>
|
<view class="c-select-slot">
|
<slot />
|
</view>
|
</view>
|
<!-- 跳转页面模式 -->
|
<view
|
v-else-if="selectByPage.length > 5"
|
@tap="evt => onGoToSelectorPage()"
|
>
|
<AtInput
|
:name="itemRes.name"
|
:title="itemRes.label"
|
:required="itemRes.required"
|
:disabled="itemRes.disabled"
|
:error="itemRes.error"
|
:placeholder="placeholder"
|
:value="choose.name"
|
>
|
<view
|
v-show="!readOnly"
|
class="at-icon at-icon-chevron-right"
|
/>
|
</AtInput>
|
</view>
|
</view>
|
</template>
|
|
<script>
|
import Taro from '@tarojs/taro';
|
import { AtInput } from 'taro-ui-vue';
|
import { $pagePoster } from '@components/common/PagePoster';
|
import './cSelect.scss';
|
|
export default {
|
name: 'CSelect',
|
components: {
|
AtInput,
|
},
|
props: {
|
// 表单数据资源（表单组件内部机制专用）
|
itemRes: Object,
|
// 选择菜单选项（浮窗模式）
|
options: Array,
|
// 占位提示
|
placeholder: String,
|
// 开启选择菜单跳转选择页面模式，并指定功能页面
|
selectByPage: String,
|
// 页面模式下，选择完成后的回调
|
onSelectFromPage: Function,
|
// 只读模式
|
readOnly: {
|
type: Boolean,
|
default: false,
|
},
|
},
|
data() {
|
return {
|
choose: {
|
name: '',
|
value: null,
|
},
|
};
|
},
|
computed: {
|
optionKey() {
|
return typeof (this.options[0] || {}).value === 'undefined' ? 'id' : 'value';
|
},
|
current() {
|
const curVal = this.itemRes.formData[this.itemRes.name];
|
for (let i = 0, item; (item = this.options[i]); i++) {
|
if (curVal === item[this.optionKey]) {
|
return i;
|
}
|
}
|
return -1;
|
},
|
selected() {
|
const curVal = this.itemRes.formData[this.itemRes.name];
|
for (let i = 0, item; (item = this.options[i]); i++) {
|
if (curVal === item[this.optionKey]) {
|
return item.name;
|
}
|
}
|
return '';
|
},
|
},
|
methods: {
|
handleChange(evt) {
|
if (typeof this.optionKey === 'undefined') {
|
this.itemRes.onChange();
|
} else {
|
const item = this.options[evt.value];
|
this.itemRes.onChange(item[this.optionKey]);
|
}
|
},
|
onGoToSelectorPage() {
|
let url = this.selectByPage;
|
if (this.selectByPage.indexOf('?') > 0) {
|
url += '&mode=CSelect';
|
} else {
|
url += '?mode=CSelect';
|
}
|
if (this._eventor) {
|
// 销毁上次事件收发器
|
this._eventor.destroy();
|
}
|
this._eventor = $pagePoster.createEventor();
|
this._eventor.on('@linked', () => {
|
this._eventor.emit('lastValue', this.choose.value);
|
});
|
this._eventor.on('selected', data => {
|
this.choose.name = data.name;
|
this.choose.value = data.value;
|
this.itemRes.onChange(data.value);
|
this.onSelectFromPage && this.onSelectFromPage(data.value);
|
});
|
Taro.navigateTo({ url: url + '&eventorId=' + this._eventor.id });
|
},
|
},
|
};
|
</script>
|
