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

<template>
  <div class="solved">
    <div class="conentBox">
      <div class="header">处理方案</div>
      <div v-if="model.incident" class="conent">
        <div class="navBar">
          <div class="fl">
            <a
              :class="{ active: actives == 'info' }"
              href="javascript:;"
              @click="toInfo('info')"
              >事件信息</a
            >
          </div>
          <div class="fl">
            <a
              :class="{ active: actives == 'handlerInfo' }"
              href="javascript:;"
              @click="toInfo('handlerInfo')"
              >处理信息</a
            >
          </div>
          <!-- <div class="fl">
            <a
              :class="{ active: actives == 'handlerLog' }"
              href="javascript:;"
              @click="toInfo('handlerLog')"
              >沟通记录</a
            >
          </div> -->
          <div class="fl">
            <a
              :class="{ active: actives == 'progress' }"
              href="javascript:;"
              @click="toInfo('progress')"
              >处理进度</a
            >
          </div>
        </div>

        <div class="label headtop" id="info">事件信息</div>
        <div class="info">
          <EventInformation :model="modelData" :id="id"></EventInformation>
          <p class="info_hide">
            <span class="fl hide" @click="hides()" v-if="!item_hides"
              >展开详情 >></span
            >
            <span class="fl hide" @click="hides()" v-if="item_hides"
              >隐藏详情<<</span
            >
          </p>
          <div class="imgs-container" v-if="imgs.length">
            <div class="imgs-cont" @click="showImgs(imgs)">
              <img
                v-if="
                  img.suffix == 'jpeg' ||
                  img.suffix == 'jpg' ||
                  img.suffix == 'gif' ||
                  img.suffix == 'png' ||
                  img.suffix == 'svg' ||
                  img.suffix == 'pdf'
                "
                :src="img.previewUrl"
                v-for="(img, index) in imgs"
                class="imgs"
              />
              <p v-else>
                <a :href="[img.previewUrl]">{{ img.name }}</a>
              </p>
            </div>
          </div>

          <div class="label" id="handlerInfo">处理信息</div>
          <p>
            <span class="fl">处理人</span>
            <span class="fr">{{
              model.incident.acceptUser ? model.incident.acceptUser.name : ""
            }}</span>
          </p>
          <p>
            <span class="fl">联系电话</span>
            <span class="fr" v-if="!model.incident.contactsInformation"></span>
            <span class="fr" v-if="model.incident.contactsInformation"
              ><a :href="'tel:' + model.incident.contactsInformation"
                ><i class="iconfont dsit-shouji"></i
                >{{ model.incident.contactsInformation }}</a
              ></span
            >
          </p>
          <p>
            <span class="fl">处理方式</span>
            <span class="fr showwrap">{{
              model.incident.handleCategory
                ? model.incident.handleCategory.name
                : ""
            }}</span>
          </p>
          <p>
            <span class="fl">关闭代码</span>
            <span class="fr">{{
              model.incident.closecode ? model.incident.closecode.name : ""
            }}</span>
          </p>
          <p class="desc">
            <span class="fl">处理方案</span>
            <span
              class="fr grayFont"
              v-html="model.incident.handleDescription"
            ></span>
          </p>
          <!-- <p>
            <span class="fl" v-if="model.incident.synergeticReason">协同对象</span>
            <span class="fl" v-else-if="model.isupreason">升级对象</span>
            <span class="fl" v-else-if="model.transferReason">转派对象</span>
            <span class="fr">{{model.incident.handlerUser?model.incident.handlerUser.name:''}}</span>
          </p>
              <p v-if="model.incident.synergeticReason">
                <span class="fl" >协同原因</span>
                <span class="fr">{{model.incident.synergeticReason}}</span>
              </p>
              <p v-if="model.isupreason">
                <span class="fl">升级原因</span>
                <span class="fr">{{model.isupreason}}</span>
              </p>
              <p v-if="model.transferReason">
                <span class="fl">转派原因</span>
                <span class="fr" >{{model.transferReason}}</span>
              </p> -->
          <!-- <HandlerLog :data="model.incident.handlerLogs" id="handlerLog"></HandlerLog> -->
          <div class="label" id="progress">处理进度</div>
          <div
            :class="{ progress: true, progressHide: !pro_hides }"
            id="progressBox"
          >
            <div class="progress_info" v-for="item in progressInfo">
              <div class="progress_info_L">{{ item.activityName }}</div>
              <div class="progress_info_R">
                <div class="time">
                  <i
                    :class="{
                      iconfont: true,
                      'dsit-icon_weizuo': item.endTime != '',
                      'dsit-icon_zhengzaijinx': item.endTime == '',
                    }"
                  ></i>
                  <span class="text1">
                    {{ item.startTime | timeFormat("MM-dd HH:mm:ss") }}
                    <template v-if="item.userName">
                      ，{{ item.userName }}
                    </template>
                  </span>
                </div>
                <div :class="{ cont: true, blue: item.endTime != '' }">
                  <p class="text2" v-if="item.desc" v-html="item.desc"></p>
                </div>
              </div>
            </div>
          </div>

          <p class="info_hide">
            <span class="fl hide" @click="proHides()">{{
              pro_hides ? "隐藏详情 <<" : "展开详情 >>"
            }}</span>
          </p>

          <!-- <div
            class="form"
            v-if="model.incident.handlerUser.id == loginUser.id"
          >
            <div class="txtLabel">
              <div class="txt fl handler">
                <span style="color:red;">*</span>是否已解决：
              </div>
              <cube-select
                class="selectGroup fl"
                v-model="isclose"
                :options="iscloseArr"
              ></cube-select>
            </div>
            <div class="txtLabel">
              <div class="txt fl">
                <span style="color:red;">*</span> 结果类型:
              </div>
              <cube-select
                class="selectGroup fl"
                v-model="handleResult"
                :options="handleResultArr"
              ></cube-select>
            </div>
            <div class="txtLabel">
              <div class="txt fl">满意度评价:</div>
              <cube-select
                class="selectGroup fl"
                v-model="degree"
                :options="degreeArr"
              ></cube-select>
            </div>
            <div class="txtLabel">
              <div class="txt fl">回访备注:</div>
              <cube-input v-model="model.incident.visitRemarks"></cube-input>
            </div>
            <cube-form-group class="sub">
              <cube-button type="submit" @click="subVali()">提交</cube-button>
            </cube-form-group>
          </div> -->
        </div>
      </div>
      <load-ing v-if="!model.incident"></load-ing>
    </div>
  </div>
</template>
<script>
import LoadIng from "./../views/loading.vue";
import EventInformation from './../components/EventInformation/index.vue'
// import HandlerLog from "./../views/handlerLog.vue";
export default {
  data() {
    return {
      id: "",
      loginUser: JSON.parse(localStorage.getItem("loginUser")),
      selected: 1,
      isclose: "close", //是否已解决
      iscloseArr: [
        {
          text: "已解决",
          value: "close",
        },
        {
          text: "未解决",
          value: "notsolved",
        },
      ],
      handleResult: "", //结果类型
      handleResultArr: [], //结果类型
      degree: "",
      degreeArr: [],
      visitRemarks: "", //回访备注
      item_hides: false,
      item_hides1: false,
      pro_hides: false, //展开/收起处理进度
      actives: "info",
      processInstanceId: "",
      progressInfo: [], //处理进度
      imgs: [], //图片
      model: {}, //提交数据
    };
  },
  components: {
    LoadIng,
    EventInformation,
    // HandlerLog
  },
  methods: {
    //   获取事件数据
    getParamsData() {
      var that = this;
      that.$http
        .get(
          "/service/form/renderForm/closeform/" +
            that.processInstanceId +
            "/" +
            that.loginUser.id +
            "/" +
            that.id,
          {}
        )
        .then(function (res) {
          console.log(res.data);
          that.model = res.data.model;
          that.model.msgflag = "已解决";
          //seimin
          localStorage.setItem("modelData", JSON.stringify(that.model));
          that.getProgressInfo();
        });
    },
    //展示图片
    showImgs(imgs){
      this.$createImagePreview({
        imgs:imgs.map(v=>v.previewUrl)
      }).show()
    },
    // 获取图片
    getImgs() {
      var that = this;
      that.$http
        .get(
          "/service/common/common/listAttachment/incident/" +
            that.processInstanceId,
          {}
        )
        .then(function (res) {
          console.log(res.data);
          that.imgs = res.data.data.splice(0, 3);
          console.log(that.imgs);
        });
    },
    // 获取处理进度
    getProgressInfo() {
      var that = this;
      that.$http
        .post(
          "/service/bpm/bpm/flowTracingCustom/" + that.processInstanceId,
          {}
        )
        .then(function (res) {
          console.log(res.data);
          that.progressInfo = res.data.data;
          //沟通记录startcaca
          if (that.model.incident.handlerLogs) {
            //添加日志
            that.model.incident.handlerLogs.forEach((v) => {
              that.progressInfo.push({
                startTime: v.opTime,
                endTime: 1,
                desc: v.opValue,
                userName: v.userName,
                activityName: "事件处理",
              });
            });
          }
          //处理数据
          that.progressInfo.forEach((v) => {
            if (!v.endTime) {
              v.endTime = 1;
            }
            v.startTime = new Date(v.startTime).getTime();
          });
          var kaishi = that.progressInfo.shift();
          var jiedan = that.progressInfo.shift();
          that.progressInfo.sort(function (o, c) {
            return c.startTime - o.startTime;
          });
          that.progressInfo.length && (that.progressInfo[0].endTime = "");
          that.progressInfo.push(jiedan);
          that.progressInfo.push(kaishi);
          console.log(that.progressInfo);
          //沟通记录end
        });
    },
    // 获取结果类型
    getHandlerRes() {
      var that = this;
      that.$http
        .post("/service/common/common/getDictionary", {
          type: "list",
          key: "incident_handleresult",
        })
        .then(function (res) {
          console.log(res.data);
          // that.handleResultArr = res.data;
          res.data.forEach(function (v, i) {
            that.handleResultArr.push({
              text: v.name,
              value: v.id,
            });
          });
        });
    },
    // 获取满意度评价
    getDegree() {
      var that = this;
      that.$http
        .post("/service/common/common/getDictionary", {
          type: "list",
          key: "incident_degree",
        })
        .then(function (res) {
          console.log(res.data);
          // that.degreeArr = res.data;
          res.data.forEach(function (v, i) {
            that.degreeArr.push({
              text: v.name,
              value: v.id,
            });
          });
        });
    },
    //隐藏显示详情
    hides() {
      this.item_hides = !this.item_hides;
      $("#shows").slideToggle();
    },
    //隐藏显示详情
    hides1() {
      this.item_hides1 = !this.item_hides1;
      $("#shows1").slideToggle();
    },
    // 处理进度隐藏/展开
    proHides() {
      if (!this.pro_hides) {
        $("#progressBox").animate({
          height: $("#progressBox")[0].scrollHeight,
        });
      } else {
        $("#progressBox").animate({ height: "1.7rem" });
      }
      this.pro_hides = !this.pro_hides;
    },
    // 快速定位
    toInfo(id) {
      this.actives = id;
      $("body,html").animate(
        {
          scrollTop:
            $("#" + id).offset().top -
            $(".header")[0].offsetHeight -
            $(".navBar")[0].offsetHeight,
        },
        260
      );
    },
    // 提交
    subVali() {
      var that = this;
      delete that.model.handlerCode;
      that.model.handler_code = "resolve";
      that.model.isclose = that.isclose;
      if (that.model.isclose == "close") {
        delete that.model.receive_code;
      }
      that.model.incident.handleResult = { id: that.handleResult };
      that.model.loginUser = that.loginUser;
      if (that.degree) {
        that.model.incident.degree = { id: that.degree };
      }

      console.log(that.model);
      if (!that.model.incident.handleResult) {
        $("#fade").fadeIn();
        that.promptingConent = "提交失败,请填写必填信息!";
        that.promptingStatus = false;
        setTimeout(function () {
          $("#fade").fadeOut();
        }, 2000);
      }

      that.$http
        .post(
          "/service/bpm/bpm/completeTask/" +
            that.model.incident.taskId +
            "/" +
            that.loginUser.id,
          that.model
        )
        .then(function (res) {
          if (res.data.status == 200) {
            $("#fade").fadeIn();
            that.promptingConent = "恭喜您,提交成功!";
            that.promptingStatus = true;
            that.dialog = that
              .$createDialog({
                type: "alert",
                title: "提交成功",
                content: "点击返回首页",
                icon: "cubeic-right",
                onConfirm: (e, promptValue) => {
                  that.$router.push({ path: "/main" });
                },
              })
              .show();
            setTimeout(function () {
              $("#fade").fadeOut();
            }, 2000);
          }
        });
    },
  },
  created() {
    // seimin
    this.processInstanceId = this.$route.params.data
      ? this.$route.params.data.processInstanceId
      : JSON.parse(localStorage.getItem("modelData")).incident
          .processInstanceId;
    this.id = this.$route.params.data
      ? this.$route.params.data.id
      : JSON.parse(localStorage.getItem("modelData")).incident.id;
    this.getParamsData();
    this.getImgs();
    this.getHandlerRes();
    this.getDegree();
  },
};
</script>
<style lang="less" scoped>
i.iconfont {
  &.blue {
    color: #005395;
    // &::after {
    //   content: "";
    //   width: 0.01rem;
    //   height: 0.4rem;
    //   background: #005395;
    //   position: relative;
    //   display: block;
    //   left: 0.14rem;
    // }
  }
  &.blue1 {
    color: #005395;
  }
}
.solved {
  .header {
    width: 100%;
    height: 0.88rem;
    line-height: 0.88rem;
    text-align: center;
    color: #fff;
    font-size: 0.37rem;
    background: linear-gradient(#2e2f32, #414246);
    position: fixed;
    top: 0;
    z-index: 6;
  }
  .navBar {
    width: 100%;
    height: 0.96rem;
    line-height: 0.96rem;
    background-color: #fafafa;
    font-size: 0.28rem;
    position: fixed;
    top: 0.88rem;
    div {
      width: 33.33%;
      text-align: center;
      &.p50 {
        width: 49.99%;
      }
      a {
        display: inline-block;
        height: 0.9rem;
        width: 1.7rem;
        padding: 0 0.1rem;
        &.active {
          color: #005395;
          border-bottom: 0.06rem solid #005395;
        }
      }
    }
  }

  .headtop {
    margin-top: 1.84rem;
  }
  .label {
    background-color: #eeeeee;
    height: 0.6rem;
    line-height: 0.58rem;
    padding-left: 0.2rem;
    font-size: 0.24rem;
    color: #666666;
    span {
      font-size: 0.2rem;
      display: inline-block;
      margin-left: 0.08rem;
      color: #999999;
    }
    &.formLabel {
      background-color: #fff;
    }
  }
  .txtLabel {
    width: 100%;
    overflow: hidden;
    padding: 0.32rem 0.24rem 0.32rem 0.32rem;
    .txt {
      width: 25%;
      color: #666;
      &.handler {
        width: 40%;
      }
    }
    .selectGroup {
      width: 62%;
    }
    .cube-input {
      width: 62%;
    }
  }
  .conentBox {
    width: 100%;
    .conent {
      font-size: 0.32rem;
      font-weight: 400;
      line-height: 0.45rem;
      // border-bottom: 0.16rem solid #e5e5e5;

      .shows {
        display: none;
      }

      .shows1 {
        display: none;
      }
      .boeder_B {
        border-bottom: 0.01rem solid #ccc;
      }
      p {
        &.desc {
          overflow: hidden;
        }
        .grayFont {
          width: 75%;
          text-align: right;
          overflow-x: scroll;
        }
      }
      .bottom {
        overflow: hidden;
        line-height: 0.86rem;
        border-bottom: 0.01rem solid #e6e6e6;
        font-size: 0.24rem;
        color: #999;
        padding: 0 0.24rem 0 0.48rem;
      }
      .info {
        color: #999;
        font-size: 0.28rem;
        overflow: hidden;
        .head {
          border-bottom: 0.01rem solid #e6e6e6;
          p {
            padding: 0.24rem 0.3rem;
            i {
              color: #00559d;
            }
          }
        }
        p {
          line-height: 0.4rem;
          padding: 0.1rem 0.24rem;
          overflow: hidden;
          .overflowEllipsis2 {
            margin-left: 1.96rem;
          }
        }
        .info_hide {
          padding: 0.2rem 0.24rem;
          border-bottom: 0.01rem solid #e6e6e6;
          .hide {
            color: #00559d;
          }
        }
        .imgs-container {
          a {
            color: #03c !important;
            &:visited {
              color: #551a8b !important;
            }
          }
          img {
            width: 1.5rem;
            height: 1.5rem;
            margin-right: 0.7rem;
            &:nth-child(1) {
              margin-left: 0.75rem;
            }
          }
        }

        .progress {
          padding: 0.2rem 0.2rem;
          overflow: hidden;
          transition-duration: 0.2s;
          transition-timing-function: linear;
          &.progressHide {
            height: 1.7rem;
          }
          .progress_info {
            overflow: hidden;
            margin-bottom: 0.1rem;
            &:nth-last-child(1) {
              .cont {
                border: none !important;
              }
            }
            .progress_info_L {
              float: left;
              color: #333;
              max-width: 18%;
            }
            .progress_info_R {
              float: right;
              margin-left: 0.09rem;
              width: 80%;
              font-size: 0.25rem;
              .time {
                i {
                  margin-left: -0.15rem;
                  &.dsit-icon_weizuo {
                    color: #005495;
                  }
                  &.dsit-icon_zhengzaijinx {
                    color: #48a843;
                    font-size: 0.37rem;
                  }
                }
                span {
                  margin-left: 0.15rem;
                }
              }
              .cont {
                border-left: 1px solid #999;
                padding-left: 0.4rem;
                min-height: 0.4rem;
                &.blue {
                  border-left: 1px solid #005395;
                }
              }

              .text1 {
                font-size: 0.15rem;
              }
              .text2 {
                color: #666;
                word-break: break-all;
              }
              p {
                padding: 0;
              }
            }
          }
        }
      }
      .txtLabel {
        width: 100%;
        overflow: hidden;
        padding: 0.32rem 0.24rem 0.32rem 0.32rem;
        .txt {
          width: 30%;
          color: #666;
        }
        .cube-textarea-wrapper {
          width: 62%;
        }
      }
      .sub {
        background: #ececec;
        .cube-btn {
          background-color: #005395 !important;
          width: 90%;
          margin: 0.2rem auto;
          border-radius: 8px;
        }
      }
    }
  }
  .showwrap {
    width: 75%;
    text-align: right;
  }
}
</style>