bri-components 1.5.14 → 1.5.16

package/src/components/form/DshDefaultSearch.vue

@@ -1,260 +1,260 @@
-<template>
-    <div class="DshDefaultSearch">
-        <div
-            class="DshDefaultSearch-form"
-            :style="{
-                height: canUseFold && !isSpreadStatus ? `${46 * showRowNum}px` : undefined,
-                overflow: canUseFold && !isSpreadStatus ?  'hidden' : undefined
-            }"
-        >
-            <Row :gutter="10">
-                <template v-for="conditionItem in conditionList">
-                    <i-col
-                        :key="conditionItem._id"
-                        :span="conditionItem.formItem._span"
-                    >
-                        <dsh-form-unit
-                            :key="conditionItem._id"
-                            class="DshDefaultSearch-form-item"
-                            :formData="conditionItem"
-                            :formItem="conditionItem.formItem"
-                            height="46"
-                            :labelStyle="labelStyle"
-                            :rowStyle="rowStyle"
-                            @change="change(conditionItem, arguments)"
-                        >
-                            <span
-                                slot="label"
-                                class="DshDefaultSearch-form-item-name"
-                            >
-                                {{ conditionItem.formItem._name }}
-                            </span>
-                        </dsh-form-unit>
-                    </i-col>
-
-                    <!-- 换行 -->
-                    <div
-                        v-if="conditionItem.formItem._wrap"
-                        :key="conditionItem._id + '_wrap'"
-                        style="width: 100%"
-                    ></div>
-                </template>
-            </Row>
-        </div>
-
-        <!-- 展开/叠起 -->
-        <div
-            v-if="canUseFold"
-            class="DshDefaultSearch-fold"
-        >
-            <Icon
-                :class="[
-                    'DshDefaultSearch-fold-icon',
-                    `DshDefaultSearch-fold-icon-${isSpreadStatus ? 'up' : 'down'}`
-                ]"
-                custom="bico-font bico-shuangjiantou"
-                @click="toggleSpreadStatus"
-            />
-        </div>
-    </div>
-</template>
-
-<script>
-    import searchMixin from "./searchMixin.js";
-
-    export default {
-        name: "DshDefaultSearch",
-        mixins: [
-            searchMixin
-        ],
-        props: {
-            initValue: {
-                type: Array,
-                default () {
-                    return [];
-                }
-            },
-            labelWidth: {
-                type: Number,
-                default: 100
-            },
-            showRowNum: {
-                type: Number,
-                default: 2
-            }
-        },
-        data () {
-            return {
-                isSimpleSearch: true,
-
-                conditionList: [],
-                isSpreadStatus: false, // 是否展开
-
-                rowStyle: {
-                    width: "calc(100% - 12px)"
-                },
-                labelStyle: {
-                    width: this.labelWidth + "px",
-                    height: "32px",
-                    margin: 0,
-                    padding: "5px 10px",
-                    border: "1px solid rgba(229, 229, 229, 1)",
-                    borderRight: "none",
-                    backgroundColor: "rgba(245, 245, 245, 1)",
-                    boxSizing: "border-box",
-                    textAlign: "center",
-                    color: "#666666"
-                }
-            };
-        },
-        computed: {
-            canSearchFormList () {
-                return this.formList.filter(formItem =>
-                    this.$formHasAbility(formItem, "canDefaultSearch") && formItem._displayType !== "hide"
-                );
-            },
-
-            // 总span
-            allSpan () {
-                return this.canSearchFormList.reduce((totalSpan, formItem) => {
-                    const curSpan = formItem._span || 24;
-
-                    // 有余数，代表不是整行
-                    if (totalSpan % 24 && (totalSpan + curSpan) % 24) {
-                        const previousRow = Math.floor(totalSpan / 24);
-                        const nowRow = Math.floor((totalSpan + curSpan) / 24);
-
-                        // 或者用 previousRow < nowRow 判断
-                        return previousRow !== nowRow
-                            ? (previousRow + 1) * 24 + curSpan
-                            : totalSpan + curSpan;
-                    } else {
-                        return totalSpan + curSpan;
-                    }
-                }, 0);
-            },
-            allRowNum () {
-                return Math.ceil(this.allSpan / 24);
-            },
-            // 判断是否符合折叠情形，showRowNum为null时候不使用展开/收合，为0时候就是一行不露出来
-            canUseFold () {
-                return this.showRowNum == undefined
-                    ? false
-                    : this.allRowNum > this.showRowNum;
-            }
-        },
-        created () {
-            this.init();
-        },
-        methods: {
-            init () {
-                this.conditionList = this.canSearchFormList.map(formItem => {
-                    const initConditionItem = this.initValue.find(initItem => initItem.fieldKey === formItem._key);
-                    return this.createContionFunc(initConditionItem, formItem);
-                });
-            },
-            // 切换展开/折叠
-            toggleSpreadStatus () {
-                this.isSpreadStatus = !this.isSpreadStatus;
-            },
-            // 发生改动
-            change (conditionItem) {
-                const conditionList = this.transformConditions(this.conditionList).filter(item => !!item.fieldValue.length);
-
-                this.$emit("change", conditionList, conditionItem);
-            },
-
-            // 获取表单配置
-            getFormItem (formItem) {
-                return {
-                    ...this.formatFormItem(formItem),
-                    inSearch: false,
-                    inDftSearch: true,
-
-                    _line: true,
-                    _useColor: false,
-                    _optionKind: "dropdown"
-                };
-            }
-        }
-    };
-</script>
-
-<style lang="less" scoped>
-    .DshDefaultSearch {
-        background: #fff;
-        .dsh-flex-col-start-stretch();
-
-        &-form {
-            z-index: 2;
-
-            &-item {
-                padding: 6px 0px;
-                margin: 0px;
-
-                &-name {}
-            }
-        }
-
-        &-fold {
-            text-align: center;
-
-            &-icon {
-                width: 48px;
-                height: 20px;
-                background: #fff;
-                box-shadow: 0 0 16px 0 rgba(51, 51, 51, 0.1);
-                text-align: center;
-                line-height: 20px;
-                font-size: 14px;
-                color: #999999;
-                cursor: pointer;
-
-                &-up {
-                    transform: rotate(180deg);
-                }
-
-                &-down {
-
-                }
-            }
-        }
-    }
-</style>
-<style lang="less">
-    .DshDefaultSearch {
-        .ivu-input,
-        .ivu-input-number,
-        .ivu-select-selection,
-        .DshControlInput {
-            border-radius: 0px!important;
-        }
-
-        /* 为了消除表格类型字段检验后，外层出现.ivu-form-item-error的class，对默认筛选的控件样式的影响 */
-        > div {
-            .ivu-input,
-            .ivu-input-number,
-            .ivu-select-selection,
-            .DshControlInput {
-                border-color: #E5E5E6;
-
-                &-focused,
-                &:focus {
-                    border-color: @theme-hover;
-                    box-shadow: 0 0 0 2px @theme-focus;
-                }
-                &:hover {
-                    border-color: @theme-hover;
-                }
-            }
-            .ivu-select-visible .ivu-select-selection {
-                border-color: @theme-hover;
-                box-shadow: 0 0 0 2px @theme-focus;
-            }
-            .ivu-input-icon,
-            .ivu-select-arrow {
-                color: #808695;
-            }
-        }
-    }
-</style>
+<template>
+    <div class="DshDefaultSearch">
+        <div
+            class="DshDefaultSearch-form"
+            :style="{
+                height: canUseFold && !isSpreadStatus ? `${46 * showRowNum}px` : undefined,
+                overflow: canUseFold && !isSpreadStatus ?  'hidden' : undefined
+            }"
+        >
+            <Row :gutter="10">
+                <template v-for="conditionItem in conditionList">
+                    <i-col
+                        :key="conditionItem._id"
+                        :span="conditionItem.formItem._span"
+                    >
+                        <dsh-form-unit
+                            :key="conditionItem._id"
+                            class="DshDefaultSearch-form-item"
+                            :formData="conditionItem"
+                            :formItem="conditionItem.formItem"
+                            height="46"
+                            :labelStyle="labelStyle"
+                            :rowStyle="rowStyle"
+                            @change="change(conditionItem, arguments)"
+                        >
+                            <span
+                                slot="label"
+                                class="DshDefaultSearch-form-item-name"
+                            >
+                                {{ conditionItem.formItem._name }}
+                            </span>
+                        </dsh-form-unit>
+                    </i-col>
+
+                    <!-- 换行 -->
+                    <div
+                        v-if="conditionItem.formItem._wrap"
+                        :key="conditionItem._id + '_wrap'"
+                        style="width: 100%"
+                    ></div>
+                </template>
+            </Row>
+        </div>
+
+        <!-- 展开/叠起 -->
+        <div
+            v-if="canUseFold"
+            class="DshDefaultSearch-fold"
+        >
+            <Icon
+                :class="[
+                    'DshDefaultSearch-fold-icon',
+                    `DshDefaultSearch-fold-icon-${isSpreadStatus ? 'up' : 'down'}`
+                ]"
+                custom="bico-font bico-shuangjiantou"
+                @click="toggleSpreadStatus"
+            />
+        </div>
+    </div>
+</template>
+
+<script>
+    import searchMixin from "./searchMixin.js";
+
+    export default {
+        name: "DshDefaultSearch",
+        mixins: [
+            searchMixin
+        ],
+        props: {
+            initValue: {
+                type: Array,
+                default () {
+                    return [];
+                }
+            },
+            labelWidth: {
+                type: Number,
+                default: 100
+            },
+            showRowNum: {
+                type: Number,
+                default: 2
+            }
+        },
+        data () {
+            return {
+                isSimpleSearch: true,
+
+                conditionList: [],
+                isSpreadStatus: false, // 是否展开
+
+                rowStyle: {
+                    width: "calc(100% - 12px)"
+                },
+                labelStyle: {
+                    width: this.labelWidth + "px",
+                    height: "32px",
+                    margin: 0,
+                    padding: "5px 10px",
+                    border: "1px solid rgba(229, 229, 229, 1)",
+                    borderRight: "none",
+                    backgroundColor: "rgba(245, 245, 245, 1)",
+                    boxSizing: "border-box",
+                    textAlign: "center",
+                    color: "#666666"
+                }
+            };
+        },
+        computed: {
+            canSearchFormList () {
+                return this.formList.filter(formItem =>
+                    this.$formHasAbility(formItem, "canDefaultSearch") && formItem._displayType !== "hide"
+                );
+            },
+
+            // 总span
+            allSpan () {
+                return this.canSearchFormList.reduce((totalSpan, formItem) => {
+                    const curSpan = formItem._span || 24;
+
+                    // 有余数，代表不是整行
+                    if (totalSpan % 24 && (totalSpan + curSpan) % 24) {
+                        const previousRow = Math.floor(totalSpan / 24);
+                        const nowRow = Math.floor((totalSpan + curSpan) / 24);
+
+                        // 或者用 previousRow < nowRow 判断
+                        return previousRow !== nowRow
+                            ? (previousRow + 1) * 24 + curSpan
+                            : totalSpan + curSpan;
+                    } else {
+                        return totalSpan + curSpan;
+                    }
+                }, 0);
+            },
+            allRowNum () {
+                return Math.ceil(this.allSpan / 24);
+            },
+            // 判断是否符合折叠情形，showRowNum为null时候不使用展开/收合，为0时候就是一行不露出来
+            canUseFold () {
+                return this.showRowNum == undefined
+                    ? false
+                    : this.allRowNum > this.showRowNum;
+            }
+        },
+        created () {
+            this.init();
+        },
+        methods: {
+            init () {
+                this.conditionList = this.canSearchFormList.map(formItem => {
+                    const initConditionItem = this.initValue.find(initItem => initItem.fieldKey === formItem._key);
+                    return this.createContionFunc(initConditionItem, formItem);
+                });
+            },
+            // 切换展开/折叠
+            toggleSpreadStatus () {
+                this.isSpreadStatus = !this.isSpreadStatus;
+            },
+            // 发生改动
+            change (conditionItem) {
+                const conditionList = this.transformConditions(this.conditionList).filter(item => !!item.fieldValue.length);
+
+                this.$emit("change", conditionList, conditionItem);
+            },
+
+            // 获取表单配置
+            getFormItem (formItem) {
+                return {
+                    ...this.formatFormItem(formItem),
+                    inSearch: false,
+                    inDftSearch: true,
+
+                    _line: true,
+                    _useColor: false,
+                    _optionKind: "dropdown"
+                };
+            }
+        }
+    };
+</script>
+
+<style lang="less" scoped>
+    .DshDefaultSearch {
+        background: #fff;
+        .dsh-flex-col-start-stretch();
+
+        &-form {
+            z-index: 2;
+
+            &-item {
+                padding: 6px 0px;
+                margin: 0px;
+
+                &-name {}
+            }
+        }
+
+        &-fold {
+            text-align: center;
+
+            &-icon {
+                width: 48px;
+                height: 20px;
+                background: #fff;
+                box-shadow: 0 0 16px 0 rgba(51, 51, 51, 0.1);
+                text-align: center;
+                line-height: 20px;
+                font-size: 14px;
+                color: #999999;
+                cursor: pointer;
+
+                &-up {
+                    transform: rotate(180deg);
+                }
+
+                &-down {
+
+                }
+            }
+        }
+    }
+</style>
+<style lang="less">
+    .DshDefaultSearch {
+        .ivu-input,
+        .ivu-input-number,
+        .ivu-select-selection,
+        .DshControlInput {
+            border-radius: 0px!important;
+        }
+
+        /* 为了消除表格类型字段检验后，外层出现.ivu-form-item-error的class，对默认筛选的控件样式的影响 */
+        > div {
+            .ivu-input,
+            .ivu-input-number,
+            .ivu-select-selection,
+            .DshControlInput {
+                border-color: #E5E5E6;
+
+                &-focused,
+                &:focus {
+                    border-color: @theme-hover;
+                    box-shadow: 0 0 0 2px @theme-focus;
+                }
+                &:hover {
+                    border-color: @theme-hover;
+                }
+            }
+            .ivu-select-visible .ivu-select-selection {
+                border-color: @theme-hover;
+                box-shadow: 0 0 0 2px @theme-focus;
+            }
+            .ivu-input-icon,
+            .ivu-select-arrow {
+                color: #808695;
+            }
+        }
+    }
+</style>