bsdgy-front/src/pages/activity/ActivityManager.vue

<template>
  <div class="activityManager">
    <Spin v-show="loading" fix>加载中...</Spin>
    <Row>
      <i-col class="activityListClass" v-for="(item, index) in activityList" :key="index" span="7" offset="1">
        <Card>
          <div class="operateAndThemeItem">
            <div class="ThemeItem">
              <div class="schedule-image"><img class="img" :src="'/kiisoo-ic' + item.logo" alt /></div>
              <div class="tipItem">
                <span>{{ item.name }}</span>
                <span>{{ item.description }}</span>
              </div>
            </div>
            <div class="operateItem">
              <div @click="disPlayUseTable(item)">使用</div>
              <div v-show="roleCode === 'GLY-ADMIN'"
                   @click="dispalyAddActivity(item.id)">配置</div>
            </div>
          </div>
        </Card>
      </i-col>
    </Row>
    <Row v-show="roleCode === 'GLY-ADMIN'">
      <i-col span="7"
             offset="1">
        <div @click="dispalyAddActivity('')"
             class="addactivity">
          <span>+</span>
          <span>添加活动</span>
        </div>
      </i-col>
    </Row>
    <useTable ref="useTable"
              @doShow="doShow"
              :show="showUse"
              :schedule="useSchedule"></useTable>
    <addActivity @dispalyAddActivityModal="dispalyAddActivityModal"
                 :addActivityModal="addActivityModal"
                 :id="id"></addActivity>
  </div>
</template>

<script>
import useTable from "./useTable";
import addActivity from "./addActivity";
import ActivityManager from "../../services/ActivityManager/ActivityManager";

export default {
  name: "ActivityManager",
  components: {
    useTable,
    addActivity,
  },
  inject: ["setMenuName"],
  data () {
    return {
      showUse: false,
      addActivityModal: false,
      activityList: [],
      id: "",
      inputActivityList: [],
      useSchedule: {},
      loading: false,
      roleCode: ""
    };
  },
  mounted () {
    this.setMenuName("活动管理", "活动池");
    this.getActivityTable();
    this.roleCode = sessionStorage.getItem("roleCode");
  },
  methods: {
    doShow (show) {
      this.showUse = show;
    },
    getActivityData (id) {
      let that = this;
      let data = {
        instanceId: id,
      };
      that.loading = true;
      ActivityManager.getActivityInfo(data, function (data) {
        that.inputActivityList = [];
        data.data.results.params.forEach((item) => {
          that.inputActivityList.push({
            value1: item.name,
            value2: item.description,
          });
        });
        this.useModal = true;
        that.loading = false;
      });
    },
    getActivityTable () {
      let that = this;
      ActivityManager.getActivityList({}, function (data) {
        that.activityList = data.data.results;
      });
    },
    disPlayUseTable (item) {
      let that = this;
      let data = {
        id: item.id,
      };
      // let data = new FormData()
      // data.append('instanceId', item.id)
      ActivityManager.getActivityInfo(data, function (data) {
        that.useSchedule = data.data.results;
        that.showUse = true;
        that.$forceUpdate()
      });
    },
    dispalyAddActivity (id) {
      this.addActivityModal = true;
      this.id = id.toString();
    },
    dispalyuseModal (displayModalFlag, isCancle) {
      this.useModal = displayModalFlag;
      if (isCancle === true) {
        this.getActivityTable();
      }
    },
    dispalyAddActivityModal (displayModalFlag, isCancle) {
      this.addActivityModal = displayModalFlag;
      if (isCancle === true) {
        this.getActivityTable();
      }
    },
  },
};
</script>

<style scoped>
  .activityManager {
    min-height: 600px;
  }
.operateAndThemeItem {
  display: flex;
  justify-content: space-between;
}

.operateItem {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  color: #6ac1d1;
  width: 20%;
  text-align: right;
  cursor: pointer;
}

.ThemeItem {
  display: flex;
  justify-content: flex-start;
  width: 80%;
}

.tipItem {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  margin-left: 50px;
}

.activityListClass {
  margin-bottom: 20px;
}

.addactivity {
  height: 100px;
  border: 1px dashed;
  text-align: center;
  line-height: 100px;
  cursor: pointer;
}
  .schedule-image {
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    border-radius: 5px;
    background-color: #eee;
  }
  .schedule-image img {
    width: 100%;
    height: auto;
  }
</style>