bri-components 1.4.93 → 1.4.95

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

@@ -1,239 +1,239 @@
-<template>
-    <div class="DshTable">
-        <bri-table
-            :data="data"
-            :columns="selfColumns2"
-            :propsObj="propsObj"
-            :isLoading="isLoading"
-            :noDataText="noDataText"
-            @changeSelect="changeSelect"
-            @selectAll="changeSelect"
-            @click-row="clickRow"
-            @changeSort="changeSort"
-        ></bri-table>
-    </div>
-</template>
-
-<script>
-    export default {
-        name: "DshTable",
-        props: {
-            data: {
-                type: Array,
-                default () {
-                    return [];
-                }
-            },
-            columns: {
-                type: Array,
-                default () {
-                    return [];
-                }
-            },
-            ownColumns: {
-                type: Array,
-                default () {
-                    return [];
-                }
-            },
-            operationList: {
-                type: Array,
-                default () {
-                    return [];
-                }
-            },
-            propsObj: {
-                type: Object,
-                default () {
-                    return {};
-                }
-            },
-
-            isLoading: {
-                type: Boolean,
-                default: false
-            },
-            noDataText: String
-        },
-        data () {
-            return {
-                selfColumns2: []
-            };
-        },
-        computed: {
-            multiple () {
-                return !!this.propsObj.multiple;
-            },
-            maxBtnNum () {
-                return Math.max(this.propsObj.maxBtnNum || 4, 2);
-            },
-            selfOperationList () {
-                const getOperationItemMaxWidth = (operationItem) => {
-                    // 字宽
-                    return Math.max(
-                        ...(operationItem._name_ || operationItem.name)
-                            .split("/")
-                            .map(item => item.length * (operationItem.size === "small" ? 12 : 14))
-                    ) + (
-                        operationItem.icon || operationItem.customIcon ? 25 : 0
-                    );
-                };
-
-                return this.operationList.map(operationItem => {
-                    return {
-                        ...operationItem,
-                        width: operationItem.width || getOperationItemMaxWidth(operationItem),
-                        style: {
-                            ...(
-                                (operationItem._name_ || operationItem.name).split("/").length > 1
-                                ? { width: `${getOperationItemMaxWidth(operationItem)}px` }
-                                : {}
-                            ),
-                            ...(
-                                typeof operationItem.style === "object"
-                                    ? operationItem.style
-                                    : typeof operationItem.style === "string"
-                                        ? operationItem.style.split(";").reduce((styleObj, styleItem) => {
-                                            if (styleItem) {
-                                                const property = styleItem.split(":")[0];
-                                                const val = styleItem.split(":")[1];
-
-                                                return {
-                                                    ...styleObj,
-                                                    [property]: val
-                                                };
-                                            }
-                                            else {
-                                                return styleObj;
-                                            }
-                                        }, {})
-                                        : {}
-                            )
-                        }
-                    };
-                });
-            },
-
-            selfColumns () {
-                return this.ownColumns.length
-                    ? this.ownColumns
-                    : [
-                        ...(this.multiple ? [this.selectionColumn] : []),
-                        this.indexColumn,
-                        ...this.columns,
-                        ...(this.selfOperationList.length ? [this.operationColumn] : [])
-                ];
-            },
-            selectionColumn () {
-                return {
-                    _key: "__selection__",
-                    key: "__selection__",
-                    field: "__selection__",
-                    type: "checkbox", // 内置类型
-                    width: 50,
-                    align: "center",
-                    fixed: "left"
-                };
-            },
-            indexColumn () {
-                return {
-                    title: "序号",
-                    _key: "__index__",
-                    key: "__index__",
-                    field: "__index__",
-                    width: 60,
-                    align: "center",
-                    fixed: "left",
-                    renderBodyCell: ({ row, rowIndex, column }, h) => {
-                        return ++rowIndex;
-                    }
-                };
-            },
-            operationColumn () {
-                return {
-                    title: "操作",
-                    _key: "__operation__",
-                    key: "__operation__",
-                    field: "__operation__",
-                    align: "center",
-                    fixed: "right",
-                    width: Math.max(
-                        // 漏在外部按钮的宽度
-                        this.selfOperationList
-                            .slice(0, this.selfOperationList.length > this.maxBtnNum ? this.maxBtnNum - 1 : this.selfOperationList.length)
-                            .reduce((total, operationItem) => total + operationItem.width + 9, 0) +
-                            (this.selfOperationList.length > this.maxBtnNum ? 70 : 0) + // 出现更多按钮的宽度
-                            (this.selfOperationList.length > 0 ? 40 : 0) + // 操作列的padding
-                            4 // 留出4px空间，避免麻烦问题
-                        , 80
-                    ),
-                    renderBodyCell: (params, h) => {
-                        const totalOperationList = this.selfOperationList.map(operationItem => {
-                            return {
-                                ...operationItem,
-                                ...(
-                                    operationItem.operationFunc
-                                    ? operationItem.operationFunc(operationItem, params.row, params.index, this.selfOperationList)
-                                    : {}
-                                )
-                            };
-                        });
-
-                        // TODO: 注意此处totalOperationList用的一定是表格行显示最多的操作按钮数组，有改动注意看此备注！！！
-                        return h("dsh-buttons", {
-                            class: "bri-table-td-operation",
-                            props: {
-                                list: totalOperationList,
-                                maxFlatNum: this.selfOperationList.length > this.maxBtnNum ? this.maxBtnNum - 1 : this.selfOperationList.length,
-                                itemClass: "bri-table-td-operation-btn"
-                            },
-                            on: {
-                                click: (operationItem) => {
-                                    this.$dshEmit(operationItem, params.row, params.index);
-                                }
-                            },
-                            nativeOn: {
-                                click: (e) => {
-                                    e.stopPropagation();
-                                }
-                            }
-                        });
-                    }
-                };
-            }
-        },
-        created () {
-            this.selfColumns2 = this.selfColumns;
-        },
-        methods: {
-            // 点击某行
-            clickRow (...params) {
-                this.$emit("clickRow", ...params);
-            },
-
-            // 改变选择项
-            changeSort (...params) {
-                this.$emit("changeSort", ...params);
-            },
-            // 改变选择项
-            changeSelect (...params) {
-                this.$emit("changeSelect", params[0].map(item => item._id), ...params);
-            }
-            // // 切换全选
-            // selectAll (...params) {
-            //     this.$emit("selectAll", ...params);
-            // },
-            // // 切换选择
-            // select (...params) {
-            //     this.$emit("select", ...params);
-            // },
-        }
-    };
-</script>
-
-<style lang="less" scoped>
-    .DshTable {
-        width: 100%;
-        height: 100%;
-    }
-</style>
+<template>
+    <div class="DshTable">
+        <bri-table
+            :data="data"
+            :columns="selfColumns2"
+            :propsObj="propsObj"
+            :isLoading="isLoading"
+            :noDataText="noDataText"
+            @changeSelect="changeSelect"
+            @selectAll="changeSelect"
+            @click-row="clickRow"
+            @changeSort="changeSort"
+        ></bri-table>
+    </div>
+</template>
+
+<script>
+    export default {
+        name: "DshTable",
+        props: {
+            data: {
+                type: Array,
+                default () {
+                    return [];
+                }
+            },
+            columns: {
+                type: Array,
+                default () {
+                    return [];
+                }
+            },
+            ownColumns: {
+                type: Array,
+                default () {
+                    return [];
+                }
+            },
+            operationList: {
+                type: Array,
+                default () {
+                    return [];
+                }
+            },
+            propsObj: {
+                type: Object,
+                default () {
+                    return {};
+                }
+            },
+
+            isLoading: {
+                type: Boolean,
+                default: false
+            },
+            noDataText: String
+        },
+        data () {
+            return {
+                selfColumns2: []
+            };
+        },
+        computed: {
+            multiple () {
+                return !!this.propsObj.multiple;
+            },
+            maxBtnNum () {
+                return Math.max(this.propsObj.maxBtnNum || 4, 2);
+            },
+            selfOperationList () {
+                const getOperationItemMaxWidth = (operationItem) => {
+                    // 字宽
+                    return Math.max(
+                        ...(operationItem._name_ || operationItem.name)
+                            .split("/")
+                            .map(item => item.length * (operationItem.size === "small" ? 12 : 14))
+                    ) + (
+                        operationItem.icon || operationItem.customIcon ? 25 : 0
+                    );
+                };
+
+                return this.operationList.map(operationItem => {
+                    return {
+                        ...operationItem,
+                        width: operationItem.width || getOperationItemMaxWidth(operationItem),
+                        style: {
+                            ...(
+                                (operationItem._name_ || operationItem.name).split("/").length > 1
+                                ? { width: `${getOperationItemMaxWidth(operationItem)}px` }
+                                : {}
+                            ),
+                            ...(
+                                typeof operationItem.style === "object"
+                                    ? operationItem.style
+                                    : typeof operationItem.style === "string"
+                                        ? operationItem.style.split(";").reduce((styleObj, styleItem) => {
+                                            if (styleItem) {
+                                                const property = styleItem.split(":")[0];
+                                                const val = styleItem.split(":")[1];
+
+                                                return {
+                                                    ...styleObj,
+                                                    [property]: val
+                                                };
+                                            }
+                                            else {
+                                                return styleObj;
+                                            }
+                                        }, {})
+                                        : {}
+                            )
+                        }
+                    };
+                });
+            },
+
+            selfColumns () {
+                return this.ownColumns.length
+                    ? this.ownColumns
+                    : [
+                        ...(this.multiple ? [this.selectionColumn] : []),
+                        this.indexColumn,
+                        ...this.columns,
+                        ...(this.selfOperationList.length ? [this.operationColumn] : [])
+                ];
+            },
+            selectionColumn () {
+                return {
+                    _key: "__selection__",
+                    key: "__selection__",
+                    field: "__selection__",
+                    type: "checkbox", // 内置类型
+                    width: 50,
+                    align: "center",
+                    fixed: "left"
+                };
+            },
+            indexColumn () {
+                return {
+                    title: "序号",
+                    _key: "__index__",
+                    key: "__index__",
+                    field: "__index__",
+                    width: 60,
+                    align: "center",
+                    fixed: "left",
+                    renderBodyCell: ({ row, rowIndex, column }, h) => {
+                        return ++rowIndex;
+                    }
+                };
+            },
+            operationColumn () {
+                return {
+                    title: "操作",
+                    _key: "__operation__",
+                    key: "__operation__",
+                    field: "__operation__",
+                    align: "center",
+                    fixed: "right",
+                    width: Math.max(
+                        // 漏在外部按钮的宽度
+                        this.selfOperationList
+                            .slice(0, this.selfOperationList.length > this.maxBtnNum ? this.maxBtnNum - 1 : this.selfOperationList.length)
+                            .reduce((total, operationItem) => total + operationItem.width + 9, 0) +
+                            (this.selfOperationList.length > this.maxBtnNum ? 70 : 0) + // 出现更多按钮的宽度
+                            (this.selfOperationList.length > 0 ? 40 : 0) + // 操作列的padding
+                            4 // 留出4px空间，避免麻烦问题
+                        , 80
+                    ),
+                    renderBodyCell: (params, h) => {
+                        const totalOperationList = this.selfOperationList.map(operationItem => {
+                            return {
+                                ...operationItem,
+                                ...(
+                                    operationItem.operationFunc
+                                    ? operationItem.operationFunc(operationItem, params.row, params.index, this.selfOperationList)
+                                    : {}
+                                )
+                            };
+                        });
+
+                        // TODO: 注意此处totalOperationList用的一定是表格行显示最多的操作按钮数组，有改动注意看此备注！！！
+                        return h("dsh-buttons", {
+                            class: "bri-table-td-operation",
+                            props: {
+                                list: totalOperationList,
+                                maxFlatNum: this.selfOperationList.length > this.maxBtnNum ? this.maxBtnNum - 1 : this.selfOperationList.length,
+                                itemClass: "bri-table-td-operation-btn"
+                            },
+                            on: {
+                                click: (operationItem) => {
+                                    this.$dshEmit(operationItem, params.row, params.index);
+                                }
+                            },
+                            nativeOn: {
+                                click: (e) => {
+                                    e.stopPropagation();
+                                }
+                            }
+                        });
+                    }
+                };
+            }
+        },
+        created () {
+            this.selfColumns2 = this.selfColumns;
+        },
+        methods: {
+            // 点击某行
+            clickRow (...params) {
+                this.$emit("clickRow", ...params);
+            },
+
+            // 改变选择项
+            changeSort (...params) {
+                this.$emit("changeSort", ...params);
+            },
+            // 改变选择项
+            changeSelect (...params) {
+                this.$emit("changeSelect", params[0].map(item => item._id), ...params);
+            }
+            // // 切换全选
+            // selectAll (...params) {
+            //     this.$emit("selectAll", ...params);
+            // },
+            // // 切换选择
+            // select (...params) {
+            //     this.$emit("select", ...params);
+            // },
+        }
+    };
+</script>
+
+<style lang="less" scoped>
+    .DshTable {
+        width: 100%;
+        height: 100%;
+    }
+</style>