imeik-imui 1.1.0 → 1.1.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "imeik-imui",
-  "version": "1.1.0",
+  "version": "1.1.2",
   "ch_name": "imeik UI 组件库 PC端",
   "scripts": {
     "dev": "vue-cli-service serve --mode dev",
@@ -18,9 +18,9 @@
     "svgo": "svgo -f src/icons/svg --config=src/icons/svgo.yml",
     "build:imui": "vue-cli-service build --target lib --name imeik-imui ./src/imui/index.js"
   },
-  "main": "./dist/imeik-imui.umd.min.js",
+  "main": "./src/imui/index.js",
   "files": [
-    "dist",
+    "src/imui",
     "README.md"
   ],
   "dependencies": {
@@ -103,4 +103,4 @@
       "git add"
     ]
   }
-}
+}

package/src/imui/AffixedTable.js

@@ -0,0 +1,135 @@
+export default {
+  name: 'AffixTable',
+  props: {
+    stickyTop: {
+      type: Number,
+      default: 0
+    },
+    selector: {
+      type: String,
+      default: '.app-scrollbar-wrapper'
+    },
+    // 通过这个参数,可以让表格没有吸顶逻辑
+    noStick: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data() {
+    return {
+      scrollContainer: null,
+      scrollTop: 0,
+      $head: [],
+      $body: null,
+      ticking: false
+    }
+  },
+  watch: {
+    // 修复table表格错位问题
+    'table.data': {
+      handler() {
+        this.$nextTick(() => {
+          this.$refs.tableRef.doLayout() // 对 Table 进行重新布局
+        })
+      },
+      deep: true
+    }
+  },
+  activated() {
+    if (this.noStick) {
+      return
+    }
+    // 如果页面用户keep-alive，列表需要定位到对应项
+    if (this.scrollContainer) {
+      this.scrollContainer.scrollTop = this.scrollTop || 0
+      this.scrollContainer.addEventListener('scroll', this.onScroll)
+    }
+  },
+  deactivated() {
+    if (this.noStick) {
+      return
+    }
+    this.scrollContainer?.removeEventListener('scroll', this.onScroll)
+  },
+  beforeDestroy() {
+    if (this.noStick) {
+      return
+    }
+    this.scrollContainer?.removeEventListener('scroll', this.onScroll)
+  },
+  mounted() {
+    if (this.noStick) {
+      return
+    }
+    this.scrollContainer = document.querySelector(this.selector)
+    this.$body = this.$el.querySelector('.el-table')
+    this.$nextTick(() => {
+      this.$head = this.$el.querySelectorAll(
+        '.el-table .el-table__header-wrapper,.el-table .el-table__fixed-header-wrapper'
+      )
+      this.setFixedStyle()
+    })
+    this.scrollContainer?.addEventListener('scroll', this.onScroll)
+  },
+  methods: {
+    setFixedStyle() {
+      for (let i = 0; i < this.$head.length; i++) {
+        const item = this.$head[i]
+        item.style.background = 'url(http://about:blank)'
+        item.style.backgroundAttachment = 'fixed'
+      }
+    },
+    onScroll() {
+      this.scrollTop = this.scrollContainer.scrollTop
+      if (!this.ticking) {
+        window.requestAnimationFrame(() => {
+          const $head = this.$head || []
+          const bodyTop = this.$body.getBoundingClientRect().top
+          for (let i = 0; i < $head.length; i++) {
+            const item = $head[i]
+            if (bodyTop <= this.stickyTop) {
+              item.style.transform = `translate3d(0, ${
+                this.stickyTop - bodyTop
+              }px, 0)`
+            } else {
+              item.style.transform = 'translate3d(0, 0, 0)'
+            }
+            item.style.zIndex = 10
+            if (
+              item
+                .getAttribute('class')
+                .indexOf('el-table__fixed-header-wrapper') > -1
+            ) {
+              item.style.position = 'absolute'
+            } else {
+              item.style.position = 'relative'
+            }
+          }
+          this.ticking = false
+        })
+        this.ticking = true
+      }
+    },
+    getTableInstance() {
+      return this.$refs.tableRef
+    }
+  },
+  render() {
+    const props = { ...this.$attrs }
+    return (
+      <div>
+        <el-table
+          ref="tableRef"
+          style="background-color:white;"
+          props={props}
+          on={this.$listeners}
+          scopedSlots={this.$scopedSlots}
+        >
+          {Object.keys(this.$slots).map((name) => (
+            <template slot={name}>{this.$slots[name]}</template>
+          ))}
+        </el-table>
+      </div>
+    )
+  }
+}

package/src/imui/FieldComponents/index.js

@@ -0,0 +1,11 @@
+const commonComponent = require.context('./src', true, /index.vue$/)
+
+const defaultObj = {}
+// 通用组件位置
+commonComponent.keys().forEach((fileName) => {
+  const componentConfig = commonComponent(fileName)
+  const componentName = fileName.replace(/^.\/(.*)\/.*$/, '$1')
+  defaultObj[componentName] = componentConfig.default || componentConfig
+})
+
+export default defaultObj

package/src/imui/FieldComponents/readme.md

@@ -0,0 +1,5 @@
+## 表单组件库
+
+## 业务组件
+
+> 把这块理解成业务组件，常用的组件都放在这里

package/src/imui/FieldComponents/src/FieldAddressInfo/RegionCascader.vue

@@ -0,0 +1,99 @@
+<template>
+  <el-cascader ref="cascaderRef" v-model="myValue" :props="props" :options="options" :placeholder="placeholder" clearable filterable v-bind="$attrs" @change="handleChange"></el-cascader>
+</template>
+
+<script>
+import { getRegionData } from '../../../api/user'
+
+export default {
+  name: 'RegionCascader',
+  props: {
+    value: {
+      type: [String, Array],
+      default: undefined
+    },
+    placeholder: {
+      type: String,
+      default: '请选择'
+    },
+    level: {
+      type: String,
+      default: undefined
+    },
+    props: {
+      type: Object,
+      default() {
+        return {
+          label: 'name',
+          value: 'numberCode',
+          children: 'subRegin',
+          expandTrigger: 'hover',
+          // checkStrictly: true,
+          emitPath: false
+        }
+      }
+    }
+  },
+  data() {
+    return {
+      myValue: undefined,
+      options: []
+    }
+  },
+  watch: {
+    value: {
+      immediate: true,
+      handler() {
+        this.setMyValue()
+      }
+    }
+  },
+  created() {
+    this.getOptions()
+  },
+  methods: {
+    setMyValue() {
+      try {
+        this.myValue = JSON.parse(JSON.stringify(this.value))
+      } catch (error) {
+        this.myValue = undefined
+      }
+    },
+
+    getOptions() {
+      getRegionData({}).then((res) => {
+        if (res.code === 200) {
+          this.options = res.data || []
+          this.formatData(this.options)
+        }
+      })
+    },
+
+    formatData(regionData) {
+      for (let i = 0; i < regionData.length; i++) {
+        const item = regionData[i]
+        if (this.level && this.level === item.level) {
+          delete item.subRegin
+          continue
+        }
+        if (item.subRegin && item.subRegin.length === 0) {
+          delete item.subRegin
+        }
+        if (item.subRegin && item.subRegin.length > 0) {
+          this.formatData(item.subRegin)
+        }
+      }
+    },
+
+    handleChange() {
+      let pathNodes = []
+      const checkedNodes = this.$refs.cascaderRef.getCheckedNodes()
+      if (checkedNodes && checkedNodes.length > 0) {
+        pathNodes = checkedNodes[0].pathNodes
+      }
+      this.$emit('input', this.myValue, pathNodes)
+      this.$emit('change', this.myValue, pathNodes)
+    }
+  }
+}
+</script>