ops-fronted/src/views/activityList/index.vue

<template>
  <div class="activityBox">
    <div class="uploadForm">
      <div class="noteBox">
        <h3 class="lableBox">活动名称：</h3>
        <el-input
          class="noteClass"
          v-model="activityForm.title"
          placeholder="输入活动名称"
          @focus="inputfocus"
        ></el-input>
        <p class="redErr" v-if="titleFlag">*请输入活动名称</p>
      </div>
      <div class="upgradeBox">
        <h3 class="lableBox">装置列表：</h3>
        <el-input
          type="textarea"
          :rows="28"
          placeholder="请输入装置列表"
          v-model="activityForm.cmdidArr"
          @focus="textfocus"
        >
        </el-input>
        <p class="redErr" v-if="cmdidFlag">*请输入活动名称</p>
      </div>
      <el-button
        class="uploadBtn"
        size="small"
        type="primary"
        @click="submitUpload"
        >上传活动列表</el-button
      >
    </div>
    <div class="activityList">
      <el-table
        :data="activityData"
        style="width: 100%"
        border
        stripe
        height="calc(100% - 0px)"
        v-loading="activityloading"
      >
        <el-table-column type="index" width="50" label="序号">
        </el-table-column>
        <el-table-column
          prop="createTime"
          label="创建时间"
          width="180"
        ></el-table-column>
        <el-table-column prop="title" label="活动名称"> </el-table-column>
        <el-table-column prop="termCount" label="装置数量"> </el-table-column>
        <!-- <el-table-column prop="path" label="文件路径"> </el-table-column> -->
        <el-table-column label="操作" width="300" class-name="editClass">
          <template slot-scope="scope">
            <el-link
              type="primary"
              @click="handleEditClick(scope.row)"
              size="small"
              icon="el-icon-document"
              >详情</el-link
            >
            <el-link
              type="danger"
              @click="handleDeleteClick(scope.row)"
              size="small"
              icon="el-icon-delete"
              >删除</el-link
            >
          </template>
        </el-table-column>
      </el-table>
    </div>
    <el-dialog
      class="termsDialog"
      :title="activityName"
      :visible.sync="termsShow"
      :close-on-click-modal="false"
      width="50%"
    >
      <el-table
        :data="termsData"
        style="width: 100%"
        :header-cell-style="{ 'text-align': 'center' }"
        :cell-style="{ 'text-align': 'center' }"
        border
        stripe
        height="600px"
        v-loading="activityloading"
      >
        <el-table-column type="index" width="50" label="序号">
        </el-table-column>

        <el-table-column prop="line_name" label="线路名称"> </el-table-column>
        <el-table-column prop="tower_name" label="杆塔名称"> </el-table-column>
        <el-table-column prop="protocol" label="规约">
          <template slot-scope="scope">
            {{ protocolMap[scope.row.protocol] }}
          </template>
        </el-table-column>
      </el-table>
      <div slot="footer" class="dialog-footer">
        <el-button @click="termsShow = false">关闭</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { updActivityApi, getqueryActivityApi } from "@/utils/api/index";

export default {
  name: "activity",
  components: {},
  data() {
    return {
      activityloading: true,
      activityData: [], //活动列表
      activityForm: {
        title: "",
        cmdidArr: "",
      },
      titleFlag: false, //title为空
      cmdidFlag: false, //cmdid为空
      termsShow: false,
      termsData: [],
      termsLoading: true,
      activityName: "",
      protocolMap: {
        65280: "国网I1",
        65296: "陕西",
        65281: "安徽",
        65282: "江苏",
        65283: "湖南",
        65284: "浙江",
        65285: "河南全景",
        65286: "河南郑州",
        65290: "河南统一视频v2020",
      },
    };
  },
  computed: {},
  mounted() {
    this.getactivityList();
  },
  methods: {
    //获取活动列表
    getactivityList() {
      this.activityloading = true;
      this.activityData = [];
      getqueryActivityApi({
        act: "list",
      })
        .then((res) => {
          console.log(res);
          this.activityData = res.data;
          this.activityloading = false;
        })
        .catch((err) => {});
    },
    //活动详情
    handleEditClick(row) {
      this.termsShow = true;
      this.termsLoading = true;
      this.termsData = [];
      getqueryActivityApi({
        act: "detail",
        id: row.id,
      })
        .then((res) => {
          console.log(res);
          this.termsLoading = false;
          this.activityName =
            res.data.activity.title + "(" + res.data.activity.termCount + ")";
          this.termsData = res.data.terms;
        })
        .catch((err) => {});
    },
    //删除该活动
    handleDeleteClick(row) {
      console.log(row);
      updActivityApi({
        act: "del",
        id: row.id,
      })
        .then((res) => {
          console.log(res);
          this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning",
          })
            .then(() => {
              this.$message({
                duration: 1500,
                showClose: true,
                message: "文件删除成功",
                type: "success",
              });
              this.getUpgradeList();
            })
            .catch(() => {
              this.$message({
                type: "info",
                showClose: true,
                message: "已取消删除",
              });
            });
        })
        .catch((err) => {});
    },
    //title获取焦点时触发
    inputfocus() {
      this.titleFlag = false;
    },
    //text获取焦点时触发
    textfocus() {
      this.cmdidFlag = false;
    },
    //上传活动列表
    submitUpload() {
      // let arrList = "";
      // arrList = [...this.activityForm.cmdidArr.trim().split("\n")];
      if (this.activityForm.title == "") {
        this.titleFlag = true;
        return;
      }
      if (this.activityForm.cmdidArr == "") {
        this.cmdidFlag = true;
        return;
      }
      console.log(this.activityForm.title);
      console.log(this.activityForm.cmdidArr);
      //console.log(arrList);
      updActivityApi({
        title: this.activityForm.title,
        cmdids: this.activityForm.cmdidArr,
        act: "new",
      })
        .then((res) => {
          console.log(res);
          this.getactivityList();
        })
        .catch((err) => {});
    },
  },
};
</script>
<style lang="less">
.activityBox {
  height: calc(100% - 24px);
  width: calc(100% - 24px);
  padding: 12px;
  display: flex;
  .uploadForm {
    min-width: 300px;
    margin-right: 20px;

    .noteBox {
      margin-bottom: 16px;
      position: relative;
      .noteClass {
        width: 100%;
      }
      .lableBox {
        font-size: 14px;
        font-weight: normal;
        width: 78px;
        line-height: 32px;
      }
      .redErr {
        position: absolute;
        font-size: 12px;
        color: red;
      }
    }
    .upgradeBox {
      position: relative;
      .lableBox {
        font-size: 14px;
        font-weight: normal;
        width: 78px;
        line-height: 32px;
      }
      .redErr {
        position: absolute;
        font-size: 12px;
        color: red;
      }
    }
    .uploadBtn {
      margin-top: 16px;
      margin-left: auto;
      display: flex;
    }
  }

  .activityList {
    height: calc(100% - 0px);
    flex: 1;
    min-width: 0;
    .el-table {
      .el-table__cell {
        text-align: center;
      }
    }
  }
  .editClass {
    .el-link.el-link--primary {
      margin-right: 14px;
    }
  }
  .termsDialog {
    .el-dialog {
      margin-top: 0 !important;
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
    }
    .el-dialog__body {
      padding: 12px;
    }
  }
}
</style>