From 89bfb8af3493f14e1042f4613b3ced8e56ce2d43 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E8=AE=B8=E5=AE=8F=E6=9D=B0?= <1943105267@qq.com>
Date: Mon, 25 Sep 2023 11:24:40 +0800
Subject: [PATCH] =?UTF-8?q?=E6=90=9C=E7=B4=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../volunteer/gxhzs/gxhzsgl/index copy.vue    | 348 ++++++++++++++++++
 src/views/volunteer/gxhzs/gxhzsgl/index.vue   | 145 +++++---
 2 files changed, 438 insertions(+), 55 deletions(-)
 create mode 100644 src/views/volunteer/gxhzs/gxhzsgl/index copy.vue

diff --git a/src/views/volunteer/gxhzs/gxhzsgl/index copy.vue b/src/views/volunteer/gxhzs/gxhzsgl/index copy.vue
new file mode 100644
index 0000000..0a9ccad
--- /dev/null
+++ b/src/views/volunteer/gxhzs/gxhzsgl/index copy.vue	
@@ -0,0 +1,348 @@
+<template>
+  <div class="app-container" ref="main">
+    <div ref="search" class="search">
+      <el-form
+        :model="queryParams"
+        ref="queryForm"
+        size="small"
+        :inline="true"
+        class="search-container"
+      >
+        <el-form-item prop="name">
+          <el-input
+            v-model="queryParams.input"
+            placeholder="请输入关键字"
+            clearable
+          >
+            <div class="search-btn" slot="append">
+              <i class="el-icon-search"></i>
+            </div>
+          </el-input>
+        </el-form-item>
+      </el-form>
+      <el-button
+        v-hasPermi="['system:certificates:add']"
+        type="primary"
+        size="small"
+        @click="handleAdd"
+        >新增</el-button
+      >
+    </div>
+
+    <div class="book-main" :style="{ height: tableHeigth + 'px' }">
+      <div class="child-box" v-for="item in certificatesList" :key="item.id">
+        <div>
+          <el-image
+            style="width: 100%; height: 87%"
+            :src="baseUrl + item.cover"
+            fit="cover"
+          ></el-image>
+          <div
+            class="operate"
+            style="font-size: 14px; color: #4d4949; font-weight: bold"
+          >
+            <div>高级</div>
+            <div class="right-operate">
+              <div class="operate-item">
+                <el-button
+                  type="text"
+                  size="mini"
+                  style="color: #909399"
+                  @click="handleInfo(item)"
+                  >查看</el-button
+                >
+              </div>
+              <div class="operate-item">
+                <el-button
+                  type="text"
+                  size="mini"
+                  style="color: #e6a23c; margin: 0 10px"
+                  @click="handleUpdate(item)"
+                  v-hasPermi="['system:certificates:edit']"
+                  >修改</el-button
+                >
+              </div>
+              <div class="operate-item">
+                <el-button
+                  v-hasPermi="['system:certificates:remove']"
+                  type="text"
+                  size="mini"
+                  style="color: #f56c6c"
+                  @click="handleDelete(item)"
+                  >删除</el-button
+                >
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <pagination
+      v-show="total > 0"
+      :total="total"
+      :page.sync="queryParams.pageNum"
+      :limit.sync="queryParams.pageSize"
+      @pagination="getList"
+    />
+    <!-- 添加或修改证书管理对话框 -->
+    <el-dialog :visible.sync="open" width="950px" append-to-body>
+      <div slot="title" class="dialog-title">
+        <span class="title-line"></span>
+        {{ title }}
+      </div>
+      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
+        <el-form-item label="证书名称" prop="name">
+          <el-input v-model="form.name" placeholder="请输入证书名称" />
+        </el-form-item>
+        <el-form-item label="证书时间" prop="datetime">
+          <el-date-picker
+            clearable
+            v-model="form.datetime"
+            type="date"
+            value-format="yyyy-MM-dd"
+            placeholder="请选择证书时间"
+          >
+          </el-date-picker>
+        </el-form-item>
+        <el-form-item label="服务时长" prop="serviceDuration">
+          <el-input
+            v-model="form.serviceDuration"
+            placeholder="请输入服务时长"
+          />
+        </el-form-item>
+        <el-form-item label="证书内容">
+          <el-input
+            type="textarea"
+            :rows="3"
+            v-model="form.content"
+            placeholder="请输入证书内容"
+          />
+        </el-form-item>
+        <el-form-item label="证书封面" prop="cover">
+          <ImageUpload :limit="1" v-model="form.cover" />
+        </el-form-item>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button type="primary" @click="submitForm">确 定</el-button>
+        <el-button @click="cancel">取 消</el-button>
+      </div>
+    </el-dialog>
+    <!-- 详情 -->
+    <el-dialog :visible.sync="openInfo" width="950px" append-to-body>
+      <div slot="title" class="dialog-title">
+        <span class="title-line"></span>
+        详情
+      </div>
+      <div class="info-box">
+        <div>
+          <div class="info-item">
+            <div class="item-lable">证书名称:</div>
+            <div class="item-value">{{ form.name }}</div>
+          </div>
+          <div class="info-item">
+            <div class="item-lable">证书时间:</div>
+            <div class="item-value">{{ form.datetime }}</div>
+          </div>
+          <div class="info-item">
+            <div class="item-lable">服务时长:</div>
+            <div class="item-value">{{ form.serviceDuration }}</div>
+          </div>
+          <div class="info-item">
+            <div class="item-lable">证书内容:</div>
+            <div class="item-value">{{ form.content }}</div>
+          </div>
+          <div class="info-item">
+            <div class="item-lable">证书封面:</div>
+            <div class="item-value">
+              <ImagePreview :src="form.cover" width="269px" height="192px" />
+            </div>
+          </div>
+        </div>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import {
+  listCertificates,
+  getCertificates,
+  delCertificates,
+  addCertificates,
+  updateCertificates,
+} from "@/api/volunteer/gxhzs/gxhzsgl/index.js";
+export default {
+  data() {
+    return {
+      baseUrl: process.env.VUE_APP_BASE_API,
+      certificatesList: [],
+      tableHeigth: 0,
+      queryParams: {},
+      loading: false,
+      tableData: [],
+      total: 0,
+      queryParams: {
+        pageNum: 1,
+        pageSize: 10,
+      },
+      form: {},
+      rules: {},
+      open: false,
+      openInfo: false,
+      title: "",
+    };
+  },
+  created() {
+    // //给表格一个固定值
+    this.$nextTick(() => {
+      this.tableHeigth =
+        this.$refs.main.offsetHeight - this.$refs.search.offsetHeight - 80;
+      this.getList();
+    });
+  },
+  methods: {
+    /** 查询证书管理列表 */
+    getList() {
+      this.loading = true;
+      listCertificates(this.queryParams).then((response) => {
+        this.certificatesList = response.rows;
+        this.total = response.total;
+        this.loading = false;
+      });
+    },
+    // 表单重置
+    reset() {
+      this.form = {
+        id: null,
+        name: null,
+        type: null,
+        cover: null,
+        content: null,
+        datetime: null,
+        serviceDuration: null,
+        createId: null,
+        createBy: null,
+        createTime: null,
+        updateId: null,
+        updateBy: null,
+        updateTime: null,
+        remark: null,
+        userId: null,
+        deptId: null,
+      };
+      this.resetForm("form");
+    },
+    // 取消按钮
+    cancel() {
+      this.open = false;
+      this.reset();
+    },
+    /** 新增按钮操作 */
+    handleAdd() {
+      this.reset();
+      this.open = true;
+      this.title = "添加证书管理";
+    },
+    /**详情 */
+    handleInfo(row) {
+      this.reset();
+      const id = row.id;
+      getCertificates(id).then((response) => {
+        this.form = response.data;
+        this.openInfo = true;
+      });
+    },
+    /** 修改按钮操作 */
+    handleUpdate(row) {
+      this.reset();
+      const id = row.id || this.ids;
+      getCertificates(id).then((response) => {
+        this.form = response.data;
+        this.open = true;
+        this.title = "修改证书管理";
+      });
+    },
+    /** 提交按钮 */
+    submitForm() {
+      this.$refs["form"].validate((valid) => {
+        if (valid) {
+          if (this.form.id != null) {
+            updateCertificates(this.form).then((response) => {
+              this.$modal.msgSuccess("修改成功");
+              this.open = false;
+              this.getList();
+            });
+          } else {
+            addCertificates(this.form).then((response) => {
+              this.$modal.msgSuccess("新增成功");
+              this.open = false;
+              this.getList();
+            });
+          }
+        }
+      });
+    },
+    /** 删除按钮操作 */
+    handleDelete(row) {
+      const ids = row.id || this.ids;
+      this.$modal
+        .confirm('是否确认删除证书管理编号为"' + ids + '"的数据项？')
+        .then(function () {
+          return delCertificates(ids);
+        })
+        .then(() => {
+          this.getList();
+          this.$modal.msgSuccess("删除成功");
+        })
+        .catch(() => {});
+    },
+  },
+};
+</script>
+<style lang="scss" scoped>
+@import "@/assets/styles/myTable.scss";
+// @import "@/assets/styles/element-variables.scss";
+.search {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.book-main {
+  display: flex;
+  flex-wrap: wrap;
+  .child-box {
+    height: 50%;
+    width: 20%;
+    box-sizing: border-box;
+    padding: 10px;
+    & > div {
+      height: 100%;
+      width: 100%;
+      display: flex;
+      flex-direction: column;
+      box-shadow: 0px 3px 15px 0px rgba(184, 184, 184, 0.22);
+      border-radius: 10px;
+      overflow: hidden;
+      .operate {
+        flex: 1;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        padding: 0 10px;
+        .right-operate {
+          display: flex;
+          align-items: center;
+          justify-content: center;
+        }
+        .operate-item {
+          text-align: center;
+          font-size: 14px;
+          color: #8a8585;
+          cursor: pointer;
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/src/views/volunteer/gxhzs/gxhzsgl/index.vue b/src/views/volunteer/gxhzs/gxhzsgl/index.vue
index 0a9ccad..d66c9ed 100644
--- a/src/views/volunteer/gxhzs/gxhzsgl/index.vue
+++ b/src/views/volunteer/gxhzs/gxhzsgl/index.vue
@@ -10,11 +10,11 @@
       >
         <el-form-item prop="name">
           <el-input
-            v-model="queryParams.input"
+            v-model="queryParams.name"
             placeholder="请输入关键字"
             clearable
           >
-            <div class="search-btn" slot="append">
+            <div class="search-btn" slot="append" @click="handleSearch">
               <i class="el-icon-search"></i>
             </div>
           </el-input>
@@ -29,7 +29,49 @@
       >
     </div>
 
-    <div class="book-main" :style="{ height: tableHeigth + 'px' }">
+    <ul class="book-main" :style="{ height: tableHeigth + 'px' }">
+      <li v-for="item in certificatesList" :key="item.id">
+        <el-image
+          style="width: 100%; height: 90%"
+          :src="baseUrl + item.cover"
+          fit="fill"
+          :preview-src-list="[`${baseUrl + item.cover}`]"
+        >
+        </el-image>
+        <div class="operate">
+          <div class="integral">
+            {{ item.name }}
+          </div>
+          <div class="operate-child">
+            <el-button
+              type="text"
+              size="mini"
+              style="color: #909399"
+              @click="handleInfo(item)"
+              >查看</el-button
+            >
+            <el-button
+              type="text"
+              size="mini"
+              style="color: #e6a23c; margin: 0 10px"
+              @click="handleUpdate(item)"
+              v-hasPermi="['system:certificates:edit']"
+              >修改</el-button
+            >
+            <el-button
+              v-hasPermi="['system:certificates:remove']"
+              type="text"
+              size="mini"
+              style="color: #f56c6c"
+              @click="handleDelete(item)"
+              >删除</el-button
+            >
+          </div>
+        </div>
+      </li>
+    </ul>
+
+    <!-- <div class="book-main" :style="{ height: tableHeigth + 'px' }">
       <div class="child-box" v-for="item in certificatesList" :key="item.id">
         <div>
           <el-image
@@ -44,39 +86,19 @@
             <div>高级</div>
             <div class="right-operate">
               <div class="operate-item">
-                <el-button
-                  type="text"
-                  size="mini"
-                  style="color: #909399"
-                  @click="handleInfo(item)"
-                  >查看</el-button
-                >
+              
               </div>
               <div class="operate-item">
-                <el-button
-                  type="text"
-                  size="mini"
-                  style="color: #e6a23c; margin: 0 10px"
-                  @click="handleUpdate(item)"
-                  v-hasPermi="['system:certificates:edit']"
-                  >修改</el-button
-                >
+              
               </div>
               <div class="operate-item">
-                <el-button
-                  v-hasPermi="['system:certificates:remove']"
-                  type="text"
-                  size="mini"
-                  style="color: #f56c6c"
-                  @click="handleDelete(item)"
-                  >删除</el-button
-                >
+              
               </div>
             </div>
           </div>
         </div>
       </div>
-    </div>
+    </div> -->
     <pagination
       v-show="total > 0"
       :total="total"
@@ -177,11 +199,11 @@ export default {
       baseUrl: process.env.VUE_APP_BASE_API,
       certificatesList: [],
       tableHeigth: 0,
-      queryParams: {},
       loading: false,
       tableData: [],
       total: 0,
       queryParams: {
+        name: undefined,
         pageNum: 1,
         pageSize: 10,
       },
@@ -201,6 +223,12 @@ export default {
     });
   },
   methods: {
+    /**搜索 */
+    handleSearch() {
+      this.queryParams.pageNum = 1;
+      this.queryParams.pageSize = 10;
+      this.getList();
+    },
     /** 查询证书管理列表 */
     getList() {
       this.loading = true;
@@ -308,41 +336,48 @@ export default {
   justify-content: space-between;
 }
 
+// 网格布局
 .book-main {
+  margin: 0;
+  padding: 0;
   display: flex;
   flex-wrap: wrap;
-  .child-box {
-    height: 50%;
-    width: 20%;
-    box-sizing: border-box;
-    padding: 10px;
-    & > div {
-      height: 100%;
+  width: 100%;
+  li {
+    width: 19%;
+    height: 49%;
+    margin-right: calc(1% + (2% / 8));
+    margin-bottom: 1%;
+    list-style: none;
+    background: #fff;
+    box-shadow: 0px 3px 15px 0px rgba(184, 184, 184, 0.22);
+    border-radius: 10px;
+    .operate {
+      height: 10%;
       width: 100%;
       display: flex;
-      flex-direction: column;
-      box-shadow: 0px 3px 15px 0px rgba(184, 184, 184, 0.22);
-      border-radius: 10px;
-      overflow: hidden;
-      .operate {
+      justify-content: space-between;
+      align-content: center;
+      padding: 0 10px;
+      .integral {
         flex: 1;
-        display: flex;
-        align-items: center;
-        justify-content: space-between;
-        padding: 0 10px;
-        .right-operate {
-          display: flex;
-          align-items: center;
-          justify-content: center;
-        }
-        .operate-item {
-          text-align: center;
-          font-size: 14px;
-          color: #8a8585;
-          cursor: pointer;
-        }
+        font-weight: 400;
+        font-family: "Alibaba-PuHuiTi-Regular";
+        color: #4d4949;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
       }
     }
   }
+  li:nth-of-type(5n) {
+    margin-right: 0;
+  }
+  li:nth-of-type(n + 2) {
+    margin-bottom: 0;
+  }
+}
+::v-deep .pagination-container {
+  background: transparent !important;
 }
 </style>