zuel-itsm-3.0.2/src/views/incidentList.vue

<template>
  <div class="bgColor">
    <div slot="content" class="scroll-wrapper">
      <div class="demo">
        <div class="scroll-list-wrap">
          <cube-scroll
            ref="scroll"
            :data="items"
            :options="options"
            @pulling-down="onPullingDown"
            @pulling-up="onPullingUp"
          >
            <cube-select
              v-model="stateValue"
              :options="stateData"
              @change="stateChange()"
            >
            </cube-select>
            <ul class="foods-wrapper">
              <li
                v-for="data in items"
                class="food-item border-1px"
                @click="toIncidentDetails(data)"
              >
                <div class="food-content">
                  <div class="title">
                    <div>
                      <i class="iconfont icon-baoxiuliebiao"></i
                      ><span>申请编号:&nbsp;{{ data.bxcode || "暂无" }}</span>
                    </div>
                    <div :class="stateClassFn(data.state.name)">
                      {{ data.state.name }}
                    </div>
                  </div>
                  <div class="conent">
                    {{ data.description }}
                  </div>
                  <div class="timeBox">
                    <div>
                      维修人：&nbsp;{{
                        data.incident.handlingPersonnelUser
                          ? data.incident.handlingPersonnelUser.name
                          : "暂无"
                      }}
                    </div>
                    <div>申请时间：&nbsp;{{ data.createTime }}</div>
                  </div>
                  <div
                    class="timeBox noneBorder"
                    v-if="wxIncidentWithCmdb == 1"
                  >
                    <div>资产：&nbsp;{{ data.assetId || "无" }}</div>
                  </div>
                </div>
              </li>
              <div class="wushuju" v-show="wushuju">
                <img src="./../../static/images/wushuju.svg" alt="" />
                <div class="noDataFont">暂无数据</div>
              </div>
            </ul>
            <template v-if="customPullDown" slot="pulldown" slot-scope="props">
              <div
                v-if="props.pullDownRefresh"
                class="cube-pulldown-wrapper"
                :style="props.pullDownStyle"
              >
                <div
                  v-show="props.beforePullDown"
                  class="before-trigger"
                  :style="{ paddingTop: props.bubbleY + 'px' }"
                >
                  <span
                    :class="{
                      rotate: props.bubbleY > pullDownRefreshThreshold - 40,
                    }"
                    >↓</span
                  >
                </div>
                <div class="after-trigger" v-show="!props.beforePullDown">
                  <div v-show="props.isPullingDown" class="loading">
                    <cube-loading></cube-loading>
                  </div>
                  <div v-show="!props.isPullingDown" class="text">
                    <span class="refresh-text">更新成功</span>
                  </div>
                </div>
              </div>
            </template>
          </cube-scroll>
        </div>
      </div>
    </div>
    <load-ing v-show="loadShow"></load-ing>
  </div>
</template>
<script>
import Vue from "vue";
import CubePage from "../components/cube-page.vue";
import SwitchOption from "../components/switch-option";
import InputOption from "../components/input-option";
import SelectOption from "../components/select-option";
import { formatDate } from "./../components/js/date.js";
import LoadIng from "./../views/loading.vue";
export default {
  data() {
    return {
      //   items: _foods,
      incidentWithConsumable: localStorage.getItem("incidentWithConsumable"), //是否绑定耗材
      wxIncidentWithCmdb: localStorage.getItem("wxIncidentWithCmdb"), //是否绑定资产
      loginUser: JSON.parse(localStorage.getItem("loginUser")),
      items: [],
      pullDownRefresh: true,
      pullDownRefreshThreshold: 60,
      pullDownRefreshStop: 40,
      pullDownRefreshTxt: "Refresh success",
      pullUpLoad: true,
      pullUpLoadThreshold: 0,
      pullUpLoadMoreTxt: "Load more",
      pullUpLoadNoMoreTxt: "没有更多数据",
      customPullDown: true,
      wushuju: false,
      stateData: [
        {
          text: "全部",
          value: 0,
        },
        {
          text: "未受理",
          value: 1592,
        },
        {
          text: "不受理",
          value: 1593,
        },
        {
          text: "处理中",
          value: 1594,
        },
        {
          text: "待评价",
          value: 1595,
        },
        {
          text: "已解决",
          value: 1596,
        },
        {
          text: "已撤回",
          value: 1597,
        },
      ],
      stateValue: 0,
      sum: 10,
      idx: 0,
      stateClass: "",
      loadShow: true,
    };
  },
  components: {
    CubePage,
    SwitchOption,
    InputOption,
    SelectOption,
    LoadIng,
  },
  computed: {
    options() {
      return {
        pullDownRefresh: this.pullDownRefreshObj,
        pullUpLoad: this.pullUpLoadObj,
        scrollbar: true,
      };
    },
    pullDownRefreshObj: function () {
      return this.pullDownRefresh
        ? {
            threshold: parseInt(this.pullDownRefreshThreshold),
            txt: this.pullDownRefreshTxt,
          }
        : false;
    },
    pullUpLoadObj: function () {
      return this.pullUpLoad
        ? {
            threshold: parseInt(this.pullUpLoadThreshold),
            txt: {
              more: this.pullUpLoadMoreTxt,
              noMore: this.pullUpLoadNoMoreTxt,
            },
          }
        : false;
    },
  },
  methods: {
    getParamsState() {
      if (this.$route.params.state) {
        this.stateValue = this.$route.params.state;
      }
    },
    stateClassFn(data) {
      if (data == "未受理") {
        return "weishouli";
      } else if (data == "不受理") {
        return "bushouli";
      } else if (data == "处理中") {
        return "chulizhong";
      } else if (data == "待评价") {
        return "daipingjia";
      } else if (data == "已解决") {
        return "yijiejue";
      } else if (data == "已撤回") {
        return "yichehui";
      } else {
        return "yichehui";
      }
    },
    stateChange() {
      var that = this;
      this.loadShow = true;
      that.items = [];
      this.$http
        .post("service/apply/bpm/fetchServiceTasks", {
          state: that.stateValue,
          idx: 0,
          sum: 10,
        })
        .then(function (res) {
          if (res.data.data.length > 0) {
            for (var i = 0; i < res.data.data.length; i++) {
              res.data.data[i].createTime = formatDate(
                new Date(res.data.data[i].createTime),
                "yyyy-MM-dd hh:mm"
              );
            }
            that.items = res.data.data;
            that.wushuju = false;
          } else {
            that.wushuju = true;
          }
          that.loadShow = false;
        });
    },
    toIncidentDetails(data) {
      this.$router.push({
        name: "IncidentDetails",
        params: {
          data: JSON.stringify(data),
        },
      });
    },
    onPullingDown() {
      // 模拟更新数据
      this.idx = 0;
      setTimeout(() => {
        var that = this;
        // that.items=[];
        this.$http
          .post("service/apply/bpm/fetchServiceTasks", {
            state: that.stateValue,
            idx: 0,
            sum: 10,
          })
          .then(function (res) {
            if (res.data.data.length > 0) {
              that.wushuju = false;
              for (var i = 0; i < res.data.data.length; i++) {
                res.data.data[i].createTime = formatDate(
                  new Date(res.data.data[i].createTime),
                  "yyyy-MM-dd hh:mm"
                );
              }
              that.items = res.data.data;
            } else {
              that.wushuju = true;
              that.$refs.scroll.forceUpdate();
            }
          });
      }, 1000);
    },
    getData(idx, sum) {
      var that = this;
      this.$http
        .post("service/apply/bpm/fetchServiceTasks", {
          state: that.stateValue,
          idx: idx,
          sum: sum,
        })
        .then(function (res) {
          if (res.data.data.length > 0) {
            that.wushuju = false;
            for (var i = 0; i < res.data.data.length; i++) {
              res.data.data[i].createTime = formatDate(
                new Date(res.data.data[i].createTime),
                "yyyy-MM-dd hh:mm"
              );
            }
            that.items = res.data.data;
          } else {
            that.wushuju = true;
          }
          that.loadShow = false;
        });
    },
    onPullingUp() {
      var that = this;
      that.idx = that.idx + 1;
      this.$http
        .post("service/apply/bpm/fetchServiceTasks", {
          state: that.stateValue,
          idx: that.idx,
          sum: that.sum,
        })
        .then(function (res) {
          for (var i = 0; i < res.data.data.length; i++) {
            res.data.data[i].createTime = formatDate(
              new Date(res.data.data[i].createTime),
              "yyyy-MM-dd hh:mm"
            );
          }
          setTimeout(() => {
            if (res.data.data.length > 0) {
              that.items = that.items.concat(res.data.data);
            } else {
              that.$refs.scroll.forceUpdate();
            }
          }, 1000);
        });
    },
    updatePullDownRefresh(val) {
      this.pullDownRefresh = val;
    },
    updatePullDownRefreshThreshold(val) {
      this.pullDownRefreshThreshold = val;
    },
    updatePullDownRefreshTxt(val) {
      this.pullDownRefreshTxt = val;
    },
    updatePullUpLoad(val) {
      this.pullUpLoad = val;
    },
    updatePullUpLoadThreshold(val) {
      this.pullUpLoadThreshold = val;
    },
    updatePullUpLoadMoreTxt(val) {
      this.pullUpLoadMoreTxt = val;
    },
    updatePullUpLoadNoMoreTxt(val) {
      this.pullUpLoadNoMoreTxt = val;
    },
    updateCustomPullDown(val) {
      this.customPullDown = val;
    },
    rebuildScroll() {
      Vue.nextTick(() => {
        this.$refs.scroll.destroy();
        this.$refs.scroll.initScroll();
      });
    },
  },
  created() {
    this.getParamsState();
    this.getData(this.idx, this.sum);
  },
};
</script>
<style lang="stylus" rel="stylesheet/stylus" scoped>
.scroll-list-wrap {
  /* height: 350px */
  height: 95vh;
  /* border: 1px solid rgba(0, 0, 0, 0.1) */
  border-radius: 5px;
  transform: rotate(0deg); // fix 子元素超出边框圆角部分不隐藏的问题
  overflow: hidden;
}

.foods-wrapper {
  .food-item {
    display: flex;

    /* padding: 18px */
    /* border-bottom: 1px solid rgba(7, 17, 27, 0.1) */
    /* border-top: 1px solid rgba(7, 17, 27, 0.1)!important */
    &:last-child {
      border-none();
      margin-bottom: 0;
    }

    .icon {
      flex: 0 0 57px;
      margin-right: 10px;
    }

    .food-content {
      flex: 1;

      .name {
        margin: 2px 0 8px 0;
        height: 14px;
        line-height: 14px;
        font-size: 14px;
        color: rgb(7, 17, 27);
      }

      .description, .extra {
        line-height: 10px;
        font-size: 10px;
        color: rgb(147, 153, 159);
      }

      .description {
        line-height: 12px;
        margin-bottom: 8px;
      }

      .extra {
        .count {
          margin-right: 12px;
        }
      }

      .price {
        font-weight: 700;
        line-height: 24px;

        .now {
          margin-right: 8px;
          font-size: 14px;
          color: rgb(240, 20, 20);
        }

        .old {
          text-decoration: line-through;
          font-size: 10px;
          color: rgb(147, 153, 159);
        }
      }

      .cartcontrol-wrapper {
        position: absolute;
        right: 0;
        bottom: 12px;

        .scroll-wrapper {
          .cube-pulldown-wrapper {
            .before-trigger {
              font-size: 30px;
              line-height: 30px;
              align-self: flex-end;

              span {
                display: inline-block;
                transition: all 0.3s;
                color: #666;

                &.rotate {
                  transform: rotate(180deg);
                }
              }
            }

            .after-trigger {
              .refresh-text {
                color: grey;
              }
            }
          }
        }
      }
    }
  }
}
</style>
<style scoped>
.bgColor {
  background-color: white;
}
.food-item {
  border-top: 0.16rem rgb(238, 238, 238) solid;
}
.food-content {
  border-top: 0.01rem rgb(223, 222, 222) solid;
  border-bottom: 0.01rem rgb(223, 222, 222) solid;
}
.cube-select {
  height: 0.88rem;
  line-height: 0.88rem;
  padding: 0 0.24rem;
  font-size: 0.36rem;
  color: #333333;
}
.title {
  display: flex;
  justify-content: space-between;
  height: 0.7rem;
  line-height: 0.7rem;
  border-top: 0.01rem rgb(223, 222, 222) solid;
  padding: 0 0.24rem;
  border-bottom: 0.01rem rgb(223, 222, 222) solid;
}
.title i {
  font-size: 0.32rem;
  color: #005395;
}
.title div:nth-child(1) {
  font-size: 0.32rem;
}
.title div:nth-child(1) span {
  display: inline-block;
  margin-left: 0.08rem;
}
.title div:nth-child(2) {
  padding: 0.05rem 0.3rem;
  /* border: 0.01rem rgb(0,0,255) solid; */
  border-radius: 16px;
  /* color: rgb(0,0,255); */
  height: 0.25rem;
  line-height: 0.25rem;
  margin-top: 0.15rem;
  font-size: 0.24rem;
}
.weishouli {
  color: #991f00;
  border: 0.01rem #991f00 solid;
  background-color: #f4e8e5;
}
.bushouli {
  color: #666666;
  background-color: #eeeeee;
  border: 0.01rem #666666 solid;
}
.chulizhong {
  color: #003057;
  background-color: #e5eaee;
  border: 0.01rem #003057 solid;
}
.daipingjia {
  color: #825b00;
  background-color: #f2eee5;
  border: 0.01rem #825b00 solid;
}
.yijiejue {
  color: #40a19c;
  background-color: #ebf5f5;
  border: 0.01rem #40a19c solid;
}
.yichehui {
  color: #48a843;
  background-color: #ecf6ec;
  border: 0.01rem #48a843 solid;
}
.conent {
  font-size: 0.28rem;
  line-height: 0.39rem;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  word-break: break-all;
  padding: 0 0.64rem;
  margin: 0.24rem 0;
}
.timeBox {
  display: flex;
  justify-content: space-between;
  font-size: 0.24rem;
  color: #999999;
  height: 0.7rem;
  line-height: 0.7rem;
  padding: 0 0.24rem 0 0.24rem;
  border-top: 0.01rem rgb(223, 222, 222) solid;
}
.timeBox.noneBorder {
  border-top: none;
}
.wushuju {
  margin-top: 2.4rem;
  text-align: center;
}
.wushuju img {
  width: 5.12rem;
  height: 2.84rem;
}
</style>