bri-components 1.6.12 → 1.6.14

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "bri-components",
-    "version": "1.6.12",
+    "version": "1.6.14",
     "author": "dengshanghui",
     "description": "a component lib for vue project",
     "main": "src/index.js",

package/src/components/controls/base/BriUpload/BriUpload.vue

@@ -98,10 +98,10 @@
             <upload-list
                 class="BriUpload-list"
                 :mode="showMode"
+                :isInTable="isInTable"
                 :canEdit="!disabled"
                 :files="curValList"
                 :propsObj="propsObj"
-                :listPadding="!isInTable ? '16px' : undefined"
                 :isShowEditIcon="isShowEditIcon"
                 :emptyShowVal="emptyShowVal"
                 @deleteItem="clickDeteItem"

package/src/components/controls/base/BriUpload/uploadList.vue

@@ -100,6 +100,7 @@
             v-else
             :class="{
                 'uploadList-nodata': !mode.includes('inline'),
+                'uploadList-nodata-height': !mode.includes('inline') && !isInTable,
                 'uploadList-nodata-inline': mode.includes('inline')
             }"
         >
@@ -127,6 +128,10 @@
                     return ["single", "image", "file", "imageinline", "fileinline"].includes(val);
                 }
             },
+            isInTable: {
+                type: Boolean,
+                default: false
+            },
             canEdit: {
                 type: Boolean,
                 default: true
@@ -143,7 +148,6 @@
                     return {};
                 }
             },
-            listPadding: String,
             isShowEditIcon: Boolean,
             emptyShowVal: String
         },
@@ -160,6 +164,10 @@
             };
         },
         computed: {
+            listPadding () {
+                return this.isInTable ? undefined : "16px";
+            },
+
             allOperationMap () {
                 return {
                     canDelete: {
@@ -591,10 +599,13 @@
             width: 100%;
             height: 100%;
             text-align: center;
-            line-height: 120px;
             color: @placeholderColor;
             white-space: nowrap;
 
+            &-height {
+                line-height: 120px;
+            }
+
             &-inline {
                 padding-left: 7px;
                 line-height: 32px;

package/src/components/controls/mixins/cascaderTableMixin.js

@@ -25,6 +25,12 @@ export default {
                     logic: "and",
                     conditions: []
                 },
+                _default: {
+                    tree: [],
+                    list: [],
+                    rowDefault: {}
+                },
+
                 ...this.propsObj
             };
         },
@@ -93,6 +99,10 @@ export default {
             return this.$isAdvSearching(this.finalTableAdvSearch);
         },
 
+        // 用字段配置里_default里的rowDefault(后端schema接口里加工了)稳妥；虽然customShow接口或者流程data里也给了，但表格如果在前端依赖出现，rowDefault会是空对象
+        rowDefault () {
+            return this.selfPropsObj._default.rowDefault;
+        },
         curVal () {
             return this.value[this.controlKey] || {
                 tree: []

package/src/components/controls/mixins/selectMixin.js

@@ -142,10 +142,11 @@ export default {
         // 多选模式 点击选项
         clickCheckItem (item, index) {
             if (!this.getCheckItemDisabled(item)) {
-                this.curValList = this.getItemCheckStatus(item)
-                    ? this.curValList.filter(key => key !== item[this.saveKey])
-                    : [...this.curValList, item[this.saveKey]];
-                this.curValList = this.curValList.filter(key => this.listDataKeys.includes(key));
+                this.curValList = (
+                    this.getItemCheckStatus(item)
+                        ? this.curValList.filter(key => key !== item[this.saveKey])
+                        : [...this.curValList, item[this.saveKey]]
+                ).filter(key => this.listDataKeys.includes(key));
             }
         },
 

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

@@ -57,7 +57,7 @@
                         :canEdit="false"
                         :tableDataObj="curVal"
                         :data="curVal.tree"
-                        :rowDefault="curVal.rowDefault"
+                        :rowDefault="rowDefault"
                         :columns="subForm"
                         :treeColumns="treeForm"
                         :propsObj="{
@@ -103,7 +103,7 @@
                         :canEdit="!disabled"
                         :tableDataObj="curVal"
                         :data="curVal.tree"
-                        :rowDefault="curVal.rowDefault"
+                        :rowDefault="rowDefault"
                         :columns="subForm"
                         :treeColumns="treeForm"
                         :propsObj="defaultPropsObj"
@@ -144,7 +144,7 @@
                     :canEdit="!disabled"
                     :tableDataObj="curVal"
                     :data="curVal.tree"
-                    :rowDefault="curVal.rowDefault"
+                    :rowDefault="rowDefault"
                     :columns="subForm"
                     :treeColumns="treeForm"
                     :propsObj="selfPropsObj"

package/src/components/form/DshForm.vue

@@ -10,82 +10,176 @@
         <Row>
             <template v-if="showFormList.length">
                 <template v-for="formItem in showFormList">
+                    <!-- tab页签切换 -->
                     <i-col
+                        v-if="tabsGpMap[formItem._key] && tabsGpMap[formItem._key].allShowTabFormList.length > 1"
                         :key="formItem._key"
                         :id="formItem._key"
                         class="DshForm-item"
-                        :span="formItem._br ? 24 : (formItem._span || 24)"
+                        :span="24"
                     >
-                        <FormItem
-                            v-if="hideMap[formItem._key] !== true"
-                            class="DshForm-item-FormItem"
-                            :prop="formItem._key"
-                            @click.native="clickControl(formItem)"
-                        >
-                            <dsh-form-unit
-                                ref="dshFormUnit"
-                                :canEdit="canEdit"
-                                :formData="formData"
-                                :formItem="formItem"
-                                :allFormList="selfAllFormList"
-                                :inTableType="inTableType"
-                                :allListRows="allListRows"
-                                :rowIndex="rowIndex"
-                                :parentFormList="parentFormList"
-                                :parentObj="parentObj"
-                                :changedFields="changedFields"
-                                :height="height"
-                                :rowStyle="rowStyle"
-                                :labelStyle="labelStyle"
-                                :formControlClass="formControlClass"
-                                @change="change(arguments)"
-                                @refChange="refChange(arguments)"
-                                @changeField="changeField"
-                            >
-                                <slot
-                                    :canEdit="canEdit"
-                                    :formItem="formItem"
-                                    :formData="formData"
-                                    :allFormList="selfAllFormList"
-                                ></slot>
+                        <div class="DshForm-item-tabs-wrap">
+                            <div class="DshForm-item-tabs">
+                                <div
+                                    v-for="tabFormItem in tabsGpMap[formItem._key].allShowTabFormList"
+                                    :key="tabFormItem._key"
+                                    :class="{
+                                    'DshForm-item-tabs-option': true,
+                                    'DshForm-item-tabs-option-active': tabFormItem._key === tabsGpMap[formItem._key].curTabKey,
+                                }"
+                                    @click="tabsGpMap[formItem._key].curTabKey = tabFormItem._key"
+                                >{{ tabFormItem._name }}</div>
+                            </div>
+
+                            <template v-for="tabFormItem in tabsGpMap[formItem._key].allShowTabFormList">
+                                <FormItem
+                                    v-if="hideMap[tabFormItem._key] !== true && tabFormItem._key === tabsGpMap[formItem._key].curTabKey"
+                                    :key="tabFormItem._key"
+                                    class="DshForm-item-FormItem"
+                                    :prop="tabFormItem._key"
+                                    @click.native="clickControl(tabFormItem)"
+                                >
+                                    <dsh-form-unit
+                                        ref="dshFormUnit"
+                                        :canEdit="canEdit"
+                                        :formData="formData"
+                                        :formItem="tabFormItem"
+                                        :allFormList="selfAllFormList"
+                                        :inTableType="inTableType"
+                                        :allListRows="allListRows"
+                                        :rowIndex="rowIndex"
+                                        :parentFormList="parentFormList"
+                                        :parentObj="parentObj"
+                                        :changedFields="changedFields"
+                                        :height="height"
+                                        :rowStyle="rowStyle"
+                                        :labelStyle="labelStyle"
+                                        :formControlClass="formControlClass"
+                                        @change="change(arguments)"
+                                        @refChange="refChange(arguments)"
+                                        @changeField="changeField"
+                                    >
+                                        <slot
+                                            :canEdit="canEdit"
+                                            :formItem="tabFormItem"
+                                            :formData="formData"
+                                            :allFormList="selfAllFormList"
+                                        ></slot>
+
+                                        <slot
+                                            name="label"
+                                            slot="label"
+                                            :canEdit="canEdit"
+                                            :formItem="tabFormItem"
+                                            :formData="formData"
+                                            :allFormList="selfAllFormList"
+                                        ></slot>
+
+                                        <slot
+                                            name="extra"
+                                            slot="extra"
+                                            :canEdit="canEdit"
+                                            :formItem="tabFormItem"
+                                            :formData="formData"
+                                            :allFormList="selfAllFormList"
+                                        ></slot>
+
+                                        <slot
+                                            name="corner"
+                                            slot="corner"
+                                            :canEdit="canEdit"
+                                            :formItem="tabFormItem"
+                                            :formData="formData"
+                                            :allFormList="selfAllFormList"
+                                        ></slot>
+                                    </dsh-form-unit>
+                                </FormItem>
+                            </template>
+                        </div>
+                    </i-col>
 
-                                <slot
-                                    name="label"
-                                    slot="label"
-                                    :canEdit="canEdit"
-                                    :formItem="formItem"
-                                    :formData="formData"
-                                    :allFormList="selfAllFormList"
-                                ></slot>
+                    <!-- tab页签 里隐藏的字段不渲染 -->
+                    <template v-else-if="tabHideFieldKeys.includes(formItem._key)"></template>
 
-                                <slot
-                                    name="extra"
-                                    slot="extra"
+                    <template v-else>
+                        <i-col
+                            :key="formItem._key"
+                            :id="formItem._key"
+                            class="DshForm-item"
+                            :span="formItem._br ? 24 : (formItem._span || 24)"
+                        >
+                            <FormItem
+                                v-if="hideMap[formItem._key] !== true"
+                                class="DshForm-item-FormItem"
+                                :prop="formItem._key"
+                                @click.native="clickControl(formItem)"
+                            >
+                                <dsh-form-unit
+                                    ref="dshFormUnit"
                                     :canEdit="canEdit"
-                                    :formItem="formItem"
                                     :formData="formData"
-                                    :allFormList="selfAllFormList"
-                                ></slot>
-
-                                <slot
-                                    name="corner"
-                                    slot="corner"
-                                    :canEdit="canEdit"
                                     :formItem="formItem"
-                                    :formData="formData"
                                     :allFormList="selfAllFormList"
-                                ></slot>
-                            </dsh-form-unit>
-                        </FormItem>
-                    </i-col>
+                                    :inTableType="inTableType"
+                                    :allListRows="allListRows"
+                                    :rowIndex="rowIndex"
+                                    :parentFormList="parentFormList"
+                                    :parentObj="parentObj"
+                                    :changedFields="changedFields"
+                                    :height="height"
+                                    :rowStyle="rowStyle"
+                                    :labelStyle="labelStyle"
+                                    :formControlClass="formControlClass"
+                                    @change="change(arguments)"
+                                    @refChange="refChange(arguments)"
+                                    @changeField="changeField"
+                                >
+                                    <slot
+                                        :canEdit="canEdit"
+                                        :formItem="formItem"
+                                        :formData="formData"
+                                        :allFormList="selfAllFormList"
+                                    ></slot>
+
+                                    <slot
+                                        name="label"
+                                        slot="label"
+                                        :canEdit="canEdit"
+                                        :formItem="formItem"
+                                        :formData="formData"
+                                        :allFormList="selfAllFormList"
+                                    ></slot>
+
+                                    <slot
+                                        name="extra"
+                                        slot="extra"
+                                        :canEdit="canEdit"
+                                        :formItem="formItem"
+                                        :formData="formData"
+                                        :allFormList="selfAllFormList"
+                                    ></slot>
+
+                                    <slot
+                                        name="corner"
+                                        slot="corner"
+                                        :canEdit="canEdit"
+                                        :formItem="formItem"
+                                        :formData="formData"
+                                        :allFormList="selfAllFormList"
+                                    ></slot>
+                                </dsh-form-unit>
+                            </FormItem>
+                        </i-col>
+
+                        <!-- 换行 -->
+                        <i-col
+                            v-if="formItem._wrap"
+                            :key="formItem._key + '_wrap'"
+                            style="min-height: 0px;"
+                            :span="24"
+                        ></i-col>
+                    </template>
 
-                    <!-- 换行 -->
-                    <i-col
-                        v-if="formItem._wrap"
-                        :key="formItem._key + '_wrap'"
-                        style="min-height: 0px;"
-                        :span="24"
-                    ></i-col>
                 </template>
             </template>
 
@@ -192,6 +286,7 @@
                 errorObj: {
                     errors: []
                 },
+                tabsGpMap: {},
 
                 forceValidateTypes: [
                     "select", "region", "cascader", "regions", "cascaders", "file", "coordinates", "editor",
@@ -209,6 +304,18 @@
             },
             showFormList () {
                 return this.formList.filter(formItem => this.isShow(formItem, this.formData, this.parentObj));
+            },
+            showFieldKeys () {
+                return this.showFormList.map(formItem => formItem._key);
+            },
+
+            tabHideFieldKeys () {
+                return Object.values(this.tabsGpMap).reduce((arr, objItem) => {
+                    return [
+                        ...arr,
+                        ...objItem.tabGpFieldKeys
+                    ];
+                }, []);
             }
         },
         watch: {
@@ -224,6 +331,7 @@
             init () {
                 this.initMonitor();
                 this.initRules();
+                this.initTabsGroupMap();
             },
             // 初始化监测 -监测所有字段
             initMonitor () {
@@ -239,6 +347,30 @@
                     return rulesObj;
                 }, this.rules);
             },
+            initTabsGroupMap () {
+                this.tabsGpMap = this.showFormList.reduce((map, formItem) => {
+                    let tabGpFieldKeys = formItem._tabGpFieldKeys;
+
+                    if (tabGpFieldKeys && tabGpFieldKeys.length) {
+                        const showTabGroupKeys = tabGpFieldKeys.filter(fieldKey => this.showFieldKeys.includes(fieldKey));
+                        const showTabFormList = showTabGroupKeys.map(fieldKey => this.showFormList.find(formItem => formItem._key === fieldKey));
+
+                        return showTabFormList.length > 0
+                            ? {
+                                ...map,
+                                [formItem._key]: {
+                                    curTabKey: formItem._key,
+                                    tabGpFieldKeys,
+                                    // allTabGpFieldKeys: [formItem._key, ...tabGpFieldKeys],
+                                    allShowTabFormList: [formItem, ...showTabFormList]
+                                }
+                            }
+                            : map;
+                    } else {
+                        return map;
+                    }
+                }, {});
+            },
 
             /* ------- 供外部使用 ---------- */
             // 获取iview的form组件实例
@@ -469,8 +601,33 @@
     .DshForm {
         padding-bottom: 5px;
 
-        &-item-FormItem {
-            margin-bottom: 0px;
+        &-item {
+            &-FormItem {
+                margin-bottom: 0px;
+            }
+
+            &-tabs {
+                margin: 8px 12px;
+                display: flex;
+                flex-direction: row;
+
+                &-wrap {
+                    margin: 12px 0px;
+                }
+
+                &-option {
+                    margin-right: 5px;
+                    padding: 8px 16px;
+                    background-color: #e5e5e5;
+                    // font-weight: 700;
+                    cursor: pointer;
+
+                    &-active {
+                        background-color: #ffffff;
+                        color: @themeColor;
+                    }
+                }
+            }
         }
 
         &-nodata {

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

@@ -200,7 +200,7 @@ export default {
                     // 每条数据都补充全所有字段值（赋一个默认的空值）
                     this.selfColumns.forEach((colItem) => {
                         // 不用row[colItem._key] === undefined判断，是因为后端给的空值不可靠，多选的有时候都能给null
-                        if (!Object.prototype.hasOwnProperty.call(row, colItem._key) && this.$isEmptyData(row[colItem._key])) {
+                        if (!row.hasOwnProperty(colItem._key) && this.$isEmptyData(row[colItem._key])) {
                             this.$set(row, colItem._key, this.$deepCopy(this.dftInitValMap[colItem._type]));
                         }
                     });

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

@@ -418,6 +418,19 @@ export default {
             }
         },
 
+        // 行-获取每行的表单列表
+        getRowFormList (row, rowIndex) {
+            return this.selfColumns.map(column => {
+                column = this.$transformDynamicProperty(column, row, this.parentObj);
+                const unitCanEdit = this.getColCanEdit({ row, rowIndex, column });
+
+                return {
+                    ...column,
+                    canEdit: unitCanEdit
+                };
+            });
+        },
+        // 单元格-合并单元格配置
         bodyCellSpan ({ row, rowIndex, column }) {
             return {
                 rowspan: this.mergeRowColKeys.includes(column._key)
@@ -428,7 +441,7 @@ export default {
                 colspan: 1
             };
         },
-        // 加工单元格对应的配置
+        // 单元格-加工对应的配置
         getSelfResetCol ({ row, rowIndex, column }) {
             return this.mergeRowColKeys.includes(column._key)
                 ? {
@@ -443,7 +456,7 @@ export default {
                 // 每条数据都补充全所有字段值（赋一个默认的空值）
                 this.selfColumns.forEach((colItem) => {
                     // 不用row[colItem._key] === undefined判断，是因为后端给的空值不可靠，多选的有时候都能给null
-                    if (!Object.prototype.hasOwnProperty.call(row, colItem._key) && this.$isEmptyData(row[colItem._key])) {
+                    if (!row.hasOwnProperty(colItem._key) && this.$isEmptyData(row[colItem._key])) {
                         this.$set(row, colItem._key, this.$deepCopy(this.dftInitValMap[colItem._type]));
                     }
                 });

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

@@ -11,6 +11,11 @@ export default {
                 ...this.treeTableBasePropsObj
             };
         },
+        // 初始化选择展开几级节点
+        dftExpandLevel () {
+            return 2;
+            // return this.maxLevel;
+        },
 
         /* --- 列字段 --- */
         showColumns () {
@@ -23,11 +28,11 @@ export default {
         },
         expandColumn () {
             return {
-                // title: "开／合",
+                title: "开/收",
                 _key: "__isExpand__",
                 key: "__isExpand__",
                 field: "__isExpand__",
-                width: 48,
+                width: 52,
                 align: "center",
                 fixed: "left",
                 renderBodyCell: ({ row, rowIndex, column }, h) => {
@@ -62,14 +67,14 @@ export default {
                 _key: "__treeIndex__",
                 key: "__treeIndex__",
                 field: "__treeIndex__",
-                width: 28 + 16 + (this.maxLevel - 1) * 36,
+                width: 28 + (this.maxLevel - 1) * 24,
                 align: "left",
-                fixed: "left",
+                // fixed: "left",
                 renderBodyCell: ({ row, rowIndex, column }, h) => {
                     return [
                         h("div", {
                             style: {
-                                paddingLeft: `${(row.level - 1) * 18}px`,
+                                paddingLeft: `${(row.level - 1) * 10}px`,
                                 fontWeight: "500"
                             }
                         }, row.__treeIndex__),
@@ -215,19 +220,25 @@ export default {
                 // 每条数据都补充全所有字段值（赋一个默认的空值）
                 this.selfColumns.forEach((colItem) => {
                     // 不用row[colItem._key] === undefined判断，是因为后端给的空值不可靠，多选的有时候都能给null
-                    if (!Object.prototype.hasOwnProperty.call(row, colItem._key) && this.$isEmptyData(row[colItem._key])) {
+                    if (!row.hasOwnProperty(colItem._key) && this.$isEmptyData(row[colItem._key])) {
                         this.$set(row, colItem._key, this.$deepCopy(this.dftInitValMap[colItem._type]));
                     }
                 });
 
                 row.level = row.level || levelNum; // TODO：修正数据level属性，后期可以删除
-                // 第一级的需要显示出来
-                if (row.level === 1) {
+                // 重置计划节点状态 （第一级的需要显示出来）
+                if (row.level < this.dftExpandLevel) {
+                    // 必须用$set
+                    this.$set(row, "__isExpand__", !!(row.children && row.children.length));
+                    this.$set(row, "__isShow__", true);
+                    this.$set(row, "__isTmpShow__", true);
+                } else if (row.level === this.dftExpandLevel) {
                     // 必须用$set
                     this.$set(row, "__isExpand__", false);
                     this.$set(row, "__isShow__", true);
                     this.$set(row, "__isTmpShow__", true);
                 } else {
+                    // 必须用$set
                     this.$set(row, "__isExpand__", false);
                     this.$set(row, "__isShow__", false);
                     this.$set(row, "__isTmpShow__", false);
@@ -237,13 +248,13 @@ export default {
             else {
                 // 第一级的需要显示出来
                 if (row.level === 1) {
-                    !Object.prototype.hasOwnProperty.call(row, "__isExpand__") && this.$set(row, "__isExpand__", false);
-                    !Object.prototype.hasOwnProperty.call(row, "__isShow__") && this.$set(row, "__isShow__", true);
-                    !Object.prototype.hasOwnProperty.call(row, "__isTmpShow__") && this.$set(row, "__isTmpShow__", true);
+                    !row.hasOwnProperty("__isExpand__") && this.$set(row, "__isExpand__", false);
+                    !row.hasOwnProperty("__isShow__") && this.$set(row, "__isShow__", true);
+                    !row.hasOwnProperty("__isTmpShow__") && this.$set(row, "__isTmpShow__", true);
                 } else {
-                    !Object.prototype.hasOwnProperty.call(row, "__isExpand__") && this.$set(row, "__isExpand__", false);
-                    !Object.prototype.hasOwnProperty.call(row, "__isShow__") && this.$set(row, "__isShow__", false);
-                    !Object.prototype.hasOwnProperty.call(row, "__isTmpShow__") && this.$set(row, "__isTmpShow__", false);
+                    !row.hasOwnProperty("__isExpand__") && this.$set(row, "__isExpand__", false);
+                    !row.hasOwnProperty("__isShow__") && this.$set(row, "__isShow__", false);
+                    !row.hasOwnProperty("__isTmpShow__") && this.$set(row, "__isTmpShow__", false);
                 }
             }
         },
@@ -257,22 +268,25 @@ export default {
         },
         // 切换子孙后代的显示／隐藏
         toggleDescendantsShow (row, bool) {
-            const loop = (row, isFirstSon) => {
+            const loop = (row, bool, isFirstSon) => {
                 if (row.children && row.children.length) {
                     row.children.forEach(subRow => {
+                        // !父级的bool是true，即只有当父级节点是显示状态时，子孙后代才能根据__isTmpShow__设置__isShow__
+                        let resultBool = bool;
                         if (isFirstSon) {
-                            this.$set(subRow, "__isShow__", bool);
-                            this.$set(subRow, "__isTmpShow__", bool);
+                            this.$set(subRow, "__isShow__", resultBool);
+                            this.$set(subRow, "__isTmpShow__", resultBool);
                         } else {
-                            this.$set(subRow, "__isShow__", bool ? !!subRow.__isTmpShow__ : false);
+                            resultBool = bool ? !!subRow.__isTmpShow__ : false;
+                            this.$set(subRow, "__isShow__", resultBool);
                         }
 
-                        loop(subRow);
+                        loop(subRow, resultBool);
                     });
                 }
             };
 
-            loop(row, true);
+            loop(row, bool, true);
         },
         // getNewRowData时，额外补充的行相关的数据
         getSelfNewRowData (level) {