vue2-client 1.2.0 → 1.2.3

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

@@ -1,406 +1,371 @@
-<template>
-  <a-drawer
-    title="员工详情"
-    placement="right"
-    :width="isMobile ? screenWidth : screenWidth * 0.85"
-    :visible="visible"
-    @close="onClose"
-  >
-    <!--  头部信息展示  -->
-    <a-page-header :title="'员工编号：' + this.empId">
-      <div class="row">
-        <div class="content">
-          <a-descriptions size="small" :column="isMobile ? 1 : 2">
-            <a-descriptions-item label="姓名">{{ details.name }}</a-descriptions-item>
-            <a-descriptions-item label="部门">{{ details.department }}</a-descriptions-item>
-            <a-descriptions-item label="负责模块">{{ details.model_in_charge }}</a-descriptions-item>
-          </a-descriptions>
-        </div>
-      </div>
-    </a-page-header>
-
-    <!--  数据展示  -->
-    <br/>
-    <br/>
-    <br/>
-    <!--  应答工单统计  -->
-    <a-col :sm="24" :md="12" :xl="6" :style="{ marginBottom: '24px' }">
-      <x-card :loadState="confirmLoadState" :retry="loadConfirmCount">
-        <chart-card title="总应答数" :total="details.response_ticket_count | NumberFormat">
-          <a-tooltip title="刷新" slot="action" :style="{ marginRight: '10px' }" @click="loadConfirmCount()">
-            <a-icon type="redo" />
-          </a-tooltip>
-          <div>
-            <mini-area :dataSource="confirmSumWeekly" :scale="confirmSumWeeklyScale" />
-          </div>
-          <template slot="footer">7日新增 <span> {{ confirmLastWeekCount | NumberFormat }}</span></template>
-        </chart-card>
-      </x-card>
-    </a-col>
-    <!--  完成工单统计  -->
-    <a-col :sm="24" :md="12" :xl="6" :style="{ marginBottom: '24px' }">
-      <x-card :loadState="finishLoadState" :retry="loadFinishCount">
-        <chart-card title="总完成数" :total="details.finished_ticket_count | NumberFormat">
-          <a-tooltip title="刷新" slot="action" :style="{ marginRight: '10px' }" @click="loadFinishCount()">
-            <a-icon type="redo" />
-          </a-tooltip>
-          <div>
-            <mini-bar :dataSource="finishSumWeekly" :scale="finishSumWeeklyScale" />
-          </div>
-          <template slot="footer">7日新增 <span>{{ finishLastWeekCount | NumberFormat }}</span></template>
-        </chart-card>
-      </x-card>
-    </a-col>
-    <!--  工单完成率  -->
-    <a-col :sm="24" :md="12" :xl="6" :style="{ marginBottom: '24px' }">
-      <x-card :loadState="finishedRatioLoadStatus">
-        <chart-card title="工单完成占比" :total="details.finished_ticket_ratio + '%'">
-          <a-tooltip title="刷新" slot="action" :style="{ marginRight: '10px' }" @click="loadFinishedRatio">
-            <a-icon type="redo" />
-          </a-tooltip>
-          <div>
-            <mini-progress :color="finishRatioColor" :target="20" :percentage="details.finished_ticket_ratio" height="8px" />
-          </div>
-        </chart-card>
-      </x-card>
-    </a-col>
-  </a-drawer>
-</template>
-
-<script>
-import JsonViewer from 'vue-json-viewer'
-import { formatDate } from '@vue2-client/utils/util'
-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 {
-  ChartCard,
-  MiniArea,
-  MiniBar,
-  MiniProgress,
-  RankList,
-  Bar,
-  Trend,
-  NumberInfo,
-  MiniSmoothArea
-} from '@vue2-client/components'
-
-export default {
-  name: 'EmployeeDetailsView',
-  components: {
-    JsonViewer,
-    XTable,
-    ChartCard,
-    MiniArea,
-    MiniBar,
-    MiniProgress,
-    RankList,
-    Bar,
-    Trend,
-    NumberInfo,
-    MiniSmoothArea
-  },
-  data () {
-    return {
-      // 页面宽度
-      screenWidth: document.documentElement.clientWidth,
-      // 员工详情
-      details: {
-        name: '',
-        department: undefined,
-        model_in_charge: undefined,
-        response_ticket_count: undefined,
-        finished_ticket_count: undefined,
-        finished_ticket_ratio: undefined
-      },
-      // 控制加载过程
-      loadTicketDetails: false,
-      // 控制应答数加载
-      confirmLoadState: 'Loading...',
-      // 控制完成数加载
-      finishLoadState: 'Loading...',
-      // 控制完成比例加载
-      finishedRatioLoadStatus: 'Loading...',
-      // 一周应答明细
-      confirmSumWeekly: [],
-      // 一周完成明细
-      finishSumWeekly: [],
-      // 一周应答明细列
-      confirmSumWeeklyScale: [
-        {
-          dataKey: 'x',
-          alias: '时间'
-        },
-        {
-          dataKey: 'y',
-          alias: '应答数'
-        }
-      ],
-      // 一周完成明细列
-      finishSumWeeklyScale: [
-        {
-          dataKey: 'x',
-          alias: '时间'
-        },
-        {
-          dataKey: 'y',
-          alias: '完成数'
-        }
-      ],
-      // 7日新增应答数
-      confirmLastWeekCount: 0,
-      // 7日新增完成数
-      finishLastWeekCount: 0,
-      // 控制订单完成比例颜色
-      finishRatioColor: '',
-      // 部门名字典
-      departmentDictionary: [],
-      // 模块名字典
-      modelDictionary: []
-    }
-  },
-  mounted () {
-    this.getDepartmentDictionary()
-    this.getModelDictionary()
-    this.loadConfirmCount()
-    this.loadFinishCount()
-    this.initView()
-  },
-  computed: {
-    ...mapState('account', { currUser: 'user' }),
-    ...mapState('setting', ['isMobile'])
-  },
-  props: {
-    empId: {
-      type: String,
-      required: true
-    },
-    visible: {
-      type: Boolean,
-      default: false
-    }
-  },
-  methods: {
-    // 初始化组件
-    initView () {
-      this.loadTicketDetails = true
-      this.finishedRatioLoadStatus = 'Loading...'
-      this.details.finished_ticket_ratio = 0
-      return post(EmployeeDetailsViewApi.getEmployeeDetails, {
-        empId: this.empId
-      })
-        .then(res => {
-          this.details = res
-          if (this.details.finished_ticket_ratio === undefined) {
-            this.details.finished_ticket_ratio = 0
-          }
-          this.details.finished_ticket_ratio = this.details.finished_ticket_ratio * 100
-          this.finishRatioColor = this.getFinishedRatioColor(this.details.finished_ticket_ratio)
-          // 字典值解析
-          const departmentValue = this.details.department
-          this.details.department = this.resolveDepartmentDictionary(departmentValue)
-          const modelInChargeValue = this.details.model_in_charge
-          this.details.model_in_charge = this.resolveDepartmentDictionary(modelInChargeValue)
-          this.finishedRatioLoadStatus = 'success'
-          this.loadTicketDetails = false
-        }, err => {
-          this.loadTicketDetails = false
-          console.error(err)
-        })
-    },
-    // 获取部门名字典
-    getDepartmentDictionary () {
-      return post(EmployeeDetailsViewApi.getDepartmentDictionary)
-        .then(res => {
-          this.departmentDictionary = res
-        }, err => {
-          console.log(err)
-        })
-    },
-    // 解析部门名字典
-    resolveDepartmentDictionary (key) {
-      for (let i = 0; i < this.departmentDictionary.length; i++) {
-        if (this.departmentDictionary[i].value == key) {
-          return this.departmentDictionary[i].name
-        }
-      }
-    },
-    // 获取模块名字典
-    getModelDictionary () {
-      return post(EmployeeDetailsViewApi.getModelDictionary)
-        .then(res => {
-          this.modelDictionary = res
-        }, err => {
-          console.log(err)
-        })
-    },
-    // 解析模块名字典
-    resolveModelDictionary (key) {
-      for (let i = 0; i < this.modelDictionary.length; i++) {
-        if (this.modelDictionary[i].value == key) {
-          return this.modelDictionary[i].name
-        }
-      }
-    },
-    // 获取应答订单数量
-    loadConfirmCount () {
-      this.confirmSumWeekly = []
-      this.confirmLoadState = 'Loading...'
-      return post(EmployeeDetailsViewApi.getConfirmTicketsCountWeekly, {
-        empId: this.empId
-      }).then(res => {
-        this.confirmLastWeekCount = 0
-        for (let i = 0, len = res.length; i < len; i++) {
-          this.confirmLastWeekCount = this.confirmLastWeekCount + res[i].num
-          this.confirmSumWeekly.push({
-            x: res[i].date,
-            y: res[i].num
-          })
-        }
-        this.confirmLoadState = 'success'
-        }, err => {
-          console.warn(err)
-          this.confirmLoadState = 'error'
-        })
-    },
-    // 获取完成订单数据
-    loadFinishCount () {
-      this.finishSumWeekly = []
-      this.finishLoadState = 'Loading...'
-      return post(EmployeeDetailsViewApi.getFinishedTicketsCountWeekly, {
-        empId: this.empId
-      }).then(res => {
-        this.finishLastWeekCount = 0
-        for (let i = 0, len = res.length; i < len; i++) {
-          this.finishLastWeekCount = this.finishLastWeekCount + res[i].num
-          this.finishSumWeekly.push({
-            x: res[i].date,
-            y: res[i].num
-          })
-        }
-        this.finishLoadState = 'success'
-      }, err => {
-        console.warn(err)
-        this.finishLoadState = 'error'
-      })
-    },
-    // 获取完成订单比例数据
-    loadFinishedRatio () {
-      this.initView()
-    },
-    // 根据占比返回完成度颜色
-    getFinishedRatioColor (percent) {
-      if (percent < 10) {
-        return 'rgb(242, 99, 123)'
-      } else if (percent >= 10 && percent <= 20) {
-        return 'rgb(251, 212, 55)'
-      } else {
-        return 'rgb(19, 194, 194)'
-      }
-    },
-    // 关闭抽屉时回调
-    onClose () {
-      this.$emit('update:visible', false)
-      this.details.finished_ticket_ratio = undefined
-    },
-    // 日期格式化
-    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
-    }
-  },
-  watch: {
-    'visible' (val) {
-      if (val) {
-        this.initView()
-        this.loadConfirmCount()
-        this.loadFinishCount()
-      }
-    }
-  }
-}
-</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-page-header :title="'员工编号：' + this.empId">
+      <div class="row">
+        <div class="content">
+          <a-descriptions size="small" :column="isMobile ? 1 : 2">
+            <a-descriptions-item label="姓名">{{ details.name }}</a-descriptions-item>
+            <a-descriptions-item label="部门">{{ details.department }}</a-descriptions-item>
+            <a-descriptions-item label="负责模块">{{ details.model_in_charge }}</a-descriptions-item>
+          </a-descriptions>
+        </div>
+      </div>
+    </a-page-header>
+
+    <!--  数据展示  -->
+    <br/>
+    <br/>
+    <br/>
+    <!--  应答工单统计  -->
+    <a-col :sm="24" :md="12" :xl="6" :style="{ marginBottom: '24px' }">
+      <x-card :loadState="confirmLoadState" :retry="loadConfirmCount">
+        <chart-card title="总应答数" :total="details.response_ticket_count | NumberFormat">
+          <a-tooltip title="刷新" slot="action" :style="{ marginRight: '10px' }" @click="loadConfirmCount()">
+            <a-icon type="redo" />
+          </a-tooltip>
+          <div>
+            <mini-area :dataSource="confirmSumWeekly" :scale="confirmSumWeeklyScale" />
+          </div>
+          <template slot="footer">7日新增 <span> {{ confirmLastWeekCount | NumberFormat }}</span></template>
+        </chart-card>
+      </x-card>
+    </a-col>
+    <!--  完成工单统计  -->
+    <a-col :sm="24" :md="12" :xl="6" :style="{ marginBottom: '24px' }">
+      <x-card :loadState="finishLoadState" :retry="loadFinishCount">
+        <chart-card title="总完成数" :total="details.finished_ticket_count | NumberFormat">
+          <a-tooltip title="刷新" slot="action" :style="{ marginRight: '10px' }" @click="loadFinishCount()">
+            <a-icon type="redo" />
+          </a-tooltip>
+          <div>
+            <mini-bar :dataSource="finishSumWeekly" :scale="finishSumWeeklyScale" />
+          </div>
+          <template slot="footer">7日新增 <span>{{ finishLastWeekCount | NumberFormat }}</span></template>
+        </chart-card>
+      </x-card>
+    </a-col>
+    <!--  工单完成率  -->
+    <a-col :sm="24" :md="12" :xl="6" :style="{ marginBottom: '24px' }">
+      <x-card :loadState="finishedRatioLoadStatus">
+        <chart-card title="工单完成占比" :total="details.finished_ticket_ratio + '%'">
+          <a-tooltip title="刷新" slot="action" :style="{ marginRight: '10px' }" @click="loadFinishedRatio">
+            <a-icon type="redo" />
+          </a-tooltip>
+          <div>
+            <mini-progress :color="finishRatioColor" :target="20" :percentage="details.finished_ticket_ratio" height="8px" />
+          </div>
+        </chart-card>
+      </x-card>
+    </a-col>
+  </a-drawer>
+</template>
+
+<script>
+import JsonViewer from 'vue-json-viewer'
+import { formatDate } from '@vue2-client/utils/util'
+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 {
+  ChartCard,
+  MiniArea,
+  MiniBar,
+  MiniProgress,
+  RankList,
+  Bar,
+  Trend,
+  NumberInfo,
+  MiniSmoothArea
+} from '@vue2-client/components'
+
+export default {
+  name: 'EmployeeDetailsView',
+  components: {
+    JsonViewer,
+    XTable,
+    ChartCard,
+    MiniArea,
+    MiniBar,
+    MiniProgress,
+    RankList,
+    Bar,
+    Trend,
+    NumberInfo,
+    MiniSmoothArea
+  },
+  data () {
+    return {
+      // 页面宽度
+      screenWidth: document.documentElement.clientWidth,
+      // 员工详情
+      details: {
+        name: '',
+        department: undefined,
+        model_in_charge: undefined,
+        response_ticket_count: undefined,
+        finished_ticket_count: undefined,
+        finished_ticket_ratio: undefined
+      },
+      // 控制加载过程
+      loadTicketDetails: false,
+      // 控制应答数加载
+      confirmLoadState: 'Loading...',
+      // 控制完成数加载
+      finishLoadState: 'Loading...',
+      // 控制完成比例加载
+      finishedRatioLoadStatus: 'Loading...',
+      // 一周应答明细
+      confirmSumWeekly: [],
+      // 一周完成明细
+      finishSumWeekly: [],
+      // 一周应答明细列
+      confirmSumWeeklyScale: [
+        {
+          dataKey: 'x',
+          alias: '时间'
+        },
+        {
+          dataKey: 'y',
+          alias: '应答数'
+        }
+      ],
+      // 一周完成明细列
+      finishSumWeeklyScale: [
+        {
+          dataKey: 'x',
+          alias: '时间'
+        },
+        {
+          dataKey: 'y',
+          alias: '完成数'
+        }
+      ],
+      // 7日新增应答数
+      confirmLastWeekCount: 0,
+      // 7日新增完成数
+      finishLastWeekCount: 0,
+      // 控制订单完成比例颜色
+      finishRatioColor: ''
+    }
+  },
+  mounted () {
+    this.loadConfirmCount()
+    this.loadFinishCount()
+    this.initView()
+  },
+  computed: {
+    ...mapState('account', { currUser: 'user' }),
+    ...mapState('setting', ['isMobile'])
+  },
+  props: {
+    empId: {
+      type: String,
+      required: true
+    },
+    visible: {
+      type: Boolean,
+      default: false
+    }
+  },
+  methods: {
+    // 初始化组件
+    initView () {
+      this.loadTicketDetails = true
+      this.finishedRatioLoadStatus = 'Loading...'
+      this.details.finished_ticket_ratio = 0
+      return post(EmployeeDetailsViewApi.getEmployeeDetails, {
+        empId: this.empId
+      })
+        .then(res => {
+          this.details = res
+          if (this.details.finished_ticket_ratio === undefined) {
+            this.details.finished_ticket_ratio = 0
+          }
+          this.details.finished_ticket_ratio = this.details.finished_ticket_ratio * 100
+          this.finishRatioColor = this.getFinishedRatioColor(this.details.finished_ticket_ratio)
+          // 字典值解析
+          const departmentValue = this.details.department
+          this.details.department = this.$appdata.getDictionaryList('departmentMap')[departmentValue].label
+          const modelInChargeValue = this.details.model_in_charge
+          const modelDictionary = this.$appdata.getDictionaryList('serviceModuleType')
+          for (let i = 0; i < modelDictionary.length; i++) {
+            if (modelInChargeValue === modelDictionary[i].value) {
+              this.details.model_in_charge = this.$appdata.getDictionaryList('serviceModuleType')[i].label
+            }
+          }
+          this.finishedRatioLoadStatus = 'success'
+          this.loadTicketDetails = false
+        }, err => {
+          this.loadTicketDetails = false
+          console.error(err)
+        })
+    },
+    // 获取应答订单数量
+    loadConfirmCount () {
+      this.confirmSumWeekly = []
+      this.confirmLoadState = 'Loading...'
+      return post(EmployeeDetailsViewApi.getConfirmTicketsCountWeekly, {
+        empId: this.empId
+      }).then(res => {
+        this.confirmLastWeekCount = 0
+        for (let i = 0, len = res.length; i < len; i++) {
+          this.confirmLastWeekCount = this.confirmLastWeekCount + res[i].num
+          this.confirmSumWeekly.push({
+            x: res[i].date,
+            y: res[i].num
+          })
+        }
+        this.confirmLoadState = 'success'
+        }, err => {
+          console.warn(err)
+          this.confirmLoadState = 'error'
+        })
+    },
+    // 获取完成订单数据
+    loadFinishCount () {
+      this.finishSumWeekly = []
+      this.finishLoadState = 'Loading...'
+      return post(EmployeeDetailsViewApi.getFinishedTicketsCountWeekly, {
+        empId: this.empId
+      }).then(res => {
+        this.finishLastWeekCount = 0
+        for (let i = 0, len = res.length; i < len; i++) {
+          this.finishLastWeekCount = this.finishLastWeekCount + res[i].num
+          this.finishSumWeekly.push({
+            x: res[i].date,
+            y: res[i].num
+          })
+        }
+        this.finishLoadState = 'success'
+      }, err => {
+        console.warn(err)
+        this.finishLoadState = 'error'
+      })
+    },
+    // 获取完成订单比例数据
+    loadFinishedRatio () {
+      this.initView()
+    },
+    // 根据占比返回完成度颜色
+    getFinishedRatioColor (percent) {
+      if (percent < 10) {
+        return 'rgb(242, 99, 123)'
+      } else if (percent >= 10 && percent <= 20) {
+        return 'rgb(251, 212, 55)'
+      } else {
+        return 'rgb(19, 194, 194)'
+      }
+    },
+    // 关闭抽屉时回调
+    onClose () {
+      this.$emit('update:visible', false)
+      this.details.finished_ticket_ratio = undefined
+    },
+    // 日期格式化
+    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
+    }
+  },
+  watch: {
+    'visible' (val) {
+      if (val) {
+        this.initView()
+        this.loadConfirmCount()
+        this.loadFinishCount()
+      }
+    }
+  }
+}
+</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>