shangyun/Web/src/pages/page-web/projects/media/detail/components/Search.vue

<template>
  <a-row style="margin-bottom: 20px;" justify="space-between">
    <a-col>
      <div style="display: flex;">
        <a-upload :action="uploadUrl" method="POST" :headers="getHeaders()" accept=".png,.jpg,.jpeg" :multiple="false"
          :showUploadList="false" @change="handleChangeUploadFile">
          <a-button style="margin-right: 10px;" type="primary" @click="onClickDownload">
            上传合成文件
          </a-button>
        </a-upload>
        <a-button style="margin-right: 10px;" type="primary" :disabled="!selectedRowKeys.length"
          @click="onClickDownload">
          压缩下载
        </a-button>
        <a-button type="primary" danger :disabled="!selectedRowKeys.length" @click="onClickDelete">
          删除
        </a-button>
      </div>
    </a-col>
    <a-col>
      <a-form ref="formRef" layout="inline" :model="formModel" :colon="false">
        <a-form-item name="rangeDate">
          <a-range-picker style="width: 250px;" v-model:value="formModel.rangeDate" />
        </a-form-item>
        <a-form-item name="media_type">
          <a-select style="width: 200px;" placeholder="请选择媒体类型" v-model:value="formModel.media_type">
            <a-select-option :value="1">
              原图
            </a-select-option>
            <a-select-option :value="2">
              截图
            </a-select-option>
            <a-select-option :value="3">
              全景图
            </a-select-option>
            <a-select-option :value="4">
              视频
            </a-select-option>
            <a-select-option :value="-1">
              其他
            </a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item name="search_info">
          <a-input style="width: 200px;" placeholder="文件名称" v-model:value="formModel.search_info" />
        </a-form-item>
        <a-form-item>
          <a-button style="margin-right: 10px;" @click="handleClicSekarch">
            <template #icon>
              <SearchOutlined />
            </template>
          </a-button>
          <a-button @click="handleClickReset">
            <template #icon>
              <ReloadOutlined />
            </template>
          </a-button>
        </a-form-item>
      </a-form>
    </a-col>
  </a-row>
</template>

<script lang="ts" setup>
import { ref, reactive } from 'vue';
import { message } from 'ant-design-vue'
import { SearchOutlined, ReloadOutlined } from '@ant-design/icons-vue';
import router from '/@/router';
import { ELocalStorageKey } from '/@/types'
import { getWorkspaceId } from '/@/utils/index'
import moment from 'moment';

interface Props {
  fetchList: () => Promise<any>,
  selectedRowKeys: string[],
  onClickDownload: () => Promise<any>,
  onClickDelete: () => Promise<any>,
  onClickSearch: (query: any) => Promise<any>,
  onClickReset: (query: any) => Promise<any>,
};

const props = withDefaults(defineProps<Props>(), {

});

const formRef = ref();

const formModel = reactive({
  rangeDate: [],
  media_type: undefined,
  device_name: undefined,
  search_info: '',
})

const state = reactive({
  visible: false,
})

const workspaceId: string = getWorkspaceId();
const dirId = router.currentRoute.value.params?.id;
const uploadUrl = `/api/media/api/v1/files/${workspaceId}/file/${dirId}/upload`

const getHeaders = () => {
  const token = localStorage.getItem(ELocalStorageKey.Token);
  return {
    [ELocalStorageKey.Token]: token,
  }
}

// 上传合成文件
const handleChangeUploadFile = async (info: any) => {
  if (info.file.status === 'done') {// 上传成功
    await props.fetchList()
    message.success('上传成功');
  } else if (info.file.status === 'error') {// 上传失败
    message.error('上传失败');
  }
}

// 点击查询
const handleClicSekarch = async () => {
  const values = formRef.value?.getFieldsValue();
  const data = {
    ...values,
  };
  delete data.rangeDate;
  if (values.rangeDate.length === 2) {
    data.begin_time = moment(values.rangeDate[0]).valueOf();
    data.end_time = moment(values.rangeDate[1]).valueOf();
  }
  await props.onClickSearch(data);
}

// 点击重置
const handleClickReset = async () => {
  formRef.value?.resetFields();
  const values = formRef.value?.getFieldsValue();
  const data = {
    ...values,
  };
  delete data.rangeDate;
  await props.onClickReset(data);
}
</script>

<style lang="scss" scoped></style>