vue2-client 0.1.0 → 1.1.0

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

@@ -0,0 +1,303 @@
+<template>
+  <a-drawer
+    title="工单进度查询"
+    placement="right"
+    :width="isMobile ? screenWidth : screenWidth * 0.85"
+    :visible="visible"
+    @close="onClose"
+  >
+    <a-card class="result-success" :bordered="false">
+      <result :is-success="icon" :description="description" :title="title" :title-class="titleClass">
+        <template slot="action">
+          <span style="margin-right: 10px" v-if="countDown > 0">{{ countDownFormat() }}</span>
+          <a-tooltip placement="topLeft" :title="tip" arrow-point-at-center>
+            <a-button type="primary" v-if="UrgentAvailable" :disabled="urgentAccess" style="margin-right: 20px" @click="urgent">请求加急处理</a-button>
+          </a-tooltip>
+          <a-button type="danger" @click="closeBtn" >撤销工单</a-button>
+        </template>
+        <a-modal
+          title="关闭工单"
+          :visible="closeVisible"
+          @ok="handleCloseOk"
+          @cancel="handleCloseCancel"
+          :zIndex="1002"
+        >
+          <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 term="提交时间">{{ format(details.createdTime, 'yyyy-MM-dd') }}</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 :title="details.name" v-if="step >= 1" />
+                <a-step-item :title="details.confirmTime" v-if="step >= 1"/>
+              </a-step-item-group>
+            </a-step>
+            <a-step title="工单完成" >
+              <a-step-item-group slot="description">
+                <a-step-item :title="details.finishedTime" v-if="step >= 2"/>
+              </a-step-item-group>
+            </a-step>
+          </a-steps>
+        </div>
+      </result>
+    </a-card>
+  </a-drawer>
+</template>
+
+<script>
+import Result from '@/components/result/Result'
+import DetailList from '@/components/tool/DetailList'
+import AStepItem from '@/components/tool/AStepItem'
+import { TicketDetailsViewApi } from '@/services/api/TicketDetailsViewApi'
+import { post } from '@/services/api/restTools'
+import { mapState } from 'vuex'
+import { formatDate } from '@/utils/util'
+
+const AStepItemGroup = AStepItem.Group
+const DetailListItem = DetailList.Item
+export default {
+  name: 'submitTicketSuccess',
+  components: { AStepItemGroup, AStepItem, DetailListItem, DetailList, Result },
+  data () {
+    return {
+      // 页面宽度
+      screenWidth: document.documentElement.clientWidth,
+      title: '提交成功',
+      description: '您创建的工单已成功提交，请保持电话畅通，我们的工作人员将尽快与您取得联系',
+      // 加急按钮气泡文字
+      tip: '如果需要加急，请在5分钟倒计时结束后点击加急按钮，加急后我们将优先处理您的工单',
+      // 控制标题样式
+      titleClass: 'title',
+      // 工单详情
+      details: {
+        uploader: '',
+        status: '',
+        name: '',
+        priority: undefined,
+        createdTime: '',
+        confirmTime: '',
+        finishedTime: ''
+      },
+      // 控制加急按钮
+      urgentAccess: true,
+      // 倒计时
+      countDown: 0,
+      // 控制加急按钮显示
+      UrgentAvailable: true,
+      // 刷新页面的定时器
+      timer: undefined,
+      // 取消工单确认框可见性
+      closeVisible: false,
+      // 控制页面大图标
+      icon: true,
+      // 控制加急后定时器
+      showTelephoneCountDown: 0
+    }
+  },
+  props: {
+    serialNumber: {
+      type: String,
+      required: true
+    },
+    visible: {
+      type: Boolean,
+      default: false
+    }
+  },
+  mounted () {
+    this.getTicketDetail()
+    this.refresh()
+    this.countDown = 0
+  },
+  methods: {
+    // 关闭抽屉时回调
+    onClose () {
+      this.urgentAccess = true
+      clearInterval(this.timer)
+      this.$emit('update:visible', false)
+      this.titleClass = 'title'
+      this.description = '您创建的工单已成功提交，请保持电话畅通，我们的工作人员将尽快与您取得联系'
+      this.title = '提交成功'
+      this.UrgentAvailable = true
+    },
+    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
+          clearInterval(this.timer)
+        }, err => {
+          console.error(err)
+        })
+    },
+    // 关闭工单取消后业务逻辑
+    handleCloseCancel () {
+      this.closeVisible = false
+    },
+    // 关闭工单按钮
+    closeBtn () {
+      this.closeVisible = true
+    },
+    // 过10s刷新一下页面数据
+    refresh () {
+      this.timer = setInterval(() => {
+        this.getTicketDetail()
+      }, 10 * 1000)
+    },
+    // 对工单进行加急处理
+    urgent () {
+      return post(TicketDetailsViewApi.rushTicket, {
+        serialNumber: this.serialNumber
+      })
+        .then(res => {
+          if (res === 1) {
+            this.$message.success(
+              '操作成功',
+              5
+            )
+            this.title = '加急成功'
+            this.titleClass = 'title_danger'
+            this.description = '您的工单已经被加急处理，我们的工作人员会马上与您取得联系'
+            this.UrgentAvailable = false
+            this.showPhoneNumberTimer()
+          } else {
+            this.$message.error(
+              '操作失败',
+              5
+            )
+          }
+        }, err => {
+          console.log(err)
+        })
+    },
+    // 格式化倒计时
+    countDownFormat () {
+      const hours = '00'
+      let mins = Math.floor(this.countDown / 60)
+      let secs = this.countDown % 60
+      if (mins < 10) {
+        mins = '0' + mins
+      }
+      if (secs < 10) {
+        secs = '0' + secs
+      }
+      return hours + ':' + mins + ':' + secs
+    },
+    // 设置用于控制加急按钮倒计时定时器，加急按钮5分钟后才可点击
+    setTimer () {
+      this.countDown = 5
+      const time = setInterval(() => {
+        this.countDown--
+        if (this.countDown <= 0) {
+          this.urgentAccess = false
+          clearInterval(time)
+          this.countDown = -1
+        }
+      }, 1000)
+    },
+    // 设定关于加急后的定时器，5分钟后仍没人联系，显示联系电话
+    showPhoneNumberTimer () {
+      this.showTelephoneCountDown = 5
+      const time = setInterval(() => {
+        this.showTelephoneCountDown--
+        if (this.showTelephoneCountDown <= 0) {
+          this.description = '很抱歉让您久等，029-88888888 您可以直接拨打此电话，与我们技术人员直接交谈！'
+          clearInterval(time)
+          this.showTelephoneCountDown = -1
+        }
+      }, 1000)
+    },
+    // 获取工单详情
+    getTicketDetail () {
+      return post(TicketDetailsViewApi.getTicketDetailsForUploader, {
+        serialNumber: this.serialNumber
+      })
+        .then(res => {
+          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.priority = res.priority
+
+          // 如果当前状态为一般，设置定时器，五分钟后允许加急
+          if (this.details.priority > 1 && this.countDown === 0) {
+            this.setTimer()
+          }
+        }, err => {
+          console.log(err)
+        })
+    }
+  },
+  computed: {
+    ...mapState('account', { currUser: 'user' }),
+    ...mapState('setting', ['isMobile']),
+    // 用于进度条，进度显示控制
+    step () {
+      if (this.details.status !== 0 && this.details.status !== 1) {
+        return 2
+      } else {
+        return this.details.status
+      }
+    }
+  },
+  watch: {
+    'serialNumber' () {
+      this.getTicketDetail()
+      this.refresh()
+      this.countDown = 0
+    }
+  }
+}
+</script>
+
+<style scoped lang="less">
+.result-success{
+  .action:not(:first-child){
+    margin-left: 8px;
+  }
+  .project-name{
+    font-size: 16px;
+    color: @title-color;
+    font-weight: 500;
+    margin-bottom: 20px;
+  }
+}
+</style>

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

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

package/src/base-client/components/ticket/TicketSubmitSuccessView/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/plugins/AppData.js

@@ -0,0 +1,69 @@
+import { post } from '@/services/api/restTools'
+import { manageApi } from '@/services/api/manage'
+import { commonApi } from '@/services/api/common'
+
+const GetAppDataService = {
+  install (Vue) {
+    // 给vue增添对话框显示方法
+    Vue.$appdata = Vue.prototype.$appdata = GetAppDataService
+  },
+  async load () {
+    const params = {}
+    // 查询燃气公司列表
+    const orgList = []
+    await post(manageApi.orgList, {}).then(async res => {
+      for (let i = 0, len = res.length; i < len; i++) {
+        orgList.push({
+          label: res[i],
+          value: res[i],
+          text: res[i]
+        })
+      }
+      params['orgList'] = orgList
+      await post(commonApi.getDictionaryValue, {}).then((res) => {
+        Object.assign(params, res)
+        const badgeItemArray = {}
+        for (const key of Object.keys(params)) {
+          badgeItemArray[key] = {}
+          for (const item of params[key]) {
+            if (item.status) {
+              badgeItemArray[key][item.value] = {
+                status: item.status,
+                text: item.text
+              }
+            }
+          }
+        }
+        // 追加参数
+        localStorage.setItem(process.env.VUE_APP_DICTIONARY_KEY, JSON.stringify(params))
+        localStorage.setItem(process.env.VUE_APP_BADGE_KEY, JSON.stringify(badgeItemArray))
+      })
+    })
+  },
+  getDictionaryList (key) {
+    const str = localStorage.getItem(process.env.VUE_APP_DICTIONARY_KEY)
+    const object = JSON.parse(str)
+    return object[key]
+  },
+  getParam (key, value) {
+    const str = localStorage.getItem(process.env.VUE_APP_BADGE_KEY)
+    const object = JSON.parse(str)
+    const result = object[key]
+    if (result && result.hasOwnProperty(value)) {
+      return result[value]
+    } else {
+      return null
+    }
+  },
+  getParams () {
+    const str = localStorage.getItem(process.env.VUE_APP_DICTIONARY_KEY)
+    const object = JSON.parse(str)
+    return object
+  },
+  getSingleValues () {
+    const str = localStorage.getItem(process.env.VUE_APP_BADGE_KEY)
+    const object = JSON.parse(str)
+    return object
+  }
+}
+export default GetAppDataService

package/src/{plugins → base-client/plugins}/Config.js

@@ -12,7 +12,7 @@ const asyncReady = async function (vm, name) {
   }
 }
 export default {
-  install (Vue, options) {
+  install (Vue) {
     Vue.getConfig = Vue.prototype.$getConfig = function (vm, name) {
       return asyncReady(vm, name)
     }

package/src/base-client/plugins/GetLoginInfoService.js

@@ -0,0 +1,221 @@
+import Vue from 'vue'
+import { SEARCH } from '@/services/api'
+import { post } from '@/services/api/restTools'
+
+const loginGen = async function (response) {
+  Vue.$login.f = response
+  await Promise.all([Vue.$appdata.load(), getGasman(), getLic(), getViewDetails()])
+  const login = {
+    f: Vue.$login.f,
+    jwt: Vue.$login.f.id,
+    r: Vue.$login.r
+  }
+  Vue.$store.commit('account/setLogin', login)
+}
+
+/**
+ * 获取片区
+ * @returns {Promise<void>}
+ */
+// eslint-disable-next-line
+async function getAllArea () {
+  try {
+    const getAllArea = await post(SEARCH, {
+      source: 'this.getParentByType($organization$).getChildByName($片区$).getChildren()',
+      userid: Vue.$login.f.id
+    })
+    const areaTemp = []
+    for (let i = 0; i < getAllArea.length; i++) {
+      areaTemp.push({ label: getAllArea[i].name, value: getAllArea[i] })
+    }
+    Vue.$login.f.f_allArea = areaTemp
+  } catch (error) {
+    Vue.$login.f.f_allArea = []
+    console.log('获取片区异常', error)
+  }
+}
+/**
+ * 获取抄表员
+ * @returns {Promise<void>}
+ */
+async function getGasman () {
+  try {
+    const getGasman = await post(SEARCH, {
+      source: 'this.getParentByType($organization$).getChildByName($抄表员$).getUsers()',
+      userid: Vue.$login.f.id
+    })
+    const gasman = []
+    for (let i = 0; i < getGasman.length; i++) {
+      gasman.push(getGasman[i])
+    }
+    Vue.$login.f.f_gasman = gasman
+  } catch (error) {
+    Vue.$login.f.f_gasman = []
+    console.log('获取抄表员异常', error)
+  }
+}
+/**
+ * 获取资源服务权限
+ * @returns {Promise<void>}
+ */
+async function getLic () {
+  try {
+    const getLic = await post(SEARCH, { data: {
+        source: 'this.getRights().where(row.getType()==$function$ && row.getPath($name$).indexOf($资源操作$) != -1)',
+        userid: Vue.$login.f.id
+      } }, { resolveMsg: null, rejectMsg: null })
+    const arry = []
+    getLic.forEach((item) => {
+      arry.push(item.name)
+    })
+    Vue.$login.f.lics = arry
+  } catch (error) {
+    Vue.$login.f.f_gasman = []
+    console.log('获取资源服务权限异常', error)
+  }
+}
+/**
+ * 获取界面细节 (界面权限)
+ * @returns {Promise<void>}
+ */
+async function getViewDetails () {
+  try {
+    const viewDetails = await post(SEARCH, {
+      source: 'this.getRights().where(row.getType()==$function$ && row.getPath($name$).indexOf($功能权限$) != -1)',
+      userid: Vue.$login.f.id
+    }, { resolveMsg: null, rejectMsg: null })
+    const r = viewDetails
+    Vue.$login.r = []
+    r.forEach(x => Vue.$login.r.push(x.name))
+  } catch (error) {
+    Vue.$login.r = []
+    console.log('获取界面细节异常', error)
+  }
+}
+/**
+ * 获取资源功能
+ * @returns {Promise<void>}
+ */
+async function getResourceFunction () {
+  try {
+    const resourceFunction = await post(SEARCH, {
+      source: 'tool.getFullTree(this.getRights().where(row.getName() == $组织管理$||row.getName() == $功能管理$||row.getName() == $部门管理$ || row.getName() == $角色管理$ || row.getName() == $人员管理$|| row.getName() == $资源调配$ ))',
+      userid: Vue.$login.f.id
+    }, { resolveMsg: null, rejectMsg: null })
+    return resourceFunction
+  } catch (error) {
+    console.log('获取资源功能异常', error)
+  }
+}
+
+const GetLoginInfoService = {
+  install (Vue) {
+    // 给vue增添对话框显示方法
+    Vue.$login = Vue.prototype.$login = GetLoginInfoService
+  },
+
+  f: {
+
+  },
+
+  login (response) {
+    return loginGen(response)
+  },
+
+  convertToIn (val) {
+    let temp = ''
+    if (val instanceof Array) {
+      if (val.length >= 1) {
+        temp = '('
+        val.forEach((res) => {
+          temp += `'${res}',`
+        })
+        temp = temp.substr(0, temp.length - 1) + ')'
+      }
+    }
+    return temp
+  },
+  toStandardTimeString () {
+    const dt = new Date()
+    const month = dt.getMonth() + 1
+    const date = dt.getDate()
+    const hour = dt.getHours()
+    const min = dt.getMinutes()
+    const sec = dt.getSeconds()
+    return dt.getFullYear() + '-' + (month < 10 ? '0' + month : month) + '-' + (date < 10 ? '0' + date : date) +
+      ' ' + (hour < 10 ? '0' + hour : hour) + ':' + (min < 10 ? '0' + min : min) + ':' + (sec < 10 ? '0' + sec : sec)
+  },
+
+  guid () {
+    const buf = new Uint16Array(8)
+    window.crypto.getRandomValues(buf)
+    const S4 = function (num) {
+      let ret = num.toString()
+      while (ret.length < 4) {
+        ret = '0' + ret
+      }
+      return ret
+    }
+    return (S4(buf[0]) + S4(buf[1]) + S4(buf[2]) + S4(buf[3]) + S4(buf[4]) + S4(buf[5]) + S4(buf[6]) + S4(buf[7]))
+  },
+  required (param) {
+    if (typeof param === 'number' && param === 0) {
+      return false
+    }
+    if (!param) {
+      return true
+    }
+    param = param + ''
+    param = param.trim()
+    return !param
+  },
+
+  isInt (n) {
+    return !window.isNaN(n) && n % 1 === 0
+  },
+
+  // 不能选择器中截取掉多余的字符
+  orgName (name) {
+    return name.substring(10)
+  },
+
+  addDate (date, days) {
+    // 求取当前时间的工具
+    let endDate = new Date(date)
+    endDate = endDate.valueOf()
+    endDate = endDate + days * 24 * 60 * 60 * 1000
+    endDate = new Date(endDate)
+    const month = endDate.getMonth() + 1
+    const day = endDate.getDate()
+    const hour = endDate.getHours()
+    const min = endDate.getMinutes()
+    const sec = endDate.getSeconds()
+    return endDate.getFullYear() + '-' + (month < 10 ? '0' + month : month) + '-' + (day < 10 ? '0' + day : day) +
+      ' ' + (hour < 10 ? '0' + hour : hour) + ':' + (min < 10 ? '0' + min : min) + ':' + (sec < 10 ? '0' + sec : sec)
+    // return a
+  },
+
+  // 对字符串进行加密
+  compileStr (code) {
+    let c = String.fromCharCode(code.charCodeAt(0) + code.length)
+    for (let i = 1; i < code.length; i++) {
+      c += String.fromCharCode(code.charCodeAt(i) + code.charCodeAt(i - 1))
+    }
+    return escape(c)
+  },
+
+  // 字符串进行解密
+  uncompileStr (code) {
+    code = unescape(code)
+    let c = String.fromCharCode(code.charCodeAt(0) - code.length)
+    for (let i = 1; i < code.length; i++) {
+      c += String.fromCharCode(code.charCodeAt(i) - c.charCodeAt(i - 1))
+    }
+    return c
+  }
+}
+
+export default GetLoginInfoService
+export {
+  getResourceFunction
+}