证书功能基本实现

src/assets/styles/myTable.scss

@@ -26,7 +26,7 @@
       display: inline-block;
       width: 5px;
       height: 18px;
-      background: #f8414d;
+      background: $--color-primary;
       margin-right: 6px;
     }
   }

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

@@ -1,9 +1,250 @@
 <template>
-  <div class="app-container">个性化证书发放</div>
+  <div class="app-container" ref="main">
+    <div ref="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>
+    </div>
+
+    <el-table
+      v-loading="loading"
+      :data="tableData"
+      :height="tableHeigth + 'px'"
+    >
+      <el-table-column
+        label="序号"
+        align="center"
+        type="index"
+        prop="id"
+        width="55"
+      />
+      <el-table-column label="参与活动" align="center" prop="activityId" />
+      <el-table-column label="证书id" align="center" prop="certificateId" />
+      <el-table-column label="用户" align="center" prop="uid" />
+      <el-table-column label="状态" align="center" prop="type">
+        <template slot-scope="scope">
+          {{ scope.row.type == 1 ? "已发放" : "未发放" }}
+        </template>
+      </el-table-column>
+      <!-- <el-table-column
+        label="发证时间"
+        align="center"
+        prop="datetime"
+        width="180"
+      >
+        <template slot-scope="scope">
+          <span>{{ parseTime(scope.row.datetime, "{y}-{m}-{d}") }}</span>
+        </template>
+      </el-table-column> -->
+      <el-table-column
+        label="操作"
+        align="center"
+        class-name="small-padding fixed-width"
+      >
+        <template slot-scope="scope">
+          <el-button
+            size="mini"
+            type="text"
+            @click="handleFabu(scope.row)"
+            v-hasPermi="['system:certificates:edit']"
+            >发布</el-button
+          >
+        </template>
+      </el-table-column>
+    </el-table>
+    <pagination
+      v-show="total > 0"
+      :total="total"
+      :page.sync="queryParams.pageNum"
+      :limit.sync="queryParams.pageSize"
+      @pagination="getList"
+    />
+
+    <!-- 发布对话框 -->
+    <el-dialog :visible.sync="open" width="500px" append-to-body>
+      <div slot="title" class="dialog-title">
+        <span class="title-line"></span>
+        {{ title }}
+      </div>
+      <div class="info-box">
+        <div>
+          <div class="info-item">
+            <div class="item-lable">参与活动:</div>
+            <div class="item-value">{{ form.activityId }}</div>
+          </div>
+          <div class="info-item">
+            <div class="item-lable">证书id:</div>
+            <div class="item-value">{{ form.certificateId }}</div>
+          </div>
+          <div class="info-item">
+            <div class="item-lable">用户:</div>
+            <div class="item-value">{{ form.uid }}</div>
+          </div>
+          <div class="info-item">
+            <div class="item-lable">状态:</div>
+            <div class="item-value">
+              {{ form.type == 1 ? "已发放" : "未发放" }}
+            </div>
+          </div>
+        </div>
+      </div>
+      <div slot="footer" class="dialog-footer">
+        <el-button @click="cancel">关 闭</el-button>
+        <el-button type="warning" @click="submitPaper">发放纸质证书</el-button>
+        <el-button type="primary" @click="submitElectron"
+          >发放电子证书</el-button
+        >
+      </div>
+    </el-dialog>
+    <!-- 纸质证书 -->
+    <el-dialog :visible.sync="infoOpen" width="500px" append-to-body>
+      <div slot="title" class="dialog-title">
+        <span class="title-line"></span>
+        邮政信息
+      </div>
+      <Editor v-model="form.content" :min-height="192" />
+      <div slot="footer" class="dialog-footer">
+        <el-button type="primary" @click="submitForm">提 交</el-button>
+      </div>
+    </el-dialog>
+  </div>
 </template>
 
 <script>
-export default {};
-</script>
+import {
+  getSellectall,
+  postElectron,
+  getInfo,
+  editData,
+} from "@/api/volunteer/gxhzs/hdzsff/index.js";
+export default {
+  data() {
+    return {
+      infoOpen: false,
+      form: {},
+      open: false,
+      title: "",
+      tableHeigth: 0,
+      queryParams: {},
+      loading: false,
+      tableData: [],
+      total: 1,
+      queryParams: {
+        creType: 2,
+        pageNum: 1,
+        pageSize: 20,
+      },
+    };
+  },
+  created() {
+    // //给表格一个固定值
+    this.$nextTick(() => {
+      this.tableHeigth =
+        this.$refs.main.offsetHeight - this.$refs.search.offsetHeight - 75;
+      this.getList();
+    });
+  },
+  methods: {
+    /**纸质提交 */
+    submitForm() {
+      editData(this.form).then((res) => {
+        this.submitElectron();
+      });
+    },
+    /**纸质 */
+    submitPaper() {
+      this.infoOpen = true;
+    },
+    /**电子 */
+    submitElectron() {
+      let data = {
+        activityId: this.form.activityId,
+        uid: this.form.uid,
+      };
+      postElectron(data).then((res) => {
+        this.infoOpen = false;
+        this.open = false;
+        this.$modal.msgSuccess("发放成功");
+        this.getList();
+      });
+    },
+    /**关闭 */
+    cancel() {
+      this.open = false;
+      this.reset();
+    },
+    /**重置 */
+    reset() {
+      this.form = {
+        id: null,
+        activityId: null,
+        certificateId: null,
+        uId: null,
+        content: null,
+        createId: null,
+        createBy: null,
+        createTime: null,
+        updateId: null,
+        updateBy: null,
+        updateTime: null,
+        remark: null,
+        userId: null,
+        deptId: null,
+        type: null,
+      };
+    },
+    /** 查询发放记录列表 */
+    getList() {
+      this.loading = true;
+      getSellectall(this.queryParams).then((response) => {
+        this.tableData = response.data.list;
+        this.total = response.data.total;
+        this.loading = false;
+      });
+    },
 
-<style></style>
+    handleFabu(row) {
+      this.reset();
+      let id = row.id;
+      getInfo(id).then((res) => {
+        this.form = res.data;
+        this.title = "发放查看";
+        this.open = true;
+      });
+    },
+  },
+};
+</script>
+<style lang="scss" scoped>
+@import "@/assets/styles/myTable.scss";
+// ::v-deep .search-container {
+//   .el-form-item__content {
+//     width: 550px;
+//   }
+//   .el-input-group__append {
+//     padding-left: 15px !important;
+//     padding-right: 15px !important;
+//     background: #f8414d !important;
+//     border-color: #f8414d !important;
+//     .search-btn {
+//       color: #fff !important;
+//     }
+//   }
+// }
+</style>

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

@@ -183,7 +183,7 @@ export default {
       total: 0,
       queryParams: {
         pageNum: 1,
-        pageSize: 10,
+        pageSize: 20,
       },
       form: {},
       rules: {},

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

@@ -144,11 +144,11 @@ export default {
       queryParams: {},
       loading: false,
       tableData: [],
-      total: 1,
+      total: 0,
       queryParams: {
         creType: 1,
         pageNum: 1,
-        pageSize: 10,
+        pageSize: 20,
       },
     };
   },
@@ -214,7 +214,7 @@ export default {
       this.loading = true;
       getSellectall(this.queryParams).then((response) => {
         this.tableData = response.data.list;
-        this.total = response.total;
+        this.total = response.data.total;
         this.loading = false;
       });
     },