usoft-town/pages/repairs/_id/historicalInfo/_fdid.vue

<template>
  <div class="order-info">
    <div class="container">
      <div class="order-title">
        <div class="title-left">
          <span>园区服务</span> &gt;
          <span>历史服务信息</span> &gt;
          <span>订单号：{{ formAttr.rp_code }}</span>
        </div>
        <div class="title-right">
          <a :href="'/repairs/' + $route.params.id + '/historicalInfo'"><i class="fa fa-history"/>历史服务申请</a>
        </div>
      </div>
      <div class="order-flow">
        <ul class="list-inline">
          <li v-for="item in processList">
            <i class="fa fa-file-text-o" v-if="item.time"/>
            <span v-if="item.time">{{ item.status }}</span>
            <span v-if="item.time">{{ item.time }}</span>
          </li>
        </ul>
      </div>
      <div class="order-form">
        <form class="form-horizontal" v-for="item in formData.formconfigs">
          <div class="form-group" v-if="item.FD_TYPE === 'SS'">
            <div class="col-xs-2 input-label">{{ item.FD_CAPTION }}：</div>
            <div class="col-xs-10" >
              <input type="text" class="form-control" :placeholder="formAttr[item.FD_FIELD]" disabled>
            </div>
          </div>

          <div class="form-group" v-if="item.FD_TYPE === 'CBG'">
            <div class="col-xs-2 input-label">{{ item.FD_CAPTION }}：</div>
            <div class="col-xs-10">
              <label class="checkbox-inline" v-for="attr in item.FD_LOGICTYPE.split(';')">
                <input type="checkbox" disabled :value="attr" :name="item.FD_CAPTION" :checked="formAttr[item.FD_FIELD] ? formAttr[item.FD_FIELD].search(attr)>=0 : false">{{ attr }}
              </label>
            </div>
          </div>

          <div class="form-group" v-if="item.FD_TYPE === 'D'">
            <div class="col-xs-2 input-label">{{ item.FD_CAPTION }}：</div>
            <div class="col-xs-10" >
              <el-date-picker
                type="datetime"
                readonly
                :placeholder="formAttr[item.FD_FIELD]"
                value-format="yyyy-MM-dd HH-mm-ss"/>
            </div>
          </div>

          <div class="form-group" v-if="item.FD_TYPE === 'FF'">
            <div class="col-xs-2 input-label">{{ item.FD_CAPTION }}：</div>
            <div class="col-xs-10" style="padding-top:20px;">
              <div class="file-box">+
                <!--<img src="" style="width:120px; height:120px;">-->
              </div>
            <!--<div class="file-title">-->
              <!--<p>上传文档说明： </p>-->
              <!--<span>为方便物业维修师傅上门服务，您可以在此上传需要维修的图片， 文件大小不超过3M</span>-->
            <!--</div>-->
            </div>
          </div>

          <div class="form-group" v-if="item.FD_TYPE === 'RG'">
            <div class="col-xs-2 input-label">{{ item.FD_CAPTION }}：</div>
            <div class="col-xs-10">
              <label class="radio-inline" v-for="attr in item.FD_LOGICTYPE.split(';')">
                <input type="radio" disabled name="item.FD_CAPTION" :value="attr" v-model="formAttr[item.FD_FIELD]" :checked="attr===formAttr[item.FD_FIELD]">{{ attr }}
              </label>
            </div>
          </div>
        </form>
      </div>
    </div>
  </div>
</template>

<script>
    export default {
      name: 'HistoricalInfoId',
      layout: 'town',
      data () {
        return {
//          order_id: this.route.params.fdid
        }
      },
      fetch ({ store, route }) {
        return Promise.all([
          store.dispatch('loadFormData', { serve_id: route.params.id, id: route.params.fdid, client_type: 'cc', cityId: store.state.option.user.data.currentCity ? store.state.option.user.data.currentCity.id : null }),
          store.dispatch('loadServiceProcess', { serve_id: route.params.id, id: route.params.fdid, client_type: 'cc', cityId: store.state.option.user.data.currentCity ? store.state.option.user.data.currentCity.id : null })
        ])
      },
      computed: {
        formData () {
          return this.$store.state.formConfig.formData.data.datas
        },
        formAttr () {
          return this.formData.formdata[0]
        },
        processList () {
          return this.$store.state.serviceProcess.processInfo.data.process
        }
      }
    }
</script>

<style scoped>
.order-info{
  padding-top:90px;
  padding-bottom:40px;
  color:#333;
  background: #fff;
}
  .container{
    width:1180px;
    padding:0 10px;
  }
  .order-info .order-title{
    width:100%;
    display:inline-flex;
    justify-content:space-between;
  }
  .order-info .order-title .title-left span{
    margin:0 2px;
  }
  .order-info .order-title .title-left span:last-child{
    color:#d82128;
  }
  .order-info .order-title .title-right a{
    color:#333;
  }
  .order-info .order-title .title-right a i{
    color:#5280e3;
    margin-right:10px;
  }
  .order-info .order-title .title-right a:hover{
    cursor:pointer;
    color:#d82128;
  }
  .order-info .order-flow{
    padding:55px 10px;
  }
  .order-info .order-flow .list-inline{
    display: inline-flex;
    justify-content: space-between;
    width:100%;

  }
  .order-info .order-flow .list-inline li{
    width:80px;
    height:160px;
    text-align: center;
  }
  .order-info .order-flow .list-inline li i{
    display: block;
    width:80px;
    height:80px;
    border-radius: 50%;
    font-size: 40px;
    line-height: 80px;
    color:#fff;
    margin-bottom:5px;
  }
  .order-info .order-flow .list-inline li:nth-child(1) i{
    background: #62cde0;
  }
  .order-info .order-flow .list-inline li:nth-child(2) i{
    background: #62afe0;
  }
  .order-info .order-flow .list-inline li:nth-child(3) i{
    background: #6289e0;
  }
  .order-info .order-flow .list-inline li:nth-child(4) i{
    background: #8662e0;
  }
  .order-info .order-flow .list-inline li:nth-child(5) i{
    background: #c162e0;
  }
  .order-info .order-flow .list-inline li:nth-child(6) i{
    background: #e062a3;
  }
  .order-info .order-flow .list-inline li span{
    display:block;
    font-size: 12px;
    line-height: 25px;
  }
.order-info .order-form{
  border:1px solid #e6e6e6;
  margin-bottom:5px;
  padding:30px 50px 0 30px;
  min-height:200px;
}
.order-info .order-form .input-label{
  line-height: 34px;
  font-size: 14px;
  color:#666;
  text-align: right;
}
.order-info .order-form .checkbox-inline{
  margin-right:10px;
}
.order-info .order-form .radio-inline{
  margin-right:10px;
}
.order-info .order-form .file-box
{
  display: inline-block;
  position: relative;
  width: 120px;
  height: 120px;
  line-height: 100px;
  text-align: center;
  cursor: pointer;
  overflow: hidden;
  z-index: 1;
  font-size: 120px;
  border:1px solid #cbcbcb;
  border-radius:5px;
  color:#cbcbcb;
}
.order-info .order-form .file-box input
{
  position: absolute;
  width: 120px;
  height: 120px;
  opacity: 0;
  filter: "alpha(opacity=0)";
  filter: alpha(opacity=0);
  -moz-opacity: 0;
  left: 0px;
  top: 0px;
  cursor: pointer;
  z-index: 2;
}
</style>