xiaoshi_system/src/views/components/import/conditionImport/AdvancedSearch.vue

<template>
  <div class="advancedSearch">
    <div>
        <el-input type="textarea" v-model="condition" :rows="3" placeholder='高级检索语句，例：TI=(石墨烯 NOT 石墨烯薄膜 OR "graphene film") AND AD=2018 AND GD=20180205~20190101'></el-input>
        <div style="display:flex;justify-content: flex-end;margin-top:20px">
            <el-button type="danger" plain size="small" style="width:100px" @click="cancel">清空</el-button>
            <el-button type="primary" size="small" style="width:100px" @click="search">检索</el-button>
        </div>
    </div>
    <div>
        <div>
            <div><b>表达式与语法：</b></div>
            检索条件表达式，可支持AND、OR、NOT等逻辑运算符号(不区分大小写)和等于（=）比较符号，其中:<br>
            1、日期栏位的值支持yyyy. yyyyMM、 yyyyMMdd等格式;已知时间的连续范围为“2006-02-02”到“2009-01-01”，应输入：<span class="red">AD=20060202~20090101</span>；注意：日期的范围检索必须精确到日。<br>
            2、专利类型（PT）栏位的值包括:1、8 为发明 检索发明，2、9 为新型，3 为外观（注意:仅中国专利）；例：<span class="red">PT=1</span><br>
            3、法律状态(LG)栏位的值包括:1：有效、2：失效、3：审中(注意:仅中国专利)；例：<span class="red">LG=1</span><br>
            4、国家〔地区）相关栏位的值为国家地区代码，需要大写，例如:CN代表中国、US代表美国、JP代表日本等;<br>
            5、搜索条件中有空格把整个搜索条件前后加上英文双引号，例如:<span class="red">TI=(石墨烯 NOT 石墨烯薄膜 OR "graphene film") AND AD=2018 AND GD=20180205~20190101</span>;<br>
        </div>
        <div>
            <div><b>检索栏位包括：</b></div>
            <div class="field">
                <p v-for="item in field.filter(item=>{return item.type != (this.DBType=='WD'?1:2)})" :key="item.label"><span style="color:red">{{ item.value }}</span>：{{ item.label }}</p>
            </div>
            <div><b>省市代码（仅中国专利）：</b></div>
            <div v-html="changeRed('province')">
               
            </div>
            <div><b>国别代码：</b></div>
            <div style="display:flex;flex-wrap:wrap;justify-content: space-between;">
                <span v-for="(item) in countryList" :key="item.value"><span class="red">{{ item.value }}</span>&nbsp;{{ item.label }}&nbsp;&nbsp;</span>
            </div>
        </div>
    </div>
  </div>
</template>

<script>
export default {
    name:'AdvancedSearch',
  components: {},
  props:['countryList','DBType','editData'],
  data() {
    return {
        condition:'',
        field:this.$constants.searchField,
    };
  },
  watch: {
  },
  computed: {},
  
  created() {},
  mounted() {
    this.field = [].concat(...this.field.map(item=>{return item.children}))
    if(this.editData && this.editData.component == 'AdvancedSearch'){
      if(this.editData.data){
        this.$set(this,'condition',this.editData.data)
      }     
    }
  },
  methods: {
    changeRed(val){
        if(val == 'province'){
            var str = ' 北京 12 天津 13 河北 14 山西 15 内蒙 21 辽宁 22 吉林 23 黑龙江 31 上海 32 江苏 33'
                    +'浙江 34 安徽 35 福建 36 江西 37 山东 41 河南 42 湖北 43 湖南 44 广东 45 广西 51 四' 
                    +'川 52 贵州 53 云南 54 西藏 61 陕西 62 甘肃 63 青海 64 宁夏 65 新疆 66 海南 71 台'
                    +'湾 81 广州 83 武汉 85 重庆 87 西安 89 沈阳 91 大连 93 哈尔滨 94 深圳 95 青岛 97 宁'
                    +'波 HK 香港'
            var regx = new RegExp("[0-9A-Z]+", "g")
        }
        return "<span style='color:red'>11 </span>"+str.replace(regx,"<span style='color:red'>&nbsp;&nbsp; $& </span>")
    },
    cancel(){
        this.condition = ''
    },
    search(){
        var a = this.condition
        // if(a.trim().indexOf('(')!=0){
        //     a = `${a}`
        // }
        var params = {
            DBType:this.DBType,
            component:'AdvancedSearch'
        }
        this.$emit('search',a.trim(),params)
    },
  },
};
</script>
<style lang="scss" scoped>
.advancedSearch{
    padding: 10px;
}
.field{
    display: flex;
    flex-wrap:wrap;
    p{
        width:200px;
        margin:5px;
    }
}
.red{
    color:red
}
</style>