vue2-client 1.2.1 → 1.2.2

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

@@ -1,15 +1,22 @@
 <template>
   <div>
-    <a-card :bordered="false" title="工单流转历史" :loading="loading">
+    <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" >
-            留言：{{ value.note }}
+          <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">
@@ -54,7 +61,18 @@
         advanced: false,
         workFLowList: [],
         loading: false,
-        pendingText: '持续记录中...'
+        pendingText: '持续记录中...',
+        // 工单流转留言，详细信息框可见性
+        workFlowDetailsVisible: false,
+        // 模态框中内容
+        modalData: {
+          note: '',
+          images: []
+        },
+        // 选中照片是否显示
+        selectedImageShow: false,
+        // 选中的照片
+        selectedImage: null
       }
     },
     mounted () {
@@ -64,6 +82,10 @@
       format (date, format) {
         return formatDate(date, format)
       },
+      // 图像点击切换放大缩小
+      changePhotoClass (item) {
+        this.$emit('imageClick', item)
+      },
       // 获取流转工单详情
       getTicketWorkFlowDetail (num) {
         if (this.disableCloseBtn) {
@@ -75,21 +97,31 @@
         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.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
-          })
+          }
+          this.workFLowList = this.workFLowList.reverse()
+          this.loading = false
+        })
       },
       toggleAdvanced () {
         this.advanced = !this.advanced
@@ -181,4 +213,49 @@
       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>

package/src/base-client/components/ticket/TicketSubmitSuccessView/TicketSubmitSuccessView.vue

@@ -6,14 +6,53 @@
     :visible="visible"
     @close="onClose"
   >
+    <!--  添加描述弹框  -->
+    <a-modal
+      title="追加问题描述"
+      :visible="addOnVisible"
+      @ok="handleAddOn"
+      @cancel="handleCancelAddOn"
+      :zIndex="1001"
+    >
+      <a-form-model-item label="描述">
+        <a-input v-model="desc" type="textarea" />
+      </a-form-model-item>
+      <div class="clearfix">
+        <a-upload
+          name="avatar"
+          list-type="picture-card"
+          :before-upload="beforeUpload"
+          action="/webmeteruploadapi/upload"
+          :file-list="fileList"
+          @preview="handlePreview"
+          @change="handleChange"
+          :remove="remove"
+        >
+          <div v-if="fileList.length < 5">
+            <a-icon type="plus" />
+            <div class="ant-upload-text">点击上传</div>
+          </div>
+        </a-upload>
+        <a-modal
+          :visible="previewVisible"
+          :footer="null"
+          @cancel="handleCancel"
+        >
+          <img style="width: 100%" :src="previewImage" alt="图片上传"/>
+        </a-modal>
+      </div>
+    </a-modal>
     <a-card class="result-success" :bordered="false">
-      <result :is-success="icon" :description="description" :title="title" :title-class="titleClass">
+      <result :is-success="icon" :description="getDescription()" :title="getTitle()" :title-class="titleClass">
         <template slot="action">
-          <span style="margin-right: 10px" v-if="countDown > 0">{{ countDownFormat() }}</span>
-          <a-tooltip placement="topLeft" :title="tip" arrow-point-at-center>
-            <a-button type="primary" v-if="UrgentAvailable" :disabled="urgentAccess" style="margin-right: 20px" @click="urgent">请求加急处理</a-button>
-          </a-tooltip>
-          <a-button type="danger" @click="closeBtn" >撤销工单</a-button>
+          <a-space v-show="btnGroup">
+            <!--<a-tooltip placement="topLeft" :title="tip" arrow-point-at-center>-->
+            <!--  <a-button type="primary" v-if="UrgentAvailable && details.status === 0 && details.priority === 2" :disabled="urgentAccess" @click="urgent">请求加急处理</a-button>-->
+            <!--</a-tooltip>-->
+            <a-button type="primary" @click="addOnVisible = true" >追加问题描述</a-button>
+            <a-button type="danger" @click="closeBtn" >撤销工单</a-button>
+          </a-space>
+          <a-button v-show="!btnGroup" type="primary" @click="onClose">返回</a-button>
         </template>
         <a-modal
           title="关闭工单"
@@ -64,6 +103,14 @@ import { TicketDetailsViewApi } from '@vue2-client/services/api/TicketDetailsVie
 import { post } from '@vue2-client/services/api/restTools'
 import { mapState } from 'vuex'
 import { formatDate } from '@vue2-client/utils/util'
+function getBase64 (file) {
+  return new Promise((resolve, reject) => {
+    const reader = new FileReader()
+    reader.readAsDataURL(file)
+    reader.onload = () => resolve(reader.result)
+    reader.onerror = error => reject(error)
+  })
+}
 
 const AStepItemGroup = AStepItem.Group
 const DetailListItem = DetailList.Item
@@ -74,10 +121,8 @@ export default {
     return {
       // 页面宽度
       screenWidth: document.documentElement.clientWidth,
-      title: '提交成功',
-      description: '您创建的工单已成功提交，请保持电话畅通，我们的工作人员将尽快与您取得联系',
-      // 加急按钮气泡文字
-      tip: '如果需要加急，请在5分钟倒计时结束后点击加急按钮，加急后我们将优先处理您的工单',
+      title: '',
+      description: '',
       // 控制标题样式
       titleClass: 'title',
       // 工单详情
@@ -88,7 +133,8 @@ export default {
         priority: undefined,
         createdTime: '',
         confirmTime: '',
-        finishedTime: ''
+        finishedTime: '',
+        createdTimestamp: undefined
       },
       // 控制加急按钮
       urgentAccess: true,
@@ -103,7 +149,25 @@ export default {
       // 控制页面大图标
       icon: true,
       // 控制加急后定时器
-      showTelephoneCountDown: 0
+      showTelephoneCountDown: 0,
+      // 控制预览显示
+      previewVisible: false,
+      // 图片真实地址
+      previewImage: '',
+      // 图片列表
+      fileList: [],
+      // 控制添加描述框显示
+      addOnVisible: false,
+      // 描述
+      desc: '',
+      // 等待时间计时器
+      waitTimer: undefined,
+      // 控制三个按钮显示
+      btnGroup: true,
+      // 控制工单关闭后标题显示
+      titleEnd: 0,
+      // 控制显示文字
+      descriptionUrgentLevel: 0
     }
   },
   props: {
@@ -114,21 +178,111 @@ export default {
     visible: {
       type: Boolean,
       default: false
+    },
+    categoryStr: {
+      type: String,
+      required: true
     }
   },
   mounted () {
-    this.getTicketDetail()
-    this.refresh()
-    this.countDown = 0
+    this.initView()
   },
   methods: {
+    initView () {
+      this.getTicketDetail()
+      this.refresh()
+      this.titleClass = 'title'
+      this.countDown = 0
+    },
+    // 提交添加描述
+    handleAddOn () {
+      return post(TicketDetailsViewApi.AddonDescriptionToTicket, {
+        description: this.desc,
+        fileList: this.fileList,
+        serialNumber: this.serialNumber
+      })
+        .then(res => {
+          this.$message.success('提交成功！')
+          this.desc = ''
+          this.fileList = []
+          this.addOnVisible = false
+        }, err => {
+          console.log(err)
+        })
+    },
+    // 放弃添加
+    handleCancelAddOn () {
+      return post(TicketDetailsViewApi.removeAllImages, {
+        fileList: this.fileList
+      })
+        .then(res => {
+          this.desc = ''
+          this.fileList = []
+          this.addOnVisible = false
+        }, err => {
+          console.log(err)
+        })
+    },
+    // 图像修改检测
+    handleChange ({ fileList }) {
+      this.fileList = fileList.filter((item) => {
+        return item.status === 'done' || item.status === 'uploading'
+      })
+    },
+    // 在上传页面，点击图片上的垃圾桶，撤销上传
+    remove (file) {
+      return post(TicketDetailsViewApi.revocationImage, {
+        file: file
+      })
+        .then(res => {
+          if (res === 'success') {
+            this.$message.success('删除成功')
+          }
+          this.fileList = this.fileList.filter((item) => {
+            return item.response.name !== file.response.name
+          })
+        }, err => {
+          console.log(err)
+        })
+    },
+    // 上传头像前校验
+    beforeUpload (file) {
+      const isJpgOrPng =
+        file.type === 'image/jpeg' ||
+        file.type === 'image/jpg' ||
+        file.type === 'image/png'
+      const Lt2M = file.size / 1024 / 1024 < 2
+      if (!Lt2M) {
+        this.$message.error('图片不得大于2MB!')
+      }
+      if (!isJpgOrPng) {
+        this.$message.error('只能上传jpg/png格式的图片')
+      }
+      return isJpgOrPng && Lt2M
+    },
+    handleCancel () {
+      this.previewVisible = false
+    },
+    // 处理预览图像
+    async handlePreview (file) {
+      if (!file.url && !file.preview) {
+        file.preview = await getBase64(file.originFileObj)
+      }
+      this.previewImage = file.url || file.preview
+      this.previewVisible = true
+    },
     // 关闭抽屉时回调
     onClose () {
+      this.titleEnd = 0
       this.urgentAccess = true
       clearInterval(this.timer)
+      clearInterval(this.waitTimer)
+      this.timer = undefined
+      this.waitTimer = undefined
+      this.btnGroup = true
       this.$emit('update:visible', false)
       this.titleClass = 'title'
-      this.description = '您创建的工单已成功提交，请保持电话畅通，我们的工作人员将尽快与您取得联系'
+      this.descriptionUrgentLevel = 0
       this.title = '提交成功'
       this.UrgentAvailable = true
     },
@@ -143,10 +297,14 @@ export default {
       })
         .then(res => {
           this.closeVisible = false
-          this.title = '工单已关闭'
-          this.description = ''
-          this.icon = false
+          this.details.status = 2
           clearInterval(this.timer)
+          clearInterval(this.waitTimer)
+          this.timer = undefined
+          this.waitTimer = undefined
+          this.btnGroup = false
+          this.titleEnd = 1
+          this.getTicketDetail()
         }, err => {
           console.error(err)
         })
@@ -161,29 +319,29 @@ export default {
     },
     // 过10s刷新一下页面数据
     refresh () {
-      this.timer = setInterval(() => {
-        this.getTicketDetail()
-      }, 10 * 1000)
+      if (this.timer === undefined) {
+        this.timer = setInterval(() => {
+          this.getTicketDetail()
+        }, 5000)
+      }
     },
     // 对工单进行加急处理
     urgent () {
       return post(TicketDetailsViewApi.rushTicket, {
-        serialNumber: this.serialNumber
+        serialNumber: this.serialNumber,
+        categoryStr: this.categoryStr
       })
         .then(res => {
           if (res === 1) {
             this.$message.success(
-              '操作成功',
+              '已为您自动加急',
               5
             )
-            this.title = '加急成功'
-            this.titleClass = 'title_danger'
-            this.description = '您的工单已经被加急处理，我们的工作人员会马上与您取得联系'
+            this.details.priority = 1
             this.UrgentAvailable = false
-            this.showPhoneNumberTimer()
           } else {
             this.$message.error(
-              '操作失败',
+              '自动加急失败',
               5
             )
           }
@@ -193,7 +351,6 @@ export default {
     },
     // 格式化倒计时
     countDownFormat () {
-      const hours = '00'
       let mins = Math.floor(this.countDown / 60)
       let secs = this.countDown % 60
       if (mins < 10) {
@@ -202,31 +359,88 @@ export default {
       if (secs < 10) {
         secs = '0' + secs
       }
-      return hours + ':' + mins + ':' + secs
+      return mins + ':' + secs
     },
     // 设置用于控制加急按钮倒计时定时器，加急按钮5分钟后才可点击
     setTimer () {
-      this.countDown = 5
-      const time = setInterval(() => {
-        this.countDown--
-        if (this.countDown <= 0) {
-          this.urgentAccess = false
-          clearInterval(time)
-          this.countDown = -1
-        }
-      }, 1000)
+      this.countDown = this.timePass()
+      if (this.waitTimer === undefined) {
+        this.waitTimer = setInterval(() => {
+          this.countDown++
+          if (this.countDown >= 300 && this.details.priority === 2) {
+            this.urgent()
+            this.details.priority = 1
+          }
+        }, 1000)
+      }
     },
-    // 设定关于加急后的定时器，5分钟后仍没人联系，显示联系电话
-    showPhoneNumberTimer () {
-      this.showTelephoneCountDown = 5
-      const time = setInterval(() => {
-        this.showTelephoneCountDown--
-        if (this.showTelephoneCountDown <= 0) {
-          this.description = '很抱歉让您久等，029-88888888 您可以直接拨打此电话，与我们技术人员直接交谈！'
-          clearInterval(time)
-          this.showTelephoneCountDown = -1
+    // 获取显示文字内容
+    getDescription () {
+      if (this.details.status === 1) {
+        // 处理中
+        return '工单已被接受，请保持电话畅通。我们的工作人员正在尽快为您解决问题'
+      }
+      if (this.details.status >= 2) {
+        // 已关闭
+        return ''
+      }
+      // 已提交，判断优先级
+      if (this.details.priority >= 2) {
+        // 低优先级
+        // 判断用时
+        if (this.timePass() < 300) {
+          // 5分钟以内
+          return '您创建的工单已成功提交，请保持电话畅通，我们的工作人员将在5分钟内与您联系'
+        } else if (this.timePass() >= 300 && this.timePass() <= 600) {
+          // 5-10分钟
+          return '由于您的工单等待时间过长，系统已为您自动加急工单，请保持电话畅通，感谢您的理解'
+        } else {
+          // 超过十分钟
+          return '很抱歉让您久等，029-88888888 您可以直接拨打此电话，与我们技术人员直接交谈！'
         }
-      }, 1000)
+      } else {
+        // 高优先级
+        // 判断用时
+        if (this.timePass() < 300) {
+          // 5分钟以内
+          return '您的工单已经被加急处理，我们的工作人员会马上与您取得联系'
+        } else if (this.timePass() >= 300 && this.timePass() <= 600) {
+          // 5-10分钟
+          return '您的工单已经被加急处理，我们的工作人员会马上与您取得联系'
+        } else {
+          // 超过十分钟
+          return '很抱歉让您久等，029-88888888 您可以直接拨打此电话，与我们技术人员直接交谈！'
+        }
+      }
+    },
+    // 获取标题内容
+    getTitle () {
+      const titleTime = this.countDownFormat()
+      if (this.details.status === 1) {
+        // 处理中
+        this.titleClass = 'title'
+        return '工单正在处理中'
+      }
+      if (this.details.status >= 2) {
+        // 已关闭
+        this.titleClass = 'title'
+        return '工单已关闭'
+      }
+      // 已提交，判断优先级
+      if (this.details.priority >= 2) {
+        // 低优先级
+        this.titleClass = 'title'
+        return '已提交工单' + '\xa0\xa0\xa0\xa0\xa0(\xa0已等待\xa0\xa0' + titleTime + '\xa0)'
+      } else {
+        // 高优先级
+        this.titleClass = 'title_danger'
+        return '加急成功' + '\xa0\xa0\xa0\xa0\xa0(\xa0已等待\xa0\xa0' + titleTime + '\xa0)'
+      }
+    },
+    // 获取工单创建以来过了多久，单位：秒
+    timePass () {
+      const now = new Date().getTime()
+      return Math.floor((now - this.details.createdTimestamp) / 1000)
     },
     // 获取工单详情
     getTicketDetail () {
@@ -256,11 +470,22 @@ export default {
           this.details.createdTime = this.format(res.createdtime, 'yyyy-MM-dd hh:mm:ss')
           this.details.status = res.status
           this.details.priority = res.priority
-
+          const dateStr = formatDate(this.details.createdTime)
+          this.details.createdTimestamp = new Date(dateStr).getTime()
+          const timepass = this.timePass()
           // 如果当前状态为一般，设置定时器，五分钟后允许加急
-          if (this.details.priority > 1 && this.countDown === 0) {
+          if (this.countDown === 0 && this.details.status === 0) {
             this.setTimer()
           }
+          if (timepass > 300) {
+            this.urgentAccess = false
+          }
+          if (this.details.status >= 2) {
+            this.btnGroup = false
+          }
+          if (this.details.priority <= 1 && this.details.status === 0) {
+            this.descriptionUrgentLevel = 2
+          }
         }, err => {
           console.log(err)
         })
@@ -279,10 +504,10 @@ export default {
     }
   },
   watch: {
-    'serialNumber' () {
-      this.getTicketDetail()
-      this.refresh()
-      this.countDown = 0
+    'visible' (val) {
+      if (val) {
+        this.initView()
+      }
     }
   }
 }

package/src/services/api/EmployeeDetailsViewApi.js

@@ -10,7 +10,9 @@ const EmployeeDetailsViewApi = {
   // 查询：获取部门名字典
   getDepartmentDictionary: '/webmeterapi/getDepartmentDictionary',
   // 查询：获取模块名字典
-  getModelDictionary: '/webmeterapi/getModelDictionary'
+  getModelDictionary: '/webmeterapi/getModelDictionary',
+  // 查询：获取所有员工名，供前端展示备选项
+  getAllEmployeeName: '/webmeterapi/getAllEmployeeName'
 }
 
 export { EmployeeDetailsViewApi }

package/src/services/api/TicketDetailsViewApi.js

@@ -24,7 +24,15 @@ const TicketDetailsViewApi = {
   // 获取工单类别字典
   getTicketCategoryDictionary: '/webmeterapi/getTicketCategoryDictionary',
   // 在工单提交页面删除照片
-  revocationImage: '/webmeterapi/revocationImage'
+  revocationImage: '/webmeterapi/revocationImage',
+  // 在工单提交页面删除照片
+  getTicketImages: '/webmeterapi/getTicketImages',
+  // 用户填写附加信息时取消了操作，将已上传的照片清空
+  removeAllImages: '/webmeterapi/removeAllImages',
+  // 提交用户填写附加信息
+  AddonDescriptionToTicket: '/webmeterapi/AddonDescriptionToTicket',
+  // 获取用户填写附加信息
+  getAddonDescription: '/webmeterapi/getAddonDescription'
 }
 
 export { TicketDetailsViewApi }

package/src/services/api/common.js

@@ -10,9 +10,7 @@ const commonApi = {
   // 通用删除
   delete: '/webmeterapi/commonDelete',
   // 获取字典键列表
-  getDictionaryParam: '/webmeterapi/getDictionaryParam',
-  // 根据字典键获取值
-  getDictionaryValue: '/webmeterapi/getDictionaryValue'
+  getDictionaryParam: '/webmeterapi/getDictionaryParam'
 }
 
 /**