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