yh-ui/src/components/Business/User/UserInput.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>