添加高级查询

src/router/routes/routes-file-four.js

@@ -29,7 +29,7 @@ const authorityRoutes = {
           path: '/',
           name: 'AuthorityHome',
           component: {
-            render(c) {
+            render (c) {
               return c('router-view')
             }
           },
@@ -91,7 +91,7 @@ const roleRoutes = {
           path: '/',
           name: 'AuthorityRoleHome',
           component: {
-            render(c) {
+            render (c) {
               return c('router-view')
             }
           },
@@ -142,7 +142,7 @@ const accountRoutes = {
           path: '/account',
           name: 'accountHome',
           component: {
-            render(c) {
+            render (c) {
               return c('router-view')
             }
           },
@@ -180,4 +180,25 @@ const accountRoutes = {
   ]
 }
 
-export default [authorityRoutes, roleRoutes, accountRoutes]
+//高级查询
+const advanceRoutes = {
+  path: '/advance',
+  component: Layout,
+  children: [
+    {
+      path: '/advance',
+      component: () => import('@/views/advancedQuery/index.vue'),
+      meta: { title: '高级查询', icon: 'dataParser', imgstyle: 'ic_list_nav_search_default.png', imgstyleup: 'ic_list_nav_search_check.png' },
+      children: [
+        {
+          path: '/advance',
+          name: 'advance',
+          component: () => import('@/views/advancedQuery/views/advancedHome.vue'),
+          meta: { title: '高级查询' }
+        }
+      ]
+    },
+  ]
+}
+
+export default [authorityRoutes, roleRoutes, accountRoutes, advanceRoutes]

src/views/advancedQuery/index.vue

@@ -0,0 +1,3 @@
+<template>
+  <router-view></router-view>
+</template>

src/views/advancedQuery/views/advancedHome.vue

@@ -0,0 +1,184 @@
+<template>
+  <div class="advance">
+    <div class="advance__head flex">
+      <div class="flex-wrap interfaceLog_head_time">
+        <div class="manageTitle">高级查询</div>
+        <div class="interfaceLog_head_time_start mr10">
+          <el-date-picker v-model="timeStart" size="small" type="datetime" placeholder="选择开始日期时间" default-time="00:00:00">
+          </el-date-picker>
+        </div>
+        <div class="interfaceLog_head_time_end">
+          <el-date-picker v-model="timeEnd" size="small" type="datetime" placeholder="选择结束日期时间" default-time="00:00:00">
+          </el-date-picker>
+        </div>
+      </div>
+      <Search @getSearchData="getSearchData" @clearSearchData="clearSearchData" :isTitle="false" :isSlot="true">
+        <div class="flex-wrap">
+          <button class="btnAn">高级查询</button>
+          <div @click="show" class="setting"></div>
+        </div>
+      </Search>
+    </div>
+    <!--表格-->
+    <div v-loading="loading" element-loading-text="拼命加载中" element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0.8)" class="advance__table">
+      <el-table ref="table" max-height="100%" show-summary class="table" :data="tableData" border stripe height="calc(100vh - 155px)" style="width: 100%">
+        <el-table-column v-for="(item, index) in tableColsCopy" :prop="item.statCode" :label="item.statName" :key="index">
+        </el-table-column>
+      </el-table>
+    </div>
+    <!--列设置-->
+    <Dialog :flag="rowFlag">
+      <div class="rowDialog">
+        <div class="title">列设置</div>
+        <div class="content">
+          <el-checkbox-group v-model="checkList">
+            <el-row :gutter="20">
+              <el-col v-for="(item, index) in tableCols" :key="index" class="ck" :span="6">
+                <el-checkbox :label="item">{{ item.statName }}</el-checkbox>
+              </el-col>
+            </el-row>
+          </el-checkbox-group>
+        </div>
+        <div class="foot right t30">
+          <el-button size="medium" class="r24" @click="onCheck" type="primary">确定</el-button>
+          <el-button size="medium" @click="close">取消</el-button>
+        </div>
+      </div>
+    </Dialog>
+  </div>
+</template>
+
+<script>
+import Search from '@/layout/components/Search';
+import Dialog from "@/layout/components/Dialog";
+import { IntegratedQuery, StatItemsQueryByStatMain } from '@/api/flight';
+export default {
+  name: 'Advance',
+  components: { Search, Dialog },
+  data () {
+    return {
+      loading: false,
+      rowFlag: false,
+      tableData: [],
+      tableColsCopy: [],
+      checkList: [],
+      tableCols: [],
+      timeStart: '',
+      timeEnd: ''
+    }
+  },
+  created () {
+    // this.integratedQuery();
+    // this.statItemsQueryByStatMain();
+  },
+  mounted () {
+    document.querySelector('.interfaceLog_head_time_start .el-input__prefix i').remove()
+    document.querySelector('.interfaceLog_head_time_start .el-input__prefix').innerHTML = '开始：'
+    document.querySelector('.interfaceLog_head_time_end .el-input__prefix i').remove()
+    document.querySelector('.interfaceLog_head_time_end .el-input__prefix').innerHTML = '结束：'
+  },
+  updated () {
+    //table数据更新
+    this.$nextTick(() => {
+      this.$refs.table.doLayout();
+    });
+  },
+  methods: {
+    //查询
+    getSearchData (val) {
+      console.log(val)
+    },
+    //清除查询
+    clearSearchData () {
+
+    },
+    //列设置-确定
+    onCheck () {
+      this.tableColsCopy = _.cloneDeep(this.checkList);
+      const datas = _.sortBy(this.tableColsCopy, (o) => o.showOrder);
+      this.tableColsCopy = datas;
+      this.tableCopy = this.checkList;
+      this.rowFlag = false;
+    },
+    //弹框展开
+    show () {
+      this.tableCopy = this.checkList;
+      this.rowFlag = true;
+    },
+    //弹框关闭
+    close () {
+      this.rowFlag = false;
+      this.checkList = this.tableCopy;
+      this.tableColsCopy = _.cloneDeep(this.checkList);
+    },
+    //综合查询
+    async integratedQuery (obj = {}) {
+      try {
+        this.loading = true
+        const res = await IntegratedQuery(obj)
+        if (res.code === 0) {
+          this.tableData = res.returnData
+          this.loading = false
+        } else {
+          this.$message.error(res.message)
+          this.loading = false
+        }
+      } catch (error) {
+        console.log('出错了', error)
+        this.loading = false
+      }
+    },
+    //表头数据查询
+    async statItemsQueryByStatMain (obj = {}) {
+      try {
+        const res = await StatItemsQueryByStatMain({
+          mainId: 1
+        })
+        if (res.code === 0) {
+          const datas = _.sortBy(res.returnData, (o) => o.showOrder);
+          this.tableCols = datas
+          this.tableColsCopy = _.cloneDeep(this.tableCols)
+          this.checkList = this.tableCols
+        } else {
+          this.$message.error(res.message)
+        }
+      } catch (error) {
+        console.log('出错了', error)
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.advance {
+  padding: 8px;
+  &__head {
+    line-height: 32px;
+    margin-top: 8px;
+    margin-bottom: 16px;
+    .setting {
+      height: 32px;
+      width: 32px;
+      cursor: pointer;
+      background-size: 100% 100%;
+      background: url("../../../assets/departure/ic_setting.png") no-repeat;
+      margin-left: 12px;
+      position: relative;
+      top: 2px;
+    }
+    .mr10 {
+      margin-right: 10px;
+    }
+    ::v-deep .interfaceLog_head_time {
+      .el-input__prefix {
+        left: 10px;
+        color: #101116;
+      }
+      .el-input--prefix .el-input__inner {
+        padding-left: 50px;
+      }
+    }
+  }
+}
+</style>