From 15d62c82d29d8fcca20923f1a90011b759b13d2b Mon Sep 17 00:00:00 2001
From: gaoluyang <2820782392@qq.com>
Date: 星期三, 02 四月 2025 16:53:45 +0800
Subject: [PATCH] 成品下单、检验任务-查询显示优化

---
 src/views/business/inspectionTask/index.vue |  554 ++++++++++++++++++++++++++++--------------------------
 1 files changed, 289 insertions(+), 265 deletions(-)

diff --git a/src/views/business/inspectionTask/index.vue b/src/views/business/inspectionTask/index.vue
index 515c16e..ad643f9 100644
--- a/src/views/business/inspectionTask/index.vue
+++ b/src/views/business/inspectionTask/index.vue
@@ -1,145 +1,93 @@
-<style scoped>
-.search {
-  background-color: #fff;
-  height: 40px;
-  display: flex;
-  align-items: center;
-  margin-top: 20px;
-}
-
-.search_thing {
-  display: flex;
-  align-items: center;
-  height: 50px;
-}
-
-.search_label {
-  width: 100px;
-  font-size: 14px;
-  text-align: right;
-}
-
-.search_input {
-  width: calc(100% - 120px);
-}
-
-.ins-order-plan-main .search {
-  width: 100%;
-  height: 40px;
-  background-color: #fff;
-  border-radius: 3px;
-}
-
-.ins-order-plan-main .center {
-  background-color: #fff;
-  border-radius: 3px;
-  padding: 20px;
-  padding-top: 0px;
-}
-
-.tab {
-  list-style-type: none;
-  display: flex;
-  padding-left: 6px;
-}
-
-.tab li {
-  line-height: 24px;
-  padding: 4px 10px;
-  font-size: 14px;
-  color: #333333;
-  border: 1px solid #eeeeee;
-  cursor: pointer;
-}
-
-.tab li:nth-child(1) {
-  border-radius: 8px 0 0 8px;
-}
-
-.tab li:nth-last-child(1) {
-  border-radius: 0 8px 8px 0;
-}
-
-.tab li.active {
-  border-color: #3a7bfa;
-  color: #3a7bfa;
-}
-
-.center .center-options .center-title {
-  width: 100%;
-  display: flex;
-  align-items: center;
-  justify-content: right;
-}
-
-.center .center-options .center-title span:last-child {
-  color: #3a7bfa;
-  font-size: 23px;
-  font-weight: 400;
-}
-
-.view-self-checkbox {
-  margin-left: 50px;
-}
-</style>
-<style>
-.ins-order-plan-main .el-form-item__label {
-  color: #000;
-}
-</style>
 <template>
-  <div class="ins-order-plan-main">
+  <div class="app-container">
     <div style="height: 100%">
       <div class="search">
-        <div class="search_thing">
-          <div class="search_label">濮旀墭缂栧彿锛�</div>
-          <div class="search_input">
+        <el-form :model="queryParams" ref="queryParams" size="small" :inline="true">
+          <el-form-item label="濮旀墭缂栧彿" prop="entrustCode">
             <el-input v-model="queryParams.entrustCode" clearable placeholder="璇疯緭鍏�" size="small"
-              @keyup.enter.native="refreshTable()"></el-input>
-          </div>
-        </div>
-        <div class="search_thing">
-          <div class="search_label">妫�楠岀姸鎬侊細</div>
-          <div class="search_input">
+                      @keyup.enter.native="refreshTable()"></el-input>
+          </el-form-item>
+          <el-form-item label="妫�楠岀姸鎬�" prop="insState">
             <el-select v-model="queryParams.insState" size="small" style="width: 100%" @change="refreshTable()">
               <el-option v-for="(a, i) in dict.type.inspection_task_state" :key="i" :label="a.label"
-                :value="a.value"></el-option>
+                         :value="a.value"></el-option>
             </el-select>
+          </el-form-item>
+          <el-form-item>
+            <el-button size="mini" type="primary" @click="refreshTable()">鏌ヨ</el-button>
+            <el-button size="mini" @click="refresh()">閲嶇疆</el-button>
+          </el-form-item>
+        </el-form>
+      </div>
+      <div class="center" v-loading="tableLoading">
+        <div class="center-options">
+          <div style="display: flex; align-items: center">
+            <span style="font-size: 14px">璇曢獙瀹ょ绫�:</span>
+            <ul class="tab">
+              <li v-for="(m, i) in tabList" :key="i" :class="{ active: i == tabIndex }" @click="handleTab(m, i)">
+                {{ m.label.replace("璇曢獙瀹�", "") }}
+              </li>
+            </ul>
+            <div>
+              <el-checkbox v-model="alone" class="view-self-checkbox"
+                           @change="changeCheckBox"><span>鎴戠殑浠诲姟</span></el-checkbox>
+            </div>
+          </div>
+          <div class="center-title">
+            <span>鎬昏浠诲姟鏁伴噺:</span>
+            <span>{{ page.total }}</span>
           </div>
         </div>
-        <div class="search_thing" style="padding-left: 30px">
-          <el-button size="small" @click="refresh()">閲� 缃�</el-button>
-          <el-button size="small" type="primary" @click="refreshTable()">鏌� 璇�</el-button>
-        </div>
-      </div>
-      <div class="center">
-        <div class="center-options">
-          <el-row>
-            <el-col :span="21">
-              <div style="display: flex; align-items: center">
-                <span style="font-size: 14px">璇曢獙瀹ょ绫�:</span>
-                <ul class="tab">
-                  <li v-for="(m, i) in tabList" :key="i" :class="{ active: i == tabIndex }" @click="handleTab(m, i)">
-                    {{ m.label.replace("璇曢獙瀹�", "") }}
-                  </li>
-                </ul>
-                <div>
-                  <el-checkbox v-model="alone" class="view-self-checkbox"
-                    @change="changeCheckBox"><span>鎴戠殑浠诲姟</span></el-checkbox>
-                </div>
-              </div>
-            </el-col>
-            <el-col :span="3">
-              <div class="center-title">
-                <span>鎬昏浠诲姟鏁伴噺:</span>
-                <span>{{ page.total }}</span>
-              </div>
-            </el-col>
-          </el-row>
-        </div>
-        <lims-table :tableData="tableData" :column="column" :page="page" :tableLoading="tableLoading"
+        <lims-table :tableData="tableData" :column="column" :page="page"
           :rowClassName="rowClassName" :height="'calc(100vh - 300px)'" @pagination="pagination"
-          key="tableData0"></lims-table>
+          key="tableData0">
+          <div slot="action" slot-scope="scope">
+            <el-button size="small" type="text" @click="handleDataLook(scope.row)">鏁版嵁鏌ョ湅</el-button>
+            <el-button type="text" size="small"
+                       :disabled="(scope.row.userName == null || scope.row.insState == 3 || scope.row.insState == 5) && checkPermi(['update:product:onPlan'])"
+                       @click="editInspection(scope.row)">淇敼妫�楠屽��</el-button>
+            <el-button type="text" size="small" :disabled="(
+                  scope.row.userName == null ||
+                  scope.row.insState == 3 ||
+                  scope.row.insState == 5 ||
+                  (scope.row.userName && !scope.row.userName.includes(nickName))
+                )"
+                       @click="handleInspection(scope.row)">妫�楠�</el-button>
+            <el-button type="text" size="small" :disabled="(
+                  scope.row.userName == null ||
+                  scope.row.insState == 5 ||
+                  scope.row.insState == 3 ||
+                  (scope.row.userName && !scope.row.userName.includes(nickName))
+                )"
+                       @click="handleConnect(scope.row)">浜ゆ帴</el-button>
+            <el-button type="text" size="small" @click="viewInspectInfo(scope.row)">鍘熷璁板綍</el-button>
+            <el-popover placement="bottom" trigger="hover" style="margin-left: 6px">
+              <template #reference>
+                <el-button link type="text" size="small">鏇村</el-button>
+              </template>
+              <div>
+                <el-button :disabled="(scope.row.insState != 3 || scope.row.userName == null ||
+                  (scope.row.userName && !scope.row.userName.includes(nickName)))" style="margin-left: 10px" type="text" size="small" @click="download(scope.row)">涓嬭浇鎶ュ憡</el-button>
+                <el-upload ref='upload'
+                           :action="javaApi + '/insReport/inReport'"
+                           :before-upload="beforeUpload"
+                           :data="{id: scope.row.insReportId}"
+                           :headers="uploadHeader" :on-error="onError"
+                           :on-success="handleSuccessUp"
+                           :show-file-list="false"
+                           style="display: inline;margin: 0 6px"
+                           accept='.jpg,.jpeg,.png,.gif,.doc,.docx,.xls,.xlsx,.ppt,.pptx,.pdf,.zip,.rar'>
+                  <el-button :disabled="(scope.row.insState != 3 || scope.row.userName == null ||
+                  (scope.row.userName && !scope.row.userName.includes(nickName)))" size="small" type="text">涓婁紶</el-button>
+                </el-upload>
+                <el-button :disabled="(scope.row.insState != 3 || scope.row.userName == null ||
+                  (scope.row.userName && !scope.row.userName.includes(nickName)))" type="text" size="small" @click="handleRestore(scope.row)">杩樺師</el-button>
+                <el-button :disabled="(scope.row.insState != 3 || scope.row.userName == null ||
+                  (scope.row.userName && !scope.row.userName.includes(nickName)))" type="text" size="small" @click="handleIssued(scope.row)">鏌ョ湅鎶ュ憡</el-button>
+              </div>
+            </el-popover>
+          </div>
+        </lims-table>
       </div>
     </div>
     <el-dialog :visible.sync="claimVisible" title="鎻愮ず" width="400px">
@@ -180,7 +128,7 @@
       </span>
     </el-dialog>
     <el-dialog :visible.sync="dataDialogVisible" title="鏁版嵁鏌ョ湅" width="80%">
-      <div v-if="dataDialogVisible" style="height: 70vh; overflow-y: auto">
+      <div v-if="dataDialogVisible" style="height: 74vh; overflow-y: auto">
         <div>
           <el-form :model="entity" :inline="true">
             <el-form-item label="妫�楠岄」" prop="outputWorkTime">
@@ -206,7 +154,8 @@
           鏂板
         </el-button>
       </div>
-      <el-table :data="bindTableData" style="width: 100%" height="70vh" v-loading="bindTableDataLoading">
+      <el-table :data="bindTableData" style="width: 100%" height="70vh" v-loading="bindTableDataLoading"
+                :header-cell-style="{ background: '#f8f8f9', color: '#515a6e' }" border>
         <el-table-column prop="inspectionItemClass" label="妫�楠岄」鍒嗙被" width="150">
         </el-table-column>
         <el-table-column prop="inspectionItem" label="妫�楠岄」" width="150">
@@ -222,6 +171,7 @@
     </el-dialog>
     <el-dialog :visible.sync="bindAddDialogVisible" title="閫夋嫨缁戝畾" width="600px">
       <el-table :data="bindAddTableData" style="width: 100%" height="60vh"
+                :header-cell-style="{ background: '#f8f8f9', color: '#515a6e' }" border
         @selection-change="handleBindAddSelectionChange">
         <el-table-column type="selection" width="55"> </el-table-column>
         <el-table-column prop="inspectionItemClass" label="妫�楠岄」鍒嗙被" width="150">
@@ -248,11 +198,28 @@
     <viewManHourDia ref="viewManHourDia"></viewManHourDia>
     <!--涓嶅悎鏍煎娴嬫煡鐪嬪脊妗�-->
     <un-pass-retest-result v-if="retestVisible" :retestInfo="retestInfo" :retestVisible="retestVisible" @closeRetestLook="closeRetestLook"></un-pass-retest-result>
+    <!--鎶ュ憡鏌ョ湅-->
+    <el-dialog title="鎶ュ憡鏌ョ湅" :visible.sync="issuedVisible" width="80vw" :modal-append-to-body="false"
+               :fullscreen="fullscreen">
+      <div class="full-screen">
+        <i class="el-icon-full-screen" style="cursor: pointer;font-size: 18px" @click="fullscreen = true;"
+           v-if="!fullscreen"></i>
+        <img src="@/assets/images/no-full.svg" alt="" v-else style="cursor: pointer;" @click="fullscreen = false;">
+      </div>
+      <div style="height: 80vh;" v-if="issuedVisible">
+        <onlyoffice ref="onlyoffice" :options="option" style="width: 100%;height: 100%;" />
+      </div>
+    </el-dialog>
+    <el-dialog title="鏌ョ湅闄勪欢" :visible.sync="lookDialogVisible" width="800px" top="5vh" fullscreen>
+      <filePreview v-if="lookDialogVisible" :fileUrl="javaApi + '/word/' + currentInfo.tempUrlPdf" :currentFile="{}"
+                   style="max-height: 90vh;overflow-y: auto;" />
+    </el-dialog>
   </div>
 </template>
 
 <script>
 import { getYearAndMonthAndDays } from "@/utils/date";
+
 import EditInspectionItem from "./components/EditInspectionItem.vue";
 import limsTable from "@/components/Table/lims-table.vue";
 import viewManHourDia from "./components/viewManHourDia.vue"
@@ -271,9 +238,13 @@
 } from "@/api/business/inspectionTask.js";
 import { mapGetters } from "vuex";
 import {getRetestResult} from "@/api/business/rawMaterialOrder";
+import {upReportUrl} from "@/api/business/insReport";
+import onlyoffice from "@/components/Onlyoffice/onlyoffice.vue";
+import filePreview from "@/components/Preview/filePreview.vue";
 export default {
   name: 'InspectionTask',
   components: {
+    filePreview, onlyoffice,
     EditInspectionItem,
     limsTable,
     viewManHourDia,
@@ -285,6 +256,10 @@
   },
   data() {
     return {
+      issuedVisible: false,
+      fullscreen: false,
+      lookDialogVisible: false,
+      option: null,
       InspectionKey: 1,
       bindDialogVisible: false,
       bindAddDialogVisible: false,
@@ -394,11 +369,23 @@
           prop: "type",
           dataType: "tag",
           formatData: (params) => {
-            return this.urgencyLevel.find((m) => m.value == params).label;
+            if (params == 0) {
+              return '鏅��'
+            } else if (params == 1) {
+              return '浼樺厛'
+            } else {
+              return '绱ф��'
+            }
           },
           formatType: (params) => {
-            return this.urgencyLevel.find((m) => m.value == params).type;
-          },
+            if (params == 0) {
+              return 'success'
+            } else if (params == 1) {
+              return 'warning'
+            } else {
+              return 'danger'
+            }
+          }
         },
         {
           label: "妫�楠岀被鍨�",
@@ -417,10 +404,18 @@
           prop: "insState",
           dataType: "tag",
           formatData: (params) => {
-            return this.inspectionTaskState.find((m) => m.value == params).label;
+            if (this.inspectionTaskState.find((m) => m.value == params)) {
+              return this.inspectionTaskState.find((m) => m.value == params).label;
+            } else {
+              return null
+            }
           },
           formatType: (params) => {
-            return this.inspectionTaskState.find((m) => m.value == params).type;
+            if (this.inspectionTaskState.find((m) => m.value == params)) {
+              return this.inspectionTaskState.find((m) => m.value == params).type;
+            } else {
+              return null
+            }
           },
         },
         { label: "妫�楠屼汉", prop: "userName" },
@@ -430,80 +425,16 @@
         { label: "妫�楠屽紑濮嬫椂闂�", prop: "insTime", width: "140px" },
         { label: "鐞嗙敱", prop: "verifyTell", width: "140px" },
         {
-          dataType: "action",
           fixed: "right",
-          label: "鎿嶄綔",
-          operation: [
-            {
-              name: "鏁版嵁鏌ョ湅",
-              type: "text",
-              clickFun: (row) => {
-                this.handleDataLook(row);
-              },
-            },
-            {
-              name: "淇敼妫�楠屽��",
-              type: "text",
-              clickFun: (row) => {
-                this.editInspection(row);
-              },
-              disabled: (row) => {
-                return (row.userName == null || row.insState == 3 || row.insState == 5) && this.checkPermi(['update:product:onPlan'])
-              },
-            },
-            {
-              name: "鏌ョ湅宸ユ椂",
-              type: "text",
-              clickFun: (row) => {
-                this.viewManHour(row);
-              },
-              showHide: (row) => {
-                return this.checkPermi(['get:working:hours:byOrder'])
-              },
-            },
-            {
-              name: "妫�楠�",
-              type: "text",
-              clickFun: (row) => {
-                this.handleInspection(row);
-              },
-              disabled: (row) => {
-                return (
-                  row.userName == null ||
-                  row.insState == 3 ||
-                  row.insState == 5 ||
-                  (row.userName && !row.userName.includes(this.nickName))
-                );
-              },
-            },
-            {
-              name: "浜ゆ帴",
-              type: "text",
-              clickFun: (row) => {
-                this.handleConnect(row);
-              },
-              disabled: (row) => {
-                return (
-                  row.userName == null ||
-                  row.insState == 5 ||
-                  row.insState == 3 ||
-                  (row.userName && !row.userName.includes(this.nickName))
-                );
-              },
-            },
-            {
-              name: "鍘熷璁板綍",
-              type: "text",
-              clickFun: (row) => {
-                this.viewInspectInfo(row);
-              },
-            },
-          ],
-        },
+          dataType: "slot",
+          slot: "action",
+          width: '340px',
+          label: "鎿嶄綔"
+        }
       ],
       page: {
         total: 0,
-        size: 10,
+        size: 20,
         current: 0,
       },
       tableLoading: false,
@@ -602,7 +533,7 @@
       ],
       lookPage: {
         total: 0,
-        size: 10,
+        size: 20,
         current: 0,
       },
       lookTableLoading: false,
@@ -612,6 +543,7 @@
   },
   mounted() {
     this.getAuthorizedPerson();
+    this.queryParams.userId = this.userId;
     this.currentTime = getYearAndMonthAndDays();
     this.getDicts("urgency_level").then((response) => {
       this.urgencyLevel = this.dictToValue(response.data);
@@ -620,9 +552,17 @@
       this.inspectionTaskState = this.dictToValue(response.data);
     });
     this.refreshTable();
-    this.queryParams.userId = this.userId;
   },
   activated() {
+    this.getAuthorizedPerson();
+    this.queryParams.userId = this.userId;
+    this.currentTime = getYearAndMonthAndDays();
+    this.getDicts("urgency_level").then((response) => {
+      this.urgencyLevel = this.dictToValue(response.data);
+    });
+    this.getDicts("inspection_task_state").then((response) => {
+      this.inspectionTaskState = this.dictToValue(response.data);
+    });
     this.refreshTable();
   },
   methods: {
@@ -697,16 +637,57 @@
       this.queryParams.typeSource = this.tabIndex;
       this.getList();
     },
-    // claimFun(row) {
-    // 	if (row) {
-    // 		this.sampleUserForm = {
-    // 			entrustCode: row.entrustCode,
-    // 			insSampleId: row.id,
-    //       sonLaboratory: row.sonLaboratory,
-    // 		}
-    // 		this.claimVisible = true
-    // 	}
-    // },
+    // 涓嬭浇鎶ュ憡
+    download(row) {
+      let url = (row.urlS===null||row.urlS==='')?row.url:row.urlS
+      const link = document.createElement('a');
+      link.href = this.javaApi + url;
+      link.target = '_blank';
+      document.body.appendChild(link);
+      link.click();
+    },
+    // 杩樺師鎿嶄綔
+    handleRestore(row) {
+      this.$confirm('鏄惁杩樺師褰撳墠鎶ュ憡?', "璀﹀憡", {
+        confirmButtonText: "纭畾",
+        cancelButtonText: "鍙栨秷",
+        type: "warning"
+      }).then(() => {
+        upReportUrl({ id: row.insReportId }).then(res => {
+          if (res.code === 200) {
+            this.$message.success('杩樺師鎴愬姛')
+            this.refreshTable()
+          }
+        })
+      }).catch(() => { })
+
+    },
+    // 鏌ョ湅鎶ュ憡
+    handleIssued(row) {
+      console.log('================')
+      // todo: 鏌ョ湅鎶ュ憡缁勪欢
+      this.currentInfo = row;
+      let fileName = row.url
+      let fileType = "docx"
+      if (row.tempUrlPdf != null || row.tempUrlPdf === '') {
+        fileName = row.tempUrlPdf
+        fileType = "pdf"
+      }
+      fileName = fileName.replace('/word/','')
+      const userName = this.nickName
+      this.option = {
+        url: this.javaApi + "/word/" + fileName,
+        isEdit: false,
+        fileType: fileType,
+        title: fileName,
+        lang: 'zh-CN',
+        isPrint: false,
+        user_id: 1,
+        user_name: userName,
+        editUrl: this.javaApi + "/insReport/onlyOffice/save?fileName=" + fileName
+      }
+      this.issuedVisible = true;
+    },
     // 鏌ョ湅浜т笟閾句俊鎭�
     openInfoDialog(row) {
       this.showInfoDialog = true;
@@ -738,43 +719,11 @@
       }
       return "";
     },
-    onReset() {
-      this.searchForm = {
-        sampleName: null,
-        state: null,
-      };
-      this.queryParams.insState = null;
-      this.queryParams.sampleName = null;
-      this.refreshTable();
-    },
-    onSubmit() {
-      this.queryParams.insState = this.searchForm.state;
-      this.queryParams.sampleName = this.searchForm.sampleName;
-      this.$nextTick(() => {
-        this.refreshTable();
-      });
-    },
     handleTab(m, i) {
       this.tabIndex = i;
       this.queryParams.sonLaboratory = "";
       this.refreshTable();
     },
-    // getLaboratoryDicts() {
-    // 	this.$axios.post(this.$api.enums.selectEnumByCategory, {
-    // 		category: "瀛愬疄楠屽"
-    // 	}).then(res => {
-    // 		this.tabList = res.data.map(ele => {
-    // 			return {
-    // 				label: ele.label,
-    // 				value: ele.value
-    // 			}
-    // 		})
-    // 		if(this.tabList.length>0){
-    // 			this.componentData.entity.sonLaboratory = this.tabList[0].value
-    // 		}
-    // 		this.refreshTable()
-    // 	})
-    // },
     selectAllByOne(row) {
       this.isCopper = row.isCopper;
       this.customsInspection = row;
@@ -786,7 +735,7 @@
         case 0:
           // 鍘熸潗鏂�
           this.$router.push({
-            path: "/materialOrder/customsInspection", query: {
+            path: "/materialOrder/customsInspectionView", query: {
               customsInspection: row,
               active: this.activeFace,
               currentId: this.currentId,
@@ -797,7 +746,7 @@
         case null:
           // 鎴愬搧
           this.$router.push({
-            path: "/productOrder/add", query: {
+            path: "/productOrder/addView", query: {
               examine: this.examine,
               active: this.activeFace,
               currentId: this.currentId
@@ -807,7 +756,7 @@
         case 1:
           // 閾滄潗
           this.$router.push({
-            path: "/materialOrder/copperOrder", query: {
+            path: "/materialOrder/CopperView", query: {
               active: this.activeFace,
               currentId: this.currentId
             }
@@ -815,9 +764,6 @@
           break;
       }
 
-    },
-    playOrder(num) {
-      this.activeFace = num;
     },
     goback() {
       this.state = 0;
@@ -928,10 +874,6 @@
           this.loading = false;
         });
     },
-    handleReview(row) {
-      this.state = 2;
-      this.orderId = row.id;
-    },
     getAuthorizedPerson() {
       selectUserCondition({ type: 1 }).then((res) => {
         let data = [];
@@ -959,7 +901,6 @@
       this.bindCurrentInfo = row;
       getBindingProductByProductId({ productId: row.insProductId })
         .then((res) => {
-          // console.log(res)
           this.bindTableData = res.data;
           this.bindDialogVisible = true;
         })
@@ -972,7 +913,6 @@
         productId: this.bindCurrentInfo.insProductId,
       })
         .then((res) => {
-          // console.log(res)
           this.bindAddTableData = res.data;
           this.bindAddDialogVisible = true;
         })
@@ -1022,6 +962,90 @@
         });
       });
     },
+    beforeUpload (file) {
+      if (file.size > 1024 * 1024 * 10) {
+        this.$message.error('涓婁紶鏂囦欢涓嶈秴杩�10M');
+        this.$refs.upload.clearFiles()
+        return false;
+      } else {
+        return true;
+      }
+    },
+    onError(error, file, fileList, index) {
+      this.$message.error('鏂囦欢涓婁紶澶辫触锛岃閲嶈瘯');
+    },
+    onExceed() {
+      this.$message.warning("瓒呭嚭鏂囦欢涓暟");
+    },
+    handleSuccessUp(response) {
+      if (response.code == 200) {
+        this.$refs.upload.clearFiles()
+        this.$message.success("涓婁紶鎴愬姛");
+        this.refreshTable()
+      } else {
+        this.$message.error(response.message);
+      }
+    },
   },
 };
 </script>
+<style scoped>
+.search_thing {
+  display: flex;
+  align-items: center;
+  height: 50px;
+}
+
+.search_label {
+  width: 100px;
+  font-size: 14px;
+  text-align: right;
+}
+
+.search_input {
+  width: calc(100% - 120px);
+}
+
+.tab {
+  list-style-type: none;
+  display: flex;
+  padding-left: 6px;
+}
+
+.tab li {
+  line-height: 24px;
+  padding: 4px 10px;
+  font-size: 14px;
+  color: #333333;
+  border: 1px solid #eeeeee;
+  cursor: pointer;
+}
+
+.tab li:nth-child(1) {
+  border-radius: 8px 0 0 8px;
+}
+
+.tab li:nth-last-child(1) {
+  border-radius: 0 8px 8px 0;
+}
+
+.tab li.active {
+  border-color: #3a7bfa;
+  color: #3a7bfa;
+}
+.center-options {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.center .center-options .center-title span:last-child {
+  color: #3a7bfa;
+  font-size: 23px;
+  font-weight: 400;
+}
+
+.view-self-checkbox {
+  margin-left: 50px;
+}
+</style>

--
Gitblit v1.9.3