bri-components 1.5.16 → 1.5.18

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "bri-components",
-    "version": "1.5.16",
+    "version": "1.5.18",
     "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.4.3",
+        "bri-datas": "^1.4.4",
         "jshint": "^2.12.0",
         "jsonlint": "^1.6.3",
         "minio": "7.1.0",

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

@@ -0,0 +1,269 @@
+<template>
+    <div class="DshSelectAll">
+        <Dropdown
+            style="width: 100%;"
+            v-clickoutside="clickCancel"
+            trigger="custom"
+            :visible="showModal"
+            :placement="'bottom-start'"
+            :transfer="true"
+            :transfer-class-name="`DshSelectAll-down ${selfPropsObj._transferClassName}`"
+            :stop-propagation="true"
+            :events-enabled="true"
+        >
+            <div class="DshSelectAll-input" @click="clickInput">
+                <div v-if="inputData.length" class="DshSelectAll-input-selected dsh-ellipsis">
+                    <Tag
+                        v-for="(item, index) in inputData"
+                        :key="item._key"
+                        closable
+                        @on-close="clickDelete(item, index)"
+                    >
+                        {{ item.name }}
+                    </Tag>
+                </div>
+                <Input
+                    v-if="!selfPropsObj._disabled"
+                    v-model="searchName"
+                    :placeholder="selfPropsObj._placeholder"
+                    :clearable="selfPropsObj._clearable"
+                    :size="selfPropsObj._size"
+                ></Input>
+            </div>
+            <DropdownMenu slot="list">
+                <!-- 用了transfer="true"，防止点击面板冒泡关闭 -->
+                <div class="DshSelectAll-down-box" @click.stop="0">
+                    <div class="DshSelectAll-down-all">
+                        <Checkbox
+                            :indeterminate="indeterminate"
+                            :value="checkAll"
+                            @click.prevent.native="handleCheckAll"
+                        >全选</Checkbox>
+                    </div>
+                    <CheckboxGroup v-model="checkAllGroup" @on-change="checkAllGroupChange">
+                        <div
+                            v-for="dataItem in dropDownData"
+                            :key="dataItem._key">
+                            <Checkbox :label="dataItem._key">
+                                <span>{{ dataItem._name || dataItem.name }}</span>
+                            </Checkbox>
+                        </div>
+                    </CheckboxGroup>
+
+                    <dsh-buttons
+                        class="DshSelectAll-down-footer"
+                        :list="$getOperationList(['canCancel', 'canConfirm'])"
+                        @click="$dispatchEvent($event)"
+                    ></dsh-buttons>
+                </div>
+            </DropdownMenu>
+        </Dropdown>
+    </div>
+</template>
+
+<script>
+    export default {
+        name: "DshSelectAll",
+        data () {
+            return {
+                showModal: false,
+                searchName: "",
+
+                indeterminate: true,
+                checkAll: false,
+                checkAllGroup: [],
+
+                operationMap: {
+                    canCancel: {
+                        name: "取消",
+                        type: "canCancel",
+                        btnType: "text",
+                        size: "small",
+                        event: "clickCancel"
+                    },
+                    canConfirm: {
+                        name: "确认",
+                        type: "canConfirm",
+                        btnType: "primary",
+                        size: "small",
+                        event: "clickConfirm"
+                    }
+                }
+            };
+        },
+        props: {
+            value: {
+                type: Object,
+                default () {
+                    return {};
+                }
+            },
+            propsObj: {
+                type: Object,
+                default () {
+                    return {};
+                }
+            }
+        },
+        computed: {
+            compKey () {
+                return this.propsObj.compKey;
+            },
+            appKey () {
+                return this.propsObj.appKey;
+            },
+            selfPropsObj () {
+                return {
+                    ...this.propsObj,
+                    _data: this.propsObj._data || [],
+                    _showData: this.propsObj._showData || [],
+                    _placeholder: `请选择${this.propsObj._name}`
+                };
+            },
+            dropDownData () {
+                const _data = this.selfPropsObj._data.filter(item => item._key);
+                const _showData = this.selfPropsObj._showData.filter(item => item._key);
+                let dropShowData = _data.filter(item => item.name.indexOf(this.searchName) > -1);
+                if (dropShowData.length > 20) {
+                    dropShowData.slice(0, 20);
+                }
+                return this.searchName ? dropShowData : _showData;
+            },
+            inputData () {
+                return this.selfPropsObj._data.filter(item => this.value[this.propsObj._key].includes(item._key));
+            },
+            inputStr () {
+                return this.inputData.map(item => item._name || item.name).join("、");
+            }
+        },
+        created () {
+            this.init();
+        },
+        methods: {
+            init () {
+                this.clickCancel(); // 加载先赋值
+            },
+            openModal () {
+                this.showModal = true;
+            },
+            closeModal () {
+                this.searchName = "";
+                this.showModal = false;
+            },
+            clickInput (e) {
+                if (!this.selfPropsObj._disabled) {
+                    this.openModal();
+                } else {
+                    e.stopPropagation();
+                }
+            },
+            clickDelete (item, index) {
+                this.value[this.propsObj._key].splice(index, 1);
+                this.checkAllGroup = this.value[this.propsObj._key];
+                this.$emit("change", this.value[this.propsObj._key]);
+            },
+
+            clickCancel () {
+                if (this.value[this.propsObj._key] && this.value[this.propsObj._key].length) {
+                    this.checkAllGroup = this.value[this.propsObj._key];
+                }
+                this.closeModal();
+            },
+            clickConfirm () {
+                this.value[this.propsObj._key] = this.checkAllGroup;
+                this.closeModal();
+                this.$emit("change", this.value[this.propsObj._key]);
+            },
+
+            handleCheckAll () {
+                if (this.indeterminate) {
+                    this.checkAll = false;
+                } else {
+                    this.checkAll = !this.checkAll;
+                }
+                this.indeterminate = false;
+
+                if (this.checkAll) {
+                    this.checkAllGroup = this.dropDownData.map(item => item._key);
+                } else {
+                    this.checkAllGroup = [];
+                }
+            },
+            checkAllGroupChange (data) {
+                if (data.length === this.dropDownData.length) {
+                    this.indeterminate = false;
+                    this.checkAll = true;
+                } else if (data.length > 0) {
+                    this.indeterminate = true;
+                    this.checkAll = false;
+                } else {
+                    this.indeterminate = false;
+                    this.checkAll = false;
+                }
+            }
+        }
+    };
+</script>
+
+<style lang="less">
+    .DshSelectAll {
+        &-input {
+            background-color: #FFF;
+            padding: 0 6px;
+            display: flex;
+            align-items: center;
+            border: 1px solid #dcdee2;
+            input::placeholder{
+                color: #666;
+            }
+            &-selected {
+
+            }
+
+            .ivu-input-wrapper {
+                flex: 1;
+                min-width: 20%;
+
+                .ivu-input {
+                    height: 30px;
+                    border: none;
+
+                    &:focus {
+                        box-shadow: none;
+                    }
+                }
+            }
+            .ivu-tag-text{
+                color: #000;
+            }
+            .ivu-tag .ivu-icon-ios-close{
+                color: #000;
+                opacity: 1;
+            }
+        }
+        &-down {
+            &-box {
+                width: 100%;
+                max-height: 300px;
+                padding: 10px 16px;
+                display: flex;
+                flex-direction: column;
+
+                .ivu-checkbox {
+                    margin-right: 10px;
+                }
+                .ivu-checkbox-group {
+                    flex: 1;
+                    overflow: auto;
+                }
+            }
+
+            &-footer {
+                border-top: 1px solid #ccc;
+                margin-top: 10px;
+                padding-top: 10px;
+                text-align: right;
+            }
+        }
+    }
+</style>

package/src/components/controls/controlMap.js

@@ -25,6 +25,7 @@ const componentNameMap = {
 
     switch: "DshSwitch",
     select: "DshSelect",
+    selectAll: "DshSelectAll",
     checkbox: "DshCheckbox",
     region: "DshCascader",
     regions: "DshCascader",
@@ -46,6 +47,7 @@ const componentNameMap = {
     themeColor: "DshThemeColor",
     themeIcon: "DshThemeIcon",
     color: "DshColor",
+    correlation: "DshCorrelation",
 
     back: "DshBack",
     undefined: "DshUndeveloped",
@@ -75,7 +77,8 @@ const pathMap = {
         DshLabels: "./senior/DshLabels.vue",
         DshPackage: "./senior/DshPackage.vue",
         flatTable: "./senior/flatTable.vue",
-        cascaderTable: "./senior/cascaderTable"
+        cascaderTable: "./senior/cascaderTable",
+        DshCorrelation: "./senior/correlation"
     },
     extra: {
         DshThemeColor: "./extra/DshThemeColor.vue",

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

@@ -0,0 +1,133 @@
+<template>
+    <div class="correlation">
+        <dsh-form
+            :formData="formData[propsObj._key]"
+            :formList="formList"
+            :rowStyle="{height: undefined}"
+            @change="change"
+        ></dsh-form>
+    </div>
+</template>
+
+<script>
+    export default {
+        name: "correlation",
+        props: {
+            canEdit: {
+                type: Boolean,
+                default: true
+            },
+            value: {
+                type: Object,
+                default () {
+                    return {};
+                }
+            },
+            propsObj: {
+                type: Object,
+                default () {
+                    return {};
+                }
+            }
+        },
+        data () {
+            return {
+                fieldMap: this.$modFieldMap,
+                dataMap: {}
+            };
+        },
+        computed: {
+            formList () {
+                let _span = 12;
+                if (this.propsObj._fieldCount) {
+                    switch (this.propsObj._fieldCount) {
+                    case 1: _span = 24; break;
+                    case 2: _span = 12; break;
+                    case 3: _span = 8; break;
+                    case 4: _span = 6; break;
+                    case 6: _span = 4; break;
+                    default: _span = 12;
+                    }
+                } else if (this.propsObj._subForm) {
+                    switch (this.propsObj._subForm.length) {
+                    case 1: _span = 24; break;
+                    case 2: _span = 12; break;
+                    case 3: _span = 8; break;
+                    case 4: _span = 6; break;
+                    default: _span = 12;
+                    }
+                }
+
+                let list = this.propsObj._subForm ? this.propsObj._subForm.map(item => {
+                    const data = this.dataMap[item._key] ? [...this.dataMap[item._key]] : [];
+                    const dataKeys = data.map(item => item._key);
+                    let showData = [ ...data ];
+                    if (data.length > 2000) {
+                        showData = showData.slice(0, 2000);
+                    }
+                    if (item._type === "text" && Object.keys(this.dataMap).length) {
+                        // eslint-disable-next-line
+                        this.formData[this.propsObj._key][item._key] = this.formData[this.propsObj._key][item._key].filter(item => dataKeys.includes(item));
+                    }
+
+                    return {
+                        ...item,
+                        _type: item._type === "number" ? "number" : item._type === "date"
+                            ? "daterange" : "selectAll",
+                        inSearch: item._type === "number" ? true : undefined,
+                        _span: _span,
+                        _noLabel: this.propsObj._noLabel,
+                        _data: data,
+                        _showData: showData
+                    };
+                }) : [];
+                return list;
+            },
+            formData () {
+                let obj = { ...this.value[this.propsObj._key] };
+                this.propsObj._fields && this.propsObj._fields.forEach(item => {
+                    if (!obj[item] || !obj[item].length) {
+                        obj[item] = [];
+                    }
+                });
+                this.$set(this.value, this.propsObj._key, obj);
+                // 设置控件默认值为[]
+                if (!this.value[this.propsObj._key]) {
+                    this.$set(this.value, this.propsObj._key, {});
+                }
+                return this.value;
+            }
+        },
+        created () {
+            if (this.propsObj._dataTableKey) {
+                this.getDataMap();
+            }
+        },
+        methods: {
+            getDataMap () {
+                this.$https({
+                    url: {
+                        module: "sheet",
+                        name: "getReferenceFilterDetail"
+                    },
+                    params: {
+                        filterFormData: this.formData[this.propsObj._key],
+                        filterFormEntity: {
+                            selectEntity: this.propsObj._dataTableKey,
+                            selectEntityField: this.propsObj._fields
+                        },
+                        dashboardKey: this.$route.params._key
+                    },
+                    callback: data => {
+                        this.dataMap = data;
+                    }
+                });
+            },
+            change (formItem, value) {
+                this.getDataMap();
+            }
+        }
+    };
+</script>
+
+<style lang="less" scoped></style>

package/src/index.js

@@ -27,6 +27,7 @@ import DshControlInput from "./components/controls/DshControlInput.vue";
 import DshInput from "./components/controls/base/DshInput/DshInput.vue";
 import DshNumber from "./components/controls/base/DshNumber/DshNumber.vue";
 import DshSelect from "./components/controls/base/DshSelect/DshSelect.vue";
+import DshSelectAll from "./components/controls/base/DshSelect/DshSelectAll.vue";
 import DshCheckbox from "./components/controls/base/DshSelect/DshCheckbox.vue";
 import DshCascader from "./components/controls/base/DshCascader/DshCascader.vue";
 
@@ -128,6 +129,7 @@ const map = {
     DshInput,
     DshNumber,
     DshSelect,
+    DshSelectAll,
     DshCheckbox,
     DshCascader,
 
@@ -212,6 +214,7 @@ export {
     DshInput,
     DshNumber,
     DshSelect,
+    DshSelectAll,
     DshCheckbox,
     DshCascader,