bri-components 1.0.0

package/src/components/small/DshPage.vue

@@ -0,0 +1,98 @@
+<template>
+    <Page
+        :class="['DshPage',`DshPage-${mode}`, obj.class]"
+        :total="total"
+        :current="obj.page"
+        :page-size="obj.pagesize"
+        :page-size-opts="obj.pagesizeOpts"
+        :placement="obj.placement"
+        :size="size"
+        :simple="simple"
+        :show-total="obj.showTotal"
+        :show-elevator="obj.showElevator"
+        :show-sizer="obj.showSizer"
+        :transfer="obj.transfer"
+        :prev-text="obj.prevText"
+        :next-text="obj.nextText"
+        :disabled="obj.disabled"
+        @on-change="changePage"
+        @on-page-size-change="changePageSize"
+    />
+</template>
+<script>
+    export default {
+        name: "DshPage",
+        props: {
+            mode: {
+                type: String,
+                default: "small",
+                validator: function (value) {
+                    return ["simple", "default", "small"].indexOf(value) !== -1;
+                }
+            },
+            total: {
+                type: Number,
+                default: 0
+            },
+            propsObj: {
+                type: Object,
+                default () {
+                    return {};
+                }
+            }
+        },
+        data () {
+            return {};
+        },
+        computed: {
+            obj () {
+                let obj = {};
+                if (this.mode === "default") {
+                    obj = {
+                        showTotal: true,
+                        showElevator: false,
+                        showSizer: true
+                    };
+                } else if (this.mode === "small") {
+                    obj = {
+                        showTotal: true,
+                        showElevator: false,
+                        showSizer: true
+                    };
+                } else if (this.mode === "simple") {
+                    obj = {
+                        // // 简洁分页不能使用总数、电梯和切换数量
+                        // showTotal: true,
+                        // showElevator: false,
+                        // showSizer: false
+                    };
+                }
+                return {
+                    page: 1,
+                    pagesize: 10,
+                    pagesizeOpts: [10, 12, 15, 20, 30, 40, 50],
+                    transfer: false,
+                    placement: "bottom",
+                    ...obj,
+                    ...this.propsObj
+                };
+            },
+            size () {
+                return this.mode == "small" ? "small" : undefined;
+            },
+            simple () {
+                return this.mode == "simple" || false;
+            }
+        },
+        methods: {
+            // 换页
+            changePage (page) {
+                this.$emit("changePage", page);
+            },
+            // 换每页显示的条数
+            changePageSize (pagesize) {
+                this.$emit("changePageSize", pagesize);
+            }
+        }
+    };
+</script>

package/src/components/small/DshSteps.vue

@@ -0,0 +1,68 @@
+<template>
+    <div class="DshSteps">
+        <Steps
+            :current="current"
+            :direction="selfPropsObj._direction"
+            :status="selfPropsObj._status"
+            :size="selfPropsObj._size"
+        >
+            <Step
+                class="DshSteps-item"
+                v-for="(stepItem, stepIndex) in list"
+                :key="stepItem.type || stepItem._id || stepItem._key || stepIndex"
+                :status="stepItem.status"
+                :title="stepItem.name"
+                :content="stepItem.description"
+                :icon="stepItem.icon"
+                @click.native="clickStepItem(stepItem, stepIndex)"
+            ></Step>
+        </Steps>
+    </div>
+</template>
+
+<script>
+    export default {
+        name: "DshSteps",
+        props: {
+            list: {
+                type: Array,
+                default () {
+                    return [];
+                }
+            },
+            stepShowFunc: Function,
+            propsObj: {
+                type: Object,
+                default () {
+                    return {};
+                }
+            }
+        },
+        data () {
+            return {
+                current: 0 // 当前步骤，从 0 开始计数
+            };
+        },
+        computed: {
+            selfPropsObj () {
+                return {
+                    _status: "process", // 当前步骤的状态，可选值为wait、process、finish、error
+                    _size: undefined, // 步骤条的尺寸，可选值为small或者不写
+                    _direction: "vertical", // 步骤条的方向，可选值为horizontal（水平）或vertical（垂直）
+                    ...this.propsObj
+                };
+            }
+        },
+        created () {},
+        methods: {
+            clickStepItem (stepItem, stepIndex) {
+                if (!this.stepShowFunc || this.stepShowFunc(stepItem, stepIndex)) {
+                    if (this.current !== stepIndex) {
+                        this.current = stepIndex;
+                        this.$emit("change", stepItem, stepIndex);
+                    }
+                }
+            }
+        }
+    };
+</script>

package/src/components/small/DshTabs.vue

@@ -0,0 +1,227 @@
+
+<template>
+    <div class="DshTabs">
+        <dsh-draggable
+            v-model="list"
+            class="DshTabs-draggable"
+            :style="{ minWidth: `${list.length * 110}px` }"
+            @change="$dispatchEvent(operationMap.drag, $event.moved.element, null, list)"
+        >
+            <span
+                v-for="(item, index) in list"
+                :key="item._id"
+                :class="[
+                    'DshTabs-item',
+                    { 'DshTabs-item-normal': item.screenType !== 'all' },
+                    { 'DshTabs-item-active': item.screenType !== 'all' && !!curItem && curItem._id === item._id },
+                    { 'DshTabs-item-isEdit': item.isEdit }
+                ]"
+                @click="$dispatchEvent(operationMap.clickTab, item, index, list)"
+            >
+                <Input
+                    v-if="item.isEdit"
+                    :ref="item._id"
+                    class="DshTabs-item-input"
+                    v-model="item.name"
+                    :placeholder="`输入${theme}名字……`"
+                    @on-blur="$dispatchEvent(operationMap.nameBlur, item, index, list)"
+                    @on-change="$dispatchEvent(operationMap.update, item, index, list)"
+                    @click.native.stop="0"
+                />
+                <span
+                    v-else
+                    class="DshTabs-item-name dsh-ellipsis"
+                >{{ item.name }}</span>
+
+                <template v-if="!item.isEdit && item.screenType !== 'all'">
+                    <Icon
+                        v-for="operationItem in $getOperationList(['delete', 'clickUpdate'])"
+                        :key="operationItem.type"
+                        :class="[`DshTabs-item-${operationItem.type}`]"
+                        :type="operationItem.icon"
+                        :color="operationItem.color"
+                        :size="operationItem.size || 18"
+                        @click.native.stop="$dispatchEvent(operationItem, item, index, list)"
+                    />
+                </template>
+            </span><!--
+
+            添加
+        --><span
+                v-for="operationItem in $getOperationList(['create'])"
+                :key="operationItem.type"
+                class="DshTabs-item DshTabs-item-create"
+                @click="$dispatchEvent(operationItem, null, null, list)"
+            >
+                <Icon
+                    class="DshTabs-create-icon"
+                    :type="operationItem.icon"
+                    :color="operationItem.color"
+                    :size="operationItem.size"
+                />
+            </span>
+        </dsh-draggable>
+    </div>
+</template>
+
+<script>
+    export default {
+        name: "DshTabs",
+        props: {
+            theme: {
+                type: String,
+                default: "分组"
+            },
+            value: {
+                type: Array,
+                default () {
+                    return [];
+                }
+            },
+            canDeleFunc: Function
+        },
+        data () {
+            return {
+                curItem: null
+            };
+        },
+        computed: {
+            list: {
+                get () {
+                    return this.value.map(item => {
+                        this.$set(item, "isEdit", item.isEdit || false);
+                        return item;
+                    });
+                },
+                set (val) {
+                    this.$emit("input", val);
+                }
+            },
+            operationMap () {
+                return {
+                    clickTab: {
+                        name: "点击",
+                        type: "clickTab",
+                        event: "clickTab"
+                    },
+                    create: {
+                        name: "添加",
+                        type: "create",
+                        icon: "md-add",
+                        size: 16,
+                        event: "create"
+                    },
+                    delete: {
+                        name: "删除",
+                        type: "delete",
+                        icon: "md-trash",
+                        size: 12,
+                        color: "red",
+                        event: "delete"
+                    },
+                    update: {
+                        name: "修改",
+                        type: "update",
+                        event: "update"
+                    },
+                    drag: {
+                        name: "拖动",
+                        type: "drag",
+                        event: "drag"
+                    },
+
+                    clickUpdate: {
+                        name: "点击修改",
+                        type: "clickUpdate",
+                        icon: "md-create",
+                        size: 12,
+                        color: "#1b9aee",
+                        event: "clickUpdate"
+                    },
+                    nameBlur: {
+                        name: "输入框失去焦点",
+                        type: "nameBlur",
+                        event: "nameBlur"
+                    }
+                };
+            }
+        },
+        created () {
+            this.init();
+        },
+        methods: {
+            // 初始化
+            init () {
+                this.curItem = this.list[0];
+                this.select();
+            },
+
+            // 添加
+            create (operationItem, data, index, list) {
+                let item = {
+                    _id: this.$ObjectID().str,
+                    _key: this.$randomB36("FieldGroup"),
+                    name: `${this.theme}${this.list.length + 1}`,
+                    isEdit: false
+                };
+                list.push(item);
+
+                this.curItem = item;
+                this.select();
+                this.change();
+            },
+            // 删除
+            delete (operationItem, data, index, list) {
+                if (!this.canDeleFunc || this.canDeleFunc(data, index, list)) {
+                    list.splice(index, 1);
+
+                    if (this.curItem && this.curItem._id === data._id) {
+                        this.curItem = list[1];
+                        this.select();
+                    }
+                    this.change();
+                }
+            },
+            // 修改
+            update (operationItem, data, index, list) {
+                this.change();
+            },
+            // 拖动
+            drag (operationItem, data, index, list) {
+                this.change();
+            },
+
+            // 切换视图
+            clickTab (operationItem, data, index, list) {
+                if (data.screenType !== "all" && (!this.curItem || this.curItem._id !== data._id)) {
+                    this.curItem = data;
+                    this.select();
+                }
+            },
+            // 点击视图名
+            clickUpdate (operationItem, data, index) {
+                data.isEdit = true;
+                data.oldName = data.name;
+
+                this.$nextTick(() => {
+                    this.$refs[data._id] && this.$refs[data._id][0].focus();
+                });
+            },
+            // 输入框失去焦点
+            nameBlur (operationItem, data, index) {
+                data.isEdit = false;
+                data.name = data.name || data.oldName;
+            },
+
+            // 当前值change回调事件
+            select () {
+                this.$emit("select", this.curItem);
+            },
+            // 标记改变回调事件
+            change () {
+                this.$emit("input", this.list);
+                this.$emit("change", this.list);
+            }
+        }
+    };
+</script>

package/src/components/small/DshTags.vue

@@ -0,0 +1,58 @@
+<template>
+    <div class="DshTags">
+        <Tag
+            v-for="(tagItem, tagIndex) in list"
+            :key="tagIndex"
+            :name="tagIndex"
+            :type="propsObj.type"
+            :closable="propsObj.closable === false ? false : true"
+            :checkable="propsObj.checkable"
+            :checked="propsObj.checked"
+            :color="propsObj.color || 'default'"
+            :fade="propsObj.fade || false"
+            :size="propsObj.size || 'medium'"
+            @on-close="deleteTag($event, tagItem, tagIndex)"
+            @on-change="changeChecked"
+        >
+            <slot :tagItem="tagItem">
+                {{ tagItem }}
+            </slot>
+        </Tag>
+    </div>
+</template>
+
+<script>
+    export default {
+        name: "DshTags",
+        props: {
+            list: {
+                type: Array,
+                default () {
+                    return [];
+                }
+            },
+            propsObj: {
+                type: Object,
+                default () {
+                    return {};
+                }
+            }
+        },
+        data () {
+            return {};
+        },
+        computed: {},
+        created () {},
+        methods: {
+            // 删除标签
+            deleteTag (event, item, index) {
+                this.list.splice(index, 1);
+                this.$emit("delete", item, index);
+            },
+            // 改变标签状态
+            changeChecked (checked, name) {
+
+            }
+        }
+    };
+</script>

package/src/components/small/DshTdRender.js

@@ -0,0 +1,21 @@
+export default {
+    name: "DshTdRender",
+    functional: true,
+    props: {
+        row: Object,
+        index: Number,
+        render: Function,
+        column: {
+            type: Object,
+            default: null
+        }
+    },
+    render: (h, ctx) => {
+        const params = {
+            row: ctx.props.row,
+            index: ctx.props.index
+        };
+        if (ctx.props.column) params.column = ctx.props.column;
+        return ctx.props.render(h, params);
+    }
+};

package/src/components/small/DshTitle.vue

@@ -0,0 +1,36 @@
+<template>
+    <div class="DshTitle">
+        <slot name="prepend"></slot>
+        <Icon
+            class="DshTitle-icon"
+            :type="propsObj.icon"
+            :custom="propsObj.customIcon ? `bico-font ' ${propsObj.customIcon}` : undefined"
+            :color="propsObj.color"
+            :size="propsObj.size || 14"
+        />
+        <slot>
+            <span class="DshTitle-name">{{ propsObj.name || propsObj._name }}</span>
+            <slot name="append"></slot>
+        </slot>
+    </div>
+</template>
+
+<script>
+    export default {
+        name: "DshTitle",
+        props: {
+            propsObj: {
+                type: Object,
+                default () {
+                    return {};
+                }
+            }
+        },
+        data () {
+            return {};
+        },
+        computed: {},
+        created () {},
+        methods: {}
+    };
+</script>

package/src/components/small/render.js

@@ -0,0 +1,20 @@
+export default {
+    name: "DshRender",
+    functional: true,
+    props: {
+        // formItem: {
+        //     type: Object,
+        //     default () {}
+        // },
+        render: {
+            type: Function,
+            default () {}
+        }
+    },
+    data () {
+        return {};
+    },
+    render: (h, ctx) => {
+        return ctx.props.render(h, ctx.props, ctx);
+    }
+};

package/src/components/unit/DshFormItem.vue

@@ -0,0 +1,157 @@
+<template>
+    <div
+        :class="[
+            'DshFormItem',
+            { 'DshFormItem-required': formItem._required&&canEdit },
+            { 'DshFormItem-line': formItem._line },
+            `DshFormItem-${mode}`,
+            `DshFormItem-${formItem._type}`,
+            formControlClass,
+        ]"
+        :style="{
+            width: `calc(${(formItem._br ? (formItem._span || 24)/24 : 1) * 100}% - 12px)`,
+            height: formItem._br || (formItem._span || 24) === 24 ? undefined : `${height}px`,
+            minHeight: `${46}px`,
+            alignItems: formItem._labelAlignItems || 'center',
+            ...rowStyle
+        }"
+    >
+        <!-- label -->
+        <div
+            v-if="!formItem._noLabel"
+            class="DshFormItem-label"
+            :style="[
+                selfLabelStyle,
+                { justifyContent: formItem._labelAlign }
+            ]"
+        >
+            <span
+                class="DshFormItem-label-left"
+                :style="labelLeftStyle"
+            >
+                <Ctooltip
+                    :content="formItem._name"
+                    transfer
+                >
+                    <span class="DshFormItem-label-name dsh-ellipsis">
+                        <slot name="label">
+                            {{ formItem._name }}
+                            <template v-if="changedFields && changedFields.includes(formItem._key)">
+                                <span class="DshFormItem-label-name-sign">！有更新</span>
+                            </template>
+                        </slot>
+                    </span>
+                </Ctooltip>
+            </span>
+
+            <span
+                v-if="canEdit || formItem._alwaysShowExtra"
+                class="DshFormItem-label-right"
+            >
+                <slot name="extra">
+                    <Ctooltip
+                        :content="formItem._description"
+                        transfer
+                        style="height: 14px;"
+                    >
+                        <span class="DshFormItem-label-description dsh-ellipsis">
+                            {{ formItem._description && `* ${formItem._description}` }}
+                        </span>
+                    </Ctooltip>
+                </slot>
+            </span>
+        </div>
+
+        <!-- 控件 -->
+        <div
+            class="DshFormItem-control"
+            :style="{
+                justifyContent: formItem._controlAlign
+            }"
+        >
+            <!-- 控件位置放置的dom -->
+            <slot name="control"></slot>
+
+            <slot>
+                <component
+                    ref="control"
+                    :is="componentNameMap[formItem._type] || 'DshUndeveloped'"
+                    :mode="mode"
+                    :isShare="isShare"
+                    :canEdit="canEdit"
+                    :value="formData"
+                    :propsObj="formItem"
+                    :allFormList="allFormList"
+                    @change="change"
+                    @refChange="refChange"
+                    @changeField="changeField"
+                ></component>
+            </slot>
+        </div>
+
+        <!-- 角插槽 -->
+        <slot name="corner"></slot>
+    </div>
+</template>
+
+<script>
+    import unitMixin from "./unitMixin.js";
+
+    export default {
+        name: "DshFormItem",
+        mixins: [unitMixin],
+        props: {
+            changedFields: Array,
+
+            // 实际最精确值是74px（label:30px, control:32px, 上下padding各: 6px，因为ivu-form-item-content里line-height: 32px导致有问题，故先76px
+            height: {
+                type: [String, Number],
+                default: "76"
+            },
+            rowStyle: {
+                type: Object,
+                default () {
+                    return {};
+                }
+            },
+            labelStyle: {
+                type: Object,
+                default () {
+                    return {};
+                }
+            },
+
+            labelWidth: [String, Number],
+            formControlClass: String,
+            isShare: Boolean
+        },
+        data () {
+            return {};
+        },
+        computed: {
+            selfLabelStyle () {
+                return {
+                    width: this.labelWidth + "px",
+                    ...this.labelStyle
+                    // marginRight: "20px"
+                };
+            },
+            labelLeftStyle () {
+                return {
+                    minWidth: this.labelWidth + "px"
+                };
+            }
+        },
+        created () {},
+        methods: {
+            // 校验方法 -供外部使用
+            validate () {
+                return !this.$refs.control.validate || this.$refs.control.validate();
+            },
+
+            changeField (...params) {
+                this.$emit("changeField", ...params);
+            }
+        }
+    };
+</script>