Home>

The search condition is dead data,Select multiple conditions by selecting drop down;At the same time, you can click the plus sign to increase the search criteria.Click the minus sign to reduce the search criteria;

templete

<template>
 <div>
 <div>
 <[email protected]="seniorsearch (" ")":class="[tabbtn ==" "?" checked ":" "]">Advanced Search</a>
 <[email protected]="seniorsearch (" author ")":class="[tabbtn ==" author "?" checked ":" "]">Author Search</a>
 </div>
 <div>
 <div>
 <div>
  <[email protected]="addplus" v-show="formtips.length<12"></span>
  <[email protected]="removeminus" v-show="formtips.length>= 4"></span>
 </div>
 <div>
  <div v-for="(item, index) in formtips">
  <div>
  <select v-model="item.titletype">
  <option v-for="typeselect in titletype" v-if="tabbtn ==" "":value="typeselect.value">{{typeselect.text}}</option>
  <option v-for="typeselect in titletypeauthor" v-if="tabbtn ==" author "&&! (Index%2)":value="typeselect.value">{{typeselect.text}}</option>
  <option v-for="typeselect in titletypeauthor2" v-if="tabbtn ==" author "&&(index%2)":value="typeselect.value">{{typeselect.text}}</option>
  </select>
  </div>
  <div>
  <input type="text" v-model="item.typeinp">
  </div>
  <div>
  <select>
  <option v-for="accuracy in accuracys":value="accuracy.value">{{accuracy.text}}</option>
  </select>
  </div>
  <div>
  <select v-model="item.containlist">
  <option v-for="containlist in containlists":value="containlist.value">{{containlist.text}}</option>
  </select>
  </div>
  </div>
 </div>
 <div>
  <div>
  <[email protected]="catalogshow">bibliographic catalog</div>
  <div>
  <ul v-show="iscataloglist">
  <li>
   <div>
   <label>
   <input type="checkbox" v-model="cataloglist" value="nuclear industry">nuclear industry
   </label>
   </div>
  </li>
  <li>
   <div>
   <label>
   <input type="checkbox" v-model="cataloglist" value="aerospace industry">aerospace industry
   </label>
   </div>
  </li>
  <li>
   <div>
   <label>
   <input type="checkbox" v-model="cataloglist" value="Aviation Industry">Aviation Industry
   </label>
   </div>
  </li>
  <li>
   <div>
   <label>
   <input type="checkbox" v-model="cataloglist" value="shipping industry">shipbuilding industry
   </label>
   </div>
  </li>
  <li>
   <div>
   <label>
   <input type="checkbox" v-model="cataloglist" value="Weapon Industry">Weapon Industry
   </label>
   </div>
  </li>
  <li>
   <div>
   <label>
   <input type="checkbox" v-model="cataloglist" value="military electronics">military electronics
   </label>
   </div>
  </li>
  <li>
   <div>
   <label>
   <input type="checkbox" v-model="cataloglist" value="defense synthesis">defense synthesis
   </label>
   </div>
  </li>
  <li>
   <div>
   <label>
   <input type="checkbox" v-model="cataloglist" value="other">other
   </label>
   </div>
  </li>
  </ul>
  </div>
  </div>
 </div>
 <div>
  <div>
  <select v-model="timestart">
  <option v-for="startlist in timestarts":value="startlist.value">{{startlist.text}}</option>
  </select>
  <span>——</span>
  <select v-model="timeend">
  <option v-for="endlist in timeends":value="endlist.value">{{endlist.text}}</option>
  </select>
  </div>
 </div>
 <div>
  <button type="button"@click="retrievalsearch">retrieve</button>
 </div>
 </div>
 </div>
 </div>
</template>

script

<script>
 import $from "jquery"
 import conf from "./../conf";
 export default {
 data () {
 return {
 formtips:[
 ], tabbtn:"", //Search switch
 cataloglist:[], //Literature selected catalog
 iscataloglist:false, titletype:[
  {text:"title", value:"title"},  {text:"text", value:"text"},  {text:"project", value:"project"},  {text:"person", value:"person"},  {text:"organization", value:"organization"},  {text:"Technology", value:"tech"},  {text:"Region", value:"locaton"},  {text:"country", value:"country"}
 ], titletypeauthor:[{text:"Author", value:"author"}], titletypeauthor2:[{text:"Author Organization", value:"authoruint"}], accuracys:[
  {text:"exact", value:"accurate"},  {text:"blur", value:"blur"}
 ], containlists:[
  {text:"and containing", value:"andwidth"},  {text:"or containing", value:"orwidth"},  {text:"No", value:"nowidth"}, ], timestart:"nolimit", //Retrieval start time
 timeend:"2017", //Retrieval end time
 timestarts:[], //Start time selection array
 timeends:[], //End time selection array
 }
 }, watch:{
 }, created:function () {
 this.init ();
 }, methods:{
 init:function () {
 this.formtips=[
  {
  titletype:"title",  typeinp:"",  accuracy:"accurate",  containlist:"andwidth",  },  {
  titletype:"title",  typeinp:"",  accuracy:"accurate",  containlist:"andwidth",  },  {
  titletype:"title",  typeinp:"",  accuracy:"accurate",  containlist:"andwidth",  },  {
  titletype:"title",  typeinp:"",  accuracy:"accurate",  containlist:"andwidth",  }
 ];
 this.timestarts=[
  {text:"Unlimited", value:"nolimit"},  {text:"2016", value:"2016"},  {text:"2015", value:"2015"},  {text:"2014", value:"2014"},  {text:"2013", value:"2013"},  {text:"2012", value:"2012"},  {text:"2011", value:"2011"}, ];
 this.timeends=[
  {text:"2017", value:"2017"},  {text:"2016", value:"2016"},  {text:"2015", value:"2015"},  {text:"2014", value:"2014"},  {text:"2013", value:"2013"},  {text:"2012", value:"2012"},  {text:"2011", value:"2011"}, ]
 }, addplus:function () {
 if (this.tabbtn == "") {
  this.formtips.push ({
  titletype:"title",  typeinp:"",  accuracy:"accurate",  containlist:"andwidth",  });
  this.formtips.push ({
  titletype:"title",  typeinp:"",  accuracy:"accurate",  containlist:"andwidth",  });
 } else {
  this.formtips.push ({
  titletype:"author",  typeinp:"",  accuracy:"accurate",  containlist:"andwidth",  });
  this.formtips.push ({
  titletype:"authoruint",  typeinp:"",  accuracy:"accurate",  containlist:"andwidth",  });
 }
 }, removeminus:function () {
 this.formtips.splice (-2);
 }, seniorsearch:function (str) {
 if (this.tabbtn!=str) {
  this.tabbtn=str;
  if (this.tabbtn == "") {
  this.formtips=[
  {
  titletype:"title",  typeinp:"",  accuracy:"accurate",  containlist:"andwidth",  },  {
  titletype:"title",  typeinp:"",  accuracy:"accurate",  containlist:"andwidth",  },  {
  titletype:"title",  typeinp:"",  accuracy:"accurate",  containlist:"andwidth",  },  {
  titletype:"title",  typeinp:"",  accuracy:"accurate",  containlist:"andwidth",  }
  ];
  } else {
  this.formtips=[
  {
  titletype:"author",  typeinp:"",  accuracy:"accurate",  containlist:"andwidth",  },  {
  titletype:"authoruint",  typeinp:"",  accuracy:"accurate",  containlist:"andwidth",  },  {
  titletype:"author",  typeinp:"",  accuracy:"accurate",  containlist:"andwidth",  },  {
  titletype:"authoruint",  typeinp:"",  accuracy:"accurate",  containlist:"andwidth",  }
  ]
  }
 }
 }, catalogshow:function () {
 this.iscataloglist =! this.iscataloglist;
 console.log (this.cataloglist);
 }, retrievalsearch:function () {
 let body={
  formtips:this.formtips,  cataloglist:this.cataloglist,  timestart:this.timestart,  timeend:this.timeend
 } //Click to retrieve the transmitted data
 console.log (body);
 }
 }, }
</script>

css

<style scoped>
 /* Temporary style * /
 .retrievalmian {
 margin:20px;
 width:75%;
 }
 /** /
 /*.retrievaltitle{*/
 /* background:#fcfcfc;* /
 /*} * /
 .retrievaltitle .tabbtn:first-child {
 margin-right:-5px;
 }
 .retrievaltitle .tabbtn:hover {
 text-decoration:none;
 }
 .retrievaltitle .tabbtn {
 padding:2px 8px;
 background:#fbfbfb;
 border:1px solid #dfdfdf;
 margin-bottom:-1px;
 }
 .retrievaltitle .tabbtn.checked {
 color:#e50f10;
 padding-top:8px;
 border-bottom:1px solid #fbfbfb;
 }
 .retrievalbar {
 border:1px solid #e5e5e5;
 background:#fcfcfc;
 }
 .formbody {
 position:relative;
 margin:10px 0px;
 }
 .formoperate {
 position:absolute;
 top:10px;
 right:20px;
 }
 .formoperate .tipsicon {
 color:#59a4d2;
 display:inline-block;
 line-height:15px;
 cursor:pointer;
 margin-left:15px;
 width:20px;
 height:20px;
 }
 .formoperate .addplus {
 background:url (../static/img/addplusicon.png) no-repeat center;
 }
 .formoperate .removeminus {
 background:url (../static/img/removeicon.png) no-repeat center;
 }
 .formline {
 padding:5px 30px;
 }
 .formtips {
 display:inline-block;
 margin-bottom:10px;
 margin-right:10px;
 }
 .formgroup {
 display:inline-block;
 }
 .formcontrol {
 border:1px solid #999;
 width:80px;
 height:22px;
 }
 .forminp {
 border:1px solid #146ac4;
 width:120px;
 height:22px;
 }
 .formcontrollarg {
 width:120px;
 height:25px;
 }
 .formsearch {
 position:absolute;
 bottom:10px;
 right:20px;
 }
 .retrievalsearch {
 padding:5px 20px;
 }
 .formgroup .catalog {
 border:1px solid #999;
 width:120px;
 height:22px;
 cursor:pointer;
 background:url (../static/img/dropdown.png) no-repeat;
 background-position:95%45%;
 }
 .cataloghint {
 position:relative;
 }
 .cataloglist {
 position:absolute;
 top:-1px;
 left:0;
 padding:0;
 border:1px solid #999;
 background:#fff;
 z-index:10;
 width:120px;
 }
 .cataloglist li {
 padding:2px 5px;
 }
 .cataloglist li:hover {
 background:#1e90ff;
 }
 .checkbox {
 margin:0px;
 }
</style>

1. In order to ensure that the v-model of the select tag clicked by the plus sign is not the same, the v-model is bound to the v-for item;<divclass="formtips" v-for="(item, index) in formtips">

<selectclass="formcontrol" v-model="item.titletype">

2. When you click the minus sign to make the search condition only one columnThe minus sign disappears<< strong>spanclass ="tipsicon removeminus"@ click ="removeminus"v-show ="formtips.length>= 4"></span> ;;Similarly add conditions to the plus sign,Judging by the length,Limit to increase the search conditions up to 6 columns, the plus sign disappears

3. After clicking Search,Pass selected search criteria

let body={
 formtips:this.formtips, cataloglist:this.cataloglist, timestart:this.timestart, timeend:this.timeend
}

body pass

default

Advanced Search

Author search

Click the minus sign

Filter by three columns,Click to retrieve

Console output,Click to retrieve the value to be passed

  • Previous Java implements TCP server through Socket
  • Next Summary of task scheduling console usage in Laravel