bri-components 1.2.49 → 1.2.50

package/src/components/controls/base/DshSelect/selectMixin.js

@@ -0,0 +1,241 @@
+import controlMixin from "../../controlMixin.js";
+import { resourceData } from "bri-datas";
+
+export default {
+    mixins: [
+        controlMixin
+    ],
+    components: {},
+    props: {},
+    data () {
+        return {
+            initListData: [],
+            showTipTpl: false,
+            showTipModal: false,
+            dynamicContent: ""
+        };
+    },
+    computed: {
+        selectPropsObj () {
+            return {
+                colorMap: resourceData.colorMap,
+                _optionKind: "dropdown", // "flat"、"dropdown"
+                _useColor: false,
+                _filterable: true,
+                _data: [],
+                _customData: [],
+
+                ...this.propsObj,
+                ...this.commonDealPropsObj,
+
+                _disabled: this.propsObj._disabled || !this.finalCanEdit
+            };
+        },
+        showType () {
+            return this.selfPropsObj._optionKind;
+        },
+        useColor () {
+            return this.selfPropsObj._useColor;
+        },
+        colorMap () {
+            return this.selfPropsObj.colorMap;
+        },
+        listData () {
+            const listData = this.selfPropsObj._data.concat(this.initListData);
+
+            return this.$dataType(this.selfPropsObj._filterFunc, "function")
+                ? this.selfPropsObj._filterFunc(listData, this.selfPropsObj, this.value)
+                : listData;
+        },
+
+        openTip () {
+            return this.isOnSearch ? false : this.propsObj._openTip;
+        },
+        modalTipContent () {
+            return this.propsObj._tipContent || this.dynamicContent || "暂无信息";
+        },
+
+        curValObj () {
+            return this.$isEmptyData(this.curVal)
+                ? undefined
+                : this.getItemData(this.curVal);
+        },
+        valStr: {
+            get () {
+                return this.curValObj
+                    ? this.curValObj.name || this.curValObj._name
+                    : "";
+            },
+            set (val) {
+                if (!val) {
+                    this.curVal = "";
+                }
+            }
+        },
+        showVal () {
+            return this.$isEmptyData(this.curVal)
+                ? this.emptyShowVal
+                : this.valStr;
+        },
+        // 已选择项的对象列表
+        curValObjList () {
+            return this.curValList.map(key => this.getItemData(key));
+        },
+        valListStr () {
+            return this.curValObjList.map(item => item.name || item._name).join("、");
+        },
+        showMulVal () {
+            return this.$isEmptyData(this.curValList)
+                ? this.emptyShowVal
+                : this.valListStr;
+        }
+    },
+    created () {
+        this.init();
+    },
+    methods: {
+        init () {
+            this.getTipData();
+            this.getListData();
+        },
+
+        getItemData (key) {
+            const obj = this.listData.find(item => item._key === key) || {
+                _key: key,
+                name: `温馨提示：选项${key}已找不到`
+            };
+
+            return {
+                ...obj,
+                style: this.getItemStyle(obj),
+                color: undefined
+            };
+        },
+        getItemStyle (item) {
+            const color = this.colorMap[item.color] || this.colorMap["color-1"];
+            return {
+                "background-color": this.useColor ? this.$getColor(color, 0.1) : "#E5E5E5",
+                color: this.useColor ? color : "rgba(0, 0, 0, 0.9)",
+                display: "inline-block",
+                "max-width": "100%",
+                padding: "0px 6px",
+                "border-radius": "4px"
+            };
+        },
+        // 获取某项的置灰状态
+        getItemDisabled (item) {
+            return !!(this.selfPropsObj._disabled || item._disabled);
+        },
+
+        // 是否打开tip弹窗
+        clickOpenTip (item) {
+            if (item.__isTip__) {
+                if (this.propsObj._tipKind === "dynamic" && !this.propsObj._tipContent) {
+                    this.getTipUrl();
+                } else {
+                    this.showTipTpl = true;
+                    this.showTipModal = true;
+                }
+            }
+        },
+        getTipUrl () {
+            if (this.propsObj._tipUrl) {
+                this.$https({
+                    url: {
+                        module: "customPath",
+                        name: this.propsObj._tipUrl
+                    },
+                    params: {
+                        formData: this.value,
+                        propsObj: this.propsObj
+                    },
+                    callback: res => {
+                        this.dynamicContent = res;
+                        this.showTipTpl = true;
+                        this.showTipModal = true;
+                    }
+                });
+            } else {
+                this.$Message.warning("请配置接口路径！");
+            }
+        },
+        tipModalRender (h) {
+            return this.showTipTpl
+                ? h("dsh-modal", {
+                    props: {
+                        value: this.showTipModal,
+                        mode: "custom",
+                        propsObj: {
+                            title: "温馨提示",
+                            maskClosable: true,
+                            class: "DshSelect-modal"
+                        }
+                    },
+                    on: {
+                        input: bool => {
+                            this.showTipModal = bool;
+                        }
+                    }
+                }, [
+                    h("div", {
+                        class: "DshSelect-modal-content",
+                        domProps: {
+                            innerHTML: this.modalTipContent
+                        }
+                    }),
+                    h("div", {
+                        class: "DshSelect-modal-footer"
+                    }, [
+                        h("Button", {
+                            props: {
+                                type: "primary"
+                            },
+                            on: {
+                                click: () => {
+                                    this.showTipModal = false;
+                                }
+                            }
+                        }, "我知道了")
+                    ])
+                ])
+                : undefined;
+        },
+        getTipData () {
+            if (
+                (this.propsObj._key !== "_default") &&
+                this.finalCanEdit &&
+                this.openTip
+            ) {
+                let tipObj = {
+                    _key: "openTip",
+                    _name: this.propsObj._tipName || "其他",
+                    __isTip__: true,
+                    _disabled: true,
+                    color: "#6991cc",
+                    class: `Dsh${this.propsObj._type}-tip`
+                };
+                this.initListData.push(tipObj);
+            }
+        },
+        // 接口 -获取自定义的接口数据
+        getListData () {
+            this.selfPropsObj._customData.forEach(item => {
+                this.$https({
+                    url: item.url,
+                    params: item.params,
+                    callback: data => {
+                        this.initListData = [
+                            ...this.initListData,
+                            ...data.list.map(dataItem =>
+                                ({
+                                    _key: dataItem[item._key || "_key"],
+                                    name: dataItem[item._name || "name"]
+                                })
+                            )
+                        ];
+                    }
+                });
+            });
+        }
+    }
+};

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

@@ -0,0 +1,84 @@
+<template>
+    <!-- 单选模式 编辑 -->
+    <div
+        v-if="!multipleMode && canEdit"
+        class="DshSwitch"
+    >
+        <i-switch
+            v-model="curVal"
+            :disabled="selfPropsObj._disabled"
+            :loading="selfPropsObj.loading"
+            :size="selfPropsObj._size"
+            :true-color="selfPropsObj._openColor"
+            :false-color="selfPropsObj._closeColor"
+            :true-value="selfPropsObj._openValue"
+            :false-value="selfPropsObj._closeValue"
+            @on-change="change"
+        >
+            <span slot="open">
+                {{ selfPropsObj._openText }}
+            </span>
+            <span slot="close">
+                {{ selfPropsObj._closeText }}
+            </span>
+        </i-switch>
+    </div>
+
+    <!-- 单选模式 查看 -->
+    <span
+        v-else-if="!multipleMode && !canEdit"
+        :class="{
+            ...commonClass
+        }"
+        :style="showStyle"
+    >
+        {{ showVal }}
+    </span>
+
+    <!-- 多选模式 -->
+    <dsh-checkbox
+        v-else
+        :canEdit="canEdit"
+        :value="value"
+        :propsObj="mulPropsObj"
+        @change="change"
+    ></dsh-checkbox>
+</template>
+
+<script>
+    import switchMixin from "./switchMixin.js";
+
+    export default {
+        name: "DshSwitch",
+        mixins: [
+            switchMixin
+        ],
+        components: {},
+        props: {},
+        data () {
+            return {};
+        },
+        computed: {
+            selfPropsObj () {
+                return {
+                    _size: "default", // "default", "small", "large"
+
+                    ...this.switchPropsObj
+                };
+            }
+        },
+        created () {},
+        methods: {}
+    };
+</script>
+
+<style lang="less" scoped>
+    .DshSwitch {
+
+    }
+</style>
+<style lang="less">
+    .DshSwitch {
+
+    }
+</style>

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

@@ -0,0 +1,73 @@
+import controlMixin from "../../controlMixin.js";
+import DshCheckbox from "../DshSelect/DshCheckbox.vue";
+
+export default {
+    mixins: [
+        controlMixin
+    ],
+    components: {
+        DshCheckbox
+    },
+    props: {},
+    data () {
+        return {};
+    },
+    computed: {
+        switchPropsObj () {
+            return {
+                loading: false, // 是否为加载状态
+                _openColor: this.$appData.themeColor, // 打开时的背景色
+                _closeColor: "#ccc", // 关闭时的背景色
+                _openValue: true, // 打开时对应的值
+                _closeValue: false, // 关闭时对应的值
+
+                ...this.propsObj,
+                ...this.commonDealPropsObj,
+
+                _openText: this.propsObj._openText || "是", // 此行放在 ...this.propsObj的下面目的是，处理_openText为空字符串的情况
+                _closeText: this.propsObj._closeText || "否",
+                _disabled: this.propsObj._disabled || !this.finalCanEdit
+            };
+        },
+        mulPropsObj () {
+            return {
+                ...this.propsObj,
+                _optionKind: "flat",
+                _data: [
+                    {
+                        _key: "true",
+                        name: this.selfPropsObj._openText,
+                        color: this.selfPropsObj._openColor
+                    },
+                    {
+                        _key: "false",
+                        name: this.selfPropsObj._closeText,
+                        color: this.selfPropsObj._closeColor
+                    }
+                ]
+            };
+        },
+        showStyle () {
+            return !this.$isEmptyData(this.curVal)
+                ? {
+                    backgroundColor: this.curVal === true ? "#d3f3dc" : "#FDEDED",
+                    color: this.curVal === true ? "#37C45E" : "#E83636",
+                    display: "inline-block",
+                    "max-width": "100%",
+                    padding: "0px 6px",
+                    "border-radius": "4px"
+                }
+                : {};
+        },
+
+        showVal () {
+            return this.$isEmptyData(this.curVal)
+                ? this.emptyShowVal
+                : this.curVal === true
+                    ? this.selfPropsObj._openText
+                    : this.selfPropsObj._closeText;
+        }
+    },
+    created () { },
+    methods: {}
+};

package/src/components/controls/controlMap.js

@@ -17,11 +17,11 @@ const componentNameMap = {
     url: "DshInput",
     password: "DshInput",
     serialNumber: "DshInput",
-    texts: "BriInputs",
+    texts: "DshInput",
     number: "DshNumber",
-    numberange: "DshNumberange",
+    numberange: "DshNumber",
     date: "DshDate",
-    daterange: "DshDaterange",
+    daterange: "DshDate",
     switch: "DshSwitch",
     select: "DshSelect",
     checkbox: "DshCheckbox",
@@ -50,15 +50,12 @@ const componentNameMap = {
 // 组件相对路径映射图
 const pathMap = {
     base: {
-        // DshInput: "./base/DshInput.vue", // 全局已注册
-        BriInputs: "./base/BriInputs.vue",
+        // DshInput: "./base/DshInput/DshInput.vue", // 全局已注册
         // DshNumber: "./base/DshNumber/DshNumber.vue", // 全局已注册
-        DshNumberange: "./base/DshNumberange.vue",
-        DshDate: "./base/DshDate.vue",
-        DshDaterange: "./base/DshDaterange.vue",
-        DshSwitch: "./base/DshSwitch.vue",
-        // DshSelect: "./base/DshSelect.vue", // 全局已注册
-        // DshCheckbox: "./base/DshCheckbox.vue", // 全局已注册
+        DshDate: "./base/DshDate/DshDate.vue",
+        DshSwitch: "./base/DshSwitch/DshSwitch.vue",
+        // DshSelect: "./base/DshSelect/DshSelect.vue", // 全局已注册
+        // DshCheckbox: "./base/DshSelect/DshCheckbox.vue", // 全局已注册
         // DshCascader: "./base/DshCascader/DshCascader.vue", // 全局已注册
         BriUpload: "./base/BriUpload/BriUpload.vue",
         DshCoordinates: "./base/DshCoordinates.vue",

package/src/components/controls/controlMixin.js

@@ -35,7 +35,9 @@ export default {
         }
     },
     data () {
-        return {};
+        return {
+            showModal: false
+        };
     },
     computed: {
         // 值为不是[]类型用的
@@ -45,6 +47,7 @@ export default {
             },
             set (val) {
                 this.value[this.controlKey] = val;
+                // this.change();
             }
         },
         // 值为[]类型用的
@@ -52,8 +55,8 @@ export default {
             get () {
                 return this.value[this.controlKey] || [];
             },
-            set (val) {
-                this.$set(this.value, this.controlKey, val);
+            set (valList) {
+                this.$set(this.value, this.controlKey, valList);
                 this.change();
             }
         },
@@ -85,8 +88,9 @@ export default {
         finalCanEdit () {
             return this.canEdit && (this.propsObj.canEdit == undefined ? true : this.propsObj.canEdit);
         },
+        // 是否为多选模式
         multipleMode () {
-            return this.selfPropsObj ? !!this.selfPropsObj._multiple : !!this.propsObj._multiple;
+            return ["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"];
@@ -105,7 +109,7 @@ export default {
                 "bri-control-unit": !this.canEdit && this.isInTable,
                 "bri-control-show": !this.canEdit && !this.isInTable,
 
-                "dsh-ellipsis": !(this.isUnitShow && !!this.propsObj._unitWrap),
+                "dsh-ellipsis": this.isUnitShow,
                 "bri-control-nodata": this.$isEmptyData(this.curVal)
             };
         },
@@ -126,6 +130,9 @@ export default {
         isInTable () {
             return !!this.propsObj.isInTable;
         },
+        isOnSearch () {
+            return !!this.propsObj.onSearch;
+        },
         isUnitUpdate () {
             return this.isInTable && !!this.canEdit;
         },
@@ -135,6 +142,7 @@ export default {
         // isShare () {
         //     return !!this.propsObj.isShare;
         // },
+
         /* 部分控件下 才使用的属性 */
         compKey () {
             return this.propsObj.compKey;
@@ -147,6 +155,12 @@ export default {
         },
         modKey () {
             return this.propsObj.modKey;
+        },
+        // 移动端在用 --只做校验的field框所用的propsObj
+        ruleFieldPropsObj () {
+            return {
+                _rules: this.propsObj._rules
+            };
         }
     },
     methods: {
@@ -155,6 +169,20 @@ export default {
         },
         refChange (...params) {
             this.$emit("refChange", this.value[this.controlKey]);
+        },
+
+        /* ----- 工具方法 ------- */
+        // 切换弹框
+        toggleModal (bool) {
+            this.showModal = bool;
+        },
+        // 打开弹框
+        openModal () {
+            this.showModal = true;
+        },
+        // 关闭弹框
+        closeModal () {
+            this.showModal = false;
         }
     }
 };

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

@@ -151,7 +151,7 @@
                 return this.selfPropsObj._labelType;
             },
             onlySelect () {
-                return this.selfPropsObj._onlySelect;
+                return this.isOnSearch ? true : this.selfPropsObj._onlySelect;
             },
             originLabels () {
                 return this.selfPropsObj._originLabels;

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

@@ -57,7 +57,7 @@
                 <!-- 上 已选择项 -->
                 <div class="list-selected">
                     <span class="list-selected-label">
-                        已选择{{ multiple ?  `(${newValList.length}个)` : "" }}：
+                        已选择{{ multipleMode ?  `(${newValList.length}个)` : "" }}：
                     </span>
 
                     <span
@@ -95,16 +95,14 @@
 
                     <template v-else>
                         <!-- 树形形式 -->
-                        <div
-                            class="list-center-tree"
-                        >
+                        <div class="list-center-tree">
                             <template v-if="allDepartmentList.length">
                                 <bri-tree-item
                                     v-for="item in allDepartmentList"
                                     :key="item._key"
                                     :value="item"
                                     :changeOnSelect="changeOnSelect"
-                                    :multiple="multiple"
+                                    :multiple="multipleMode"
                                     @on-change="changeSelect"
                                 ></bri-tree-item>
                             </template>
@@ -179,18 +177,13 @@
                     _highSearch: false,
                     _changeOnSelect: true,
                     _searchString: "",
+
                     ...this.propsObj,
                     ...this.commonDealPropsObj
                 };
             },
-            multiple () {
-                return this.selfPropsObj._multiple;
-            },
             highSearch () {
-                return this.selfPropsObj._highSearch;
-            },
-            inputIcon () {
-                return this.multiple ? "ios-people" : "ios-person";
+                return this.isOnSearch ? true : this.selfPropsObj._highSearch;
             },
             changeOnSelect () {
                 return this.selfPropsObj._changeOnSelect;
@@ -198,6 +191,9 @@
             searchString () {
                 return this.selfPropsObj._searchString;
             },
+            inputIcon () {
+                return this.multipleMode ? "ios-people" : "ios-person";
+            },
 
             modalPropsObj () {
                 return {
@@ -259,7 +255,7 @@
             /* ---------- 弹框里 --------- */
             // 弹窗 -选项变化
             changeSelect (selectItem) {
-                this.newValList = this.multiple
+                this.newValList = this.multipleMode
                     ? this.selectKeys.includes(selectItem._key)
                         ? this.newValList.filter(item => item._key !== selectItem._key)
                         : [...this.newValList, selectItem]

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

@@ -120,7 +120,7 @@
                                 >
                                     <!-- 上 全选 -->
                                     <div
-                                        v-if="multiple"
+                                        v-if="multipleMode"
                                         class="content-users-list-checkAll"
                                     >
                                         <Checkbox
@@ -292,15 +292,11 @@
                     ...this.commonDealPropsObj
                 };
             },
-
-            multiple () {
-                return this.selfPropsObj._multiple;
-            },
             highSearch () {
-                return this.selfPropsObj._highSearch;
+                return this.isOnSearch ? true : this.selfPropsObj._highSearch;
             },
             inputIcon () {
-                return this.multiple ? "ios-people" : "ios-person";
+                return this.multipleMode ? "ios-people" : "ios-person";
             },
 
             curCheckAll () {
@@ -379,7 +375,7 @@
                 }
             },
             clickSelectUserItem (curUserItem, bool) {
-                if (this.multiple) {
+                if (this.multipleMode) {
                     if (this.newValList.some(newItem => newItem._key === curUserItem._key)) {
                         this.newValList = this.newValList.filter(newItem => newItem._key !== curUserItem._key);
                     } else {
@@ -442,21 +438,27 @@
                         searchString: this.propsObj.searchString
                     },
                     callback: data => {
-                        let depart = [{
-                            is_leaf: true,
-                            level: 1,
-                            name: "全部",
-                            _key: ""
-                        }];
-                        if (this.highSearch) {
-                            depart.unshift({
+                        this.departmentList = [
+                            ...(
+                                this.highSearch
+                                    ? [
+                                        {
+                                            is_leaf: true,
+                                            level: 1,
+                                            name: "高级选项",
+                                            _key: "_highSearch"
+                                        }
+                                    ]
+                                    : []
+                            ),
+                            {
                                 is_leaf: true,
                                 level: 1,
-                                name: "高级选项",
-                                _key: "_highSearch"
-                            });
-                        }
-                        this.departmentList = depart.concat(data.list);
+                                name: "全部",
+                                _key: ""
+                            },
+                            ...data.list
+                        ];
                     }
                 });
             }