96 lines
2.8 KiB
Vue
96 lines
2.8 KiB
Vue
<template>
|
||
<!-- 单选用户输入（参照 Notice 自定义组选人范式）：readonly Input + 选择按钮 + 清空；
|
||
v-model=用户 id；display-name 回显姓名快照（调用方已知姓名时随值下传） -->
|
||
<div class="sel-user-box">
|
||
<Input
|
||
type="text"
|
||
v-model="nameText"
|
||
readonly
|
||
placeholder="点击「选择」指定用户"
|
||
class="input"
|
||
></Input>
|
||
<Button icon="md-add" @click="openModal">选择</Button>
|
||
<Button icon="md-trash" v-if="modelValue" @click="reset"></Button>
|
||
<UserCheckModal
|
||
ref="userCheckModal"
|
||
:sources="sources"
|
||
:multiple="false"
|
||
@on-submit="onSubmit"
|
||
/>
|
||
</div>
|
||
</template>
|
||
|
||
<script lang="ts">
|
||
import UserCheckModal from "@/components/UserCheckModal.vue";
|
||
import { flowApi } from "@/api/module/flow";
|
||
|
||
export default {
|
||
name: "UserSelectInput",
|
||
components: { UserCheckModal },
|
||
props: {
|
||
modelValue: {
|
||
type: Number,
|
||
default: null,
|
||
},
|
||
/** 当前 id 的姓名快照（编辑回显/选中即得，避免 #id 兜底） */
|
||
displayName: {
|
||
type: String,
|
||
default: "",
|
||
},
|
||
},
|
||
emits: ["update:modelValue", "update:displayName", "on-change"],
|
||
data() {
|
||
return {
|
||
nameText: this.displayName,
|
||
sources: [
|
||
{
|
||
name: "基础平台",
|
||
loader: () => flowApi.adminTeacherTree().send() as Promise<any[]>,
|
||
},
|
||
],
|
||
};
|
||
},
|
||
methods: {
|
||
openModal() {
|
||
(this.$refs.userCheckModal as any).show();
|
||
},
|
||
/** 单选弹窗提交：数组恒为 1 条（多选复用同组件） */
|
||
onSubmit(arr: any[]) {
|
||
if (!arr || !arr.length) return;
|
||
const u = arr[0];
|
||
this.nameText = u.name + "（" + u.id + "）";
|
||
this.$emit("update:modelValue", u.id);
|
||
this.$emit("update:displayName", u.name);
|
||
this.$emit("on-change", u);
|
||
},
|
||
reset() {
|
||
this.nameText = "";
|
||
this.$emit("update:modelValue", null);
|
||
this.$emit("update:displayName", "");
|
||
this.$emit("on-change", null);
|
||
},
|
||
},
|
||
watch: {
|
||
modelValue(val: number) {
|
||
// 外部清空/重置时同步清姓名
|
||
if (!val) this.nameText = "";
|
||
else if (!this.nameText) this.nameText = "#" + val;
|
||
},
|
||
displayName(val: string) {
|
||
this.nameText = val;
|
||
},
|
||
},
|
||
};
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.sel-user-box {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
.input {
|
||
flex: 1;
|
||
}
|
||
}
|
||
</style>
|