product_wx/pages/subPackages/reportRepair/index.vue

<template>
  <div class="repair-box">
    <div class="repair-content fixed-page-content">
      <div class="white-box page-1">
        <div class="page-1-head" @click="goNavigator('repairRecord')">
          <i class="iconfont icon-daichulihetong"></i>
          <span>报事记录</span>
        </div>
      </div>
      <div class="white-box page-2">
        <div class="cell-item">
          <p class="label">当前企业</p>
          <p class="tit">{{companyName}}</p>
        </div>
        <div class="cell-item">
          <p class="label required">您是想</p>
          <div class="tit">
            <van-radio-group v-model="form.type">
              <van-radio name="1" checked-color="#976CEB" >报事</van-radio>
              <van-radio name="2" checked-color="#976CEB">咨询</van-radio>
            </van-radio-group>
          </div>
        </div>
        <div class="block-cell-item">
          <p class="label">快捷选择</p>
          <div class="tit">
            <ul class="custom-select-list">
              <li
                v-for="item in quickList"
                v-if="item.value!==''"
                :key="item.value"
                :class="{
                  active: quickSleced.value && item.value === quickSleced.value,
                }"
                @click="quickSelect(item)"
              >
                {{ item.label }}
              </li>
            </ul>
            <van-field
              v-model="form.description"
              rows="4"
              autosize
              type="textarea"
              maxlength="100"
              placeholder="输入文字进行报事报修描述"
              show-word-limit
            >
            </van-field>
          </div>
        </div>
      </div>
      <div class="white-box page-3">
        <div class="cell-item">
          <p class="label required">位置</p>
          <div class="tit">
            <van-radio-group v-model="form.position">
              <van-radio
                :name="item.val"
                checked-color="#976CEB"
                v-for="item in positionList"
                :key="item.val"
                @change="changePosition(item.val)"
                >{{ item.lable }}</van-radio
              >
            </van-radio-group>
          </div>
        </div>
        <div class="block-cell-item">
          <p class="label">
            补充说明<span
class="tips"
              >（支持图片/视频上传限20M内，最多6张）</span
            >
          </p>
          <div class="tit">
              <van-uploader
                  :multiple="true"
                  v-model="fileUrls[0]"
                  :max-count="6"
                  :after-read="afterRead"
                  :before-delete="beforeDelete"
                  capture="camera"
                  :accept="'image/*'"
              >
              </van-uploader>
          </div>
        </div>
        <div class="cell-item">
          <p class="label">报事人</p>
          <p class="tit">{{form.userId}}</p>
        </div>
      </div>
    </div>
    <div class="repair-bottom bottom-button">
      <button class="btn" @click="submit">提交</button>
    </div>
  </div>
</template>
<script>
// import Base from '@/pages/base/base'
// import axios from 'axios'
// import { add } from '../../service/api_repair'
// import { getCompanyById } from '@/service/api_road_show'
import {
  add,
  getCompanyById2,
} from "@/js_sdk/http";
// import { Toast } from 'vant'
// import auth from '@/service/auth'
export default {

    data() {
        return {
            dc_key: ['QUICK_SELECTION'],
            reportTypeSleced: '1',
            quickSleced: {},
            quickList: [
                // {
                //     val: '1',
                //     lable: '挂件安装'
                // },
            ],
            positionSleced: '1',
            positionList: [
                {
                    val: '1',
                    lable: '室内'
                },
                {
                    val: '2',
                    lable: '公区'
                }
            ],
            fileUrlList: [],
            fileUrls: [],
            companyName: '',

            form: {
                groupId: '',
                companyId: '',
                type: '1',
                serviceType: '',
                description: '',
                position: '1',
                userId: auth.currUser().trueName + '-' + auth.currUser().phoneNo,
                fileUrl: '',
                status: 'unAcceptance'
            }
        }
    },
    // mixins: [Base],
    mounted() {
        this.initDict(this.dc_key).then((res) => {
            this.quickList = this.dc_data.QUICK_SELECTION
        })
        getCompanyById2({ id: auth.currUser().id, type: '2,3' }).then(res => {
            this.form.companyId = res.data.id
            this.companyName = res.data.businessName
        })
    },
    methods: {
    /**
     *
     */
        quickSelect(item) {
            if (this.quickSleced.value && this.quickSleced.value === item.value) {
                this.quickSleced = {}
            } else {
                this.quickSleced = item
                // this.form.description = item.lable
                this.$set(this.form, 'description', item.label)
            }
        },
        /**
     * 上传文件
     */
        afterRead(file) {
            if (file instanceof Array) {
                file.map((v) => {
                    this.uploadImg(v)
                })
            } else {
                this.uploadImg(file)
            }
        },
        beforeDelete(file, detail) {
            // this.handleImagUrlList = []
            const vm = this
            // name.index代表图片的索引
            vm.fileUrlList.splice(detail.index, 1)
            return (file, name) => {
                const fileIndex = name.index
                vm.fileUrlList[detail.index].splice(fileIndex, 1)
            }
        },
        /**
         * 上传图片
         */
        uploadImg(file) {
            const _this = this
            const formParam = new FormData() // 创建form对象
            formParam.append('file', file.file)// 通过append向form对象添加数据
            console.log(formParam.get('file')) // FormData私有类对象，访问不到，可以通过get判断值是否传进去
            // upload(formParam).then((res) => {
            //     console.log(res)
            // })
            const config = {
                headers: {
                    'Content-Type': 'multipart/form-data',
                    'MVVM-Key': String(new Date().getTime()),
                    'xx': 'anything'
                } // 这里是重点，需要和后台沟通好请求头，Content-Type不一定是这个值
            } // 添加请求头
            return new Promise((resolve, reject) => {
                axios.post('/smartParkH5Server/wx/fileController/upload', formParam, config)
                    .then(response => {
                        let files = response.data.data.substring(1, response.data.data.length)
                        files = files.substring(0, files.length - 1)
                        _this.fileUrlList.push(_this.$common.castEval(files))
                    }).catch((err, x) => {
                        reject(err, x)
                    })
            })
        },
        submit() {
            if (this.quickSleced.value == null || this.quickSleced.value === '') {
                Toast('请选择服务类型')
                return
            }

            if(this.fileUrlList == null || this.fileUrlList == [] || this.fileUrlList == undefined || this.fileUrlList.length <= 0){
                Toast('请上传补充说明图片')
                return
            }

            this.form.groupId = '870261874875170816'// 园区
            this.form.fileUrl = JSON.stringify(this.fileUrlList)
            this.form.userId = auth.currUser().id + '-' + auth.currUser().trueName + '-' + auth.currUser().phoneNo
            this.form.serviceType = this.quickSleced.value
            this.form.createdBy = auth.currUser().id
            add(this.form).then((res) => {
                Toast('填报成功')
                this.$router.push({
                    path: '/repairRecord'
                })
            })
        },
        changePosition(val) {

        }
    }
}
</script>
<style lang="scss" scoped>
.repair-box {
  width: 100%;
  height: 100%;
  .page-1 {
    font-size: 30px;
    color: var(--violetColor2);
    padding: 30px;
    box-sizing: border-box;
    .page-1-head {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      i {
        font-size: 38px;
        margin-right: 10px;
      }
    }
  }
  .page-2 {
    .van-cell {
      padding: 20px;
      border-radius: 10px;
      background: $page-color-base;
      box-sizing: border-box;
      textarea {
        height: 60px;
      }
    }
  }
}
</style>