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

<template>
  <div class="againAssign">
    <div class="conentBox">
      <div class="header">汇总单</div>
      <div v-if="$route.params.incidentId" class="conent">
        <div class="navBar">
          <div>事件单号：{{ summaryObj.incidentDTO.incidentsign }}</div>
          <div>报修科室：{{ summaryObj.incidentDTO.department ? summaryObj.incidentDTO.department.dept : '' }}</div>
          <div>登记时间：{{ summaryObj.incidentDTO.acceptDate }}</div>
          <div>处理人/组：{{ summaryObj.incidentDTO.groupORHandlerUser }}</div>
          <div>事件描述：{{ summaryObj.incidentDTO.description }}</div>
        </div>
        <div class="label headtop" id="info">耗材清单</div>

        <div class="info">
          <ConsumableMaterial v-for="item in summaryObj.consumableList" :key="item.id" class="bottomBorder" :model="item" :id="item.id" :summaryId="summaryId" :incidentId="$route.params.incidentId" :noClick="true"></ConsumableMaterial>
          <p class="textCenter">
            <span>耗材总价：<strong class="fontBold">{{ totalPriceConsumable }}元</strong></span>
          </p>
          <div class="label" id="progress">工时清单</div>
          <WorkHourManagement v-for="item in summaryObj.workHourManagementList" :key="item.id" class="bottomBorder" :model="item" :id="item.id" :summaryId="summaryId" :incidentId="$route.params.incidentId" :summaryObj="summaryObj" :noClick="true"></WorkHourManagement>
          <p class="textCenter">
            <span>工时总价：<strong class="fontBold">{{ totalPriceWorkHourManagement }}元</strong></span>
          </p>
          <p class="textCenter total">
            <span>汇总单总价：<strong class="fontBold">{{ totalMaintenancePrice }}元</strong></span>
          </p>
        </div>
      </div>
      <load-ing v-if="loadShow"></load-ing>
      <promp-ting
        :conents="promptingConent"
        :status="promptingStatus"
      ></promp-ting>
    </div>
    <seiminModel ref="seiminModel"></seiminModel>
    <div class="sub">
      <cube-button type="submit" @click="goBackDetail()">返回事件详情</cube-button>
    </div>
  </div>
</template>
<script>
import seiminModel from "./../custom/seiminModel";
import LoadIng from "./loading.vue";
import PrompTing from "./prompting.vue";
import ConsumableMaterial from "../components/ConsumableMaterial/index.vue";
import WorkHourManagement from "../components/WorkHourManagement/index.vue";

export default {
  data() {
    return {
      // 耗材总价格
      totalMaintenancePrice: null,
      totalPriceConsumable: null,
      totalPriceWorkHourManagement: null,
      summaryObj: {},
      loginUser: JSON.parse(localStorage.getItem("loginUser")),
      id: "",
      model: {}, //提交数据
      loadShow: false,
      pro_hides: false, //展开/收起处理进度
      name: "",
      label: "incidentInfo", //顶部快速定位
      modelData: {
        incident: {}
      }, //上传的model
      model: {
        handleCategory: "", //处理方式
        closecode: "", //关闭代码
        category: [], //确认事件分类
        handleDescription: "", //处理方案
        knowledge: false, //是否提交知识库
        isHelper: false, //是否需要协同
        solutionType: [], //知识库类型
        handlerUser: "", //升级/转派对象
        isupreason: "", //升级原因
        transferReason: "", //转派原因
        synergeticReason: "", //协同原因
        selectArea: "",
        selectPlace: "",
        transferMode: "", //转派方式
        branch: "", //院区
        duty: "" //责任科室
      },
      promptingConent: "",
      promptingStatus: ""
    };
  },
  methods: {
    // 刷新
    refresh(){
      this.getInfo();
    },
    // 新增耗材
    addConsumableMaterial() {
      this.$router.push({
        path: `/main/ConsumableList/${this.$route.params.incidentId}/${this.summaryId}/${this.$route.params.processInstanceId}`
      });
    },
    // 新增工时
    addWorkHourManagementOne() {
      this.$router.push({
        path: `/main/WorkHourManagementOne/${this.$route.params.incidentId}/${this.summaryId}/${this.$route.params.processInstanceId}`
      });
    },
    // 获取汇总单信息
    getInfo() {
      const toast = this.$createToast({
        txt: "Loading...",
        mask: true
      });
      toast.show();
      this.$http.post("/service/bpm/data/querySummaryDoc", {incidentId: this.$route.params.incidentId}).then(res => {
        toast.hide();
        if(res.data.status == 200){
          this.summaryObj = res.data;
          this.totalMaintenancePrice = this.summaryObj.totalMaintenancePrice;
          this.totalPriceConsumable = this.summaryObj.consumablePrice;
          this.totalPriceWorkHourManagement = this.summaryObj.workHourPrice;

          this.summaryId = res.data.summaryId;
        }else if(res.data.status == 201){
          // 事件第一次绑定汇总单
          this.summaryId = res.data.summaryId;
        }
      });
    },
    // 返回事件详情
    goBackDetail() {
      this.$router.go(-1);
    }
  },
  mounted() {
    console.log(this.$route);
    console.log(this.modelData, this.model, 999);
    this.getInfo();
  },
  components: {
    seiminModel,
    LoadIng,
    PrompTing,
    ConsumableMaterial,
    WorkHourManagement,
  }
};
</script>

<style lang="less" scoped>
.bottomBorder {
  border-bottom: 0.2rem solid #eee;
}
.textCenter {
  text-align: center;
  &.total{
    border-top: 0.2rem solid #eee;
  }
}
.addConsumableMaterial {
  border-top: 0.01rem solid #e6e6e6;
  border-bottom: 0.01rem solid #e6e6e6;
}
.hcList {
  display: flex;
  align-items: center;
  margin-top: 0.1rem;
}
.hcItem {
  flex: 4;
  margin: 0 0.05rem;
}
.hcItemClose {
  flex: 1;
  font-size: 0.4rem;
}
.addHc {
  width: 90%;
  height: 1rem;
  margin: 0 auto;
  border: 0.02rem solid #ccc;
  display: flex;
  justify-content: center;
  align-items: center;
}
.addHc .cubeic-add {
  font-size: 0.8rem;
}
.newIncident .cube-form-group {
  border-bottom: 0.02rem solid rgb(245, 245, 245);
}
.newIncident .sub .cube-btn {
  margin-top: 1.1rem;
}
.btn_plcaeholde .cube-btn {
  padding-left: 0;
  padding-right: 0;
  text-align: left;
  color: inherit;
  background: none;
  border: none;
}
.btn_plcaeholde .cube-btn:active {
  background-color: #fff;
}
.btn_plcaeholde .cube-btn::after {
  content: ">";
  float: right;
  margin-right: 0.15rem;
}
.cube-form_standard .cube-upload-def .cube-upload-btn,
.cube-form_standard .cube-upload-def .cube-upload-file {
  margin-left: 3% !important;
}
.sub {
  background: #ececec;
  display: flex;
  .cube-btn {
    background-color: #005395 !important;
    margin: 0.2rem auto;
    border-radius: 8px;
  }
}
.cube-picker-wheel-item {
  text-overflow: ellipsis;
}
</style>
<style lang="less" scoped>
.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;
}
.incidentTitle {
  .titleRefer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    .titleTxtArea {
      font-size: 0.3rem;
      color: #333;
      height: 2rem;
      width: 62%;
      &:focus {
        outline: none;
      }
    }
    .abtn {
      display: inline-block;
      width: 37%;
      text-align: center;
      height: 0.48rem;
      color: #005395;
      font-size: 0.28rem;
    }
  }
}
.form-custom {
  .cube-form-item {
    .cube-btn {
      padding-left: 0;
      padding-right: 0;
      text-align: left;
      color: inherit;
      background: none;
      border: none;
    }
  }
}

.label {
  background-color: rgb(238, 238, 238);
  height: 0.6rem;
  line-height: 0.6rem;
  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;
  }
}

.zhidu {
  display: flex;
  height: 0.7rem;
  line-height: 0.7rem;
  border-bottom: 0.02rem solid rgb(245, 245, 245);
  div:nth-child(1) {
    width: 27.5%;
    padding-left: 6%;
  }
}

.bgColor {
  background-color: white;
  &.newIncident {
    padding-top: 1.84rem;
  }
}

.uplod {
  padding: 0 0.24rem;
  border-bottom: 0.02rem solid rgb(245, 245, 245);
}
.handleRadio {
  border-bottom: 0.02rem solid rgb(245, 245, 245);
}
.synerBox {
  height: 3rem;
  overflow: scroll;
}

i.iconfont.blue {
  color: #005395;
  // &::after {
  //   content: "";
  //   width: 0.01rem;
  //   height: 0.4rem;
  //   background: #005395;
  //   position: relative;
  //   display: block;
  //   left: 0.14rem;
  // }
}
.againAssign {
  .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%;
    line-height: 0.6rem;
    background-color: #fff;
    font-size: 0.28rem;
    padding-top: 0.88rem;
    color: #999;
    div {
      padding: 0 0.2rem;
      &.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;
        }
      }
    }
  }

  .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;
    }
  }
  .conentBox {
    width: 100%;
    .conent {
      font-size: 0.32rem;
      font-weight: 400;
      line-height: 0.45rem;
      // border-bottom: 0.16rem solid #e5e5e5;

      .shows {
        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;
                  &.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;
              }
            }
          }
        }
      }
      .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>