bri-components 1.2.0 → 1.2.2

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

@@ -76,7 +76,7 @@
 
         <bri-tooltip
             v-else
-            :content="valStr"
+            :content="showVal"
             maxWidth="200"
             placement="top"
             :transfer="true"
@@ -85,7 +85,7 @@
                 v-if="curSelectItem"
                 class="DshSelect-value-wrapper"
                 :style="{
-                    justifyContent: flatShowAlign
+                    justifyContent: showAlign
                 }"
             >
                 <span
@@ -98,7 +98,7 @@
             </div>
             <div
                 v-else
-                class="control-notext dsh-ellipsis"
+                class="bri-control-nodata dsh-ellipsis"
             >
                 {{ emptyShowVal }}
             </div>
@@ -169,20 +169,10 @@
             curSelectItem () {
                 return this.listData.find(item => item._key === this.value[this.controlKey]);
             },
-            valStr () {
+            showVal () {
                 return this.curSelectItem
                     ? this.curSelectItem.name || this.curSelectItem._name
                     : "";
-            },
-            showVal () {
-                return this.valStr;
-            },
-            flatShowAlign () {
-                return !this.propsObj._align || this.propsObj._align === "left" || !this.isUnitShow
-                    ? "flex-start"
-                    : this.propsObj._align === "right"
-                        ? "flex-end"
-                        : "center";
             }
         },
         created () {

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

@@ -7,6 +7,7 @@
                 v-model="curVal"
                 :disabled="!finalCanEdit"
                 :size="propsObj._size"
+                false-color="#CCCCCC"
                 @on-change="change"
             >
                 <span slot="open">
@@ -19,26 +20,18 @@
         </template>
 
         <!-- 查看 -->
-        <template v-else>
-            <bri-tooltip
-                :content="showText"
-                placement="top"
-                :transfer="true"
-                maxWidth="200"
-            >
-                <div class="DshSwitch-show">
-                    <span
-                        class="DshSwitch-show-name"
-                        :style="{
-                            background: curVal ? '#ECF3FD' : '#FEF6EB',
-                            color: curVal ? '#3D84EE' : '#F4A135'
-                        }"
-                    >
-                        {{ showText }}
-                    </span>
-                </div>
-            </bri-tooltip>
-        </template>
+        <span v-else
+            :class="{
+                'DshSwitch-show': true,
+                ...commonClass
+            }"
+            :style="{
+                background: curVal ? '#d3f3dcff' : '#FDEDED',
+                color: curVal ? '#37C45E' : '#E83636'
+            }"
+        >
+            {{ showText }}
+        </span>
     </div>
 </template>
 

package/src/components/controls/controlMap.js

@@ -34,6 +34,8 @@ const componentNameMap = {
     editor: "DshEditor",
     tag: "DshDivider",
 
+    users: "selectUsers",
+    departments: "selectDepartments",
     labels: "BriLabels",
     package: "DshPackage",
     flatTable: "flatTable",
@@ -63,6 +65,8 @@ const pathMap = {
         DshEditor: "./base/DshEditor.vue",
         DshDivider: "./base/DshDivider.vue",
 
+        selectUsers: "./senior/selectUsers/selectUsers.vue",
+        selectDepartments: "./senior/selectDepartments.vue",
         BriLabels: "./senior/BriLabels.vue",
         DshPackage: "./senior/DshPackage.vue",
         flatTable: "./senior/flatTable.vue",

package/src/components/controls/controlMixin.js

@@ -1,5 +1,4 @@
 export default {
-    components: {},
     props: {
         canEdit: {
             type: Boolean,
@@ -38,9 +37,6 @@ export default {
         return {};
     },
     computed: {
-        controlKey () {
-            return this.propsObj._key;
-        },
         // 值为不是[]类型用的
         curVal: {
             get () {
@@ -53,7 +49,7 @@ export default {
         // 值为[]类型用的
         curValList: {
             get () {
-                return this.value[this.controlKey] || [];
+                return (this.value[this.controlKey] || []).filter(item => !!item);
             },
             set (val) {
                 this.value[this.controlKey] = val;
@@ -71,12 +67,18 @@ export default {
             return this.$isEmptyData(this.curVal) ? this.emptyShowVal : this.curVal;
         },
 
-        isUnitShow () {
-            return !this.canEdit && this.inTable;
+        controlKey () {
+            return this.propsObj._key;
+        },
+        controlType () {
+            return this.propsObj._type;
         },
         finalCanEdit () {
             return this.canEdit && (this.propsObj.canEdit == undefined ? true : this.propsObj.canEdit);
         },
+        isUnitShow () {
+            return !this.canEdit && this.inTable;
+        },
         commonDealPropsObj () {
             const selectControlTypes = ["date", "switch", "select", "checkbox", "file", "region", "regions", "cascader", "cascaders", "coordinates", "users", "departments"];
             return {
@@ -89,15 +91,24 @@ export default {
         },
         commonClass () {
             return {
-                "control-edit": this.canEdit && this.finalCanEdit,
-                "control-disabled": this.canEdit && !this.finalCanEdit,
-                "control-unit": !this.canEdit && this.isUnitShow,
-                "control-show": !this.canEdit && !this.isUnitShow,
+                "bri-control-edit": this.canEdit && this.finalCanEdit,
+                "bri-control-disabled": this.canEdit && !this.finalCanEdit,
+                "bri-control-unit": !this.canEdit && this.isUnitShow,
+                "bri-control-show": !this.canEdit && !this.isUnitShow,
 
                 "dsh-ellipsis": true,
-                "control-notext": !this.isUnitShow && this.$isEmptyData(this.curVal)
+                "bri-control-nodata": this.$isEmptyData(this.curVal)
             };
         },
+        showAlign () {
+            return !this.isUnitShow
+                ? "flex-start"
+                : this.propsObj._align === "right"
+                    ? "flex-end"
+                    : this.propsObj._align === "center"
+                        ? "center"
+                        : "flex-start";
+        },
 
         // 部分控件或部分条件下 才使用的属性
         inTable () {

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

@@ -2,131 +2,142 @@
 <template>
     <div class="BriLabels">
         <!-- 编辑页 -->
-        <Dropdown
-            v-if="canEdit"
-            class="BriLabels-dropdown"
-            trigger="custom"
-            placement="bottom-start"
-            :visible="listVisible"
-            transfer
-            @on-clickoutside="clickInput"
-        >
-            <!-- 可编辑 -->
-            <div
-                :class="{
-                    'BriLabels-box': true,
-                    ...commonClass
-                }"
-                @click="clickInput"
+        <template v-if="canEdit">
+            <Dropdown
+                class="BriLabels-dropdown"
+                trigger="custom"
+                placement="bottom-start"
+                :visible="listVisible"
+                transfer
+                @on-clickoutside="clickInput"
             >
-                <template v-if="val.length">
-                    <dsh-tags
-                        v-if="val"
-                        class="BriLabels-text"
-                        :list="val"
-                        :propsObj="{
-                            closable: finalCanEdit,
-                            disabled: !finalCanEdit
-                        }"
-                        @delete="handleCancel"
-                    >
-                        <span slot-scope="{ tagItem }"> {{ tagItem.name }}</span>
-                    </dsh-tags>
+                <!-- 可编辑 -->
+                <div
+                    :class="{
+                        ...commonClass,
+                        'BriLabels-edit': true
+                    }"
+                    @click="clickInput"
+                >
+                    <template v-if="!$isEmptyData(val)">
+                        <dsh-tags
+                            class="overflow"
+                            :list="val"
+                            :propsObj="{
+                                disabled: !finalCanEdit
+                            }"
+                            :autoEllipsis="true"
+                            @delete="clickDeleteItem"
+                        >
+                            <span slot-scope="{ tagItem }">
+                                {{ tagItem.name }}
+                            </span>
+                        </dsh-tags>
 
-                    <Icon
-                        class="BriLabels-icon"
-                        :type="inputIcon"
-                    />
-                </template>
+                        <Icon
+                            class="icon-default"
+                            :type="inputIcon"
+                        />
+                    </template>
 
-                <template v-else>{{ commonDealPropsObj._placeholder }}</template>
-            </div>
+                    <template v-else>
+                        {{ emptyShowVal }}
+                    </template>
+                </div>
 
-            <template #list>
-                <DropdownMenu>
-                    <DropdownItem
-                        v-for="item in listData"
-                        :key="item._key"
-                        :class="{
-                            'BriLabels-dropdown-item':true,
-                            'BriLabels-dropdown-item-active':!!val.find(i=>i._key == item._key)
-                        }"
-                        @click.native="clickItem(item)"
-                    >
-                        <div
-                            class="BriLabels-dropdown-item-show"
-                            v-if="!item.isEdit"
+                <template #list>
+                    <DropdownMenu class="BriLabels-dropdown-menu">
+                        <DropdownItem
+                            v-for="item in listData"
+                            :key="item._key"
+                            :class="{
+                                'item': true,
+                                'item-active': !!val.find(i=>i._key == item._key)
+                            }"
+                            @click.native="clickItem(item)"
                         >
-                            {{item.name}}
-                            <span class="BriLabels-dropdown-item-show-icons">
-                                <Icon
-                                    v-if="!item.coreLabel"
-                                    class="BriLabels-dropdown-item-show-icons-edit"
-                                    custom="bri bri-bianji"
-                                    @click.stop="clickEdit(item)"
-                                />
-                                <!-- 暂时不需要删除 -->
-                                <!-- <Icon
-                                    class="BriLabels-dropdown-item-show-icons-del"
-                                    custom="bri bri-shanchu"
-                                /> -->
-                            </span>
-                        </div>
+
+                            <div
+                                v-if="item.isEdit"
+                                class="item-edit"
+                            >
+                                <Input
+                                    v-model="item.name"
+                                    @click.native="clickEditInput($event)"
+                                >
+                                <template #suffix>
+                                    <Icon
+                                        color="#3DB8C5"
+                                        custom="bri bri-duigou"
+                                        @click.native.stop="clickConfirm(item)"
+                                    />
+                                </template>
+                                </Input>
+                            </div>
+
+                            <div
+                                v-else
+                                class="item-show"
+                            >
+                                {{ item.name }}
+                                <span class="item-show-icons">
+                                    <Icon
+                                        v-if="!item.coreLabel"
+                                        class="item-show-icons-edit"
+                                        custom="bri bri-bianji"
+                                        @click.stop="clickEditIcon(item)"
+                                    />
+                                    <!-- 暂时不需要删除 -->
+                                    <!-- <Icon
+                                        class="item-show-icons-del"
+                                        custom="bri bri-shanchu"
+                                    /> -->
+                                </span>
+                            </div>
+                        </DropdownItem>
+
                         <div
-                            class="BriLabels-dropdown-item-edit"
-                            v-else
+                            v-if="!selfPropsObj._onlySelect"
+                            class="btns"
                         >
-                            <Input
-                                v-model="item.name"
-                                @click.native="editItem($event)"
-                            >
-                            <template #suffix>
-                                <Icon
-                                    color="#3DB8C5"
-                                    custom="bri bri-duigou"
-                                    @click.native.stop="confirmEdit(item)"
-                                />
-                            </template>
-                            </Input>
+                            <bri-button
+                                class="btns-add"
+                                :propsObj="{
+                                    btnType: 'default',
+                                    icon:'md-add'
+                                }"
+                                @click.native.stop="clickAddItem"
+                            >添加选项</bri-button>
                         </div>
-                    </DropdownItem>
-                    <div
-                        class="BriLabels-dropdown-btnWrap"
-                        v-if="!selfPropsObj._onlySelect"
-                    >
-                        <bri-button
-                            class="BriLabels-dropdown-add"
-                            :propsObj="{
-                                btnType: 'default',
-                                icon:'md-add'
-                            }"
-                            @click.native.stop="addLabel"
-                        >
-                            添加选项
-                        </bri-button>
-                    </div>
-                </DropdownMenu>
-            </template>
-        </Dropdown>
+                    </DropdownMenu>
+                </template>
+            </Dropdown>
+        </template>
 
-        <!-- 查看模式 -->
+        <!-- 查看 -->
         <template v-else>
             <bri-tooltip
                 :content="showValStr"
                 maxWidth="200"
                 :transfer="true"
             >
-                <div :class="commonClass">
+                <div :class="{
+                    ...commonClass,
+                    'BriLabels-show': true
+                }">
                     <dsh-tags
                         v-if="!$isEmptyData(val)"
-                        class="BriLabels-text"
+                        class="text"
                         :list="val"
                         :propsObj="{
                             closable: false
                         }"
                     >
-                        <span slot-scope="{ tagItem }"> {{ tagItem.name }}</span>
+                        <span slot-scope="{ tagItem }">
+                            {{ tagItem.name }}
+                        </span>
                     </dsh-tags>
+
                     <template v-else>
                         {{ emptyShowVal }}
                     </template>
@@ -141,7 +152,9 @@
 
     export default {
         name: "BriLabels",
-        mixins: [controlMixin],
+        mixins: [
+            controlMixin
+        ],
         data () {
             return {
                 listData: [],
@@ -157,31 +170,28 @@
                     ...this.commonDealPropsObj
                 };
             },
-            modKey () {
-                return this.selfPropsObj.modKey;
-            },
             val: {
                 get () {
-                    return this.value[this.propsObj._key] || [];
+                    return this.value[this.controlKey] || [];
                 },
                 set (val) {
-                    this.value[this.propsObj._key] = val;
+                    this.value[this.controlKey] = val;
                 }
             },
+
+            isCore () {
+                return this.selfPropsObj.isCore;
+            },
             showValStr () {
                 let valArr = this.val && this.val.map(item => item.name);
                 return valArr && valArr.join("、");
-            },
-            isCore () {
-                return this.propsObj.isCore;
             }
         },
-        created () {
-        },
+        created () {},
         methods: {
             init () {
                 if (this.isCore) {
-                    this.listData = this.propsObj._originLabels.map(item => {
+                    this.listData = this.selfPropsObj._originLabels.map(item => {
                         return {
                             ...item,
                             isEdit: false
@@ -191,34 +201,7 @@
                     this.getListData();
                 }
             },
-            getListData () {
-                this.$https({
-                    url: {
-                        module: "sheet",
-                        name: "memberAll"
-                    },
-                    params: {
-                        search: {
-                            entityKey: this.entityKey, // 当前工作表关联的数据表Key
-                            fieldKey: this.selfPropsObj._key === "_default" ? this.value._key : (this.selfPropsObj.__realKey__ || this.selfPropsObj._key), // 当前字段Key
-                            labelType: this.selfPropsObj._labelType,
-                            modKey: this.modKey
-                        },
-                        pagination: {
-                            page: 1,
-                            pagesize: 999
-                        }
-                    },
-                    callback: data => {
-                        this.listData = data.list.map(item => {
-                            return {
-                                ...item,
-                                isEdit: false
-                            };
-                        });
-                    }
-                });
-            },
+
             clickInput () {
                 if (!this.finalCanEdit) return;
                 if (!this.renderList) {
@@ -232,31 +215,32 @@
                     this.inputIcon = "ios-arrow-down";
                 }
             },
-            clickItem (item) {
-                if (this.val.findIndex(i => i._key == item._key) > -1) {
-                    this.val = this.val.filter(i => i._key != item._key);
-                } else {
-                    this.val.push(item);
-                }
-                this.change();
+            clickEditInput (e) {
+                e.stopPropagation();
             },
-            clickEdit (item) {
+            clickEditIcon (item) {
                 item.isEdit = true;
                 this.$forceUpdate();
             },
-            editItem (e) {
-                e.stopPropagation();
-            },
-            confirmEdit (item) {
+            clickConfirm (item) {
                 if (item.name == "") return;
                 item.isEdit = false;
                 this.$forceUpdate();
                 this.change();
             },
-            handleCancel (item) {
+
+            clickItem (item) {
+                if (this.val.findIndex(i => i._key == item._key) > -1) {
+                    this.val = this.val.filter(i => i._key != item._key);
+                } else {
+                    this.val.push(item);
+                }
+                this.change();
+            },
+            clickDeleteItem (item) {
                 this.change();
             },
-            addLabel () {
+            clickAddItem () {
                 this.listData.push({
                     _key: this.$randomB36("Labels"),
                     isEdit: true,
@@ -264,9 +248,37 @@
                     labelType: this.selfPropsObj._labelType
                 });
                 this.change();
+            },
+
+            // 接口 -获取列表数据
+            getListData () {
+                this.$https({
+                    url: {
+                        module: "sheet",
+                        name: "memberAll"
+                    },
+                    params: {
+                        search: {
+                            entityKey: this.entityKey, // 当前工作表关联的数据表Key
+                            fieldKey: this.selfPropsObj._key === "_default" ? this.value._key : (this.selfPropsObj.__realKey__ || this.selfPropsObj._key), // 当前字段Key
+                            labelType: this.selfPropsObj._labelType,
+                            modKey: this.modKey
+                        },
+                        pagination: {
+                            page: 1,
+                            pagesize: 999
+                        }
+                    },
+                    callback: data => {
+                        this.listData = data.list.map(item => {
+                            return {
+                                ...item,
+                                isEdit: false
+                            };
+                        });
+                    }
+                });
             }
-        },
-        watch: {
         }
     };
 </script>