378 lines
10 KiB
Vue
378 lines
10 KiB
Vue
|
<script lang="ts" setup>
|
||
|
|
import AddForm from "./component/addForm.vue";
|
||
|
|
import {
|
||
|
|
getRegionByPageAPI,
|
||
|
|
addRegionAPI,
|
||
|
|
deleteRegionAPI,
|
||
|
|
updateRegionAPI,
|
||
|
|
startRegionAPI,
|
||
|
|
stopRegionAPI
|
||
|
|
} from "@/api/modules/region";
|
||
|
|
import { deepClone, dictTranslate } from "@/utils";
|
||
|
|
import { useSystemStore } from "@/store/modules/system";
|
||
|
|
import { PointDataHandler } from "@/utils/map-tools";
|
||
|
|
import { getOperatorAllListAPI } from "@/api/modules/system";
|
||
|
|
import { Modal } from "@arco-design/web-vue";
|
||
|
|
|
||
|
|
// 列表
|
||
|
|
const form = ref<any>({
|
||
|
|
regionSimpleName: "",
|
||
|
|
regionName: ""
|
||
|
|
});
|
||
|
|
|
||
|
|
const system = useSystemStore();
|
||
|
|
const moduleList = ref<any>([]);
|
||
|
|
const regionStatusList = ref<any>([]);
|
||
|
|
const loading = ref<boolean>(false);
|
||
|
|
const tableRef = ref();
|
||
|
|
const AddFormRef = ref<any>(null);
|
||
|
|
const operatorAllList = ref<any>([]);
|
||
|
|
const title = ref<string>("");
|
||
|
|
const pagination = ref({
|
||
|
|
pageNum: 1,
|
||
|
|
total: 0,
|
||
|
|
pageSize: 10,
|
||
|
|
showPageSize: true,
|
||
|
|
showTotal: true
|
||
|
|
});
|
||
|
|
|
||
|
|
const handlePageSizeChange = (pageSize: number) => {
|
||
|
|
pagination.value.pageSize = pageSize;
|
||
|
|
pagination.value.pageNum = 1;
|
||
|
|
getRegionByPage();
|
||
|
|
};
|
||
|
|
|
||
|
|
const handlePageChange = (page: number) => {
|
||
|
|
pagination.value.pageNum = page;
|
||
|
|
getRegionByPage();
|
||
|
|
};
|
||
|
|
|
||
|
|
const search = () => {
|
||
|
|
pagination.value.pageNum = 1;
|
||
|
|
getRegionByPage();
|
||
|
|
};
|
||
|
|
const reset = () => {
|
||
|
|
form.value = {
|
||
|
|
regionSimpleName: "",
|
||
|
|
regionName: ""
|
||
|
|
};
|
||
|
|
search();
|
||
|
|
};
|
||
|
|
const onAdd = () => {
|
||
|
|
open.value = true;
|
||
|
|
title.value = "新增运营区";
|
||
|
|
};
|
||
|
|
|
||
|
|
const getRegionByPage = async () => {
|
||
|
|
loading.value = true;
|
||
|
|
try {
|
||
|
|
const res: any = await getRegionByPageAPI({
|
||
|
|
regionName: form.value.regionName,
|
||
|
|
regionSimpleName: form.value.regionSimpleName,
|
||
|
|
pageNum: pagination.value.pageNum,
|
||
|
|
pageSize: pagination.value.pageSize
|
||
|
|
});
|
||
|
|
loading.value = false;
|
||
|
|
if (res.code !== 200) {
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
const { records, pageNumber, pageSize } = res.data;
|
||
|
|
pagination.value.pageNum = pageNumber;
|
||
|
|
pagination.value.pageSize = pageSize;
|
||
|
|
pagination.value.total = res.data.totalRow;
|
||
|
|
moduleList.value = records;
|
||
|
|
} catch (error) {
|
||
|
|
console.error("获取列表失败:", error);
|
||
|
|
} finally {
|
||
|
|
loading.value = false;
|
||
|
|
}
|
||
|
|
};
|
||
|
|
|
||
|
|
// tag颜色
|
||
|
|
const tagColor = (record: any) => {
|
||
|
|
const { status } = record;
|
||
|
|
|
||
|
|
switch (status) {
|
||
|
|
case 0:
|
||
|
|
return "gray";
|
||
|
|
case 1:
|
||
|
|
return "green";
|
||
|
|
case 2:
|
||
|
|
return "red";
|
||
|
|
default:
|
||
|
|
return "gray";
|
||
|
|
}
|
||
|
|
};
|
||
|
|
|
||
|
|
//翻译字典值
|
||
|
|
const dictFormat = (list: any[], key: string, value: string | number, valueKey: string = "dicValueName") => {
|
||
|
|
return dictTranslate(list, key, value, valueKey);
|
||
|
|
};
|
||
|
|
|
||
|
|
// 获取所有运营商列表
|
||
|
|
const getAllOperatorList = async () => {
|
||
|
|
return new Promise<void>(async resolve => {
|
||
|
|
try {
|
||
|
|
const res: any = await getOperatorAllListAPI();
|
||
|
|
if (res.code === 200) {
|
||
|
|
operatorAllList.value = res.data;
|
||
|
|
resolve();
|
||
|
|
}
|
||
|
|
} catch (error) {
|
||
|
|
console.error("获取运营商列表失败:", error);
|
||
|
|
resolve();
|
||
|
|
}
|
||
|
|
});
|
||
|
|
};
|
||
|
|
|
||
|
|
// 删除运营区
|
||
|
|
const handleDelete = async (record: any) => {
|
||
|
|
const { regionId } = record;
|
||
|
|
try {
|
||
|
|
const res: any = await deleteRegionAPI(regionId);
|
||
|
|
if (res.code === 200) {
|
||
|
|
arcoMessage("success", "删除成功");
|
||
|
|
getRegionByPage();
|
||
|
|
}
|
||
|
|
} catch (error) {
|
||
|
|
console.error("删除失败:", error);
|
||
|
|
}
|
||
|
|
};
|
||
|
|
|
||
|
|
const handleSelect = (val: any, record: any) => {
|
||
|
|
switch (val) {
|
||
|
|
case "start":
|
||
|
|
handleStart(record);
|
||
|
|
break;
|
||
|
|
case "stop":
|
||
|
|
handleStop(record);
|
||
|
|
break;
|
||
|
|
default:
|
||
|
|
break;
|
||
|
|
}
|
||
|
|
};
|
||
|
|
|
||
|
|
// 开始运营
|
||
|
|
const handleStart = (record: any) => {
|
||
|
|
const { regionId } = record;
|
||
|
|
Modal.info({
|
||
|
|
title: "开始运营",
|
||
|
|
content: "请确认是否启动运营区开始运营？",
|
||
|
|
hideCancel: false,
|
||
|
|
closable: true,
|
||
|
|
onBeforeOk: async () => {
|
||
|
|
try {
|
||
|
|
await startRegionAPI(regionId);
|
||
|
|
arcoMessage("success", "启动成功");
|
||
|
|
reset();
|
||
|
|
return true;
|
||
|
|
} catch (error) {
|
||
|
|
console.error("启动运营区失败:", error);
|
||
|
|
return false;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
});
|
||
|
|
};
|
||
|
|
|
||
|
|
// 停止运营
|
||
|
|
const handleStop = (record: any) => {
|
||
|
|
const { regionId } = record;
|
||
|
|
Modal.error({
|
||
|
|
title: "停止运营",
|
||
|
|
content: "请确认是否停止运营区运营？",
|
||
|
|
hideCancel: false,
|
||
|
|
closable: true,
|
||
|
|
onBeforeOk: async () => {
|
||
|
|
try {
|
||
|
|
await stopRegionAPI(regionId);
|
||
|
|
arcoMessage("success", "停止成功");
|
||
|
|
reset();
|
||
|
|
return true;
|
||
|
|
} catch (error) {
|
||
|
|
console.error("停止运营区失败:", error);
|
||
|
|
return false;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
});
|
||
|
|
};
|
||
|
|
|
||
|
|
/**
|
||
|
|
*新增模态框
|
||
|
|
* **/
|
||
|
|
const open = ref<boolean>(false);
|
||
|
|
const afterClose = () => {
|
||
|
|
resetForm();
|
||
|
|
};
|
||
|
|
|
||
|
|
// 修改运营区
|
||
|
|
const handleUpdate = (record: any) => {
|
||
|
|
open.value = true;
|
||
|
|
title.value = "修改运营区";
|
||
|
|
const data = deepClone(record);
|
||
|
|
data.coordinates = PointDataHandler.restoreForDisplay(data.regionPolygon.coordinates);
|
||
|
|
AddFormRef.value.updateForm(data);
|
||
|
|
};
|
||
|
|
|
||
|
|
// 格式化上传数据
|
||
|
|
const formatData = (data: any, type: string = "add") => {
|
||
|
|
if (type === "add") {
|
||
|
|
const regionPolygon: any = {
|
||
|
|
type: "Polygon",
|
||
|
|
coordinates: []
|
||
|
|
};
|
||
|
|
regionPolygon.coordinates = PointDataHandler.prepareForUpload(data.coordinates);
|
||
|
|
|
||
|
|
return {
|
||
|
|
operatorId: data.operatorId,
|
||
|
|
regionName: data.regionName,
|
||
|
|
regionId: data.regionId ? data.regionId : "",
|
||
|
|
regionSimpleName: data.regionSimpleName,
|
||
|
|
regionPolygon
|
||
|
|
};
|
||
|
|
}
|
||
|
|
|
||
|
|
if (type === "edit") {
|
||
|
|
}
|
||
|
|
};
|
||
|
|
|
||
|
|
// 重置表单
|
||
|
|
const resetForm = () => {
|
||
|
|
open.value = false;
|
||
|
|
AddFormRef.value?.resetForm();
|
||
|
|
};
|
||
|
|
|
||
|
|
// 新增提交
|
||
|
|
const handleOk = async () => {
|
||
|
|
const { status, data } = await AddFormRef.value?.submit();
|
||
|
|
if (status) return false;
|
||
|
|
|
||
|
|
try {
|
||
|
|
const parmas = formatData(data, "add");
|
||
|
|
|
||
|
|
if (!parmas) {
|
||
|
|
arcoMessage("error", "数据格式有误");
|
||
|
|
return false;
|
||
|
|
}
|
||
|
|
|
||
|
|
if (data.regionId) {
|
||
|
|
await updateRegionAPI(parmas);
|
||
|
|
} else {
|
||
|
|
await addRegionAPI(parmas);
|
||
|
|
}
|
||
|
|
|
||
|
|
arcoMessage("success", data.regionId ? "修改成功" : "新增成功");
|
||
|
|
resetForm();
|
||
|
|
getRegionByPage();
|
||
|
|
|
||
|
|
return false;
|
||
|
|
} catch (error) {
|
||
|
|
console.error(error);
|
||
|
|
return false;
|
||
|
|
}
|
||
|
|
};
|
||
|
|
|
||
|
|
onMounted(() => {
|
||
|
|
getRegionByPage();
|
||
|
|
});
|
||
|
|
onBeforeMount(async () => {
|
||
|
|
regionStatusList.value = deepClone(system.getDictByCode("regionStatus"));
|
||
|
|
await getAllOperatorList();
|
||
|
|
});
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<template>
|
||
|
|
<div class="snow-page">
|
||
|
|
<div class="snow-inner">
|
||
|
|
<s-layout-tools>
|
||
|
|
<template #left>
|
||
|
|
<a-space wrap>
|
||
|
|
<a-input v-model="form.regionName" placeholder="运营区名称" allow-clear />
|
||
|
|
<a-input v-model="form.regionSimpleName" placeholder="运营区简称" allow-clear />
|
||
|
|
<a-button type="primary" @click="search">
|
||
|
|
<template #icon><icon-search /></template>
|
||
|
|
<span>查询</span>
|
||
|
|
</a-button>
|
||
|
|
<a-button @click="reset">
|
||
|
|
<template #icon><icon-refresh /></template>
|
||
|
|
<span>重置</span>
|
||
|
|
</a-button>
|
||
|
|
</a-space>
|
||
|
|
</template>
|
||
|
|
<template #right>
|
||
|
|
<a-space wrap>
|
||
|
|
<a-button type="primary" @click="onAdd">
|
||
|
|
<template #icon><icon-plus /></template>
|
||
|
|
<span>新增</span>
|
||
|
|
</a-button>
|
||
|
|
</a-space>
|
||
|
|
</template>
|
||
|
|
</s-layout-tools>
|
||
|
|
<a-table
|
||
|
|
ref="tableRef"
|
||
|
|
row-key="batteryId"
|
||
|
|
:data="moduleList"
|
||
|
|
:bordered="{ cell: true }"
|
||
|
|
:loading="loading"
|
||
|
|
:scroll="{ x: '100%', y: '100%', minWidth: 1000 }"
|
||
|
|
:pagination="pagination"
|
||
|
|
@page-change="handlePageChange"
|
||
|
|
@page-size-change="handlePageSizeChange"
|
||
|
|
>
|
||
|
|
<template #columns>
|
||
|
|
<a-table-column title="序号" :width="60" align="center">
|
||
|
|
<template #cell="cell">
|
||
|
|
<span>{{ (pagination.pageNum - 1) * pagination.pageSize + cell.rowIndex + 1 }}</span>
|
||
|
|
</template>
|
||
|
|
</a-table-column>
|
||
|
|
<a-table-column title="运营区名称" data-index="regionName" align="center"></a-table-column>
|
||
|
|
<a-table-column title="运营区简称" data-index="regionSimpleName" align="center"></a-table-column>
|
||
|
|
<a-table-column title="运营商" data-index="operatorId" align="center">
|
||
|
|
<template #cell="{ record }">
|
||
|
|
<span>{{ dictFormat(operatorAllList, "operatorId", record.operatorId, "operatorName") }}</span>
|
||
|
|
</template>
|
||
|
|
</a-table-column>
|
||
|
|
<a-table-column title="状态" data-index="status" align="center">
|
||
|
|
<template #cell="{ record }">
|
||
|
|
<a-tag :color="tagColor(record)" bordered>{{ dictFormat(regionStatusList, "dicValue", record.status) }}</a-tag>
|
||
|
|
</template>
|
||
|
|
</a-table-column>
|
||
|
|
<a-table-column title="创建时间" data-index="createdAt" align="center"></a-table-column>
|
||
|
|
<a-table-column title="操作" align="center" :fixed="'right'">
|
||
|
|
<template #cell="{ record }">
|
||
|
|
<a-space>
|
||
|
|
<a-button type="primary" size="mini" @click="handleUpdate(record)" :disabled="record.status === 1">
|
||
|
|
<template #icon><icon-link /></template>
|
||
|
|
<span>修改</span>
|
||
|
|
</a-button>
|
||
|
|
<a-popconfirm type="warning" content="确定删除该运营区?" @ok="handleDelete(record)">
|
||
|
|
<a-button type="primary" status="danger" size="mini">
|
||
|
|
<template #icon><icon-delete /></template>
|
||
|
|
<span>删除</span>
|
||
|
|
</a-button>
|
||
|
|
</a-popconfirm>
|
||
|
|
<a-dropdown @select="(v: any) => handleSelect(v, record)">
|
||
|
|
<a-button size="mini" type="primary">
|
||
|
|
更多
|
||
|
|
<template #icon><icon-down /></template>
|
||
|
|
</a-button>
|
||
|
|
<template #content>
|
||
|
|
<a-doption value="start" :disabled="record.status === 1">开始运营</a-doption>
|
||
|
|
<a-doption value="stop" :disabled="record.status !== 1">停止运营</a-doption>
|
||
|
|
</template>
|
||
|
|
</a-dropdown>
|
||
|
|
</a-space>
|
||
|
|
</template>
|
||
|
|
</a-table-column>
|
||
|
|
</template>
|
||
|
|
</a-table>
|
||
|
|
</div>
|
||
|
|
<!-- 新增 -->
|
||
|
|
<a-modal v-model:visible="open" @close="afterClose" @before-ok="handleOk" @cancel="afterClose" :width="700">
|
||
|
|
<template #title> {{ title }} </template>
|
||
|
|
<AddForm ref="AddFormRef" :operatorList="operatorAllList" />
|
||
|
|
</a-modal>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<style scoped lang="scss"></style>
|