hz_crm_web/src/views/rai_manage/activityManage/activityManage.vue

<template>
  <!-- 活动管理页面 -->
  <div class="container-activity">
    <!-- 头部el-card -->
    <el-card style="margin-bottom: 20px">
      <div class="top-card-box">
        <div class="tabs-box">
          <span
            v-for="(item, index) in listTitle"
            :key="item.ChartPermissionId"
            @click="tabsBoxBtn(item, index)"
            :class="index == tabsPitchon ? 'pitch' : ''"
            >{{ item.PermissionName }}</span
          >
        </div>
        <div>
          <el-button type="primary" @click="$router.push(routePath=='hongze'?'/addActivity':'/addPurchaserActivity')">添加活动</el-button>
        </div>
      </div>
    </el-card>
    <!-- 内容el-card -->
    <el-card>
      <!-- 选择部分 -->
      <div class="screen-box">
        <div>
          <el-select placeholder="行业" clearable v-model="industry" @change="conditionChange" style="margin-bottom: 20px"
          v-if="routePath=='hongze'">
            <el-option
              v-for="item in chartPermissionList"
              :label="item.PermissionName"
              :key="item.ChartPermissionId"
              :value="item.ChartPermissionId"
            ></el-option>
          </el-select>
          <el-select placeholder="活动类型" clearable v-model="cactivityTypeVal" @change="conditionChange">
            <el-option
              v-for="item in routePath=='hongze'?cactivityTypeList:
                                          [{ActivityTypeId:11,ActivityTypeName:'专家电话会'},
                                          {ActivityTypeId:21,ActivityTypeName:'专家线下沙龙'},
                                          {ActivityTypeId:31,ActivityTypeName:'公司调研电话会'},
                                          {ActivityTypeId:41,ActivityTypeName:'买方线下交流'}]"
              :label="item.ActivityTypeName"
              :key="item.ActivityTypeId"
              :value="item.ActivityTypeId"
            ></el-option>
          </el-select>
          <el-date-picker
            v-model="publishDate"
            type="date"
            placeholder="发布时间"
            format="yyyy 年 MM 月 dd 日"
            value-format="yyyy-MM-dd"
            @change="conditionChange"
          >
          </el-date-picker>
          <date-picker
            style="margin-bottom: 20px"
            v-model="issueTime"
            type="date"
            range
            placeholder="活动时间"
            value-type="format"
            @change="conditionChange"
          >
          </date-picker>
          <el-select placeholder="发布状态" clearable v-model="status" @change="conditionChange" style="margin-bottom: 20px">
            <el-option v-for="item in options" :key="item.id" :label="item.name" :value="item.id"></el-option>
          </el-select>
          <el-input v-model="activityLabel" @input="titleInput" placeholder="请输入活动标签" clearable 
          style="display: inline-block; width: 220px;margin-bottom: 20px">
            <i slot="prefix" class="el-input__icon el-icon-search"></i>
          </el-input>
        </div>
        <div>
          <el-input v-model="titleValue" @input="titleInput" placeholder="请输入活动名称" clearable style="display: inline-block; width: 220px">
            <i slot="prefix" class="el-input__icon el-icon-search"></i>
          </el-input>
        </div>
      </div>
      <!-- 表格部分 -->
      <el-table :data="dataList" style="width: 100%" border>
        <el-table-column align="center" label="活动名称" min-width="285">
          <template slot-scope="{ row }">
            <span class="editsty" @click="titleBtnClick(row.ActivityId)">{{ row.ActivityName }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="ChartPermissionName" align="center" label="行业" min-width="90"></el-table-column>
        <el-table-column min-width="120" prop="ActivityTypeName" align="center" label="活动类型"></el-table-column>
        <el-table-column min-width="120" prop="Label" align="center" label="活动标签"></el-table-column>
        <el-table-column min-width="219" prop="ActivityTimeText" align="center" label="活动时间"></el-table-column>
        <el-table-column min-width="200" prop="LastUpdatedTime" align="center" label="更新时间"></el-table-column>
        <el-table-column align="center" label="发布状态" min-width="100">
          <template slot-scope="{ row }">
            {{ row.PublishStatus == 0 ? "未发布" : row.PublishStatus == 1 ? "已发布" : "已取消" }}
          </template>
        </el-table-column>
        <el-table-column v-if="tabsPitchon === 2" align="center" label="路演回放" min-width="100">
          <template slot-scope="{ row }"> {{ row.IsUpload ? "已上传" : "" }} </template>
        </el-table-column>
        <el-table-column align="center" width="146" label="操作">
          <template slot-scope="{ row }">
            <span v-if="row.PublishStatus == 0 && tabsPitchon == 0" class="editsty" @click="operationBtn(row.ActivityId, '发布')">发布</span>
            <span v-if="row.PublishStatus == 3 && tabsPitchon == 0" class="editsty" @click="operationBtn(row.ActivityId, '重新发布')">重新发布</span>
            <span v-if="row.PublishStatus == 1 && tabsPitchon == 0" class="editsty" @click="operationBtn(row.ActivityId, '取消发布')">取消发布</span>
            &nbsp;&nbsp;
            <span class="editsty" @click="editBtn(row.ActivityId, row.PublishStatus)">编辑</span>
            &nbsp;&nbsp;
            <span class="deletesty" v-if="row.PublishStatus == 0 && tabsPitchon == 0" @click="operationBtn(row.ActivityId, '删除')">删除</span>
            <span class="editsty" v-if="row.IsShowSigninButton " @click="handleDownLoadImg(row)">下载签到码</span>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <el-col :span="24" class="toolbar">
        <m-page :total="total" :page_no="page_no" :pageSize="10" @handleCurrentChange="handleCurrentChange" />
      </el-col>
    </el-card>
    <atc-particulars :dialogVisible.sync="dialogVisible" :detailData.sync="detailData" />
  </div>
</template>

<script>
import mPage from "@/components/mPage.vue";
import { raiInterface } from "@/api/api.js";
import AtcParticulars from "../components/atcParticulars.vue";
export default {
  name: "",
  components: { mPage, AtcParticulars },
  props: {
    Type:{
      type:String,
      emnu:['hongze','purchaser'], // 弘则，研选
      default:'hongze'
    }
  },
  data() {
    return {
      listTitle: [
        {
          PermissionName: "未开始",
          Id: "NotStarted",
        },
        {
          PermissionName: "进行中",
          Id: "HaveInHand",
        },
        {
          PermissionName: "已结束",
          Id: "Complete",
        },
      ],
      tabsPitchon: 0, //tabs 默认选中
      page_no: sessionStorage.getItem("cativityBack") ? JSON.parse(sessionStorage.getItem("cativityBack")).page_no : 1,
      dataList: [], //表格内容
      industry: "", //行业
      status: "", //状态
      issueTime: "", //时间
      cactivityTypeVal: "", //活动
      options: [
        { id: 1, name: "已发布" },
        { id: 0, name: "未发布" },
        { id: 3, name: "已取消" },
      ],
      titleValue: "", //标题关键词
      total: 0, //条数
      PageSize: 10, //每页显示几条
      chartPermissionList: [], //行业的数组
      cactivityTypeList: [], //活动类型
      dialogVisible: false, //弹框
      activeStateId: "NotStarted",
      detailData: {}, //
      activityLabel: "",
      publishDate: "",
    };
  },
  computed: {
    sta() {
      return this.status >= 0 && typeof this.status == "number" ? this.status : 2;
    },
    // 弘则 研选
    routePath(){
      return this.$route.path.indexOf("purchaser")!=-1?'purchaser':'hongze'
    },
  },
  created() {},
  mounted() {
    if (sessionStorage.getItem("cativityBack")) {
      const initialize = JSON.parse(sessionStorage.getItem("cativityBack"));
      this.titleValue = initialize.keyword;
      this.industry = initialize.industry;
      this.status = initialize.status;
      this.issueTime = initialize.issueTime;
      this.cactivityTypeVal = initialize.cactivityTypeVal;
      this.activeStateId = initialize.activeStateId;
      this.tabsPitchon = initialize.tabsPitchon;
      this.activityLabel = initialize.activityLabel;
      this.publishDate = initialize.publishDate;
    }
    this.chartPermission();
    this.activityType();
    this.getsummaryManageList();
  },
  methods: {
    titleInput() {
      this.page_no = 1;
      this.init();
      this.getsummaryManageList();
    },
    init() {
      this.industry = ""; //行业
      this.status = ""; //状态
      this.issueTime = ""; //时间
      this.cactivityTypeVal = ""; //活动
      this.sta = "";
    },
    //头部tabs
    tabsBoxBtn(item, index) {
      this.activeStateId = item.Id;
      this.tabsPitchon = index;
      this.page_no = 1;
      this.getsummaryManageList();
    },
    operationBtn(id, value) {
      this.$confirm(`确定${value}该活动吗？`, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          if (value == "删除") {
            raiInterface
              .activityDelete({
                ActivityId: id,
              })
              .then((res) => {
                if (res.Ret !== 200) return;
                this.$message.success("删除成功！");
                let page_num = Math.ceil((this.total - 1) / this.PageSize);
                if (this.page_no > page_num) {
                  this.page_no = page_num;
                }
                this.getsummaryManageList();
              });
          } else {
            raiInterface
              .activityPublishAndCancel({
                ActivityId: id,
              })
              .then((res) => {
                if (res.Ret !== 200) return;
                this.$message.success(value + "成功！");
                this.getsummaryManageList();
              });
          }
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: `已取消${value}`,
          });
        });
    },
    //编辑
    editBtn(id, show) {
      this.$router.push({
        path: this.routePath=='hongze'?'/editActivity':'/editPurchaserActivity',
        query: {
          id: id,
          isShow: show,
        },
      });
    },
    //分页
    handleCurrentChange(page) {
      this.page_no = page;
      this.getsummaryManageList();
    },
    //获取行业
    chartPermission() {
      raiInterface.chartPermission().then((res) => {
        if (res.Ret === 200) {
          this.chartPermissionList = res.Data.List;
        }
      });
    },
    //活动类型
    activityType() {
      raiInterface.getActivityType().then((res) => {
        if (res.Ret === 200) {
          this.cactivityTypeList = res.Data.List;
        }
      });
    },
    //列表
    getsummaryManageList() {
      raiInterface
        .getActivityList({
          CurrentIndex: this.page_no,
          PageSize: this.PageSize,
          PublishStatus: this.sta - 0,
          ChartPermissionId: this.routePath=="purchaser"?31:this.industry,
          StartDate: this.issueTime[0],
          EndDate: this.issueTime[1],
          KeyWord: this.titleValue,
          ActivityTypeId: this.cactivityTypeVal,
          ActiveState: this.activeStateId,
          ActivityLabel: this.activityLabel,
          PublishStartDate: this.publishDate,
        })
        .then((res) => {
          if (res.Ret !== 200) return;
          this.dataList = res.Data.List;
          this.total = res.Data.Paging.Totals;
        });
    },
    //change事件
    conditionChange() {
      this.page_no = 1;
      this.getsummaryManageList();
    },
    //点击标题的弹框
    titleBtnClick(id) {
      raiInterface.activityDetail({ ActivityId: Number(id) }).then((res) => {
        if (res.Ret == 200) {
          this.detailData = res.Data;
        }
      });
      this.dialogVisible = true;
    },
    // 下载图片
    handleDownLoadImg(row) {
      let img = new Image();
      img.setAttribute("crossOrigin", "anonymous");
      img.src = row.SigninImg;
      img.onload = () => {
        let canvas = document.createElement("canvas");
        canvas.width = img.width;
        canvas.height = img.height;
        let context = canvas.getContext("2d");
        context.drawImage(img, 0, 0, img.width, img.height);
        let dataURL = canvas.toDataURL("image/png", 1);
        const a = document.createElement("a");
        a.setAttribute("download", "签到码.png");
        a.style.display = "none";
        a.href = dataURL;
        document.body.appendChild(a);
        a.click();
      };
    },
  },
  /* 页面跳转前记录参数 */
  beforeRouteLeave(to, form, next) {
    let backData = {
      page_no: this.page_no,
      keyword: this.titleValue,
      industry: this.industry, //行业
      status: this.status, //状态
      issueTime: this.issueTime, //时间
      cactivityTypeVal: this.cactivityTypeVal, //活动
      activeStateId: this.activeStateId, //
      tabsPitchon: this.tabsPitchon,
      activityLabel: this.activityLabel,
      publishDate: this.publishDate,
    };
    sessionStorage.setItem("cativityBack", JSON.stringify(backData));
    next();
  },
  /* 页面进入前是否清除参数 */
  beforeRouteEnter(to, from, next) {
    if (from.path != "/editActivity") {
      sessionStorage.removeItem("cativityBack");
    }
    next();
  },
};
</script>
<style lang="scss">
.container-activity {
  .top-card-box {
    display: flex;
    justify-content: space-between;
    .tabs-box {
      span {
        display: inline-block;
        padding: 9px 24px;
        background-color: #e9f4ff;
        border: 1px solid #b3d8ff;
        border-radius: 4px;
        margin-right: 30px;
        color: #409eff;
        cursor: pointer;
      }
      .pitch {
        background-color: #409eff;
        border: none;
        color: #fff;
      }
    }
  }
  .screen-box {
    display: flex;
    justify-content: space-between;
    .el-select {
      margin-right: 25px;
    }
    .el-date-picker,
    .el-date-editor {
      margin-right: 25px;
    }
  }
  .mx-datepicker {
    width: 220px !important;
    margin-right: 25px;
  }

  .customWidth {
    width: 550px !important;
  }
}
</style>