<template>
|
<div class="box-a">
|
<v-header
|
title="车辆管理"
|
:bar="bar"
|
search
|
@on-search="onSearch"
|
:reset="headerReset"
|
></v-header>
|
<div class="but">
|
<el-button @click="add()" size="small" type="primary">新增</el-button>
|
<div class="upload-box">
|
<el-upload
|
name="file"
|
accept=".xls, .xlsx"
|
:headers="{ Authorization: Authorization }"
|
class="upload-demo"
|
:show-file-list="false"
|
:action="$js.api.http + 'common/data/car/import'"
|
:on-success="success"
|
:on-error="error"
|
multiple
|
>
|
<el-button type="primary" size="small">导入 </el-button>
|
</el-upload>
|
</div>
|
<el-button @click="exports" size="small" type="primary">导出</el-button>
|
<el-button @click="dow" size="small" type="primary">下载模板</el-button>
|
</div>
|
<div>
|
<v-tool-table :trs="trs" :tds="tds">
|
<template v-slot:btn="{ scope }">
|
<el-button @click="edit(scope)" type="text">编辑</el-button>
|
<el-button @click="clear(scope.id)" type="text">删除</el-button>
|
</template>
|
</v-tool-table>
|
</div>
|
<v-tool-page :item="paged" @on-page="onPage"></v-tool-page>
|
<!---->
|
<el-dialog
|
:close-on-click-modal="true"
|
:modal="false"
|
:title="dialogVisibleTitle ? '编辑' : '新增'"
|
:visible.sync="dialogVisible"
|
width=""
|
>
|
<div>
|
<el-form ref="form" label-width="100px">
|
<el-form-item label="小区名字">
|
<el-select
|
filterable
|
v-model="os.areaId"
|
placeholder="请选择小区名字"
|
>
|
<el-option
|
v-for="item in options"
|
:key="item.villageId"
|
:label="item.groupAt"
|
:value="item.villageId"
|
></el-option>
|
</el-select>
|
</el-form-item>
|
<el-form-item label="车主姓名">
|
<el-input v-model="os.userName"></el-input>
|
</el-form-item>
|
<el-form-item label="车主身份证">
|
<el-input v-model="os.cardNo"></el-input>
|
</el-form-item>
|
<el-form-item label="联系方式">
|
<el-input v-model="os.mobile"></el-input>
|
</el-form-item>
|
<el-form-item label="品牌型号">
|
<el-input v-model="os.brand"></el-input>
|
</el-form-item>
|
<el-form-item label="车牌号">
|
<el-input v-model="os.plateNum"></el-input>
|
</el-form-item>
|
<el-form-item label="车辆颜色">
|
<el-input v-model="os.color"></el-input>
|
</el-form-item>
|
</el-form>
|
</div>
|
<span slot="footer" class="dialog-footer">
|
<el-button @click="dialogVisible = false">取 消</el-button>
|
<el-button type="primary" @click="sub()">确 定</el-button>
|
</span>
|
</el-dialog>
|
</div>
|
</template>
|
<script>
|
export default {
|
name: "index",
|
props: [],
|
components: {},
|
data() {
|
return {
|
retsub: false, //防连点 节流
|
dialogVisible: false,
|
Authorization: "",
|
bar: [
|
{ title: "小区名称", name: "areaName" },
|
{ title: "车主名称", name: "name" },
|
],
|
tds: [],
|
trs: [
|
{ text: "小区名称", val: "areaName" },
|
{ text: "车主姓名", val: "userName", width: "" },
|
{ text: "品牌型号", val: "brand" },
|
{ text: "车牌号", val: "plateNum" },
|
{ text: "颜色", val: "color" },
|
{ text: "联系方式", val: "mobile" },
|
// { text: "详细住址", val: "address" },
|
{ text: "创建时间", val: "createAt" },
|
{ text: "操作", val: "btn" },
|
],
|
search: {},
|
os: {
|
areaId: "",
|
cardNo: "",
|
userName: "",
|
mobile: "",
|
brand: "",
|
plateNum: "",
|
color: "",
|
},
|
options: [], //小区列表
|
paged: { page: 0, total: 10, r: 0, limit: 10 },
|
headerReset: 0,
|
dialogVisibleTitle: false, // 编辑为true
|
};
|
},
|
created() {
|
this.Authorization = "Bearer " + demo.$session.get("token") || "";
|
this.init();
|
this.pagearea();
|
},
|
mounted() {},
|
watch: {},
|
computed: {},
|
methods: {
|
exports() {
|
//导出
|
let data = {
|
areaName: this.search.areaName,
|
userName: this.search.name,
|
};
|
this.$api.post("common/data/car/export", data, (e) => {
|
window.location.href = e;
|
});
|
},
|
pagearea() {
|
// 小区列表
|
let date = {
|
pageNum: 1,
|
pageSize: 1000,
|
};
|
this.$api.post("villagemanager/pagevillage", date, (e) => {
|
this.options = e.data.records;
|
this.options.forEach((it, ix) => {
|
if (!it.groupAt) {
|
this.options.splice(ix, 1);
|
}
|
});
|
this.init();
|
});
|
},
|
sub() {
|
if (this.os.areaId === "") {
|
return demo.toast("请选择小区");
|
}
|
let card =
|
/(^[1-9]\d{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$)|(^[1-9]\d{5}\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{2}$)/;
|
if (!card.test(this.os.cardNo)) {
|
return demo.toast("请输入正确的身份证");
|
}
|
if (this.os.userName === "") {
|
return demo.toast("请输入车主姓名");
|
}
|
if (this.os.mobile === "") {
|
return demo.toast("请输入联系方式");
|
}
|
if (this.os.brand === "") {
|
return demo.toast("请输入品牌型号");
|
}
|
if (this.os.plateNum === "") {
|
return demo.toast("请输入车牌号");
|
}
|
let zz =
|
/^(([京津沪渝冀豫云辽黑湘皖鲁新苏浙赣鄂桂甘晋蒙陕吉闽贵粤青藏川宁琼使领][A-Z](([0-9]{5}[DF])|([DF]([A-HJ-NP-Z0-9])[0-9]{4})))|([京津沪渝冀豫云辽黑湘皖鲁新苏浙赣鄂桂甘晋蒙陕吉闽贵粤青藏川宁琼使领][A-Z][A-HJ-NP-Z0-9]{4}[A-HJ-NP-Z0-9挂学警港澳使领]))$/;
|
if (!zz.test(this.os.plateNum)) {
|
return demo.toast("请输入正确车牌号");
|
}
|
if (this.os.color === "") {
|
return demo.toast("请输入车辆颜色");
|
}
|
if (this.retsub) {
|
return;
|
}
|
this.retsub = true;
|
this.$api.post(
|
"common/data/car/save",
|
this.os,
|
() => {
|
this.dialogVisible = false;
|
this.retsub = false;
|
this.search.areaName = "";
|
this.search.name = "";
|
this.init();
|
this.headerReset++;
|
demo.toast("操作成功");
|
},
|
(err) => {
|
demo.toast(err.msg);
|
this.retsub = false;
|
}
|
);
|
},
|
clear(id) {
|
this.$js.model("", "是否删除", (res) => {
|
if (res) {
|
this.$api.del("common/data/car/delete?id=" + id, "", (e) => {
|
demo.toast("删除成功");
|
this.init();
|
});
|
}
|
});
|
},
|
edit(e) {
|
for (let i in this.os) {
|
this.os[i] = e[i];
|
}
|
this.os.id = e.id;
|
console.log(this.os);
|
this.dialogVisible = true;
|
this.dialogVisibleTitle = true;
|
},
|
onSearch(e) {
|
// console.log(e)
|
this.search = e;
|
this.init();
|
},
|
init() {
|
let data = Object.assign(this.search, {
|
pageNum: this.paged.page,
|
pageSize: this.paged.limit,
|
});
|
this.$api.post("common/data/car/page", data, (e) => {
|
this.paged.total = e.total;
|
this.tds = e.records;
|
});
|
},
|
onPage(v) {
|
//分页
|
if (v.page === this.paged.page && v.page && !v.reset) {
|
return 0;
|
}
|
this.paged.page = v.page;
|
this.paged.limit = v.limit;
|
this.init();
|
},
|
success(e) {
|
this.init();
|
},
|
error(err) {
|
console.log(err);
|
},
|
dow() {
|
//下载模板
|
this.$api.get("common/data/car/download/template", "", (e) => {
|
console.log(e);
|
window.location.href = e;
|
});
|
},
|
add() {
|
this.dialogVisible = true;
|
this.dialogVisibleTitle = false;
|
delete this.os.id;
|
for (let i in this.os) {
|
this.os[i] = "";
|
}
|
},
|
},
|
};
|
</script>
|
<style scoped>
|
.box-a {
|
overflow: scroll;
|
}
|
.but {
|
padding-bottom: 20px;
|
display: flex;
|
}
|
.upload-box {
|
margin: 0 16px;
|
}
|
</style>
|
