hs_hzl_uniapp_ml/pageApp/components/deptSelect.vue

<template>
	<view class="desc">
		<uni-row>
			<uni-col :span="5">
				<view class="desc" style="font-size: 25rpx;">
					{{label}}
				</view>
			</uni-col>
			<uni-col :span="19">
				<view class="pickerView">
					<picker @change="deptBindPickerChange" :value="deptConfig.deptIndex" :range="deptConfig.deptDatas"
						range-key="deptName">
						<view class="pickerText"
							v-if="deptConfig.deptDatas && deptConfig.deptDatas.length>0 && deptConfig.deptIndex !== undefined">
							{{ deptConfig.deptDatas[deptConfig.deptIndex].deptName }}
						</view>
						<view class="pickerText" v-else>
							{{defaultDept}}
						</view>
					</picker>
				</view>
			</uni-col>
		</uni-row>
	</view>
</template>

<script>
	export default {
		name: 'hs-dept-select',
		props: {
			value: {
				Type: String,
				default: null
			},
			label: {
				Type: String,
				default: '岗位'
			},
			autofill: false
		},
		data() {
			return {
				defaultDept: '待 选 择',
				deptConfig: {
					deptDatas: uni.getStorageSync('deptData'),
					deptIndex: undefined
				},
			}
		},
		mounted() {
			if (this.autofill) {
				//翻译默认部门
				let department = uni.getStorageSync('files').department
				this.defaultDept = this.$dictTranslation(department, 'deptData', 'dept')
				this.$emit('input', department)
			}
		},
		methods: {
			deptBindPickerChange: function(e) {
				this.deptConfig.deptIndex = e.detail.value
				this.$emit('input', this.deptConfig.deptDatas[this.deptConfig.deptIndex].deptId)
			},
		}
	}
</script>

<style lang="scss" scoped>
	.desc {
		padding: 10rpx 15rpx 0 15rpx;
		color: #818181;
		font-size: 20rpx;
	}

	.pickerView {
		// align-items: flex-end;
		padding: 10rpx 20rpx;
		margin-right: 20rpx;
		border: 1rpx #eeeeee solid;
	}

	.pickerText {
		font-size: 26rpx;
		color: #b1b1b1;
	}
</style>