itsm-wx-handle/src/components/EventInformation/index.vue

<template>
  <div class="eventInformation">
    <div class="head">
      <p>
        <i class="iconfont icon-zuixinbaoxiu newPapir"></i>
        事件单号：{{ model.incident.incidentsign }}
        <span
          :class="{
            fr: true,
            btn: true,
            daijiedan:
              model.incident.state.value == 'pending' &&
              model.incident.handlerUser &&
              !model.incident.candidateGroups,
            daiqiangdan:
              model.incident.state.value == 'pending' &&
              !model.incident.handlerUser &&
              model.incident.candidateGroups
          }"
          >{{
            model.incident.state.value == "pending"
              ? model.incident.handlerUser && !model.incident.candidateGroups
                ? "待接单"
                : "待接单"
              : model.incident.state.name
          }}</span
        >
      </p>
    </div>
    <p>
      <span class="fl">故障现象</span>
      <span class="fr">{{ model.incident.category.category }}</span>
    </p>
    <p class="desc">
      <span class="fl">故障描述</span>
      <span class="grayFont fr" v-html="model.incident.description"></span>
    </p>
    <div class="shows" id="shows">
      <p v-if="valConfig == 2">
        <span class="fl">报修科室</span>
        <span class="fr">{{
          model.incident.department ? model.incident.department.dept : ""
        }}</span>
      </p>
      <p v-if="valConfig == 1">
        <span class="fl">报修人</span>
        <span class="fr">{{ model.incident.requester.name }}</span>
      </p>
      <p v-if="valConfig == 2">
        <span class="fl">联系人</span>
        <span class="fr">{{ model.incident.contacts }}</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 icon-shouji"></i
            >{{ model.incident.contactsInformation }}</a
          ></span
        >
      </p>
      <p>
        <span class="fl">预约时间</span>
        <span class="fr">{{ model.incident.yyTime || "" }}</span>
      </p>
      <p class="boeder_B">
        <span class="fl">事件来源</span>
        <span class="fr">{{ model.incident.source.name }}</span>
      </p>
      <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">{{
          model.incident.handlerUser ? model.incident.handlerUser.name : ""
        }}</span>
      </p>
      <p>
        <span class="fl">处理人电话</span>
        <span class="fr" v-if="!model.incident.handlerUser"></span>
        <span class="fr" v-if="model.incident.handlerUser"
          ><a :href="'tel:' + model.incident.handlerUser.phone"
            ><i class="iconfont icon-shouji"></i
            >{{ model.incident.handlerUser.phone }}</a
          ></span
        >
      </p>
      <p>
        <span class="fl">优先级</span>
        <span class="fr">{{
          model.incident.priority ? model.incident.priority.name : ""
        }}</span>
      </p>
      <p>
        <span class="fl">逾期响应时间</span>
        <span class="fr">{{ model.incident.overdueResponseDate }}</span>
      </p>
      <p>
        <span class="fl">逾期解决时间</span>
        <span class="fr">{{ model.incident.overdueTime }}</span>
      </p>
      <p class="boeder_B">
        <span class="fl">详细地址</span>
        <span class="fr" v-if="model.incident.place">{{ model.incident.branchName }} {{ model.incident.place.area.area }} {{ model.incident.place.place }} {{ model.incident.houseNumber }}</span>
        <span class="fr" v-else>{{ model.incident.branchName }}</span>
      </p>
      <div v-if="hcsjList.length">
        <p>耗材</p>
        <div class="hcTable">
          <table>
            <tr>
              <td>耗材名称</td>
              <td>价格</td>
              <td>数量</td>
            </tr>
            <tr v-for="(item, i) in hcsjList" :key="i">
              <td>{{ item.consumable.name }}</td>
              <td>{{ item.extra1 }}</td>
              <td>{{ item.consumablesSum }}</td>
            </tr>
          </table>
        </div>
      </div>
      <p v-if="wxIncidentWithCmdb == 1">
        <span class="fl">资产</span>
        <span class="fr">{{ model.incident.assetId || "无" }}</span>
      </p>
    </div>
  </div>
</template>

<script>
export default {
  name: "EventInformation",
  data() {
    return {
      wxIncidentWithCmdb: localStorage.getItem("wxIncidentWithCmdb"), //是否绑定资产
      incidentWithConsumable: localStorage.getItem("incidentWithConsumable"), //是否绑定耗材
      valConfig: JSON.parse(localStorage.getItem("valConfig")) - 0, //报修主体
      hcsjList: [] //绑定的耗材列表，展示
    };
  },
  props: ["model", "id"],
  methods: {
    // 获取事件上绑定的耗材
    getHcBySj() {
      this.$http
        .post("service/cmdb/storeList", {
          data: { type: 2, source: "1627", sourceId: this.id }
        })
        .then(result => {
          if (result.data.status == 200) {
            this.hcsjList = result.data.data;
          }
        });
    }
  },
  created() {
    if (this.incidentWithConsumable == 1) {
      this.getHcBySj();
    }
  }
};
</script>

<style lang="less" scoped>
.eventInformation {
  .boeder_B {
    border-bottom: 0.01rem solid #ccc;
  }
  .shows {
    display: none;
  }
  .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;
            &.icon-icon_weizuo {
              color: #005495;
            }
            &.icon-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;
        }
      }
    }
  }
}
</style>