oms/src/components/userModal/userModal.vue

<template>
  <div>
    <el-input :placeholder="attrs.placeholder" :value="userValue.userName" @clear="clearValue" size="small" class="myinpuy-with-select" clearable>
      <el-button slot="append" icon="el-icon-more" @click="value = true"></el-button>
    </el-input>
    <vxe-modal v-model="value" id="userDialogModal" v-loading="load" width="900px" height="80%" @show="show" show-zoom resize transfer show-footer>
      <template #title>
        <span>选择用户</span>
      </template>
      <template #default>
        <module-view :propConfig="config" ref="view" @pagination="getList" @onRefresh="getList" @resert="queryList" @search="queryList"  />
      </template>
      <template #footer>
        <div class="btn">
          <el-button plain size="small" @click="value = false">取消</el-button>
          <el-button type="primary" size="small" @click="confirm">确定</el-button>
        </div>
      </template>
    </vxe-modal>
  </div>
 
</template>
<script lang="ts">
import { Component, Prop, Vue, Watch } from "vue-property-decorator";
import { listUser } from '@/api/system/user'
import VueViews from '@/benyun/compVue/VueViews'
@Component
export default class UserModal extends VueViews {
  value=false;
  load=false;
  isSearch=false
  timeNum = 0;
  userValue:any={};
  config:any={
    attr:{
      calculateH:true
    },
    search:{
      attr:{
        size:'small',
      },
      columns:[
        [{
          span:10,
          label:'用户名称',
          prop:'userName',
          component:'by-input',
          labelWidth:'120px',
          compConfig:{
            attr:{
              clearable:true
            }
          }
        },{
          span:10,
          label:'部门',
          prop:'deptId',
          component:'select-tree',
          labelWidth:'120px',
          compConfig:{
            attr:{
              clearable:true,
              retConfig:{
                deptId:'id',
                deptName:'label'
              },
              label:'label',
            },
            request:{
              url:'/system/dept/treeselect',
              method:"GET"
            }
          }
        }]
      ]
    },
    tool:{
      tools:{
        search:true,
        refresh:true
      }
    },
    table:{
      attr:{
        size:'mini',
        radio:true,
        seq:true,
        align:'center',
        triggerRowCheck:'row',
        pageSize:10
      },
      columns:[{
        title:'用户名称',
        field:'userName'
      },{
        title:'用户昵称',
        field:'nickName'
      },{
        title:'部门',
        field:'deptName',
        formatField:(row:any) =>{
          if(row.dept?.deptName){
            return row.dept.deptName
          }else{
            return '';
          }
        }
      }]
    }
  }

  @Watch('propValue')
  propValueChange(v:any){
    this.setValue(v);
  }
  mounted(){
    
  }
  //分页
  pagination(){
    if(this.isSearch){
      this.queryList();
    }else{
      this.getList()
    }
  }
  show(){
    this.getList();
  }
  //列表请求（只有分页，不包含搜素条件）
  getList(){
    if(!this.$refs.view){
      if(this.timeNum > 5){
        return
      }
      setTimeout(()=>{
        this.getList()
      },500) 
      this.timeNum ++;
      return
    }
    this.isSearch = false;
    let data = (this.$refs.view as any).getPage();
    delete data.total;
    this.requestList(data);
  }
  //列表请求（包含分页和搜素条件）
  queryList(){
    this.isSearch = true;
    let data = (this.$refs.view as any).getQuery();
    delete data.total;
    this.requestList(data);
  }
  requestList(data:any){
    this.load = true;
    listUser(data).then((res:any) => {
      this.load = false;
      (this.$refs.view as any).setTableValue(res.rows);
      let page = {
        total: res.data.total //总条数
      };
      (this.$refs.view as any).setPage(page)

    }).catch(()=>{
      this.load = false;
    })
  }
  //获取已选中表格数据
  getSelectdata(){
    let data:Array<any>=[];
    if(this.$refs.view){
      data = (this.$refs.view as any).getSelectData()
    }
    return data;
  }
  //确定
  confirm(){
    let data:Array<any>=this.getSelectdata();
    if(data.length == 0){
      this.$message('请选择用户！')
      return
    }
    this.userValue.userId = data[0].userId;
    this.userValue.userName = data[0].userName;
    this.value = false;
    this.onChange();
  }
  onChange(){
    this.$emit('onChange',this.userValue);
  }
  setValue(v:any){
    this.userValue.userName = v;
    if(this.parentValue){
      this.userValue.userId = this.parentValue.userId;
    }
  }
  // 清空数据
  clearValue(){
    this.userValue = {};
  }
}
</script>
<style lang="scss" scoped>

</style>