部门页面塌陷修复

src/api/volunteer/gxhzs/gxhzsgl/index.js

@@ -0,0 +1,44 @@
+import request from "@/utils/request";
+
+// 查询证书管理列表
+export function listCertificates(query) {
+  return request({
+    url: "/system/certificates/list",
+    method: "get",
+    params: query,
+  });
+}
+
+// 查询证书管理详细
+export function getCertificates(id) {
+  return request({
+    url: "/system/certificates/" + id,
+    method: "get",
+  });
+}
+
+// 新增证书管理
+export function addCertificates(data) {
+  return request({
+    url: "/system/certificates",
+    method: "post",
+    data: data,
+  });
+}
+
+// 修改证书管理
+export function updateCertificates(data) {
+  return request({
+    url: "/system/certificates",
+    method: "put",
+    data: data,
+  });
+}
+
+// 删除证书管理
+export function delCertificates(id) {
+  return request({
+    url: "/system/certificates/" + id,
+    method: "delete",
+  });
+}

src/assets/styles/ruoyi.scss

@@ -53,7 +53,18 @@
   margin-left: 20px;
 }
 
-.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 {
+.h1,
+.h2,
+.h3,
+.h4,
+.h5,
+.h6,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
   font-family: inherit;
   font-weight: 500;
   line-height: 1.1;
@@ -76,7 +87,8 @@
 }
 
 .el-table {
-	.el-table__header-wrapper, .el-table__fixed-header-wrapper {
+  .el-table__header-wrapper,
+  .el-table__fixed-header-wrapper {
     th {
       word-break: break-word;
       background-color: #f8f8f9;
@@ -98,7 +110,7 @@
   color: #6379bb;
   border-bottom: 1px solid #ddd;
   margin: 8px 10px 25px 10px;
-	padding-bottom:5px
+  padding-bottom: 5px;
 }
 
 /** 表格布局 **/
@@ -114,7 +126,7 @@
 .tree-border {
   margin-top: 5px;
   border: 1px solid #e5e6e7;
-    background: #FFFFFF none;
+  background: #ffffff none;
   border-radius: 4px;
 }
 
@@ -139,12 +151,14 @@
 }
 
 /** 表格更多操作下拉样式 */
-.el-table .el-dropdown-link,.el-table .el-dropdown-selfdefine {
+.el-table .el-dropdown-link,
+.el-table .el-dropdown-selfdefine {
   cursor: pointer;
   margin-left: 5px;
 }
 
-.el-table .el-dropdown, .el-icon-arrow-down {
+.el-table .el-dropdown,
+.el-icon-arrow-down {
   font-size: 12px;
 }
 
@@ -177,6 +191,9 @@
   float: right !important;
 }
 
+.el-card {
+  width: 100%;
+}
 .el-card__header {
   padding: 14px 15px 7px;
   min-height: 40px;
@@ -195,22 +212,22 @@
 /* button color */
 .el-button--cyan.is-active,
 .el-button--cyan:active {
-  background: #20B2AA;
+  background: #20b2aa;
-  border-color: #20B2AA;
+  border-color: #20b2aa;
-  color: #FFFFFF;
+  color: #ffffff;
 }
 
 .el-button--cyan:focus,
 .el-button--cyan:hover {
-  background: #48D1CC;
+  background: #48d1cc;
-  border-color: #48D1CC;
+  border-color: #48d1cc;
-  color: #FFFFFF;
+  color: #ffffff;
 }
 
 .el-button--cyan {
-  background-color: #20B2AA;
+  background-color: #20b2aa;
-  border-color: #20B2AA;
+  border-color: #20b2aa;
-  color: #FFFFFF;
+  color: #ffffff;
 }
 
 /* text color */
@@ -266,7 +283,7 @@
 
 /* 拖拽列样式 */
 .sortable-ghost {
-	opacity: .8;
+  opacity: 0.8;
   color: #fff !important;
   background: #42b983 !important;
 }

src/layout/components/Sidebar/index.vue

@@ -10,9 +10,9 @@
   >
     <logo v-if="showLogo" :collapse="isCollapse" />
     <el-scrollbar :class="settings.sideTheme" wrap-class="scrollbar-wrapper">
+      <!-- :collapse="isCollapse" -->
       <el-menu
         :default-active="activeMenu"
-        :collapse="isCollapse"
         :background-color="
           settings.sideTheme === 'theme-dark'
             ? 'transparent'

src/layout/index.vue

@@ -103,7 +103,7 @@ export default {
   .app-main {
     height: calc(100% - 60px);
     display: flex;
-    align-items: center;
+
     .left-sidebar {
       height: 100%;
       background: url("~@/assets/images/sidebar.png");

src/views/tool/swagger/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <i-frame :src="url" />
+  <i-frame :src="url" style="width: 100%" />
 </template>
 <script>
 import iFrame from "@/components/iFrame/index";
@@ -8,7 +8,7 @@ export default {
   components: { iFrame },
   data() {
     return {
-      url: process.env.VUE_APP_BASE_API + "/swagger-ui/index.html"
+      url: process.env.VUE_APP_BASE_API + "/swagger-ui/index.html",
     };
   },
 };

src/views/volunteer/gxhzs/gxhzsgl/index.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="app-container" ref="main">
-    <div ref="search">
+    <div ref="search" class="search">
       <el-form
         :model="queryParams"
         ref="queryForm"
@@ -20,6 +20,13 @@
           </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' }">
@@ -29,7 +36,10 @@
           src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg"
           fit="cover"
         ></el-image>
-        <div class="operate" style="font-size: 14px; color: #4d4949">
+        <div
+          class="operate"
+          style="font-size: 14px; color: #4d4949; font-weight: bold"
+        >
           <div>高级</div>
           <div class="right-operate">
             <div class="operate-item">
@@ -42,11 +52,18 @@
                 type="text"
                 size="mini"
                 style="color: #e6a23c; margin: 0 10px"
+                @click="handleUpdate"
+                v-hasPermi="['system:certificates:edit']"
                 >修改</el-button
               >
             </div>
             <div class="operate-item">
-              <el-button type="text" size="mini" style="color: #f56c6c"
+              <el-button
+                v-hasPermi="['system:certificates:remove']"
+                type="text"
+                size="mini"
+                style="color: #f56c6c"
+                @click="handleDelete"
                 >删除</el-button
               >
             </div>
@@ -61,10 +78,60 @@
       :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>
   </div>
 </template>
 
 <script>
+import {
+  listCertificates,
+  getCertificates,
+  delCertificates,
+  addCertificates,
+  updateCertificates,
+} from "@/api/volunteer/gxhzs/gxhzsgl/index.js";
 export default {
   data() {
     return {
@@ -77,24 +144,111 @@ export default {
         pageNum: 0,
         pageSize: 10,
       },
+      form: {},
+      rules: {},
+      open: false,
+      title: "",
+      fileList: [],
     };
   },
   created() {
     // //给表格一个固定值
     this.$nextTick(() => {
       this.tableHeigth =
-        this.$refs.main.offsetHeight - this.$refs.search.offsetHeight - 100;
+        this.$refs.main.offsetHeight - this.$refs.search.offsetHeight - 80;
       console.log(this.$refs.search.offsetHeight, "高度");
     });
   },
   methods: {
     getList() {},
+    // 表单重置
+    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 = "添加证书管理";
+    },
+    /** 修改按钮操作 */
+    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;
+}
 ::v-deep .search-container {
   .el-form-item__content {
     width: 550px;
@@ -141,4 +295,22 @@ export default {
     }
   }
 }
+::v-deep .el-dialog__header {
+  background: #f7f5f5;
+  .dialog-title {
+    font-size: 17px;
+    font-family: "Alibaba-PuHuiTi-Bold";
+    color: #4c4949;
+    display: flex;
+    align-items: center;
+
+    .title-line {
+      display: inline-block;
+      width: 5px;
+      height: 18px;
+      background: #f8414d;
+      margin-right: 6px;
+    }
+  }
+}
 </style>