vue2-client 1.2.37 → 1.2.38

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

@@ -1,440 +1,456 @@
-<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 v-if="visible">
-      <div style="text-align: right">
-        <p>欢迎您：{{ currUser.ename }}</p>
-      </div>
-      <div class="submitTicketTitle">
-        <span>奥枫问题反馈平台</span>
-      </div>
-      <a-tabs :activeKey="tabActiveKey" @change="changeTab">
-        <a-tab-pane key="workSubmit" tab="工单提交">
-          <!--   表格主体   -->
-          <a-row v-if="tabActiveKey === 'workSubmit'">
-            <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="workHistory" tab="历史工单">
-          <!--   查询表单   -->
-          <x-form-table
-            v-if="tabActiveKey === 'workHistory'"
-            title="已提交工单"
-            :queryParamsName="queryParamsName"
-            :fixed-query-form="fixedQueryForm"
-            @action="toDetail">
-          </x-form-table>
-        </a-tab-pane>
-      </a-tabs>
-    </a-card>
-  </div>
-</template>
-
-<script>
-  import { TicketDetailsViewApi, post } from '@vue2-client/services/api'
-  import { logout } from '@/services/user'
-  import XFormTable from '@vue2-client/base-client/components/common/XFormTable/XFormTable'
-  import Vue from 'vue'
-
-  export default {
-    name: 'submitTicket',
-    components: {
-      XFormTable
-    },
-    data () {
-      return {
-        // 查询配置文件名
-        queryParamsName: 'TicketQueryForCustomer',
-        // 控制成功页面显示
-        successVisible: false,
-        // 控制预览显示
-        previewVisible: false,
-        // 图片真实地址
-        previewImage: '',
-        // 图片列表
-        fileList: [],
-        // 表单数据
-        form: {
-          name: '',
-          category: undefined,
-          desc: undefined
-        },
-        // 获取序列号使用
-        data: {
-          priority: 2,
-          category: 0,
-          time: this.dataFormat(new Date())
-        },
-        // 工单序列号
-        serialNumber: '',
-        // 类别未填写警告信息控制
-        showCategoryAlert: true,
-        // 向日葵使用指南可见性
-        sunClientManualVisible: false,
-        // 向日葵使用指南可见性
-        toDeskManualVisible: false,
-        // 为工单查询指定条件
-        fixedQueryForm: {},
-        // 工单类型在字典中显示的文字值
-        categoryStr: '',
-        // 当前登陆用户手机号
-        phoneNumber: '',
-        // 用户信息
-        currUser: {
-          ename: '',
-          phoneNumber: ''
-        },
-        visible: false,
-        tabActiveKey: 'workSubmit'
-      }
-    },
-    created () {
-      Vue.$appdata.load().then(res => {
-        this.currUser.phoneNumber = this.$route.query.personPhone ? this.$route.query.personPhone : '未定义'
-        this.currUser.ename = this.$route.query.orgName
-        this.fixedQueryForm['t_uploader'] = this.currUser.ename
-        this.visible = true
-      })
-    },
-    mounted () {
-    },
-    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)
-        })
-      },
-      // 图像修改检测
-      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
-            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.currUser.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')
-      },
-      // 切换标签页
-      changeTab (id) {
-        this.tabActiveKey = id
-      }
-    },
-    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>
+<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" alt="pic">
+        <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" alt="pic">
+        <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" alt="pic">
+        <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" alt="pic">
+        <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" alt="pic">
+        <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" alt="pic">
+        <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" alt="pic">
+        <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" alt="pic">
+        <br/>
+        <br/>
+        <p style="line-height: 30px;font-size: 1.5em;text-indent: 2em">
+          将您截好的图片，通过表单提交页面，下方 “+” （加号）的按钮，提交给我们。
+          这样我们的工作人员就可以远程协助您，排查、解决问题
+        </p>
+        <br/>
+        <br/>
+      </div>
+    </a-modal>
+    <a-card v-if="visible">
+      <div style="text-align: right">
+        <p>欢迎您：{{ currUser.ename }}</p>
+      </div>
+      <div class="submitTicketTitle">
+        <span>奥枫问题反馈平台</span>
+      </div>
+      <a-tabs :activeKey="tabActiveKey" @change="changeTab">
+        <a-tab-pane key="workSubmit" tab="工单提交">
+          <!--   表格主体   -->
+          <a-row v-if="tabActiveKey === 'workSubmit'">
+            <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-input v-model="form.phone"></a-input>
+                  <strong v-show="showPhoneAlert" 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 || showPhoneAlert">
+                    提交
+                  </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"
+                      style="text-align: center">
+                      <img @click="toSunClientClick" style="width: 128px;height:128px;cursor: pointer" src="@vue2-client/assets/img/SunClientDownload.png" alt="pic"/>
+                      <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"
+                      style="text-align: center">
+                      <img @click="toDeskClick" style="width: 128px;height:128px;cursor: pointer" src="@vue2-client/assets/img/ToDeskDownload.png" alt="pic">
+                      <p style="padding-top:10px;text-align: center"><a @click="toDeskManualVisible = true">ToDesk使用说明</a></p>
+                    </a-col>
+                  </a-row>
+                  <a-row :gutter="16" style="text-align: center">
+                    <hr/>
+                    <p style="color: red;font-weight: bolder;padding-top: 10px">如需远程协助，请下载向日葵</p>
+                    <p style="color: red;font-weight: bolder">向日葵安装使用指南，请点击上方“向日葵使用说明”查看</p>
+                  </a-row>
+                </a-space>
+              </a-card>
+            </a-col>
+          </a-row>
+        </a-tab-pane>
+        <a-tab-pane key="workHistory" tab="历史工单">
+          <!--   查询表单   -->
+          <x-form-table
+            v-if="tabActiveKey === 'workHistory'"
+            title="已提交工单"
+            :queryParamsName="queryParamsName"
+            :fixed-query-form="fixedQueryForm"
+            @action="toDetail">
+          </x-form-table>
+        </a-tab-pane>
+      </a-tabs>
+    </a-card>
+  </div>
+</template>
+
+<script>
+import { TicketDetailsViewApi, post } from '@vue2-client/services/api'
+import { logout } from '@/services/user'
+import XFormTable from '@vue2-client/base-client/components/common/XFormTable/XFormTable'
+import Vue from 'vue'
+
+export default {
+  name: 'submitTicket',
+  components: {
+    XFormTable
+  },
+  data () {
+    return {
+      // 查询配置文件名
+      queryParamsName: 'TicketQueryForCustomer',
+      // 控制成功页面显示
+      successVisible: false,
+      // 控制预览显示
+      previewVisible: false,
+      // 图片真实地址
+      previewImage: '',
+      // 图片列表
+      fileList: [],
+      // 表单数据
+      form: {
+        name: '',
+        category: undefined,
+        desc: undefined,
+        phone: ''
+      },
+      // 获取序列号使用
+      data: {
+        priority: 2,
+        category: 0,
+        time: this.dataFormat(new Date())
+      },
+      // 工单序列号
+      serialNumber: '',
+      // 类别未填写警告信息控制
+      showCategoryAlert: true,
+      showPhoneAlert: true,
+      // 向日葵使用指南可见性
+      sunClientManualVisible: false,
+      // 向日葵使用指南可见性
+      toDeskManualVisible: false,
+      // 为工单查询指定条件
+      fixedQueryForm: {},
+      // 工单类型在字典中显示的文字值
+      categoryStr: '',
+      // 用户信息
+      currUser: {
+        ename: '',
+        phoneNumber: ''
+      },
+      visible: false,
+      tabActiveKey: 'workSubmit'
+    }
+  },
+  created () {
+    Vue.$appdata.load().then(res => {
+      this.currUser.ename = this.$route.query.orgName
+      this.fixedQueryForm['t_uploader'] = this.currUser.ename
+      this.visible = true
+    })
+  },
+  mounted () {
+  },
+  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)
+      })
+    },
+    // 图像修改检测
+    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
+          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 () {
+      window.open('https://sunlogin.oray.com/download')
+    },
+    // 点击ToDesk链接
+    toDeskClick () {
+      window.open('https://www.todesk.com/download.html')
+    },
+    logout () {
+      logout()
+      this.$router.push('/login')
+    },
+    // 切换标签页
+    changeTab (id) {
+      this.tabActiveKey = id
+    }
+  },
+  watch: {
+    // 监控类别的改变，当类别改变，校验通过
+    'form.category' (newVal) {
+      const numReg = new RegExp(/^[0-9]+$/)
+      this.showCategoryAlert = !numReg.test(newVal)
+    },
+    'form.phone' (newVal) {
+      const numReg = new RegExp(/^[0-9]+$/)
+      this.showPhoneAlert = !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>