From 5d9d45818b5209432fc55a591f3692c26d7a5ccc Mon Sep 17 00:00:00 2001
From: SunTao <328867980@qq.com>
Date: Wed, 16 Oct 2024 09:39:01 +0800
Subject: [PATCH] =?UTF-8?q?fix=EF=BC=9A=E9=81=93=E8=B7=AF=E6=AE=B5?=
 =?UTF-8?q?=E6=96=B0=E5=A2=9E?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/xj/section.js                         |  38 ++
 .../xj/inspection/road-management/index.vue   |   2 +-
 src/views/xj/route/{ => route-line}/index.vue |   8 +-
 .../route-section/components/section-add.vue  | 486 ++++++++++++++++++
 src/views/xj/route/route-section/index.vue    | 312 +++++++++++
 5 files changed, 841 insertions(+), 5 deletions(-)
 create mode 100644 src/api/xj/section.js
 rename src/views/xj/route/{ => route-line}/index.vue (99%)
 create mode 100644 src/views/xj/route/route-section/components/section-add.vue
 create mode 100644 src/views/xj/route/route-section/index.vue

diff --git a/src/api/xj/section.js b/src/api/xj/section.js
new file mode 100644
index 0000000..9aea352
--- /dev/null
+++ b/src/api/xj/section.js
@@ -0,0 +1,38 @@
+import request from "@/utils/request";
+
+// 查询道路段列表
+export function getSectionList(query) {
+  return request({
+    url: "/api/v2/segment/list",
+    method: "post",
+    data: query,
+  });
+}
+
+//  新增路段
+export function addSection(query) {
+  return request({
+    url: "/api/v2/segment/add",
+    method: "post",
+    data: query,
+  });
+}
+
+// 删除路段
+export function deleteSection(query) {
+    return request({
+      url: "/api/v2/segment/delete",
+      method: "delete",
+      data: query,
+    });
+  }
+
+//  修改路段信息
+export function updateSection(query) {
+    return request({
+      url: "/api/v2/segment/update",
+      method: "put",
+      data: query,
+    });
+  }
+
diff --git a/src/views/xj/inspection/road-management/index.vue b/src/views/xj/inspection/road-management/index.vue
index 90f707f..d0c20ac 100644
--- a/src/views/xj/inspection/road-management/index.vue
+++ b/src/views/xj/inspection/road-management/index.vue
@@ -171,7 +171,7 @@
           icon="el-icon-delete"
           size="mini"
           :disabled="multiple"
-          @click="handleDelete"
+          @click="handleDelete(null)"
           v-hasPermi="['system:defect:remove']"
           >删除
         </el-button>
diff --git a/src/views/xj/route/index.vue b/src/views/xj/route/route-line/index.vue
similarity index 99%
rename from src/views/xj/route/index.vue
rename to src/views/xj/route/route-line/index.vue
index 795ba02..d71507d 100644
--- a/src/views/xj/route/index.vue
+++ b/src/views/xj/route/route-line/index.vue
@@ -1,8 +1,8 @@
 <!--
  * @Author: error: error: git config user.name & please set dead value or install git && error: git config user.email & please set dead value or install git & please set dead value or install git
  * @Date: 2024-10-08 09:26:24
- * @LastEditors: Please set LastEditors
- * @LastEditTime: 2024-10-08 10:46:17
+ * @LastEditors: SunTao 328867980@qq.com
+ * @LastEditTime: 2024-10-15 13:39:02
  * @FilePath: \znxjxt-ui\src\views\xj\route\index.vue
  * @Description: 路线管理-道路线
 -->
@@ -102,10 +102,10 @@
           >导出
         </el-button>
       </el-col>
-      <right-toolbar
+      <!-- <right-toolbar
         :showSearch.sync="showSearch"
         @queryTable="getList"
-      ></right-toolbar>
+      ></right-toolbar> -->
     </el-row>
 
     <el-table
diff --git a/src/views/xj/route/route-section/components/section-add.vue b/src/views/xj/route/route-section/components/section-add.vue
new file mode 100644
index 0000000..650a852
--- /dev/null
+++ b/src/views/xj/route/route-section/components/section-add.vue
@@ -0,0 +1,486 @@
+<!--
+ * @Author: SunTao 328867980@qq.com
+ * @Date: 2024-10-15 14:27:36
+ * @LastEditors: SunTao 328867980@qq.com
+ * @LastEditTime: 2024-10-16 09:36:51
+ * @FilePath: \znxjxt-ui\src\views\xj\route\route-section\components\section-add.vue
+ * @Description: 道路段-新增/编辑弹窗
+-->
+
+<template>
+  <div class="add-content">
+    <div>
+      <div class="left-form">
+        <el-form
+          ref="dialogForm"
+          :model="dialogForm"
+          :rules="rules"
+          label-width="100px"
+        >
+          <el-row :gutter="24">
+            <el-col :span="12">
+              <el-form-item label="路段编码" prop="segCode">
+                <el-input
+                  v-model="dialogForm.segCode"
+                  placeholder="请输入路段编码"
+                  clearable
+                ></el-input>
+              </el-form-item>
+            </el-col>
+            <el-col :span="12">
+              <el-form-item label="路段名称" prop="segName">
+                <el-input
+                  v-model="dialogForm.segName"
+                  placeholder="请输入路段名称"
+                  clearable
+                ></el-input>
+              </el-form-item>
+            </el-col>
+          </el-row>
+          <el-row :gutter="24">
+            <el-col :span="12">
+              <el-form-item label="道路类型" prop="roadType">
+                <el-select
+                  v-model="dialogForm.roadType"
+                  placeholder="请选择道路类型"
+                >
+                  <el-option
+                    v-for="dict in dict.type.bas_road_type"
+                    :key="dict.value"
+                    :label="dict.label"
+                    :value="dict.value"
+                  ></el-option>
+                </el-select>
+              </el-form-item>
+            </el-col>
+            <el-col :span="12">
+              <el-form-item label="管理站" prop="deptId">
+                <el-select
+                  v-model="dialogForm.deptId"
+                  placeholder="请选择管理站"
+                >
+                  <el-option
+                    v-for="dict in dict.type.bas_road_type"
+                    :key="dict.value"
+                    :label="dict.label"
+                    :value="dict.value"
+                  ></el-option>
+                </el-select>
+              </el-form-item>
+            </el-col>
+          </el-row>
+          <el-row :gutter="24">
+            <el-col :span="12">
+              <el-form-item label="起点桩" prop="stakeStart">
+                <el-input
+                  v-model="dialogForm.stakeStart"
+                  placeholder="请填写起点桩"
+                  clearable
+                ></el-input>
+              </el-form-item>
+            </el-col>
+            <el-col :span="12">
+              <el-form-item label="终点桩" prop="stakeEnd">
+                <el-input
+                  v-model="dialogForm.stakeEnd"
+                  placeholder="请填写终点桩"
+                  clearable
+                ></el-input>
+              </el-form-item>
+            </el-col>
+          </el-row>
+          <el-row :gutter="24">
+            <el-col :span="12">
+              <el-form-item label="路宽" prop="width">
+                <el-input-number
+                  v-model="dialogForm.width"
+                  controls-position="right"
+                  placeholder="请填写路宽"
+                  :min="0"
+                  style="width: 100%"
+                ></el-input-number>
+              </el-form-item>
+            </el-col>
+            <el-col :span="12">
+              <el-form-item label="里程" prop="mileage">
+                <el-input-number
+                  v-model="dialogForm.mileage"
+                  controls-position="right"
+                  placeholder="请填写里程"
+                  :min="0"
+                  style="width: 100%"
+                ></el-input-number>
+              </el-form-item>
+            </el-col>
+          </el-row>
+          <el-row :gutter="24">
+            <el-col :span="12">
+              <el-form-item label="车道数量" prop="laneCount">
+                <el-input-number
+                  v-model="dialogForm.laneCount"
+                  controls-position="right"
+                  placeholder="请填写车道数量"
+                  :min="0"
+                  style="width: 100%"
+                ></el-input-number>
+              </el-form-item>
+            </el-col>
+            <el-col :span="12">
+              <el-form-item label="养护级别" prop="curingLevel">
+                <el-input
+                  v-model="dialogForm.curingLevel"
+                  placeholder="请填写养护级别"
+                  clearable
+                ></el-input>
+              </el-form-item>
+            </el-col>
+          </el-row>
+          <el-row :gutter="24">
+            <el-col :span="12">
+              <el-form-item label="最大限速" prop="maxspeedLimit">
+                <el-input-number
+                  v-model="dialogForm.maxspeedLimit"
+                  controls-position="right"
+                  placeholder="请填写最大限速"
+                  :min="0"
+                  style="width: 100%"
+                ></el-input-number>
+              </el-form-item>
+            </el-col>
+            <el-col :span="12">
+              <el-form-item label="选择路线" prop="routeId">
+                <el-select
+                  v-model="dialogForm.routeId"
+                  placeholder="请选择路线"
+                  clearable
+                >
+                  <el-option
+                    v-for="item in dict.type.bas_road_type"
+                    :key="item.value"
+                    :label="item.label"
+                    :value="item.value"
+                  />
+                </el-select>
+              </el-form-item>
+            </el-col>
+          </el-row>
+          <el-row :gutter="24">
+            <el-col :span="24">
+              <el-form-item label="坐标点" prop="coordinates">
+                <el-input
+                  type="textarea"
+                  :disabled="true"
+                  v-model="dialogForm.coordinates"
+                  rows="4"
+                ></el-input>
+              </el-form-item>
+            </el-col>
+          </el-row>
+          <el-row :gutter="24">
+            <el-col :span="24">
+              <el-form-item label="备注">
+                <el-input v-model="dialogForm.mark"></el-input>
+              </el-form-item>
+            </el-col>
+          </el-row>
+        </el-form>
+      </div>
+      <div class="right-map">
+        <div id="add_map" ref="mapContainer"></div>
+      </div>
+    </div>
+    <div class="dialog-footer">
+      <el-button type="primary" @click="submitForm">确 定</el-button>
+      <el-button @click="cancel">取 消</el-button>
+    </div>
+  </div>
+</template>
+
+<script>
+import { addSection, updateSection } from "@/api/xj/section";
+export default {
+  name: "SectionAdd",
+  dicts: ["bas_road_type", "bas_direction"],
+  props: {
+    dialogItem: {
+      type: Object,
+      default: () => {},
+    },
+  },
+  data() {
+    return {
+      // 表单绑定
+      dialogForm: {
+        segCode: "",
+        segName: "",
+        roadType: "",
+        deptId: "",
+        stakeStart: "",
+        stakeEnd: "",
+        width: "",
+        mileage: "",
+        laneCount: "",
+        curingLevel: "",
+        maxspeedLimit: "",
+        routeId: "",
+        coordinates: "",
+        mark: "",
+      },
+      // 表单验证规则
+      rules: {
+        segCode: [
+          { required: true, message: "路段编码不能为空", trigger: "blur" },
+        ],
+        segName: [
+          { required: true, message: "路段名称不能为空", trigger: "blur" },
+        ],
+        roadType: [
+          { required: true, message: "请选择道路类型", trigger: "change" },
+        ],
+        deptId: [
+          { required: true, message: "请选择管理站", trigger: "change" },
+        ],
+        stakeStart: [
+          { required: true, message: "起点不能为空", trigger: "blur" },
+          {
+            pattern: /^K\d{4}\+\d{3}$/,
+            message: "请按照K0000+000格式进行填写",
+          },
+        ],
+        stakeEnd: [
+          { required: true, message: "终点不能为空", trigger: "blur" },
+          {
+            pattern: /^K\d{4}\+\d{3}$/,
+            message: "请按照K0000+000格式进行填写",
+          },
+        ],
+        width: [{ required: true, message: "路宽不能为空", trigger: "blur" }],
+        mileage: [{ required: true, message: "里程不能为空", trigger: "blur" }],
+        laneCount: [
+          { required: true, message: "车道数量不能为空", trigger: "blur" },
+        ],
+        curingLevel: [
+          { required: true, message: "养护级别不能为空", trigger: "blur" },
+        ],
+        maxspeedLimit: [
+          { required: true, message: "最大限速不能为空", trigger: "blur" },
+        ],
+        routeId: [{ required: true, message: "请选择路线", trigger: "change" }],
+        coordinates: [
+          { required: true, message: "请在右侧地图添加路段", trigger: "blur" },
+        ],
+      },
+      // 养护单位下拉数据
+      deptOptions: [],
+      // 路线下拉
+      routeList: [],
+      // 上一点位
+      previousPoint: null,
+      // 保存所有添加的连线
+      lines: [],
+      // 保存所有添加的点
+      markers: [],
+      // 地图右键菜单显隐控制
+      menuOpen: false,
+    };
+  },
+  watch: {
+    dialogItem: {
+      handler(val) {
+        if (val.title === "修改") {
+          this.$nextTick(() => {
+            this.initMap();
+            this.drawExistingCoordinates(this.dialogForm.coordinates);
+          });
+        } else {
+          this.$nextTick(() => {
+            this.initMap();
+          });
+        }
+      },
+      immediate: true,
+      deep: true,
+    },
+  },
+  mounted() {
+    // this.initMap();
+  },
+  methods: {
+    /* 初始化地图 */
+    initMap() {
+      this.map = new T.Map("add_map");
+      this.map.centerAndZoom(new T.LngLat(116.40769, 39.89945), 12); // 设置中心点和缩放级别
+      // 添加点击事件
+      this.map.on("click", this.onMapClick);
+      // 添加右键菜单
+      this.map.on("contextmenu", this.onMapRightClick);
+    },
+    /* 地图单击事件 */
+    onMapClick(e) {
+      if (this.menuOpen) {
+        this.menuOpen = false;
+        return;
+      }
+      const latLng = e.lnglat;
+      const point = `${latLng.lng},${latLng.lat}`;
+      // 追加经纬度到textarea
+      if (this.dialogForm.coordinates == null) {
+        this.dialogForm.coordinates = "";
+      }
+      this.dialogForm.coordinates += this.dialogForm.coordinates
+        ? `;${point}`
+        : point;
+      // 绘制点和连线
+      const marker = new T.Marker(latLng);
+      this.markers.push(marker); // 保存点
+      // 连线
+      if (this.previousPoint) {
+        const line = new T.Polyline([this.previousPoint, latLng], {
+          strokeColor: "blue",
+          strokeWeight: 3,
+          strokeOpacity: 0.7,
+        });
+        this.map.addOverLay(line);
+        this.lines.push(line);
+      }
+      if (this.lines.length == 0) {
+        this.map.addOverLay(marker);
+      }
+      this.previousPoint = latLng; // 记录上一个点
+    },
+    /* 地图右键事件 */
+    onMapRightClick() {
+      this.menuOpen = true;
+      var menu = new T.ContextMenu({
+        width: 50,
+      });
+      var _MenuItem1 = new T.MenuItem("撤销", this.undoLastAction);
+      var _MenuItem2 = new T.MenuItem("重绘", this.resetMap);
+      menu.addItem(_MenuItem1);
+      menu.addItem(_MenuItem2);
+      this.map.addContextMenu(menu);
+    },
+    /* 地图右键撤销事件 */
+    undoLastAction() {
+      if (this.lines.length > 0) {
+        const lastLine = this.lines.pop();
+        // 从地图中移除最后一条线
+        this.map.removeOverLay(lastLine);
+      }
+
+      if (this.lines.length == 0) {
+        this.resetMap();
+        return;
+      }
+      this.markers.pop();
+      // 更新上一个点为撤销后的点
+      this.previousPoint =
+        this.markers.length > 0
+          ? this.markers[this.markers.length - 1].getLngLat()
+          : null;
+
+      // 更新坐标点 textarea
+      const coordArr = this.dialogForm.coordinates.split(";");
+      coordArr.pop(); // 移除最后一个坐标
+      this.dialogForm.coordinates = coordArr.join(";");
+    },
+    /* 回显地图路径 */
+    drawExistingCoordinates(e) {
+      const coordArr = e.split(";");
+      let previousLatLng = null;
+
+      coordArr.forEach((coord, index) => {
+        const [lng, lat] = coord.split(",").map(Number);
+        const latLng = new T.LngLat(lng, lat);
+
+        // 绘制点
+        const marker = new T.Marker(latLng);
+        this.markers.push(marker);
+
+        // 如果有上一个点，绘制连线
+        if (previousLatLng) {
+          const line = new T.Polyline([previousLatLng, latLng], {
+            strokeColor: "blue",
+            strokeWeight: 3,
+            strokeOpacity: 0.7,
+          });
+          this.map.addOverLay(line);
+          this.lines.push(line);
+        }
+        // 将当前点设置为 previousPoint，最后一个点会被设置为最后的 previousPoint
+        previousLatLng = latLng;
+      });
+      // 设置最后一个点为当前的 previousPoint，方便继续绘制
+      this.previousPoint = previousLatLng;
+    },
+    /* 清空坐标点/地图上的所有覆盖物 */
+    resetMap() {
+      this.dialogForm.coordinates = "";
+      this.previousPoint = null;
+      this.map.clearOverLays();
+      this.markers = [];
+      this.lines = [];
+    },
+    /* 点击确定事件 */
+    submitForm() {
+      this.$refs["dialogForm"].validate((valid) => {
+        if (valid) {
+          if (this.dialogItem.title === "修改") {
+            updateSection(this.dialogForm).then(({ data, code }) => {
+              if (code === 200) {
+                this.$emit("addCancel");
+              }
+            });
+          } else {
+            addSection(this.dialogForm).then(({ data, code }) => {
+              if (code === 200) {
+                this.$emit("addCancel");
+              }
+            });
+          }
+        }
+      });
+    },
+    /* 点击取消事件 */
+    cancel() {
+      this.$emit("addCancel");
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.add-content {
+  width: 100%;
+  height: 35rem;
+
+  > div {
+    height: 32.5rem;
+    display: flex;
+
+    .left-form {
+      width: 50%;
+      height: 100%;
+    }
+
+    .right-map {
+      width: 50%;
+      height: 100%;
+      padding: 0 1rem 1rem 1rem;
+
+      #add_map {
+        cursor: default !important;
+        width: 100%;
+        height: 100%;
+      }
+    }
+  }
+
+  .dialog-footer {
+    height: 2.5rem;
+    width: 100%;
+    display: flex;
+    justify-content: flex-end;
+  }
+}
+</style>
\ No newline at end of file
diff --git a/src/views/xj/route/route-section/index.vue b/src/views/xj/route/route-section/index.vue
new file mode 100644
index 0000000..adfb1b0
--- /dev/null
+++ b/src/views/xj/route/route-section/index.vue
@@ -0,0 +1,312 @@
+<!--
+ * @Author: SunTao 328867980@qq.com
+ * @Date: 2024-10-15 13:29:47
+ * @LastEditors: SunTao 328867980@qq.com
+ * @LastEditTime: 2024-10-16 09:33:17
+ * @FilePath: \znxjxt-ui\src\views\xj\route\route-section\index.vue
+ * @Description: 路线管理-道路段
+-->
+
+<template>
+  <div class="section-content">
+    <!-- 搜索表单 -->
+    <div class="section-form">
+      <el-form
+        :model="sectionForm"
+        ref="queryForm"
+        size="small"
+        :inline="true"
+        label-width="5rem"
+      >
+        <!-- <el-form-item label="路段编码" prop="segmentCode">
+          <el-input
+            v-model="sectionForm.segmentCode"
+            placeholder="请输入路段编码，唯一"
+            clearable
+            @keyup.enter.native="handleQuery"
+          />
+        </el-form-item> -->
+        <el-form-item label="路段名称" prop="segmentName">
+          <el-input
+            v-model="sectionForm.segmentName"
+            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>
+    </div>
+    <!-- 操作按钮 -->
+    <div class="btn-row">
+      <el-button
+        type="primary"
+        plain
+        icon="el-icon-plus"
+        size="mini"
+        @click="handleAdd"
+        >新增
+      </el-button>
+      <el-button
+        type="danger"
+        plain
+        icon="el-icon-delete"
+        size="mini"
+        :disabled="multiple"
+        @click="deleteTable(null)"
+        >删除
+      </el-button>
+      <el-button
+        type="warning"
+        plain
+        icon="el-icon-download"
+        size="mini"
+        @click="handleExport"
+        >导出
+      </el-button>
+    </div>
+    <!-- 列表 -->
+    <el-table
+      ref="roadTable"
+      v-loading="loading"
+      :data="sectionList"
+      @selection-change="handleSelectionChange"
+      style="width: 100%"
+    >
+      <el-table-column type="selection" width="55" align="center" />
+      <el-table-column label="路段编码" align="center" prop="segmentCode" />
+      <el-table-column label="路段名称" align="center" prop="segmentName" />
+      <el-table-column label="道路类型" align="center" prop="roadType" />
+      <el-table-column label="里程" align="center" prop="mileage" />
+      <el-table-column label="路宽" align="center" prop="width" />
+      <el-table-column label="起点桩" align="center" prop="stakeStart" />
+      <el-table-column label="终止桩" align="center" prop="stakeEnd" />
+      <el-table-column label="车道数量" align="center" prop="laneCount" />
+      <el-table-column label="养护级别" align="center" prop="curingLevel" />
+      <el-table-column label="最大限速" align="center" prop="maxSpeedLimit" />
+      <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="editTable(scope.row)"
+            >修改
+          </el-button>
+          <el-button
+            size="mini"
+            type="text"
+            icon="el-icon-delete"
+            @click="deleteTable(scope.row)"
+            >删除
+          </el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+    <!-- 分页组件 -->
+    <div class="pagination-part">
+      <el-pagination
+        background
+        :current-page.sync="pagination.page"
+        @current-change="handleCurrentChange"
+        :page-sizes="[10, 20, 30, 40]"
+        :page-size.sync="pagination.size"
+        @size-change="handleSizeChange"
+        layout="total, sizes, prev, pager, next, jumper"
+        :total="tableTotal"
+      >
+      </el-pagination>
+    </div>
+    <!-- 新增/修改弹窗 -->
+    <el-dialog
+      :title="addTitle"
+      :visible.sync="addVisible"
+      width="80%"
+      append-to-body
+      :close-on-click-modal="false"
+      destroy-on-close
+      @close="addCancel"
+    >
+      <section-add
+        :dialogItem="dialogItem"
+        @addCancel="addCancel"
+      ></section-add>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import { getSectionList, deleteSection } from "@/api/xj/section";
+import SectionAdd from "./components/section-add.vue";
+
+export default {
+  components: { SectionAdd },
+  name: "RouteSection",
+  data() {
+    return {
+      // 搜索表单
+      sectionForm: {
+        // segmentCode: "",
+        segmentName: "",
+      },
+      // 查询表单
+      searchForm: {},
+      // 列表加载状态
+      loading: false,
+      // 非多个禁用
+      multiple: true,
+      // 列表数据
+      sectionList: [],
+      // 列表已选数组
+      checkIds: [],
+      // 分页-列表总数
+      tableTotal: 0,
+      // 分页-页数页码
+      pagination: {
+        page: 1,
+        size: 10,
+      },
+      // 弹窗标题
+      addTitle: "",
+      // 弹窗显隐控制
+      addVisible: false,
+      // 传弹窗数据
+      dialogItem: {},
+    };
+  },
+  mounted() {},
+  created() {
+    this.getTableList();
+  },
+  methods: {
+    /* 点击搜索事件 */
+    handleQuery() {
+      this.searchForm = JSON.parse(JSON.stringify(this.sectionForm));
+      this.getTableList();
+    },
+    /* 点击重置事件 */
+    resetQuery() {
+      this.sectionForm = {
+        // segmentCode: "",
+        segmentName: "",
+      };
+      this.searchForm = {};
+      this.getTableList();
+    },
+    /* 获取列表数据 */
+    getTableList() {
+      const params = {
+        ...this.searchForm,
+        ...this.pagination,
+      };
+      getSectionList(params).then(({ code, data }) => {
+        if (code === 200) {
+          this.sectionList = data.rows;
+        }
+      });
+    },
+    /* 点击新增 */
+    handleAdd() {
+      this.addTitle = "新增路段";
+      this.dialogItem = {
+        title: "新增",
+      };
+      this.addVisible = true;
+    },
+    /* 点击导出 */
+    handleExport() {},
+    /* 列表选择改变事件 */
+    handleSelectionChange(selection) {
+      this.checkIds = selection.map((item) => item.id);
+      this.single = selection.length !== 1;
+      this.multiple = !selection.length;
+    },
+    /* 列表修改事件 */
+    editTable() {
+      this.addTitle = "修改路段";
+      this.dialogItem = {
+        title: "修改",
+      };
+      this.addVisible = true;
+    },
+    /* 列表删除/批量删除事件 */
+    deleteTable(row) {
+      const checkIds = row ? [row.id] : this.checkIds;
+      if (!checkIds.length) {
+        this.$modal.msgWarning("请选择要删除的记录");
+        return;
+      }
+      this.$modal
+        .confirm(`是否确认删除选中的${checkIds.length}条记录？`)
+        .then(() => {
+          return deleteSection(checkIds);
+        })
+        .then(() => {
+          this.getTableList();
+          this.$refs.roadTable.clearSelection();
+          this.$modal.msgSuccess("删除成功");
+        })
+        .catch(() => {});
+    },
+    /* 切换分页 */
+    handleCurrentChange(arg) {
+      this.pagination.page = arg;
+      this.getTableList();
+    },
+    /* 切换每条/页 */
+    handleSizeChange(arg) {
+      this.pagination.size = arg;
+      this.getTableList();
+    },
+    /* 关闭弹窗事件 */
+    addCancel() {
+      this.addTitle = "";
+      this.dialogItem = {};
+      this.addVisible = false;
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.section-content {
+  width: 100%;
+  height: calc(100vh - 5.3rem);
+  padding: 1rem;
+}
+
+.section-form {
+  width: 100%;
+  height: 5%;
+}
+
+.btn-row {
+  height: 6%;
+  display: flex;
+  align-items: center;
+  padding: 0 1rem;
+}
+
+/* 分页样式 */
+.pagination-part {
+  width: 100%;
+  display: flex;
+  padding-top: 1rem;
+  justify-content: flex-end;
+}
+</style>