xjsaas-ui/src/views/xj/route/route-scope/index.vue

<!--
 * @Author: SunTao 328867980@qq.com
 * @Date: 2024-10-16 09:42:28
 * @LastEditors: SunTao 328867980@qq.com
 * @LastEditTime: 2024-10-16 10:40:11
 * @FilePath: \znxjxt-ui\src\views\xj\route\route-scope\index.vue
 * @Description: 路线管理-作业范围
-->

<template>
  <div class="section-content">
    <!-- 搜索表单 -->
    <div class="section-form">
      <el-form
        :model="sectionForm"
        ref="queryForm"
        size="small"
        :inline="true"
        label-width="6rem"
      >
        <el-form-item label="作业范围名称" prop="name">
          <el-input
            v-model="sectionForm.name"
            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>
    </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
        width="300"
        label="作业范围名称"
        align="center"
        prop="segmentCode"
      />
      <el-table-column label="绑定车辆" align="center" prop="name" />
      <el-table-column
        width="200"
        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="60%"
      append-to-body
      :close-on-click-modal="false"
      destroy-on-close
      @close="addCancel"
    >
      <scope-add
        v-if="addVisible"
        :bindCarList="bindCarList"
        :dialogItem="dialogItem"
        @addCancel="addCancel"
      ></scope-add>
    </el-dialog>
  </div>
</template>
  
  <script>
import { getScopeList, deleteScope, getCarList } from "@/api/xj/scope";
import ScopeAdd from "./components/scope-add.vue";

export default {
  components: { ScopeAdd },
  name: "RouteScope",
  data() {
    return {
      // 搜索表单
      sectionForm: {
        // segmentCode: "",
        name: "",
      },
      // 查询表单
      searchForm: {},
      // 列表加载状态
      loading: false,
      // 非多个禁用
      multiple: true,
      // 列表数据
      sectionList: [],
      // 列表已选数组
      checkIds: [],
      // 分页-列表总数
      tableTotal: 0,
      // 分页-页数页码
      pagination: {
        page: 1,
        size: 10,
      },
      // 绑定车辆下拉
      bindCarList: [],
      // 弹窗标题
      addTitle: "",
      // 弹窗显隐控制
      addVisible: false,
      // 传弹窗数据
      dialogItem: {},
    };
  },
  mounted() {},
  created() {
    this.getTableList();
    this.getBindCar();
  },
  methods: {
    /* 获取绑定车辆下拉 */
    getBindCar() {
      getCarList().then(({ data, code }) => {
        if (code === 200) {
          this.bindCarList = data;
        }
      });
    },
    /* 点击搜索事件 */
    handleQuery() {
      this.searchForm = JSON.parse(JSON.stringify(this.sectionForm));
      this.getTableList();
    },
    /* 点击重置事件 */
    resetQuery() {
      this.sectionForm = {
        // segmentCode: "",
        name: "",
      };
      this.searchForm = {};
      this.getTableList();
    },
    /* 获取列表数据 */
    getTableList() {
      const params = {
        ...this.searchForm,
        ...this.pagination,
      };
      getScopeList(params).then(({ code, rows,total }) => {
        if (code === 200) {
          this.sectionList = rows;
          this.tableTotal = total;
        }
      });
    },
    /* 点击新增 */
    handleAdd() {
      this.addTitle = "新增作业范围";
      this.dialogItem = {
        title: "新增",
      };
      this.addVisible = true;
    },
    /* 列表选择改变事件 */
    handleSelectionChange(selection) {
      this.checkIds = selection.map((item) => item.id);
      this.single = selection.length !== 1;
      this.multiple = !selection.length;
    },
    /* 列表修改事件 */
    editTable(item) {
      this.addTitle = "修改作业范围";
      this.dialogItem = {
        title: "修改",
        item,
      };
      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 deleteScope(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>