From baa66f7097d991a2e6214468d37bd47b9588f542 Mon Sep 17 00:00:00 2001
From: shijing <sj_mzw@163.com>
Date: Fri, 1 Sep 2023 17:30:23 +0800
Subject: [PATCH] =?UTF-8?q?=E6=B7=BB=E5=8A=A0=E8=AF=81=E4=B9=A6=E6=A8=A1?=
 =?UTF-8?q?=E5=9D=97?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 client/src/api/edu.js                      |  43 +++
 client/src/router/index.js                 |   6 +
 client/src/views/testvideo/certificate.vue | 366 +++++++++++++++++++++
 3 files changed, 415 insertions(+)
 create mode 100644 client/src/api/edu.js
 create mode 100644 client/src/views/testvideo/certificate.vue

diff --git a/client/src/api/edu.js b/client/src/api/edu.js
new file mode 100644
index 0000000..00f9320
--- /dev/null
+++ b/client/src/api/edu.js
@@ -0,0 +1,43 @@
+import request from '@/utils/request'
+
+//获取列表
+export function getCertificateList(query) {
+  return request({
+    url: '/edu/certificate/',
+    method: 'get',
+    params: query
+  })
+}
+export function createCertificate(data) {
+    return request({
+      url: '/edu/certificate/',
+      method: 'post',
+      data
+    })
+  }
+  export function updateCertificate(id, data) {
+    return request({
+      url: `/edu/certificate/${id}/`,
+      method: 'put',
+      data
+    })
+  }
+  export function impCertificate(data) {
+    return request({
+      url: '/edu/certificate/imp/',
+      method: 'post',
+      data
+    })
+  }
+  export function deleteCertificate(id) {
+    return request({
+      url: `/edu/certificate/${id}/`,
+      method: 'delete'
+    })
+  }
+  export function getCertificate(id) {
+    return request({
+      url: `/edu/certificate/${id}/`,
+      method: 'get'
+    })
+  }
\ No newline at end of file
diff --git a/client/src/router/index.js b/client/src/router/index.js
index 14359e0..3bddf2b 100644
--- a/client/src/router/index.js
+++ b/client/src/router/index.js
@@ -408,6 +408,12 @@ export const asyncRoutes = [
     meta: { title: '视频培训', icon: 'video', perms: ['video_views'] },
     alwaysShow: true,
     children: [
+      {
+        path: 'certificate',
+        name: 'certificate',
+        component: () => import('@/views/testvideo/certificate.vue'),
+        meta: { title: '证书列表', perms: ['video_view'] }
+      },
       {
         path: 'videolist',
         name: 'videolist',
diff --git a/client/src/views/testvideo/certificate.vue b/client/src/views/testvideo/certificate.vue
new file mode 100644
index 0000000..e6f1f51
--- /dev/null
+++ b/client/src/views/testvideo/certificate.vue
@@ -0,0 +1,366 @@
+<template>
+  <div class="app-container">
+    <el-card>
+      <div>
+        <el-input
+          v-model="listQuery.search"
+          placeholder="姓名/证书号/单位"
+          style="width: 300px"
+          class="filter-item"
+          @keyup.enter.native="handleFilter"
+        />
+        <el-button
+          class="filter-item"
+          type="primary"
+          icon="el-icon-search"
+          @click="handleFilter"
+          >搜索</el-button
+        >
+      </div>
+      <div style="margin-top: 6px">
+        <el-button type="primary" icon="el-icon-plus" @click="handleAdd" v-if="checkPermission(['certificate_create'])"
+          >新增证书</el-button>
+        <el-popover
+          placement="top"
+          width="160"
+          v-if="checkPermission(['certificate_import'])"
+          v-model="popovervisible"
+        >
+          <p>导入证书</p>
+          <div style="text-align: left; margin: 0">
+            <el-upload
+              :action="upUrl"
+              :on-success="handleUploadSuccess"
+              accept=".xlsx"
+              :headers="upHeaders"
+              :show-file-list="false"
+            >
+              <el-button
+                size="small"
+                type="primary"
+                @click="popovervisible = false"
+                >上传导入</el-button
+              >
+            </el-upload>
+          </div>
+          <el-button slot="reference">导入证书</el-button>
+        </el-popover>
+      </div>
+    </el-card>
+    <el-card style="margin-top: 10px">
+    <el-table
+      v-loading="listLoading"
+      :data="tableList.results"
+      style="width: 100%;"
+      border
+      fit
+      stripe
+      highlight-current-row
+      max-height="700"
+      ref="filterTable"
+    >
+     <el-table-column
+      type="selection"
+      width="55">
+    </el-table-column>
+      <el-table-column type="index" width="50" />
+      <el-table-column label="所属单位" prop="所属单位">
+      </el-table-column>
+      <el-table-column label="姓名" prop="姓名">
+      </el-table-column>
+      <el-table-column label="证书编号" prop="证书编号">
+      </el-table-column>内审员
+      <el-table-column label="职务" prop="职务">
+      </el-table-column>
+      <el-table-column label="资格">
+        <template slot-scope="scope">
+          <span v-if="scope.row.是否内审员">内审员 </span>
+          <span v-if="scope.row.是否授权签字人">授权签字人 </span>
+          <span v-if="scope.row.是否最高管理者">最高管理者 </span>
+          <span v-if="scope.row.是否质量负责人">质量负责人</span>
+        </template>
+      </el-table-column>
+      <el-table-column label="创建日期">
+        <template slot-scope="scope">{{scope.row.create_time.substring(0, 10)}}</template>
+      </el-table-column>
+      <el-table-column align="center" label="操作">
+          <template slot-scope="scope">
+              <el-button type="success" size="small" @click="handleShow(scope.row)" icon="el-icon-picture"></el-button>
+              <el-button type="primary" size="small" @click="handleEdit(scope)" icon="el-icon-edit"
+                  :disabled="!checkPermission(['certificate_update'])"></el-button>
+              <el-button type="danger" size="small" @click="handleDelete(scope)" icon="el-icon-delete"
+                  :disabled="!checkPermission(['certificate_delete'])"></el-button>
+          </template>
+      </el-table-column>
+    </el-table>
+    <pagination
+      v-show="tableList.count > 0"
+      :total="tableList.count"
+      :page.sync="listQuery.page"
+      :limit.sync="listQuery.page_size"
+      @pagination="getList"
+    />
+    </el-card>
+    <el-dialog
+      :visible.sync="dialogVisible"
+      :title="dialogType === 'edit' ? '编辑证书' : '新增证书'"
+    >
+      <el-form
+        ref="Form"
+        :model="form"
+        label-width="160px"
+        label-position="right"
+        :rules="rule"
+      >
+      <el-row>
+        <el-col :span="12">
+          <el-form-item label="姓名">
+            <el-input v-model="form.姓名" />
+          </el-form-item>
+          <el-form-item label="单位名称" prop="单位名称">
+            <el-input v-model="form.单位名称"/>
+          </el-form-item>
+          <el-form-item label="性别">
+            <el-input v-model="form.性别" />
+          </el-form-item>
+          <el-form-item label="手机号">
+            <el-input v-model="form.手机号"/>
+          </el-form-item>
+          <el-form-item label="内审员">
+            <el-switch v-model="form.是否内审员" />
+          </el-form-item>
+          <el-form-item label="授权签字人">
+            <el-switch v-model="form.是否授权签字人" />
+          </el-form-item>
+          <el-form-item label="质量负责人">
+            <el-switch v-model="form.是否质量负责人" />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="证书编号" prop="证书编号">
+            <el-input v-model="form.证书编号" />
+          </el-form-item>
+          <el-form-item label="所属单位" prop="所属单位">
+            <el-input v-model="form.所属单位"/>
+          </el-form-item>
+          <el-form-item label="职务" prop="name">
+            <el-input v-model="form.职务"/>
+          </el-form-item>
+          
+          <el-form-item label="最高管理者">
+            <el-switch v-model="form.是否最高管理者" />
+          </el-form-item>
+          <el-form-item label="需要集团证书">
+            <el-switch v-model="form.是否需要集团证书" />
+          </el-form-item>
+          <el-form-item label="需要北京标研培训合格">
+            <el-switch v-model="form.是否需要北京标研培训合格" />
+          </el-form-item>
+        </el-col>
+      </el-row>
+      </el-form>
+      <div style="text-align: right">
+        <el-button type="danger" @click="dialogVisible = false">取消</el-button>
+        <el-button type="primary" @click="confirm('Form')">确认</el-button>
+      </div>
+    </el-dialog>
+    <el-dialog
+      :visible.sync="dialogShow"
+      title="证书图片"
+    >
+      <div class="demo-image__preview">
+        <el-image
+          style="max-width:100%;width: 780px; height: 500px;margin: auto;display: block;"
+          :src="imgurl"
+          :zoom-rate="1.2"
+          :preview-src-list="srcList"
+          fit="cover"
+        />
+      </div>
+      <div style="text-align: right">
+        <el-button  @click="dialogVisible = false">关闭</el-button>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+<style >
+.el-table-filter {
+  width: 400px;
+  max-height: 300px;
+  overflow-y: auto;
+}
+</style>
+<script>
+import {getCertificateList,createCertificate,updateCertificate,impCertificate,deleteCertificate,getCertificate} from "@/api/edu";
+import checkPermission from "@/utils/permission";
+import { upUrl, upHeaders } from "@/api/file";
+import Pagination from "@/components/Pagination"; // secondary package based on el-pagination
+const dflistForm = {
+  "姓名": "",
+  "性别": "",
+  "证书编号": "",
+  "所属单位": "",
+  "单位名称": "",
+  "职务": "",
+  "手机号": "",
+  "是否内审员": true,
+  "是否授权签字人": true,
+  "是否质量负责人": true,
+  "是否最高管理者": true,
+  "是否需要集团证书": true,
+  "是否需要北京标研培训合格": true,
+};
+const dflistQuery = {
+  page: 1,
+  search:'',
+  page_size: 20,
+};
+export default {
+  components: { Pagination },
+  data() {
+    return {
+      form:{},
+      upHeaders: upHeaders(),
+      upUrl: upUrl(),
+      delarr: [],
+      srcList:[],
+      imgurl:'',
+      groupBy: { sszx: [], glzz: [] },
+      tableList: { count: 0 ,list:[] },
+      listLoading: true,
+      listQuery: Object.assign({}, dflistQuery),
+      form: Object.assign({}, dflistForm),
+      enabledOptions: [
+        { key: "true", display_name: "激活" },
+        { key: "false", display_name: "禁用" },
+      ],
+      dialogShow:false,
+      dialogVisible: false,
+      dialogType: "new",
+      popovervisible: false,
+      rule: {
+        证书编号: [{ required: true, message: "请填写", trigger: "blur" }],
+        所属单位: [{ required: true, message: "请填写", trigger: "blur" }],
+        单位名称: [{ required: true, message: "请填写", trigger: "blur" }],
+      },
+    };
+  },
+  mounted() {
+    this.getList();
+  },
+  methods: {
+    checkPermission,
+    handleUploadSuccess(res, file) {
+      const loading = this.openLoading();
+      let data = { path: res.data.path };
+      impCertificate(data)
+        .then((res) => {
+          this.$message({
+            message: "导入成功",
+            type: "success",
+          });
+          loading.close();
+          this.getList();
+        })
+        .catch((error) => {
+          loading.close();
+        });
+    },
+    getList() {
+      this.listLoading = true;
+      getCertificateList(this.listQuery).then((response) => {
+        if (response.data) {
+          this.tableList = response.data;
+        }
+        this.listLoading = false;
+      });
+    },
+   
+    handleFilter() {
+      this.listQuery.page = 1;
+      this.getList();
+    },
+    handleAdd() {
+      this.cma = Object.assign({}, dflistForm);
+      this.dialogType = "new";
+      this.dialogVisible = true;
+      this.$nextTick(() => {
+        this.$refs["Form"].clearValidate();
+      });
+    },
+    handleEdit(scope) {
+      this.form = Object.assign({}, scope.row); // copy obj
+      this.dialogType = "edit";
+      this.dialogVisible = true;
+      this.$nextTick(() => {
+        this.$refs["Form"].clearValidate();
+      });
+    },
+    handleDelete(scope) {
+      this.$confirm("确认删除?", "警告", {
+        confirmButtonText: "确认",
+        cancelButtonText: "取消",
+        type: "error",
+      })
+        .then(async () => {
+          await deleteCertificate(scope.row.id);
+          this.getList();
+          this.$message({
+            type: "success",
+            message: "成功删除!",
+          });
+        })
+        .catch((err) => {
+        });
+    },
+    async confirm(form) {
+      this.$refs[form].validate((valid) => {
+        if (valid) {
+          const isEdit = this.dialogType === "edit";
+          if (isEdit) {
+            updateCertificate(this.form.id, this.form).then((res) => {
+              if (res.code >= 200) {
+                this.getList();
+                this.dialogVisible = false;
+                this.$notify({
+                  title: "成功",
+                  message: "编辑成功",
+                  type: "success",
+                  duration: 2000,
+                });
+              }
+            });
+          } else {
+            createCertificate(this.form).then((res) => {
+              if (res.code >= 200) {
+                this.getList();
+                this.dialogVisible = false;
+                this.$notify({
+                  title: "成功",
+                  message: "新增成功",
+                  type: "success",
+                  duration: 2000,
+                });
+              }
+            });
+          }
+        } else {
+          return false;
+        }
+      });
+    },
+    handleShow(row){
+      if(row.证书地址!==null){
+        this.imgurl = 'https://testsearch.ctc.ac.cn'+row.证书地址;
+        this.srcList.push(this.imgurl);
+      }else{
+        getCertificate(row.id).then(res=>{
+          this.imgurl='https://testsearch.ctc.ac.cn'+res.data.证书地址;
+          this.srcList.push(this.imgurl);
+        })
+      }
+      this.dialogShow = true;
+    },
+  },
+};
+</script>