vue2-client 1.16.7 → 1.16.9

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

@@ -1,484 +1,484 @@
-<template>
-  <a-card :bordered="false" class="result-success">
-    <result :description="description" :is-success="icon" :title="title">
-      <template slot="action">
-        <span v-if="countDown > 0" style="margin-right: 10px">{{ countDown }}</span>
-        <!-- <a-button type="primary" v-if="UrgentAvailable" :disabled="urgentAccess" style="margin-right: 20px" @click="urgent">请求加急处理</a-button> -->
-        <!-- <a-button type="danger" @click="closeBtn">撤销工单</a-button> -->
-      </template>
-      <a-modal
-        :visible="closeVisible"
-        :zIndex="1002"
-        title="关闭工单"
-        @cancel="handleCloseCancel"
-        @ok="handleCloseOk"
-      >
-        <p>是否确认手动关闭工单？</p>
-        <p style="color: red">（该操作不可撤销，请谨慎操作！）</p>
-      </a-modal>
-      <div>
-        <div class="project-name">工单处理进度</div>
-        <detail-list size="small" style="max-width: 800px; margin-bottom: 8px">
-          <detail-list-item term="工单编号">{{ serialNumber }}</detail-list-item>
-          <detail-list-item v-if="details.name" term="负责人">{{ details.name }}</detail-list-item>
-          <detail-list-item term="提交时间">{{ details.createdTime }}</detail-list-item>
-        </detail-list>
-        <a-steps :current="step" progressDot>
-          <a-step title="工单提交">
-            <a-step-item-group slot="description">
-              <a-step-item :title="details.uploader" />
-              <a-step-item :title="details.createdTime"/>
-            </a-step-item-group>
-          </a-step>
-          <a-step title="工单处理中" >
-            <a-step-item-group slot="description">
-              <a-step-item v-if="step >= 1" :title="details.phone ? `${details.name} (${details.phone})` : details.name" />
-              <a-step-item v-if="step >= 1" :title="details.confirmTime"/>
-            </a-step-item-group>
-          </a-step>
-          <a-step title="工单待确认" >
-            <a-step-item-group slot="description">
-              <a-step-item v-if="step >= 2" :title="`是否完成: ${verifyDetails.sfwc}`"/>
-              <a-step-item v-if="step >= 2" :title="`售后评价: ${verifyDetails.shpj}`"/>
-              <a-step-item v-if="step >= 2" :title="`反馈意见: ${verifyDetails.fkyj}`"/>
-            </a-step-item-group>
-          </a-step>
-          <a-step title="工单完成" >
-            <a-step-item-group slot="description">
-              <a-step-item v-if="step >= 3" :title="details.finishedTime"/>
-            </a-step-item-group>
-          </a-step>
-        </a-steps>
-      </div>
-    </result>
-    <div class="ticket-detail">
-      <a-tabs :default-active-key="tabActiveKey">
-        <a-tab-pane key="1" tab="工单问题">
-          <a-row class="item">
-            <a-col :span="3"><span class="title">问题描述</span></a-col>
-            <a-col :span="17"><span>{{ details.description }}</span></a-col>
-          </a-row>
-          <a-row class="item">
-            <a-col :span="3"><span class="title">问题截图</span></a-col>
-            <a-col :span="21"><image-item :images="details.images" :width="120" @preview="handleFilePreview" /></a-col>
-          </a-row>
-          <a-row v-if="details.files.length" class="item">
-            <a-col :span="3"><span class="title">附件</span></a-col>
-            <a-col :span="21"><file-item :files="details.files" :downloadable="false" @preview="handleFilePreview" /></a-col>
-          </a-row>
-          <a-row v-if="details.resultrecord" class="item">
-            <a-col :span="3"><span class="title">处理结果</span></a-col>
-            <a-col :span="17"><span>{{ details.resultrecord }}</span></a-col>
-          </a-row>
-        </a-tab-pane>
-        <a-tab-pane key="2" tab="工单确认" v-show="this.details.status === 4">
-          <a-row class="item">
-            <a-form :label-col="{ span: 5 }" :wrapper-col="{ span: 12 }">
-              <!-- 是否完成 -->
-              <a-form-item label="是否完成">
-                <a-select placeholder="请选择" v-model="customerSure.sfwc">
-                  <a-select-option value="是">
-                    是
-                  </a-select-option>
-                  <a-select-option value="否">
-                    否
-                  </a-select-option>
-                </a-select>
-              </a-form-item>
-              <!-- 退回原因 -->
-              <a-form-item label="退回截图" v-show="customerSure.sfwc === '否'">
-                <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>
-              </a-form-item>
-              <!-- 退回原因 -->
-              <a-form-item label="退回原因" v-show="customerSure.sfwc === '否'">
-                <a-textarea placeholder="请输入退回原因" v-model="customerSure.thyy"></a-textarea>
-              </a-form-item>
-              <!-- 售后评价 -->
-              <a-form-item label="售后评价" v-show="customerSure.sfwc === '是'">
-                <a-select placeholder="请选择" v-model="customerSure.shpj">
-                  <a-select-option value="满意">
-                    满意
-                  </a-select-option>
-                  <a-select-option value="不满意">
-                    不满意
-                  </a-select-option>
-                </a-select>
-              </a-form-item>
-              <!--     反馈意见     -->
-              <a-form-item label="反馈意见" v-show="customerSure.sfwc === '是'">
-                <a-textarea placeholder="请输入反馈意见" v-model="customerSure.fkyj"></a-textarea>
-              </a-form-item>
-              <!--     表单底部按钮     -->
-              <a-form-item :wrapper-col="{ span: 12, offset: 5 }">
-                <a-button type="primary" @click="rollBack" :disabled="customerSure.sfwc === '是'" style="margin-right: 10px">
-                  退回
-                </a-button>
-                <a-button type="primary" @click="submit" :disabled="customerSure.sfwc === '否'">
-                  提交
-                </a-button>
-              </a-form-item>
-            </a-form>
-          </a-row>
-        </a-tab-pane>
-      </a-tabs>
-    </div>
-    <a-modal v-model="filePreviewVisible" :footer="null" :dialog-style="{ top: '30px' }" width="80%" :z-index="1001">
-      <file-preview :path="filePath" />
-    </a-modal>
-  </a-card>
-</template>
-
-<script>
-import Result from '@vue2-client/components/result/Result'
-import DetailList from '@vue2-client/components/tool/DetailList'
-import AStepItem from '@vue2-client/components/tool/AStepItem'
-import { TicketDetailsViewApi, post } from '@vue2-client/services/api'
-import { formatDate } from '@vue2-client/utils/util'
-import { FileItem, ImageItem } from '@vue2-client/components/FileImageItem'
-import FilePreview from '@vue2-client/components/FilePreview'
-import Upload from '@vue2-client/base-client/components/common/Upload'
-
-const AStepItemGroup = AStepItem.Group
-const DetailListItem = DetailList.Item
-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"}')
-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"}')
-
-export default {
-  name: 'SubmitTicketSuccess',
-  components: { AStepItemGroup, AStepItem, DetailListItem, DetailList, Result, FileItem, ImageItem, FilePreview, Upload },
-  props: {
-    // 工单序列号
-    serialNumber: {
-      type: String,
-      required: true
-    }
-  },
-  data () {
-    return {
-      fileUploadModel,
-      imageUploadModel,
-      title: '提交成功',
-      description: '您创建的工单已成功提交，请保持电话畅通，我们的工作人员将尽快与您取得联系。', // +
-      // '如果需要加急，请在倒计时结束后点击加急按钮，加急后我们将优先处理您的工单',
-      // 工单详情
-      details: {
-        uploader: '',
-        status: 0,
-        name: '',
-        phone: '',
-        createdTime: '',
-        confirmTime: '',
-        finishedTime: '',
-        description: '',
-        resultrecord: '',
-        files: [],
-        images: []
-      },
-      // 控制加急按钮
-      urgentAccess: true,
-      // 倒计时
-      countDown: 0,
-      // 控制加急按钮显示
-      UrgentAvailable: true,
-      // 取消工单确认框可见性
-      closeVisible: false,
-      // 控制页面大图标
-      icon: true,
-      // 文件预览
-      filePreviewVisible: false,
-      filePath: '',
-      tabActiveKey: '1',
-      customerSure: {
-        shpj: '满意',
-        fkyj: undefined,
-        sfwc: '是',
-        thyy: ''
-      },
-      //  工单id
-      applyId: 0,
-      //  工单步骤
-      stepId: 0,
-      //  确认详情
-      verifyDetails: {
-        shpj: '',
-        sfwc: '',
-        fkyj: ''
-      },
-      uploadVisible: true,
-      // 控制预览显示
-      previewVisible: false,
-      // 图片真实地址
-      previewImage: '',
-      imageList: []
-    }
-  },
-  mounted () {
-    this.getTicketDetail()
-  },
-  methods: {
-    format (date, format) {
-      return formatDate(date, format)
-    },
-    // 关闭工单确认后操作
-    handleCloseOk () {
-      return post(TicketDetailsViewApi.manualCloseTicketByCustomer, {
-        serialNumber: this.serialNumber,
-        time: new Date()
-      })
-        .then(res => {
-          this.closeVisible = false
-          this.title = '工单已关闭'
-          this.description = ''
-          this.icon = false
-        }, err => {
-          console.error(err)
-        })
-    },
-    // 关闭工单取消后业务逻辑
-    handleCloseCancel () {
-      this.closeVisible = false
-    },
-    // 关闭工单按钮
-    closeBtn () {
-      this.closeVisible = true
-    },
-    // 对工单进行加急处理
-    urgent () {
-      return post(TicketDetailsViewApi.rushTicket, {
-        serialNumber: this.serialNumber
-      })
-        .then(res => {
-          if (res.data === 1) {
-            this.$message.success(
-              '操作成功',
-              5
-            )
-            this.description = '您的工单已经被加急处理，我们的工作人员会优先处理您的请求。'
-            this.UrgentAvailable = false
-          } else {
-            this.$message.error(
-              '操作失败',
-              5
-            )
-          }
-        }, err => {
-          console.log(err)
-        })
-    },
-    // 获取工单详情
-    getTicketDetail () {
-      return post(TicketDetailsViewApi.getTicketDetailsForUploader, {
-        serialNumber: this.serialNumber
-      })
-        .then(res => {
-          this.stepId = res.stepId
-          this.applyId = res.apply_id
-          this.details.uploader = res.uploader
-          // 判断负责人有没有值
-          if (res.name === undefined) {
-            this.details.name = ''
-          } else {
-            this.details.name = res.name
-          }
-          // 判断工单被确认时间
-          if (res.confirmtime === undefined) {
-            this.details.confirmTime = ''
-          } else {
-            this.details.confirmTime = this.format(res.confirmtime, 'yyyy-MM-dd hh:mm:ss')
-          }
-          // 判断工单完成时间
-          if (res.finishedtime === undefined) {
-            this.details.finishedTime = ''
-          } else {
-            this.details.finishedTime = this.format(res.finishedtime, 'yyyy-MM-dd hh:mm:ss')
-          }
-          this.details.createdTime = this.format(res.createdtime, 'yyyy-MM-dd hh:mm:ss')
-          this.details.status = res.status
-          this.details.phone = res.phone
-          this.details.description = res.description
-          this.details.files = res.files
-          this.details.images = res.images
-          this.details.resultrecord = res.resultrecord
-          //  如果工单已经关闭, 获取用户确认信息
-          if (res.status === 3) {
-            post(TicketDetailsViewApi.getApplyCompletedStepData, {
-              applyId: this.applyId,
-              stepId: this.stepId
-            }).then(res => {
-              if (res.data) {
-                this.verifyDetails.fkyj = res.data.fkyj ? res.data.fkyj : '无'
-                this.verifyDetails.shpj = res.data.shpj ? res.data.shpj : '满意'
-                this.verifyDetails.sfwc = res.data.sfwc ? res.data.sfwc : '是'
-              }
-            })
-          }
-        }, err => {
-          console.log(err)
-        })
-    },
-    handleFilePreview (path) {
-      this.filePath = path
-      this.filePreviewVisible = true
-    },
-    //  用户确认提交
-    submit () {
-      return post(TicketDetailsViewApi.afterApplyFinalStepSubmit, {
-        applyId: this.applyId
-      })
-        .then(
-          res => {
-            this.onSubmit()
-            this.saveWorkflowLog('确认完工', '最后一步: 客户确认', { notes: '' })
-            this.$message.success('已完工！')
-            //  修改工单状态为 3(已关闭)
-            post(TicketDetailsViewApi.clientSubmit, {
-              status: 3,
-              serial_number: this.serialNumber
-            }).then(res => {
-              console.log('res', res)
-            })
-            this.getTicketDetail()
-            this.$emit('afterSubmit')
-          },
-          err => {
-            this.$message.error('提交失败！')
-            console.log(err)
-          }
-        )
-    },
-    //  回退
-    rollBack () {
-      if (this.customerSure.thyy === '') {
-        this.$message.warn('请填写退回原因')
-        return
-      }
-      const notes = this.customerSure.thyy
-      return post(TicketDetailsViewApi.updateApplySubState, {
-        stepId: this.stepId - 1,
-        applyId: this.applyId
-      }).then(
-        res => {
-          this.saveWorkflowLog('退回', `第${this.stepId}步: 客户确认 ---> 第${this.stepId - 1}步: 售后确认`, { notes })
-          this.$message.success('退回成功')
-          //  修改工单状态为 1(待处理)
-          post(TicketDetailsViewApi.clientSubmit, {
-            status: 1,
-            serial_number: this.serialNumber,
-            Images: this.imageList,
-            applyId: this.applyId
-          }).then(res => {
-            console.log('res', res)
-          })
-          this.uploadVisible = false
-          this.getTicketDetail()
-          this.$emit('afterSubmit')
-        },
-        err => {
-          this.$message.error('退回失败！')
-          console.log(err)
-        }
-      )
-    },
-    // 保存工作流日志
-    saveWorkflowLog (operation, desc, extra) {
-      post(TicketDetailsViewApi.saveApplyWorkflowLog, {
-        applyId: this.applyId,
-        operation,
-        desc,
-        operator: '客户确认',
-        notes: '客户确认',
-        setHandler: '客户确认',
-        setDeadline: '',
-        ...extra
-      })
-    },
-    //
-    onSubmit () {
-      const time = this.format(new Date(), 'yyyy-MM-dd hh:mm:ss')
-      const form = {
-        shpj: this.customerSure.shpj,
-        fkyj: this.customerSure.fkyj,
-        sfwc: this.customerSure.sfwc
-      }
-      return post(TicketDetailsViewApi.saveApplyStepFormData, {
-        applyId: this.applyId,
-        stepId: this.stepId,
-        form: form,
-        data: time,
-        handler: '客户确认',
-        note: ''
-      })
-        .then(
-          res => {
-            console.log('表单提交成功')
-            this.note = ''
-            this.showForm = false
-            this.stepDone = true
-          },
-          err => {
-            this.$message.error('保存失败，请检查后重试')
-            console.log(err)
-          }
-        )
-    },
-    handleCancel () {
-      this.previewVisible = false
-    },
-    setImages (imageIds) {
-      this.imageList = imageIds
-    },
-  },
-  computed: {
-    // 用于进度条，进度显示控制
-    // eslint-disable-next-line vue/return-in-computed-property
-    step () {
-      switch (this.details.status) {
-        case 0:
-          return 0
-        case 1:
-          return 1
-        case 2:
-          return 2
-        case 3:
-          return 3
-        case 4:
-          return 2
-      }
-    }
-  }
-}
-</script>
-
-<style lang="less" scoped>
-.result-success{
-  .action:not(:first-child){
-    margin-left: 8px;
-  }
-  .project-name{
-    font-size: 16px;
-    color: @title-color;
-    font-weight: 500;
-    margin-bottom: 20px;
-  }
-}
-.ticket-detail {
-  width: 72%;
-  margin: 0 auto;
-  .item {
-    margin-bottom: 14px;
-  }
-  .title {
-    font-size: 14px;
-    font-weight: 600;
-  }
-}
-</style>
+<template>
+  <a-card :bordered="false" class="result-success">
+    <result :description="description" :is-success="icon" :title="title">
+      <template slot="action">
+        <span v-if="countDown > 0" style="margin-right: 10px">{{ countDown }}</span>
+        <!-- <a-button type="primary" v-if="UrgentAvailable" :disabled="urgentAccess" style="margin-right: 20px" @click="urgent">请求加急处理</a-button> -->
+        <!-- <a-button type="danger" @click="closeBtn">撤销工单</a-button> -->
+      </template>
+      <a-modal
+        :visible="closeVisible"
+        :zIndex="1002"
+        title="关闭工单"
+        @cancel="handleCloseCancel"
+        @ok="handleCloseOk"
+      >
+        <p>是否确认手动关闭工单？</p>
+        <p style="color: red">（该操作不可撤销，请谨慎操作！）</p>
+      </a-modal>
+      <div>
+        <div class="project-name">工单处理进度</div>
+        <detail-list size="small" style="max-width: 800px; margin-bottom: 8px">
+          <detail-list-item term="工单编号">{{ serialNumber }}</detail-list-item>
+          <detail-list-item v-if="details.name" term="负责人">{{ details.name }}</detail-list-item>
+          <detail-list-item term="提交时间">{{ details.createdTime }}</detail-list-item>
+        </detail-list>
+        <a-steps :current="step" progressDot>
+          <a-step title="工单提交">
+            <a-step-item-group slot="description">
+              <a-step-item :title="details.uploader" />
+              <a-step-item :title="details.createdTime"/>
+            </a-step-item-group>
+          </a-step>
+          <a-step title="工单处理中" >
+            <a-step-item-group slot="description">
+              <a-step-item v-if="step >= 1" :title="details.phone ? `${details.name} (${details.phone})` : details.name" />
+              <a-step-item v-if="step >= 1" :title="details.confirmTime"/>
+            </a-step-item-group>
+          </a-step>
+          <a-step title="工单待确认" >
+            <a-step-item-group slot="description">
+              <a-step-item v-if="step >= 2" :title="`是否完成: ${verifyDetails.sfwc}`"/>
+              <a-step-item v-if="step >= 2" :title="`售后评价: ${verifyDetails.shpj}`"/>
+              <a-step-item v-if="step >= 2" :title="`反馈意见: ${verifyDetails.fkyj}`"/>
+            </a-step-item-group>
+          </a-step>
+          <a-step title="工单完成" >
+            <a-step-item-group slot="description">
+              <a-step-item v-if="step >= 3" :title="details.finishedTime"/>
+            </a-step-item-group>
+          </a-step>
+        </a-steps>
+      </div>
+    </result>
+    <div class="ticket-detail">
+      <a-tabs :default-active-key="tabActiveKey">
+        <a-tab-pane key="1" tab="工单问题">
+          <a-row class="item">
+            <a-col :span="3"><span class="title">问题描述</span></a-col>
+            <a-col :span="17"><span>{{ details.description }}</span></a-col>
+          </a-row>
+          <a-row class="item">
+            <a-col :span="3"><span class="title">问题截图</span></a-col>
+            <a-col :span="21"><image-item :images="details.images" :width="120" @preview="handleFilePreview" /></a-col>
+          </a-row>
+          <a-row v-if="details.files.length" class="item">
+            <a-col :span="3"><span class="title">附件</span></a-col>
+            <a-col :span="21"><file-item :files="details.files" :downloadable="false" @preview="handleFilePreview" /></a-col>
+          </a-row>
+          <a-row v-if="details.resultrecord" class="item">
+            <a-col :span="3"><span class="title">处理结果</span></a-col>
+            <a-col :span="17"><span>{{ details.resultrecord }}</span></a-col>
+          </a-row>
+        </a-tab-pane>
+        <a-tab-pane key="2" tab="工单确认" v-show="this.details.status === 4">
+          <a-row class="item">
+            <a-form :label-col="{ span: 5 }" :wrapper-col="{ span: 12 }">
+              <!-- 是否完成 -->
+              <a-form-item label="是否完成">
+                <a-select placeholder="请选择" v-model="customerSure.sfwc">
+                  <a-select-option value="是">
+                    是
+                  </a-select-option>
+                  <a-select-option value="否">
+                    否
+                  </a-select-option>
+                </a-select>
+              </a-form-item>
+              <!-- 退回原因 -->
+              <a-form-item label="退回截图" v-show="customerSure.sfwc === '否'">
+                <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>
+              </a-form-item>
+              <!-- 退回原因 -->
+              <a-form-item label="退回原因" v-show="customerSure.sfwc === '否'">
+                <a-textarea placeholder="请输入退回原因" v-model="customerSure.thyy"></a-textarea>
+              </a-form-item>
+              <!-- 售后评价 -->
+              <a-form-item label="售后评价" v-show="customerSure.sfwc === '是'">
+                <a-select placeholder="请选择" v-model="customerSure.shpj">
+                  <a-select-option value="满意">
+                    满意
+                  </a-select-option>
+                  <a-select-option value="不满意">
+                    不满意
+                  </a-select-option>
+                </a-select>
+              </a-form-item>
+              <!--     反馈意见     -->
+              <a-form-item label="反馈意见" v-show="customerSure.sfwc === '是'">
+                <a-textarea placeholder="请输入反馈意见" v-model="customerSure.fkyj"></a-textarea>
+              </a-form-item>
+              <!--     表单底部按钮     -->
+              <a-form-item :wrapper-col="{ span: 12, offset: 5 }">
+                <a-button type="primary" @click="rollBack" :disabled="customerSure.sfwc === '是'" style="margin-right: 10px">
+                  退回
+                </a-button>
+                <a-button type="primary" @click="submit" :disabled="customerSure.sfwc === '否'">
+                  提交
+                </a-button>
+              </a-form-item>
+            </a-form>
+          </a-row>
+        </a-tab-pane>
+      </a-tabs>
+    </div>
+    <a-modal v-model="filePreviewVisible" :footer="null" :dialog-style="{ top: '30px' }" width="80%" :z-index="1001">
+      <file-preview :path="filePath" />
+    </a-modal>
+  </a-card>
+</template>
+
+<script>
+import Result from '@vue2-client/components/result/Result'
+import DetailList from '@vue2-client/components/tool/DetailList'
+import AStepItem from '@vue2-client/components/tool/AStepItem'
+import { TicketDetailsViewApi, post } from '@vue2-client/services/api'
+import { formatDate } from '@vue2-client/utils/util'
+import { FileItem, ImageItem } from '@vue2-client/components/FileImageItem'
+import FilePreview from '@vue2-client/components/FilePreview'
+import Upload from '@vue2-client/base-client/components/common/Upload'
+
+const AStepItemGroup = AStepItem.Group
+const DetailListItem = DetailList.Item
+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"}')
+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"}')
+
+export default {
+  name: 'SubmitTicketSuccess',
+  components: { AStepItemGroup, AStepItem, DetailListItem, DetailList, Result, FileItem, ImageItem, FilePreview, Upload },
+  props: {
+    // 工单序列号
+    serialNumber: {
+      type: String,
+      required: true
+    }
+  },
+  data () {
+    return {
+      fileUploadModel,
+      imageUploadModel,
+      title: '提交成功',
+      description: '您创建的工单已成功提交，请保持电话畅通，我们的工作人员将尽快与您取得联系。', // +
+      // '如果需要加急，请在倒计时结束后点击加急按钮，加急后我们将优先处理您的工单',
+      // 工单详情
+      details: {
+        uploader: '',
+        status: 0,
+        name: '',
+        phone: '',
+        createdTime: '',
+        confirmTime: '',
+        finishedTime: '',
+        description: '',
+        resultrecord: '',
+        files: [],
+        images: []
+      },
+      // 控制加急按钮
+      urgentAccess: true,
+      // 倒计时
+      countDown: 0,
+      // 控制加急按钮显示
+      UrgentAvailable: true,
+      // 取消工单确认框可见性
+      closeVisible: false,
+      // 控制页面大图标
+      icon: true,
+      // 文件预览
+      filePreviewVisible: false,
+      filePath: '',
+      tabActiveKey: '1',
+      customerSure: {
+        shpj: '满意',
+        fkyj: undefined,
+        sfwc: '是',
+        thyy: ''
+      },
+      //  工单id
+      applyId: 0,
+      //  工单步骤
+      stepId: 0,
+      //  确认详情
+      verifyDetails: {
+        shpj: '',
+        sfwc: '',
+        fkyj: ''
+      },
+      uploadVisible: true,
+      // 控制预览显示
+      previewVisible: false,
+      // 图片真实地址
+      previewImage: '',
+      imageList: []
+    }
+  },
+  mounted () {
+    this.getTicketDetail()
+  },
+  methods: {
+    format (date, format) {
+      return formatDate(date, format)
+    },
+    // 关闭工单确认后操作
+    handleCloseOk () {
+      return post(TicketDetailsViewApi.manualCloseTicketByCustomer, {
+        serialNumber: this.serialNumber,
+        time: new Date()
+      })
+        .then(res => {
+          this.closeVisible = false
+          this.title = '工单已关闭'
+          this.description = ''
+          this.icon = false
+        }, err => {
+          console.error(err)
+        })
+    },
+    // 关闭工单取消后业务逻辑
+    handleCloseCancel () {
+      this.closeVisible = false
+    },
+    // 关闭工单按钮
+    closeBtn () {
+      this.closeVisible = true
+    },
+    // 对工单进行加急处理
+    urgent () {
+      return post(TicketDetailsViewApi.rushTicket, {
+        serialNumber: this.serialNumber
+      })
+        .then(res => {
+          if (res.data === 1) {
+            this.$message.success(
+              '操作成功',
+              5
+            )
+            this.description = '您的工单已经被加急处理，我们的工作人员会优先处理您的请求。'
+            this.UrgentAvailable = false
+          } else {
+            this.$message.error(
+              '操作失败',
+              5
+            )
+          }
+        }, err => {
+          console.log(err)
+        })
+    },
+    // 获取工单详情
+    getTicketDetail () {
+      return post(TicketDetailsViewApi.getTicketDetailsForUploader, {
+        serialNumber: this.serialNumber
+      })
+        .then(res => {
+          this.stepId = res.stepId
+          this.applyId = res.apply_id
+          this.details.uploader = res.uploader
+          // 判断负责人有没有值
+          if (res.name === undefined) {
+            this.details.name = ''
+          } else {
+            this.details.name = res.name
+          }
+          // 判断工单被确认时间
+          if (res.confirmtime === undefined) {
+            this.details.confirmTime = ''
+          } else {
+            this.details.confirmTime = this.format(res.confirmtime, 'yyyy-MM-dd hh:mm:ss')
+          }
+          // 判断工单完成时间
+          if (res.finishedtime === undefined) {
+            this.details.finishedTime = ''
+          } else {
+            this.details.finishedTime = this.format(res.finishedtime, 'yyyy-MM-dd hh:mm:ss')
+          }
+          this.details.createdTime = this.format(res.createdtime, 'yyyy-MM-dd hh:mm:ss')
+          this.details.status = res.status
+          this.details.phone = res.phone
+          this.details.description = res.description
+          this.details.files = res.files
+          this.details.images = res.images
+          this.details.resultrecord = res.resultrecord
+          //  如果工单已经关闭, 获取用户确认信息
+          if (res.status === 3) {
+            post(TicketDetailsViewApi.getApplyCompletedStepData, {
+              applyId: this.applyId,
+              stepId: this.stepId
+            }).then(res => {
+              if (res.data) {
+                this.verifyDetails.fkyj = res.data.fkyj ? res.data.fkyj : '无'
+                this.verifyDetails.shpj = res.data.shpj ? res.data.shpj : '满意'
+                this.verifyDetails.sfwc = res.data.sfwc ? res.data.sfwc : '是'
+              }
+            })
+          }
+        }, err => {
+          console.log(err)
+        })
+    },
+    handleFilePreview (path) {
+      this.filePath = path
+      this.filePreviewVisible = true
+    },
+    //  用户确认提交
+    submit () {
+      return post(TicketDetailsViewApi.afterApplyFinalStepSubmit, {
+        applyId: this.applyId
+      })
+        .then(
+          res => {
+            this.onSubmit()
+            this.saveWorkflowLog('确认完工', '最后一步: 客户确认', { notes: '' })
+            this.$message.success('已完工！')
+            //  修改工单状态为 3(已关闭)
+            post(TicketDetailsViewApi.clientSubmit, {
+              status: 3,
+              serial_number: this.serialNumber
+            }).then(res => {
+              console.log('res', res)
+            })
+            this.getTicketDetail()
+            this.$emit('afterSubmit')
+          },
+          err => {
+            this.$message.error('提交失败！')
+            console.log(err)
+          }
+        )
+    },
+    //  回退
+    rollBack () {
+      if (this.customerSure.thyy === '') {
+        this.$message.warn('请填写退回原因')
+        return
+      }
+      const notes = this.customerSure.thyy
+      return post(TicketDetailsViewApi.updateApplySubState, {
+        stepId: this.stepId - 1,
+        applyId: this.applyId
+      }).then(
+        res => {
+          this.saveWorkflowLog('退回', `第${this.stepId}步: 客户确认 ---> 第${this.stepId - 1}步: 售后确认`, { notes })
+          this.$message.success('退回成功')
+          //  修改工单状态为 1(待处理)
+          post(TicketDetailsViewApi.clientSubmit, {
+            status: 1,
+            serial_number: this.serialNumber,
+            Images: this.imageList,
+            applyId: this.applyId
+          }).then(res => {
+            console.log('res', res)
+          })
+          this.uploadVisible = false
+          this.getTicketDetail()
+          this.$emit('afterSubmit')
+        },
+        err => {
+          this.$message.error('退回失败！')
+          console.log(err)
+        }
+      )
+    },
+    // 保存工作流日志
+    saveWorkflowLog (operation, desc, extra) {
+      post(TicketDetailsViewApi.saveApplyWorkflowLog, {
+        applyId: this.applyId,
+        operation,
+        desc,
+        operator: '客户确认',
+        notes: '客户确认',
+        setHandler: '客户确认',
+        setDeadline: '',
+        ...extra
+      })
+    },
+    //
+    onSubmit () {
+      const time = this.format(new Date(), 'yyyy-MM-dd hh:mm:ss')
+      const form = {
+        shpj: this.customerSure.shpj,
+        fkyj: this.customerSure.fkyj,
+        sfwc: this.customerSure.sfwc
+      }
+      return post(TicketDetailsViewApi.saveApplyStepFormData, {
+        applyId: this.applyId,
+        stepId: this.stepId,
+        form: form,
+        data: time,
+        handler: '客户确认',
+        note: ''
+      })
+        .then(
+          res => {
+            console.log('表单提交成功')
+            this.note = ''
+            this.showForm = false
+            this.stepDone = true
+          },
+          err => {
+            this.$message.error('保存失败，请检查后重试')
+            console.log(err)
+          }
+        )
+    },
+    handleCancel () {
+      this.previewVisible = false
+    },
+    setImages (imageIds) {
+      this.imageList = imageIds
+    },
+  },
+  computed: {
+    // 用于进度条，进度显示控制
+    // eslint-disable-next-line vue/return-in-computed-property
+    step () {
+      switch (this.details.status) {
+        case 0:
+          return 0
+        case 1:
+          return 1
+        case 2:
+          return 2
+        case 3:
+          return 3
+        case 4:
+          return 2
+      }
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+.result-success{
+  .action:not(:first-child){
+    margin-left: 8px;
+  }
+  .project-name{
+    font-size: 16px;
+    color: @title-color;
+    font-weight: 500;
+    margin-bottom: 20px;
+  }
+}
+.ticket-detail {
+  width: 72%;
+  margin: 0 auto;
+  .item {
+    margin-bottom: 14px;
+  }
+  .title {
+    font-size: 14px;
+    font-weight: 600;
+  }
+}
+</style>