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

<!-- 选择部门 -->

<template>
  <el-dialog :close-on-click-modal="false" :close-on-press-escape="false" :title="$t('form.selectMember')" :visible.sync="open" width="800px" append-to-body>
    <el-row style="height: 500px;overflow-y: scroll;">
      <el-col :span="12" class="select-user-left">
        <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="true"
          :default-expanded-keys="selected.id=='' ? []:[selected.id]"
          :filter-node-method="filterNode"
          ref="tree"
          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.id" :label="data.id" @change="handleChange(data)" class="select-dept-user-check-radio-box">{{ $i18n.locale === 'zh_CN'?data.name:data.nameEn }}</el-radio> -->
            <el-radio :ref="'radio'+data.id" v-if="data.type===7" v-model="selected.id" :label="data.id" @change="handleChange(data)" class="select-dept-user-check-radio-box">{{data.name }}</el-radio>
            <!-- <span v-else>{{ $i18n.locale === 'zh_CN'?data.name:data.nameEn }}</span> -->
            <span v-else>{{ data.name }}</span>
          </span>
        </el-tree>
      </el-col>
      <el-col :span="12" class="select-user-right">
        <div>已选</div>
        <div class="select-user-selected" v-if="selected.id!=''">
          <div class="select-user-selected-item">
            <!-- <div class="select-user-selected-name">{{$i18n.locale === 'zh_CN'?selected.name:selected.nameEn}}</div> -->
            <div class="select-user-selected-name">{{selected.name}}</div>
            <div class="select-user-selected-del"><i class="el-icon-delete" @click="delSelected"></i></div>
          </div>
        </div>
      </el-col>
    </el-row>
    

    <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>
</template>

<script>
import { deptUserList } from "@/api/system/user"
export default {
  name: "SelectDeptUserDialog",
  components: {},
  props: {
  },
  watch: {
    filterText(val) {
      this.$refs.tree.filter(val);
    }
  },
  data() {
    return {
      open:false,

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

      listData: [],
      list: [],
      filterText:'',
      defaultProps: {
        children: 'children',
        label: 'name'
      }
    };
  },
  mounted() {
  },
  methods: {
    show(id,name,nameEn){
      this.getList()

      this.selected.id = id ?((id+'').indexOf('u_')>-1? id:('u_'+id)):''
      this.selected.name=name || ''
      this.selected.nameEn=nameEn || ''
      this.open = true
      this.filterText = ''
    },
    filterNode(value, data) {
      if (!value) return true;
      // return this.$i18n.locale === 'zh_CN'?(data.name.indexOf(value) !== -1):(data.nameEn.indexOf(value) !== -1);
      return data.name.indexOf(value) !== -1;
    },
    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 = {
          id:data.id,
          name:data.name,
          nameEn:data.nameEn,
        }
      }
    },
    // getName(id){
    //   let name = ''
    //   let arr =  _.filter(this.listData, (o)=> { return o.id===id })
    //   if(arr && arr.length>0){
    //     name = arr[0].name
    //   }
    //   return name
    // },
    save(){
      let obj = {
        id:this.selected && this.selected.id?this.selected.id.replace('u_',''):'',
        name:this.selected.name,
        nameEn:this.selected.nameEn,
      }
      this.$emit('change', obj)
      this.$emit('input', obj.id)
      this.open = false
    },
    delSelected(){
      this.selected = {
        id:'',
        name:'',
        nameEn:'',
      }
    }
  }
};
</script>