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.storeId"
        size="small"
        style="margin-right: 4px"
        disable-transitions
        :closable="!disabled"
        @close="onCloseSelected(index)"
      >{{item.name}}</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
      :placeholder="placeholder">
      <template #suffix><i class="el-icon-arrow-right"/></template>
    </el-input>

    <user-dialog
      :show.sync="dialogShow"
      :query="query"
      :multiple="multiple"
      :init-select="selected"
      @select="onSubmit"
      :prop="prop"
      :title="title"
      :list-api="listApi"
    />
  </div>
</template>

<script>
import {isDeepEqual} from "@/utils";
import UserDialog from "@/components/Business/User/UserDialog.vue";
import {listUser, listUserByIds} from "@/api/system/user";

export default {
  name: 'UserInput',
  components: {UserDialog},
  props:{
    // 标题
    title: {
      type: String,
      default: `选择用户`
    },
    placeholder: {
      type: String,
      default: `点击选择用户`,
    },
    // 展示值的属性
    showProp: {
      type: String,
      default: 'nickName'
    },
    // 选择的属性值
    prop: {
      type: String,
      default: 'userId'
    },
    // 是否多选
    multiple: {
      type: Boolean,
      default: false,
    },
    // 双向绑定的值(为id)
    value: {
      type: [Array, String, Number],
      default: null
    },
    // 查询条件
    query: {
      type: Object,
      default: () => ({})
    },
    // 打开弹窗前
    beforeOpen: {
      type: Function,
      default: () => {
        return true;
      }
    },
    // 关闭弹窗前
    beforeClose: {
      type: Function,
      default: () => {
        return true;
      }
    },
    // 大小
    size: {
      type: String,
      default: null
    },
    // 是否禁用
    disabled: {
      type: Boolean,
      default: false,
    },
    // 对象处理器，参数类型：对象，返回值类型：字符串
    objectParser: {
      type: Function,
      default: (obj) => {
        return JSON.stringify(obj);
      }
    },
  },
  data() {
    return {
      selected: [], // 当前选中的值
      dialogShow: false,  // 展示对话框
    }
  },
  computed: {
    // 显示绑定的值
    inputBindValue() {
      if (this.selected == null || this.selected.length === 0) {
        return null;
      }
      return this.selected.map(item => item[this.showProp]).join(",");
    },
    listApi() {
      return listUser;
    },
    loadApi() {
      return listUserByIds;
    }
  },
  watch: {
    value(nv, ov) {
      this.loadSelected(nv);
    }
  },
  created() {
    this.loadSelected(this.value);
  },
  methods: {
    onCloseSelected(index) {
      this.selected.splice(index, 1);
      this.onSubmit(this.selected);
    },
    // 加载选中的值
    loadSelected(ids) {
      if (ids == null || ids.length === 0) {
        this.selected = [];
        return;
      }
      if (ids instanceof Array) {
        this.doLoad(ids);
      } else {
        this.doLoad([ids]);
      }
    },
    // 加载选中值
    doLoad(ids) {
      this.loadApi(ids).then(res => {
        this.selected = res.data;
      })
    },
    // 修改值
    inputValue(val){
      this.$emit('input', val);
    },
    // 确定
    onSubmit(selected){
      let value = null;
      if (this.multiple) {
        value = selected.map(item => item[this.prop]);
      } else {
        value = selected[this.prop];
      }
      this.$emit('submit', selected);
      if (!isDeepEqual(this.value, value)) {
        this.$emit('change', selected);
      }
      this.inputValue(value);
      this.closeDialog();
    },
    closeDialog() {
      if (this.beforeClose()) {
        this.dialogShow = false;
      }
    },
    // 打开对话框
    openDialog(){
      if (this.beforeOpen()) {
        this.dialogShow =  true;
      }
    }
  }
}
</script>