局部国际化

guoshilong

2023-09-25 6fa082e98b9bcdf8691ca8d651adf958571246b1

 src/components/MediaPanel.vue

@@ -1,25 +1,31 @@
<template>
<!--  <div class="header">媒体文件</div>-->
  <!--搜索栏-->
  <a-config-provider :locale="zhCN">
  <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" />
        <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"
        <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"
        <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"/>
        <a-input-search :size="searchPanelOptions.size" v-model:value="searchQuery.name" @change="inputChange"
                        placeholder="按文件名称搜索" style="width: 300px"/>
    </div>

  </div>
@@ -39,15 +45,19 @@
        </template>
        <template #action="{ record }">
          <a-tooltip title="download">
            <a class="fz18" @click="downloadMedia(record)"><DownloadOutlined /></a>
              <a class="fz18" @click="downloadMedia(record)">
                <DownloadOutlined/>
              </a>
          </a-tooltip>
        </template>
      </a-table>
    </div>
  </a-spin>
  </a-config-provider>
</template>

<script setup lang="ts">
import zhCN from 'ant-design-vue/es/locale/zh_CN'
import { ref } from '@vue/reactivity'
import { TableState } from 'ant-design-vue/lib/table/interface'
import { onMounted, reactive } from 'vue'
@@ -75,14 +85,12 @@
  { value: 1, label: '全景图' },
]

const payloadOptions = [
]
const payloadOptions = []

const timeRangeArr = reactive({
  data: [] as string[]
})
const searchQuery = reactive<MediaQueryParam>({
})
const searchQuery = reactive<MediaQueryParam>({})
const subFileTypeArr = reactive([])
const payloadArr = reactive([])

@@ -214,15 +222,18 @@
.media-panel-wrapper {
  width: 100%;
  padding: 16px;

  .media-table {
    background: #fff;
    margin-top: 10px;
  }

  .action-area {
    color: $primary;
    cursor: pointer;
  }
}

.header {
  width: 100%;
  height: 60px;