bri-components 1.0.0

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

@@ -0,0 +1,366 @@
+<template>
+    <div :class="`DshCascader ycFormItem control-${mode}`">
+        <!-- 编辑模式 -->
+        <template v-if="finalCanEdit">
+            <!-- 多选 多选模式的filterable必须是false，不然出bug -->
+            <template v-if="useMultiple === true">
+                <Cascader
+                    style="width: 100%;"
+                    :value="multipleSelectVal"
+                    :data="renderCascaderData"
+                    :disabled="!finalCanEdit"
+                    :change-on-select="selfPropsObj._changeOnSelect"
+                    :clearable="selfPropsObj._clearable"
+                    :size="selfPropsObj._size"
+                    :filterable="false"
+                    :transfer="selfPropsObj._transfer"
+                    :transfer-class-name="selfPropsObj._transferClassName"
+                    :load-data="loadData"
+                    @on-visible-change="multipleVisibleChange"
+                    @on-change="createItem"
+                >
+                    <dsh-control-define
+                        :value="valTags"
+                        :canEdit="finalCanEdit"
+                        :propsObj="{
+                            ...selfPropsObj,
+                            _multiplerow: selfPropsObj._span == 24 || !selfPropsObj._span
+                        }"
+                        @delete="deleteItem"
+                    ></dsh-control-define>
+                </Cascader>
+            </template>
+
+            <!-- 单选 -->
+            <template v-else>
+                <!-- 弹框模式 -->
+                <template v-if="selfPropsObj._showMode === 'custom'">
+                    <div
+                        :class="{
+                            'DshCascader-single': true,
+                            'dsh-control-readonly': $isReadonly(canEdit, propsObj),
+                            'dsh-control-disabled': $isDisabled(canEdit, propsObj)
+                        }"
+                        @click="openModal"
+                    >
+                        <div
+                            v-if="value[controlKey] && value[controlKey].length"
+                            class="DshCascader-single-val"
+                        >
+                            <span :class="{
+                                'DshCascader-single-val-text': true,
+                                'DshCascader-single-val-text-disabled': $isDisabled(canEdit, propsObj),
+                            }">
+                                {{ $getTreeLinealDatas(value[controlKey], cascaderData, "name").join("/") }}
+                            </span>
+                            <Icon
+                                v-if="selfPropsObj._clearable"
+                                class="DshCascader-single-val-clear"
+                                type="md-close"
+                                @click.stop="clickClear"
+                            />
+                        </div>
+
+                        <span
+                            v-else
+                            class="DshCascader-single-placeholder"
+                        >
+                            {{ selfPropsObj._placeholder }}
+                        </span>
+                    </div>
+
+                    <template v-if="showModal">
+                        <info-cascader
+                            v-model="value[controlKey]"
+                            :showModal="showModal"
+                            :propsObj="selfPropsObj"
+                            :data="cascaderData"
+                            @change="change"
+                            @changeShowModal="changeShowModal"
+                        ></info-cascader>
+                    </template>
+                </template>
+
+                <!-- 输入框模式 -->
+                <Cascader
+                    v-else
+                    style="width: 100%;"
+                    :class="{
+                        'DshCascader-readonly': $isReadonly(canEdit, selfPropsObj),
+                        'DshCascader-disabled': $isDisabled(canEdit, selfPropsObj)
+                    }"
+                    :value="value[controlKey]"
+                    :data="renderCascaderData"
+                    :placeholder="selfPropsObj._placeholder"
+                    :disabled="!finalCanEdit"
+                    :change-on-select="selfPropsObj._changeOnSelect"
+                    :clearable="selfPropsObj._clearable"
+                    :size="selfPropsObj._size"
+                    :filterable="selfPropsObj._filterable"
+                    :transfer="selfPropsObj._transfer"
+                    :transfer-class-name="selfPropsObj._transferClassName"
+                    :load-data="loadData"
+                    @on-visible-change="visibleChange"
+                    @on-change="changeVal"
+                    @click.native.stop="clickInput"
+                ></Cascader>
+            </template>
+        </template>
+
+        <!-- 查看 和 编辑下无编辑权限 -->
+        <Ctooltip
+            v-else
+            placement="top"
+            :transfer="true"
+            maxWidth="200"
+            :content="showVal"
+            :class="commonClass"
+        >
+            <span
+                v-if="showVal"
+                class="dsh-ellipsis hb-show-text"
+                :class="`control-${mode}-text`"
+            >
+                {{ showVal }}
+            </span>
+            <div
+                v-else
+                class="hb-nodata-text dsh-ellipsis"
+            >
+                <span>暂无内容</span>
+            </div>
+        </Ctooltip>
+    </div>
+</template>
+
+<script>
+    import { regionData } from "../../../datas/index.js";
+    import controlMixin from "../controlMixin.js";
+    import InfoCascader from "../../other/InfoCascader";
+
+    const loop = function (data = [], level, parentCode, filterVals = []) {
+        if (data && filterVals.length) {
+            data = data.filter(item => filterVals.includes(item._key));
+        }
+        return data
+            ? data.reduce((arr, item) => {
+                const newItem = {
+                    ...item,
+                    value: item._key,
+                    label: item.name,
+                    codeArr: [ ...(parentCode || []), item._key ]
+                };
+                if (!level || level > item.level) {
+                    newItem.children = loop(item.children, level, newItem.codeArr);
+                    newItem.children.length && (newItem.loading = false); // 此代码为了所请求的级出现继续加载的箭头图标
+                } else {
+                    newItem.children = [];
+                }
+                arr.push(newItem);
+
+                return arr;
+            }, [])
+            : [];
+    };
+
+    export default {
+        name: "DshCascader",
+        mixins: [controlMixin],
+        components: {
+            InfoCascader
+        },
+        props: {},
+        data () {
+            return {
+                renderDataFlag: true,
+                clickInputFlag: true,
+                isVisible: false,
+                multipleSelectVal: [],
+                selectVal: [],
+
+                showModal: false,
+                modalVal: [],
+                operationMap: {
+                    cancel: {
+                        name: "取消",
+                        type: "clickCancel",
+                        event: "clickCancel",
+                        class: "z-default"
+                    },
+                    confirm: {
+                        name: "确定",
+                        btnType: "primary",
+                        type: "clickConfirm",
+                        event: "clickConfirm",
+                        class: "z-primary"
+                    }
+                }
+            };
+        },
+        computed: {
+            cascaderData: {
+                get () {
+                    return loop(
+                        ["region", "regions"].includes(this.selfPropsObj._type) ? regionData : this.selfPropsObj._data,
+                        this.selfPropsObj._cascaderLevel,
+                        undefined,
+                        this.selfPropsObj._cascaderFilterVals
+                    );
+                },
+                set () {}
+            },
+            renderCascaderData () {
+                return this.renderDataFlag
+                    ? this.cascaderData.map(item => {
+                        return {
+                            ...item,
+                            children: []
+                        };
+                    })
+                    : this.cascaderData;
+            },
+
+            selfPropsObj () {
+                return {
+                    _filterable: true,
+                    _showMode: false,
+                    _transfer: true,
+                    ...this.propsObj,
+                    ...this.commonDealPropsObj
+                };
+            },
+            useMultiple () {
+                return ["regions", "cascaders"].includes(this.selfPropsObj._type);
+            },
+            valTags () {
+                return this.value[this.controlKey]
+                    ? this.value[this.controlKey].map(item => this.$getTreeLinealDatas(item, this.cascaderData, "name").join("/"))
+                    : [];
+            },
+
+            selfModalPropsObj () {
+                return {
+                    mode: "default",
+                    title: this.selfPropsObj._placeholder
+                };
+            },
+            showVal () {
+                return this.useMultiple
+                    ? this.valTags.join("、")
+                    : this.$getTreeLinealDatas(this.value[this.controlKey], this.cascaderData, "name").join(["region"].includes(this.selfPropsObj._type) ? "" : "/");
+            }
+        },
+        created () {
+            this.init();
+        },
+        methods: {
+            init () {
+                if (!this.value[this.controlKey]) {
+                    this.$set(this.value, this.controlKey, []);
+                }
+            },
+            // 动态加载数据
+            loadData (treeItem, cb) {
+                let list = this.$getTreeLinealDatas(treeItem.codeArr, this.cascaderData);
+                treeItem.children = list[list.length - 1].children.map(item => ({ ...item, children: [] }));
+
+                cb();
+            },
+
+            /* 多选使用 */
+            // 展开和关闭弹窗时触发
+            multipleVisibleChange (bool) {
+                this.isVisible = bool;
+
+                if (bool === false) {
+                    if (this.selectVal.length) {
+                        if (this.value[this.controlKey].some(item => JSON.stringify(item) == JSON.stringify(this.selectVal))) {
+                            this.$Message.error({
+                                content: `"${this.$getTreeLinealDatas(this.selectVal, this.cascaderData, "name").join("/")}"已选择，请勿重复选择！`,
+                                duration: 5
+                            });
+                        } else {
+                            this.value[this.controlKey] = [...this.value[this.controlKey], this.selectVal];
+                            this.change();
+                        }
+                    }
+
+                    this.selectVal = [];
+                    this.multipleSelectVal = [];
+                }
+            },
+            // 添加
+            createItem (selectVal, ...params) {
+                if (this.isVisible) {
+                    this.selectVal = selectVal;
+                }
+            },
+            // 删除
+            deleteItem (item, index) {
+                this.value[this.controlKey].splice(index, 1);
+                this.change();
+            },
+
+            /* ----------- 单选使用 ---------- */
+            clickInput () {
+                if (
+                    ["cascader"].includes(this.selfPropsObj._type) &&
+                    this.selfPropsObj._filterable === true &&
+                    this.renderDataFlag === true &&
+                    this.clickInputFlag === true
+                ) {
+                    this.clickInputFlag = false; // 这个处理其实觉大概率没必要，有没有不受影响
+                    setTimeout(() => {
+                        this.renderDataFlag = false;
+                    }, 0);
+                }
+            },
+            // 展开和关闭弹窗时触发
+            visibleChange (bool) {
+                if (bool) {
+                    this.isVisible = bool;
+                } else {
+                    setTimeout(() => {
+                        this.isVisible = bool;
+                    }, 0);
+                }
+            },
+            changeVal (selectVal, ...params) {
+                if (this.isVisible || !selectVal.length) {
+                    this.value[this.controlKey] = selectVal;
+                    this.$emit("change", this.value[this.controlKey], ...params);
+                }
+            },
+
+            // 点击清除
+            clickClear () {
+                this.value[this.controlKey] = [];
+                this.change();
+            },
+            openModal () {
+                if (this.finalCanEdit) {
+                    this.modalVal = this.value[this.controlKey];
+                    this.showModal = true;
+                }
+            },
+            changeShowModal (val) {
+                this.showModal = val;
+            },
+            clickConfirm () {
+                this.value[this.controlKey] = this.modalVal;
+                this.showModal = false;
+
+                this.change();
+            },
+            clickCancel () {
+                this.showModal = false;
+            }
+        },
+        watch: {
+            "propsObj._cascaderLevel" () {
+                this.value[this.controlKey] = [];
+                this.init();
+            }
+        }
+    };
+</script>

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

@@ -0,0 +1,158 @@
+<template>
+    <div class="DshCascaderMultiple ycFormItem">
+        <Cascader
+            class="DshCascaderMultiple-control"
+            v-model="cascaderVal"
+            :placeholder="$showPlaceholder(canEdit, propsObj) ? `请输入${propsObj._name}` : ''"
+            :data="renderCascaderData"
+            :load-data="loadData"
+            :change-on-select="propsObj._changeOnSelect"
+            :filterable="true"
+            :disabled="!finalCanEdit"
+            :clearable="true"
+            :transfer="true"
+        ></Cascader>
+        <dsh-buttons
+            class="DshCascaderMultiple-create"
+            :list="$getOperationList(['createTag'])"
+            @click="$dispatchEvent($event)"
+        ></dsh-buttons>
+
+        <!-- 标签列表 -->
+        <dsh-tags
+            class="dsh-margin-top5"
+            :list="tags"
+            @delete="$dispatchEvent(operationMap.deleteTag, arguments)"
+        ></dsh-tags>
+    </div>
+</template>
+
+<script>
+    import { regionData } from "../../../datas/index.js";
+    import controlMixin from "../controlMixin.js";
+
+    const loop = function (data = [], level, parentCode, filterVals = []) {
+        if (data && filterVals.length) {
+            data = data.filter(item => filterVals.includes(item._key));
+        }
+        return data
+            ? data.reduce((arr, item) => {
+                const newItem = {
+                    ...item,
+                    value: item._key,
+                    label: item.name,
+                    codeArr: [ ...(parentCode || []), item._key ]
+                };
+                if (!level || level > item.level) {
+                    newItem.children = loop(item.children, level, newItem.codeArr);
+                    newItem.children.length && (newItem.loading = false); // 此代码为了所请求的级出现继续加载的箭头图标
+                } else {
+                    newItem.children = [];
+                }
+                arr.push(newItem);
+
+                return arr;
+            }, [])
+            : [];
+    };
+
+    export default {
+        name: "DshCascaderMultiple",
+        mixins: [controlMixin],
+        props: {},
+        data () {
+            return {
+                cascaderVal: [],
+
+                operationMap: {
+                    createTag: {
+                        name: "添加",
+                        type: "createTag",
+                        size: "default",
+                        event: "createTag"
+                    },
+                    deleteTag: {
+                        name: "删除",
+                        type: "deleteTag",
+                        event: "deleteTag"
+                    }
+                }
+            };
+        },
+        computed: {
+            cascaderData: {
+                get () {
+                    return loop(
+                        this.propsObj._subType === "region" ? regionData : this.propsObj._data,
+                        this.propsObj._cascaderLevel,
+                        undefined,
+                        this.propsObj._cascaderFilterVals
+                    );
+                },
+                set () {}
+            },
+            renderCascaderData () {
+                return this.cascaderData.map(item => {
+                    return {
+                        ...item,
+                        children: []
+                    };
+                });
+            },
+            tags () {
+                return this.value[this.propsObj._key].map(item => this.$getTreeLinealDatas(item, this.cascaderData, "name").join("/"));
+            }
+        },
+        created () {},
+        methods: {
+            // 动态加载数据
+            loadData (treeItem, cb) {
+                let list = this.$getTreeLinealDatas(treeItem.codeArr, this.cascaderData);
+                treeItem.children = list[list.length - 1].children.map(item => ({ ...item, children: [] }));
+
+                cb();
+            },
+
+            // 添加
+            createTag (operationItem) {
+                if (this.cascaderVal.length) {
+                    if (this.value[this.propsObj._key].some(item => JSON.stringify(item) == JSON.stringify(this.cascaderVal))) {
+                        this.$Message.error({
+                            content: `"${this.$getTreeLinealDatas(this.cascaderVal, this.cascaderData, "name").join("/")}"已选择，请勿重复选择！`,
+                            duration: 5
+                        });
+                    } else {
+                        this.value[this.propsObj._key].push([...this.cascaderVal]);
+                        this.change();
+                    }
+
+                }
+                this.cascaderVal = [];
+            },
+            // 删除
+            deleteTag (operationItem, params) {
+                this.value[this.propsObj._key].splice(params[1], 1);
+                this.change();
+            }
+        }
+    };
+</script>
+
+<style lang="less" scoped>
+    .DshCascaderMultiple {
+        width: 100%;
+        &-control {
+            display: inline-block;
+            width: calc(100% - 65px);
+        }
+        &-create {
+            display: inline-block;
+            width: 60px;
+        }
+    }
+</style>
+<style lang="less">
+    .DshCascaderMultiple {
+
+    }
+</style>