数据检索筛选功能修改完成

src/api/dataSearch.js

@@ -1,5 +1,23 @@
 import request from '@/utils/request'
 
+// 菜单
+export function getMenu(query) {
+  return request({
+    url: '/search/mult.htm',
+    method: 'get',
+    params: query
+  })
+}
+
+// 获取航次和数据样品集列表
+export function getDataList(query) {
+  return request({
+    url: '/search/result.htm',
+    method: 'get',
+    params: query
+  })
+}
+
 // 获取航次列表
 export function getDataSearch(query) {
   return request({

src/views/dataSearch.vue

@@ -2,15 +2,21 @@
   <div class="shuju">
     <div class="shuju_con">
       <div v-show="show == false" class="left">
+        <div class="tags">
+          <span class="tag" v-if="menu1">航次名称：{{ menu1 }} <i class="el-icon-close" @click="menu1 = ''"></i></span>
+          <span class="tag" v-if="menu2">平台类型：{{ menu2 }} <i class="el-icon-close" @click="menu2 = ''"></i></span>
+          <span class="tag" v-if="menu3">设备类型：{{ menu3 }} <i class="el-icon-close" @click="menu3 = ''"></i></span>
+          <span class="tag" v-if="menu4">数据样品类型：{{ menu4 }} <i class="el-icon-close" @click="menu4 = ''"></i></span>
+        </div>
         <div class="left1">
           <div class="xiala">
             <el-select v-model="searchTypeValue" placeholder="">
-              <el-option v-for="(item, index) in searchType" :key="index" :label="item" :value="item" />
+              <el-option v-for="(item, index) in searchType" :key="index" :label="item.label" :value="item.label" :disabled="item.disabled" />
             </el-select>
           </div>
           <el-input v-model="searchValue" placeholder="" />
           <el-button class="sousuo" type="primary" icon="el-icon-search" @click="getSearch" />
-          <el-button v-if="menuShow" class="caidan" type="default" icon="el-icon-s-operation" @click="openDialog" />
+          <el-button v-if="menuShow" class="caidan" type="default" icon="el-icon-s-operation" @click="handleMenu" />
         </div>
         <div class="left3">
           <el-radio-group v-model="radio">
@@ -18,6 +24,30 @@
             <el-radio label="航次">航次</el-radio>
           </el-radio-group>
         </div>
+        <div class="left4" v-if="searchTypeValue == '航次名称' && menuList1.length">
+          <div class="list">
+            <div class="list-title">请选择航次名称</div>
+            <div class="list-value" v-for="(item,index) in menuList1" :key="index" @click="selectMenu1(item)">{{ item.name }}</div>
+          </div>
+        </div>
+        <div class="left4" v-if="searchTypeValue == '平台类型' && menuList2.length">
+          <div class="list">
+            <div class="list-title">请选择平台类型</div>
+            <div class="list-value" v-for="(item,index) in menuList2" :key="index" @click="selectMenu2(item)">{{ item.name + '(' + item.value + ')' }}</div>
+          </div>
+        </div>
+        <div class="left4" v-if="searchTypeValue == '设备类型' && menuList3.length">
+          <div class="list">
+            <div class="list-title">请选择设备类型</div>
+            <div class="list-value" v-for="(item,index) in menuList3" :key="index" @click="selectMenu3(item)">{{ item.name + '(' + item.value + ')' }}</div>
+          </div>
+        </div>
+        <div class="left4" v-if="searchTypeValue == '数据样品类型' && menuList4.length">
+          <div class="list">
+            <div class="list-title">请选择数据样品类型</div>
+            <div class="list-value" v-for="(item,index) in menuList4" :key="index" @click="selectMenu4(item)">{{ item.name + '(' + item.value + ')' }}</div>
+          </div>
+        </div>
         <div class="left4" v-if="radio == '数据样品集'">
           <div v-for="(item, index) in dataList" :key="index" class="left4_1" @click="openList(item)">
             <div class="left4_top">
@@ -118,101 +148,17 @@
         <img class="logo" src="../../static/images/logo_map.png" alt="" @click="goHome" />
       </div>
     </div>
-    <!--  航次名称弹窗-->
-    <el-dialog title="请选择航次" :visible.sync="dialog1" width="1000px" :before-close="handleClose1">
-      <el-table ref="tableData1" stripe border :data="tableData1" @selection-change="handleSelectionChange"
-        :header-cell-style="{ background: '#dddfe6', color: '#555960', textAlign: 'center' }"
-        :cell-style="{ textAlign: 'center' }">
-        <el-table-column type="index" label="#" width="50" />
-        <el-table-column type="selection" width="50" align="center" />
-        <el-table-column prop="voyage_name" label="航次名称" />
-        <el-table-column prop="ship_name" label="科考船舶" />
-        <el-table-column prop="voyage_start_date" label="离岗日期">
-          <template slot-scope="scope">
-            <span>{{ scope.row.voyage_start_date.slice(0, 10) }}</span>
-          </template>
-        </el-table-column>
-        <el-table-column prop="voyage_end_date" label="返岗日期">
-          <template slot-scope="scope">
-            <span>{{ scope.row.voyage_end_date.slice(0, 10) }}</span>
-          </template>
-        </el-table-column>
-        <el-table-column prop="voyage_officer" label="首席" />
-        <el-table-column prop="member_total" label="参航人数" />
-        <el-table-column prop="funding_org" label="资助机构" />
-        <el-table-column prop="funding_code" label="资助编号" />
-      </el-table>
-      <div class="pagination-box">
-        <el-pagination background :page-sizes="[10, 20, 30]" :page-size="params1.limit"
-          layout="total, sizes, prev, pager, next, jumper" :total="total1" :current-page="pageNum1"
-          @size-change="handleSizeChange1" @current-change="handleCurrentChange1" />
-      </div>
-    </el-dialog>
-    <!--  平台类型弹窗-->
-    <el-dialog title="请选择平台" :visible.sync="dialog2" width="1200px" :before-close="handleClose2">
-      <el-table ref="tableData2" stripe border :data="tableData2" @selection-change="handleSelectionChange"
-        :header-cell-style="{ background: '#dddfe6', color: '#555960', textAlign: 'center' }"
-        :cell-style="{ textAlign: 'center' }">
-        <el-table-column type="index" label="#" width="50" />
-        <el-table-column type="selection" width="50" align="center" />
-        <el-table-column prop="platform_name" label="平台类型名称" />
-        <el-table-column prop="platform_eng" label="英文类型名称" />
-        <el-table-column prop="platform_alias" label="别名" />
-        <el-table-column prop="platform_order" label="排序" width="50" />
-        <el-table-column prop="platform_group" label="分组" />
-        <el-table-column prop="create_time" label="创建时间" />
-      </el-table>
-      <div class="pagination-box">
-        <el-pagination background :page-sizes="[10, 20, 30]" :page-size="params2.limit"
-          layout="total, sizes, prev, pager, next, jumper" :total="total2" :current-page="pageNum2"
-          @size-change="handleSizeChange2" @current-change="handleCurrentChange2" />
-      </div>
-    </el-dialog>
-    <!--  设备类型弹窗-->
-    <el-dialog title="请选择设备" :visible.sync="dialog3" width="1200px" :before-close="handleClose3">
-      <el-table ref="tableData3" stripe border :data="tableData3" @selection-change="handleSelectionChange"
-        :header-cell-style="{ background: '#dddfe6', color: '#555960', textAlign: 'center' }"
-        :cell-style="{ textAlign: 'center' }">
-        <el-table-column type="index" label="#" width="50" />
-        <el-table-column type="selection" width="50" align="center" />
-        <el-table-column prop="equipment_name" label="设备类型名称" width="300" />
-        <el-table-column prop="equipment_eng" label="英文名称" width="350" />
-        <el-table-column prop="equipment_alias" label="别名" width="100" />
-        <el-table-column prop="equipment_order" label="排序" width="50" />
-        <el-table-column prop="equipment_group" label="分组" />
-        <el-table-column prop="create_time" label="创建时间" width="160" />
-      </el-table>
-      <div class="pagination-box">
-        <el-pagination background :page-sizes="[10, 20, 30]" :page-size="params3.limit"
-          layout="total, sizes, prev, pager, next, jumper" :total="total3" :current-page="pageNum3"
-          @size-change="handleSizeChange3" @current-change="handleCurrentChange3" />
-      </div>
-    </el-dialog>
-    <!--  数据样品类型弹窗-->
-    <el-dialog title="请选择数据样品类型" :visible.sync="dialog4" width="1200px" :before-close="handleClose4">
-      <el-table ref="tableData4" stripe border :data="tableData4" @selection-change="handleSelectionChange"
-        :header-cell-style="{ background: '#dddfe6', color: '#555960', textAlign: 'center' }"
-        :cell-style="{ textAlign: 'center' }">
-        <el-table-column type="index" label="#" width="50" />
-        <el-table-column type="selection" width="50" align="center" />
-        <el-table-column prop="data_name" label="数据样品类型类型名称" width="300" />
-        <el-table-column prop="data_eng" label="英文名称" width="350" />
-        <el-table-column prop="data_alias" label="别名" width="100" />
-        <el-table-column prop="data_order" label="排序" width="50" />
-        <el-table-column prop="data_group" label="分组" />
-        <el-table-column prop="create_time" label="创建时间" width="160" />
-      </el-table>
-      <div class="pagination-box">
-        <el-pagination background :page-sizes="[10, 20, 30]" :page-size="params4.limit"
-          layout="total, sizes, prev, pager, next, jumper" :total="total4" :current-page="pageNum4"
-          @size-change="handleSizeChange4" @current-change="handleCurrentChange4" />
-      </div>
-    </el-dialog>
   </div>
 </template>
 
 <script>
-import { getDataSearch, voyageNameList, PlatformTypeList, equipmentTypeList, dataTypeList, dataPoints, sampleLineList, sampleStationList } from '../api/dataSearch'
+import {
+  getMenu,
+  getDataList,
+  dataPoints,
+  sampleLineList,
+  sampleStationList
+} from '../api/dataSearch'
 import { getParamsList, getVoyageLine } from '../api/home'
 import Cookies from 'js-cookie'
 const Cesium = window.Cesium
@@ -223,49 +169,45 @@ export default {
       show: false,
       viewer: null,
       color: [Cesium.Color.RED, Cesium.Color.GREEN, Cesium.Color.BLUE, Cesium.Color.CHARTREUSE, Cesium.Color.DARKBLUE],
-      searchType: ['航次名称', '平台类型', '平台名称', '设备类型', '数据样品类型', '数据集名称', '航次首席'],
+      searchType: [
+        {
+          label: '航次名称',
+          disabled: false
+        },
+        {
+          label: '平台类型',
+          disabled: false
+        },
+        {
+          label: '平台名称'
+        },
+        {
+          label: '设备类型',
+          disabled: false
+        },
+        {
+          label: '数据样品类型',
+          disabled: false
+        },
+        {
+          label: '数据集名称'
+        },
+        {
+          label: '航次首席'
+        }
+      ],
       searchTypeValue: '航次名称',
       radio: '航次',
+      menu1: '',
+      menu2: '',
+      menu3: '',
+      menu4: '',
+      menuList1: [],
+      menuList2: [],
+      menuList3: [],
+      menuList4: [],
       dataList: [],
       searchValue: '',
-      dialog1: false,
-      params1: {
-        start: 0,
-        limit: 10,
-        group: 10
-      },
-      pageNum1: 1,
-      tableData1: [],
-      total1: 0,
-      dialog2: false,
-      params2: {
-        start: 0,
-        limit: 10,
-        group: 10
-      },
-      pageNum2: 1,
-      tableData2: [],
-      total2: 0,
-      dialog3: false,
-      params3: {
-        start: 0,
-        limit: 10,
-        group: 10
-      },
-      pageNum3: 1,
-      tableData3: [],
-      total3: 0,
-      dialog4: false,
-      params4: {
-        start: 0,
-        limit: 10,
-        group: 10
-      },
-      pageNum4: 1,
-      tableData4: [],
-      total4: 0,
-      // 多选选中的数据id
-      ids: [],
       menuShow: true,
       currenId: null,
       fold: false,
@@ -286,19 +228,7 @@ export default {
   },
   watch: {
     radio(val) {
-      const type = this.searchTypeValue
+      this.dataList = []
-      const isType = type == '航次名称' || type == '平台类型' || type == '设备类型' || type == '数据样品类型'
-      const isQuery = this.searchValue
-      const isIds = this.ids.length
-      if (isQuery) {
-        this.getList()
-      } else {
-        if (isType && isIds) {
-          this.getListIds()
-        } else {
-          this.dataList = []
-        }
-      }
     },
     searchTypeValue(val) {
       if (val == '航次名称' || val == '平台类型' || val == '设备类型' || val == '数据样品类型') {
@@ -306,7 +236,35 @@ export default {
       } else {
         this.menuShow = false
       }
-    }
+    },
+    menu1(val) {
+      if (val) {
+        this.searchType[0].disabled = true
+      } else {
+        this.searchType[0].disabled = false
+      }
+    },
+    menu2(val) {
+      if (val) {
+        this.searchType[1].disabled = true
+      } else {
+        this.searchType[1].disabled = false
+      }
+    },
+    menu3(val) {
+      if (val) {
+        this.searchType[3].disabled = true
+      } else {
+        this.searchType[3].disabled = false
+      }
+    },
+    menu4(val) {
+      if (val) {
+        this.searchType[4].disabled = true
+      } else {
+        this.searchType[4].disabled = false
+      }
+    },
   },
   methods: {
     // 获取从参数列表
@@ -323,20 +281,83 @@ export default {
         }
       })
     },
+    // 获取菜单
+    handleMenu() {
+      this.dataList = []
+      getMenu({
+        start: 0,
+        limit: 10000,
+        search_type: this.searchTypeValue,
+        return_type: this.radio,
+        voyage_name: this.menu1,
+        platform_type: this.menu2,
+        equipment_type: this.menu3,
+        data_type: this.menu4
+      }).then(res => {
+        if (this.searchTypeValue === '航次名称') {
+          this.menuList1 = res.page.records
+        } else if (this.searchTypeValue === '平台类型') {
+          this.menuList2 = res.page.records
+        } else if (this.searchTypeValue === '设备类型') {
+          this.menuList3 = res.page.records
+        } else if (this.searchTypeValue === '数据样品类型') {
+          this.menuList4 = res.page.records
+        }
+      })
+    },
+    selectMenu1(item) {
+      this.menu1 = item.name
+      this.menuList1 = []
+      this.searchType[0].disabled = true
+      const str = this.searchType.find(item => {
+        return item.disabled !== true
+      })
+      this.searchTypeValue = str.label
+    },
+    selectMenu2(item) {
+      this.menu2 = item.name
+      this.menuList2 = []
+      this.searchType[1].disabled = true
+      const str = this.searchType.find(item => {
+        return item.disabled !== true
+      })
+      this.searchTypeValue = str.label
+    },
+    selectMenu3(item) {
+      this.menu3 = item.name
+      this.menuList3 = []
+      this.searchType[3].disabled = true
+      const str = this.searchType.find(item => {
+        return item.disabled !== true
+      })
+      this.searchTypeValue = str.label
+    },
+    selectMenu4(item) {
+      this.menu4 = item.name
+      this.menuList4 = []
+      this.searchType[4].disabled = true
+      const str = this.searchType.find(item => {
+        return item.disabled !== true
+      })
+      this.searchTypeValue = str.label
+    },
     // 获取左侧航次列表
     getList() {
       this.clearAll()
       this.dataList = []
       const params = {
+        start: 0,
+        limit: 10000,
         search_type: this.searchTypeValue,
         return_type: this.radio,
+        voyage_name: this.menu1,
+        platform_type: this.menu2,
+        equipment_type: this.menu3,
+        data_type: this.menu4,
         search_value: this.searchValue,
-        limit: 20,
-        start: 0,
-        group: 10,
         FrameSessionId: Cookies.get('JSESSIONID')
       }
-      getDataSearch(params).then(res => {
+      getDataList(params).then(res => {
         const arr = res.page.records
         if (this.radio == '航次') {
           this.getVoyagePoints(arr)
@@ -348,10 +369,7 @@ export default {
     },
     // 搜素
     getSearch() {
-      this.ids = []
+      this.getList()
-      if (this.searchValue) {
-        this.getList()
-      }
     },
     // 获取航次坐标点位
     getVoyagePoints(arr) {
@@ -578,152 +596,6 @@ export default {
     toshow() {
       this.show = false
     },
-    // 通过ids获取左侧航次列表
-    getListIds() {
-      this.clearAll()
-      this.dataList = []
-      const params = {
-        search_type: this.searchTypeValue,
-        return_type: this.radio,
-        search_value: this.searchValue,
-        limit: 20,
-        start: 0,
-        group: 10,
-        ids: this.ids.toString()
-      }
-      getDataSearch(params).then(res => {
-        const arr = res.page.records
-        if (this.radio == '航次') {
-          this.getVoyagePoints(arr)
-        }
-        if (this.radio == '数据样品集') {
-          this.getDataPoints(arr)
-        }
-      })
-    },
-    // 多选框选中数据
-    handleSelectionChange(selection) {
-      this.ids = selection.map(item => item.tsy_id)
-    },
-    // 打开搜素弹窗
-    openDialog() {
-      this.ids = []
-      if (this.searchTypeValue == '航次名称') {
-        this.dialog1 = true
-        this.getVoyageNameList()
-      } else if (this.searchTypeValue == '平台类型') {
-        this.dialog2 = true
-        this.getPlatformTypeList()
-      } else if (this.searchTypeValue == '设备类型') {
-        this.dialog3 = true
-        this.getEquipmentTypeList()
-      } else if (this.searchTypeValue == '数据样品类型') {
-        this.dialog4 = true
-        this.getDataTypeList()
-      } else {
-        return false
-      }
-    },
-    // 航次名称弹窗
-    handleClose1() {
-      this.dialog1 = false
-      if (this.ids.length) {
-        this.getListIds()
-      } else {
-        this.dataList = []
-      }
-    },
-    // 获取航次名称列表
-    getVoyageNameList() {
-      voyageNameList(this.params1).then(res => {
-        this.tableData1 = res.page.records
-        this.total1 = Number(res.page.total)
-      })
-    },
-    handleCurrentChange1(val) {
-      this.pageNum1 = val
-      this.params1.start = val * this.params1.limit - this.params1.limit
-      this.getVoyageNameList()
-    },
-    handleSizeChange1(val) {
-      this.params1.limit = val
-      this.getVoyageNameList()
-    },
-    // 平台类型弹窗
-    handleClose2() {
-      this.dialog2 = false
-      if (this.ids.length) {
-        this.getListIds()
-      } else {
-        this.dataList = []
-      }
-    },
-    // 获取平台类型列表
-    getPlatformTypeList() {
-      PlatformTypeList(this.params2).then(res => {
-        this.tableData2 = res.page.records
-        this.total2 = Number(res.page.total)
-      })
-    },
-    handleCurrentChange2(val) {
-      this.pageNum2 = val
-      this.params2.start = val * this.params2.limit - this.params2.limit
-      this.getPlatformTypeList()
-    },
-    handleSizeChange2(val) {
-      this.params2.limit = val
-      this.getPlatformTypeList()
-    },
-    // 设备类型弹窗
-    handleClose3() {
-      this.dialog3 = false
-      if (this.ids.length) {
-        this.getListIds()
-      } else {
-        this.dataList = []
-      }
-    },
-    // 获取设备类型列表
-    getEquipmentTypeList() {
-      equipmentTypeList(this.params3).then(res => {
-        this.tableData3 = res.page.records
-        this.total3 = Number(res.page.total)
-      })
-    },
-    handleCurrentChange3(val) {
-      this.pageNum3 = val
-      this.params3.start = val * this.params3.limit - this.params3.limit
-      this.getEquipmentTypeList()
-    },
-    handleSizeChange3(val) {
-      this.params3.limit = val
-      this.getEquipmentTypeList()
-    },
-    // 数据样品类型弹窗
-    handleClose4() {
-      this.dialog4 = false
-      if (this.ids.length) {
-        this.getListIds()
-      } else {
-        this.dataList = []
-      }
-    },
-    // 获取设备类型列表
-    getDataTypeList() {
-      dataTypeList(this.params4).then(res => {
-        this.tableData4 = res.page.records
-        this.total4 = Number(res.page.total)
-      })
-    },
-    handleCurrentChange4(val) {
-      this.pageNum4 = val
-      this.params4.start = val * this.params4.limit - this.params4.limit
-      this.getDataTypeList()
-    },
-    handleSizeChange4(val) {
-      this.params4.limit = val
-      this.getDataTypeList()
-    },
     // 展开数据样品列表
     openList(item) {
       if (this.currenId == item.tsy_id) {
@@ -956,6 +828,36 @@ export default {
             }
           }
         }
+
+        .list {
+          margin-top: 20px;
+          border: 1px solid #e5e5e5;
+
+          div {
+            padding: 5px 10px;
+            border-bottom: 1px solid #e5e5e5;
+          }
+
+          .list-value {
+            cursor: pointer;
+          }
+
+          :last-child {
+            border-bottom: none;
+          }
+
+        }
+      }
+
+      .tags {
+        display: flex;
+        flex-wrap: wrap;
+
+        .tag {
+          padding: 5px;
+          background-color: rgb(249,249,249);
+          margin: 0 15px 15px 0;
+        }
       }
 
       .arrow {