vue2-client 1.0.0 → 1.2.1

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

@@ -1,303 +1,303 @@
-<template>
-  <a-drawer
-    title="工单进度查询"
-    placement="right"
-    :width="isMobile ? screenWidth : screenWidth * 0.85"
-    :visible="visible"
-    @close="onClose"
-  >
-    <a-card class="result-success" :bordered="false">
-      <result :is-success="icon" :description="description" :title="title" :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>
-        </template>
-        <a-modal
-          title="关闭工单"
-          :visible="closeVisible"
-          @ok="handleCloseOk"
-          @cancel="handleCloseCancel"
-          :zIndex="1002"
-        >
-          <p>是否确认手动关闭工单？</p>
-          <p style="color: red">（该操作不可撤销，请谨慎操作！）</p>
-        </a-modal>
-        <div>
-          <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="提交时间">{{ format(details.createdTime, 'yyyy-MM-dd') }}</detail-list-item>
-          </detail-list>
-          <a-steps :current="step" progressDot>
-            <a-step title="工单提交">
-              <a-step-item-group slot="description">
-                <a-step-item :title="details.uploader" />
-                <a-step-item :title="details.createdTime"/>
-              </a-step-item-group>
-            </a-step>
-            <a-step title="工单处理中" >
-              <a-step-item-group slot="description">
-                <a-step-item :title="details.name" v-if="step >= 1" />
-                <a-step-item :title="details.confirmTime" v-if="step >= 1"/>
-              </a-step-item-group>
-            </a-step>
-            <a-step title="工单完成" >
-              <a-step-item-group slot="description">
-                <a-step-item :title="details.finishedTime" v-if="step >= 2"/>
-              </a-step-item-group>
-            </a-step>
-          </a-steps>
-        </div>
-      </result>
-    </a-card>
-  </a-drawer>
-</template>
-
-<script>
-import Result from '@/components/result/Result'
-import DetailList from '@/components/tool/DetailList'
-import AStepItem from '@/components/tool/AStepItem'
-import { TicketDetailsViewApi } from '@/services/api/TicketDetailsViewApi'
-import { post } from '@/services/api/restTools'
-import { mapState } from 'vuex'
-import { formatDate } from '@/utils/util'
-
-const AStepItemGroup = AStepItem.Group
-const DetailListItem = DetailList.Item
-export default {
-  name: 'submitTicketSuccess',
-  components: { AStepItemGroup, AStepItem, DetailListItem, DetailList, Result },
-  data () {
-    return {
-      // 页面宽度
-      screenWidth: document.documentElement.clientWidth,
-      title: '提交成功',
-      description: '您创建的工单已成功提交，请保持电话畅通，我们的工作人员将尽快与您取得联系',
-      // 加急按钮气泡文字
-      tip: '如果需要加急，请在5分钟倒计时结束后点击加急按钮，加急后我们将优先处理您的工单',
-      // 控制标题样式
-      titleClass: 'title',
-      // 工单详情
-      details: {
-        uploader: '',
-        status: '',
-        name: '',
-        priority: undefined,
-        createdTime: '',
-        confirmTime: '',
-        finishedTime: ''
-      },
-      // 控制加急按钮
-      urgentAccess: true,
-      // 倒计时
-      countDown: 0,
-      // 控制加急按钮显示
-      UrgentAvailable: true,
-      // 刷新页面的定时器
-      timer: undefined,
-      // 取消工单确认框可见性
-      closeVisible: false,
-      // 控制页面大图标
-      icon: true,
-      // 控制加急后定时器
-      showTelephoneCountDown: 0
-    }
-  },
-  props: {
-    serialNumber: {
-      type: String,
-      required: true
-    },
-    visible: {
-      type: Boolean,
-      default: false
-    }
-  },
-  mounted () {
-    this.getTicketDetail()
-    this.refresh()
-    this.countDown = 0
-  },
-  methods: {
-    // 关闭抽屉时回调
-    onClose () {
-      this.urgentAccess = true
-      clearInterval(this.timer)
-      this.$emit('update:visible', false)
-      this.titleClass = 'title'
-      this.description = '您创建的工单已成功提交，请保持电话畅通，我们的工作人员将尽快与您取得联系'
-      this.title = '提交成功'
-      this.UrgentAvailable = true
-    },
-    format (date, format) {
-      return formatDate(date, format)
-    },
-    // 关闭工单确认后操作
-    handleCloseOk () {
-      return post(TicketDetailsViewApi.manualCloseTicketByCustomer, {
-        serialNumber: this.serialNumber,
-        time: new Date()
-      })
-        .then(res => {
-          this.closeVisible = false
-          this.title = '工单已关闭'
-          this.description = ''
-          this.icon = false
-          clearInterval(this.timer)
-        }, err => {
-          console.error(err)
-        })
-    },
-    // 关闭工单取消后业务逻辑
-    handleCloseCancel () {
-      this.closeVisible = false
-    },
-    // 关闭工单按钮
-    closeBtn () {
-      this.closeVisible = true
-    },
-    // 过10s刷新一下页面数据
-    refresh () {
-      this.timer = setInterval(() => {
-        this.getTicketDetail()
-      }, 10 * 1000)
-    },
-    // 对工单进行加急处理
-    urgent () {
-      return post(TicketDetailsViewApi.rushTicket, {
-        serialNumber: this.serialNumber
-      })
-        .then(res => {
-          if (res === 1) {
-            this.$message.success(
-              '操作成功',
-              5
-            )
-            this.title = '加急成功'
-            this.titleClass = 'title_danger'
-            this.description = '您的工单已经被加急处理，我们的工作人员会马上与您取得联系'
-            this.UrgentAvailable = false
-            this.showPhoneNumberTimer()
-          } else {
-            this.$message.error(
-              '操作失败',
-              5
-            )
-          }
-        }, err => {
-          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
-      const time = setInterval(() => {
-        this.countDown--
-        if (this.countDown <= 0) {
-          this.urgentAccess = false
-          clearInterval(time)
-          this.countDown = -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
-        }
-      }, 1000)
-    },
-    // 获取工单详情
-    getTicketDetail () {
-      return post(TicketDetailsViewApi.getTicketDetailsForUploader, {
-        serialNumber: this.serialNumber
-      })
-        .then(res => {
-          this.details.uploader = res.uploader
-          // 判断负责人有没有值
-          if (res.name === undefined) {
-            this.details.name = ''
-          } else {
-            this.details.name = res.name
-          }
-          // 判断工单被确认时间
-          if (res.confirmtime === undefined) {
-            this.details.confirmTime = ''
-          } else {
-            this.details.confirmTime = this.format(res.confirmtime, 'yyyy-MM-dd hh:mm:ss')
-          }
-          // 判断工单完成时间
-          if (res.finishedtime === undefined) {
-            this.details.finishedTime = ''
-          } else {
-            this.details.finishedTime = this.format(res.finishedtime, 'yyyy-MM-dd hh:mm:ss')
-          }
-          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)
-        })
-    }
-  },
-  computed: {
-    ...mapState('account', { currUser: 'user' }),
-    ...mapState('setting', ['isMobile']),
-    // 用于进度条，进度显示控制
-    step () {
-      if (this.details.status !== 0 && this.details.status !== 1) {
-        return 2
-      } else {
-        return this.details.status
-      }
-    }
-  },
-  watch: {
-    'serialNumber' () {
-      this.getTicketDetail()
-      this.refresh()
-      this.countDown = 0
-    }
-  }
-}
-</script>
-
-<style scoped lang="less">
-.result-success{
-  .action:not(:first-child){
-    margin-left: 8px;
-  }
-  .project-name{
-    font-size: 16px;
-    color: @title-color;
-    font-weight: 500;
-    margin-bottom: 20px;
-  }
-}
-</style>
+<template>
+  <a-drawer
+    title="工单进度查询"
+    placement="right"
+    :width="isMobile ? screenWidth : screenWidth * 0.85"
+    :visible="visible"
+    @close="onClose"
+  >
+    <a-card class="result-success" :bordered="false">
+      <result :is-success="icon" :description="description" :title="title" :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>
+        </template>
+        <a-modal
+          title="关闭工单"
+          :visible="closeVisible"
+          @ok="handleCloseOk"
+          @cancel="handleCloseCancel"
+          :zIndex="1002"
+        >
+          <p>是否确认手动关闭工单？</p>
+          <p style="color: red">（该操作不可撤销，请谨慎操作！）</p>
+        </a-modal>
+        <div>
+          <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="提交时间">{{ format(details.createdTime, 'yyyy-MM-dd') }}</detail-list-item>
+          </detail-list>
+          <a-steps :current="step" progressDot>
+            <a-step title="工单提交">
+              <a-step-item-group slot="description">
+                <a-step-item :title="details.uploader" />
+                <a-step-item :title="details.createdTime"/>
+              </a-step-item-group>
+            </a-step>
+            <a-step title="工单处理中" >
+              <a-step-item-group slot="description">
+                <a-step-item :title="details.name" v-if="step >= 1" />
+                <a-step-item :title="details.confirmTime" v-if="step >= 1"/>
+              </a-step-item-group>
+            </a-step>
+            <a-step title="工单完成" >
+              <a-step-item-group slot="description">
+                <a-step-item :title="details.finishedTime" v-if="step >= 2"/>
+              </a-step-item-group>
+            </a-step>
+          </a-steps>
+        </div>
+      </result>
+    </a-card>
+  </a-drawer>
+</template>
+
+<script>
+import Result from '@vue2-client/components/result/Result'
+import DetailList from '@vue2-client/components/tool/DetailList'
+import AStepItem from '@vue2-client/components/tool/AStepItem'
+import { TicketDetailsViewApi } from '@vue2-client/services/api/TicketDetailsViewApi'
+import { post } from '@vue2-client/services/api/restTools'
+import { mapState } from 'vuex'
+import { formatDate } from '@vue2-client/utils/util'
+
+const AStepItemGroup = AStepItem.Group
+const DetailListItem = DetailList.Item
+export default {
+  name: 'submitTicketSuccess',
+  components: { AStepItemGroup, AStepItem, DetailListItem, DetailList, Result },
+  data () {
+    return {
+      // 页面宽度
+      screenWidth: document.documentElement.clientWidth,
+      title: '提交成功',
+      description: '您创建的工单已成功提交，请保持电话畅通，我们的工作人员将尽快与您取得联系',
+      // 加急按钮气泡文字
+      tip: '如果需要加急，请在5分钟倒计时结束后点击加急按钮，加急后我们将优先处理您的工单',
+      // 控制标题样式
+      titleClass: 'title',
+      // 工单详情
+      details: {
+        uploader: '',
+        status: '',
+        name: '',
+        priority: undefined,
+        createdTime: '',
+        confirmTime: '',
+        finishedTime: ''
+      },
+      // 控制加急按钮
+      urgentAccess: true,
+      // 倒计时
+      countDown: 0,
+      // 控制加急按钮显示
+      UrgentAvailable: true,
+      // 刷新页面的定时器
+      timer: undefined,
+      // 取消工单确认框可见性
+      closeVisible: false,
+      // 控制页面大图标
+      icon: true,
+      // 控制加急后定时器
+      showTelephoneCountDown: 0
+    }
+  },
+  props: {
+    serialNumber: {
+      type: String,
+      required: true
+    },
+    visible: {
+      type: Boolean,
+      default: false
+    }
+  },
+  mounted () {
+    this.getTicketDetail()
+    this.refresh()
+    this.countDown = 0
+  },
+  methods: {
+    // 关闭抽屉时回调
+    onClose () {
+      this.urgentAccess = true
+      clearInterval(this.timer)
+      this.$emit('update:visible', false)
+      this.titleClass = 'title'
+      this.description = '您创建的工单已成功提交，请保持电话畅通，我们的工作人员将尽快与您取得联系'
+      this.title = '提交成功'
+      this.UrgentAvailable = true
+    },
+    format (date, format) {
+      return formatDate(date, format)
+    },
+    // 关闭工单确认后操作
+    handleCloseOk () {
+      return post(TicketDetailsViewApi.manualCloseTicketByCustomer, {
+        serialNumber: this.serialNumber,
+        time: new Date()
+      })
+        .then(res => {
+          this.closeVisible = false
+          this.title = '工单已关闭'
+          this.description = ''
+          this.icon = false
+          clearInterval(this.timer)
+        }, err => {
+          console.error(err)
+        })
+    },
+    // 关闭工单取消后业务逻辑
+    handleCloseCancel () {
+      this.closeVisible = false
+    },
+    // 关闭工单按钮
+    closeBtn () {
+      this.closeVisible = true
+    },
+    // 过10s刷新一下页面数据
+    refresh () {
+      this.timer = setInterval(() => {
+        this.getTicketDetail()
+      }, 10 * 1000)
+    },
+    // 对工单进行加急处理
+    urgent () {
+      return post(TicketDetailsViewApi.rushTicket, {
+        serialNumber: this.serialNumber
+      })
+        .then(res => {
+          if (res === 1) {
+            this.$message.success(
+              '操作成功',
+              5
+            )
+            this.title = '加急成功'
+            this.titleClass = 'title_danger'
+            this.description = '您的工单已经被加急处理，我们的工作人员会马上与您取得联系'
+            this.UrgentAvailable = false
+            this.showPhoneNumberTimer()
+          } else {
+            this.$message.error(
+              '操作失败',
+              5
+            )
+          }
+        }, err => {
+          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
+      const time = setInterval(() => {
+        this.countDown--
+        if (this.countDown <= 0) {
+          this.urgentAccess = false
+          clearInterval(time)
+          this.countDown = -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
+        }
+      }, 1000)
+    },
+    // 获取工单详情
+    getTicketDetail () {
+      return post(TicketDetailsViewApi.getTicketDetailsForUploader, {
+        serialNumber: this.serialNumber
+      })
+        .then(res => {
+          this.details.uploader = res.uploader
+          // 判断负责人有没有值
+          if (res.name === undefined) {
+            this.details.name = ''
+          } else {
+            this.details.name = res.name
+          }
+          // 判断工单被确认时间
+          if (res.confirmtime === undefined) {
+            this.details.confirmTime = ''
+          } else {
+            this.details.confirmTime = this.format(res.confirmtime, 'yyyy-MM-dd hh:mm:ss')
+          }
+          // 判断工单完成时间
+          if (res.finishedtime === undefined) {
+            this.details.finishedTime = ''
+          } else {
+            this.details.finishedTime = this.format(res.finishedtime, 'yyyy-MM-dd hh:mm:ss')
+          }
+          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)
+        })
+    }
+  },
+  computed: {
+    ...mapState('account', { currUser: 'user' }),
+    ...mapState('setting', ['isMobile']),
+    // 用于进度条，进度显示控制
+    step () {
+      if (this.details.status !== 0 && this.details.status !== 1) {
+        return 2
+      } else {
+        return this.details.status
+      }
+    }
+  },
+  watch: {
+    'serialNumber' () {
+      this.getTicketDetail()
+      this.refresh()
+      this.countDown = 0
+    }
+  }
+}
+</script>
+
+<style scoped lang="less">
+.result-success{
+  .action:not(:first-child){
+    margin-left: 8px;
+  }
+  .project-name{
+    font-size: 16px;
+    color: @title-color;
+    font-weight: 500;
+    margin-bottom: 20px;
+  }
+}
+</style>