bri-components 1.0.0

package/src/components/form/searchMixin.js

@@ -0,0 +1,205 @@
+export default {
+    components: {},
+    props: {
+        formList: {
+            type: Array,
+            default () {
+                return [];
+            }
+        },
+
+        dynamicFieldsMap: {
+            type: Object,
+            default () {
+                return {};
+            }
+        }
+    },
+    data () {
+        return {
+            fieldMap: this.$modFieldMap,
+            conditionFields: [
+                "_id", "logic", "conditions", "textSearch", "nativeSearch",
+                "fieldKey", "fieldType", "fieldValue", "fieldParams", "fieldOperator", "fieldSearch", "parameterType"
+            ]
+        };
+    },
+    computed: {
+        searchFormList () {
+            return this.formList.filter(formItem => this.$formHasAbility(formItem, "canSearch"));
+        }
+    },
+    created () { },
+    methods: {
+        /* -------- 方法 ----------- */
+        // 生成筛选条件的值
+        createContionFunc (initContion = { logic: "field" }, curFormItem, fieldKey) {
+            if (["field", undefined].includes(initContion.logic)) {
+                const formItem = curFormItem || this.searchFormList.find(formItem => formItem._key === fieldKey);
+
+                if (formItem) {
+                    const fieldData = this.fieldMap[formItem._type];
+                    const subFormList = formItem._subForm || [];
+
+                    const operators = fieldData[this.mode === "set" ? "operatorsSet" : this.mode === "rely" ? "operatorsRely" : "operators"] || fieldData.operators || [];
+                    const fieldOperator = initContion.fieldOperator || (operators[0] || {})._key;
+                    const fieldOperatorName = (operators.find(operatorItem => operatorItem._key === fieldOperator) || {}).name;
+
+                    const fieldValue = initContion.fieldValue || [];
+                    const dynamicList = this.dynamicFieldsMap[formItem._type] || [];
+                    const parameterType = initContion.parameterType || (!dynamicList.length || fieldValue.length ? "fixedText" : "dynamicText");
+
+                    return {
+                        _id: this.$ObjectID().str,
+                        logic: "field",
+                        fieldKey: formItem._key,
+                        fieldType: formItem._type,
+                        fieldValue: [],
+                        fieldOperator: fieldOperator,
+                        fieldParams: [],
+                        fieldSearch: {
+                            logic: "and",
+                            conditions: []
+                        },
+                        ...initContion,
+
+                        // 下面的是前端所用
+                        parameterType: parameterType,
+                        dynamicList: dynamicList,
+                        fieldOperatorName: fieldOperatorName,
+                        operators: operators,
+                        formItem: this.getFormItem(formItem),
+                        subFormList: subFormList,
+                        finished: false // 标记 reference类型请求form数据 是否完成状态
+                    };
+                } else {
+                    return {
+                        ...initContion,
+                        __isDelete__: true, // 前端用它标识对应字段已被删除的筛选项
+                        formItem: {
+                            __realKey__: initContion.fieldKey
+                        }
+                    };
+                }
+            } else if (["and", "or"].includes(initContion.logic)) {
+                return {
+                    logic: "and",
+                    conditions: [],
+                    ...initContion
+                };
+            } else if (["text"].includes(initContion.logic)) {
+                return {
+                    logic: "text",
+                    textSearch: "",
+                    ...initContion
+                };
+            } else if (["native"].includes(initContion.logic)) {
+                return {
+                    logic: "native",
+                    nativeSearch: {},
+                    ...initContion
+                };
+            } else {
+                return initContion;
+            }
+        },
+        // 获取表单配置
+        getFormItem (formItem) {
+            return {
+                ...this.formatFormItem(formItem),
+                ...(
+                    ["default", "rely"].includes(this.mode)
+                        ? (
+                            ["date", "daterange"].includes(formItem._type)
+                                ? {
+                                    _useShortcuts: false
+                                }
+                                : {}
+                        )
+                        : {}
+                ),
+                _line: false,
+                _span: 24,
+                _useColor: true
+            };
+        },
+        // 格式化表单配置，适合需要
+        formatFormItem (formItem) {
+            const fieldData = this.fieldMap[formItem._type];
+
+            return {
+                ...formItem,
+                ...(fieldData.searchProps || {}),
+                _key: "fieldValue",
+                __realKey__: formItem._key,
+                _description: undefined,
+                _required: false,
+                _br: false,
+                _wrap: false,
+                _enterType: undefined,
+                canEdit: true,
+                _data: ["switch"].includes(formItem._type)
+                    ? [
+                        {
+                            _key: "true",
+                            name: formItem._openText,
+                            color: "#87e8de"
+                        },
+                        {
+                            _key: "false",
+                            name: formItem._closeText,
+                            color: "#87e8de"
+                        }
+                    ]
+                    : formItem._data
+            };
+        },
+
+        // operator为子集且为reference类型，请求form
+        dealSubSearch (conditionItem) {
+            if (conditionItem.fieldOperator === "subSearch" && conditionItem.finished !== true) {
+                this.getModData(conditionItem.formItem, data => {
+                    conditionItem.finished = true;
+                    conditionItem.subFormList = data.screens[0].form;
+                });
+            }
+        },
+        // 加载 reference数据
+        getModData (obj, cb) {
+            this.$https({
+                url: {
+                    module: "sheet",
+                    name: "schema"
+                },
+                params: {
+                    _key: obj._ref,
+                    fields: obj._refFields
+                },
+                callback: data => {
+                    cb(data);
+                }
+            });
+        },
+
+        // 剔除conditions项里不要的属性
+        transformConditions (list = []) {
+            return list.map(item =>
+                this.conditionFields.reduce((obj, key) =>
+                    Object.assign(obj, {
+                        [key]: item[key]
+                            ? (
+                                key === "fieldSearch"
+                                    ? {
+                                        ...item[key],
+                                        conditions: this.transformConditions(item[key].conditions)
+                                    }
+                                    : key === "conditions"
+                                        ? this.transformConditions(item[key])
+                                        : item[key]
+                            )
+                            : item[key]
+                }), {})
+            );
+        }
+    }
+};

package/src/components/list/DshBox/DshBox.vue

@@ -0,0 +1,168 @@
+<template>
+    <div class="DshBox">
+        <div class="DshBox-list">
+            <component
+                :is="`Dsh${$firstUpperCase(mode)}`"
+                ref="list"
+                :data="data"
+                :columns="columns"
+                :fixTitle="fixTitle"
+                :ownColumns="ownColumns"
+                :operationList="operationList"
+                :extraOperationList="extraOperationList"
+                :propsObj="listPropsObj"
+                :changedFields="changedFields"
+                :isLoading="listPropsObj && listPropsObj.isLoading"
+                :noDataText="listPropsObj && listPropsObj.noDataText || '暂无数据...'"
+                @clickRow="clickRow"
+                @sortChange="changeSort"
+                @selectChange="changeSelect"
+                @selectAll="selectAll"
+                @select="select"
+                @groupScroll="groupScroll"
+                @groupLoad="groupLoad"
+                @dsh="dshEmit"
+            >
+                <slot
+                    name="col"
+                    slot="col"
+                    slot-scope="{ col }"
+                    :col="col"
+                ></slot>
+            </component>
+        </div>
+
+        <!-- 中间插槽 -->
+        <slot></slot>
+
+        <!-- 分页 -->
+        <div
+            v-if="!['panel', 'singleData'].includes(mode) && pagePropsObj"
+            class="DshBox-page"
+        >
+            <dsh-page
+                :mode="pageMode"
+                :total="total"
+                :propsObj="pagePropsObj"
+                @changePage="changePage"
+                @changePageSize="changePageSize"
+            ></dsh-page>
+        </div>
+    </div>
+</template>
+
+<script>
+    // 表格模式、竖向表格模式、卡片模式、看板模式
+    const tableTypes = ["table", "crossTable", "panel", "card", "list", "singleData"];
+    // 得到组件注册对象
+    function registerComponents (types) {
+        return types.reduce((obj, item) => {
+            const componentName = `Dsh${item.toString()[0].toUpperCase()}${item.toString().slice(1)}`;
+            return Object.assign(obj, {
+                [componentName]: () => import(`./${componentName}.vue`)
+            });
+        }, {});
+    };
+
+    export default {
+        name: "DshBox",
+        components: registerComponents(tableTypes),
+        props: {
+            mode: {
+                type: String,
+                default: "list",
+                validator: function (val) {
+                    return ["table", "crossTable", "panel", "card", "list", "singleData"].includes(val);
+                }
+            },
+
+            changedFields: Array,
+            data: Array,
+            columns: Array,
+            fixTitle: {
+                type: Boolean,
+                default: true
+            },
+            operationList: Array,
+            extraOperationList: Array,
+            listPropsObj: Object,
+            pageMode: String,
+            total: Number,
+            pagePropsObj: Object,
+            ownColumns: Array
+        },
+        data () {
+            return {};
+        },
+        computed: {},
+        created () {
+        },
+        methods: {
+            // 点击某行
+            clickRow (...params) {
+                this.$emit("clickRow", ...params);
+            },
+
+            // 改变选择项
+            changeSort (...params) {
+                this.$emit("sortChange", ...params);
+            },
+            // 改变选择项
+            changeSelect (...params) {
+                this.$emit("selectChange", ...params);
+            },
+            // 切换全选
+            selectAll (...params) {
+                this.$emit("selectAll", ...params);
+            },
+            // 切换选择
+            select (...params) {
+                this.$emit("select", ...params);
+            },
+            // 看板分组列表滚动事件
+            groupScroll (...params) {
+                this.$emit("groupScroll", ...params);
+            },
+            // 看板分组列表滚动至底部事件
+            groupLoad (...params) {
+                this.$emit("groupLoad", ...params);
+            },
+
+            // 转发
+            dshEmit (...params) {
+                this.$emit("dsh", ...params);
+            },
+            // 切换分页
+            changePage (...params) {
+                this.$emit("changePage", ...params);
+            },
+            // 切换分页条数
+            changePageSize (...params) {
+                this.$emit("changePageSize", ...params);
+            }
+        }
+    };
+</script>
+
+<style lang="less">
+    .DshBox {
+        width: 100%;
+        height: 100%;
+        display: flex;
+        flex-direction: column;
+
+        &-list {
+            width: 100%;
+            flex: 1;
+            min-height: 60px;
+            margin-bottom: 10px;
+            background: #fff;
+            overflow: auto;
+        }
+
+        &-page {
+            width: 100%;
+            height: 30px;
+        }
+    }
+</style>

package/src/components/list/DshBox/DshCard.vue

@@ -0,0 +1,219 @@
+<template>
+    <div class="DshCard">
+        <!-- 无数据 -->
+        <div v-if="!data.length" class="dsh-tip">{{noDataText}}</div>
+
+        <!-- 有数据 -->
+        <template v-else>
+            <div
+                class="DshCard-item"
+                v-for="(dataItem, dataIndex) in data"
+                :key="dataIndex"
+                @click="clickRow(dataItem)"
+            >
+                <!-- 下拉操作（定位css） -->
+                <dsh-dropdown
+                    class="DshCard-item-dropdown"
+                    :dropdownObj="dropdownObj"
+                    :list="operationList"
+                    @click="$dshEmit($event, dataItem, dataIndex)"
+                    @click.native.stop="0"
+                ></dsh-dropdown>
+
+                <!-- 背景图 -->
+                <div
+                    class="DshCard-item-image"
+                >
+                    <img :src="getCardBgImgSrc(dataItem)" alt="">
+                </div>
+
+                <!-- 内容 -->
+                <div class="DshCard-item-info">
+                    <!-- 标题 -->
+                    <div class="DshCard-item-info-title dsh-ellipsis">
+                        <Ctooltip
+                            placement="top"
+                            :transfer="true"
+                            :content="dataItem[propsObj.titleField]"
+                        >
+                            <div class="dsh-ellipsis">{{ dataItem[propsObj.titleField] }}</div>
+                        </Ctooltip>
+                    </div>
+
+                    <!-- 显示字段 -->
+                    <div
+                        class="DshCard-item-info-col unit"
+                        v-for="colItem in selfColumns"
+                        :key="colItem._key"
+                    >
+                        <!-- 左 label -->
+                        <Ctooltip
+                            class="unit-label"
+                            placement="top"
+                            :transfer="true"
+                            maxWidth="200"
+                            :content="colItem._name"
+                        >
+                            <span class="dsh-ellipsis">{{ colItem._name }}</span>
+                        </Ctooltip>
+                        <span class="unit-colon">：</span>
+
+                        <!-- 右 val -->
+                        <div class="unit-value dsh-ellipsis">
+                            <dsh-td-render
+                                v-if="colItem.render"
+                                :row="dataItem"
+                                :column="colItem"
+                                :index="0"
+                                :render="colItem.render"
+                            ></dsh-td-render>
+
+                            <div
+                                v-else-if="colItem.formatter"
+                                v-html="colItem.formatter(dataItem, 0)"
+                            ></div>
+
+                            <span v-else class="unit-value-text">{{ dataItem[colItem._key] }}</span>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </template>
+    </div>
+</template>
+
+<script>
+    export default {
+        name: "DshCard",
+        props: {
+            data: {
+                type: Array,
+                default () {
+                    return [];
+                }
+            },
+            columns: {
+                type: Array,
+                default () {
+                    return [];
+                }
+            },
+
+            propsObj: {
+                type: Object,
+                default () {
+                    return {};
+                }
+            },
+            operationList: {
+                type: Array,
+                default () {
+                    return [];
+                }
+            },
+            noDataText: {
+                type: String,
+                default: "暂无数据..."
+            }
+        },
+        data () {
+            return {
+                // 下拉菜单的配置
+                dropdownObj: {
+                    icon: "ios-more",
+                    size: 22,
+                    color: "#E9ECF4",
+                    showDropdownItemIcon: false
+                },
+                defaultImgObj: {
+                    url: this.$imageSrcMap.app.projectCard
+                },
+
+                getCardBgImgSrc (dataItem) {
+                    const fileList = dataItem[this.propsObj.imageField] || [];
+                    const imgObj = fileList.find(fileItem => fileItem.mimetype.includes("image")) || this.defaultImgObj;
+                    return imgObj.url;
+                }
+            };
+        },
+        computed: {
+            selfColumns () {
+                return this.columns.slice(0, 2);
+            }
+        },
+        created () {
+        },
+        methods: {
+            // 点击某行
+            clickRow (row) {
+                this.$emit("clickRow", row);
+            }
+        }
+    };
+</script>
+
+<style lang="less" scoped>
+    .DshCard {
+        display: flex;
+        flex-wrap: wrap;
+        background-color: #ffffff;
+        padding: 0 40px;
+        &-item {
+            width: 250px;
+            height: 210px;
+            box-sizing: border-box;
+            margin: 10px 16px 30px;
+            border-radius: 6px;
+            overflow: hidden;
+            box-shadow: 0px 4px 8px 0px rgba(222, 222, 222, 0.75);
+            cursor: pointer;
+            display: flex;
+            flex-direction: column;
+            position: relative;
+
+            &-dropdown {
+                position: absolute;
+                top: 5px;
+                right: 5px;
+            }
+            &-image {
+                padding-top: 20px;
+                height: 122px;
+            }
+            &-info {
+                flex: 1;
+                padding: 8px 15px;
+                overflow: hidden;
+                background: #F7FBFF;
+                &-title {
+                    font-size: 14px;
+                    font-weight: 600;
+                }
+                &-col {
+                    height: 24px;
+                }
+
+                .unit {
+                    display: flex;
+                    flex-direction: row;
+                    &-label {
+                        max-width: 60px;
+                        font-weight: 400;
+                        color: #515A6E;
+                    }
+                    &-colon {
+
+                    }
+                    &-value {
+                        flex: 1;
+                    }
+                }
+            }
+        }
+    }
+</style>
+<style lang="less">
+    .DshCard {
+
+    }
+</style>