From ecf388a7953a10fe1ae8ee1a332c74ce40d782eb Mon Sep 17 00:00:00 2001
From: heyujie <516346543@qq.com>
Date: 星期三, 22 十二月 2021 09:52:19 +0800
Subject: [PATCH] 对比库管理ui修正
---
src/pages/library/components/carList.vue | 477 ++++++++++++++++++++++++++++-------------------------------
1 files changed, 228 insertions(+), 249 deletions(-)
diff --git a/src/pages/library/components/carList.vue b/src/pages/library/components/carList.vue
index 019b4db..bf58b6c 100644
--- a/src/pages/library/components/carList.vue
+++ b/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,浜現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 +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>
--
Gitblit v1.8.0