vue2-client 1.2.0 → 1.2.3

package/src/base-client/components/ticket/TicketDetailsView/part/TicketDetailsFlow.vue

@@ -1,184 +1,261 @@
-<template>
-  <div>
-    <a-card :bordered="false" title="工单流转历史" :loading="loading">
-      <a-timeline ref="timeline" :pending="pendingText" :reverse="true" mode="alternate" style="max-width: 800px;margin: 0 auto;">
-        <a-timeline-item v-if="index < 3 ? true : advanced" :key="index" v-for="(value,index) in workFLowList" color="green">
-          <div style="color: #0d1a26;font-weight: 500;">
-            <span style="font-size: 16px;">{{ value.name }}</span>
-            <span style="margin-left: 5px;">({{ format(value.created_time,'yyyy-MM-dd hh:mm:ss') }} 至 {{ format(value.end_time,'yyyy-MM-dd hh:mm:ss') }})</span>
-          </div>
-          <div class="antd-pro-pages-profile-advanced-style-stepDescription" >
-            留言：{{ value.note }}
-          </div>
-        </a-timeline-item>
-      </a-timeline>
-      <a-col :md="!advanced && 8 || 24" :sm="24" v-if="workFLowList.length > 3">
-        <span class="table-page-search-submitButtons" :style="advanced && { float: 'right', overflow: 'hidden' } || {} ">
-          <a @click="toggleAdvanced" style="margin-left: 8px">
-            {{ advanced ? '收起' : '展开' }}
-            <a-icon :type="advanced ? 'up' : 'down'"/>
-          </a>
-        </span>
-      </a-col>
-    </a-card>
-  </div>
-</template>
-<script>
-  import { formatDate } from '@vue2-client/utils/util'
-  import { mapState } from 'vuex'
-  import { TicketDetailsViewApi } from '@vue2-client/services/api/TicketDetailsViewApi'
-  import { post } from '@vue2-client/services/api/restTools'
-
-  export default {
-    name: 'TicketDetailsFlow',
-    props: {
-      ticketId: {
-        type: String,
-        required: true
-      },
-      disableCloseBtn: {
-        type: Boolean,
-        required: true
-      },
-      id: {
-        type: Number,
-        required: true
-      }
-    },
-    computed: {
-      ...mapState('setting', ['isMobile'])
-    },
-    data () {
-      return {
-        // 历史操作 展开/关闭
-        advanced: false,
-        workFLowList: [],
-        loading: false,
-        pendingText: '持续记录中...'
-      }
-    },
-    mounted () {
-      this.getTicketWorkFlowDetail(this.ticketId)
-    },
-    methods: {
-      format (date, format) {
-        return formatDate(date, format)
-      },
-      // 获取流转工单详情
-      getTicketWorkFlowDetail (num) {
-        if (this.disableCloseBtn) {
-          this.pendingText = ''
-        } else {
-          this.pendingText = '持续记录中...'
-        }
-        this.loading = true
-        return post(TicketDetailsViewApi.getTicketWorkFlowDetails, {
-          ticketId: num
-        }).then(res => {
-            this.workFLowDetails = res
-            // 解析workFLowDetails数据
-            this.workFLowList = []
-            const len = this.workFLowDetails.length
-            for (let i = 0; i < len; i++) {
-              this.workFLowList.push({
-                name: this.workFLowDetails[i].name,
-                created_time: this.workFLowDetails[i].created_time,
-                end_time: this.workFLowDetails[i].end_time,
-                note: this.workFLowDetails[i].note
-              })
-            }
-            this.workFLowList = this.workFLowList.reverse()
-            this.loading = false
-          })
-      },
-      toggleAdvanced () {
-        this.advanced = !this.advanced
-      }
-    },
-    watch: {
-      'ticketId' () {
-        this.getTicketWorkFlowDetail(this.ticketId)
-      },
-      'disableCloseBtn' () {
-        this.getTicketWorkFlowDetail(this.ticketId)
-      },
-      'id' () {
-        this.getTicketWorkFlowDetail(this.ticketId)
-      }
-    }
-  }
-</script>
-
-<style lang="less" scoped>
-  .card_view {
-    width: 70%;
-    min-width: 700px;
-  }
-
-  .card_view_mobile {
-    width: 100%;
-  }
-
-  .card_details_title {
-    margin: 4px 0;
-    font-size: 14px;
-  }
-
-  .card_details_value {
-    font-size: 16px;
-    font-weight: bold;
-    color: #444;
-    margin-bottom: 0;
-    overflow: hidden;
-    text-overflow:ellipsis;
-    white-space: nowrap;
-  }
-
-  .card_guid {
-    width: 25%;
-    text-align:left;
-  }
-
-  .card_guid_mobile {
-    width: 50%;
-    text-align:left;
-  }
-
-  .detail-layout {
-    margin-left: 44px;
-  }
-  .text {
-    color: rgba(0, 0, 0, .45);
-  }
-
-  .heading {
-    color: rgba(0, 0, 0, .85);
-    font-size: 20px;
-  }
-
-  .no-data {
-    color: rgba(0, 0, 0, .25);
-    text-align: center;
-    line-height: 64px;
-    font-size: 16px;
-
-    i {
-      font-size: 24px;
-      margin-right: 16px;
-      position: relative;
-      top: 3px;
-    }
-  }
-
-  .mobile {
-    .detail-layout {
-      margin-left: unset;
-    }
-    .text {
-
-    }
-    .status-list {
-      text-align: left;
-    }
-  }
-</style>
+<template>
+  <div>
+    <a-card :bordered="false" :loading="loading">
+      <a-timeline ref="timeline" :pending="pendingText" :reverse="true" mode="alternate" style="max-width: 800px;margin: 0 auto;">
+        <a-timeline-item v-if="index < 3 ? true : advanced" :key="index" v-for="(value,index) in workFLowList" color="green">
+          <div style="color: #0d1a26;font-weight: 500;">
+            <span style="font-size: 16px;">{{ value.name }}</span>
+            <span style="margin-left: 5px;">({{ format(value.created_time,'yyyy-MM-dd hh:mm:ss') }} 至 {{ format(value.end_time,'yyyy-MM-dd hh:mm:ss') }})</span>
+          </div>
+          <div class="antd-pro-pages-profile-advanced-style-stepDescription" style="margin-top: 5px;margin-bottom: 5px">
+            <span class="note" style="font-size: 1.1em;margin-top: 5px;margin-bottom: 5px">留言：{{ value.note }}</span>
+          </div>
+          <img
+            v-for="(item,n) in value.images"
+            :src="'data:image/png;base64,' + item.url"
+            :key="'s' + n"
+            @click="changePhotoClass(item)"
+            class="img_sm"
+          >
+        </a-timeline-item>
+      </a-timeline>
+      <a-col :md="!advanced && 8 || 24" :sm="24" v-if="workFLowList.length > 3">
+        <span class="table-page-search-submitButtons" :style="advanced && { float: 'right', overflow: 'hidden' } || {} ">
+          <a @click="toggleAdvanced" style="margin-left: 8px">
+            {{ advanced ? '收起' : '展开' }}
+            <a-icon :type="advanced ? 'up' : 'down'"/>
+          </a>
+        </span>
+      </a-col>
+    </a-card>
+  </div>
+</template>
+<script>
+  import { formatDate } from '@vue2-client/utils/util'
+  import { mapState } from 'vuex'
+  import { TicketDetailsViewApi } from '@vue2-client/services/api/TicketDetailsViewApi'
+  import { post } from '@vue2-client/services/api/restTools'
+
+  export default {
+    name: 'TicketDetailsFlow',
+    props: {
+      ticketId: {
+        type: String,
+        required: true
+      },
+      disableCloseBtn: {
+        type: Boolean,
+        required: true
+      },
+      id: {
+        type: Number,
+        required: true
+      }
+    },
+    computed: {
+      ...mapState('setting', ['isMobile'])
+    },
+    data () {
+      return {
+        // 历史操作 展开/关闭
+        advanced: false,
+        workFLowList: [],
+        loading: false,
+        pendingText: '持续记录中...',
+        // 工单流转留言，详细信息框可见性
+        workFlowDetailsVisible: false,
+        // 模态框中内容
+        modalData: {
+          note: '',
+          images: []
+        },
+        // 选中照片是否显示
+        selectedImageShow: false,
+        // 选中的照片
+        selectedImage: null
+      }
+    },
+    mounted () {
+      this.getTicketWorkFlowDetail(this.ticketId)
+    },
+    methods: {
+      format (date, format) {
+        return formatDate(date, format)
+      },
+      // 图像点击切换放大缩小
+      changePhotoClass (item) {
+        this.$emit('imageClick', item)
+      },
+      // 获取流转工单详情
+      getTicketWorkFlowDetail (num) {
+        if (this.disableCloseBtn) {
+          this.pendingText = ''
+        } else {
+          this.pendingText = '持续记录中...'
+        }
+        this.loading = true
+        return post(TicketDetailsViewApi.getTicketWorkFlowDetails, {
+          ticketId: num
+        }).then(res => {
+          this.workFLowDetails = res
+          // 解析workFLowDetails数据
+          this.workFLowList = []
+          const len = this.workFLowDetails.length
+          for (let i = 0; i < len; i++) {
+            if (this.workFLowDetails[i].note === undefined) {
+              this.workFLowDetails[i].note = ''
+            }
+            if (this.workFLowDetails[i].images === undefined) {
+              this.workFLowDetails[i].images = []
+            }
+            this.workFLowList.push({
+              name: this.workFLowDetails[i].name,
+              created_time: this.workFLowDetails[i].created_time,
+              end_time: this.workFLowDetails[i].end_time,
+              note: this.workFLowDetails[i].note,
+              images: this.workFLowDetails[i].images
+            })
+            for (let j = 0; j < this.workFLowDetails[i].images.length; j++) {
+              this.workFLowDetails[i].images[j].isLarge = false
+            }
+          }
+          this.workFLowList = this.workFLowList.reverse()
+          this.loading = false
+        })
+      },
+      toggleAdvanced () {
+        this.advanced = !this.advanced
+      }
+    },
+    watch: {
+      'ticketId' () {
+        this.getTicketWorkFlowDetail(this.ticketId)
+      },
+      'disableCloseBtn' () {
+        this.getTicketWorkFlowDetail(this.ticketId)
+      },
+      'id' () {
+        this.getTicketWorkFlowDetail(this.ticketId)
+      }
+    }
+  }
+</script>
+
+<style lang="less" scoped>
+  .card_view {
+    width: 70%;
+    min-width: 700px;
+  }
+
+  .card_view_mobile {
+    width: 100%;
+  }
+
+  .card_details_title {
+    margin: 4px 0;
+    font-size: 14px;
+  }
+
+  .card_details_value {
+    font-size: 16px;
+    font-weight: bold;
+    color: #444;
+    margin-bottom: 0;
+    overflow: hidden;
+    text-overflow:ellipsis;
+    white-space: nowrap;
+  }
+
+  .card_guid {
+    width: 25%;
+    text-align:left;
+  }
+
+  .card_guid_mobile {
+    width: 50%;
+    text-align:left;
+  }
+
+  .detail-layout {
+    margin-left: 44px;
+  }
+  .text {
+    color: rgba(0, 0, 0, .45);
+  }
+
+  .heading {
+    color: rgba(0, 0, 0, .85);
+    font-size: 20px;
+  }
+
+  .no-data {
+    color: rgba(0, 0, 0, .25);
+    text-align: center;
+    line-height: 64px;
+    font-size: 16px;
+
+    i {
+      font-size: 24px;
+      margin-right: 16px;
+      position: relative;
+      top: 3px;
+    }
+  }
+
+  .mobile {
+    .detail-layout {
+      margin-left: unset;
+    }
+    .text {
+
+    }
+    .status-list {
+      text-align: left;
+    }
+  }
+
+  .img_sm {
+    border: rgba(84, 84, 84, 0.2) solid 1.5px;
+    border-radius: 5px;
+    padding: 10px;
+    width: 160px;
+    height: 120px;
+  }
+  .img_xl {
+    position: absolute;
+    top:0;bottom:0;left:0;right:0;
+    margin: auto;
+    width: 100%;
+    max-width: 1000px;
+    cursor: zoom-out;
+    z-index: 9999;
+    animation: imgZoomIn 0.4s;
+    -webkit-animation: imgZoomIn 0.4s;
+  }
+  @keyframes imgZoomIn
+  {
+    from {width: 160px;}
+    to {width: 100%;}
+  }
+  .img_sm:hover {
+    opacity: 0.6;
+    cursor: zoom-in;
+  }
+  .img_sm_dark{
+    filter: grayscale(100%);
+    opacity: 0.6;
+    border: rgba(84, 84, 84, 0.2) solid 1.5px;
+    border-radius: 5px;
+    padding: 10px;
+    width: 160px;
+    height: 120px;
+  }
+  .imgBackground {
+    position: absolute;
+    top:0;bottom:0;left:0;right:0;
+    width: 100%;
+    height: 100%;
+    z-index: 9998;
+    background-color: rgba(0,0,0,0.7);
+  }
+</style>