From fb336f319c71291fa09de3e7f67f1ccfab3cb7c8 Mon Sep 17 00:00:00 2001
From: guoshilong <123456>
Date: Sat, 23 Sep 2023 15:58:40 +0800
Subject: [PATCH] 媒体搜索框

---
 src/components/MediaPanel.vue |   87 +++++++++++++++++++++++++++++++++++++++++--
 1 files changed, 83 insertions(+), 4 deletions(-)

diff --git a/src/components/MediaPanel.vue b/src/components/MediaPanel.vue
index 143aebb..33a7c55 100644
--- a/src/components/MediaPanel.vue
+++ b/src/components/MediaPanel.vue
@@ -1,5 +1,29 @@
 <template>
-  <div class="header">媒体文件</div>
+<!--  <div class="header">媒体文件</div>-->
+  <!--搜索栏-->
+  <div class="search-panel-wrapper">
+    <div class="search-part">
+      <a-range-picker :size="searchPanelOptions.size" :format="searchPanelOptions.dateFormat" :valueFormat="searchPanelOptions.valueFormat" v-model:value="timeRangeArr.data" @change="dateChange" style="width: 300px" />
+    </div>
+
+    <div class="search-part">
+      <a-select v-model:value="subFileTypeArr" allowClear @change="subFileTypeChange"  :options="subFileTypeOptions" :maxTagCount="searchPanelOptions.maxTagCount" mode="multiple"
+                :size="searchPanelOptions.size" placeholder="所有类型" style="width: 300px">
+      </a-select>
+    </div>
+
+    <div class="search-part">
+      <a-select v-model:value="payloadArr" allowClear @change="payloadChange"  :options="payloadOptions" :maxTagCount="searchPanelOptions.maxTagCount" mode="multiple"
+                :size="searchPanelOptions.size" placeholder="所有负载" style="width: 300px">
+      </a-select>
+    </div>
+
+    <div class="search-part">
+      <a-input-search  :size="searchPanelOptions.size" v-model:value="searchQuery.name"  @change="inputChange" placeholder="按文件名称搜索" style="width: 300px"/>
+    </div>
+
+  </div>
+
   <a-spin :spinning="loading" :delay="1000" tip="downloading" size="large">
     <div class="media-panel-wrapper">
       <a-table class="media-table" :columns="columns" :data-source="mediaData.data" row-key="fingerprint"
@@ -30,13 +54,37 @@
 import { IPage } from '../api/http/type'
 import { ELocalStorageKey } from '../types/enums'
 import { downloadFile } from '../utils/common'
-import { downloadMediaFile, getMediaFiles } from '/@/api/media'
+import { downloadMediaFile, getMediaFiles, MediaQueryParam } from '/@/api/media'
 import { DownloadOutlined } from '@ant-design/icons-vue'
 import { message, Pagination } from 'ant-design-vue'
-import { load } from '@amap/amap-jsapi-loader'
+import { TaskStatus, TaskStatusMap } from '/@/types/task'
 
 const workspaceId = localStorage.getItem(ELocalStorageKey.WorkspaceId)!
 const loading = ref(false)
+
+// 搜索栏配置项
+const searchPanelOptions = reactive({
+  size: 'large',
+  maxTagCount: 2,
+  dateFormat: 'YYYY-MM-DD',
+  valueFormat: 'YYYY-MM-DD'
+})
+
+const subFileTypeOptions = [
+  { value: 0, label: '普通图片' },
+  { value: 1, label: '全景图' },
+]
+
+const payloadOptions = [
+]
+
+const timeRangeArr = reactive({
+  data: [] as string[]
+})
+const searchQuery = reactive<MediaQueryParam>({
+})
+const subFileTypeArr = reactive([])
+const payloadArr = reactive([])
 
 const columns = [
   {
@@ -109,11 +157,29 @@
 })
 
 onMounted(() => {
-  // getFiles()
+  getFiles()
 })
+
+function dateChange (value:any) {
+  searchQuery.startTime = value[0]
+  searchQuery.endTime = value[1]
+  getFiles()
+}
+
+function subFileTypeChange (value:any) {
+  searchQuery.subFileType = value.join(',')
+  getFiles()
+}
+
+function payloadChange (value:any) {
+  searchQuery.payload = value.join(',')
+  getFiles()
+}
 
 function getFiles () {
   getMediaFiles(workspaceId, body).then(res => {
+    console.log(res, '-------------------')
+
     mediaData.data = res.data.list
     paginationProp.total = res.data.pagination.total
     paginationProp.current = res.data.pagination.page
@@ -165,4 +231,17 @@
   text-align: start;
   color: #000;
 }
+
+.search-panel-wrapper {
+  height: 85px;
+  background: #ffffff;
+  padding: 0 20px;
+  display: flex;
+  align-items: center;
+
+  .search-part{
+    margin-right: 10px;
+  }
+
+}
 </style>

--
Gitblit v1.9.3