xg_total_process_master_cloud_vue/src/components/userSelectV2/index.vue

<template>
<div>
    <el-input placeholder="请选择" :size="size" :disabled="disabled" @focus="showUserSelect"  :readonly="true" style="line-hight:40px" @change="changeName" v-model="name" class="input-with-select">
    </el-input>
    <user-select ref="userSelect" @doSubmit="selectUsersToInput" :limit="limit" :selectData="selectData"></user-select>
</div>
</template>
<script>
import userSelect from './UserSelectDialog'
import userService from '@/api/sys/userService'
export default {
  data () {
    return {
      name: '',
      labelValue: this.value,
      selectData: []
    }
  },
  props: {
    limit: Number,
    value: String,
    userName: String,
    size: {
      type: String,
      default: () => { return 'small' }
    },
    readonly: {
      type: Boolean,
      default: () => { return false }
    },
    disabled: {
      type: Boolean,
      default: () => { return false }
    }
  },
  components: {
    userSelect
  },
  userService: null,
  beforeCreate () {
    // this.userService = new UserService()
  },
  watch: {
    value: {
      handler (newVal) {
        this.selectData = []
        if (newVal) {
          newVal.split(',').forEach((id) => {
            userService.queryById(id).then((data) => {
              if (data && data.id !== '') {
                this.selectData.push(data)
              }
            })
          })
        }
      },
      immediate: true,
      deep: false
    },
    selectData: {
      handler (newVal) {
        this.name = newVal.map(user => { return user.name }).join(',')
      },
      immediate: false,
      deep: false
    },
    userName: {
      handler (newVal) {
        this.name = newVal
      },
      immediate: false,
      deep: false
    }
  },
  methods: {
    selectUsersToInput (users) {
      this.selectData = users
      this.labelValue = users.map(user => { return user.id }).join(',')
      this.name = users.map(user => { return user.name }).join(',')
      this.$emit('getValue', this.labelValue, this.name)
    },
    changeName () {
      this.$emit('getValue', null, this.name)
    },
    showUserSelect () {
      this.$refs.userSelect.init()
    }
  }
}
</script>
<style>
  .el-form-item__content .el-input-group {
      vertical-align: middle;
  }
 .el-tag + .el-tag {
    margin-left: 5px;
    margin-bottom: 5px;
  }
</style>