bri-components 1.2.49 → 1.2.50

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "bri-components",
-    "version": "1.2.49",
+    "version": "1.2.50",
     "author": "dengshanghui",
     "description": "a component lib for vue project",
     "main": "src/index.js",
@@ -32,7 +32,7 @@
     "dependencies": {
         "ali-oss": "^6.13.1",
         "axios": "^0.23.0",
-        "bri-datas": "^1.0.41",
+        "bri-datas": "^1.0.42",
         "jshint": "^2.12.0",
         "jsonlint": "^1.6.3",
         "minio": "7.1.0",

package/src/components/controls/BriControlInput.vue

@@ -13,9 +13,9 @@
                     class="overflow"
                     :list="value"
                     :propsObj="{
-                    disabled: !canEdit,
-                    closable: true
-                }"
+                        disabled: !canEdit,
+                        closable: true
+                    }"
                     @delete="clickDeleteItem"
                 ></dsh-tags>
 
@@ -35,6 +35,7 @@
                     {{ value }}
                 </div>
             </template>
+
             <!-- 无值 -->
             <template v-else>
                 <div class="placeholder">

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

@@ -83,7 +83,7 @@
                         :load-data="loadData"
                         @on-visible-change="visibleChange"
                         @on-change="changeVal"
-                        @click.stop="clickCascader"
+                        @click="clickCascader"
                     ></Cascader>
                 </template>
             </template>
@@ -94,7 +94,7 @@
             <!-- 多选 -->
             <template v-if="multipleMode">
                 <bri-tooltip
-                    :content="showMultipleVal"
+                    :content="showMulVal"
                     placement="top"
                     maxWidth="200"
                     :transfer="true"
@@ -106,7 +106,7 @@
                     }">
                         <!-- 有值 -->
                         <dsh-tags
-                            v-if="!$isEmptyData(curValNameList)"
+                            v-if="!$isEmptyData(curValList)"
                             class="text"
                             :list="curValNameList"
                         ></dsh-tags>
@@ -140,7 +140,7 @@
 </template>
 
 <script>
-    import { regionData } from "bri-datas";
+    import { regionData, userIndustryData } from "bri-datas";
     import controlMixin from "../../controlMixin.js";
     import InfoCascader from "./InfoCascader.vue";
 
@@ -190,22 +190,37 @@
             };
         },
         computed: {
+            // 级联拼接符
+            joinSymbol () {
+                return this.propsObj._joinSymbol || "/";
+            },
+            nameKey () {
+                return this.propsObj._nameKey || "name";
+            },
+
             selfPropsObj () {
                 return {
                     _showMode: false,
-                    _changeOnSelect: false, // 每级菜单都可取值
                     _filterable: true,
-                    _renderFormat: (label) => label.join(this.propsObj._joinSymbol || "/"),
+                    _changeOnSelect: false,
+                    _renderFormat: (label) => label.join(this.joinSymbol),
                     _transfer: true,
+
                     ...this.propsObj,
                     ...this.commonDealPropsObj
                 };
             },
-            // 是否多选类型
-            multipleMode () {
-                return ["regions", "cascaders"].includes(this.propsObj._type);
+            // 每级菜单都可取值
+            changeOnSelect () {
+                return this.isOnSearch ? true : this.selfPropsObj._changeOnSelect;
             },
-            // 只有单选时有效
+            cascaderLevel () {
+                return this.selfPropsObj._cascaderLevel;
+            },
+            cascaderFilterVals () {
+                return this.selfPropsObj._cascaderFilterVals;
+            },
+            // 只有单选模式有效
             showMode () {
                 return this.selfPropsObj._showMode;
             },
@@ -213,14 +228,16 @@
                 return this.isVisible ? "ios-arrow-up" : "ios-arrow-down";
             },
 
+            originData () {
+                return ["region", "regions"].includes(this.controlType)
+                    ? regionData
+                    : ["userIndustry"].includes(this.controlType)
+                        ? userIndustryData
+                        : this.selfPropsObj._data;
+            },
             cascaderData: {
                 get () {
-                    return loop(
-                        ["region", "regions"].includes(this.propsObj._type) ? regionData : this.selfPropsObj._data,
-                        this.selfPropsObj._cascaderLevel,
-                        undefined,
-                        this.selfPropsObj._cascaderFilterVals
-                    );
+                    return loop(this.originData, this.cascaderLevel, undefined, this.cascaderFilterVals);
                 },
                 set () {}
             },
@@ -235,20 +252,20 @@
                     : this.cascaderData;
             },
             curValName () {
-                return this.$getTreeLinealDatas(this.curValList, this.cascaderData, "name").join("/");
+                return this.$getTreeLinealDatas(this.curValList, this.cascaderData, this.nameKey).join(this.joinSymbol);
             },
             showVal () {
                 return this.$isEmptyData(this.curValList)
                     ? this.emptyShowVal
                     : this.curValName;
             },
-            // 多选用 名字组成的列表
+            // 多选用
             curValNameList () {
                 return this.curValList.map(item =>
-                    this.$getTreeLinealDatas(item, this.cascaderData, "name").join("/")
+                    this.$getTreeLinealDatas(item, this.cascaderData, this.nameKey).join(this.joinSymbol)
                 );
             },
-            showMultipleVal () {
+            showMulVal () {
                 return this.$isEmptyData(this.curValList)
                     ? this.emptyShowVal
                     : this.curValNameList.join("、");
@@ -280,9 +297,9 @@
 
                 if (bool === false) {
                     if (this.selectVal.length) {
-                        if (this.curValList.some(item => JSON.stringify(item) == JSON.stringify(this.selectVal))) {
+                        if (this.curValList.some(item => JSON.stringify(item) === JSON.stringify(this.selectVal))) {
                             this.$Message.error({
-                                content: `"${this.$getTreeLinealDatas(this.selectVal, this.cascaderData, "name").join("/")}"已选择，请勿重复选择！`,
+                                content: `"${this.$getTreeLinealDatas(this.selectVal, this.cascaderData, this.nameKey).join(this.joinSymbol)}"已选择，请勿重复选择！`,
                                 duration: 5
                             });
                         } else {
@@ -353,7 +370,7 @@
             }
         },
         watch: {
-            "propsObj._cascaderLevel" () {
+            "cascaderLevel" () {
                 this.value[this.controlKey] = [];
             }
         }

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

@@ -175,22 +175,14 @@
         },
         methods: {
             change (node) {
-                // 点击最后层级时，才出现右侧说明
-                if (node.children.length === 0) {
-                    this.curName = node.name;
-                    this.getDescription(node.codeArr);
-                    if (node.codeArr.length && this.curSelect.codeArr && this.curSelect.codeArr.length === node.codeArr.length && node.codeArr.every((code, idx) => code === this.curSelect.codeArr[idx])) {
-                        this.curSelect = {};
-                        this.description = "";
-                    } else {
-                        if (!this.propsObj._cascaderLevel || node.level == this.propsObj._cascaderLevel || !node.children.length) {
-                            this.curSelect = node;
-                        }
-                    }
-                } else {
-                    this.curName = "";
-                    this.description = "";
+                this.curName = node.name;
+                if (node.codeArr.length && this.curSelect.codeArr && this.curSelect.codeArr.length === node.codeArr.length && node.codeArr.every((code, idx) => code === this.curSelect.codeArr[idx])) {
                     this.curSelect = {};
+                } else {
+                    if (!this.propsObj._cascaderLevel || node.level == this.propsObj._cascaderLevel || !node.children.length) {
+                        this.curSelect = node;
+                        this.getDescription(node.codeArr);
+                    }
                 }
             },
             getDescription (nodeKeys) {

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

@@ -0,0 +1,146 @@
+<template>
+    <!-- 单选模式 -->
+    <div
+        v-if="!multipleMode"
+        class="DshDate"
+    >
+        <template v-if="show">
+            <!-- 编辑 -->
+            <template v-if="canEdit">
+                <!-- 时间子类型 -->
+                <template v-if="['time'].includes(subType)">
+                    <TimePicker
+                        class="DshDate-edit"
+                        v-model="curValDate"
+                        :type="subType"
+                        :placeholder="selfPropsObj._placeholder"
+                        :disabled="!finalCanEdit"
+                        :clearable="selfPropsObj._clearable"
+                        :transfer="selfPropsObj._transfer"
+                        @on-change="change"
+                    ></TimePicker>
+                </template>
+
+                <!-- 日期、日期时间、年、月 -->
+                <template v-else>
+                    <DatePicker
+                        class="DshDate-edit"
+                        v-model="curValDate"
+                        :type="subType"
+                        :placeholder="selfPropsObj._placeholder"
+                        :disabled="!finalCanEdit"
+                        :clearable="selfPropsObj._clearable"
+                        :options="options"
+                        :transfer="selfPropsObj._transfer"
+                        @on-change="change"
+                    ></DatePicker>
+                </template>
+            </template>
+
+            <!-- 查看 -->
+            <template v-else>
+                <bri-tooltip
+                    :content="showVal"
+                    maxWidth="200"
+                    :transfer="true"
+                >
+                    <div :class="{
+                        ...commonClass
+                    }">
+                        {{ showVal }}
+                    </div>
+                </bri-tooltip>
+            </template>
+        </template>
+    </div>
+
+    <!-- 多选模式 -->
+    <dsh-daterange
+        v-else
+        :canEdit="canEdit"
+        :value="value"
+        :propsObj="propsObj"
+        @change="change"
+    ></dsh-daterange>
+</template>
+
+<script>
+    import controlMixin from "../../controlMixin.js";
+    import DshDaterange from "./DshDaterange.vue";
+
+    export default {
+        name: "DshDate",
+        mixins: [
+            controlMixin
+        ],
+        components: {
+            DshDaterange
+        },
+        props: {},
+        data () {
+            return {
+                show: true
+            };
+        },
+        computed: {
+            selfPropsObj () {
+                return {
+                    _transfer: true,
+
+                    ...this.propsObj,
+                    ...this.commonDealPropsObj
+                };
+            },
+
+            curValDate: {
+                get () {
+                    const val = this.value[this.controlKey];
+                    return this.$transformDateCompatible(val, this.subType);
+                },
+                set (val) {
+                    this.value[this.controlKey] = this.$transformDate(val, "-", this.subType);
+                }
+            },
+            subType () {
+                return this.selfPropsObj._dateType;
+            },
+            options () {
+                return {
+                    shortcuts: [],
+                    disabledDate: (date) => {
+                        const resultObj = this.$validateComparedRule(
+                            [this.selfPropsObj],
+                            {
+                                ...this.value,
+                                [this.controlKey]: this.$transformDate(date, "/", this.subType)
+                            },
+                            this.allFormList
+                        );
+                        return !resultObj.bool;
+                    }
+                };
+            }
+        },
+        created () {},
+        methods: {},
+        watch: {
+            "subType" () {
+                this.show = false;
+                this.$nextTick(() => {
+                    this.value[this.controlKey] = this.selfPropsObj._default;
+                    this.show = true;
+                });
+            }
+        }
+    };
+</script>
+
+<style lang="less" scoped>
+    .DshDate {
+        width: 100%;
+
+        &-edit {
+            width: 100%;
+        }
+    }
+</style>

package/src/components/controls/base/{DshDaterange.vue → DshDate/DshDaterange.vue}

@@ -92,7 +92,7 @@
 </template>
 
 <script>
-    import controlMixin from "../controlMixin.js";
+    import controlMixin from "../../controlMixin.js";
 
     export default {
         name: "DshDaterange",
@@ -341,3 +341,57 @@
         }
     };
 </script>
+
+<style lang="less" scoped>
+    .DshDaterange {
+        width: 100%;
+
+        &-left,
+        &-right {
+            width: 47%;
+            float: left;
+            background-color: #ffffff;
+        }
+
+        &-center {
+            width: 3%;
+            text-align: center;
+            color: @textColor;
+            overflow: hidden;
+            line-height: 30px;
+            float: left;
+            margin: 0 1.5%;
+        }
+
+        &-item {
+            height: 32px;
+            border: 1px solid @borderColor;
+            border-radius: 4px;
+            overflow: hidden;
+            position: relative;
+
+            &-name {
+                display: inline-block;
+                width: 100%;
+                height: 100%;
+                line-height: 30px;
+                overflow: hidden;
+                padding-right: 32px;
+                padding-left: 7px;
+                white-space: nowrap;
+                text-overflow: ellipsis;
+            }
+
+            &-icon {
+                position: absolute;
+                right: 0px;
+                top: 0px;
+                display: inline-block;
+                width: 32px;
+                height: 100%;
+                text-align: center;
+                line-height: 30px;
+            }
+        }
+    }
+</style>

package/src/components/controls/base/{BriInputs.vue → DshInput/BriInputs.vue}

@@ -46,7 +46,7 @@
 </template>
 
 <script>
-    import controlMixin from "../controlMixin.js";
+    import controlMixin from "../../controlMixin.js";
 
     export default {
         name: "BriInputs",

package/src/components/controls/base/{DshInput.vue → DshInput/DshInput.vue}

@@ -1,5 +1,9 @@
 <template>
-    <div class="DshInput">
+    <!-- 单选模式 -->
+    <div
+        v-if="!multipleMode"
+        class="DshInput"
+    >
         <!-- 编辑 -->
         <template v-if="canEdit">
             <Input
@@ -8,7 +12,7 @@
                 :type="inputType"
                 :placeholder="selfPropsObj._placeholder"
                 :readonly="selfPropsObj._readonly"
-                :disabled="!finalCanEdit || selfPropsObj._disabled"
+                :disabled="selfPropsObj._disabled"
                 :clearable="selfPropsObj._clearable"
                 :size="selfPropsObj._size"
                 :rows="selfPropsObj._rows"
@@ -76,16 +80,29 @@
             </template>
         </template>
     </div>
+
+    <!-- 多选模式 -->
+    <dsh-inputs
+        v-else
+        :canEdit="canEdit"
+        :value="value"
+        :propsObj="propsObj"
+        @change="change"
+    ></dsh-inputs>
 </template>
 
 <script>
-    import controlMixin from "../controlMixin.js";
+    import controlMixin from "../../controlMixin.js";
+    import DshInputs from "./BriInputs.vue";
 
     export default {
         name: "DshInput",
         mixins: [
             controlMixin
         ],
+        components: {
+            DshInputs
+        },
         props: {},
         data () {
             return {
@@ -95,16 +112,18 @@
         computed: {
             selfPropsObj () {
                 return {
+                    _search: false,
                     _textType: "default", // ["default", "url"]
                     _readonly: ["serialNumber"].includes(this.controlType),
-                    _disabled: ["serialNumber"].includes(this.controlType),
                     _showWordLimit: this.propsObj._showWordLimit || (!!this.propsObj._maxlength || this.propsObj._maxlength === 0),
                     _autosize: {
                         minRows: 2
                     },
 
                     ...this.propsObj,
-                    ...this.commonDealPropsObj
+                    ...this.commonDealPropsObj,
+
+                    _disabled: this.propsObj._disabled || ["serialNumber"].includes(this.controlType) || !this.finalCanEdit
                 };
             },
             inputType () {

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

@@ -1,5 +1,9 @@
 <template>
-    <div class="DshNumber">
+    <!-- 单选模式 -->
+    <div
+        v-if="!multipleMode"
+        class="DshNumber"
+    >
         <!-- 编辑 -->
         <template v-if="canEdit">
             <BriInputNumber
@@ -46,11 +50,21 @@
             </template>
         </template>
     </div>
+
+    <!-- 多选模式 -->
+    <dsh-numberange
+        v-else
+        :canEdit="canEdit"
+        :value="value"
+        :propsObj="propsObj"
+        @change="change"
+    ></dsh-numberange>
 </template>
 
 <script>
     import controlMixin from "../../controlMixin.js";
     import BriInputNumber from "./BriInputNumber/BriInputNumber.vue";
+    import DshNumberange from "./DshNumberange.vue";
 
     export default {
         name: "DshNumber",
@@ -58,7 +72,8 @@
             controlMixin
         ],
         components: {
-            BriInputNumber
+            BriInputNumber,
+            DshNumberange
         },
         props: {},
         data () {
@@ -133,3 +148,60 @@
         methods: {}
     };
 </script>
+
+<style lang="less" scoped>
+    .DshNumber {
+        width: 100%;
+
+        &-edit {
+            &-suffix {
+                min-width: 32px;
+                border-left: 1px solid @borderColor;
+                background-color: #F0F0F0;
+                text-align: center;
+                color: @textColor;
+            }
+        }
+    }
+</style>
+<style lang="less">
+    .ivu-input-number {
+        width: 100%;
+
+        .ivu-input-number-input {
+            color: @textColor;
+        }
+
+        &-disabled {
+            .ivu-input-number-input {
+                opacity: 1;
+                background: @inputBg-disabled;
+                color: @textColor;
+                &::-webkit-input-placeholder {
+                    color: @placeholder-disabled-color;
+                }
+            }
+        }
+
+        &-handler {
+            &-wrap {
+                border-left: none;
+            }
+            &-down {
+                border: none;
+            }
+            &:hover {
+                background-color: @hoverBg;
+
+                .ivu-input-number-handler-down-inner,
+                .ivu-input-number-handler-up-inner {
+                    color: @textColor;
+                }
+            }
+            &-down-inner,
+            &-up-inner {
+                color: @contentColor;
+            }
+        }
+    }
+</style>

package/src/components/controls/base/{DshNumberange.vue → DshNumber/DshNumberange.vue}

@@ -52,8 +52,8 @@
 </template>
 
 <script>
-    import controlMixin from "../controlMixin.js";
-    import BriInputNumber from "./DshNumber/BriInputNumber/BriInputNumber.vue";
+    import controlMixin from "../../controlMixin.js";
+    import BriInputNumber from "./BriInputNumber/BriInputNumber.vue";
 
     export default {
         name: "DshNumberange",
@@ -125,3 +125,38 @@
         methods: {}
     };
 </script>
+
+<style lang="less" scoped>
+    .DshNumberange {
+        width: 100%;
+        display: flex;
+        align-items: center;
+
+        &-left,
+        &-right {
+            flex: 1;
+        }
+
+        &-center {
+            width: 30px;
+            text-align: center;
+            color: @textColor;
+        }
+
+        &-suffix {
+            padding-right: 24px;
+            padding-left: 8px;
+            line-height: 30px;
+            white-space: nowrap;
+        }
+    }
+</style>
+<style lang="less">
+    .DshNumberange {
+        input {
+            text-overflow: ellipsis;
+            overflow: hidden;
+            white-space: nowrap;
+        }
+    }
+</style>