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" 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>