@kyfe/fms-vue2-components 0.0.2-beta.0

package/src/components/fms-scroll-list/fms-scroll-list.vue

@@ -0,0 +1,294 @@
+<!--
+ * @Description: 滚动列表组件
+-->
+<template>
+  <div class="ky-scroll-list" ref="refScroll">
+    <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
+      <van-list v-model="loading" :finished="finished" :immediate-check="false" @load="getData">
+        <div :style="scrollContentStyle" ref="scrollListContentRef" class="ky-scroll-list__content" :class="{isGrid: isEnabledMultiCol && isGrid}">
+          <slot :scrollData="list" :params="setParams"></slot>
+        </div>
+        <template #finished>
+          <div v-if="list.length > 0">{{ setConfig.finishedTips }}</div>
+        </template>
+      </van-list>
+      <fms-empty v-if="(finished || isInitEmpty) && !loading && list.length === 0" :image="emptyType" />
+    </van-pull-refresh>
+  </div>
+</template>
+
+<script>
+const initParams = {
+  page: 1,
+  pageSize: 20
+}
+import FmsEmpty from '../fms-empty'
+import { MaxDecrypt } from '@kyfe/decrypt'
+import { WaterFall } from "./Waterfall";
+const MENU = {
+  id: '151349933249281652',
+  title: 'OA申请'
+}
+export default {
+  name: 'FmsScrollList',
+  props: {
+    config: Object,
+    params: Object,
+    onRefreshBefore: Function,
+    isEnabledMultiCol: {
+      type: Boolean,
+      default: false
+    },
+    gap: {
+      type: Array,
+      /** 大屏两列布局的上下以及左右间距, arr[0]上下， arr[1]左右 */
+      default: () => ([12, 12])
+    },
+      /** 大屏两列布局用grid布局还是waterfall, waterfall用于item不等高的情况,grid用于等高的情况 */
+    isGrid: {
+      type: Boolean,
+      default: false
+    },
+    finishedTips: {
+      type: String,
+      default: '已无更多数据'
+    },
+    emptyType: {
+      type: String,
+      default: 'default'
+    },
+    // 是否初始化的时候需要展示缺省图
+    isInitEmpty: {
+      type: Boolean,
+      default: false
+    },
+    // 列表层样式
+    connStyle: {
+      type: Object,
+      default () {
+        return {}
+      }
+    },
+    // 是否展开折叠
+    isBigScreen: {
+      type: Boolean,
+      default: false
+    },
+  },
+  components: {
+    FmsEmpty
+  },
+  data () {
+    return {
+      maxDecrypt: null,
+      setConfig: {
+        refresher: true, //是否开启下拉刷新
+        finishedTips: this.finishedTips,
+        autoInit: true, //是否自动加载第一次页面数据
+        api: '',
+      },
+      // 默认请求参数
+      setParams: {
+        ...initParams
+      },
+      loading: false,
+      refreshing: false, //是否下拉中
+      finished: false, //是否所有数据加载完成
+      list: [], //列表数据
+    }
+  },
+  computed: {
+    scrollContentStyle() {
+      const styles = {
+        ...this.connStyle
+      }
+      const {gap} = this
+      if (this.isGrid && this.isBigScreen) {
+        styles.gap = `${gap[0]}px ${gap[1]}px`
+      }
+      return styles
+    }
+  },
+  watch: {
+    isBigScreen: {
+      immediate: true,
+      handler(v) {
+        if (this.isGrid || !this.isEnabledMultiCol) {
+          return
+        }
+        this.$nextTick(() => {
+          if (!v) {
+            this.destroyObserver()
+            return
+          }
+          this.initObserver()
+        })
+      }
+    }
+  },
+  created () {
+    this.updatedConfig()
+    this.updatedParams()
+    if (this.setConfig.autoInit) this.initData()
+  },
+  beforeDestroy() {
+    this.destroyObserver()
+  },
+  methods: {
+    initObserver() {
+      this.waterFall = new WaterFall({
+        gap: this.gap
+      })
+      this.waterFall.observe(this.$refs.refScroll, this.$refs.scrollListContentRef)
+    },
+    destroyObserver() {
+      if (!this.waterFall) {
+        return
+      }
+      this.waterFall.dispose()
+      this.waterFall = null
+    },
+    // 更新配置参数
+    updatedConfig (paramsConfig) {
+      const { setConfig, config } = this
+      this.setConfig = { ...setConfig, ...config, ...paramsConfig }
+      // console.log('this.setConfig', this.setConfig)
+    },
+    // 重置页面初始入参
+    reSetParams () {
+      const { params } = this
+      this.setParams = { ...initParams, ...params }
+    },
+    // 更新请求参数，可以也直接直接在getData方法里面增加
+    updatedParams (paramsConfig) {
+      const { setParams, params } = this
+      this.setParams = { ...setParams, ...params, ...paramsConfig }
+      // console.log('this.setParams', this.setParams)
+    },
+    onRefresh () {
+      this.onRefreshBefore && this.onRefreshBefore()
+      this.initData()
+    },
+    //初始化
+    async initData (params, options = {}) {
+      const { isLoading = true } = options
+      if (isLoading) {
+        this.$toast.loading({
+          forbidClick: true,
+          duration: 0
+        })
+      }
+      if (params) {
+        this.updatedParams(params)
+      }
+      this.setParams.page = 1
+      const _initData = await this.getData(options, true)
+      this.$emit('initData', _initData)
+      return _initData
+    },
+    async getData (options = {}, isInit = false) {
+      const { isLoading = true } = options
+      // if (['noData', 'noMore', 'loading'].includes(this.setParams.loadingType)) return
+      if (!this.setConfig.api) this.$toast('API不能为空')
+      // console.log(this.setParams)
+      try {
+        const data = await this.$http(this.setConfig.api, '55668', this.setParams)
+        const { pageTotal, rows, rowTotal } = data
+        const { page } = this.setParams
+        if (page === 1 || isInit) {
+          this.setParams.page = 1
+          this.list = this.initMaxDecrypt(rows)
+        } else {
+          this.maxDecrypt.addData(rows)
+          this.list = this.maxDecrypt.getData()
+        }
+        console.log('this.list', this.list)
+        this.setParams.page = page + 1
+        this.loading = false
+        this.refreshing = false
+        this.finished = page >= +pageTotal
+        if (isLoading) this.$toast.clear()
+        const _res = { list: this.list, params: this.setParams, rowTotal, pageTotal, currentRows: rows }
+        this.$emit('getData', _res)
+        return _res
+      } catch (error) {
+        this.loading = false
+        this.refreshing = false
+        this.finished = true
+        this.list = []
+        this.$emit('getData', { list: [], params: this.setParams })
+        // 弱网
+        this.$bus.$emit('EXECUTE_NET_ERROR')
+        console.log(error)
+      }
+    },
+    initMaxDecrypt (data) {
+      let _data = []
+      try {
+        this.maxDecrypt = new MaxDecrypt({
+          // 对数据做代理
+          data,
+          // 当前数据源的请求code
+          apiCode: this.setConfig.api,
+          // 当前menuId为测试id
+          menuId: MENU.id,
+          // // 数据被解密回调
+          change (...arg) {
+            console.log('数据被解密', ...arg)
+          },
+          // 超过最大解密回调，表示要进行恢复密文
+          maxChange (...arg) {
+            console.log('超过最大解密次数', ...arg)
+          }
+        })
+        // 返回代理后的数据
+        _data = this.maxDecrypt.getData()
+      } catch (error) {
+        console.log('initMaxDecrypt', error)
+        _data = data
+      }
+      if (!_data) {
+        _data = data
+      }
+      return _data
+    },
+  },
+}
+</script>
+
+<style lang="less" scoped>
+.ky-scroll-list {
+  /deep/ .van-list__finished-text {
+    font-size: 14px;
+    line-height: 40px;
+  }
+
+  /deep/ .van-loading__text {
+    font-size: 14px;
+  }
+
+  /deep/ .van-pull-refresh__head {
+    font-size: 14px;
+  }
+  .two-columns-layout() {
+    .ky-scroll-list__content.isGrid {
+      &.isGrid {
+        display: grid;
+        grid-template-columns: repeat(2, 1fr);
+        grid-auto-flow: row;
+      }
+    }
+  }
+  .ky-scroll-list__content {
+    position: relative;
+    min-height: 10px;
+  }
+ 
+  @media (min-width: 600px) {
+    .two-columns-layout();
+  }
+  @media (horizontal-viewport-segments: 2) {
+    .two-columns-layout();
+  }
+}
+</style>

package/src/components/fms-scroll-list/index.js

@@ -0,0 +1,7 @@
+import FmsScrollList from './fms-scroll-list.vue'
+
+FmsScrollList.install = function(Vue) {
+  Vue.component(FmsScrollList.name, FmsScrollList)
+}
+
+export default FmsScrollList

package/src/index.js

@@ -0,0 +1,37 @@
+
+import FmsCopyBox from './components/fms-copy-box/index'
+import FmsEmpty from './components/fms-empty/index'
+import FmsKsDecrypt from './components/fms-ks-decrypt/index'
+import FmsKsFileUpload from './components/fms-ks-file-upload/index'
+import FmsKsFileView from './components/fms-ks-file-view/index'
+import FmsScrollList from './components/fms-scroll-list/index'
+
+const components = [
+  FmsCopyBox,
+  FmsEmpty,
+  FmsKsDecrypt,
+  FmsKsFileUpload,
+  FmsKsFileView,
+  FmsScrollList
+]
+
+const install = function(Vue) {
+  components.forEach(component => {
+    Vue.component(component.name, component)
+  })
+}
+
+// 按需导出
+export {
+  FmsCopyBox,
+  FmsEmpty,
+  FmsKsDecrypt,
+  FmsKsFileUpload,
+  FmsKsFileView,
+  FmsScrollList
+}
+// 全量导出
+export default {
+  install,
+}
+

package/vite.config.js

@@ -0,0 +1,82 @@
+import { defineConfig } from 'vite'
+import vue from '@vitejs/plugin-vue2'
+import vueJsx from '@vitejs/plugin-vue2-jsx'
+import path from 'path'
+import fs from 'fs'
+import libcss from 'vite-plugin-libcss'
+import { libInjectCss } from 'vite-plugin-lib-inject-css';
+// 获取组件入口
+const getComponentEntries = () => {
+  const entries = {}
+  const componentsDir = path.resolve(__dirname, 'src/components')
+  
+  fs.readdirSync(componentsDir).forEach(dir => {
+    const componentDir = path.join(componentsDir, dir)
+    if (fs.statSync(componentDir).isDirectory()) {
+      const indexPath = path.join(componentDir, 'index.js')
+      if (fs.existsSync(indexPath)) {
+        entries[dir] = indexPath
+      }
+    }
+  })
+  
+  return entries
+}
+
+export default defineConfig({
+  plugins: [
+    vueJsx(),
+    vue(),
+    libcss(),
+    libInjectCss()
+  ],
+  resolve: {
+    alias: {
+      '@': './src',
+    }
+  },
+  build: {
+    lib: {
+      entry: {
+        index: path.resolve(__dirname, 'src/index.js'), // 全量导出入口
+        ...getComponentEntries() // 按需导出入口
+      },
+      formats: ['es'],
+      name: 'MyComponentLib',
+      // 修复全量 JS 文件位置
+      fileName: (format, entryName) => {
+        return entryName === 'index' 
+          ? 'index.js' 
+          : `${entryName}/index.js`
+      }
+    },
+    rollupOptions: {
+      external: ['lodash', 'vue', 'dayjs', '@kyfe/decrypt'],
+      output: {
+       assetFileNames: (assetInfo) => {
+          // 非CSS资源输出到顶级assets目录
+          if (!assetInfo.name.endsWith('.css')) {
+            // 获取原始目录的最后一级 (e.g. 'images' from 'src/assets/images')
+            const dir = path.dirname(assetInfo.name).split('/').pop();
+            return `assets/${dir}/[name].[hash].[ext]`;
+          }
+          // CSS 文件
+          const match = assetInfo.name.match(/components\/([^/]+)\//);
+          // 如果找到匹配项则使用匹配结果，否则使用默认路径
+          if (match && match[1]) {
+            return `${match[1]}/style.css`;
+          }
+          // 降级方案：不符合路径格式的 CSS 文件
+          return 'assets/css/[name].[ext]';
+        },
+        // 确保全量入口生成正确的文件
+        entryFileNames: (chunkInfo) => {
+          return chunkInfo.name === 'index' 
+            ? 'index.js' 
+            : '[name]/index.js'
+        }
+      }
+    },
+    cssCodeSplit: true
+  }
+})