epmet-oper-gov/src/views/modules/communityParty/calendar/index.vue

<template>
  <div class="g-cnt">
    <el-row :gutter="15">
      <el-col :span="6">
        <div class="m-sizer">
          <div class="item">
            <el-cascader
              class="customer_cascader"
              ref="myCascader"
              size="small"
              v-model="fmData.orgId"
              :options="partyOptions"
              :props="partyOptionsProps"
              :show-all-levels="false"
              @change="handleChangeParty"
            ></el-cascader>
          </div>
          <div class="item">
            <el-radio v-model="fmData.isSelf" label="1"
              >本人创建的活动</el-radio
            >
            <el-radio v-model="fmData.isSelf" label="0"
              >本组织所有活动</el-radio
            >
          </div>
        </div>

        <div class="m-date">
          <div class="date-top">
            {{ currentDate.year }}年{{ currentDate.month + 1 }}月
          </div>
          <div class="date-big">{{ currentDate.date }}</div>
          <div class="date-week">{{ currentDate.dayFormat }}</div>
        </div>

        <div
          class="m-list"
          v-if="
            currentDateData.activityList.length > 0 ||
            currentDateData.scheduleList.length > 0
          "
        >
          <div class="list-title">今日活动/日程</div>
          <div class="list">
            <div
              class="item"
              :key="item.activityId"
              v-for="item in currentDateData.activityList"
            >
              <div class="item-title">
                {{ item.theme }}
              </div>
              <div class="item-prop">
                <span>活动类型：</span>
                <span>{{ item.type }}</span>
              </div>
              <div class="item-prop">
                <span>开始时间：</span>
                <span>{{ item.holdTime }}</span>
              </div>
              <div class="item-prop">
                <span>活动地点：</span>
                <span>{{ item.address }}</span>
              </div>
              <div class="item-prop">
                <span>参加组织：</span>
                <span>{{ item.joinOrgs.join("、") }}</span>
              </div>
              <div class="item-ope">
                <el-button
                  type="primary"
                  size="mini"
                  @click="handleClickHuodong('publish', item)"
                  >发布</el-button
                >
                <el-button
                  type="success"
                  size="mini"
                  @click="handleClickHuodong('edit', item)"
                  >编辑</el-button
                >
                <el-button size="mini" @click="handleClickHuodong('del', item)"
                  >删除</el-button
                >
              </div>
            </div>

            <div
              class="item"
              :key="item.scheduleId"
              v-for="item in currentDateData.scheduleList"
            >
              <div class="item-title">
                {{ item.title }}
              </div>
              <div class="item-prop">
                <span>提醒时间：</span>
                <span>{{ item.remindTime }}</span>
              </div>
              <div class="item-prop">
                <span>备注说明：</span>
                <span>{{ item.remark }}</span>
              </div>
              <div class="item-ope">
                <el-button
                  type="success"
                  size="mini"
                  @click="handleClickRicheng('edit', item)"
                  >编辑</el-button
                >
                <el-button size="mini" @click="handleClickRicheng('del', item)"
                  >删除</el-button
                >
              </div>
            </div>
          </div>
        </div>

        <div class="m-ope">
          <el-button type="warning" style="width: 48%" @click="addHudong"
            >添加活动计划</el-button
          >
          <el-button style="width: 48%" @click="addRicheng">添加日程</el-button>
        </div>
      </el-col>

      <el-col :span="18">
        <div class="m-cal">
          <div class="hd">
            <div class="hd-year">
              <el-date-picker
                v-model="currentYearStr"
                value-format="yyyy"
                type="year"
                placeholder="选择年"
                size="small"
                style="width: 150px"
              >
              </el-date-picker>
            </div>
            <div class="hd-month">
              <div
                class="month-item"
                :class="{ 'z-on': m - 1 == currentMonth }"
                :key="'month' + m"
                @click="currentMonth = m - 1"
                v-for="m in 12"
              >
                <el-badge
                  :value="monthData[m - 1]"
                  :hidden="monthData[m - 1] == 0"
                  class="item"
                >
                  <div class="month-text">{{ m }}月</div>
                </el-badge>
              </div>
            </div>
            <div class="hd-btn">
              <el-button type="primary" size="small"
                >批量生成年度报表</el-button
              >
            </div>
          </div>
          <calendar
            :currentYear="currentYear"
            :currentMonth="currentMonth"
            @rangeChange="handleRangeChange"
            @clickDate="handleChangeDate"
          >
            <template v-slot:date-item="{ item, index }">
              <div
                class="tip"
                v-if="
                  rangeData[item.dateId] &&
                  rangeData[item.dateId].activityList.length > 0
                "
              >
                <div
                  class="tip-num"
                  v-if="rangeData[item.dateId].activityList.length > 1"
                >
                  {{ rangeData[item.dateId].activityList.length }}
                </div>

                <div class="tip-text">
                  <span class="z-on">
                    {{ rangeData[item.dateId].activityList[0].type }}</span
                  >
                  {{
                    rangeData[item.dateId].activityList[0].isPublicValue
                      ? "(已发布)"
                      : ""
                  }}
                </div>
                <div class="tip-cnt">
                  {{ rangeData[item.dateId].activityList[0].topic }}
                </div>

                <div class="all-list" :class="computeAllListClass(index)">
                  <div
                    class="item"
                    :key="item.activityId"
                    v-for="item in rangeData[item.dateId].activityList"
                  >
                    <div class="item-title">
                      {{ item.theme }}
                    </div>
                    <div class="item-prop">
                      <span>活动类型：</span>
                      <span>{{ item.type }}</span>
                    </div>
                    <div class="item-prop">
                      <span>开始时间：</span>
                      <span>{{ item.holdTime }}</span>
                    </div>
                    <div class="item-prop">
                      <span>活动地点：</span>
                      <span>{{ item.address }}</span>
                    </div>
                    <div class="item-prop">
                      <span>参加组织：</span>
                      <span>{{ item.joinOrgs.join("、") }}</span>
                    </div>
                  </div>
                </div>
              </div>
              <div
                class="corn"
                v-if="
                  rangeData[item.dateId] &&
                  rangeData[item.dateId].scheduleList.length > 0
                "
              >
                <div class="corn-num">
                  {{ rangeData[item.dateId].scheduleList.length }}
                </div>
                <div class="corn-text">日程</div>

                <div class="all-list" :class="computeAllListClass(index)">
                  <div
                    class="item"
                    :key="item.scheduleId"
                    v-for="item in rangeData[item.dateId].scheduleList"
                  >
                    <div class="item-title">
                      {{ item.title }}
                    </div>
                    <div class="item-prop">
                      <span>提醒时间：</span>
                      <span>{{ item.remindTime }}</span>
                    </div>
                    <div class="item-prop">
                      <span>备注说明：</span>
                      <span>{{ item.remark }}</span>
                    </div>
                  </div>
                </div>
              </div>
            </template>
          </calendar>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { requestPost, requestGet } from "@/js/dai/request";
import nextTick from "dai-js/tools/nextTick";
import calendar from "./cpts/calendar";

function doAfter(fn) {
  return new Promise(async (resolve) => {
    while (!fn()) {
      await nextTick(100);
    }
    resolve();
  });
}

export default {
  name: "party-calendar",
  components: {
    calendar,
  },
  data() {
    let todayObj = new Date();

    return {
      currentYearStr: todayObj.getFullYear() + "",
      currentMonth: todayObj.getMonth(),
      currentDate: {
        year: "",
        month: "",
        date: "",
        day: "",
      },

      currentDateData: {
        scheduleList: [],
        activityList: [],
      },

      monthData: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],

      rangeDateList: [],
      rangeData: {},

      partyOptions: [],
      partyOptionsProps: {
        multiple: false,
        value: "id",
        label: "partyOrgName",
        children: "children",
        checkStrictly: true,
        emitPath: false,
      },

      fmData: {
        orgId: "",
        isSelf: "1",
        yearId: "",
      },
    };
  },
  computed: {
    currentYear() {
      return parseInt(this.currentYearStr);
    },
    apiParams() {
      const { currentYear, fmData } = this;
      return {
        yearId: currentYear,
        orgId: fmData.orgId,
        isSelf: fmData.isSelf,
      };
    },
  },
  watch: {
    "fmData.orgId": function (val) {
      console.log("orgId", val);
      this.getCurrentDateData();
      this.getRangeData();
    },
    "fmData.isSelf": function (val) {
      console.log("isSelf", val);
      this.getCurrentDateData();
      this.getRangeData();
    },
    currentYear: function (val) {
      console.log("watch--currentYear", val);
      this.getMonthData();
    },
  },
  async mounted() {
    await this.getPartyOptions();
    this.getMonthData();
  },
  methods: {
    // 添加活动
    addHudong() {},
    // 添加日程
    addRicheng() {},
    // 点击活动操作
    handleClickHuodong(type, item) {
      console.log(type, item);
      if (type == "publish") {
        // 发布
      } else if (type == "edit") {
        // 编辑
      } else if (type == "del") {
        //  删除
      }
    },
    // 点击日程操作
    handleClickRicheng(type, item) {
      console.log(type, item);
      if (type == "edit") {
        // 编辑
      } else if (type == "del") {
        //  删除
      }
    },

    handleChangeParty() {},

    handleChangeDate(item) {
      console.log("handleChangeDate");
      this.currentYearStr = item.year + "";
      this.currentMonth = item.month;
      this.currentDate = { ...item };

      this.getCurrentDateData();
    },

    computeAllListClass(index) {
      let x = index % 7;
      let y = Math.floor(index / 7);
      if (x < 3) {
        if (y < 3) {
          return "z-top-left";
        } else {
          return "z-bottom-left";
        }
      } else {
        if (y < 3) {
          return "z-top-right";
        } else {
          return "z-bottom-right";
        }
      }
    },

    handleRangeChange(arr) {
      this.rangeDateList = arr;
      this.getRangeData();
    },

    async getRangeData() {
      const arr = this.rangeDateList;
      const url = "/resi/partymember/icPartyAct/homeSearch";

      if (!this.apiParams.orgId || arr.length == 0) return;

      const { data, code, msg } = await requestPost(url, {
        ...this.apiParams,
        startDate: arr[0].dateId,
        endDate: arr[arr.length - 1].dateId,
      });
      if (code === 0) {
        if (Array.isArray(data)) {
          let rangeData = {};
          arr.forEach((item) => {
            rangeData[item.dateId] = {
              ...item,
              scheduleTotal: 0,
              activityTotal: 0,
              scheduleList: [],
              activityList: [],
            };
            let curr = data.find((val) => val.dateId == item.dateId);
            if (curr) {
              rangeData[item.dateId].scheduleList = curr.scheduleList;
              rangeData[item.dateId].activityList = curr.activityList;
              rangeData[item.dateId].scheduleTotal = curr.scheduleTotal;
              rangeData[item.dateId].activityTotal = curr.activityTotal;
            }
          });
          this.rangeData = rangeData;
          console.log("rangeData", this.rangeData);
        }
      } else {
        this.$message.error(msg);
      }
    },

    async getMonthData() {
      const url = "/resi/partymember/icPartyAct/homeMonthTotal";

      if (!this.apiParams.orgId) return;

      const { data, code, msg } = await requestPost(url, {
        ...this.apiParams,
      });
      if (code === 0) {
        if (Array.isArray(data)) {
          data.forEach((item) => {
            this.monthData[item.monthId - 1] = item.count;
          });
          console.log(this.monthData);
        }
      } else {
        this.$message.error(msg);
      }
    },

    async getCurrentDateData() {
      const url = "/resi/partymember/icPartyAct/actAndScheduleList";

      if (!this.apiParams.orgId) return;

      const { data, code, msg } = await requestPost(url, {
        ...this.apiParams,
        dateId: this.currentDate.dateId,
      });
      if (code === 0) {
        this.currentDateData.scheduleList = data.scheduleList || [];
        this.currentDateData.activityList = data.activityList || [];
      } else {
        this.$message.error(msg);
      }
    },

    async getPartyOptions() {
      const url = "/resi/partymember/icPartyOrg/getSearchTreelist";
      let params = {
        customerId: localStorage.getItem("customerId"),
        agencyId: localStorage.getItem("agencyId"),
      };

      const { data, code, msg } = await requestGet(url, params);
      if (code === 0) {
        if (Array.isArray(data) && data.length > 0) {
          this.partyOptions = data;
          this.fmData.orgId = data[0].id;
        }
      } else {
      }
    },
  },
};
</script>

<style lang="scss" scoped>
@import "@/assets/scss/c/config.scss";
@import "@/assets/scss/c/function.scss";

$blue: #3e8ef7;
$red: #f33;

.g-cnt {
  background-color: #ffffff;
  padding: 20px;
}
.m-cal {
  .hd {
    display: flex;
    margin-bottom: 20px;

    .hd-month {
      display: flex;

      .month-item {
        position: relative;
        margin-left: 10px;

        /deep/ .el-badge__content {
          z-index: 1;
        }

        &.z-on {
          .month-text {
            background-color: $blue;
            color: #ffffff;
          }
        }
        .month-text {
          position: relative;
          z-index: 0;
          width: 40px;
          height: 30px;
          text-align: center;
          background-color: #eeeeee;
          border-radius: 8px;
          line-height: 30px;
          font-size: 14px;
          cursor: pointer;
        }
      }
    }

    .hd-btn {
      margin-left: auto;
    }
  }

  .all-list {
    position: absolute;
    z-index: 100;
    padding: 0 10px;
    width: 300px;
    max-height: 200px;
    overflow-y: auto;
    background-color: rgba(#ffffff, 0.9);
    box-shadow: 0 0 10px 3px rgba(#000, 0.1);
    text-align: left;
    color: #999;
    transition: all ease 0.13s;
    transform: scale(0);

    &.z-top-left {
      right: -300px;
      top: 0;
    }
    &.z-top-right {
      left: -300px;
      top: 0;
    }
    &.z-bottom-left {
      right: -300px;
      bottom: 0;
    }
    &.z-bottom-right {
      left: -300px;
      bottom: 0;
    }
    .item {
      padding: 10px 0;
      border-top: 1px dashed rgba(#000, 0.2);
      &:first-child {
        border-top: none;
      }
    }
  }

  .tip {
    position: relative;
    margin: 0 3px;
    padding: 3px 2px 3px 12px;
    line-height: 16px;
    box-shadow: 0 0 5px 1px #eee;
    background-color: #ffffff;
    font-size: 12px;
    border-radius: 4px;
    cursor: pointer;
    color: #999999;

    &:hover {
      .all-list {
        transform: scale(1);
      }
    }
    .tip-num {
      position: absolute;
      z-index: 10;
      top: -7px;
      right: -7px;
      border-radius: 100%;
      width: 14px;
      height: 14px;
      line-height: 14px;
      text-align: center;
      font-size: 10px;
      text-align: center;
      color: #ffffff;
      background-color: #f1ba06;
    }
    .z-on {
      color: $red;
    }
    .tip-text {
      @include toe;
      text-align: left;
    }
    .tip-cnt {
      @include toe;
      text-align: left;
      font-size: 10px;
    }

    &::before {
      position: absolute;
      content: "";
      left: 4px;
      top: 0;
      bottom: 0;
      margin: auto;
      display: block;
      width: 4px;
      height: 4px;
      border-radius: 100%;
      background-color: $red;
    }
  }

  .corn {
    position: absolute;
    right: 0;
    top: 0;
    color: #ffffff;
    cursor: pointer;

    &:hover {
      .all-list {
        transform: scale(1);
      }
    }
    .corn-num {
      position: absolute;
      z-index: 10;
      top: -7px;
      right: -7px;
      border-radius: 100%;
      width: 14px;
      height: 14px;
      line-height: 14px;
      text-align: center;
      font-size: 10px;
      text-align: center;
      color: #ffffff;
      background-color: #f1ba06;
    }
    .corn-text {
      position: relative;
      z-index: 1;
      font-size: 12px;
      line-height: 18px;
      padding-right: 3px;
    }

    &::before {
      content: "";
      display: block;
      position: absolute;
      z-index: 0;
      top: 0;
      right: 0;
      width: 0px;
      height: 0;
      border-top: 17px solid #f33;
      border-right: 25px solid #f33;
      border-bottom: 17px solid transparent;
      border-left: 25px solid transparent;
    }
  }
}
.m-sizer {
  .item {
    margin-bottom: 10px;
  }
}

.m-date {
  text-align: center;
  color: $blue;
  line-height: 1.5;
  background-color: #f3f4f5;
  padding: 20px;
  .date-top {
    font-size: 24px;
  }
  .date-big {
    font-size: 100px;
  }
  .date-week {
    font-size: 24px;
  }
}

.m-list {
  margin-top: 20px;
  .list-title {
    width: 100px;
    text-align: center;
    line-height: 24px;
    background-color: $red;
    color: #ffffff;
  }
  .list {
    .item {
      border-top: 1px solid #eee;
      padding: 10px 0;
      line-height: 1.5;
      overflow: hidden;
      .item-title {
        font-weight: bold;
      }
      .item-prop {
        margin: 4px 0;
      }

      .item-ope {
        margin-top: 10px;
        float: right;
      }
    }
  }
}
.m-ope {
  margin-top: 40px;
  display: flex;
  justify-content: space-between;
}
</style>