bri-components 1.0.0

package/src/components/form/DshDefaultSearch.vue

@@ -0,0 +1,203 @@
+<template>
+    <div
+        class="DshDefaultSearch bri-scrollbar6"
+        :style="{
+            'margin-bottom': canUseFold ? '20px' : undefined
+        }"
+    >
+        <!-- 筛选表单 -->
+        <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">
+                    <Col
+                        :key="conditionItem._id"
+                        :span="conditionItem.formItem._span"
+                    >
+                    <dsh-formItem
+                        :key="conditionItem._id"
+                        class="DshDefaultSearch-item"
+                        :formData="conditionItem"
+                        :formItem="conditionItem.formItem"
+                        height="46"
+                        :labelStyle="labelStyle"
+                        :rowStyle="rowStyle"
+                        @change="change(conditionItem, arguments)"
+                    >
+                        <span
+                            slot="label"
+                            class="DshDefaultSearch-item-name"
+                        >
+                            {{ conditionItem.formItem._name }}
+                        </span>
+                    </dsh-formItem>
+                    </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"
+        >
+            <div class="DshDefaultSearch-fold-zhanwei"></div>
+            <Icon
+                :class="[
+                    'DshDefaultSearch-fold-icon',
+                    isSpreadStatus ? 'arrow-up' : 'arrow-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 {
+                conditionList: [],
+                isSpreadStatus: false, // 是否展开
+
+                rowStyle: {
+                    width: "calc(100% - 12px)"
+                },
+                labelStyle: {
+                    textAlign: "center",
+                    margin: 0,
+                    color: "#666666",
+                    border: "1px solid rgba(229, 229, 229, 1)",
+                    background: "rgba(245, 245, 245, 1)",
+                    padding: "5px 10px",
+                    borderRight: "none",
+                    height: "32px",
+                    boxSizing: "border-box",
+                    width: this.labelWidth + "px"
+                }
+            };
+        },
+        computed: {
+            searchFormList () {
+                return this.formList.filter(formItem => this.$formHasAbility(formItem, "canDefaultSearch"));
+            },
+
+            // 总span
+            allSpan () {
+                return this.searchFormList.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 == null
+                    ? false
+                    : this.allRowNum > this.showRowNum;
+            }
+        },
+        created () {
+            this.init();
+        },
+        methods: {
+            init () {
+                this.conditionList = this.searchFormList.map(formItem => {
+                    const initConditionItem = this.initValue.find(initItem => initItem.fieldKey === formItem._key);
+                    return this.createContionFunc(initConditionItem, formItem);
+                });
+            },
+            // 切换展开/折叠
+            toggleSpreadStatus () {
+                this.isSpreadStatus = !this.isSpreadStatus;
+            },
+
+            // 获取表单配置
+            getFormItem (formItem) {
+                return {
+                    ...this.formatFormItem(formItem),
+                    _line: true,
+                    _br: formItem._defaultSearchBr,
+                    _wrap: formItem._defaultSearchWrap,
+
+                    ...(
+                        // date、daterange类型的(formItem._type基本不会为daterange)
+                        ["date", "daterange"].includes(formItem._type)
+                            ? {
+                                _useShortcuts: false
+                            }
+                            // select、checkbox、以及switch（都会转成checkbox）类型的
+                            : ["switch", "select", "checkbox"].includes(formItem._type)
+                                ? {
+                                    _optionKind: "dropdown",
+                                    _useColor: false
+                                }
+                            // labels类型的
+                            : ["labels"].includes(formItem._type)
+                                ? {
+                                    mode: "defaultSearch"
+                                }
+                                : {}
+                    )
+                };
+            },
+            // 发生改动
+            change (conditionItem) {
+                const conditionList = this.transformConditions(this.conditionList).filter(item =>
+                    !!item.fieldValue.length
+                );
+
+                this.$emit("change", conditionList, conditionItem);
+            }
+        }
+    };
+</script>

package/src/components/form/DshForm.vue

@@ -0,0 +1,364 @@
+<template>
+    <Form
+        class="DshForm"
+        ref="form"
+        :model="formData"
+        :rules="showRules ? rules : {}"
+        @submit.native.prevent
+    >
+        <Row>
+            <template v-for="(formItem) in formList">
+                <i-col
+                    v-if="isShow(formItem, formData)"
+                    :key="formItem._key"
+                    :id="formItem._key"
+                    class="DshForm-item"
+                    :span="formItem._br ? 24 : (formItem._span || 24)"
+                >
+                    <FormItem
+                        :class="['DshForm-item-FormItem', formItemClass]"
+                        :prop="formItem._key"
+                        @click.native="clickControl(formItem)"
+                    >
+                        <dsh-formItem
+                            ref="dshFormItem"
+                            :mode="mode"
+                            :canEdit="canEdit"
+                            :formData="formData"
+                            :isShare="isShare"
+                            :formItem="formItem"
+                            :allFormList="allFormList"
+                            :changedFields="changedFields"
+                            :rowStyle="rowStyle"
+                            :labelStyle="labelStyle"
+                            :height="height"
+                            :label-width="labelWidth"
+                            :formControlClass="formControlClass"
+                            @change="change(formItem, arguments)"
+                            @refChange="refChange(formItem, arguments)"
+                            @changeField="changeField"
+                        >
+                            <slot
+                                :mode="mode"
+                                :canEdit="canEdit"
+                                :formItem="formItem"
+                                :formData="formData"
+                                :allFormList="allFormList"
+                            ></slot>
+
+                            <slot
+                                name="label"
+                                slot="label"
+                                :canEdit="canEdit"
+                                :formItem="formItem"
+                                :formData="formData"
+                                :allFormList="allFormList"
+                            ></slot>
+
+                            <slot
+                                name="extra"
+                                slot="extra"
+                                :canEdit="canEdit"
+                                :formItem="formItem"
+                                :formData="formData"
+                                :allFormList="allFormList"
+                            ></slot>
+
+                            <slot
+                                name="corner"
+                                slot="corner"
+                                :canEdit="canEdit"
+                                :formItem="formItem"
+                                :formData="formData"
+                                :allFormList="allFormList"
+                            ></slot>
+                        </dsh-formItem>
+                    </FormItem>
+                </i-col>
+
+                <!-- 换行 -->
+                <i-col
+                    v-if="formItem._wrap"
+                    :key="formItem._key + '_wrap'"
+                    style="min-height: 0px;"
+                    :span="24"
+                ></i-col>
+            </template>
+
+            <div
+                v-if="!formList.filter(formItem => isShow(formItem, formData)).length"
+                class="dsh-tip"
+            >{{ "---  无字段  ---" }}</div>
+        </Row>
+    </Form>
+</template>
+
+<script>
+    export default {
+        name: "DshForm",
+        components: {},
+        props: {
+            mode: String,
+            canEdit: {
+                type: Boolean,
+                default: true
+            },
+            formData: {
+                type: Object,
+                default () {
+                    return {};
+                }
+            },
+            formList: {
+                type: Array,
+                default () {
+                    return [];
+                }
+            },
+            monitorFormList: Array,
+            allFormList: {
+                type: Array,
+                default () {
+                    return [];
+                }
+            },
+            changedFields: Array,
+
+            rowStyle: {
+                type: Object,
+                default () {
+                    return {};
+                }
+            },
+            labelStyle: {
+                type: Object,
+                default () {
+                    return {};
+                }
+            },
+
+            height: [String, Number],
+            labelWidth: [String, Number],
+            formItemClass: String,
+            formControlClass: String,
+            isShare: Boolean,
+            showRules: {
+                type: Boolean,
+                default: true
+            }
+        },
+        data () {
+            return {
+                rules: {},
+                forceValidateTypes: ["select", "cascader", "regions", "cascaders", "file", "coordinates", "editor", "users", "departments", "labels", "flatTable", "reference", "referenceBy"],
+                ignoreProperties: [
+                    "_name", "_key", "_default", "_required", "_span", "_br", "_line", "_noLabel", "_clearable",
+                    "_disabledBtns", "_disabledOldDataRow"
+                ]
+            };
+        },
+        computed: {},
+        created () {
+            this.init();
+        },
+        methods: {
+            // 初始化
+            init () {
+                this.initMonitor();
+                this.initRules();
+            },
+            // 初始化监测
+            initMonitor () {
+                // 监测所有字段
+                (this.monitorFormList || this.formList).forEach(formItem => {
+                    this.$set(this.formData, formItem._key, this.formData[formItem._key]);
+                });
+            },
+            // 初始化校验
+            initRules () {
+                // 此处代码可以改，但写法不能改！不然会引起表单页面渲染完就自动校验
+                (this.monitorFormList || this.formList).reduce((rulesObj, formItem) => {
+                    rulesObj[formItem._key] = this.getRules(formItem);
+                    return rulesObj;
+                }, this.rules);
+            },
+
+            /* ------- 供外部使用 ---------- */
+            // 获取iview的form组件实例
+            getFormVDom () {
+                return this.$refs.form;
+            },
+            // 控件校验
+            validate (callback) {
+                let bool = true;
+                let errorRefs = [];
+
+                if (this.$refs.dshFormItem) {
+                    errorRefs = this.$refs.dshFormItem.filter(refItem => !refItem.validate());
+                    bool = !errorRefs.length;
+                } else {
+                    bool = true;
+                }
+                callback && callBack(bool, errorRefs.map(errorRefItem => errorRefItem.formItem));
+
+                return bool;
+            },
+
+            // 点击控件
+            clickControl (formItem) {
+                this.$emit("clickControl", formItem);
+            },
+            // 切换字段
+            changeField (...params) {
+                this.$emit("changeField", ...params);
+            },
+            // 发生改动
+            change (formItem, params) {
+                this.forceFormValidate(formItem, params);
+                this.$emit("change", formItem, ...params);
+            },
+            // 关联表相关的change
+            refChange (formItem, params) {
+                this.$emit("refChange", formItem, ...params);
+            },
+
+            /* -------- 工具类 -------- */
+            isShow (formItem, formData) {
+                // 寻找循环项
+                if (formItem._loop === true) {
+                    Object.entries({
+                        ...formData,
+                        _displayType: "show",
+                        canEdit: true
+                    }).forEach(arr => {
+                        !this.ignoreProperties.includes(arr[0]) && this.$set(formItem, arr[0], arr[1]);
+                    });
+                }
+
+                // 判断各项 依赖的值
+                if (formItem._displayType === "show") {
+                    return true;
+                } else if (formItem._displayType === "hide") {
+                    return false;
+                } else {
+                    if (
+                        (formItem._advRely && formItem._advRely.conditions && formItem._advRely.conditions.length) ||
+                        (formItem._rely && formItem._rely.length)
+                    ) {
+                        const isAccord = formItem._advRely && formItem._advRely.conditions && formItem._advRely.conditions.length
+                            ? this.$isAdvRelyAccord(formItem._advRely, formData)
+                            : this.$isRelyAccord(formItem, formData);
+
+                        formData[formItem._key] = isAccord === true
+                            ? formData[formItem._key] !== undefined
+                                ? formData[formItem._key]
+                                : this.$deepCopy(formItem._default)
+                            : undefined;
+
+                        return isAccord;
+                    } else {
+                        return true;
+                    }
+                }
+            },
+            getRules (formItem) {
+                let rules = [];
+                let ruleConfig = this.$getFormTypeRuleConfig(formItem);
+
+                // 格式校验 （不依赖必填）
+                if (ruleConfig.regs && ruleConfig.regs.length) {
+                    rules.push({
+                        message: formItem.regMessage || `${formItem._name}格式不正确`,
+                        trigger: "blur",
+                        transform: (val) => {
+                            if (this.$isEmptyData(val)) {
+                                return val;
+                            } else {
+                                return ruleConfig.regs.every(regItem => regItem.test(val)) && val;
+                            }
+                        },
+                        ...ruleConfig
+                    });
+                }
+                // 必填校验
+                if (formItem._required) {
+                    // 其他配置
+                    const subFieldsMap = {
+                        coordinates: {
+                            fields: {
+                                lnglat: {
+                                    required: true,
+                                    message: `${formItem._name}为必填项`,
+                                    type: "array"
+                                }
+                            }
+                        },
+                        flatTable: {
+                            fields: {
+                                list: {
+                                    required: true,
+                                    message: `${formItem._name}不能为空行！`,
+                                    type: "array"
+                                }
+                            }
+                        },
+                        referenceBy: {
+                            fields: {
+                                count: {
+                                    message: `${formItem._name}必须关联数据！`,
+                                    type: "number",
+                                    transform: (val) => {
+                                        if (val && val > 0) {
+                                            return val;
+                                        } else {
+                                            return false;
+                                        }
+                                    }
+                                }
+                            }
+                        }
+                    };
+
+                    rules.push({
+                        required: true,
+                        message: `${formItem._name}为必填项！`,
+                        trigger: "blur, change",
+                        type: "string",
+                        ...(subFieldsMap[formItem._type] || {}),
+                        ...ruleConfig
+                    });
+                }
+
+                return rules;
+            },
+            // 强行执行一些校验
+            forceFormValidate (curFormItem) {
+                if (curFormItem._required === true && this.forceValidateTypes.includes(curFormItem._type)) {
+                    this.$refs.form.validateField(curFormItem._key);
+                }
+            }
+        },
+        watch: {
+            formList () {
+                this.init();
+            }
+        }
+    };
+</script>
+
+<style lang="less" scoped>
+    .DshForm {
+
+    }
+</style>
+<style lang="less">
+    .DshForm {
+        &-item-FormItem {
+            margin-bottom: 0px!important;
+            // .ivu-form-item-content {
+            //     line-height: 1.5;
+            //     font-size: 18px;
+            // }
+        }
+    }
+</style>