From 31f717518675598582b1749d1f58a4c1f4343ae2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=8C=BF=E5=B0=8F=E5=A4=A9?= <1638245306@qq.com>
Date: Mon, 15 May 2023 22:11:12 +0800
Subject: [PATCH] =?UTF-8?q?feat(=E6=96=87=E4=BB=B6=E7=AE=A1=E7=90=86):=20?=
 =?UTF-8?q?=20=E6=96=87=E4=BB=B6=E7=AE=A1=E7=90=86=E4=BF=AE=E6=94=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 web/src/views/system/fileList/index.vue | 120 +++++++++++++++++++++---
 1 file changed, 109 insertions(+), 11 deletions(-)

diff --git a/web/src/views/system/fileList/index.vue b/web/src/views/system/fileList/index.vue
index 58c0331..e4ac060 100644
--- a/web/src/views/system/fileList/index.vue
+++ b/web/src/views/system/fileList/index.vue
@@ -1,18 +1,116 @@
 <template>
-	<fs-page>
-		<fs-crud ref="crudRef" v-bind="crudBinding"> </fs-crud>
-	</fs-page>
+  <fs-page style="padding: 10px">
+    <el-card :body-style="{height:'100%'}">
+      <el-tabs tab-position="left" class="demo-tabs" style="height: 70vh">
+        <el-tab-pane label="全部">
+          <div>
+            <el-row>
+              <el-col :soan="6" :offset="18">
+                这里放搜索框
+              </el-col>
+            </el-row>
+          </div>
+          <div>
+            <el-row :gutter="10">
+              <el-col :span="3" v-for="(item,index) in fileList" :key="index">
+                <el-image
+                    style="width: 150px; height: 150px"
+                    :src="formatImgUrl(item.url)"
+                    :zoom-rate="1.2"
+                    :preview-src-list="[item.url]"
+                    :initial-index="4"
+                    fit="fill"
+                />
+                <div>
+                 <div> <el-text>{{item.name}}</el-text></div>
+                  <div>
+                    <el-popover
+                        placement="bottom"
+                        :width="500"
+                        trigger="click"
+                    >
+                      <template #reference>
+                        <el-button type="text">详细</el-button>
+                      </template>
+                      <div>
+                        <el-descriptions
+                        :column="2"
+                        border
+                        >
+                          <el-descriptions-item label="文件名称">{{item.name}}</el-descriptions-item>
+                          <el-descriptions-item label="创建人">{{item.creator_name}}</el-descriptions-item>
+                          <el-descriptions-item label="创建时间">{{item.create_datetime}}</el-descriptions-item>
+                        </el-descriptions>
+                      </div>
+                    </el-popover>
+                    <el-popconfirm title="您确定要删除?" @confirm="onDel(item)">
+                      <template #reference>
+                        <el-button type="text">删除</el-button>
+                      </template>
+                    </el-popconfirm>
+
+                  </div>
+                </div>
+              </el-col>
+            </el-row>
+          </div>
+        </el-tab-pane>
+        <el-tab-pane label="Config">Config</el-tab-pane>
+        <el-tab-pane label="Role">Role</el-tab-pane>
+        <el-tab-pane label="Task">Task</el-tab-pane>
+      </el-tabs>
+    <el-divider></el-divider>
+    <el-row>
+      <el-col :span="12" :offset="12">
+        这里放分页
+      </el-col>
+    </el-row>
+    </el-card>
+
+  </fs-page>
 </template>
 
 <script lang="ts" setup>
-import { ref, onMounted } from 'vue';
-import { useFs } from '@fast-crud/fast-crud';
-import { createCrudOptions } from './crud';
+import {DelObj, GetList} from "./api";
+import {ref,onMounted} from "vue";
+import {getBaseURL} from "/@/utils/baseUrl";
+import {ElMessage} from "element-plus";
+const fileList = ref([])
+const getData = function (){
+  GetList({}).then((res:any)=>{
+    const {data} = res
+    fileList.value = data
+  })
+}
 
-const { crudBinding, crudRef, crudExpose } = useFs({ createCrudOptions });
+const onDel = function (item:any) {
+  DelObj(item.id).then((res:any)=>{
+    ElMessage.success("删除成功！");
+    getData()
+  })
+}
+const formatImgUrl = function (src:string) {
+  return getBaseURL()+src
+}
 
-// 页面打开后获取列表数据
-onMounted(() => {
-	crudExpose.doRefresh();
-});
+
+onMounted(()=>{
+  getData()
+})
 </script>
+<style scoped>
+.demo-tabs > .el-tabs__content {
+  padding: 32px;
+  color: #6b778c;
+  font-size: 32px;
+  font-weight: 600;
+}
+
+.el-tabs--right .el-tabs__content,
+.el-tabs--left .el-tabs__content {
+  height: 100%;
+}
+.el-tabs__nav-scroll{
+  border-right: 1px solid #efefef;
+}
+</style>