shuili-vue/src/views/sluice/runManage/supervisionInspetion/methodsManage/index.vue

<!-- 监督检查办法管理-水闸 -->
<script>
import {
  getSuperviseWayList,
  postSuperviseWayData,
  copySuperviseWayData,
} from "@/api/sluice";

import TopBackTitle from "@/components/TopBackTitle/index.vue";
import { calcTableHeight } from "@/mixins/calcTableHeight";

export default {
  name: "InspectionItems",
  components: { TopBackTitle },
  mixins: [calcTableHeight],
  data() {
    return {
      tableData: [], // 检查列表
      pageData: {
        pageNum: 1, // 当前页
        pageSize: 10, // 请求数量
        pageSizes: [10, 20, 50, 100],
        total: 0, // 总数量
      },
    };
  },
  watch: {},
  methods: {
    // 跳转新增办法页面
    handleAddMethod() {
      this.$router.push("methodManageDetails");
    },
    // 跳转编辑办法页面
    handleEditMethod(row) {
      this.$router.push({
        path: "methodManageDetails",
        query: {
          id: row.id,
          mode: "edit",
        },
      });
    },
    // 跳转预览办法页面
    handlePreviewMethod(row) {
      this.$router.push({
        path: "methodManageDetails",
        query: {
          id: row.id,
          mode: "preview",
        },
      });
    },
    // 导出文件
    handleExportMethod(row) {
      if (row.superviseCheckWay && /^http/.test(row.superviseCheckWay)) {
        fetch(row.superviseCheckWay)
          .then((response) => response.blob())
          .then((blob) => {
            const url = URL.createObjectURL(blob);
            const a = document.createElement("a");
            a.href = url;
            a.setAttribute("download", row.name);
            document.body.appendChild(a);
            a.click();
            document.body.removeChild(a);
            URL.revokeObjectURL(url);
          });
      } else {
        this.$message("文件路径格式不正确");
      }
    },
    // 复制办法
    handleCopyMethod(row) {
      copySuperviseWayData(row.id)
        .then((res) => {
          this.$message.success("复制成功");
          this.getTableData();
        })
        .catch(() => {
          this.$message.error("复制失败");
        });
    },
    handleCurrentPageChange(page) {
      this.pageData.pageNum = page;
      this.getTableData();
    },
    handlePageSizeChange(pageSize) {
      this.pageData.pageSize = pageSize;
      this.getTableData();
    },
    // 获取列表数据
    getTableData() {
      getSuperviseWayList({
        data: {
          timeView: {
            timeField: "create_time",
          },
        },
        params: {
          orderBy: "create_time",
          sort: "desc",
        },
        pageSize: this.pageData.pageSize,
        pageNum: this.pageData.pageNum,
      }).then((res) => {
        if (res) {
          this.tableData = res.records;
          this.pageData.total = res.total;
        }
      });
    },
    // 跳转办法配置
    handleToItemsList(row) {
      this.$router.push({
        path: "methodsItemsList",
        query: {
          id: row.id,
        },
      });
    },
    handleChangeStatus(row, status) {
      postSuperviseWayData({
        id: row.id,
        status,
      })
        .then((res) => {
          this.$message.success("修改成功");
          this.getTableData();
        })
        .catch((err) => {
          this.$message.error("修改失败");
        });
    },
  },
  created() {},
  mounted() {
    // 获取列表数据
    this.getTableData();
  },
};
</script>

<template>
  <div class="slider-right">
    <TopBackTitle :showBackBtn="false"></TopBackTitle>
    <div class="table-box slider-right-body" ref="tableBoxRef">
      <div class="pb-16" ref="topBoxRef">
        <el-button
          class="search-btn"
          style="margin-right: 16px"
          type="success"
          @click="handleAddMethod()"
          v-hasPermi="['sz:run:sup:meth:add']"
          >添加</el-button
        >
      </div>
      <el-table :height="tableHeight" :data="tableData" border>
        <el-table-column type="index" align="center" label="序号" width="60" />
        <el-table-column prop="name" align="center" label="名称" />
        <el-table-column
          prop="createTime"
          align="center"
          sortable
          label="发布时间"
        >
        </el-table-column>
        <el-table-column
          prop="updateTime"
          align="center"
          sortable
          label="更新时间"
        />
        <el-table-column prop="status" align="center" label="当前状态">
          <template #default="{ row }">
            <el-popconfirm
              title="确定停用吗"
              v-if="row.status == '0'"
              @confirm="handleChangeStatus(row, '1')"
            >
              <span slot="reference" class="status-start">启用状态</span>
            </el-popconfirm>
            <el-popconfirm
              title="确定启用吗"
              v-if="row.status == '1'"
              @confirm="handleChangeStatus(row, '0')"
            >
              <span slot="reference" class="status-stop">停用状态</span>
            </el-popconfirm>
          </template>
        </el-table-column>
        <el-table-column prop="address" align="center" label="操作">
          <template slot-scope="scope">
            <el-button
              type="text"
              size="small"
              v-hasPermi="['sz:run:sup:meth:edit']"
              @click="handleEditMethod(scope.row)"
              >编辑</el-button
            >
            <el-button
              type="text"
              size="small"
              v-hasPermi="['sz:run:sup:meth:view']"
              @click="handlePreviewMethod(scope.row)"
              >预览</el-button
            >
            <el-button
              type="text"
              size="small"
              v-hasPermi="['sz:run:sup:meth:down']"
              @click="handleExportMethod(scope.row)"
              >导出</el-button
            >
            <el-button
              type="text"
              size="small"
              @click="handleCopyMethod(scope.row)"
              v-hasPermi="['sz:run:sup:meth:copy']"
              >复制</el-button
            >
            <el-button
              type="text"
              size="small"
              v-hasPermi="['sz:run:sup:meth:config']"
              @click="handleToItemsList(scope.row)"
              >配置数据项</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        background
        class="pagination"
        style="margin-top: 16px; margin-right: 16px; float: right"
        :current-page="pageData.pageNum"
        :page-sizes="pageData.pageSizes"
        layout="total, prev, pager, next, sizes, jumper"
        :total="pageData.total"
        @size-change="(e) => handlePageSizeChange(e)"
        @current-change="(e) => handleCurrentPageChange(e)"
      >
      </el-pagination>
    </div>
  </div>
</template>

<style scoped lang="less">
.top-title {
  height: 40px;
  background-color: white;
  display: flex;
  padding-left: 16px;
  align-items: center;
  font-weight: 600;
}

.table-box {
  width: 100%;
  padding: 16px;
  background-color: white;

  .top-search {
    margin-bottom: 8px;

    .search-input {
      width: 202px;
      margin-right: 10px;
    }
  }

  .table {
    height: calc(680px - 34px);
  }
}

.search-btn {
  margin-left: 10px;
  background-color: #37b29e;
  border: none;

  &:hover {
    background-color: #5ac6b9;
  }

  &:active {
    background-color: #2b8070;
  }
}

.status-start {
  color: #36b29e;
  background: #ebf7f5;
  padding: 2px 4px;
  border-radius: 2px;
  cursor: pointer;
}
.status-stop {
  color: #f13939;
  background: #feebeb;
  padding: 2px 4px;
  border-radius: 2px;
  cursor: pointer;
}
</style>