wl_management_vue/src/views/modules/device/device-staff-depat.vue

<template>
    <div>
        <el-row v-show="isShowSearch">
            <el-col :span="20"><div class="grid-content flex"><el-input v-model="query.name" placeholder="请输入内容"></el-input></div>
                </el-col>
            <el-col :span="4"><div class="grid-content bg-purple-light"><el-button type="primary" class="div_width div_height" @click="btnSearch">搜索</el-button></div>
            </el-col>
        </el-row>
        <el-table
        v-loading='dataListLoading'
      :data="query.list"
      :show-header="showHeader"
      style="width: 100%"
      @row-click="rowClick">
      <el-table-column v-if="isStaff"
        prop="desc"
        style="width: 100%">
      </el-table-column>
      <el-table-column v-if="isDepat"
        prop="typeDesc"
        style="width: 100%">
      </el-table-column>
    </el-table>
        
    </div>
</template>>
<script>
import {apiFindStaff, apiFindDepat} from '@/api/api_equipment'
import * as dd from 'dingtalk-jsapi'
export default {
    data () {
        return{
            isShowSearch: true,
            data: [],
            
            input: '',
            dataListLoading: false,
            
            typeIndex: 0,//0搜索人1搜索使用地
            showHeader: false,
            query:{
              name: '',
              pageSize: 20,
              currPage: 0,
              totalPage: 0,
              list: []
            },
            isStaff: true,
            isDepat: false
        }

    },
    created () {
    // this.handleGetImgCaptcha()
    },
    mounted () {
        if(typeof this.$route.query.type == 'undefined'){
        }else{
          this.typeIndex = this.$route.query.type
          if(this.typeIndex == 0 || this.typeIndex == 3){
            this.isStaff = true
            this.isDepat = false
          }else{
            this.isStaff = false
            this.isDepat = true
          }
        }
        
    },
    methods: {
        getData(){
          console.log('获取数据')
          console.log(this.name)
          this.dataListLoading = true
          if(this.typeIndex == 0 || this.typeIndex == 3){
              apiFindStaff(this.query).then(data => {
              console.log(data)
              if(data.code != 200){
                this.$message.error("异常" + data.msg);
                return
              }
              if(typeof data.data == 'undefined'){
              }else{
                this.query.currPage = data.data.currPage
                this.query.totalPage = data.data.totalPage
                this.query.list = data.data.list
              }
              this.dataListLoading = false
            })
          }else {
            apiFindDepat(this.query).then(data => {
              console.log(data)
              if(data.code != 200){
                this.$message.error("异常" + data.msg);
                return
              }
              if(typeof data.data == 'undefined'){
              }else{
                this.query.currPage = data.data.currPage
                this.query.totalPage = data.data.totalPage
                this.query.list = data.data.list
              }
              this.dataListLoading = false
            })
          }
          
        },
        btnSearch(){
          this.getData()
        },
        
        rowClick(row, event, column){
          if(this.typeIndex == 0){
            this.$cookie.set('userName', row.name)
            this.$cookie.set('idUser', row.id)
            this.$router.replace({name: 'devicedetail', query:{type: 2}})
            
          } else if(this.typeIndex == 1){
            this.$cookie.set('userName', row.typeDesc)
            this.$cookie.set('idUser', row.id)
            this.$router.replace({name: 'devicedetail', query:{type: 3}})
          }else {
            this.$router.replace({name: 'devicestaff', query:{type: this.typeIndex, id: row.id}})
          }
         
        }
    }
}

</script>

<style>
  .el-row {
    margin-bottom: 20px;
    
  }
  .el-col {
    border-radius: 10px;
  }
  .bg-purple-dark {
    background: #99a9bf;
  }
  .bg-purple {
    background: #d3dce6;
  }
  .bg-purple-light {
    background: #e5f2f1;
  }
  .grid-content {
    border-radius: 4px;
    min-height: 36px;
  }
  .row-bg {
    padding: 10px 0;
    background-color: #f9fafc;
  }
  .div_height{
      height: 38px;
  }
  .div_width{
      width: 100%;
  }
  .width_100{
      width: 100px;
  }
  .center{
      position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    
    padding: 1em;
  }
  .flex{
	display:flex;
    align-items: center;
	justify-content:center;
	width:100%;
	height:100%;
    border:1px solid;
	}
.flex_son{
	width:100%;
	height:100%;
	border:0x solid;
}
  
</style>