bri-components 1.3.30 → 1.3.32

package/src/components/list/mixins/quoteListModal.vue

@@ -0,0 +1,215 @@
+<template>
+    <div class="quoteListModal">
+        <Drawer
+            v-model="showModal"
+            class="quoteListModal-drawer"
+            width="400"
+            :title="'引用列表'"
+            :mask-closable="true"
+            :closable="true"
+            :draggable="true"
+        >
+            <div class="quoteListModal-drawer-body">
+                <div class="list">
+                    <template v-if="listData.length">
+                        <div
+                            v-for="dataItem in listData"
+                            :key="dataItem._id"
+                            :class="{
+                                'list-item': true,
+                                'list-item-active': curDataItem && curDataItem._id === dataItem._id
+                            }"
+                            @click="clickItem(dataItem)"
+                        >
+                            {{ listFields.length ? dataItem[listFields[0]] : dataItem.createdAt }}
+                        </div>
+                    </template>
+
+                    <div
+                        v-else
+                        class="list-nodata"
+                    >
+                        暂无数据…
+                    </div>
+                </div>
+
+                <dsh-buttons
+                    class="quoteListModal-drawer-body-btns"
+                    itemClass="quoteListModal-drawer-body-btns-item"
+                    :list="$getOperationList()"
+                    @click="$dispatchEvent($event)"
+                ></dsh-buttons>
+            </div>
+        </Drawer>
+    </div>
+</template>
+
+<script>
+    export default {
+        name: "quoteListModal",
+        props: {
+            value: {
+                type: Boolean,
+                default: false
+            },
+            propsObj: {
+                type: Object,
+                default () {
+                    return {};
+                }
+            },
+            listParams: {
+                type: Object,
+                default () {
+                    return {};
+                }
+            }
+        },
+        data () {
+            return {
+                listData: [],
+                listPropsObj: {
+                    isLoading: false
+                },
+                curDataItem: undefined,
+
+                operationMap: {
+                    canReset: {
+                        name: "重 置",
+                        type: "canReset",
+                        size: "small",
+                        event: "clickReset"
+                    },
+                    confirm: {
+                        name: "确 认",
+                        type: "confirm",
+                        btnType: "primary",
+                        size: "small",
+                        event: "clickConfirm"
+                    }
+                }
+            };
+        },
+        computed: {
+            showModal: {
+                get () {
+                    return this.value;
+                },
+                set (val) {
+                    this.$emit("input", val);
+                }
+            },
+
+            modKey () {
+                return this.propsObj.modKey;
+            },
+            screenKey () {
+                return this.propsObj.screenKey;
+            },
+            listFields () {
+                return this.propsObj._quoteListFields || [];
+            }
+        },
+        created () {
+            this.init();
+        },
+        methods: {
+            init () {
+                this.getListData();
+            },
+            clickItem (dataItem) {
+                if (this.curDataItem && this.curDataItem._id === dataItem._id) {
+                    this.curDataItem = undefined;
+                } else {
+                    this.curDataItem = dataItem;
+                }
+            },
+            // 点击重置
+            clickReset () {
+
+            },
+            // 点击确认
+            clickConfirm () {
+                this.showModal = false;
+                this.$emit("confirm", this.curDataItem);
+            },
+
+            getListData () {
+                this.$https({
+                    url: {
+                        module: "sheet",
+                        name: "index"
+                    },
+                    params: this.listParams,
+                    loadingName: "listPropsObj.isLoading",
+                    callback: data => {
+                        this.listData = data.list;
+                        this.curDataItem = this.listData[0];
+                    }
+                });
+            }
+        }
+    };
+</script>
+
+<style lang="less">
+    .quoteListModal {
+        &-drawer {
+            &-body {
+                width: 100%;
+                height: 100%;
+                padding: 20px;
+                overflow: auto;
+
+                .list {
+                    &-item {
+                        padding: 8px 12px;
+                        margin-bottom: 8px;
+                        border-radius: 4px;
+                        cursor: pointer;
+
+                        &-active {
+                            background-color: @theme-hover;
+                        }
+                    }
+
+                    &-nodata {
+                        #dsh-nodata();
+                    }
+                }
+
+                &-btns {
+                    position: absolute;
+                    bottom: 0px;
+                    left: 0px;
+                    .dsh-flex-row-start-stretch();
+                    width: calc(100% - 48px);
+                    height: 51px;
+                    margin: 25px 20px 25px 28px;
+
+                    &-item {
+                        flex: 1;
+                        margin: 5px;
+                        height: 40px;
+                    }
+                }
+            }
+
+            .ivu-drawer-mask,
+            .ivu-drawer-wrap {
+                // z-index: 88888888;
+            }
+            .ivu-drawer-body {
+                padding: 0px;
+                padding-bottom: 50px;
+                overflow: hidden;
+            }
+            .ivu-drawer-header-inner {
+                font-size: @titleSize;
+                font-family: @titleFontFamily;
+                color: #333;
+                font-weight: bold;
+            }
+        }
+    }
+</style>

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

@@ -1,9 +1,11 @@
 import DshListUnit from "../../unit/DshListUnit.vue";
+import quoteListModal from "./quoteListModal.vue";
 
 export default {
     mixins: [],
     components: {
-        DshListUnit
+        DshListUnit,
+        quoteListModal
     },
     props: {
         canEdit: {
@@ -38,11 +40,104 @@ export default {
     },
     data () {
         return {
-            showRuleMessage: false, // 显示校验文字
-            ruleRecordMap: {}
+            initFlag: true,
+            showRuleMessage: false, // 进行全体校验
+            ruleRecordMap: {}, // 单元格是否发生校验的记录映射
+
+            dshRenderName: undefined,
+            showQuoteModal: false,
+            showImportModal: false,
+            exportTimer: null,
+            isEnlarge: false,
+            isEnlargeFlag: true, // 为重渲染膜态框内容而用
+
+            topOperationMap: {
+                canQuote: {
+                    name: "引用",
+                    type: "canQuote",
+                    icon: "ios-copy",
+                    size: "small",
+                    btnType: "text",
+                    event: "clickQuote"
+                },
+                canImport: {
+                    name: "导入",
+                    type: "canImport",
+                    icon: "ios-create-outline",
+                    size: "small",
+                    btnType: "text",
+                    event: "clickImport"
+                },
+                canExport: {
+                    name: "导出",
+                    type: "canExport",
+                    icon: "md-share-alt",
+                    size: "small",
+                    btnType: "text",
+                    event: "clickExport"
+                },
+                canEnlarge: {
+                    name: "全屏展示",
+                    type: "canEnlarge",
+                    icon: "md-expand",
+                    size: "small",
+                    btnType: "text",
+                    event: "clickEnlarge"
+                }
+            },
+            baseOperationMap: {
+                canCreate: {
+                    name: "添加一行",
+                    type: "canCreate",
+                    size: "default",
+                    long: true,
+                    disabled: false,
+                    event: "clickCreate",
+                    btnType: "default"
+                },
+                canDelete: {
+                    name: "删除",
+                    type: "canDelete",
+                    btnType: "errorText",
+                    icon: "ios-trash-outline",
+                    size: "small",
+                    disabled: false,
+                    event: "clickDelete"
+                },
+                changeVal: {
+                    name: "改变输入框值",
+                    type: "changeVal",
+                    event: "changeVal"
+                }
+            }
         };
     },
     computed: {
+        dshRender () {
+            return this[this.dshRenderName];
+        },
+        parentDataId () {
+            return this.parentObj._id;
+        },
+        selfRowDefault () {
+            return this.$filterObj(this.filterColumns, this.rowDefault);
+        },
+
+        controlKey () {
+            return this.propsObj._key;
+        },
+        controlType () {
+            return this.propsObj._type;
+        },
+        controlName () {
+            return this.propsObj._name;
+        },
+        modKey () {
+            return this.propsObj.modKey;
+        },
+        screenKey () {
+            return this.propsObj.screenKey;
+        },
         commonPropsObj () {
             return {
                 // isShare: false, // 是否是分享页在用
@@ -57,6 +152,10 @@ export default {
                 _disabledBtns: false, // 禁用增删按钮
                 _disabledCreateBtn: false, // 置灰新增按钮，目前只内部使用，comp_web数据表配置页那块
                 _disabledOldDataRow: false, // 置灰老数据行包含删除
+                _isImport: false, // 导入
+                _isExport: false, // 导出
+                _isQuote: false, // 引用
+                _quoteListFields: [], // 引用列表的显示字段
                 ...this.propsObj,
 
                 _contentHeight: this.propsObj._contentHeight || 500 // 表格最大高度
@@ -98,9 +197,92 @@ export default {
         disabledOldDataRow () {
             return this.selfPropsObj._disabledOldDataRow;
         },
+        isQuote () {
+            return this.selfPropsObj._isQuote;
+        },
+        quoteListFields () {
+            return this.selfPropsObj._quoteListFields;
+        },
+        isImport () {
+            return this.selfPropsObj._isImport;
+        },
+        isExport () {
+            return this.selfPropsObj._isExport;
+        },
 
-        selfRowDefault () {
-            return this.$filterObj(this.filterColumns, this.rowDefault);
+        modalPropsObj () {
+            return {
+                title: this.controlName,
+                fullscreen: true,
+                showSlotClose: false,
+                closable: true
+            };
+        },
+        quoteParams () {
+            return {
+                screenKey: this.screenKey,
+                fields: [...this.quoteListFields, this.controlKey, "createdAt"],
+                advSearch: {
+                    logic: "and",
+                    conditions: [
+                        {
+                            fieldKey: "_id",
+                            fieldOperator: "ne",
+                            fieldValue: [this.parentDataId]
+                        }
+                    ]
+                }
+            };
+        },
+        importParams () {
+            return {
+                _id: this.parentDataId,
+                _key: this.controlKey
+            };
+        },
+
+        topOperationBtns () {
+            return Object.keys(this.topOperationMap);
+        },
+        baseOperationBtns () {
+            return Object.keys(this.baseOperationMap);
+        },
+        allOperationMap () {
+            return {
+                ...(this.topOperationMap || {}),
+                ...(this.baseOperationMap || {}),
+
+                canCreate: {
+                    ...this.baseOperationMap.canCreate,
+                    disabled: !!this.disabledCreateBtn
+                }
+            };
+        },
+        operationMap () {
+            return this.$categoryMapToMap(
+                this.allOperationMap,
+                undefined,
+                undefined,
+                this.canEdit
+                    ? [
+                        ...(this.isQuote ? ["canQuote"] : []),
+                        ...(this.isImport ? ["canImport"] : []),
+                        ...(this.isExport ? ["canExport"] : []),
+                        "canEnlarge",
+                        ...(this.disabledBtns ? ["changeVal"] : this.baseOperationBtns)
+                    ]
+                    : [
+                        ...(this.isExport ? ["canExport"] : []),
+                        "canEnlarge"
+                    ]
+            );
+        }
+    },
+    watch: {
+        isEnlarge (bool) {
+            setTimeout(() => {
+                this.isEnlargeFlag = bool;
+            }, 0);
         }
     },
     created () { },
@@ -111,6 +293,162 @@ export default {
 
             return this.listData.every((row, rowIndex) => this.getRowRuleResult(row, rowIndex));
         },
+        // 重置
+        reset () {
+            this.initFlag = true;
+            this.showRuleMessage = false;
+            this.ruleRecordMap = {};
+        },
+
+        // 点击引用
+        clickQuote () {
+            this.dshRenderName = "quoteModalRender";
+            this.showQuoteModal = true;
+        },
+        // 点击导入
+        clickImport () {
+            this.showImportModal = true;
+        },
+        // 点击导出
+        clickExport (operationItem) {
+            this.handleExport(operationItem);
+        },
+        // 打开全屏模态框
+        clickEnlarge (operationItem) {
+            this.isEnlarge = true;
+        },
+
+        // 引用模态框渲染函数
+        quoteModalRender (h, params) {
+            return this.showQuoteModal
+                ? h("quote-list-modal", {
+                    props: {
+                        value: this.showQuoteModal,
+                        propsObj: this.propsObj,
+                        listParams: this.quoteParams
+                    },
+                    on: {
+                        input: bool => {
+                            this.showQuoteModal = bool;
+                        },
+                        confirm: this.quoteCb
+                    }
+                })
+                : undefined;
+        },
+        // 引用回调
+        quoteCb (dataObj) {
+            if (dataObj) {
+                const cb = () => {
+                    this.$Message.success("引用成功！");
+                    this.reset();
+                    this.selfReset && this.selfReset();
+
+                    if (["flatTable"].includes(this.controlType)) {
+                        this.parentObj[this.controlKey] = {
+                            ...dataObj[this.controlKey],
+                            list: dataObj[this.controlKey].list.map(item => ({
+                                ...item,
+                                __readonly__: true
+                            }))
+                        };
+                    } else if (["cascaderTable"].includes(this.controlType)) {
+                        const transformData = (data = []) => {
+                            const loop = (list = []) =>
+                                list.map(item => ({
+                                    ...item,
+                                    children: item.children && item.children.length ? loop(item.children) : item.children,
+                                    __readonly__: true
+                                }));
+
+                            return loop(data);
+                        };
+
+                        this.parentObj[this.controlKey] = {
+                            ...dataObj[this.controlKey],
+                            tree: transformData(dataObj[this.controlKey].tree)
+                        };
+                    }
+
+                    this.change("quote");
+                };
+
+                const isEmpty = this.$isEmptyData(dataObj[this.controlKey]) ||
+                    (["flatTable"].includes(this.controlType)
+                        ? !dataObj[this.controlKey].list || !dataObj[this.controlKey].list.length
+                        : ["cascaderTable"].includes(this.controlType)
+                            ? !dataObj[this.controlKey].tree || !dataObj[this.controlKey].tree.length
+                            : false);
+                if (isEmpty) {
+                    this.$Modal.confirm({
+                        title: "提示",
+                        content: "该数据下此内容为空，无法引用！",
+                        onOk: () => { }
+                    });
+                } else {
+                    cb();
+                }
+            } else {
+                this.$Message.error("未选择引用数据！");
+            }
+        },
+        // 导入回调
+        importCb (data) {
+            this.parentObj[this.controlKey] = data;
+            this.change("import");
+        },
+        // 接口 -导出
+        handleExport (operationItem) {
+            operationItem.disabled = true;
+
+            this.$https({
+                url: {
+                    module: "sheet",
+                    name: ["flatTable"].includes(this.controlType) ? "exportFlatTableExcel" : "exportCascaderTableExcel"
+                },
+                params: {
+                    screenKey: this.screenKey,
+                    _id: this.parentObj._id,
+                    _key: this.controlKey
+                },
+                callback: data => {
+                    this.getJobStatus(operationItem, data.jobId, data.excel_url);
+                    this.exportTimer = setInterval(() => {
+                        this.getJobStatus(operationItem, data.jobId, data.excel_url);
+                    }, 1000);
+                }
+            });
+        },
+        // 接口 -获取导出地址
+        getJobStatus (operationItem, id, url) {
+            this.$https({
+                url: {
+                    module: "sheet",
+                    name: "getJobStatus"
+                },
+                params: {
+                    jobId: id
+                },
+                callback: data => {
+                    operationItem.disabled = false;
+                    clearInterval(this.exportTimer);
+
+                    if (data.status === "completed") {
+                        window.location.href = data.url;
+                    } else if (data.status === "failed") {
+                        this.$Message.info({
+                            content: "操作失败，请稍后再试"
+                        });
+                    }
+                },
+                error: data => {
+                    operationItem.disabled = false;
+                    this.exportTimer = null;
+                }
+            });
+        },
+
+        /* --------------- 工具方法 ------------- */
         // 整行校验结果
         getRowRuleResult (row, rowIndex) {
             return this.filterColumns.every(column => this.getColRuleResult(column, row, rowIndex).bool);
@@ -126,17 +464,16 @@ export default {
                 };
             }
         },
-
-        /* --------------- 工具方法 ------------- */
         getRowCanEdit (row) {
-            return this.canEdit && ( // 是否是编辑状态
-                this.disabledOldDataRow ? !!row.__isCreate__ : true); // 是否让老数据行置灰
+            return this.canEdit && // 是编辑状态
+                (this.disabledOldDataRow ? !row.__old__ : true) && // 老数据行不置灰／置灰时是新增数据
+                !row.__readonly__; // 不能为只读数据
         },
         getColCanEdit (col, row) {
-            return (col.dependRowCanEdit ? row.canEdit !== false : true) && // 在老数据行里某些列不可编辑
+            return (col._oldReadonly ? !row.__old__ : true) && // 老数据行里某些列不可编辑
+                (["number"].includes(col._type) && ![undefined, null, "", "no"].includes(col._summaryType) ? row.isLeaf !== false : true) && // 级联表格 -“需要计的数字列 且 不是叶子行的”不可编辑（必须用isLeaf !== false判断，因为牵扯内部表格也在用）
                 col._enterType !== "calculate" && // 计算的不可编辑
-                col._readonly !== true && // 不能为只读
-            (["number"].includes(col._type) && ![undefined, null, "", "no"].includes(col._summaryType) ? row.isLeaf !== false : true); // 级联表格 -“需要计的数字列 且 不是叶子行的”不可编辑（必须用isLeaf !== false判断，因为牵扯内部表格也在用）
+                col._readonly !== true; // 不能为只读
         },
         getUnitCanEdit (col, row) {
             return this.getRowCanEdit(row) &&

package/src/styles/components/list/BriTable.less

@@ -68,8 +68,10 @@
                         tr.ve-table-body-tr, 
                         tr.ve-table-expand-tr {
                             height: auto;
+                            // position: relative;
 
                             td.ve-table-body-td {
+                                height: 40px;
                                 padding: 4px 16px;
                             }
                         }
@@ -122,7 +124,7 @@
 
     &-td {
         position: relative;
-
+        
         &-tip {
             padding: 0px 0px 0px 16px;
             font-size: 12px;
@@ -138,27 +140,44 @@
                 padding: 0px;
                 margin-left: 16px;
             }
-
+            
             &-btn {
                 margin-left: 16px;
                 padding: 0px;
-        
-
+                
                 &:first-of-type {
                     margin: 0px;
                 }
             }
         }
-
+        
+        &-show { // 级联表格会生效 自己写的table
+            height: 40px;
+            padding: 4px 16px;
+        }
         &-edit {
             padding: 4px 16px 12px 16px!important;
         }
-        &-show {
-  
+
+        &-visible {
+            @keyframes slideDown {
+                from {
+                    top: -49px;
+                    opacity: 0.9;
+                }
+                
+                to {
+                    top: 0px;
+                    opacity: 1;
+                }
+            }
+
+            animation: slideDown .2s linear;
         }
         &-hide {
             display: none!important;
         }
+
         &-index {
             padding: 4px 16px 4px 12px!important;
         }