usoft-town/pages/repairs/_id/index.vue

<template>
  <div class="repairs">
    <div class="container">
      <div class="repairs-title">
        <div class="title-left">
          <p>服务说明：</p>
          <span>{{ titleData.servedesc }}</span>
        </div>
        <div class="title-right">
          <a :href="'/repairs/' + $route.params.id + '/historicalInfo'"><i class="fa fa-history"/>历史服务申请</a>
        </div>
      </div>
      <div class="repairs-flow">
        <ul class="list-inline">
          <li><span>01 发起申请</span></li>
          <li><i class="fa fa-long-arrow-right"/><span>02 受理派工</span></li>
          <li><i class="fa fa-long-arrow-right"/><span>03 服务预约</span></li>
          <li><i class="fa fa-long-arrow-right"/><span>04 上门服务</span></li>
          <li><i class="fa fa-long-arrow-right"/><span>05 结果反馈</span></li>
          <li><i class="fa fa-long-arrow-right"/><span>06 客户评价</span></li>
        </ul>
      </div>
      <div class="repairs-form">
        <form class="form-horizontal" v-for="(item, index) in formData.formdetail">
          <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" v-model="modelData[index]" :name="item.fd_field" :required="item.fd_allowblank==='f'">
            </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="(list, k) in item.fd_logictype.split(';')">
                <input type="checkbox"
                       :name="item.fd_id"
                       :value="list"
                       :checked="lists[k]"
                       @change="handleInput(index, item.fd_logictype.split(';').length, k)">{{ list }}
              </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
                v-model="modelData[index]"
                type="datetime"
                format="yyyy-MM-dd HH:mm:ss"
                value-format="yyyy-MM-dd HH:mm:ss"
                :picker-options="pickerDate"
                default-time="item.fd_defaultvalue"/>
            </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="list in item.fd_logictype.split(';')">
                <input
                  type="radio"
                  :name="item.fd_id"
                  :value="list"
                  v-model="radioData"
                  @change="handleInputRadio(index)"
                  :checked="item.fd_defaultvalue.search(list)>=0">{{ list }}
              </label>
            </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-right:410px;margin-top:10px;">
              <div class="file-box">
                <el-upload
                  action="/zuul/city/thxz/api/serve/uploadAttach.action"
                  accept="image/jpeg,image/jpg,image/gif,image/bmp,image/png"
                  list-type="picture-card"
                  :on-remove="(file, fileList)=>{return handleRemove(file, fileList, index)}"
                  :on-success="(res)=>{return handleSuccess(res, index)}">
                  <i class="el-icon-plus"/>
                </el-upload>
              </div>
              <div class="file-title">
                <p>上传文档说明： </p>
                <span>为方便物业维修师傅上门服务，您可以在此上传需要维修的图片， 文件大小不超过3M</span>
              </div>
            </div>
          </div>

        </form>
      </div>
      <div class="repairs-btn text-right">
        <button class="btn text-right" @click="submitForm($event)">提交申请</button>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'Repairs',
    layout: 'town',
    fetch ({ store, route }) {
      return Promise.all([
        store.dispatch('loadFormData', { serve_id: route.params.id, operate_type: 'Add', client_type: 'cc', cityId: store.state.option.user.data.currentCity ? store.state.option.user.data.currentCity.id : null})
      ])
    },
    data () {
      return {
        pickerDate: {
          disabledDate (time) {
            return time.getTime() < Date.now()
          }
        },
        keys: {},
        operateid: '',
        fd_fiedid: '',
        operateurl: '',
        modelData: [],
        checkboxData: [],
        radioData: '',
        fileData: []
      }
    },
    computed: {
      user () {
        return this.$store.state.option.user.data
      },
      formData () {
        return this.$store.state.formConfig.formData.data.data
      },
      lists () {
        let listsData = []
        for (let i = 0; i < this.formData.formdetail.length; i++) {
          if (this.formData.formdetail[i].fd_type === 'CBG') {
            let lists = this.formData.formdetail[i].fd_logictype.split(';')
            let defaultList = this.formData.formdetail[i].fd_defaultvalue
            for (let j = 0; j < lists.length; j++) {
              listsData[j] = false
              if (defaultList.search(lists[j]) >= 0) {
                listsData[j] = true
              }
            }
          }
        }
        return listsData
      },
      titleData () {
        return this.$store.state.formConfig.formData.data
      }
    },
    methods: {
      handleSuccess (res, index) {
        if (this.fileData.indexOf(res.id) === -1) {
          this.fileData.push(res.id)
          this.modelData[index] = this.fileData.join(';')
        }
      },
      handleRemove (file, fileList, index) {
        this.fileData = []
        for (let i = 0; i < fileList.length; i++) {
          this.fileData.push(fileList[i].response.id)
        }
        this.modelData[index] = this.fileData.join(';')
      },
      handleInput (index, w, k) {
        let _self = this
        _self.lists[k] = !_self.lists[k]
        for (let i = 0; i <= w; i++) {
          if (_self.lists[i] === true) {
            _self.checkboxData[i] = 1
          }
          if (_self.lists[i] === false) {
            _self.checkboxData[i] = 0
          }
        }
        _self.modelData[index] = _self.checkboxData.join(';')
      },
      handleInputRadio (index) {
        let _self = this
        _self.modelData[index] = _self.radioData
      },
      submitForm (event) {
        event.preventDefault()
        let _self = this
        let datalist = _self.$store.state.formConfig.formData.data
        _self.operateid = datalist.operateid
        _self.operateurl = datalist.operateurl
        for (let [index, value] of datalist.data.formdetail.entries()) {
          _self.keys[value.fd_field] = _self.modelData[index]
        }
        let params = new FormData()
        params.append('data' , JSON.stringify(_self.keys))
        params.append('operate_id' , this.operateid)
        params.append('client_type' , 'cc')
        params.append('cityId' , this.user.currentCity ? this.user.currentCity.id : null)
        let config = {
          headers: {'Content-Type': 'multipart/form-data'}
        }
        // let config = {
        //   headers: {'Content-Type': 'application/x-www-form-urlencoded'},
        //   transformRequest: [function (data) {
        //     let ret = ''
        //     for (let it in data) {
        //       ret += encodeURIComponent(encodeURIComponent(it)) + '=' +
        //         encodeURIComponent(encodeURIComponent(data[it])) + '&'
        //     }
        //     return ret
        //   }]
        // }
        this.$http.post('/' + this.operateurl, params, config)
        // this.$http.post('/' + this.operateurl, { data: JSON.stringify(_self.keys), operate_id: this.operateid, client_type: 'cc', cityId: this.user.currentCity ? this.user.currentCity.id : null })
          .then(response => {
            if (response.data.success) {
              this.$message({
                message: '申请提交成功',
                type: 'success'
              })
              let _self = this
              _self.$router.push('/repairs/' + _self.$route.params.id + '/historicalInfo')
            }
          }, err => {
            console.log(err)
            this.$message.error('申请提交失败')
          })
      }
    }
  }
</script>

<style>
  .el-date-editor.el-input{
    width:100%;
  }
  .el-input__icon+.el-input__inner{
    border:1px solid #cbcbcb;
  }
  .repairs{
    margin-top:54px;
    width:100%;
    border-bottom: 8px solid #cbcbcb;
    padding-bottom:111px;
    background: #fff;
  }
  .container{
    width:1180px;
    padding-right:0;
  }
  .repairs .repairs-title{
    padding-top:40px;
    margin-bottom:40px;
    width:100%;
    display:inline-flex;
    justify-content:space-between;
  }
  .repairs .repairs-title .title-left p{
    font-size: 14px;
    color:#000;
    font-weight: bold;
    line-height: 14px;

  }
  .repairs .repairs-title .title-left span{
    font-size: 14px;
    color:#000;
  }
  .repairs .repairs-title .title-right a{
    color:#333;
  }
  .repairs .repairs-title .title-right a i{
    color:#5280e3;
    margin-right:10px;
  }
  .repairs .repairs-title .title-right a:hover{
    cursor:pointer;
    color:#d82128;

  }
  .repairs .repairs-flow{
    width:100%;
    display: inline-flex;
    margin-bottom:43px;
  }
  .repairs .repairs-flow ul li{
    height:50px;
    padding:0;
  }
  .repairs .repairs-flow ul li span{
    display: inline-block;
    width:150px;
    height:50px;
    line-height: 50px;
    border-radius:30px;
    text-align: center;
    font-size: 18px;
    color:#fff;
  }
  .repairs .repairs-flow ul li:hover span{
    cursor:pointer;
  }
  .repairs .repairs-flow ul li:nth-child(1){
    width:150px;
  }
  .repairs .repairs-flow ul li:nth-child(1) span{
    background: #62cde0;
  }
  .repairs .repairs-flow ul li:nth-child(2) span{
    background: #62afe0;
  }
  .repairs .repairs-flow ul li:nth-child(3) span{
    background: #6289e0;
  }
  .repairs .repairs-flow ul li:nth-child(4) span{
    background: #8662e0;
  }
  .repairs .repairs-flow ul li:nth-child(5) span{
    background: #c162e0;
  }
  .repairs .repairs-flow ul li:nth-child(6) span{
    background: #e062a3;
  }
  .repairs .repairs-flow ul li i{
    display: inline-block;
    padding:0 4px;
    font-size: 45px;
    color:#cacaca;
    position:relative;
    top:12px;
  }
  .repairs .repairs-form{
    width:1164px;
    margin:0 auto;
    border:1px solid #e6e6e6;
    margin-bottom:5px;
    padding:30px 50px 0 30px;
    color:#333;
  }
  .repairs .repairs-form .input-label{
    line-height: 34px;
    font-size: 14px;
    color:#666;
    text-align: right;
  }
  .repairs .repairs-btn button{
    width:228px;
    height:80px;
    color:#fff;
    font-size: 18px;
    text-align: center;
    background: #2f95dd;
  }
  .repairs .repairs-form .checkbox-inline{
    margin-right:10px;
  }
  .repairs .repairs-form .file-box {
    display: inline-block;
    position: relative;
    text-align: center;
    cursor: pointer;
    overflow: hidden;
  }
  .repairs .repairs-form .el-upload-list--picture-card .el-upload-list__item{
    width:120px;
    height:120px;
  }
  .repairs .repairs-form .el-upload--picture-card{
    width:120px;
    height:120px;
    line-height: 120px;
    border:2px solid #cbcbcb;
  }
  .repairs .repairs-form .file-box input
  {
    position: absolute;
    width: 0px;
    height: 0px;
    opacity: 0;
    filter: "alpha(opacity=0)";
    filter: alpha(opacity=0);
    -moz-opacity: 0;
    left: 0px;
    bottom:-15px;
    cursor: pointer;
    z-index: 2;
  }
  .repairs .repairs-form .file-title{
    display: inline-block;
    color:#333;
    font-weight: bold;
    width:410px;
    position:relative;
    top:-40px;
    left:25px;
    margin-right:-410px;
  }
  .repairs .repairs-form .file-title span{
    font-weight: normal;
    color:#cbcbcb;
  }
  .repairs .repairs-form .radio-inline{
    margin-right:10px;
  }
</style>