bdzl2/bxztApp
5
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Compare commits

base: bdzl2:2ebeb4376db0b654cdf2f5b24447ebdf8fc72900
Branches Tags
bdzl2:main
bdzl2:dev
bdzl2:feat-zc
..
compare: bdzl2:2c0203c7e862e9fc1481f82e5e5697fcb618e0a3
Branches Tags
bdzl2:dev
bdzl2:feat-zc
bdzl2:main

No commits in common. "2ebeb4376db0b654cdf2f5b24447ebdf8fc72900" and "2c0203c7e862e9fc1481f82e5e5697fcb618e0a3" have entirely different histories.
2ebeb4376d ... 2c0203c7e8

2 changed files with 532 additions and 266 deletions
Show Stats Expand all files Collapse all files

232
packages/screen/src/views/ServiceStationManagePage/index.js
View File

@ -1,232 +0,0 @@
import { h, ref, onMounted, reactive, watch, toRaw, nextTick } from "vue";
import { request } from "@/utils/request";
import { useRoute } from 'vue-router'
const tableData = ref([]); // 表格数据
const filterData = reactive({
zdlx: "",
mc: "",
}) // 过滤条件
const modelVisible = ref(false); // 弹窗状态
const drawerVisible = ref(false); // 抽屉状态
const model = reactive({
title: '',
content: null,
props: {},
onCancel: null,
onConfirm: null,
}); // 弹窗内容
const drawer = reactive({
title: '',
content: null,
props: {},
onCancel: null,
onConfirm: null,
direction: 'rtl',
size: '50%'
}); // 抽屉内容
const dialogType = ref(''); // 弹窗类型
const dialogRef = ref(null); // 弹窗实例
const drawerType = ref(''); // 抽屉类型
const drawerRef = ref(null); // 抽屉实例
// 站点类型选项
const zdlxOptions = [
{ label: "服务设施", value: "服务设施" },
{ label: "加油站", value: "加油站" },
{ label: "加气站", value: "加气站" },
{ label: "加氢站", value: "加氢站" },
{ label: "充电站", value: "充电站" },
];
const pagination = reactive({
current: 1,
pageSize: 10,
total: 0,
pageSizes: [10, 20, 50],
layout: "prev, pager, next, jumper",
onChange: (page, pageSize) => {
pagination.current = page;
pagination.pageSize = pageSize;
getTableData(filterData);
},
}); // 分页
// 获取养护站列表
const getTableData = async (filterData) => {
try {
const res = await request({
url: "/snow-ops-platform/yhz/list",
method: "GET",
params: {
mc: filterData?.mc || "",
zdlx: filterData?.zdlx || "",
pageNum: pagination.current,
pageSize: pagination.pageSize,
},
});
if (res.code === "00000") {
tableData.value = res.data.records;
pagination.total = Number(res.data.total);
} else {
throw new Error(res.message);
}
} catch (error) {
console.log(error.message);
}
};
const columns = [
{
prop: "mc",
label: "服务站名称",
},
{
prop: "sbsl",
label: "设备数量",
render: (row) => () =>
h(
ElButton,
{
link: true,
type: "primary",
onClick: () => handleClickSb(row),
},
() => row.sbsl
),
},
{
prop: "wzsl",
label: "物资数量",
render: (row) => () =>
h(
ElButton,
{
link: true,
type: "primary",
onClick: () => handleClickWz(row),
},
() => row.wzsl
),
},
{
prop: "rysl",
label: "人员数量",
},
{
prop: "qxmc",
label: "区县名称",
},
{
label: "操作",
fixed: "right",
width: 150,
render: (row) => () =>
h("div", { class: "action-btns" }, [
h(
ElButton,
{
type: "primary",
link: true,
onClick: async () => {
},
},
() => "详情"
),
h(
ElButton,
{
type: "success",
link: true,
style: "margin-left: 10px;",
onClick: async () => {
},
},
() => "编辑"
),
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: `/snow-ops-platform/yhz/delete`,
method: "POST",
data: {
id: row.id,
},
});
if (res.code === "00000") {
ElMessage.success("删除成功");
getTableData();
}
} catch (error) {
if (error instanceof Error) {
ElMessage.error(error.message || "删除失败");
}
}
},
},
() => "删除"
),
]),
},
];
const router = useRoute();
const handleClickSb = (row) => {
router.push({
path: `/yhzsb/${encodeURIComponent(JSON.stringify(row))}`,
});
};
const handleClickWz = (row) => {
router.push({
path: `/yhzwz/${encodeURIComponent(JSON.stringify(row))}`,
});
};
export default () => {
// 监听过滤条件变化
watch(
[() => filterData],
([newFilterData]) => {
getTableData(newFilterData)
},
{ deep: true }
)
onMounted(async () => {
await getTableData()
});
return {
tableData,
filterData,
zdlxOptions,
pagination,
columns,
modelVisible,
model,
drawerVisible,
drawer,
dialogRef,
drawerRef,
}
}

566
packages/screen/src/views/ServiceStationManagePage/index.vue
View File

@ -2,19 +2,21 @@
<div class="root">
<div class="search-box">
<el-input
v-model="script.filterData.mc"
v-model="params.mc"
style="width: 240px; margin-right: 10px"
size="large"
placeholder="请输入服务点名称"
:suffix-icon="Search"
@change="handleSearch"
/>
<el-select
v-model="script.filterData.zdlx"
v-model="params.zdlx"
style="width: 240px; margin-right: 10px"
size="large"
placeholder="站点类型"
:suffix-icon="Search"
:options="script.zdlxOptions"
@change="handleSearch"
:options="zdlxOptions"
clearable
/>
</div>
@ -24,48 +26,547 @@
>
</div>
<DynamicTable
:dataSource="script.tableData.value"
:columns="script.columns"
:dataSource="tableData"
:columns="columns"
:autoHeight="true"
:pagination="script.pagination"
:pagination="pagination"
></DynamicTable>
<div class="model-box">
<div class="dialog-container">
<MyDialog
v-model="script.modelVisible.value"
:title="script.model?.title"
:dynamicComponent="script.model?.content"
:component-props="script.model?.props"
:onConfirm="script.model?.onConfirm"
:onCancel="script.model?.onCancel"
ref="dialogRef"
:width="script.model?.width"
v-model="dialogVisible"
title="站点详情"
:onConfirm="handleConfirm"
:onCancel="handleCancel"
width="60%"
>
<el-tabs
v-model="activeName"
class="demo-tabs"
@tab-click="handleClick"
>
<el-tab-pane label="基本信息" name="Basic">
<el-form
label-position="right"
label-width="auto"
style="overflow-y: auto; max-height: 60vh; padding-right: 50px"
>
<el-row :gutter="20">
<el-col :span="12">
<el-form-item label="区县名称:" prop="qxmc">
<el-input disabled v-model="detailData.qxmc" />
</el-form-item>
<el-form-item label="站点类型:" prop="zdlx">
<el-select
disabled
v-model="detailData.zdlx"
placeholder="请选择站点类型"
:options="zdlxOptions"
/>
</el-form-item>
<el-form-item label="路线编码:" prop="lxbm">
<el-input disabled v-model="detailData.lxbm" />
</el-form-item>
<el-form-item label="里程桩号:" prop="lczh">
<el-input disabled v-model="detailData.lczh" />
</el-form-item>
<el-form-item label="行政等级:" prop="xzdj">
<el-input disabled v-model="detailData.xzdj" />
</el-form-item>
<el-form-item label="机动车月交通流量:" prop="yjtll">
<el-input disabled v-model="detailData.yjtll" />
</el-form-item>
<el-form-item label="技术等级:" prop="jsdj">
<el-input disabled v-model="detailData.jsdj" />
</el-form-item>
<el-form-item label="备注:" prop="bz">
<el-input
disabled
v-model="detailData.bz"
type="textarea"
/>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="服务保障点具体名称:" prop="mc">
<el-input disabled v-model="detailData.mc" />
</el-form-item>
<el-form-item label="产权隶属单位:" prop="ssdw">
<el-input disabled v-model="detailData.ssdw" />
</el-form-item>
<el-form-item label="经度:" prop="jd">
<el-input disabled v-model="detailData.jd" />
</el-form-item>
<el-form-item label="纬度:" prop="wd">
<el-input disabled v-model="detailData.wd" />
</el-form-item>
<el-form-item label="充电桩根数:" prop="cdzgs">
<el-input disabled v-model="detailData.cdzgs" />
</el-form-item>
<el-form-item label="是否对外开放:" prop="sfdwkf">
<el-input disabled v-model="detailData.sfdwkf" />
</el-form-item>
<el-form-item
label="对外开放的是否有如厕功能:"
prop="sfdwkfrc"
>
<el-input disabled v-model="detailData.sfdwkfrc" />
</el-form-item>
</el-col>
</el-row> </el-form
></el-tab-pane>
<el-tab-pane label="人员信息" name="Person">
<PersonData
:yhzData="detailData"
>
</PersonData>
</el-tab-pane>
</el-tabs>
</MyDialog>
<MyDialog
v-model="editDialogVisible"
:title="isEdit ? '编辑站点' : '新增站点'"
:onConfirm="isEdit ? handleEditConfirm : handleAddConfirm"
:onCancel="handleEditCancel"
width="60%"
>
<el-form
ref="editFormRef"
:model="editForm"
label-position="right"
label-width="auto"
:rules="{}"
style="overflow-y: auto; max-height: 60vh; padding-right: 50px"
>
<el-row :gutter="20">
<el-col :span="12">
<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="bz">
<el-input v-model="editForm.bz" type="textarea" />
</el-form-item>
</el-col>
<el-col :span="12">
<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-col>
</el-row>
</el-form>
</MyDialog>
<MyDrawer
v-model="script.drawerVisible.value"
:title="script.drawer?.title"
:dynamicComponent="script.drawer?.content"
:component-props="script.drawer?.props"
:onConfirm="script.drawer?.onConfirm"
:onCancel="script.drawer?.onCancel"
ref="drawerRef"
:direction="script.drawer?.direction"
:size="script.drawer?.size"
></MyDrawer>
</div>
</div>
</template>
<script setup>
<script lang="ts" setup>
import DynamicTable from "../../component/DynamicTable";
import { h, ref, onMounted, reactive, watch, toRaw } from "vue";
import { useRouter, useRoute } from "vue-router";
import { request } from "@/utils/request";
import { Search } from "@element-plus/icons-vue";
import MyDialog from "../../component/MyDialog";
import MyDrawer from "../../component/MyDrawer";
import scriptFn from "./index.js";
const script = scriptFn();
const { dialogRef, drawerRef } = script;
import PersonData from "./personData.vue";
const tableData = ref([]);
const detailData = ref({});
const dialogVisible = ref(false);
const handleCancel = () => {
dialogVisible.value = false;
};
const handleConfirm = () => {
dialogVisible.value = false;
};
// 表单初始状态
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/update`,
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) {
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/add",
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({
mc: "",
zdlx: "",
});
const handleSearch = () => {
// 重置分页到第一页
pagination.current = 1;
getTableData();
};
// 获取养护站详情
const getDetailData = async (row) => {
try {
const res = await request({
url: `/snow-ops-platform/yhz/getById?id=${row.id}`,
method: "GET",
});
if (res.code === "00000") {
detailData.value = res.data;
return res.code;
} else {
detailData.value = {};
throw new Error(res.message);
}
} catch (error) {
ElMessage({
message: error.message,
type: "error",
});
console.log(error.message);
return -1;
}
};
// 获取养护站列表
const getTableData = async () => {
try {
const res = await request({
url: "/snow-ops-platform/yhz/list",
method: "GET",
params: {
...params,
pageNum: pagination.current,
pageSize: pagination.pageSize,
},
});
if (res.code === "00000") {
tableData.value = res.data.records;
pagination.total = Number(res.data.total);
} else {
throw new Error(res.message);
}
} catch (error) {
console.log(error.message);
}
};
onMounted(() => {
getTableData();
});
const columns = [
{
prop: "mc",
label: "服务站名称",
},
{
prop: "sbsl",
label: "设备数量",
render: (row) => () =>
h(
ElButton,
{
link: true,
type: "primary",
onClick: () => handleClickSb(row),
},
() => row.sbsl
),
},
{
prop: "wzsl",
label: "物资数量",
render: (row) => () =>
h(
ElButton,
{
link: true,
type: "primary",
onClick: () => handleClickWz(row),
},
() => row.wzsl
),
},
{
prop: "rysl",
label: "人员数量",
},
{
prop: "qxmc",
label: "区县名称",
},
{
label: "操作",
fixed: "right",
width: 150,
render: (row) => () =>
h("div", { class: "action-btns" }, [
h(
ElButton,
{
type: "primary",
link: true,
onClick: async () => {
const res = await getDetailData(row);
if (res === "00000") {
dialogVisible.value = true;
}
},
},
() => "详情"
),
h(
ElButton,
{
type: "success",
link: true,
style: "margin-left: 10px;",
onClick: async () => {
const res = await getDetailData(row);
if (res === "00000") {
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: `/snow-ops-platform/yhz/delete`,
method: "POST",
data: {
id: row.id,
},
});
if (res.code === "00000") {
ElMessage.success("删除成功");
getTableData();
}
} catch (error) {
if (error instanceof Error) {
ElMessage.error(error.message || "删除失败");
}
}
},
},
() => "删除"
),
]),
},
];
const pagination = reactive({
current: 1,
pageSize: 10,
total: 0,
pageSizes: [10, 20, 50],
layout: "prev, pager, next, jumper",
onChange: (page: number, pageSize: number) => {
pagination.current = page;
pagination.pageSize = pageSize;
getTableData();
},
});
const router = useRouter();
const route = useRoute();
const handleClickSb = (row) => {
router.push({
path: `/yhzsb/${encodeURIComponent(JSON.stringify(row))}`,
});
};
const handleClickWz = (row) => {
router.push({
path: `/yhzwz/${encodeURIComponent(JSON.stringify(row))}`,
});
};
// 当前标签
const activeName = ref("Basic");
</script>
<style scoped>
.root {
height: 100%;
@ -74,8 +575,5 @@ const { dialogRef, drawerRef } = script;
.event-box {
margin: 20px 0;
}
.model-box {
position: absolute;
}
</style>