bri-components 1.5.21 → 1.6.0

package/src/components/list/DshFlatTable.vue

@@ -1,337 +1,337 @@
-<template>
-    <div class="DshFlatTable">
-        <!-- 顶部 -->
-        <dsh-render :render="getTableTopRender()"></dsh-render>
-
-        <!-- 搜索条件 -->
-        <dsh-render
-            v-if="!isEnlarge && showTopSearch"
-            :render="topSearchRender"
-        ></dsh-render>
-
-        <!-- 内容 -->
-        <template>
-            <!-- 表单展示模式 -->
-            <div
-                v-if="showMode === 'form'"
-                class="DshFlatTable-form"
-            >
-                <div
-                    v-for="(row, rowIndex) in selfShowListData"
-                    :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)"
-                        :inTableType="inTableType"
-                        :allListRows="allListData"
-                        :rowIndex="rowIndex"
-                        :parentFormList="parentFormList"
-                        :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>
-
-            <!-- 表格展示模式 -->
-            <template v-else>
-                <bri-table
-                    class="DshFlatTable-main"
-                    :isLoading="isLoading"
-                    :columns="showColumns"
-                    :data="isLoading ? [] : selfShowListData"
-                    :footer-data="footerData"
-                    :propsObj="tablePropsObj"
-                    :checkboxOption="checkboxOption"
-                    @changeSelect="changeSelect"
-                    @selectAll="changeSelect"
-                ></bri-table>
-            </template>
-        </template>
-
-        <!-- 添加行 -->
-        <dsh-render :render="createBtnRender"></dsh-render>
-
-        <!-- 分页 -->
-        <div
-            v-if="!isMergeRowTable"
-            class="DshFlatTable-page"
-        >
-            <dsh-page
-                :mode="pageMode"
-                :total="totalNum"
-                :propsObj="pagePropsObj"
-                @changePage="changePage"
-                @changePageSize="changePageSize"
-            >
-                共 {{ totalNum }} 条
-
-                <span
-                    class="DshFlatTable-sort"
-                    @click="changeDescSort()"
-                >
-                    <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>
-
-        <!-- 全屏模式 -->
-        <dsh-modal
-            v-if="useEnlarge"
-            class="DshFlatTable-fullscreen"
-            v-model="isEnlarge"
-            :mode="modalPropsObj.mode"
-            :propsObj="modalPropsObj"
-        >
-            <div
-                v-if="isEnlargeFlag"
-                class="DshFlatTable-fullscreen-inner"
-            >
-                <!-- 顶部 -->
-                <dsh-render :render="getTableTopRender(true)"></dsh-render>
-
-                <!-- 搜索条件 -->
-                <dsh-render :render="topSearchRender"></dsh-render>
-
-                <!-- 内容 -->
-                <template>
-                    <!-- 表单展示模式 -->
-                    <div
-                        v-if="showMode === 'form'"
-                        class="DshFlatTable-fullscreen-inner-form"
-                    >
-                        <div
-                            v-for="(row, rowIndex) in selfShowListData"
-                            :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)"
-                                :inTableType="inTableType"
-                                :allListRows="allListData"
-                                :rowIndex="rowIndex"
-                                :parentFormList="parentFormList"
-                                :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>
-
-                    <!-- 表格展示模式 -->
-                    <template v-else>
-                        <bri-table
-                            class="DshFlatTable-fullscreen-inner-main"
-                            :isLoading="isLoading"
-                            :columns="showColumns"
-                            :data="isLoading ? [] : selfShowListData"
-                            :footer-data="footerData"
-                            :propsObj="tableInModalPropsObj"
-                            :checkboxOption="checkboxOption"
-                            @changeSelect="changeSelect"
-                            @selectAll="changeSelect"
-                        ></bri-table>
-                    </template>
-                </template>
-
-                <!-- 添加行 -->
-                <dsh-render :render="createBtnRender"></dsh-render>
-
-                <!-- 分页 -->
-                <div
-                    v-if="!isMergeRowTable"
-                    class="DshFlatTable-page"
-                    style="padding: 16px 0px;"
-                >
-                    <dsh-page
-                        :mode="pageMode"
-                        :total="totalNum"
-                        :propsObj="pagePropsObj"
-                        @changePage="changePage"
-                        @changePageSize="changePageSize"
-                    >
-                        共 {{ totalNum }} 条
-
-                        <span
-                            class="DshFlatTable-sort"
-                            @click="changeDescSort()"
-                        >
-                            <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>
-</template>
-
-<script>
-    import tableBaseMixin from "./mixins/tableBaseMixin.js";
-    import DshFlatTableMixin from "./mixins/DshFlatTableMixin.js";
-    import DshDivider from "../controls/base/DshDivider.vue";
-
-    export default {
-        name: "DshFlatTable",
-        mixins: [
-            tableBaseMixin,
-            DshFlatTableMixin
-        ],
-        components: {
-            DshDivider
-        },
-        props: {},
-        data () {
-            return {};
-        },
-        computed: {},
-        created () {},
-        methods: {}
-    };
-</script>
-
-<style lang="less" scoped>
-    .DshFlatTable {
-        &-form {
-            .item {
-                margin-bottom: 5px;
-                // border: 1px solid #E5E5E6;
-                position: relative;
-
-                &-index {
-                    min-width: 130px;
-                    max-width: 100%;
-                    height: 32px;
-                    padding: 0px 16px;
-                    color: @themeColor;
-
-                    p {
-                        height: 32px;
-                        line-height: 32px;
-                        font-size:14px;
-                    }
-
-                    span {
-                        display: block;
-                        width: 100%;
-                        height: 1px;
-                        background: linear-gradient(270deg,rgba(166,215,250,0) 0%,rgba(109,174,242,1) 100%) bottom left no-repeat;
-                        position: relative;
-
-                        &::before {
-                            position: absolute;
-                            left: 0px;
-                            top: -2px;
-                            content: "";
-                            width: 5px;
-                            height: 5px;
-                            border-radius: 5px;
-                            background: #6DAEF2;
-                        }
-                    }
-                }
-
-                &-form {
-
-                }
-
-                &-icons {
-                    position: absolute;
-                    top: 10px;
-                    right: 10px;
-                    line-height: 18px;
-                    z-index: 2;
-                    display: none;
-                }
-
-                &:hover {
-                    .item-icons {
-                        display: block !important;
-                    }
-                }
-            }
-        }
-
-        &-main {
-            width: 100%;
-            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%;
-                height: 100%;
-                padding: 10px 20px;
-                display: flex;
-                flex-direction: column;
-
-                &-form,
-                &-main {
-                    flex: 1;
-                    min-height: 0px;
-                }
-            }
-        }
-    }
-</style>
+<template>
+    <div class="DshFlatTable">
+        <!-- 顶部 -->
+        <dsh-render :render="getTableTopRender()"></dsh-render>
+
+        <!-- 搜索条件 -->
+        <dsh-render
+            v-if="!isEnlarge && showTopSearch"
+            :render="topSearchRender"
+        ></dsh-render>
+
+        <!-- 内容 -->
+        <template>
+            <!-- 表单展示模式 -->
+            <div
+                v-if="showMode === 'form'"
+                class="DshFlatTable-form"
+            >
+                <div
+                    v-for="(row, rowIndex) in selfShowListData"
+                    :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)"
+                        :inTableType="inTableType"
+                        :allListRows="allListData"
+                        :rowIndex="rowIndex"
+                        :parentFormList="parentFormList"
+                        :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>
+
+            <!-- 表格展示模式 -->
+            <template v-else>
+                <bri-table
+                    class="DshFlatTable-main"
+                    :isLoading="isLoading"
+                    :columns="showColumns"
+                    :data="isLoading ? [] : selfShowListData"
+                    :footer-data="footerData"
+                    :propsObj="tablePropsObj"
+                    :checkboxOption="checkboxOption"
+                    @changeSelect="changeSelect"
+                    @selectAll="changeSelect"
+                ></bri-table>
+            </template>
+        </template>
+
+        <!-- 添加行 -->
+        <dsh-render :render="createBtnRender"></dsh-render>
+
+        <!-- 分页 -->
+        <div
+            v-if="!isMergeRowTable"
+            class="DshFlatTable-page"
+        >
+            <dsh-page
+                :mode="pageMode"
+                :total="totalNum"
+                :propsObj="pagePropsObj"
+                @changePage="changePage"
+                @changePageSize="changePageSize"
+            >
+                共 {{ totalNum }} 条
+
+                <span
+                    class="DshFlatTable-sort"
+                    @click="changeDescSort()"
+                >
+                    <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>
+
+        <!-- 全屏模式 -->
+        <dsh-modal
+            v-if="useEnlarge"
+            class="DshFlatTable-fullscreen"
+            v-model="isEnlarge"
+            :mode="modalPropsObj.mode"
+            :propsObj="modalPropsObj"
+        >
+            <div
+                v-if="isEnlargeFlag"
+                class="DshFlatTable-fullscreen-inner"
+            >
+                <!-- 顶部 -->
+                <dsh-render :render="getTableTopRender(true)"></dsh-render>
+
+                <!-- 搜索条件 -->
+                <dsh-render :render="topSearchRender"></dsh-render>
+
+                <!-- 内容 -->
+                <template>
+                    <!-- 表单展示模式 -->
+                    <div
+                        v-if="showMode === 'form'"
+                        class="DshFlatTable-fullscreen-inner-form"
+                    >
+                        <div
+                            v-for="(row, rowIndex) in selfShowListData"
+                            :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)"
+                                :inTableType="inTableType"
+                                :allListRows="allListData"
+                                :rowIndex="rowIndex"
+                                :parentFormList="parentFormList"
+                                :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>
+
+                    <!-- 表格展示模式 -->
+                    <template v-else>
+                        <bri-table
+                            class="DshFlatTable-fullscreen-inner-main"
+                            :isLoading="isLoading"
+                            :columns="showColumns"
+                            :data="isLoading ? [] : selfShowListData"
+                            :footer-data="footerData"
+                            :propsObj="tableInModalPropsObj"
+                            :checkboxOption="checkboxOption"
+                            @changeSelect="changeSelect"
+                            @selectAll="changeSelect"
+                        ></bri-table>
+                    </template>
+                </template>
+
+                <!-- 添加行 -->
+                <dsh-render :render="createBtnRender"></dsh-render>
+
+                <!-- 分页 -->
+                <div
+                    v-if="!isMergeRowTable"
+                    class="DshFlatTable-page"
+                    style="padding: 16px 0px;"
+                >
+                    <dsh-page
+                        :mode="pageMode"
+                        :total="totalNum"
+                        :propsObj="pagePropsObj"
+                        @changePage="changePage"
+                        @changePageSize="changePageSize"
+                    >
+                        共 {{ totalNum }} 条
+
+                        <span
+                            class="DshFlatTable-sort"
+                            @click="changeDescSort()"
+                        >
+                            <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>
+</template>
+
+<script>
+    import tableBaseMixin from "./mixins/tableBaseMixin.js";
+    import DshFlatTableMixin from "./mixins/DshFlatTableMixin.js";
+    import DshDivider from "../controls/base/DshDivider.vue";
+
+    export default {
+        name: "DshFlatTable",
+        mixins: [
+            tableBaseMixin,
+            DshFlatTableMixin
+        ],
+        components: {
+            DshDivider
+        },
+        props: {},
+        data () {
+            return {};
+        },
+        computed: {},
+        created () {},
+        methods: {}
+    };
+</script>
+
+<style lang="less" scoped>
+    .DshFlatTable {
+        &-form {
+            .item {
+                margin-bottom: 5px;
+                // border: 1px solid #E5E5E6;
+                position: relative;
+
+                &-index {
+                    min-width: 130px;
+                    max-width: 100%;
+                    height: 32px;
+                    padding: 0px 16px;
+                    color: @themeColor;
+
+                    p {
+                        height: 32px;
+                        line-height: 32px;
+                        font-size:14px;
+                    }
+
+                    span {
+                        display: block;
+                        width: 100%;
+                        height: 1px;
+                        background: linear-gradient(270deg,rgba(166,215,250,0) 0%,rgba(109,174,242,1) 100%) bottom left no-repeat;
+                        position: relative;
+
+                        &::before {
+                            position: absolute;
+                            left: 0px;
+                            top: -2px;
+                            content: "";
+                            width: 5px;
+                            height: 5px;
+                            border-radius: 5px;
+                            background: #6DAEF2;
+                        }
+                    }
+                }
+
+                &-form {
+
+                }
+
+                &-icons {
+                    position: absolute;
+                    top: 10px;
+                    right: 10px;
+                    line-height: 18px;
+                    z-index: 2;
+                    display: none;
+                }
+
+                &:hover {
+                    .item-icons {
+                        display: block !important;
+                    }
+                }
+            }
+        }
+
+        &-main {
+            width: 100%;
+            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%;
+                height: 100%;
+                padding: 10px 20px;
+                display: flex;
+                flex-direction: column;
+
+                &-form,
+                &-main {
+                    flex: 1;
+                    min-height: 0px;
+                }
+            }
+        }
+    }
+</style>