1

src/assets/fonts/font.css

@@ -15,4 +15,10 @@
     src: url('Inter-SemiBold-10.otf');
     font-weight: normal;
     font-style: normal;
+  }
+  @font-face {
+    font-family: "Inter-Medium";
+    src: url('Inter-Medium-8.otf');
+    font-weight: normal;
+    font-style: normal;
   }

src/views/biz/recent/index.vue

@@ -1,241 +1,245 @@
 <template>
-  <div class="app-container">
-    <el-form :model="queryParams" ref="queryRef" :inline="true" v-show="showSearch" label-width="68px">
-      <el-form-item>
-        <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
-        <el-button icon="Refresh" @click="resetQuery">重置</el-button>
-      </el-form-item>
-    </el-form>
-
-    <el-row :gutter="10" class="mb8">
-      <el-col :span="1.5">
-        <el-button
-          type="primary"
-          plain
-          icon="Plus"
-          @click="handleAdd"
-          v-hasPermi="['biz:recent:add']"
-        >新增</el-button>
-      </el-col>
-      <el-col :span="1.5">
-        <el-button
-          type="success"
-          plain
-          icon="Edit"
-          :disabled="single"
-          @click="handleUpdate"
-          v-hasPermi="['biz:recent:edit']"
-        >修改</el-button>
-      </el-col>
-      <el-col :span="1.5">
-        <el-button
-          type="danger"
-          plain
-          icon="Delete"
-          :disabled="multiple"
-          @click="handleDelete"
-          v-hasPermi="['biz:recent:remove']"
-        >删除</el-button>
-      </el-col>
-      <el-col :span="1.5">
-        <el-button
-          type="warning"
-          plain
-          icon="Download"
-          @click="handleExport"
-          v-hasPermi="['biz:recent:export']"
-        >导出</el-button>
-      </el-col>
-      <right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
-    </el-row>
-
-    <el-table v-loading="loading" :data="recentList" @selection-change="handleSelectionChange">
-      <el-table-column type="selection" width="55" align="center" />
-      <el-table-column label="自增ID" align="center" prop="recentId" />
-      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
-        <template #default="scope">
-          <el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)" v-hasPermi="['biz:recent:edit']">修改</el-button>
-          <el-button link type="primary" icon="Delete" @click="handleDelete(scope.row)" v-hasPermi="['biz:recent:remove']">删除</el-button>
-        </template>
-      </el-table-column>
-    </el-table>
-    
-    <pagination
-      v-show="total>0"
-      :total="total"
-      v-model:page="queryParams.pageNum"
-      v-model:limit="queryParams.pageSize"
-      @pagination="getList"
-    />
-
-    <!-- 添加或修改最近文件对话框 -->
-    <el-dialog :title="title" v-model="open" width="500px" append-to-body>
-      <el-form ref="recentRef" :model="form" :rules="rules" label-width="80px">
-        <el-form-item label="是否文件夹" prop="isFolder">
-          <el-select v-model="form.isFolder" placeholder="请选择是否文件夹">
-            <el-option
-              v-for="dict in sys_yes_no"
-              :key="dict.value"
-              :label="dict.label"
-              :value="dict.value"
-            ></el-option>
-          </el-select>
-        </el-form-item>
-        <el-form-item label="文件夹/文档ID" prop="relaId">
-          <el-input v-model="form.relaId" placeholder="请输入文件夹/文档ID" />
-        </el-form-item>
-        <el-form-item label="所有人" prop="owner">
-          <el-input v-model="form.owner" placeholder="请输入所有人" />
-        </el-form-item>
-        <el-form-item label="备注" prop="remark">
-          <el-input v-model="form.remark" placeholder="请输入备注" />
-        </el-form-item>
-      </el-form>
-      <template #footer>
-        <div class="dialog-footer">
-          <el-button type="primary" @click="submitForm">确 定</el-button>
-          <el-button @click="cancel">取 消</el-button>
-        </div>
-      </template>
-    </el-dialog>
+  <div>
+    <el-collapse v-model="activeNames" @change="handleChange">
+      <div v-if="isList">
+        <el-collapse-item name="folder">
+          <template #title>
+            <span class="collapseItem_title">文件夹</span>
+          </template>
+          <!-- 表格 -->
+          <el-table
+            :data="tableData"
+            style="width: 100%"
+            height="250"
+            :scrollbar-always-on="true"
+          >
+            <el-table-column fixed prop="date" label="名称" width="500">
+              <template #default="scope">
+                <div>
+                  <img
+                    class="table_icon"
+                    src="../../../assets/images/folder.png"
+                    alt=""
+                    style=""
+                  />
+                  {{ scope.row.date }}
+                </div>
+              </template>
+            </el-table-column>
+            <el-table-column prop="name" label="时间" width="200" />
+            <el-table-column prop="state" label="类型" width="180" />
+            <el-table-column prop="city" label="大小" width="160" />
+          </el-table>
+        </el-collapse-item>
+        <el-collapse-item name="file">
+          <template #title>
+            <span class="collapseItem_title">文件</span>
+          </template>
+          <!-- 表格 -->
+          <el-table
+            :data="tableData"
+            style="width: 100%"
+            height="250"
+            :scrollbar-always-on="true"
+          >
+            <el-table-column fixed prop="date" label="名称" width="500">
+              <template #default="scope">
+                <div>
+                  <img
+                    class="table_icon"
+                    src="../../../assets/images/folder.png"
+                    alt=""
+                    style=""
+                  />
+                  {{ scope.row.date }}
+                </div>
+              </template>
+            </el-table-column>
+            <el-table-column prop="name" label="时间" width="200" />
+            <el-table-column prop="state" label="类型" width="180" />
+            <el-table-column prop="city" label="大小" width="160" />
+          </el-table>
+        </el-collapse-item>
+      </div>
+      <div v-else>
+        <el-collapse-item name="folder">
+          <template #title>
+            <span class="collapseItem_title">文件夹</span>
+          </template>
+          <!-- 平铺 -->
+          <div class="tile_box">
+            <div class="file_box">
+              <img class="big_file_img" src="../../../assets/images/folder.png" alt="">
+            </div>
+
+          </div>
+
+        </el-collapse-item>
+        <el-collapse-item name="file">
+          <template #title>
+            <span class="collapseItem_title">文件</span>
+          </template>
+        </el-collapse-item>
+      </div>
+    </el-collapse>
   </div>
 </template>
 
-<script setup name="Recent">
-import { listRecent, getRecent, delRecent, addRecent, updateRecent } from "@/api/biz/recent";
-
-const { proxy } = getCurrentInstance();
-const { sys_yes_no } = proxy.useDict('sys_yes_no');
-
-const recentList = ref([]);
-const open = ref(false);
-const loading = ref(true);
-const showSearch = ref(true);
-const ids = ref([]);
-const single = ref(true);
-const multiple = ref(true);
-const total = ref(0);
-const title = ref("");
-
-const data = reactive({
-  form: {},
-  queryParams: {
-    pageNum: 1,
-    pageSize: 10,
-  },
-  rules: {
-  }
+<script setup>
+import { onMounted, ref } from "vue";
+import { listRecent } from "../../../api/biz/recent";
+const activeNames = ref(["folder", "file"]);
+const isList = ref(false); //控制显示方式
+onMounted(() => {
+  getList();
 });
+const getList = async () => {
+  const res = await listRecent();
+  console.log("res = ", res);
+};
+const handleChange = (val) => {
+  // console.log(val);
+};
+const tableData = [
+  {
+    date: "2016-05-03",
+    name: "Tom",
+    state: "California",
+    city: "Los Angeles",
+    address: "No. 189, Grove St, Los Angeles",
+    zip: "CA 90036",
+  },
+  {
+    date: "2016-05-02",
+    name: "Tom",
+    state: "California",
+    city: "Los Angeles",
+    address: "No. 189, Grove St, Los Angeles",
+    zip: "CA 90036",
+  },
+  {
+    date: "2016-05-04",
+    name: "Tom",
+    state: "California",
+    city: "Los Angeles",
+    address: "No. 189, Grove St, Los Angeles",
+    zip: "CA 90036",
+  },
+  {
+    date: "2016-05-01",
+    name: "Tom",
+    state: "California",
+    city: "Los Angeles",
+    address: "No. 189, Grove St, Los Angeles",
+    zip: "CA 90036",
+  },
+  {
+    date: "2016-05-08",
+    name: "Tom",
+    state: "California",
+    city: "Los Angeles",
+    address: "No. 189, Grove St, Los Angeles",
+    zip: "CA 90036",
+  },
+  {
+    date: "2016-05-06",
+    name: "Tom",
+    state: "California",
+    city: "Los Angeles",
+    address: "No. 189, Grove St, Los Angeles",
+    zip: "CA 90036",
+  },
+  {
+    date: "2016-05-07",
+    name: "Tom",
+    state: "California",
+    city: "Los Angeles",
+    address: "No. 189, Grove St, Los Angeles",
+    zip: "CA 90036",
+  },
+];
+</script>
 
-const { queryParams, form, rules } = toRefs(data);
-
-/** 查询最近文件列表 */
-function getList() {
-  loading.value = true;
-  listRecent(queryParams.value).then(response => {
-    recentList.value = response.rows;
-    total.value = response.total;
-    loading.value = false;
-  });
+<style lang="scss" scoped>
+.table_icon {
+  height: 27px;
+  width: 27px;
+  vertical-align: middle;
 }
-
-// 取消按钮
-function cancel() {
-  open.value = false;
-  reset();
+::v-deep .el-collapse-item__content {
+  padding-bottom: 0;
 }
-
-// 表单重置
-function reset() {
-  form.value = {
-    recentId: null,
-    isFolder: null,
-    relaId: null,
-    owner: null,
-    createBy: null,
-    createTime: null,
-    updateBy: null,
-    updateTime: null,
-    remark: null
-  };
-  proxy.resetForm("recentRef");
+::v-deep .el-collapse-item__header {
+  background-color: #ebeff6 !important;
+  width: 100% !important;
+  height: 24px !important;
 }
-
-/** 搜索按钮操作 */
-function handleQuery() {
-  queryParams.value.pageNum = 1;
-  getList();
+::v-deep .el-collapse-item__arrow {
+  position: relative;
+  color: #2e6bc8;
+  right: 97%;
 }
-
-/** 重置按钮操作 */
-function resetQuery() {
-  proxy.resetForm("queryRef");
-  handleQuery();
+::v-deep .el-table td.el-table__cell {
+  border: none;
+  font-size: 14px !important;
+  font-weight: 400 !important;
+  color: #000 !important;
 }
-
-// 多选框选中数据
-function handleSelectionChange(selection) {
-  ids.value = selection.map(item => item.recentId);
-  single.value = selection.length != 1;
-  multiple.value = !selection.length;
+::v-deep .el-table .el-table__header-wrapper th {
+  border-bottom: none;
+  border-right: 1px solid #c1cce3;
+  background-color: #fff !important;
+  color: #505870;
+  font-size: 14px;
 }
-
-/** 新增按钮操作 */
-function handleAdd() {
-  reset();
-  open.value = true;
-  title.value = "添加最近文件";
+.collapseItem_title {
+  position: relative;
+  left: 40px;
+  color: #2e6bc8;
+  font-family: Inter-Medium;
+  font-size: 12px;
 }
-
-/** 修改按钮操作 */
-function handleUpdate(row) {
-  reset();
-  const _recentId = row.recentId || ids.value
-  getRecent(_recentId).then(response => {
-    form.value = response.data;
-    open.value = true;
-    title.value = "修改最近文件";
-  });
+// 表格右边3个靠右对齐
+::v-deep .el-table__header thead tr th {
+  font-family: Inter-Medium;
+  font-size: 14px;
+  color: #505870;
+  text-align: right;
+  &:nth-child(1) {
+    text-align: left;
+  }
 }
-
-/** 提交按钮 */
-function submitForm() {
-  proxy.$refs["recentRef"].validate(valid => {
-    if (valid) {
-      if (form.value.recentId != null) {
-        updateRecent(form.value).then(response => {
-          proxy.$modal.msgSuccess("修改成功");
-          open.value = false;
-          getList();
-        });
-      } else {
-        addRecent(form.value).then(response => {
-          proxy.$modal.msgSuccess("新增成功");
-          open.value = false;
-          getList();
-        });
-      }
-    }
-  });
+::v-deep .el-table__body tbody [class*="column_2"] {
+  text-align: right;
 }
-
-/** 删除按钮操作 */
-function handleDelete(row) {
-  const _recentIds = row.recentId || ids.value;
-  proxy.$modal.confirm('是否确认删除最近文件编号为"' + _recentIds + '"的数据项？').then(function() {
-    return delRecent(_recentIds);
-  }).then(() => {
-    getList();
-    proxy.$modal.msgSuccess("删除成功");
-  }).catch(() => {});
+::v-deep .el-table__body tbody [class*="column_3"] {
+  text-align: right;
 }
-
-/** 导出按钮操作 */
-function handleExport() {
-  proxy.download('biz/recent/export', {
-    ...queryParams.value
-  }, `recent_${new Date().getTime()}.xlsx`)
+::v-deep .el-table__body tbody [class*="column_4"] {
+  text-align: right;
+}
+::v-deep .el-table__body tbody [class*="column_6"] {
+  text-align: right;
+}
+::v-deep .el-table__body tbody [class*="column_7"] {
+  text-align: right;
+}
+::v-deep .el-table__body tbody [class*="column_8"] {
+  text-align: right;
+}
+//平铺
+.tile_box{
+  width: 100%;
+  height: 400px;
+  .file_box{
+    width: 116px;
+    height: 138px;
+    border: 1px solid #000;
+  }
+  .big_file_img{
+    width: 100px;
+    height: 100px;
+  }
 }
 
-getList();
-</script>
+</style>

vite.config.js

@@ -25,7 +25,7 @@ export default defineConfig(({ mode, command }) => {
     },
     // vite 相关配置
     server: {
-      port: 80,
+      port: 81,
       host: true,
       open: true,
       proxy: {