mp-vue/src/views/cms/photo/index.vue

<template>
  <a-page-header :title="getPageTitle()" @back="() => $router.go(-1)">
    <template #extra>
      <Extra />
    </template>
    <a-space style="margin-bottom: 10px" v-if="activeKey == '2'">
      <a-upload
        :show-upload-list="false"
        :accept="'image/*,application/*'"
        :customRequest="onUpload"
      >
        <a-button key="1" type="primary" class="ele-btn-icon">
          <template #icon>
            <UploadOutlined/>
          </template>
          <span>上传图片</span>
        </a-button>
      </a-upload>
      <a-input-search
        allow-clear
        style="width: 360px"
        v-model:value="searchText"
        placeholder="请输入关键词"
        key="2"
        @search="query"
        @pressEnter="query"
      >
        <template #addonBefore>
          <a-select
            v-model:value="type"
            style="width: 100px; margin: -5px -12px"
          >
            <a-select-option value="name">文件名称</a-select-option>
            <a-select-option value="createNickname">
              上传人
            </a-select-option>
          </a-select>
        </template>
      </a-input-search>
      <SelectDict
        dict-code="groupId"
        :placeholder="`按分组筛选`"
        style="width: 200px"
        v-model:value="where.groupName"
        @done="chooseGroupId"
      />
    </a-space>
    <template v-if="activeKey === '2'">
      <Image :data="data" :where="where" @done="query"/>
      <div class="ele-text-center" style="margin-top: 38px">
        <a-pagination
          :total="count"
          v-model:current="page"
          v-model:page-size="limit"
          show-quick-jumper
          :show-total="(total) => `共 ${total} 条`"
          @change="query"
        />
      </div>
    </template>
    <template v-if="activeKey === '1'">
      <List :data="data" :where="where"/>
    </template>
  </a-page-header>
</template>

<script lang="ts" setup>
import {reactive, ref} from 'vue';
import {UploadOutlined} from '@ant-design/icons-vue';
import {FileRecord, FileRecordParam} from '@/api/system/file/model';
import Image from './image.vue';
import List from './list.vue';
import {messageLoading} from 'ele-admin-pro';
import {pageFiles, uploadFile} from '@/api/system/file';
import {message} from 'ant-design-vue/es';
import {DictData} from '@/api/system/dict-data/model';
import {getMerchantId} from "@/utils/merchant";
import {getPageTitle} from "@/utils/common";
import Extra from "./components/Extra.vue";

const type = ref('name');
const searchText = ref('');
const data = ref<FileRecord[] | any>([]);
// 当前选项卡
const activeKey = ref('1');
// 第几页
const page = ref(1);
// 每页多少条
const limit = ref(12);
// 总数量
const count = ref(0);
// 搜索表单
const where = reactive<FileRecordParam>({
  name: '',
  createNickname: '',
  groupId: undefined,
  groupName: undefined
});

/* 搜索 */
const chooseGroupId = (item: DictData) => {
  console.log(item);
  where.groupId = item.dictDataId;
  where.groupName = item.dictDataName;
  query();
};

/* 查询数据 */
const query = () => {
  console.log('query()');
  if (type.value == 'name') {
    where.name = searchText.value;
  }
  if (type.value == 'createNickname') {
    where.createNickname = searchText.value;
  }
  where.page = page.value;
  where.limit = limit.value;
  where.merchantId = getMerchantId();
  // where.contentType = 'image';
  const hide = messageLoading('请求中..', 0);
  pageFiles(where).then((res) => {
    count.value = Number(res?.count);
    data.value = res?.list;
    hide();
  });
};

query();

// 上传文件
const onUpload = (item) => {
  const {file} = item;
  if (!file.type.startsWith('image')) {
    message.error('只能选择图片');
    return;
  }
  if (file.size / 1024 / 1024 > 10) {
    message.error('大小不能超过 10MB');
    return;
  }
  const hide = messageLoading({
    content: '上传中..',
    duration: 0,
    mask: true
  });
  uploadFile(file)
    .then((data) => {
      hide();
      message.success('上传成功');
      query();
    })
    .catch((e) => {
      message.error(e.message);
      hide();
    });
};
</script>

<script lang="ts">
export default {
  name: 'PhotoIndex'
};
</script>

<style lang="less" scoped>
.project-list-desc {
  height: 44px;
  line-height: 22px;
  margin-bottom: 20px;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
</style>