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

package/dist/fms-scroll-list/index.js

@@ -0,0 +1,241 @@
+import './../fms-copy-box/style.css';
+import f from "../fms-empty/index.js";
+import { MaxDecrypt as d } from "@kyfe/decrypt";
+import { n as g } from "../plugin-vue2_normalizer.ed7092a9.js";
+import './style.css';class p {
+  constructor({ gap: t } = {}) {
+    this.observer = null, this.intersectionObserver = null, this.container = null, this.refScroll = null, this.leftHeight = 0, this.rightHeight = 0, this.intersectionRatio = 0, this.gap = t || [0, 0], this.init();
+  }
+  get containerHeight() {
+    return Math.max(this.leftHeight, this.rightHeight);
+  }
+  init() {
+    this.initMutationObserver(), this.initIntersectionObserver();
+  }
+  observe(t, e) {
+    this.refScroll = t, this.container = e, this.observer.observe(e, {
+      childList: !0
+    }), this.intersectionObserver.observe(this.refScroll), e.defaultCssText = e.defaultCssTex || e.style.cssText;
+  }
+  dispose() {
+    this.observer.disconnect(), this.intersectionObserver.disconnect(), this.container.style.cssText = this.container.defaultCssText, delete this.container.defaultCssText, Array.from(this.container.children).forEach((t) => {
+      t.style.cssText = t.defaultCssText, delete t.defaultCssText, delete t.nodeHeight;
+    });
+  }
+  initMutationObserver() {
+    const t = new MutationObserver(() => {
+      this.intersectionRatio !== 0 && this.handleNode();
+    });
+    this.observer = t;
+  }
+  initIntersectionObserver() {
+    const t = new IntersectionObserver((e) => {
+      this.intersectionRatio = e[0].intersectionRatio, !(e[0].intersectionRatio <= 0) && this.handleNode();
+    });
+    this.intersectionObserver = t;
+  }
+  handleNode() {
+    const t = Array.from(this.container.children);
+    this.leftHeight = 0, this.rightHeight = 0;
+    const [e, i] = this.gap;
+    t.forEach((r) => {
+      const a = r.nodeHeight || r.offsetHeight;
+      r.nodeHeight = a;
+      const n = this.leftHeight <= this.rightHeight;
+      "defaultCssText" in r || (r.defaultCssText = r.style.cssText, r.style.cssText = `
+          position: absolute; 
+          width: calc(50% - ${i / 2}px); 
+          top: ${n ? this.leftHeight : this.rightHeight}px; 
+          ${n ? "left: 0" : "right: 0"};
+        `), n ? this.leftHeight += a + e : this.rightHeight += a + e;
+    }), this.container.style.height = this.containerHeight + "px";
+  }
+}
+const c = {
+  page: 1,
+  pageSize: 20
+}, u = {
+  id: "151349933249281652",
+  title: "OA\u7533\u8BF7"
+}, m = {
+  name: "FmsScrollList",
+  props: {
+    config: Object,
+    params: Object,
+    onRefreshBefore: Function,
+    isEnabledMultiCol: {
+      type: Boolean,
+      default: !1
+    },
+    gap: {
+      type: Array,
+      default: () => [12, 12]
+    },
+    isGrid: {
+      type: Boolean,
+      default: !1
+    },
+    finishedTips: {
+      type: String,
+      default: "\u5DF2\u65E0\u66F4\u591A\u6570\u636E"
+    },
+    emptyType: {
+      type: String,
+      default: "default"
+    },
+    isInitEmpty: {
+      type: Boolean,
+      default: !1
+    },
+    connStyle: {
+      type: Object,
+      default() {
+        return {};
+      }
+    },
+    isBigScreen: {
+      type: Boolean,
+      default: !1
+    }
+  },
+  components: {
+    FmsEmpty: f
+  },
+  data() {
+    return {
+      maxDecrypt: null,
+      setConfig: {
+        refresher: !0,
+        finishedTips: this.finishedTips,
+        autoInit: !0,
+        api: ""
+      },
+      setParams: {
+        ...c
+      },
+      loading: !1,
+      refreshing: !1,
+      finished: !1,
+      list: []
+    };
+  },
+  computed: {
+    scrollContentStyle() {
+      const s = {
+        ...this.connStyle
+      }, { gap: t } = this;
+      return this.isGrid && this.isBigScreen && (s.gap = `${t[0]}px ${t[1]}px`), s;
+    }
+  },
+  watch: {
+    isBigScreen: {
+      immediate: !0,
+      handler(s) {
+        this.isGrid || !this.isEnabledMultiCol || this.$nextTick(() => {
+          if (!s) {
+            this.destroyObserver();
+            return;
+          }
+          this.initObserver();
+        });
+      }
+    }
+  },
+  created() {
+    this.updatedConfig(), this.updatedParams(), this.setConfig.autoInit && this.initData();
+  },
+  beforeDestroy() {
+    this.destroyObserver();
+  },
+  methods: {
+    initObserver() {
+      this.waterFall = new p({
+        gap: this.gap
+      }), this.waterFall.observe(this.$refs.refScroll, this.$refs.scrollListContentRef);
+    },
+    destroyObserver() {
+      !this.waterFall || (this.waterFall.dispose(), this.waterFall = null);
+    },
+    updatedConfig(s) {
+      const { setConfig: t, config: e } = this;
+      this.setConfig = { ...t, ...e, ...s };
+    },
+    reSetParams() {
+      const { params: s } = this;
+      this.setParams = { ...c, ...s };
+    },
+    updatedParams(s) {
+      const { setParams: t, params: e } = this;
+      this.setParams = { ...t, ...e, ...s };
+    },
+    onRefresh() {
+      this.onRefreshBefore && this.onRefreshBefore(), this.initData();
+    },
+    async initData(s, t = {}) {
+      const { isLoading: e = !0 } = t;
+      e && this.$toast.loading({
+        forbidClick: !0,
+        duration: 0
+      }), s && this.updatedParams(s), this.setParams.page = 1;
+      const i = await this.getData(t, !0);
+      return this.$emit("initData", i), i;
+    },
+    async getData(s = {}, t = !1) {
+      const { isLoading: e = !0 } = s;
+      this.setConfig.api || this.$toast("API\u4E0D\u80FD\u4E3A\u7A7A");
+      try {
+        const i = await this.$http(this.setConfig.api, "55668", this.setParams), { pageTotal: r, rows: a, rowTotal: n } = i, { page: o } = this.setParams;
+        o === 1 || t ? (this.setParams.page = 1, this.list = this.initMaxDecrypt(a)) : (this.maxDecrypt.addData(a), this.list = this.maxDecrypt.getData()), console.log("this.list", this.list), this.setParams.page = o + 1, this.loading = !1, this.refreshing = !1, this.finished = o >= +r, e && this.$toast.clear();
+        const h = { list: this.list, params: this.setParams, rowTotal: n, pageTotal: r, currentRows: a };
+        return this.$emit("getData", h), h;
+      } catch (i) {
+        this.loading = !1, this.refreshing = !1, this.finished = !0, this.list = [], this.$emit("getData", { list: [], params: this.setParams }), this.$bus.$emit("EXECUTE_NET_ERROR"), console.log(i);
+      }
+    },
+    initMaxDecrypt(s) {
+      let t = [];
+      try {
+        this.maxDecrypt = new d({
+          data: s,
+          apiCode: this.setConfig.api,
+          menuId: u.id,
+          change(...e) {
+            console.log("\u6570\u636E\u88AB\u89E3\u5BC6", ...e);
+          },
+          maxChange(...e) {
+            console.log("\u8D85\u8FC7\u6700\u5927\u89E3\u5BC6\u6B21\u6570", ...e);
+          }
+        }), t = this.maxDecrypt.getData();
+      } catch (e) {
+        console.log("initMaxDecrypt", e), t = s;
+      }
+      return t || (t = s), t;
+    }
+  }
+};
+var y = function() {
+  var t = this, e = t._self._c;
+  return e("div", { ref: "refScroll", staticClass: "ky-scroll-list" }, [e("van-pull-refresh", { on: { refresh: t.onRefresh }, model: { value: t.refreshing, callback: function(i) {
+    t.refreshing = i;
+  }, expression: "refreshing" } }, [e("van-list", { attrs: { finished: t.finished, "immediate-check": !1 }, on: { load: t.getData }, scopedSlots: t._u([{ key: "finished", fn: function() {
+    return [t.list.length > 0 ? e("div", [t._v(t._s(t.setConfig.finishedTips))]) : t._e()];
+  }, proxy: !0 }]), model: { value: t.loading, callback: function(i) {
+    t.loading = i;
+  }, expression: "loading" } }, [e("div", { ref: "scrollListContentRef", staticClass: "ky-scroll-list__content", class: { isGrid: t.isEnabledMultiCol && t.isGrid }, style: t.scrollContentStyle }, [t._t("default", null, { scrollData: t.list, params: t.setParams })], 2)]), (t.finished || t.isInitEmpty) && !t.loading && t.list.length === 0 ? e("fms-empty", { attrs: { image: t.emptyType } }) : t._e()], 1)], 1);
+}, v = [], b = /* @__PURE__ */ g(
+  m,
+  y,
+  v,
+  !1,
+  null,
+  "131609e2",
+  null,
+  null
+);
+const l = b.exports;
+l.install = function(s) {
+  s.component(l.name, l);
+};
+export {
+  l as default
+};

package/dist/fms-scroll-list/style.css

@@ -0,0 +1 @@
+.ky-scroll-list[data-v-131609e2] .van-list__finished-text{font-size:14px;line-height:40px}.ky-scroll-list[data-v-131609e2] .van-loading__text,.ky-scroll-list[data-v-131609e2] .van-pull-refresh__head{font-size:14px}.ky-scroll-list .ky-scroll-list__content[data-v-131609e2]{position:relative;min-height:10px}@media (min-width: 600px){.ky-scroll-list .ky-scroll-list__content.isGrid.isGrid[data-v-131609e2]{display:grid;grid-template-columns:repeat(2,1fr);grid-auto-flow:row}}@media (horizontal-viewport-segments: 2){.ky-scroll-list .ky-scroll-list__content.isGrid.isGrid[data-v-131609e2]{display:grid;grid-template-columns:repeat(2,1fr);grid-auto-flow:row}}

package/dist/index.js

@@ -0,0 +1,37 @@
+import './fms-copy-box/style.css';
+import s from "./fms-copy-box/index.js";
+import { default as w } from "./fms-copy-box/index.js";
+import t from "./fms-empty/index.js";
+import { default as C } from "./fms-empty/index.js";
+import "./fms-ks-decrypt/index.js";
+import r from "./fms-ks-file-upload/index.js";
+import { default as L } from "./fms-ks-file-upload/index.js";
+import e from "./fms-ks-file-view/index.js";
+import { default as U } from "./fms-ks-file-view/index.js";
+import p from "./fms-scroll-list/index.js";
+import { default as h } from "./fms-scroll-list/index.js";
+import { F as f } from "./fms-ks-decrypt.bcc12f44.js";
+import { F as g } from "./fms-ks-decrypt.bcc12f44.js";
+const a = [
+  s,
+  t,
+  f,
+  r,
+  e,
+  p
+], i = function(m) {
+  a.forEach((o) => {
+    m.component(o.name, o);
+  });
+}, y = {
+  install: i
+};
+export {
+  w as FmsCopyBox,
+  C as FmsEmpty,
+  g as FmsKsDecrypt,
+  L as FmsKsFileUpload,
+  U as FmsKsFileView,
+  h as FmsScrollList,
+  y as default
+};

package/dist/plugin-vue2_normalizer.ed7092a9.js

@@ -0,0 +1,30 @@
+function v(r, a, d, h, i, t, f, u) {
+  var e = typeof r == "function" ? r.options : r;
+  a && (e.render = a, e.staticRenderFns = d, e._compiled = !0), h && (e.functional = !0), t && (e._scopeId = "data-v-" + t);
+  var o;
+  if (f ? (o = function(n) {
+    n = n || this.$vnode && this.$vnode.ssrContext || this.parent && this.parent.$vnode && this.parent.$vnode.ssrContext, !n && typeof __VUE_SSR_CONTEXT__ < "u" && (n = __VUE_SSR_CONTEXT__), i && i.call(this, n), n && n._registeredComponents && n._registeredComponents.add(f);
+  }, e._ssrRegister = o) : i && (o = u ? function() {
+    i.call(
+      this,
+      (e.functional ? this.parent : this).$root.$options.shadowRoot
+    );
+  } : i), o)
+    if (e.functional) {
+      e._injectStyles = o;
+      var l = e.render;
+      e.render = function(p, _) {
+        return o.call(_), l(p, _);
+      };
+    } else {
+      var s = e.beforeCreate;
+      e.beforeCreate = s ? [].concat(s, o) : [o];
+    }
+  return {
+    exports: r,
+    options: e
+  };
+}
+export {
+  v as n
+};

package/package.json

@@ -0,0 +1,31 @@
+{
+  "name": "@kyfe/fms-vue2-components",
+  "version": "0.0.2-beta.0",
+  "description": "",
+  "main": "dist/index.js",
+  "module": "dist/index.js",
+  "type": "module",
+  "scripts": {
+    "build": "vite build",
+    "dev:build": "npm run build && yalc publish && yalc link"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "ISC",
+  "devDependencies": {
+    "@vitejs/plugin-vue2": "^1.1.2",
+    "@vitejs/plugin-vue2-jsx": "^1.1.1",
+    "vite": "3.2.10",
+    "vite-plugin-lib-inject-css": "^2.2.2",
+    "vite-plugin-libcss": "^1.1.2"
+  },
+  "dependencies": {
+    "@kyfe/decrypt": "^0.0.7",
+    "@kyfe/fms-utils": "workspace:^",
+    "dayjs": "^1.11.13",
+    "vant": "2.5.6"
+  },
+  "sideEffects": [
+    "**/*.css"
+  ]
+}

package/src/assets/style/common.less

@@ -0,0 +1,62 @@
+// 卡片样式的圆角
+@card-border-radius: 6px;
+
+/* 以下均为van-collapse组件的新样式
+*新UI规范:手风琴展开后title的下边框需要贯穿左右,连接左右边界
+* class="collapse-title--expend_border-bottom-hidden"
+* @import url('../style/common'); */
+.collapse-wrap {
+    border-radius: @card-border-radius;
+    overflow: hidden;
+}
+
+.collapse-title--expend_border-bottom-hidden {
+    /deep/ .van-collapse-item__title--expanded {
+        &::after {
+            right: 0 !important; // 因为公共组件中使用了id选择器,只能使用这个才能覆盖公共组件中设置的right:16px
+            left: 0;
+        }
+    }
+}
+
+// 自写input输入框的样式:背景为灰色/圆角(type=textarea会有limit数字显示)
+// 参照:报销申请-报销事由
+.field-reason {
+    display: block;
+
+    /deep/ .van-field__value {
+        border-radius: 4px;
+        background-color: #f7f8fa;
+        margin-top: 8px;
+
+        .van-field__body {
+            padding: 0;
+            line-height: 20px;
+
+            input.van-field__control {
+                height: 40px;
+                padding: 0 12px;
+            }
+            textarea.van-field__control {
+                padding: 12px;
+            }
+
+            // padding-left: 20px;
+            .van-field__right-icon {
+                position: absolute;
+                bottom: 0;
+                right: 16px;
+                height: 32px;
+                display: flex;
+                align-items: center;
+                padding: 0;
+            }
+        }
+
+        .van-field__word-limit {
+            margin-right: 16px;
+            color: #858793;
+            padding-bottom: 8px;
+        }
+    }
+}

package/src/components/fms-copy-box/fms-copy-box.vue

@@ -0,0 +1,97 @@
+<template>
+  <div class="copy-box">
+    <slot></slot>
+    <span v-if="text">{{ text }}</span>
+    <fms-ks-decrypt
+      v-else
+      :fieldNameStr="fieldNameStr"
+      :value="formData[fieldName]"
+      :formData="formData"
+      :fieldName="fieldName"
+      :menuCode="menuCode"
+      @decryptData="decryptData"
+      v-bind="decryptConfig"
+    ></fms-ks-decrypt>
+    <i class="copy-icon" @click="onCopy"></i>
+  </div>
+</template>
+<script>
+import FmsKsEecrypt from '../fms-ks-decrypt/fms-ks-decrypt.vue'
+const Toast = window.vant && window.vant.Toast
+export default {
+  name: 'FmsCopyBox',
+  props: {
+    text: {
+      type: String,
+      default: '',
+    },
+    formData: {
+      type: Object,
+      default() {
+        return {
+        }
+      },
+    },
+    fieldNameStr: String,
+    fieldName: {
+      type: String,
+      default: '',
+    },
+    /**
+     * 格式如下
+     * {
+        moduleCode: 'f1cd4185576d437d8fc2e0270b94cc56',
+        moduleName: '预存开户',
+      },
+     */
+    menuCode: Object,
+    decryptConfig: {
+      type: Object,
+      default: () => ({})
+    }
+  },
+  components: {
+    FmsKsEecrypt,
+  },
+  data() {
+    return {
+      value: '',
+      decryptVal: '',
+    }
+  },
+  computed: {},
+  methods: {
+    // 复制
+    onCopy() {
+      const { text, formData, fieldName, decryptVal } = this
+      const str = text || decryptVal || formData[fieldName]
+      window.ks.callFunc({ method: 'paste', params: { str } }).catch(() => {
+        Toast.fail('复制失败')
+      })
+    },
+    // 解密回调
+    decryptData(val) {
+      this.decryptVal = val
+    },
+  },
+}
+</script>
+<style lang="less" scoped>
+.copy-box {
+  display: inline-flex;
+  height: 14px;
+  font-size: 12px;
+  font-weight: 400;
+  color: #1b2240;
+  line-height: 14px;
+  align-items: center;
+  .copy-icon {
+    width: 12px;
+    height: 12px;
+    background: url('@/assets/images/copy-icon.png') no-repeat center / contain;
+    background-clip: content-box;
+    padding: 0 4px;
+    cursor: pointer;
+  }
+}
+</style>

package/src/components/fms-copy-box/index.js

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

package/src/components/fms-empty/fms-empty.vue

@@ -0,0 +1,57 @@
+<template>
+  <div class="ky-empty">
+    <div class="empty-image">
+      <img v-if="image === 'default'" src="./assets/default.png">
+      <img v-else-if="image === 'search'" src="./assets/search.png">
+    </div>
+    <p class="description">{{ description || emptyMap[image].description }}</p>
+  </div>
+</template>
+
+<script>
+
+  export default {
+    name: 'FmsEmpty',
+    props: {
+      image: { type: String, default: 'default' },
+      description: String
+    },
+    data() {
+      return {
+        emptyMap: {
+          'default': {
+            description: '暂无内容'
+          },
+          'search': {
+            description: '无搜索结果'
+          }
+        }
+      }
+    }
+  }
+</script>
+
+<style lang="less">
+  .ky-empty {
+    margin: 20% auto;
+    display: flex;
+    align-items: center;
+    flex-direction: column;
+    .empty-image {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      width: 140px;
+      height: 140px;
+      img {
+        height: auto;
+        // object-fit: contain;
+        width: 100%;
+      }
+    }
+    .description {
+      color: #888EA6;
+      font-size: 14px;
+    }
+  }
+</style>

package/src/components/fms-empty/index.js

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