vue2-client 1.4.21 → 1.4.22

package/CHANGELOG.md

@@ -1,6 +1,10 @@
 # Change Log
 > 所有关于本项目的变化都在该文档里。
 
+**1.4.22 -2022-09-28 @苗艳强**
+- 查询表单新增多选框
+- 售后工单页面增加客户信息传参
+
 **1.4.20 -2022-09-28 @江超**
 - 功能修改：
 - `AppData`修复没有设置徽标时，字典类型数据显示异常的问题

package/package.json

@@ -1,78 +1,78 @@
-{
-  "name": "vue2-client",
-  "version": "1.4.21",
-  "private": false,
-  "scripts": {
-    "serve": "vue-cli-service serve",
-    "build": "vue-cli-service build",
-    "test:unit": "vue-cli-service test:unit",
-    "lint": "vue-cli-service lint",
-    "build:preview": "vue-cli-service build --mode preview",
-    "lint:nofix": "vue-cli-service lint --no-fix"
-  },
-  "dependencies": {
-    "@amap/amap-jsapi-loader": "^1.0.1",
-    "@antv/g2plot": "^2.4.20",
-    "lodash.get": "^4.4.2",
-    "js-base64": "^3.7.2",
-    "jsencrypt": "^3.2.1",
-    "vue-json-viewer": "^2.2.22",
-    "xlsx": "0.18.5",
-    "file-saver": "^2.0.5",
-    "@vue/babel-preset-jsx": "^1.4.0",
-    "@antv/data-set": "^0.11.8",
-    "animate.css": "^4.1.1",
-    "ant-design-vue": "^1.7.8",
-    "axios": "^0.27.2",
-    "clipboard": "^2.0.11",
-    "core-js": "^3.23.5",
-    "date-fns": "^2.28.0",
-    "default-passive-events": "^2.0.0",
-    "enquire.js": "^2.1.6",
-    "highlight.js": "^10.7.3",
-    "js-cookie": "^2.2.1",
-    "mockjs": "^1.1.0",
-    "nprogress": "^0.2.0",
-    "viser-vue": "^2.4.8",
-    "vue": "2.6.14",
-    "vue-i18n": "^8.27.2",
-    "vue-router": "^3.5.4",
-    "vuedraggable": "^2.24.3",
-    "vuex": "^3.6.2"
-  },
-  "devDependencies": {
-    "script-loader": "^0.7.2",
-    "@ant-design/colors": "^6.0.0",
-    "@babel/core": "^7.18.10",
-    "@vue/cli-plugin-babel": "^4.5.19",
-    "@vue/cli-plugin-eslint": "^4.5.19",
-    "@vue/cli-service": "^4.5.19",
-    "@vue/eslint-config-standard": "^4.0.0",
-    "@vuepress/plugin-back-to-top": "^1.9.7",
-    "babel-eslint": "^10.1.0",
-    "babel-plugin-transform-remove-console": "^6.9.4",
-    "babel-polyfill": "^6.26.0",
-    "compression-webpack-plugin": "^4.0.1",
-    "deepmerge": "^4.2.2",
-    "eslint": "^6.8.0",
-    "eslint-plugin-import": "^2.26.0",
-    "eslint-plugin-node": "^11.1.0",
-    "eslint-plugin-vue": "^6.2.2",
-    "eslint-plugin-promise": "^4.3.1",
-    "eslint-plugin-standard": "^4.1.0",
-    "fast-deep-equal": "^3.1.3",
-    "less-loader": "^6.2.0",
-    "style-resources-loader": "^1.5.0",
-    "vue-cli-plugin-style-resources-loader": "^0.1.5",
-    "vue-template-compiler": "2.6.14",
-    "vuepress": "^1.9.7",
-    "webpack": "^4.46.0",
-    "webpack-theme-color-replacer": "1.4.1",
-    "whatwg-fetch": "^3.6.2"
-  },
-  "browserslist": [
-    "> 1%",
-    "last 2 versions",
-    "not ie <= 10"
-  ]
-}
+{
+  "name": "vue2-client",
+  "version": "1.4.22",
+  "private": false,
+  "scripts": {
+    "serve": "vue-cli-service serve",
+    "build": "vue-cli-service build",
+    "test:unit": "vue-cli-service test:unit",
+    "lint": "vue-cli-service lint",
+    "build:preview": "vue-cli-service build --mode preview",
+    "lint:nofix": "vue-cli-service lint --no-fix"
+  },
+  "dependencies": {
+    "@amap/amap-jsapi-loader": "^1.0.1",
+    "@antv/g2plot": "^2.4.20",
+    "lodash.get": "^4.4.2",
+    "js-base64": "^3.7.2",
+    "jsencrypt": "^3.2.1",
+    "vue-json-viewer": "^2.2.22",
+    "xlsx": "0.18.5",
+    "file-saver": "^2.0.5",
+    "@vue/babel-preset-jsx": "^1.4.0",
+    "@antv/data-set": "^0.11.8",
+    "animate.css": "^4.1.1",
+    "ant-design-vue": "^1.7.8",
+    "axios": "^0.27.2",
+    "clipboard": "^2.0.11",
+    "core-js": "^3.23.5",
+    "date-fns": "^2.28.0",
+    "default-passive-events": "^2.0.0",
+    "enquire.js": "^2.1.6",
+    "highlight.js": "^10.7.3",
+    "js-cookie": "^2.2.1",
+    "mockjs": "^1.1.0",
+    "nprogress": "^0.2.0",
+    "viser-vue": "^2.4.8",
+    "vue": "2.6.14",
+    "vue-i18n": "^8.27.2",
+    "vue-router": "^3.5.4",
+    "vuedraggable": "^2.24.3",
+    "vuex": "^3.6.2"
+  },
+  "devDependencies": {
+    "script-loader": "^0.7.2",
+    "@ant-design/colors": "^6.0.0",
+    "@babel/core": "^7.18.10",
+    "@vue/cli-plugin-babel": "^4.5.19",
+    "@vue/cli-plugin-eslint": "^4.5.19",
+    "@vue/cli-service": "^4.5.19",
+    "@vue/eslint-config-standard": "^4.0.0",
+    "@vuepress/plugin-back-to-top": "^1.9.7",
+    "babel-eslint": "^10.1.0",
+    "babel-plugin-transform-remove-console": "^6.9.4",
+    "babel-polyfill": "^6.26.0",
+    "compression-webpack-plugin": "^4.0.1",
+    "deepmerge": "^4.2.2",
+    "eslint": "^6.8.0",
+    "eslint-plugin-import": "^2.26.0",
+    "eslint-plugin-node": "^11.1.0",
+    "eslint-plugin-vue": "^6.2.2",
+    "eslint-plugin-promise": "^4.3.1",
+    "eslint-plugin-standard": "^4.1.0",
+    "fast-deep-equal": "^3.1.3",
+    "less-loader": "^6.2.0",
+    "style-resources-loader": "^1.5.0",
+    "vue-cli-plugin-style-resources-loader": "^0.1.5",
+    "vue-template-compiler": "2.6.14",
+    "vuepress": "^1.9.7",
+    "webpack": "^4.46.0",
+    "webpack-theme-color-replacer": "1.4.1",
+    "whatwg-fetch": "^3.6.2"
+  },
+  "browserslist": [
+    "> 1%",
+    "last 2 versions",
+    "not ie <= 10"
+  ]
+}

package/src/base-client/components/common/CreateSimpleFormQuery/CreateSimpleFormQueryItem.vue

@@ -160,7 +160,7 @@
             <template v-if="selectDataShow">
               <a-divider style="font-size: 14px;margin-top: 0">数据源相关</a-divider>
               <a-form-model-item label="数据源类型" prop="selectType">
-                <a-select v-model="item.selectType" placeholder="请选择数据源类型" @change="this.item.selectKey = undefined">
+                <a-select v-model="item.selectType" placeholder="请选择数据源类型" @change="item.selectKey = undefined">
                   <a-select-option v-for="selectDataTypeItem in selectDataType.filter(h=>!h.noMatch.includes(item.formType))" :key="selectDataTypeItem.key">{{ selectDataTypeItem.label }}</a-select-option>
                   <a-popover
                     slot="suffixIcon"

package/src/base-client/components/common/XForm/XFormItem.vue

@@ -111,7 +111,72 @@
       </a-select>
     </a-form-model-item>
   </x-form-col>
-  <!-- TODO 多选框 -->
+  <!-- 多选框 -->
+  <x-form-col
+    v-else-if="attr.type === 'checkbox'"
+    :xl="xl"
+    :xxl="xxl">
+    <a-form-model-item
+      :ref="attr.model"
+      :label="attr.name"
+      :prop="attr.model">
+      <a-select
+        v-if="!attr.lazyLoad || attr.lazyLoad === 'false'"
+        v-model="form[attr.model]"
+        :disabled="disabled"
+        :filter-option="filterOption"
+        :getPopupContainer=" triggerNode => { return triggerNode.parentNode } "
+        :placeholder="attr.placeholder ? attr.placeholder : '请选择'"
+        mode="multiple"
+        show-search
+        allowClear
+      >
+        <template v-if="attr.keys">
+          <a-select-option
+            v-for="(item,index) in attr.keys"
+            :key="index"
+            :value="item.value">
+            {{ item.label }}
+          </a-select-option>
+        </template>
+        <template v-else>
+          <template v-if="attr.keyName.indexOf('logic@') !== -1">
+            <a-select-option
+              v-for="(item,index) in option"
+              :key="index"
+              :value="item.value">{{ item.label }}
+            </a-select-option>
+          </template>
+          <template v-else>
+            <a-select-option
+              v-for="item in $appdata.getDictionaryList(attr.keyName)"
+              :key="item.value"
+              :value="item.value">{{ item.text }}
+            </a-select-option>
+          </template>
+        </template>
+      </a-select>
+      <a-select
+        v-else
+        v-model="form[attr.model]"
+        :disabled="disabled"
+        :filter-option="filterOption"
+        :getPopupContainer=" triggerNode => { return triggerNode.parentNode } "
+        :placeholder="attr.placeholder ? attr.placeholder : '搜索' + attr.name"
+        mode="multiple"
+        show-search
+        allowClear
+        @search="fetchFunction"
+      >
+        <a-spin v-if="searching" slot="notFoundContent" size="small" />
+        <a-select-option
+          v-for="(item,index) in option"
+          :key="index"
+          :value="item.value">{{ item.label }}
+        </a-select-option>
+      </a-select>
+    </a-form-model-item>
+  </x-form-col>
   <!-- TODO 单选框 -->
   <!-- 日期范围选择器 -->
   <x-form-col

package/src/config/CreateQueryConfig.js

@@ -4,12 +4,12 @@ module.exports = {
     {
       label: '渲染查询表单项',
       value: 'queryForm',
-      noMatch: ['file', 'image', 'textarea', 'personSetting']
+      noMatch: ['file', 'image', 'textarea', 'personSetting', 'checkbox']
     },
     {
       label: '渲染表格列',
       value: 'table',
-      noMatch: ['file', 'image', 'personSetting']
+      noMatch: ['file', 'image', 'personSetting', 'checkbox']
     },
     {
       label: '渲染新增/修改表单项',
@@ -19,12 +19,12 @@ module.exports = {
     {
       label: 'SQL生成查询项',
       value: 'sqlQueryItem',
-      noMatch: ['file', 'personSetting']
+      noMatch: ['file', 'personSetting', 'checkbox']
     },
     {
       label: 'SQL生成查询表达式',
       value: 'sqlQueryCondition',
-      noMatch: ['file', 'image', 'textarea', 'personSetting']
+      noMatch: ['file', 'image', 'textarea', 'personSetting', 'checkbox']
     }
   ],
   // 表单类型

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

@@ -1,475 +1,450 @@
-<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>
+<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.orgName }}</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.orgName" label="公司名称">
+                  <a-input v-model="form.name" placeholder="请输入公司名称（总公司名+分公司名）"/>
+                  <strong v-show="showCustomerNameAlert" style="color: red">公司名称不能为空！</strong>
+                </a-form-item>
+                <!--     联系人     -->
+                <a-form-item v-if="!currUser.contact" label="联系人">
+                  <a-input v-model="form.contact" placeholder="请输入联系人姓名"></a-input>
+                  <strong v-show="showContactAlert" style="color: red">请填写联系人！</strong>
+                </a-form-item>
+                <!--     联系方式     -->
+                <a-form-item v-if="!currUser.phone" label="联系方式">
+                  <a-input v-model="form.phone" placeholder="请输入联系方式"></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 || showCustomerNameAlert || 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: {
+        orgName: '',
+        contact: '',
+        phone: ''
+      },
+      tabActiveKey: 'workSubmit',
+      imageUploadModel,
+      fileUploadModel,
+      // 未传入客户名称手动输入联系方式
+      infoFormVisible: false,
+      infoForm: {
+        phone: ''
+      },
+      uploadVisible: true
+    }
+  },
+  created () {
+    document.title = '售后问题反馈平台'
+    this.currUser.orgName = this.$route.query.orgName
+    this.currUser.contact = this.$route.query.contact
+    this.currUser.phone = this.$route.query.phone
+    this.form.name = this.$route.query.orgName
+    this.form.contact = this.$route.query.contact
+    this.form.phone = this.$route.query.phone
+    this.fixedQueryForm['t_uploader'] = this.currUser.orgName
+  },
+  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 () {
+      const form = {
+        customerName: this.form.name,
+        contact: this.form.contact,
+        phone: this.form.phone,
+        problemDetail: this.form.desc,
+        Images: this.imageList,
+        FilesId: this.fileList
+      }
+      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.form.desc = ''
+        this.imageList = []
+        this.fileList = []
+        this.uploadVisible = false
+        if (!this.currUser.orgName) {
+          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 || newVal.trim().length === 0
+    },
+    'form.phone' (newVal) {
+      this.showPhoneAlert = !newVal || newVal.trim().length === 0
+    },
+    'form.desc' (newVal) {
+      this.showDescAlert = newVal.trim().length === 0
+    },
+    'form.name' (newVal) {
+      this.showCustomerNameAlert = !newVal || newVal.trim().length === 0
+    }
+  }
+}
+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>