vue2-client 0.1.1 → 1.2.0

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

@@ -0,0 +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>

package/src/base-client/components/ticket/TicketDetailsView/index.js

@@ -0,0 +1,3 @@
+import TicketDetailsView from './TicketDetailsView'
+
+export default TicketDetailsView

package/src/base-client/components/ticket/TicketDetailsView/index.md

@@ -0,0 +1,29 @@
+# TicketDetailsView 工单详情页
+
+提供一个可以对单个工单进行一系列通用业务操作的抽屉实现
+
+
+
+## 何时使用
+
+允许用户对单个工单进行一系列通用业务操作
+
+
+
+## 代码演示
+
+```html
+<ticket-details-view
+  :visible.sync="detailVisible"
+  :ticketId="ticketId"
+  v-if="ticketId"
+/>
+```
+
+## API
+
+| 参数            | 说明    | 类型     | 默认值 |
+|---------------|-------|---------|-------|
+| detailVisible | 是否显示  | Boolean | false |
+| ticketId      | 工单编号  | String  | null  |
+| id             | 负责人id | String  | null  |

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

@@ -0,0 +1,184 @@
+<template>
+  <div>
+    <a-card :bordered="false" title="工单流转历史" :loading="loading">
+      <a-timeline ref="timeline" :pending="pendingText" :reverse="true" mode="alternate" style="max-width: 800px;margin: 0 auto;">
+        <a-timeline-item v-if="index < 3 ? true : advanced" :key="index" v-for="(value,index) in workFLowList" color="green">
+          <div style="color: #0d1a26;font-weight: 500;">
+            <span style="font-size: 16px;">{{ value.name }}</span>
+            <span style="margin-left: 5px;">({{ format(value.created_time,'yyyy-MM-dd hh:mm:ss') }} 至 {{ format(value.end_time,'yyyy-MM-dd hh:mm:ss') }})</span>
+          </div>
+          <div class="antd-pro-pages-profile-advanced-style-stepDescription" >
+            留言：{{ value.note }}
+          </div>
+        </a-timeline-item>
+      </a-timeline>
+      <a-col :md="!advanced && 8 || 24" :sm="24" v-if="workFLowList.length > 3">
+        <span class="table-page-search-submitButtons" :style="advanced && { float: 'right', overflow: 'hidden' } || {} ">
+          <a @click="toggleAdvanced" style="margin-left: 8px">
+            {{ advanced ? '收起' : '展开' }}
+            <a-icon :type="advanced ? 'up' : 'down'"/>
+          </a>
+        </span>
+      </a-col>
+    </a-card>
+  </div>
+</template>
+<script>
+  import { formatDate } from '@vue2-client/utils/util'
+  import { mapState } from 'vuex'
+  import { TicketDetailsViewApi } from '@vue2-client/services/api/TicketDetailsViewApi'
+  import { post } from '@vue2-client/services/api/restTools'
+
+  export default {
+    name: 'TicketDetailsFlow',
+    props: {
+      ticketId: {
+        type: String,
+        required: true
+      },
+      disableCloseBtn: {
+        type: Boolean,
+        required: true
+      },
+      id: {
+        type: Number,
+        required: true
+      }
+    },
+    computed: {
+      ...mapState('setting', ['isMobile'])
+    },
+    data () {
+      return {
+        // 历史操作 展开/关闭
+        advanced: false,
+        workFLowList: [],
+        loading: false,
+        pendingText: '持续记录中...'
+      }
+    },
+    mounted () {
+      this.getTicketWorkFlowDetail(this.ticketId)
+    },
+    methods: {
+      format (date, format) {
+        return formatDate(date, format)
+      },
+      // 获取流转工单详情
+      getTicketWorkFlowDetail (num) {
+        if (this.disableCloseBtn) {
+          this.pendingText = ''
+        } else {
+          this.pendingText = '持续记录中...'
+        }
+        this.loading = true
+        return post(TicketDetailsViewApi.getTicketWorkFlowDetails, {
+          ticketId: num
+        }).then(res => {
+            this.workFLowDetails = res
+            // 解析workFLowDetails数据
+            this.workFLowList = []
+            const len = this.workFLowDetails.length
+            for (let i = 0; i < len; i++) {
+              this.workFLowList.push({
+                name: this.workFLowDetails[i].name,
+                created_time: this.workFLowDetails[i].created_time,
+                end_time: this.workFLowDetails[i].end_time,
+                note: this.workFLowDetails[i].note
+              })
+            }
+            this.workFLowList = this.workFLowList.reverse()
+            this.loading = false
+          })
+      },
+      toggleAdvanced () {
+        this.advanced = !this.advanced
+      }
+    },
+    watch: {
+      'ticketId' () {
+        this.getTicketWorkFlowDetail(this.ticketId)
+      },
+      'disableCloseBtn' () {
+        this.getTicketWorkFlowDetail(this.ticketId)
+      },
+      'id' () {
+        this.getTicketWorkFlowDetail(this.ticketId)
+      }
+    }
+  }
+</script>
+
+<style lang="less" scoped>
+  .card_view {
+    width: 70%;
+    min-width: 700px;
+  }
+
+  .card_view_mobile {
+    width: 100%;
+  }
+
+  .card_details_title {
+    margin: 4px 0;
+    font-size: 14px;
+  }
+
+  .card_details_value {
+    font-size: 16px;
+    font-weight: bold;
+    color: #444;
+    margin-bottom: 0;
+    overflow: hidden;
+    text-overflow:ellipsis;
+    white-space: nowrap;
+  }
+
+  .card_guid {
+    width: 25%;
+    text-align:left;
+  }
+
+  .card_guid_mobile {
+    width: 50%;
+    text-align:left;
+  }
+
+  .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;
+    }
+  }
+</style>

package/src/base-client/components/ticket/TicketDetailsView/part/index.js

@@ -0,0 +1,3 @@
+import TicketDetailsFlow from './TicketDetailsFlow'
+
+export { TicketDetailsFlow }