<template>
|
<div>
|
<div class="head-box">
|
<el-form :inline="true" ref="form" :model="bar" class="demo-form-inline">
|
<el-form-item label="车主名称">
|
<el-input
|
size="small"
|
v-model="bar.name"
|
placeholder="请输入"
|
></el-input>
|
</el-form-item>
|
<el-form-item>
|
<el-button size="small" type="primary" @click="onSearch()"
|
>查询</el-button
|
>
|
<el-button @click="resetForm" size="small">重置</el-button>
|
</el-form-item>
|
</el-form>
|
</div>
|
<div class="but">
|
<el-button type="primary" @click="excel" size="small">导出</el-button>
|
</div>
|
<div>
|
<el-table :data="tds" border style="width: 1200px; margin-top: 10px">
|
<el-table-column prop="areaName" label="小区名称" width="180">
|
</el-table-column>
|
<el-table-column prop="userName" label="车主姓名" width="100">
|
</el-table-column>
|
<el-table-column prop="brand" label="品牌型号" width="120">
|
</el-table-column>
|
<el-table-column prop="plateNum" label="车牌号" width="120">
|
</el-table-column>
|
<el-table-column prop="color" label="颜色" width="120">
|
</el-table-column>
|
<el-table-column prop="mobile" label="联系方式" width="120">
|
</el-table-column>
|
<el-table-column prop="createAt" label="创建时间" width="200">
|
</el-table-column>
|
<el-table-column label="操作" fixed="right" width="200">
|
<template slot-scope="{ row }">
|
<el-button @click="edit(row)" type="text">编辑</el-button>
|
<el-button @click="clear(row.id)" type="text">删除</el-button>
|
</template>
|
</el-table-column>
|
</el-table>
|
<v-tool-page :item="paged" @on-page="onPage"></v-tool-page>
|
</div>
|
<el-dialog
|
:close-on-click-modal="true"
|
:modal="false"
|
title="编辑"
|
: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 {
|
props: [],
|
components: {},
|
data() {
|
return {
|
retsub: false, //防连点 节流
|
dialogVisible: false,
|
os: {
|
areaId: "",
|
cardNo: "",
|
userName: "",
|
mobile: "",
|
brand: "",
|
plateNum: "",
|
color: "",
|
},
|
options: [], //小区列表
|
bar: {
|
name: "",
|
},
|
tds: [],
|
paged: { page: 0, total: 0, r: 0, limit: 10 },
|
};
|
},
|
created() {
|
this.pagearea();
|
},
|
mounted() {},
|
methods: {
|
excel() {
|
//导出
|
let data = {
|
userName: this.bar.name,
|
villageId: this.$route.query.id,
|
};
|
this.$api.post("common/data/car/export", data, (e) => {
|
location.href = e;
|
});
|
},
|
pagearea() {
|
//小区列表
|
this.$api.post("villagemanager/pagevillage", {}, (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("请选择小区");
|
}
|
if (this.os.userName === "") {
|
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.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.init();
|
demo.toast("操作成功");
|
},
|
(err) => {
|
demo.toast(err.msg);
|
this.retsub = false;
|
}
|
);
|
},
|
edit(e) {
|
for (let i in this.os) {
|
this.os[i] = e[i];
|
}
|
this.os.id = e.id;
|
this.dialogVisible = true;
|
},
|
init() {
|
let v = demo.copy(
|
Object.assign(this.bar, {
|
pageNum: this.paged.page,
|
pageSize: this.paged.limit,
|
villageId: this.$route.query.id || "",
|
})
|
);
|
this.$api.post("common/data/car/page", v, (e) => {
|
this.paged.total = e.total;
|
this.tds = e.records;
|
});
|
},
|
clear(id) {
|
this.$js.model("", "是否删除", (res) => {
|
if (res) {
|
this.$api.del("common/data/car/delete?id=" + id, "", (e) => {
|
demo.toast("删除成功");
|
this.init();
|
});
|
}
|
});
|
},
|
onSearch() {
|
this.paged.page = 1;
|
this.init();
|
},
|
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();
|
},
|
resetForm() {
|
//重置
|
this.paged.page = 1;
|
for (let key in this.bar) {
|
this.bar[key] = "";
|
}
|
},
|
},
|
watch: {},
|
computed: {},
|
};
|
</script>
|
<style scoped>
|
.head-box {
|
box-sizing: border-box;
|
width: 100%;
|
display: flex;
|
flex-wrap: wrap;
|
padding: 10px 0;
|
}
|
</style>
|
