bri-components 1.2.0 → 1.2.1

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

@@ -2,131 +2,141 @@
 <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
+                            }"
+                            @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 +151,9 @@
 
     export default {
         name: "BriLabels",
-        mixins: [controlMixin],
+        mixins: [
+            controlMixin
+        ],
         data () {
             return {
                 listData: [],
@@ -157,31 +169,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 +200,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 +214,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 +247,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>