FE-V2-PC/src/views/comprehensive/laboratoryManagement/accessAuthorization/lookImpowerSearch.vue

<!--
=========================示例说明=========================
<advanced-search :searchData="searchData"></advanced-search>
import advancedSearch from "@/components/ZDcomponents/advancedSearch.vue"
components: {
  addPage,
  advancedSearch
},
=========================必要参数=========================
searchData:{
  buttonList:[//按钮数组没有则为空
    {
      name:"新增",//按钮名称 只有再状态 1 时需要
      type:"1", //按钮类型 1.按钮 2.导入 3.导出
      parameter:"add",//按钮字符用于返回方法时的判断
      hasPermi:['laboratory:gradeManage:add'] // 权限字段 如果没有则传空字符 hasPermi:"",
    },
    {
      name:"导入",//按钮名称 只有再状态 1 时需要
      type:"2", //按钮类型 1.按钮 2.导入 3.导出
      parameter:"import",//按钮字符用于返回方法时的判断
      hasPermi:['laboratory:gradeManage:import'] // 权限字段 如果没有则传空字符 hasPermi:"",
    },
    {
      name:"导出",//按钮名称 只有再状态 1 时需要
      type:"3", //按钮类型 1.按钮 2.导入 3.导出
      parameter:"export",//按钮字符用于返回方法时的判断
      hasPermi:['laboratory:gradeManage:export'] // 权限字段 如果没有则传空字符 hasPermi:"",
    }
  ],
  searchList:[//搜索数组
    {
      name:"名称",//描述名称
      key:"name",//键名 用于返回数据
      value:"",//内容 用于组件内绑定数据
      placeholder:"请输入名称",//输入提示
      level:"1",//1.普通搜索 2.高级搜索  普通搜索默认会在高级搜索时显示
      type:"1",//类型 1.input 2.select 3.TimePicker
      universal:'10',//通用参数 input时为最大长度 //TimePicker时可不传
      universal:[ //通用参数 select时为列表数据 //TimePicker时可不传
        {label:"全部",value:""},{label:"开启",value:"1"},{label:"关闭",value:"0"},
      ],
      labelWidth:'100px',//label-width宽度  可传可不传 不传时为默认宽度
      width:'200',//el-form-item 长度 可传可不传 不传时input/select默认180长度 TimePicker默认240长度
    }
  ]
}
=========================必要方法=========================
//父组件必要此方法用于接收参数
searchClick(type,data){
  if(type == 1){ //type  1.查询
    this.queryParams = JSON.parse(JSON.stringify(data));
    this.queryParams.pageNum = 1;
    this.queryParams.pageSize = 20;
    this.getList();
  }else if(type == 2){ //type  1.重置
    this.queryParams = {
      pageNum : 1,
      pageSize:20,
    };
    this.getList();
  }else if(type == 'add'){ //type  其他 自定义按钮
    this.clickPageType(2);
  }else if(type == 'import'){ //如果按钮类型是2或者3 这里data也会返回数据
    console.log('data',data)
  }else if(type == 'export'){ //如果按钮类型是2或者3 这里data也会返回数据
    console.log('data',data)
  }
},
-->

<template>
  <div class="advancedSearchMaxBigBox">
    <el-form ref="queryForm" :inline="true" v-if="!searchState">
      <el-form-item :label="item.name" :label-width="item.labelWidth?item.labelWidth:'px'" prop="searchValue" v-for="item in searchData.searchList" v-if="item.level == 1">
        <el-input v-if="item.type == 1" v-model="item.value" :maxlength="item.universal" :placeholder="item.placeholder" clearable
                  :style="item.width?'width:'+item.width+'px;':'width: 180px;'"/>
        <el-select v-if="item.type == 2" v-model="item.value" :placeholder="item.placeholder" clearable
                   :style="item.width?'width:'+item.width+'px;':'width: 180px;'">
          <el-option :key="minItem.value" :label="minItem.label" :value="minItem.value" v-for="minItem in item.universal"></el-option>
        </el-select>
        <el-date-picker v-if="item.type == 3" v-model="item.value" :clearable="false" value-format="yyyy-MM-dd"
                        :style="item.width?'width:'+item.width+'px;':'width: 240px;'"
                        type="daterange" range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期">
        </el-date-picker>
      </el-form-item>
      <el-form-item>
        <p class="inquire-button-one" @click="buttonClick(1)">查询</p>
        <p class="reset-button-one" @click="buttonClick(2)">重置</p>
      </el-form-item>
      <el-form-item>
        <p class="advanced-button" @click="stateSwitch">高级搜索</p>
      </el-form-item>
      <el-form-item style="float: right" v-for="item in searchData.buttonList" >
        <p v-if="item.type == 1 && !item.hasPermi" class="inquire-button-one" style="width:120px;" @click="buttonClick(item.parameter)">{{item.name}}</p>
        <p v-if="item.type == 1 && item.hasPermi" class="inquire-button-one" v-hasPermi="item.hasPermi" style="width:120px;" @click="buttonClick(item.parameter)">{{item.name}}</p>
        <div style="float: right;" v-if="item.type == 2">
          <el-dropdown @command="commandButton" v-hasPermi="item.hasPermi">
            <div class="form-dropdown-box">
              <img src="@/assets/ZDimages/personnelManagement/icon_jzgxx_dr.png">
              <p>导入</p>
              <img src="@/assets/ZDimages/personnelManagement/icon_jzggl_xljt.png">
            </div>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item style="border-bottom:1px solid #E0E0E0;margin:0 10px;color:#333;" :command="{item:item,command:1}">下载模板</el-dropdown-item>
              <el-dropdown-item style="margin:0 10px;color:#666;" :command="{item:item,command:2}">导入数据</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </div>
        <div style="float: right; "  v-if="item.type == 3">
          <el-dropdown @command="commandButton" v-hasPermi="item.hasPermi">
            <div class="form-dropdown-box">
              <img src="@/assets/ZDimages/personnelManagement/icon_jzgxx_sc.png">
              <p>导出</p>
              <img src="@/assets/ZDimages/personnelManagement/icon_jzggl_xljt.png">
            </div>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item style="border-bottom:1px solid #E0E0E0;margin:0 10px;color:#333;" :command="{item:item,command:1}">导出全部数据</el-dropdown-item>
              <el-dropdown-item style="margin:0 10px;color:#666;" :command="{item:item,command:2}">导出选中数据</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </div>
      </el-form-item>
    </el-form>
    <el-form ref="queryForm" :inline="true" v-if="searchState">
      <el-form-item :label="item.name" :label-width="item.labelWidth?item.labelWidth:'px'" prop="searchValue" v-for="item in searchData.searchList" >
        <el-input v-if="item.type == 1" v-model="item.value" :maxlength="item.universal" :placeholder="item.placeholder" clearable
                  :style="item.width?'width:'+item.width+'px;':'width: 180px;'"/>
        <el-select v-if="item.type == 2" v-model="item.value" :placeholder="item.placeholder" clearable
                   :style="item.width?'width:'+item.width+'px;':'width: 180px;'">
          <el-option :key="minItem.value" :label="minItem.label" :value="minItem.value" v-for="minItem in item.universal"></el-option>
        </el-select>
        <el-date-picker v-if="item.type == 3" v-model="item.value" :clearable="false" value-format="yyyy-MM-dd"
                        :style="item.width?'width:'+item.width+'px;':'width: 240px;'"
                        type="daterange" range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期">
        </el-date-picker>
      </el-form-item>
    </el-form>
    <div class="advanced-max-big-box" v-if="searchState">
      <div class="left-advanced-box"></div>
      <div class="center-advanced-box">
        <p class="inquire-button-one" @click="buttonClick(1)">查询</p>
        <p class="reset-button-one" @click="buttonClick(2)">重置</p>
      </div>
      <div class="right-advanced-box">
        <span class="ordinary-button" @click="stateSwitch">普通搜索</span>
      </div>
      <div v-for="item in searchData.buttonList">
        <p v-if="item.type == 1" class="inquire-button-one"
           v-hasPermi="item.hasPermi" style="width:120px;float: right;" @click="buttonClick(item.parameter)">{{item.name}}</p>
        <div style="float: right;" v-if="item.type == 2">
          <el-dropdown @command="commandButton" v-hasPermi="item.hasPermi">
            <div class="form-dropdown-box">
              <img src="@/assets/ZDimages/personnelManagement/icon_jzgxx_dr.png">
              <p>导入</p>
              <img src="@/assets/ZDimages/personnelManagement/icon_jzggl_xljt.png">
            </div>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item style="border-bottom:1px solid #E0E0E0;margin:0 10px;color:#333;" :command="{item:item,command:1}">下载模板</el-dropdown-item>
              <el-dropdown-item style="margin:0 10px;color:#666;" :command="{item:item,command:2}">导入数据</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </div>
        <div style="float: right; "  v-if="item.type == 3">
          <el-dropdown @command="commandButton" v-hasPermi="item.hasPermi">
            <div class="form-dropdown-box">
              <img src="@/assets/ZDimages/personnelManagement/icon_jzgxx_sc.png">
              <p>导出</p>
              <img src="@/assets/ZDimages/personnelManagement/icon_jzggl_xljt.png">
            </div>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item style="border-bottom:1px solid #E0E0E0;margin:0 10px;color:#333;" :command="{item:item,command:1}">导出全部数据</el-dropdown-item>
              <el-dropdown-item style="margin:0 10px;color:#666;" :command="{item:item,command:2}">导出选中数据</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "advancedSearch",
  props:{
    searchData:{}
  },
  data() {
    return {
      searchState:false,
    }
  },
  created() {

  },
  mounted(){

  },
  methods: {
    //普通/高级状态切换
    stateSwitch(){
      this.searchState = !this.searchState;
    },
    //导出/导入按钮
    commandButton(data){
      this.$parent.searchClick(data.item.parameter,data.command);
    },
    //按钮方法
    buttonClick(type){
      let self = this;
      if(type == '1'){
        //查找
        let obj = {};
        for(let i=0;i<self.searchData.searchList.length;i++){
          if(self.searchState){
            //高级搜索
            obj[self.searchData.searchList[i].key] = self.searchData.searchList[i].value;
          }else{
            //普通搜索
            if(self.searchData.searchList[i].level == '1'){
              obj[self.searchData.searchList[i].key] = self.searchData.searchList[i].value;
            }
          }
        }
        self.$parent.searchClick(type,obj);
      }else if(type == '2'){
        //返回
        for(let i=0;i<self.searchData.searchList.length;i++){
          self.searchData.searchList[i].value = '';
        }
        self.$parent.searchClick(type);
      }else{
        self.$parent.searchClick(type);
      }
    },
  }
}
</script>

<style lang="scss" scoped>
.advancedSearchMaxBigBox{
  margin:0 20px;
  .advanced-button{
    margin:0 20px;
    cursor: pointer;
    line-height:40px;
    font-weight:500;
    font-size:14px;
    color:#0183FA;
  }
  .advanced-max-big-box{
    display: flex;
    padding-bottom:20px;
    padding-right:10px;
    font-size:14px;
    .left-advanced-box{
      flex:1;
    }
    .center-advanced-box{

    }
    .right-advanced-box{
      flex:1;
      .ordinary-button{
        margin:0 20px;
        cursor: pointer;
        line-height:40px;
        font-weight:500;
        font-size:14px;
        color:#0183FA;
      }
    }
  }
  .form-dropdown-box{
    display: flex;
    margin:0;
    padding:0 10px;
    cursor: pointer;
    height:40px;
    img:nth-child(1){
      width:16px;
      height:16px;
      margin-top:12px;
    }
    p{
      width:47px;
      text-align: center;
      font-size:14px;
      margin:0;
      line-height:40px;
    }
    img:nth-child(3){
      width:10px;
      height:6px;
      margin-top:17px;
    }
  }
}
</style>
<style lang="scss">
.advancedSearchMaxBigBox{
  .el-range-editor--medium.el-input__inner{
    height:40px;
  }
}
</style>