From 9d43e7051075f1fc1b2fee680a79f90becddd63f Mon Sep 17 00:00:00 2001
From: ZZJ <zzjdsg2300@163.com>
Date: 星期三, 12 一月 2022 17:53:52 +0800
Subject: [PATCH] tab禁用

---
 src/pages/library/components/carList.vue |  559 ++++++++++++++++++++++++++++++-------------------------
 1 files changed, 307 insertions(+), 252 deletions(-)

diff --git a/src/pages/library/components/carList.vue b/src/pages/library/components/carList.vue
index 019b4db..2696cc7 100644
--- a/src/pages/library/components/carList.vue
+++ b/src/pages/library/components/carList.vue
@@ -12,7 +12,8 @@
             >{{ this.baseObject.bwType === "1" ? "榛戝悕鍗�" : "鐧藉悕鍗�" }}</span
           >
           <span class="ok-time"
-            >鏈夋晥鏃堕棿锛歿{ this.baseObject.startTime }}--{{
+            >鏈夋晥鏃堕棿锛歿{ this.baseObject.startTime }} --
+            {{
               this.baseObject.endTime ? this.baseObject.endTime : "姘镐箙鏈夋晥"
             }}</span
           >
@@ -31,7 +32,8 @@
             @change="setEnable(baseObject)"
           >
           </el-switch>
-
+          <div class="shutiao" v-if="baseObject.enable"></div>
+          <div class="shutiao1" v-else></div>
           <el-tooltip content="鍒犻櫎" placement="top" popper-class="atooltip">
             <span
               class="iconfont iconfont-wrap iconshanchuku-09"
@@ -111,11 +113,13 @@
 
       <el-table
         id="multipleTable"
+        class="tableBox"
         ref="multipleTable"
         :data="BaseManageData.personList"
         tooltip-effect="dark"
         style="width: 100%; overflow: auto"
         :fit="true"
+        border
         :default-sort="{ prop: 'createTime', order: 'descending' }"
         @selection-change="handleSelectionChange"
         :header-cell-style="{
@@ -233,19 +237,24 @@
                 popper-class="atooltip"
               >
                 <span
-                  class="iconfont iconbianji iconStyle1"
-                  style="font-size: 15px"
+                  class="iconfont iconbianjixinxi-09"
+                  style="    font-size: 24px;cursor: pointer"
                   @click="handleClick(scope.row)"
                 ></span>
               </el-tooltip>
             </fTemplate>
-            <el-tooltip
-              content="鏌ユ壘姝や汉"
+            <el-popover
+              placement="top"
+              trigger="click"
+              popper-class="popper-caozuo1"
+            >
+              <el-tooltip
+              content="鏌ユ壘姝よ溅"
               placement="top"
               popper-class="atooltip"
             >
               <span
-                class="iconfont iconsousuoren iconStyle1"
+                class="iconfont iconchazhaociren-09"
                 @click="tosearch(scope.row)"
               ></span>
             </el-tooltip>
@@ -256,7 +265,7 @@
                 popper-class="atooltip"
               >
                 <span
-                  class="iconfont iconfuzhi iconStyle1"
+                  class="iconfont iconfuzhi-09"
                   title="澶嶅埗"
                   @click="copyClick(scope.row)"
                 ></span>
@@ -269,8 +278,7 @@
                 popper-class="atooltip"
               >
                 <span
-                  class="iconfont iconyidongzhi iconStyle1"
-                  style="font-size: 15px"
+                  class="iconfont iconyidong-09"
                   title="绉诲姩"
                   @click="moveClick(scope.row)"
                 ></span>
@@ -283,13 +291,20 @@
                 popper-class="atooltip"
               >
                 <span
-                  class="iconfont iconshanchu iconStyle1"
+                  class="iconfont iconshanchu-09"
                   style="color: #e74c3c"
                   @click="deleteThis(scope.row.id)"
                   title="鍒犻櫎"
                 ></span>
               </el-tooltip>
             </fTemplate>
+             <span
+                slot="reference"
+                class="iconfont icongengduocaozuo-09"
+                style="font-size: 24px; cursor: pointer"
+              ></span>
+            </el-popover>
+            
           </template>
         </el-table-column>
       </el-table>
@@ -297,8 +312,7 @@
         @current-change="refrash"
         :current-page="BaseManageData.page"
         :page-size="BaseManageData.size"
-        style="margin-top: 10px;"
-        layout="total,sizes,prev,pager,next,jumper"
+        style="margin-top: 10px"
         :total="BaseManageData.total"
       ></el-pagination>
     </div>
@@ -510,134 +524,148 @@
       title="杞﹁締淇℃伅"
       :modal="false"
       :destroy-on-close="true"
-      :append-to-body="true"
+      custom-class="add-car"
       :visible.sync="addDrawer"
       :direction="direction"
       :before-close="handleClose1"
     >
-      <div class="drawerSpace">
-        <div class="uploadLine">
-          <div class="car-picture">
-            <el-upload
-              action
-              :http-request="uploadCar"
-              accept="image/*"
-              list-type="picture-card"
-              :file-list="form.carUrls"
-              :before-remove="handleRemoveCarPic"
-            >
-              <i class="el-icon-plus" style="margin-top: 25px"></i>
-              <div>涓婁紶杞﹁締鐓х墖</div>
-            </el-upload>
-          </div>
-          <div class="person-picture">
-            <el-upload
-              action
-              :http-request="uploadPerson"
-              list-type="picture-card"
-              accept="image/*"
-              :limit="1"
-              :file-list="form.faceUrl"
-              :on-remove="handleRemoveFacePic"
-            >
-              <i class="el-icon-plus" style="margin-top: 25px"></i>
-              <div>涓婁紶杞︿富鐓х墖</div>
-            </el-upload>
-          </div>
+      <div class="uploadLine">
+        <div class="car-picture">
+          <div class="car-text">涓婁紶杞﹁締鐓х墖</div>
+          <el-upload
+            action
+            :http-request="uploadCar"
+            accept="image/*"
+            list-type="picture-card"
+            :file-list="form.carUrls"
+            :before-remove="handleRemoveCarPic"
+          >
+            <i class="el-icon-plus" style="margin-top: 25px"></i>
+          </el-upload>
         </div>
-        <el-form
-          ref="formForCar"
-          :model="form"
-          label-width="100px"
-          style="margin-top: 20px; margin-bottom: 50px"
-          :rule="rules"
+        <div class="person-picture">
+          <div class="car-text">涓婁紶杞︿富鐓х墖</div>
+          <el-upload
+            action
+            :http-request="uploadPerson"
+            list-type="picture-card"
+            accept="image/*"
+            :limit="1"
+            :file-list="form.faceUrl"
+            :on-remove="handleRemoveFacePic"
+          >
+            <i class="el-icon-plus" style="margin-top: 25px"></i>
+          </el-upload>
+        </div>
+      </div>
+      <el-form
+        ref="formForCar"
+        :model="form"
+        label-width="80px"
+        style="margin-top: 20px; margin-bottom: 30px"
+        :rule="rules"
+      >
+        <el-form-item label="杞︾墝鍙�" prop="carNo">
+          <el-input
+            placeholder="璇疯緭鍏ヨ溅鐗屽彿"
+            v-model="form.carNo"
+            class="inputWidth"
+          ></el-input>
+        </el-form-item>
+        <el-form-item label="杞﹁締绫诲瀷">
+          <el-select
+            v-model="form.carType"
+            placeholder="璇烽�夋嫨杞﹁締绫诲瀷"
+            class="inputWidth"
+          >
+            <el-option
+              v-for="item in VideoPhotoData.dictionary.CARTYPE"
+              :key="item.value"
+              :label="item.name"
+              :value="item.value"
+            ></el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item label="杞﹁締鍝佺墝">
+          <el-select
+            v-model="form.carBrand"
+            placeholder="璇烽�夋嫨杞﹁締鍝佺墝"
+            class="inputWidth"
+          >
+            <el-option
+              v-for="item in VideoPhotoData.dictionary.BRAND"
+              :key="item.value"
+              :label="item.name"
+              :value="item.value"
+            ></el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item label="杞﹁韩棰滆壊">
+          <el-select
+            v-model="form.carColor"
+            placeholder="璇烽�夋嫨杞﹁韩棰滆壊"
+            class="inputWidth"
+          >
+            <el-option
+              v-for="item in VideoPhotoData.dictionary.nColor"
+              :key="item.value"
+              :label="item.name"
+              :value="item.value"
+            ></el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item label="杞︿富濮撳悕">
+          <el-input v-model="form.personName" class="inputWidth"></el-input>
+        </el-form-item>
+        <el-form-item label="杞︿富鎬у埆">
+          <el-radio-group v-model="form.sex">
+            <el-radio label="鐢�"></el-radio>
+            <el-radio label="濂�"></el-radio>
+          </el-radio-group>
+        </el-form-item>
+        <el-form-item label="韬唤璇佸彿">
+          <el-input v-model="form.idCard" class="inputWidth"></el-input>
+        </el-form-item>
+        <el-form-item label="鎵嬫満鍙�">
+          <el-input v-model="form.phoneNum" class="inputWidth"></el-input>
+        </el-form-item>
+        <el-form-item label="鍏朵粬">
+          <el-input v-model="form.reserved" class="inputWidth"></el-input>
+        </el-form-item>
+        <!-- <el-form-item style="text-align: tight">
+          <el-button
+            type="primary"
+            @click="submitCar"
+            style="margin-left: 120px"
+            >淇濆瓨</el-button
+          >
+          <el-button @click="resetForm">鍙栨秷</el-button>
+        </el-form-item> -->
+      </el-form>
+      <div class="dialog-footer">
+        <el-button
+          size="small"
+          class="sure-btn"
+          type="primary"
+          @click="submitCar"
+          >纭� 瀹�</el-button
         >
-          <el-form-item label="*杞︾墝鍙凤細">
-            <el-input
-              placeholder="璇疯緭鍏ヨ溅鐗屽彿"
-              v-model="form.carNo"
-              class="inputWidth"
-            ></el-input>
-          </el-form-item>
-          <el-form-item label="杞﹁締绫诲瀷锛�">
-            <el-select
-              v-model="form.carType"
-              placeholder="璇烽�夋嫨杞﹁締绫诲瀷"
-              class="inputWidth"
-            >
-              <el-option
-                v-for="item in VideoPhotoData.dictionary.CARTYPE"
-                :key="item.value"
-                :label="item.name"
-                :value="item.value"
-              ></el-option>
-            </el-select>
-          </el-form-item>
-          <el-form-item label="杞﹁締鍝佺墝锛�">
-            <el-select
-              v-model="form.carBrand"
-              placeholder="璇烽�夋嫨杞﹁締鍝佺墝"
-              class="inputWidth"
-            >
-              <el-option
-                v-for="item in VideoPhotoData.dictionary.BRAND"
-                :key="item.value"
-                :label="item.name"
-                :value="item.value"
-              ></el-option>
-            </el-select>
-          </el-form-item>
-          <el-form-item label="杞﹁韩棰滆壊锛�">
-            <el-select
-              v-model="form.carColor"
-              placeholder="璇烽�夋嫨杞﹁韩棰滆壊"
-              class="inputWidth"
-            >
-              <el-option
-                v-for="item in VideoPhotoData.dictionary.nColor"
-                :key="item.value"
-                :label="item.name"
-                :value="item.value"
-              ></el-option>
-            </el-select>
-          </el-form-item>
-          <el-form-item label="杞︿富濮撳悕锛�">
-            <el-input v-model="form.personName" class="inputWidth"></el-input>
-          </el-form-item>
-          <el-form-item label="杞︿富鎬у埆锛�">
-            <el-radio-group v-model="form.sex">
-              <el-radio label="鐢�"></el-radio>
-              <el-radio label="濂�"></el-radio>
-            </el-radio-group>
-          </el-form-item>
-          <el-form-item label="韬唤璇佸彿锛�">
-            <el-input v-model="form.idCard" class="inputWidth"></el-input>
-          </el-form-item>
-          <el-form-item label="鎵嬫満鍙凤細">
-            <el-input v-model="form.phoneNum" class="inputWidth"></el-input>
-          </el-form-item>
-          <el-form-item label="鍏朵粬锛�">
-            <el-input v-model="form.reserved" class="inputWidth"></el-input>
-          </el-form-item>
-          <el-form-item style="text-align: tight">
-            <el-button
-              type="primary"
-              @click="submitCar"
-              style="margin-left: 120px"
-              >淇濆瓨</el-button
-            >
-            <el-button @click="resetForm">鍙栨秷</el-button>
-          </el-form-item>
-        </el-form>
+        <el-button
+          size="small"
+          class="cancel-btn"
+          @click="resetForm"
+          type="info"
+          >鍙� 娑�</el-button
+        >
       </div>
     </el-drawer>
 
     <el-drawer
       title="涓婁紶杞︾墝"
       :modal="false"
-      :append-to-body="true"
       :visible.sync="addBatchDrawer"
       :direction="direction"
+      custom-class="upload-pai"
       :before-close="handleClose2"
     >
       <div class="drawerSpace">
@@ -652,14 +680,30 @@
           <p>
             杞︾墝鍙蜂互閫楀彿鎴栧洖杞﹂敭闅斿紑锛屽崟娆℃渶澶氭敮鎸�100鏉′笂浼狅紝渚嬪锛氫含YAB123,浜現34Y87
           </p>
-          <el-button
+          <!-- <el-button
             type="primary"
             @click="platesBatch"
             style="margin-left: 210px"
             >淇濆瓨</el-button
           >
-          <el-button @click="resetForm('ruleForm')">鍙栨秷</el-button>
+          <el-button @click="resetForm('ruleForm')">鍙栨秷</el-button> -->
         </div>
+      </div>
+      <div class="dialog-footer">
+        <el-button
+          size="small"
+          class="sure-btn"
+          type="primary"
+          @click="platesBatch"
+          >淇濆瓨</el-button
+        >
+        <el-button
+          size="small"
+          class="cancel-btn"
+          @click="resetForm('ruleForm')"
+          type="info"
+          >鍙栨秷</el-button
+        >
       </div>
     </el-drawer>
   </div>
@@ -707,11 +751,6 @@
           url: "group2/M00/0A/D7/wKgBnFyjH0-AUE5eAAC8hSMP2Yw110.jpg",
         },
       ],
-      // provinces: [
-      //   { name: "浜�", value: 1 },
-      //   { name: "娲�", value: 2 },
-      //   { name: "鍐�", value: 3 },
-      // ],
       copyVisiabled: false,
       moveVisiabled: false,
       buttonAuthority: sessionStorage.getItem("buttonAuthoritys") || [],
@@ -746,13 +785,11 @@
         reserved: "",
       },
       rules: {
-        picDesc: [
-          { required: true, message: "璇疯緭鍏ョ収鐗囨爣璇�", trigger: "change" },
-        ],
-        sex: [{ required: true, message: "璇峰嬀閫夋�у埆", trigger: "change" }],
-        monitorLevel: [
-          { required: true, message: "璇烽�夋嫨浜哄憳绛夌骇", trigger: "change" },
-        ],
+        carNo: [{ required: true, message: "璇疯緭鍏ヨ溅鐗屽彿", trigger: "change" }],
+        // sex: [{ required: true, message: "璇峰嬀閫夋�у埆", trigger: "change" }],
+        // monitorLevel: [
+        //   { required: true, message: "璇烽�夋嫨浜哄憳绛夌骇", trigger: "change" },
+        // ],
       },
       tableData: [],
       oldWidth: "",
@@ -928,13 +965,9 @@
       done();
     },
     isShow(authority) {
-      if (this.isAdmin) {
-        return true;
-      } else if (this.buttonAuthority.indexOf("," + authority + ",") > -1) {
-        return true;
-      } else {
-        return false;
-      }
+      return (
+        this.isAdmin || this.buttonAuthority.indexOf("," + authority + ",") > -1
+      );
     },
     toggleSelection(rows) {
       if (rows) {
@@ -970,7 +1003,6 @@
         })
         .catch((err) => {});
     },
-    // sayHello() {},
     getUploadResult(result) {
       this.uploadResult = result.data;
       this.dialogVisible = true;
@@ -1075,7 +1107,6 @@
       return row.compareScore && row.compareScore !== "";
     },
     async setEnable(item) {
-      debugger;
       let res = await updateDbTableStatus({
         id: item.id,
         enable: item.enable,
@@ -1475,9 +1506,6 @@
   max-width: none;
   font-size: 14px;
   color: #606266;
-  thead {
-    background: green !important;
-  }
 }
 .avatar-uploader:hover {
   .mask1 {
@@ -1529,16 +1557,74 @@
       height: 25px;
     }
   }
-  .el-drawer.ltr,
-  .el-drawer.rtl {
-    width: 27% !important;
-    //height: 90%;
-    //top: 9%;
+  .el-drawer.add-car {
+    width: 380px;
     .el-drawer__header {
-      border-bottom: 2px solid #eee;
-      padding-bottom: 10px;
-      font-size: 16px;
-      margin-bottom: 0px;
+      margin-bottom: 0;
+      padding: 20px;
+      box-shadow: 0px 2px 4px rgb(0 0 0 / 8%);
+      font-size: 14px;
+    }
+    .el-drawer__body {
+      .uploadLine {
+        padding-left: 10px;
+
+        .el-upload-list--picture-card .el-upload-list__item {
+          background-color: #fff;
+          border: 2px solid #d4d6d9;
+          border-radius: 8px;
+          width: 100px;
+          height: 100px;
+        }
+        .el-upload--picture-card {
+          background-color: #fff;
+          border: 2px solid #d4d6d9;
+          border-radius: 8px;
+          width: 100px;
+          height: 100px;
+          line-height: 100px;
+        }
+        .car-text {
+          color: #999999;
+          font-size: 14px;
+          line-height: 20px;
+          text-align: left;
+          margin-bottom: 5px;
+        }
+        .car-picture {
+          margin-bottom: 20px;
+          & > div {
+            display: flex;
+          }
+        }
+        .person-picture {
+          margin-bottom: 20px;
+          & > div {
+            display: flex;
+          }
+        }
+      }
+      .el-select {
+        width: 100%;
+      }
+      .el-radio-group {
+        width: 100%;
+        text-align: left;
+      }
+      .el-form-item {
+        margin-bottom: 18px;
+      }
+    }
+  }
+  .el-drawer.upload-pai {
+    width: 380px;
+    .el-drawer__header {
+      margin-bottom: 0;
+      padding: 20px;
+      box-shadow: 0px 2px 4px rgb(0 0 0 / 8%);
+      font-size: 14px;
+    }
+    .el-drawer__body {
     }
   }
 }
@@ -1553,6 +1639,36 @@
   border-bottom: none;
   height: calc(100% - 100px);
   overflow: auto;
+  .tableBox {
+    border: none;
+    &::before,
+    &::after {
+      display: none;
+    }
+    .el-table--border .el-table__cell,
+    .el-table__body-wrapper
+      .el-table--border.is-scrolling-left
+      ~ .el-table__fixed {
+      border-right: none;
+    }
+    td {
+      border: none;
+    }
+  }
+  .head-search {
+    .desc {
+      min-width: fit-content;
+      margin-right: 20px;
+    }
+    .right-group {
+      .iconshangchuanchepai-09:hover,
+      .icontianjiacheliang-09:hover {
+        border: 1px solid var(--colorCard);
+        background: var(--colorCard);
+        color: #fff;
+      }
+    }
+  }
 }
 .el-dialog__header {
   padding: 20px 0 10px;
@@ -1572,9 +1688,9 @@
   font-size: 14px;
   word-break: break-all;
 }
-.dialog-footer {
-  text-align: center;
-}
+// .dialog-footer {
+//   text-align: center;
+// }
 .comfirm-class-sure {
   background: #f53d3d;
   border-radius: 2px;
@@ -1618,96 +1734,35 @@
   min-height: 100px;
   border: 1px solid #eee;
 }
-
-.inputWidth {
-  width: 270px !important;
-}
-.rightInputWidth {
-  max-width: 270px;
-}
-
-.el-drawer.ltr,
-.el-drawer.rtl {
-  min-width: 450px;
-  width: 25% !important;
-  //height: 90%;
-  //min-height: 1100px;
-  //top: 9%;
-  .el-drawer__header {
-    border-bottom: 2px solid #eee;
-    padding-bottom: 10px;
-    font-size: 16px;
-    margin-bottom: 0px;
-    :focus {
-      outline: 0;
+.el-popover.el-popper.popper-caozuo1 {
+  box-shadow: 0px 0px 10px rgb(0 0 0 / 12%);
+  border-radius: 8px;
+  padding: 0;
+  padding-right: 1px;
+  & > span {
+    width: 32px;
+    height: 32px;
+    cursor: pointer;
+    display: inline-block;
+    text-align: center;
+    line-height: 32px;
+    border-radius: 8px;
+    font-size: 24px;
+    .iconfont {
+      font-size: 24px;
+    }
+    .iconshanchu-09 {
+      color: #fe6d68;
     }
   }
-}
-
-.drawerSpace {
-  height: calc(100% - 140px);
-  box-sizing: border-box;
-  margin-bottom: 30px;
-  overflow-y: scroll;
-  .uploadLine {
-    height: 280px;
-
-    .car-picture {
-      float: left;
-      margin: 15px;
-      border: 1px solid #eee;
-      width: 280px;
-      height: 260px;
-      overflow: hidden;
-      .el-upload--picture-card {
-        margin: 10px;
-        width: 110px;
-        height: 110px;
-        line-height: 35px;
-      }
-      .el-upload-list--picture-card {
-        .el-upload-list__item {
-          margin: 10px;
-          width: 110px;
-          height: 110px;
-          img {
-            object-fit: contain;
-          }
-        }
-        .el-progress--circle {
-          width: 30px !important;
-        }
-      }
-    }
-    .person-picture {
-      float: left;
-      margin-top: 15px;
-      width: 120px;
-      height: 120px;
-      overflow: hidden;
-      .el-upload--picture-card {
-        width: 110px;
-        height: 110px;
-        line-height: 35px;
-      }
-      .el-upload-list__item {
-        margin: 10px;
-        width: 110px;
-        height: 110px;
-        img {
-          object-fit: contain;
-        }
-      }
-    }
+  & > span:hover {
+    background: var(--colorCard);
+    color: #fff;
   }
-  .plateAttach {
-    width: calc(100% - 40px);
-    height: calc(100% - 40px);
-    padding: 20px;
-    p {
-      margin-top: 20px;
-      width: 400px;
-      line-height: 20px;
+  & > .del-wrap:hover {
+    background: #fe6d68;
+    .iconshanchu-09 {
+      color: #fff;
     }
   }
 }

--
Gitblit v1.8.0