CZC/operationSupport/src/views/workOrders/popups/details.vue

<template>
  <div class="lookDetail">
    <div class="left">
      <div class="list-item">
        <div class="formContent-item_title">工单信息</div>
        <el-form
          ref="form"
          label-width="110px"
        >
          <template v-for="(item, index) in formLook">
            <el-col
              :span="!!item.span ? item.span : 12"
              :key="index"
            >
              <el-form-item :label="item.label">
                <template v-if="item.slot">
                  <template v-if="item.slot === 'orderType'">
                    <span v-if="thisItem['orderType'] == 1">业主报修</span>
                    <span v-else-if="thisItem['orderType'] == 2">内部报修</span>
                    <span v-else>--</span>
                  </template>
                  <template v-if="item.slot === 'repairFile' && !!thisItem['repairFile']">
                    <div
                      class="imgVdio"
                      v-for="item in thisItem['repairFile'].split(',')"
                      :key="item"
                    >
                      <video
                        v-if="typeVideo(item)"
                        :src="item"
                        @click="lookVideos(item)"
                      ></video>
                      <el-image
                        class="imgs"
                        v-else
                        :src="item"
                        :preview-src-list="[item]"
                      ></el-image>
                    </div>
                  </template>
                </template>
                <template v-else>{{ thisItem[item.prop] || '--' }}</template>
              </el-form-item>
            </el-col>
          </template>
        </el-form>
      </div>
      <div class="list-item">
        <div class="formContent-item_title">处理信息</div>
        <el-form
          ref="form"
          label-width="110px"
        >
          <template v-for="(item, index) in formLook2">
            <el-col
              :span="!!item.span ? item.span : 12"
              :key="index"
            >
              <el-form-item :label="item.label">
                <template v-if="item.slot">
                  <template v-if="item.slot === 'urgencyDegree'">
                    <span
                      v-if="thisItem['urgencyDegree'] == 2"
                      class="redText"
                    >紧急</span>
                    <span v-else-if="thisItem['urgencyDegree'] == 1">普通</span>
                    <span v-else>--</span>
                  </template>
                  <template v-if="item.slot === 'handleResult'">
                    <span
                      v-if="thisItem['handleResult'] == 2"
                      class="redText"
                    >无法处理</span>
                    <span
                      v-else-if="thisItem['handleResult'] == 1"
                      class="greenText"
                    >成功处理</span>
                    <span v-else>--</span>
                  </template>
                  <template v-if="item.slot === 'handleFile' && !!thisItem['handleFile']">
                    <div
                      class="imgVdio"
                      v-for="item in thisItem['handleFile'].split(',')"
                      :key="item"
                    >
                      <video
                        v-if="typeVideo(item)"
                        :src="item"
                        @click="lookVideos(item)"
                      ></video>
                      <el-image
                        class="imgs"
                        v-else
                        :src="item"
                        :preview-src-list="[item]"
                      ></el-image>
                    </div>
                  </template>
                </template>
                <template v-else>{{ thisItem[item.prop] || '--' }}</template>
              </el-form-item>
            </el-col>
          </template>
        </el-form>
      </div>
    </div>
    <div class="right">
      <div class="list-item">
        <div class="formContent-item_title">工单进度追踪</div>
        <template v-for="(item, index) in thisItem['progressList']">
          <div
            class="steps"
            :key="index"
          >
            <div class="steps-left">
              <img
                src="@assets/img/point_yiwancheng@2x.png"
                alt
              />
              <div
                class="steps-left-line"
                v-if="index !== thisItem['progressList'].length - 1"
              ></div>
            </div>
            <div class="steps-right">
              <div class="steps-right-title">
                <span>{{ item.createDate }}</span>
                <span
                  class="status"
                  v-if="index === thisItem['progressList'].length - 1"
                >{{
                                    thisItem.orderStatus | filterWorkStatus
                                }}</span>
              </div>
              <div
                class="steps-right-content"
                v-if="item.type == 1"
              >
                <span>报修人：</span>
                <span>{{ thisItem['repairName'] }}</span>
              </div>
              <template v-else>
                <div class="steps-right-content">
                  <span>处理人：</span>
                  <span>{{ item.name }}</span>
                </div>
                <div
                  class="steps-right-content"
                  v-if="!!item.operation"
                >
                  <span>操作：</span>
                  <span>{{ item.operation }}</span>
                </div>
              </template>
            </div>
          </div>
        </template>
        <!-- <div v-if="thisItem.orderStatus == 5">待评价111111</div> -->
        <div
          v-if="thisItem.orderStatus == 6"
          class="grate"
        >
          {{this.thisItem.orderStatus}}
          <div class="grate-rate">
            <div style="margin-top: 3px">评价星级：</div>
            <div>
              <i
                class="el-icon-star-on"
                style="color: #ffca3b; font-size: 26px; margin-right: 5px"
                v-for="(item, index) in thisItem.evaluation"
                :key="index"
              ></i>
            </div>
          </div>
          <div class="grate-rate">评价内容： {{ thisItem.evaluationContent }}</div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  props: ['params'],
  data () {
    return {
      formLook: [
        {
          label: '所属社区:',
          prop: 'communityName'
        },
        {
          label: '地址:',
          prop: 'address'
        },
        {
          label: '报修人:',
          prop: 'repairName'
        },
        {
          label: '手机号:',
          prop: 'repairPhone'
        },
        {
          label: '报修时间:',
          prop: 'createDate'
        },
        {
          label: '工单类型:',
          prop: 'orderType',
          slot: 'orderType'
        },
        {
          label: '报修内容:',
          prop: 'repairContent',
          span: 24
        },
        {
          label: '图片/视频:',
          prop: 'repairFile',
          slot: 'repairFile',
          span: 24
        }
      ],
      formLook2: [
        {
          label: '维修人员:',
          prop: 'handleName'
        },
        {
          label: '紧急程度:',
          prop: 'urgencyDegree',
          slot: 'urgencyDegree'
        },
        {
          label: '预期完成时间:',
          prop: 'expectCompletionTime'
        },
        {
          label: '实际完成时间:',
          prop: 'completionTime'
        },
        {
          label: '处理结果:',
          prop: 'handleResult',
          slot: 'handleResult',
          span: 24
        },
        {
          label: '图片/视频:',
          prop: 'handleFile',
          slot: 'handleFile',
          span: 24
        }
      ],
      thisItem: {},
      thisActive: 0
    };
  },

  methods: {
    getDatali (id) {
      this.$http
        .get('/czc-community/workOrder/find/' + id)
        .then(({ data, msg, status }) => {
          if (status == 0) {
            this.thisItem = data;
            this.thisActive = !!data.progressList.length ? Number(data.progressList.length) - 1 : 0;
          }
        })
        .catch(() => { });
    },
    typeVideo (str) {
      let type = str.slice(str.lastIndexOf('.') + 1, str.length);
      let videoType = ['mp4'];
      return videoType.includes(type);
    },
    lookVideos (src) {
      new Promise((resolve) => {
        this.$store.dispatch('addPopup', {
          url: '/lookVideo.vue',
          width: '600px',
          height: '500px',
          props: {
            src: src,
            callback: resolve
          },
          showConfirmButton: true,
          showCancelButton: true,
          hideStar: true,
          title: '查看视频'
        });
      }).then(() => {
        this.mixins_search();
      });
    }
  },
  created () {
    this.getDatali(this.params.id);
  }
};
</script>
<style lang="scss" scoped>
@import '@assets/css/public-style.scss';
.lookDetail {
    /deep/ .el-form-item__label,
    /deep/.el-form-item__content {
        font-size: 12px;
    }
    /deep/ .el-step__title.is-finish,
    /deep/ .el-step__title.is-process,
    /deep/ .el-step__description.is-finish {
        font-weight: 500 !important;
        color: #424656 !important;
    }

    display: flex;
    justify-content: space-between;
    .formContent-item_title {
        clear: both;
    }
    .left {
        width: 600px;
    }
    .right {
        width: calc(100% - 620px);
    }
    .list-item {
        clear: inherit;
    }
}
.imgVdio {
    width: 80px;
    height: 60px;
    display: inline-block;
    margin-right: 10px;
    video,
    img {
        width: 100%;
        height: 100%;
        cursor: pointer;
    }
}

.steps {
    display: flex;
    img {
        width: 20px;
        vertical-align: -webkit-baseline-middle;
    }
    .steps-left {
        margin-right: 10px;
        .steps-left-line {
            width: 2px;
            height: calc(100% - 40px);
            margin: 10px auto;
            background-color: $mainBgColor;
        }
    }
    .steps-right {
        width: 100%;
        line-height: 30px;
        // margin-bottom: 10px;
        .steps-right-title {
            font-weight: 600;
            display: flex;
            justify-content: space-between;
            .status {
                color: $mainBgColor;
                font-weight: 400;
            }
        }
        .steps-right-content {
            font-size: 12px;
            color: #303133;
            display: flex;
            span:first-child {
                margin-right: 10px;
            }
        }
    }
}
.grate {
    margin-left: 30px;
    .grate-rate {
        display: -webkit-box;
        align-items: center;
        font-size: 12px;
        color: #303133;
        margin-bottom: 10px;
    }
}
</style>