frontend/src/views/devicePhotoSchedule/index.vue

<template>
  <div class="deviceInformation">
    <div class="deviceBox">
      <div class="deviceBtnGroup">
        <el-button type="primary" icon="el-icon-plus" @click.native.stop="handleAdddevice()" >新增</el-button>
      </div>
      <div class="deviceTable">
        <el-table ref="multipleTable" :data="deviceTableData" tooltip-effect="dark" style="width: 100%" 
        height="calc(100% - 40px)" @selection-change="handleSelectionChange" @row-click="handleRowClick">
          <!-- <el-table-column type="index" width="55"> </el-table-column>
          <el-table-column type="selection" width="55"> </el-table-column> -->
          <el-table-column label="单位" show-overflow-tooltip>
            <template slot-scope="scope">{{ scope.row.name }}</template>
          </el-table-column>
          <el-table-column label="时间表类型" show-overflow-tooltip>
            <template>时间表类型</template>
          </el-table-column>
          <el-table-column prop="startTime" label="开始时间" show-overflow-tooltip ></el-table-column>
          <el-table-column prop="endTime" label="结束时间" show-overflow-tooltip ></el-table-column>
          <el-table-column prop="span" label="间隔（分）" show-overflow-tooltip></el-table-column>
          <el-table-column prop="remark" label="备注" show-overflow-tooltip></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>
              <el-button  type="text"  @click.native.stop="handleSet(scope.row)">设置</el-button>
            </template>
          </el-table-column>
        </el-table>
        <div class="pageNation">
          <el-pagination @current-change="handleCurrentChange" :current-page="page" :page-size="pageSize" 
          layout=" prev, pager, next, jumper,total" :total="total" background >
          </el-pagination>
        </div>
      </div>
    </div>
    <!-- 新增时间表 -->
    <adddeviceDialog  :title="title" ref="adddeviceDialogref" ></adddeviceDialog>
    <!-- 设置时间表 -->
    <setdevice ref="setdeviceDialogref"  ></setdevice>
  </div>
</template>
<script>
import { getScheduleRulelListJoggle,deleteScheduleRulel } from "@/utils/api/index";
import adddeviceDialog from "./components/adddeviceDialog.vue";
import setdevice from './components/setdevice.vue';

export default {
  components: {
    adddeviceDialog,
    setdevice
  },
  data() {
    return {
      title: "", //弹窗标题
      deviceTableData: [],
      //multipleSelection: [], //获取当前选中
      page: 1, // 当前页数
      pageSize: 10, // 每页数量
      total: 0, //总条数
    };
  },
  created() {
    this.deviceList();
  },
  methods: {
    //获取线路列表数据
    deviceList() {
      getScheduleRulelListJoggle({
        pageindex: this.page,
        pagesize: this.pageSize
      })
        .then((res) => {
          this.deviceTableData = res.data.list;
          this.total = res.data.total
        })
        .catch((err) => {});
    },
    //点击行选中
    handleRowClick(row, column, event) {
      this.$refs.multipleTable.toggleRowSelection(row);
    },
    //获取选中的行
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },

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

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

    //设置
    handleSet(data){
      this.$refs.setdeviceDialogref.display()
      this.$refs.setdeviceDialogref.getdataform(data)
    },

    //删除数据
    handleDelete(data) {
      let deleteArr=[]
      deleteArr.push({
        id: data.id,
      });
      this.$confirm("确定要删除记录吗,同时删除关联关系?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          deleteScheduleRulel({ list: deleteArr }).then((res) => {
            this.deviceList(); //刷新
          });
          this.$message({ type: "success", message: "删除成功!" });
        })
        .catch(() => {
          this.$message({ type: "info",  message: "已取消删除" });
        });
    },
    //点击分页
    handleCurrentChange(val) {
      this.page = val;
      this.deviceList();
    },
  }
};
</script>
<style lang="less">
.deviceInformation {
  width: 100%;
  width: calc(100% - 16px);
  height: calc(100% - 32px);
  padding: 16px 8px;
  background: @color-white;

  .deviceBox {
    border: 1px solid #dddddd;
    height: calc(100% - 32px);
    padding: 16px;
    border-radius: 4px;
  }
  .deviceBtnGroup {
    display: flex;
    justify-content: flex-end;
  }

  .deviceTable {
    padding: 16px 8px 0 8px;
    height: calc(100% - 80px);
    //background: #fcc;
  }
}
</style>