bri-components 1.2.50 → 1.2.52

package/src/components/controls/base/DshSwitch/switchMixin.js

@@ -25,13 +25,11 @@ export default {
                 ...this.commonDealPropsObj,
 
                 _openText: this.propsObj._openText || "是", // 此行放在 ...this.propsObj的下面目的是，处理_openText为空字符串的情况
-                _closeText: this.propsObj._closeText || "否",
-                _disabled: this.propsObj._disabled || !this.finalCanEdit
+                _closeText: this.propsObj._closeText || "否"
             };
         },
         mulPropsObj () {
             return {
-                ...this.propsObj,
                 _optionKind: "flat",
                 _data: [
                     {
@@ -44,7 +42,9 @@ export default {
                         name: this.selfPropsObj._closeText,
                         color: this.selfPropsObj._closeColor
                     }
-                ]
+                ],
+
+                ...this.propsObj
             };
         },
         showStyle () {

package/src/components/controls/controlMap.js

@@ -44,6 +44,9 @@ const componentNameMap = {
     back: "DshBack",
     undefined: "DshUndeveloped",
 
+    themeColor: "themeColor",
+    themeIcon: "themeIcon",
+
     ...controlConfig.componentNameMap
 };
 
@@ -60,17 +63,23 @@ const pathMap = {
         BriUpload: "./base/BriUpload/BriUpload.vue",
         DshCoordinates: "./base/DshCoordinates.vue",
         DshEditor: "./base/DshEditor.vue",
-        DshDivider: "./base/DshDivider.vue",
-
+        DshDivider: "./base/DshDivider.vue"
+    },
+    senior: {
         selectUsers: "./senior/selectUsers/selectUsers.vue",
         selectDepartments: "./senior/selectDepartments.vue",
         BriLabels: "./senior/BriLabels.vue",
         DshPackage: "./senior/DshPackage.vue",
         flatTable: "./senior/flatTable.vue",
-        cascaderTable: "./senior/cascaderTable",
-
+        cascaderTable: "./senior/cascaderTable"
+    },
+    special: {
         DshBack: "./special/DshBack.vue",
         DshUndeveloped: "./special/DshUndeveloped.vue"
+    },
+    extra: {
+        themeColor: "./extra/themeColor.vue",
+        themeIcon: "./extra/themeIcon.vue"
     }
 };
 

package/src/components/controls/controlMixin.js

@@ -90,7 +90,7 @@ export default {
         },
         // 是否为多选模式
         multipleMode () {
-            return ["numberange", "daterange", "checkbox", "regions", "cascaders"].includes(this.controlType) || !!this.propsObj._multiple;
+            return ["texts", "numberange", "daterange", "checkbox", "regions", "cascaders"].includes(this.controlType) || !!this.propsObj._multiple;
         },
         commonDealPropsObj () {
             const selectControlTypes = ["date", "switch", "select", "checkbox", "file", "region", "regions", "cascader", "cascaders", "coordinates", "users", "departments"];
@@ -99,7 +99,8 @@ export default {
                 _placeholder: this.canEdit && this.propsObj._enterType !== "calculate"
                     ? (this.propsObj._placeholder || `请${selectControlTypes.includes(this.controlType) ? "选择" : "输入"}${this.propsObj._name}`)
                     : undefined,
-                _clearable: this.finalCanEdit && (this.propsObj._clearable === undefined ? true : this.propsObj._clearable)
+                _clearable: this.finalCanEdit && (this.propsObj._clearable === undefined ? true : this.propsObj._clearable),
+                _disabled: this.propsObj._disabled || ["serialNumber"].includes(this.controlType) || !this.finalCanEdit
             };
         },
         commonClass () {
@@ -133,6 +134,9 @@ export default {
         isOnSearch () {
             return !!this.propsObj.onSearch;
         },
+        isOnDftSearch () {
+            return !!this.propsObj.onDftSearch;
+        },
         isUnitUpdate () {
             return this.isInTable && !!this.canEdit;
         },

package/src/components/controls/extra/themeColor.vue

@@ -0,0 +1,115 @@
+<template>
+    <div class="themeColor">
+        <div class="themeColor-colors">
+            <div
+                v-for="(colorItem, colorKey) in themeColorMap"
+                :key="colorKey"
+                class="item"
+                @click="curVal = colorKey"
+            >
+                <div
+                    class="item-content"
+                    :style="{
+                        backgroundColor: colorItem.color
+                    }"
+                ></div>
+                <Icon
+                    v-if="colorKey === curVal"
+                    class="item-icon"
+                    type="ios-checkmark-circle"
+                    size="16"
+                />
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+    import controlMixin from "../controlMixin.js";
+
+    export default {
+        name: "themeColor",
+        mixins: [
+            controlMixin
+        ],
+        components: {},
+        props: {},
+        data () {
+            return {};
+        },
+        computed: {
+            selfPropsObj () {
+                return {
+                    _relateColorkey: "colorType",
+
+                    ...this.propsObj,
+                    ...this.commonDealPropsObj
+                };
+            },
+            themeColorMap () {
+                return this.$appData.themeColors || {};
+            },
+
+            // 值为不是[]类型用的
+            curVal: {
+                get () {
+                    return this.value[this.controlKey];
+                },
+                set (val) {
+                    this.value[this.controlKey] = val;
+                    this.change();
+                }
+            }
+        },
+        created () {
+            this.init();
+        },
+        methods: {
+            init () {
+                if (!this.curVal) {
+                    this.curVal = Object.keys(this.themeColorMap)[0];
+                }
+            }
+        }
+    };
+</script>
+
+<style lang="less" scoped>
+    .themeColor {
+        width: 100%;
+
+        &-colors {
+            display: flex;
+
+            .item {
+                display: inlile-block;
+                width: 54px;
+                height: 54px;
+                margin-right: 7px;
+                cursor: pointer;
+                position: relative;
+
+                &-content {
+                    width: 38px;
+                    height: 38px;
+                    margin: 8px auto;
+                    border-radius: 50%;
+                }
+
+                &-icon {
+                    position: absolute;
+                    bottom: 7px;
+                    right: 7px;
+
+                    border-radius: 50%;
+                    background-color: rgba(255, 255, 255, 0.85);
+                    color: @themeColor;
+                }
+
+                &:last-of-type {
+                    margin-right: 0px;
+                }
+            }
+        }
+    }
+</style>

package/src/components/controls/extra/themeIcon.vue

@@ -0,0 +1,124 @@
+<template>
+    <div class="themeIcon">
+        <div class="themeIcon-icons">
+            <div
+                v-for="(iconItem, iconKey) in iconMap"
+                :key="iconKey"
+                :class="{
+                    'item': true,
+                    'item-active': iconKey === curVal
+                }"
+                :style="{
+                    'borderColor': iconKey === curVal ? bgColor : undefined
+                }"
+                @click="curVal = iconKey"
+            >
+                <div
+                    class="item-content"
+                    :style="{
+                        'backgroundColor': bgColor
+                    }"
+                >
+                    <Icon :custom="'bico-font ' + iconItem" />
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+    import controlMixin from "../controlMixin.js";
+
+    export default {
+        name: "themeIcon",
+        mixins: [
+            controlMixin
+        ],
+        components: {},
+        props: {},
+        data () {
+            return {};
+        },
+        computed: {
+            selfPropsObj () {
+                return {
+                    _relateColorkey: "colorType",
+
+                    ...this.propsObj,
+                    ...this.commonDealPropsObj
+                };
+            },
+            iconMap () {
+                return this.$appData.themeIcons || {};
+            },
+            relateColorkey () {
+                return this.selfPropsObj._relateColorkey;
+            },
+            themeColorMap () {
+                return this.$appData.themeColors || {};
+            },
+            bgColor () {
+                return (this.themeColorMap[this.value[this.relateColorkey]] || {}).bgColor;
+            },
+
+            // 值为不是[]类型用的
+            curVal: {
+                get () {
+                    return this.value[this.controlKey];
+                },
+                set (val) {
+                    this.value[this.controlKey] = val;
+                    this.change();
+                }
+            }
+        },
+        created () {
+            this.init();
+        },
+        methods: {
+            init () {
+                if (!this.curVal) {
+                    this.curVal = Object.keys(this.iconMap)[0];
+                }
+            }
+        }
+    };
+</script>
+
+<style lang="less" scoped>
+    .themeIcon {
+        width: 100%;
+
+        &-icons {
+            display: flex;
+
+            .item {
+                min-width: 54px;
+                height: 54px;
+                margin-right: 7px;
+                border: 1px solid transparent;
+                border-radius: 8px;
+                cursor: pointer;
+
+                &-content {
+                    width: 38px;
+                    height: 38px;
+                    margin: 8px auto;
+                    border-radius: 38px;
+                    line-height: 38px;
+                    text-align: center;
+
+                    i {
+                        font-size: 20px;
+                        color: #ffffff;
+                    }
+                }
+
+                &:hover,
+                &-active {
+                    border-color: @themeColor;
+                }
+            }
+        }
+    }
+</style>

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

@@ -14,8 +14,7 @@
                 <!-- 可编辑 -->
                 <bri-control-input
                     :class="{
-                        ...commonClass,
-                        'BriLabels-edit': true
+                        ...commonClass
                     }"
                     :canEdit="finalCanEdit"
                     :value="curValList"
@@ -103,8 +102,7 @@
                 :transfer="true"
             >
                 <div :class="{
-                    ...commonClass,
-                    'BriLabels-show': true
+                    ...commonClass
                 }">
                     <dsh-tags
                         v-if="!$isEmptyData(curValList)"
@@ -255,3 +253,64 @@
         }
     };
 </script>
+
+<style lang="less">
+    .BriLabels {
+        width: 100%;
+
+        &-dropdown {
+            width: 100%;
+
+            &-menu {
+                .item {
+                    margin: 4px 8px;
+                    border-radius: @borderRadius;
+
+                    &-active {
+                        background-color: @theme-focus;
+                        color: @themeColor;
+                    }
+
+                    &-edit {
+
+                    }
+
+                    &-show {
+
+                    }
+                }
+
+                .btns {
+                    border-top: 1px solid #E7E7E7;
+                    margin: 12px 8px 0;
+                    padding-top: 8px;
+
+                    &-add {
+                        width: 100%;
+                        margin-bottom: 8px;
+                    }
+                }
+            }
+        }
+
+        .ivu-select-dropdown {
+            width: fit-content;
+        }
+
+        .ivu-input-suffix {
+            display: flex;
+            align-items: center;
+
+            i {
+                width: 24px;
+                height: 24px;
+                line-height: 24px;
+
+                &:hover {
+                    background-color: @btn-hover;
+                    border-radius: @borderRadius;
+                }
+            }
+        }
+    }
+</style>

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

@@ -1,40 +1,19 @@
 <!-- 动态表单 -->
 <template>
     <div class="DshPackage">
+        <dsh-form
+            v-if="curVal"
+            class="DshPackage-form"
+            :canEdit="finalCanEdit"
+            :formData="curVal.data || {}"
+            :formList="curVal.form || []"
+            @click.native="clickRow(val)"
+        ></dsh-form>
         <div
-            v-if="canEdit"
-            class="DshPackage-edit"
+            v-else
+            class="DshPackage-nodata"
         >
-            <dsh-form
-                v-if="value[propsObj._key]"
-                class="reference-single-content-form"
-                :canEdit="finalCanEdit"
-                :formData="value[propsObj._key].data || {}"
-                :formList="value[propsObj._key].form || []"
-                @click.native="clickRow(val)"
-            ></dsh-form>
-            <div
-                v-else
-                class="DshPackage-edit-nodata"
-            ><span>暂无字段</span>
-            </div>
-        </div>
-
-        <div v-else>
-            <dsh-form
-                v-if="value[propsObj._key]"
-                class="reference-single-content-form"
-                :canEdit="finalCanEdit"
-                :formData="value[propsObj._key].data || {}"
-                :formList="value[propsObj._key].form || []"
-                @click.native="clickRow(val)"
-            ></dsh-form>
-            <div
-                v-else
-                class="DshPackage-nodata"
-            >
-                {{ emptyShowVal }}
-            </div>
+            {{ emptyShowVal }}
         </div>
     </div>
 </template>
@@ -57,3 +36,22 @@
         methods: {}
     };
 </script>
+
+<style lang="less">
+    .DshPackage {
+        width: 100%;
+
+        &-form {
+
+        }
+
+        &-nodata {
+            height: 100%;
+            padding: 0 10px;
+            border: 1px #eee solid;
+            border-radius: 4px;
+            background: #fff;
+            line-height: 32px;
+        }
+    }
+</style>

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

@@ -5,7 +5,9 @@
             v-if="isUnitShow"
             class="cascaderTable-unit"
         >
-            <dsh-icons :list="$getOperationList(['canLink'])"></dsh-icons>
+            <dsh-icons :list="[{
+                customIcon: 'bico-Cascadetable'
+            }]"></dsh-icons>
             <span class="cascaderTable-unit-text">
                 {{ curVal && curVal.tree.length }}行
             </span>
@@ -84,6 +86,7 @@
             return {
                 isEnlarge: false,
                 timer: null,
+
                 operationMap: {
                     canExport: {
                         name: "导出",
@@ -100,9 +103,6 @@
                         size: "small",
                         btnType: "text",
                         event: "clickEnlarge"
-                    },
-                    canLink: {
-                        customIcon: "bico-Cascadetable"
                     }
                 }
             };
@@ -198,3 +198,24 @@
         }
     };
 </script>
+
+<style lang="less">
+    .cascaderTable {
+        &-unit {
+            .bri-unit-show();
+
+            &-text {
+
+            }
+        }
+
+        &-btns {
+            text-align: right;
+            color: @textColor;
+
+            &-item {
+
+            }
+        }
+    }
+</style>

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

@@ -1,23 +1,22 @@
 <template>
     <div class="flatTable">
         <!-- 多选模式 -->
-        <template v-if="multipleMode">
-            <!-- 暂时不写内容 -->
-        </template>
+        <template v-if="multipleMode"></template>
 
         <!-- 单选模式 -->
         <template v-else>
             <!-- 查看 单元格内 -->
-            <template v-if="isUnitShow">
-                <span class="flatTable-unit">
-                    <dsh-icons :list="[{
-                        customIcon: 'bico-internaltable'
-                    }]"></dsh-icons>
-                    <span class="flatTable-unit-text">
-                        {{ curVal.list.length }}行
-                    </span>
+            <span
+                v-if="isUnitShow"
+                class="flatTable-unit"
+            >
+                <dsh-icons :list="[{
+                    customIcon: 'bico-internaltable'
+                }]"></dsh-icons>
+                <span class="flatTable-unit-text">
+                    {{ curVal.list.length }}行
                 </span>
-            </template>
+            </span>
 
             <!-- 编辑、查看（查看页内） -->
             <template v-else>
@@ -149,3 +148,26 @@
         }
     };
 </script>
+
+<style lang="less">
+    .flatTable {
+        width: 100%;
+
+        &-unit {
+            .bri-unit-show();
+
+            &-text {
+
+            }
+        }
+
+        &-btns {
+            text-align: right;
+            color: @textColor;
+
+            &-item {
+
+            }
+        }
+    }
+</style>