three-trees-ui 1.0.0

package/packages/Subtable/src/SubExportDialog.vue

@@ -0,0 +1,115 @@
+<template>
+  <el-dropdown trigger="click" @command="handleCommand">
+    <span class="el-dropdown-link export_link">
+      <ht-icon name="export" />
+      子表导出
+    </span>
+    <el-dropdown-menu slot="dropdown">
+      <el-dropdown-item command="current">当前页数据</el-dropdown-item>
+      <el-dropdown-item command="all">所有数据</el-dropdown-item>
+    </el-dropdown-menu>
+  </el-dropdown>
+</template>
+<script>
+  import SubPagination from '@/services/SubPagination.js'
+  import { decode } from '@/util/base64.js'
+  const { saveAs } = require('file-saver')
+  import utils from '@/utils.js'
+
+  export default {
+    name: 'HtSubExportDialog',
+    props: {
+      dataSubname: {
+        type: String,
+        required: true,
+      },
+      dataColumns: {
+        type: String,
+        required: true,
+      },
+      subtablePagination: {
+        type: Boolean,
+        default: false,
+      },
+      dataSubdesc: {
+        type: String,
+        default: '子表数据',
+      },
+    },
+    computed: {
+      columns: function () {
+        return eval(decode(this.dataColumns))
+      },
+    },
+    created() {
+      if (!this.$XLSX) {
+        console.warn('要使用子表导入/导出功能需要安装XLSX插件')
+      }
+    },
+    methods: {
+      changeRowKey(rows) {
+        var exportData = []
+        rows.forEach((row) => {
+          var exportRow = {}
+          this.columns.forEach((col) => {
+            if (row[col.name] != undefined) {
+              exportRow[col.desc] = row[col.name]
+            }
+          })
+          exportData.push(exportRow)
+        })
+        return exportData
+      },
+      handleCommand(type) {
+        const pInst = utils.getOnlineFormInstance(this)
+        SubPagination.exportData(
+          this.dataSubname,
+          type,
+          pInst,
+          this.subtablePagination
+        )
+          .then((data) => {
+            let exportData = this.changeRowKey(data)
+            const sheet = this.$XLSX.utils.json_to_sheet(exportData),
+              blob = this.sheet2blob(sheet)
+
+            saveAs(blob, `${this.dataSubdesc}.xls`)
+          })
+          .catch((err) => {
+            this.$message.error(`数据导出失败：${err}`)
+          })
+      },
+      sheet2blob(sheet, sheetName) {
+        sheetName = sheetName || 'sheet1'
+        var workbook = {
+          SheetNames: [sheetName],
+          Sheets: {},
+        }
+        workbook.Sheets[sheetName] = sheet
+        // 生成excel的配置项
+        var wopts = {
+          bookType: 'xls', // 要生成的文件类型
+          bookSST: false, // 是否生成Shared String Table，官方解释是，如果开启生成速度会下降，但在低版本IOS设备上有更好的兼容性
+          type: 'binary',
+        }
+        var wbout = this.$XLSX.write(workbook, wopts)
+        var blob = new Blob([s2ab(wbout)], { type: 'application/octet-stream' })
+        // 字符串转ArrayBuffer
+        function s2ab(s) {
+          var buf = new ArrayBuffer(s.length)
+          var view = new Uint8Array(buf)
+          for (var i = 0; i != s.length; ++i) view[i] = s.charCodeAt(i) & 0xff
+          return buf
+        }
+        return blob
+      },
+    },
+  }
+</script>
+<style lang="scss" scoped>
+  .export_link {
+    font-weight: normal;
+    color: $base-color-blue;
+    cursor: pointer;
+  }
+</style>

package/packages/Subtable/src/SubImportDialog.vue

@@ -0,0 +1,340 @@
+<template>
+  <div class="import-container">
+    <el-button
+      type="text"
+      size="mini"
+      class="import-btn"
+      @click="dialogVisible = true"
+    >
+      <ht-icon name="import" />
+      子表导入
+    </el-button>
+    <el-button
+      type="text"
+      size="mini"
+      class="download-btn"
+      @click="exportFormSub"
+    >
+      <ht-icon name="download" />
+      下载模板
+    </el-button>
+    <el-dialog
+      :visible.sync="dialogVisible"
+      width="600px"
+      title="导入子表数据"
+      append-to-body
+      :close-on-click-modal="false"
+    >
+      <el-form
+        v-form="{ inputsDisplay: 'block' }"
+        label-width="100px"
+        label-position="left"
+      >
+        <el-form-item label="导入文件：">
+          <input
+            ref="selectFile"
+            type="file"
+            accept="application/vnd.ms-excel, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"
+            @change="fileChange"
+          />
+        </el-form-item>
+        <el-form-item label="导入模式：">
+          <ht-radio
+            v-model="mode"
+            :options="modeOptions"
+            :props="{ key: 'mode', value: 'desc' }"
+          ></ht-radio>
+        </el-form-item>
+        <el-tag
+          v-if="importRows && importRows.length > 0"
+          type="warning"
+          class="read-success__label"
+        >
+          已经读取到
+          <b>{{ importRows.length }}</b>
+          条数据，
+          <a @click="showRowData = !showRowData">点击查看详情</a>
+          。
+        </el-tag>
+        <pre v-if="showRowData" class="import-rows__pre">{{ importRows }}</pre>
+      </el-form>
+      <span slot="footer" class="dialog-footer">
+        <el-button
+          size="small"
+          type="primary"
+          :disabled="!importRows || importRows.length == 0"
+          @click="dialogConfirm"
+        >
+          确定
+        </el-button>
+        <el-button size="small" @click="dialogVisible = false">取消</el-button>
+      </span>
+    </el-dialog>
+  </div>
+</template>
+<script>
+  import SubPagination from '@/services/SubPagination.js'
+  import utils from '@/utils.js'
+  import { decode } from '@/util/base64.js'
+  const { saveAs } = require('file-saver')
+
+  export default {
+    name: 'HtSubImportDialog',
+    props: {
+      rows: Array,
+      subDesc: {
+        type: String,
+        default: '子表模板',
+      },
+      dataSubname: {
+        type: String,
+        required: true,
+      },
+      maxRow: {
+        type: String,
+        default: null,
+      },
+      mergeExpression: {
+        type: String,
+        default: null,
+      },
+      dataColumns: {
+        type: String,
+        required: true,
+      },
+    },
+    data() {
+      return {
+        dialogVisible: false,
+        importRows: null,
+        showRowData: false,
+        mergeFunc: null,
+        mode: 'append',
+        modeOptions: [
+          { mode: 'append', desc: '追加导入' },
+          { mode: 'override', desc: '覆盖导入' },
+          { mode: 'merge', desc: '合并导入', disabled: true },
+        ],
+      }
+    },
+    computed: {
+      columns: function() {
+        return eval(decode(this.dataColumns))
+      },
+    },
+    watch: {
+      dialogVisible: {
+        handler: function(newVal) {
+          // 清空附件
+          if (!newVal && this.$refs.selectFile) {
+            this.$refs.selectFile.value = ''
+            this.importRows = null
+            this.showRowData = false
+          }
+        },
+        immediate: true,
+      },
+      mergeExpression: {
+        handler: function(newVal) {
+          if (newVal) {
+            // 如果有导入合并的代码，则允许选择合并导入模式
+            this.$set(this.modeOptions[2], 'disabled', false)
+            // 并设置默认为 合并导入
+            this.mode = 'merge'
+            // 解码合并的代码
+            const funcExp = decode(newVal)
+            this.mergeFunc = eval(`(${funcExp})`)
+          }
+        },
+        immediate: true,
+      },
+    },
+    created() {
+      if (!this.$XLSX) {
+        console.warn('要使用子表导入/导出功能需要安装XLSX插件')
+      }
+    },
+    mounted() {
+      // 初始化导入时需要的参数
+      const pInst = utils.getOnlineFormInstance(this)
+      if (!SubPagination._map.has(this.dataSubname)) {
+        SubPagination.set(this.dataSubname, {
+          rows: this.rows || [],
+        })
+      }
+      const instKey = SubPagination._vueComponentKey(this.dataSubname)
+      if (!SubPagination._map.has(instKey) && pInst) {
+        // 将子表数据所属的VueComponent对象实例存储（用于数据导入）
+        SubPagination._map.set(instKey, pInst)
+      }
+    },
+    destroyed() {
+      SubPagination.clear(this.dataSubname)
+    },
+    methods: {
+      //子表模板导出
+      exportFormSub() {
+        let columns = this.columns.filter((item) => {
+          return !(
+            item.ctrlType &&
+            (item.ctrlType === 'sunDiv' || item.ctrlType === 'suntable')
+          )
+        })
+        this.$requestConfig
+          .downloadSubtableTemplate(this.subDesc, columns)
+          .then(({ data }) => {
+            // 附件下载
+            const blob = new Blob([data])
+            saveAs(blob, `${this.subDesc}.xls`)
+          })
+          .catch((err) => {
+            this.$message.error(`模板下载失败：${err}`)
+          })
+      },
+      getNameByDesc(desc) {
+        var name = ''
+        this.columns.forEach((col) => {
+          if (col.desc == desc) {
+            name = col.name
+          }
+        })
+        return name
+      },
+      changeRowKey(rows) {
+        var importRows = []
+        rows.forEach((row) => {
+          var importRow = {}
+          for (let key in row) {
+            importRow[this.getNameByDesc(key)] = row[key]
+          }
+          importRows.push(importRow)
+        })
+        return importRows
+      },
+      dialogConfirm() {
+        if (this.importRows.length == 0) {
+          this.$message.error('请选择要导入的文件')
+          return
+        }
+        if (this.maxRow) {
+          let maxRowInt = parseInt(this.maxRow)
+          if (this.mode == 'override') {
+            //覆盖导入
+            let count = this.importRows.length
+            if (count > maxRowInt && maxRowInt != 0) {
+              this.$message.error('子表数据已超过最大行数【' + maxRowInt + '】')
+              return
+            }
+          } else if (this.mode == 'append') {
+            const formInstance = utils.getOnlineFormInstance(
+              this.$parent.$parent
+            )
+            if (!formInstance || !formInstance.data) {
+              this.$message.error('未获取到表单数据，无法完成导入。')
+            }
+            //追加导入/合并导入
+            let boData = formInstance.data
+            let pathArr = this.dataSubname.split('.')
+            let subInitData = boData[pathArr[1]][pathArr[2]] || [] //子表数据
+            let num = this.importRows.length + subInitData.length
+            if (num > maxRowInt && maxRowInt != 0) {
+              this.$message.error('子表数据已超过最大行数【' + maxRowInt + '】')
+              return
+            }
+          } else if (this.mode == 'merge') {
+            const formInstance = utils.getOnlineFormInstance(
+              this.$parent.$parent
+            )
+            if (!formInstance || !formInstance.data) {
+              this.$message.error('未获取到表单数据，无法完成导入。')
+            }
+          }
+        }
+        SubPagination.importData(
+          this.dataSubname,
+          this.importRows,
+          this.mode,
+          this.mergeFunc
+        )
+          .then(() => {
+            this.$message.success('导入成功！')
+            this.dialogVisible = false
+          })
+          .catch((err) => {
+            this.$message.error(`数据导入失败：${err}`)
+          })
+      },
+      fileChange(m) {
+        if (!m || !m.target || !m.target.files || m.target.files.length != 1) {
+          return
+        }
+        this.importRows = []
+        this.readWorkbookFromLocalFile(m.target.files[0], (rows) => {
+          this.importRows = this.changeRowKey(rows)
+        })
+      },
+      // 读取本地excel文件
+      readWorkbookFromLocalFile(file, callback) {
+        const reader = new FileReader()
+        reader.onload = (e) => {
+          const data = e.target.result
+          let workbook = null
+          try {
+            // 读取Excel内容
+            workbook = this.$XLSX.read(data, { type: 'binary' })
+          } catch (err) {
+            this.$message.error('所选文件不是有效的Excel文件.')
+            return
+          }
+          const sheetNames = workbook.SheetNames,
+            // 只读取第一个sheet的数据
+            worksheet = workbook.Sheets[sheetNames[0]]
+
+          if (worksheet['!merges'] && worksheet['!merges'].length > 0) {
+            const merge = worksheet['!merges'][0],
+              rowNum = Number(merge['e']['r'])
+            // 合并单元格时会导致转换出来的JSON数据格式错乱
+            this.$message.error(
+              `Excel中不能有合并的单元格，请检查第${rowNum + 1}行数据。`
+            )
+            return
+          }
+          // 放在数字精度问题 以字符串形式读取
+          const json = this.$XLSX.utils.sheet_to_json(worksheet, { raw: false })
+          if (!json || json.constructor != Array) {
+            this.$message.error('读取的数据格式错误。')
+            return
+          }
+          if (callback) callback(json)
+        }
+        reader.readAsBinaryString(file)
+      },
+    },
+  }
+</script>
+<style lang="scss" scoped>
+  .import-container {
+    margin: 0 10px;
+    .import-btn,
+    .download-btn {
+      font-size: 14px;
+      padding-right: 14px;
+    }
+  }
+  .read-success__label {
+    display: block;
+    font-size: 13px;
+  }
+  .read-success__label a {
+    color: $base-color-blue;
+    cursor: pointer;
+  }
+  .read-success__label b {
+    color: red;
+  }
+  .import-rows__pre {
+    margin-top: 20px;
+    max-height: 270px;
+    overflow-y: scroll;
+  }
+</style>

package/packages/Subtable/src/SubPagination.vue

@@ -0,0 +1,128 @@
+<template>
+  <el-pagination
+    :current-page="currentPage"
+    :page-sizes="pageSizes"
+    :page-size="pageSize"
+    :layout="layout"
+    :hide-on-single-page="hideOnSinglePage"
+    :total="total"
+    @size-change="handleSizeChange"
+    @current-change="handleCurrentChange"
+  ></el-pagination>
+</template>
+<script>
+  import SubPagination from '@/services/SubPagination.js'
+
+  export default {
+    name: 'HtSubPagination',
+    props: {
+      currentPage: {
+        type: Number,
+        default: 1,
+      },
+      layout: {
+        type: String,
+        default: 'total, sizes, prev, pager, next, jumper',
+      },
+      pageSizes: {
+        type: Array,
+        default: function() {
+          return [15, 50, 100, 200, 300]
+        },
+      },
+      pageSize: {
+        type: Number,
+        default: 15,
+      },
+      hideOnSinglePage: {
+        type: Boolean,
+        default: false,
+      },
+      rows: {
+        type: Array,
+        default: function() {
+          return []
+        },
+      },
+      dataSubname: {
+        type: String,
+        required: true,
+      },
+    },
+    data() {
+      return {
+        myCurrentPage: 1,
+        myPageSize: 100,
+        total: 0,
+      }
+    },
+    watch: {
+      currentPage: {
+        handler: function(newVal) {
+          this.myCurrentPage = newVal
+        },
+        immediate: true,
+      },
+      pageSize: {
+        handler: function(newVal) {
+          this.myPageSize = newVal
+        },
+        immediate: true,
+      },
+      rows: {
+        handler: function(newVal) {
+          if (!newVal || newVal.constructor != Array) {
+            throw 'EipSubPagination组件的rows属性只能传入数组'
+          }
+          if (newVal.length > 0) {
+            var obj = SubPagination._map.get(this.dataSubname)
+            if (obj && obj.rows.length == 0) this.paginationChange()
+          }
+          // 子表数据变化时更新分页总数
+          this.total = newVal.length
+          if (this.total == 0) {
+            // 清空子表数据时将子表页码重置为第一页
+            this.handleCurrentChange(1)
+          } else if (this.total > 0) {
+            const pageOffset = SubPagination.getPageOffset(
+              this.dataSubname,
+              this
+            )
+            const currentPage = Math.ceil(
+              (pageOffset + this.pageSize) / this.pageSize
+            )
+            if (this.total === pageOffset && pageOffset !== 0) {
+              this.handleCurrentChange(currentPage - 1)
+            }
+          }
+        },
+        immediate: true,
+        deep: true,
+      },
+    },
+    mounted() {
+      this.paginationChange()
+    },
+    destroyed() {
+      SubPagination.clear(this.dataSubname)
+    },
+    methods: {
+      paginationChange() {
+        // 分页变化时，以dataPath为key设置到公共的js对象中
+        SubPagination.set(this.dataSubname, {
+          rows: this.rows || [],
+          currentPage: this.myCurrentPage,
+          pageSize: this.myPageSize,
+        })
+      },
+      handleCurrentChange(val) {
+        this.myCurrentPage = val
+        this.paginationChange()
+      },
+      handleSizeChange(val) {
+        this.myPageSize = val
+        this.paginationChange()
+      },
+    },
+  }
+</script>