bri-components 1.2.62 → 1.2.64

package/package.json

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

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

@@ -29,18 +29,31 @@
         class="DshCascader-show"
     >
         <!-- 有值 -->
-        <bri-tooltip
-            v-if="!$isEmptyData(curValList)"
-            :content="showVal"
-            :transfer="true"
-        >
-            <div :class="{
-                commonClass,
-                'DshCascader-show-ellipsis': true
-            }">
+        <template v-if="!$isEmptyData(curValList)">
+            <!-- 详情页查看 且单独占一行高度自由时 -->
+            <div
+                v-if="isHeightAuto"
+                :class="{
+                    ...commonClass,
+                    'DshCascader-show-auto': true
+                }"
+            >
                 {{ showVal }}
             </div>
-        </bri-tooltip>
+
+            <bri-tooltip
+                v-else
+                :content="showVal"
+                :transfer="true"
+            >
+                <div :class="{
+                    ...commonClass,
+                    'DshCascader-show-ellipsis': true
+                }">
+                    {{ showVal }}
+                </div>
+            </bri-tooltip>
+        </template>
 
         <!-- 无值 -->
         <div
@@ -82,9 +95,9 @@
     >
         <!-- 有值 -->
         <template v-if="!$isEmptyData(curValList)">
-            <!-- 详情查看页 且单独充满行的 -->
+            <!-- 详情页查看 且单独占一行高度自由时 -->
             <dsh-tags
-                v-if="isDetailShow && isHeightAuto"
+                v-if="isHeightAuto"
                 :class="{
                     ...commonClass,
                     'DshCascaders-show-auto': true
@@ -176,15 +189,18 @@
     @import url("../../control.less");
 
     .DshCascader {
+        #control-show();
+
         &-show {
+            &-auto,
             &-ellipsis {
-                .dsh-ellipsis();
+                margin: 6px;
             }
         }
     }
 
     // 多选
     .DshCascaders {
-        #control-select(cascader);
+        #control-show();
     }
 </style>

package/src/components/controls/base/DshCascader/components/cascaderModal.vue

@@ -147,7 +147,6 @@
         props: {},
         data () {
             return {
-                inputStr: "",
                 description: ""
             };
         },

package/src/components/controls/base/DshCascader/components/cascaderPicker.vue

@@ -275,7 +275,7 @@
             &.ivu-select-dropdown {
                 min-width: 400px;
                 max-width: 400px;
-                max-height: 600px; // 必须有
+                max-height: 500px; // 必须有，压住iview的300px
                 border: 0.5px solid #e5e5e5;
                 box-shadow: 0 3px 14px 2px rgba(0,0,0,0.05), 0 8px 10px 1px rgba(0,0,0,0.06), 0 5px 5px -3px rgba(0,0,0,0.1);
             }
@@ -353,8 +353,8 @@
 
                     &-list {
                         width: 100%;
-                        min-height: 360px;
-                        max-height: 360px;
+                        min-height: 280px;
+                        max-height: 340px;
                         padding: 5px 10px 10px;
                         overflow: auto;
 

package/src/components/controls/base/DshSelect/DshCheckbox.vue

@@ -51,7 +51,7 @@
                         :label="item.name || item._name"
                         :disabled="getCheckItemDisabled(item, index)"
                     >
-                        <Checkbox :value="curValList.includes(item._key)"></Checkbox>
+                        <Checkbox :value="getItemCheckStatus(item)"></Checkbox>
 
                         <slot :item="item"></slot>
 
@@ -75,9 +75,9 @@
     >
         <!-- 有值 -->
         <template v-if="!$isEmptyData(curValList)">
-            <!-- 详情查看页 且单独充满行的 -->
+            <!-- 详情页查看 且单独占一行高度自由时 -->
             <dsh-tags
-                v-if="isDetailShow && isHeightAuto"
+                v-if="isHeightAuto"
                 :class="{
                     ...commonClass,
                     'DshCheckbox-show-auto': true
@@ -93,11 +93,11 @@
             >
                 <dsh-tags
                     :class="{
-                    ...commonClass,
-                    'DshCheckbox-show-ellipsis': true
-                }"
+                        ...commonClass,
+                        'DshCheckbox-show-ellipsis': true
+                    }"
                     :list="curValObjList"
-                    itemClass="DshCheckbox-show-tag"
+                    itemClass="DshCheckbox-show-ellipsis-tag"
                 ></dsh-tags>
             </bri-tooltip>
         </template>
@@ -153,6 +153,7 @@
     @import url("../../control.less");
 
     .DshCheckbox {
+        #control-show();
         #control-select(checkbox);
     }
 </style>

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

@@ -85,8 +85,9 @@
     >
         <!-- 有值 -->
         <template v-if="!$isEmptyData(curVal)">
+            <!-- 详情页查看 且单独占一行高度自由时 -->
             <dsh-tags
-                v-if="isDetailShow && isHeightAuto"
+                v-if="isHeightAuto"
                 :class="{
                     ...commonClass,
                     'DshSelect-show-auto': true
@@ -167,6 +168,7 @@
     @import url("../../control.less");
 
     .DshSelect {
+        #control-show();
         #control-select(radio);
     }
 </style>

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

@@ -13,7 +13,6 @@
             :false-color="selfPropsObj._closeColor"
             :true-value="selfPropsObj._openValue"
             :false-value="selfPropsObj._closeValue"
-            @on-change="change"
         >
             <span slot="open">
                 {{ selfPropsObj._openText }}
@@ -31,8 +30,9 @@
     >
         <!-- 有值 -->
         <template v-if="!$isEmptyData(curVal)">
+            <!-- 详情页查看 且单独占一行高度自由时 -->
             <dsh-tags
-                v-if="isDetailShow && isHeightAuto"
+                v-if="isHeightAuto"
                 :class="{
                     ...commonClass,
                     'DshSwitch-show-auto': true
@@ -107,6 +107,6 @@
     @import url("../../control.less");
 
     .DshSwitch {
-        #control-select(switch);
+        #control-show();
     }
 </style>

package/src/components/controls/control.less

@@ -1,3 +1,28 @@
+// 控件查看状态的样式
+#control-show () {
+    &-show {
+        &-auto {
+            white-space: normal!important;
+            word-break: normal!important;
+            text-overflow: auto!important; 
+
+            &-tag {
+                height: auto!important;
+            }
+        }
+
+        &-ellipsis {
+            margin: 2px 0px;
+            .dsh-ellipsis();
+
+            &-tag {
+                .dsh-ellipsis();
+            }
+        }
+    }
+}
+
+// 单选多选控件样式
 #control-select (@control-type) {
     &-flat {
         width: 100%;
@@ -184,22 +209,5 @@
             }
         }
     }
+}
 
-    // 查看
-    &-show {
-        &-auto {
-            &-tag {
-                height: auto!important;
-            }
-        }
-
-        &-ellipsis {
-            margin: 2px 0px;
-            .dsh-ellipsis();
-
-            &-tag {
-                .dsh-ellipsis();
-            }
-        }
-    }
-}

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

@@ -1,5 +1,5 @@
 import controlMixin from "./controlMixin.js";
-import { regionData, userIndustryData } from "bri-datas";
+import { resourceData, regionData, userIndustryData } from "bri-datas";
 
 export default {
     mixins: [
@@ -15,6 +15,8 @@ export default {
             const _joinSymbol = this.propsObj._joinSymbol || "/";
             return {
                 _showMode: "default",
+                colorMap: resourceData.colorMap,
+                _useColor: false,
                 _saveKey: "_key",
                 _valueKey: "code",
                 _nameKey: "name",
@@ -34,6 +36,12 @@ export default {
         showType () {
             return this.selfPropsObj._showMode;
         },
+        colorMap () {
+            return this.selfPropsObj.colorMap;
+        },
+        useColor () {
+            return this.selfPropsObj._useColor;
+        },
         saveKey () {
             return this.selfPropsObj._saveKey;
         },
@@ -99,12 +107,17 @@ export default {
             return loop(this.originData, this.cascaderLevel, undefined, this.cascaderFilterVals, this.isMobile);
         },
 
+        curValObj () {
+            return this.getItemObj(this.curValList);
+        },
         curValName: {
             get () {
-                return this.transformFullName(this.curValList);
+                return this.curValObj
+                    ? this.curValObj[this.nameKey]
+                    : "";
             },
-            set (str) {
-                if (!str) {
+            set (val) {
+                if (!val) {
                     this.clickClear();
                 }
             }
@@ -114,19 +127,12 @@ export default {
                 ? this.emptyShowVal
                 : this.curValName;
         },
+        // 已选择项的对象列表
         curValObjList () {
-            return this.curValNameList.map((item, index) => {
-                return {
-                    _key: index,
-                    name: item,
-                    style: {
-                        ...this.tagStyle
-                    }
-                };
-            });
+            return this.curValList.map(arrItem => this.getItemObj(arrItem));
         },
         curValNameList () {
-            return this.curValList.map(item => this.transformFullName(item));
+            return this.curValObjList.map(item => item[this.nameKey]);
         },
         showMulVal () {
             return this.$isEmptyData(this.curValList)
@@ -164,9 +170,43 @@ export default {
         },
 
         /* --------- 工具类 -------- */
+        getItemObj (val) {
+            const objArr = this.$getTreeLinealDatas(val, this.cascaderData, undefined, this.saveKey);
+
+            return !this.$isEmptyData(val)
+                ? objArr.length
+                    ? {
+                        ...objArr.slice(-1)[0],
+                        [this.nameKey]: this.transformFullName(val),
+                        // 查看状态时tag用
+                        style: {
+                            ...this.tagStyle,
+                            ...this.getItemColorStyle(objArr.slice(-1)[0])
+                        },
+                        color: undefined
+                    }
+                    : {
+                        _key: val,
+                        name: `提示：选项${val}已找不到`,
+                        style: {
+                            ...this.tagStyle
+                        }
+                    }
+                : undefined;
+        },
+        // 每项的颜色相关style --flat方式在用
+        getItemColorStyle (item) {
+            const color = this.colorMap[item.color] || this.colorMap["color-1"];
+            return this.useColor
+                ? {
+                    backgroundColor: this.$getColor(color, 0.1),
+                    color: color
+                }
+                : {};
+        },
         // 转化出级联全名
-        transformFullName (value) {
-            return this.renderFormat(this.$getTreeLinealDatas(value, this.cascaderData, this.nameKey, this.saveKey));
+        transformFullName (val) {
+            return this.renderFormat(this.$getTreeLinealDatas(val, this.cascaderData, this.nameKey, this.saveKey));
         }
     }
 };

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

@@ -188,6 +188,8 @@ export default {
                 });
             }
         },
+
+        // 接口 -获得某个节点对应的描述内容
         getDescription (value = []) {
             if (value.length) {
                 this.$https({
@@ -201,7 +203,7 @@ export default {
                     },
                     callback: data => {
                         this.description = data;
-                        this.selectedObj.description = data;
+                        // this.selectedObj.description = data;
                     }
                 });
             }

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

@@ -130,8 +130,8 @@ export default {
             return {
                 "bri-control-edit": this.canEdit && this.finalCanEdit,
                 "bri-control-disabled": this.canEdit && !this.finalCanEdit,
-                "bri-control-unit": !this.canEdit && this.isInTable,
-                "bri-control-show": !this.canEdit && !this.isInTable,
+                "bri-control-unit": this.isUnitShow,
+                "bri-control-show": this.isDetailShow,
 
                 "dsh-ellipsis": this.isUnitShow,
                 "bri-control-nodata": this.$isEmptyData(this.curVal)
@@ -143,7 +143,10 @@ export default {
         },
         // 控件内容高度 自由
         isHeightAuto () {
-            return this.isFullRow && !this.isInTable;
+            return this.isInTable
+                ? false
+                // ? this.isUnitShow
+                : this.isFullRow;
         },
         clearable () {
             return this.commonDealPropsObj._clearable;

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

@@ -15,8 +15,8 @@ export default {
     computed: {
         basePropsObj () {
             return {
-                colorMap: resourceData.colorMap,
                 _optionKind: "dropdown", // "flat"、"dropdown"
+                colorMap: resourceData.colorMap,
                 _useColor: false,
                 _filterable: true,
                 _data: [],
@@ -29,12 +29,12 @@ export default {
         showType () {
             return this.selfPropsObj._optionKind;
         },
-        useColor () {
-            return this.selfPropsObj._useColor;
-        },
         colorMap () {
             return this.selfPropsObj.colorMap;
         },
+        useColor () {
+            return this.selfPropsObj._useColor;
+        },
         listData () {
             const listData = this.selfPropsObj._data.concat(this.initListData);
 
@@ -54,7 +54,7 @@ export default {
             },
             set (val) {
                 if (!val) {
-                    this.curVal = "";
+                    this.clickClear();
                 }
             }
         },
@@ -84,6 +84,10 @@ export default {
             this.getListData();
         },
 
+        // 点击清除
+        clickClear () {
+            this.curVal = "";
+        },
         // 单选模式 点击选项
         clickRadioItem (item, index) {
             if (!this.getRadioItemDisabled(item)) {
@@ -105,16 +109,37 @@ export default {
         // 多选模式 点击选项
         clickCheckItem (item, index) {
             if (!this.getCheckItemDisabled(item)) {
-                if (this.curValList.includes(item._key)) {
-                    this.curValList = this.curValList.filter(key => key !== item._key);
-                } else {
-                    this.curValList = [...this.curValList, item._key];
-                }
+                this.curValList = this.getItemCheckStatus(item)
+                    ? this.curValList.filter(key => key !== item._key)
+                    : [...this.curValList, item._key];
             }
         },
 
         /* ------- 方法 ------- */
-        // 每项的class集合 --flat方式在用
+        // 获取某项的对象数据
+        getItemObj (val) {
+            const obj = this.listData.find(item => item._key === val) || {
+                _key: val,
+                name: `提示：选项${val}已找不到`
+            };
+
+            return !this.$isEmptyData(val)
+                ? {
+                    ...obj,
+                    // 查看状态时tag用
+                    style: {
+                        ...this.tagStyle,
+                        ...this.getItemColorStyle(obj)
+                    },
+                    color: undefined
+                }
+                : undefined;
+        },
+        // 获取某项的选中状态
+        getItemCheckStatus (item) {
+            return this.curValList.includes(item._key);
+        },
+        // 获取某项的class集合 --flat方式在用
         getItemClass (item) {
             return [
                 this.useColor
@@ -123,7 +148,7 @@ export default {
                 item.class
             ];
         },
-        // 每项的颜色相关style --flat方式在用
+        // 获取某项的颜色相关style --flat方式在用
         getItemColorStyle (item) {
             const color = this.colorMap[item.color] || this.colorMap["color-1"];
             return this.useColor
@@ -133,13 +158,6 @@ export default {
                 }
                 : {};
         },
-        // 每项的具体样式 -查看状态时用
-        getItemShowStyle (item) {
-            return {
-                ...this.tagStyle,
-                ...this.getItemColorStyle(item)
-            };
-        },
         // 获取单选项的置灰状态
         getRadioItemDisabled (item) {
             return !!(
@@ -152,23 +170,9 @@ export default {
             return !!(
                 this.selfPropsObj._disabled ||
                 item._disabled ||
-                (this.curValList.length >= this.selfPropsObj._max && !this.curValList.includes(item._key))
+                (this.curValList.length >= this.selfPropsObj._max && !this.getItemCheckStatus(item))
             );
         },
-        getItemObj (key) {
-            const obj = this.listData.find(item => item._key === key) || {
-                _key: key,
-                name: `温馨提示：选项${key}已找不到`
-            };
-
-            return this.$isEmptyData(key)
-                ? undefined
-                : {
-                    ...obj,
-                    style: this.getItemShowStyle(obj),
-                    color: undefined
-            };
-        },
 
         // TODO：待删除 接口 -获取自定义的接口数据
         getListData () {
@@ -179,12 +183,10 @@ export default {
                     callback: data => {
                         this.initListData = [
                             ...this.initListData,
-                            ...data.list.map(dataItem =>
-                                ({
-                                    _key: dataItem._key,
-                                    name: dataItem.name
-                                })
-                            )
+                            ...data.list.map(dataItem => ({
+                                _key: dataItem._key,
+                                name: dataItem.name
+                            }))
                         ];
                     }
                 });

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

@@ -47,22 +47,19 @@ export default {
                 ...this.propsObj
             };
         },
-        showStyle () {
+
+        curValObj () {
             return !this.$isEmptyData(this.curVal)
                 ? {
-                    ...this.tagStyle,
-                    backgroundColor: this.curVal === true ? "#d3f3dc" : "#FDEDED",
-                    color: this.curVal === true ? "#37C45E" : "#E83636"
+                    _key: "1",
+                    name: this.showVal,
+                    style: {
+                        ...this.tagStyle,
+                        backgroundColor: this.curVal === true ? "#d3f3dc" : "#FDEDED",
+                        color: this.curVal === true ? "#37C45E" : "#E83636"
+                    }
                 }
-                : {};
-        },
-
-        curValObj () {
-            return {
-                _key: "1",
-                name: this.showVal,
-                style: this.showStyle
-            };
+                : undefined;
         },
         showVal () {
             return this.$isEmptyData(this.curVal)

package/src/components/list/DshBox/DshList.vue

@@ -72,7 +72,7 @@
                     >
                         <CheckboxGroup
                             v-model="selectIds"
-                            @on-change="select"
+                            @on-change="selectRow"
                         >
                             <Checkbox
                                 v-for="row in data"
@@ -161,7 +161,6 @@
 </template>
 
 <script>
-
     export default {
         name: "DshList",
         components: {},
@@ -256,8 +255,8 @@
                 this.changeSelect();
             },
             // 切换选择
-            select (ids) {
-                this.$emit("select", this.selectIds, this.selections, this.curRow.bool, this.curRow);
+            selectRow (ids) {
+                this.$emit("selectRow", this.selectIds, this.selections, this.curRow.bool, this.curRow);
                 this.changeSelect();
             },
             // 改变选择项

package/src/components/list/DshBox/DshPanel.vue

@@ -13,21 +13,28 @@
                     color: '#ffffff'
                 }"
             >
+                <!-- 左 -->
+                <Checkbox
+                    class="header-checkbox"
+                    v-model="groupItem.isSelectAll"
+                    @on-change="selectGroupAll(groupItem, $event)"
+                ></Checkbox>
+
                 <!-- 左 -->
                 <bri-tooltip
-                    class="DshPanel-group-header-left"
+                    class="header-left"
                     :content="groupItem.name"
                     placement="top"
                     :transfer="true"
                 >
-                    <span class="DshPanel-group-header-left-name">
+                    <span class="header-left-name">
                         {{ groupItem.name }}
                     </span>
                 </bri-tooltip>
 
                 <!-- 右 -->
-                <span>
-                    <span class="DshPanel-group-header-right">
+                <span class="header-right">
+                    <span class="header-right-num">
                         {{ groupItem.total }}
                     </span>
                     条（已加载{{ groupItem.list.length }}条）
@@ -43,98 +50,113 @@
             >
                 <!-- 有数据 -->
                 <template v-if="groupItem.list.length">
-                    <dsh-draggable
-                        v-model="groupItem.list"
-                        group="panel"
-                        animation="300"
+                    <CheckboxGroup
                         class="list-drag"
-                        :disabled="!dragOperationObj"
-                        @update="$dshEmit(dragOperationObj, $event, groupItem, data.find(item => item._key === $event.from.id), { [groupField]: groupItem._key })"
-                        @add="$dshEmit(dragOperationObj, $event, groupItem, data.find(item => item._key === $event.from.id), { [groupField]: groupItem._key })"
+                        v-model="groupItem.selectIds"
+                        @on-change="selectRow(groupItem, $event)"
                     >
-                        <transition-group
-                            :id="groupItem._key"
-                            class="list-drag-transition"
-                            @scroll.native="groupScroll(groupItem, groupIndex, $event)"
+                        <dsh-draggable
+                            class="list-drag-draggable"
+                            v-model="groupItem.list"
+                            group="panel"
+                            animation="300"
+                            :disabled="!dragOperationObj"
+                            @update="$dshEmit(dragOperationObj, $event, groupItem, data.find(item => item._key === $event.from.id), { [groupField]: groupItem._key })"
+                            @add="$dshEmit(dragOperationObj, $event, groupItem, data.find(item => item._key === $event.from.id), { [groupField]: groupItem._key })"
                         >
-                            <div
-                                v-for="(dataItem, dataIndex) in groupItem.list"
-                                :key="dataItem._id"
-                                :id="dataItem._id"
-                                class="row-item"
-                                @click="clickRow(dataItem, dataIndex)"
+                            <transition-group
+                                :id="groupItem._key"
+                                class="list-drag-transition"
+                                @scroll.native="groupScroll(groupItem, groupIndex, $event)"
                             >
-                                <!-- 下拉操作 -->
-                                <dsh-dropdown
-                                    v-if="operationList.length"
-                                    class="row-item-dropdown"
-                                    :dropdownObj="dropdownObj"
-                                    :list="operationList"
-                                    @click="$dshEmit($event, dataItem, dataIndex)"
-                                    @click.native.stop="0"
-                                ></dsh-dropdown>
-
-                                <!-- 内容 -->
-                                <div class="row-item-info">
-                                    <!-- 标题 -->
-                                    <bri-tooltip
-                                        class="title"
-                                        :content="dataItem[propsObj.titleField]"
-                                        placement="top"
-                                        :transfer="true"
-                                    >
-                                        <div class="title-name">
-                                            {{ dataItem[propsObj.titleField] }}
-                                        </div>
-                                    </bri-tooltip>
-
-                                    <!-- 显示字段 -->
-                                    <div
-                                        v-for="colItem in selfColumns"
-                                        :key="colItem._key"
-                                        class="unit"
+                                <div
+                                    v-for="(dataItem, dataIndex) in groupItem.list"
+                                    :key="dataItem._id"
+                                    :id="dataItem._id"
+                                    class="row-item"
+                                    @click="clickRow(dataItem, dataIndex)"
+                                >
+                                    <!-- 复选框 -->
+                                    <Checkbox
+                                        class="row-item-checkbox"
+                                        :label="dataItem._id"
+                                        @click.native.stop="clickRowCheckbox(dataItem)"
                                     >
-                                        <!-- 左 label -->
+                                        {{ "" }}
+                                    </Checkbox>
+
+                                    <!-- 下拉操作 -->
+                                    <dsh-dropdown
+                                        v-if="operationList.length"
+                                        class="row-item-dropdown"
+                                        :dropdownObj="dropdownObj"
+                                        :list="operationList"
+                                        @click="$dshEmit($event, dataItem, dataIndex)"
+                                        @click.native.stop="0"
+                                    ></dsh-dropdown>
+
+                                    <!-- 内容 -->
+                                    <div class="row-item-info">
+                                        <!-- 标题 -->
                                         <bri-tooltip
-                                            class="unit-label"
-                                            :content="colItem._name"
+                                            class="title"
+                                            :content="dataItem[propsObj.titleField]"
+                                            placement="top"
                                             :transfer="true"
                                         >
-                                            <span class="unit-label-name">
-                                                {{ colItem._name }}
-                                            </span>
-                                            <span class="unit-label-colon">
-                                                ：
-                                            </span>
+                                            <div class="title-name">
+                                                {{ dataItem[propsObj.titleField] }}
+                                            </div>
                                         </bri-tooltip>
 
-                                        <!-- 右 val -->
-                                        <div class="unit-control">
-                                            <dsh-list-render
-                                                v-if="colItem.renderBodyCell"
-                                                :row="dataItem"
-                                                :column="colItem"
-                                                :index="0"
-                                                :render="colItem.renderBodyCell"
-                                            ></dsh-list-render>
-
-                                            <div
-                                                v-else-if="colItem.formatter"
-                                                v-html="colItem.formatter(dataItem, 0)"
-                                            ></div>
-
-                                            <span
-                                                v-else
-                                                class="unit-control-text"
+                                        <!-- 显示字段 -->
+                                        <div
+                                            v-for="colItem in selfColumns"
+                                            :key="colItem._key"
+                                            class="unit"
+                                        >
+                                            <!-- 左 label -->
+                                            <bri-tooltip
+                                                class="unit-label"
+                                                :content="colItem._name"
+                                                :transfer="true"
                                             >
-                                                {{ dataItem[colItem._key] }}
-                                            </span>
+                                                <span class="unit-label-name">
+                                                    {{ colItem._name }}
+                                                </span>
+                                                <span class="unit-label-colon">
+                                                    ：
+                                                </span>
+                                            </bri-tooltip>
+
+                                            <!-- 右 val -->
+                                            <div class="unit-control">
+                                                <dsh-list-render
+                                                    v-if="colItem.renderBodyCell"
+                                                    :row="dataItem"
+                                                    :column="colItem"
+                                                    :index="0"
+                                                    :render="colItem.renderBodyCell"
+                                                ></dsh-list-render>
+
+                                                <div
+                                                    v-else-if="colItem.formatter"
+                                                    v-html="colItem.formatter(dataItem, 0)"
+                                                ></div>
+
+                                                <span
+                                                    v-else
+                                                    class="unit-control-text"
+                                                >
+                                                    {{ dataItem[colItem._key] }}
+                                                </span>
+                                            </div>
                                         </div>
                                     </div>
                                 </div>
-                            </div>
-                        </transition-group>
-                    </dsh-draggable>
+                            </transition-group>
+                        </dsh-draggable>
+                    </CheckboxGroup>
                 </template>
 
                 <!-- 无数据 -->
@@ -205,22 +227,30 @@
         },
         data () {
             return {
+                selections: [],
+                // curRow: null // 可以不声明
+
                 // 下拉菜单的配置
                 dropdownObj: {
                     icon: "ios-more",
                     size: 22,
                     color: "#E9ECF4",
                     showDropdownItemIcon: false
-                },
-
-                getBgColor (groupItem) {
-                    return this.groupFieldObj._useColor
-                        ? resourceData.colorMap[(this.groupFieldObj._data.find(item => item._key === groupItem._key) || { color: "color-default" }).color]
-                        : resourceData.colorMap["color-default"];
                 }
             };
         },
         computed: {
+            selectIds: {
+                get () {
+                    return this.selections.map(item => item._id);
+                },
+                set (val) {
+                    this.selections = this.data
+                        .reduce((arr, groupItem) => [...arr, ...groupItem.list], [])
+                        .filter(item => val.includes(item._id));
+                }
+            },
+
             groupField () {
                 return this.propsObj.groupField;
             },
@@ -284,6 +314,7 @@
             // 判断是否要滚动加载
             groupLoad (groupItem, groupElement) {
                 if (
+                    groupItem &&
                     groupItem.loading !== true &&
                     groupItem.finished !== true &&
                     groupElement.children.length === groupItem.list.length &&
@@ -296,11 +327,56 @@
             // 点击某行
             clickRow (row) {
                 this.$emit("clickRow", row);
+            },
+            // 点击某行的选择框
+            clickRowCheckbox (row) {
+                this.curRow = row;
+                this.curRow.bool = !this.selectIds.includes(row._id);
+            },
+
+            // 切换全选
+            selectGroupAll (groupItem, bool) {
+                const groupListIds = groupItem.list.map(item => item._id);
+                groupItem.selectIds = groupItem.isSelectAll === true
+                    ? groupListIds
+                    : [];
+                this.selectIds = groupItem.isSelectAll === true
+                    ? [...new Set([...this.selectIds, ...groupListIds])]
+                    : this.selectIds.filter(id => !groupListIds.includes(id));
+
+                this.$emit("selectAll", this.selectIds, this.selections, groupItem.isSelectAll);
+                this.changeSelect();
+            },
+            // 选择行
+            selectRow (groupItem, ids) {
+                const groupListIds = groupItem.list.map(item => item._id);
+                this.selectIds = [
+                    ...this.selectIds.filter(id => !groupListIds.includes(id)),
+                    ...groupItem.selectIds
+                ];
+                groupItem.isSelectAll = groupListIds.length > 0 && groupItem.selectIds.length === groupListIds.length;
+
+                this.$emit("selectRow", this.selectIds, this.selections, this.curRow.bool, this.curRow);
+                this.changeSelect();
+            },
+            // 改变选择项
+            changeSelect () {
+                this.$emit("changeSelect", this.selectIds, this.selections);
+            },
+
+            /* -------- 方法 -------- */
+            getBgColor (groupItem) {
+                return this.groupFieldObj._useColor
+                    ? resourceData.colorMap[(this.groupFieldObj._data.find(item => item._key === groupItem._key) || { color: "color-default" }).color]
+                    : resourceData.colorMap["color-default"];
             }
         },
         watch: {
             data () {
                 this.initGroupScroll();
+                this.data.forEach(groupItem => {
+                    groupItem.isSelectAll = groupItem.list.length > 0 && groupItem.selectIds.length === groupItem.list.length;
+                });
             }
         }
     };
@@ -332,18 +408,37 @@
                 display: flex;
                 justify-content: space-between;
 
-                &-left {
-                    flex: 1;
-                    min-width: 0px;
+                .header {
+                    &-checkbox {
+                        .ivu-checkbox-inner {
+                            border: 2px solid #ffffff;
+                            background-color: transparent;
+                        }
+
+                        .ivu-checkbox-checked {
+                            .ivu-checkbox-inner:after {
+                                top: 1px;
+                                left: 4px;
+                            }
+                        }
+                    }
+
+                    &-left {
+                        flex: 1;
+                        min-width: 0px;
 
-                    &-name {
-                        .dsh-ellipsis();
+                        &-name {
+                            .dsh-ellipsis();
+                        }
                     }
-                }
 
-                &-right {
-                    margin-left: 5px;
-                    font-weight: bold;
+                    &-right {
+                        margin-left: 5px;
+
+                        &-num {
+                            font-weight: bold;
+                        }
+                    }
                 }
             }
 
@@ -362,6 +457,11 @@
                     flex: 1;
                     min-height: 0px;
 
+                    &-draggable {
+                        width: 100%;
+                        height: 100%;
+                    }
+
                     &-transition {
                         display: block;
                         width: 100%;
@@ -372,12 +472,19 @@
                         .row-item {
                             min-height: 60px;
                             margin-bottom: 10px;
+                            padding: 8px 10px;
                             border: 1px solid rgba(102, 110, 126, 0.1);
-                            border-radius: 4px;
+                            // border-radius: 4px;
                             background: #FFFFFF;
                             cursor: pointer;
                             position: relative;
 
+                            &-checkbox {
+                                position: absolute;
+                                top: -3px;
+                                left: -1px;
+                            }
+
                             &-dropdown {
                                 position: absolute;
                                 top: 5px;
@@ -385,13 +492,12 @@
                             }
 
                             &-info {
-                                padding: 8px 10px;
                                 background: #ffffff;
                                 overflow: hidden;
 
                                 .title {
                                     height: 24px;
-                                    padding-right: 6px;
+                                    padding: 0px 16px 0px 10px;
                                     font-size: 14px;
                                     font-weight: 600;
 

package/src/components/small/DshDropdown.vue

@@ -39,7 +39,7 @@
             <div
                 class="DshDropdown-list-data"
                 :style="{
-                    maxHeight: useSearch ? '300px' : '340px'
+                    maxHeight: useSearch ? '320px' : '360px'
                 }"
             >
                 <!-- 有数据 -->
@@ -66,16 +66,10 @@
                         >
                             <dsh-icons
                                 v-if="dropdownItem.icon || dropdownItem.customIcon"
-                                :class="{
-                                    'list-item-icon': true,
-                                    'list-item-disabled': dropdownItem.disabled
-                                }"
+                                class="list-item-icon"
                                 :list="[dropdownItem]"
                             />
-                            <span :class="{
-                                'list-item-name': true,
-                                'list-item-disabled': dropdownItem.disabled
-                            }">
+                            <span class="list-item-name">
                                 {{ dropdownItem.name || dropdownItem._name }}
                             </span>
                         </slot>
@@ -158,3 +152,70 @@
         }
     };
 </script>
+
+<style lang="less">
+    .DshDropdown {
+        &-rel {
+            color: @contentColor;
+            cursor: pointer;
+        }
+
+        &-list {
+            &-search {
+                width: 100%;
+                height: 40px;
+                padding: 0px 8px;
+                line-height: 40px;
+            }
+
+            &-data {
+                width: 100%;
+                // max-height: 300px;
+                padding: 0 8px;
+                overflow: auto;
+
+                .list {
+                    &-item {
+                        padding: 10px 8px;
+                        border-radius: @borderRadius;
+                        line-height: 16px;
+                        display: flex;
+                        flex-direction: row;
+                        align-items: center;
+
+                        &-icon {
+                            margin-right: 8px;
+                        }
+
+                        &-name {
+
+                        }
+
+                        &:hover {
+                            background-color: @theme-focus;
+                            color: @themeColor;
+                        }
+
+                        &-disabled {
+                            color: @textColor-disabled;
+                        }
+                    }
+
+                    .ivu-dropdown-item-divided:before {
+                        margin: 0px;
+                    }
+                }
+
+                .nodata {
+                    #dsh-nodata();
+                }
+            }
+        }
+
+        &.ivu-select-dropdown {
+            max-height: 500px;
+            border: 0.5px solid #e5e5e5;
+            box-shadow: 0 3px 14px 2px rgba(0,0,0,0.05), 0 8px 10px 1px rgba(0,0,0,0.06), 0 5px 5px -3px rgba(0,0,0,0.1);
+        }
+    }
+</style>

package/src/components/unit/DshFormUnit.vue

@@ -288,8 +288,11 @@
         }
 
         &-control {
-            min-height: 32px;
             overflow: hidden;
+
+            &-component {
+
+            }
         }
 
         &-line {
@@ -318,7 +321,11 @@
 
             .DshFormUnit-control {
                 flex: 1;
-                min-width: 100px;
+                min-width: 0px;
+
+                &-component {
+
+                }
             }
         }
 

package/src/styles/components/index.less

@@ -28,7 +28,6 @@
 @import "./small/BriButton.less";
 @import "./small/BriDrawer.less";
 @import "./small/DshButtons.less";
-@import "./small/DshDropdown.less";
 @import "./small/DshIcons.less";
 @import "./small/DshModal.less";
 @import "./small/DshSteps.less";

package/src/styles/reset-iview-other.less

@@ -1,4 +1,8 @@
 .ivu-tooltip {
+    &-rel {
+
+    }
+    
     &-arrow {
         border-bottom-color: @textColor !important;
     }
@@ -14,10 +18,6 @@
         max-height: 350px;
         overflow: auto;
     }
-
-    &-rel {
-        width: 100%;
-    }
 }
 
 .ivu-tag {
@@ -34,4 +34,10 @@
     &[disabled] {
         background-color: @border-disabled;
     }
+}
+
+// 下拉框
+.ivu-select-dropdown {
+    max-width: 420px;
+    max-height: 300px;
 }

package/src/styles/components/small/DshDropdown.less

@@ -1,62 +0,0 @@
-.DshDropdown {
-    &-rel {
-        color: @contentColor;
-        cursor: pointer;
-    }
-
-    &-list {
-        &-search {
-            width: 100%;
-            height: 40px;
-            padding: 0px 8px;
-            line-height: 40px;
-        }
-        
-        &-data {
-            width: 100%;
-            // max-height: 300px;
-            overflow: auto;
-
-            .list {
-                .list-item {
-                    display: flex;
-                    flex-direction: row;
-                    align-items: center;
-                    border-radius: @borderRadius;
-                    padding: 9px 8px;
-                    margin: 0 8px;
-                    line-height: 22px;
-                    &:hover {
-                        background-color: @theme-focus;
-                        color: @themeColor;
-                    }
-        
-                    &-disabled {
-                        color: @textColor-disabled
-                    }
-                    &-icon {
-                        margin-right: 8px;
-                    }
-                    &-name {
-                        
-                    }
-                }
-        
-                .ivu-dropdown-item-divided:before {
-                    margin: 0px;
-                }
-            }
-
-            .nodata {
-                #dsh-nodata();
-            }
-        }
-    }
-    &.ivu-select-dropdown {
-        border: 0.5px solid #e5e5e5;
-        box-shadow: 0 3px 14px 2px rgba(0,0,0,0.05), 0 8px 10px 1px rgba(0,0,0,0.06), 0 5px 5px -3px rgba(0,0,0,0.1);
-        max-height: 500px;
-    }
-}
-
-