前端报事单添加，投诉单添加，详情页

PropertyH5/package.json

@@ -21,7 +21,8 @@
     "vant": "^2.12.9",
     "vue": "^2.5.2",
     "vue-router": "^3.0.1",
-    "vuex": "^3.6.2"
+    "vuex": "^3.6.2",
+    "webpack-dev-server": "^2.11.5"
   },
   "devDependencies": {
     "autoprefixer": "^7.1.2",
@@ -74,7 +75,6 @@
     "vue-template-compiler": "^2.5.2",
     "webpack": "^3.12.0",
     "webpack-bundle-analyzer": "^2.9.0",
-    "webpack-dev-server": "^2.11.5",
     "webpack-merge": "^4.1.0"
   },
   "engines": {

PropertyH5/src/common/api/loginApi.js

@@ -69,6 +69,22 @@ export function Insertfdc_pm_repair(data) {
     data
   })
 }
+/* 我要投诉 */
+export function Insertfdc_pm_repairByTousu(data) {
+  return request({
+    url: '/Meter/Insertfdc_pm_repairByTousu',
+    method: 'post',
+    data
+  })
+}
+/* 报修详情 */
+export function GetRepairDetail(code) {
+  return request({
+    url: '/Meter/GetRepairDetail',
+    method: 'get',
+    params:{code}
+  })
+}
 
 /* 登出 */
 export function logout(userid) {

PropertyH5/src/components/GetComplaintList.vue

@@ -34,7 +34,7 @@
         >
           <template #default>
            
-            <van-row class="borderTop">
+            <van-row class="borderTop"  @click="toDetail(item.vrepairapplycode)">
               <van-col span="24">
                 <van-row>
                   <van-col span="5" class="title1">维修类型</van-col>
@@ -143,6 +143,9 @@ export default {
     onClickRight() {
       this.$router.go(0);
     },
+    toDetail(code){  //点击进入详情页
+       this.$router.push('GetRepairDetail?code='+code);
+    }
   },
 };
 </script>

PropertyH5/src/components/GetRepairDetail.vue

@@ -0,0 +1,176 @@
+<template>
+  <div>
+    <van-nav-bar
+      @click-left="onClickLeft"
+      @click-right="onClickRight"
+      style="background-color: #1989fa"
+    >
+      <template #title>
+        <van-col style="color: #ffffff">报修详情</van-col>
+      </template>
+      <template #left>
+        <i
+          class="fa fa-arrow-circle-left"
+          aria-hidden="true"
+          style="color: #ffffff; font-size: 18px"
+        ></i>
+      </template>
+      <template #right>
+        <van-icon name="replay" size="18" color="#ffffff" />
+      </template>
+    </van-nav-bar>
+
+    
+      <van-cell
+          
+          border
+        >
+          <template #default>
+           
+            <van-row class="borderTop"  >
+              <van-col span="24">
+                   <van-row>
+                  <van-col span="5" class="title1">门牌房号</van-col>
+                  <van-col span="19">{{ hname }}</van-col>
+                </van-row>
+                 <van-row>
+                  <van-col span="5" class="title1">业主</van-col>
+                  <van-col span="19">{{ ownername }}</van-col>
+                </van-row>
+                  <van-row>
+                  <van-col span="5" class="title1">报事位置</van-col>
+                  <van-col span="19">{{ data.vplace }}</van-col>
+                </van-row>
+                  <van-row>
+                  <van-col span="5" class="title1">报事内容</van-col>
+                  <van-col span="19">{{ data.vcontent }}</van-col>
+                </van-row>
+                <van-row>
+                  <van-col span="5" class="title1">维修类型</van-col>
+                  <van-col span="19">{{ data.billtypeName }}</van-col>
+                </van-row>
+                  <van-row>
+                  <van-col span="5" class="title1">报修时间</van-col>
+                  <van-col span="19">{{ data.dapplydate }}</van-col>
+                </van-row>
+                 <van-row>
+                  <van-col span="5" class="title1">维修时间</van-col>
+                  <van-col span="19">{{ data.drequiredate }}</van-col>
+                </van-row>
+               
+               <van-row>
+                  <van-col span="5" class="title1">维修状态</van-col>
+                  <van-col span="19" >{{data.vbillstatusName}}</van-col>
+                </van-row>
+              </van-col>
+           
+            </van-row>
+          </template>
+        </van-cell>
+     
+  </div>
+</template>
+
+<script>
+import { GetRepairDetail } from "@/common/api/loginApi.js";
+export default {
+  name: "login",
+  data() {
+    return {
+        hname:'',
+        ownername:'',
+     data: {}, //报修详情信息
+      radio: "", //单选框
+    
+      loading: false,
+      finished: false,
+    };
+  },
+  created: function () {
+    console.info("created");
+    //console.info(this.$util);
+
+    this.$util.persistLogin(this);
+    this.hname=this.$store.state.data.hname;
+    this.ownername=this.$store.state.data.ownername;
+    this.GetRepairDetail();
+  },
+  methods: {
+    GetRepairDetail: function () {
+      var that = this;
+      console.info('router',that.$route);
+      let code=that.$route.query.code;
+      if(that.$util.isEmpty(code))
+      {
+        that.$router.go(-1);
+        return;
+      }
+      GetRepairDetail(code).then((res) => {
+        console.info("GetRepairDetail", res);
+        if (!res.isSuccess) {
+          that.$toast(res.errMsg);
+          return;
+        }
+        this.data=res.data;
+         
+          if(this.data.billtype==2){
+              this.data.billtypeName='整改通知单';
+          }
+          else if(this.data.billtype==3){
+              this.data.billtypeName='投诉单';
+          }
+           else if(this.data.billtype==4){
+              this.data.billtypeName='咨询单';
+          }
+           else if(this.data.billtype==5){
+              this.data.billtypeName='增值服务单';
+          }
+           else{
+              this.data.billtypeName='报事单';
+          }
+
+
+           if(this.data.vbillstatus==2){
+              this.data.vbillstatusName='已处理未回访';
+          }
+          else if(this.data.vbillstatus==3){
+              this.data.vbillstatusName='已回访';
+          }         
+           else{
+              this.data.vbillstatusName='已报事未处理';
+          }
+          
+         
+        
+      });
+    },
+    // 单选按钮点击事件
+    jiaofei: function (event, id) {
+      //console.info("click1 event", event);
+      //console.info("click1 value", id);
+      //console.info("click1", e.target.innerText);
+       this.$toast("缴费业务未开通");
+    },
+    onClickLeft() {
+      // this.$toast('返回')
+      console.info("left");
+      this.$router.go(-1);
+    },
+    onClickRight() {
+      this.$router.go(0);
+    },
+    
+  },
+};
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style scoped>
+.title1 {
+  color: #999;
+}
+.value1 {
+  color: #999;
+  font-size: 18px;
+}
+</style>

PropertyH5/src/components/GetRepaireList.vue

@@ -34,7 +34,7 @@
         >
           <template #default>
            
-            <van-row class="borderTop">
+            <van-row class="borderTop"  @click="toDetail(item.vrepairapplycode)">
               <van-col span="24">
                 <van-row>
                   <van-col span="5" class="title1">维修类型</van-col>
@@ -143,6 +143,9 @@ export default {
     onClickRight() {
       this.$router.go(0);
     },
+    toDetail(code){  //点击进入详情页
+       this.$router.push('GetRepairDetail?code='+code);
+    }
   },
 };
 </script>

PropertyH5/src/components/Insertfdc_pm_repair.vue

@@ -64,9 +64,7 @@
       <van-cell
         title="完成时间"
         v-model="txtdrequiredate"
-       
-        title-class="title1"
-        value-class="value1"
+         class="title1"    
         required
         @click="showFinishDate = true"
       ></van-cell>
@@ -93,9 +91,9 @@
         input-align="right"
       />
       <van-row>
-        <van-col span="5" class="title1">图片上传</van-col>
-        <van-col span="19" >
-          <van-uploader accept="image/*"  v-model="fileList" multiple :max-count="4" :after-read="afterRead" />
+        <van-col span="6" class="title1">图片上传</van-col>
+        <van-col span="18" >
+          <van-uploader accept="image/*"  v-model="fileList" multiple :max-count="3" :after-read="afterRead" @delete="deleteImg"   />
         </van-col>
         
       </van-row>
@@ -166,60 +164,64 @@ export default {
     //保存
     save: function () {
       let that = this;
-      let namePattern=/^\S{1,20}$/;
-      let phonePattern=/^1[3456789]\d{9}$/;
-      if(!namePattern.test(this.name)){
-        this.$toast("姓名不能超过20字");
+       
+      if(this.$util.isEmpty(this.place) ){
+        this.$toast("报事位置不能为空");
         return;
       }
-      //if(!phonePattern.test(this.phone)){
-       // this.$toast("手机格式不正确");
-       // return;
-      //}
-      console.info('sex',this.sex);
-      if(this.sex!=0&&this.sex!=1){
-        this.$toast("请选择性别");
+     if(this.place.length>20){
+        this.$toast("报事位置不能为超过20字");
         return;
-      }
-      console.info("认知途径",this.cognizeWay);
-      if(this.cognizeWay==""){
-        this.$toast("请选择认知途径");
+     }
+       if(this.$util.isEmpty(this.content) ){
+        this.$toast("报修内容不能为空");
         return;
       }
-      let jsonData = {
-        name: that.name,
-        phone: that.phone,
-        sex: that.sex,
-        visitType:that.visitType,
-        remark: that.remark,
-        visitIntention:that.visitIntention,
-        cognizeWay: that.cognizeWay,
-        visitRemark: that.visitRemark,
-      };
-      //console.info("save jsonData", JSON.stringify(jsonData));
+     if(this.place.length>20){
+        this.$toast("报修内容不能为超过100字");
+        return;
+     }
+     let files=[];
+     that.fileList.filter(function(item,i){
+       console.info('item',item);
+       let file={};
+       file.name=item.file.name;
+       file.type=item.file.type;
+       file.size=item.file.size;
+       file.content=item.content;
+       files.push(file);
+       //console.info('item.file', item.file);
+     });
+     console.info(files);
+     //return;
       let data = {
-        userCode: that.$store.state.data.userCode,
-        projectId: that.$store.state.projectId,
-        jsonData: JSON.stringify(jsonData),
+        dfdapplydate: new Date(),
+        txtdrequiredate: that.txtdrequiredate,
+        hcode: that.$store.state.data.hcode,
+        ownerid: that.$store.state.data.ownerid,
+        content: that.content,
+        place: that.place,
+        tel: that.$store.state.data.tel,
+        fileList: files 
       };
+      
       console.info("save", data);
       //return;
-      AddSaClient(data).then((res) => {
-        console.info("AddSaClient", res);
-        if (res.result) {
-          if (res.msg == null) {
-            that.$router.go(-1);
+      Insertfdc_pm_repair(data).then((res) => {
+        console.info("Insertfdc_pm_repair", res);
+        if (res.isSuccess) {
+          if (res.data == 'success') {
+             that.$dialog
+              .alert({
+                message: '报修提交成功',
+              });
+              return;
           } else {
             that.$dialog
               .alert({
-                message: res.msg,
+                message: res.errMsg,
               })
-              .then(() => {
-                // on close
-                if (res.result) {
-                  that.$router.go(-1);
-                }
-              });
+               return;
           }
         } else {
           that.$dialog.alert({
@@ -238,7 +240,15 @@ export default {
     },
     afterRead:function(file){   //文件上传
       // 此时可以自行将文件上传至服务器
-      console.log(file);
+      console.log('file add',file);
+      //this.fileList.push(file);
+      console.info('fileList',this.fileList)
+    },
+    deleteImg:function(file){    //上传组件删除文件时触发
+      
+        console.log('file delete',file);
+       //this.fileList.pop(file);
+       console.info('fileList',this.fileList)
     }
   },
 };
@@ -251,8 +261,7 @@ export default {
   font-size: 15px;
    padding-left:15px;
   text-align: left;
-  margin-top:30px;
-  height: 30px;
+  
 }
 .title2 {
   color: #ff0000;

PropertyH5/src/components/Insertfdc_pm_repairByTousu.vue

@@ -0,0 +1,327 @@
+<template>
+  <div>
+    <van-nav-bar
+      @click-left="onClickLeft"
+      @click-right="onClickRight"
+      style="background-color: #1989fa"
+    >
+      <template #title>
+        <van-col style="color: #ffffff">我要投诉</van-col>
+      </template>
+      <template #left>
+        <i
+          class="fa fa-arrow-circle-left"
+          aria-hidden="true"
+          style="color: #ffffff; font-size: 18px"
+        ></i>
+      </template>
+    </van-nav-bar>
+
+    <van-form @submit="save">
+      <van-field
+        v-model="hname"
+        name="门牌房号"
+        label="门牌房号"
+       
+        input-align="right"
+        readonly
+        required
+         :rules="[{ required: true, message: '请输入门牌房号' }]"
+      />
+      <van-field
+        v-model="ownername"
+        name="业主"
+        label="业主"
+        placeholder="请输入"
+        input-align="right"
+        type="tel"
+        readonly
+        required
+        :rules="[{ required: true, message: '请输入业主' }]"
+      ></van-field>
+      <van-field
+        v-model="tel"
+        name="投诉人电话"
+        label="投诉人电话"
+        placeholder="请输入"
+        input-align="right"
+        type="tel"
+        readonly
+        required
+        :rules="[{ required: true, message: '请输入投诉人电话' }]"
+      ></van-field>
+      <van-field
+        v-model="place"
+        name="投诉位置"
+        label="投诉位置"
+        placeholder="请输入投诉位置"
+        input-align="right"
+        type="tel"
+        required
+        :rules="[{ required: true, message: '请输入投诉位置' }]"
+      ></van-field>
+      
+      <van-cell
+        title="完成时间"
+        v-model="txtdrequiredate"
+         class="title1"    
+        required
+        @click="showFinishDate = true"
+      ></van-cell>
+      <van-popup v-model="showFinishDate" round position="bottom">
+          <van-datetime-picker
+          v-model="txtdrequiredateSel"
+          type="date"
+          title="选择年月日"
+          :min-date="minDate"
+          :max-date="maxDate"
+          @cancel="showFinishDate = false"
+          @confirm="onConfirm"
+        />
+      
+      </van-popup>
+      <van-field
+        v-model="content"
+        rows="5"
+        autosize
+        label="投诉内容"
+        type="textarea"
+        placeholder="请输入"
+        class="remarkBottom"
+        input-align="right"
+      />
+      <van-row>
+        <van-col span="6" class="title1">图片上传</van-col>
+        <van-col span="18" >
+          <van-uploader accept="image/*"  v-model="fileList" multiple :max-count="3" :after-read="afterRead" @delete="deleteImg"   />
+        </van-col>
+        
+      </van-row>
+      
+      <van-row class="bottom">
+        <van-col span="12" class="bgGrey" @click="cancel">
+          <van-icon name="close" />取消
+        </van-col>
+        <van-col span="12" class="bgRed">
+          <van-button square icon="success" style="margin-bottom:5px;" type="danger" native-type="submit">保存</van-button>
+        </van-col>
+      </van-row>
+    </van-form>
+  </div>
+</template>
+
+<script>
+import { Insertfdc_pm_repairByTousu} from "@/common/api/loginApi.js";
+import "../assets/css/resetvant.css";
+export default {
+  name: "login",
+  data() {
+    return {
+       hname:'',
+       ownername:'',
+       tel:'',
+       place:'',
+       txtdrequiredate:'',
+       txtdrequiredateSel:new Date(),
+       content:'',
+       fileList:[],
+       showFinishDate:false,
+       minDate: new Date(2018, 0, 1),
+      maxDate: new Date(2025, 10, 1),
+     
+    };
+  },
+  created: function () {
+    console.info("created");
+    //console.info(this.$util);
+    this.$util.persistLogin(this);
+    
+    this.getDefault();
+  },
+  computed: {
+    //计算属性
+    completion: function () {},
+  },
+  methods: {
+    getDefault:function(){
+       this.hname=this.$store.state.data.hname;
+       this.ownername=this.$store.state.data.ownername;
+       this.tel=this.$store.state.data.tel;
+       this.txtdrequiredate=this.$util.getCurrentDate();
+        
+    },
+    onConfirm: function (date,index) {
+        console.info('onConfirm',date);
+        this.showFinishDate=false;
+       
+       this.txtdrequiredate=this.$util.getDate(date);
+      
+    },
+  
+    cancel: function () {
+      this.$router.go(-1);
+    },
+    //保存
+    save: function () {
+      let that = this;
+      
+       if(this.$util.isEmpty(this.content) ){
+        this.$toast("投诉内容不能为空");
+        return;
+      }
+     if(this.place.length>20){
+        this.$toast("投诉内容不能为超过100字");
+        return;
+     }
+     let files=[];
+     that.fileList.filter(function(item,i){
+       console.info('item',item);
+       let file={};
+       file.name=item.file.name;
+       file.type=item.file.type;
+       file.size=item.file.size;
+       file.content=item.content;
+       files.push(file);
+       //console.info('item.file', item.file);
+     });
+     console.info(files);
+     //return;
+      let data = {
+        dfdapplydate: new Date(),
+        txtdrequiredate: that.txtdrequiredate,
+        hcode: that.$store.state.data.hcode,
+        ownerid: that.$store.state.data.ownerid,
+        content: that.content,
+        place: that.place,
+        tel: that.$store.state.data.tel,
+        fileList: files 
+      };
+      
+      console.info("save", data);
+      //return;
+      Insertfdc_pm_repairByTousu(data).then((res) => {
+        console.info("Insertfdc_pm_repairByTousu", res);
+        if (res.isSuccess) {
+          if (res.data == 'success') {
+             that.$dialog
+              .alert({
+                message: '投诉提交成功',
+              });
+              return;
+          } else {
+            that.$dialog
+              .alert({
+                message: res.errMsg,
+              })
+               return;
+          }
+        } else {
+          that.$dialog.alert({
+            message: res.msg,
+          });
+        }
+      });
+    },
+    onClickLeft() {
+      // this.$toast('返回')
+      console.info("left");
+      this.$router.go(-1);
+    },
+    onClickRight() {
+      this.$router.go(0);
+    },
+    afterRead:function(file){   //文件上传
+      // 此时可以自行将文件上传至服务器
+      console.log('file add',file);
+      //this.fileList.push(file);
+      console.info('fileList',this.fileList)
+    },
+    deleteImg:function(file){    //上传组件删除文件时触发
+      
+        console.log('file delete',file);
+       //this.fileList.pop(file);
+       console.info('fileList',this.fileList)
+    }
+  },
+};
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style scoped >
+.title1 {
+  color: #aaa;
+  font-size: 15px;
+   padding-left:15px;
+  text-align: left;
+  
+}
+.title2 {
+  color: #ff0000;
+  text-align: left;
+  font-size: 13px;
+}
+.infoTitle {
+  color: #aaa;
+  text-align: left;
+}
+.value1 {
+  color: #000;
+  font-size: 13px;
+}
+.infoValue {
+  color: #0606af;
+}
+.size {
+  font-size: 16px;
+}
+.header {
+  margin-top: 10px;
+  height: 70px;
+  border-bottom: #cfcfcf solid 3px;
+}
+.titleClass {
+  border-bottom: #000 solid 1px;
+}
+.van-tab {
+  color: #ff0000;
+}
+.redColor {
+  color: #ff0000;
+}
+.bgBlue {
+  background: #a0a0f7;
+  height: 30px;
+  margin-top: 5px;
+  padding-top: 5px;
+}
+.bgBill {
+  height: 30px;
+  border-bottom: #aaa solid 1px;
+  padding-top: 5px;
+}
+.bottom {
+  /* left:0; */
+  bottom: 0px;
+  position: fixed;
+  width: 100%;
+}
+.bgGrey {
+  background: #999999;
+  height: 35px;
+  justify-content: center;
+  padding-top: 5px;
+}
+.bgRed {
+  background: #ff0000;
+  height: 35px;
+  justify-content: center;
+  color: #ffffff;
+  font-weight: 900;
+  padding-top: 5px;
+}
+.remarkBottom {
+  margin-bottom: 40px;
+}
+</style>
+
+ 

PropertyH5/src/components/saleindex.vue

@@ -22,7 +22,7 @@
         </router-link>
       </van-grid-item>
       <van-grid-item>
-        <router-link to="/filterhouse">
+        <router-link to="/Insertfdc_pm_repairByTousu">
           <van-image
             :src="require('@/assets/img/tanhao.png')"
             width="50"

PropertyH5/src/main.js

@@ -3,6 +3,7 @@
 import Vue from 'vue'
 import App from './App'
 import router from './router'
+import route from 'vue-router'
 import store from './store'
 import * as util from './common/util.js'
 import less from 'less'
@@ -71,6 +72,7 @@ Vue.use(Button)
 new Vue({
   el: '#app',
   router,
+  route,
   store,
   components: { App },
   template: '<App/>'

PropertyH5/src/router/index.js

@@ -8,7 +8,8 @@ import GetOwnerHouse from "@/components/GetOwnerHouse.vue";
 import GetRepaireList from "@/components/GetRepaireList.vue";
 import GetComplaintList from "@/components/GetComplaintList.vue";
 import Insertfdc_pm_repair from "@/components/Insertfdc_pm_repair.vue";
-
+import GetRepairDetail from "@/components/GetRepairDetail.vue";
+import Insertfdc_pm_repairByTousu from "@/components/Insertfdc_pm_repairByTousu.vue";
 
 Vue.use(Router)
 //console.info("获取根目录", window.location.pathname);
@@ -59,5 +60,15 @@ export default new Router({
       name: 'Insertfdc_pm_repair',
       component: Insertfdc_pm_repair
     },
+    {     //报修详情
+      path: '/GetRepairDetail',
+      name: 'GetRepairDetail',
+      component: GetRepairDetail
+    },
+    {     //我要投诉
+      path: '/Insertfdc_pm_repairByTousu',
+      name: 'Insertfdc_pm_repairByTousu',
+      component: Insertfdc_pm_repairByTousu
+    },
   ]
 })