22 changed files with 1537 additions and 895 deletions
@ -1,10 +1,10 @@ |
|||||
VITE_APP_NAME=后台管理系统 |
VITE_APP_NAME=后台管理系统 |
||||
VITE_SOCKET_URL=wss://server.gxwebsoft.com |
VITE_SOCKET_URL=wss://server.gxwebsoft.com |
||||
VITE_SERVER_URL=https://server.gxwebsoft.com/api |
VITE_SERVER_URL=https://server.gxwebsoft.com/api |
||||
#VITE_API_URL=https://cms-api.websoft.top/api |
|
||||
|
VITE_API_URL=https://cms-api.websoft.top/api |
||||
|
|
||||
|
|
||||
#VITE_SOCKET_URL=ws://127.0.0.1:9191 |
#VITE_SOCKET_URL=ws://127.0.0.1:9191 |
||||
#VITE_SERVER_URL=http://127.0.0.1:8000/api |
#VITE_SERVER_URL=http://127.0.0.1:8000/api |
||||
VITE_API_URL=http://127.0.0.1:9000/api |
|
||||
|
#VITE_API_URL=http://127.0.0.1:9000/api |
||||
#/booking/bookingItem |
#/booking/bookingItem |
||||
|
|||||
@ -0,0 +1,306 @@ |
|||||
|
<!-- 编辑弹窗 --> |
||||
|
<template> |
||||
|
<ele-modal |
||||
|
:width="800" |
||||
|
:visible="visible" |
||||
|
:maskClosable="false" |
||||
|
:maxable="maxable" |
||||
|
:title="isUpdate ? '编辑电子围栏' : '添加电子围栏'" |
||||
|
:body-style="{ paddingBottom: '28px' }" |
||||
|
@update:visible="updateVisible" |
||||
|
@ok="save" |
||||
|
> |
||||
|
<a-form |
||||
|
ref="formRef" |
||||
|
:model="form" |
||||
|
:rules="rules" |
||||
|
:label-col="styleResponsive ? { md: 4, sm: 5, xs: 24 } : { flex: '90px' }" |
||||
|
:wrapper-col=" |
||||
|
styleResponsive ? { md: 19, sm: 19, xs: 24 } : { flex: '1' } |
||||
|
" |
||||
|
> |
||||
|
<a-form-item label="围栏名称" name="name"> |
||||
|
<a-input |
||||
|
allow-clear |
||||
|
placeholder="请输入围栏名称" |
||||
|
v-model:value="form.name" |
||||
|
/> |
||||
|
</a-form-item> |
||||
|
<!-- <a-form-item label="类型" name="type">--> |
||||
|
<!-- <a-radio-group v-model:value="form.type">--> |
||||
|
<!-- <a-radio :value="0">圆形</a-radio>--> |
||||
|
<!-- <a-radio :value="1">方形</a-radio>--> |
||||
|
<!-- </a-radio-group>--> |
||||
|
<!-- </a-form-item>--> |
||||
|
<!-- <a-form-item label="经纬度" name="location">--> |
||||
|
<!-- <div class="flex">--> |
||||
|
<!-- <a-input--> |
||||
|
<!-- allow-clear--> |
||||
|
<!-- placeholder="请选取车辆所在位置"--> |
||||
|
<!-- v-model:value="form.location"--> |
||||
|
<!-- >--> |
||||
|
<!-- </a-input>--> |
||||
|
<!-- </div>--> |
||||
|
<!-- </a-form-item>--> |
||||
|
<a-form-item label="轮廓" name="points"> |
||||
|
<div class="flex"> |
||||
|
<a-input |
||||
|
allow-clear |
||||
|
placeholder="请选取电子围栏的轮廓" |
||||
|
v-model:value="form.points" |
||||
|
> |
||||
|
</a-input> |
||||
|
</div> |
||||
|
<template #extra> |
||||
|
<p class="py-2"> |
||||
|
<a class="text-blue-500" href="https://lbs.qq.com/dev/console/cloud/placeCloud/datamanage?table_id=0q3W4MrK1-_6Xag7V1" target="_blank">使用腾讯地图的工具绘制电子围栏</a> |
||||
|
</p> |
||||
|
</template> |
||||
|
</a-form-item> |
||||
|
<!-- <a-form-item label="经度" name="longitude">--> |
||||
|
<!-- <a-input-number--> |
||||
|
<!-- allow-clear--> |
||||
|
<!-- style="width: 120px"--> |
||||
|
<!-- placeholder="请输入经度"--> |
||||
|
<!-- v-model:value="form.longitude"--> |
||||
|
<!-- />--> |
||||
|
<!-- </a-form-item>--> |
||||
|
<!-- <a-form-item label="纬度" name="latitude">--> |
||||
|
<!-- <a-input-number--> |
||||
|
<!-- allow-clear--> |
||||
|
<!-- style="width: 120px"--> |
||||
|
<!-- placeholder="请输入纬度"--> |
||||
|
<!-- v-model:value="form.latitude"--> |
||||
|
<!-- />--> |
||||
|
<!-- </a-form-item>--> |
||||
|
<!-- <a-form-item label="半径" name="district">--> |
||||
|
<!-- <a-input-number--> |
||||
|
<!-- allow-clear--> |
||||
|
<!-- style="width: 120px"--> |
||||
|
<!-- placeholder="请输入半径"--> |
||||
|
<!-- v-model:value="form.district"--> |
||||
|
<!-- />--> |
||||
|
<!-- </a-form-item>--> |
||||
|
<!-- <a-form-item label="排序" name="sortNumber">--> |
||||
|
<!-- <a-input-number--> |
||||
|
<!-- :min="0"--> |
||||
|
<!-- :max="9999"--> |
||||
|
<!-- class="ele-fluid"--> |
||||
|
<!-- placeholder="请输入排序号"--> |
||||
|
<!-- v-model:value="form.sortNumber"--> |
||||
|
<!-- />--> |
||||
|
<!-- </a-form-item>--> |
||||
|
<a-form-item label="备注" name="comments"> |
||||
|
<a-textarea |
||||
|
:rows="4" |
||||
|
:maxlength="200" |
||||
|
placeholder="请输入描述" |
||||
|
v-model:value="form.comments" |
||||
|
/> |
||||
|
</a-form-item> |
||||
|
</a-form> |
||||
|
<!-- 地图位置选择弹窗 --> |
||||
|
<ele-map-picker |
||||
|
:need-city="true" |
||||
|
:dark-mode="darkMode" |
||||
|
v-model:visible="showMap" |
||||
|
:center="[108.374959, 22.767024]" |
||||
|
:search-type="1" |
||||
|
:zoom="12" |
||||
|
@done="onDone" |
||||
|
/> |
||||
|
</ele-modal> |
||||
|
</template> |
||||
|
|
||||
|
<script lang="ts" setup> |
||||
|
import {ref, reactive, watch} from 'vue'; |
||||
|
import {Form, message} from 'ant-design-vue'; |
||||
|
import {assignObject} from 'ele-admin-pro'; |
||||
|
import {addHjmFence, updateHjmFence} from '@/api/hjm/hjmFence'; |
||||
|
import {HjmFence} from '@/api/hjm/hjmFence/model'; |
||||
|
import {useThemeStore} from '@/store/modules/theme'; |
||||
|
import {storeToRefs} from 'pinia'; |
||||
|
import {CenterPoint} from "ele-admin-pro/es/ele-map-picker/types"; |
||||
|
import {ItemType} from 'ele-admin-pro/es/ele-image-upload/types'; |
||||
|
import {FormInstance} from 'ant-design-vue/es/form'; |
||||
|
|
||||
|
// 是否是修改 |
||||
|
const isUpdate = ref(false); |
||||
|
const useForm = Form.useForm; |
||||
|
// 是否开启响应式布局 |
||||
|
const themeStore = useThemeStore(); |
||||
|
const {styleResponsive} = storeToRefs(themeStore); |
||||
|
const {darkMode} = storeToRefs(themeStore); |
||||
|
// 是否显示地图选择弹窗 |
||||
|
const showMap = ref(false); |
||||
|
|
||||
|
const props = defineProps<{ |
||||
|
// 弹窗是否打开 |
||||
|
visible: boolean; |
||||
|
// 修改回显的数据 |
||||
|
data?: HjmFence | null; |
||||
|
}>(); |
||||
|
|
||||
|
const emit = defineEmits<{ |
||||
|
(e: 'done'): void; |
||||
|
(e: 'update:visible', visible: boolean): void; |
||||
|
}>(); |
||||
|
|
||||
|
// 提交状态 |
||||
|
const loading = ref(false); |
||||
|
// 是否显示最大化切换按钮 |
||||
|
const maxable = ref(true); |
||||
|
// 表格选中数据 |
||||
|
const formRef = ref<FormInstance | null>(null); |
||||
|
const images = ref<ItemType[]>([]); |
||||
|
|
||||
|
// 用户信息 |
||||
|
const form = reactive<HjmFence>({ |
||||
|
id: undefined, |
||||
|
name: undefined, |
||||
|
type: undefined, |
||||
|
location: undefined, |
||||
|
longitude: undefined, |
||||
|
latitude: undefined, |
||||
|
district: undefined, |
||||
|
points: undefined, |
||||
|
tenantId: undefined, |
||||
|
createTime: undefined, |
||||
|
updateTime: undefined, |
||||
|
status: 0, |
||||
|
comments: '', |
||||
|
sortNumber: 100 |
||||
|
}); |
||||
|
|
||||
|
/* 更新visible */ |
||||
|
const updateVisible = (value: boolean) => { |
||||
|
emit('update:visible', value); |
||||
|
}; |
||||
|
|
||||
|
// 表单验证规则 |
||||
|
const rules = reactive({ |
||||
|
name: [ |
||||
|
{ |
||||
|
required: true, |
||||
|
type: 'string', |
||||
|
message: '请填写电子围栏名称', |
||||
|
trigger: 'blur' |
||||
|
} |
||||
|
], |
||||
|
type: [ |
||||
|
{ |
||||
|
required: true, |
||||
|
type: 'number', |
||||
|
message: '请选择类型', |
||||
|
trigger: 'blur' |
||||
|
} |
||||
|
], |
||||
|
location: [ |
||||
|
{ |
||||
|
required: true, |
||||
|
type: 'string', |
||||
|
message: '请填写经纬度', |
||||
|
trigger: 'blur' |
||||
|
} |
||||
|
], |
||||
|
points: [ |
||||
|
{ |
||||
|
required: true, |
||||
|
type: 'string', |
||||
|
message: '请填写轮廓经纬度数组', |
||||
|
trigger: 'blur' |
||||
|
} |
||||
|
], |
||||
|
longitude: [ |
||||
|
{ |
||||
|
required: true, |
||||
|
type: 'string', |
||||
|
message: '请填写经度', |
||||
|
trigger: 'blur' |
||||
|
} |
||||
|
], |
||||
|
latitude: [ |
||||
|
{ |
||||
|
required: true, |
||||
|
type: 'string', |
||||
|
message: '请填写纬度', |
||||
|
trigger: 'blur' |
||||
|
} |
||||
|
], |
||||
|
district: [ |
||||
|
{ |
||||
|
required: true, |
||||
|
type: 'string', |
||||
|
message: '请填写半径', |
||||
|
trigger: 'blur' |
||||
|
} |
||||
|
] |
||||
|
}); |
||||
|
|
||||
|
/* 打开位置选择 */ |
||||
|
const openMapPicker = () => { |
||||
|
showMap.value = true; |
||||
|
}; |
||||
|
|
||||
|
/* 地图选择后回调 */ |
||||
|
const onDone = (location: CenterPoint) => { |
||||
|
if (location) { |
||||
|
console.log(location) |
||||
|
form.location = `${location.lat},${location.lng}`; |
||||
|
form.longitude = `${location.lng}`; |
||||
|
form.latitude = `${location.lat}`; |
||||
|
form.comments = `${location.address}`; |
||||
|
form.district = `1000` |
||||
|
} |
||||
|
showMap.value = false; |
||||
|
}; |
||||
|
|
||||
|
const {resetFields} = useForm(form, rules); |
||||
|
|
||||
|
/* 保存编辑 */ |
||||
|
const save = () => { |
||||
|
if (!formRef.value) { |
||||
|
return; |
||||
|
} |
||||
|
formRef.value |
||||
|
.validate() |
||||
|
.then(() => { |
||||
|
loading.value = true; |
||||
|
const formData = { |
||||
|
...form |
||||
|
}; |
||||
|
const saveOrUpdate = isUpdate.value ? updateHjmFence : addHjmFence; |
||||
|
saveOrUpdate(formData) |
||||
|
.then((msg) => { |
||||
|
loading.value = false; |
||||
|
message.success(msg); |
||||
|
updateVisible(false); |
||||
|
emit('done'); |
||||
|
}) |
||||
|
.catch((e) => { |
||||
|
loading.value = false; |
||||
|
message.error(e.message); |
||||
|
}); |
||||
|
}) |
||||
|
.catch(() => { |
||||
|
}); |
||||
|
}; |
||||
|
|
||||
|
watch( |
||||
|
() => props.visible, |
||||
|
(visible) => { |
||||
|
if (visible) { |
||||
|
images.value = []; |
||||
|
if (props.data) { |
||||
|
assignObject(form, props.data); |
||||
|
isUpdate.value = true; |
||||
|
} else { |
||||
|
isUpdate.value = false; |
||||
|
} |
||||
|
} else { |
||||
|
resetFields(); |
||||
|
} |
||||
|
}, |
||||
|
{immediate: true} |
||||
|
); |
||||
|
</script> |
||||
@ -0,0 +1,42 @@ |
|||||
|
<!-- 搜索表单 --> |
||||
|
<template> |
||||
|
<a-space :size="10" style="flex-wrap: wrap"> |
||||
|
<a-button type="primary" class="ele-btn-icon" @click="add"> |
||||
|
<template #icon> |
||||
|
<PlusOutlined /> |
||||
|
</template> |
||||
|
<span>添加</span> |
||||
|
</a-button> |
||||
|
</a-space> |
||||
|
</template> |
||||
|
|
||||
|
<script lang="ts" setup> |
||||
|
import { PlusOutlined } from '@ant-design/icons-vue'; |
||||
|
import type { HjmFenceParam } from '@/api/hjm/hjmFence/model'; |
||||
|
import { watch } from 'vue'; |
||||
|
|
||||
|
const props = withDefaults( |
||||
|
defineProps<{ |
||||
|
// 选中的角色 |
||||
|
selection?: []; |
||||
|
}>(), |
||||
|
{} |
||||
|
); |
||||
|
|
||||
|
const emit = defineEmits<{ |
||||
|
(e: 'search', where?: HjmFenceParam): void; |
||||
|
(e: 'add'): void; |
||||
|
(e: 'remove'): void; |
||||
|
(e: 'batchMove'): void; |
||||
|
}>(); |
||||
|
|
||||
|
// 新增 |
||||
|
const add = () => { |
||||
|
emit('add'); |
||||
|
}; |
||||
|
|
||||
|
watch( |
||||
|
() => props.selection, |
||||
|
() => {} |
||||
|
); |
||||
|
</script> |
||||
@ -0,0 +1,150 @@ |
|||||
|
<template> |
||||
|
<a-page-header :title="getPageTitle()" @back="() => $router.go(-1)"> |
||||
|
<a-card :bordered="false" :body-style="{ padding: '16px' }"> |
||||
|
<ele-pro-table |
||||
|
ref="tableRef" |
||||
|
row-key="id" |
||||
|
:columns="columns" |
||||
|
:datasource="datasource" |
||||
|
:customRow="customRow" |
||||
|
tool-class="ele-toolbar-form" |
||||
|
class="sys-org-table" |
||||
|
> |
||||
|
<template #bodyCell="{ column, record }"> |
||||
|
<template v-if="column.key === 'realName'"> |
||||
|
<a-tooltip :title="`点击查询明细`"><a :href="`/website/car?installerId=${record.userId}`" class="cursor-pointer">{{ record.realName }}</a></a-tooltip> |
||||
|
</template> |
||||
|
<template v-if="column.key === 'followers'"> |
||||
|
<a-tooltip :title="`点击更新`" class="cursor-pointer" @click="updateRowsByFollowers(record)"> |
||||
|
<a-tag color="green">{{ record.followers }}</a-tag> |
||||
|
</a-tooltip> |
||||
|
</template> |
||||
|
</template> |
||||
|
</ele-pro-table> |
||||
|
</a-card> |
||||
|
|
||||
|
<!-- 编辑弹窗 --> |
||||
|
<HjmFenceEdit v-model:visible="showEdit" :data="current" @done="reload"/> |
||||
|
</a-page-header> |
||||
|
</template> |
||||
|
|
||||
|
<script lang="ts" setup> |
||||
|
import {ref} from 'vue'; |
||||
|
import type {EleProTable} from 'ele-admin-pro'; |
||||
|
import {message} from 'ant-design-vue'; |
||||
|
import type { |
||||
|
DatasourceFunction, |
||||
|
ColumnItem |
||||
|
} from 'ele-admin-pro/es/ele-pro-table/types'; |
||||
|
import HjmFenceEdit from './components/hjmFenceEdit.vue'; |
||||
|
import {getPageTitle} from "@/utils/common"; |
||||
|
import {pageUsers, updateUser} from "@/api/system/user"; |
||||
|
import {User, UserParam} from "@/api/system/user/model"; |
||||
|
import {pageHjmCar} from "@/api/hjm/hjmCar"; |
||||
|
|
||||
|
// 表格实例 |
||||
|
const tableRef = ref<InstanceType<typeof EleProTable> | null>(null); |
||||
|
|
||||
|
// 表格选中数据 |
||||
|
const selection = ref<User[]>([]); |
||||
|
// 当前编辑数据 |
||||
|
const current = ref<User | null>(null); |
||||
|
// 是否显示编辑弹窗 |
||||
|
const showEdit = ref(false); |
||||
|
// 加载状态 |
||||
|
const loading = ref(true); |
||||
|
|
||||
|
// 表格数据源 |
||||
|
const datasource: DatasourceFunction = ({ |
||||
|
page, |
||||
|
limit, |
||||
|
where, |
||||
|
orders |
||||
|
}) => { |
||||
|
where.organizationId = 440; |
||||
|
return pageUsers({ |
||||
|
...where, |
||||
|
...orders, |
||||
|
page, |
||||
|
limit |
||||
|
}); |
||||
|
}; |
||||
|
|
||||
|
// 表格列配置 |
||||
|
const columns = ref<ColumnItem[]>([ |
||||
|
{ |
||||
|
title: '用户ID', |
||||
|
dataIndex: 'userId', |
||||
|
key: 'userId', |
||||
|
width: 90 |
||||
|
}, |
||||
|
{ |
||||
|
title: '姓名', |
||||
|
dataIndex: 'realName', |
||||
|
key: 'realName', |
||||
|
width: 180 |
||||
|
}, |
||||
|
{ |
||||
|
title: '安装数量', |
||||
|
dataIndex: 'followers', |
||||
|
key: 'followers', |
||||
|
width: 180 |
||||
|
} |
||||
|
]); |
||||
|
|
||||
|
/* 搜索 */ |
||||
|
const reload = (where?: UserParam) => { |
||||
|
selection.value = []; |
||||
|
tableRef?.value?.reload({where: where}); |
||||
|
}; |
||||
|
|
||||
|
/* 打开编辑弹窗 */ |
||||
|
const openEdit = (row?: User) => { |
||||
|
current.value = row ?? null; |
||||
|
showEdit.value = true; |
||||
|
}; |
||||
|
|
||||
|
const updateRowsByFollowers = (item: User) => { |
||||
|
pageHjmCar({ |
||||
|
installerId: item.userId |
||||
|
}).then(res => { |
||||
|
updateUser({ |
||||
|
...item, |
||||
|
followers: res?.count |
||||
|
}).then(() => { |
||||
|
reload(); |
||||
|
message.success('更新成功'); |
||||
|
}) |
||||
|
}).catch(() => { |
||||
|
message.error('更新失败'); |
||||
|
}) |
||||
|
} |
||||
|
|
||||
|
/* 查询 */ |
||||
|
const query = () => { |
||||
|
loading.value = true; |
||||
|
}; |
||||
|
|
||||
|
/* 自定义行属性 */ |
||||
|
const customRow = (record: User) => { |
||||
|
return { |
||||
|
// 行点击事件 |
||||
|
onClick: () => { |
||||
|
// console.log(record); |
||||
|
}, |
||||
|
// 行双击事件 |
||||
|
onDblclick: () => { |
||||
|
openEdit(record); |
||||
|
} |
||||
|
}; |
||||
|
}; |
||||
|
query(); |
||||
|
</script> |
||||
|
|
||||
|
<script lang="ts"> |
||||
|
export default { |
||||
|
name: 'HjmCarCount' |
||||
|
}; |
||||
|
</script> |
||||
|
|
||||
|
<style lang="less" scoped></style> |
||||
@ -1,41 +1,54 @@ |
|||||
<!-- 搜索表单 --> |
<!-- 搜索表单 --> |
||||
<template> |
<template> |
||||
<a-space style="flex-wrap: wrap" v-if="hasRole('superAdmin') || hasRole('admin') || hasRole('foundation')"> |
|
||||
|
<a-space |
||||
|
style="flex-wrap: wrap" |
||||
|
v-if="hasRole('superAdmin') || hasRole('admin') || hasRole('foundation')" |
||||
|
> |
||||
<a-button |
<a-button |
||||
type="text" |
type="text" |
||||
v-if="hasAnyRole(['superAdmin','admin'])" |
|
||||
|
v-if="hasAnyRole(['superAdmin', 'admin'])" |
||||
@click="openUrl('/fence')" |
@click="openUrl('/fence')" |
||||
>电子围栏 |
|
||||
</a-button |
|
||||
> |
|
||||
|
>电子围栏 |
||||
|
</a-button> |
||||
|
<a-button |
||||
|
type="text" |
||||
|
v-if="hasAnyRole(['superAdmin', 'admin'])" |
||||
|
@click="openUrl('/hjm/count')" |
||||
|
>安装车辆统计 |
||||
|
</a-button> |
||||
|
<a-button |
||||
|
type="text" |
||||
|
v-if="hasAnyRole(['superAdmin', 'admin'])" |
||||
|
@click="openUrl('/hjm/gps-log')" |
||||
|
>gps定位 |
||||
|
</a-button> |
||||
</a-space> |
</a-space> |
||||
</template> |
</template> |
||||
|
|
||||
<script lang="ts" setup> |
<script lang="ts" setup> |
||||
import {watch, nextTick} from 'vue'; |
|
||||
import {CmsWebsite} from '@/api/cms/cmsWebsite/model'; |
|
||||
import {openUrl} from "@/utils/common"; |
|
||||
import {hasAnyRole, hasRole} from "@/utils/permission"; |
|
||||
|
import { watch, nextTick } from 'vue'; |
||||
|
import { CmsWebsite } from '@/api/cms/cmsWebsite/model'; |
||||
|
import { openUrl } from '@/utils/common'; |
||||
|
import { hasAnyRole, hasRole } from '@/utils/permission'; |
||||
|
|
||||
const props = withDefaults( |
|
||||
defineProps<{ |
|
||||
// 选中的角色 |
|
||||
selection?: []; |
|
||||
website?: CmsWebsite; |
|
||||
count?: 0; |
|
||||
}>(), |
|
||||
{} |
|
||||
); |
|
||||
|
const props = withDefaults( |
||||
|
defineProps<{ |
||||
|
// 选中的角色 |
||||
|
selection?: []; |
||||
|
website?: CmsWebsite; |
||||
|
count?: 0; |
||||
|
}>(), |
||||
|
{} |
||||
|
); |
||||
|
|
||||
nextTick(() => { |
|
||||
if (localStorage.getItem('NotActive')) { |
|
||||
// IsActive.value = false |
|
||||
} |
|
||||
}) |
|
||||
|
nextTick(() => { |
||||
|
if (localStorage.getItem('NotActive')) { |
||||
|
// IsActive.value = false |
||||
|
} |
||||
|
}); |
||||
|
|
||||
watch( |
|
||||
() => props.selection, |
|
||||
() => { |
|
||||
} |
|
||||
); |
|
||||
|
watch( |
||||
|
() => props.selection, |
||||
|
() => {} |
||||
|
); |
||||
</script> |
</script> |
||||
|
|||||
@ -1,251 +1,261 @@ |
|||||
<template> |
<template> |
||||
<div class="page"> |
|
||||
<div class="ele-body"> |
|
||||
<a-card :bordered="false" :body-style="{ padding: '16px' }"> |
|
||||
<ele-pro-table |
|
||||
ref="tableRef" |
|
||||
row-key="hjmGpsLogId" |
|
||||
:columns="columns" |
|
||||
:datasource="datasource" |
|
||||
:customRow="customRow" |
|
||||
tool-class="ele-toolbar-form" |
|
||||
class="sys-org-table" |
|
||||
> |
|
||||
<template #toolbar> |
|
||||
<search |
|
||||
@search="reload" |
|
||||
:selection="selection" |
|
||||
@add="openEdit" |
|
||||
@remove="removeBatch" |
|
||||
@batchMove="openMove" |
|
||||
/> |
|
||||
|
<a-page-header :title="getPageTitle()" @back="() => $router.go(-1)"> |
||||
|
<a-card :bordered="false" :body-style="{ padding: '16px' }"> |
||||
|
<ele-pro-table |
||||
|
ref="tableRef" |
||||
|
row-key="hjmGpsLogId" |
||||
|
:columns="columns" |
||||
|
:datasource="datasource" |
||||
|
:customRow="customRow" |
||||
|
tool-class="ele-toolbar-form" |
||||
|
class="sys-org-table" |
||||
|
> |
||||
|
<template #toolbar> |
||||
|
<search |
||||
|
@search="reload" |
||||
|
:gpsNo="gpsNo" |
||||
|
:selection="selection" |
||||
|
@add="openEdit" |
||||
|
@remove="removeBatch" |
||||
|
@batchMove="openMove" |
||||
|
/> |
||||
|
</template> |
||||
|
<template #bodyCell="{ column, record }"> |
||||
|
<template v-if="column.key === 'image'"> |
||||
|
<a-image :src="record.image" :width="50"/> |
||||
</template> |
</template> |
||||
<template #bodyCell="{ column, record }"> |
|
||||
<template v-if="column.key === 'image'"> |
|
||||
<a-image :src="record.image" :width="50" /> |
|
||||
</template> |
|
||||
<template v-if="column.key === 'status'"> |
|
||||
<a-tag v-if="record.status === 0" color="green">显示</a-tag> |
|
||||
<a-tag v-if="record.status === 1" color="red">隐藏</a-tag> |
|
||||
</template> |
|
||||
<template v-if="column.key === 'action'"> |
|
||||
<a-space> |
|
||||
<a @click="openEdit(record)">修改</a> |
|
||||
<a-divider type="vertical" /> |
|
||||
<a-popconfirm |
|
||||
title="确定要删除此记录吗？" |
|
||||
@confirm="remove(record)" |
|
||||
> |
|
||||
<a class="ele-text-danger">删除</a> |
|
||||
</a-popconfirm> |
|
||||
</a-space> |
|
||||
</template> |
|
||||
|
<template v-if="column.key === 'status'"> |
||||
|
<a-tag v-if="record.status === 0" color="green">显示</a-tag> |
||||
|
<a-tag v-if="record.status === 1" color="red">隐藏</a-tag> |
||||
</template> |
</template> |
||||
</ele-pro-table> |
|
||||
</a-card> |
|
||||
|
<template v-if="column.key === 'action'"> |
||||
|
<a-space> |
||||
|
<a @click="openEdit(record)">修改</a> |
||||
|
<a-divider type="vertical"/> |
||||
|
<a-popconfirm |
||||
|
title="确定要删除此记录吗？" |
||||
|
@confirm="remove(record)" |
||||
|
> |
||||
|
<a class="ele-text-danger">删除</a> |
||||
|
</a-popconfirm> |
||||
|
</a-space> |
||||
|
</template> |
||||
|
</template> |
||||
|
</ele-pro-table> |
||||
|
</a-card> |
||||
|
|
||||
<!-- 编辑弹窗 --> |
|
||||
<HjmGpsLogEdit v-model:visible="showEdit" :data="current" @done="reload" /> |
|
||||
</div> |
|
||||
</div> |
|
||||
|
<!-- 编辑弹窗 --> |
||||
|
<HjmGpsLogEdit |
||||
|
v-model:visible="showEdit" |
||||
|
:data="current" |
||||
|
@done="reload" |
||||
|
/> |
||||
|
</a-page-header> |
||||
</template> |
</template> |
||||
|
|
||||
<script lang="ts" setup> |
<script lang="ts" setup> |
||||
import { createVNode, ref } from 'vue'; |
|
||||
import { message, Modal } from 'ant-design-vue'; |
|
||||
import { ExclamationCircleOutlined } from '@ant-design/icons-vue'; |
|
||||
import type { EleProTable } from 'ele-admin-pro'; |
|
||||
import { toDateString } from 'ele-admin-pro'; |
|
||||
import type { |
|
||||
DatasourceFunction, |
|
||||
ColumnItem |
|
||||
} from 'ele-admin-pro/es/ele-pro-table/types'; |
|
||||
import Search from './components/search.vue'; |
|
||||
import HjmGpsLogEdit from './components/hjmGpsLogEdit.vue'; |
|
||||
import { pageHjmGpsLog, removeHjmGpsLog, removeBatchHjmGpsLog } from '@/api/hjm/hjmGpsLog'; |
|
||||
import type { HjmGpsLog, HjmGpsLogParam } from '@/api/hjm/hjmGpsLog/model'; |
|
||||
|
|
||||
// 表格实例 |
|
||||
const tableRef = ref<InstanceType<typeof EleProTable> | null>(null); |
|
||||
|
|
||||
// 表格选中数据 |
|
||||
const selection = ref<HjmGpsLog[]>([]); |
|
||||
// 当前编辑数据 |
|
||||
const current = ref<HjmGpsLog | null>(null); |
|
||||
// 是否显示编辑弹窗 |
|
||||
const showEdit = ref(false); |
|
||||
// 是否显示批量移动弹窗 |
|
||||
const showMove = ref(false); |
|
||||
// 加载状态 |
|
||||
const loading = ref(true); |
|
||||
|
|
||||
// 表格数据源 |
|
||||
const datasource: DatasourceFunction = ({ |
|
||||
|
import {createVNode, ref, watch} from 'vue'; |
||||
|
import {message, Modal} from 'ant-design-vue'; |
||||
|
import {ExclamationCircleOutlined} from '@ant-design/icons-vue'; |
||||
|
import type {EleProTable} from 'ele-admin-pro'; |
||||
|
import type { |
||||
|
DatasourceFunction, |
||||
|
ColumnItem |
||||
|
} from 'ele-admin-pro/es/ele-pro-table/types'; |
||||
|
import Search from './components/search.vue'; |
||||
|
import HjmGpsLogEdit from './components/hjmGpsLogEdit.vue'; |
||||
|
import { |
||||
|
pageHjmGpsLog, |
||||
|
removeHjmGpsLog, |
||||
|
removeBatchHjmGpsLog |
||||
|
} from '@/api/hjm/hjmGpsLog'; |
||||
|
import type {HjmGpsLog, HjmGpsLogParam} from '@/api/hjm/hjmGpsLog/model'; |
||||
|
import router from "@/router"; |
||||
|
import {getPageTitle} from "@/utils/common"; |
||||
|
|
||||
|
// 表格实例 |
||||
|
const tableRef = ref<InstanceType<typeof EleProTable> | null>(null); |
||||
|
|
||||
|
// 表格选中数据 |
||||
|
const selection = ref<HjmGpsLog[]>([]); |
||||
|
// 当前编辑数据 |
||||
|
const current = ref<HjmGpsLog | null>(null); |
||||
|
// 是否显示编辑弹窗 |
||||
|
const showEdit = ref(false); |
||||
|
// 是否显示批量移动弹窗 |
||||
|
const showMove = ref(false); |
||||
|
// 加载状态 |
||||
|
const loading = ref(true); |
||||
|
// 搜索参数 |
||||
|
const gpsNo = ref(); |
||||
|
|
||||
|
// 表格数据源 |
||||
|
const datasource: DatasourceFunction = ({ |
||||
|
page, |
||||
|
limit, |
||||
|
where, |
||||
|
orders, |
||||
|
filters |
||||
|
}) => { |
||||
|
if (filters) { |
||||
|
where.status = filters.status; |
||||
|
} |
||||
|
if (gpsNo.value) { |
||||
|
where.gpsNo = gpsNo.value; |
||||
|
} |
||||
|
return pageHjmGpsLog({ |
||||
|
...where, |
||||
|
...orders, |
||||
page, |
page, |
||||
limit, |
|
||||
where, |
|
||||
orders, |
|
||||
filters |
|
||||
}) => { |
|
||||
if (filters) { |
|
||||
where.status = filters.status; |
|
||||
} |
|
||||
return pageHjmGpsLog({ |
|
||||
...where, |
|
||||
...orders, |
|
||||
page, |
|
||||
limit |
|
||||
}); |
|
||||
}; |
|
||||
|
limit |
||||
|
}); |
||||
|
}; |
||||
|
|
||||
// 表格列配置 |
|
||||
const columns = ref<ColumnItem[]>([ |
|
||||
{ |
|
||||
title: '自增ID', |
|
||||
dataIndex: 'id', |
|
||||
key: 'id', |
|
||||
align: 'center', |
|
||||
width: 90, |
|
||||
}, |
|
||||
{ |
|
||||
title: '车辆ID', |
|
||||
dataIndex: 'carId', |
|
||||
key: 'carId', |
|
||||
align: 'center', |
|
||||
}, |
|
||||
{ |
|
||||
title: 'gps编号', |
|
||||
dataIndex: 'gpsNo', |
|
||||
key: 'gpsNo', |
|
||||
align: 'center', |
|
||||
}, |
|
||||
{ |
|
||||
title: '经度', |
|
||||
dataIndex: 'longitude', |
|
||||
key: 'longitude', |
|
||||
align: 'center', |
|
||||
}, |
|
||||
{ |
|
||||
title: '纬度', |
|
||||
dataIndex: 'latitude', |
|
||||
key: 'latitude', |
|
||||
align: 'center', |
|
||||
}, |
|
||||
{ |
|
||||
title: '备注', |
|
||||
dataIndex: 'comments', |
|
||||
key: 'comments', |
|
||||
align: 'center', |
|
||||
}, |
|
||||
{ |
|
||||
title: '状态, 0正常, 1冻结', |
|
||||
dataIndex: 'status', |
|
||||
key: 'status', |
|
||||
align: 'center', |
|
||||
}, |
|
||||
{ |
|
||||
title: '创建时间', |
|
||||
dataIndex: 'createTime', |
|
||||
key: 'createTime', |
|
||||
align: 'center', |
|
||||
sorter: true, |
|
||||
ellipsis: true, |
|
||||
customRender: ({ text }) => toDateString(text, 'yyyy-MM-dd') |
|
||||
}, |
|
||||
{ |
|
||||
title: '操作', |
|
||||
key: 'action', |
|
||||
width: 180, |
|
||||
fixed: 'right', |
|
||||
align: 'center', |
|
||||
hideInSetting: true |
|
||||
} |
|
||||
]); |
|
||||
|
// 表格列配置 |
||||
|
const columns = ref<ColumnItem[]>([ |
||||
|
{ |
||||
|
title: '自增ID', |
||||
|
dataIndex: 'id', |
||||
|
key: 'id', |
||||
|
align: 'center', |
||||
|
width: 90 |
||||
|
}, |
||||
|
{ |
||||
|
title: 'gps编号', |
||||
|
dataIndex: 'gpsNo', |
||||
|
key: 'gpsNo', |
||||
|
align: 'center' |
||||
|
}, |
||||
|
{ |
||||
|
title: '经度', |
||||
|
dataIndex: 'longitude', |
||||
|
key: 'longitude', |
||||
|
align: 'center' |
||||
|
}, |
||||
|
{ |
||||
|
title: '纬度', |
||||
|
dataIndex: 'latitude', |
||||
|
key: 'latitude', |
||||
|
align: 'center' |
||||
|
}, |
||||
|
{ |
||||
|
title: '速度', |
||||
|
dataIndex: 'speed', |
||||
|
key: 'speed', |
||||
|
align: 'center' |
||||
|
}, |
||||
|
{ |
||||
|
title: '创建时间', |
||||
|
dataIndex: 'createTime', |
||||
|
key: 'createTime', |
||||
|
align: 'center', |
||||
|
sorter: true |
||||
|
}, |
||||
|
{ |
||||
|
title: '操作', |
||||
|
key: 'action', |
||||
|
width: 180, |
||||
|
fixed: 'right', |
||||
|
align: 'center', |
||||
|
hideInSetting: true |
||||
|
} |
||||
|
]); |
||||
|
|
||||
/* 搜索 */ |
|
||||
const reload = (where?: HjmGpsLogParam) => { |
|
||||
selection.value = []; |
|
||||
tableRef?.value?.reload({ where: where }); |
|
||||
}; |
|
||||
|
/* 搜索 */ |
||||
|
const reload = (where?: HjmGpsLogParam) => { |
||||
|
selection.value = []; |
||||
|
tableRef?.value?.reload({where: where}); |
||||
|
}; |
||||
|
|
||||
/* 打开编辑弹窗 */ |
|
||||
const openEdit = (row?: HjmGpsLog) => { |
|
||||
current.value = row ?? null; |
|
||||
showEdit.value = true; |
|
||||
}; |
|
||||
|
/* 打开编辑弹窗 */ |
||||
|
const openEdit = (row?: HjmGpsLog) => { |
||||
|
current.value = row ?? null; |
||||
|
showEdit.value = true; |
||||
|
}; |
||||
|
|
||||
/* 打开批量移动弹窗 */ |
|
||||
const openMove = () => { |
|
||||
showMove.value = true; |
|
||||
}; |
|
||||
|
/* 打开批量移动弹窗 */ |
||||
|
const openMove = () => { |
||||
|
showMove.value = true; |
||||
|
}; |
||||
|
|
||||
/* 删除单个 */ |
|
||||
const remove = (row: HjmGpsLog) => { |
|
||||
const hide = message.loading('请求中..', 0); |
|
||||
removeHjmGpsLog(row.hjmGpsLogId) |
|
||||
.then((msg) => { |
|
||||
hide(); |
|
||||
message.success(msg); |
|
||||
reload(); |
|
||||
}) |
|
||||
.catch((e) => { |
|
||||
hide(); |
|
||||
message.error(e.message); |
|
||||
}); |
|
||||
}; |
|
||||
|
/* 删除单个 */ |
||||
|
const remove = (row: HjmGpsLog) => { |
||||
|
const hide = message.loading('请求中..', 0); |
||||
|
removeHjmGpsLog(row.id) |
||||
|
.then((msg) => { |
||||
|
hide(); |
||||
|
message.success(msg); |
||||
|
reload(); |
||||
|
}) |
||||
|
.catch((e) => { |
||||
|
hide(); |
||||
|
message.error(e.message); |
||||
|
}); |
||||
|
}; |
||||
|
|
||||
/* 批量删除 */ |
|
||||
const removeBatch = () => { |
|
||||
if (!selection.value.length) { |
|
||||
message.error('请至少选择一条数据'); |
|
||||
return; |
|
||||
|
/* 批量删除 */ |
||||
|
const removeBatch = () => { |
||||
|
if (!selection.value.length) { |
||||
|
message.error('请至少选择一条数据'); |
||||
|
return; |
||||
|
} |
||||
|
Modal.confirm({ |
||||
|
title: '提示', |
||||
|
content: '确定要删除选中的记录吗?', |
||||
|
icon: createVNode(ExclamationCircleOutlined), |
||||
|
maskClosable: true, |
||||
|
onOk: () => { |
||||
|
const hide = message.loading('请求中..', 0); |
||||
|
removeBatchHjmGpsLog(selection.value.map((d) => d.id)) |
||||
|
.then((msg) => { |
||||
|
hide(); |
||||
|
message.success(msg); |
||||
|
reload(); |
||||
|
}) |
||||
|
.catch((e) => { |
||||
|
hide(); |
||||
|
message.error(e.message); |
||||
|
}); |
||||
} |
} |
||||
Modal.confirm({ |
|
||||
title: '提示', |
|
||||
content: '确定要删除选中的记录吗?', |
|
||||
icon: createVNode(ExclamationCircleOutlined), |
|
||||
maskClosable: true, |
|
||||
onOk: () => { |
|
||||
const hide = message.loading('请求中..', 0); |
|
||||
removeBatchHjmGpsLog(selection.value.map((d) => d.hjmGpsLogId)) |
|
||||
.then((msg) => { |
|
||||
hide(); |
|
||||
message.success(msg); |
|
||||
reload(); |
|
||||
}) |
|
||||
.catch((e) => { |
|
||||
hide(); |
|
||||
message.error(e.message); |
|
||||
}); |
|
||||
} |
|
||||
}); |
|
||||
}; |
|
||||
|
}); |
||||
|
}; |
||||
|
|
||||
/* 查询 */ |
|
||||
const query = () => { |
|
||||
loading.value = true; |
|
||||
}; |
|
||||
|
/* 查询 */ |
||||
|
const query = () => { |
||||
|
|
||||
|
loading.value = true; |
||||
|
}; |
||||
|
|
||||
/* 自定义行属性 */ |
|
||||
const customRow = (record: HjmGpsLog) => { |
|
||||
return { |
|
||||
// 行点击事件 |
|
||||
onClick: () => { |
|
||||
// console.log(record); |
|
||||
}, |
|
||||
// 行双击事件 |
|
||||
onDblclick: () => { |
|
||||
openEdit(record); |
|
||||
} |
|
||||
}; |
|
||||
|
/* 自定义行属性 */ |
||||
|
const customRow = (record: HjmGpsLog) => { |
||||
|
return { |
||||
|
// 行点击事件 |
||||
|
onClick: () => { |
||||
|
// console.log(record); |
||||
|
}, |
||||
|
// 行双击事件 |
||||
|
onDblclick: () => { |
||||
|
openEdit(record); |
||||
|
} |
||||
}; |
}; |
||||
query(); |
|
||||
|
}; |
||||
|
|
||||
|
watch( |
||||
|
() => router.currentRoute.value.query, |
||||
|
(param) => { |
||||
|
query(); |
||||
|
if (param.no) { |
||||
|
gpsNo.value = param.no; |
||||
|
} |
||||
|
}, |
||||
|
{immediate: true} |
||||
|
); |
||||
</script> |
</script> |
||||
|
|
||||
<script lang="ts"> |
<script lang="ts"> |
||||
export default { |
|
||||
name: 'HjmGpsLog' |
|
||||
}; |
|
||||
|
export default { |
||||
|
name: 'HjmGpsLog' |
||||
|
}; |
||||
</script> |
</script> |
||||
|
|
||||
<style lang="less" scoped></style> |
<style lang="less" scoped></style> |
||||
|
|||||
@ -0,0 +1,55 @@ |
|||||
|
<!-- 搜索表单 --> |
||||
|
<template> |
||||
|
<a-space style="flex-wrap: wrap" v-if="hasRole('superAdmin') || hasRole('admin') || hasRole('foundation')"> |
||||
|
<a-button |
||||
|
type="text" |
||||
|
v-if="hasPermission('sys:org:list')" |
||||
|
@click="openUrl('/staff')" |
||||
|
>人员管理 |
||||
|
</a-button |
||||
|
> |
||||
|
<a-button |
||||
|
type="text" |
||||
|
v-if="hasPermission('sys:userVerify:list')" |
||||
|
@click="openUrl('/user-verify')" |
||||
|
>实名认证 |
||||
|
</a-button |
||||
|
> |
||||
|
<a-button |
||||
|
type="text" |
||||
|
v-if="hasAnyRole(['superAdmin','admin'])" |
||||
|
@click="openUrl('/system/admin')" |
||||
|
>管理员列表 |
||||
|
</a-button |
||||
|
> |
||||
|
</a-space> |
||||
|
</template> |
||||
|
|
||||
|
<script lang="ts" setup> |
||||
|
import {watch, nextTick} from 'vue'; |
||||
|
import {CmsWebsite} from '@/api/cms/cmsWebsite/model'; |
||||
|
import {openUrl} from "@/utils/common"; |
||||
|
import {hasAnyRole, hasPermission, hasRole} from "@/utils/permission"; |
||||
|
|
||||
|
const props = withDefaults( |
||||
|
defineProps<{ |
||||
|
// 选中的角色 |
||||
|
selection?: []; |
||||
|
website?: CmsWebsite; |
||||
|
count?: 0; |
||||
|
}>(), |
||||
|
{} |
||||
|
); |
||||
|
|
||||
|
nextTick(() => { |
||||
|
if (localStorage.getItem('NotActive')) { |
||||
|
// IsActive.value = false |
||||
|
} |
||||
|
}) |
||||
|
|
||||
|
watch( |
||||
|
() => props.selection, |
||||
|
() => { |
||||
|
} |
||||
|
); |
||||
|
</script> |
||||
Loading…
Reference in new issue