bri-components 1.0.0

package/src/components/controls/base/textMultiple/MultipleInput.vue

@@ -0,0 +1,106 @@
+<template>
+    <div class="MutipleInput">
+        <Input
+            v-show="status === 'edit'"
+            v-model="curVal"
+            icon="ios-search"
+            :placeholder="selfPropsObj._placeholder"
+            @on-enter="clickConfirm"
+            @on-click="clickConfirm"
+        ></Input>
+        <div
+            v-show="status === 'show'"
+            class="MutipleInput-show"
+        >
+            <span
+                class="MutipleInput-show-content"
+                @click="clickAdd"
+            >
+                <span
+                    v-for="(val,index) in value[controlKey]"
+                    class="MutipleInput-show-content-item"
+                    :key="index"
+                >
+                    <span
+                        class="MutipleInput-show-content-item-content"
+                        @click.stop="clickEdit(val,index)"
+                    >
+                        {{val}}
+                    </span>
+                    <Icon
+                        class="MutipleInput-show-content-item-del"
+                        type="ios-close"
+                        size="20"
+                        @click.stop="clickDelete(val)"
+                    />
+                </span>
+            </span>
+            <Icon
+                class="MutipleInput-show-add"
+                type="md-create"
+                @click="clickAdd"
+            />
+        </div>
+    </div>
+</template>
+
+<script>
+    import controlMixin from "../../controlMixin.js";
+
+    export default {
+        name: "MutipleInput",
+        mixins: [controlMixin],
+        props: {
+        },
+        data () {
+            return {
+                status: "edit", // show
+                curVal: "",
+                curIndex: -1
+            };
+        },
+        computed: {
+            selfPropsObj () {
+                return {
+                    ...this.propsObj,
+                    ...this.commonDealPropsObj
+                };
+            }
+        },
+        created () {
+            this.status = this.value[this.controlKey] && this.value[this.controlKey].length ? "show" : "edit";
+        },
+        methods: {
+            clickConfirm () {
+                let val = this.curVal.trim();
+                if (val && !this.value[this.controlKey].includes(val)) {
+                    // 有值，且不存在于当前数组中
+                    if (this.curIndex < 0) {
+                        this.value[this.controlKey].push(val);
+                    } else {
+                        this.$set(this.value[this.controlKey], this.curIndex, val);
+                    }
+                }
+                this.curVal = "";
+                this.status = "show";
+                this.change();
+            },
+            clickEdit (val, index) {
+                this.curVal = val;
+                this.curIndex = index;
+                this.status = "edit";
+            },
+            clickAdd () {
+                this.curIndex = -1;
+                this.status = "edit";
+            },
+            clickDelete (val) {
+                this.value[this.controlKey] = this.value[this.controlKey].filter(i => i != val);
+                this.change();
+                if (!this.value[this.controlKey].length) {
+                    this.status = "edit";
+                }
+            }
+        }
+    };
+</script>

package/src/components/controls/controlMap.js

@@ -0,0 +1,94 @@
+const controlConfig = window.controlConfig || {
+    componentNameMap: {},
+    pathMap: {},
+    registerComponents: () => {
+        return {};
+    }
+};
+
+// TODO: 特别声明：每一个开发的控件必须要加一个change回调事件！
+const componentNameMap = {
+    // base类型
+    text: "DshInput",
+    textarea: "DshInput",
+    idcard: "DshInput",
+    email: "DshInput",
+    phone: "DshInput",
+    url: "DshInput",
+    password: "DshInput",
+    texts: "MultipleInput",
+    serialNumber: "YSerialNumber",
+    number: "DshNumber",
+    numberange: "DshNumberange",
+    date: "DshDate",
+    daterange: "DshDaterange",
+    switch: "DshSwitch",
+    select: "DshSelect",
+    checkbox: "DshCheckbox",
+    region: "DshCascader",
+    regions: "DshCascader",
+    cascader: "DshCascader",
+    cascaders: "DshCascader",
+    file: "ZUpload",
+    coordinates: "DshCoordinates",
+    editor: "DshEditor",
+    tag: "DshDivider",
+    labels: "DshLabels",
+    package: "DshPackage",
+
+    back: "DshBack",
+    undefined: "DshUndeveloped",
+
+    ...controlConfig.componentNameMap
+};
+
+// 组件相对路径映射图
+const pathMap = {
+    base: {
+        // DshInput: "./base/DshInput.vue", // 全局已注册
+        MultipleInput: "./base/textMultiple/MultipleInput.vue",
+        YSerialNumber: "./base/YSerialNumber.vue",
+        // DshNumber: "./base/DshNumber/DshNumber.vue", // 全局已注册
+        DshNumberange: "./base/DshNumberange.vue",
+        DshDate: "./base/DshDate.vue",
+        DshDaterange: "./base/DshDaterange.vue",
+        DshSwitch: "./base/DshSwitch.vue",
+        // DshSelect: "./base/DshSelect.vue", // 全局已注册
+        // DshCheckbox: "./base/DshCheckbox.vue", // 全局已注册
+        // DshCascader: "./base/DshCascader.vue", // 全局已注册
+        ZUpload: "./base/ZUpload/index.vue",
+        DshCoordinates: "./base/DshCoordinates.vue",
+        DshEditor: "./base/DshEditor.vue",
+        DshDivider: "./base/DshDivider.vue",
+        DshLabels: "./base/DshLabels.vue",
+        DshPackage: "./base/DshPackage.vue",
+
+        DshBack: "./base/DshBack.vue",
+        DshUndeveloped: "./base/DshUndeveloped.vue"
+    }
+};
+
+// 得到组件注册对象
+function registerComponents (map = pathMap) {
+    let loop = (map, obj) => {
+        return Object.entries(map).reduce((obj, arr) => {
+            if (Object.prototype.toString.call(arr[1]) === "[object Object]") {
+                return loop(arr[1], obj);
+            } else {
+                return Object.assign(obj, {
+                    [arr[0]]: () => import(`${arr[1]}`)
+                });
+            }
+        }, obj);
+    };
+    return {
+        ...loop(map, {}),
+        ...controlConfig.registerComponents()
+    };
+};
+
+export {
+    componentNameMap,
+    pathMap,
+    registerComponents
+};

package/src/components/controls/controlMixin.js

@@ -0,0 +1,84 @@
+export default {
+    props: {
+        mode: {
+            type: String,
+            default: "default"
+        },
+        canEdit: {
+            type: Boolean,
+            default: true
+        },
+        value: {
+            type: Object,
+            default () {
+                return {};
+            }
+        },
+        propsObj: {
+            type: Object,
+            default () {
+                return {};
+            }
+        },
+        isShare: Boolean
+    },
+    data () {
+        return {};
+    },
+    computed: {
+        compKey () {
+            return this.propsObj.compKey;
+        },
+        appKey () {
+            return this.propsObj.appKey;
+        },
+        entityKey () {
+            return this.propsObj.entityKey;
+        },
+        inTable () {
+            return !!this.propsObj.inTable;
+        },
+        controlKey () {
+            return this.propsObj._key;
+        },
+
+        finalCanEdit () {
+            return this.$canEdit(this.canEdit, this.propsObj);
+        },
+        commonDealPropsObj () {
+            const selectControlTypes = ["date", "switch", "select", "checkbox", "file", "region", "regions", "cascader", "cascaders", "coordinates", "users", "departments"];
+            return {
+                // TODO: 此处的请输入可能还有请选择之类的，待处理
+                _placeholder: this.$showPlaceholder(this.canEdit, this.propsObj)
+                    ? (this.propsObj._placeholder || `请${selectControlTypes.includes(this.propsObj._type) ? "选择" : "输入"}${this.propsObj._name}`)
+                    : "",
+                _clearable: this.finalCanEdit && (this.propsObj._clearable === undefined ? true : this.propsObj._clearable)
+            };
+        },
+        // 不同mode模式下readOnly 和disabled样式名
+        commonClass () {
+            let commonClass = `control-${this.mode}-${
+                this.$isReadonly(this.canEdit, this.propsObj)
+                    ? "readonly"
+                    : (
+                        this.$isDisabled(this.canEdit, this.propsObj)
+                            ? "disabled"
+                            : "edit"
+                    )
+            }`;
+            let otherClass = "";
+            if (this.mode === "rimless" && this.propsObj._line) {
+                // otherClass = `control-${this.mode}-span${this.propsObj._span}`;
+            }
+            return commonClass + " " + otherClass;
+        }
+    },
+    methods: {
+        change (...params) {
+            this.$emit("change", this.value[this.propsObj._key]);
+        },
+        refChange (...params) {
+            this.$emit("refChange", this.value[this.propsObj._key]);
+        }
+    }
+};

package/src/components/form/DshAdvSearchForm.vue

@@ -0,0 +1,341 @@
+<template>
+    <div class="DshAdvSearchForm">
+        <!-- 无可筛选字段 -->
+        <template v-if="searchFormList.length">
+            <!-- 筛选逻辑 -->
+            <div class="DshAdvSearchForm-logic">
+                <div class="DshAdvSearchForm-logic-title">筛选逻辑</div>
+                <dsh-select
+                    class="DshAdvSearchForm-logic-option"
+                    :value="value"
+                    :propsObj="selfLogicPropsObj"
+                    @change="change"
+                ></dsh-select>
+            </div>
+
+            <!-- 筛选条件 -->
+            <div class="DshAdvSearchForm-title">筛选条件</div>
+            <div class="DshAdvSearchForm-conditions">
+                <template v-for="(conditionItem, conditionIndex) in value.conditions">
+                    <!-- 'and', 'or' 循环模式 -->
+                    <div
+                        v-if="['and', 'or'].includes(conditionItem.logic)"
+                        :key="conditionItem._id"
+                        class="DshAdvSearchForm-conditions-loop"
+                    >
+                        <dsh-advSearch-form
+                            :isInner="true"
+                            :mode="mode"
+                            :value="conditionItem"
+                            :formList="searchFormList"
+                            :dynamicFieldsMap="dynamicFieldsMap"
+                            @change="change(conditionItem, arguments)"
+                        ></dsh-advSearch-form>
+
+                        <!-- 删除 -->
+                        <dsh-icons
+                            slot="corner"
+                            class="DshAdvSearchForm-conditions-delete"
+                            :list="$getOperationList(['deleteContion'])"
+                            @click="$dispatchEvent($event, conditionItem, conditionIndex, value.conditions)"
+                        />
+                    </div>
+
+                    <!-- field 正常模式 -->
+                    <dsh-formItem
+                        v-else-if="['field', undefined].includes(conditionItem.logic)"
+                        :key="conditionItem._id"
+                        class="DshAdvSearchForm-conditions-item"
+                        :formData="conditionItem"
+                        :formItem="conditionItem.formItem"
+                        height="80"
+                        @change="change(conditionItem, arguments)"
+                    >
+                        <template v-if="!conditionItem.__isDelete__">
+                            <!-- 子表的筛选，出现是有条件的，递归 -->
+                            <template v-if="conditionItem.fieldOperator === 'subSearch'">
+                                <dsh-advSearch-form
+                                    v-if="conditionItem.finished === true"
+                                    :isInner="true"
+                                    :mode="mode"
+                                    :value="conditionItem.fieldSearch"
+                                    :formList="conditionItem.subFormList"
+                                    :dynamicFieldsMap="dynamicFieldsMap"
+                                    @change="change(conditionItem, arguments)"
+                                ></dsh-advSearch-form>
+
+                                <div
+                                    v-else
+                                    class="DshAdvSearchForm-conditions-item-loading"
+                                >加载中……</div>
+                            </template>
+
+                            <!-- 动态筛选字段，出现是有条件的  -->
+                            <dsh-select
+                                v-else-if="conditionItem.parameterType === 'dynamicText'"
+                                class="DshAdvSearchForm-conditions-item-control"
+                                :value="conditionItem"
+                                :propsObj="{
+                                _name: `${conditionItem.formItem._name}的动态参数`,
+                                _key: 'fieldParams',
+                                _multiple: true,
+                                _data: conditionItem.dynamicList
+                            }"
+                                @change="change(conditionItem, arguments)"
+                            ></dsh-select>
+
+                            <!-- 文件类型时候啥都不显示 -->
+                            <div
+                                v-else-if="['file'].includes(conditionItem.fieldType)"
+                                class="DshAdvSearchForm-conditions-item-blank"
+                            >请选择右上角条件</div>
+                        </template>
+
+                        <!-- 右上角 -->
+                        <div
+                            v-if="!conditionItem.__isDelete__"
+                            slot="extra"
+                            class="DshAdvSearchForm-conditions-item-extra"
+                        >
+                            <!-- 动态or固定 筛选条件，出现是有条件的 -->
+                            <dsh-select
+                                v-if="conditionItem.dynamicList.length"
+                                class="extra-dynamic"
+                                :value="conditionItem"
+                                :propsObj="parameterPropsObj"
+                                @change="change(conditionItem, arguments)"
+                            ></dsh-select>
+
+                            <!-- operators 筛选条件 -->
+                            <dsh-dropdown
+                                v-if="conditionItem.operators.length"
+                                class="extra-operator"
+                                :list="conditionItem.operators"
+                                @click="$dispatchEvent(operationMap.selectOperator, conditionItem, conditionIndex, value.conditions, $event)"
+                            >
+                                <span class="extra-operator-wrap">
+                                    <span class="extra-operator-name">
+                                        {{ conditionItem.fieldOperatorName }}
+                                    </span>
+                                    <Icon
+                                        class="extra-operator-icon"
+                                        type="ios-arrow-down"
+                                    />
+                                </span>
+                            </dsh-dropdown>
+                        </div>
+
+                        <!-- 删除 -->
+                        <dsh-icons
+                            slot="corner"
+                            class="DshAdvSearchForm-conditions-delete"
+                            :list="$getOperationList(['deleteContion'])"
+                            @click="$dispatchEvent($event, conditionItem, conditionIndex, value.conditions)"
+                        />
+                    </dsh-formItem>
+
+                    <!-- text 关键字的模式 -->
+                    <div
+                        v-else-if="['text'].includes(conditionItem.logic)"
+                        :key="conditionItem._id"
+                    >
+                        {{ conditionItem.logic }}模式暂未开发
+                    </div>
+
+                    <!-- native 以及以后可能增加的模式 -->
+                    <div
+                        v-else
+                        :key="conditionItem._id"
+                    >
+                        {{ conditionItem.logic }}模式是不用开发的
+                    </div>
+                </template>
+            </div>
+
+            <!-- 按钮s -->
+            <div class="DshAdvSearchForm-btns">
+                <!-- 添加筛选项 -->
+                <dsh-dropdown
+                    class="DshAdvSearchForm-btns-field"
+                    menuClass="DshAdvSearchForm-btns-field-list"
+                    :list="searchFormList"
+                    :useSearch="true"
+                    @click="$dispatchEvent(operationMap.createContion, false, $event)"
+                >
+                    <dsh-buttons
+                        itemClass="DshAdvSearchForm-btns-field-create"
+                        :list="$getOperationList(['createContion'])"
+                    ></dsh-buttons>
+                </dsh-dropdown>
+
+                <!-- 添加循环层 -->
+                <dsh-buttons
+                    class="DshAdvSearchForm-btns-loop"
+                    itemClass="DshAdvSearchForm-btns-loop-create"
+                    :list="$getOperationList(['createLoopContion'])"
+                    @click="$dispatchEvent($event, true)"
+                ></dsh-buttons>
+            </div>
+        </template>
+
+        <!-- 无可筛选字段 -->
+        <div
+            v-else
+            class="DshAdvSearchForm-nodata"
+        >
+            当前无可筛选的字段
+        </div>
+    </div>
+</template>
+
+<script>
+    import searchMixin from "./searchMixin.js";
+
+    export default {
+        name: "DshAdvSearchForm",
+        mixins: [
+            searchMixin
+        ],
+        components: {},
+        props: {
+            mode: {
+                type: String,
+                default: "default",
+                validator: function (val) {
+                    // 用户态、 配置端、高级依赖、以及仪表盘乱用的地方
+                    return ["default", "set", "dashbord", "rely"].includes(val);
+                }
+            },
+            value: {
+                type: Object,
+                default () {
+                    return {
+                        logic: "and",
+                        conditions: []
+                    };
+                }
+            },
+
+            useLoop: {
+                type: Boolean,
+                default: true
+            },
+            isInner: {
+                type: Boolean,
+                default: false
+            }
+        },
+        data () {
+            return {
+                selfLogicPropsObj: {
+                    _name: "筛选逻辑",
+                    _key: "logic",
+                    _optionKind: "flat",
+                    _clearable: false,
+                    _data: [
+                        { _key: "and", name: "且" },
+                        { _key: "or", name: "或" }
+                    ]
+                },
+                parameterPropsObj: {
+                    _name: "参数类型",
+                    _key: "parameterType",
+                    _clearable: false,
+                    _size: "small",
+                    _data: [
+                        { _key: "fixedText", name: "固定文本" },
+                        { _key: "dynamicText", name: "动态文本" }
+                    ]
+                },
+
+                allOperationMap: {
+                    createContion: {
+                        name: "添加筛选条件",
+                        type: "createContion",
+                        icon: "md-add",
+                        size: this.isInner ? "small" : "default",
+                        long: true,
+                        event: "createContion"
+                    },
+                    createLoopContion: {
+                        name: "添加筛选层",
+                        type: "createLoopContion",
+                        icon: "md-add",
+                        size: this.isInner ? "small" : "default",
+                        long: true,
+                        event: "createContion"
+                    },
+                    deleteContion: {
+                        name: "删除筛选条件",
+                        type: "deleteContion",
+                        customIcon: "bico-delete",
+                        size: "16",
+                        event: "deleteContion"
+                    },
+                    selectOperator: {
+                        name: "选择筛选类型",
+                        type: "selectOperator",
+                        event: "selectOperator"
+                    }
+                }
+            };
+        },
+        computed: {
+            operationMap () {
+                return this.$categoryMapToMap(
+                    this.allOperationMap,
+                    undefined,
+                    this.useLoop === false ? ["createLoopContion"] : []
+                );
+            }
+        },
+        created () {
+            this.init();
+        },
+        methods: {
+            // 初始化
+            init () {
+                this.value.conditions = this.value.conditions.map(conditionItem => {
+                    const newConditionItem = this.createContionFunc(conditionItem, undefined, conditionItem.fieldKey);
+                    this.dealSubSearch(newConditionItem);
+
+                    return newConditionItem;
+                });
+            },
+
+            // 新增筛选条件
+            createContion (operationItem, isLoop, formItem) {
+                const newConditionItem = this.createContionFunc({ logic: isLoop ? "and" : "field" }, formItem);
+                this.value.conditions.push(newConditionItem);
+
+                this.change(newConditionItem);
+            },
+            // 删除筛选条件
+            deleteContion (operationItem, conditionItem, conditionIndex, list) {
+                list.splice(conditionIndex, 1);
+
+                this.change(conditionItem);
+            },
+            // 选择某控件的筛选类型
+            selectOperator (operationItem, conditionItem, conditionIndex, list, opertorItem) {
+                conditionItem.fieldOperator = opertorItem._key;
+                conditionItem.fieldOperatorName = opertorItem.name;
+                conditionItem.fieldSearch = {
+                    logic: "and",
+                    conditions: []
+                }; // 重置fieldSearch
+                this.dealSubSearch(conditionItem);
+
+                this.change(conditionItem);
+            },
+            // 发生改动
+            change (conditionItem) {
+                const advSearchObj = {
+                    ...this.value,
+                    conditions: this.transformConditions(this.value.conditions)
+                };
+                this.$emit("change", advSearchObj, conditionItem);
+            }
+        }
+    };
+</script>