hd-idevvue3 3.0.2 → 3.0.4

package/src/hdcom/HdTreeTable/index.vue

@@ -1,174 +1,229 @@
-<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>
+<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)"
+        >
+          <el-icon><el-icon-plus /></el-icon>
+          <el-icon><el-icon-minus /></el-icon>
+        </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)"
+        >
+          <el-icon><el-icon-plus /></el-icon>
+          <el-icon><el-icon-minus /></el-icon>
+        </span>
+        {{ scope.row[column.value] }}
+      </template>
+    </el-table-column>
+    <slot></slot>
+  </el-table>
+</template>
+
+<script>
+import { Plus as ElIconPlus, Minus as ElIconMinus } from '@element-plus/icons'
+/**
+   Auth: Lei.j1ang
+   Created: 2018/1/19-13:59
+   */
+import treeToArray from './eval'
+export default {
+  components: {
+    ElIconPlus,
+    ElIconMinus,
+  },
+  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

@@ -1,18 +1,48 @@
 <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>
+  <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-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
+          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-button style="margin-left: 16px" type="primary" @click="sheetSure">{{
+        $t('确定')
+      }}</el-button>
     </el-dialog>
   </el-dialog>
 </template>
@@ -26,13 +56,13 @@ export default {
       loading: false,
       excelData: {
         header: null,
-        results: null
+        results: null,
       },
       visible: false,
       allSheet: [],
       selSheet: '',
       workbook: null,
-      sheetVisible: false
+      sheetVisible: false,
     }
   },
   methods: {
@@ -74,7 +104,7 @@ export default {
     },
     readerData(itemFile) {
       const reader = new FileReader()
-      reader.onload = e => {
+      reader.onload = (e) => {
         const data = e.target.result
         const fixedData = this.fixdata(data)
         this.workbook = XLSX.read(btoa(fixedData), { type: 'base64' })
@@ -99,7 +129,11 @@ export default {
       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)))
+      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
     },
@@ -109,7 +143,8 @@ export default {
       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 */
+      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
@@ -117,27 +152,27 @@ export default {
         headers.push(hdr)
       }
       return headers
-    }
-  }
+    },
+  },
 }
 </script>
 
 <style scoped>
-  #excel-upload-input {
-    display: none;
-    z-index: -9999;
-  }
+#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;
-  }
+.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

@@ -28,53 +28,48 @@ import HdTempSave from './HdTempSave'
 import HdComFaceRec from './HdComFaceRec.vue'
 import HdInputHint from './HdInputHint'
 
-
-
 export default {
   install(Vue) {
-    Vue.use(require('vue-shortkey'))
+    window.$vueApp.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)
-
+    window.$vueApp.component('HdDrop', HdDrop)
+    window.$vueApp.component('HdGrid', HdGrid)
+    window.$vueApp.component('HdBtn', HdBtn)
+    window.$vueApp.component('HdNum', HdNum)
+    window.$vueApp.component('elTreeTable', HdTreeTable)
+    window.$vueApp.component('elButton', HdButton) // 替换element ui
+    window.$vueApp.component('elDialog', HdDialog)
+    window.$vueApp.component('elAside', HdAside)
+    window.$vueApp.component('elFooter', HdFooter)
+    window.$vueApp.component('elHeader', HdHeader)
+    window.$vueApp.component('elMain', HdMain)
+    window.$vueApp.component('HdTreeTable', HdTreeTable)
+    window.$vueApp.component('HdButton', HdButton) // 替换element ui
+    window.$vueApp.component('HdDialog', HdDialog)
+    window.$vueApp.component('HdAside', HdAside)
+    window.$vueApp.component('HdFooter', HdFooter)
+    window.$vueApp.component('HdHeader', HdHeader)
+    window.$vueApp.component('HdMain', HdMain)
+    window.$vueApp.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)
-
-  }
+    window.$vueApp.component('elFormItem', HdFormItem)
+    window.$vueApp.component('HdFormItem', HdFormItem)
+    window.$vueApp.component('HdTree', HdTree)
+    window.$vueApp.component('HdDatePicker', HdDatePicker)
+    window.$vueApp.component('HdHotKey', HdHotkey)
+    window.$vueApp.component('HdComGrid', HdComGrid)
+    window.$vueApp.component('HdForm', HdForm)
+    window.$vueApp.component('HdFormBtn', HdFormBtn)
+    window.$vueApp.component('HdPopSel', HdPopSel)
+    window.$vueApp.component('elTableColumn', HdTableColumn)
+    window.$vueApp.component('HdTableColumn', HdTableColumn)
+    window.$vueApp.component('ErrHint', ErrHint)
+    window.$vueApp.component('HdMessage', HdMessage)
+    window.$vueApp.component('HdFileUpload', HdFileUpload)
+    window.$vueApp.component('HdGridSel', HdGridSel)
+    window.$vueApp.component('HdGridEditBtn', HdGridEditBtn)
+    window.$vueApp.component('HdTempSave', HdTempSave)
+    window.$vueApp.component('HdComFaceRec', HdComFaceRec)
+  },
 }
-