vue2-client 1.2.27 → 1.2.28-test2

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

@@ -1,438 +1,437 @@
-<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'
-  import XFormTable from '@vue2-client/base-client/components/common/XFormTable/XFormTable'
-
-  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: ''
-      }
-    },
-    mounted () {
-      if (!this.currUser) {
-        this.$router.replace('/login')
-        return
-      }
-      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
-            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.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>
+<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 { TicketDetailsViewApi, post } from '@vue2-client/services/api'
+  import { logout } from '@/services/user'
+  import { mapState } from 'vuex'
+  import XFormTable from '@vue2-client/base-client/components/common/XFormTable/XFormTable'
+
+  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: ''
+      }
+    },
+    mounted () {
+      if (!this.currUser) {
+        this.$router.replace('/login')
+        return
+      }
+      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
+            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.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>