hd-idevvue3 3.0.0 → 3.0.1

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 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/PdfShow.vue

@@ -0,0 +1,266 @@
+<template>
+  <el-dialog :fullscreen="true" :title="gening?'正在生成pdf':'PDF预览'" :visible.sync="visible" @close="$emit('close')"
+             class="pdfshow">
+    <el-row>
+      <el-col :span="4">
+        <el-switch @change="initPdf()" :active-text="$t('横向显示')" :inactive-text="$t('竖向显示')" v-model="isLandscape">
+        </el-switch>
+      </el-col>
+      <el-col :span="4">
+        {{$t('字号')}}
+        <el-input :clearable="false" :placeholder="$t('请输入字号')" size="mini" style="width:100px"
+                  v-model.number="fontSize"></el-input>
+      </el-col>
+      <el-col :span="6">
+        <el-pagination :current-page.sync="currentPage" :page-size.sync="pageSize" :page-sizes="[100, 200, 400]"
+                       :total="totalSize" @current-change="initPdf()" @size-change="initPdf()"
+                       layout="sizes, prev, pager, next">
+        </el-pagination>
+      </el-col>
+      <el-col :span="4">
+        <el-button @click="refreshGridData()">{{$t('刷新')}}</el-button>
+      </el-col>
+    </el-row>
+    <el-row>
+      <el-checkbox-group v-model="pdfExport" v-if="columnStyles.length>0">
+        <el-checkbox v-for="(item, index) in resultData[0]" :label="index" :key="index">{{item}}
+          <el-input :clearable="false" :placeholder="$t('最小宽')" size="mini" style="width:50px"
+                    v-model="columnStyles[index].cellWidth"></el-input>
+        </el-checkbox>
+      </el-checkbox-group>
+    </el-row>
+    <object id="output" style="width: 100%;height: calc(100% - 40px)" type="application/pdf">
+      <p>It appears you don't have PDF support in this web browser</p>
+    </object>
+  </el-dialog>
+</template>
+
+<script>
+import jsPDF from 'jspdf';
+import 'jspdf-autotable';
+
+window.jsPDF = jsPDF
+
+
+export default {
+  name: 'pdfshow',
+  components: {},
+  props: {
+    gening: {//pdf生成中
+      type: Boolean,
+      default: function () {
+        return true
+      }
+    },
+    defaultSort: {
+      type: Object,
+      default: function () { // updTimFirst是因为会触发HdQuery的排序及查询,默认不让查询
+        return { prop: 'updTim', order: 'descending' }
+      }
+    },
+    pageHide: Boolean,
+    ckHide: Boolean, // 是否显示checkbox默认显示
+    indexHide: Boolean, // 是否显示index 默认显示
+    recHide: Boolean, // 是否显示创建人 默认显示
+    rowClassName: Function,
+    //  : [Array],
+    excelPropHeader: Boolean// 导出excel是否包含属性头,默认false,导入excel如果需要模板,可以开启,并且会导出所有属性
+  },
+  data() {
+    return {
+      visible: true, //因为外层是v-if
+      totalSize: 0,//数据总数
+      isLandscape: false,//默认竖向
+      pdfExport: [],// 导出pdf时不处理的字段
+      currentPage: 1,
+      pageSize: 400,
+      resultData: [], //所有数据
+      columnStyles: [],
+      gridData: [], //展示数据
+      gridStyles: [],
+      title: '',
+      fontSize: 10,
+    }
+  },
+  mounted() {
+
+  },
+  methods: {
+    handleSizeChange() {
+      this.initPdf()
+    },
+    handleCurrentChange() {
+      this.initPdf()
+    },
+    /**
+     * 过滤不显示字段
+     */
+    initShowData() {
+      this.gridData = this.resultData.map(v1 => {
+        return v1.filter((v2, i2) =>
+          this.pdfExport.indexOf(i2) > -1
+        )
+      });
+      let flag = 0;
+      this.gridStyles = this.resultData[0].reduce((total, v, i) => {
+        if (this.pdfExport.indexOf(i) > -1) {
+          let cellWidth = parseInt(this.columnStyles[i].cellWidth);
+          // console.log('xxx'.cellWidth, this.columnStyles[i].cellWidth)
+          total[flag++] = { cellWidth: isNaN(cellWidth) ? 'auto' : cellWidth }
+        }
+        return total
+      }, {});
+
+    },
+    refreshGridData() {
+      // console.log('refreshGridData', this.pdfExport)
+      let obj = { isLandscape: this.isLandscape, fontSize: this.fontSize, cols: this.pdfExport, columnStyles: this.columnStyles }
+      localStorage.setItem("HdPdfSel" + this.$parent.gridId, JSON.stringify(obj));
+      this.initShowData();
+      this.initPdf();
+    },
+    addScript() {//字体库太大,使用pdf时才会加载字体
+      this.$message({
+        type: 'success',
+        showClose: true,
+        duration: 99999,
+        message: this.$t('正在初始化pdf脚本,请等待...')
+      })
+      var head = document.getElementsByTagName('head')[0];
+      var script = document.createElement('script');
+      const that = this;
+      script.onload = script.onreadystatechange = () => {
+        console.log('readyState', that.readyState)
+        if (!that.readyState || that.readyState === "loaded" || that.readyState === "complete") {
+          that.$message.closeAll()
+          that.initPdf()//脚本渲染好后,再显示
+          script.onload = script.onreadystatechange = null;
+        }
+      };
+      script.type = 'text/javascript';
+      script.src = 'static/js/simsun.js';
+      head.appendChild(script);
+    },
+    genPdf(header, merdata, title) {
+      // console.log('parent', this.$parent)
+      // console.log('grid', this.$parent.gridId)
+      this.totalSize = merdata.length - 1
+      this.resultData.push(["#", ...merdata[0]]);
+      for (let i = 1; i < merdata.length; i++) {
+        this.resultData.push([i, ...merdata[i]]);
+      }
+
+      // console.log('localStorage', localStorage.getItem('HdPdfSel' + this.$parent.gridId));
+      // let obj = {isLandscape: this.isLandscape, fontSize: this.fontSize, cols: this.pdfExport}
+      // localStorage.setItem("HdPdfSel" + this.$parent.gridId, JSON.stringify(obj));
+      let storeStr = localStorage.getItem('HdPdfSel' + this.$parent.gridId)
+      if (storeStr) {
+        let storeObj = JSON.parse(storeStr)
+        this.pdfExport = storeObj.cols;
+        this.fontSize = storeObj.fontSize
+        this.isLandscape = storeObj.isLandscape
+        if (!storeObj.columnStyles || storeObj.columnStyles.length < 1) {
+          this.columnStyles = this.resultData[0].map(v => {
+            return { cellWidth: 'auto' };
+          });
+        } else {
+          this.columnStyles = storeObj.columnStyles
+        }
+
+        //默认全选
+        if (!this.pdfExport || !Array.isArray(this.pdfExport) || this.pdfExport.length < 1) {
+          this.pdfExport = [];
+          for (let i = 0; i <= this.totalSize; i++) {
+            this.pdfExport.push(i);
+          }
+        }
+      }
+      this.initShowData();
+      this.title = title;
+      this.addScript()
+    },
+    initPdf() {
+      let startDataNum = (this.currentPage - 1) * this.pageSize + 1 //merdata第一位是header 要+1
+      let endDataNum = (this.currentPage) * this.pageSize + 1
+      let nowData = this.gridData.slice(startDataNum, endDataNum)
+      this.$nextTick(() => {
+        this.showPdf([this.gridData[0]], nowData, this.title)
+      })
+    },
+    showPdf(header, merdata, title) {
+      var head = header
+      var body = merdata
+      var doc = null
+      if (this.isLandscape) {
+        var doc = new jsPDF('l', 'pt');
+        doc.setFont('simsun');
+        // doc.setFontStyle('normal');
+        doc.text(title, 450, 30, { align: 'center' });
+      } else {
+        var doc = new jsPDF('h', 'pt');
+        doc.setFont('simsun');
+        // doc.setFontStyle('normal');
+        doc.text(title, 300, 30, { align: 'center' });
+      }
+      // doc.
+      doc.autoTable({
+        head: head,
+        body: body,
+        margin: { right: 12, left: 12 },
+        styles: {
+          font: "simsun",
+          fontStyle: 'normal',
+          lineColor: '#000',
+          lineWidth: 1,
+          fontSize: this.fontSize,
+          cellPadding: 0.5,
+          halign: 'center',
+          overflow: "linebreak",
+          cellWidth: '10',
+          minCellWidth: '2',
+        },
+        headStyles: { font: "simsun", fontStyle: 'normal' }, // Red
+        columnStyles: this.gridStyles,
+        // columnStyles: {//列的样式
+        //   columnWidth: 20,
+        // },
+        // didParseCell: (HookData) => {//num居右
+        //   console.log('HookData', HookData, HookData.cell.text, HookData.cell, HookData.cell.text[0].length);
+        //   HookData.column.width = this.gridStyles[HookData.column.index].cellWidth
+        //   HookData.cell.width = this.gridStyles[HookData.column.index].cellWidth
+        //   HookData.cell.styles.cellWidth = this.gridStyles[HookData.column.index].cellWidth + 'px'
+        //   // if (!isNaN(HookData.cell.text)) {
+        //   //   HookData.cell.styles.halign = 'right'
+        //   // }
+        // }
+      });
+
+      document.getElementById("output").data = doc.output('datauristring');
+    }
+  },
+  watch: {
+    fontSize(newVal) {
+      if (!newVal) {
+        this.fontSize = 10
+      } else if (newVal > 50) {
+        this.fontSize = 50
+      } else if (newVal < 2) {
+        this.fontSize = 1
+      }
+    }
+  }
+}
+</script>
+<style rel="stylesheet/scss" lang="scss" scoped>
+.pdfshow {
+  /deep/ .el-dialog {
+    // overflow: hidden;
+  }
+
+  /deep/ .el-dialog__body {
+    //deep内的不会加随机数
+    width: 100%;
+    height: calc(100% - 55px);
+  }
+}
+</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)
+
+  }
+}
+