92 lines
2.2 KiB
Vue
92 lines
2.2 KiB
Vue
<!--version: 4, 经营场所选择器-->
|
||
<!--版本更新内容：添加prop属性，修复多选-->
|
||
|
||
<template>
|
||
<div>
|
||
<template v-if="multiple">
|
||
<el-tag
|
||
v-for="(item,index) of selected"
|
||
:key="item.userId"
|
||
size="small"
|
||
style="margin-right: 4px"
|
||
disable-transitions
|
||
:closable="!disabled"
|
||
@close="onCloseSelected(index)"
|
||
>{{item[showProp]}}</el-tag>
|
||
<el-tag style="cursor: not-allowed" size="small" type="info" v-if="disabled">+</el-tag>
|
||
<el-tag style="cursor: pointer" size="small" @click="openDialog" type="success" v-else>+</el-tag>
|
||
</template>
|
||
<el-input
|
||
v-else
|
||
:value="inputBindValue"
|
||
@focus="openDialog"
|
||
:size="size"
|
||
:disabled="disabled"
|
||
readonly
|
||
ref="inputRef"
|
||
:placeholder="placeholder">
|
||
<template #suffix><i class="el-icon-arrow-right"/></template>
|
||
</el-input>
|
||
|
||
<user-dialog
|
||
v-if="openType === 'dialog'"
|
||
:show.sync="dialogShow"
|
||
:query="query"
|
||
:multiple="multiple"
|
||
:init-select="selected"
|
||
@select="onSubmit"
|
||
:prop="prop"
|
||
:title="title"
|
||
:list-api="listApi"
|
||
/>
|
||
<user-drawer
|
||
v-else-if="openType === 'drawer'"
|
||
:show.sync="dialogShow"
|
||
:query="query"
|
||
:multiple="multiple"
|
||
:init-select="selected"
|
||
@select="onSubmit"
|
||
:prop="prop"
|
||
:title="title"
|
||
:list-api="listApi"
|
||
/>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import UserDialog from "@/components/Business/User/UserDialog.vue";
|
||
import {listUser, listUserByIds} from "@/api/system/user";
|
||
import UserDrawer from "@/components/Business/User/UserDrawer.vue";
|
||
import {$businessInput} from "@/components/Business/mixins";
|
||
|
||
export default {
|
||
name: 'UserInput',
|
||
mixins: [$businessInput],
|
||
components: {UserDrawer, UserDialog},
|
||
props: {
|
||
listApi: {
|
||
type: Function,
|
||
default: listUser,
|
||
},
|
||
loadApi: {
|
||
type: Function,
|
||
default: listUserByIds
|
||
},
|
||
prop: {
|
||
type: String,
|
||
default: "userId"
|
||
},
|
||
// 展示值的属性
|
||
showProp: {
|
||
type: String,
|
||
default: 'nickName'
|
||
},
|
||
// 打开的类型
|
||
openType: {
|
||
type: String,
|
||
default: 'dialog',
|
||
},
|
||
}
|
||
}
|
||
</script>
|