bri-components 1.0.5 → 1.1.0

package/src/components/controls/senior/flatTable.vue

@@ -0,0 +1,131 @@
+<template>
+    <div class="flatTable">
+        <span v-if="isUnit" class="flatTable-unit">
+            <dsh-icons
+                :list="$getOperationList(['link'])"
+            ></dsh-icons>
+            <span class="flatTable-unit-text">
+                {{ val.list.length || 0 }}行
+            </span>
+        </span>
+
+        <!-- 设置默认值所用的控件 -->
+        <dsh-btn-modal v-else-if="propsObj._key === '_default'">
+            <bri-flat-table
+                :canEdit="finalCanEdit"
+                :columns="columns"
+                :data="val.list"
+                :rowDefault="val.rowDefault"
+                :propsObj="propsObj"
+                @change="change"
+            ></bri-flat-table>
+        </dsh-btn-modal>
+
+        <!-- 操作按钮 -->
+        <template v-else>
+            <dsh-buttons
+                class="flatTable-btns"
+                itemClass="flatTable-btns-item"
+                :list="$getOperationList(['canEnlarge'])"
+                @click="$dispatchEvent($event)"
+            ></dsh-buttons>
+
+            <bri-flat-table
+                ref="dshFatTable"
+                :canEdit="finalCanEdit"
+                :columns="columns"
+                :data="val.list"
+                :oldData="val.oldList"
+                :rowDefault="val.rowDefault"
+                :isShare="isShare"
+                :propsObj="propsObj"
+                @change="change"
+            ></bri-flat-table>
+
+            <dsh-modal
+                v-model="isEnlarge"
+                mode="custom"
+                :propsObj="modalPropsObj"
+            >
+                <bri-flat-table
+                    v-if="value[controlKey] && isEnlarge"
+                    :canEdit="finalCanEdit"
+                    :columns="columns"
+                    :data="val.list"
+                    :oldData="val.oldList"
+                    :rowDefault="val.rowDefault"
+                    :isShare="isShare"
+                    :propsObj="propsObj"
+                    @change="change"
+                ></bri-flat-table>
+            </dsh-modal>
+        </template>
+    </div>
+</template>
+
+<script>
+    import controlMixin from "../controlMixin.js";
+
+    export default {
+        name: "flatTable",
+        mixins: [controlMixin],
+        components: {},
+        props: {
+        },
+        data () {
+            return {
+                operationMap: {
+                    canEnlarge: {
+                        name: "全屏展示",
+                        type: "canEnlarge",
+                        icon: "md-expand",
+                        size: "small",
+                        btnType: "text",
+                        event: "enlarge"
+                    },
+                    link: {
+                        customIcon: "bico-internaltable"
+                    }
+                },
+                isEnlarge: false
+            };
+        },
+        computed: {
+            modalPropsObj () {
+                return {
+                    title: this.propsObj._name,
+                    fullscreen: true,
+                    showSlotClose: false,
+                    closable: true
+                };
+            },
+            val () {
+                // TODOS: 待定处理
+                return this.value[this.controlKey] || {
+                    list: [],
+                    oldList: [],
+                    rowDefault: {}
+                };
+            },
+            columns () {
+                return this.propsObj._subForm;
+            }
+        },
+        created () {},
+        methods: {
+            // 校验方法 -供外部使用
+            validate () {
+                return this.$refs.dshFatTable.validate();
+            },
+
+            change (...params) {
+                this.$emit("change", ...params);
+            },
+
+            // 打开全屏模态框
+            enlarge () {
+                this.isEnlarge = true;
+            }
+        }
+    };
+</script>

package/src/components/form/DshForm.vue

@@ -22,7 +22,6 @@
                     >
                         <dsh-formItem
                             ref="dshFormItem"
-                            :mode="mode"
                             :canEdit="canEdit"
                             :formData="formData"
                             :formItem="formItem"
@@ -38,7 +37,6 @@
                             @changeField="changeField"
                         >
                             <slot
-                                :mode="mode"
                                 :canEdit="canEdit"
                                 :formItem="formItem"
                                 :formData="formData"
@@ -97,7 +95,6 @@
         name: "DshForm",
         components: {},
         props: {
-            mode: String,
             canEdit: {
                 type: Boolean,
                 default: true

package/src/components/list/BriFlatTable.vue

@@ -0,0 +1,430 @@
+<template>
+    <div class="BriFlatTable">
+        <bri-table
+            class="BriFlatTable-main"
+            :propsObj="tablePropsObj"
+            :columns="showColumns"
+            :data="listData"
+            :footer-data="footerData"
+            @selectChange="changeSelect"
+            @selectAll="changeSelect"
+        ></bri-table>
+
+        <!-- 添加行 -->
+        <dsh-buttons
+            class="BriFlatTable-create"
+            :list="$getOperationList(['create'])"
+            @click="$dispatchEvent($event, null, null, listData)"
+        ></dsh-buttons>
+    </div>
+</template>
+
+<script>
+    export default {
+        name: "BriFlatTable",
+        props: {
+            canEdit: {
+                type: Boolean,
+                default: true
+            },
+            columns: {
+                type: Array,
+                default () {
+                    return [];
+                }
+            },
+            data: {
+                type: Array,
+                default () {
+                    return [];
+                }
+            },
+            oldData: {
+                type: Array,
+                default () {
+                    return [];
+                }
+            },
+            rowDefault: {
+                type: Object,
+                default () {
+                    return {};
+                }
+            },
+
+            outObj: {
+                type: Object,
+                default () {
+                    return {};
+                }
+            },
+            propsObj: {
+                type: Object,
+                default () {
+                    return {};
+                }
+            },
+            isShare: Boolean
+        },
+        model: {
+            prop: "data",
+            event: "change"
+        },
+        data () {
+            return {
+                showRuleMessage: false, // 显示校验文字
+                ruleRecordMap: {}
+            };
+        },
+        computed: {
+            tablePropsObj () {
+                return {
+                    maxHeight: this.contentHeight
+                };
+            },
+            listData () {
+                this.data.forEach(item => {
+                    !item._id && this.$set(item, "_id", this.$ObjectID().str);
+                });
+                return this.data;
+            },
+            footerData () {
+                let row = { _id: this.$ObjectID().str, custome: "汇总" };
+                this.filterColumns.map(col => {
+                    if (col._type === "number") {
+                        row[col._key] = this.$calNumList(this.listData.map(item => item[col._key]), col._summaryType, { ...col, _defaultDigit: 2 });
+                    }
+                });
+                return this.useSummary && this.listData.length ? [row] : [];
+            },
+            oldListData () {
+                this.oldData.forEach(item => {
+                    !item._id && this.$set(item, "_id", this.$ObjectID().str);
+                });
+                return this.oldData;
+            },
+
+            selfPropsObj () {
+                return {
+                    _contentHeight: 500,
+                    _useSelection: false, // 使用选择列
+                    _useIndex: true, // 使用序号列
+                    _useSummary: false, // 使用汇总行
+                    _disabledBtns: false, // 禁用增删按钮
+                    _disabledCreateBtn: false, // 置灰新增按钮，目前只内部使用，comp_web数据表配置页那块
+                    _disabledOldDataRow: false, // 置灰老数据行包含删除
+
+                    ...this.propsObj
+                };
+            },
+            contentHeight () {
+                return this.selfPropsObj._contentHeight;
+            },
+            useSelection () {
+                return this.selfPropsObj._useSelection;
+            },
+            useIndex () {
+                return this.selfPropsObj._useIndex;
+            },
+            useSummary () {
+                return this.selfPropsObj._useSummary;
+            },
+            disabledBtns () {
+                return this.selfPropsObj._disabledBtns;
+            },
+            disabledCreateBtn () {
+                return this.selfPropsObj._disabledCreateBtn;
+            },
+            disabledOldDataRow () {
+                return this.selfPropsObj._disabledOldDataRow;
+            },
+            useCampare () {
+                return !!this.oldListData.length;
+            },
+            filterColumns () {
+                return this.columns.filter(colItem => colItem._displayType !== "hide" && this.$isAdvRelyShow(colItem, this.outObj));
+            },
+            showColumns () {
+                const operationList = this.$getOperationList(["delete"]);
+                const showColumns = [
+                    ...(
+                        this.useSelection === true
+                            ? [
+                                {
+                                    field: "selection",
+                                    key: "selection",
+                                    type: "checkbox",
+                                    width: 66,
+                                    align: "center",
+                                    fixed: "left"
+                                }
+                            ]
+                            : []
+                    ),
+
+                    ...(
+                        this.useIndex === true
+                            ? [
+                                {
+                                    title: "序号",
+                                    field: "custome",
+                                    key: "customes",
+                                    width: 76,
+                                    align: "center",
+                                    fixed: "left",
+                                    renderBodyCell: ({ rowIndex }) => ++rowIndex
+                                }
+                            ]
+                            : []
+                    ),
+
+                    ...this.$transformToColumns(this.filterColumns.map(item => ({
+                        filter: undefined,
+                        sortBy: undefined,
+                        renderBodyCell: ({ row, column, rowIndex }, h) => {
+                            return [
+                                this.isShowCompare(column, row, this.oldListData[rowIndex])
+                                    ? h("Tooltip", {
+                                        class: "td-inner-compare",
+                                        props: {
+                                            content: this.$isEmptyData(this.oldListData[rowIndex][column._key]) ? "" : this.oldListData[rowIndex][column._key],
+                                            transfer: true,
+                                            maxWidth: 200,
+                                            placement: "top"
+                                        },
+                                        scopedSlots: {
+                                            default: props => h("dsh-unit", {
+                                                props: {
+                                                    canEdit: this.getUnitCanEdit(column, row),
+                                                    parentData: this.listData,
+                                                    formData: row,
+                                                    formItem: this.resetCol(item),
+                                                    isShare: this.isShare,
+                                                    rowIndex: rowIndex,
+                                                    isUnit: !this.finalCanEdit
+                                                },
+                                                on: {
+                                                    blur: () => this.controlBlur(null, column, row, arguments),
+                                                    change: () => this.$dispatchEvent(this.operationMap.changeVal, column, row, rowIndex, arguments)
+                                                }
+                                            })
+                                        }
+                                    })
+                                    : h("dsh-unit", {
+                                        props: {
+                                            canEdit: this.getUnitCanEdit(column, row),
+                                            parentData: this.listData,
+                                            formData: row,
+                                            formItem: this.resetCol(item),
+                                            isShare: this.isShare,
+                                            rowIndex: rowIndex,
+                                            isUnit: !this.finalCanEdit
+                                        },
+                                        on: {
+                                            blur: () => this.controlBlur(null, column, row, arguments),
+                                            change: () => this.$dispatchEvent(this.operationMap.changeVal, column, row, rowIndex, arguments)
+                                        }
+                                    }),
+                                !this.getRuleResult(column, row).bool &&
+                                    h("span", { class: "table-row-td-tip" }, this.getRuleResult(column, row).message)
+                            ];
+                        },
+                        renderHeaderCell: ({ column }, h) => {
+                            return h("span", [
+                                column._required && h("i", { style: { color: "#ed4014" } }, "*"),
+                                h("span", column.title),
+                                column._description &&
+                                    h("Tooltip", {
+                                        style: { display: "inline-block" },
+                                        props: {
+                                            content: column._description,
+                                            transfer: true,
+                                            maxWidth: 200
+                                        },
+                                        scopedSlots: {
+                                            default: props => h("i", { class: "table-head-description ivu-icon bico-font bico-explain" })
+                                        }
+                                    })
+                            ]);
+                        },
+                        ...item
+                    }))),
+
+                    ...(
+                        this.canEdit && operationList.length
+                            ? [
+                                {
+                                    title: "操作",
+                                    field: "operation",
+                                    key: "operation",
+                                    align: "center",
+                                    fixed: "right",
+                                    width: 100,
+                                    renderBodyCell: (params, h) => {
+                                        return h("dsh-buttons", {
+                                            props: {
+                                                list: operationList.map(btnItem => ({ ...btnItem, disabled: this.disabledOldDataRow && !params.row.__isCreate__ }))
+                                            },
+                                            on: {
+                                                click: (operationItem) => {
+                                                    this.$dispatchEvent(operationItem, params.row, params.index, this.listData);
+                                                }
+                                            }
+                                        });
+                                    }
+                                }
+                            ]
+                            : []
+                    )
+                ];
+                return showColumns;
+            },
+            selfRowDefault () {
+                return this.$filterObj(this.columns, this.rowDefault);
+            },
+            operationMap () {
+                const allOperationMap = {
+                    create: {
+                        name: "添加一行",
+                        type: "create",
+                        size: "default",
+                        long: true,
+                        disabled: !!this.disabledCreateBtn,
+                        event: "clickCreate",
+                        btnType: "default"
+                    },
+                    delete: {
+                        name: "删除",
+                        type: "delete",
+                        btnType: "errorText",
+                        icon: "ios-trash-outline",
+                        size: "small",
+                        disabled: false,
+                        event: "clickDelete"
+                    },
+                    // expand: {
+                    //     name: "展开",
+                    //     type: "expand",
+                    //     event: "clickExpand"
+                    // },
+                    changeVal: {
+                        name: "改变输入框值",
+                        type: "changeVal",
+                        event: "changeVal"
+                    }
+                };
+
+                return this.canEdit
+                    ? this.$categoryMapToMap(
+                        allOperationMap,
+                        null,
+                        this.disabledBtns ? ["create", "delete"] : []
+                    )
+                    : {};
+            }
+        },
+        created () {
+        },
+        methods: {
+            // 共外部使用
+            validate () {
+                this.showRuleMessage = true;
+
+                return this.listData.every(dataItem =>
+                    this.filterColumns.every(col => this.getRuleResult(col, dataItem, true).bool)
+                );
+            },
+            // 点击 -添加行
+            clickCreate (operationItem, row, index, list) {
+                const newRow = {
+                    ...this.$deepCopy(this.selfRowDefault),
+                    __isCreate__: true,
+                    _id: this.$ObjectID().str
+                };
+                const newRowIndex = index == null ? list.length : index + 1;
+                list.splice(newRowIndex, 0, newRow);
+
+                this.$forceUpdate(); // 自定义页中点击添加一行没有更新页面
+
+                this.change("createRow", null, newRow, newRowIndex);
+            },
+            // 点击 -删除行
+            clickDelete (operationItem, row, rowIndex, list) {
+                this.$Modal.confirm({
+                    title: "警告",
+                    content: "确定删除吗？",
+                    onOk: () => {
+                        list.splice(rowIndex, 1);
+
+                        this.change("deleteRow", null, row, rowIndex);
+                    }
+                });
+            },
+            changeSelect (list) {
+                this.$emit("selectChange", list);
+            },
+            // 表单控件值改变
+            changeVal (operationItem, col, row, rowIndex, params) {
+                this.$set(this.ruleRecordMap, `${row._id}dsh${col._key}`, { showRuleMessage: true });
+
+                this.change("changeVal", col, row, rowIndex, ...params);
+            },
+            // 表单控件失去焦点
+            controlBlur (operationItem, col, row, params) {
+                this.$set(this.ruleRecordMap, `${row._id}dsh${col._key}`, { showRuleMessage: true });
+            },
+            change (...params) {
+                this.$emit("change", { list: this.listData, rowDefault: this.rowDefault }, ...params);
+            },
+
+            /* --------------- 工具方法 ------------- */
+            resetCol (col) {
+                let obj = {
+                    select: {
+                        _optionKind: "dropdown"
+                    },
+                    checkbox: {
+                        _optionKind: "dropdown"
+                    }
+                };
+                return { ...col, ...(obj[col._type] || {}) };
+            },
+            getUnitCanEdit (col, row) {
+                return this.canEdit && // 是否是编辑状态
+                    // (!this.disabledOldDataRow || !!this.createRowMap[row._id]) && // 是否让老数据行置灰
+                    (!this.disabledOldDataRow || !!row.__isCreate__) && // 是否让老数据行置灰
+                (!col.dependRowCanEdit || row.canEdit !== false); // 在老数据行里某些列不可编辑
+            },
+            isShowCompare (col, row, oldRow = {}) {
+                return this.useCampare && ["number"].includes(col._type) &&
+                    !(this.$isEmptyData(row[col._key]) && this.$isEmptyData(oldRow[col._key])) &&
+                    row[col._key] !== oldRow[col._key];
+            },
+            // 是否显示 单元格校验提示文字
+            getRuleResult (col, row, showRuleMessage = this.showRuleMessage) {
+                if ((this.ruleRecordMap[`${row._id}dsh${col._key}`] || {}).showRuleMessage || showRuleMessage) {
+                    const val = row[col._key];
+                    const ruleConfig = this.$getFormTypeRuleConfig(col);
+                    // 为空 校验必填；不为空 格式校验 （不是必填也要校验格式）
+                    return this.$isEmptyData(val)
+                        ? {
+                            bool: !col._required,
+                            message: `${col._name}为必填项`
+                        }
+                        : ruleConfig.regs && ruleConfig.regs.length
+                            ? {
+                                bool: ruleConfig.regs.every(regItem => regItem.test(val)),
+                                message: col.regMessage || `${col._name}格式不正确`
+                            }
+                            : {
+                                bool: true
+                    };
+                } else {
+                    return {
+                        bool: true
+                    };
+                }
+            }
+        }
+    };
+</script>