407 lines
14 KiB
Vue
407 lines
14 KiB
Vue
|
<template>
|
||
|
|
<el-container class="container">
|
||
|
|
<el-header class="filter-container">
|
||
|
|
<el-form :inline="true" :model="formInline" class="demo-form-inline">
|
||
|
|
|
||
|
|
<!-- <div> -->
|
||
|
|
<el-form-item label="姓名" class="form-flex" style="margin-top: 10px;">
|
||
|
|
<el-input @input="e => formInline.userName = validForbid(e)" :value="formInline.userName" maxlength="20"
|
||
|
|
placeholder="请输入内容"></el-input>
|
||
|
|
</el-form-item>
|
||
|
|
<!-- <el-form-item label="手机号" class="form-flex">
|
||
|
|
<el-input @input="e => formInline.userMobile = validForbid(e)" :value="formInline.userMobile" maxlength="20"
|
||
|
|
placeholder="请输入内容"></el-input>
|
||
|
|
</el-form-item> -->
|
||
|
|
<el-form-item label="车牌号" class="form-flex" style="margin-top: 10px;">
|
||
|
|
<el-input @input="e => formInline.carNum = validForbid(e)" :value="formInline.carNum" maxlength="20"
|
||
|
|
placeholder="请输入内容"></el-input>
|
||
|
|
</el-form-item>
|
||
|
|
<!-- </div>
|
||
|
|
<div> -->
|
||
|
|
<el-form-item>
|
||
|
|
<el-button type="primary" @click="onSubmit()">查询</el-button>
|
||
|
|
<!-- <el-button type="primary" @click="onOut">导出</el-button> -->
|
||
|
|
<el-button type="primary" @click="edit({})">添加</el-button>
|
||
|
|
<!-- 导入 -->
|
||
|
|
<el-button style="background:#eeeeee;border:0;">
|
||
|
|
<el-upload
|
||
|
|
class="upload-demo"
|
||
|
|
ref="upload"
|
||
|
|
action
|
||
|
|
:on-change="onchange"
|
||
|
|
:file-list="fileList"
|
||
|
|
:auto-upload="false"
|
||
|
|
:show-file-list="false"
|
||
|
|
multiple
|
||
|
|
>
|
||
|
|
<div class="tolead-click">
|
||
|
|
<el-button
|
||
|
|
slot="trigger"
|
||
|
|
class="search-clcik-class"
|
||
|
|
type="primary"
|
||
|
|
@click="handlePreview"
|
||
|
|
>导入</el-button>
|
||
|
|
</div>
|
||
|
|
</el-upload>
|
||
|
|
</el-button>
|
||
|
|
<el-button type="primary" @click="onOut()">模板下载</el-button>
|
||
|
|
</el-form-item>
|
||
|
|
<!-- </div> -->
|
||
|
|
</el-form>
|
||
|
|
</el-header>
|
||
|
|
<!-- max-height="500" -->
|
||
|
|
<div class="table">
|
||
|
|
<el-table :element-loading-text="loadingMsg" v-loading="loading" :data="tableData" stripe border style="width:100%">
|
||
|
|
<el-table-column fixed prop="num" label="序号" min-width="50" width="50">
|
||
|
|
<template slot-scope="scope">{{ page.sizePage*((page.limit==0?1:page.limit)-1)+(scope.$index+1) }}</template>
|
||
|
|
</el-table-column>
|
||
|
|
<el-table-column prop="USER_NAME" label="姓名" min-width="150">
|
||
|
|
<template slot-scope="scope">
|
||
|
|
<el-popover placement="top-start" title width="200" trigger="hover" :content="scope.row.USER_NAME">
|
||
|
|
<div class="maxsize" slot="reference">{{scope.row.USER_NAME}}</div>
|
||
|
|
</el-popover>
|
||
|
|
</template>
|
||
|
|
</el-table-column>
|
||
|
|
<el-table-column prop="CAR_NUM" label="车牌号" min-width="200">
|
||
|
|
<template slot-scope="scope">
|
||
|
|
<el-popover placement="top-start" title width="200" trigger="hover" :content="(scope.row.CAR_NUM)">
|
||
|
|
<div class="maxsize" slot="reference">{{scope.row.CAR_NUM}}</div>
|
||
|
|
</el-popover>
|
||
|
|
</template>
|
||
|
|
</el-table-column>
|
||
|
|
<el-table-column prop="DEPT_NAME" label="部门" min-width="200">
|
||
|
|
<template slot-scope="scope">
|
||
|
|
<el-popover placement="top-start" title width="200" trigger="hover" :content="(scope.row.DEPT_NAME)">
|
||
|
|
<div class="maxsize" slot="reference">{{scope.row.DEPT_NAME}}</div>
|
||
|
|
</el-popover>
|
||
|
|
</template>
|
||
|
|
</el-table-column>
|
||
|
|
<el-table-column prop="USER_PHONE" label="手机号" min-width="120">
|
||
|
|
<template slot-scope="scope">
|
||
|
|
<el-popover placement="top-start" title width="200" trigger="hover" :content="(scope.row.USER_PHONE)">
|
||
|
|
<div class="maxsize" slot="reference">{{scope.row.USER_PHONE}}</div>
|
||
|
|
</el-popover>
|
||
|
|
</template>
|
||
|
|
</el-table-column>
|
||
|
|
<el-table-column prop="PARK_POSITION" label="常停位置" min-width="120">
|
||
|
|
<template slot-scope="scope">
|
||
|
|
<el-popover placement="top-start" title width="200" trigger="hover" :content="(scope.row.PARK_POSITION)">
|
||
|
|
<div class="maxsize" slot="reference">{{scope.row.PARK_POSITION}}</div>
|
||
|
|
</el-popover>
|
||
|
|
</template>
|
||
|
|
</el-table-column>
|
||
|
|
<el-table-column label="操作" min-width="200" align="center">
|
||
|
|
<template slot-scope="{row}">
|
||
|
|
<!-- <el-button type="primary" size="mini" @click="edit(row)">编辑</el-button> -->
|
||
|
|
<el-button size="mini" type="danger" @click="delGreenCar(row)" >删除</el-button >
|
||
|
|
</template>
|
||
|
|
</el-table-column>
|
||
|
|
</el-table>
|
||
|
|
</div>
|
||
|
|
<!-- 分页 -->
|
||
|
|
<div class="foot-total">
|
||
|
|
<Paging @currentChanges="currentChanges" :pageNum="parseInt(page.limit)" :size="parseInt(page.sizePage)" :total="parseInt(page.total)" />
|
||
|
|
</div>
|
||
|
|
<Popup
|
||
|
|
v-if="validation"
|
||
|
|
:contents="nav"
|
||
|
|
:title="completeTitle"
|
||
|
|
:btn="btn"
|
||
|
|
@closeDialog="closeDialogDel"
|
||
|
|
/>
|
||
|
|
|
||
|
|
<!-- 编辑 -->
|
||
|
|
<Ticketopop
|
||
|
|
v-if="isflag"
|
||
|
|
:btn="num"
|
||
|
|
:title="'车牌号'"
|
||
|
|
@closeDialog="closeDialog"
|
||
|
|
@submit="submit"
|
||
|
|
:row="row"
|
||
|
|
:width="500"
|
||
|
|
/>
|
||
|
|
</el-container>
|
||
|
|
</template>
|
||
|
|
<script>
|
||
|
|
import Paging from "@/views/Public/paging.vue";
|
||
|
|
import {Own,greenCarList,addGreenCar,delGreenCar,carImportByExcel} from "@/api/getdata";
|
||
|
|
import Ticketopop from "./popup/ticketpop.vue";
|
||
|
|
import Popup from "@/views/estate/examine/dialog/popup.vue";
|
||
|
|
export default {
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
fileList:[],
|
||
|
|
loading: false, //初始化loading
|
||
|
|
loadingMsg: "",
|
||
|
|
row: {},
|
||
|
|
validation: false,
|
||
|
|
food_name: "",
|
||
|
|
formInline: {
|
||
|
|
userName: "",
|
||
|
|
carNum: "",
|
||
|
|
// userMobile: "",
|
||
|
|
// userDepartment: "",
|
||
|
|
// orgName:'',
|
||
|
|
},
|
||
|
|
page: {
|
||
|
|
limit: 0 /** 当前点击*/ ,
|
||
|
|
sizePage: 10 /** 当前多少页*/ ,
|
||
|
|
total: 0 /**总数 */
|
||
|
|
},
|
||
|
|
tableData: [],
|
||
|
|
isflag: false /**用于设置弹窗 */,
|
||
|
|
num:3
|
||
|
|
};
|
||
|
|
},
|
||
|
|
components: {
|
||
|
|
Paging,
|
||
|
|
Ticketopop,
|
||
|
|
Popup
|
||
|
|
},
|
||
|
|
mounted() {
|
||
|
|
this.createLoad();
|
||
|
|
if (this.$route.params.index) {
|
||
|
|
this.currentChanges(this.$route.params.index);
|
||
|
|
} else {
|
||
|
|
this.getlist();
|
||
|
|
}
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
createLoad() {
|
||
|
|
this.loading = true;
|
||
|
|
this.loadingMsg = "加载中...";
|
||
|
|
},
|
||
|
|
clearLoad() {
|
||
|
|
this.loading = false;
|
||
|
|
this.loadingMsg = "";
|
||
|
|
},
|
||
|
|
// 分页
|
||
|
|
currentChanges(val) {
|
||
|
|
this.createLoad();
|
||
|
|
this.page.limit = val;
|
||
|
|
this.getlist();
|
||
|
|
},
|
||
|
|
|
||
|
|
getlist() {
|
||
|
|
var aa = {
|
||
|
|
// realName: this.formInline.userName,
|
||
|
|
// mobile: this.formInline.userMobile,
|
||
|
|
// departmentName: this.formInline.userDepartment,
|
||
|
|
// orgName:this.formInline.orgName,
|
||
|
|
};
|
||
|
|
let Content = {
|
||
|
|
userName: this.formInline.userName,
|
||
|
|
carNum: this.formInline.carNum,
|
||
|
|
currentPage: this.page.limit == 0 ? 1 : this.page.limit,
|
||
|
|
pageNum: this.page.limit == 0 ? 1 : this.page.limit,
|
||
|
|
pageSize:10,
|
||
|
|
// queryObj: aa
|
||
|
|
};
|
||
|
|
greenCarList(Content)
|
||
|
|
.then(res => {
|
||
|
|
if (res.returnCode == "1") {
|
||
|
|
console.log(res.returnData)
|
||
|
|
this.clearLoad();
|
||
|
|
this.tableData = res.returnData.data;
|
||
|
|
this.page.total = res.returnData.total;
|
||
|
|
this.page.limit = res.returnData.currentPage;
|
||
|
|
// this.tableData.id = res.returnData.data.id;
|
||
|
|
} else {
|
||
|
|
this.$message({
|
||
|
|
message: res.returnMsg,
|
||
|
|
type: "warning"
|
||
|
|
});
|
||
|
|
setTimeout(() => {
|
||
|
|
this.clearLoad();
|
||
|
|
}, 300);
|
||
|
|
}
|
||
|
|
})
|
||
|
|
.catch(err => {
|
||
|
|
console.log(err);
|
||
|
|
setTimeout(() => {
|
||
|
|
this.clearLoad();
|
||
|
|
}, 300);
|
||
|
|
});
|
||
|
|
},
|
||
|
|
onSubmit() {
|
||
|
|
console.log(this.formInline);
|
||
|
|
this.page.limit = 1;
|
||
|
|
this.createLoad();
|
||
|
|
this.getlist();
|
||
|
|
},
|
||
|
|
edit(data){
|
||
|
|
// this.row = data;
|
||
|
|
this.row = Object.assign({}, data);
|
||
|
|
this.isflag = true;
|
||
|
|
},
|
||
|
|
closeDialog(){
|
||
|
|
this.isflag = false;
|
||
|
|
this.row = {};
|
||
|
|
},
|
||
|
|
delGreenCar(row) {
|
||
|
|
this.row = row;
|
||
|
|
this.validation = true;
|
||
|
|
this.btn = 3;
|
||
|
|
this.completeTitle = "删除";
|
||
|
|
this.nav = "是否删除？";
|
||
|
|
// console.log(index, row,3)
|
||
|
|
},
|
||
|
|
closeDialogDel(val) {
|
||
|
|
if (val == "1") {
|
||
|
|
this.createLoad();
|
||
|
|
let Content = {
|
||
|
|
carNum: this.row.CAR_NUM,
|
||
|
|
};
|
||
|
|
delGreenCar(Content)
|
||
|
|
.then((res) => {
|
||
|
|
if (res.returnCode == "1") {
|
||
|
|
this.$message({
|
||
|
|
message: res.returnMsg,
|
||
|
|
type: "success",
|
||
|
|
});
|
||
|
|
this.page.limit = 1;
|
||
|
|
this.getlist();
|
||
|
|
} else {
|
||
|
|
this.$message({
|
||
|
|
message: res.returnMsg,
|
||
|
|
type: "warning",
|
||
|
|
});
|
||
|
|
setTimeout(() => {
|
||
|
|
this.clearLoad();
|
||
|
|
}, 300);
|
||
|
|
}
|
||
|
|
})
|
||
|
|
.catch((err) => {
|
||
|
|
console.log("error");
|
||
|
|
setTimeout(() => {
|
||
|
|
this.clearLoad();
|
||
|
|
}, 300);
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
this.validation = false;
|
||
|
|
},
|
||
|
|
|
||
|
|
submit(e){
|
||
|
|
addGreenCar(e)
|
||
|
|
.then(res => {
|
||
|
|
if(res.returnCode == '1'){
|
||
|
|
this.$message({
|
||
|
|
message:res.returnMsg,
|
||
|
|
type: "success"
|
||
|
|
});
|
||
|
|
// this.options = res.returnData;
|
||
|
|
this.isflag = false;
|
||
|
|
this.getlist();
|
||
|
|
this.row = {};
|
||
|
|
}else{
|
||
|
|
this.$message({
|
||
|
|
message:res.returnMsg,
|
||
|
|
type: "warning"
|
||
|
|
});
|
||
|
|
}
|
||
|
|
})
|
||
|
|
},
|
||
|
|
// 模板下载
|
||
|
|
onOut() {
|
||
|
|
let url = process.env.VUE_APP_BASE_API + "/greenH5/greenWebmodul/rest/greenCar/exportCarModel";
|
||
|
|
window.location.href = url;
|
||
|
|
},
|
||
|
|
//导入
|
||
|
|
handlePreview() {
|
||
|
|
this.formDate = new FormData();
|
||
|
|
this.$refs.upload.clearFiles();
|
||
|
|
},
|
||
|
|
onchange(file) {
|
||
|
|
this.fileList = [];
|
||
|
|
this.formDate = new FormData();
|
||
|
|
this.formDate.append("file", file.raw);
|
||
|
|
this.fileList.push(file);
|
||
|
|
let flag = false;
|
||
|
|
if (this.fileList.length > 0) {
|
||
|
|
flag = false;
|
||
|
|
var Lastindex = this.fileList[0].name.lastIndexOf(".");
|
||
|
|
if (
|
||
|
|
this.fileList[0].name.slice(Lastindex) != ".xls" &&
|
||
|
|
this.fileList[0].name.slice(Lastindex) != ".xlsx"
|
||
|
|
) {
|
||
|
|
flag = false;
|
||
|
|
this.$message({
|
||
|
|
message: "请选择正确的Excel格式",
|
||
|
|
type: "warning"
|
||
|
|
});
|
||
|
|
return false;
|
||
|
|
} else {
|
||
|
|
flag = true;
|
||
|
|
}
|
||
|
|
} else {
|
||
|
|
flag = true;
|
||
|
|
}
|
||
|
|
|
||
|
|
this.bs64(file.raw).then(bs64 => {
|
||
|
|
this.formDate = {
|
||
|
|
file: bs64
|
||
|
|
};
|
||
|
|
if (flag) {
|
||
|
|
// console.log(this.formDate,259)
|
||
|
|
carImportByExcel(this.formDate)
|
||
|
|
.then(res => {
|
||
|
|
if (res.returnCode == "1") {
|
||
|
|
this.$message({
|
||
|
|
message: res.returnMsg,
|
||
|
|
type: "success"
|
||
|
|
});
|
||
|
|
console.log(res.returnData)
|
||
|
|
this.getlist();
|
||
|
|
} else {
|
||
|
|
this.$message({
|
||
|
|
message: res.returnMsg,
|
||
|
|
type: "warning"
|
||
|
|
});
|
||
|
|
}
|
||
|
|
})
|
||
|
|
.catch(err => {
|
||
|
|
console.log("error");
|
||
|
|
});
|
||
|
|
}
|
||
|
|
});
|
||
|
|
},
|
||
|
|
bs64(bs64) {
|
||
|
|
var reader = new FileReader();
|
||
|
|
reader.readAsDataURL(bs64);
|
||
|
|
return new Promise(resolve => {
|
||
|
|
reader.onload = function(e) {
|
||
|
|
resolve(e.target.result);
|
||
|
|
};
|
||
|
|
});
|
||
|
|
},
|
||
|
|
}
|
||
|
|
};
|
||
|
|
</script>
|
||
|
|
<style>
|
||
|
|
.filter-container {
|
||
|
|
width: 100%;
|
||
|
|
height: auto !important;
|
||
|
|
/* flex-basis: 120px; */
|
||
|
|
}
|
||
|
|
|
||
|
|
.block {
|
||
|
|
display: inline-block;
|
||
|
|
}
|
||
|
|
|
||
|
|
.secondrow {
|
||
|
|
margin-top: 16px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.table {
|
||
|
|
/* width: */
|
||
|
|
background: #eeeeee;
|
||
|
|
padding: 10px;
|
||
|
|
margin: 10px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.upload-demo {
|
||
|
|
margin: 0 -21px;
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
|