Initial commit

src/views/cms/photo/index.vue

@@ -0,0 +1,170 @@
+<template>
+  <div class="page">
+    <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>
+    <div class="ele-body" 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>
+    </div>
+    <div class="ele-body" v-if="activeKey === '1'">
+      <List :data="data" :where="where" />
+    </div>
+  </div>
+</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';
+
+  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.contentType = 'image';
+    console.log(where);
+    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>