erp-ui-m/components/thorui/tui-sel-dict/tui-sel-dict.vue

<template>
	<picker :disabled="disabled" class="abow-sel-dict" @change="selChange" :start="start" :end="end" :value="idx"
		:range="listData" range-key="label" :mode="modetype">
		<slot>
			<block v-if="modetype=='selector'">
				<view class="content" :class="{ placeholder: !selData }">
					<text>{{selData&&selData.label?selData.label:placeholder}}</text>
				</view>
			</block>
			<block v-else>
				<view class="content" :class="{ placeholder: !selData }">
					<text>{{ selData ? selData : placeholder }}</text>
				</view>
			</block>
		</slot>
	</picker>
</template>

<script>
	export default {
		data() {
			return {
				idx: 0,
				listData: "",
				selData: null
			}
		},
		props: {
			disabled: {
				type: Boolean,
				default: false
			},
			modetype: {
				type: String,
				default: "selector" // selector：单选： multiSelector：联级选择(别用)； time：时间；  date：日期；
			},
			start: {
				type: String,
				default: ""
			},
			end: {
				type: String,
				default: ""
			},
			// 占位符
			placeholder: {
				type: String,
				default: "无"
			},
			apiUrl: {
				type: String,
				default: ""
			},
			isRecords: {
				type: String,
				default: ""
			},
			postData: {
				type: Object,
				default: null
			},
			keyLabel: {
				type: String,
				default: "name"
			},
			keyId: {
				type: String,
				default: "id"
			},
			daType: {
				type: [String],
				default: "sex"
			},
			list: {
				type: [Array],
				default: () => {
					return []
				}
			},
			setfirst: {
				type: Boolean,
				default: false
			},
			value: {
				type: [Number, String],
				default: ""
			},
			isSelAll: {
				type: Boolean,
				default: false
			}
		},
		watch: {
			daType(val) {
				this.initData()
			},
			value(val) {
				this.init()
			},
			list(val) {
				this.initData()
			}
		},
		created() {
			this.initData(true)
		},
		methods: {
			initData(type) {
				if (this.modetype != 'selector') {
					return false
				}
				if (this.apiUrl) {
					this.loadData(type)
				} else if (this.daType == 'sex') {
					this.listData = [{
						label: "女",
						id: 0
					}, {
						label: "男",
						id: 1
					}]
					this.init(type)
				} else if (this.list && this.list.length > 0) {
					this.listData = this.list.map(item => {
						this.$set(item, 'label', item[this.keyLabel])
						this.$set(item, 'id', item[this.keyId])
						return item
					})
					this.init(type)
				}
			},
			init(type) {
				if (this.modetype == 'date') {
					this.selData = this.formatDate(this.value, "yyyy-MM-dd")
					return false
				}
				if (this.modetype != 'selector') {
					return false
				}
				if (!this.listData || this.listData.length <= 0) {
					this.idx = 0
					this.selData = null
					return false
				}
				if (!this.value && this.listData.length > 0 && this.setfirst) {
					this.idx = 0
					this.selData = this.listData[0]
					this.$emit("input", this.listData)
					this.$emit("change", this.selData)
					return false
				}
				this.listData.forEach((item, index) => {
					if (String(this.value) == String(item.id)) {
						this.idx = index
						this.selData = item
						this.$emit("change", this.selData, type)
					}
				})
			},
			selChange(e) {
				if (this.modetype == 'selector') {
					if (!this.listData || this.listData.length <= 0) {
						return false
					}
					this.idx = parseInt(e.detail.value)
					this.selData = this.listData[this.idx]
					this.$emit("input", this.selData.id)
					this.$emit("change", this.selData)
				} else if (this.modetype == 'date') {
					this.listData = e.detail.value
					var t = new Date(this.listData).getTime()
					this.$emit("input", t)
					this.$emit("change", t)
				} else {
					this.listData = e.detail.value
					this.$emit("input", this.listData)
					this.$emit("change", this.listData)
				}
			},
			loadData(type) {
				this.$tui.request(this.apiUrl, this.postData).then(res => {
					if (res.code == 0) {
						if (this.isRecords) {
							this.listData = res.items[this.isRecords].map((item, index) => {
								return {
									label: item[this.keyLabel],
									id: item[this.keyId]
								}
							});
						} else {
							this.listData = res.items.map((item, index) => {
								return {
									label: item[this.keyLabel],
									id: item[this.keyId]
								}
							});
						}
						console.log(this.isSelAll,'全部全部全部全部11')
						if (this.isSelAll) {
							console.log('全部全部全部全部22')
							this.listData.unshift({
								label:'全部',
								id: ''
							})
						}
						this.init(type)
					}
				}).catch(res => {})
			},
			formatDate(datestr, _temp = "yyyy-MM-dd hh:mm:ss") {
				var _date
				if (datestr) {
					if (!isNaN(datestr)) {
						datestr = new Date(parseInt(datestr))
					}
					var reg = new RegExp('-', "g");
					datestr = String(datestr).replace(reg, '/');
					_date = new Date(datestr);
				} else {
					return ""
				}
				var o = {
					"M+": _date.getMonth() + 1, //月份
					"d+": _date.getDate(), //日
					"h+": _date.getHours(), //小时
					"m+": _date.getMinutes(), //分
					"s+": _date.getSeconds(), //秒
					"q+": Math.floor((_date.getMonth() + 3) / 3), //季度
					"S": _date.getMilliseconds() //毫秒
				};
				if (/(y+)/.test(_temp)) {
					_temp = _temp.replace(RegExp.$1, (_date.getFullYear() + "").substr(4 - RegExp.$1.length));
				}
				for (var k in o) {
					if (new RegExp("(" + k + ")").test(_temp)) {
						_temp = _temp.replace(
							RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
					}
				}
				return _temp;
			}
		}
	}
</script>

<style lang="scss" scoped>
	.abow-sel-dict {
		flex: 1;
	}

	.content {
		height: 100%;
		width: 100%;
		text-align: right;
	}

	.placeholder {
		height: 100%;
		width: 100%;
		color: #999999;
	}
</style>