smartsearch/vue/src/components/basic/es-result/query-criteria.vue

<template>
  <div v-if="showOverlay" style="position: fixed;top: 0;left: 0;width: 100vw;height: 100vh;background-color: rgba(0, 0, 0, 0.5);z-index: 999;  "></div>
  <div class="query-index">
    <div data-v-step="1" :style="showOverlay && curStepVal==1?'margin:auto;width:660px;padding:10px;  z-index:1000;display:inline-block;height:50px;background:white;':'margin:auto;width: 600px;padding:10px;'" >
      <a-space >
        <QueryHistoryComplete id="keyName" v-model:value="formState.defaultKeyString" style="width: 500px"></QueryHistoryComplete>
        <a-button type="primary" html-type="submit" @click="getQuery">查询</a-button>
        <a-button @click="() => {formRef.resetFields();}" >重置</a-button>
      </a-space>
    </div>
    <v-tour name="queryTour" style="z-index: 1000;"  :steps="steps" :options="myOptions" :callbacks="myCallbacks"></v-tour>
    <a-divider orientation="center" @click="formState.showMoreQuery=!formState.showMoreQuery;" >
      <template v-if="!formState.showMoreQuery" >
        更多查询
        <DoubleRightOutlined rotate="90" />
      </template>
      <template v-else>
        收 起
        <DoubleLeftOutlined rotate="90"/>
      </template>
    </a-divider>
    <div data-v-step="2" v-show="formState.showMoreQuery"
         :style="showOverlay && curStepVal==2?'margin:auto;width:500px;padding:10px 10px 10px 50px;  z-index:1000;display:inline-block;height:390px;background:white;':'margin:auto;width: 500px;padding:10px 10px 10px 50px;'" >
        <a-divider orientation="left" ><b style="color:#4E61D0">1.输入检索控制条件</b></a-divider>
        <a-row :gutter="24">
          <a-col :span="24">
            <div class="col-title">组织单位:</div>
            <a-input v-model:value="formState.org_name_a1" style="width: 400px"></a-input>
          </a-col>
          <a-col :span="24">
            <div class="col-title">作业区/项目部:</div>
            <a-input v-model:value="formState.bz_dwmc" style="width: 400px"></a-input>
          </a-col>
          <a-col :span="24">
            <div class="col-title">井名:</div>
            <a-input v-model:value="formState.well_common_name" style="width: 400px"></a-input>
          </a-col>
          <a-col :span="24">
            <div class="col-title">地层名称:</div>
            <a-input v-model:value="formState.formation_name" style="width: 400px"></a-input>
          </a-col>
        </a-row>
    </div>
    <div data-v-step="3" v-show="formState.showMoreQuery"
         :style="showOverlay && curStepVal==3?'margin:auto;width:500px;padding:10px;  z-index:1000;display:inline-block;min-height:200px;background:white;':'margin:auto;width: 500px;padding:10px;'" >
      <a-divider orientation="left"><b style="color:#4E61D0">2.输入检索内容条件</b></a-divider>
      <a-row :gutter="24">
      <a-col :span="24" class="query-row" v-for="(it,index) in limiters">
        <div class="col-title">
          <a-select v-model:value="it.relation" :options="operTexts" class="operTexts"></a-select>
        </div>
        <a-select v-model:value="it.fields" :options="fieldList" class="operTexts"></a-select>
        <a-input v-model:value="it.value" style="width: 285px"></a-input>
        <img src="~@/assets/images/add.png" @click="addQuery" v-if="index==0"/>
        <img src="~@/assets/images/sub.png" @click="onDelete(index)" v-if="index>0"/>
      </a-col>
    </a-row>
    </div>
  </div>
</template>

<script lang="ts">
import {defineComponent, ref,reactive, watch,getCurrentInstance} from 'vue';
import {type FormInstance, message, type SelectProps} from "ant-design-vue";
import QueryHistoryComplete from '@/components/basic/querylog/history-complete.vue';
import {show} from "dom7";


export default defineComponent({
  name: 'query-criteria',
  methods: {show},
  components: {QueryHistoryComplete},
  props: {
    queryObject: Object,
  },
  emits: [
    "query"
  ],
  setup(props, {emit}) {
    console.log(props);
    const curTour = ref({});
    const steps = reactive([
      {
        target:'[data-v-step="1"]',
        header:{
          title:'<div style="height: 0;border-top: 12px solid transparent; border-bottom: 15px solid transparent;' +
                'border-left: 15px solid transparent;border-right: 12px solid #4c8dff;' +
                'position:absolute;right:364px;top:15px;"></div>' +
                '<div style="width:365px;color: white;background: #4c8dff;display:inline-block;' +
                'font-size: 15px;border-radius:10px 10px 0 0;padding:5px 20px 0 10px;font-weight:bolder;">' +
                '| “一框式”检索<span style="padding-left: 20px;">1/3</span></div>'
        },
        content:'<div style="display:inline-block;width:365px;font-size:14px;color: white;background: #4c8dff;' +
                'border-radius:0 0 10px 10px;padding:5px 15px 0px 15px;position: absolute;top:55px;">' +
                '综合搜索栏，将检索功能浓缩至"一框"中。可直接输入多种类型的' +
                '关键词如井号、井名、生产作业名词到检索框中进行搜索;同时支持输入运算符“大于""等于""少于”“不等于”进行检索词的组合运算<br/>' +
                '<br/>点击“更多查询"可查看更多检索条件</div>',
        params:{
          placement:'right'
        }
      },{
        target:'[data-v-step="2"]',
        header:{
          title:'<div style="height: 0;border-top: 12px solid transparent; border-bottom: 15px solid transparent;' +
                'border-left: 15px solid transparent;border-right: 12px solid #4c8dff;' +
                'position:absolute;right:369px;top:11px;"></div>' +
                '<div style="width:370px;color: white;background: #4c8dff;display: inline-block;font-size: 15px;' +
                'border-radius:10px 10px 0 0;padding:5px 20px 0 10px;font-weight:bolder;">' +
                '| 检索控制条件<span style="padding-left: 205px;">2/3</span></div>',
        },
        content:'<div style="display:inline-block;width:370px;height:50px;font-size:14px;color: white;background: #4c8dff;' +
                'border-radius:0 0 10px 10px;padding:5px 15px 0px 15px;position: absolute;top:50px;">' +
                '可选择控件条件进行查询范围的缩窄<br/></div>',
        params:{
          placement:'right'
        }
      },{
        target:'[data-v-step="3"]',
        header:{
          title:'<div style="height: 0;border-top: 12px solid transparent; border-bottom: 15px solid transparent;' +
                'border-left: 15px solid transparent;border-right: 12px solid #4c8dff;' +
                'position:absolute;right:450px;bottom:11px;"></div>' +
                '<div style="color: white;background: #4c8dff;display: inline;font-size: 15px;' +
                'border-radius:10px 10px 0 0;padding:5px 20px 0 10px;font-weight:bolder;' +
                'position:relative;bottom:198px;">' +
                '| 多个检索项组合查询<span style="padding-left: 250px;">3/3</span></div>',
        },
        content:'<div style="color: white;background: #4c8dff;display: inline;width:450px;font-size: 14px;' +
                'border-radius:0 0 10px 10px;position: absolute;bottom:-89px;padding:5px 15px 0px 15px;">' +
                '1.首先须在下拉框中选择“井号"或“井名"的类别，输入想搜索的井<br/>' +
                '2.再从下拉框中选择其他检索项如“产油量"等，输入该检索项具体<br/>' +
                '要查询的值。例如想查看并号为001的产油量等于100的查询结果。<br/>' +
                '3.支持自由选择检索项间的逻辑关系:<br/>' +
                'AND(与)、OR(或)、NOT(非)<br/><br/>' +
                '举例:<br/>' +
                '1) 检索井名包含12和产油量为100的结果<br/>' +
                '<span style="padding-left: 20px;">检索式: 井名 12 AND 产油量100</span><br/>' +
                '2) 检索井名包含12但不查地形区为益地的结果<br/>' +
                '<span style="padding-left: 20px;">检索式: 井名 12 NOT 地形区 盆地</span><br/>' +
                '3) 检索井名为12-12或12-44的31<br/>' +
                '<span style="padding-left: 20px;">检索式: 井名 12-12 0R 井名 12-44</span></div>',
        params:{
          placement:'right'
        }
      }
    ]);
    const myOptions = reactive({
      dialogVisible:false,
      useKeyboardNavigation:false,
      labels:{
        buttonSkip:' 跳过引导 ',
        buttonPrevious:' 上一步 ',
        buttonNext:'下一步 ',
        buttonStop:' 明白了 '
      }
    });

    const curStepVal = ref(1);
    const showOverlay = ref<boolean>(false);

    const myCallbacks = ref({
      onPreviousStep(){
        curStepVal.value -= 1;
        loadStyle();
      },
      onNextStep(){
        curStepVal.value += 1;
        loadStyle();
      },onStop:async function(){
        curStepVal.value = 1;
        showOverlay.value = false;
        const $input = document.getElementById('keyName');
        $input?.focus();
      }
    });



    const limiters = ref([{
      fields: '',
      value: '',
      opreation: '等于',
      relation: 'AND'
    }]);
    const formState = ref(Object.assign({}, {
      page: 1, rows: 10, showMoreQuery: false,
      well_common_name: '',
      bz_dwmc: '',
      formation_name: '',
      org_name_a1: '',
      defaultField: '',
      defaultKeyString: '',
      operation: 'AND'
    }, props.queryObject?.formState));

    watch(
      () => props.queryObject,
      () => {
        if (props.queryObject != null) {
          formState.value = Object.assign({}, {
            page: 1, rows: 10, showMoreQuery: true,
            well_common_name: '',
            bz_dwmc: '',
            formation_name: '',
            org_name_a1: '',
            defaultField: '',
            defaultKeyString: '',
            operation: 'AND'
          }, props.queryObject.formState);
          limiters.value = props.queryObject.limiters.length > 0 ? props.queryObject.limiters : [{
            field: '',
            keyString: '',
            operation: 'AND'
          }];
        }
      }, {}
    );

    function loadStyle(){
      setTimeout(()=>{
        const $divs = document.getElementsByClassName("v-step__buttons");
        for(let i=0;i < $divs.length;i++) {
          const div = $divs[i];
          if(curStepVal.value==3){
            div.setAttribute("style","background-color:#4c8dff;color:white;height:30px;width:100%;" +
              "position: relative;top:-201px;padding-top:4px;");
          }else{
            div.setAttribute("style","background-color:#4c8dff;color:white;height:30px;width:100%;" +
              "position: relative;top:-1px;padding-top:4px;");
          }
        }
        const $buttons = document.getElementsByClassName("v-step__button");
        for(let i=0;i < $buttons.length;i++) {
          const button = $buttons[i];
          button.setAttribute("style","border:1px solid white;margin:0 10px 0 20px;padding:0 4px 0 4px;border-radius:5px;");
        }
      },1);
    }

    const formRef = ref<FormInstance>();

    const operTexts = [
      {value: 'AND', label: 'AND'},
      {value: 'OR', label: 'OR'},
      {value: 'NOT', label: 'NOT'}
    ] as SelectProps['options'];

    const fieldList = [
      {value: 'well_id', label: '井号'},
      {value: 'well_common_name', label: '井名'},
      {value: 'well_purpose', label: '井别'}
    ] as SelectProps['options'];

    function addQuery() {
      limiters.value.push({fields: '', value: '', opreation: '等于', relation: 'AND'});
    }

    function onDelete(index) {
      limiters.value.splice(index, 1);
    }

    function getQuery() {

      if(showOverlay.value){
        message.warn('请退出引导状态再进行操作！');
        return false;
      }
      showOverlay.value = false;

      //组装查询条件
      let queryObject = {
        queryList: [] as any,
        limiters: [] as any,
        formState: Object,
        page: 0,
        limit: 10
      };

      //多个值测试，如 组织单位 in 哪些值
      queryObject.formState = formState.value;
      queryObject.limiters = limiters.value;
      console.log(queryObject);
      emit('query', queryObject);
    }

    return {
      formState, limiters, operTexts, fieldList, addQuery, onDelete, getQuery, formRef,
      steps,myOptions,curTour,curStepVal,showOverlay,loadStyle,myCallbacks
    };
  },
  mounted(){
    this.curTour = getCurrentInstance()?.appContext.config.globalProperties.$tours;
    if(this.curTour && this.curTour['queryTour'] && this.formState.showMoreQuery){
      const localData = localStorage.getItem('queryTourShow');
      const curTour = localData?JSON.parse(localData):null;
      if(curTour==null||!curTour.ifShowed){
        (this.curTour['queryTour'] as any).start();
        this.showOverlay = true;
        const curLocalData = JSON.stringify({ifShowed:true});
        localStorage.setItem('queryTourShow',curLocalData);
      }
    }

  },
  beforeMount() {
    this.loadStyle();
  }
});
</script>

<style lang="less" scoped>

.query-index {
  display: flex;
  flex-direction: column;
  height: 100%;
  background-color: white;
  overflow: hidden;
  position: relative;
}

.leftTriangle{
  height: 0;
  border-top: 12px solid transparent;
  border-bottom: 15px solid transparent;
  border-left: 15px solid transparent;
  border-right: 12px solid #4c8dff;
}

.tips{
  color: white;
  background: #4c8dff;
  display: inline-block;
  font-size: 14px;
  border-radius:0 0 10px 10px;
  padding:5px 15px 0px 15px;
}

.ant-row {

  .ant-col {
    margin: 10px 0px;

    .col-title {
      width: 120px;
      text-align: left;
      float: left;
    }
  }

  .query-row {
    display: flex;

    img {
      margin-left: 5px;
    }
  }
}

.operTexts {
  width: 80px;
}
</style>