证书类型筛选

src/views/certificate/list.vue

@@ -2,10 +2,10 @@
   <basic-container class="list">
     <div class="flexBetween">
       <div class="flex">
-          <el-select
+        <el-select
           v-model="value"
           filterable
-          style="width:300px;"
+          style="width: 300px"
           placeholder="请选择项目"
           clearable
           @change="projectChange"
@@ -18,15 +18,29 @@
           >
           </el-option>
         </el-select>
-      <div class="header-box-center">
-          <el-input v-model="searchinput" style="width: 240px;margin-right: 10px;" placeholder="请输入"  clearable @clear="searchClick"/>
-          <el-button
-            type="primary"
-
-            class="el-icon-search"
-            @click="searchClick"
-          >搜索</el-button>
-      </div>
+        <el-select
+          v-model="certificateTypeValue"
+          filterable
+          style="width: 300px"
+          placeholder="请选择证书类型"
+          clearable
+          @change="typeChange"
+        >
+          <el-option label="个人证书" :value="1"> </el-option>
+          <el-option label="企业证书" :value="2"> </el-option>
+        </el-select>
+        <div class="header-box-center">
+          <el-input
+            v-model="searchinput"
+            style="width: 240px; margin-right: 10px"
+            placeholder="请输入"
+            clearable
+            @clear="searchClick"
+          />
+          <el-button type="primary" class="el-icon-search" @click="searchClick"
+            >搜索</el-button
+          >
+        </div>
       </div>
 
       <el-button
@@ -34,77 +48,54 @@
         size="mini"
         class="el-icon-plus"
         @click="pushRouter(0)"
-      >新增</el-button>
+        >新增</el-button
+      >
     </div>
 
     <el-table
       class="martop20 tableList"
       :data="tableData"
-      header-color='red'
+      header-color="red"
       style="width: 100%"
     >
-      <el-table-column
-        type="index"
-        label="序号"
-        width="180"
-      >
+      <el-table-column type="index" label="序号" width="180"> </el-table-column>
+      <el-table-column prop="certificateUserName" label="证书所有者">
       </el-table-column>
-      <el-table-column
-        prop="certificateUserName"
-        label="证书所有者"
-      >
+      <el-table-column prop="certificateId" label="证书ID/企业统一社会信用代码">
       </el-table-column>
-      <el-table-column
-        prop="certificateId"
-        label="证书ID/企业统一社会信用代码"
-      >
-      </el-table-column>
-      <el-table-column
-        prop="certificateType"
-        label="证书类型"
-      >
+      <el-table-column prop="certificateType" label="证书类型">
         <template slot-scope="scope">
-          <span v-if="scope.row.certificateType==1">个人证书</span>
+          <span v-if="scope.row.certificateType == 1">个人证书</span>
           <span v-else>企业证书</span>
         </template>
       </el-table-column>
-      <el-table-column
-        prop="isRegister"
-        label="注册"
-      >
+      <el-table-column prop="isRegister" label="注册">
         <template slot-scope="scope">
           <el-button
             type="text"
-            v-if="scope.row.isRegister==0"
+            v-if="scope.row.isRegister == 0"
             @click="register(scope.row.id)"
-          >注册</el-button>
-          <el-button
-            type="text"
-            v-else
-            disabled
-          >已注册</el-button>
+            >注册</el-button
+          >
+          <el-button type="text" v-else disabled>已注册</el-button>
         </template>
       </el-table-column>
-      <el-table-column
-        prop="address"
-        label="操作"
-      >
+      <el-table-column prop="address" label="操作">
         <template slot-scope="scope">
-          <el-button
-            type="text"
-            @click="pushRouter(scope.row.id)"
-          >编辑</el-button>
+          <el-button type="text" @click="pushRouter(scope.row.id)"
+            >编辑</el-button
+          >
           <el-button
             type="text"
             @click="deleteList(scope.row.id)"
-            style="color:rgba(240, 99, 10, 1);"
-          >删除</el-button>
+            style="color: rgba(240, 99, 10, 1)"
+            >删除</el-button
+          >
         </template>
       </el-table-column>
-
     </el-table>
     <el-pagination
-      style="float:right"
+      style="float: right"
       background
       class="martop20 marbottom20"
       layout="prev, pager, next"
@@ -119,135 +110,150 @@
 </template>
 
 <script>
-import { queryProjectList, listpage, goRegister, remove } from "@/api/certificate/list";
+import {
+  queryProjectList,
+  listpage,
+  goRegister,
+  remove,
+} from "@/api/certificate/list";
 
 export default {
-  data () {
+  data() {
     return {
-      searchinput:'',
-      value: '',
+      searchinput: "",
+      value: "",
       options: [],
       tableData: [],
       total: 0,
       pageindex: 1,
       pagesize: 20,
-    }
+      certificateTypeValue: null, //证书类型
+    };
   },
   methods: {
     //#region 页码
-    handleSizeChange (val) {
-      this.pagesize = val
-      this.listpage()
+    handleSizeChange(val) {
+      this.pagesize = val;
+      this.listpage();
+    },
+    handleCurrentChange(val) {
+      this.pageindex = val;
+      this.listpage();
     },
-    handleCurrentChange (val) {
-      this.pageindex = val
-      this.listpage()
+    typeChange() {
+      this.listpage();
     },
     //#endregion
 
     //#region 头接口
-    pushRouter (id) {
+    pushRouter(id) {
       this.$router.push({
-        path: '/certificate/list/addList',
+        path: "/certificate/list/addList",
         query: {
           id,
-          value:this.value
-        }
-      })
-      console.log(this.value,'value');
+          value: this.value,
+        },
+      });
+      console.log(this.value, "value");
     },
     //#endregion
 
     //#region 列表接口
-    projectChange () {//下拉框change事件
-      this.listpage()
+    projectChange() {
+      //下拉框change事件
+      this.listpage();
     },
-    register (id) {//注册按钮
-      this.goRegister(id)
+    register(id) {
+      //注册按钮
+      this.goRegister(id);
     },
-    deleteList (ids) {//删除按钮
-      let _that = this
-      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
-        confirmButtonText: '确定',
-        cancelButtonText: '取消',
-        type: 'warning'
-      }).then(() => {
-        _that.remove({ ids })
-      }).catch(() => {
-        this.$message({
-          type: 'info',
-          message: '已取消删除'
+    deleteList(ids) {
+      //删除按钮
+      let _that = this;
+      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
+        confirmButtonText: "确定",
+        cancelButtonText: "取消",
+        type: "warning",
+      })
+        .then(() => {
+          _that.remove({ ids });
+        })
+        .catch(() => {
+          this.$message({
+            type: "info",
+            message: "已取消删除",
+          });
         });
-      });
     },
-    async remove (ids) {
-      const { data: res } = await remove(ids)
+    async remove(ids) {
+      const { data: res } = await remove(ids);
       console.log(res);
       if (res.code == 200) {
         this.$message({
           type: "success",
-          message: "删除证书成功!"
-        })
-        this.listpage()
+          message: "删除证书成功!",
+        });
+        this.listpage();
       }
     },
-    async queryProjectList () {//获取所有项目
-      const { data: res } = await queryProjectList()
+    async queryProjectList() {
+      //获取所有项目
+      const { data: res } = await queryProjectList();
       if (res.code == 200) {
-        this.options = res.data
-        if(this.$route.query.value){
-          this.value=this.$route.query.value
-        }else{
-          this.value= this.value=this.options[0].id
+        this.options = res.data;
+        if (this.$route.query.value) {
+          this.value = this.$route.query.value;
+        } else {
+          this.value = this.value = this.options[0].id;
         }
-        this.listpage()
-
+        this.listpage();
       }
     },
-    async listpage () {//分页获取证书列表数据
+    async listpage() {
+      //分页获取证书列表数据
       const { data: res } = await listpage({
         current: this.pageindex,
         size: this.pagesize,
         projectId: this.value,
-        certificateUserName:this.searchinput
-      })
+        certificateUserName: this.searchinput,
+        certificateType: this.certificateTypeValue,
+      });
 
       if (res.code == 200) {
-        this.tableData = res.data.records
-        this.total = res.data.total
+        this.tableData = res.data.records;
+        this.total = res.data.total;
       }
     },
-    async goRegister (id) {//注册
-      const { data: res } = await goRegister({ "key" : id })
+    async goRegister(id) {
+      //注册
+      const { data: res } = await goRegister({ key: id });
       console.log(res);
       if (res.code == 200) {
         this.$message({
           type: "success",
-          message: "证书注册成功!"
-        })
-        this.listpage()
+          message: "证书注册成功!",
+        });
+        this.listpage();
       }
     },
-    searchClick(){
-      this.listpage()
-    }
+    searchClick() {
+      this.listpage();
+    },
     //#endregion
   },
-  created () {
-    this.queryProjectList()
-
+  created() {
+    this.queryProjectList();
   },
-}
+};
 </script>
 
-
 <style lang="scss" scoped>
 .tableList {
   ::v-deep th.el-table__cell {
     font-size: 16px !important;
   }
 }
-.header-box-center{
-    margin-left: 40px;
-  }
+.header-box-center {
+  margin-left: 40px;
+}
 </style>