vue2-client 1.2.0 → 1.2.1

package/src/base-client/components/ticket/TicketDetailsView/TicketDetailsView.vue

@@ -1,486 +1,486 @@
-<template>
-  <a-drawer
-    title="工单详情"
-    placement="right"
-    :width="isMobile ? screenWidth : screenWidth * 0.85"
-    :visible="visible"
-    @close="onClose"
-  >
-    <a-modal
-      title="移交工单"
-      :visible="transVisible"
-      @ok="handleTransferOk"
-      @cancel="handleTransferCancel"
-      :zIndex="1001"
-    >
-      <a-input placeholder="请输入要转移工单的员工名" v-model="transferTo" @blur="checkEmp()"/>
-      <span v-if="!transferCheck" style="color: red">您输入的员工不存在，请检查后再试</span>
-      <span v-if="transferCheck" style="color: green">您输入的员工已确认，可以进行工单转移</span>
-      <a-form-model-item label="留言">
-        <a-input v-model="note" type="textarea" />
-      </a-form-model-item>
-    </a-modal>
-    <a-modal
-      title="关闭工单"
-      :visible="closeVisible"
-      @ok="handleCloseOk"
-      @cancel="handleCloseCancel"
-      :zIndex="1002"
-    >
-      <p>是否确认手动关闭工单？</p>
-      <p style="color: red">（该操作不可撤销，请谨慎操作！）</p>
-    </a-modal>
-    <a-spin :spinning="loadTicketDetails">
-      <a-page-header :title="'订单：' + this.details.serial_number">
-        <div class="row">
-          <div class="content">
-            <a-descriptions size="small" :column="isMobile ? 1 : 2">
-              <a-descriptions-item label="优先级">
-                <a-alert
-                  :type="showPriorityColorControl()"
-                  :message="showPriority()"
-                  :show-icon="true"/>
-              </a-descriptions-item>
-              <a-descriptions-item label="发起人">{{ details.uploader }}</a-descriptions-item>
-              <a-descriptions-item label="问题类型">{{ details.category }}</a-descriptions-item>
-            </a-descriptions>
-          </div>
-        </div>
-        <!-- 按钮 -->
-        <template v-slot:extra>
-          <a-button-group style="margin-right: 4px;">
-            <a-popover title="开始处理" placement="bottomLeft">
-              <template slot="content">
-                <p>开始处理当前工单</p>
-              </template>
-              <a-button type="primary" @click="confirmTicketBtn()" :disabled="handlerBtnDisable()">开始处理</a-button>
-            </a-popover>
-            <a-popover title="移交他人" placement="bottomLeft">
-              <template slot="content">
-                <p>将工单转交他人处理</p>
-              </template>
-              <a-button type="primary" @click="transferBtn()" :disabled="transferBtnDisable()">移交他人</a-button>
-            </a-popover>
-            <a-popover title="关闭工单" placement="bottomLeft">
-              <template slot="content">
-                <p>强制关闭当前工单</p>
-                <p style="color: red">此操作不可撤销，请谨慎使用</p>
-              </template>
-              <a-button type="danger" @click="closeBtn()" :disabled="closeBtnDisable()">关闭工单</a-button>
-            </a-popover>
-          </a-button-group>
-        </template>
-
-        <br/>
-        <br/>
-        <br/>
-
-        <!-- 进度条 -->
-        <a-card :bordered="false">
-          <a-steps :direction="'horizontal'" :current="step">
-            <a-step>
-              <template v-slot:title><span>待处理</span></template>
-              <template v-slot:description>
-                <div>工单已提交，等待处理<div>{{ format(details.created_time,'yyyy-MM-dd hh:mm:ss') }}</div></div>
-              </template>
-            </a-step>
-            <a-step>
-              <template v-slot:title><span>处理中</span></template>
-              <template v-slot:description>
-                <div v-if="step >= 1"><strong>{{ details.name }}</strong> 处理中...<div>{{ format(details.confirm_time,'yyyy-MM-dd hh:mm:ss') }}</div></div>
-              </template>
-            </a-step>
-            <a-step>
-              <template v-slot:title><span>{{ getStatus() }}</span></template>
-              <template v-slot:description>
-                <div v-if="step >= 2">{{ format(details.finished_time,'yyyy-MM-dd hh:mm:ss') }}</div>
-              </template>
-            </a-step>
-          </a-steps>
-        </a-card>
-        <br/>
-        <br/>
-        <br/>
-
-        <a-card title="问题详细描述" style="width: 100%">
-          <p>{{ details.description }}</p>
-        </a-card>
-
-        <ticket-details-flow v-if="details.id" :ticketId="ticketId" :disableCloseBtn="disableCloseBtn" :id="details.id"/>
-      </a-page-header>
-    </a-spin>
-  </a-drawer>
-</template>
-
-<script>
-  import JsonViewer from 'vue-json-viewer'
-  import { formatDate } from '@vue2-client/utils/util'
-  import { TicketDetailsViewApi } from '@vue2-client/services/api/TicketDetailsViewApi'
-  import { EmployeeDetailsViewApi } from '@vue2-client/services/api/EmployeeDetailsViewApi'
-  import { post } from '@vue2-client/services/api/restTools'
-  import XTable from '@vue2-client/base-client/components/common/XTable/XTable'
-  import { mapState } from 'vuex'
-  import TicketDetailsFlow from './part/TicketDetailsFlow'
-
-  export default {
-    name: 'TicketDetailsView',
-    components: {
-      TicketDetailsFlow,
-      JsonViewer,
-      XTable
-    },
-    data () {
-      return {
-        // 页面宽度
-        screenWidth: document.documentElement.clientWidth,
-        // 工单详情
-        details: {
-          // 当前负责人ID
-          id: undefined,
-          name: '',
-          uploader: '',
-          status: undefined,
-          priority: undefined,
-          description: '',
-          created_time: '',
-          confirm_time: '',
-          finished_time: '',
-          category: '',
-          serial_number: ''
-        },
-        // 当前步骤
-        step: 0,
-        // 校验转移员工是否存在
-        transferCheck: false,
-        // 移交工单窗口可见性
-        transVisible: false,
-        // 转移工单对象
-        transferTo: '',
-        // 新增留言
-        note: '',
-        // 控制关闭订单按钮可用性
-        disableCloseBtn: false,
-        // 控制关闭工单确认框显示
-        closeVisible: false,
-        // 控制加载过程
-        loadTicketDetails: false,
-        // 工单类型字典
-        categoryDictionary: []
-      }
-    },
-    mounted () {
-      this.getTicketCategory()
-      this.initView()
-    },
-    computed: {
-      ...mapState('account', { currUser: 'user' }),
-      ...mapState('setting', ['isMobile'])
-    },
-    props: {
-      ticketId: {
-        type: String,
-        required: true
-      },
-      visible: {
-        type: Boolean,
-        default: false
-      }
-    },
-    methods: {
-      // 初始化组件
-      initView () {
-        this.loadTicketDetails = true
-        this.getTicketDetail(this.ticketId)
-        this.loadTicketDetails = false
-      },
-      // 解析工单类型
-      resolveCategory (key) {
-        for (let i = 0; i < this.categoryDictionary.length; i++) {
-          if (this.categoryDictionary[i].value == key) {
-            return this.categoryDictionary[i].name
-          }
-        }
-      },
-      // 关闭工单确认后业务逻辑
-      handleCloseOk () {
-        return post(TicketDetailsViewApi.manualCloseTicket, {
-          ticketId: this.ticketId,
-          time: new Date()
-        })
-          .then(res => {
-            if (res !== 0) {
-              this.$message.success(
-                '操作成功',
-                5
-              )
-              this.initView()
-              this.closeVisible = false
-            } else {
-              this.$message.error(
-                '操作失败',
-                5
-              )
-            }
-          }, err => {
-            console.error(err)
-          })
-      },
-      // 关闭工单取消后业务逻辑
-      handleCloseCancel () {
-        this.closeVisible = false
-      },
-      // 确认工单按钮业务逻辑
-      confirmTicketBtn () {
-        const currentEmpId = this.getCurrentEmpId()
-        return post(TicketDetailsViewApi.confirmTicket, {
-          ticketId: this.ticketId,
-          empId: currentEmpId,
-          time: new Date()
-        })
-          .then(res => {
-            if (res !== 0) {
-              this.$message.success(
-                '操作成功',
-                5
-              )
-              this.initView()
-            } else {
-              this.$message.error(
-                '操作失败',
-                5
-              )
-            }
-          }, err => {
-            console.error(err)
-          })
-      },
-      // 获取当前登陆员工ID
-      getCurrentEmpId () {
-        return this.currUser.id
-      },
-      // 转移工单按钮业务逻辑
-      transferBtn () {
-        this.transVisible = true
-      },
-      checkEmp () {
-        return post(EmployeeDetailsViewApi.findEmpName, {
-          empName: this.transferTo
-        })
-          .then(res => {
-            const num = res.number
-            this.transferCheck = num !== 0
-          }, err => {
-            console.error(err)
-          })
-      },
-      // 获取工单状态撤销or关闭
-      getStatus () {
-        if (this.details.status === 2) {
-          return '已撤销'
-        } else {
-          return '已关闭'
-        }
-      },
-      // 关闭工单按钮业务逻辑
-      closeBtn () {
-        this.closeVisible = true
-      },
-      // 转移工单确认后逻辑
-      handleTransferOk () {
-        if (!this.transferCheck) {
-          this.$message.error(
-            '请先检查您输入的员工名',
-            2
-          )
-        } else {
-          return post(TicketDetailsViewApi.transferTicketToOthers, {
-            ticketId: this.ticketId,
-            endTime: new Date(),
-            transferTo: this.transferTo,
-            note: this.note
-          })
-            .then(res => {
-              const result = res
-              this.note = ''
-              this.transVisible = false
-              if (result === 1) {
-                this.$message.success(
-                  '操作成功',
-                  5
-                )
-                this.initView()
-              } else {
-                this.$message.error(
-                  '操作失败',
-                  5
-                )
-              }
-              this.handleCancel()
-              this.initView()
-            }, err => {
-              console.error(err)
-              this.transVisible = false
-            })
-        }
-      },
-      // 转移工单取消后逻辑
-      handleTransferCancel () {
-        this.transferTo = ''
-        this.note = ''
-        this.transVisible = false
-        this.transferCheck = false
-      },
-      // 关闭抽屉时回调
-      onClose () {
-        this.disableCloseBtn = false
-        this.$emit('update:visible', false)
-      },
-      // 获取工单详情信息
-      getTicketDetail (num) {
-        this.loadTicketDetails = true
-        return post(TicketDetailsViewApi.getTicketDetails, {
-          ticketId: num
-        })
-          .then(res => {
-            this.details = res[0]
-            this.step = res[0].status
-            if (this.details.status === 3) {
-              this.disableCloseBtn = true
-            }
-            const categoryValue = this.details.category
-            this.details.category = this.resolveCategory(categoryValue)
-          }, err => {
-            console.error(err)
-          })
-      },
-      // 获取工单类别字典
-      getTicketCategory () {
-        return post(TicketDetailsViewApi.getTicketCategoryDictionary)
-          .then(res => {
-            this.categoryDictionary = res
-          }, err => {
-            console.log(err)
-          })
-      },
-      // 日期格式化
-      format (date, format) {
-        return formatDate(date, format)
-      },
-      // 转换JSON
-      toJSON (value) {
-        try {
-          return JSON.parse(value)
-        } catch (e) {
-          return value
-        }
-      },
-      // 控制开始处理按钮可用状态
-      handlerBtnDisable () {
-        return this.step !== 0
-      },
-      // 控制移交他人按钮可用状态
-      transferBtnDisable () {
-        return this.step === 0
-      },
-      // 控制关闭工单按钮可用状态
-      closeBtnDisable () {
-        return this.step === 0 || this.disableCloseBtn || this.details.id != this.currUser.id
-      },
-      // 优先级文字显示
-      showPriority () {
-        if (this.details.priority === 2) {
-          return '一般'
-        } else if (this.details.priority === 1) {
-          return '紧急'
-        } else {
-          return '非常紧急'
-        }
-      },
-      // 优先度颜色控制
-      showPriorityColorControl () {
-        if (this.details.priority === 2) {
-          return 'info'
-        } else if (this.details.priority === 1) {
-          return 'warning'
-        } else {
-          return 'error'
-        }
-      }
-    },
-    watch: {
-      'visible' (val) {
-        if (val) {
-          this.initView()
-        }
-      }
-    }
-  }
-</script>
-
-<style lang="less" scoped>
-.high-priority{
-  background-color: rgba(163, 30, 30, 0.66);
-  border: red solid 1px;
-  font-size: large;
-  padding: 5px;
-  color: white;
-  border-radius: 10px;
-}
-
-.detail-layout {
-  margin-left: 44px;
-}
-.text {
-  color: rgba(0, 0, 0, .45);
-}
-
-.heading {
-  color: rgba(0, 0, 0, .85);
-  font-size: 20px;
-}
-
-.no-data {
-  color: rgba(0, 0, 0, .25);
-  text-align: center;
-  line-height: 64px;
-  font-size: 16px;
-
-  i {
-    font-size: 24px;
-    margin-right: 16px;
-    position: relative;
-    top: 3px;
-  }
-}
-
-.mobile {
-  .detail-layout {
-    margin-left: unset;
-  }
-  .text {
-
-  }
-  .status-list {
-    text-align: left;
-  }
-}
-
-.row {
-  display: flex;
-
-  .content {
-    -webkit-box-flex: 1;
-    flex: auto;
-    -ms-flex: auto;
-  }
-
-  .extra {
-    flex: 0 1 auto;
-    -webkit-box-flex: 0;
-    -ms-flex: 0 1 auto;
-    min-width: 242px;
-    margin-left: 88px;
-    text-align: right;
-  }
-}
-</style>
+<template>
+  <a-drawer
+    title="工单详情"
+    placement="right"
+    :width="isMobile ? screenWidth : screenWidth * 0.85"
+    :visible="visible"
+    @close="onClose"
+  >
+    <a-modal
+      title="移交工单"
+      :visible="transVisible"
+      @ok="handleTransferOk"
+      @cancel="handleTransferCancel"
+      :zIndex="1001"
+    >
+      <a-input placeholder="请输入要转移工单的员工名" v-model="transferTo" @blur="checkEmp()"/>
+      <span v-if="!transferCheck" style="color: red">您输入的员工不存在，请检查后再试</span>
+      <span v-if="transferCheck" style="color: green">您输入的员工已确认，可以进行工单转移</span>
+      <a-form-model-item label="留言">
+        <a-input v-model="note" type="textarea" />
+      </a-form-model-item>
+    </a-modal>
+    <a-modal
+      title="关闭工单"
+      :visible="closeVisible"
+      @ok="handleCloseOk"
+      @cancel="handleCloseCancel"
+      :zIndex="1002"
+    >
+      <p>是否确认手动关闭工单？</p>
+      <p style="color: red">（该操作不可撤销，请谨慎操作！）</p>
+    </a-modal>
+    <a-spin :spinning="loadTicketDetails">
+      <a-page-header :title="'订单：' + this.details.serial_number">
+        <div class="row">
+          <div class="content">
+            <a-descriptions size="small" :column="isMobile ? 1 : 2">
+              <a-descriptions-item label="优先级">
+                <a-alert
+                  :type="showPriorityColorControl()"
+                  :message="showPriority()"
+                  :show-icon="true"/>
+              </a-descriptions-item>
+              <a-descriptions-item label="发起人">{{ details.uploader }}</a-descriptions-item>
+              <a-descriptions-item label="问题类型">{{ details.category }}</a-descriptions-item>
+            </a-descriptions>
+          </div>
+        </div>
+        <!-- 按钮 -->
+        <template v-slot:extra>
+          <a-button-group style="margin-right: 4px;">
+            <a-popover title="开始处理" placement="bottomLeft">
+              <template slot="content">
+                <p>开始处理当前工单</p>
+              </template>
+              <a-button type="primary" @click="confirmTicketBtn()" :disabled="handlerBtnDisable()">开始处理</a-button>
+            </a-popover>
+            <a-popover title="移交他人" placement="bottomLeft">
+              <template slot="content">
+                <p>将工单转交他人处理</p>
+              </template>
+              <a-button type="primary" @click="transferBtn()" :disabled="transferBtnDisable()">移交他人</a-button>
+            </a-popover>
+            <a-popover title="关闭工单" placement="bottomLeft">
+              <template slot="content">
+                <p>强制关闭当前工单</p>
+                <p style="color: red">此操作不可撤销，请谨慎使用</p>
+              </template>
+              <a-button type="danger" @click="closeBtn()" :disabled="closeBtnDisable()">关闭工单</a-button>
+            </a-popover>
+          </a-button-group>
+        </template>
+
+        <br/>
+        <br/>
+        <br/>
+
+        <!-- 进度条 -->
+        <a-card :bordered="false">
+          <a-steps :direction="'horizontal'" :current="step">
+            <a-step>
+              <template v-slot:title><span>待处理</span></template>
+              <template v-slot:description>
+                <div>工单已提交，等待处理<div>{{ format(details.created_time,'yyyy-MM-dd hh:mm:ss') }}</div></div>
+              </template>
+            </a-step>
+            <a-step>
+              <template v-slot:title><span>处理中</span></template>
+              <template v-slot:description>
+                <div v-if="step >= 1"><strong>{{ details.name }}</strong> 处理中...<div>{{ format(details.confirm_time,'yyyy-MM-dd hh:mm:ss') }}</div></div>
+              </template>
+            </a-step>
+            <a-step>
+              <template v-slot:title><span>{{ getStatus() }}</span></template>
+              <template v-slot:description>
+                <div v-if="step >= 2">{{ format(details.finished_time,'yyyy-MM-dd hh:mm:ss') }}</div>
+              </template>
+            </a-step>
+          </a-steps>
+        </a-card>
+        <br/>
+        <br/>
+        <br/>
+
+        <a-card title="问题详细描述" style="width: 100%">
+          <p>{{ details.description }}</p>
+        </a-card>
+
+        <ticket-details-flow v-if="details.id" :ticketId="ticketId" :disableCloseBtn="disableCloseBtn" :id="details.id"/>
+      </a-page-header>
+    </a-spin>
+  </a-drawer>
+</template>
+
+<script>
+  import JsonViewer from 'vue-json-viewer'
+  import { formatDate } from '@vue2-client/utils/util'
+  import { TicketDetailsViewApi } from '@vue2-client/services/api/TicketDetailsViewApi'
+  import { EmployeeDetailsViewApi } from '@vue2-client/services/api/EmployeeDetailsViewApi'
+  import { post } from '@vue2-client/services/api/restTools'
+  import XTable from '@vue2-client/base-client/components/common/XTable/XTable'
+  import { mapState } from 'vuex'
+  import TicketDetailsFlow from './part/TicketDetailsFlow'
+
+  export default {
+    name: 'TicketDetailsView',
+    components: {
+      TicketDetailsFlow,
+      JsonViewer,
+      XTable
+    },
+    data () {
+      return {
+        // 页面宽度
+        screenWidth: document.documentElement.clientWidth,
+        // 工单详情
+        details: {
+          // 当前负责人ID
+          id: undefined,
+          name: '',
+          uploader: '',
+          status: undefined,
+          priority: undefined,
+          description: '',
+          created_time: '',
+          confirm_time: '',
+          finished_time: '',
+          category: '',
+          serial_number: ''
+        },
+        // 当前步骤
+        step: 0,
+        // 校验转移员工是否存在
+        transferCheck: false,
+        // 移交工单窗口可见性
+        transVisible: false,
+        // 转移工单对象
+        transferTo: '',
+        // 新增留言
+        note: '',
+        // 控制关闭订单按钮可用性
+        disableCloseBtn: false,
+        // 控制关闭工单确认框显示
+        closeVisible: false,
+        // 控制加载过程
+        loadTicketDetails: false,
+        // 工单类型字典
+        categoryDictionary: []
+      }
+    },
+    mounted () {
+      this.getTicketCategory()
+      this.initView()
+    },
+    computed: {
+      ...mapState('account', { currUser: 'user' }),
+      ...mapState('setting', ['isMobile'])
+    },
+    props: {
+      ticketId: {
+        type: String,
+        required: true
+      },
+      visible: {
+        type: Boolean,
+        default: false
+      }
+    },
+    methods: {
+      // 初始化组件
+      initView () {
+        this.loadTicketDetails = true
+        this.getTicketDetail(this.ticketId)
+        this.loadTicketDetails = false
+      },
+      // 解析工单类型
+      resolveCategory (key) {
+        for (let i = 0; i < this.categoryDictionary.length; i++) {
+          if (this.categoryDictionary[i].value == key) {
+            return this.categoryDictionary[i].name
+          }
+        }
+      },
+      // 关闭工单确认后业务逻辑
+      handleCloseOk () {
+        return post(TicketDetailsViewApi.manualCloseTicket, {
+          ticketId: this.ticketId,
+          time: new Date()
+        })
+          .then(res => {
+            if (res !== 0) {
+              this.$message.success(
+                '操作成功',
+                5
+              )
+              this.initView()
+              this.closeVisible = false
+            } else {
+              this.$message.error(
+                '操作失败',
+                5
+              )
+            }
+          }, err => {
+            console.error(err)
+          })
+      },
+      // 关闭工单取消后业务逻辑
+      handleCloseCancel () {
+        this.closeVisible = false
+      },
+      // 确认工单按钮业务逻辑
+      confirmTicketBtn () {
+        const currentEmpId = this.getCurrentEmpId()
+        return post(TicketDetailsViewApi.confirmTicket, {
+          ticketId: this.ticketId,
+          empId: currentEmpId,
+          time: new Date()
+        })
+          .then(res => {
+            if (res !== 0) {
+              this.$message.success(
+                '操作成功',
+                5
+              )
+              this.initView()
+            } else {
+              this.$message.error(
+                '操作失败',
+                5
+              )
+            }
+          }, err => {
+            console.error(err)
+          })
+      },
+      // 获取当前登陆员工ID
+      getCurrentEmpId () {
+        return this.currUser.id
+      },
+      // 转移工单按钮业务逻辑
+      transferBtn () {
+        this.transVisible = true
+      },
+      checkEmp () {
+        return post(EmployeeDetailsViewApi.findEmpName, {
+          empName: this.transferTo
+        })
+          .then(res => {
+            const num = res.number
+            this.transferCheck = num !== 0
+          }, err => {
+            console.error(err)
+          })
+      },
+      // 获取工单状态撤销or关闭
+      getStatus () {
+        if (this.details.status === 2) {
+          return '已撤销'
+        } else {
+          return '已关闭'
+        }
+      },
+      // 关闭工单按钮业务逻辑
+      closeBtn () {
+        this.closeVisible = true
+      },
+      // 转移工单确认后逻辑
+      handleTransferOk () {
+        if (!this.transferCheck) {
+          this.$message.error(
+            '请先检查您输入的员工名',
+            2
+          )
+        } else {
+          return post(TicketDetailsViewApi.transferTicketToOthers, {
+            ticketId: this.ticketId,
+            endTime: new Date(),
+            transferTo: this.transferTo,
+            note: this.note
+          })
+            .then(res => {
+              const result = res
+              this.note = ''
+              this.transVisible = false
+              if (result === 1) {
+                this.$message.success(
+                  '操作成功',
+                  5
+                )
+                this.initView()
+              } else {
+                this.$message.error(
+                  '操作失败',
+                  5
+                )
+              }
+              this.handleCancel()
+              this.initView()
+            }, err => {
+              console.error(err)
+              this.transVisible = false
+            })
+        }
+      },
+      // 转移工单取消后逻辑
+      handleTransferCancel () {
+        this.transferTo = ''
+        this.note = ''
+        this.transVisible = false
+        this.transferCheck = false
+      },
+      // 关闭抽屉时回调
+      onClose () {
+        this.disableCloseBtn = false
+        this.$emit('update:visible', false)
+      },
+      // 获取工单详情信息
+      getTicketDetail (num) {
+        this.loadTicketDetails = true
+        return post(TicketDetailsViewApi.getTicketDetails, {
+          ticketId: num
+        })
+          .then(res => {
+            this.details = res[0]
+            this.step = res[0].status
+            if (this.details.status === 3) {
+              this.disableCloseBtn = true
+            }
+            const categoryValue = this.details.category
+            this.details.category = this.resolveCategory(categoryValue)
+          }, err => {
+            console.error(err)
+          })
+      },
+      // 获取工单类别字典
+      getTicketCategory () {
+        return post(TicketDetailsViewApi.getTicketCategoryDictionary)
+          .then(res => {
+            this.categoryDictionary = res
+          }, err => {
+            console.log(err)
+          })
+      },
+      // 日期格式化
+      format (date, format) {
+        return formatDate(date, format)
+      },
+      // 转换JSON
+      toJSON (value) {
+        try {
+          return JSON.parse(value)
+        } catch (e) {
+          return value
+        }
+      },
+      // 控制开始处理按钮可用状态
+      handlerBtnDisable () {
+        return this.step !== 0
+      },
+      // 控制移交他人按钮可用状态
+      transferBtnDisable () {
+        return this.step === 0
+      },
+      // 控制关闭工单按钮可用状态
+      closeBtnDisable () {
+        return this.step === 0 || this.disableCloseBtn || this.details.id != this.currUser.id
+      },
+      // 优先级文字显示
+      showPriority () {
+        if (this.details.priority === 2) {
+          return '一般'
+        } else if (this.details.priority === 1) {
+          return '紧急'
+        } else {
+          return '非常紧急'
+        }
+      },
+      // 优先度颜色控制
+      showPriorityColorControl () {
+        if (this.details.priority === 2) {
+          return 'info'
+        } else if (this.details.priority === 1) {
+          return 'warning'
+        } else {
+          return 'error'
+        }
+      }
+    },
+    watch: {
+      'visible' (val) {
+        if (val) {
+          this.initView()
+        }
+      }
+    }
+  }
+</script>
+
+<style lang="less" scoped>
+.high-priority{
+  background-color: rgba(163, 30, 30, 0.66);
+  border: red solid 1px;
+  font-size: large;
+  padding: 5px;
+  color: white;
+  border-radius: 10px;
+}
+
+.detail-layout {
+  margin-left: 44px;
+}
+.text {
+  color: rgba(0, 0, 0, .45);
+}
+
+.heading {
+  color: rgba(0, 0, 0, .85);
+  font-size: 20px;
+}
+
+.no-data {
+  color: rgba(0, 0, 0, .25);
+  text-align: center;
+  line-height: 64px;
+  font-size: 16px;
+
+  i {
+    font-size: 24px;
+    margin-right: 16px;
+    position: relative;
+    top: 3px;
+  }
+}
+
+.mobile {
+  .detail-layout {
+    margin-left: unset;
+  }
+  .text {
+
+  }
+  .status-list {
+    text-align: left;
+  }
+}
+
+.row {
+  display: flex;
+
+  .content {
+    -webkit-box-flex: 1;
+    flex: auto;
+    -ms-flex: auto;
+  }
+
+  .extra {
+    flex: 0 1 auto;
+    -webkit-box-flex: 0;
+    -ms-flex: 0 1 auto;
+    min-width: 242px;
+    margin-left: 88px;
+    text-align: right;
+  }
+}
+</style>