eln_web/src/views/business/comps/select/SelectDeptUser.vue

<!-- 选择部门 -->

<template>
  <div>
    <el-input v-model="selectedObj.name" :placeholder="$t('form.placeholderSelect')" readonly @click.native="showSelectDeptUser" />
    <el-dialog :title="$t('form.selectMember')" :visible.sync="open" width="500px" append-to-body>
      <el-input
        :placeholder="$t('form.placeholderInput')"
        v-model="filterText"
        style="margin-bottom:10px">
      </el-input>

      <el-tree
        class="filter-tree"
        :data="list"
        :props="defaultProps"
        :default-expand-all="selected==''"
        :default-expanded-keys="selected=='' ? []:[selected]"
        :filter-node-method="filterNode"
        ref="tree"
        @node-click="handleChange"
        node-key="id"
        >
        <span class="custom-tree-node" slot-scope="{ node, data }">
          <el-radio :ref="'radio'+data.id" v-if="data.type===7" v-model="selected" :label="data.id">{{ data.name }}</el-radio>
          <span v-else>{{ data.name }}</span>
        </span>
      </el-tree>

      <div slot="footer" class="dialog-footer">
        <el-button @click="open=false">{{$t('form.cancel')}}</el-button>
        <el-button type="primary" @click="save">{{$t('form.saveConfirm')}}</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { deptUserList } from "@/api/system/user"
export default {
  name: "SelectDeptUser",
  components: {},
  props: {
    value: {
      type: [Number, String , Array],
      default: ''
    },
  },
  watch: {
    value: {
      immediate: true,
      handler(v) {
        this.selected = v ?((v+'').indexOf('u_')>-1? v:('u_'+v)):''
        debugger
        this.selectedObj = {
          id:this.selected,
          name:this.getName(this.selected)
        }
      }
    },
    filterText(val) {
      this.$refs.tree.filter(val);
    }
  },
  data() {
    return {
      open:false,

      selected: '',
      selectedObj :{
        id:'',
        name:''
      },

      listData: [],
      list: [],
      filterText:'',
      defaultProps: {
        children: 'children',
        label: 'name'
      }
    };
  },
  mounted() {
    this.getList()
  },
  methods: {
    filterNode(value, data) {
      if (!value) return true;
      return data.name.indexOf(value) !== -1;
    },
    showSelectDeptUser(){
      this.open = true
      this.filterText = ''
    },
    getList() {
      this.listData = []
      this.list = []
      deptUserList().then(response => {
        this.listData = response.data
        this.list = this.handleTree(response.data, "id")
      })
    },
    handleChange(data) {
      if(data && data.type===7){
        this.selected = data.id
        this.selectedObj = data
      }
    },
    getName(id){
      debugger
      let name = ''
      let arr =  _.filter(this.listData, (o)=> { return o.id===id })
      if(arr && arr.length>0){
        name = arr[0].name
      }
      return name
    },
    save(){
      this.$emit('change', this.selectedObj)
      this.$emit('input', this.selectedObj && this.selectedObj.id?this.selectedObj.id.replace('u_',''):'')
      debugger
      this.open = false
    },
  }
};
</script>