|
@@ -1,306 +0,0 @@
|
|
-<!--
|
|
|
|
-=========================示例说明=========================
|
|
|
|
-<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>
|
|
|