vue2-client 1.2.6 → 1.2.9

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

@@ -0,0 +1,427 @@
+<template>
+  <div>
+    <!--   显示成功页抽屉   -->
+    <submit-ticket-success
+      :visible.sync="successVisible"
+      :serialNumber="serialNumber"
+      :category-str="categoryStr"
+      v-if="serialNumber"
+    />
+    <!--   两个使用手册弹框   -->
+    <a-modal
+      title="向日葵使用指南"
+      :visible="sunClientManualVisible"
+      @ok="sunClientManualVisible = false"
+      @cancel="sunClientManualVisible = false"
+      width="1000px"
+    >
+      <h1>一、安装</h1>
+      <hr/>
+      <div style="padding-left: 100px;padding-top: 20px">
+        <img src="@vue2-client/assets/img/SunClientManual/1.png" style="width: 800px">
+        <br/>
+        <br/>
+        <p style="line-height: 30px;font-size: 1.5em;text-indent: 2em">运行下载好的安装包，按需要手动选择安装路径后，一路点下一步完成安装</p>
+        <br/>
+        <br/>
+      </div>
+      <h1>二、运行</h1>
+      <hr/>
+      <div style="padding-left: 100px;padding-top: 20px">
+        <p style="line-height: 30px;font-size: 1.5em;text-indent: 2em">在桌面或开始菜单中打开向日葵软件</p>
+        <img src="@vue2-client/assets/img/SunClientManual/2.png" style="width: 800px">
+        <br/>
+        <br/>
+        <p style="line-height: 30px;font-size: 1.5em;text-indent: 2em">显示此页面时，您已成功运行向日葵</p>
+        <br/>
+        <br/>
+      </div>
+      <h1>三、截图</h1>
+      <hr/>
+      <div style="padding-left: 100px;padding-top: 20px">
+        <p style="line-height: 30px;font-size: 1.5em;text-indent: 2em">点击软件界面中眼睛样子的按钮，使验证码正常显示</p>
+        <br/>
+        <br/>
+        <img src="@vue2-client/assets/img/SunClientManual/3.png" style="width: 800px">
+        <br/>
+        <br/>
+        <br/>
+        <p style="line-height: 30px;font-size: 1.5em;text-indent: 2em">
+          使用qq，微信，或者任何截图软件。截取屏幕中 “本机识别码” 和 “本机验证码”。
+          确保该值清晰可辨别
+        </p>
+        <br/>
+        <br/>
+        <img src="@vue2-client/assets/img/SunClientManual/4.png" style="width: 800px">
+        <br/>
+        <br/>
+        <p style="line-height: 30px;font-size: 1.5em;text-indent: 2em">
+          将您截好的图片，通过表单提交页面，下方 “+” （加号）的按钮，提交给我们。
+          这样我们的工作人员就可以远程协助您，排查、解决问题
+        </p>
+        <br/>
+        <br/>
+      </div>
+    </a-modal>
+    <a-modal
+      title="ToDesk使用指南"
+      :visible="toDeskManualVisible"
+      @ok="toDeskManualVisible = false"
+      @cancel="toDeskManualVisible = false"
+      width="1000px"
+    >
+      <h1>一、安装</h1>
+      <hr/>
+      <div style="padding-left: 100px;padding-top: 20px">
+        <img src="@vue2-client/assets/img/ToDeskManual/1.png" style="width: 800px">
+        <br/>
+        <br/>
+        <p style="line-height: 30px;font-size: 1.5em;text-indent: 2em">运行下载好的安装包，按需要手动选择安装路径后，一路点下一步完成安装</p>
+        <br/>
+        <br/>
+      </div>
+      <h1>二、运行</h1>
+      <hr/>
+      <div style="padding-left: 100px;padding-top: 20px">
+        <p style="line-height: 30px;font-size: 1.5em;text-indent: 2em">在桌面或开始菜单中打开ToDesk软件</p>
+        <img src="@vue2-client/assets/img/ToDeskManual/2.png" style="width: 800px">
+        <br/>
+        <br/>
+        <p style="line-height: 30px;font-size: 1.5em;text-indent: 2em">显示此页面时，您已成功运行ToDesk</p>
+        <br/>
+        <br/>
+      </div>
+      <h1>三、截图</h1>
+      <hr/>
+      <div style="padding-left: 100px;padding-top: 20px">
+        <p style="line-height: 30px;font-size: 1.5em;text-indent: 2em">点击软件界面中眼睛样子的按钮，使临时密码正常显示</p>
+        <br/>
+        <br/>
+        <img src="@vue2-client/assets/img/ToDeskManual/3.png" style="width: 800px">
+        <br/>
+        <br/>
+        <br/>
+        <p style="line-height: 30px;font-size: 1.5em;text-indent: 2em">
+          使用qq，微信，或者任何截图软件。截取屏幕中 “设备代码” 和 “临时密码”。
+          确保该值清晰可辨别
+        </p>
+        <br/>
+        <br/>
+        <img src="@vue2-client/assets/img/ToDeskManual/4.png" style="width: 800px">
+        <br/>
+        <br/>
+        <p style="line-height: 30px;font-size: 1.5em;text-indent: 2em">
+          将您截好的图片，通过表单提交页面，下方 “+” （加号）的按钮，提交给我们。
+          这样我们的工作人员就可以远程协助您，排查、解决问题
+        </p>
+        <br/>
+        <br/>
+      </div>
+    </a-modal>
+    <a-card>
+      <div style="text-align: right">
+        <p>欢迎您：{{ currUser.name }}，<a @click="logout">退出登录</a></p>
+      </div>
+      <div class="submitTicketTitle">
+        <span>奥枫问题反馈平台</span>
+      </div>
+      <a-tabs>
+        <a-tab-pane :key="1" tab="工单提交">
+          <!--   表格主体   -->
+          <a-row>
+            <a-col :span="18">
+              <a-form :label-col="{ span: 5 }" :wrapper-col="{ span: 12 }">
+                <!--     问题类型单选框     -->
+                <a-form-item label="问题类型">
+                  <a-radio-group v-model="form.category" v-for="(item,index) in $appdata.getDictionaryList('ticketCategoryMap')" :key="index">
+                    <a-radio :value="item.value" class="radio-item">
+                      {{ item.label }}
+                    </a-radio>
+                  </a-radio-group>
+                  <br/>
+                  <strong v-show="showCategoryAlert" style="color: red">类型不允许为空！</strong>
+                </a-form-item>
+                <!--     问题描述框     -->
+                <a-form-item label="问题详情描述">
+                  <a-textarea allow-clear v-model="form.desc" placeholder="请用一句话描述您的问题，必要时请注明客户编号，表号，系统功能项等信息"/>
+                </a-form-item>
+                <!--     图片上传     -->
+                <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>
+                    <a-modal
+                      :visible="previewVisible"
+                      :footer="null"
+                      @cancel="handleCancel"
+                    >
+                      <img style="width: 100%" :src="previewImage" alt="图片上传"/>
+                    </a-modal>
+                  </div>
+                </a-form-item>
+                <!--     表单底部按钮     -->
+                <a-form-item :wrapper-col="{ span: 12, offset: 5 }">
+                  <a-button type="primary" @click="onSubmit" style="margin-right: 20px" :disabled="showCategoryAlert">
+                    提交
+                  </a-button>
+                </a-form-item>
+              </a-form>
+            </a-col>
+            <a-col :span="6">
+              <a-card title="远程方式快捷下载">
+                <a-space direction="vertical">
+                  <a-row :gutter="16">
+                    <a-col
+                      :lg="24"
+                      :md="24"
+                      :sm="24"
+                      :xl="12"
+                      :xs="24"
+                      :xxl="12">
+                      <img @click="toSunClientClick" style="width: 128px;height:128px;cursor: pointer" src="@vue2-client/assets/img/SunClientDownload.png"/>
+                      <p style="padding-top:10px;text-align: center"><a @click="sunClientManualVisible = true">向日葵使用说明</a></p>
+                    </a-col>
+                    <a-col
+                      :lg="24"
+                      :md="24"
+                      :sm="24"
+                      :xl="12"
+                      :xs="24"
+                      :xxl="12">
+                      <img @click="toDeskClick" style="width: 128px;height:128px;cursor: pointer" src="@vue2-client/assets/img/ToDeskDownload.png">
+                      <p style="padding-top:10px;text-align: center"><a @click="toDeskManualVisible = true">ToDesk使用说明</a></p>
+                    </a-col>
+                  </a-row>
+                </a-space>
+              </a-card>
+            </a-col>
+          </a-row>
+        </a-tab-pane>
+        <a-tab-pane :key="2" tab="历史工单">
+          <!--   查询表单   -->
+          <x-form-table
+            title="已提交工单"
+            :queryParamsName="queryParamsName"
+            :fixed-query-form="fixedQueryForm"
+            @action="toDetail">
+          </x-form-table>
+        </a-tab-pane>
+      </a-tabs>
+    </a-card>
+  </div>
+</template>
+
+<script>
+  import { post } from '@vue2-client/services/api/restTools'
+  import { TicketDetailsViewApi } from '@vue2-client/services/api/TicketDetailsViewApi'
+  import { logout } from '@/services/user'
+  import { mapState } from 'vuex'
+
+  export default {
+    name: 'submitTicket',
+    data () {
+      return {
+        // 查询配置文件名
+        queryParamsName: 'TicketQueryForCustomer',
+        // 控制成功页面显示
+        successVisible: false,
+        // 控制预览显示
+        previewVisible: false,
+        // 图片真实地址
+        previewImage: '',
+        // 图片列表
+        fileList: [],
+        // 表单数据
+        form: {
+          name: '',
+          category: undefined,
+          desc: ''
+        },
+        // 获取序列号使用
+        data: {
+          priority: 2,
+          category: 0,
+          time: this.dataFormat(new Date())
+        },
+        // 工单序列号
+        serialNumber: '',
+        // 类别未填写警告信息控制
+        showCategoryAlert: true,
+        // 向日葵使用指南可见性
+        sunClientManualVisible: false,
+        // 向日葵使用指南可见性
+        toDeskManualVisible: false,
+        // 为工单查询指定条件
+        fixedQueryForm: {},
+        // 工单类型在字典中显示的文字值
+        categoryStr: '',
+        // 当前登陆用户手机号
+        phoneNumber: ''
+      }
+    },
+    mounted () {
+      this.getCurrentUserPhone()
+      this.fixedQueryForm['t_uploader'] = this.currUser.ename
+    },
+    methods: {
+      toDetail (record, id) {
+        this.serialNumber = id + ''
+        this.successVisible = true
+      },
+      getBase64 (file) {
+        return new Promise((resolve, reject) => {
+          const reader = new FileReader()
+          reader.readAsDataURL(file)
+          reader.onload = () => resolve(reader.result)
+          reader.onerror = error => reject(error)
+        })
+      },
+      // 获取当前用户手机号
+      getCurrentUserPhone () {
+        if (this.currUser.f_user_telephone === undefined) {
+          this.phoneNumber = '未定义'
+        } else {
+          this.phoneNumber = this.currUser.f_user_telephone
+        }
+      },
+      // 图像修改检测
+      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
+      },
+      handleCancel () {
+        this.previewVisible = false
+      },
+      // 处理预览图像
+      async handlePreview (file) {
+        if (!file.url && !file.preview) {
+          file.preview = await this.getBase64(file.originFileObj)
+        }
+        this.previewImage = file.url || file.preview
+        this.previewVisible = true
+      },
+      // 提交按钮逻辑
+      onSubmit () {
+        // 根据当前日期调用logic获取订单序列号
+        return post(TicketDetailsViewApi.getTicketSerialNumber, {
+          priority: this.data.priority,
+          category: this.data.category,
+          time: this.dataFormat(new Date())
+        })
+          .then(res => {
+            const serialNumber = res
+            // 拿到序列号，将数据保存到数据库中
+            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.phoneNumber
+            })
+              .then(res => {
+                this.serialNumber = serialNumber
+                this.successVisible = true
+                this.fileList = []
+                this.form.category = ''
+                this.form.desc = ''
+                this.showCategoryAlert = 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 () {
+        window.open('https://sunlogin.oray.com/download')
+      },
+      // 点击ToDesk链接
+      toDeskClick () {
+        window.open('https://www.todesk.com/download.html')
+      },
+      logout () {
+        logout()
+        this.$router.push('/login')
+      }
+    },
+    computed: {
+      ...mapState('account', { currUser: 'user' })
+    },
+    watch: {
+      // 监控类别的改变，当类别改变，校验通过
+      'form.category' (newVal) {
+        const numReg = new RegExp(/^[0-9]+$/)
+        this.showCategoryAlert = !numReg.test(newVal)
+      }
+    }
+  }
+</script>
+
+<style scoped>
+  .radio-item{
+    margin-right: 140px;
+  }
+  .submitTicketTitle{
+    font-size: 40px;
+    vertical-align: middle;
+    text-align: center;
+    margin-bottom: 40px;
+  }
+</style>

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

@@ -0,0 +1,249 @@
+<template>
+  <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>
+      </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="负责人">{{ details.name }}</detail-list-item>
+          <detail-list-item term="提交时间">2016-12-12</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>
+</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 { 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 {
+      title: '提交成功',
+      description: '您创建的工单已成功提交，请保持电话畅通，我们的工作人员将尽快与您取得联系。' +
+        '如果需要加急，请在倒计时结束后点击加急按钮，加急后我们将优先处理您的工单',
+      // 工单序列号
+      serialNumber: '',
+      // 工单详情
+      details: {
+        uploader: '',
+        status: '',
+        name: '',
+        priority: undefined,
+        createdTime: '',
+        confirmTime: '',
+        finishedTime: ''
+      },
+      // 控制加急按钮
+      urgentAccess: true,
+      // 倒计时
+      countDown: 0,
+      // 控制加急按钮显示
+      UrgentAvailable: true,
+      // 刷新页面的定时器
+      timer: undefined,
+      // 取消工单确认框可见性
+      closeVisible: false,
+      // 控制页面大图标
+      icon: true
+    }
+  },
+  mounted () {
+    this.serialNumber = this.$route.query.serialNumber
+    this.getTicketDetail()
+    this.refresh()
+    this.countDown = 0
+  },
+  beforeDestroy () {
+    clearInterval(this.timer)
+  },
+  methods: {
+    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.description = '您的工单已经被加急处理，我们的工作人员会优先处理您的请求。'
+            this.UrgentAvailable = false
+          } 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)
+    },
+    // 获取工单详情
+    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: {
+    // 用于进度条，进度显示控制
+    step () {
+      if (this.details.status !== 0 && this.details.status !== 1) {
+        return 2
+      } else {
+        return this.details.status
+      }
+    }
+  }
+}
+</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>

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

@@ -4,6 +4,7 @@ import { parseRoutes } from '@vue2-client/utils/routerUtil'
 // 异步路由配置
 const routesConfig = [
   'login',
+  'submitTicket',
   'root',
   {
     router: 'exp404',