ZRZYQC/UI2/src/components/OneMap/widgets/QueryTool.vue

<template>
  <div>
    <div class='query' v-drag="'.query .ant-card-head'">
      <a-card v-show='value' title='查询' class='queryPanel'>
        <a-icon slot='extra' class='panelClose' type='close' @click="$emit('input',false)"/>
        <a-input-group compact>
          <a-select v-model='queryType' style='width:45%' @change='selectChange'>
            <a-select-option v-for='(item,index) in list' :key='item.id' :value='item.tablename'>
              {{ item.tablealias }}
            </a-select-option>
          </a-select>

          <a-select v-model='queryList' style='width:50%;margin-left: 3%' @pressEnter='handleSearch'>
            <a-select-option v-for='(item,index) in this.queryLists' :key='item.id' :value='item.queryname'>
              {{ item.chinesename }}
            </a-select-option>
          </a-select>

          <a-select v-if="this.queryList.includes('SF')" @pressEnter='handleSearch' v-model='keyword' style='width:76%;margin-top: 3%'>
            <a-select-option value='是'>
              是
            </a-select-option>
            <a-select-option value='否'>
              否
            </a-select-option>
          </a-select>
          <a-select v-else-if="this.queryList.includes('SY')"  @pressEnter='handleSearch' v-model='keyword' style='width:76%;margin-top: 3%'>
            <a-select-option value='出让'>
              出让
            </a-select-option>
            <a-select-option value='划拨'>
              划拨
            </a-select-option>
            <a-select-option value='转让'>
              转让
            </a-select-option>
            <a-select-option value='作价出资'>
               作价出资
            </a-select-option>
          </a-select>
          <a-input-search v-else allow-clear :loading='isLoading' style='width: 86%;margin-top: 3%' v-model='keyword'
                          @search='handleSearch' :placeholder='placeholder'
                          @pressEnter='handleSearch'/>

          <a-tooltip placement='bottom' v-if="this.queryList.includes('SF')||this.queryList.includes('SY')">
            <template  slot='title'>
              <span>搜索</span>
            </template>
            <a-button  icon="search" style='width: 10%;margin-top: 3%' @click='handleSearch'></a-button>
          </a-tooltip>

          <a-tooltip placement='bottom'>
            <template slot='title'>
              <span>重置</span>
            </template>
            <a-button type='primary' icon='reload' style='width: 10%;margin-top: 3%;margin-left: 2%'
                      @click='reset'></a-button>
          </a-tooltip>
        </a-input-group>
        <template v-if='returntree'>
          <a-list style='margin-top: 20px;' item-layout='horizontal' :data-source='data' :pagination='pagination'>
            <a-collapse :bordered='false'>
              <a-collapse-panel v-for='item in data' :key='item.id' :header='item.name' style='overflow: hidden'>
                <a-list :data-source='item.subInfos'>
                  <a-list-item slot='renderItem' slot-scope='subItem, index' @click='handleCoord(subItem)'>
                    {{ subItem.mainInfo }}
                    <template v-if='subItem.shapeArea !==null'>
                      <span> —— </span>
                      <span>{{ subItem.shapeArea }}</span>
                    </template>
                  </a-list-item>
                </a-list>
                <a-icon slot='extra' type='profile' @click='handleAttributes($event,item)'></a-icon>
              </a-collapse-panel>
            </a-collapse>
          </a-list>
        </template>
        <template v-else>
          <a-list style='margin-top: 20px;' item-layout='horizontal' :data-source='data' :pagination='pagination'>
            <a-list-item slot='renderItem' slot-scope='item, index'>
              <a-list-item-meta @click='handleCoord(item)' :description='item.name'>
                <span slot='title'>{{ item.otherInfo }}</span>
                <a-avatar slot='avatar' class='result' :src='require(`../static/result${index+1}.png`)'>
                </a-avatar>
              </a-list-item-meta>
              <!--          <a-tag color='blue' style='padding-left: 0.5em;'>-->
              <!--            {{ item.layerName }}-->
              <!--          </a-tag>-->
              <!--              <a-button slot='actions' type='primary' ghost size='small' @click='handleDetail(item)'>-->
              <!--                详情-->
              <!--              </a-button>-->
            </a-list-item>
          </a-list>
        </template>
      </a-card>
    </div>
    <locate-by-geoinfo ref='locateByGeoinfo'></locate-by-geoinfo>
    <query-info ref='detail' v-model='infoShow'></query-info>
  </div>

</template>

<script>
import {getAction, httpAction} from '../../../api/manage';
import LocateByGeoinfo from './LocateByGeoinfo';
import QueryInfo from './QueryInfo';


export default {
  name: 'queryTool',
  components: {QueryInfo, LocateByGeoinfo},

  data() {
    return {
      map: '',
      visible: false,
      list: [],               //查询类型下拉列表
      isLoading: false,
      vectorLayer: '',
      queryType: '',
      lastType: '',
      keyword: '',
      returntree: false,
      data: [],
      placeholder: '',
      queryList: '',
      onPage: false,
      queryLists: [],
      pagination: {
        onChange: page => {
          this.pagination.current = page;
          this.onPage = true;
          this.handleSearch();
        },
        disabled: false,
        pageSize: 10,
        total: 0,
        size: 'small',
        current: 1
      },
      infoShow: false
    };
  },
  props: {
    value: {
      type: Boolean,
      default: false,
      required: true
    },
    queryConfigUrl: {
      type: String,
      required: true
    },
    queryUrl: {
      type: String,
      required: true
    }
  },
  watch: {
    value(val) {
      if (val === false) {
        //清空搜索框
        // this.keyword = '';
        this.infoShow = false;
      } else {
      }
    }
  },
  inject: ['basicMap'],
  async created() {
    let {success, result} = await getAction(this.queryConfigUrl, {
      username: this.$store.state.user.info.username,
      topicId: this.basicMap.topicId
    });
    if (success) {
      if (result.length == 0) {
        this.$message.warn('没有查询到配置信息，请联系管理员！');
      } else {
        this.list = result;
        this.queryType = this.list[0].tablename;
        this.placeholder = this.list[0].inputTip;
        this.returntree = this.list[0].returntree == 'true' ? true : false;
        this.queryLists = this.list[0].queryList;
      }
    } else {
      this.$message.warn('没有查询到配置信息，请联系管理员！');
    }
  },
  mounted() {
    this.selectChange()
  },
  methods: {
    async handleSearch() {

      if (this.queryType && this.keyword && this.queryList.length > 0) {
        this.infoShow = false;
        if (this.queryType !== this.lastType) {
          this.pagination.current = 1;
          if (this.lastType != '') {
            this.basicMap.changeLayerVisibleByTableName(this.lastType, false);
          }
        }
        this.basicMap.changeLayerVisibleByTableName(this.queryType, true);

        if (!this.onPage) {
          this.pagination.current = 1;
        }
        this.lastType = this.queryType;
        this.isLoading = true;
        this.pagination.disabled = true;
        // let queryItem = this.list.find((item) => {
        //   return item.tablename === this.queryType;
        // });
        this.onPage = false;

        let {success, message, result} = await getAction(this.queryUrl, {
          queryType: this.queryType,
          queryList: this.queryList,
          returntree: this.returntree,
          queryInfo: this.keyword,
          pageNo: this.pagination.current,
          pageSize: 10
        });
        if (success) {
          this.isLoading = false;
          this.pagination.disabled = false;
          if (result.total === 0 || result === '') {
            this.$message.error('没有查询到信息');
            this.data = [];
            this.pagination.total = 0;
            return;
          }
          this.data = result.records;
          this.pagination.total = result.total;
        } else {
          this.$message.info(message);
        }
      } else {
        this.$message.warn('请输入查询关键字！');
      }
    },
    selectChange(val) {
      let temp = [];
      this.queryList = [];
      temp = this.list.filter((item) => {
        return item.tablename === val;
      });
      this.data = [];
      // this.placeholder = temp[0].inputTip;
      this.returntree = temp[0].returntree == 'true' ? true : false;
      this.queryLists = temp[0].queryList;

    },
    handleCoord(item) {

      this.$refs.locateByGeoinfo.locate(item);
    },
    handleAttributes(event, item) {
      event.stopPropagation();
      this.infoShow = true;
      this.$refs.detail.loadDetail(item.attributes);
    },
    handleDetail(item) {
      this.handleCoord(item);
      this.infoShow = true;
      this.$refs.detail.loadDetail(item.attributes);
    },
    clear() {
      this.$refs.locateByGeoinfo.clear();
    },
    reset() {
      this.data = [];
      this.pagination.total = 0;
      this.infoShow = false;
      this.keyword = '';
      this.clear();
    }
    /*createVectorLayer() {
      if (this.map === '' || this.vectorLayer === '') return
      const vectorSource = new VectorSource();
      this.vectorLayer = new VectorLayer({
        name: 'locMap',
        source: vectorSource,
        style: new Style({
          fill: new Fill({
            color: 'rgba(255, 255, 255, 0.6)',
          }),
          stroke: new Stroke({
            color: '#ff0000',
            lineDash: [6, 6],
            width: 2
          }),
          image: new CircleStyle({
            radius: 7,
            fill: new Fill({
              color: '#ffcc33',
            }),
          }),
        }),
        zIndex: 100
      })
      this.map.addLayer(this.vectorLayer);
    }*/
  }

};
</script>

<style>
.query .queryPanel {
  width: 450px;
  box-shadow: 0 0 5px #357ee5;
  color: #1890ff;
}

.query a > .anticon {
  /* vertical-align: 0.2em; */
}

.ant-list-item:hover {
  background: #e6f7ff;
  cursor: pointer;
}

.query .ant-avatar {
  /* background: url("https://img1.baidu.com/it/u=1159474645,508069395&fm=26&fmt=auto"); */
}

.query .ant-list-item {
  align-items: flex-start;
}

.query .ant-list-item-action {
  margin-left: 10px;
}

.ant-avatar.result > img {
  display: inline-block;
  height: auto;
  width: auto;
}

#queryTool .ant-spin-nested-loading {
  max-height: calc(500px - 48px - 32px - 20px - 24px - 24.5px);
  overflow-y: auto;

}

.query ::-webkit-scrollbar {
  width: 3px !important;
  height: 3px;
}

.query ::-webkit-scrollbar-thumb {
  border-radius: 5px;
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .3);
  background: rgba(24, 144, 255, 0.73);
}

.query .queryPanel .ant-list-item-meta-title {
  width: 230px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

li > div {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

/*.icon-close {*/
/*  cursor: pointer;*/
/*  position: absolute;*/
/*  right: 5px;*/
/*  top: 5px;*/
/*}*/
</style>