bri-components 1.4.43 → 1.4.45

package/src/components/list/DshFlatTable.vue

@@ -9,73 +9,103 @@
             :render="topSearchRender"
         ></dsh-render>
 
-        <!-- 表单展示模式 -->
-        <div
-            v-if="showMode === 'form'"
-            class="DshFlatTable-form"
-        >
+        <!-- 内容 -->
+        <template>
+            <!-- 表单展示模式 -->
             <div
-                v-for="(row, rowIndex) in showListData"
-                :key="row._id"
-                class="item"
+                v-if="showMode === 'form'"
+                class="DshFlatTable-form"
             >
-                <div class="item-index">
-                    <p>第{{ rowIndex + 1 }}条</p>
-                    <span></span>
-                </div>
+                <div
+                    v-for="(row, rowIndex) in curPageListData"
+                    :key="row._id"
+                    class="item"
+                >
+                    <div class="item-index">
+                        <p>第{{ rowIndex + 1 }}条</p>
+                        <span></span>
+                    </div>
 
-                <dsh-form
-                    class="item-form"
-                    :canEdit="getRowCanEdit(row, rowIndex)"
-                    :formData="row"
-                    :formList="getRowFormList(row, rowIndex)"
-                    :allFormList="getRowFormList(row, rowIndex)"
-                    :inTableType="inTableType"
-                    :allListRows="allListData"
-                    :rowIndex="rowIndex"
-                    :parentFormList="allFormList"
-                    :parentObj="parentObj"
-                ></dsh-form>
-
-                <dsh-icons
-                    v-if="$getOperationList(['canInsert', 'canDelete']).length"
-                    class="item-icons"
-                    itemClass="item-icons-item"
-                    :list="$getOperationList(['canInsert', 'canDelete'])"
-                    @click="$dispatchEvent($event, row, rowIndex)"
-                ></dsh-icons>
+                    <dsh-form
+                        class="item-form"
+                        :canEdit="getRowCanEdit(row, rowIndex)"
+                        :formData="row"
+                        :formList="getRowFormList(row, rowIndex)"
+                        :allFormList="getRowFormList(row, rowIndex)"
+                        :inTableType="inTableType"
+                        :allListRows="allListData"
+                        :rowIndex="rowIndex"
+                        :parentFormList="allFormList"
+                        :parentObj="parentObj"
+                    ></dsh-form>
+
+                    <dsh-icons
+                        v-if="$getOperationList(['canInsert', 'canDelete']).length"
+                        class="item-icons"
+                        itemClass="item-icons-item"
+                        :list="$getOperationList(['canInsert', 'canDelete'])"
+                        @click="$dispatchEvent($event, row, rowIndex)"
+                    ></dsh-icons>
+                </div>
             </div>
-        </div>
 
-        <!-- 表格展示模式 -->
-        <template v-else>
-            <bri-table
-                v-show="showListData.length && !isSearching"
-                ref="briTable"
-                class="DshFlatTable-main"
-                :columns="showColumns"
-                :data="renderedListData"
-                :footer-data="footerData"
-                :propsObj="tablePropsObj"
-                @changeSelect="changeSelect"
-                @selectAll="changeSelect"
-            ></bri-table>
-            <bri-table
-                v-show="!showListData.length || isSearching"
-                ref="briTable"
-                class="DshFlatTable-main"
-                :columns="showColumns"
-                :data="showListData"
-                :footer-data="footerData"
-                :propsObj="tablePropsObj"
-                @changeSelect="changeSelect"
-                @selectAll="changeSelect"
-            ></bri-table>
+            <!-- 表格展示模式 -->
+            <template v-else>
+                <bri-table
+                    v-show="curPageListData.length && !isSearching"
+                    ref="briTable"
+                    class="DshFlatTable-main"
+                    :columns="showColumns"
+                    :data="renderedShowListData"
+                    :footer-data="footerData"
+                    :propsObj="tablePropsObj"
+                    @changeSelect="changeSelect"
+                    @selectAll="changeSelect"
+                ></bri-table>
+                <bri-table
+                    v-show="!curPageListData.length || isSearching"
+                    ref="briTable"
+                    class="DshFlatTable-main"
+                    :columns="showColumns"
+                    :data="curPageListData"
+                    :footer-data="footerData"
+                    :propsObj="tablePropsObj"
+                    @changeSelect="changeSelect"
+                    @selectAll="changeSelect"
+                ></bri-table>
+            </template>
         </template>
 
         <!-- 添加行 -->
         <dsh-render :render="createBtnRender"></dsh-render>
 
+        <!-- 分页 -->
+        <div class="DshFlatTable-page">
+            <dsh-page
+                :mode="pageMode"
+                :total="total"
+                :propsObj="pagePropsObj"
+                @changePage="changePage"
+                @changePageSize="changePageSize"
+            >
+                共 {{ total }} 条
+
+                <span
+                    class="DshFlatTable-sort"
+                    :style="{ color: appColor }"
+                    @click="changeSort()"
+                >
+                    <dsh-icons
+                        class="DshFlatTable-sort-icons"
+                        :list="[{ icon: 'md-swap', size: 14 }]"
+                    />
+                    <span class="DshFlatTable-sort-name">
+                        {{ isUseDescSort ? "使用正序" : "使用倒序" }}
+                    </span>
+                </span>
+            </dsh-page>
+        </div>
+
         <!-- 各种模态框共用 -->
         <dsh-render :render="dshRender"></dsh-render>
 
@@ -99,20 +129,20 @@
 
                 <!-- 表格 -->
                 <bri-table
-                    v-show="showListData.length && !isSearching"
+                    v-show="curPageListData.length && !isSearching"
                     class="DshFlatTable-fullscreen-inner-main"
                     :columns="showColumns"
-                    :data="renderedListData"
+                    :data="renderedShowListData"
                     :footer-data="footerData"
                     :propsObj="tableInModalPropsObj"
                     @changeSelect="changeSelect"
                     @selectAll="changeSelect"
                 ></bri-table>
                 <bri-table
-                    v-show="!showListData.length || isSearching"
+                    v-show="!curPageListData.length || isSearching"
                     class="DshFlatTable-fullscreen-inner-main"
                     :columns="showColumns"
-                    :data="showListData"
+                    :data="curPageListData"
                     :footer-data="footerData"
                     :propsObj="tableInModalPropsObj"
                     @changeSelect="changeSelect"
@@ -121,6 +151,33 @@
 
                 <!-- 添加行 -->
                 <dsh-render :render="createBtnRender"></dsh-render>
+
+                <!-- 分页 -->
+                <div class="DshFlatTable-page">
+                    <dsh-page
+                        :mode="pageMode"
+                        :total="total"
+                        :propsObj="pagePropsObj"
+                        @changePage="changePage"
+                        @changePageSize="changePageSize"
+                    >
+                        共 {{ total }} 条
+
+                        <span
+                            class="DshFlatTable-sort"
+                            :style="{ color: appColor }"
+                            @click="changeSort()"
+                        >
+                            <dsh-icons
+                                class="DshFlatTable-sort-icons"
+                                :list="[{ icon: 'md-swap', size: 14 }]"
+                            />
+                            <span class="DshFlatTable-sort-name">
+                                {{ isUseDescSort ? "使用正序" : "使用倒序" }}
+                            </span>
+                        </span>
+                    </dsh-page>
+                </div>
             </div>
         </dsh-modal>
     </div>
@@ -217,6 +274,24 @@
             height: auto;
         }
 
+        &-page {
+            padding: 5px 3px;
+        }
+
+        &-sort {
+            margin-left: 5px;
+            font-weight: 600;
+            // color: @themeColor;
+            cursor: pointer;
+
+            &-icons {
+
+            }
+            &-name {
+                font-size: 12px;
+            }
+        }
+
         &-fullscreen {
             &-inner {
                 width: 100%;

package/src/components/list/DshPage.vue

@@ -97,3 +97,98 @@
         }
     };
 </script>
+
+<style lang="less">
+    .DshPage {
+        width: 100%;
+        height: 24px;
+        line-height: 24px;
+        text-align: right;
+        font-size: 14px;
+
+        .ivu-page-total {
+            float: left;
+        }
+        .ivu-select-selection {
+            border: 0px!important;
+        }
+        .ivu-page-item-active {
+            a,
+            &:hover a {
+                color: @themeColor!important;
+            }
+        }
+        .ivu-select-single .ivu-select-selection .ivu-select-placeholder,
+        .ivu-select-single .ivu-select-selection,
+        .ivu-page-simple-pager input,
+        .ivu-page-options-elevator input,
+        .ivu-page-item-jump-next,
+        .ivu-page-item-jump-prev,
+        .ivu-page-next,
+        .ivu-page-prev,
+        .ivu-page-total,
+        .ivu-page-item {
+            height: 24px!important;
+            line-height: 24px!important;
+            background: transparent;
+            display: inline-block;
+            vertical-align: middle;
+        }
+        .ivu-select-single .ivu-select-selection .ivu-select-selected-value {
+            height: 24px!important;
+            line-height: 24px!important;
+        }
+        .ivu-page-next,
+        .ivu-page-prev {
+            background: @white;
+            min-width: 26px;
+            border: 1px solid #d9d9d9;
+            a {
+                color: #000;
+                font-weight: bold;
+            }
+        }
+        .ivu-page-item {
+            min-width: 24px;
+            &:hover {
+                color: @themeColor;
+            }
+        }
+        .ivu-page-options {
+            margin-left: 4px;
+        }
+        .ivu-select-visible .ivu-select-selection{
+            box-shadow: unset;
+        }
+        .ivu-select-item-selected,
+        .ivu-select-item-selected:hover {
+            color: @themeColor;
+        }
+        .ivu-icon {
+            vertical-align: baseline;
+        }
+
+        &-small,
+        &-simple.ivu-page-simple{
+            a {
+                &:hover {
+                    color: @themeColor !important;
+                }
+            }
+            .ivu-page-next,
+            .ivu-page-prev {
+            background: transparent;
+            border-color: transparent;
+                &:hover {
+                    border-color: transparent;
+                }
+        }
+        }
+
+        &-small {
+            .ivu-icon {
+            vertical-align: -.125em;
+        }
+        }
+    }
+</style>

package/src/components/list/mixins/DshCascaderTableMixin.js

@@ -35,6 +35,10 @@ export default {
                 ...(this.selfPropsObj._showCreateBtnColKeys || [])
             ];
         },
+        // 顶替tableBaseMixin里的
+        rowsNumStr () {
+            return `${this.isSearching ? "筛选" : "全部"}数据，共 ${this.total} 条；`;
+        },
 
         allTreeData () {
             return this.getCalcuedTree(this.data, this.treeColumns, this.selfColumns);

package/src/components/list/mixins/DshFlatTableMixin.js

@@ -3,7 +3,15 @@ export default {
     components: {},
     props: {},
     data () {
-        return {};
+        return {
+            isUseDescSort: false,
+            pageMode: "small",
+            pagePropsObj: {
+                page: 1,
+                pagesize: 10,
+                pagesizeOpts: [10, 20, 30, 50]
+            }
+        };
     },
     computed: {
         rowspanMap () {
@@ -12,17 +20,26 @@ export default {
         selfBasePropsObj () {
             return {
                 _mergeRowColKeys: [] // 合并行的列
+                // _isUseDescSort: false // 是否使用使用倒序
             };
         },
+        // // 是否使用倒序
+        // isUseDescSort () {
+        //     return this.selfPropsObj._isUseDescSort;
+        // },
         mergeRowColKeys () {
             const mergeRowColKeys = this.selfPropsObj._mergeRowColKeys || []; // 配置端有问题，高级依赖时值成undefined了
             return this.selfColumns
                 .filter(colItem => mergeRowColKeys.includes(colItem._key))
                 .map(colItem => colItem._key);
         },
+        // 是不是合并行表格
+        isMergeRowTable () {
+            return this.mergeRowColKeys.length;
+        },
         // 一级合并列keys（一级合并列：左侧第一合并列和右侧和并列）
         firstMergeRowColKeys () {
-            if (this.mergeRowColKeys.length) {
+            if (this.isMergeRowTable) {
                 const firstNormalIndex = this.selfColumns.findIndex(colItem => !this.mergeRowColKeys.includes(colItem._key));
 
                 // -1代表无普通单元格，0代表第一列就是普通单元格
@@ -41,21 +58,38 @@ export default {
         notFirstMergeRowColKeys () {
             return this.mergeRowColKeys.filter(colKey => !this.firstMergeRowColKeys.includes(colKey));
         },
+        // 顶替tableBaseMixin里的
+        rowsNumStr () {
+            return `${this.isSearching ? "筛选" : "全部"}数据${this.isMergeRowTable ? `，共 ${this.total}条；` : "；"}`;
+        },
 
         allListData () {
             this.data.forEach(rowItem => {
                 this.fixRowItem(rowItem);
             });
-
             this.initFlag = false;
-            return this.data;
+
+            return this.isMergeRowTable
+                ? this.data
+                : this.isUseDescSort
+                    ? [...this.data].reverse()
+                    : this.data;
         },
         allListMap () {
             return this.$arrToMap(this.allListData, "_id");
         },
-        // allListIds () {
-        //     return this.allListData.map(rowItem => rowItem._id);
-        // },
+        // 渲染过的行 -但显示当前页
+        renderedShowListData () {
+            return this.isMergeRowTable
+                ? this.renderedListData
+                : this.curPageListData;
+        },
+        // 全部数据或筛选时符合条件的数据
+        curPageListData () {
+            return this.isMergeRowTable
+                ? this.showListData
+                : this.showListData.slice((this.pagePropsObj.page - 1) * this.pagePropsObj.pagesize, this.pagePropsObj.page * this.pagePropsObj.pagesize);
+        },
         footerData () {
             return this.isSearching
                 ? []
@@ -80,6 +114,12 @@ export default {
                     ]
                     : [];
         },
+        // 共多少分页
+        PageNum () {
+            return this.total % this.pagePropsObj.pagesize > 0
+                ? Math.ceil(this.total / this.pagePropsObj.pagesize)
+                : Math.floor(this.total / this.pagePropsObj.pagesize);
+        },
 
         showColumns () {
             return [
@@ -100,7 +140,7 @@ export default {
                 fixed: "left",
                 renderBodyCell: ({ row, rowIndex, column }, h) => {
                     return [
-                        h("div", rowIndex + 1),
+                        h("div", this.isMergeRowTable ? rowIndex + 1 : row.__index__),
 
                         // 添加符
                         ...this.operationIconRender(h, { row, rowIndex, column })
@@ -119,7 +159,7 @@ export default {
         },
         // 初始化合并单元格的rowspan
         initRowspan () {
-            if (this.mergeRowColKeys.length) {
+            if (this.isMergeRowTable) {
                 this.$set(this.tableDataObj, "rowspanMap", this.tableDataObj.rowspanMap || {});
 
                 // TODO: 待删除
@@ -158,6 +198,20 @@ export default {
             }
         },
 
+        // 切换正倒序
+        changeSort () {
+            this.isUseDescSort = !this.isUseDescSort;
+            this.pagePropsObj.page = 1;
+        },
+        // 切换分页
+        changePage (page) {
+            this.pagePropsObj.page = page;
+        },
+        // 切换分页条数
+        changePageSize (pagesize) {
+            this.pagePropsObj.page = 1;
+            this.pagePropsObj.pagesize = pagesize;
+        },
         // 点击 -添加行
         clickCreate (operationItem, row, rowIndex, column) {
             const curColKey = column ? column._key : undefined;
@@ -165,7 +219,7 @@ export default {
             const newRow = this.getNewRowData();
 
             // 处理单元格合并相关
-            if (this.mergeRowColKeys.length) {
+            if (this.isMergeRowTable) {
                 // 非底部按钮添加时
                 if (row) {
                     // 寻找对应的行数据 -当前列是合并列会寻找，普通列不用找（就是row）
@@ -230,7 +284,28 @@ export default {
             const newRowIndex = row
                 ? list.findIndex(rowItem => rowItem._id === row._id) + 1
                 : list.length;
-            list.splice(newRowIndex, 0, newRow);
+
+            if (this.isMergeRowTable) {
+                list.splice(newRowIndex, 0, newRow);
+            } else {
+                if (this.isUseDescSort) {
+                    if (row) {
+                        list.splice(newRowIndex - 1, 0, newRow);
+                        rowIndex + 1 === this.pagePropsObj.pagesize && this.changePage(this.pagePropsObj.page + 1);
+                    } else {
+                        list.splice(newRowIndex, 0, newRow);
+                        this.changePage(1);
+                    }
+                } else {
+                    if (row) {
+                        list.splice(newRowIndex, 0, newRow);
+                        rowIndex + 1 === this.pagePropsObj.pagesize && this.changePage(this.pagePropsObj.page + 1);
+                    } else {
+                        list.splice(newRowIndex, 0, newRow);
+                        this.changePage(this.PageNum);
+                    }
+                }
+            }
 
             this.change("createRow", newRow, newRowIndex, null);
         },
@@ -243,7 +318,7 @@ export default {
                     const list = this.data;
 
                     // 处理单元格合并相关
-                    if (this.mergeRowColKeys.length) {
+                    if (this.isMergeRowTable) {
                         this.mergeRowColKeys.forEach(colKey => {
                             const column = { _key: colKey };
                             const rowIndex = list.findIndex(dataItem => dataItem._id === row._id);

package/src/components/list/mixins/tableBaseMixin.js

@@ -1,7 +1,6 @@
 import DshListUnit from "../../unit/DshListUnit.vue";
 import importModal from "../common/importModal.vue";
 import quoteListModal from "../common/quoteListModal.vue";
-import { mapGetters } from "vuex";
 
 export default {
     mixins: [],
@@ -195,13 +194,11 @@ export default {
         };
     },
     computed: {
-        ...mapGetters(["appObj"]),
         appObj () {
             return this.$store.getters.appObj || {};
         },
         appColor () {
-            const themeColorMap = this.$appData.themeColors || {};
-            return (themeColorMap[this.appObj.colorType] || { color: "#3DB8C5" }).color;
+            return ((this.$appData.themeColors || {})[this.appObj.colorType] || {}).color || "#3DB8C5";
         },
 
         dshRender () {
@@ -285,8 +282,8 @@ export default {
                     list: [],
                     tree: []
                 },
-
                 ...(this.selfBasePropsObj || {}),
+
                 ...this.propsObj
             };
         },
@@ -418,14 +415,12 @@ export default {
         isSearching () {
             return this.$isAdvSearching(this.finalTableAdvSearch);
         },
-        // 当前行数
-        rowsNum () {
-            return this.isSearching
-                ? this.showListData.length
-                : this.allListData.length;
-        },
         rowsNumStr () {
-            return `当前${this.isSearching ? "筛选" : "全部"}数据, 共 ${this.rowsNum} ${this.showMode === "form" ? "条" : "行"};`;
+            return `${this.isSearching ? "筛选" : "全部"}数据；`;
+            // return `${this.isSearching ? "筛选" : "全部"}数据；共 ${this.total}条；`;
+        },
+        controlShowKey () {
+            return this.isSearching ? "__isSearchShow__" : "__isShow__";
         },
 
         /* --- 数据 --- */
@@ -449,6 +444,7 @@ export default {
                 .map(rowItem => rowItem._id)
                 .filter(id => !!id);
         },
+        // 渲染过的行
         renderedListData () {
             return this.allListData.filter(rowItem => {
                 this.dealSearchShow(rowItem);
@@ -456,13 +452,20 @@ export default {
                 return rowItem.__isRendered__;
             });
         },
+        // 全部数据或筛选时符合条件的数据 -但显示当前页
         showListData () {
-            return this.renderedListData.filter(rowItem =>
-                this.isSearching
-                    ? !!rowItem.__isSearchShow__
-                    : !!rowItem.__isShow__
-            );
+            return this.renderedListData
+                .filter(rowItem => !!rowItem[this.controlShowKey])
+                .map((rowItem, rowIndex) => {
+                    rowItem.__index__ = rowIndex + 1;
+                    return rowItem;
+            });
+        },
+        // 全部数据或筛选时符合条件的数据 总数
+        total () {
+            return this.showListData.length;
         },
+
         parentDataId () {
             return this.parentObj._id;
         },
@@ -804,9 +807,11 @@ export default {
             this.isExpandAction = false;
             this.dftAdvSearch.conditions = conditions;
         },
+        // 列表选择项改变
         changeSelect (list) {
             this.$emit("changeSelect", list);
         },
+
         // 输入框失去焦点
         controlBlur (operationItem, row, rowIndex, column, params) {
             this.$set(this.ruleRecordMap, this.getMixKey(row, column), { showRuleMessage: true });
@@ -1089,7 +1094,7 @@ export default {
                             "display": "flex",
                             "flex-direction": "row",
                             "align-items": "center",
-                            "margin-left": "16px"
+                            "margin-left": "12px"
                         }
                     }, [
                         h("div", {