vue2-client 1.4.20 → 1.4.21

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

@@ -1,474 +1,475 @@
-<template>
-  <div>
-    <!--   显示成功页抽屉   -->
-    <a-modal
-      v-model="successVisible"
-      :footer="null"
-      destroy-on-close
-      title="工单状态"
-      width="70%"
-      @cancel="onSuccessCancel">
-      <submit-ticket-success v-if="serialNumber" :serialNumber="serialNumber" />
-    </a-modal>
-    <!--   两个使用手册弹框   -->
-    <a-modal
-      :visible="sunClientManualVisible"
-      title="向日葵使用指南"
-      width="1000px"
-      @cancel="sunClientManualVisible = false"
-      @ok="sunClientManualVisible = false"
-    >
-      <h1>一、安装</h1>
-      <hr/>
-      <div style="padding-left: 100px;padding-top: 20px">
-        <img alt="pic" 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 alt="pic" 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 alt="pic" 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 alt="pic" 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
-      :visible="toDeskManualVisible"
-      title="ToDesk使用指南"
-      width="1000px"
-      @cancel="toDeskManualVisible = false"
-      @ok="toDeskManualVisible = false"
-    >
-      <h1>一、安装</h1>
-      <hr/>
-      <div style="padding-left: 100px;padding-top: 20px">
-        <img alt="pic" 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 alt="pic" 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 alt="pic" 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 alt="pic" 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-modal
-      :visible="infoFormVisible"
-      title="填写联系方式"
-      @cancel="infoFormVisible = false"
-      @ok="onInfoFormSubmit">
-      <a-form-model
-        ref="infoFormRef"
-        :label-col="{ span: 5 }"
-        :model="infoForm"
-        :wrapper-col="{ span: 18 }">
-        <a-form-model-item :rules="{ required: true, message: '请输入联系方式' }" label="联系方式" prop="phone">
-          <a-input v-model="infoForm.phone" placeholder="请输入联系方式查询历史工单" />
-        </a-form-model-item>
-      </a-form-model>
-    </a-modal>
-    <a-card>
-      <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 v-if="!currUser.ename" label="客户名称">
-                  <a-input v-model="customerName" placeholder="请输入客户名称（总公司名+分公司名）"/>
-                  <strong v-show="showCustomerNameAlert" style="color: red">客户名称不能为空！</strong>
-                </a-form-item>
-                <!--     联系人     -->
-                <a-form-item label="联系人">
-                  <a-input v-model="form.contact"></a-input>
-                  <strong v-show="showContactAlert" 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 v-model="form.desc" allow-clear placeholder="请用一句话描述您的问题，必要时请注明客户编号，表号，系统功能项等信息"/>
-                  <strong v-show="showDescAlert" style="color: red">问题详情描述不能为空！</strong>
-                </a-form-item>
-                <!--     图片上传     -->
-                <a-form-item :wrapper-col="{ span: 12 }" label="问题截图">
-                  <div class="clearfix">
-                    <upload v-if="uploadVisible" :model="imageUploadModel" @setFiles="setImages" />
-                    <a-modal
-                      :footer="null"
-                      :visible="previewVisible"
-                      @cancel="handleCancel"
-                    >
-                      <img :src="previewImage" alt="图片上传" style="width: 100%"/>
-                    </a-modal>
-                  </div>
-                  <strong v-show="!imageList.length" style="color: red">请上传问题截图！</strong>
-                </a-form-item>
-                <!--     附件上传     -->
-                <a-form-item :wrapper-col="{ span: 12 }" label="附件">
-                  <div class="clearfix">
-                    <upload v-if="uploadVisible" :model="fileUploadModel" @setFiles="setFiles" />
-                  </div>
-                </a-form-item>
-                <!--     表单底部按钮     -->
-                <a-form-item :wrapper-col="{ span: 12, offset: 5 }">
-                  <a-button :disabled="showPhoneAlert || !validCustomerName || showContactAlert || showDescAlert || !imageList.length" style="margin-right: 20px" type="primary" @click="onSubmit">
-                    提交
-                  </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 alt="pic" src="@vue2-client/assets/img/SunClientDownload.png" style="width: 128px;height:128px;cursor: pointer" @click="toSunClientClick"/>
-                      <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 alt="pic" src="@vue2-client/assets/img/ToDeskDownload.png" style="width: 128px;height:128px;cursor: pointer" @click="toDeskClick">
-                      <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'"
-            :fixed-query-form="fixedQueryForm"
-            :queryParamsName="queryParamsName"
-            title="已提交工单"
-            @action="toDetail">
-            <a-button slot="button" type="primary" @click="infoFormVisible = true">填写联系方式</a-button>
-          </x-form-table>
-        </a-tab-pane>
-      </a-tabs>
-    </a-card>
-  </div>
-</template>
-
-<script>
-import { TicketDetailsViewApi, post } from '@vue2-client/services/api'
-import XFormTable from '@vue2-client/base-client/components/common/XFormTable/XFormTable'
-import submitTicketSuccess from './submitTicketSuccess'
-import Upload from '@vue2-client/base-client/components/common/Upload'
-
-export default {
-  name: 'submitTicket',
-  components: {
-    XFormTable,
-    submitTicketSuccess,
-    Upload
-  },
-  data () {
-    return {
-      // 查询配置文件名
-      queryParamsName: 'TicketQueryForCustomer',
-      // 控制成功页面显示
-      successVisible: false,
-      // 控制预览显示
-      previewVisible: false,
-      // 图片真实地址
-      previewImage: '',
-      // 图片列表
-      imageList: [],
-      // 附件列表
-      fileList: [],
-      // 表单数据
-      form: {
-        name: '',
-        desc: undefined,
-        contact: '',
-        phone: ''
-      },
-      // 工单序列号
-      serialNumber: '',
-      // 类别未填写警告信息控制
-      showContactAlert: true,
-      showPhoneAlert: true,
-      showDescAlert: true,
-      showCustomerNameAlert: true,
-      // 向日葵使用指南可见性
-      sunClientManualVisible: false,
-      // 向日葵使用指南可见性
-      toDeskManualVisible: false,
-      // 为工单查询指定条件
-      fixedQueryForm: {},
-      // 用户信息
-      currUser: {
-        ename: ''
-      },
-      tabActiveKey: 'workSubmit',
-      imageUploadModel,
-      fileUploadModel,
-      // 客户名称
-      customerName: undefined,
-      // 未传入客户名称手动输入联系方式
-      infoFormVisible: false,
-      infoForm: {
-        phone: ''
-      },
-      uploadVisible: true
-    }
-  },
-  computed: {
-    // 检查客户名称是否为空
-    validCustomerName () {
-      if (this.currUser.ename || this.customerName) {
-        return true
-      }
-      return false
-    }
-  },
-  created () {
-    document.title = '售后问题反馈平台'
-    let customerName = this.$route.query.orgName
-    // 分割客户名称
-    if (customerName) {
-      const partArr = customerName.split('.')
-      if (partArr.length === 5) {
-        customerName = `${partArr[1]}.${partArr[4]}`
-      }
-    }
-    this.currUser.ename = customerName
-    this.fixedQueryForm['t_uploader'] = this.currUser.ename
-  },
-  methods: {
-    toDetail (record, id) {
-      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)
-      })
-    },
-    setImages (imageIds) {
-      this.imageList = imageIds
-    },
-    setFiles (fileIds) {
-      this.fileList = fileIds
-    },
-    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 () {
-      let customerName = this.currUser.ename
-      if (!customerName) {
-        customerName = this.customerName
-      }
-      const form = {
-        customerName,
-        contact: this.form.contact,
-        phone: this.form.phone,
-        problemDetail: this.form.desc,
-        Images: this.imageList,
-        FilesId: this.fileList
-      }
-      if (form.customerName.length > 100) {
-        this.$message.error('客户名称长度超出限制')
-        return
-      }
-      if (form.problemDetail.length > 300) {
-        this.$message.error('问题详情长度超出限制')
-        return
-      }
-      if (form.problemDetail.indexOf('\'') !== -1) {
-        this.$message.error('问题详情不能包含特殊符号')
-        return
-      }
-      post(TicketDetailsViewApi.createTicket, { form }).then((res) => {
-        this.serialNumber = res
-        this.successVisible = true
-        this.$message.success('创建成功')
-        this.customerName = ''
-        this.form.contact = ''
-        this.form.phone = ''
-        this.form.desc = ''
-        this.imageList = []
-        this.fileList = []
-        this.uploadVisible = false
-        if (!this.currUser.ename) {
-          this.fixedQueryForm.t_uploader_phone = form.phone
-          this.infoForm.phone = form.phone
-        }
-      })
-    },
-    onSuccessCancel () {
-      this.uploadVisible = true
-    },
-    // 点击向日葵链接
-    toSunClientClick () {
-      window.open('https://sunlogin.oray.com/download')
-    },
-    // 点击ToDesk链接
-    toDeskClick () {
-      window.open('https://www.todesk.com/download.html')
-    },
-    // 切换标签页
-    changeTab (id) {
-      if (id === 'workHistory' && !this.fixedQueryForm.t_uploader && !this.fixedQueryForm.t_uploader_phone) {
-        this.infoFormVisible = true
-        return
-      }
-      this.tabActiveKey = id
-    },
-    onInfoFormSubmit () {
-      this.$refs.infoFormRef.validate(valid => {
-        if (valid) {
-          this.fixedQueryForm = {
-            t_uploader_phone: this.infoForm.phone
-          }
-          this.tabActiveKey = 'workHistory'
-          this.infoFormVisible = false
-        }
-      })
-    }
-  },
-  watch: {
-    // 监控类别的改变，当类别改变，校验通过
-    'form.contact' (newVal) {
-      this.showContactAlert = newVal.trim().length === 0
-    },
-    'form.phone' (newVal) {
-      const numReg = new RegExp(/^[0-9]+$/)
-      this.showPhoneAlert = !numReg.test(newVal)
-    },
-    'form.desc' (newVal) {
-      this.showDescAlert = newVal.trim().length === 0
-    },
-    'customerName' (newVal) {
-      this.showCustomerNameAlert = !newVal
-    }
-  }
-}
-const imageUploadModel = JSON.parse('{"addOrEdit":"all","resUploadStock":1,"pathKey":"cs","rule":{"type":"string","required":"false"},"isOnlyAddOrEdit":true,"acceptCount":5,"type":"image","accept":[".jpg,.jpeg,.ico,.gif,svg,.webp,.png,.bmp,.pjpeg,"],"stockAlias":"webmeter","fileRootPath":"D:\\\\nginx-resource\\\\resource\\\\","name":"图片","resUploadMode":"server","model":"Images"}')
-const fileUploadModel = JSON.parse('{"addOrEdit":"all","resUploadStock":1,"pathKey":"cs","rule":{"type":"string","required":"false"},"isOnlyAddOrEdit":true,"acceptCount":3,"type":"file","accept":["*"],"stockAlias":"webmeter","fileRootPath":"D:\\\\nginx-resource\\\\resource\\\\","name":"附件","resUploadMode":"server","model":"FilesId"}')
-</script>
-
-<style scoped>
-.radio-item{
-  margin-right: 140px;
-}
-.submitTicketTitle{
-  font-size: 40px;
-  vertical-align: middle;
-  text-align: center;
-  margin-bottom: 40px;
-}
-</style>
+<template>
+  <div>
+    <!--   显示成功页抽屉   -->
+    <a-modal
+      v-model="successVisible"
+      :footer="null"
+      destroy-on-close
+      title="工单状态"
+      width="70%"
+      @cancel="onSuccessCancel">
+      <submit-ticket-success v-if="serialNumber" :serialNumber="serialNumber" />
+    </a-modal>
+    <!--   两个使用手册弹框   -->
+    <a-modal
+      :visible="sunClientManualVisible"
+      title="向日葵使用指南"
+      width="1000px"
+      @cancel="sunClientManualVisible = false"
+      @ok="sunClientManualVisible = false"
+    >
+      <h1>一、安装</h1>
+      <hr/>
+      <div style="padding-left: 100px;padding-top: 20px">
+        <img alt="pic" 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 alt="pic" 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 alt="pic" 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 alt="pic" 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
+      :visible="toDeskManualVisible"
+      title="ToDesk使用指南"
+      width="1000px"
+      @cancel="toDeskManualVisible = false"
+      @ok="toDeskManualVisible = false"
+    >
+      <h1>一、安装</h1>
+      <hr/>
+      <div style="padding-left: 100px;padding-top: 20px">
+        <img alt="pic" 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 alt="pic" 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 alt="pic" 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 alt="pic" 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-modal
+      :visible="infoFormVisible"
+      title="填写联系方式"
+      @cancel="infoFormVisible = false"
+      @ok="onInfoFormSubmit">
+      <a-form-model
+        ref="infoFormRef"
+        :label-col="{ span: 5 }"
+        :model="infoForm"
+        :wrapper-col="{ span: 18 }">
+        <a-form-model-item :rules="{ required: true, message: '请输入联系方式' }" label="联系方式" prop="phone">
+          <a-input v-model="infoForm.phone" placeholder="请输入联系方式查询历史工单" />
+        </a-form-model-item>
+      </a-form-model>
+    </a-modal>
+    <a-card>
+      <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 v-if="!currUser.ename" label="客户名称">
+                  <a-input v-model="customerName" placeholder="请输入客户名称（总公司名+分公司名）"/>
+                  <strong v-show="showCustomerNameAlert" style="color: red">客户名称不能为空！</strong>
+                </a-form-item>
+                <!--     联系人     -->
+                <a-form-item label="联系人">
+                  <a-input v-model="form.contact"></a-input>
+                  <strong v-show="showContactAlert" 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 v-model="form.desc" allow-clear placeholder="请用一句话描述您的问题，必要时请注明客户编号，表号，系统功能项等信息"/>
+                  <strong v-show="showDescAlert" style="color: red">问题详情描述不能为空！</strong>
+                </a-form-item>
+                <!--     图片上传     -->
+                <a-form-item :wrapper-col="{ span: 12 }" label="问题截图">
+                  <div class="clearfix">
+                    <upload v-if="uploadVisible" :model="imageUploadModel" @setFiles="setImages" />
+                    <a-modal
+                      :footer="null"
+                      :visible="previewVisible"
+                      @cancel="handleCancel"
+                    >
+                      <img :src="previewImage" alt="图片上传" style="width: 100%"/>
+                    </a-modal>
+                  </div>
+                  <strong v-show="!imageList.length" style="color: red">请上传问题截图！</strong>
+                </a-form-item>
+                <!--     附件上传     -->
+                <a-form-item :wrapper-col="{ span: 12 }" label="附件">
+                  <div class="clearfix">
+                    <upload v-if="uploadVisible" :model="fileUploadModel" @setFiles="setFiles" />
+                  </div>
+                </a-form-item>
+                <!--     表单底部按钮     -->
+                <a-form-item :wrapper-col="{ span: 12, offset: 5 }">
+                  <a-button :disabled="showPhoneAlert || !validCustomerName || showContactAlert || showDescAlert || !imageList.length" style="margin-right: 20px" type="primary" @click="onSubmit">
+                    提交
+                  </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 alt="pic" src="@vue2-client/assets/img/SunClientDownload.png" style="width: 128px;height:128px;cursor: pointer" @click="toSunClientClick"/>
+                      <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 alt="pic" src="@vue2-client/assets/img/ToDeskDownload.png" style="width: 128px;height:128px;cursor: pointer" @click="toDeskClick">
+                      <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'"
+            :fixed-query-form="fixedQueryForm"
+            :queryParamsName="queryParamsName"
+            title="已提交工单"
+            @action="toDetail">
+            <a-button slot="button" type="primary" @click="infoFormVisible = true">填写联系方式</a-button>
+          </x-form-table>
+        </a-tab-pane>
+      </a-tabs>
+    </a-card>
+  </div>
+</template>
+
+<script>
+import { TicketDetailsViewApi, post } from '@vue2-client/services/api'
+import XFormTable from '@vue2-client/base-client/components/common/XFormTable/XFormTable'
+import submitTicketSuccess from './submitTicketSuccess'
+import Upload from '@vue2-client/base-client/components/common/Upload'
+
+export default {
+  name: 'submitTicket',
+  components: {
+    XFormTable,
+    submitTicketSuccess,
+    Upload
+  },
+  data () {
+    return {
+      // 查询配置文件名
+      queryParamsName: 'TicketQueryForCustomer',
+      // 控制成功页面显示
+      successVisible: false,
+      // 控制预览显示
+      previewVisible: false,
+      // 图片真实地址
+      previewImage: '',
+      // 图片列表
+      imageList: [],
+      // 附件列表
+      fileList: [],
+      // 表单数据
+      form: {
+        name: '',
+        desc: undefined,
+        contact: '',
+        phone: ''
+      },
+      // 工单序列号
+      serialNumber: '',
+      // 类别未填写警告信息控制
+      showContactAlert: true,
+      showPhoneAlert: true,
+      showDescAlert: true,
+      showCustomerNameAlert: true,
+      // 向日葵使用指南可见性
+      sunClientManualVisible: false,
+      // 向日葵使用指南可见性
+      toDeskManualVisible: false,
+      // 为工单查询指定条件
+      fixedQueryForm: {},
+      // 用户信息
+      currUser: {
+        ename: ''
+      },
+      tabActiveKey: 'workSubmit',
+      imageUploadModel,
+      fileUploadModel,
+      // 客户名称
+      customerName: undefined,
+      // 未传入客户名称手动输入联系方式
+      infoFormVisible: false,
+      infoForm: {
+        phone: ''
+      },
+      uploadVisible: true
+    }
+  },
+  computed: {
+    // 检查客户名称是否为空
+    validCustomerName () {
+      if (this.currUser.ename || this.customerName) {
+        return true
+      }
+      return false
+    }
+  },
+  created () {
+    document.title = '售后问题反馈平台'
+    let customerName = this.$route.query.orgName
+    this.form.contact = this.$route.query.contact
+    // 分割客户名称
+    if (customerName) {
+      const partArr = customerName.split('.')
+      if (partArr.length === 5) {
+        customerName = `${partArr[1]}.${partArr[4]}`
+      }
+    }
+    this.currUser.ename = customerName
+    this.fixedQueryForm['t_uploader'] = this.currUser.ename
+  },
+  methods: {
+    toDetail (record, id) {
+      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)
+      })
+    },
+    setImages (imageIds) {
+      this.imageList = imageIds
+    },
+    setFiles (fileIds) {
+      this.fileList = fileIds
+    },
+    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 () {
+      let customerName = this.currUser.ename
+      if (!customerName) {
+        customerName = this.customerName
+      }
+      const form = {
+        customerName,
+        contact: this.form.contact,
+        phone: this.form.phone,
+        problemDetail: this.form.desc,
+        Images: this.imageList,
+        FilesId: this.fileList
+      }
+      if (form.customerName.length > 100) {
+        this.$message.error('客户名称长度超出限制')
+        return
+      }
+      if (form.problemDetail.length > 300) {
+        this.$message.error('问题详情长度超出限制')
+        return
+      }
+      if (form.problemDetail.indexOf('\'') !== -1) {
+        this.$message.error('问题详情不能包含特殊符号')
+        return
+      }
+      post(TicketDetailsViewApi.createTicket, { form }).then((res) => {
+        this.serialNumber = res
+        this.successVisible = true
+        this.$message.success('创建成功')
+        this.customerName = ''
+        this.form.contact = ''
+        this.form.phone = ''
+        this.form.desc = ''
+        this.imageList = []
+        this.fileList = []
+        this.uploadVisible = false
+        if (!this.currUser.ename) {
+          this.fixedQueryForm.t_uploader_phone = form.phone
+          this.infoForm.phone = form.phone
+        }
+      })
+    },
+    onSuccessCancel () {
+      this.uploadVisible = true
+    },
+    // 点击向日葵链接
+    toSunClientClick () {
+      window.open('https://sunlogin.oray.com/download')
+    },
+    // 点击ToDesk链接
+    toDeskClick () {
+      window.open('https://www.todesk.com/download.html')
+    },
+    // 切换标签页
+    changeTab (id) {
+      if (id === 'workHistory' && !this.fixedQueryForm.t_uploader && !this.fixedQueryForm.t_uploader_phone) {
+        this.infoFormVisible = true
+        return
+      }
+      this.tabActiveKey = id
+    },
+    onInfoFormSubmit () {
+      this.$refs.infoFormRef.validate(valid => {
+        if (valid) {
+          this.fixedQueryForm = {
+            t_uploader_phone: this.infoForm.phone
+          }
+          this.tabActiveKey = 'workHistory'
+          this.infoFormVisible = false
+        }
+      })
+    }
+  },
+  watch: {
+    // 监控类别的改变，当类别改变，校验通过
+    'form.contact' (newVal) {
+      this.showContactAlert = newVal.trim().length === 0
+    },
+    'form.phone' (newVal) {
+      const numReg = new RegExp(/^[0-9]+$/)
+      this.showPhoneAlert = !numReg.test(newVal)
+    },
+    'form.desc' (newVal) {
+      this.showDescAlert = newVal.trim().length === 0
+    },
+    'customerName' (newVal) {
+      this.showCustomerNameAlert = !newVal
+    }
+  }
+}
+const imageUploadModel = JSON.parse('{"addOrEdit":"all","resUploadStock":1,"pathKey":"cs","rule":{"type":"string","required":"false"},"isOnlyAddOrEdit":true,"acceptCount":5,"type":"image","accept":[".jpg,.jpeg,.ico,.gif,svg,.webp,.png,.bmp,.pjpeg,"],"stockAlias":"webmeter","fileRootPath":"D:\\\\nginx-resource\\\\resource\\\\","name":"图片","resUploadMode":"server","model":"Images"}')
+const fileUploadModel = JSON.parse('{"addOrEdit":"all","resUploadStock":1,"pathKey":"cs","rule":{"type":"string","required":"false"},"isOnlyAddOrEdit":true,"acceptCount":3,"type":"file","accept":["*"],"stockAlias":"webmeter","fileRootPath":"D:\\\\nginx-resource\\\\resource\\\\","name":"附件","resUploadMode":"server","model":"FilesId"}')
+</script>
+
+<style scoped>
+.radio-item{
+  margin-right: 140px;
+}
+.submitTicketTitle{
+  font-size: 40px;
+  vertical-align: middle;
+  text-align: center;
+  margin-bottom: 40px;
+}
+</style>