ui库和web端产品库合并版本(还需修复细节)

2022-11-29 18:27:14 +08:00
parent 5e4bd93238
commit 8bf6c57668
151 changed files with 28267 additions and 49 deletions
--- a/ui/packages/basic/AiBigTable.vue
+++ b/ui/packages/basic/AiBigTable.vue
@@ -0,0 +1,151 @@
+<template>
+  <section class="AiBigTable"/>
+</template>
+
+<script>
+
+import AiEmpty from "./AiEmpty";
+
+export default {
+  name: "AiBigTable",
+  components: {AiEmpty},
+  model: {
+    prop: "data",
+    event: "input"
+  },
+  props: {
+    /**
+     * 表数据
+     */
+    data: {default: () => []},
+    /**
+     * 表格配置
+     */
+    colConfigs: {default: () => []},
+    /**
+     * 是否显示边框
+     */
+    border: Boolean,
+    /**
+     * 是否启用dom对象
+     */
+    isDom: Boolean
+  },
+  data() {
+    return {
+      html2canvas: null
+    }
+  },
+  methods: {
+    renderTable() {
+      const table = document.createElement("div")
+      table.style.display = 'flex'
+      table.style.flexDirection = 'column'
+      table.appendChild(this.renderHead())
+      if (this.data.length > 0) {
+        this.data.map(e => table.appendChild(this.renderRow(e)))
+      } else table.appendChild(this.renderEmpty())
+      if (this.isDom) {
+        this.$el.appendChild(table)
+      } else {
+        this.$el.appendChild(table)
+        this.$load(this.html2canvas).then(() => this.html2canvas(table, {
+          allowTaint: true,
+          useCORS: true,
+          height: this.$el.offsetHeight,
+          width: this.$el.offsetWidth
+        })).then(ctx => {
+          this.$el.removeChild(table)
+          this.$el.appendChild(ctx)
+        })
+      }
+    },
+    renderHead() {
+      const head = document.createElement("div")
+      head.style.display = 'flex'
+      head.style.alignItems = 'center'
+      head.style.fontWeight = 'bold'
+      head.style.background = 'rgba(243, 246, 249, 1)'
+      if (this.border) {
+        head.style.borderLeft = '1px solid #eee'
+        head.style.borderTop = '1px solid #eee'
+      } else {
+        head.style.borderBottom = '1px solid #eee'
+      }
+      this.colConfigs.map(e => {
+        const cell = this.renderCell(e)
+        head.appendChild(cell)
+      })
+      return head
+    },
+    renderRow(item) {
+      const row = document.createElement("div")
+      row.style.display = 'flex'
+      row.style.alignItems = 'center'
+      if (this.border) {
+        row.style.borderLeft = '1px solid #eee'
+      } else {
+        row.style.borderBottom = '1px solid #eee'
+      }
+      this.colConfigs.map(e => {
+        const cell = this.renderCell(e, item)
+        row.appendChild(cell)
+      })
+      return row
+    },
+    renderCell(config, row) {
+      const cell = document.createElement("div")
+      cell.style.display = 'flex'
+      cell.style.alignItems = 'center'
+      cell.style.minheight = '32px'
+      cell.style.padding = '0 8px'
+      if (this.border) {
+        cell.style.borderBottom = '1px solid #eee'
+        cell.style.borderRight = '1px solid #eee'
+      }
+      if (config.align) {
+        cell.style.justifyContent = config.align
+      }
+      if (config.width) {
+        cell.style.width = config.width.toString().replace(/(\d+)/g, '$1px')
+        cell.style.flexShrink = 0
+      } else {
+        cell.style.flex = 1
+        cell.style.minWidth = 0
+      }
+      cell.innerHTML = row?.[config.prop] || config.label
+      return cell
+    },
+    renderEmpty() {
+      const empty = document.createElement("div")
+      empty.style.background = 'url("https://cdn.cunwuyun.cn/dvcp/empty.svg") no-repeat'
+      empty.style.width = '100%'
+      empty.style.height = '140px'
+      empty.style.backgroundPosition = 'center 0'
+      empty.style.backgroundSize = '120px'
+      empty.style.borderBottom = '1px solid #eee'
+      empty.style.borderLeft = '1px solid #eee'
+      empty.style.borderRight = '1px solid #eee'
+      empty.style.textAlign = 'center'
+      empty.style.color = '#999'
+      empty.style.paddingTop = '110px'
+      empty.innerHTML = "暂无数据"
+      return empty
+    }
+  },
+  mounted() {
+    this.$injectLib("https://cdn.cunwuyun.cn/html2canvas.min.js", () => {
+      this.html2canvas = window?.html2canvas
+      this.$nextTick(this.renderTable)
+    })
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.AiBigTable {
+  flex: 1;
+  min-width: 0;
+  min-height: 0;
+}
+</style>