|
@@ -1,286 +1,157 @@
|
|
|
<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 class="reportRepair">
|
|
|
+ <div class="reportBody">
|
|
|
+ <div class="record">
|
|
|
+ 报事记录 <img src="./image/rightIcon.png" class="recordImg">
|
|
|
</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>
|
|
|
+ <ul class="detailUl">
|
|
|
+ <li class="detailLi">
|
|
|
+ <span class="liName">当前企业</span>
|
|
|
+ <span class="liInfo">无锡XXXXX有限公司</span>
|
|
|
+ </li>
|
|
|
+ <li class="detailLi">
|
|
|
+ <span class="liName">
|
|
|
+ <span style="color: red;margin-right: 10rpx;">*</span>
|
|
|
+ 您是想
|
|
|
+ </span>
|
|
|
+ <span class="liInfo">
|
|
|
+ <label class="radio" @click.stop="isCheck=true" >
|
|
|
+ <radio value="报事" :checked="isCheck" color="#0365F9"/>报事
|
|
|
+ </label>
|
|
|
+ <label class="radio" @click.stop="isCheck=false" >
|
|
|
+ <radio value="咨询" :checked="!isCheck" color="#0365F9"/>咨询
|
|
|
+ </label>
|
|
|
+ </span>
|
|
|
+ </li>
|
|
|
+ <li class="detailLi2">
|
|
|
+ <span class="liName">
|
|
|
+ 快捷选择
|
|
|
+ </span>
|
|
|
+ <div class="detailLi2Box">
|
|
|
+ <div class="detailLi2BoxTop">
|
|
|
+ <div class="checkItem" :class="item.isCheck?'checked':''" v-for="item in checkList" @click="clickCheck(item)">{{item.name}}</div>
|
|
|
+ </div>
|
|
|
<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>
|
|
|
+ :value="form.contant"
|
|
|
+ autosize
|
|
|
+ type="textarea"
|
|
|
+ placeholder="请输入文字进行报事报修描述"
|
|
|
+ class="myField"
|
|
|
+ maxlength="800"
|
|
|
+ show-word-limit
|
|
|
+ />
|
|
|
</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>
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
</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'
|
|
|
- }
|
|
|
+ data(){
|
|
|
+ return{
|
|
|
+ isCheck:false,
|
|
|
+ form:{
|
|
|
+ contant:''
|
|
|
+ },
|
|
|
+ checkList:[
|
|
|
+ {name:'挂件安装',isCheck:true},
|
|
|
+ {name:'我要投诉',isCheck:false},
|
|
|
+ {name:'疏通管道',isCheck:false},
|
|
|
+ {name:'维修线路',isCheck:false},
|
|
|
+ {name:'更换灯泡',isCheck:false},
|
|
|
+ {name:'网络维修',isCheck:false},
|
|
|
+ {name:'保洁服务',isCheck:false},
|
|
|
+ {name:'其他维修',isCheck:false},
|
|
|
+ ]
|
|
|
+ }
|
|
|
+ },
|
|
|
+ methods:{
|
|
|
+ clickCheck(item){
|
|
|
+ item.isCheck = !item.isCheck
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</script>
|
|
|
+<style lang="scss">
|
|
|
+ .reportRepair{
|
|
|
+ .reportBody{
|
|
|
+ margin-top: 24rpx;
|
|
|
+ padding: 38rpx 36rpx;
|
|
|
+ background: white;
|
|
|
+ height: 1416rpx;
|
|
|
+ box-sizing: border-box;
|
|
|
+ .record {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: flex-end;
|
|
|
+ color: #0365F9;
|
|
|
+ font-size: 32rpx;
|
|
|
+ .recordImg{
|
|
|
+ width: 36rpx;
|
|
|
+ height: 36rpx;
|
|
|
+ padding: 5rpx 0 0 10rpx;
|
|
|
+ }
|
|
|
}
|
|
|
- },
|
|
|
- // 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)
|
|
|
+ .detailUl{
|
|
|
+ margin-top: 20rpx;
|
|
|
+ .liName{
|
|
|
+ font-size: 32rpx;
|
|
|
+ color: rgba(51, 51, 51, 1);
|
|
|
+ white-space: nowrap;
|
|
|
+ }
|
|
|
+ .detailLi{
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ padding: 32rpx 0;
|
|
|
+ border-bottom: 2rpx solid #E6E6E6;
|
|
|
+ .liInfo{
|
|
|
+ display: inline-block;
|
|
|
+ text-align: right;
|
|
|
+ max-width: 428rpx;
|
|
|
+ color: rgba(102, 102, 102, 1);
|
|
|
+ font-size: 32rpx;
|
|
|
+ line-height: 38rpx;
|
|
|
+ .radio{
|
|
|
+ margin-left: 64rpx;
|
|
|
+ }
|
|
|
}
|
|
|
- },
|
|
|
- /**
|
|
|
- * 上传图片
|
|
|
- */
|
|
|
- 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
|
|
|
+ }
|
|
|
+ .detailLi2{
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ padding: 32rpx 0;
|
|
|
+ border-bottom: 2rpx solid #E6E6E6;
|
|
|
+ .detailLi2BoxTop{
|
|
|
+ display: flex;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ justify-content: space-between;
|
|
|
+ margin: 12rpx 0;
|
|
|
+ .checkItem{
|
|
|
+ width: 160rpx;
|
|
|
+ height: 64rpx;
|
|
|
+ font-size: 28rpx;
|
|
|
+ color: #666666;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ background: #F5F7FA;
|
|
|
+ border-radius: 8rpx;
|
|
|
+ margin: 12rpx 0;
|
|
|
+ }
|
|
|
+ .checked{
|
|
|
+ background: #0365F9;
|
|
|
+ color: white;
|
|
|
+ }
|
|
|
}
|
|
|
-
|
|
|
- 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;
|
|
|
+ .van-cell {
|
|
|
+ background: #F5F7FA !important;
|
|
|
+ border-radius: 8rpx;
|
|
|
+ font-size: 28rpx;
|
|
|
}
|
|
|
}
|
|
|
- }
|
|
|
-}
|
|
|
</style>
|