031026
/
clw-ui
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat(新增高德地图调用)

master
031026 2024-05-31 22:36:22 +08:00
parent 2e10286af3 834eb41e31
commit 1ae56aeb96
15 changed files with 981 additions and 53 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
package.json
View File

@ -36,6 +36,7 @@
"url": "https://gitee.com/y_project/MuYu-Cloud.git"
},
"dependencies": {
"@amap/amap-jsapi-loader": "^1.0.1",
"@riophae/vue-treeselect": "0.4.0",
"axios": "0.24.0",
"clipboard": "2.0.8",

1
public/index.html
View File

@ -9,6 +9,7 @@
<title><%= webpackConfig.name %></title>
<!--[if lt IE 11]>
<script>window.location.href = '/html/ie.html';</script><![endif]-->
<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key==e959bf65bc2193efbefcd62b070a0761"></script>
<style>
html,
body,

10
src/api/certification/certification.js
View File

@ -3,7 +3,7 @@ import request from '@/utils/request'
// 查询企业认证列表
export function listCertification(query) {
return request({
url: '/certification/certification/list',
url: '/authentication/certification/list',
method: 'get',
params: query
})
@ -12,7 +12,7 @@ export function listCertification(query) {
// 查询企业认证详细
export function getCertification(id) {
return request({
url: '/certification/certification/' + id,
url: '/authentication/certification/' + id,
method: 'get'
})
}
@ -20,7 +20,7 @@ export function getCertification(id) {
// 新增企业认证
export function addCertification(data) {
return request({
url: '/certification/certification',
url: '/authentication/certification',
method: 'post',
data: data
})
@ -29,7 +29,7 @@ export function addCertification(data) {
// 修改企业认证
export function updateCertification(data) {
return request({
url: '/certification/certification',
url: '/authentication/certification',
method: 'put',
data: data
})
@ -38,7 +38,7 @@ export function updateCertification(data) {
// 删除企业认证
export function delCertification(id) {
return request({
url: '/certification/certification/' + id,
url: '/authentication/certification/' + id,
method: 'delete'
})
}

10
src/api/enterprise/enterprise.js
View File

@ -3,7 +3,7 @@ import request from '@/utils/request'
// 查询企业列表
export function listEnterprise(query) {
return request({
url: '/enterprise/enterprise/list',
url: '/authentication/enterprise/list',
method: 'get',
params: query
})
@ -12,7 +12,7 @@ export function listEnterprise(query) {
// 查询企业详细
export function getEnterprise(id) {
return request({
url: '/enterprise/enterprise/' + id,
url: '/authentication/enterprise/' + id,
method: 'get'
})
}
@ -20,7 +20,7 @@ export function getEnterprise(id) {
// 新增企业
export function addEnterprise(data) {
return request({
url: '/enterprise/enterprise',
url: '/authentication/enterprise',
method: 'post',
data: data
})
@ -29,7 +29,7 @@ export function addEnterprise(data) {
// 修改企业
export function updateEnterprise(data) {
return request({
url: '/enterprise/enterprise',
url: '/authentication/enterprise',
method: 'put',
data: data
})
@ -38,7 +38,7 @@ export function updateEnterprise(data) {
// 删除企业
export function delEnterprise(id) {
return request({
url: '/enterprise/enterprise/' + id,
url: '/authentication/enterprise/' + id,
method: 'delete'
})
}

44
src/api/fence/fence.js 100644
View File

@ -0,0 +1,44 @@
import request from '@/utils/request'
// 查询电子围栏列表
export function listFence(query) {
return request({
url: '/businessPlatform/fence/list',
method: 'get',
params: query
})
}
// 查询电子围栏详细
export function getFence(id) {
return request({
url: '/businessPlatform/fence/' + id,
method: 'get'
})
}
// 新增电子围栏
export function addFence(data) {
return request({
url: '/businessPlatform/fence',
method: 'post',
data: data
})
}
// 修改电子围栏
export function updateFence(data) {
return request({
url: '/businessPlatform/fence',
method: 'put',
data: data
})
}
// 删除电子围栏
export function delFence(id) {
return request({
url: '/businessPlatform/fence/' + id,
method: 'delete'
})
}

10
src/api/product/for.js
View File

@ -3,7 +3,7 @@ import request from '@/utils/request'
// 查询支付列表
export function listFor(query) {
return request({
url: '/product/for/list',
url: '/authentication/for/list',
method: 'get',
params: query
})
@ -12,7 +12,7 @@ export function listFor(query) {
// 查询支付详细
export function getFor(id) {
return request({
url: '/product/for/' + id,
url: '/authentication/for/' + id,
method: 'get'
})
}
@ -20,7 +20,7 @@ export function getFor(id) {
// 新增支付
export function addFor(data) {
return request({
url: '/product/for',
url: '/authentication/for',
method: 'post',
data: data
})
@ -29,7 +29,7 @@ export function addFor(data) {
// 修改支付
export function updateFor(data) {
return request({
url: '/product/for',
url: '/authentication/for',
method: 'put',
data: data
})
@ -38,7 +38,7 @@ export function updateFor(data) {
// 删除支付
export function delFor(id) {
return request({
url: '/product/for/' + id,
url: '/authentication/for/' + id,
method: 'delete'
})
}

10
src/api/product/service.js
View File

@ -3,7 +3,7 @@ import request from '@/utils/request'
// 查询增值列表
export function listService(query) {
return request({
url: '/product/service/list',
url: '/authentication/AddService/list',
method: 'get',
params: query
})
@ -12,7 +12,7 @@ export function listService(query) {
// 查询增值详细
export function getService(id) {
return request({
url: '/product/service/' + id,
url: '/authentication/AddService/' + id,
method: 'get'
})
}
@ -20,7 +20,7 @@ export function getService(id) {
// 新增增值
export function addService(data) {
return request({
url: '/product/service',
url: '/authentication/AddService',
method: 'post',
data: data
})
@ -29,7 +29,7 @@ export function addService(data) {
// 修改增值
export function updateService(data) {
return request({
url: '/product/service',
url: '/authentication/AddService',
method: 'put',
data: data
})
@ -38,7 +38,7 @@ export function updateService(data) {
// 删除增值
export function delService(id) {
return request({
url: '/product/service/' + id,
url: '/authentication/AddService/' + id,
method: 'delete'
})
}

44
src/api/vehicle/vehicle.js 100644
View File

@ -0,0 +1,44 @@
import request from '@/utils/request'
// 查询车辆列表
export function listVehicle(query) {
return request({
url: '/businessPlatform/vehicle/list',
method: 'get',
params: query
})
}
// 查询车辆详细
export function getVehicle(id) {
return request({
url: '/businessPlatform/vehicle/' + id,
method: 'get'
})
}
// 新增车辆
export function addVehicle(data) {
return request({
url: '/businessPlatform/vehicle',
method: 'post',
data: data
})
}
// 修改车辆
export function updateVehicle(data) {
return request({
url: '/businessPlatform/vehicle',
method: 'put',
data: data
})
}
// 删除车辆
export function delVehicle(id) {
return request({
url: '/businessPlatform/vehicle/' + id,
method: 'delete'
})
}

16
src/views/certification/certification/index.vue
View File

@ -41,7 +41,7 @@
icon="el-icon-plus"
size="mini"
@click="handleAdd"
v-hasPermi="['certification:certification:add']"
v-hasPermi="['authentication:certification:add']"
>新增</el-button>
</el-col>
<el-col :span="1.5">
@ -52,7 +52,7 @@
size="mini"
:disabled="single"
@click="handleUpdate"
v-hasPermi="['certification:certification:edit']"
v-hasPermi="['authentication:certification:edit']"
>修改</el-button>
</el-col>
<el-col :span="1.5">
@ -63,7 +63,7 @@
size="mini"
:disabled="multiple"
@click="handleDelete"
v-hasPermi="['certification:certification:remove']"
v-hasPermi="['authentication:certification:remove']"
>删除</el-button>
</el-col>
<el-col :span="1.5">
@ -73,7 +73,7 @@
icon="el-icon-download"
size="mini"
@click="handleExport"
v-hasPermi="['certification:certification:export']"
v-hasPermi="['authentication:certification:export']"
>导出</el-button>
</el-col>
<right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
@ -97,19 +97,19 @@
type="text"
icon="el-icon-edit"
@click="handleUpdate(scope.row)"
v-hasPermi="['certification:certification:edit']"
v-hasPermi="['authentication:certification:edit']"
>修改</el-button>
<el-button
size="mini"
type="text"
icon="el-icon-delete"
@click="handleDelete(scope.row)"
v-hasPermi="['certification:certification:remove']"
v-hasPermi="['authentication:certification:remove']"
>删除</el-button>
</template>
</el-table-column>
</el-table>
<pagination
v-show="total>0"
:total="total"
@ -286,7 +286,7 @@ export default {
},
/** 导出按钮操作 */
handleExport() {
this.download('certification/certification/export', {
this.download('authentication/certification/export', {
...this.queryParams
}, `certification_${new Date().getTime()}.xlsx`)
}

18
src/views/enterprise/enterprise/index.vue
View File

@ -122,7 +122,7 @@
size="mini"
:disabled="single"
@click="handleUpdate"
v-hasPermi="['enterprise:enterprise:edit']"
v-hasPermi="['authentication:enterprise:edit']"
>修改</el-button>
</el-col>
<el-col :span="1.5">
@ -133,7 +133,7 @@
size="mini"
:disabled="multiple"
@click="handleDelete"
v-hasPermi="['enterprise:enterprise:remove']"
v-hasPermi="['authentication:enterprise:remove']"
>删除</el-button>
</el-col>
<el-col :span="1.5">
@ -143,7 +143,7 @@
icon="el-icon-download"
size="mini"
@click="handleExport"
v-hasPermi="['enterprise:enterprise:export']"
v-hasPermi="['authentication:enterprise:export']"
>导出</el-button>
</el-col>
<right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
@ -187,19 +187,19 @@
type="text"
icon="el-icon-edit"
@click="handleUpdate(scope.row)"
v-hasPermi="['enterprise:enterprise:edit']"
v-hasPermi="['authentication:enterprise:edit']"
>修改</el-button>
<el-button
size="mini"
type="text"
icon="el-icon-delete"
@click="handleDelete(scope.row)"
v-hasPermi="['enterprise:enterprise:remove']"
v-hasPermi="['authentication:enterprise:remove']"
>删除</el-button>
</template>
</el-table-column>
</el-table>
<pagination
v-show="total>0"
:total="total"
@ -334,8 +334,8 @@ export default {
getList() {
this.loading = true;
listEnterprise(this.queryParams).then(response => {
this.enterpriseList = response.rows;
this.total = response.total;
this.enterpriseList = response.data.rows;
this.total = response.data.total;
this.loading = false;
});
},
@ -435,7 +435,7 @@ export default {
},
/** 导出按钮操作 */
handleExport() {
this.download('enterprise/enterprise/export', {
this.download('authentication/enterprise/export', {
...this.queryParams
}, `enterprise_${new Date().getTime()}.xlsx`)
}

271
src/views/fence/fence/index.vue 100644
View File

@ -0,0 +1,271 @@
<template>
<div class="app-container">
<el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
<el-form-item label="电子围栏名称" prop="name">
<el-input
v-model="queryParams.name"
placeholder="请输入电子围栏名称"
clearable
@keyup.enter.native="handleQuery"
/>
</el-form-item>
<el-form-item label="经纬度信息" prop="longitudeAndLatitude">
<el-input
v-model="queryParams.longitudeAndLatitude"
placeholder="请输入经纬度信息"
clearable
@keyup.enter.native="handleQuery"
/>
</el-form-item>
<el-form-item>
<el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
<el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
</el-form-item>
</el-form>
<el-row :gutter="10" class="mb8">
<el-col :span="1.5">
<el-button
type="primary"
plain
icon="el-icon-plus"
size="mini"
@click="handleAdd"
v-hasPermi="['businessPlatform:fence:add']"
>新增</el-button>
</el-col>
<el-col :span="1.5">
<el-button
type="success"
plain
icon="el-icon-edit"
size="mini"
:disabled="single"
@click="handleUpdate"
v-hasPermi="['businessPlatform:fence:edit']"
>修改</el-button>
</el-col>
<el-col :span="1.5">
<el-button
type="danger"
plain
icon="el-icon-delete"
size="mini"
:disabled="multiple"
@click="handleDelete"
v-hasPermi="['businessPlatform:fence:remove']"
>删除</el-button>
</el-col>
<el-col :span="1.5">
<el-button
type="warning"
plain
icon="el-icon-download"
size="mini"
@click="handleExport"
v-hasPermi="['businessPlatform:fence:export']"
>导出</el-button>
</el-col>
<right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
</el-row>
<el-table v-loading="loading" :data="fenceList" @selection-change="handleSelectionChange">
<el-table-column type="selection" width="55" align="center" />
<el-table-column label="id" align="center" prop="id" />
<el-table-column label="电子围栏名称" align="center" prop="name" />
<el-table-column label="围栏类型" align="center" prop="fenceType" />
<el-table-column label="经纬度信息" align="center" prop="longitudeAndLatitude" />
<el-table-column label="备注" align="center" prop="remark" />
<el-table-column label="操作" align="center" class-name="small-padding fixed-width">
<template slot-scope="scope">
<el-button
size="mini"
type="text"
icon="el-icon-edit"
@click="handleUpdate(scope.row)"
v-hasPermi="['businessPlatform:fence:edit']"
>修改</el-button>
<el-button
size="mini"
type="text"
icon="el-icon-delete"
@click="handleDelete(scope.row)"
v-hasPermi="['businessPlatform:fence:remove']"
>删除</el-button>
</template>
</el-table-column>
</el-table>
<pagination
v-show="total>0"
:total="total"
:page.sync="queryParams.pageNum"
:limit.sync="queryParams.pageSize"
@pagination="getList"
/>
<!-- 添加或修改电子围栏对话框 -->
<el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
<el-form ref="form" :model="form" :rules="rules" label-width="80px">
<el-form-item label="电子围栏名称" prop="name">
<el-input v-model="form.name" placeholder="请输入电子围栏名称" />
</el-form-item>
<el-form-item label="经纬度信息" prop="longitudeAndLatitude">
<el-input v-model="form.longitudeAndLatitude" placeholder="请输入经纬度信息" />
</el-form-item>
<el-form-item label="备注" prop="remark">
<el-input v-model="form.remark" placeholder="请输入备注" />
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button type="primary" @click="submitForm">确 定</el-button>
<el-button @click="cancel">取 消</el-button>
</div>
</el-dialog>
</div>
</template>
<script>
import { listFence, getFence, delFence, addFence, updateFence } from "@/api/fence/fence";
export default {
name: "Fence",
data() {
return {
// 遮罩层
loading: true,
// 选中数组
ids: [],
// 非单个禁用
single: true,
// 非多个禁用
multiple: true,
// 显示搜索条件
showSearch: true,
// 总条数
total: 0,
// 电子围栏表格数据
fenceList: [],
// 弹出层标题
title: "",
// 是否显示弹出层
open: false,
// 查询参数
queryParams: {
pageNum: 1,
pageSize: 10,
name: null,
fenceType: null,
longitudeAndLatitude: null,
},
// 表单参数
form: {},
// 表单校验
rules: {
}
};
},
created() {
this.getList();
},
methods: {
/** 查询电子围栏列表 */
getList() {
this.loading = true;
listFence(this.queryParams).then(response => {
this.fenceList = response.rows;
this.total = response.total;
this.loading = false;
});
},
// 取消按钮
cancel() {
this.open = false;
this.reset();
},
// 表单重置
reset() {
this.form = {
id: null,
name: null,
fenceType: null,
longitudeAndLatitude: null,
createBy: null,
createTime: null,
updateBy: null,
updateTime: null,
remark: null
};
this.resetForm("form");
},
/** 搜索按钮操作 */
handleQuery() {
this.queryParams.pageNum = 1;
this.getList();
},
/** 重置按钮操作 */
resetQuery() {
this.resetForm("queryForm");
this.handleQuery();
},
// 多选框选中数据
handleSelectionChange(selection) {
this.ids = selection.map(item => item.id)
this.single = selection.length!==1
this.multiple = !selection.length
},
/** 新增按钮操作 */
handleAdd() {
this.reset();
this.open = true;
this.title = "添加电子围栏";
},
/** 修改按钮操作 */
handleUpdate(row) {
this.reset();
const id = row.id || this.ids
getFence(id).then(response => {
this.form = response.data;
this.open = true;
this.title = "修改电子围栏";
});
},
/** 提交按钮 */
submitForm() {
this.$refs["form"].validate(valid => {
if (valid) {
if (this.form.id != null) {
updateFence(this.form).then(response => {
this.$modal.msgSuccess("修改成功");
this.open = false;
this.getList();
});
} else {
addFence(this.form).then(response => {
this.$modal.msgSuccess("新增成功");
this.open = false;
this.getList();
});
}
}
});
},
/** 删除按钮操作 */
handleDelete(row) {
const ids = row.id || this.ids;
this.$modal.confirm('是否确认删除电子围栏编号为"' + ids + '"的数据项？').then(function() {
return delFence(ids);
}).then(() => {
this.getList();
this.$modal.msgSuccess("删除成功");
}).catch(() => {});
},
/** 导出按钮操作 */
handleExport() {
this.download('businessPlatform/fence/export', {
...this.queryParams
}, `fence_${new Date().getTime()}.xlsx`)
}
}
};
</script>

143
src/views/fence/map/index.vue 100644
View File

@ -0,0 +1,143 @@
<template>
<div class="index">
<el-button type="primary" @click="drawRectangle">绘制多边形</el-button>
<el-button type="primary" @click="editRectangle">编辑多边形</el-button>
<el-button type="primary" @click="deleRectangle">删除多边形</el-button>
<div id="amapContainer"></div>
</div>
</template>
<script>
export default {
name: 'amapFence',
data () {
return {
path: [], // 当前绘制的多边形经纬度数组
polygonItem: [], // 地图上绘制的所有多边形对象
polyEditors: [] // 所有编辑对象数组
}
},
props: {
paths: {} // 编辑
},
mounted () {
this.intAmap(() => {
if (this.paths) {
this.editRectangle(this.paths);
}
});
},
methods: {
// 地图初始化
intAmap (callBack) {
this.AMap = window.AMap;
this.AMap.plugin(['AMap.MouseTool', 'AMap.PolyEditor', 'AMap.ControlBar'], function () {
//TODO 创建控件并添加
});
this.map = new this.AMap.Map("amapContainer", {
center: [116.434381, 39.898515],
zoom: 14,
mapStyle: "amap://styles/darkblue",
pitch: 80,
rotation: -15,
viewMode: '3D',//开启3D视图,默认为关闭
buildingAnimation: true,//楼块出现是否带动画
});
this.map.addControl(new this.AMap.ControlBar());
if (callBack && typeof callBack == 'function') {
callBack();
}
},
// 编辑围栏
editRectangle (paths) {
const path = paths;
const AMap = window.AMap;
var polygon = new this.AMap.Polygon({
path: path,
strokeColor: "#FF33FF",
strokeWeight: 6,
strokeOpacity: 0.2,
fillOpacity: 0.4,
fillColor: '#1791fc',
zIndex: 50,
});
this.map.add(polygon);
this.polygonItem.push(polygon);
// 缩放地图到合适的视野级别
this.map.setFitView([polygon]);
this.polyEditor = new AMap.PolyEditor(this.map, polygon);
this.polyEditor.open();
this.polyEditors.push(this.polyEditor);
this.polyEditor.on('addnode', function (event) {
console.info('触发事件：addnode', event)
console.info('修改后的经纬度：', polygon.getPath())
});
this.polyEditor.on('adjust', function (event) {
console.info('触发事件：adjust', event)
console.info('修改后的经纬度：', polygon.getPath())
});
this.polyEditor.on('removenode', function (event) {
console.info('触发事件：removenode', event)
console.info('修改后的经纬度：', polygon.getPath())
});
this.polyEditor.on('end', function (event) {
console.info('触发事件： end', event)
console.info('修改后的经纬度：', polygon.getPath())
// event.target 即为编辑后的多边形对象
});
},
// 绘制多边形
drawRectangle () {
const vm = this;
this.mouseTool = new this.AMap.MouseTool(this.map);
const polygon = this.mouseTool.polygon({
strokeColor: 'red',
strokeOpacity: 0.5,
strokeWeight: 6,
fillColor: 'blue',
fillOpacity: 0.5,
// strokeStyle还支持 solid
strokeStyle: 'solid',
// strokeDasharray: [30,10],
});
this.mouseTool.on('draw', function (event) {
// event.obj 为绘制出来的覆盖物对象
var polygonItem = event.obj;
var paths = polygonItem.getPath();//取得绘制的多边形的每一个点坐标
console.log('覆盖物对象绘制完成各个点的坐标', paths);
var path = []; // 编辑的路径
paths.forEach(v => {
path.push([v.lng, v.lat])
});
vm.path = path;
vm.editRectangle(vm.path);
vm.polygonItem.push(event.obj);
vm.map.remove(event.obj); // 删除多边形
console.log(polygon, '------polygon-----');
});
},
// 批量删除多边形
deleRectangle () {
// 取消编辑状态
this.polyEditors.forEach(v => {
v.close();
});
this.map.clearMap(); // 删除地图所有覆盖物
},
}
}
</script>
<style lang="scss" scoped>
#amapContainer {
height: 800px;
width: 1000px;
}
</style>

16
src/views/product/for/index.vue
View File

@ -31,7 +31,7 @@
icon="el-icon-plus"
size="mini"
@click="handleAdd"
v-hasPermi="['product:for:add']"
v-hasPermi="['authentication:for:add']"
>新增</el-button>
</el-col>
<el-col :span="1.5">
@ -42,7 +42,7 @@
size="mini"
:disabled="single"
@click="handleUpdate"
v-hasPermi="['product:for:edit']"
v-hasPermi="['authentication:for:edit']"
>修改</el-button>
</el-col>
<el-col :span="1.5">
@ -53,7 +53,7 @@
size="mini"
:disabled="multiple"
@click="handleDelete"
v-hasPermi="['product:for:remove']"
v-hasPermi="['authentication:for:remove']"
>删除</el-button>
</el-col>
<el-col :span="1.5">
@ -63,7 +63,7 @@
icon="el-icon-download"
size="mini"
@click="handleExport"
v-hasPermi="['product:for:export']"
v-hasPermi="['authentication:for:export']"
>导出</el-button>
</el-col>
<right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
@ -82,19 +82,19 @@
type="text"
icon="el-icon-edit"
@click="handleUpdate(scope.row)"
v-hasPermi="['product:for:edit']"
v-hasPermi="['authentication:for:edit']"
>修改</el-button>
<el-button
size="mini"
type="text"
icon="el-icon-delete"
@click="handleDelete(scope.row)"
v-hasPermi="['product:for:remove']"
v-hasPermi="['authentication:for:remove']"
>删除</el-button>
</template>
</el-table-column>
</el-table>
<pagination
v-show="total>0"
:total="total"
@ -259,7 +259,7 @@ export default {
},
/** 导出按钮操作 */
handleExport() {
this.download('product/for/export', {
this.download('authentication/for/export', {
...this.queryParams
}, `for_${new Date().getTime()}.xlsx`)
}

16
src/views/product/service/index.vue
View File

@ -39,7 +39,7 @@
icon="el-icon-plus"
size="mini"
@click="handleAdd"
v-hasPermi="['product:service:add']"
v-hasPermi="['authentication:AddService:add']"
>新增</el-button>
</el-col>
<el-col :span="1.5">
@ -50,7 +50,7 @@
size="mini"
:disabled="single"
@click="handleUpdate"
v-hasPermi="['product:service:edit']"
v-hasPermi="['authentication:AddService:edit']"
>修改</el-button>
</el-col>
<el-col :span="1.5">
@ -61,7 +61,7 @@
size="mini"
:disabled="multiple"
@click="handleDelete"
v-hasPermi="['product:service:remove']"
v-hasPermi="['authentication:AddService:remove']"
>删除</el-button>
</el-col>
<el-col :span="1.5">
@ -71,7 +71,7 @@
icon="el-icon-download"
size="mini"
@click="handleExport"
v-hasPermi="['product:service:export']"
v-hasPermi="['authentication:AddService:export']"
>导出</el-button>
</el-col>
<right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
@ -95,19 +95,19 @@
type="text"
icon="el-icon-edit"
@click="handleUpdate(scope.row)"
v-hasPermi="['product:service:edit']"
v-hasPermi="['authentication:AddService:edit']"
>修改</el-button>
<el-button
size="mini"
type="text"
icon="el-icon-delete"
@click="handleDelete(scope.row)"
v-hasPermi="['product:service:remove']"
v-hasPermi="['authentication:AddService:remove']"
>删除</el-button>
</template>
</el-table-column>
</el-table>
<pagination
v-show="total>0"
:total="total"
@ -281,7 +281,7 @@ export default {
},
/** 导出按钮操作 */
handleExport() {
this.download('product/service/export', {
this.download('authentication/AddService/export', {
...this.queryParams
}, `service_${new Date().getTime()}.xlsx`)
}

424
src/views/vehicle/vehicle/index.vue 100644
View File

@ -0,0 +1,424 @@
<template>
<div class="app-container">
<el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
<el-form-item label="车辆vin" prop="vin">
<el-input
v-model="queryParams.vin"
placeholder="请输入车辆vin"
clearable
@keyup.enter.native="handleQuery"
/>
</el-form-item>
<el-form-item label="品牌" prop="brand">
<el-input
v-model="queryParams.brand"
placeholder="请输入品牌"
clearable
@keyup.enter.native="handleQuery"
/>
</el-form-item>
<el-form-item label="型号" prop="model">
<el-input
v-model="queryParams.model"
placeholder="请输入型号"
clearable
@keyup.enter.native="handleQuery"
/>
</el-form-item>
<el-form-item label="生产日期" prop="productionDate">
<el-date-picker clearable
v-model="queryParams.productionDate"
type="date"
value-format="yyyy-MM-dd"
placeholder="请选择生产日期">
</el-date-picker>
</el-form-item>
<el-form-item label="车身颜色" prop="color">
<el-input
v-model="queryParams.color"
placeholder="请输入车身颜色"
clearable
@keyup.enter.native="handleQuery"
/>
</el-form-item>
<el-form-item label="发动机排量" prop="engineCapacity">
<el-input
v-model="queryParams.engineCapacity"
placeholder="请输入发动机排量"
clearable
@keyup.enter.native="handleQuery"
/>
</el-form-item>
<el-form-item label="变速器类型" prop="transmission">
<el-input
v-model="queryParams.transmission"
placeholder="请输入变速器类型"
clearable
@keyup.enter.native="handleQuery"
/>
</el-form-item>
<el-form-item label="行驶里程" prop="mileage">
<el-input
v-model="queryParams.mileage"
placeholder="请输入行驶里程"
clearable
@keyup.enter.native="handleQuery"
/>
</el-form-item>
<el-form-item label="注册日期" prop="registrationDate">
<el-date-picker clearable
v-model="queryParams.registrationDate"
type="date"
value-format="yyyy-MM-dd"
placeholder="请选择注册日期">
</el-date-picker>
</el-form-item>
<el-form-item label="车牌号码" prop="licenseNumber">
<el-input
v-model="queryParams.licenseNumber"
placeholder="请输入车牌号码"
clearable
@keyup.enter.native="handleQuery"
/>
</el-form-item>
<el-form-item label="持有者" prop="holder">
<el-input
v-model="queryParams.holder"
placeholder="请输入持有者"
clearable
@keyup.enter.native="handleQuery"
/>
</el-form-item>
<el-form-item>
<el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
<el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
</el-form-item>
</el-form>
<el-row :gutter="10" class="mb8">
<el-col :span="1.5">
<el-button
type="primary"
plain
icon="el-icon-plus"
size="mini"
@click="handleAdd"
v-hasPermi="['businessPlatform:vehicle:add']"
>新增</el-button>
</el-col>
<el-col :span="1.5">
<el-button
type="success"
plain
icon="el-icon-edit"
size="mini"
:disabled="single"
@click="handleUpdate"
v-hasPermi="['businessPlatform:vehicle:edit']"
>修改</el-button>
</el-col>
<el-col :span="1.5">
<el-button
type="danger"
plain
icon="el-icon-delete"
size="mini"
:disabled="multiple"
@click="handleDelete"
v-hasPermi="['businessPlatform:vehicle:remove']"
>删除</el-button>
</el-col>
<el-col :span="1.5">
<el-button
type="warning"
plain
icon="el-icon-download"
size="mini"
@click="handleExport"
v-hasPermi="['businessPlatform:vehicle:export']"
>导出</el-button>
</el-col>
<right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
</el-row>
<el-table v-loading="loading" :data="vehicleList" @selection-change="handleSelectionChange">
<el-table-column type="selection" width="55" align="center" />
<el-table-column label="车辆id" align="center" prop="id" />
<el-table-column label="车辆vin" align="center" prop="vin" />
<el-table-column label="品牌" align="center" prop="brand" />
<el-table-column label="型号" align="center" prop="model" />
<el-table-column label="生产日期" align="center" prop="productionDate" width="180">
<template slot-scope="scope">
<span>{{ parseTime(scope.row.productionDate, '{y}-{m}-{d}') }}</span>
</template>
</el-table-column>
<el-table-column label="车身类型" align="center" prop="bodyType" />
<el-table-column label="车身颜色" align="center" prop="color" />
<el-table-column label="发动机排量" align="center" prop="engineCapacity" />
<el-table-column label="燃油类型" align="center" prop="fuelType" />
<el-table-column label="变速器类型" align="center" prop="transmission" />
<el-table-column label="驱动方式" align="center" prop="driveType" />
<el-table-column label="行驶里程" align="center" prop="mileage" />
<el-table-column label="注册日期" align="center" prop="registrationDate" width="180">
<template slot-scope="scope">
<span>{{ parseTime(scope.row.registrationDate, '{y}-{m}-{d}') }}</span>
</template>
</el-table-column>
<el-table-column label="车牌号码" align="center" prop="licenseNumber" />
<el-table-column label="持有者" align="center" prop="holder" />
<el-table-column label="车辆类型" align="center" prop="vehicleType" />
<el-table-column label="备注" align="center" prop="remark" />
<el-table-column label="操作" align="center" class-name="small-padding fixed-width">
<template slot-scope="scope">
<el-button
size="mini"
type="text"
icon="el-icon-edit"
@click="handleUpdate(scope.row)"
v-hasPermi="['businessPlatform:vehicle:edit']"
>修改</el-button>
<el-button
size="mini"
type="text"
icon="el-icon-delete"
@click="handleDelete(scope.row)"
v-hasPermi="['businessPlatform:vehicle:remove']"
>删除</el-button>
</template>
</el-table-column>
</el-table>
<pagination
v-show="total>0"
:total="total"
:page.sync="queryParams.pageNum"
:limit.sync="queryParams.pageSize"
@pagination="getList"
/>
<!-- 添加或修改车辆对话框 -->
<el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
<el-form ref="form" :model="form" :rules="rules" label-width="80px">
<el-form-item label="车辆vin" prop="vin">
<el-input v-model="form.vin" placeholder="请输入车辆vin" />
</el-form-item>
<el-form-item label="品牌" prop="brand">
<el-input v-model="form.brand" placeholder="请输入品牌" />
</el-form-item>
<el-form-item label="型号" prop="model">
<el-input v-model="form.model" placeholder="请输入型号" />
</el-form-item>
<el-form-item label="生产日期" prop="productionDate">
<el-date-picker clearable
v-model="form.productionDate"
type="date"
value-format="yyyy-MM-dd"
placeholder="请选择生产日期">
</el-date-picker>
</el-form-item>
<el-form-item label="车身颜色" prop="color">
<el-input v-model="form.color" placeholder="请输入车身颜色" />
</el-form-item>
<el-form-item label="发动机排量" prop="engineCapacity">
<el-input v-model="form.engineCapacity" placeholder="请输入发动机排量" />
</el-form-item>
<el-form-item label="变速器类型" prop="transmission">
<el-input v-model="form.transmission" placeholder="请输入变速器类型" />
</el-form-item>
<el-form-item label="行驶里程" prop="mileage">
<el-input v-model="form.mileage" placeholder="请输入行驶里程" />
</el-form-item>
<el-form-item label="注册日期" prop="registrationDate">
<el-date-picker clearable
v-model="form.registrationDate"
type="date"
value-format="yyyy-MM-dd"
placeholder="请选择注册日期">
</el-date-picker>
</el-form-item>
<el-form-item label="车牌号码" prop="licenseNumber">
<el-input v-model="form.licenseNumber" placeholder="请输入车牌号码" />
</el-form-item>
<el-form-item label="持有者" prop="holder">
<el-input v-model="form.holder" placeholder="请输入持有者" />
</el-form-item>
<el-form-item label="备注" prop="remark">
<el-input v-model="form.remark" placeholder="请输入备注" />
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button type="primary" @click="submitForm">确 定</el-button>
<el-button @click="cancel">取 消</el-button>
</div>
</el-dialog>
</div>
</template>
<script>
import { listVehicle, getVehicle, delVehicle, addVehicle, updateVehicle } from "@/api/vehicle/vehicle";
export default {
name: "Vehicle",
data() {
return {
// 遮罩层
loading: true,
// 选中数组
ids: [],
// 非单个禁用
single: true,
// 非多个禁用
multiple: true,
// 显示搜索条件
showSearch: true,
// 总条数
total: 0,
// 车辆表格数据
vehicleList: [],
// 弹出层标题
title: "",
// 是否显示弹出层
open: false,
// 查询参数
queryParams: {
pageNum: 1,
pageSize: 10,
vin: null,
brand: null,
model: null,
productionDate: null,
bodyType: null,
color: null,
engineCapacity: null,
fuelType: null,
transmission: null,
driveType: null,
mileage: null,
registrationDate: null,
licenseNumber: null,
holder: null,
vehicleType: null,
},
// 表单参数
form: {},
// 表单校验
rules: {
}
};
},
created() {
this.getList();
},
methods: {
/** 查询车辆列表 */
getList() {
this.loading = true;
listVehicle(this.queryParams).then(response => {
this.vehicleList = response.rows;
this.total = response.total;
this.loading = false;
});
},
// 取消按钮
cancel() {
this.open = false;
this.reset();
},
// 表单重置
reset() {
this.form = {
id: null,
vin: null,
brand: null,
model: null,
productionDate: null,
bodyType: null,
color: null,
engineCapacity: null,
fuelType: null,
transmission: null,
driveType: null,
mileage: null,
registrationDate: null,
licenseNumber: null,
holder: null,
vehicleType: null,
createBy: null,
createTime: null,
updateBy: null,
updateTime: null,
remark: null
};
this.resetForm("form");
},
/** 搜索按钮操作 */
handleQuery() {
this.queryParams.pageNum = 1;
this.getList();
},
/** 重置按钮操作 */
resetQuery() {
this.resetForm("queryForm");
this.handleQuery();
},
// 多选框选中数据
handleSelectionChange(selection) {
this.ids = selection.map(item => item.id)
this.single = selection.length!==1
this.multiple = !selection.length
},
/** 新增按钮操作 */
handleAdd() {
this.reset();
this.open = true;
this.title = "添加车辆";
},
/** 修改按钮操作 */
handleUpdate(row) {
this.reset();
const id = row.id || this.ids
getVehicle(id).then(response => {
this.form = response.data;
this.open = true;
this.title = "修改车辆";
});
},
/** 提交按钮 */
submitForm() {
this.$refs["form"].validate(valid => {
if (valid) {
if (this.form.id != null) {
updateVehicle(this.form).then(response => {
this.$modal.msgSuccess("修改成功");
this.open = false;
this.getList();
});
} else {
addVehicle(this.form).then(response => {
this.$modal.msgSuccess("新增成功");
this.open = false;
this.getList();
});
}
}
});
},
/** 删除按钮操作 */
handleDelete(row) {
const ids = row.id || this.ids;
this.$modal.confirm('是否确认删除车辆编号为"' + ids + '"的数据项？').then(function() {
return delVehicle(ids);
}).then(() => {
this.getList();
this.$modal.msgSuccess("删除成功");
}).catch(() => {});
},
/** 导出按钮操作 */
handleExport() {
this.download('businessPlatform/vehicle/export', {
...this.queryParams
}, `vehicle_${new Date().getTime()}.xlsx`)
}
}
};
</script>