vue2-client 1.2.109 → 1.2.112

package/src/pages/system/ticket/index.vue

@@ -1,12 +1,9 @@
 <template>
   <div>
     <!--   显示成功页抽屉   -->
-    <submit-ticket-success
-      :visible.sync="successVisible"
-      :serialNumber="serialNumber"
-      :category-str="categoryStr"
-      v-if="serialNumber"
-    />
+    <a-modal v-model="successVisible" title="工单状态" width="70%" :footer="null" destroy-on-close>
+      <submit-ticket-success v-if="serialNumber" :serialNumber="serialNumber" />
+    </a-modal>
     <!--   两个使用手册弹框   -->
     <a-modal
       title="向日葵使用指南"
@@ -118,9 +115,24 @@
         <br/>
       </div>
     </a-modal>
-    <a-card v-if="visible">
+    <a-modal
+      title="填写信息"
+      :visible="infoFormVisible"
+      @ok="onInfoFormSubmit"
+      @cancel="infoFormVisible = false">
+      <a-form-model
+        ref="infoFormRef"
+        :model="infoForm"
+        :label-col="{ span: 5 }"
+        :wrapper-col="{ span: 18 }">
+        <a-form-model-item label="客户名称" prop="customerName" :rules="{ required: true, message: '请输入客户名称' }">
+          <a-input v-model="infoForm.customerName" placeholder="请输入客户名称查询历史工单" />
+        </a-form-model-item>
+      </a-form-model>
+    </a-modal>
+    <a-card>
       <div style="text-align: right">
-        <p>欢迎您：{{ currUser.ename }}</p>
+        <p>欢迎您！{{ currUser.ename }}</p>
       </div>
       <div class="submitTicketTitle">
         <span>奥枫问题反馈平台</span>
@@ -131,13 +143,19 @@
           <a-row v-if="tabActiveKey === 'workSubmit'">
             <a-col :span="18">
               <a-form :label-col="{ span: 5 }" :wrapper-col="{ span: 12 }">
+                <!-- 客户名称输入 -->
+                <a-form-item v-if="!currUser.ename" label="客户名称">
+                  <a-input v-model="customerName" placeholder="请输入客户名称"/>
+                  <strong v-show="showCustomerNameAlert" style="color: red">客户名称不能为空！</strong>
+                </a-form-item>
                 <!--     问题类型单选框     -->
                 <a-form-item label="问题类型">
-                  <a-radio-group v-model="form.category" v-for="(item,index) in $appdata.getDictionaryList('ticketCategoryMap')" :key="index">
+                  <a-radio-group v-model="form.category" v-for="(item,index) in ticketCategoryMap" :key="index">
                     <a-radio :value="item.value" class="radio-item">
                       {{ item.label }}
                     </a-radio>
                   </a-radio-group>
+                  <a-spin :spinning="ticketCategoryMapLoading" />
                   <br/>
                   <strong v-show="showCategoryAlert" style="color: red">类型不允许为空！</strong>
                 </a-form-item>
@@ -153,21 +171,7 @@
                 <!--     图片上传     -->
                 <a-form-item :wrapper-col="{ span: 12 }" label="问题截图">
                   <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>
+                    <upload :model="uploadModel" @setFiles="setFiles" />
                     <a-modal
                       :visible="previewVisible"
                       :footer="null"
@@ -179,7 +183,7 @@
                 </a-form-item>
                 <!--     表单底部按钮     -->
                 <a-form-item :wrapper-col="{ span: 12, offset: 5 }">
-                  <a-button type="primary" @click="onSubmit" style="margin-right: 20px" :disabled="showCategoryAlert || showPhoneAlert">
+                  <a-button type="primary" @click="onSubmit" style="margin-right: 20px" :disabled="showCategoryAlert || showPhoneAlert || !validCustomerName">
                     提交
                   </a-button>
                 </a-form-item>
@@ -239,14 +243,13 @@
 
 <script>
 import { TicketDetailsViewApi, post } from '@vue2-client/services/api'
-import { logout } from '@vue2-client/services/user'
 import XFormTable from '@vue2-client/base-client/components/common/XFormTable/XFormTable'
-import Vue from 'vue'
+import submitTicketSuccess from './submitTicketSuccess'
 
 export default {
   name: 'submitTicket',
   components: {
-    XFormTable
+    XFormTable, submitTicketSuccess
   },
   data () {
     return {
@@ -267,42 +270,66 @@ export default {
         desc: undefined,
         phone: ''
       },
-      // 获取序列号使用
-      data: {
-        priority: 2,
-        category: 0,
-        time: this.dataFormat(new Date())
-      },
       // 工单序列号
       serialNumber: '',
       // 类别未填写警告信息控制
       showCategoryAlert: true,
       showPhoneAlert: true,
+      showCustomerNameAlert: true,
       // 向日葵使用指南可见性
       sunClientManualVisible: false,
       // 向日葵使用指南可见性
       toDeskManualVisible: false,
       // 为工单查询指定条件
       fixedQueryForm: {},
-      // 工单类型在字典中显示的文字值
-      categoryStr: '',
       // 用户信息
       currUser: {
-        ename: '',
-        phoneNumber: ''
+        ename: ''
       },
-      visible: false,
-      tabActiveKey: 'workSubmit'
+      tabActiveKey: 'workSubmit',
+      uploadModel,
+      // 客户名称
+      customerName: undefined,
+      // 问题类型选项
+      ticketCategoryMap: [],
+      ticketCategoryMapLoading: false,
+      // 未传入客户名称信息手动输入弹框
+      infoFormVisible: false,
+      infoForm: {
+        customerName: ''
+      }
     }
   },
-  created () {
-    Vue.$appdata.load().then(res => {
-      this.currUser.ename = this.$route.query.orgName
-      this.fixedQueryForm['t_uploader'] = this.currUser.ename
-      this.visible = true
-    })
+  computed: {
+    // 检查客户名称是否为空
+    validCustomerName () {
+      return this.currUser.ename || this.customerName ? true : false
+    }
   },
-  mounted () {
+  created () {
+    document.title = '奥枫问题反馈平台'
+    const dictionary = this.$appdata.getParams()
+    if (dictionary && dictionary['ticketCategoryMap']) {
+      console.log('pre', dictionary['ticketCategoryMap'])
+      this.ticketCategoryMap = dictionary['ticketCategoryMap']
+    } else {
+      this.ticketCategoryMapLoading = true
+      this.$appdata.load().then(() => {
+        this.ticketCategoryMap = this.$appdata.getDictionaryList('ticketCategoryMap')
+        console.log('load', this.ticketCategoryMap)
+        this.ticketCategoryMapLoading = false
+      })
+    }
+    let customerName = this.$route.query.orgName
+    // 分割客户名称
+    if (customerName) {
+      const partArr = customerName.split('.')
+      if (partArr.length === 5) {
+        customerName = `${partArr[1]}.${partArr[4]}`
+      }
+    }
+    this.currUser.ename = customerName
+    this.fixedQueryForm['t_uploader'] = this.currUser.ename
   },
   methods: {
     toDetail (record, id) {
@@ -317,42 +344,8 @@ export default {
         reader.onerror = error => reject(error)
       })
     },
-    // 图像修改检测
-    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.data === '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
+    setFiles (fileIds) {
+      this.fileList = fileIds
     },
     handleCancel () {
       this.previewVisible = false
@@ -367,50 +360,25 @@ export default {
     },
     // 提交按钮逻辑
     onSubmit () {
-      // 根据当前日期调用logic获取订单序列号
-      return post(TicketDetailsViewApi.getTicketSerialNumber, {
-        priority: this.data.priority,
-        category: this.data.category,
-        time: this.dataFormat(new Date())
+      let customerName = this.currUser.ename
+      if (!customerName) {
+        customerName = this.customerName
+      }
+      const form = {
+        customerName,
+        problemType: this.form.category,
+        contact: this.form.phone,
+        problemDetail: this.form.desc,
+        Images: this.fileList
+      }
+      if (!this.form.desc) {
+        form.problemDetail = '该用户没有填写描述信息'
+      }
+      post(TicketDetailsViewApi.createTicket, { form }).then((res) => {
+        this.serialNumber = res
+        this.successVisible = true
+        this.$message.success('创建成功')
       })
-        .then(res => {
-          const serialNumber = res
-          if (this.form.desc === undefined) {
-            this.form.desc = '该用户没有填写描述信息'
-          }
-          // 拿到序列号，将数据保存到数据库中
-          this.categoryStr = this.$appdata.getDictionaryList('ticketCategoryMap')[this.form.category].label
-          return post(TicketDetailsViewApi.addTicket, {
-            uploader: this.currUser.ename,
-            description: this.form.desc,
-            category: this.form.category,
-            serial_number: serialNumber,
-            images: this.fileList,
-            categoryStr: this.categoryStr,
-            phoneNumber: this.form.phone
-          })
-            .then(res => {
-              this.serialNumber = serialNumber
-              this.successVisible = true
-              this.fileList = []
-              this.form.category = ''
-              this.form.desc = ''
-              this.showCategoryAlert = true
-              this.showPhoneAlert = true
-            }, err => {
-              console.log(err)
-            })
-        }, err => {
-          console.log(err)
-        })
-    },
-    // 格式化时间，为后台提供yyyyMMdd格式数据，方便后台使用
-    dataFormat (time) {
-      return `${
-        time.getFullYear()}${time.getMonth() + 1 >= 10 ? (time.getMonth() + 1) : '0' +
-        (time.getMonth() + 1)}${time.getDate() >= 10 ? time.getDate() : '0' +
-        time.getDate()
-      }`
     },
     // 点击向日葵链接
     toSunClientClick () {
@@ -420,13 +388,22 @@ export default {
     toDeskClick () {
       window.open('https://www.todesk.com/download.html')
     },
-    logout () {
-      logout()
-      this.$router.push('/login')
-    },
     // 切换标签页
     changeTab (id) {
+      if (id === 'workHistory' && !this.fixedQueryForm.t_uploader) {
+        this.infoFormVisible = true
+        return
+      }
       this.tabActiveKey = id
+    },
+    onInfoFormSubmit () {
+      this.$refs.infoFormRef.validate(valid => {
+        if (valid) {
+          this.fixedQueryForm['t_uploader'] = this.infoForm.customerName
+          this.tabActiveKey = 'workHistory'
+          this.infoFormVisible = false
+        }
+      })
     }
   },
   watch: {
@@ -438,9 +415,13 @@ export default {
     'form.phone' (newVal) {
       const numReg = new RegExp(/^[0-9]+$/)
       this.showPhoneAlert = !numReg.test(newVal)
+    },
+    'customerName' (newVal) {
+      this.showCustomerNameAlert = !newVal
     }
   }
 }
+const uploadModel = JSON.parse('{"addOrEdit":"all","resUploadStock":1,"pathKey":"cs","rule":{"type":"string","required":"false"},"isOnlyAddOrEdit":true,"acceptCount":5,"type":"image","accept":[".jpg,.jpeg,.ico,.gif,svg,.webp,.png,.bmp,.pjpeg,"],"stockAlias":"webmeter","fileRootPath":"D:\\\\nginx-resource\\\\resource\\\\","name":"图片","resUploadMode":"server","model":"Images"}')
 </script>
 
 <style scoped>

package/src/pages/system/ticket/submitTicketSuccess.vue

@@ -2,9 +2,9 @@
   <a-card class="result-success" :bordered="false">
     <result :is-success="icon" :description="description" :title="title">
       <template slot="action">
-        <span style="margin-right: 10px" v-if="countDown > 0">{{ countDownFormat() }}</span>
-        <a-button type="primary" v-if="UrgentAvailable" :disabled="urgentAccess" style="margin-right: 20px" @click="urgent">请求加急处理</a-button>
-        <a-button type="danger" @click="closeBtn" >撤销工单</a-button>
+        <span style="margin-right: 10px" v-if="countDown > 0">{{ countDown }}</span>
+        <!-- <a-button type="primary" v-if="UrgentAvailable" :disabled="urgentAccess" style="margin-right: 20px" @click="urgent">请求加急处理</a-button> -->
+        <!-- <a-button type="danger" @click="closeBtn">撤销工单</a-button> -->
       </template>
       <a-modal
         title="关闭工单"
@@ -20,8 +20,8 @@
         <div class="project-name">工单处理进度</div>
         <detail-list size="small" style="max-width: 800px; margin-bottom: 8px">
           <detail-list-item term="工单编号">{{ serialNumber }}</detail-list-item>
-          <detail-list-item term="负责人">{{ details.name }}</detail-list-item>
-          <detail-list-item term="提交时间">2016-12-12</detail-list-item>
+          <detail-list-item v-if="details.name" term="负责人">{{ details.name }}</detail-list-item>
+          <detail-list-item term="提交时间">{{ details.createdTime}}</detail-list-item>
         </detail-list>
         <a-steps :current="step" progressDot>
           <a-step title="工单提交">
@@ -60,19 +60,20 @@ const DetailListItem = DetailList.Item
 export default {
   name: 'submitTicketSuccess',
   components: { AStepItemGroup, AStepItem, DetailListItem, DetailList, Result },
+  props: {
+    // 工单序列号
+    serialNumber: String,
+  },
   data () {
     return {
       title: '提交成功',
-      description: '您创建的工单已成功提交，请保持电话畅通，我们的工作人员将尽快与您取得联系。' +
-        '如果需要加急，请在倒计时结束后点击加急按钮，加急后我们将优先处理您的工单',
-      // 工单序列号
-      serialNumber: '',
+      description: '您创建的工单已成功提交，请保持电话畅通，我们的工作人员将尽快与您取得联系。', // +
+        // '如果需要加急，请在倒计时结束后点击加急按钮，加急后我们将优先处理您的工单',
       // 工单详情
       details: {
         uploader: '',
         status: '',
         name: '',
-        priority: undefined,
         createdTime: '',
         confirmTime: '',
         finishedTime: ''
@@ -83,9 +84,6 @@ export default {
       countDown: 0,
       // 控制加急按钮显示
       UrgentAvailable: true,
-      // 刷新页面的定时器
-      time: undefined,
-      timer: undefined,
       // 取消工单确认框可见性
       closeVisible: false,
       // 控制页面大图标
@@ -93,14 +91,7 @@ export default {
     }
   },
   mounted () {
-    this.serialNumber = this.$route.query.serialNumber
     this.getTicketDetail()
-    this.refresh()
-    this.countDown = 0
-  },
-  beforeDestroy () {
-    this.stopTimer()
-    this.stopTimer2()
   },
   methods: {
     format (date, format) {
@@ -117,7 +108,6 @@ export default {
           this.title = '工单已关闭'
           this.description = ''
           this.icon = false
-          this.stopTimer()
         }, err => {
           console.error(err)
         })
@@ -130,14 +120,6 @@ export default {
     closeBtn () {
       this.closeVisible = true
     },
-    // 过10s刷新一下页面数据
-    refresh () {
-      if (this.timer === undefined) {
-        this.timer = setInterval(() => {
-          this.getTicketDetail()
-        }, 10 * 1000)
-      }
-    },
     // 对工单进行加急处理
     urgent () {
       return post(TicketDetailsViewApi.rushTicket, {
@@ -161,33 +143,6 @@ export default {
           console.log(err)
         })
     },
-    // 格式化倒计时
-    countDownFormat () {
-      const hours = '00'
-      let mins = Math.floor(this.countDown / 60)
-      let secs = this.countDown % 60
-      if (mins < 10) {
-        mins = '0' + mins
-      }
-      if (secs < 10) {
-        secs = '0' + secs
-      }
-      return hours + ':' + mins + ':' + secs
-    },
-    // 设置用于控制加急按钮倒计时定时器，加急按钮5分钟后才可点击
-    setTimer () {
-      this.countDown = 5
-      if (this.time === undefined) {
-        this.time = setInterval(() => {
-          this.countDown--
-          if (this.countDown <= 0) {
-            this.urgentAccess = false
-            this.stopTimer2()
-            this.countDown = -1
-          }
-        }, 1000)
-      }
-    },
     // 获取工单详情
     getTicketDetail () {
       return post(TicketDetailsViewApi.getTicketDetailsForUploader, {
@@ -215,30 +170,10 @@ 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
-
-          // 如果当前状态为一般，设置定时器，五分钟后允许加急
-          if (this.details.priority > 1 && this.countDown === 0) {
-            this.setTimer()
-          }
         }, err => {
           console.log(err)
         })
     },
-    // 停止定时器
-    stopTimer () {
-      if (this.timer) {
-        clearInterval(this.timer)
-        this.timer = undefined
-      }
-    },
-    // 停止定时器2
-    stopTimer2 () {
-      if (this.time) {
-        clearInterval(this.time)
-        this.time = undefined
-      }
-    }
   },
   computed: {
     // 用于进度条，进度显示控制

package/src/router/async/config.async.js

@@ -1,26 +1,26 @@
-import routerMap from './router.map'
-import { parseRoutes } from '@vue2-client/utils/routerUtil'
-
-// 异步路由配置
-const routesConfig = [
-  'login',
-  'submitTicket',
-  'root',
-  {
-    router: 'exp404',
-    path: '*',
-    name: '404'
-  },
-  {
-    router: 'exp403',
-    path: '/403',
-    name: '403'
-  }
-]
-
-const options = {
-  mode: 'history',
-  routes: parseRoutes(routesConfig, routerMap)
-}
-
-export default options
+import routerMap from './router.map'
+import { parseRoutes } from '@vue2-client/utils/routerUtil'
+
+// 异步路由配置
+const routesConfig = [
+  'login',
+  'submitTicket',
+  'root',
+  {
+    router: 'exp404',
+    path: '*',
+    name: '404'
+  },
+  {
+    router: 'exp403',
+    path: '/403',
+    name: '403'
+  }
+]
+
+const options = {
+  mode: 'history',
+  routes: parseRoutes(routesConfig, routerMap)
+}
+
+export default options