养护站列表
This commit is contained in:
parent
14f00b6613
commit
178badf4f5
@ -25,6 +25,7 @@
|
|||||||
"pnpm": ">=8.0.0"
|
"pnpm": ">=8.0.0"
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
|
"@element-plus/icons-vue": "^2.3.2",
|
||||||
"@vueuse/core": "^14.0.0",
|
"@vueuse/core": "^14.0.0",
|
||||||
"dayjs": "^1.11.18",
|
"dayjs": "^1.11.18",
|
||||||
"element-plus": "^2.11.5",
|
"element-plus": "^2.11.5",
|
||||||
|
|||||||
3
packages/screen/src/component/MyDialog/index.js
Normal file
3
packages/screen/src/component/MyDialog/index.js
Normal file
@ -0,0 +1,3 @@
|
|||||||
|
import MyDialog from './index.vue'
|
||||||
|
|
||||||
|
export default MyDialog
|
||||||
39
packages/screen/src/component/MyDialog/index.vue
Normal file
39
packages/screen/src/component/MyDialog/index.vue
Normal file
@ -0,0 +1,39 @@
|
|||||||
|
<template>
|
||||||
|
<el-dialog :visible.sync="visible" :title="title" :width="width">
|
||||||
|
<slot></slot>
|
||||||
|
<template #footer>
|
||||||
|
<div class="dialog-footer">
|
||||||
|
<el-button @click="onCancel">取消</el-button>
|
||||||
|
<el-button type="primary" @click="onConfirm"> 确认 </el-button>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
</el-dialog>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
const props = defineProps({
|
||||||
|
visible: {
|
||||||
|
type: Boolean,
|
||||||
|
default: false,
|
||||||
|
},
|
||||||
|
width: {
|
||||||
|
type: String,
|
||||||
|
default: "50%",
|
||||||
|
},
|
||||||
|
title: {
|
||||||
|
type: String,
|
||||||
|
default: "",
|
||||||
|
},
|
||||||
|
onConfirm: {
|
||||||
|
type: Function,
|
||||||
|
default: () => {},
|
||||||
|
},
|
||||||
|
onCancel: {
|
||||||
|
type: Function,
|
||||||
|
default: () => {},
|
||||||
|
},
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
</style>
|
||||||
@ -6,11 +6,16 @@ const service = axios.create({
|
|||||||
})
|
})
|
||||||
|
|
||||||
export async function request(config) {
|
export async function request(config) {
|
||||||
const res = await service(config)
|
try {
|
||||||
if (res === null || res === undefined) {
|
const res = await service(config)
|
||||||
return res
|
if (res === null || res === undefined) {
|
||||||
}
|
return res
|
||||||
if (Object.prototype.hasOwnProperty.call(res, 'data')) {
|
}
|
||||||
return res.data
|
if (Object.prototype.hasOwnProperty.call(res, 'data')) {
|
||||||
|
return res.data
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
console.log(error)
|
||||||
|
return null
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -1,187 +1,511 @@
|
|||||||
<template>
|
<template>
|
||||||
<DynamicTable
|
<div class="root">
|
||||||
:dataSource="tableData"
|
<div class="search-box">
|
||||||
:columns="columns"
|
<el-input
|
||||||
:toolbar="toolbar"
|
v-model="params.qxmc"
|
||||||
:autoHeight="true"
|
style="width: 240px; margin-right: 10px"
|
||||||
:pagination="pagination"
|
size="large"
|
||||||
></DynamicTable>
|
placeholder="请输入区县名称"
|
||||||
|
:suffix-icon="Search"
|
||||||
|
@change="handleSearch"
|
||||||
|
/>
|
||||||
|
<el-select
|
||||||
|
v-model="params.zdlx"
|
||||||
|
style="width: 240px; margin-right: 10px"
|
||||||
|
size="large"
|
||||||
|
placeholder="站点类型"
|
||||||
|
:suffix-icon="Search"
|
||||||
|
@change="handleSearch"
|
||||||
|
:options="zdlxOptions"
|
||||||
|
clearable
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div class="event-box">
|
||||||
|
<el-button type="primary" size="large" @click="openAddDialog"
|
||||||
|
>新增</el-button
|
||||||
|
>
|
||||||
|
</div>
|
||||||
|
<DynamicTable
|
||||||
|
:dataSource="tableData"
|
||||||
|
:columns="columns"
|
||||||
|
:autoHeight="true"
|
||||||
|
:pagination="pagination"
|
||||||
|
></DynamicTable>
|
||||||
|
<div class="dialog-container">
|
||||||
|
<MyDialog
|
||||||
|
v-model="dialogVisible"
|
||||||
|
title="站点详情"
|
||||||
|
:onConfirm="handleConfirm"
|
||||||
|
:onCancel="handleCancel"
|
||||||
|
width="40%"
|
||||||
|
>
|
||||||
|
<el-form
|
||||||
|
label-position="right"
|
||||||
|
label-width="auto"
|
||||||
|
style="
|
||||||
|
max-width: 600px;
|
||||||
|
max-height: 60vh;
|
||||||
|
overflow-y: auto;
|
||||||
|
padding-right: 12px;
|
||||||
|
"
|
||||||
|
>
|
||||||
|
<el-form-item label="区县名称">
|
||||||
|
<el-input disabled v-model="detailData.qxmc" />
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="站点类型">
|
||||||
|
<el-input disabled v-model="detailData.zdlx" />
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="路线编码">
|
||||||
|
<el-input disabled v-model="detailData.lxbm" />
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="里程桩号">
|
||||||
|
<el-input disabled v-model="detailData.lczh" />
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="行政等级">
|
||||||
|
<el-input disabled v-model="detailData.xzdj" />
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="机动车月交通流量">
|
||||||
|
<el-input disabled v-model="detailData.yjtll" />
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="技术等级">
|
||||||
|
<el-input disabled v-model="detailData.jsdj" />
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="服务保障点具体名称">
|
||||||
|
<el-input disabled v-model="detailData.mc" />
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="产权隶属单位">
|
||||||
|
<el-input disabled v-model="detailData.ssdw" />
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="经度">
|
||||||
|
<el-input disabled v-model="detailData.jd" />
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="纬度">
|
||||||
|
<el-input disabled v-model="detailData.wd" />
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="充电桩根数">
|
||||||
|
<el-input disabled v-model="detailData.cdzgs" />
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="是否对外开放">
|
||||||
|
<el-input disabled v-model="detailData.sfdwkf" />
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="对外开放的是否有如厕功能">
|
||||||
|
<el-input disabled v-model="detailData.sfdwkfrc" />
|
||||||
|
</el-form-item>
|
||||||
|
</el-form>
|
||||||
|
</MyDialog>
|
||||||
|
<MyDialog
|
||||||
|
v-model="editDialogVisible"
|
||||||
|
:title="isEdit ? '编辑站点' : '新增站点'"
|
||||||
|
:onConfirm="isEdit ? handleEditConfirm : handleAddConfirm"
|
||||||
|
:onCancel="handleEditCancel"
|
||||||
|
width="40%"
|
||||||
|
>
|
||||||
|
<el-form
|
||||||
|
ref="editFormRef"
|
||||||
|
:model="editForm"
|
||||||
|
label-position="right"
|
||||||
|
label-width="auto"
|
||||||
|
:rules="editRules"
|
||||||
|
style="
|
||||||
|
max-width: 600px;
|
||||||
|
max-height: 60vh;
|
||||||
|
overflow-y: auto;
|
||||||
|
padding-right: 12px;
|
||||||
|
"
|
||||||
|
>
|
||||||
|
<el-form-item label="区县名称" prop="qxmc">
|
||||||
|
<el-input v-model="editForm.qxmc" />
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="站点类型" prop="zdlx">
|
||||||
|
<el-select
|
||||||
|
v-model="editForm.zdlx"
|
||||||
|
placeholder="请选择站点类型"
|
||||||
|
:options="zdlxOptions"
|
||||||
|
/>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="路线编码" prop="lxbm">
|
||||||
|
<el-input v-model="editForm.lxbm" />
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="里程桩号" prop="lczh">
|
||||||
|
<el-input v-model="editForm.lczh" />
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="行政等级" prop="xzdj">
|
||||||
|
<el-input v-model="editForm.xzdj" />
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="机动车月交通流量" prop="yjtll">
|
||||||
|
<el-input v-model="editForm.yjtll" />
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="技术等级" prop="jsdj">
|
||||||
|
<el-input v-model="editForm.jsdj" />
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="服务保障点具体名称" prop="mc">
|
||||||
|
<el-input v-model="editForm.mc" />
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="产权隶属单位" prop="ssdw">
|
||||||
|
<el-input v-model="editForm.ssdw" />
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="经度" prop="jd">
|
||||||
|
<el-input v-model="editForm.jd" />
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="纬度" prop="wd">
|
||||||
|
<el-input v-model="editForm.wd" />
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="充电桩根数" prop="cdzgs">
|
||||||
|
<el-input v-model="editForm.cdzgs" />
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="是否对外开放" prop="sfdwkf">
|
||||||
|
<el-input v-model="editForm.sfdwkf" />
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="对外开放的是否有如厕功能" prop="sfdwkfrc">
|
||||||
|
<el-input v-model="editForm.sfdwkfrc" />
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="备注" prop="bz">
|
||||||
|
<el-input v-model="editForm.bz" />
|
||||||
|
</el-form-item>
|
||||||
|
</el-form>
|
||||||
|
</MyDialog>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script lang="ts" setup>
|
<script lang="ts" setup>
|
||||||
import DynamicTable from "../../component/DynamicTable";
|
import DynamicTable from "../../component/DynamicTable";
|
||||||
import { h, ref, onMounted, reactive } from "vue";
|
import { h, ref, onMounted, reactive, watch, toRaw } from "vue";
|
||||||
import { request } from "@/utils/request";
|
import { request } from "@/utils/request";
|
||||||
|
import { Search } from "@element-plus/icons-vue";
|
||||||
|
import MyDialog from "../../component/MyDialog";
|
||||||
|
import { de } from "element-plus/es/locales.mjs";
|
||||||
|
|
||||||
const tableData = ref([
|
const tableData = ref([]);
|
||||||
{
|
const detailData = ref({});
|
||||||
county: "潼南",
|
const dialogVisible = ref(false);
|
||||||
road_code: "G319线",
|
const handleCancel = () => {
|
||||||
mile_code: "2654+000",
|
dialogVisible.value = false;
|
||||||
level: "国道",
|
};
|
||||||
monthly_traffic: "5625",
|
const handleConfirm = () => {
|
||||||
tec_level: "二级",
|
dialogVisible.value = false;
|
||||||
name: "三汇停车区",
|
};
|
||||||
service_station_address: "交通公路部门",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
county: "潼南",
|
|
||||||
road_code: "G319线",
|
|
||||||
mile_code: "2654+000",
|
|
||||||
level: "国道",
|
|
||||||
monthly_traffic: "5625",
|
|
||||||
tec_level: "二级",
|
|
||||||
name: "三汇停车区",
|
|
||||||
service_station_address: "交通公路部门",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
county: "潼南",
|
|
||||||
road_code: "G319线",
|
|
||||||
mile_code: "2654+000",
|
|
||||||
level: "国道",
|
|
||||||
monthly_traffic: "5625",
|
|
||||||
tec_level: "二级",
|
|
||||||
name: "三汇停车区",
|
|
||||||
service_station_address: "交通公路部门",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
county: "潼南",
|
|
||||||
road_code: "G319线",
|
|
||||||
mile_code: "2654+000",
|
|
||||||
level: "国道",
|
|
||||||
monthly_traffic: "5625",
|
|
||||||
tec_level: "二级",
|
|
||||||
name: "三汇停车区",
|
|
||||||
service_station_address: "交通公路部门",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
county: "潼南",
|
|
||||||
road_code: "G319线",
|
|
||||||
mile_code: "2654+000",
|
|
||||||
level: "国道",
|
|
||||||
monthly_traffic: "5625",
|
|
||||||
tec_level: "二级",
|
|
||||||
name: "三汇停车区",
|
|
||||||
service_station_address: "交通公路部门",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
county: "潼南",
|
|
||||||
road_code: "G319线",
|
|
||||||
mile_code: "2654+000",
|
|
||||||
level: "国道",
|
|
||||||
monthly_traffic: "5625",
|
|
||||||
tec_level: "二级",
|
|
||||||
name: "三汇停车区",
|
|
||||||
service_station_address: "交通公路部门",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
county: "潼南",
|
|
||||||
road_code: "G319线",
|
|
||||||
mile_code: "2654+000",
|
|
||||||
level: "国道",
|
|
||||||
monthly_traffic: "5625",
|
|
||||||
tec_level: "二级",
|
|
||||||
name: "三汇停车区",
|
|
||||||
service_station_address: "交通公路部门",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
county: "潼南",
|
|
||||||
road_code: "G319线",
|
|
||||||
mile_code: "2654+000",
|
|
||||||
level: "国道",
|
|
||||||
monthly_traffic: "5625",
|
|
||||||
tec_level: "二级",
|
|
||||||
name: "三汇停车区",
|
|
||||||
service_station_address: "交通公路部门",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
county: "潼南",
|
|
||||||
road_code: "G319线",
|
|
||||||
mile_code: "2654+000",
|
|
||||||
level: "国道",
|
|
||||||
monthly_traffic: "5625",
|
|
||||||
tec_level: "二级",
|
|
||||||
name: "三汇停车区",
|
|
||||||
service_station_address: "交通公路部门",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
county: "潼南",
|
|
||||||
road_code: "G319线",
|
|
||||||
mile_code: "2654+000",
|
|
||||||
level: "国道",
|
|
||||||
monthly_traffic: "5625",
|
|
||||||
tec_level: "二级",
|
|
||||||
name: "三汇停车区",
|
|
||||||
service_station_address: "交通公路部门",
|
|
||||||
},
|
|
||||||
]);
|
|
||||||
|
|
||||||
|
// 表单初始状态
|
||||||
|
const INIT_FORM = {
|
||||||
|
id: "",
|
||||||
|
zdlx: "",
|
||||||
|
lxbm: "",
|
||||||
|
qxmc: "",
|
||||||
|
lczh: "",
|
||||||
|
xzdj: "",
|
||||||
|
yjtll: 0,
|
||||||
|
jsdj: "",
|
||||||
|
mc: "",
|
||||||
|
ssdw: "",
|
||||||
|
jd: "",
|
||||||
|
wd: "",
|
||||||
|
cdzgs: "",
|
||||||
|
sfdwkf: "",
|
||||||
|
sfdwkfrc: "",
|
||||||
|
bz: "",
|
||||||
|
};
|
||||||
|
// 站点类型选项
|
||||||
|
const zdlxOptions = [
|
||||||
|
{ label: "服务设施", value: "服务设施" },
|
||||||
|
{ label: "加油站", value: "加油站" },
|
||||||
|
{ label: "加气站", value: "加气站" },
|
||||||
|
{ label: "加氢站", value: "加氢站" },
|
||||||
|
{ label: "充电站", value: "充电站" },
|
||||||
|
];
|
||||||
|
|
||||||
|
// 是否在编辑状态
|
||||||
|
const isEdit = ref(false);
|
||||||
|
const editFormRef = ref();
|
||||||
|
const editForm = reactive({ ...INIT_FORM });
|
||||||
|
const editDialogVisible = ref(false);
|
||||||
|
const openEditDialog = (row) => {
|
||||||
|
editForm.id = row.id;
|
||||||
|
Object.assign(editForm, row);
|
||||||
|
editDialogVisible.value = true;
|
||||||
|
};
|
||||||
|
// 表单校验规则
|
||||||
|
const editRules = {
|
||||||
|
qxmc: [{ required: true, message: "请输入区县名称", trigger: "blur" }],
|
||||||
|
zdlx: [{ required: true, message: "请输入站点类型", trigger: "blur" }],
|
||||||
|
lxbm: [{ required: true, message: "请输入路线编码", trigger: "blur" }],
|
||||||
|
lczh: [{ required: true, message: "请输入里程桩号", trigger: "blur" }],
|
||||||
|
xzdj: [{ required: true, message: "请输入行政等级", trigger: "blur" }],
|
||||||
|
yjtll: [
|
||||||
|
{
|
||||||
|
required: true,
|
||||||
|
message: "请输入机动车月交通流量",
|
||||||
|
trigger: "blur",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: "number",
|
||||||
|
message: "请输入正确的机动车月交通流量",
|
||||||
|
trigger: "blur",
|
||||||
|
},
|
||||||
|
],
|
||||||
|
jsdj: [{ required: true, message: "请输入技术等级", trigger: "blur" }],
|
||||||
|
mc: [
|
||||||
|
{ required: true, message: "请输入服务保障点具体名称", trigger: "blur" },
|
||||||
|
],
|
||||||
|
ssdw: [{ required: true, message: "请输入产权隶属单位", trigger: "blur" }],
|
||||||
|
jd: [{ required: true, message: "请输入经度", trigger: "blur" }],
|
||||||
|
wd: [{ required: true, message: "请输入纬度", trigger: "blur" }],
|
||||||
|
cdzgs: [{ required: true, message: "请输入充电桩根数", trigger: "blur" }],
|
||||||
|
sfdwkf: [{ required: true, message: "请输入是否对外开放", trigger: "blur" }],
|
||||||
|
sfdwkfrc: [
|
||||||
|
{
|
||||||
|
required: true,
|
||||||
|
message: "请输入对外开放的是否有如厕功能",
|
||||||
|
trigger: "blur",
|
||||||
|
},
|
||||||
|
],
|
||||||
|
};
|
||||||
|
const handleEditCancel = () => {
|
||||||
|
editDialogVisible.value = false;
|
||||||
|
};
|
||||||
|
const handleEditConfirm = async () => {
|
||||||
|
try {
|
||||||
|
await editFormRef.value.validate();
|
||||||
|
const res = await request({
|
||||||
|
url: `/api/yhz`,
|
||||||
|
method: "PUT",
|
||||||
|
data: toRaw(editForm),
|
||||||
|
});
|
||||||
|
if (res.code === "00000") {
|
||||||
|
ElMessage({
|
||||||
|
message: "编辑成功",
|
||||||
|
type: "success",
|
||||||
|
});
|
||||||
|
getTableData();
|
||||||
|
editDialogVisible.value = false;
|
||||||
|
} else {
|
||||||
|
throw new Error(res.message);
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
console.log(error.message);
|
||||||
|
ElMessage({
|
||||||
|
message: error.message,
|
||||||
|
type: "error",
|
||||||
|
});
|
||||||
|
}
|
||||||
|
};
|
||||||
|
const resetForm = () => {
|
||||||
|
Object.assign(editForm, INIT_FORM);
|
||||||
|
};
|
||||||
|
|
||||||
|
// 打开新增站点弹窗
|
||||||
|
const openAddDialog = () => {
|
||||||
|
resetForm();
|
||||||
|
isEdit.value = false;
|
||||||
|
editDialogVisible.value = true;
|
||||||
|
};
|
||||||
|
|
||||||
|
// 新增站点
|
||||||
|
const handleAddConfirm = async () => {
|
||||||
|
try {
|
||||||
|
await editFormRef.value.validate();
|
||||||
|
const res = await request({
|
||||||
|
url: "/api/yhz",
|
||||||
|
method: "POST",
|
||||||
|
data: toRaw(editForm),
|
||||||
|
});
|
||||||
|
if (res.code === "00000") {
|
||||||
|
ElMessage({
|
||||||
|
message: "新增成功",
|
||||||
|
type: "success",
|
||||||
|
});
|
||||||
|
getTableData();
|
||||||
|
editDialogVisible.value = false;
|
||||||
|
} else {
|
||||||
|
throw new Error(res.message);
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
ElMessage({
|
||||||
|
message: error.message,
|
||||||
|
type: "error",
|
||||||
|
});
|
||||||
|
console.log(error.message);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
// 搜索条件
|
||||||
|
const params = reactive({
|
||||||
|
qxmc: "",
|
||||||
|
zdlx: "",
|
||||||
|
});
|
||||||
|
|
||||||
|
const handleSearch = () => {
|
||||||
|
// 重置分页到第一页
|
||||||
|
pagination.current = 1;
|
||||||
|
getTableData();
|
||||||
|
};
|
||||||
|
|
||||||
|
// 获取养护站详情
|
||||||
|
const getDetailData = async (row) => {
|
||||||
|
try {
|
||||||
|
const res = await request({
|
||||||
|
url: `/api/yhz/${row.id}`,
|
||||||
|
method: "GET",
|
||||||
|
});
|
||||||
|
if (res.code === "00000") {
|
||||||
|
detailData.value = res.data;
|
||||||
|
} else {
|
||||||
|
detailData.value = {};
|
||||||
|
throw new Error(res.message);
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
console.log(error.message);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
// 获取养护站列表
|
||||||
const getTableData = async () => {
|
const getTableData = async () => {
|
||||||
try {
|
try {
|
||||||
const params = {
|
|
||||||
|
|
||||||
pageNum: pagination.current,
|
|
||||||
pageSize: pagination.pageSize,
|
|
||||||
};
|
|
||||||
const res = await request({
|
const res = await request({
|
||||||
url: "/api/yhz/list",
|
url: "/api/yhz/list",
|
||||||
method: "GET",
|
method: "GET",
|
||||||
params: params,
|
params: {
|
||||||
|
...params,
|
||||||
|
pageNum: pagination.current,
|
||||||
|
pageSize: pagination.pageSize,
|
||||||
|
},
|
||||||
});
|
});
|
||||||
} catch (error) {}
|
if (res.code === "00000") {
|
||||||
|
tableData.value = res.data.records;
|
||||||
|
pagination.total = res.data.total;
|
||||||
|
} else {
|
||||||
|
throw new Error(res.message);
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
console.log(error.message);
|
||||||
|
}
|
||||||
};
|
};
|
||||||
onMounted(() => {
|
onMounted(() => {
|
||||||
getTableData();
|
getTableData();
|
||||||
});
|
});
|
||||||
const columns = [
|
const columns = [
|
||||||
{
|
{
|
||||||
prop: "county",
|
prop: "qxmc",
|
||||||
label: "区县",
|
label: "区县名称",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
prop: "road_code",
|
prop: "zdlx",
|
||||||
|
label: "站点类型",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
prop: "lxbm",
|
||||||
label: "路线编码",
|
label: "路线编码",
|
||||||
// minWidth: 160,
|
// minWidth: 160,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
prop: "mile_code",
|
prop: "lczh",
|
||||||
label: "里程桩号",
|
label: "里程桩号",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
prop: "level",
|
prop: "xzdj",
|
||||||
label: "行政等级(仅划分:国道、省道、农村公路三类)",
|
label: "行政等级",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
prop: "monthly_traffic",
|
prop: "yjtll",
|
||||||
label: "机动车月交通流量",
|
label: "机动车月交通流量",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
prop: "tec_level",
|
prop: "jsdj",
|
||||||
label: "技术等级",
|
label: "技术等级",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
prop: "name",
|
prop: "mc",
|
||||||
label: "服务保障点具体名称",
|
label: "服务保障点具体名称",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
prop: "type",
|
prop: "ssdw",
|
||||||
label: "类型",
|
label: "产权隶属单位",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
prop: "jd",
|
||||||
|
label: "经度",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
prop: "wd",
|
||||||
|
label: "纬度",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
prop: "cdzgs",
|
||||||
|
label: "充电桩根数",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
prop: "sfdwkf",
|
||||||
|
label: "是否对外开放",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
prop: "sfdwkfrc",
|
||||||
|
label: "对外开放的是否有如厕功能",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
label: "操作",
|
label: "操作",
|
||||||
fixed: "right",
|
fixed: "right",
|
||||||
width: 100,
|
width: 150,
|
||||||
render: (row) => () =>
|
render: (row) => () =>
|
||||||
h(
|
h("div", { class: "action-btns" }, [
|
||||||
ElButton,
|
h(
|
||||||
{
|
ElButton,
|
||||||
type: "text",
|
{
|
||||||
onClick: () => {
|
type: "primary",
|
||||||
console.log(row);
|
link: true,
|
||||||
|
onClick: async () => {
|
||||||
|
await getDetailData(row);
|
||||||
|
dialogVisible.value = true;
|
||||||
|
},
|
||||||
},
|
},
|
||||||
},
|
() => "详情"
|
||||||
() => "详情"
|
),
|
||||||
),
|
h(
|
||||||
|
ElButton,
|
||||||
|
{
|
||||||
|
type: "success",
|
||||||
|
link: true,
|
||||||
|
style: "margin-left: 10px;",
|
||||||
|
onClick: async () => {
|
||||||
|
await getDetailData(row);
|
||||||
|
isEdit.value = true;
|
||||||
|
openEditDialog(row);
|
||||||
|
},
|
||||||
|
},
|
||||||
|
() => "编辑"
|
||||||
|
),
|
||||||
|
h(
|
||||||
|
ElButton,
|
||||||
|
{
|
||||||
|
type: "danger",
|
||||||
|
link: true,
|
||||||
|
style: "margin-left: 10px;",
|
||||||
|
onClick: async () => {
|
||||||
|
try {
|
||||||
|
await ElMessageBox.confirm("确定要删除该站点吗？", "删除确认", {
|
||||||
|
confirmButtonText: "确定",
|
||||||
|
cancelButtonText: "取消",
|
||||||
|
type: "warning",
|
||||||
|
});
|
||||||
|
|
||||||
|
const res = await request({
|
||||||
|
url: `/api/yhz/${row.id}`,
|
||||||
|
method: "DELETE",
|
||||||
|
});
|
||||||
|
|
||||||
|
if (res.code === "00000") {
|
||||||
|
ElMessage.success("删除成功");
|
||||||
|
getTableData();
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
if (error instanceof Error) {
|
||||||
|
ElMessage.error(error.message || "删除失败");
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
},
|
||||||
|
() => "删除"
|
||||||
|
),
|
||||||
|
]),
|
||||||
},
|
},
|
||||||
];
|
];
|
||||||
|
|
||||||
@ -200,5 +524,12 @@ const pagination = reactive({
|
|||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
|
.root {
|
||||||
|
height: 100%;
|
||||||
|
padding: 45px;
|
||||||
|
}
|
||||||
|
.event-box {
|
||||||
|
margin: 20px 0;
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
||||||
@ -27,7 +27,7 @@ export default defineConfig({
|
|||||||
cors: true,
|
cors: true,
|
||||||
proxy: {
|
proxy: {
|
||||||
'/api': {
|
'/api': {
|
||||||
target: '',
|
target: 'http://8.137.54.85:8661/',
|
||||||
changeOrigin: true,
|
changeOrigin: true,
|
||||||
},
|
},
|
||||||
}
|
}
|
||||||
|
|||||||
3
pnpm-lock.yaml
generated
3
pnpm-lock.yaml
generated
@ -8,6 +8,9 @@ importers:
|
|||||||
|
|
||||||
.:
|
.:
|
||||||
dependencies:
|
dependencies:
|
||||||
|
'@element-plus/icons-vue':
|
||||||
|
specifier: ^2.3.2
|
||||||
|
version: 2.3.2(vue@3.5.22)
|
||||||
'@vueuse/core':
|
'@vueuse/core':
|
||||||
specifier: ^14.0.0
|
specifier: ^14.0.0
|
||||||
version: 14.0.0(vue@3.5.22)
|
version: 14.0.0(vue@3.5.22)
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user