bri-components 1.2.8 → 1.2.10

package/package.json

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

package/src/components/controls/BriControlInput.vue

@@ -0,0 +1,23 @@
+<template>
+    <div class="BriControlInput">
+
+    </div>
+</template>
+
+<script>
+    export default {
+        name: "BriControlInput",
+        mixins: [],
+        props: {
+
+        },
+        data () {
+            return {
+
+            };
+        },
+        computed: {},
+        created () {},
+        methods: {}
+    };
+</script>

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

@@ -8,6 +8,7 @@
             @on-enter="clickConfirm"
             @on-click="clickConfirm"
         ></Input>
+
         <div
             v-show="status === 'show'"
             class="BriInputs-show"

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

@@ -126,7 +126,9 @@
                         @on-visible-change="visibleChange"
                         @on-change="changeVal"
                         @click.stop="clickCascader"
-                    ></Cascader>
+                    >
+                        <slot></slot>
+                    </Cascader>
                 </template>
             </template>
         </template>
@@ -394,6 +396,9 @@
                 if (this.isVisible || !val.length) {
                     this.curValList = val;
                 }
+
+                // 注：...params 参数不可去单独使用地区组件时调用
+                this.$emit("change", this.value[this.controlKey], ...params);
             }
         },
         watch: {

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

@@ -51,7 +51,7 @@
             <!-- 下拉方式 -->
             <template v-else>
                 <Select
-                    v-model="curValList"
+                    v-model="value[controlKey]"
                     :multiple="true"
                     :placeholder="selfPropsObj._placeholder"
                     :disabled="!finalCanEdit"
@@ -59,6 +59,7 @@
                     :transfer="selfPropsObj._transfer"
                     :transfer-class-name="selfPropsObj._transferClassName"
                     :max-tag-count="selfPropsObj._maxTagCount"
+                    @on-select="changeSelect"
                 >
                     <Option
                         v-for="(item, index) in listData"
@@ -174,6 +175,19 @@
         },
         created () {},
         methods: {
+            // 下拉框的选择
+            changeSelect (item) {
+                // 下拉方式时用v-model触发change有问题，组件进来如果值不为空的，就会v-model返值一次
+                if (this.curValList.includes(item.value)) {
+                    let itemIndex = this.curValList.findIndex(valItem => valItem === item.value);
+                    this.curValList.splice(itemIndex, 1);
+                } else {
+                    this.curValList.push(item.value);
+                }
+
+                this.curValList = [...this.curValList];
+            },
+
             getItemColorClass (item) {
                 return this.colorMap[item.color] ? item.color : "color-1";
             },

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

@@ -6,34 +6,48 @@
             maxWidth="200"
             :transfer="true"
         >
-            <div
-                :class="{
+            <!-- 编辑 -->
+            <template v-if="canEdit">
+                <div
+                    :class="{
+                        ...commonClass,
+                        'DshCoordinates-edit': canEdit,
+                    }"
+                    @mouseenter="isHover = true"
+                    @mouseleave="isHover = false"
+                    @click.stop="clickInput"
+                >
+                    <div class="text">
+                        {{ showVal }}
+                    </div>
+
+                    <!-- 图标 -->
+                    <template>
+                        <Icon
+                            v-if="!$isEmptyData(curVal) && selfPropsObj._clearable && isHover"
+                            class="icon-close"
+                            type="ios-close-circle"
+                            @click.stop="clickClear"
+                        />
+                        <Icon
+                            v-else
+                            class="icon-default"
+                            :type="inputIcon"
+                        />
+                    </template>
+                </div>
+            </template>
+
+            <!-- 查看 -->
+            <template v-else>
+                <div :class="{
                     ...commonClass,
-                    'DshCoordinates-edit': canEdit,
-                    'DshCoordinates-unit': !canEdit && isUnitShow,
-                    'DshCoordinates-show': !canEdit && !isUnitShow
-                }"
-                @click.stop="clickInput"
-            >
-                <div class="text">
+                    'DshCoordinates-show': !isUnitShow,
+                    'DshCoordinates-unit': isUnitShow
+                }">
                     {{ showVal }}
                 </div>
-
-                <!-- 图标 -->
-                <template v-if="canEdit">
-                    <Icon
-                        v-if="!$isEmptyData(curVal) && selfPropsObj._clearable && isHover"
-                        class="icon-close"
-                        type="ios-close-circle"
-                        @click.stop="clickClear"
-                    />
-                    <Icon
-                        v-else
-                        class="icon-default"
-                        :type="inputIcon"
-                    />
-                </template>
-            </div>
+            </template>
         </bri-tooltip>
 
         <!-- 模态框 -->
@@ -41,103 +55,108 @@
             v-if="canEdit"
             class="DshCoordinates-modal"
             v-model="showModal"
-            title="选择位置"
-            :footer-hide="true"
             :styles="modalStyles"
-            @on-cancel="clickCancel"
+            :footer-hide="true"
         >
+            <!-- 顶部 -->
             <div
                 slot="header"
                 class="DshCoordinates-modal-header"
             >
+                <!-- 可编辑 -->
                 <Row
                     v-if="finalCanEdit"
-                    class="edit"
+                    class="header-edit"
                     type="flex"
                     justify="center"
                     align="bottom"
                 >
-                    <Col span="8">
-                    <div>
-                        <RadioGroup v-model="formData.kind">
+                    <i-col span="8">
+                        <radio-group 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="edit-message">{{ searchMessage }}</span>
-                        </Col>
-                        <Col span="8">&nbsp;
-                        <Button
-                            type="primary"
-                            @click="clickSearch"
-                        >搜索</Button>
-                        </Col>
-                    </Row>
-                    </Col>
+                        </radio-group>
 
-                    <Col span="8">
-                    <div class="edit-text">坐标获取结果</div>
-                    <Row class="dsh-margin-top5">
-                        <Col span="16">
-                        <Input
-                            :value="curVal.name"
-                            :readonly="true"
-                            :clearable="true"
-                            @on-clear="clickModalClear"
-                            @click.native="clickMapFitView"
-                        />
-                        </Col>
-                        <Col span="8">&nbsp;
-                        <Button
-                            type="primary"
-                            @click="clickConfirm"
-                        >确认</Button>
-                        </Col>
-                    </Row>
-                    </Col>
+                        <Row class="header-edit-row">
+                            <i-col span="16">
+                                <Input
+                                    v-model="formData.searchText"
+                                    placeholder="请输入..."
+                                    :clearable="true"
+                                    @on-enter="clickSearch"
+                                />
+                                <span class="header-edit-message">{{ searchMessage }}</span>
+                            </i-col>
+
+                            <i-col span="8">
+                                <Button
+                                    type="primary"
+                                    @click="clickSearch"
+                                >搜索</Button>
+                            </i-col>
+                        </Row>
+                    </i-col>
+
+                    <i-col span="8">
+                        <div class="header-edit-text">坐标获取结果</div>
+                        <Row class="header-edit-row">
+                            <i-col span="16">
+                                <Input
+                                    :value="cloneVal.name"
+                                    :readonly="true"
+                                    :clearable="true"
+                                    @on-clear="clickModalClear"
+                                    @click.native="clickMapFitView"
+                                />
+                            </i-col>
+
+                            <i-col span="8">
+                                <Button
+                                    type="primary"
+                                    @click="clickConfirm"
+                                >确认</Button>
+                            </i-col>
+                        </Row>
+                    </i-col>
                 </Row>
 
+                <!-- 不可编辑 -->
                 <Row
                     v-else
-                    class="show"
+                    class="header-show"
                 >
-                    <Col
+                    <i-col
                         span="6"
-                        class="show-name"
+                        class="header-show-text"
                     >
-                    当前位置：
-                    </Col>
-                    <Col span="12">
-                    <Input
-                        :value="curVal.name"
-                        :readonly="true"
-                        @click.native="clickMapFitView"
-                    />
-                    </Col>
-                    <Col span="6">
-                    </Col>
+                        当前位置：
+                    </i-col>
+
+                    <i-col span="12">
+                        <Input
+                            :value="cloneVal.name"
+                            :readonly="true"
+                            @click.native="clickMapFitView"
+                        />
+                    </i-col>
+
+                    <i-col span="6"></i-col>
                 </Row>
             </div>
 
+            <!-- 地图 -->
             <transition>
                 <div
                     v-if="showModal"
-                    id="mapContain"
+                    id="DshCoordinatesMap"
                     class="DshCoordinates-modal-map"
                 ></div>
             </transition>
 
+            <!-- 实时坐标 -->
             <div
-                ref="divCoordinate"
-                style="display: none; position:absolute;background:#fff;padding: 5px 10px"
+                ref="lnglatRef"
+                class="DshCoordinates-modal-lnglat"
             ></div>
         </Modal>
     </div>
@@ -165,7 +184,48 @@
         mixins: [
             controlMixin
         ],
+        data () {
+            return {
+                isHover: false,
+
+                showModal: false,
+                cloneVal: {
+                    name: "",
+                    lnglat: []
+                },
+                modalStyles: {
+                    height: document.body.clientHeight * 0.96 + "px",
+                    width: document.body.clientWidth * 0.96 + "px",
+                    top: "2%"
+                },
+                formData: {
+                    kind: "keyword",
+                    searchText: ""
+                },
+
+                // 地图相应控件
+                map: null,
+                placeSearch: null,
+                mouseTool: null,
+                marker: null, // 标记点
+                plot: null, // 标记图形
+                searchMessage: "" // 提示信息
+            };
+        },
         computed: {
+            selfPropsObj () {
+                return {
+                    ...this.propsObj,
+                    ...this.commonDealPropsObj
+                };
+            },
+            kind () {
+                return this.selfPropsObj._showType;
+            },
+            inputIcon () {
+                return "ios-map-outline";
+            },
+
             curVal: {
                 get () {
                     return this.value[this.controlKey] || {
@@ -175,6 +235,7 @@
                 },
                 set (val) {
                     this.value[this.controlKey] = val;
+                    this.change();
                 }
             },
             curLnglat: {
@@ -185,70 +246,26 @@
                     this.curVal.lnglat = val;
                 }
             },
-
-            selfPropsObj () {
-                return {
-                    ...this.propsObj,
-                    ...this.commonDealPropsObj
-                };
-            },
-            kind () {
-                return this.selfPropsObj._showType;
-            },
-            inputIcon () {
-                return "ios-map-outline";
-            },
-
             showVal () {
                 return this.$isEmptyData(this.curVal)
                     ? this.emptyShowVal
                     : this.curVal.name;
             }
         },
-        data () {
-            return {
-                showModal: false,
-                cloneValue: {
-                    name: "",
-                    lnglat: []
-                },
-                modalStyles: {
-                    height: document.body.clientHeight * 0.96 + "px",
-                    width: document.body.clientWidth * 0.96 + "px",
-                    top: "2%"
-                },
-                formData: {
-                    kind: "keyword",
-                    searchText: ""
-                },
-
-                // 地图相应控件
-                map: null,
-                placeSearch: null,
-                mouseTool: null,
-                marker: null, // 标记点
-                plot: null, // 标记图形
-                searchMessage: "" // 提示信息
-            };
-        },
         created () {},
         methods: {
             // 打开窗体
             clickInput () {
-                if (this.finalCanEdit) {
+                if (this.canEdit) {
                     this.showModal = true;
-                    this.cloneValue = this.$deepCopy(this.curVal);
+                    this.cloneVal = this.$deepCopy(this.curVal);
                     this.getMap();
                 }
             },
             // 点击确认
             clickConfirm () {
                 this.showModal = false;
-                this.change();
-            },
-            // 点击取消
-            clickCancel () {
-                this.curVal = this.cloneValue;
+                this.curVal = this.cloneVal;
             },
             // 点击删除
             clickClear () {
@@ -256,11 +273,10 @@
                     name: "",
                     lnglat: []
                 };
-                this.$emit("change", []);
             },
             // 清除已选内容
             clickModalClear () {
-                this.curVal = {
+                this.cloneVal = {
                     name: "",
                     lnglat: []
                 }; // 清除当前标记
@@ -294,8 +310,8 @@
             },
             getMap () {
                 this.$nextTick(() => {
-                    let divCoordinate = this.$refs.divCoordinate;
-                    this.map = new AMap.Map("mapContain", {
+                    let lnglatRef = this.$refs.lnglatRef;
+                    this.map = new AMap.Map("DshCoordinatesMap", {
                         rotateEnable: true,
                         pitchEnable: true,
                         zoom: this.propsObj._zoom || 12,
@@ -306,15 +322,15 @@
 
                     // 滑动显示坐标点
                     this.map.on("mouseover", function (e) {
-                        divCoordinate.style.display = "block";
+                        lnglatRef.style.display = "block";
                     });
                     this.map.on("mousemove", function (e) {
-                        divCoordinate.innerHTML = e.lnglat.toString();
-                        divCoordinate.style.top = (e.pixel.y + 120) + "px";
-                        divCoordinate.style.left = (e.pixel.x + 6) + "px";
+                        lnglatRef.innerHTML = e.lnglat.toString();
+                        lnglatRef.style.top = (e.pixel.y + 120) + "px";
+                        lnglatRef.style.left = (e.pixel.x + 6) + "px";
                     });
                     this.map.on("mouseout", function (e) {
-                        divCoordinate.style.display = "none";
+                        lnglatRef.style.display = "none";
                     });
 
                     // 集成插件
@@ -337,7 +353,7 @@
                 this.mouseTool = new AMap.MouseTool(this.map);
                 this.mouseTool.on("draw", this.handleMouseToolCallback);
                 // 设置默认坐标
-                if (!this.$isEmptyData(this.curVal)) {
+                if (!this.$isEmptyData(this.cloneVal)) {
                     this.handleAddMarker(this.curLnglat, true);
 
                     if (this.kind === "multipleMarker") { // 多选打开绘图功能
@@ -491,7 +507,7 @@
                     .then(response => {
                         if (response.status === "1" && response.regeocode) {
                             let address = response.regeocode.formatted_address;
-                            this.curVal.name = address;
+                            this.cloneVal.name = address;
                         }
                 });
             }

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

@@ -49,6 +49,7 @@
             <template v-else>
                 <bri-tooltip
                     :content="showVal"
+                    :defaultDisabled="false"
                     maxWidth="200"
                     :transfer="true"
                 >

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

@@ -87,7 +87,17 @@
                     ...commonClass,
                     'DshSelect-show': true
                 }">
-                    {{ showVal }}
+                    <!-- 有值 -->
+                    <dsh-tags
+                        v-if="!$isEmptyData(curVal)"
+                        class="text"
+                        :list="[curValObj]"
+                    ></dsh-tags>
+
+                    <!-- 无值 -->
+                    <template v-else>
+                        {{ emptyShowVal }}
+                    </template>
                 </div>
             </bri-tooltip>
         </template>
@@ -147,10 +157,18 @@
                     : listData;
             },
             curValObj () {
-                return this.listData.find(item => item._key === this.curVal) || {
+                const obj = this.listData.find(item => item._key === this.curVal) || {
                     _key: this.curVal,
                     name: `温馨提示：选项${this.curVal}已找不到`
                 };
+
+                return this.$isEmptyData(this.curVal)
+                    ? undefined
+                    : {
+                        ...obj,
+                        style: this.getItemStyle(obj),
+                        color: undefined
+                };
             },
             showVal () {
                 return this.$isEmptyData(this.curVal)
@@ -163,7 +181,7 @@
         },
         methods: {
             init () {
-
+                this.getListData();
             },
 
             // 取消flat模式的选择项
@@ -200,7 +218,6 @@
             getItemDisabled (item) {
                 return !!(!this.finalCanEdit || item._disabled);
             },
-
             // 接口 -获取自定义的接口数据
             getListData () {
                 this.selfPropsObj._customData.forEach(item => {

package/src/components/controls/controlMixin.js

@@ -26,6 +26,7 @@ export default {
             }
         },
         /* 列表形式下用到的 */
+        rowIndex: Number,
         parentData: {
             type: Array,
             default () {

package/src/components/list/BriFlatTable.vue

@@ -191,7 +191,9 @@
                                     ? h("Tooltip", {
                                         class: "td-inner-compare",
                                         props: {
-                                            content: this.$isEmptyData(this.oldListData[rowIndex][column._key]) ? "" : this.oldListData[rowIndex][column._key],
+                                            content: this.$isEmptyData(this.oldListData[rowIndex][column._key])
+                                                ? ""
+                                                : this.oldListData[rowIndex][column._key],
                                             transfer: true,
                                             maxWidth: 200,
                                             placement: "top"
@@ -225,8 +227,12 @@
                                             change: () => this.$dispatchEvent(this.operationMap.changeVal, column, row, rowIndex, arguments)
                                         }
                                     }),
-                                !this.getRuleResult(column, row).bool &&
-                                    h("span", { class: "table-row-td-tip" }, this.getRuleResult(column, row).message)
+
+                                !this.getRuleResult(column, row).bool
+                                    ? h("span", {
+                                        class: "table-row-td-tip"
+                                    }, this.getRuleResult(column, row).message)
+                                    : undefined
                             ];
                         },
                         renderHeaderCell: ({ column }, h) => {
@@ -365,7 +371,6 @@
             // 表单控件值改变
             changeVal (operationItem, col, row, rowIndex, params) {
                 this.$set(this.ruleRecordMap, `${row._id}dsh${col._key}`, { showRuleMessage: true });
-
                 this.change("changeVal", col, row, rowIndex, ...params);
             },
             // 表单控件失去焦点

package/src/components/list/DshBox/DshTable.vue

@@ -1,7 +1,6 @@
 <template>
     <div class="DshTable">
         <bri-table
-            :className="propsObj.className"
             :data="data"
             :columns="selfColumns"
             :propsObj="propsObj"