bri-components 1.1.0 → 1.1.2

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "bri-components",
-    "version": "1.1.0",
+    "version": "1.1.2",
     "author": "dengshanghui",
     "description": "a component lib for vue project",
     "main": "src/index.js",

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

@@ -1,22 +1,39 @@
 <!-- 动态标签 -->
 <template>
     <div class="BriLabels">
+        <!-- 编辑 -->
         <Dropdown
+            v-if="finalCanEdit"
             class="BriLabels-dropdown"
             trigger="custom"
             placement="bottom-start"
-            transfer
             :visible="listVisible"
             @on-clickoutside="clickInput"
         >
-            <Input
-                class="BriLabels-dropdown-input"
-                :value="showValStr"
-                :suffix="inputIcon"
-                readonly
-                @click.native="clickInput"
+            <div
+                :class="{
+                    'control-edit': true,
+                    'BriLabels-dropdown-show':true,
+                    'BriLabels-dropdown-show-active':listVisible
+                }"
+                @click="clickInput"
             >
-            </Input>
+                <div class="BriLabels-dropdown-show-list">
+                    <Tag
+                        v-for="item in val"
+                        :key="item._key"
+                        closable
+                        @on-close="handleCancel(item)"
+                    >
+                        {{item.name}}
+                    </Tag>
+                </div>
+                <Icon
+                    class="BriLabels-dropdown-show-arrow"
+                    color="#808695"
+                    :type="inputIcon"
+                />
+            </div>
             <template #list>
                 <DropdownMenu>
                     <DropdownItem
@@ -26,12 +43,97 @@
                             'BriLabels-dropdown-item':true,
                             'BriLabels-dropdown-item-active':!!val.find(i=>i._key == item._key)
                         }"
+                        @click.native="clickItem(item)"
                     >
-                        {{item.name}}
+                        <div
+                            class="BriLabels-dropdown-item-show"
+                            v-if="!item.isEdit"
+                        >
+                            {{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
+                            class="BriLabels-dropdown-item-edit"
+                            v-else
+                        >
+                            <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>
+                        </div>
                     </DropdownItem>
+                    <div class="BriLabels-dropdown-btnWrap">
+                        <bri-button
+                            class="BriLabels-dropdown-add"
+                            :propsObj="{
+                                btnType: 'default',
+                                icon:'md-add'
+                            }"
+                            @click="addLabel"
+                        >
+                            添加选项
+                        </bri-button>
+                    </div>
                 </DropdownMenu>
             </template>
         </Dropdown>
+        <!-- 查看 -->
+        <div
+            v-else
+            class="BriLabels-view"
+        >
+            <template v-if="val.length">
+                <Ctooltip
+                    placement="top"
+                    :transfer="true"
+                    maxWidth="200"
+                    :content="showValStr"
+                >
+                    <div class="dsh-ellipsis">
+                        <div
+                            v-for="item in val"
+                            :key="item._key"
+                            size="medium"
+                            class="BriLabels-view-item"
+                        >
+                            {{ item.name }}
+                        </div>
+                    </div>
+                </Ctooltip>
+            </template>
+
+            <div
+                v-else
+                class="BriLabels-view-nodata"
+            >
+                <template v-if="isUnit">
+                    -
+                </template>
+                <template v-else>
+                    暂无内容
+                </template>
+            </div>
+        </div>
     </div>
 </template>
 
@@ -45,7 +147,8 @@
             return {
                 listData: [],
                 listVisible: false,
-                inputIcon: "ios-arrow-down"
+                inputIcon: "ios-arrow-down",
+                renderList: false
             };
         },
         computed: {
@@ -72,7 +175,6 @@
             }
         },
         created () {
-            this.init();
         },
         methods: {
             init () {
@@ -98,17 +200,57 @@
                         }
                     },
                     callback: data => {
-                        this.listData = data.list;
+                        this.listData = data.list.map(item => {
+                            return {
+                                ...item,
+                                isEdit: false
+                            };
+                        });
                     }
                 });
             },
             clickInput () {
+                if (!this.finalCanEdit) return;
+                if (!this.renderList) {
+                    this.init();
+                }
+                this.renderList = true;
                 this.listVisible = !this.listVisible;
                 if (this.listVisible) {
                     this.inputIcon = "ios-arrow-up";
                 } else {
                     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);
+                }
+            },
+            clickEdit (item) {
+                item.isEdit = true;
+                this.$forceUpdate();
+            },
+            editItem (e) {
+                e.stopPropagation();
+            },
+            confirmEdit (item) {
+                if (item.name == "") return;
+                item.isEdit = false;
+                this.$forceUpdate();
+            },
+            handleCancel (item) {
+                this.val = this.val.filter(i => i._key != item._key);
+            },
+            addLabel () {
+                this.listData.push({
+                    _key: this.$randomB36("Labels"),
+                    isEdit: true,
+                    name: "",
+                    labelType: this.selfPropsObj._labelType
+                });
             }
         },
         watch: {

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

@@ -36,11 +36,7 @@
                 <!-- 弹框模式 -->
                 <template v-if="selfPropsObj._showMode === 'custom'">
                     <div
-                        :class="{
-                            'DshCascader-single': true,
-                            'dsh-control-readonly': $isReadonly(canEdit, propsObj),
-                            'dsh-control-disabled': $isDisabled(canEdit, propsObj)
-                        }"
+                        :class="commonClass"
                         @click="openModal"
                     >
                         <div

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

@@ -1,10 +1,10 @@
 <template>
     <div class="DshCoordinates">
         <Ctooltip
+            :content="curValName"
             placement="top"
             :transfer="true"
             maxWidth="200"
-            :content="currentVal"
         >
             <!-- 编辑模式 -->
             <div
@@ -37,107 +37,115 @@
             </div>
 
             <!-- 查看模式 -->
-            <span v-else :class="commonClass">
+            <span
+                v-else
+                :class="{
+                        ...commonClass,
+                        'DshCoordinates-show': !isUnit
+                        }"
+            >
                 {{ showText }}
             </span>
         </Ctooltip>
 
         <!-- 模态框 -->
-        <Modal
-            class="DshCoordinates-modal clearFlex-modal"
-            v-model="showModal"
-            title="选择位置"
-            :footer-hide="true"
-            :styles="modalStyles"
-            @on-cancel="clickCancel"
-        >
-            <div
-                slot="header"
-                class="DshCoordinates-modal-header"
+        <template v-if="canEdit">
+            <Modal
+                class="DshCoordinates-modal clearFlex-modal"
+                v-model="showModal"
+                title="选择位置"
+                :footer-hide="true"
+                :styles="modalStyles"
+                @on-cancel="clickCancel"
             >
-                <Row
-                    v-if="finalCanEdit"
-                    type="flex"
-                    justify="center"
-                    align="bottom"
+                <div
+                    slot="header"
+                    class="DshCoordinates-modal-header"
                 >
-                    <Col span="8">
-                    <div>
-                        <RadioGroup v-model="formData.kind">
-                            <Radio label="keyword">按关键字搜索</Radio>
-                            <Radio label="coordinate">按坐标搜索</Radio>
-                        </RadioGroup>
-                    </div>
-                    <Row class="dsh-margin-top5">
-                        <Col span="16">
-                        <Input
-                            v-model="formData.searchText"
-                            placeholder="请输入..."
-                            :clearable="true"
-                            @on-enter="clickSearch"
-                        />
-                        <span class="DshCoordinates-message">{{ searchMessage }}</span>
+                    <Row
+                        v-if="finalCanEdit"
+                        type="flex"
+                        justify="center"
+                        align="bottom"
+                    >
+                        <Col span="8">
+                        <div>
+                            <RadioGroup v-model="formData.kind">
+                                <Radio label="keyword">按关键字搜索</Radio>
+                                <Radio label="coordinate">按坐标搜索</Radio>
+                            </RadioGroup>
+                        </div>
+                        <Row class="dsh-margin-top5">
+                            <Col span="16">
+                            <Input
+                                v-model="formData.searchText"
+                                placeholder="请输入..."
+                                :clearable="true"
+                                @on-enter="clickSearch"
+                            />
+                            <span class="DshCoordinates-message">{{ searchMessage }}</span>
+                            </Col>
+                            <Col span="8">&nbsp;
+                            <Button
+                                type="primary"
+                                @click="clickSearch"
+                            >搜索</Button>
+                            </Col>
+                        </Row>
                         </Col>
-                        <Col span="8">&nbsp;
-                        <Button
-                            type="primary"
-                            @click="clickSearch"
-                        >搜索</Button>
+
+                        <Col span="8">
+                        <div class="DshCoordinates-modal-header-text">坐标获取结果</div>
+                        <Row class="dsh-margin-top5">
+                            <Col span="16">
+                            <Input
+                                :value="curVal.name"
+                                :readonly="true"
+                                :clearable="true"
+                                @on-clear="clickClear"
+                                @click.native="clickMapFitView"
+                            />
+                            </Col>
+                            <Col span="8">&nbsp;
+                            <Button
+                                type="primary"
+                                @click="clickConfirm"
+                            >确认</Button>
+                            </Col>
+                        </Row>
                         </Col>
                     </Row>
-                    </Col>
 
-                    <Col span="8">
-                    <div class="DshCoordinates-modal-header-text">坐标获取结果</div>
-                    <Row class="dsh-margin-top5">
-                        <Col span="16">
+                    <Row v-else>
+                        <Col
+                            span="6"
+                            class="textRight dsh-padding-top10"
+                        >当前位置：</Col>
+                        <Col span="12">
                         <Input
                             :value="curVal.name"
                             :readonly="true"
-                            :clearable="true"
-                            @on-clear="clickClear"
                             @click.native="clickMapFitView"
                         />
                         </Col>
-                        <Col span="8">&nbsp;
-                        <Button
-                            type="primary"
-                            @click="clickConfirm"
-                        >确认</Button>
+                        <Col span="6">
                         </Col>
                     </Row>
-                    </Col>
-                </Row>
-
-                <Row v-else>
-                    <Col
-                        span="6"
-                        class="textRight dsh-padding-top10"
-                    >当前位置：</Col>
-                    <Col span="12">
-                    <Input
-                        :value="curVal.name"
-                        :readonly="true"
-                        @click.native="clickMapFitView"
-                    />
-                    </Col>
-                    <Col span="6">
-                    </Col>
-                </Row>
-            </div>
+                </div>
 
-            <transition>
+                <transition>
+                    <div
+                        v-if="showModal"
+                        id="mapContain"
+                        class="DshCoordinates-map"
+                    ></div>
+                </transition>
                 <div
-                    v-if="showModal"
-                    id="mapContain"
-                    class="DshCoordinates-map"
+                    ref="divCoordinate"
+                    style="display: none; position:absolute;background:#fff;padding: 5px 10px"
                 ></div>
-            </transition>
-            <div
-                ref="divCoordinate"
-                style="display: none; position:absolute;background:#fff;padding: 5px 10px"
-            ></div>
-        </Modal>
+            </Modal>
+        </template>
     </div>
 </template>
 
@@ -173,7 +181,7 @@
                     this.value[this.controlKey] = val;
                 }
             },
-            currentVal () {
+            curValName () {
                 return this.curVal && this.curVal.name;
             },
             curLnglat: {

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

@@ -1,20 +1,35 @@
 <template>
     <div class="DshEditor">
         <!-- 有值、无值 可编辑 -->
-        <div v-if="isUnit" class="DshEditor-unit">
-            <span class="DshEditor-unit-text">
-                {{ unitVal }}
+        <template v-if="isUnit">
+            <div
+                v-if="value[controlKey]"
+                class="DshEditor-unit"
+            >
+                <span class="DshEditor-unit-text">
+                    富文本
+                </span>
+            </div>
+            <span
+                v-else
+                class="control-notext"
+            >
+                -
             </span>
-        </div>
+        </template>
 
         <template v-else-if="finalCanEdit">
-            <div class="DshEditor-show DshEditor-edit"
+            <div
+                class="DshEditor-show DshEditor-edit"
                 :class="value[controlKey] ? '': 'DshEditor-edit-placeholder'"
                 v-show="showType === 'show'"
                 v-html="editVal"
                 @click="handleEdit"
             ></div>
-            <div v-show="showType=='edit'" class="DshEditor-wrap">
+            <div
+                v-show="showType=='edit'"
+                class="DshEditor-wrap"
+            >
                 <div
                     ref="toolbar"
                     class="toolbar"
@@ -32,7 +47,8 @@
             </div>
         </template>
 
-        <div v-else
+        <div
+            v-else
             class="DshEditor-show"
             :class="$isDisabled(canEdit, selfPropsObj) ? 'DshEditor-show-disabled' : value[controlKey] ? '' : 'DshEditor-show-nodata'"
             v-show="showType === 'show'"

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

@@ -32,6 +32,13 @@
             slot="append"
         >{{ selfPropsObj._append }}</span>
         </Input>
+        <!-- textarea特殊处理 -->
+        <p
+            v-else-if="subType === 'textarea' && showVal"
+            :class="['control-show-text', 'DshInput-textarea-show']"
+            v-text="showVal"
+        >
+        </p>
 
         <!-- 查看模式 -->
         <control-show

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

@@ -5,18 +5,18 @@
             maxWidth="200"
             :content="showVal"
         >
-            <span
+            <div
                 v-if="$isFormItemHasData(showVal)"
                 class="dsh-ellipsis controlShow-val"
             >
                 {{ showVal }}
-            </span>
-            <span
+            </div>
+            <div
                 v-else
                 class="controlShow-nodata dsh-ellipsis"
             >
                 {{noDataText}}
-            </span>
+            </div>
         </Ctooltip>
     </div>
 </template>
@@ -41,7 +41,7 @@
         },
         computed: {
             noDataText () {
-                return this.isUnit ? "-" : "暂无数据";
+                return this.isUnit ? "-" : "暂无内容";
             }
         },
         created () {

package/src/components/controls/controlMap.js

@@ -33,7 +33,7 @@ const componentNameMap = {
     coordinates: "DshCoordinates",
     editor: "DshEditor",
     tag: "DshDivider",
-    labels: "DshLabels",
+    labels: "BriLabels",
     package: "DshPackage",
     flatTable: "flatTable",
     cascaderTable: "cascaderTable",
@@ -62,7 +62,7 @@ const pathMap = {
         DshCoordinates: "./base/DshCoordinates.vue",
         DshEditor: "./base/DshEditor.vue",
         DshDivider: "./base/DshDivider.vue",
-        DshLabels: "./base/DshLabels.vue",
+        BriLabels: "./base/BriLabels.vue",
         DshPackage: "./base/DshPackage.vue",
         flatTable: "./senior/flatTable.vue",
         cascaderTable: "./senior/cascaderTable",