zc

src/views/safetyEducationExaminationNew/personnelApproval/index.vue

@@ -2,22 +2,59 @@
 <template>
   <div class="app-container lab-binding-card">
     <div class="page-container">
-      <div class="card-header">
-        <span class="card-title">实验室绑定申请</span>
-        <div class="header-right">
-          <!-- 分组筛选按钮 -->
-          <div class="table-top-button-box">
-            <div>
-              <p
-                v-for="(btn, i) in filterData.statusBtns" :key="btn.value"
-                :class="filterData.activeStatus === btn.value ? 'check-table-button' : ''"
-                @click="checkButton(btn.value)"
-              >{{ btn.label }}</p>
+      <div class="page-form-title-box">
+        <el-form :model="queryParams" class="form-box" ref="queryForm"
+                 :inline="true" style="width:100%;">
+          <el-form-item label="" prop="searchValue">
+            <!-- 分组筛选按钮 -->
+            <div class="table-top-button-box">
+              <div>
+                <p
+                  v-for="(btn, i) in filterData.statusBtns" :key="btn.value"
+                  :class="filterData.activeStatus === btn.value ? 'check-table-button' : ''"
+                  @click="checkButton(btn.value)"
+                >{{ btn.label }}</p>
+              </div>
             </div>
-          </div>
-        </div>
+          </el-form-item>
+          <el-form-item label="" prop="deptId">
+            <el-cascader
+              style="width: 180px"
+              v-model="queryParams.deptId"
+              :options="optionDeptList"
+              :props="{
+                    emitPath:false,
+                    checkStrictly: true,
+                    value: 'deptId',
+                    label: 'deptName',
+                    children: 'child',
+                  }"
+              :show-all-levels="false"
+              filterable
+              placeholder="学院单位"
+            ></el-cascader>
+          </el-form-item>
+          <el-form-item label="" prop="labKeyword">
+            <el-input
+              maxLength="30"
+              v-model="queryParams.labKeyword"
+              placeholder="实验室名称/房间号"
+              style="width: 200px"
+            />
+          </el-form-item>
+          <el-form-item label="" prop="userKeyword">
+            <el-input
+              maxLength="30"
+              v-model="queryParams.userKeyword"
+              placeholder="姓名/学工号"
+              style="width: 200px"
+            />
+          </el-form-item>
+          <p class="page-inquire-common-style-button" @click="handleQuery">查询</p>
+          <p class="page-reset-common-style-button" @click="resetQuery">重置</p>
+        </el-form>
       </div>
-      <div class="page-content-box">
+      <div class="page-content-box" style="margin:20px;">
         <el-table class="table-box" :data="dataList" border>
           <el-table-column prop="userName" label="申请人" width="80" show-overflow-tooltip/>
           <el-table-column prop="userAccount" label="学号" width="110" show-overflow-tooltip/>
@@ -44,7 +81,7 @@
           <el-table-column prop="statusCode" label="状态" width="80" align="center" show-overflow-tooltip>
             <template slot-scope="scope">
             <span :class="scope.row.statusCode==0?'status-txt-a':(scope.row.statusCode==1?'status-txt-b':(scope.row.statusCode==2?'status-txt-c':''))">
-              {{ scope.row.statusCode==0?'待审批':(scope.row.statusCode==1?'已通过':(scope.row.statusCode==2?'已驳回':(scope.row.statusCode==3?'已解绑':''))) }}
+              {{ scope.row.statusCode==0?'待审批':(scope.row.statusCode==1?'已绑定':(scope.row.statusCode==2?'已驳回':(scope.row.statusCode==3?'已解绑':''))) }}
             </span>
             </template>
           </el-table-column>
@@ -109,24 +146,29 @@
 <script>
   import {
     examElLabEduRelationAuditList,examElLabEduRelationAudit,
-    examElLabEduRelationUnbind,
+    examElLabEduRelationUnbind,systemDeptCurrentDept,
   } from "@/api/safetyEducationExaminationNew/index";
   export default {
     name: 'LabBindingApply',
     data() {
       return {
+        optionDeptList:[],
         filterData: {
           activeStatus: '',
           statusBtns: [
             { label: '全部',   value: '' },
             { label: '待审批', value: '0' },
-            { label: '已通过', value: '1' },
+            { label: '已绑定', value: '1' },
             { label: '已驳回', value: '2' },
+            { label: '已解绑', value: '3' },
           ]
         },
         queryParams: {
           page: 1,
           pageSize: 20,
+          deptId: '',
+          labKeyword: '',
+          userKeyword: '',
         },
         dataList: [],
         //数据数量
@@ -144,6 +186,7 @@
       }
     },
     mounted(){
+      this.systemDeptCurrentDept();
       this.getList();
     },
     methods: {
@@ -221,6 +264,18 @@
         this.$set(this.queryParams, 'page', 1)
         this.getList()
       },
+      //重置
+      resetQuery(){
+        this.$set(this.filterData,'activeStatus','');
+        this.$set(this,'queryParams',{
+          page: 1,
+          pageSize: 20,
+          deptId: '',
+          labKeyword: '',
+          userKeyword: '',
+        });
+        this.getList();
+      },
       //获取数据列表
       getList() {
         let obj = JSON.parse(JSON.stringify(this.queryParams))
@@ -230,13 +285,20 @@
           this.$set(this, 'total', response.data.total)
         })
       },
+      //学院列表
+      systemDeptCurrentDept(){
+        systemDeptCurrentDept({}).then(response => {
+          const list = response.data || [];
+          this.formatTreeData(list);
+          this.$set(this,'optionDeptList',list);
+        });
+      },
     },
   }
 </script>
 
 <style scoped lang="scss">
   .lab-binding-card {
-    padding:20px;
 
     .card-header {
       display: flex;
@@ -283,8 +345,9 @@
             border-bottom-left-radius: 4px;
           }
           &:nth-child(2) { border-left: none; }
-          &:nth-child(3) { border-left: none; border-right: none; }
-          &:nth-child(4) {
+          &:nth-child(3) { border-left: none; }
+          &:nth-child(4) { border-left: none; border-right: none; }
+          &:nth-child(5) {
             border-top-right-radius: 4px;
             border-bottom-right-radius: 4px;
           }