smartsearch/vue/src/views/query/index.vue

<template>
  <div class="query-index">
    <div class="query-index-tree" v-if="showTree">
      <div class="query-index-tree-search">
        <a-input-search
          v-model:value="subjectTrees.searchStr"
          placeholder="主题名称关键字..."
          @search="getSubjectTree"
        />
        <DoubleLeftOutlined @click="showTree=false"/>
      </div>
      <div class="query-index-tree-box">
        <a-tree
          :show-line="true"
          v-model:expandedKeys="subjectTrees.expandedKeys"
          :tree-data="subjectTrees.data"
          @expand="treeOnExpand">
          <template
            #title="{ title, key, subId, fieldCode, fieldId, fieldName, fieldAlias, dataType, subjectName, queryTypeId, dictionaryCode }">
            <div v-if="(fieldAlias)" class="query-index-tree-item"
                 draggable="true"
                 @dragstart="onDragStart($event,{subId, fieldCode, fieldId, fieldName, fieldAlias, dataType, subjectName, queryType:queryTypeId, dictionaryCode})"
            >{{ title }}
            </div>
            <div v-else class="query-index-tree-item">{{ title }}</div>
          </template>
        </a-tree>
      </div>
    </div>
    <div class="query-index-close" v-else>
      <DoubleRightOutlined  @click="showTree=true"/>
    </div>
    <div class="query-index-content">
      <div class="query-index-form">
        <a-form ref="formRef" name="fromQuery"
                class="ant-advanced-search-form"
                :label-col="labelCol"
                :model="formState.temp">
          <a-row :gutter="24" class="query-index-row">
            <a-col :span="6">
              <a-form-item name="tempName"
                           :rules="[{ required: true, message: '请输入模板名称!' }]">
                <template #label>
                  <span>模板名称</span>
                </template>
                <a-input v-model:value="formState.temp.tempName" placeholder="..."/>
              </a-form-item>
            </a-col>
            <a-col :span="6">
              <a-form-item name="tempNo"
                           :rules="[{ required: true, message: '请输入模板编号!' }]">
                <template #label>
                  <span>模板编号</span>
                </template>
                <a-input v-model:value="formState.temp.tempNo" placeholder="..."/>
              </a-form-item>
            </a-col>
            <a-col :span="6">
              <a-form-item name="tempName"
                           :rules="[{ required: true, message: '至少选择一个主题字段!' }]">
                <template #label>
                  <span>主题</span>
                </template>
                <a-input v-model:value="formState.sub.subjectName" placeholder="..." disabled="true"/>
              </a-form-item>
            </a-col>
            <a-col :span="6" style="text-align: left">
              <a-button type="primary" html-type="submit" @click="getQuery">查询预览</a-button>
              <a-button html-type="submit" @click="onFinish" style="margin-left: 10px;">保存模板</a-button>
            </a-col>
            <a-col :span="18">
              <a-form-item name="remark">
                <template #label>
                  <span>备注</span>
                </template>
                <a-input v-model:value="formState.temp.remark" placeholder="..."/>
              </a-form-item>
            </a-col>
            <a-col :span="6" style="text-align: left">
              <a-button type="primary" html-type="submit" @click="getExcel">导出测试</a-button>
            </a-col>
            <a-col :span="24">
              <a-form-item>
                <template #label>
                  <SearchOutlined style="color: #8DC6F9;"/>
                  <span>筛选</span>
                </template>
                <DragWhere ref="where" @change="onChangeWhere" query-type="where"
                           :subjectId="formState.temp.subId"></DragWhere>
              </a-form-item>
            </a-col>

            <a-col :span="24">
              <a-form-item>
                <template #label>
                  <ColumnHeightOutlined style="color: #8DC6F9;"/>
                  <span>维度</span>
                </template>
                <DragBase ref="base" @change="onChangeBase" :subjectId="formState.temp.subId"></DragBase>
              </a-form-item>
            </a-col>

            <a-col :span="24">
              <a-form-item>
                <template #label>
                  <ColumnWidthOutlined style="color: #8DC6F9;"/>
                  <span>度量</span>
                </template>
                <DragMeasure ref="measure" @change="onChangeMeasure" query-type="measure"
                             :subjectId="formState.temp.subId"></DragMeasure>
              </a-form-item>
            </a-col>
          </a-row>
        </a-form>
      </div>
      <div class="query-index-table">
        <a-tabs v-model:activeKey="activeTab" class="query-index-tabs" @change="tabChange">
          <a-tab-pane key="1" tab="列表视图">
            <DisplayTable ref="display" :bases="formState.bases" :measures="formState.measures"
                          @displayChange="onDisplayChange"></DisplayTable>
          </a-tab-pane>
          <a-tab-pane key="2" tab="柱状图" forceRender="true" style="width: 100%;">
            <DisplayChartBar ref="displayChartBar" :bases="formState.bases"
                             :measures="formState.measures"></DisplayChartBar>
          </a-tab-pane>
          <a-tab-pane key="3" tab="曲线图" forceRender="true" style="width: 100%;">
            <DisplayChartLine ref="displayChartLine" :bases="formState.bases"
                              :measures="formState.measures"></DisplayChartLine>
          </a-tab-pane>
          <a-tab-pane key="4" tab="条形图" forceRender="true" style="width: 100%;">
            <DisplayChartYbar ref="displayChartYbar" :bases="formState.bases"
                              :measures="formState.measures"></DisplayChartYbar>
          </a-tab-pane>
        </a-tabs>
      </div>
    </div>
    <ExportData ref="exportData"></ExportData>

    <a-modal v-model:visible="modal.open" title="生成Sql语句成功，调试窗口" width="60%">
      <a-textarea v-model:value="modal.sqlString" placeholder="Basic usage" :rows="20"/>
      <template #footer></template>
    </a-modal>
  </div>
</template>

<script lang="ts">
import {ref, defineComponent} from 'vue';
import type {FormInstance} from 'ant-design-vue';
import {useRoute} from 'vue-router';
import DragWhere from '@/components/basic/query/drag-where.vue'
import DragBase from '@/components/basic/query/drag-base.vue'
import DragMeasure from '@/components/basic/query/drag-measure.vue'
import DisplayTable from '@/components/basic/query/display-table.vue'
import DisplayChartBar from '@/components/basic/query/display-chart-bar.vue'
import DisplayChartYbar from '@/components/basic/query/display-chart-ybar.vue'
import DisplayChartLine from '@/components/basic/query/display-chart-line.vue'
import ExportData from '@/components/basic/query/export-data.vue'
import {save, get, postData} from "@/api/common";
import type {TreeProps} from 'ant-design-vue';

export default defineComponent({
  name: 'queryindex',
  components: {
    DragWhere, DragBase, DragMeasure, DisplayTable,
    DisplayChartBar, DisplayChartLine, DisplayChartYbar, ExportData
  },
  setup() {
    const route = useRoute();
    const expand = ref(false);
    const formRef = ref<FormInstance>();
    const measure = ref<typeof DragMeasure>();
    const base = ref<typeof DragBase>();
    const where = ref<typeof DragWhere>();
    const display = ref<typeof DisplayTable>();
    const displayChartBar = ref<typeof DisplayChartBar>();
    const displayChartLine = ref<typeof DisplayChartLine>();
    const displayChartYbar = ref<typeof DisplayChartYbar>();
    const exportData = ref<typeof ExportData>();

    const activeTab = ref('1');
    const showTree = ref(true);

    const subjectTrees = ref({
      data: [] as TreeProps['treeData'],
      expandedKeys: [''],
      searchStr: ''
    });

    const formState = ref({
      temp: {
        tempId: '',
        tempName: '',
        tempNo: '',
        subId: null,
        remark: '',
      },
      sub: {
        subId: null,
        subjectName: '',
      },
      measures: [],
      wheres: [],
      bases: [],
      pagination: null
    });

    const modal = ref({
      open: false,
      sqlString: null
    });

    const tabChange = (key) => {
      console.log("tabChange", key);
      if (key == "2") {
        setTimeout(function () {
          (displayChartBar.value as any).resize();
        }, 100);
      }
      if (key == "3") {
        setTimeout(function () {
          (displayChartLine.value as any).resize();
        }, 100);
      }
      if (key == "4") {
        setTimeout(function () {
          (displayChartYbar.value as any).resize();
        }, 100);
      }
    }

    const onFinish = () => {
      if (formRef.value == undefined) {
        return;
      }
      formRef.value.validate().then(() => {
        save('temp/save', formStateGet()).then(result => {
          console.log(result);
          getTemp(result["tempId"]);
        });
      });
    }

    const getExcel = async () => {
      if (formState.value.temp.tempId && formState.value.temp.tempId.length > 0) {
        (exportData.value as any).doExport(formState.value.temp.tempId);
      }
    }

    const formStateGet = () => {
      formState.value.measures = (measure.value as any).getTagList();
      formState.value.wheres = (where.value as any).getTagList();
      formState.value.bases = (base.value as any).getTagList();
      //从视图取得翻页数据
      formState.value.pagination = (display.value as any).getPagination();
      console.log("formState", formState.value);
      return formState.value;
    };

    const getQuery = () => {
      postData('temp/genQuery', formStateGet()).then(result => {
        console.log(result);
        if (result["code"] != 0) {
          modal.value.open = true;
          modal.value.sqlString = result["sqlString"];
        }
        //将数据给视图，视图组装并显示
        (display.value as any).setData(result);
        (displayChartBar.value as any).setData(result);
        (displayChartLine.value as any).setData(result);
        (displayChartYbar.value as any).setData(result);
      });
    }

    const onDragStart = (event, obj) => {
      event.dataTransfer.setData("dragData", "-");
      obj.tempFeildId = new Date().getTime() + '';
      window["dragData"] = obj;
      console.log("onDragStart", obj);
    }
    const getSubjectTree = async function () {
      //loading.value = true;
      subjectTrees.value.data = await get('temp/getSubjectTree', {tabName: subjectTrees.value.searchStr});
      //计算第一个展开节点
      subjectTrees.value.expandedKeys = [];
      if (subjectTrees.value.data && subjectTrees.value.data.length > 0) {
        subjectTrees.value.expandedKeys.push(subjectTrees.value.data[0].key + "");
        subjectTrees.value.data[0].children?.forEach((it) => {
          subjectTrees.value.expandedKeys.push(it.key + "");
        });
      }
      console.log("getSubjectTree", subjectTrees.value, subjectTrees.value.expandedKeys);
    }
    getSubjectTree();

    const treeOnExpand = function (eKeys, args) {
      console.log(eKeys, args);
      if (args.node.parent == undefined) {
        subjectTrees.value.expandedKeys = [args.node.key];
      }
    }
    const getTemp = async function (tempId) {
      const rtn = await get('temp/get', {tempId: tempId});
      console.log(rtn);
      formState.value.temp = rtn.temp;
      formState.value.sub = rtn.sub;
      formState.value.bases = rtn.bases;
      formState.value.wheres = rtn.wheres;
      formState.value.measures = rtn.measures;

      setTimeout(displayReader, 100);

      (measure.value as any).setTagList(rtn.measures);
      (where.value as any).setTagList(rtn.wheres);
      (base.value as any).setTagList(rtn.bases);

      subjectTrees.value.expandedKeys = [];
      subjectTrees.value.expandedKeys.push(rtn.sub.subId);
    }

    const onChangeMeasure = (list, obj) => {
      console.log("onChangeMeasure", arguments, list, obj);
      formState.value.measures = list;
      displayReader();
      checkSubjectId(obj);
    }
    const onChangeWhere = (list, obj) => {
      console.log("onChangeWhere", arguments, list, obj);
      formState.value.wheres = list;
      displayReader();
      checkSubjectId(obj);
    }
    const onChangeBase = (list, obj) => {
      console.log("onChangeBase", arguments, list, obj);
      formState.value.bases = list;
      displayReader();
      checkSubjectId(obj);
    }

    const onDisplayChange = (pagination) => {
      //视图发起数据查询，如翻页
      console.log("onDisplayChange", pagination);
      formState.value.pagination = pagination;
      getQuery();
    }

    function displayReader() {
      //初始化视图显示
      console.log("displayReader", display.value);
      console.log("displayReader", display.value, displayChartBar.value);
      (display.value as any).reader();
      (displayChartBar.value as any).reader();
      (displayChartLine.value as any).reader();
      (displayChartYbar.value as any).reader();
    }

    const checkSubjectId = (obj) => {
      if (formState.value.temp.subId == null && obj != null) {
        formState.value.temp.subId = obj.subId;
        formState.value.sub.subId = obj.subId;
        formState.value.sub.subjectName = obj.subjectName;
      }
      if (formState.value.bases.length + formState.value.measures.length + formState.value.wheres.length <= 0) {
        formState.value.temp.subId = null;
        formState.value.sub.subId = null;
        formState.value.sub.subjectName = '';
      }
      console.log("formState.value.temp.subId", formState.value.temp.subId)
    }

    const labelCol = {style: {width: '100px'}};
    return {
      route,
      expand,
      showTree,
      onFinish,
      formRef,
      formState,
      labelCol,
      measure,
      where,
      base,
      activeTab,
      display,
      displayChartBar,
      displayChartLine,
      displayChartYbar,
      tabChange,
      onChangeMeasure,
      onChangeWhere,
      onChangeBase,
      onDragStart,
      checkSubjectId,
      getQuery,
      getTemp,
      getExcel,
      exportData,
      treeOnExpand,
      subjectTrees,
      getSubjectTree,
      modal,
      displayReader,
      onDisplayChange
    };
  },
  created() {
    if (history.state.params?.tempId) {
      console.log("created", history.state.params?.tempId);
      this.getTemp(history.state.params?.tempId);
    }
  },
  activated() {

  }
});
</script>

<style lang="less" scoped>
.ant-form-item {
  margin: 0 0 10px !important;
}

.ant-form-item-label label {
  width: 100% !important;
  background-color: #2dd36f;
}

.query-index {
  display: flex;
  flex-direction: row;
  height: 100%;
  background-color: white;
}

.query-index-tree {
  min-width: 260px;
  border-right: 2px solid #f2f2f2;
  margin-right: 5px;
}

.query-index-close {
  width: 15px;
  padding-top: 10px;
  padding-left: 10px;
}

.query-index-content {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  width: 80%;
}

.query-index-form {
  padding: 15px 10px 10px 15px;
}

.query-index-table {
  flex-grow: 1;
}

.query-index-tabs {
  margin-left: 10px;
  margin-right: 10px;
  height: 100%;
}

.tabs-view-content {
  padding: 0px;
}

.query-index-tree-item {
  white-space: nowrap; /*强制span不换行*/
  display: inline-block; /*将span当做块级元素对待*/
  text-overflow: ellipsis; /*超出部分以点号代替*/
}

.query-index-tree-search {
  padding: 5px;
  border-bottom: 2px solid #f2f2f2;
  display: flex;
  align-items: center;
}

.query-index-tree-box {
  padding: 5px;
  padding-top: 10px;
  overflow: auto;
}

.query-index-row {

}
</style>