gwlz/jp-ui/src/components/officeUserSelect/index.vue

<template>
	<template v-if="printRead">
		<label>{{ name }}</label>
	</template>
	<template v-else>
		<el-input placeholder="请选择" readonly :clearable="clearable" :disabled="disabled" style="line-hight: 40px"
			v-model="name">
			<template #append>
				<el-button :disabled="disabled" :readonly="readonly" @click="showUserSelect" icon="search"></el-button>
			</template>
		</el-input>
		<user-select ref="userSelect" @doSubmit="selectUsersToInput" :tenantId="tenantId" :limit="limit"></user-select>
	</template>
</template>
<script>
import userSelect from "./UserSelectDialog";
import userService from "@/api/sys/userService";
export default {
	data() {
		return {
			name: "",
			selectData: [],
		};
	},
	props: {
		limit: Number,
		modelValue: { type: String, default: "" },
		tenantId: { type: String, default: null },
		printRead: {
			type: Boolean,
			default: () => {
				return false;
			},
		},
		clearable: {
			type: Boolean,
			default: () => {
				return true;
			},
		},
		readonly: {
			type: Boolean,
			default: () => {
				return false;
			},
		},
		disabled: {
			type: Boolean,
			default: () => {
				return false;
			},
		},
	},
	components: {
		userSelect,
	},
	watch: {
		modelValue: {
			handler(newVal) {
				this.selectData = [];
				if (newVal) {
					newVal.split(",").forEach((id) => {
						userService.queryByLoginName(id).then((data) => {
							if (data && data.id !== "") {
								this.selectData.push(data);
								this.name = this.selectData
									.map((user) => {
										return user.name;
									})
									.join(",");
							}
						});
					});
				} else {
					this.name = "";
				}
			},
			immediate: true,
			deep: false,
		},
	},
	methods: {
		selectUsersToInput(users) {
			let selectIds = users
				.map((user) => {
					return user.id;
				})
				.join(",");
			this.$emit("update:modelValue", selectIds);
		},
		showUserSelect() {
			this.$refs.userSelect.open(this.selectData);
		},
	},
};
</script>
<style>
.el-form-item__content .el-input-group {
	vertical-align: middle;
}

.el-tag+.el-tag {
	margin-left: 5px;
	margin-bottom: 5px;
}
</style>