ai.touchui-vue 1.30.2 → 1.30.4

package/packages/segment/src/segment.vue

@@ -1,618 +1,618 @@
-<template>
-	<span :id="id" v-dis.opacity="disabled" v-tip="changed ? t('to.common.originalValue', getLabel(valueStore[0])) : ''" class="to-segment" :class="setClass" :style="setStyle">
-		<span v-if="verifiable && (rule || ToFormItem || required)" v-show="false" :rule="rule" :req="validateRequired" :desc="validateDesc" class="to-validate" :value="selected"></span>
-		<span class="to-segmentContent" :style="setContentStyle">
-			<span v-for="(item, index) in options" :key="index" v-tip="item.tip ? item.tip : ''" v-dis.opacity="item.disabled" class="to-segmentWrapper" :style="setWrapperStyle">
-				<span :class="setItemClass(item)" :style="setItemStyle" @click="change(item, index)">
-					<slot v-if="type === 'color'">
-						<div class="to-segment-color-box" :style="{ 'background-color': item[iValueText]}"></div>
-					</slot>
-					<slot v-else :item="item" :index="index">
-						<to-checkbox v-if="type === 'check'" :box-fillet="multiple ? 'normal' : 'round'" :padding="0" :value="setItemClass(item) === 'to-segmentOn'"></to-checkbox>
-						<to-icon v-if="item[iIconText]" :value="item[iIconText]"></to-icon>{{ item[iLabelText] }}
-					</slot>
-				</span>
-			</span>
-		</span>
-		<span v-if="errorTip" v-color="'danger'" class="to-box-tip">
-			<template v-if="errorType === 'rule'">
-				选择有误
-				<to-icon v-tip.danger="errorTip" value="help" color="danger" mode="toast" fillet="round"></to-icon>
-			</template>
-			<template v-else>
-				不能为空
-			</template>
-		</span>
-	</span>
-</template>
-<script>
-import Locale from 'ai.touchui-vue/src/mixins/locale'
-import Tip from 'ai.touchui-vue/src/mixins/tip'
-import { t } from 'ai.touchui-vue/src/locale'
-import ajax from 'ai.touchui-vue/src/utils/ajax'
-export default {
-	name: 'ToSegment',
-	mixins: [Locale, Tip],
-	model: {
-		event: 'change'
-	},
-	inject: {
-		ToForm: {
-			default: ''
-		},
-		ToFormItem: {
-			default: ''
-		}
-	},
-	props: {
-		// 表单校验
-		desc: {
-			type: String,
-			default: ''
-		},
-		id: {
-			type: String,
-			default: ''
-		},
-		rule: {
-			type: String,
-			default: ''
-		},
-		required: Boolean,
-		data: {
-			type: [Array, String],
-			default: () => t('to.common.data')
-		},
-		// sku / radio
-		type: {
-			type: String,
-			default: ''
-		},
-		value: {
-			type: [Number, String, Boolean, Array],
-			default: ''
-		},
-		mode: {
-			type: String,
-			default: ''
-		},
-		col: {
-			type: [Number, String],
-			default: ''
-		},
-		itemPadding: {
-			type: [Number, String],
-			default: ''
-		},
-		space: {
-			type: [Number, String],
-			default: 0
-		},
-		fillet: {
-			type: String,
-			default() {
-				return this.$TouchUI.segment.fillet || this.$TouchUI.global.fillet || 'normal'
-			}
-		},
-		color: {
-			type: String,
-			default: 'primary'
-		},
-		width: {
-			type: [Number, String],
-			default: ''
-		},
-		labelText: {
-			type: String,
-			default: 'label'
-		},
-		valueText: {
-			type: String,
-			default: 'value'
-		},
-		iconText: {
-			type: String,
-			default: 'icon'
-		},
-		readonly: Boolean,
-		clearable: Boolean,
-		multiple: Boolean,
-		// 异步数据参数
-		httpRequest: {
-			type: Function,
-			default: ajax
-		},
-		api: {
-			type: String,
-			default: ''
-		},
-		apiParam: {
-			type: Object,
-			default() {
-				return null
-			}
-		},
-		apiLabel: {
-			type: String,
-			default: ''
-		},
-		apiHeaders: {
-			type: Object,
-			default: () => {}
-		},
-		resPath: {
-			type: String,
-			default: ''
-		},
-		errorPath: {
-			type: String,
-			default: ''
-		},
-		successCode: {
-			type: String,
-			default: '0'
-		},
-		comparable: Boolean,
-		verifiable: {
-			type: Boolean,
-			default: true
-		},
-		beforeChange: {
-			type: Function,
-			default: null
-		},
-		valueType: {
-			type: String,
-			default: ''
-		}
-	},
-	data() {
-		return {
-			errorTip: '',
-			errorType: 'rule',
-			valueStore: [],
-			options: [],
-			selected: '',
-			label: '',
-			disabled: this.readonly,
-			iApiHeaders: {},
-			changeBySelf: false
-		}
-	},
-	computed: {
-		setClass() {
-			let arr = ['to-form-readonly']
-			if (this.$slots.default) {
-				arr.push('to-segment-slot')
-			}
-			if (this.fillet) {
-				arr.push(`to-segment-fillet-${this.fillet}`)
-			}
-			if (this.type) {
-				arr.push(`to-segment-type-${this.type}`)
-			}
-			if (this.disabled) {
-				arr.push('to-segment-readonly')
-			}
-			if (Number(this.space) > 0) {
-				arr.push('to-segment-space')
-			}
-			if (this.col) {
-				arr.push(`to-segment-col-${this.col}`)
-			}
-			if (this.errorTip) {
-				arr.push('to-segment-tip-show')
-			}
-			if (this.mode) {
-				arr.push(`to-segment-mode-${this.mode}`)
-			}
-			if (this.color && this.color !== 'primary') {
-				if (this.color !== 'radam') {
-					arr.push(`to-segment-color-${this.color}`);
-				} else {
-					let colors = this.$TouchUI.colors
-					let number = Math.round(Math.random() * 6)
-					arr.push(`to-segment-color-${ colors[number]}`);
-				}
-			}
-			if (this.changed) {
-				arr.push('to-segment-changed')
-			}
-			if (this.itemPadding || this.itemPadding === 0) {
-				arr.push('to-segment-slot')
-			}
-			if ((this.ToForm && this.ToForm.comparable) || this.comparable) {
-				arr.push('to-compare')
-			}
-			return arr
-		},
-		setStyle() {
-			var obj = {}
-			if (this.width) {
-				if (!isNaN(this.width)) {
-					obj.width = this.width + 'em';
-				} else if (this.width === 'full') {
-					obj.width = '100%';
-				} else {
-					obj.width = this.width;
-				}
-			}
-			return obj
-		},
-		setContentStyle() {
-			let obj = {}
-			if (this.space && Number(this.space) > 0) {
-				obj.marginTop = `-${this.space}em`
-				obj.marginLeft = `-${this.space}em`
-			}
-			return obj
-		},
-		setWrapperStyle() {
-			let obj = {}
-			if (this.space && Number(this.space) > 0) {
-				obj.paddingTop = `${this.space}em`
-				obj.paddingLeft = `${this.space}em`
-			}
-			return obj
-		},
-		setItemStyle() {
-			let obj = {}
-			if (this.itemPadding || this.itemPadding === 0) {
-				obj.padding = `${this.itemPadding}em`
-			}
-			return obj
-		},
-		validateRequired() {
-			if (this.required) {
-				return 'true'
-			} else if (this.ToFormItem && this.ToFormItem.required) {
-				return 'true'
-			} else {
-				return 'false'
-			}
-		},
-		validateDesc() {
-			if (this.desc) {
-				return this.desc
-			} else if (this.ToFormItem && this.ToFormItem.label) {
-				return this.ToFormItem.label
-			} else {
-				return ''
-			}
-		},
-		changed() {
-			if ((this.comparable || this.ToForm.comparable) && this.valueStore.length > 0 && this.value !== this.valueStore[0]) {
-				return true
-			} else {
-				return false
-			}
-		}
-	},
-	watch: {
-		readonly(val) {
-			this.disabled = val
-		},
-		value(val) {
-			// 如果是数组输入,转换为字符串
-			if (Array.isArray(val)) {
-				this.selected = val.join(',')
-			} else {
-				this.selected = val
-			}
-			this.setLabel()
-			setTimeout(() => {
-				if (!this.changeBySelf) {
-					// 根据 valueType 决定输出格式
-					if (this.valueType === 'array') {
-						this.$emit('change', this.selected ? this.selected.split(',') : [], this.getIndex(val))
-					} else {
-						this.$emit('change', this.selected, this.getIndex(val))
-					}
-				}
-			}, 20)
-		},
-		data: {
-			handler() {
-				this.setOptions()
-			},
-			deep: true
-		},
-		api() {
-			this.setOptions()
-		}
-	},
-	created() {
-		this.selected = this.value
-		this.iLabelText = this.labelText
-		this.iValueText = this.valueText
-		this.iIconText = this.iconText
-		this.iResPath = this.resPath
-		this.iSuccessCode = this.successCode
-		this.iApiParam = this.apiParam
-		this.iApiLabel = this.apiLabel
-		this.iApiHeaders = this.apiHeaders
-		this.iErrorPath = this.errorPath
-		this.setOptions()
-	},
-	methods: {
-		setOptions() {
-			// 同步选项
-			if (this.data) {
-				if (typeof this.data === 'string') {
-					// 字符串模式传值（如：:data="选项1, 选项2, 选项3"）
-					let arr = []
-					for (let i = 0; i < this.data.split(',').length; i++) {
-						const el = this.data.split(',')[i]
-						let obj = {}
-						obj.label = obj.value = el
-						arr.push(obj)
-					}
-					this.options = arr
-				} else {
-					// 对象数组模式传值
-					this.options = [...this.data]
-				}
-				this.setLabel()
-			}
-
-			// 异步选项
-			if (this.api) {
-				// 通过配置自动设置 labelText 与 valueText
-				if (this.$TouchUI.staticDataApiConfig.labelText && this.labelText === 'label') {
-					this.iLabelText = this.$TouchUI.staticDataApiConfig.labelText
-				}
-				if (this.$TouchUI.staticDataApiConfig.valueText && this.valueText === 'value') {
-					this.iValueText = this.$TouchUI.staticDataApiConfig.valueText
-				}
-				if (this.$TouchUI.staticDataApiConfig.resPath && !this.resPath) {
-					this.iResPath = this.$TouchUI.staticDataApiConfig.resPath
-				}
-				if (this.$TouchUI.staticDataApiConfig.apiParam && !this.apiParam) {
-					this.iApiParam = this.$TouchUI.staticDataApiConfig.apiParam
-				}
-				if (this.$TouchUI.staticDataApiConfig.apiHeaders && !this.apiHeaders) {
-					this.iApiHeaders = this.$TouchUI.staticDataApiConfig.apiHeaders
-				}
-				if (this.$TouchUI.staticDataApiConfig.apiLabel && !this.apiLabel) {
-					this.iApiLabel = this.$TouchUI.staticDataApiConfig.apiLabel
-				}
-				if (this.$TouchUI.staticDataApiConfig.errorPath && !this.errorPath) {
-					this.iErrorPath = this.$TouchUI.staticDataApiConfig.errorPath
-				}
-				if (this.$TouchUI.staticDataApiConfig.resPath && !this.successCode) {
-					this.iSuccessCode = this.$TouchUI.staticDataApiConfig.successCode
-				}
-
-				// 从缓存中取数据，如果没有则异步获取
-				if (sessionStorage.getItem('static.' + this.api)) {
-					this.options = JSON.parse(sessionStorage.getItem('static.' + this.api))
-					this.setLabel()
-					this.$emit('option-loaded')
-				} else {
-					let action = ''
-					if (this.iApiLabel && this.api) {
-						Object.assign(this.iApiParam, { [this.iApiLabel]: this.api })
-					}
-					if (this.api.indexOf('http') > -1) {
-						action = this.api
-					} else {
-						if (this.$TouchUI.staticDataApiConfig.action && this.$TouchUI.staticDataApiConfig.action.indexOf('=') > -1 && this.$TouchUI.staticDataApiConfig.action.indexOf('?') > -1) {
-							// 兼容 GET 格式的 POST 请求
-							action = this.$TouchUI.staticDataApiConfig.action + this.api
-						} else {
-							action = this.$TouchUI.staticDataApiConfig.action
-						}
-					}
-					const options = {
-						data: this.iApiParam,
-						action,
-						headers: Object.assign({}, this.iApiHeaders),
-						onSuccess: res => {
-							if (typeof res === 'string') {
-								res = JSON.parse(res)
-							}
-
-							// 直接返回一个 select 所需要的 data 对象时，不需要任何解析
-							// 如：[{name:'张三', id:0},{name:'李四', id:1}]
-							if (Array.isArray(res)) {
-								this.options = res
-								sessionStorage.setItem('static.' + this.api, JSON.stringify(res))
-								this.setLabel()
-								this.$emit('option-loaded')
-							} else if (res.code === this.iSuccessCode) {
-								// 按照 json 格式返回，需要根据配置路径进行解析
-								// 如：{ code:'0', data:[{name:'张三', id:0},{name:'李四', id:1}]}
-								let data = []
-								if (this.iResPath) {
-									let resPath = this.iResPath.split('/')
-									resPath.forEach(el => {
-										data = res[el]
-									})
-								}
-								this.options = data
-								sessionStorage.setItem('static.' + this.api, JSON.stringify(data))
-								this.setLabel()
-								this.$emit('option-loaded')
-							} else {
-								let data = JSON.parse(res)
-								let errorPath = this.iErrorPath.split('/')
-								errorPath.forEach(el => {
-									data = data[el]
-								})
-								this.t('to.segment.tip.error.res', `segment api(${this.api})`, `：${data}`)
-							}
-						},
-						onError: res => {
-							this.$tip.danger(this.t('to.segment.tip.error.api', `segment api(${this.api}) `))
-						}
-					}
-					const req = this.httpRequest(options)
-					if (req && req.then) {
-						req.then(options.onSuccess, options.onError)
-					}
-				}
-			}
-		},
-		setLabel() {
-			let that = this
-			if (!this.multiple) {
-				let obj = (function() {
-					for (let i = 0; i < that.options.length; i++) {
-						const el = that.options[i]
-						if (el[that.iValueText] === that.selected) {
-							return el
-						}
-					}
-				})()
-				if (obj && obj[this.iLabelText]) {
-					this.label = obj[this.iLabelText]
-				} else {
-					this.label = ''
-				}
-			} else {
-				let obj = (()=>{
-					if (this.selected === '') {
-						return []
-					} else {
-						return String(this.selected).split(',')
-					}
-				})()
-				this.label = (()=>{
-					if (this.selected === '') {
-						return ''
-					} else {
-						let arr = []
-						this.options.map(option => {
-							if (obj.includes(String(option[this.iValueText]))) {
-								arr.push(option[this.iLabelText])
-							}
-						})
-						return arr.join(',')
-					}
-				})();
-			}
-		},
-		getLabel(val) {
-			let obj = this.options.find(item => item[this.iValueText] === val)
-			if (obj && obj[this.iLabelText]) {
-				return obj[this.iLabelText]
-			}
-		},
-		getIndex() {
-			return this.options.findIndex(option => option[this.iValueText] === this.selected)
-		},
-		change(item, index) {
-			if (this.beforeChange) {
-				const fn = this.beforeChange(item, index)
-				console.log('★')
-				console.log(fn)
-				// 异步
-				if (fn && fn.then) {
-					fn.then(() => {
-						this.changeAction(item, index)
-					})
-				} else {
-					// 是同步方法，则返回为 true 执行
-					if (fn) {
-						this.changeAction(item, index)
-					}
-				}
-			} else {
-				this.changeAction(item, index)
-			}
-		},
-		changeAction(item, index) {
-			if (item.disabled) return
-			if (!this.disabled) {
-				this.errorTip = ''
-				if (this.multiple) {
-					let iValue = (()=>{
-						if (this.selected === '' || (Array.isArray(this.selected) && this.selected.length === 0)) {
-							return []
-						} else {
-							return String(this.selected).split(',')
-						}
-					})();
-					if (iValue.includes(String(item[this.iValueText]))) {
-						iValue = iValue.filter(el => {
-							return el !== String(item[this.iValueText])
-						})
-					} else {
-						iValue.push(String(item[this.iValueText]))
-					}
-					this.selected = iValue.join(',')
-					this.label = (()=>{
-						if (this.selected === '') {
-							return ''
-						} else {
-							let arr = []
-							this.options.map(option => {
-								if (iValue.includes(String(option[this.iValueText]))) {
-									arr.push(option[this.iLabelText])
-								}
-							})
-							return arr.join(',')
-						}
-					})();
-					this.changeBySelf = true
-					// 根据 valueType 决定输出格式
-					if (this.valueType === 'array') {
-						this.$emit('change', this.selected ? this.selected.split(',') : [], index)
-					} else {
-						this.$emit('change', this.selected, index)
-					}
-					setTimeout(() => {
-						this.changeBySelf = false
-					}, 50);
-				} else {
-					if (item[this.iValueText] === this.selected && this.clearable) {
-						this.selected = ''
-						this.label = ''
-						this.changeBySelf = true
-						this.$emit('change', '', index)
-						setTimeout(() => {
-							this.changeBySelf = false
-						}, 50);
-					} else {
-						this.selected = item[this.iValueText]
-						this.label = item[this.iLabelText]
-						this.changeBySelf = true
-						this.$emit('change', item[this.iValueText], index)
-						setTimeout(() => {
-							this.changeBySelf = false
-						}, 50);
-					}
-				}
-			}
-		},
-		setItemClass(item) {
-			if (this.multiple) {
-				if (String(this.selected).split(',').includes(String(item[this.iValueText]))) {
-					return 'to-segmentOn'
-				} else {
-					return ''
-				}
-			} else {
-				if (this.selected === item[this.iValueText]) {
-					return 'to-segmentOn'
-				} else {
-					return ''
-				}
-			}
-		},
-
-		// 记录历史值，以便对比或者取值
-		compare() {
-			this.valueStore.unshift(this.value)
-		},
-		setDisabled(f) {
-			this.disabled = f
-		},
-		// 撤销
-		restore() {
-			this.data = this.valueStore[0]
-			this.valueStore.splice(0, 1)
-		}
-	}
-}
-</script>
+<template>
+	<span :id="id" v-dis.opacity="disabled" v-tip="changed ? t('to.common.originalValue', getLabel(valueStore[0])) : ''" class="to-segment" :class="setClass" :style="setStyle">
+		<span v-if="verifiable && (rule || ToFormItem || required)" v-show="false" :rule="rule" :req="validateRequired" :desc="validateDesc" class="to-validate" :value="selected"></span>
+		<span class="to-segmentContent" :style="setContentStyle">
+			<span v-for="(item, index) in options" :key="index" v-tip="item.tip ? item.tip : ''" v-dis.opacity="item.disabled" class="to-segmentWrapper" :style="setWrapperStyle">
+				<span :class="setItemClass(item)" :style="setItemStyle" @click="change(item, index)">
+					<slot v-if="type === 'color'">
+						<div class="to-segment-color-box" :style="{ 'background-color': item[iValueText]}"></div>
+					</slot>
+					<slot v-else :item="item" :index="index">
+						<to-checkbox v-if="type === 'check'" :box-fillet="multiple ? 'normal' : 'round'" :padding="0" :value="setItemClass(item) === 'to-segmentOn'"></to-checkbox>
+						<to-icon v-if="item[iIconText]" :value="item[iIconText]"></to-icon>{{ item[iLabelText] }}
+					</slot>
+				</span>
+			</span>
+		</span>
+		<span v-if="errorTip" v-color="'danger'" class="to-box-tip">
+			<template v-if="errorType === 'rule'">
+				选择有误
+				<to-icon v-tip.danger="errorTip" value="help" color="danger" mode="toast" fillet="round"></to-icon>
+			</template>
+			<template v-else>
+				不能为空
+			</template>
+		</span>
+	</span>
+</template>
+<script>
+import Locale from 'ai.touchui-vue/src/mixins/locale'
+import Tip from 'ai.touchui-vue/src/mixins/tip'
+import { t } from 'ai.touchui-vue/src/locale'
+import ajax from 'ai.touchui-vue/src/utils/ajax'
+export default {
+	name: 'ToSegment',
+	mixins: [Locale, Tip],
+	model: {
+		event: 'change'
+	},
+	inject: {
+		ToForm: {
+			default: ''
+		},
+		ToFormItem: {
+			default: ''
+		}
+	},
+	props: {
+		// 表单校验
+		desc: {
+			type: String,
+			default: ''
+		},
+		id: {
+			type: String,
+			default: ''
+		},
+		rule: {
+			type: String,
+			default: ''
+		},
+		required: Boolean,
+		data: {
+			type: [Array, String],
+			default: () => t('to.common.data')
+		},
+		// sku / radio
+		type: {
+			type: String,
+			default: ''
+		},
+		value: {
+			type: [Number, String, Boolean, Array],
+			default: ''
+		},
+		mode: {
+			type: String,
+			default: ''
+		},
+		col: {
+			type: [Number, String],
+			default: ''
+		},
+		itemPadding: {
+			type: [Number, String],
+			default: ''
+		},
+		space: {
+			type: [Number, String],
+			default: 0
+		},
+		fillet: {
+			type: String,
+			default() {
+				return this.$TouchUI.segment.fillet || this.$TouchUI.global.fillet || 'normal'
+			}
+		},
+		color: {
+			type: String,
+			default: 'primary'
+		},
+		width: {
+			type: [Number, String],
+			default: ''
+		},
+		labelText: {
+			type: String,
+			default: 'label'
+		},
+		valueText: {
+			type: String,
+			default: 'value'
+		},
+		iconText: {
+			type: String,
+			default: 'icon'
+		},
+		readonly: Boolean,
+		clearable: Boolean,
+		multiple: Boolean,
+		// 异步数据参数
+		httpRequest: {
+			type: Function,
+			default: ajax
+		},
+		api: {
+			type: String,
+			default: ''
+		},
+		apiParam: {
+			type: Object,
+			default() {
+				return null
+			}
+		},
+		apiLabel: {
+			type: String,
+			default: ''
+		},
+		apiHeaders: {
+			type: Object,
+			default: () => {}
+		},
+		resPath: {
+			type: String,
+			default: ''
+		},
+		errorPath: {
+			type: String,
+			default: ''
+		},
+		successCode: {
+			type: String,
+			default: '0'
+		},
+		comparable: Boolean,
+		verifiable: {
+			type: Boolean,
+			default: true
+		},
+		beforeChange: {
+			type: Function,
+			default: null
+		},
+		valueType: {
+			type: String,
+			default: ''
+		}
+	},
+	data() {
+		return {
+			errorTip: '',
+			errorType: 'rule',
+			valueStore: [],
+			options: [],
+			selected: '',
+			label: '',
+			disabled: this.readonly,
+			iApiHeaders: {},
+			changeBySelf: false
+		}
+	},
+	computed: {
+		setClass() {
+			let arr = ['to-form-readonly']
+			if (this.$slots.default) {
+				arr.push('to-segment-slot')
+			}
+			if (this.fillet) {
+				arr.push(`to-segment-fillet-${this.fillet}`)
+			}
+			if (this.type) {
+				arr.push(`to-segment-type-${this.type}`)
+			}
+			if (this.disabled) {
+				arr.push('to-segment-readonly')
+			}
+			if (Number(this.space) > 0) {
+				arr.push('to-segment-space')
+			}
+			if (this.col) {
+				arr.push(`to-segment-col-${this.col}`)
+			}
+			if (this.errorTip) {
+				arr.push('to-segment-tip-show')
+			}
+			if (this.mode) {
+				arr.push(`to-segment-mode-${this.mode}`)
+			}
+			if (this.color && this.color !== 'primary') {
+				if (this.color !== 'radam') {
+					arr.push(`to-segment-color-${this.color}`);
+				} else {
+					let colors = this.$TouchUI.colors
+					let number = Math.round(Math.random() * 6)
+					arr.push(`to-segment-color-${ colors[number]}`);
+				}
+			}
+			if (this.changed) {
+				arr.push('to-segment-changed')
+			}
+			if (this.itemPadding || this.itemPadding === 0) {
+				arr.push('to-segment-slot')
+			}
+			if ((this.ToForm && this.ToForm.comparable) || this.comparable) {
+				arr.push('to-compare')
+			}
+			return arr
+		},
+		setStyle() {
+			var obj = {}
+			if (this.width) {
+				if (!isNaN(this.width)) {
+					obj.width = this.width + 'em';
+				} else if (this.width === 'full') {
+					obj.width = '100%';
+				} else {
+					obj.width = this.width;
+				}
+			}
+			return obj
+		},
+		setContentStyle() {
+			let obj = {}
+			if (this.space && Number(this.space) > 0) {
+				obj.marginTop = `-${this.space}em`
+				obj.marginLeft = `-${this.space}em`
+			}
+			return obj
+		},
+		setWrapperStyle() {
+			let obj = {}
+			if (this.space && Number(this.space) > 0) {
+				obj.paddingTop = `${this.space}em`
+				obj.paddingLeft = `${this.space}em`
+			}
+			return obj
+		},
+		setItemStyle() {
+			let obj = {}
+			if (this.itemPadding || this.itemPadding === 0) {
+				obj.padding = `${this.itemPadding}em`
+			}
+			return obj
+		},
+		validateRequired() {
+			if (this.required) {
+				return 'true'
+			} else if (this.ToFormItem && this.ToFormItem.required) {
+				return 'true'
+			} else {
+				return 'false'
+			}
+		},
+		validateDesc() {
+			if (this.desc) {
+				return this.desc
+			} else if (this.ToFormItem && this.ToFormItem.label) {
+				return this.ToFormItem.label
+			} else {
+				return ''
+			}
+		},
+		changed() {
+			if ((this.comparable || this.ToForm.comparable) && this.valueStore.length > 0 && this.value !== this.valueStore[0]) {
+				return true
+			} else {
+				return false
+			}
+		}
+	},
+	watch: {
+		readonly(val) {
+			this.disabled = val
+		},
+		value(val) {
+			// 如果是数组输入,转换为字符串
+			if (Array.isArray(val)) {
+				this.selected = val.join(',')
+			} else {
+				this.selected = val
+			}
+			this.setLabel()
+			setTimeout(() => {
+				if (!this.changeBySelf) {
+					// 根据 valueType 决定输出格式
+					if (this.valueType === 'array') {
+						this.$emit('change', this.selected ? this.selected.split(',') : [], this.getIndex(val))
+					} else {
+						this.$emit('change', this.selected, this.getIndex(val))
+					}
+				}
+			}, 20)
+		},
+		data: {
+			handler() {
+				this.setOptions()
+			},
+			deep: true
+		},
+		api() {
+			this.setOptions()
+		}
+	},
+	created() {
+		this.selected = this.value
+		this.iLabelText = this.labelText
+		this.iValueText = this.valueText
+		this.iIconText = this.iconText
+		this.iResPath = this.resPath
+		this.iSuccessCode = this.successCode
+		this.iApiParam = this.apiParam
+		this.iApiLabel = this.apiLabel
+		this.iApiHeaders = this.apiHeaders
+		this.iErrorPath = this.errorPath
+		this.setOptions()
+	},
+	methods: {
+		setOptions() {
+			// 同步选项
+			if (this.data) {
+				if (typeof this.data === 'string') {
+					// 字符串模式传值（如：:data="选项1, 选项2, 选项3"）
+					let arr = []
+					for (let i = 0; i < this.data.split(',').length; i++) {
+						const el = this.data.split(',')[i]
+						let obj = {}
+						obj.label = obj.value = el
+						arr.push(obj)
+					}
+					this.options = arr
+				} else {
+					// 对象数组模式传值
+					this.options = [...this.data]
+				}
+				this.setLabel()
+			}
+
+			// 异步选项
+			if (this.api) {
+				// 通过配置自动设置 labelText 与 valueText
+				if (this.$TouchUI.staticDataApiConfig.labelText && this.labelText === 'label') {
+					this.iLabelText = this.$TouchUI.staticDataApiConfig.labelText
+				}
+				if (this.$TouchUI.staticDataApiConfig.valueText && this.valueText === 'value') {
+					this.iValueText = this.$TouchUI.staticDataApiConfig.valueText
+				}
+				if (this.$TouchUI.staticDataApiConfig.resPath && !this.resPath) {
+					this.iResPath = this.$TouchUI.staticDataApiConfig.resPath
+				}
+				if (this.$TouchUI.staticDataApiConfig.apiParam && !this.apiParam) {
+					this.iApiParam = this.$TouchUI.staticDataApiConfig.apiParam
+				}
+				if (this.$TouchUI.staticDataApiConfig.apiHeaders && !this.apiHeaders) {
+					this.iApiHeaders = this.$TouchUI.staticDataApiConfig.apiHeaders
+				}
+				if (this.$TouchUI.staticDataApiConfig.apiLabel && !this.apiLabel) {
+					this.iApiLabel = this.$TouchUI.staticDataApiConfig.apiLabel
+				}
+				if (this.$TouchUI.staticDataApiConfig.errorPath && !this.errorPath) {
+					this.iErrorPath = this.$TouchUI.staticDataApiConfig.errorPath
+				}
+				if (this.$TouchUI.staticDataApiConfig.resPath && !this.successCode) {
+					this.iSuccessCode = this.$TouchUI.staticDataApiConfig.successCode
+				}
+
+				// 从缓存中取数据，如果没有则异步获取
+				if (sessionStorage.getItem('static.' + this.api)) {
+					this.options = JSON.parse(sessionStorage.getItem('static.' + this.api))
+					this.setLabel()
+					this.$emit('option-loaded')
+				} else {
+					let action = ''
+					if (this.iApiLabel && this.api) {
+						Object.assign(this.iApiParam, { [this.iApiLabel]: this.api })
+					}
+					if (this.api.indexOf('http') > -1) {
+						action = this.api
+					} else {
+						if (this.$TouchUI.staticDataApiConfig.action && this.$TouchUI.staticDataApiConfig.action.indexOf('=') > -1 && this.$TouchUI.staticDataApiConfig.action.indexOf('?') > -1) {
+							// 兼容 GET 格式的 POST 请求
+							action = this.$TouchUI.staticDataApiConfig.action + this.api
+						} else {
+							action = this.$TouchUI.staticDataApiConfig.action
+						}
+					}
+					const options = {
+						data: this.iApiParam,
+						action,
+						headers: Object.assign({}, this.iApiHeaders),
+						onSuccess: res => {
+							if (typeof res === 'string') {
+								res = JSON.parse(res)
+							}
+
+							// 直接返回一个 select 所需要的 data 对象时，不需要任何解析
+							// 如：[{name:'张三', id:0},{name:'李四', id:1}]
+							if (Array.isArray(res)) {
+								this.options = res
+								sessionStorage.setItem('static.' + this.api, JSON.stringify(res))
+								this.setLabel()
+								this.$emit('option-loaded')
+							} else if (res.code === this.iSuccessCode) {
+								// 按照 json 格式返回，需要根据配置路径进行解析
+								// 如：{ code:'0', data:[{name:'张三', id:0},{name:'李四', id:1}]}
+								let data = []
+								if (this.iResPath) {
+									let resPath = this.iResPath.split('/')
+									resPath.forEach(el => {
+										data = res[el]
+									})
+								}
+								this.options = data
+								sessionStorage.setItem('static.' + this.api, JSON.stringify(data))
+								this.setLabel()
+								this.$emit('option-loaded')
+							} else {
+								let data = JSON.parse(res)
+								let errorPath = this.iErrorPath.split('/')
+								errorPath.forEach(el => {
+									data = data[el]
+								})
+								this.t('to.segment.tip.error.res', `segment api(${this.api})`, `：${data}`)
+							}
+						},
+						onError: res => {
+							this.$tip.danger(this.t('to.segment.tip.error.api', `segment api(${this.api}) `))
+						}
+					}
+					const req = this.httpRequest(options)
+					if (req && req.then) {
+						req.then(options.onSuccess, options.onError)
+					}
+				}
+			}
+		},
+		setLabel() {
+			let that = this
+			if (!this.multiple) {
+				let obj = (function() {
+					for (let i = 0; i < that.options.length; i++) {
+						const el = that.options[i]
+						if (el[that.iValueText] === that.selected) {
+							return el
+						}
+					}
+				})()
+				if (obj && obj[this.iLabelText]) {
+					this.label = obj[this.iLabelText]
+				} else {
+					this.label = ''
+				}
+			} else {
+				let obj = (()=>{
+					if (this.selected === '') {
+						return []
+					} else {
+						return String(this.selected).split(',')
+					}
+				})()
+				this.label = (()=>{
+					if (this.selected === '') {
+						return ''
+					} else {
+						let arr = []
+						this.options.map(option => {
+							if (obj.includes(String(option[this.iValueText]))) {
+								arr.push(option[this.iLabelText])
+							}
+						})
+						return arr.join(',')
+					}
+				})();
+			}
+		},
+		getLabel(val) {
+			let obj = this.options.find(item => item[this.iValueText] === val)
+			if (obj && obj[this.iLabelText]) {
+				return obj[this.iLabelText]
+			}
+		},
+		getIndex() {
+			return this.options.findIndex(option => option[this.iValueText] === this.selected)
+		},
+		change(item, index) {
+			if (this.beforeChange) {
+				const fn = this.beforeChange(item, index)
+				console.log('★')
+				console.log(fn)
+				// 异步
+				if (fn && fn.then) {
+					fn.then(() => {
+						this.changeAction(item, index)
+					})
+				} else {
+					// 是同步方法，则返回为 true 执行
+					if (fn) {
+						this.changeAction(item, index)
+					}
+				}
+			} else {
+				this.changeAction(item, index)
+			}
+		},
+		changeAction(item, index) {
+			if (item.disabled) return
+			if (!this.disabled) {
+				this.errorTip = ''
+				if (this.multiple) {
+					let iValue = (()=>{
+						if (this.selected === '' || (Array.isArray(this.selected) && this.selected.length === 0)) {
+							return []
+						} else {
+							return String(this.selected).split(',')
+						}
+					})();
+					if (iValue.includes(String(item[this.iValueText]))) {
+						iValue = iValue.filter(el => {
+							return el !== String(item[this.iValueText])
+						})
+					} else {
+						iValue.push(String(item[this.iValueText]))
+					}
+					this.selected = iValue.join(',')
+					this.label = (()=>{
+						if (this.selected === '') {
+							return ''
+						} else {
+							let arr = []
+							this.options.map(option => {
+								if (iValue.includes(String(option[this.iValueText]))) {
+									arr.push(option[this.iLabelText])
+								}
+							})
+							return arr.join(',')
+						}
+					})();
+					this.changeBySelf = true
+					// 根据 valueType 决定输出格式
+					if (this.valueType === 'array') {
+						this.$emit('change', this.selected ? this.selected.split(',') : [], index)
+					} else {
+						this.$emit('change', this.selected, index)
+					}
+					setTimeout(() => {
+						this.changeBySelf = false
+					}, 50);
+				} else {
+					if (item[this.iValueText] === this.selected && this.clearable) {
+						this.selected = ''
+						this.label = ''
+						this.changeBySelf = true
+						this.$emit('change', '', index)
+						setTimeout(() => {
+							this.changeBySelf = false
+						}, 50);
+					} else {
+						this.selected = item[this.iValueText]
+						this.label = item[this.iLabelText]
+						this.changeBySelf = true
+						this.$emit('change', item[this.iValueText], index)
+						setTimeout(() => {
+							this.changeBySelf = false
+						}, 50);
+					}
+				}
+			}
+		},
+		setItemClass(item) {
+			if (this.multiple) {
+				if (String(this.selected).split(',').includes(String(item[this.iValueText]))) {
+					return 'to-segmentOn'
+				} else {
+					return ''
+				}
+			} else {
+				if (this.selected === item[this.iValueText]) {
+					return 'to-segmentOn'
+				} else {
+					return ''
+				}
+			}
+		},
+
+		// 记录历史值，以便对比或者取值
+		compare() {
+			this.valueStore.unshift(this.value)
+		},
+		setDisabled(f) {
+			this.disabled = f
+		},
+		// 撤销
+		restore() {
+			this.data = this.valueStore[0]
+			this.valueStore.splice(0, 1)
+		}
+	}
+}
+</script>