hd-idevvue3 3.0.0 → 3.0.2

package/src/hdcom/HdTreeTable/index.vue

@@ -0,0 +1,174 @@
+<template>
+  <el-table :data="formatData" :row-style="showRow" v-bind="$attrs">
+    <el-table-column v-if="columns.length===0" width="150">
+      <template slot-scope="scope">
+        <span v-for="space in scope.row._level" class="ms-tree-space" :key="space"></span>
+        <span class="tree-ctrl" v-if="iconShow(0,scope.row)" @click="toggleExpanded(scope.$index)">
+          <i v-if="!scope.row._expanded" class="el-icon-plus"></i>
+          <i v-else class="el-icon-minus"></i>
+        </span>
+        {{scope.$index}}
+      </template>
+    </el-table-column>
+    <el-table-column v-else v-for="(column, index) in columns" :key="column.value" :label="column.text" :width="column.width">
+      <template slot-scope="scope">
+        <span v-if="index === 0" v-for="space in scope.row._level" class="ms-tree-space" :key="space"></span>
+        <span class="tree-ctrl" v-if="iconShow(index,scope.row)" @click="toggleExpanded(scope.$index)">
+          <i v-if="!scope.row._expanded" class="el-icon-plus"></i>
+          <i v-else class="el-icon-minus"></i>
+        </span>
+        {{scope.row[column.value]}}
+      </template>
+    </el-table-column>
+    <slot></slot>
+  </el-table>
+</template>
+
+<script>
+/**
+   Auth: Lei.j1ang
+   Created: 2018/1/19-13:59
+   */
+import treeToArray from './eval'
+export default {
+  name: 'treeTable',
+  props: {
+    data: {
+      type: [Array, Object],
+      required: true
+    },
+    columns: {
+      type: Array,
+      default: () => []
+    },
+    evalFunc: Function,
+    evalArgs: Array,
+    expandAll: {
+      type: Boolean,
+      default: false
+    }
+  },
+  computed: {
+    // 格式化数据源
+    formatData: function() {
+      let tmp
+      if (!Array.isArray(this.data)) {
+        tmp = [this.data]
+      } else {
+        tmp = this.data
+      }
+      const func = this.evalFunc || treeToArray
+      const args = this.evalArgs ? Array.concat([tmp, this.expandAll], this.evalArgs) : [tmp, this.expandAll]
+      return func.apply(null, args)
+    }
+  },
+  methods: {
+    showRow: function(row) {
+      const show = (row.row.parent ? (row.row.parent._expanded && row.row.parent._show) : true)
+      row.row._show = show
+      return show ? 'animation:treeTableShow 1s;-webkit-animation:treeTableShow 1s;' : 'display:none;'
+    },
+    // 切换下级是否展开
+    toggleExpanded: function(trIndex) {
+      const record = this.formatData[trIndex]
+      record._expanded = !record._expanded
+    },
+    // 图标显示
+    iconShow(index, record) {
+      return (index === 0 && record.children && record.children.length > 0)
+    }
+  }
+}
+</script>
+<style rel="stylesheet/css">
+  @keyframes treeTableShow {
+    from {opacity: 0;}
+    to {opacity: 1;}
+  }
+  @-webkit-keyframes treeTableShow {
+    from {opacity: 0;}
+    to {opacity: 1;}
+  }
+</style>
+
+<style lang="scss" rel="stylesheet/scss" scoped>
+  $color-blue: #2196F3;
+  $space-width: 8px;
+  .ms-tree-space {
+    position: relative;
+    top: 1px;
+    display: inline-block;
+    font-style: normal;
+    font-weight: 400;
+    line-height: 1;
+    width: $space-width;
+    height: 14px;
+    &::before {
+      content: ""
+    }
+  }
+  .processContainer{
+    width: 100%;
+    height: 100%;
+  }
+  table td {
+    line-height: 26px;
+  }
+  .tree-ctrl{
+    position: relative;
+    cursor: pointer;
+    color: $color-blue;
+    margin-left: -$space-width;
+  }
+  .el-table {
+    height: 100%;
+    width: 100%;
+    flex: 1;
+    .el-table__body-wrapper {
+      width: 100%;
+    }
+    .el-table__header-wrapper th { //列表标题
+      background-color: #f6f6f6;
+    }
+
+    .el-table__fixed-header-wrapper th { //固定的列表标题
+      background-color: #f6f6f6;
+    }
+    td, th { //列表标题及内容
+      padding: 1px 0;
+    }
+    .cell, .el-table th div, .el-table--border th:first-child .cell, .el-table--border td:first-child .cell { //列表的margin
+      padding-left: 5px !important;
+      padding-right: 1px !important;
+      padding-top:1.5px !important;
+      padding-bottom: 1.5px !important;
+    }
+    .el-table__empty-block {
+      position: static;
+      text-align: center;
+      width: 100%;
+      height: 80%
+    }
+    .el-table__body { //列表下面加了空白
+      margin-bottom: 10px;
+    }
+    .el-table__body-wrapper {
+      height: 100%;
+      overflow-y: auto;
+    }
+    .el-input__inner {
+      height: 27px;
+      margin-bottom: 0px;
+    }
+    .el-input, .el-form-item__content, .el-form-item__label, .el-input__icon {
+      line-height: 30px;
+    }
+    .el-input__inner {
+      padding: 5px;
+    }
+    .el-input--prefix .el-input__inner { //日期的有logo不一样
+      padding-left: 30px;
+    }
+
+  }
+</style>

package/src/hdcom/ImportExcel.vue

@@ -0,0 +1,143 @@
+<template>
+  <el-dialog title="Excel上传" :visible.sync="visible" width='65%' top="10vh">
+    <input id="excel-upload-input" ref="excel-upload-input" type="file" accept=".xlsx, .xls" class="c-hide"
+           @change="handkeFileChange">
+    <div class="excelSel" @drop="handleDrop" @dragover="handleDragover" @dragenter="handleDragover">
+      {{$t('Excel导入,需要以导出的Excel为模板')}}<br/>
+      {{$t('Excel文件拖动到或点击按钮上传')}}
+      <el-button style="margin-left:16px;" type="primary" @click="handleUpload">{{$t('浏览')}}</el-button>
+    </div>
+    <el-dialog title="sheet选择" :visible.sync="sheetVisible" width='55%' top="15vh">
+      <div style="margin: 10px">{{$t('发现excel中存在多个sheet,请选择一个')}}</div>
+      <el-radio-group v-model="selSheet">
+        <el-radio v-for="(name,index) in allSheet" :label="name" :key="index">{{name}}</el-radio>
+      </el-radio-group>
+      <el-button style="margin-left:16px;" type="primary" @click="sheetSure">{{$t('确定')}}</el-button>
+    </el-dialog>
+  </el-dialog>
+</template>
+
+<script>
+import * as XLSX from 'xlsx'
+
+export default {
+  data() {
+    return {
+      loading: false,
+      excelData: {
+        header: null,
+        results: null
+      },
+      visible: false,
+      allSheet: [],
+      selSheet: '',
+      workbook: null,
+      sheetVisible: false
+    }
+  },
+  methods: {
+    show() {
+      this.visible = true
+    },
+    generateDate({ header, results }) {
+      this.excelData.header = header
+      this.excelData.results = results
+      this.$emit('on-selected-file', this.excelData)
+    },
+    handleDrop(e) {
+      e.stopPropagation()
+      e.preventDefault()
+      const files = e.dataTransfer.files
+      if (files.length !== 1) {
+        this.$message.error(this.$t('只支持单文件!'))
+        return
+      }
+      const itemFile = files[0] // only use files[0]
+      this.readerData(itemFile)
+      e.stopPropagation()
+      e.preventDefault()
+    },
+    handleDragover(e) {
+      e.stopPropagation()
+      e.preventDefault()
+      e.dataTransfer.dropEffect = 'copy'
+    },
+    handleUpload() {
+      document.getElementById('excel-upload-input').click()
+    },
+    handkeFileChange(e) {
+      const files = e.target.files
+      const itemFile = files[0] // only use files[0]
+      if (!itemFile) return
+      this.readerData(itemFile)
+      this.$refs['excel-upload-input'].value = null // fix can't select the same excel
+    },
+    readerData(itemFile) {
+      const reader = new FileReader()
+      reader.onload = e => {
+        const data = e.target.result
+        const fixedData = this.fixdata(data)
+        this.workbook = XLSX.read(btoa(fixedData), { type: 'base64' })
+        this.allSheet = this.workbook.SheetNames
+        this.selSheet = this.workbook.SheetNames[0]
+        if (this.allSheet.length == 1) {
+          this.sheetSure()
+        } else {
+          this.sheetVisible = true
+        }
+      }
+      reader.readAsArrayBuffer(itemFile)
+    },
+    sheetSure() {
+      // this.sheetVisible = false
+      const worksheet = this.workbook.Sheets[this.selSheet]
+      const header = this.get_header_row(worksheet)
+      const results = XLSX.utils.sheet_to_json(worksheet)
+      this.generateDate({ header, results })
+    },
+    fixdata(data) {
+      let o = ''
+      let l = 0
+      const w = 10240
+      for (; l < data.byteLength / w; ++l) o += String.fromCharCode.apply(null, new Uint8Array(data.slice(l * w, l * w + w)))
+      o += String.fromCharCode.apply(null, new Uint8Array(data.slice(l * w)))
+      return o
+    },
+    get_header_row(sheet) {
+      const headers = []
+      const range = XLSX.utils.decode_range(sheet['!ref'])
+      let C
+      const R = range.s.r
+      /* start in the first row */
+      for (C = range.s.c; C <= range.e.c; ++C) { /* walk every column in the range */
+        var cell = sheet[XLSX.utils.encode_cell({ c: C, r: R })]
+        /* find the cell in the first row */
+        var hdr = 'UNKNOWN ' + C // <-- replace with your desired default
+        if (cell && cell.t) hdr = XLSX.utils.format_cell(cell)
+        headers.push(hdr)
+      }
+      return headers
+    }
+  }
+}
+</script>
+
+<style scoped>
+  #excel-upload-input {
+    display: none;
+    z-index: -9999;
+  }
+
+  .excelSel {
+    border: 2px dashed #bbb;
+    width: 600px;
+    height: 160px;
+    line-height: 80px;
+    margin: 0 auto;
+    font-size: 24px;
+    border-radius: 5px;
+    text-align: center;
+    color: #bbb;
+    position: relative;
+  }
+</style>

package/src/hdcom/index.js

@@ -0,0 +1,80 @@
+import HdDrop from './HdDrop'
+import HdGrid from './HdGrid'
+import HdBtn from './HdBtn'
+import HdButton from './HdButton'
+import HdNum from './HdNum'
+import HdDatePicker from './HdDatePicker'
+import HdTreeTable from './HdTreeTable/index.vue'
+import HdDialog from './HdDialog'
+import HdAside from './HdAside.vue'
+import HdFooter from './HdFooter'
+import HdHeader from './HdHeader'
+import HdMain from './HdMain'
+import HdTree from './HdTree'
+import HdPopSel from './HdPopSel'
+import '../utils/utils.js'
+import HdHotkey from './HdHotkey' // 实际为shortkey组件
+import HdComGrid from './HdComGrid'
+import HdForm from './HdForm'
+import HdFormBtn from './HdFormBtn'
+import HdFormItem from './HdFormItem.vue'
+import HdTableColumn from './HdTableColumn.vue'
+import ErrHint from './ErrHint.vue'
+import HdMessage from './HdMessage.vue'
+import HdFileUpload from './HdFileUpload.vue'
+import HdGridSel from './HdGridSel.vue'
+import HdGridEditBtn from './HdGridEditBtn'
+import HdTempSave from './HdTempSave'
+import HdComFaceRec from './HdComFaceRec.vue'
+import HdInputHint from './HdInputHint'
+
+
+
+export default {
+  install(Vue) {
+    Vue.use(require('vue-shortkey'))
+    Vue._window = window
+    Vue.component('HdDrop', HdDrop)
+    Vue.component('HdGrid', HdGrid)
+    Vue.component('HdBtn', HdBtn)
+    Vue.component('HdNum', HdNum)
+    Vue.component('elTreeTable', HdTreeTable)
+    Vue.component('elButton', HdButton) // 替换element ui
+    Vue.component('elDialog', HdDialog)
+    Vue.component('elAside', HdAside)
+    Vue.component('elFooter', HdFooter)
+    Vue.component('elHeader', HdHeader)
+    Vue.component('elMain', HdMain)
+    Vue.component('HdTreeTable', HdTreeTable)
+    Vue.component('HdButton', HdButton) // 替换element ui
+    Vue.component('HdDialog', HdDialog)
+    Vue.component('HdAside', HdAside)
+    Vue.component('HdFooter', HdFooter)
+    Vue.component('HdHeader', HdHeader)
+    Vue.component('HdMain', HdMain)
+    Vue.component('HdInputHint', HdInputHint)
+
+
+    // Vue.component('el-popover', HdPopover)
+    Vue.component('elFormItem', HdFormItem)
+    Vue.component('HdFormItem', HdFormItem)
+    Vue.component('HdTree', HdTree)
+    Vue.component('HdDatePicker', HdDatePicker)
+    Vue.component('HdHotKey', HdHotkey)
+    Vue.component('HdComGrid', HdComGrid)
+    Vue.component('HdForm', HdForm)
+    Vue.component('HdFormBtn', HdFormBtn)
+    Vue.component('HdPopSel', HdPopSel)
+    Vue.component('elTableColumn', HdTableColumn)
+    Vue.component('HdTableColumn', HdTableColumn)
+    Vue.component('ErrHint', ErrHint)
+    Vue.component('HdMessage', HdMessage)
+    Vue.component('HdFileUpload', HdFileUpload)
+    Vue.component('HdGridSel', HdGridSel)
+    Vue.component('HdGridEditBtn', HdGridEditBtn)
+    Vue.component('HdTempSave', HdTempSave)
+    Vue.component('HdComFaceRec', HdComFaceRec)
+
+  }
+}
+

package/src/idev.common.js

@@ -0,0 +1,72 @@
+import hdcom from './hdcom'
+import comutils from './utils/comutils'
+
+export default {
+
+  install(Vue, options, inElement) {
+
+    try {
+      let ver = require('../package.json').version
+      console.info('您现在使用的是hd-idevvue2:' + ver)
+    } catch (e) {
+    }
+
+    //滚动去掉高亮事件，提升虚拟滚动条性能
+    inElement.Table.components.TableBody.methods.handleMouseEnter = function handleMouseEnter(index) {//去掉eltable的hover事件
+      if(this.store.states.hoverRow != 'locked') {
+        this.store.commit('setHoverRow', index);
+      }
+    },
+    inElement.Table.components.TableBody.methods.handleMouseLeave = function handleMouseLeave(index) {//去掉eltable的hover事件
+      if(this.store.states.hoverRow != 'locked') {
+        this.store.commit('setHoverRow', null);
+      }
+    },
+    inElement.Table.components.TableBody.methods.getColspanRealWidth = function getColspanRealWidth(columns, colspan, index) {
+      if (colspan < 1) {
+          return columns[index].realWidth;
+       }
+       const widthArr = columns.map(({ realWidth }) => realWidth).slice(index, index + colspan);
+      return widthArr.reduce((acc, width) => acc + width, 0);
+    },
+
+    inElement.Input.props.clearable = {// clearable默认生效
+      type: Boolean,
+      default: true
+    }
+    inElement.Input.props.value = {// 不写会出现undefined
+      type: [String, Number],
+      default: ''
+    }
+    //element ui自身组件进行了扩展,如果使用纯原生的可以使用Ex***,或者自己import
+    Vue.component('ExFooter', inElement.Footer)
+    Vue.component('ExMain', inElement.Main)
+    Vue.component('ExAside', inElement.Aside)
+    Vue.component('ExHeader', inElement.Header)
+    Vue.component('ExDialog', inElement.Dialog) //这里引入,然后HdDialog调用,保证了一个vue对象,zIndex才能正常
+    Vue.component('ExFormItem', inElement.FormItem)
+    Vue.component('ExFormItem', inElement.FormItem)
+    Vue.component('ExButton', inElement.Button)
+    Vue.component('ExTableColumn', inElement.TableColumn)
+    Vue.component('ExDatePicker', inElement.DatePicker)
+    Vue.use(inElement, options)
+    Vue.use(comutils)
+    Vue.use(hdcom)
+    Vue.prototype.$message = function (options) { // 消息默认值
+      if (!options.duration) {
+        if(options.type=="error") {
+          options.duration = 3000
+        } else {
+          options.duration = 5000
+        }
+      }
+      if (!options.showClose) {
+        options.showClose = true
+      }
+      inElement.Message(options)
+    }
+    Vue.prototype.$message.closeAll = inElement.Message.closeAll
+    Vue.prototype.$message.close = inElement.Message.close
+  }
+}
+

package/src/index.js

@@ -0,0 +1,14 @@
+
+import common from './idev.common'
+import privilege from './views/privilege'
+import layout from './views/layout'
+
+export default {
+
+  install(Vue, options, inElement) {
+    common.install(Vue, options, inElement)
+    Vue.use(privilege)
+    Vue.use(layout)
+  }
+}
+

package/src/utils/HdQuery.js

@@ -0,0 +1,54 @@
+export default (st, pageRows, queryMethod) => {//st页面this对象,pageRows,每页显示行数,queryMethod如果默认查询不是doQuery需要指定字符串
+  let _thisst = st
+  let query = {}
+  let page = 1
+  let rows = 20
+  if (pageRows) {
+    rows = pageRows
+  }
+  let q = ''
+  let sort = ''
+  let order = 'desc'
+  let selObj = []//checkbox勾选的对象
+  let doQueryMethod = queryMethod ? '_thisst.' + queryMethod + '()' : '_thisst.doQuery()'
+
+  let outObj = {
+
+    query, page, rows, q, sort, order, selObj, doQueryMethod,
+
+    add:
+      (key, value) => {//没啥用
+        query[key] = value
+      },
+    setThis(st) {
+      _thisst = st
+    },
+    doSizeChg(val) {//显示行数切换
+      outObj.rows = val
+      return eval(doQueryMethod)
+
+      //st.doQuery()
+    },
+    doCurPageChange(val) {//页码切换
+      outObj.page = val
+
+      return eval(doQueryMethod)
+    },
+    doSort(val, noQuery) {
+      outObj.sort = val.prop
+      if (val.order == 'ascending') {
+        outObj.order = 'asc'
+      } else if (val.order == 'descending') {
+        outObj.order = 'desc'
+      } else {
+        outObj.sort = ''
+        outObj.order = ''
+      }
+      if (!noQuery) {//true 不查询,适合列表一加载时
+        return eval(doQueryMethod)
+      }
+    }
+  }
+  return outObj
+}
+

package/src/utils/comutils.js

@@ -0,0 +1,98 @@
+function genRules(isRequired, minLength, maxLength, type = 'string', decimalNum) { // decimalNum=0是整数
+  const result = []
+  if (isRequired) {
+    const msg = {message: this.$t('此处必填'), required: true}
+    result.push(msg)
+  }
+  if (type == 'string') {
+    if (minLength) {
+      result.push({min: minLength, message: this.$t('字符长度不能小于x个字符', [minLength])})
+    }
+    if (maxLength) {
+      result.push({max: maxLength, message: this.$t('字符长度不能大于x个字符', [maxLength])})
+    }
+  } else if (type == 'number') {
+    result.push({type: 'number', message: this.$t('必须为数字')})
+    if (minLength != null) {
+      result.push({type: 'number', min: minLength, message: this.$t('数字不能小于') + minLength})
+    }
+    if (maxLength) {
+      result.push({type: 'number', max: maxLength, message: this.$t('数字不能大于') + maxLength})
+    }
+    if (decimalNum) { // 非0时,有小数
+      const reg = new RegExp('^(\\-|\\+?)\\d+(\\.\\d{0,' + decimalNum + '})?$')
+      result.push({pattern: reg, message: this.$t('小数最多x位', [decimalNum])}
+      )
+    }
+    if (decimalNum === 0) {
+      const reg = new RegExp('(^-?\\d+$)')
+      result.push({pattern: reg, message: this.$t('请输入整数')}
+      )
+    }
+  }
+
+  return result
+}
+
+function ckFt(value) { // checkbox展示用
+  if (value == '1') {
+    return '√'
+  } else {
+    return '×'
+  }
+}
+
+
+function date() {
+  return
+}
+
+export default {
+
+  install(Vue) {
+    Vue.prototype.$r = genRules
+    Vue.prototype.$ckFt = ckFt
+    Vue.prototype.$date = {
+      type: 'date',
+      placeholder: '选择日期',
+      format: 'yyyy-MM-dd',
+      valueFormat: 'yyyy-MM-dd',
+      style: {width: '100%'}
+    }
+    Vue.prototype.$time = {
+      type: 'datetime',
+      placeholder: '选择时间',
+      format: 'yyyy-MM-dd HH:mm',
+      valueFormat: 'yyyy-MM-dd HH:mm',
+      style: {width: '100%'}
+    }
+    Vue.prototype.$simdate = {
+      type: 'date',
+      placeholder: '选择日期',
+      format: 'yy-MM-dd',
+      valueFormat: 'yyyy-MM-dd',
+      style: {width: '100%'}
+    }
+    Vue.prototype.$simtime = {
+      type: 'datetime',
+      placeholder: '选择时间',
+      format: 'yy-MM-dd HH:mm',
+      valueFormat: 'yyyy-MM-dd HH:mm',
+      style: {width: '100%'}
+    }
+    Vue.prototype.$simdateshow = (v) => {
+      if (v) {
+        return v.substring(2, 10)
+      } else {
+        return ''
+      }
+    }
+    Vue.prototype.$simtimeshow = (v) => {
+      if (v) {
+        return v.substring(2)
+      } else {
+        return ''
+      }
+    }
+  }
+}