统一事件列表格式

src/views/incidentList.vue

@@ -19,34 +19,74 @@
             @pulling-up="onPullingUp"
           >
             <div class="conentBox">
-              <div class="conent" v-for="item in items" @click="toIncidentDetails(item)">
+              <div
+                class="conent"
+                v-for="item in items"
+                @click="toIncidentDetails(item)"
+              >
                 <div class="head">
                   <p>
                     <i class="iconfont icon-zuixinbaoxiu newPapir"></i>
-                    事件编号：{{item.incidentsign}}
+                    事件编号：{{ item.incidentsign }}
                     <span
-                      :class="{'btn':true, 'daipingjia':item.state.name=='待评价', 'daijiedan':(item.state.name=='待接单'&&item.handlerUser&&!item.candidateGroups), 'daiqiangdan':(item.state.name=='待接单'&&!item.handlerUser&&item.candidateGroups), 'chulizhong':item.state.name=='处理中', 'yijiejue':item.state.name=='已解决', 'yiguanbi':item.state.name=='已关闭', 'chongxinzhipai':item.state.name=='重新指派'}"
-                    >{{item.state.name=='待接单'?((item.handlerUser&&!item.candidateGroups)?'待接单':'待抢单'):item.state.name}}</span>
+                      :class="{
+                        btn: true,
+                        daipingjia: item.state.name == '待评价',
+                        daijiedan:
+                          item.state.name == '待接单' &&
+                          item.handlerUser &&
+                          !item.candidateGroups,
+                        daiqiangdan:
+                          item.state.name == '待接单' &&
+                          !item.handlerUser &&
+                          item.candidateGroups,
+                        chulizhong: item.state.name == '处理中',
+                        yijiejue: item.state.name == '已解决',
+                        yiguanbi: item.state.name == '已关闭',
+                        chongxinzhipai: item.state.name == '重新指派'
+                      }"
+                      >{{
+                        item.state.name == "待接单"
+                          ? item.handlerUser && !item.candidateGroups
+                            ? "待接单"
+                            : "待抢单"
+                          : item.state.name
+                      }}</span
+                    >
                   </p>
                 </div>
                 <div class="center">
                   <p class="desc">
                     <span class="fl">事件描述：</span>
-                    <span class="grayFont overflowEllipsis2" v-html="item.description"></span>
+                    <span
+                      class="grayFont overflowEllipsis2"
+                      v-html="item.description"
+                    ></span>
                   </p>
                   <p>
-                    报修<span>{{valConfig==1?'人':'科室'}}</span> ：
-                    <span class="grayFont">{{item.contacts}}</span>
+                    报修<span>{{ valConfig == 1 ? "人" : "科室" }}</span> ：
+                    <span class="grayFont">{{ item.contacts }}</span>
+                    <span @click.stop v-if="item.contactsInformation"
+                      ><a :href="'tel:' + item.contactsInformation"
+                        >(<i class="iconfont icon-shouji"></i
+                        >{{ item.contactsInformation }})</a
+                      ></span
+                    >
                   </p>
                 </div>
-                <div class="bottom" @click.stop>
-                  <span class="fl" v-if="!item.contactsInformation"><span>{{valConfig==1?'联系电话':'科室电话'}}</span>：</span>
-                  <span class="fl" v-if="item.contactsInformation"><span>{{valConfig==1?'联系电话':'科室电话'}}</span>：<a :href="'tel:'+item.contactsInformation"><i class="iconfont icon-shouji"></i>{{item.contactsInformation}}</a></span>
-                  <span class="fr">报修时间：{{item.acceptDate}}</span>
+                <div class="bottom">
+                  <span v-if="!item.place"></span>
+                  <span
+                    v-if="item.place"
+                    style="width:70%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;"
+                    >{{ item.place.area.area }} {{ item.place.place }}
+                    {{ item.houseNumber }}</span
+                  >
+                  <span>{{ item.acceptDate | timeFormat("MM-dd HH:mm") }}</span>
                 </div>
               </div>
               <div class="wushuju" v-show="wushuju">
-                <img src="./../../static/images/wushuju.svg" alt>
+                <img src="./../../static/images/wushuju.svg" alt />
                 <p>暂无事件</p>
               </div>
             </div>
@@ -59,9 +99,14 @@
                 <div
                   v-show="props.beforePullDown"
                   class="before-trigger"
-                  :style="{paddingTop: props.bubbleY + 'px'}"
+                  :style="{ paddingTop: props.bubbleY + 'px' }"
                 >
-                  <span :class="{rotate: props.bubbleY > pullDownRefreshThreshold - 80}">↓</span>
+                  <span
+                    :class="{
+                      rotate: props.bubbleY > pullDownRefreshThreshold - 80
+                    }"
+                    >↓</span
+                  >
                 </div>
                 <div class="after-trigger" v-show="!props.beforePullDown">
                   <div v-show="props.isPullingDown" class="loading">
@@ -77,7 +122,7 @@
         </div>
       </div>
     </div>
-    <load-ing v-show="!items.length&&!wushuju"></load-ing>
+    <load-ing v-show="!items.length && !wushuju"></load-ing>
   </div>
 </template>
 <script>
@@ -93,7 +138,7 @@ export default {
     return {
       //   items: _foods,
       loginUser: JSON.parse(localStorage.getItem("loginUser")),
-      valConfig: JSON.parse(localStorage.getItem("valConfig"))-0,//报修主体
+      valConfig: JSON.parse(localStorage.getItem("valConfig")) - 0, //报修主体
       items: [],
       pullDownRefresh: true,
       pullDownRefreshThreshold: 60,
@@ -184,7 +229,7 @@ export default {
       console.log(1111111);
       console.log(data);
       var name = "";
-      if (data.state.value == 'pending') {
+      if (data.state.value == "pending") {
         if (data.handlerUser && !data.candidateGroups) {
           // 指派给人 接单
           name = "Order";
@@ -194,17 +239,17 @@ export default {
         }
       } else if (data.state.value == "reassign") {
         name = "AgainAssign";
-      } else if (data.state.value == 'handler') {
+      } else if (data.state.value == "handler") {
         name = "Processing";
-      } else if (data.state.value == 'resolved') {
+      } else if (data.state.value == "resolved") {
         name = "Solved";
-      } else if (data.state.value == 'close') {
+      } else if (data.state.value == "close") {
         name = "Closed";
       }
       this.$router.push({
         name: name,
         params: {
-          data: data,
+          data: data
         }
       });
     },
@@ -219,7 +264,7 @@ export default {
           searchType: that.searchType,
           idx: that.idx,
           sum: that.sum,
-          incident: {temporary:true}
+          incident: { temporary: true }
         })
         .then(function(res) {
           if (res.data.data.length > 0) {
@@ -231,7 +276,7 @@ export default {
               );
             }
             that.items = that.items.concat(res.data.data);
-          } else if(res.data.data.length <= 0) {
+          } else if (res.data.data.length <= 0) {
             that.wushuju = true;
           }
           that.loadShow = false;
@@ -412,7 +457,7 @@ export default {
   }
 }
 </style>
-<style lang='less' scoped>
+<style lang="less" scoped>
 .cont {
   margin-top: 1.86rem;
 }
@@ -570,9 +615,9 @@ export default {
       border-bottom: 0.01rem solid #e6e6e6;
       padding: 0.24rem 0.48rem;
       p {
-        &.desc{
-        overflow: hidden;
-        max-height: .88rem;
+        &.desc {
+          overflow: hidden;
+          max-height: 0.88rem;
         }
         .grayFont {
           overflow-x: scroll;
@@ -581,8 +626,11 @@ export default {
       }
     }
     .bottom {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
       overflow: hidden;
-      line-height: 0.86rem;
+      height: 0.86rem;
       border-bottom: 0.01rem solid #e6e6e6;
       font-size: 0.24rem;
       color: #999;