对比库管理ui修正

heyujie

2021-12-22 ecf388a7953a10fe1ae8ee1a332c74ce40d782eb

 src/pages/library/components/carList.vue

@@ -12,7 +12,7 @@
            >{{ this.baseObject.bwType === "1" ? "黑名单" : "白名单" }}</span
          >
          <span class="ok-time"
            >有效时间：{{ this.baseObject.startTime }}--{{
            >有效时间：{{ this.baseObject.startTime }} -- {{
              this.baseObject.endTime ? this.baseObject.endTime : "永久有效"
            }}</span
          >
@@ -31,7 +31,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"
@@ -297,8 +298,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 +510,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 +666,30 @@
          <p>
            车牌号以逗号或回车键隔开，单次最多支持100条上传，例如：京YAB123,京F34Y87
          </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 +737,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 +771,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 +951,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 +989,6 @@
        })
        .catch((err) => {});
    },
    // sayHello() {},
    getUploadResult(result) {
      this.uploadResult = result.data;
      this.dialogVisible = true;
@@ -1075,7 +1093,6 @@
      return row.compareScore && row.compareScore !== "";
    },
    async setEnable(item) {
      debugger;
      let res = await updateDbTableStatus({
        id: item.id,
        enable: item.enable,
@@ -1475,9 +1492,6 @@
  max-width: none;
  font-size: 14px;
  color: #606266;
  thead {
    background: green !important;
  }
}
.avatar-uploader:hover {
  .mask1 {
@@ -1529,16 +1543,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 {
    }
  }
}
@@ -1572,9 +1644,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;
@@ -1617,98 +1689,5 @@
  min-width: 100px;
  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;
    }
  }
}

.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;
        }
      }
    }
  }
  .plateAttach {
    width: calc(100% - 40px);
    height: calc(100% - 40px);
    padding: 20px;
    p {
      margin-top: 20px;
      width: 400px;
      line-height: 20px;
    }
  }
}
</style>