bri-components 1.0.5 → 1.1.1

package/lib/styles/bundle.css

@@ -1,5 +1,3 @@
-@import "view-design/dist/styles/iview.css";
-
 @import "codemirror/lib/codemirror.css";
 @import "codemirror/theme/cobalt.css";
 @import "codemirror/theme/base16-light.css";

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "bri-components",
-    "version": "1.0.5",
+    "version": "1.1.1",
     "author": "dengshanghui",
     "description": "a component lib for vue project",
     "main": "src/index.js",
@@ -39,6 +39,7 @@
         "viewerjs": "^1.10.2",
         "vue-codemirror": "^4.0.6",
         "vue-cropperjs": "^4.1.0",
+        "vue-easytable": "^2.21.9",
         "vuedraggable": "^2.24.1",
         "wangeditor": "^4.7.5"
     },

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

@@ -0,0 +1,223 @@
+<!-- 动态标签 -->
+<template>
+    <div class="BriLabels">
+        <!-- 编辑 -->
+        <Dropdown
+            v-if="finalCanEdit"
+            class="BriLabels-dropdown"
+            trigger="custom"
+            placement="bottom-start"
+            :visible="listVisible"
+            @on-clickoutside="clickInput"
+        >
+            <div
+                :class="{
+                    'BriLabels-dropdown-show':true,
+                    'BriLabels-dropdown-show-active':listVisible
+                }"
+                @click="clickInput"
+            >
+                <div>
+                    <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
+                        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"
+                        >
+                            {{item.name}}
+                            <span class="BriLabels-dropdown-item-show-icons">
+                                <Icon
+                                    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>
+                    sds
+                </DropdownMenu>
+            </template>
+        </Dropdown>
+        <!-- 查看 -->
+        <div
+            v-else
+            class="BriLabels-view"
+        >
+            <template v-if="val.length">
+                <Tag
+                    v-for="tagItem in val"
+                    :key="tagItem._key"
+                    size="medium"
+                    class="BriLabels-view-tag"
+                >
+                    {{ tagItem.name }}
+                </Tag>
+            </template>
+
+            <div
+                v-else
+                class="BriLabels-view-nodata"
+            >
+                <template v-if="isUnit">
+                    -
+                </template>
+                <template v-else>
+                    暂无内容
+                </template>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+    import controlMixin from "../controlMixin.js";
+
+    export default {
+        name: "BriLabels",
+        mixins: [controlMixin],
+        data () {
+            return {
+                listData: [],
+                listVisible: false,
+                inputIcon: "ios-arrow-down"
+            };
+        },
+        computed: {
+            selfPropsObj () {
+                return {
+                    ...this.propsObj,
+                    ...this.commonDealPropsObj
+                };
+            },
+            modKey () {
+                return this.propsObj.modKey;
+            },
+            val: {
+                get () {
+                    return this.value[this.propsObj._key] || [];
+                },
+                set (val) {
+                    this.value[this.propsObj._key] = val;
+                }
+            },
+            showValStr () {
+                let valArr = this.val && this.val.map(item => item.name);
+                return valArr && valArr.join("、");
+            }
+        },
+        created () {
+            this.init();
+        },
+        methods: {
+            init () {
+                this.getListData();
+            },
+            getListData () {
+                this.$https({
+                    url: {
+                        module: "sheet",
+                        name: "memberAll"
+                    },
+                    params: {
+                        search: {
+                            entityKey: this.entityKey, // 当前工作表关联的数据表Key
+                            modKey: this.modKey,
+                            name: this.curVal,
+                            fieldKey: this.selfPropsObj._key === "_default" ? this.value._key : (this.selfPropsObj.__realKey__ || this.selfPropsObj._key), // 当前字段Key
+                            labelType: this.selfPropsObj._labelType
+                        },
+                        pagination: {
+                            page: 1,
+                            pagesize: 999
+                        }
+                    },
+                    callback: data => {
+                        this.listData = data.list.map(item => {
+                            return {
+                                ...item,
+                                isEdit: false
+                            };
+                        });
+                    }
+                });
+            },
+            clickInput () {
+                if (!this.finalCanEdit) return;
+                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) {
+                item.isEdit = false;
+                this.$forceUpdate();
+            },
+            handleCancel (item) {
+                this.val = this.val.filter(i => i._key != item._key);
+            }
+        },
+        watch: {
+        }
+    };
+</script>

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

@@ -1,7 +1,7 @@
 <template>
-    <div :class="`DshCascader ycFormItem control-${mode}`">
-        <!-- 编辑模式 -->
-        <template v-if="finalCanEdit">
+    <div :class="`DshCascader`">
+        <!-- 编辑和disabled模式 -->
+        <template v-if="finalCanEdit  || $isDisabled(canEdit, selfPropsObj)">
             <!-- 多选 多选模式的filterable必须是false，不然出bug -->
             <template v-if="useMultiple === true">
                 <Cascader
@@ -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
@@ -86,17 +82,16 @@
                     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"
+                    :disabled="$isDisabled(canEdit, selfPropsObj)"
                     :change-on-select="selfPropsObj._changeOnSelect"
                     :clearable="selfPropsObj._clearable"
                     :size="selfPropsObj._size"
-                    :filterable="selfPropsObj._filterable"
+                    :filterable="selfPropsObj._filterable && !$isDisabled(canEdit, selfPropsObj)"
                     :transfer="selfPropsObj._transfer"
                     :transfer-class-name="selfPropsObj._transferClassName"
                     :load-data="loadData"
@@ -107,29 +102,13 @@
             </template>
         </template>
 
-        <!-- 查看 和 编辑下无编辑权限 -->
-        <Ctooltip
+        <!-- 查看模式 -->
+        <control-show
             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>
+            :showVal="showVal"
+            :propsObj="selfPropsObj"
+            :isUnit="isUnit"
+        ></control-show>
     </div>
 </template>
 
@@ -303,16 +282,18 @@
 
             /* ----------- 单选使用 ---------- */
             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);
+                if (this.finalCanEdit) {
+                    if (
+                        ["cascader"].includes(this.selfPropsObj._type) &&
+                        this.selfPropsObj._filterable === true &&
+                        this.renderDataFlag === true &&
+                        this.clickInputFlag === true
+                    ) {
+                        this.clickInputFlag = false; // 这个处理其实觉大概率没必要，有没有不受影响
+                        setTimeout(() => {
+                            this.renderDataFlag = false;
+                        }, 0);
+                    }
                 }
             },
             // 展开和关闭弹窗时触发

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

@@ -1,5 +1,5 @@
 <template>
-    <div class="DshCascaderMultiple ycFormItem">
+    <div class="DshCascaderMultiple">
         <Cascader
             class="DshCascaderMultiple-control"
             v-model="cascaderVal"

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

@@ -1,6 +1,6 @@
 <template>
     <div
-        :class="`DshCheckbox ycFormItem control-${mode}`"
+        class="DshCheckbox"
         ref="dshCheckboxRef"
     >
         <template v-if="canEdit">
@@ -87,11 +87,13 @@
             :transfer="true"
             maxWidth="200"
             :content="showVal"
-            :class="commonClass"
         >
             <div
                 v-if="showVal"
                 class="DshCheckbox-value-wrapper"
+                :style="{
+                    justifyContent: flatShowAlign
+                }"
             >
                 <span
                     v-for="col in colData"
@@ -105,9 +107,14 @@
             </div>
             <div
                 v-else
-                class="hb-nodata-text dsh-ellipsis"
+                class="control-nodata-text dsh-ellipsis"
             >
-                <span>暂无内容</span>
+                <template v-if="isUnit">
+                    -
+                </template>
+                <template v-else>
+                    暂无内容
+                </template>
             </div>
         </Ctooltip>
 
@@ -169,6 +176,9 @@
             // 选项数据
             colData () {
                 return this.listData.filter(item => (this.value[this.controlKey] || []).includes(item._key));
+            },
+            flatShowAlign () {
+                return !this.propsObj._align || this.propsObj._align == "left" || !this.isUnit ? "flex-start" : this.propsObj._align == "right" ? "flex-end" : "center";
             }
         },
         created () {

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

@@ -1,11 +1,10 @@
 <template>
-    <div :class="`DshCoordinates ycFormItem control-${mode}`">
+    <div class="DshCoordinates">
         <Ctooltip
             placement="top"
             :transfer="true"
             maxWidth="200"
-            :content="showVal"
-            :class="commonClass"
+            :content="currentVal"
         >
             <!-- 编辑模式 -->
             <div
@@ -38,110 +37,112 @@
             </div>
 
             <!-- 查看模式 -->
-            <span
-                v-else
-                :class="[`dsh-ellipsis control-${mode}-text`, showVal ? 'hb-show-text' : 'hb-nodata-text']"
-            >
-                <span>{{ showVal || '暂无内容' }}</span>
+            <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>
 
@@ -177,7 +178,7 @@
                     this.value[this.controlKey] = val;
                 }
             },
-            showVal () {
+            currentVal () {
                 return this.curVal && this.curVal.name;
             },
             curLnglat: {