vue2-client 1.2.37-2 → 1.2.40

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

@@ -18,7 +18,7 @@
       <h1>一、安装</h1>
       <hr/>
       <div style="padding-left: 100px;padding-top: 20px">
-        <img src="@vue2-client/assets/img/SunClientManual/1.png" style="width: 800px">
+        <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>
@@ -29,7 +29,7 @@
       <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">
+        <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>
@@ -42,7 +42,7 @@
         <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">
+        <img src="@vue2-client/assets/img/SunClientManual/3.png" style="width: 800px" alt="pic">
         <br/>
         <br/>
         <br/>
@@ -52,7 +52,7 @@
         </p>
         <br/>
         <br/>
-        <img src="@vue2-client/assets/img/SunClientManual/4.png" style="width: 800px">
+        <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">
@@ -73,7 +73,7 @@
       <h1>一、安装</h1>
       <hr/>
       <div style="padding-left: 100px;padding-top: 20px">
-        <img src="@vue2-client/assets/img/ToDeskManual/1.png" style="width: 800px">
+        <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>
@@ -84,7 +84,7 @@
       <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">
+        <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>
@@ -97,7 +97,7 @@
         <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">
+        <img src="@vue2-client/assets/img/ToDeskManual/3.png" style="width: 800px" alt="pic">
         <br/>
         <br/>
         <br/>
@@ -107,7 +107,7 @@
         </p>
         <br/>
         <br/>
-        <img src="@vue2-client/assets/img/ToDeskManual/4.png" style="width: 800px">
+        <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">
@@ -141,6 +141,11 @@
                   <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="请用一句话描述您的问题，必要时请注明客户编号，表号，系统功能项等信息"/>
@@ -174,7 +179,7 @@
                 </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 type="primary" @click="onSubmit" style="margin-right: 20px" :disabled="showCategoryAlert || showPhoneAlert">
                     提交
                   </a-button>
                 </a-form-item>
@@ -190,8 +195,9 @@
                       :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"/>
+                      :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
@@ -200,11 +206,17 @@
                       :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">
+                      :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>
@@ -226,215 +238,219 @@
 </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'
+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'
-      }
+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
     },
-    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
+    getBase64 (file) {
+      return new Promise((resolve, reject) => {
+        const reader = new FileReader()
+        reader.readAsDataURL(file)
+        reader.onload = () => resolve(reader.result)
+        reader.onerror = error => reject(error)
       })
     },
-    mounted () {
+    // 图像修改检测
+    handleChange ({ fileList }) {
+      this.fileList = fileList.filter((item) => {
+        return item.status === 'done' || item.status === 'uploading'
+      })
     },
-    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)
+    // 在上传页面，点击图片上的垃圾桶，撤销上传
+    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
           })
-      },
-      // 上传头像前校验
-      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())
+        }, err => {
+          console.log(err)
         })
-          .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
+    },
+    // 上传头像前校验
+    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
     },
-    watch: {
-      // 监控类别的改变，当类别改变，校验通过
-      'form.category' (newVal) {
-        const numReg = new RegExp(/^[0-9]+$/)
-        this.showCategoryAlert = !numReg.test(newVal)
+    // 处理预览图像
+    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;
-  }
+.radio-item{
+  margin-right: 140px;
+}
+.submitTicketTitle{
+  font-size: 40px;
+  vertical-align: middle;
+  text-align: center;
+  margin-bottom: 40px;
+}
 </style>