xy-frontend/src/views/towerInformation/index.vue

<template>
  <div class="towerinfobox">
    <div class="deviceBox">
      <div class="deviceBtnGroup">
        <h4>杆塔信息管理</h4>
        <el-button
          type="primary"
          icon="el-icon-plus"
          @click.native.stop="handleAdddevice()"
          >新增</el-button
        >
      </div>
      <div class="searchBox">
        <el-form :inline="true" :model="formdata" class="demo-form-inline">
          <!-- <el-form-item label="电压等级" class="dybox">
            <el-select v-model="formdata.dyId" @change="getSearchxl">
              <el-option
                v-for="item in dyOptions"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="线路名称" class="xlbox">
            <el-select
              v-model="formdata.lineId"
              @change="getSearchgt"
              filterable
            >
              <el-option
                v-for="item in xlOptions"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="杆塔名称">
            <el-select v-model="formdata.towerId" filterable>
              <el-option
                v-for="item in gtOptions"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              ></el-option>
            </el-select>
          </el-form-item> -->
          <el-form-item>
            <el-input
              v-model="formdata.search"
              placeholder="请输入线路/杆塔/地址"
              clearable
            ></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onSubmit">查询</el-button>
            <el-button type="primary" @click="onReset">重置</el-button>
          </el-form-item>
        </el-form>
      </div>
      <div class="deviceTable">
        <el-table
          ref="multipleTable"
          :data="tableDate"
          tooltip-effect="dark"
          stripe
          style="width: 100%"
          height="calc(100% - 40px)"
          @selection-change="handleSelectionChange"
          @row-click="handleRowClick"
          v-loading="loading"
          highlight-current-row
          :row-key="getRowKeys"
        >
          <!-- <el-table-column type="index" width="55"> </el-table-column>
          <el-table-column type="selection" width="55"> </el-table-column> -->
          <template slot="empty">
            <el-empty :image-size="160" description="暂无数据"></el-empty>
          </template>
          <!-- <el-table-column
            prop="dyLevelname"
            label="电压等级"
            show-overflow-tooltip
          >
            <template slot-scope="scope">
              {{
                scope.row.dyLevelname
              }}
            </template>
          </el-table-column> -->
          <el-table-column
            prop="lineName"
            label="线路名称"
            show-overflow-tooltip
          >
            <template slot-scope="scope">
              <el-link @click.native.stop="handleResive(scope.row)">{{
                scope.row.lineName
              }}</el-link>
            </template>
          </el-table-column>
          <!-- <el-table-column
            prop="lineId"
            label="线路编号"
            show-overflow-tooltip
          ></el-table-column> -->
          <el-table-column prop="name" label="杆塔名称" show-overflow-tooltip>
            <template slot-scope="scope">
              <el-link @click.native.stop="handleResive(scope.row)">{{
                scope.row.name
              }}</el-link>
            </template></el-table-column
          >
          <el-table-column
            prop="termcount"
            label="已绑定数量"
            show-overflow-tooltip
          ></el-table-column>
          <el-table-column
            prop="address"
            label="杆塔地址"
            show-overflow-tooltip
          ></el-table-column>

          <el-table-column prop="order" label="排序号" width="100">
            <template slot-scope="scope">
              {{ scope.row.order == null ? 0 : scope.row.order }}
            </template>
          </el-table-column>

          <el-table-column fixed="right" label="操作" width="200">
            <template slot-scope="scope">
              <el-button
                @click.native.stop="handleResive(scope.row)"
                type="text"
                >修改</el-button
              >
              <el-button
                type="text"
                class="deleteText"
                @click.native.stop="handleDelete(scope.row)"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
        <div class="pageNation">
          <el-pagination
            @current-change="handleCurrentChange"
            @size-change="handleSizeChange"
            :current-page="page"
            :page-size="pageSize"
            layout="sizes, prev, pager, next, jumper,total"
            :total="total"
            background
          >
          </el-pagination>
        </div>
      </div>
    </div>
    <!-- 新增时间表 -->
    <addDialog :title="title" ref="addDialogref"></addDialog>
  </div>
</template>
<script>
import { getTowerListApi, delTowerApi, getSearchInfo } from "@/utils/api/index";
import addDialog from "./components/addDialog.vue";

export default {
  name: "towerInformation",
  components: {
    addDialog,
  },
  data() {
    return {
      title: "", //弹窗标题
      tableDate: [],
      //multipleSelection: [], //获取当前选中
      page: 1, // 当前页数
      pageSize: 20, // 每页数量
      total: 0, //总条数
      loading: true,
      dyOptions: [{ id: -1, name: "全部" }], //电压数据
      xlOptions: [{ id: -1, name: "全部" }], //线路数据
      gtOptions: [{ id: -1, name: "全部" }], //杆塔数据

      formdata: {
        dyId: -1,
        lineId: -1,
        towerId: -1,
        search: "",
      },
    };
  },
  created() {
    var that = this;
    document.onkeydown = function (e) {
      var key = window.event.keyCode;
      if (key === 13) {
        that.onSubmit(); // 触发事件
      }
    };
    console.log(this.$route.query);
    this.formdata.search = this.$route.query.name;
    console.log(this.formdata.search);
  },
  mounted() {
    this.getSearchdy();
    this.deviceList();
  },

  methods: {
    getRowKeys(row) {
      return row.id;
    },
    //点击线路跳转
    handleLineLink(val) {
      console.log(val);
      this.$router.push({
        path: "/lineInformation",
        query: { lineName: val.lineName, name: val.name },
      });
    },
    //点击线路跳转
    handletowerLink(val) {
      console.log(val);
      this.$router.push({
        path: "/photographicDevice",
        query: { lineName: val.lineName, name: val.name },
      });
    },
    //获取电压信息
    getSearchdy() {
      getSearchInfo({ type: 1 })
        .then((res) => {
          this.dyOptions = [{ id: -1, name: "全部" }];
          this.dyOptions = this.dyOptions.concat(res.data.list);
          this.formdata.dyId = this.dyOptions[0].id;
          this.getSearchxl();
        })
        .catch((err) => {});
    },
    //获取线路数据
    getSearchxl() {
      getSearchInfo({ type: 2, id: this.formdata.dyId })
        .then((res) => {
          this.xlOptions = [{ id: -1, name: "全部" }];
          this.xlOptions = this.xlOptions.concat(res.data.list);
          this.formdata.lineId = this.xlOptions[0].id;
          this.getSearchgt();
        })
        .catch((err) => {});
    },
    //获取杆塔数据
    getSearchgt() {
      getSearchInfo({ type: 3, id: this.formdata.lineId })
        .then((res) => {
          this.gtOptions = [{ id: -1, name: "全部" }];
          this.gtOptions = this.gtOptions.concat(res.data.list);
          this.formdata.towerId = this.gtOptions[0].id;
        })
        .catch((err) => {});
    },
    //查询
    onSubmit() {
      this.page = 1;
      this.deviceList();
    },
    //重置
    onReset() {
      this.formdata = {};
      this.page = 1;
      this.pageSize = 20;
      this.deviceList();
    },
    //获取数据列表
    deviceList() {
      this.loading = true;
      this.$set(this.formdata, "pageindex", this.page);
      this.$set(this.formdata, "pagesize", this.pageSize);
      getTowerListApi(this.formdata)
        .then((res) => {
          this.tableDate = res.data.list;
          this.total = res.data.total;
          this.loading = false;
        })
        .catch((err) => {});
    },
    //点击行选中
    handleRowClick(row, column, event) {
      this.$refs.multipleTable.toggleRowSelection(row);
    },
    //获取选中的行
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },

    // 新建
    handleAdddevice() {
      this.title = "新增";
      this.$refs.addDialogref.display();
      this.$refs.addDialogref.getdataform(null);
    },

    //修改
    handleResive(data) {
      this.title = "修改";
      this.$refs.addDialogref.display();
      this.$refs.addDialogref.getdataform(data);
    },

    //删除数据
    handleDelete(data) {
      let deleteArr = [];
      deleteArr.push(data.id);
      console.log("aaaaaaaaaaaaaaaaaaaaaaaaaaa", deleteArr);
      this.$confirm("确定要删除记录吗,同时删除关联关系?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          delTowerApi({ list: deleteArr }).then((res) => {
            if (res.code == 200) {
              this.$message({
                duration: 1500,
                showClose: true,
                type: "success",
                message: "删除成功!",
              });
              this.deviceList(); //刷新
            } else {
              this.$message({
                duration: 1500,
                showClose: true,
                type: "error",
                message: "删除失败!",
              });
            }
          });
        })
        .catch(() => {
          this.$message({
            duration: 1500,
            showClose: true,
            type: "info",
            message: "已取消删除",
          });
        });
    },
    //点击分页
    handleCurrentChange(val) {
      this.page = val;
      this.deviceList();
    },
    //每页条数
    handleSizeChange(val) {
      this.pageSize = val;
      this.deviceList();
    },
  },
};
</script>
<style lang="less">
.towerinfobox {
  width: calc(100% - 24px);
  height: calc(100% - 24px);
  padding: 12px 12px;
  background: #fff;

  .deviceBox {
    border: 1px solid #dddddd;
    height: calc(100% - 24px);
    padding: 12px;
    border-radius: 4px;
    .searchBox {
      margin-top: 8px;
      .ml10 {
        margin-left: 10px;
      }
      .el-form {
        .dybox {
          .el-form-item__content {
            width: 120px;
          }
        }
        .xlbox {
          .el-form-item__content {
            width: 160px;
          }
        }
      }
    }
  }
  .deviceBtnGroup {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .deviceTable {
    height: calc(100% - 94px);
    //background: #fcc;
  }
}
</style>