bri-components 1.0.0

package/src/components/controls/base/DshNumber/BriInputNumber/utils/assist.js

@@ -0,0 +1,322 @@
+import Vue from "vue";
+const isServer = Vue.prototype.$isServer;
+
+export function camelcaseToHyphen (str) {
+    return str.replace(/([a-z])([A-Z])/g, "$1-$2").toLowerCase();
+}
+
+// For Modal scrollBar hidden
+let cached;
+export function getScrollBarSize (fresh) {
+    if (isServer) return 0;
+    if (fresh || cached === undefined) {
+        const inner = document.createElement("div");
+        inner.style.width = "100%";
+        inner.style.height = "200px";
+
+        const outer = document.createElement("div");
+        const outerStyle = outer.style;
+
+        outerStyle.position = "absolute";
+        outerStyle.top = 0;
+        outerStyle.left = 0;
+        outerStyle.pointerEvents = "none";
+        outerStyle.visibility = "hidden";
+        outerStyle.width = "200px";
+        outerStyle.height = "150px";
+        outerStyle.overflow = "hidden";
+
+        outer.appendChild(inner);
+
+        document.body.appendChild(outer);
+
+        const widthContained = inner.offsetWidth;
+        outer.style.overflow = "scroll";
+        let widthScroll = inner.offsetWidth;
+
+        if (widthContained === widthScroll) {
+            widthScroll = outer.clientWidth;
+        }
+
+        document.body.removeChild(outer);
+
+        cached = widthContained - widthScroll;
+    }
+    return cached;
+}
+
+// watch DOM change
+export const MutationObserver = isServer ? false : window.MutationObserver || window.WebKitMutationObserver || window.MozMutationObserver || false;
+
+const SPECIAL_CHARS_REGEXP = /([:\-_]+(.))/g;
+// const SPECIAL_CHARS_REGEXP = /([\:\-\_]+(.))/g; // eslint认为\为无用的转义符（:和_不需要转义）
+const MOZ_HACK_REGEXP = /^moz([A-Z])/;
+
+function camelCase (name) {
+    return name.replace(SPECIAL_CHARS_REGEXP, function (_, separator, letter, offset) {
+        return offset ? letter.toUpperCase() : letter;
+    }).replace(MOZ_HACK_REGEXP, "Moz$1");
+}
+// getStyle
+export function getStyle (element, styleName) {
+    if (!element || !styleName) return null;
+    styleName = camelCase(styleName);
+    if (styleName === "float") {
+        styleName = "cssFloat";
+    }
+    try {
+        const computed = document.defaultView.getComputedStyle(element, "");
+        return element.style[styleName] || computed ? computed[styleName] : null;
+    } catch (e) {
+        return element.style[styleName];
+    }
+}
+
+// firstUpperCase
+function firstUpperCase (str) {
+    return str.toString()[0].toUpperCase() + str.toString().slice(1);
+}
+export {firstUpperCase};
+
+// Warn
+export function warnProp (component, prop, correctType, wrongType) {
+    correctType = firstUpperCase(correctType);
+    wrongType = firstUpperCase(wrongType);
+    console.error(`[iView warn]: Invalid prop: type check failed for prop ${prop}. Expected ${correctType}, got ${wrongType}. (found in component: ${component})`);    // eslint-disable-line
+}
+
+function typeOf (obj) {
+    const toString = Object.prototype.toString;
+    const map = {
+        "[object Boolean]": "boolean",
+        "[object Number]": "number",
+        "[object String]": "string",
+        "[object Function]": "function",
+        "[object Array]": "array",
+        "[object Date]": "date",
+        "[object RegExp]": "regExp",
+        "[object Undefined]": "undefined",
+        "[object Null]": "null",
+        "[object Object]": "object"
+    };
+    return map[toString.call(obj)];
+}
+
+// deepCopy
+function deepCopy (data) {
+    const t = typeOf(data);
+    let o;
+
+    if (t === "array") {
+        o = [];
+    } else if (t === "object") {
+        o = {};
+    } else {
+        return data;
+    }
+
+    if (t === "array") {
+        for (let i = 0; i < data.length; i++) {
+            o.push(deepCopy(data[i]));
+        }
+    } else if (t === "object") {
+        for (let i in data) {
+            o[i] = deepCopy(data[i]);
+        }
+    }
+    return o;
+}
+
+export {deepCopy};
+
+// scrollTop animation
+export function scrollTop (el, from = 0, to, duration = 500, endCallback) {
+    if (!window.requestAnimationFrame) {
+        window.requestAnimationFrame = (
+            window.webkitRequestAnimationFrame ||
+            window.mozRequestAnimationFrame ||
+            window.msRequestAnimationFrame ||
+            function (callback) {
+                return window.setTimeout(callback, 1000 / 60);
+            }
+        );
+    }
+    const difference = Math.abs(from - to);
+    const step = Math.ceil(difference / duration * 50);
+
+    function scroll (start, end, step) {
+        if (start === end) {
+            endCallback && endCallback();
+            return;
+        }
+
+        let d = (start + step > end) ? end : start + step;
+        if (start > end) {
+            d = (start - step < end) ? end : start - step;
+        }
+
+        if (el === window) {
+            window.scrollTo(d, d);
+        } else {
+            el.scrollTop = d;
+        }
+        window.requestAnimationFrame(() => scroll(d, end, step));
+    }
+    scroll(from, to, step);
+}
+
+// Find components upward
+function findComponentUpward (context, componentName, componentNames) {
+    if (typeof componentName === "string") {
+        componentNames = [componentName];
+    } else {
+        componentNames = componentName;
+    }
+
+    let parent = context.$parent;
+    let name = parent.$options.name;
+    while (parent && (!name || componentNames.indexOf(name) < 0)) {
+        parent = parent.$parent;
+        if (parent) name = parent.$options.name;
+    }
+    return parent;
+}
+export {findComponentUpward};
+
+// Find component downward
+export function findComponentDownward (context, componentName) {
+    const childrens = context.$children;
+    let children = null;
+
+    if (childrens.length) {
+        for (const child of childrens) {
+            const name = child.$options.name;
+            if (name === componentName) {
+                children = child;
+                break;
+            } else {
+                children = findComponentDownward(child, componentName);
+                if (children) break;
+            }
+        }
+    }
+    return children;
+}
+
+// Find components downward
+export function findComponentsDownward (context, componentName) {
+    return context.$children.reduce((components, child) => {
+        if (child.$options.name === componentName) components.push(child);
+        const foundChilds = findComponentsDownward(child, componentName);
+        return components.concat(foundChilds);
+    }, []);
+}
+
+// Find components upward
+export function findComponentsUpward (context, componentName) {
+    let parents = [];
+    const parent = context.$parent;
+    if (parent) {
+        if (parent.$options.name === componentName) parents.push(parent);
+        return parents.concat(findComponentsUpward(parent, componentName));
+    } else {
+        return [];
+    }
+}
+
+// Find brothers components
+export function findBrothersComponents (context, componentName, exceptMe = true) {
+    let res = context.$parent.$children.filter(item => {
+        return item.$options.name === componentName;
+    });
+    let index = res.findIndex(item => item._uid === context._uid);
+    if (exceptMe) res.splice(index, 1);
+    return res;
+}
+
+/* istanbul ignore next */
+const trim = function (string) {
+    return (string || "").replace(/^[\s\uFEFF]+|[\s\uFEFF]+$/g, "");
+};
+
+/* istanbul ignore next */
+export function hasClass (el, cls) {
+    if (!el || !cls) return false;
+    if (cls.indexOf(" ") !== -1) throw new Error("className should not contain space.");
+    if (el.classList) {
+        return el.classList.contains(cls);
+    } else {
+        return (" " + el.className + " ").indexOf(" " + cls + " ") > -1;
+    }
+}
+
+/* istanbul ignore next */
+export function addClass (el, cls) {
+    if (!el) return;
+    let curClass = el.className;
+    const classes = (cls || "").split(" ");
+
+    for (let i = 0, j = classes.length; i < j; i++) {
+        const clsName = classes[i];
+        if (!clsName) continue;
+
+        if (el.classList) {
+            el.classList.add(clsName);
+        } else {
+            if (!hasClass(el, clsName)) {
+                curClass += " " + clsName;
+            }
+        }
+    }
+    if (!el.classList) {
+        el.className = curClass;
+    }
+}
+
+/* istanbul ignore next */
+export function removeClass (el, cls) {
+    if (!el || !cls) return;
+    const classes = cls.split(" ");
+    let curClass = " " + el.className + " ";
+
+    for (let i = 0, j = classes.length; i < j; i++) {
+        const clsName = classes[i];
+        if (!clsName) continue;
+
+        if (el.classList) {
+            el.classList.remove(clsName);
+        } else {
+            if (hasClass(el, clsName)) {
+                curClass = curClass.replace(" " + clsName + " ", " ");
+            }
+        }
+    }
+    if (!el.classList) {
+        el.className = trim(curClass);
+    }
+}
+
+export const dimensionMap = {
+    xs: "480px",
+    sm: "576px",
+    md: "768px",
+    lg: "992px",
+    xl: "1200px",
+    xxl: "1600px"
+};
+
+export function setMatchMedia () {
+    if (typeof window !== "undefined") {
+        const matchMediaPolyfill = mediaQuery => {
+            return {
+                media: mediaQuery,
+                matches: false,
+                on () {},
+                off () {}
+            };
+        };
+        window.matchMedia = window.matchMedia || matchMediaPolyfill;
+    }
+}
+
+export const sharpMatcherRegx = /#([^#]+)$/;

package/src/components/controls/base/DshNumber/DshNumber.vue

@@ -0,0 +1,148 @@
+<template>
+    <div :class="`DshNumber ycFormItem control-${mode}`">
+        <!-- 编辑模式 组件无clearable -->
+        <template v-if="finalCanEdit">
+            <BriInputNumber
+                style="width: 100%"
+                :class="{
+                    'DshNumber-readonly': $isReadonly(canEdit, selfPropsObj),
+                    'DshNumber-disabled': $isDisabled(canEdit, selfPropsObj)
+                }"
+                v-model="value[controlKey]"
+                :placeholder="$showPlaceholder(canEdit, selfPropsObj) ? `请输入${selfPropsObj._name}` : ''"
+                :disabled="!finalCanEdit"
+                :formatter="formatterFunc"
+                :max="maxNum"
+                :min="minNum"
+                :precision="digit"
+                @on-change="change"
+            >
+                <div
+                    v-if="unitStr"
+                    slot="suffix"
+                    style="padding-right: 24px; padding-left: 8px; line-height: 30px; white-space: nowrap"
+                >
+                    {{ unitStr }}
+                </div>
+            </BriInputNumber>
+        </template>
+
+        <!-- 查看模式 -->
+        <template v-else>
+            <Progress
+                v-if="selfPropsObj._showProgress"
+                :percent="value[controlKey] > 100 ? 100 : toDecimal(value[controlKey])"
+            />
+            <Ctooltip
+                v-else
+                placement="top"
+                :transfer="true"
+                :content="String(showVal)"
+                :class="commonClass"
+            >
+                <span
+                    v-if="$isFormItemHasData(showVal)"
+                    class="dsh-ellipsis hb-show-text"
+                >
+                    {{ showVal }}
+                </span>
+                <span
+                    v-else
+                    class="dsh-ellipsis hb-nodata-text"
+                >
+                    <span>暂无内容</span>
+                </span>
+            </Ctooltip>
+        </template>
+    </div>
+</template>
+
+<script>
+    import BriInputNumber from "./BriInputNumber/BriInputNumber.vue";
+    import controlMixin from "../../controlMixin.js";
+
+    export default {
+        name: "DshNumber",
+        mixins: [controlMixin],
+        components: {
+            BriInputNumber
+        },
+        props: {},
+        data () {
+            return {};
+        },
+        computed: {
+            selfPropsObj () {
+                return {
+                    ...this.propsObj
+                };
+            },
+            formatterFunc () {
+                if (this.separator) {
+                    return this.$numToSeparator;
+                } else {
+                    return value => `${value}`;
+                }
+            },
+
+            maxNum () {
+                return this.selfPropsObj._max || this.selfPropsObj._max === 0 ? this.selfPropsObj._max : Infinity;
+            },
+            minNum () {
+                return this.selfPropsObj._min || this.selfPropsObj._min === 0 ? this.selfPropsObj._min : -Infinity;
+            },
+            // round, decimal, 为其他值不处理
+            round () {
+                return this.selfPropsObj._round;
+            },
+            digit () {
+                return this.round === "round"
+                    ? 0
+                    : this.round === "decimal"
+                        ? Number(this.selfPropsObj._digit || 2)
+                        : undefined;
+            },
+            numberFormat () {
+                return this.selfPropsObj._numberFormat;
+            },
+            unit () {
+                return this.selfPropsObj._unit;
+            },
+            unitStr () {
+                return this.numberFormat === "percent"
+                    ? "%"
+                    : this.unit
+                        ? `${this.unit}`
+                        : "";
+            },
+            separator () {
+                return this.selfPropsObj._separator;
+            },
+
+            showVal () {
+                return this.$numToStrAndUnit(this.value[this.controlKey], this.selfPropsObj);
+            }
+        },
+        created () {},
+        methods: {
+            toDecimal (x) {
+                let f = parseFloat(x);
+                if (isNaN(f)) {
+                    return;
+                }
+                f = Math.round(x * 100) / 100;
+                return f;
+            }
+        }
+    };
+</script>
+
+<style lang="less">
+    .DshNumber {
+        width: 100%;
+
+        .ivu-input-number-disabled .ivu-input-number-input {
+            color:#999;
+        }
+    }
+</style>

package/src/components/controls/base/DshNumberange.vue

@@ -0,0 +1,137 @@
+<template>
+    <!-- 组件无clearable -->
+    <div :class="`DshNumberange ycFormItem control-${mode}`">
+        <!-- 最小值 -->
+        <div class="DshNumberange-left">
+            <BriInputNumber
+                style="width: 100%;"
+                :class="{
+                    'DshNumberange-left-readonly': $isReadonly(canEdit, propsObj),
+                    'DshNumberange-left-disabled': $isDisabled(canEdit, propsObj)
+                }"
+                v-model="value[propsObj._key][0]"
+                :placeholder="$showPlaceholder(canEdit, propsObj) ? `请输入${propsObj._name}最小值` : ''"
+                :disabled="!finalCanEdit"
+                :formatter="formatterFunc"
+                :max="maxNum"
+                :min="minNum"
+                :precision="digit"
+                :step="step"
+                @on-change="change"
+            >
+                <div
+                    v-if="unitStr"
+                    slot="suffix"
+                    style="padding-right: 24px; padding-left: 8px; line-height: 30px; white-space: nowrap"
+                >
+                    {{ unitStr }}
+                </div>
+            </BriInputNumber>
+        </div>
+
+        <!-- 中 -->
+        <span class="DshNumberange-center"> — </span>
+
+        <!-- 最大值 -->
+        <div class="DshNumberange-right">
+            <BriInputNumber
+                style="width: 100%;"
+                :class="{
+                    'DshNumberange-right-readonly': $isReadonly(canEdit, propsObj),
+                    'DshNumberange-right-disabled': $isDisabled(canEdit, propsObj)
+                }"
+                v-model="value[propsObj._key][1]"
+                :placeholder="$showPlaceholder(canEdit, propsObj) ? `请输入${propsObj._name}最大值` : ''"
+                :disabled="!finalCanEdit"
+                :max="maxNum"
+                :min="minNum"
+                :formatter="formatterFunc"
+                :step="propsObj._step"
+                @on-change="change"
+            >
+                <div
+                    v-if="unitStr"
+                    slot="suffix"
+                    style="padding-right: 24px; padding-left: 8px; line-height: 30px; white-space: nowrap"
+                >
+                    {{ unitStr }}
+                </div>
+            </BriInputNumber>
+        </div>
+    </div>
+</template>
+
+<script>
+    import controlMixin from "../controlMixin.js";
+    import BriInputNumber from "./DshNumber/BriInputNumber/BriInputNumber.vue";
+
+    export default {
+        name: "DshNumberange",
+        mixins: [controlMixin],
+        components: {
+            BriInputNumber
+        },
+        props: {},
+        data () {
+            return {};
+        },
+        computed: {
+            selfPropsObj () {
+                return {
+                    ...this.propsObj
+                };
+            },
+            formatterFunc () {
+                if (this.propsObj._separator) {
+                    return this.$numToSeparator;
+                } else {
+                    return value => `${value}`;
+                }
+            },
+
+            maxNum () {
+                return this.selfPropsObj._max || this.selfPropsObj._max === 0 ? this.selfPropsObj._max : Infinity;
+            },
+            minNum () {
+                return this.selfPropsObj._min || this.selfPropsObj._min === 0 ? this.selfPropsObj._min : -Infinity;
+            },
+            // round, decimal, 为其他值不处理
+            round () {
+                return this.selfPropsObj._round;
+            },
+            digit () {
+                return this.round === "round"
+                    ? 0
+                    : this.round === "decimal"
+                        ? Number(this.selfPropsObj._digit || 2)
+                        : undefined;
+            },
+            numberFormat () {
+                return this.selfPropsObj._numberFormat;
+            },
+            unit () {
+                return this.selfPropsObj._unit;
+            },
+            unitStr () {
+                return this.numberFormat === "percent"
+                    ? "%"
+                    : this.unit
+                        ? `${this.unit}`
+                        : "";
+            },
+            separator () {
+                return this.selfPropsObj._separator;
+            },
+
+            step () {
+                return this.selfPropsObj._step;
+            }
+        },
+        created () {},
+        methods: {
+            change (...params) {
+                this.$emit("change", ...params);
+            }
+        }
+    };
+</script>

package/src/components/controls/base/DshPackage.vue

@@ -0,0 +1,72 @@
+<!-- 动态表单 -->
+<template>
+    <div class="DshPackage">
+        <div
+            class="DshPackage-edit"
+            v-if="canEdit"
+        >
+            <dsh-form
+                v-if="value[propsObj._key]"
+                class="reference-single-content-form"
+                :canEdit="finalCanEdit"
+                :formData="value[propsObj._key].data || {}"
+                :formList="value[propsObj._key].form || []"
+                @click.native="clickRow(val)"
+            ></dsh-form>
+            <div
+                v-else
+                class="DshPackage-edit-nodata"
+            ><span>暂无字段</span>
+            </div>
+        </div>
+
+        <div v-else>
+            <dsh-form
+                v-if="value[propsObj._key]"
+                class="reference-single-content-form"
+                :canEdit="finalCanEdit"
+                :formData="value[propsObj._key].data || {}"
+                :formList="value[propsObj._key].form || []"
+                @click.native="clickRow(val)"
+            ></dsh-form>
+            <div
+                v-else
+                class="DshPackage-nodata"
+            ><span>暂无数据</span>
+            </div>
+        </div>
+    </div>
+</template>
+<script>
+    import controlMixin from "../controlMixin.js";
+
+    export default {
+        name: "DshPackage",
+        mixins: [controlMixin],
+        components: {},
+        props: {
+            canEdit: {
+                type: Boolean,
+                default: true
+            },
+            formData: {
+                type: Object,
+                default () {
+                    return {};
+                }
+            },
+            formList: {
+                type: Array,
+                default () {
+                    return [];
+                }
+            }
+        },
+        data () {
+            return {};
+        },
+        computed: {},
+        created () {},
+        methods: {}
+    };
+</script>