U 首页最新动态可以展开 收起

he wei

2024-01-04 8fd73a492d756d3e99388d565484d45168a34792

U 首页最新动态可以展开 收起

 public/index.html

@@ -15,7 +15,7 @@
    <noscript>
      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    <div id="popContainer" class="beauty-scroll" style="height: 100vh; overflow-y: scroll">
    <div id="popContainer" class="beauty-scroll" style="height: 100vh; /*overflow-y: scroll*/">
      <div id="app"></div>
    </div>
    <!-- require cdn assets js -->

 src/pages/workplace/WorkPlace.vue

@@ -1,66 +1,79 @@
<template>
    <div class="work-place-wrapper">
        <div class="work-place-container">
            <div class="work-place">
                <a-row :gutter="18" class="work-place-top">
                    <a-col :span="item.span" v-for="(item, key) in totals" :key="'key' + key">
                        <total-card
                            :info="item"
                            :type="item.type"
                            :title="item.title"
                            :num="item.value"
                            @click="changeTotalCard"
                        ></total-card>
                    </a-col>
                </a-row>
                <div style="margin-top: 8px">
                    <my-draw :is-show="'my' == cardName" :y="y" @resize="resize"></my-draw>
                    <not-approved
                        :is-show="'approving' == cardName"
                        :y="y"
                        @resize="resize"
                    ></not-approved>
                    <rejected-list
                        :is-show="'rejected' == cardName"
                        :y="y"
                        @resize="resize"
                    ></rejected-list>
                    <approved-list
                        :is-show="'approved' == cardName"
                        :y="y"
                        @resize="resize"
                    ></approved-list>
                    <handling-list
                        :is-show="'handling' == cardName"
                        :y="y"
                        @resize="resize"
                    ></handling-list>
                    <handled-list
                        :is-show="'handled' == cardName"
                        :y="y"
                        @resize="resize"
                    ></handled-list>
                    <feedback-list
                        :is-show="'sendFk' == cardName ||'recevierFk' == cardName"
                        :type="cardName"
                        :y="y"
                        @resize="resize"
                    ></feedback-list>
                    <!-- v-if="'sendFk' == cardName"
  <div class="work-place-wrapper">
    <div class="work-place-container">
      <div class="work-place">
        <a-row :gutter="18" class="work-place-top">
          <a-col
            :span="item.span"
            v-for="(item, key) in totals"
            :key="'key' + key"
          >
            <total-card
              :info="item"
              :type="item.type"
              :title="item.title"
              :num="item.value"
              @click="changeTotalCard"
            ></total-card>
          </a-col>
        </a-row>
        <div style="margin-top: 8px">
          <my-draw
            :is-show="'my' == cardName"
            :y="y"
            @resize="resize"
          ></my-draw>
          <not-approved
            :is-show="'approving' == cardName"
            :y="y"
            @resize="resize"
          ></not-approved>
          <rejected-list
            :is-show="'rejected' == cardName"
            :y="y"
            @resize="resize"
          ></rejected-list>
          <approved-list
            :is-show="'approved' == cardName"
            :y="y"
            @resize="resize"
          ></approved-list>
          <handling-list
            :is-show="'handling' == cardName"
            :y="y"
            @resize="resize"
          ></handling-list>
          <handled-list
            :is-show="'handled' == cardName"
            :y="y"
            @resize="resize"
          ></handled-list>
          <feedback-list
            :is-show="'sendFk' == cardName || 'recevierFk' == cardName"
            :type="cardName"
            :y="y"
            @resize="resize"
          ></feedback-list>
          <!-- v-if="'sendFk' == cardName"
                    v-if="'recevierFk' == cardName" -->
                    <!-- <feedback-list
          <!-- <feedback-list
                        :is-show="'recevierFk' == cardName"
                        :type="cardName"
                        :y="y"
                        @resize="resize"
                    ></feedback-list> -->
                </div>
            </div>
        </div>
        <div class="log-wrapper">
            <today-log></today-log>
        </div>
    </div>
        </div>
      </div>
    </div>
    <div class="log-contain" :style="logStyle">
      <div :class="['log-btn', {active: logVisible}]" @click="toggleLog">
        {{ logVisible ? "折叠动态" : "展开动态" }}
      </div>
      <div class="log-wrapper" v-show="logVisible">
        <today-log></today-log>
      </div>
    </div>
  </div>
</template>

<script>
@@ -83,7 +96,7 @@
export default {
  name: "WorkPlace",
  components: {
      TodayLog,
    TodayLog,
    HandledList,
    HandlingList,
    ApprovedList,
@@ -96,6 +109,7 @@
  mixins: [WSMixin],
  data() {
    return {
      logVisible: false,
      loading: false,
      update: -1,
      y: 400,
@@ -109,8 +123,8 @@
    update(n) {
      if (-1 != n && !this._inactive) {
        const bar = document.querySelectorAll(".header-bar")[0].clientHeight;
        const workPlaceTop =
          document.querySelectorAll(".work-place-top")[0].clientHeight;
        const workPlaceTop = document.querySelectorAll(".work-place-top")[0]
          .clientHeight;
        this.y = this.minHeight - bar - workPlaceTop - 56;
      }
    },
@@ -187,10 +201,24 @@
    activeFN() {
      this.resize();
    },
    toggleLog() {
      console.log(1122);
      this.logVisible = !this.logVisible;
      let cardName = this.cardName;
      this.cardName = "";
      this.$nextTick(() => {
        this.cardName = cardName;
      });
    },
  },
  computed: {
    ...mapGetters("account", ["roles", "roleList", "departmentList"]),
    ...mapGetters("setting", ["affixed", "minHeight"]),
    logStyle() {
      return {
        width: this.logVisible ? "450px" : 0,
      };
    },
  },
  mounted() {
    let role = getItemByKey(this.roles[0].id, this.roleList);
@@ -201,27 +229,54 @@

<style scoped>
.work-place-wrapper {
    display: flex;
    height: 100%;
  display: flex;
  height: 100%;
}
.work-place-container {
    flex:1;
    position: relative;
    height: 100%;
  flex: 1;
  position: relative;
  height: 100%;
}
.work-place {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}
.log-contain {
  /* width: 450px; */
  position: relative;
  transition: all 0.3s;
}
.log-btn {
  /* z-index: 1; */
  position: absolute;
  top: 0;
  left: 24px;
  width: 100px;
  height: 40px;
  line-height: 40px;
  color: #ffffff;
  padding-left: 20px;
  border-radius: 20px 0 0 20px;
  cursor: pointer;
  background: #090;
  transition: all 0.3s;
  transform: translate(-20px, 0);
}
.log-btn.active {
  transform: translate(-40px, 0);
}
.log-btn:hover {
  transform: translate(-100%, 0);
}
.log-wrapper {
    width: 450px;
    height: 100%;
    overflow-y: auto;
    padding-left: 4px;
    padding-bottom: 4px;
    position: relative;
  width: 450px;
  height: 100%;
  overflow-y: auto;
  padding-left: 4px;
  padding-bottom: 4px;
  position: relative;
}
</style>