caseEditor/src/view/mediaLibrary/index.vue

<template>
  <div id="mediaLibraryApp">
    <TableComponent
      :columns="columns"
      :searchColumns="searchColumns"
      :getData="getData"
    />
  </div>
</template>

<script setup>
import TableComponent from './TableComponent.vue';
import { getmediaList } from "@/store/case";
import { ref } from 'vue';

// 模拟接口数据
const mockData = [
  { id: 1, name: 'John', age: 20 },
  { id: 2, name: 'Jane', age: 25 },
  { id: 3, name: 'Bob', age: 30 },
  // 更多数据...
];

// 定义表格列
const columns = [
  // { prop: 'name', label: '名称', width: 150, },
  { prop: 'fileTypeStr', label: '文件类型', width: 100, },
  { prop: 'fileFormat', label: '文件格式', width: 80, },
  { prop: 'dictName', label: '分组', width: 100, },
  { prop: 'statusStr', label: '状态', width: 100, },
  { prop: 'createTime', label: '上传时间', width: 180, },
];

// 定义搜索列
const searchColumns = ref([
]);

// 获取数据的函数
const getData = async (params) => {
  // 这里可以调用后端接口获取数据
  const res =  await getmediaList(params)
  return { list: res.list, totalCount: res.total }
  // .then(res => {
  //   searchColumns.value = res.list
  //   const totalCount = res.total;
  //   return { list, totalCount };
  // });
};
</script>

<style scoped>
#mediaLibraryApp {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  /* color: #2c3e50; */
  width: 100%;
  padding: 20px;
  /* background-color: rgba(58, 58, 58, 1); */
}
</style>