ai.touchui-vue 1.31.3 → 1.32.0

package/packages/cascader/src/cascader.vue

@@ -1,814 +1,818 @@
-<template>
-	<span ref="link" v-tip="changed ? t('to.common.originalValue', getLabelPath(valueStore[0])) : ''" :class="setClass" :tabindex="tabindex" :style="setStyle" class="to-select" @focus="focus" @blur="blur" @keyup.enter="toggleLayer" @keyup.esc="closeLayer" @mousedown="layerMousedown">
-		<span v-if="verifiable && validateRequired" v-show="false" class="to-validate" :req="validateRequired" :desc="validateDesc" :value="value ? 'true' : ''"></span>
-		<span v-if="$slots.prefix" class="to-selectPrefix"><slot name="prefix"></slot></span>
-		<span class="to-selectContent" :class="setContentClass" @click="openLayer">
-
-			<!-- 前缀文本/图标 -->
-			<to-icon v-if="icon" v-bind="iconProps" :value="icon" :mode="iconProps && iconProps.mode ? iconProps.mode : 'none'" class="to-selectIcon"></to-icon>
-			<span v-if="prefix" class="to-selectPrefixLabel">{{ prefix }}</span>
-
-			<!-- 内容 -->
-			<span v-if="multiple && selected.length > 0" class="to-selectTag">
-				<template v-if="selected.length > 0">
-					<template v-for="(item, index) in selected">
-						<to-tag :key="index" color="fg" mode="plain" :deletable="!disabled" @delete="removeCheck(item.value); setSelected()">{{ item.labelPath }}</to-tag>
-					</template>
-				</template>
-			</span>
-			<span v-else class="to-selectValue">{{ label }}</span>
-			<span class="to-selectArrow"></span>
-
-			<!-- 后缀文本 -->
-			<span v-if="suffix" class="to-selectSuffixLabel">{{ suffix }}</span>
-
-		</span>
-		<span v-if="$slots.suffix" class="to-selectSuffix"><slot name="suffix"></slot></span>
-		<span v-if="$slots.default" class="to-selectSuffix"><slot></slot></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>
-
-		<!-- 弹出模式 -->
-		<to-popup v-if="iOptionDisplay === 'popup'" ref="popup" @mousedown="layerMousedown">
-			<to-popup-group v-for="(level, levelIndex) in levels" :key="levelIndex">
-				<to-popup-item :tag="level.tag">
-					<to-grid type="v" height="full">
-						<to-grid-item side>
-							<to-header color="bg" mode="fill" level="0" :title="level.title" @back="$refs.popup.back()">
-								<to-button v-if="data.length > 0 && level.tag === 'level0' && clearable" icon="close" mode="none" color="primary" fillet="normal" @click="clear">{{ t('to.common.clear') }}</to-button>
-							</to-header>
-						</to-grid-item>
-						<to-grid-item>
-							<to-scroll color="bg" padding="0.5">
-								<to-grid v-if="data.length > 0" :col="optionCol">
-									<to-grid-item v-for="(item, index) in level.data" :key="index">
-										<to-card link padding="0" :space="multiple ? 0:1" @click="forward(item, levelIndex)">
-											<to-card-item v-if="multiple"><to-checkbox v-model="item.checked" @click="checked => { return check(checked, item)}"></to-checkbox></to-card-item>
-											<to-card-item main>
-												<to-padding :value="multiple ? 0:1">
-													<to-ellipsis>{{ item.label }}</to-ellipsis>
-												</to-padding>
-											</to-card-item>
-											<to-card-item v-if="!item.isLeaf" more><to-space type="inline"></to-space></to-card-item>
-											<to-card-item v-if="valueLevel == 'any' && !multiple" link>
-												<to-icon value="ok" mode="plain" link fillet="round" color="primary" @click.stop="select(item)"></to-icon>
-												<to-space type="inline"></to-space>
-											</to-card-item>
-										</to-card>
-									</to-grid-item>
-								</to-grid>
-								<to-msg v-else position="full" :title="t('to.common.noData')" :content="t('to.common.noDataDesc')" show></to-msg>
-							</to-scroll>
-						</to-grid-item>
-						<to-grid-item v-if="multiple && $refs.popup && levelIndex === $refs.popup.currentPopupGroupIdx" side>
-							<to-box padding="0">
-								<to-submit width="full" :space="0" class="to-cascaderSubmit">
-									<to-button v-size="'l'" mode="line" color="primary" @click="$refs.popup.close()">{{ t('to.common.cancel') }}</to-button>
-									<to-button v-size="'l'" color="primary" @click="submit">{{ t('to.common.confirm') }}</to-button>
-								</to-submit>
-							</to-box>
-						</to-grid-item>
-					</to-grid>
-				</to-popup-item>
-			</to-popup-group>
-		</to-popup>
-
-		<!-- 悬浮下拉模式 -->
-		<to-float v-else ref="layer" :width="optionWidth" :lazy="lazy" :align="optionAlign" @mousedown="layerMousedown">
-			<to-padding v-if="data.length === 0" v-color="'info'" :value="1.5">
-				{{ t('to.common.noData') }}
-			</to-padding>
-			<to-scroll v-else height="full">
-				<to-tab ref="tab" v-model="curLevel" :height="tHeight" type="sup" @change="tabChange">
-					<template v-if="clearable" slot="fn">
-						<to-button icon="close" mode="none" fillet="normal" color="primary" @click="clear"></to-button>
-					</template>
-					<to-tab-item v-for="(level, levelIndex) in levels" :key="levelIndex" :label="level.title" :value="level.tag">
-						<to-grid :col="optionCol" padding="0.5" padding-position="u">
-							<to-grid-item v-for="(item, index) in level.data" :key="index">
-								<to-card link :padding="0" :space="multiple ? 0:1" @click="forward(item, levelIndex)">
-									<to-card-item v-if="multiple"><to-checkbox v-model="item.checked" @click="checked => { return check(checked, item)}"></to-checkbox></to-card-item>
-									<to-card-item main>
-										<to-padding :value="multiple ? 0:1">
-											<to-ellipsis>{{ item.label }}</to-ellipsis>
-										</to-padding>
-									</to-card-item>
-									<to-card-item v-if="valueLevel == 'any' && !multiple" link>
-										<to-icon value="ok" mode="plain" link fillet="round" color="primary" @click.stop="select(item, levelIndex)"></to-icon>
-										<to-space type="inline"></to-space>
-									</to-card-item>
-								</to-card>
-							</to-grid-item>
-						</to-grid>
-					</to-tab-item>
-				</to-tab>
-			</to-scroll>
-		</to-float>
-
-	</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';
-export default {
-	name: 'ToCascader',
-	componentName: 'ToCascader',
-	mixins: [Locale, Tip],
-	model: {
-		event: 'change'
-	},
-	inject: {
-		ToForm: {
-			default: ''
-		},
-		ToFormItem: {
-			default: ''
-		}
-	},
-	props: {
-		lazy: {
-			type: Boolean,
-			default() {
-				if (this.$TouchUI && this.$TouchUI.cascader && this.$TouchUI.cascader.lazy === false) {
-					return false
-				} else {
-					return true
-				}
-			}
-		},
-		// 表单校验
-		desc: {
-			type: String,
-			default: ''
-		},
-		required: Boolean,
-		id: {
-			type: String,
-			default: ''
-		},
-		// 插件---------
-		prefix: {
-			type: String,
-			default: ''
-		},
-		suffix: {
-			type: String,
-			default: ''
-		},
-		icon: {
-			type: String,
-			default: ''
-		},
-		iconProps: {
-			type: Object,
-			default: ()=>{}
-		},
-		// 数据设置---------
-		value: {
-			type: [String, Number, Boolean],
-			default: ''
-		},
-		valueText: {
-			type: String,
-			default: 'value'
-		},
-		labelText: {
-			type: String,
-			default: 'label'
-		},
-		childrenText: {
-			type: String,
-			default: 'children'
-		},
-		data: {
-			type: Array,
-			default() {
-				return []
-			}
-		},
-		placeholder: {
-			type: String,
-			default: () => t('to.common.placeholder.select')
-		},
-		placeholderColor: {
-			type: String,
-			default: ''
-		},
-		// 外观设置---------
-		color: {
-			type: String,
-			default: ''
-		},
-		verifiable: {
-			type: Boolean,
-			default: true
-		},
-		fillet: {
-			type: String,
-			default() {
-				return this.$TouchUI.cascader.fillet || this.$TouchUI.global.fillet || 'normal'
-			}
-		},
-		filletPosition: {
-			type: String,
-			default: ''
-		},
-		mode: {
-			type: String,
-			default: ''
-		},
-		width: {
-			type: [Number, String],
-			default: ''
-		},
-		// 选项设置---------
-		optionDisplay: {
-			type: String,
-			default: ''
-		},
-		optionAlign: {
-			type: String,
-			default: 'left'
-		},
-		optionWidth: {
-			type: [Number, String],
-			default: ''
-		},
-		optionCol: {
-			type: [Number, String],
-			default: 1
-		},
-		multiple: Boolean,
-		// 功能设置---------
-		// 可选级别
-		// 空：最后一级
-		// any：任意一级
-		valueLevel: {
-			type: String,
-			default: ''
-		},
-		clearable: {
-			type: Boolean,
-			default: true
-		},
-		tabindex: {
-			type: String,
-			default: '1'
-		},
-		readonly: Boolean,
-		comparable: Boolean
-	},
-	data() {
-		return {
-			errorTip: '',
-			errorType: 'rule',
-			disabled: this.readonly,
-			timer: null,
-			blurByLayer: false,
-			focused: false,
-			iOptionDisplay: '',
-			levels: [],
-			valueStore: [],
-			cur: {},
-			label: '',
-			iValue: '',
-			curLevel: '',
-			selected: null,
-			popupSelected: '', // 缓存多选的值，提交后才广播
-			deep: 1,
-			labelArr: [],
-			options: [],
-			valuePath: [],
-			tHeight: ''
-		};
-	},
-	computed: {
-		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;
-		},
-		setClass() {
-			let arr = ['to-form-readonly']
-			if (this.fillet !== 'none') {
-				arr.push(`to-input-fillet-${this.fillet}`);
-			}
-			if (this.filletPosition) {
-				arr.push(`to-input-fillet-position-${this.filletPosition}`);
-			}
-			if (this.placeholderColor) {
-				arr.push(`to-select-placeholder-color-${this.placeholderColor}`);
-			}
-			if (this.value === '') {
-				arr.push('to-select-placeholder')
-			}
-			if (this.errorTip) {
-				arr.push('to-select-mode-line');
-				arr.push('to-box-mode-line');
-				arr.push('to-select-color-danger');
-				arr.push('to-box-color-danger');
-				arr.push('to-select-tip-show')
-			} else {
-				if (this.color) {
-					if (this.color !== 'radam') {
-						arr.push(`to-select-color-${this.color}`);
-					} else {
-						let colors = this.$TouchUI.colors
-						let number = Math.round(Math.random() * 6)
-						arr.push(`to-select-color-${ colors[number]}`);
-					}
-				}
-				if (this.mode === 'fill' || this.mode === 'line') {
-					arr.push('to-select-color-primary')
-					arr.push('to-box-color-primary')
-				} else {
-					arr.push('to-select-color-fg')
-					arr.push('to-box-color-fg')
-				}
-				if (this.mode) {
-					arr.push(`to-select-mode-${this.mode}`)
-					arr.push(`to-box-mode-${this.mode}`)
-				} else if (this.ToForm && this.ToForm.type === 'list') {
-					arr.push('to-select-mode-none')
-					arr.push('to-box-mode-none')
-				} else {
-					arr.push('to-select-mode-toast')
-					arr.push('to-box-mode-toast')
-				}
-			}
-			if (this.focused) {
-				arr.push('to-select-state-focus')
-			}
-			if (this.disabled) {
-				arr.push('to-select-state-readonly')
-			}
-			if (this.changed) {
-				arr.push('to-select-changed')
-			}
-			if ((this.ToForm && this.ToForm.comparable) || this.comparable) {
-				arr.push('to-compare')
-			}
-			return arr
-		},
-		setContentClass() {
-			let arr = []
-			if (!this.disabled) {
-				arr.push('to-box-link')
-			}
-			if (this.color) {
-				arr.push(`to-box-color-${this.color}`)
-			} else if (this.mode === 'fill' || this.mode === 'line') {
-				arr.push('to-box-color-primary')
-			} else {
-				arr.push('to-box-color-fg')
-			}
-			if (this.mode) {
-				arr.push(`to-box-mode-${this.mode}`)
-			} else if (this.ToForm && this.ToForm.type === 'list') {
-				arr.push('to-box-mode-none')
-			} else {
-				arr.push('to-box-mode-toast')
-			}
-			return arr
-		},
-		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
-		},
-		multiple: {
-			handler(val) {
-				if (val) {
-					this.selected = []
-				} else {
-					this.selected = {}
-				}
-			},
-			immediate: true
-		},
-		value: {
-			handler(val) {
-				this.iValue = this.value
-				if (this.data && this.data.length) {
-					this.$nextTick(()=>{
-						this.setLabel()
-					})
-				}
-			},
-			immediate: true
-		},
-		data: {
-			handler() {
-				this.initData()
-				this.initLevels()
-				if (this.data && this.data.length) {
-					this.$nextTick(()=>{
-						this.setLabel()
-					})
-				}
-			},
-			deep: true
-		},
-		selected(val) {
-			if (!val) {
-				this.$emit('change', '')
-				this.initData()
-				this.initLevels()
-			} else {
-				if (this.multiple) {
-
-					let arr = []
-					val.map(node => {
-						arr.push(node.value)
-					})
-
-					// 抛出值
-					this.$emit('change', arr.join(','))
-
-					if (this.iOptionDisplay !== 'popup') {
-
-						// 调整 float 位置
-						this.$nextTick(()=>{
-							this.$refs.layer.set(this.$refs.link)
-						})
-					}
-				} else {
-					this.label = this.getLabelPath(val.value)
-					this.$emit('change', val.value)
-				}
-			}
-		}
-	},
-	created() {
-		// 设置 placeholder
-		this.iValue = this.value
-		if (!this.value) {
-			this.label = this.placeholder
-		}
-
-		// 初始化数据
-		this.initData()
-		this.initLevels()
-
-		// 设置弹出模式
-		if (this.optionDisplay) {
-			this.iOptionDisplay = this.optionDisplay
-		} else {
-			if (this.$phone) {
-				this.iOptionDisplay = 'popup'
-			} else {
-				this.iOptionDisplay = 'flaot'
-			}
-		}
-	},
-	mounted() {
-	},
-	methods: {
-		getTHeight() {
-			let h = ''
-			let c_h = document.body.clientHeight
-			this.$nextTick(function() {
-				if (this.$refs.link && this.$refs.tab) {
-					let y = this.$refs.link.getBoundingClientRect().top
-					let linkHeight = this.$refs.link.offsetHeight
-					let t_h = this.$refs.tab.$el.offsetHeight
-					h = t_h + 'px'
-					if (y > (c_h - y - linkHeight) && y < t_h) {
-						h = y + 'px'
-					} else if (y < (c_h - y - linkHeight) && (c_h - y - linkHeight) < t_h) {
-						h = (c_h - y - linkHeight) + 'px'
-					}
-				}
-				this.tHeight = h
-			})
-		},
-		// 初始化展示数据
-		initLevels() {
-			let arr = []
-			this.nodes.map(node=>{
-				arr.push(node.level)
-			})
-			this.deep = arr.sort().reverse()[0] + 1
-			this.levels = [
-				{
-					title: this.placeholder,
-					data: this.nodes.filter(node => node.level === 0),
-					tag: 'level0'
-				}
-			]
-			for (let i = 1; i < this.deep; i++) {
-				this.levels[i] = {
-					title: '',
-					data: [],
-					tag: 'level' + i
-				}
-			}
-			this.curLevel = ''
-		},
-
-		initData() {
-			this.nodes = this.getNodes(this.data)
-		},
-
-		getLabelPath(val) {
-			if (val && this.nodes.find(node => node.value === val)) {
-				return this.nodes.find(node => node.value === val).labelPath
-			} else {
-				return this.placeholder
-			}
-		},
-
-		setLabel() {
-			if (this.iValue) {
-				if (this.multiple) {
-					this.selected = []
-					this.nodes.map(node => {
-						if ((node.isLeaf || this.valueLevel === 'any') && this.iValue.split(',').includes(node.value)) {
-							this.addCheck(node.value)
-						}
-					})
-				} else {
-					this.label = this.getLabelPath(this.iValue)
-				}
-				this.setSelected()
-			} else {
-				this.label = this.placeholder
-			}
-		},
-
-		// 把所有数据打平成一个数组
-		getNodes(data) {
-			let arr = []
-			let that = this
-			function set(node, level = 0, path = '', labelPath = '', parent = '__root__') {
-				for (let i = 0; i < node.length; i++) {
-					arr.push({
-						label: node[i][that.labelText] || '',
-						value: node[i][that.valueText] || '',
-						level: level,
-						path: (path + ',' + node[i][that.valueText]).substr(1),
-						labelPath: (labelPath + ' / ' + node[i][that.labelText]).substr(3),
-						parent: parent,
-						isLeaf: !(node[i][that.childrenText] && node[i][that.childrenText].length > 0)
-					})
-					if (node[i][that.childrenText]) {
-						set(
-							node[i][that.childrenText],
-							level + 1,
-							path + ',' + node[i][that.valueText],
-							labelPath + ' / ' + node[i][that.labelText],
-							node[i][that.valueText]
-						)
-					}
-				}
-			}
-			set(data)
-			return arr
-		},
-		forward(item, levelIndex) {
-			this.cur = item
-			if (item.isLeaf) {
-				if (!this.multiple) {
-					this.select(item)
-				} else {
-					this.check(!item.checked, item)
-				}
-			} else {
-				const path = item.path.split(',')
-				this.$set(
-					this.levels,
-					levelIndex + 1,
-					{
-						title: item.label,
-						data: this.nodes.filter(node => node.level === levelIndex + 1 && node.path.split(',').includes(path[levelIndex])),
-						tag: 'level' + (levelIndex + 1)
-					}
-				)
-				if (this.iOptionDisplay === 'popup') {
-					this.$refs.popup.forward('level' + (levelIndex + 1))
-				} else {
-					this.curLevel = 'level' + (levelIndex + 1)
-					this.tHeight = ''
-					this.getTHeight()
-				}
-			}
-		},
-		clear() {
-			if (this.iOptionDisplay === 'popup') {
-				this.$refs.popup.close()
-			} else {
-				this.$refs.layer.close()
-			}
-			this.selected = ''
-		},
-		focus() {
-			this.errorTip = ''
-			this.focused = true
-		},
-		blur() {
-			this.focused = false
-			if (!this.blurByLayer) {
-				this.closeLayer()
-			}
-		},
-		layerMousedown() {
-			this.blurByLayer = true
-			this.timer = setTimeout(() => {
-				this.blurByLayer = false
-				clearTimeout(this.timer)
-				this.timer = null
-			}, 200);
-		},
-		select(item) {
-			this.selected = item
-			this.closeLayer()
-		},
-		toggleLayer() {
-			if (this.iOptionDisplay === 'popup') {
-				if (this.$refs.popup.visible) {
-					this.closeLayer()
-				} else {
-					this.openLayer()
-				}
-			} else {
-				if (this.$refs.layer.show) {
-					this.closeLayer()
-				} else {
-					this.openLayer()
-				}
-			}
-		},
-		closeLayer() {
-			if (!this.disabled) {
-				if (this.iOptionDisplay === 'popup') {
-					this.$refs.popup.close()
-				} else {
-					this.$refs.layer.close()
-				}
-			}
-		},
-		openLayer() {
-			if (!this.disabled) {
-				if (this.iOptionDisplay === 'popup') {
-					this.$refs.popup.open('level0')
-				} else {
-					this.$refs.layer.toggle('link')
-					this.tHeight = ''
-					this.getTHeight()
-				}
-			}
-		},
-		tabChange() {
-			this.$nextTick(function() {
-				this.tHeight = ''
-				this.getTHeight()
-			})
-		},
-		check(checked, item) {
-			if (checked) {
-				this.addCheck(item.value)
-			} else {
-				this.removeCheck(item.value)
-			}
-			if (this.iOptionDisplay === 'popup') {
-				this.setPopupSelected()
-			} else {
-				this.setSelected()
-			}
-		},
-		addCheck(val) {
-
-			if (this.valueLevel === 'any') {
-				this.getNode(val).checked = true
-			} else {
-
-				// 添加所有路径中含有本元素值的元素
-				this.nodes.map(node=>{
-					if (node.path.split(',').includes(val)) {
-						node.checked = true
-					}
-				})
-
-				// 和自己同级的元素如果全部都加上，父元素执行递归执行 addCheck
-				let isAddAll = true
-				let item = this.getNode(val)
-				this.nodes.map(node=>{
-					if (node.parent === item.parent && !node.checked) {
-						isAddAll = false
-					}
-				})
-				if (isAddAll && item.parent !== '__root__') {
-					this.addCheck(item.parent)
-				}
-			}
-		},
-		removeCheck(val, notspread) {
-
-			if (this.valueLevel === 'any') {
-				this.getNode(val).checked = false
-			} else {
-
-				// 清空所有路径中含有本元素值的元素
-				if (!notspread) {
-					this.nodes.map(node=>{
-						if (node.path.split(',').includes(val)) {
-							node.checked = false
-						}
-					})
-				}
-
-				// 父元素也勾掉
-				let item = this.getNode(val)
-				if (item.parent !== '__root__') {
-					let parent = this.getNode(item.parent)
-					parent.checked = false
-					this.removeCheck(parent.value, true)
-				}
-			}
-		},
-		setPopupSelected() {
-			this.popupSelected = []
-			this.nodes.map(node=>{
-				if (node.checked && (node.isLeaf || this.valueLevel === 'any')) {
-					this.popupSelected.push(node)
-				}
-			})
-		},
-		setSelected() {
-			if (this.multiple) {
-				this.selected = []
-				this.nodes.map(node=>{
-					if (node.checked && (node.isLeaf || this.valueLevel === 'any')) {
-						this.selected.push(node)
-					}
-				})
-			} else {
-				this.selected = this.nodes.find(node => node.value === this.iValue)
-			}
-		},
-		getNode(val) {
-			return this.nodes.find(node=>node.value === val)
-		},
-		submit() {
-			this.$refs.popup.close();
-			this.selected = [...this.popupSelected]
-		},
-
-		// 记录历史值，以便对比或者取值
-		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 ref="link" v-tip="changed ? t('to.common.originalValue', getLabelPath(valueStore[0])) : ''" :class="setClass" :tabindex="tabindex" :style="setStyle" class="to-select" @focus="focus" @blur="blur" @keyup.enter="toggleLayer" @keyup.esc="closeLayer" @mousedown="layerMousedown">
+		<span v-if="verifiable && validateRequired" v-show="false" class="to-validate" :req="validateRequired" :desc="validateDesc" :value="value ? 'true' : ''"></span>
+		<span v-if="$slots.prefix" class="to-selectPrefix"><slot name="prefix"></slot></span>
+		<span class="to-selectContent" :class="setContentClass" @click="openLayer">
+
+			<!-- 前缀文本/图标 -->
+			<to-icon v-if="icon" v-bind="iconProps" :value="icon" :mode="iconProps && iconProps.mode ? iconProps.mode : 'none'" class="to-selectIcon"></to-icon>
+			<span v-if="prefix" class="to-selectPrefixLabel">{{ prefix }}</span>
+
+			<!-- 内容 -->
+			<span v-if="multiple && selected.length > 0" class="to-selectTag">
+				<template v-if="selected.length > 0">
+					<template v-for="(item, index) in selected">
+						<to-tag :key="index" color="fg" mode="plain" :deletable="!disabled" @delete="removeCheck(item.value); setSelected()">{{ item.labelPath }}</to-tag>
+					</template>
+				</template>
+			</span>
+			<span v-else class="to-selectValue">{{ showAllLevels ? label : label.split(' / ')[label.split(' / ').length - 1] }}</span>
+			<span class="to-selectArrow"></span>
+
+			<!-- 后缀文本 -->
+			<span v-if="suffix" class="to-selectSuffixLabel">{{ suffix }}</span>
+
+		</span>
+		<span v-if="$slots.suffix" class="to-selectSuffix"><slot name="suffix"></slot></span>
+		<span v-if="$slots.default" class="to-selectSuffix"><slot></slot></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>
+
+		<!-- 弹出模式 -->
+		<to-popup v-if="iOptionDisplay === 'popup'" ref="popup" @mousedown="layerMousedown">
+			<to-popup-group v-for="(level, levelIndex) in levels" :key="levelIndex">
+				<to-popup-item :tag="level.tag">
+					<to-grid type="v" height="full">
+						<to-grid-item side>
+							<to-header color="bg" mode="fill" level="0" :title="level.title" @back="$refs.popup.back()">
+								<to-button v-if="data.length > 0 && level.tag === 'level0' && clearable" icon="close" mode="none" color="primary" fillet="normal" @click="clear">{{ t('to.common.clear') }}</to-button>
+							</to-header>
+						</to-grid-item>
+						<to-grid-item>
+							<to-scroll color="bg" padding="0.5">
+								<to-grid v-if="data.length > 0" :col="optionCol">
+									<to-grid-item v-for="(item, index) in level.data" :key="index">
+										<to-card link padding="0" :space="multiple ? 0:1" @click="forward(item, levelIndex)">
+											<to-card-item v-if="multiple"><to-checkbox v-model="item.checked" @click="checked => { return check(checked, item)}"></to-checkbox></to-card-item>
+											<to-card-item main>
+												<to-padding :value="multiple ? 0:1">
+													<to-ellipsis>{{ item.label }}</to-ellipsis>
+												</to-padding>
+											</to-card-item>
+											<to-card-item v-if="!item.isLeaf" more><to-space type="inline"></to-space></to-card-item>
+											<to-card-item v-if="valueLevel == 'any' && !multiple" link>
+												<to-icon value="ok" mode="plain" link fillet="round" color="primary" @click.stop="select(item)"></to-icon>
+												<to-space type="inline"></to-space>
+											</to-card-item>
+										</to-card>
+									</to-grid-item>
+								</to-grid>
+								<to-msg v-else position="full" :title="t('to.common.noData')" :content="t('to.common.noDataDesc')" show></to-msg>
+							</to-scroll>
+						</to-grid-item>
+						<to-grid-item v-if="multiple && $refs.popup && levelIndex === $refs.popup.currentPopupGroupIdx" side>
+							<to-box padding="0">
+								<to-submit width="full" :space="0" class="to-cascaderSubmit">
+									<to-button v-size="'l'" mode="line" color="primary" @click="$refs.popup.close()">{{ t('to.common.cancel') }}</to-button>
+									<to-button v-size="'l'" color="primary" @click="submit">{{ t('to.common.confirm') }}</to-button>
+								</to-submit>
+							</to-box>
+						</to-grid-item>
+					</to-grid>
+				</to-popup-item>
+			</to-popup-group>
+		</to-popup>
+
+		<!-- 悬浮下拉模式 -->
+		<to-float v-else ref="layer" :width="optionWidth" :lazy="lazy" :align="optionAlign" @mousedown="layerMousedown">
+			<to-padding v-if="data.length === 0" v-color="'info'" :value="1.5">
+				{{ t('to.common.noData') }}
+			</to-padding>
+			<to-scroll v-else height="full">
+				<to-tab ref="tab" v-model="curLevel" :height="tHeight" type="sup" @change="tabChange">
+					<template v-if="clearable" slot="fn">
+						<to-button icon="close" mode="none" fillet="normal" color="primary" @click="clear"></to-button>
+					</template>
+					<to-tab-item v-for="(level, levelIndex) in levels" :key="levelIndex" :label="level.title" :value="level.tag">
+						<to-grid :col="optionCol" padding="0.5" padding-position="u">
+							<to-grid-item v-for="(item, index) in level.data" :key="index">
+								<to-card link :padding="0" :space="multiple ? 0:1" @click="forward(item, levelIndex)">
+									<to-card-item v-if="multiple"><to-checkbox v-model="item.checked" @click="checked => { return check(checked, item)}"></to-checkbox></to-card-item>
+									<to-card-item main>
+										<to-padding :value="multiple ? 0:1">
+											<to-ellipsis>{{ item.label }}</to-ellipsis>
+										</to-padding>
+									</to-card-item>
+									<to-card-item v-if="valueLevel == 'any' && !multiple" link>
+										<to-icon value="ok" mode="plain" link fillet="round" color="primary" @click.stop="select(item, levelIndex)"></to-icon>
+										<to-space type="inline"></to-space>
+									</to-card-item>
+								</to-card>
+							</to-grid-item>
+						</to-grid>
+					</to-tab-item>
+				</to-tab>
+			</to-scroll>
+		</to-float>
+
+	</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';
+export default {
+	name: 'ToCascader',
+	componentName: 'ToCascader',
+	mixins: [Locale, Tip],
+	model: {
+		event: 'change'
+	},
+	inject: {
+		ToForm: {
+			default: ''
+		},
+		ToFormItem: {
+			default: ''
+		}
+	},
+	props: {
+		lazy: {
+			type: Boolean,
+			default() {
+				if (this.$TouchUI && this.$TouchUI.cascader && this.$TouchUI.cascader.lazy === false) {
+					return false
+				} else {
+					return true
+				}
+			}
+		},
+		// 表单校验
+		desc: {
+			type: String,
+			default: ''
+		},
+		required: Boolean,
+		id: {
+			type: String,
+			default: ''
+		},
+		// 插件---------
+		prefix: {
+			type: String,
+			default: ''
+		},
+		suffix: {
+			type: String,
+			default: ''
+		},
+		icon: {
+			type: String,
+			default: ''
+		},
+		iconProps: {
+			type: Object,
+			default: ()=>{}
+		},
+		// 数据设置---------
+		value: {
+			type: [String, Number, Boolean],
+			default: ''
+		},
+		valueText: {
+			type: String,
+			default: 'value'
+		},
+		labelText: {
+			type: String,
+			default: 'label'
+		},
+		childrenText: {
+			type: String,
+			default: 'children'
+		},
+		data: {
+			type: Array,
+			default() {
+				return []
+			}
+		},
+		placeholder: {
+			type: String,
+			default: () => t('to.common.placeholder.select')
+		},
+		placeholderColor: {
+			type: String,
+			default: ''
+		},
+		// 外观设置---------
+		color: {
+			type: String,
+			default: ''
+		},
+		verifiable: {
+			type: Boolean,
+			default: true
+		},
+		fillet: {
+			type: String,
+			default() {
+				return this.$TouchUI.cascader.fillet || this.$TouchUI.global.fillet || 'normal'
+			}
+		},
+		filletPosition: {
+			type: String,
+			default: ''
+		},
+		mode: {
+			type: String,
+			default: ''
+		},
+		width: {
+			type: [Number, String],
+			default: ''
+		},
+		// 选项设置---------
+		optionDisplay: {
+			type: String,
+			default: ''
+		},
+		optionAlign: {
+			type: String,
+			default: 'left'
+		},
+		optionWidth: {
+			type: [Number, String],
+			default: ''
+		},
+		optionCol: {
+			type: [Number, String],
+			default: 1
+		},
+		multiple: Boolean,
+		// 功能设置---------
+		// 可选级别
+		// 空：最后一级
+		// any：任意一级
+		valueLevel: {
+			type: String,
+			default: ''
+		},
+		showAllLevels: {
+			type: Boolean,
+			default: true
+		},
+		clearable: {
+			type: Boolean,
+			default: true
+		},
+		tabindex: {
+			type: String,
+			default: '1'
+		},
+		readonly: Boolean,
+		comparable: Boolean
+	},
+	data() {
+		return {
+			errorTip: '',
+			errorType: 'rule',
+			disabled: this.readonly,
+			timer: null,
+			blurByLayer: false,
+			focused: false,
+			iOptionDisplay: '',
+			levels: [],
+			valueStore: [],
+			cur: {},
+			label: '',
+			iValue: '',
+			curLevel: '',
+			selected: null,
+			popupSelected: '', // 缓存多选的值，提交后才广播
+			deep: 1,
+			labelArr: [],
+			options: [],
+			valuePath: [],
+			tHeight: ''
+		};
+	},
+	computed: {
+		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;
+		},
+		setClass() {
+			let arr = ['to-form-readonly']
+			if (this.fillet !== 'none') {
+				arr.push(`to-input-fillet-${this.fillet}`);
+			}
+			if (this.filletPosition) {
+				arr.push(`to-input-fillet-position-${this.filletPosition}`);
+			}
+			if (this.placeholderColor) {
+				arr.push(`to-select-placeholder-color-${this.placeholderColor}`);
+			}
+			if (this.value === '') {
+				arr.push('to-select-placeholder')
+			}
+			if (this.errorTip) {
+				arr.push('to-select-mode-line');
+				arr.push('to-box-mode-line');
+				arr.push('to-select-color-danger');
+				arr.push('to-box-color-danger');
+				arr.push('to-select-tip-show')
+			} else {
+				if (this.color) {
+					if (this.color !== 'radam') {
+						arr.push(`to-select-color-${this.color}`);
+					} else {
+						let colors = this.$TouchUI.colors
+						let number = Math.round(Math.random() * 6)
+						arr.push(`to-select-color-${ colors[number]}`);
+					}
+				}
+				if (this.mode === 'fill' || this.mode === 'line') {
+					arr.push('to-select-color-primary')
+					arr.push('to-box-color-primary')
+				} else {
+					arr.push('to-select-color-fg')
+					arr.push('to-box-color-fg')
+				}
+				if (this.mode) {
+					arr.push(`to-select-mode-${this.mode}`)
+					arr.push(`to-box-mode-${this.mode}`)
+				} else if (this.ToForm && this.ToForm.type === 'list') {
+					arr.push('to-select-mode-none')
+					arr.push('to-box-mode-none')
+				} else {
+					arr.push('to-select-mode-toast')
+					arr.push('to-box-mode-toast')
+				}
+			}
+			if (this.focused) {
+				arr.push('to-select-state-focus')
+			}
+			if (this.disabled) {
+				arr.push('to-select-state-readonly')
+			}
+			if (this.changed) {
+				arr.push('to-select-changed')
+			}
+			if ((this.ToForm && this.ToForm.comparable) || this.comparable) {
+				arr.push('to-compare')
+			}
+			return arr
+		},
+		setContentClass() {
+			let arr = []
+			if (!this.disabled) {
+				arr.push('to-box-link')
+			}
+			if (this.color) {
+				arr.push(`to-box-color-${this.color}`)
+			} else if (this.mode === 'fill' || this.mode === 'line') {
+				arr.push('to-box-color-primary')
+			} else {
+				arr.push('to-box-color-fg')
+			}
+			if (this.mode) {
+				arr.push(`to-box-mode-${this.mode}`)
+			} else if (this.ToForm && this.ToForm.type === 'list') {
+				arr.push('to-box-mode-none')
+			} else {
+				arr.push('to-box-mode-toast')
+			}
+			return arr
+		},
+		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
+		},
+		multiple: {
+			handler(val) {
+				if (val) {
+					this.selected = []
+				} else {
+					this.selected = {}
+				}
+			},
+			immediate: true
+		},
+		value: {
+			handler(val) {
+				this.iValue = this.value
+				if (this.data && this.data.length) {
+					this.$nextTick(()=>{
+						this.setLabel()
+					})
+				}
+			},
+			immediate: true
+		},
+		data: {
+			handler() {
+				this.initData()
+				this.initLevels()
+				if (this.data && this.data.length) {
+					this.$nextTick(()=>{
+						this.setLabel()
+					})
+				}
+			},
+			deep: true
+		},
+		selected(val) {
+			if (!val) {
+				this.$emit('change', '')
+				this.initData()
+				this.initLevels()
+			} else {
+				if (this.multiple) {
+
+					let arr = []
+					val.map(node => {
+						arr.push(node.value)
+					})
+
+					// 抛出值
+					this.$emit('change', arr.join(','))
+
+					if (this.iOptionDisplay !== 'popup') {
+
+						// 调整 float 位置
+						this.$nextTick(()=>{
+							this.$refs.layer.set(this.$refs.link)
+						})
+					}
+				} else {
+					this.label = this.getLabelPath(val.value)
+					this.$emit('change', val.value)
+				}
+			}
+		}
+	},
+	created() {
+		// 设置 placeholder
+		this.iValue = this.value
+		if (!this.value) {
+			this.label = this.placeholder
+		}
+
+		// 初始化数据
+		this.initData()
+		this.initLevels()
+
+		// 设置弹出模式
+		if (this.optionDisplay) {
+			this.iOptionDisplay = this.optionDisplay
+		} else {
+			if (this.$phone) {
+				this.iOptionDisplay = 'popup'
+			} else {
+				this.iOptionDisplay = 'flaot'
+			}
+		}
+	},
+	mounted() {
+	},
+	methods: {
+		getTHeight() {
+			let h = ''
+			let c_h = document.body.clientHeight
+			this.$nextTick(function() {
+				if (this.$refs.link && this.$refs.tab) {
+					let y = this.$refs.link.getBoundingClientRect().top
+					let linkHeight = this.$refs.link.offsetHeight
+					let t_h = this.$refs.tab.$el.offsetHeight
+					h = t_h + 'px'
+					if (y > (c_h - y - linkHeight) && y < t_h) {
+						h = y + 'px'
+					} else if (y < (c_h - y - linkHeight) && (c_h - y - linkHeight) < t_h) {
+						h = (c_h - y - linkHeight) + 'px'
+					}
+				}
+				this.tHeight = h
+			})
+		},
+		// 初始化展示数据
+		initLevels() {
+			let arr = []
+			this.nodes.map(node=>{
+				arr.push(node.level)
+			})
+			this.deep = arr.sort().reverse()[0] + 1
+			this.levels = [
+				{
+					title: this.placeholder,
+					data: this.nodes.filter(node => node.level === 0),
+					tag: 'level0'
+				}
+			]
+			for (let i = 1; i < this.deep; i++) {
+				this.levels[i] = {
+					title: '',
+					data: [],
+					tag: 'level' + i
+				}
+			}
+			this.curLevel = ''
+		},
+
+		initData() {
+			this.nodes = this.getNodes(this.data)
+		},
+
+		getLabelPath(val) {
+			if (val && this.nodes.find(node => node.value === val)) {
+				return this.nodes.find(node => node.value === val).labelPath
+			} else {
+				return this.placeholder
+			}
+		},
+
+		setLabel() {
+			if (this.iValue) {
+				if (this.multiple) {
+					this.selected = []
+					this.nodes.map(node => {
+						if ((node.isLeaf || this.valueLevel === 'any') && this.iValue.split(',').includes(node.value)) {
+							this.addCheck(node.value)
+						}
+					})
+				} else {
+					this.label = this.getLabelPath(this.iValue)
+				}
+				this.setSelected()
+			} else {
+				this.label = this.placeholder
+			}
+		},
+
+		// 把所有数据打平成一个数组
+		getNodes(data) {
+			let arr = []
+			let that = this
+			function set(node, level = 0, path = '', labelPath = '', parent = '__root__') {
+				for (let i = 0; i < node.length; i++) {
+					arr.push({
+						label: node[i][that.labelText] || '',
+						value: node[i][that.valueText] || '',
+						level: level,
+						path: (path + ',' + node[i][that.valueText]).substr(1),
+						labelPath: (labelPath + ' / ' + node[i][that.labelText]).substr(3),
+						parent: parent,
+						isLeaf: !(node[i][that.childrenText] && node[i][that.childrenText].length > 0)
+					})
+					if (node[i][that.childrenText]) {
+						set(
+							node[i][that.childrenText],
+							level + 1,
+							path + ',' + node[i][that.valueText],
+							labelPath + ' / ' + node[i][that.labelText],
+							node[i][that.valueText]
+						)
+					}
+				}
+			}
+			set(data)
+			return arr
+		},
+		forward(item, levelIndex) {
+			this.cur = item
+			if (item.isLeaf) {
+				if (!this.multiple) {
+					this.select(item)
+				} else {
+					this.check(!item.checked, item)
+				}
+			} else {
+				const path = item.path.split(',')
+				this.$set(
+					this.levels,
+					levelIndex + 1,
+					{
+						title: item.label,
+						data: this.nodes.filter(node => node.level === levelIndex + 1 && node.path.split(',').includes(path[levelIndex])),
+						tag: 'level' + (levelIndex + 1)
+					}
+				)
+				if (this.iOptionDisplay === 'popup') {
+					this.$refs.popup.forward('level' + (levelIndex + 1))
+				} else {
+					this.curLevel = 'level' + (levelIndex + 1)
+					this.tHeight = ''
+					this.getTHeight()
+				}
+			}
+		},
+		clear() {
+			if (this.iOptionDisplay === 'popup') {
+				this.$refs.popup.close()
+			} else {
+				this.$refs.layer.close()
+			}
+			this.selected = ''
+		},
+		focus() {
+			this.errorTip = ''
+			this.focused = true
+		},
+		blur() {
+			this.focused = false
+			if (!this.blurByLayer) {
+				this.closeLayer()
+			}
+		},
+		layerMousedown() {
+			this.blurByLayer = true
+			this.timer = setTimeout(() => {
+				this.blurByLayer = false
+				clearTimeout(this.timer)
+				this.timer = null
+			}, 200);
+		},
+		select(item) {
+			this.selected = item
+			this.closeLayer()
+		},
+		toggleLayer() {
+			if (this.iOptionDisplay === 'popup') {
+				if (this.$refs.popup.visible) {
+					this.closeLayer()
+				} else {
+					this.openLayer()
+				}
+			} else {
+				if (this.$refs.layer.show) {
+					this.closeLayer()
+				} else {
+					this.openLayer()
+				}
+			}
+		},
+		closeLayer() {
+			if (!this.disabled) {
+				if (this.iOptionDisplay === 'popup') {
+					this.$refs.popup.close()
+				} else {
+					this.$refs.layer.close()
+				}
+			}
+		},
+		openLayer() {
+			if (!this.disabled) {
+				if (this.iOptionDisplay === 'popup') {
+					this.$refs.popup.open('level0')
+				} else {
+					this.$refs.layer.toggle('link')
+					this.tHeight = ''
+					this.getTHeight()
+				}
+			}
+		},
+		tabChange() {
+			this.$nextTick(function() {
+				this.tHeight = ''
+				this.getTHeight()
+			})
+		},
+		check(checked, item) {
+			if (checked) {
+				this.addCheck(item.value)
+			} else {
+				this.removeCheck(item.value)
+			}
+			if (this.iOptionDisplay === 'popup') {
+				this.setPopupSelected()
+			} else {
+				this.setSelected()
+			}
+		},
+		addCheck(val) {
+
+			if (this.valueLevel === 'any') {
+				this.getNode(val).checked = true
+			} else {
+
+				// 添加所有路径中含有本元素值的元素
+				this.nodes.map(node=>{
+					if (node.path.split(',').includes(val)) {
+						node.checked = true
+					}
+				})
+
+				// 和自己同级的元素如果全部都加上，父元素执行递归执行 addCheck
+				let isAddAll = true
+				let item = this.getNode(val)
+				this.nodes.map(node=>{
+					if (node.parent === item.parent && !node.checked) {
+						isAddAll = false
+					}
+				})
+				if (isAddAll && item.parent !== '__root__') {
+					this.addCheck(item.parent)
+				}
+			}
+		},
+		removeCheck(val, notspread) {
+
+			if (this.valueLevel === 'any') {
+				this.getNode(val).checked = false
+			} else {
+
+				// 清空所有路径中含有本元素值的元素
+				if (!notspread) {
+					this.nodes.map(node=>{
+						if (node.path.split(',').includes(val)) {
+							node.checked = false
+						}
+					})
+				}
+
+				// 父元素也勾掉
+				let item = this.getNode(val)
+				if (item.parent !== '__root__') {
+					let parent = this.getNode(item.parent)
+					parent.checked = false
+					this.removeCheck(parent.value, true)
+				}
+			}
+		},
+		setPopupSelected() {
+			this.popupSelected = []
+			this.nodes.map(node=>{
+				if (node.checked && (node.isLeaf || this.valueLevel === 'any')) {
+					this.popupSelected.push(node)
+				}
+			})
+		},
+		setSelected() {
+			if (this.multiple) {
+				this.selected = []
+				this.nodes.map(node=>{
+					if (node.checked && (node.isLeaf || this.valueLevel === 'any')) {
+						this.selected.push(node)
+					}
+				})
+			} else {
+				this.selected = this.nodes.find(node => node.value === this.iValue)
+			}
+		},
+		getNode(val) {
+			return this.nodes.find(node=>node.value === val)
+		},
+		submit() {
+			this.$refs.popup.close();
+			this.selected = [...this.popupSelected]
+		},
+
+		// 记录历史值，以便对比或者取值
+		compare() {
+			this.valueStore.unshift(this.value)
+		},
+		setDisabled(f) {
+			this.disabled = f
+		},
+		// 撤销
+		restore() {
+			this.data = this.valueStore[0]
+			this.valueStore.splice(0, 1)
+		}
+	}
+};
+</script>