vue2-client 1.2.1 → 1.2.4

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

@@ -6,6 +6,7 @@
     :visible="visible"
     @close="onClose"
   >
+    <!--  移交工单对话框  -->
     <a-modal
       title="移交工单"
       :visible="transVisible"
@@ -13,13 +14,41 @@
       @cancel="handleTransferCancel"
       :zIndex="1001"
     >
-      <a-input placeholder="请输入要转移工单的员工名" v-model="transferTo" @blur="checkEmp()"/>
+      <a-input placeholder="请输入要转移工单的员工名" v-model="transferTo" @blur="checkEmp" @change="inputChange"/>
+      <div class="nameOptions" v-show="nameOptionsVisible">
+        <p class="nameOptionsItem" v-for="(item,index) in nameOptionsForChoose" :key="index" @click="chooseName(item.name)">{{ item.name }}</p>
+      </div>
       <span v-if="!transferCheck" style="color: red">您输入的员工不存在，请检查后再试</span>
-      <span v-if="transferCheck" style="color: green">您输入的员工已确认，可以进行工单转移</span>
+      <span v-else style="color: green">您输入的员工已确认，可以进行工单转移</span>
       <a-form-model-item label="留言">
         <a-input v-model="note" 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-modal
       title="关闭工单"
       :visible="closeVisible"
@@ -30,6 +59,7 @@
       <p>是否确认手动关闭工单？</p>
       <p style="color: red">（该操作不可撤销，请谨慎操作！）</p>
     </a-modal>
+    <!--  信息主体  -->
     <a-spin :spinning="loadTicketDetails">
       <a-page-header :title="'订单：' + this.details.serial_number">
         <div class="row">
@@ -43,6 +73,7 @@
               </a-descriptions-item>
               <a-descriptions-item label="发起人">{{ details.uploader }}</a-descriptions-item>
               <a-descriptions-item label="问题类型">{{ details.category }}</a-descriptions-item>
+              <a-descriptions-item label="发起人联系方式">{{ details.uploader_phone }}</a-descriptions-item>
             </a-descriptions>
           </div>
         </div>
@@ -69,14 +100,12 @@
               <a-button type="danger" @click="closeBtn()" :disabled="closeBtnDisable()">关闭工单</a-button>
             </a-popover>
           </a-button-group>
+          <a-button-group style="margin-right: 4px;">
+            <a-button type="dashed" @click="initView" :loading="showSpin">刷新({{ btnCountdownText }})</a-button>
+          </a-button-group>
         </template>
-
-        <br/>
-        <br/>
-        <br/>
-
         <!-- 进度条 -->
-        <a-card :bordered="false">
+        <a-card :bordered="false" style="margin-top: 40px">
           <a-steps :direction="'horizontal'" :current="step">
             <a-step>
               <template v-slot:title><span>待处理</span></template>
@@ -98,17 +127,57 @@
             </a-step>
           </a-steps>
         </a-card>
-        <br/>
-        <br/>
-        <br/>
-
-        <a-card title="问题详细描述" style="width: 100%">
-          <p>{{ details.description }}</p>
-        </a-card>
-
-        <ticket-details-flow v-if="details.id" :ticketId="ticketId" :disableCloseBtn="disableCloseBtn" :id="details.id"/>
+        <!--    切换栏    -->
+        <a-tabs style="margin-top: 50px;">
+          <!--    问题描述    -->
+          <a-tab-pane :key="1" tab="问题详细描述">
+            <a-card style="width: 100%" :loading="descriptionLoading">
+              <span style="font-size: 2em;margin-right: 20px">{{ details.uploader }}</span>
+              <span>{{ format(details.created_time,'yyyy年MM月dd日 hh:mm:ss') }}</span>
+              <p style="text-indent: 2em;font-size: 20px;margin: 10px">{{ details.description }}</p>
+              <img
+                v-for="(originalPic,n) in originalImages"
+                :src="'data:image/png;base64,' + originalPic.url"
+                @click="changePhotoClass(originalPic.id)"
+                :key="'os' + n"
+                :class="changePhotoClassForSmall(originalPic.id)"
+                style="margin-bottom: 10px"
+              >
+              <div style="margin-bottom: 10px;height: 1px;background: -webkit-linear-gradient(left, #fff -4%,#6b6c72 50%,#fff 100%);"></div>
+              <div v-if="addOnDescription.length > 0" v-for="(item,index) in addOnDescription" :key="index">
+                <span style="font-size: 2em;margin-right: 20px;margin-top: 20px">{{ details.uploader }}</span>
+                <span>{{ format(item.time,'yyyy年MM月dd日 hh:mm:ss') }}</span>
+                <p style="text-indent: 2em;font-size: 20px;margin: 20px">{{ item.description }}</p>
+                <img
+                  v-for="(pic,m) in item.images"
+                  :src="'data:image/png;base64,' + pic.url"
+                  @click="changePhotoClass(pic.id)"
+                  :key="'is' + m"
+                  :class="changePhotoClassForSmall(pic.id)"
+                >
+                <div style="height: 1px;background: -webkit-linear-gradient(left, #fff -4%,#6b6c72 50%,#fff 100%);"></div>
+              </div>
+            </a-card>
+          </a-tab-pane>
+          <!--     工单流转历史     -->
+          <a-tab-pane :key="2" tab="工单流转历史">
+            <ticket-details-flow
+              @imageClick="flowImageClick"
+              v-if="details.id"
+              :ticketId="ticketId"
+              :disableCloseBtn="disableCloseBtn"
+              :id="details.id"/>
+          </a-tab-pane>
+        </a-tabs>
       </a-page-header>
     </a-spin>
+    <audio controls="controls" hidden src="@/assets/sound/newNote.mp3" ref="audio"></audio>
+    <!--  放大后图片  -->
+    <div class="imgBackground" v-if="selectedImageShow" @click="changePhotoClass(selectedImage.id)">
+      <img
+        :src="'data:image/png;base64,' + selectedImage.url"
+        class="img_xl">
+    </div>
   </a-drawer>
 </template>
 
@@ -121,6 +190,16 @@
   import XTable from '@vue2-client/base-client/components/common/XTable/XTable'
   import { mapState } from 'vuex'
   import TicketDetailsFlow from './part/TicketDetailsFlow'
+  import moment from 'moment'
+
+  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)
+    })
+  }
 
   export default {
     name: 'TicketDetailsView',
@@ -131,8 +210,17 @@
     },
     data () {
       return {
+        moment,
         // 页面宽度
         screenWidth: document.documentElement.clientWidth,
+        // 控制成功页面显示
+        successVisible: false,
+        // 控制预览显示
+        previewVisible: false,
+        // 图片真实地址
+        previewImage: '',
+        // 图片列表
+        fileList: [],
         // 工单详情
         details: {
           // 当前负责人ID
@@ -146,8 +234,12 @@
           confirm_time: '',
           finished_time: '',
           category: '',
-          serial_number: ''
+          serial_number: '',
+          uploader_phone: ''
         },
+        images: [],
+        selectedImage: null,
+        selectedImageShow: false,
         // 当前步骤
         step: 0,
         // 校验转移员工是否存在
@@ -164,12 +256,31 @@
         closeVisible: false,
         // 控制加载过程
         loadTicketDetails: false,
-        // 工单类型字典
-        categoryDictionary: []
+        // 附加描述
+        addOnDescription: [],
+        // 上传工单时自带照片
+        originalImages: [],
+        // 定时刷新定时器
+        timer: undefined,
+        // 所有员工姓名
+        nameOptions: [],
+        // 员工姓名备选
+        nameOptionsForChoose: [],
+        // 员工姓名备选项显示控制
+        nameOptionsVisible: false,
+        // 工单流转抽屉可见性
+        workFlowVisible: false,
+        // 控制小加载指示物显示
+        showSpin: true,
+        // 原始描述长度
+        addOnDescriptionOriginal: undefined,
+        // 描述加载控制
+        descriptionLoading: false,
+        // 用于刷新按钮倒计时显示
+        btnCountdownText: 5
       }
     },
     mounted () {
-      this.getTicketCategory()
       this.initView()
     },
     computed: {
@@ -187,19 +298,170 @@
       }
     },
     methods: {
+      // 转移员工姓名change事件，用于展示备选
+      inputChange () {
+        if (this.transferTo.length === 0) {
+          this.nameOptionsVisible = false
+        } else {
+          this.nameOptionsVisible = true
+          var inputName = this.transferTo
+          this.nameOptionsForChoose = this.nameOptions.filter(function (element) {
+            return element.name.indexOf(inputName) !== -1
+          })
+        }
+      },
+      // 在候选框中点击了名称
+      chooseName (name) {
+        this.nameOptionsVisible = false
+        this.transferTo = name
+        this.checkEmp()
+      },
+      // 获取所有员工名，供输入框备选
+      getAllEmpNames () {
+        return post(EmployeeDetailsViewApi.getAllEmployeeName, null)
+          .then(res => {
+            this.nameOptions = res
+          }, 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
+      },
+      // 开启定时器
+      setTimer () {
+        if (this.timer === undefined) {
+          this.timer = setInterval(() => {
+            if (this.btnCountdownText > 0) {
+              this.btnCountdownText--
+              if (this.btnCountdownText === 0) {
+                this.initView()
+                this.btnCountdownText = 5
+              }
+            }
+          }, 1000)
+        }
+      },
       // 初始化组件
       initView () {
-        this.loadTicketDetails = true
+        this.showSpin = true
+        this.descriptionLoading = true
+        // 获取所有员工名
+        this.getAllEmpNames()
+        // 获取工单的基本详情
         this.getTicketDetail(this.ticketId)
-        this.loadTicketDetails = false
+        // 获取工单的附加信息
+        this.handleOtherData()
+      },
+      // 图像点击切换放大缩小
+      changePhotoClass (id) {
+        for (let i = 0; i < this.images.length; i++) {
+          if (id === this.images[i].id) {
+            this.images[i].isLarge = !this.images[i].isLarge
+            this.selectedImage = this.images[i]
+          }
+        }
+        this.selectedImageShow = !this.selectedImageShow
+      },
+      // 控制未放大图像变暗
+      changePhotoClassForSmall (id) {
+        for (let i = 0; i < this.images.length; i++) {
+          if (id == this.images[i].id) {
+            if (this.images[i].isLarge === true) {
+              return 'img_sm_dark'
+            } else {
+              return 'img_sm'
+            }
+          }
+        }
+      },
+      // 获取当前相关联的照片
+      getPhoto () {
+        return post(TicketDetailsViewApi.getTicketImages, {
+          ticketId: this.ticketId
+        })
+          .then(res => {
+            this.images = res
+            for (let i = 0; i < this.images.length; i++) {
+              this.images[i].isLarge = false
+            }
+            this.mergeAddImage()
+          }, err => {
+            console.log(err)
+          })
       },
-      // 解析工单类型
-      resolveCategory (key) {
-        for (let i = 0; i < this.categoryDictionary.length; i++) {
-          if (this.categoryDictionary[i].value == key) {
-            return this.categoryDictionary[i].name
+      // 将同一次上传的图片，与描述放在一起
+      mergeAddImage () {
+        this.originalImages = []
+        for (let i = 0; i < this.addOnDescription.length; i++) {
+          this.addOnDescription[i].images = []
+        }
+        for (let i = 0; i < this.images.length; i++) {
+          if (this.images[i].did === 0) {
+            this.originalImages.push(this.images[i])
+            continue
+          }
+          for (let j = 0; j < this.addOnDescription.length; j++) {
+            if (this.images[i].did === this.addOnDescription[j].id) {
+              this.addOnDescription[j].images.push(this.images[i])
+            }
           }
         }
+        this.initDone()
+      },
+      initDone () {
+        // 初始化信息
+        this.showSpin = false
+        this.descriptionLoading = false
+        if (this.step !== 3) {
+          this.setTimer()
+        }
+        this.addOnDescriptionOriginal = 1
       },
       // 关闭工单确认后业务逻辑
       handleCloseOk () {
@@ -239,19 +501,15 @@
         })
           .then(res => {
             if (res !== 0) {
-              this.$message.success(
-                '操作成功',
-                5
-              )
-              this.initView()
+              this.$message.success('操作成功', 5)
             } else {
-              this.$message.error(
-                '操作失败',
-                5
-              )
+              this.$message.error('工单已被他人处理或关闭，请刷新再试', 5)
             }
+            this.initView()
           }, err => {
             console.error(err)
+            this.$message.error('工单已被他人处理，请刷新再试', 5)
+            this.initView()
           })
       },
       // 获取当前登陆员工ID
@@ -267,7 +525,7 @@
           empName: this.transferTo
         })
           .then(res => {
-            const num = res.number
+            const num = res
             this.transferCheck = num !== 0
           }, err => {
             console.error(err)
@@ -297,7 +555,8 @@
             ticketId: this.ticketId,
             endTime: new Date(),
             transferTo: this.transferTo,
-            note: this.note
+            note: this.note,
+            images: this.fileList
           })
             .then(res => {
               const result = res
@@ -308,12 +567,12 @@
                   '操作成功',
                   5
                 )
+                this.fileList = []
+                this.transferTo = ''
+                this.transferCheck = false
                 this.initView()
               } else {
-                this.$message.error(
-                  '操作失败',
-                  5
-                )
+                this.$message.error('工单已被他人处理或关闭，请刷新再试', 5)
               }
               this.handleCancel()
               this.initView()
@@ -325,43 +584,64 @@
       },
       // 转移工单取消后逻辑
       handleTransferCancel () {
-        this.transferTo = ''
-        this.note = ''
         this.transVisible = false
         this.transferCheck = false
+        this.transferTo = ''
+        this.note = ''
       },
       // 关闭抽屉时回调
       onClose () {
+        clearInterval(this.timer)
+        this.timer = undefined
+        this.addOnDescription = []
         this.disableCloseBtn = false
         this.$emit('update:visible', false)
+        this.originalImages = []
+        this.images = []
+        this.addOnDescriptionOriginal = undefined
+      },
+      // 对其他信息进行初始化，包括附加描述，图片
+      handleOtherData () {
+        const beforeLength = this.addOnDescription.length
+        return post(TicketDetailsViewApi.getAddonDescription, {
+          ticketId: this.ticketId
+        })
+          .then(res => {
+            this.addOnDescription = res
+            this.getPhoto()
+            if (this.addOnDescription.length > beforeLength && this.addOnDescriptionOriginal !== undefined) {
+              this.addOnDescriptionOriginal = 1
+              this.$refs.audio.currentTime = 0
+              this.$refs.audio.play()
+              this.$notification.open({
+                message: '最新通知',
+                description:
+                  '客户追加了问题描述，请及时查看！',
+                onClick: () => {
+                }
+              })
+            }
+          }, err => {
+            console.log(err)
+          })
       },
       // 获取工单详情信息
       getTicketDetail (num) {
-        this.loadTicketDetails = true
+        this.showSpin = true
         return post(TicketDetailsViewApi.getTicketDetails, {
           ticketId: num
-        })
-          .then(res => {
+        }).then(res => {
             this.details = res[0]
             this.step = res[0].status
             if (this.details.status === 3) {
               this.disableCloseBtn = true
             }
             const categoryValue = this.details.category
-            this.details.category = this.resolveCategory(categoryValue)
+            this.details.category = this.$appdata.getDictionaryList('ticketCategoryMap')[categoryValue].label
           }, err => {
             console.error(err)
           })
       },
-      // 获取工单类别字典
-      getTicketCategory () {
-        return post(TicketDetailsViewApi.getTicketCategoryDictionary)
-          .then(res => {
-            this.categoryDictionary = res
-          }, err => {
-            console.log(err)
-          })
-      },
       // 日期格式化
       format (date, format) {
         return formatDate(date, format)
@@ -380,7 +660,7 @@
       },
       // 控制移交他人按钮可用状态
       transferBtnDisable () {
-        return this.step === 0
+        return this.step === 0 || this.step === 3
       },
       // 控制关闭工单按钮可用状态
       closeBtnDisable () {
@@ -405,6 +685,11 @@
         } else {
           return 'error'
         }
+      },
+      // 单击工单流转历史图片
+      flowImageClick (image) {
+        this.selectedImage = image
+        this.selectedImageShow = !this.selectedImageShow
       }
     },
     watch: {
@@ -412,6 +697,11 @@
         if (val) {
           this.initView()
         }
+      },
+      'step' (newVal) {
+        if (newVal === 3) {
+          clearInterval(this.timer)
+        }
       }
     }
   }
@@ -483,4 +773,66 @@
     text-align: right;
   }
 }
+
+.img_sm {
+  border: rgba(84, 84, 84, 0.2) solid 1.5px;
+  border-radius: 5px;
+  padding: 10px;
+  width: 160px;
+  height: 120px;
+  margin-bottom: 20px;
+  margin-left: 20px;
+}
+.img_xl {
+  position: absolute;
+  top:0;bottom:0;left:0;right:0;
+  margin: auto;
+  width: 60%;
+  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: 60%;}
+}
+.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;
+  margin-bottom: 20px;
+  margin-left: 20px;
+}
+.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);
+}
+.nameOptionsItem {
+  padding-left: 5px;
+  margin-bottom: 2px;
+}
+.nameOptionsItem:hover {
+  background-color: rgb(209,233,255);
+}
+.nameOptionsItem:last-of-type {
+  margin-bottom: 0px;
+}
+.nameOptions {
+  border: rgba(0,0,0,0.4) solid 1px;
+}
 </style>