xjsaas-ui/src/views/xj/hisense/route-information/index.vue

<!--
 * @Author: SunTao 328867980@qq.com
 * @Date: 2025-02-12 14:40:41
 * @LastEditors: SunTao 328867980@qq.com
 * @LastEditTime: 2025-02-18 15:28:52
 * @FilePath: \znxjxt-ui\src\views\xj\hisense\route-information\index.vue
 * @Description: 海信-道路信息
-->
<template>
  <div class="content">
    <el-form :model="interForm" ref="interForm" size="small" :inline="true" label-width="7rem">
      <el-form-item label="收费站名称" prop="name">
        <el-select v-model="interForm.name" placeholder="请输入收费站名称" filterable remote clearable reserve-keyword
          :filter-method="handleRemoteMethod" @change="handleRemoteMethod">
          <el-option v-for="(item, index) in segmentList" :key="`enterprise-name-${index}`" :label="item.label"
            :value="item.label"></el-option> </el-select>
      </el-form-item>
      <!-- <el-form-item label="病害类型" prop="defectType">
        <el-select v-model="interForm.defectType" placeholder="请选择病害" clearable>
          <el-option v-for="item in tableDefect" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>
      </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>
    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd">新增
        </el-button>
      </el-col>
      <!-- <el-col :span="1.5">
        <el-button type="danger" plain icon="el-icon-delete" size="mini" :disabled="multiple"
          @click="handleDelete(null)">删除
        </el-button>
      </el-col> -->
    </el-row>
    <!-- 表格 -->
    <el-table ref="setupTable" :data="interList" v-loading="loading" @selection-change="handleSelectionChange"
      style="width: 100%">
      <!-- <el-table-column type="selection" width="55" align="center" /> -->
      <el-table-column type="index" label="序号"> </el-table-column>
      <el-table-column label="道路线名称" align="center" prop="roadName" />
      <el-table-column label="道路线Id(海信)" align="center" prop="roadId">
      </el-table-column>
      <el-table-column label="道路线code" align="center" prop="roadCode" />
      <el-table-column label="起始桩号" align="center" prop="roadStartStake" />
      <el-table-column label="终止桩号" align="center" prop="roadEndStake" />
      <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="handleUpdate(scope.row)">编辑
          </el-button>
          <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)">删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页组件 -->
    <div class="pagination-part">
      <el-pagination background :current-page.sync="pagination.pageNum" @current-change="handleCurrentChange"
        :page-sizes="[10, 20, 30, 40]" :page-size.sync="pagination.pageSize" @size-change="handleSizeChange"
        layout="total, sizes, prev, pager, next, jumper" :total="tableTotal">
      </el-pagination>
    </div>

    <!-- 新增弹窗 -->
    <el-dialog :title="title" :visible.sync="addVisible" width="50rem" append-to-body :close-on-click-modal="false"
      destroy-on-close>
      <add-route v-if="addVisible" :segmentList="segmentList" :dialogItem="dialogItem" @cancel="addCancel"></add-route>
    </el-dialog>
  </div>
</template>

<script>
import { getList, getDropDown, delData } from "@/api/xj/hisense/route"
import AddRoute from "./components/add-route.vue"

export default {
  name: "RouteInformation",
  components: {
    AddRoute,
  },
  data() {
    return {
      // 搜索绑定菜单
      interForm: {
        name: "",
      },
      searchForm: {},
      // 路段下拉数据
      segmentList: [],

      // 列表数据
      interList: [],
      // 列表加载状态
      loading: false,
      // 列表勾选框数据
      checkIds: [],
      // 非多个禁用
      multiple: true,
      // 分页-列表总数
      tableTotal: 0,
      // 分页-页数页码
      pagination: {
        pageNum: 1,
        pageSize: 10,
      },

      // 弹窗标题
      title: "新增",
      // 新增弹窗显隐控制
      addVisible: false,
      // 传弹窗数据
      dialogItem: {},
    }
  },
  mounted() {
    this.getTableData()
    this.getDownList()
  },
  methods: {
    /**
     * @description: 模糊搜索
     * @param {*} str 模糊搜索字段
     * @return {*}
     */
    handleRemoteMethod(str) {
      this.interForm.name = str;
      this.getDownList();
    },
    /**
     * @description: 获取下拉数据
     * @param {*}
     * @return {*}
     */
    getDownList() {
      getDropDown({ name: this.interForm.name }).then(({ code, data }) => {
        if (code === 200) {
          this.segmentList = data
        }
      })
    },
    /**
     * @description: 点击搜索
     * @param {*}
     * @return {*}
     */
    handleQuery() {
      this.searchForm = JSON.parse(JSON.stringify(this.interForm));
      this.pagination.pageNum = 1;
      this.getTableData();
    },

    /**
     * @description: 点击重置
     * @param {*}
     * @return {*}
     */
    resetQuery() {
      this.interForm = {
        name: "",
        defectType: "",
      }
      this.searchForm = {}
      this.getTableData();
    },

    /**
     * @description: 点击新增事件
     * @param {*}
     * @return {*}
     */
    handleAdd() {
      this.addVisible = true;
      this.dialogItem = {};
    },

    /**
     * @description: 获取列表数据
     * @param {*}
     * @return {*}
     */
    getTableData() {
      const dataItem = {
        ...this.searchForm,
        ...this.pagination,
      }
      getList(dataItem).then(({ rows, code, total }) => {
        if (code === 200) {
          this.interList = rows;
          this.tableTotal = total;
        }
      })
    },
    /**
 * @description: 列表选择改变事件
 * @param {*}
 * @return {*}
 */
    handleSelectionChange(selection) {
      this.checkIds = selection.map((item) => item.id);
      this.multiple = !selection.length;
    },

    /**
     * @description: 点击编辑事件
     * @param {*}
     * @return {*}
     */
    handleUpdate(value) {
      this.addVisible = true;
      this.dialogItem = value;
    },

    /**
     * @description: 点击删除事件
     * @param {*}
     * @return {*}
     */
    handleDelete(row) {
      // const checkIds = row ? row.id : this.checkIds;
      // if (!checkIds.length) {
      //   this.$modal.msgWarning("请选择要删除的记录");
      //   return;
      // }
      this.$modal
        .confirm(`是否确认删除选中的1条记录？`)
        .then(() => {
          return delData(row.id);
        })
        .then(() => {
          this.getTableData();
          // this.$refs.defectTable.clearSelection();
          this.$modal.msgSuccess("删除成功");
        })
        .catch(() => { });
    },

    /**
     * @description: 切换分页
     * @param {*} arg
     * @return {*}
     */
    handleCurrentChange(arg) {
      this.pagination.pageNum = arg;
      this.getTableData();
    },

    /**
     * @description: 切换每条/页
     * @param {*} arg
     * @return {*}
     */
    handleSizeChange(arg) {
      this.pagination.pageSize = arg;
      this.getTableData();
    },

    /**
   * @description: 关闭弹窗事件
   * @param {*}
   * @return {*}
   */
    addCancel() {
      this.addVisible = false;
      this.dialogItem = {};
      this.getTableData();
    }
  },
}
</script>

<style lang="scss" scoped>
.content {
  width: 100%;
  height: calc(100vh - 5.4rem);
  padding: 1rem;
  overflow-y: auto;
}

/* 分页样式 */
.pagination-part {
  width: 100%;
  display: flex;
  padding-top: 1rem;
  justify-content: flex-end;
}
</style>