bri-components 1.0.0

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

@@ -0,0 +1,199 @@
+<template>
+    <div
+        :class="`DshCheckbox ycFormItem control-${mode}`"
+        ref="dshCheckboxRef"
+    >
+        <template v-if="canEdit">
+            <!-- 平铺 -->
+            <CheckboxGroup
+                v-if="showType === 'flat'"
+                :class="[
+                    'DshCheckbox-checkboxGroup',
+                    { 'DshCheckbox-checkboxGroup-useColor' : selfPropsObj._useColor },
+                    { 'readonlyCheckbox' : !canEdit && !selfPropsObj._useColor },
+                    { 'readonlyColorCheckbox': !canEdit && selfPropsObj._useColor },
+                    { 'DshCheckbox-checkboxGroup-scroll': selfPropsObj._span < 24 && !selfPropsObj._br },
+                ]"
+                v-model="value[controlKey]"
+                @on-change="change"
+            >
+                <template v-if="listData.length">
+                    <Checkbox
+                        v-for="(item, index) in listData"
+                        :key="index"
+                        :class="[
+                            'myChecked ',
+                            selfPropsObj.class,
+                            item.class,
+                            getColorClass(item.color)
+                        ]"
+                        :style="{
+                            backgroundColor: selfPropsObj._useColor ? getBgColor(item.color) : '',
+                            color:selfPropsObj._useColor ? getColor(item.color) : undefined
+                        }"
+                        :label="item._key"
+                        :border="selfPropsObj._useColor"
+                        :disabled="isDisabled(item)"
+                        @click.native="clickOpenTip(item)"
+                    >
+                        <slot :item="item"></slot>
+                        <span>{{ item.name || item._name }}</span>
+                    </Checkbox>
+                </template>
+
+                <div
+                    v-else
+                    class="dsh-subtip"
+                    style="backgroundColor: #f3f3f3;"
+                >-- 无选择项 --</div>
+            </CheckboxGroup>
+
+            <!-- 下拉 -->
+            <Select
+                v-else
+                v-model="value[controlKey]"
+                :class="{
+                    'DshCheckbox-select-readonly': $isReadonly(canEdit, selfPropsObj),
+                    'DshCheckbox-select-disabled': $isDisabled(canEdit, selfPropsObj)
+                }"
+                :multiple="true"
+                :placeholder="selfPropsObj._placeholder"
+                :disabled="!finalCanEdit"
+                :filterable="selfPropsObj._filterable"
+                :transfer="selfPropsObj._transfer"
+                :transfer-class-name="selfPropsObj._transferClassName"
+                :max-tag-count="selfPropsObj._maxTagCount"
+                @on-select="select"
+            >
+                <Option
+                    v-for="(item, index) in listData"
+                    :key="index"
+                    :value="item._key"
+                    :label="item.name || item._name"
+                    :disabled="isDisabled(item)"
+                >
+                    <Checkbox :value="!!value[controlKey] && value[controlKey].includes(item._key)">
+                    </Checkbox>
+                    <slot :item="item"></slot>
+                    <span>{{ item.name || item._name }}</span>
+                    <span style="float:right;paddingRight:20px">{{ item.rightName }}</span>
+                </Option>
+            </Select>
+        </template>
+
+        <Ctooltip
+            v-else
+            placement="top"
+            :transfer="true"
+            maxWidth="200"
+            :content="showVal"
+            :class="commonClass"
+        >
+            <div
+                v-if="showVal"
+                class="DshCheckbox-value-wrapper"
+            >
+                <span
+                    v-for="col in colData"
+                    :key="col._id || col._key"
+                    class="DshCheckbox-value dsh-ellipsis"
+                    :style="{
+                        background: selfPropsObj._useColor ? getBgColor(col.color) : '',
+                        color: selfPropsObj._useColor ? getColor(col.color) : ''
+                    }"
+                >{{ col.name }}</span>
+            </div>
+            <div
+                v-else
+                class="hb-nodata-text dsh-ellipsis"
+            >
+                <span>暂无内容</span>
+            </div>
+        </Ctooltip>
+
+        <!-- tip项弹框提示 -->
+        <dsh-render :render="tipModalRender"></dsh-render>
+    </div>
+</template>
+
+<script>
+    import controlMixin from "../controlMixin.js";
+    import selectMixin from "./selectMixin.js";
+    import { resourceData } from "../../../datas/index.js";
+
+    // optionKind值 'flat'、'dropdown'
+    export default {
+        name: "DshCheckbox",
+        mixins: [controlMixin, selectMixin],
+        props: {},
+        data () {
+            return {
+                getBgColor: color => {
+                    let curColor = this.colorMap[color] || this.colorMap["color-1"];
+                    return this.$getColor(curColor, 0.1);
+                },
+                getColor: color => {
+                    return this.colorMap[color] || this.colorMap["color-1"];
+                },
+                getColorClass: color => {
+                    return this.colorMap[color] ? color : "color-1";
+                }
+            };
+        },
+        computed: {
+            selfPropsObj () {
+                return {
+                    _filterable: true,
+                    _transfer: true,
+                    _data: [],
+
+                    ...this.propsObj,
+                    ...this.commonDealPropsObj,
+                    _maxTagCount: this.propsObj._maxTagCount || undefined
+                };
+            },
+            colorMap () {
+                return this.selfPropsObj.colorMap || resourceData.colorMap;
+            },
+            showType () {
+                return this.selfPropsObj._optionKind;
+            },
+
+            listData () {
+                return (this.selfPropsObj._data || []).concat(this.initListData);
+            },
+
+            showVal () {
+                return this.colData.map(col => col.name).join("、");
+            },
+            // 选项数据
+            colData () {
+                return this.listData.filter(item => (this.value[this.controlKey] || []).includes(item._key));
+            }
+        },
+        created () {
+        },
+        methods: {
+            // 下拉框的选择
+            select (item) {
+                let val = this.value[this.controlKey];
+                if (val.includes(item.value)) {
+                    let itemIndex = val.findIndex(valItem => valItem === item.value);
+                    val.splice(itemIndex, 1);
+                } else {
+                    val.push(item.value);
+                }
+
+                this.change(val, item);
+            },
+
+            isDisabled (item) {
+                return !!(
+                    item._disabled ||
+                    this.value[this.controlKey] && this.value[this.controlKey].length >= this.selfPropsObj._max && !this.value[this.controlKey].includes(item._key) ||
+                    !this.finalCanEdit
+                );
+            }
+        }
+    };
+</script>

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

@@ -0,0 +1,497 @@
+<template>
+    <div :class="`DshCoordinates ycFormItem control-${mode}`">
+        <Ctooltip
+            placement="top"
+            :transfer="true"
+            maxWidth="200"
+            :content="showVal"
+            :class="commonClass"
+        >
+            <!-- 编辑模式 -->
+            <div
+                v-if="finalCanEdit"
+                class="DshCoordinates-wrap"
+                @click="clickOpenModal"
+            >
+                <div
+                    v-if="curLnglat.length"
+                    class="DshCoordinates-text"
+                >
+                    <span class="dsh-ellipsis">
+                        {{ curVal.name }}
+                    </span>
+                    <Icon
+                        v-if="finalCanEdit && selfPropsObj._clearable"
+                        class="DshCoordinates-text-icon"
+                        type="md-close"
+                        @click.stop="clickDelete"
+                    />
+                </div>
+
+                <span
+                    v-else
+                    class="DshCoordinates-notext"
+                >
+                    点击获取当前位置
+                    <i class="DshCoordinates-wrap-zuobiao bico-font bico-zuobiao"></i>
+                </span>
+            </div>
+
+            <!-- 查看模式 -->
+            <span
+                v-else
+                :class="[`dsh-ellipsis control-${mode}-text`, showVal ? 'hb-show-text' : 'hb-nodata-text']"
+            >
+                <span>{{ showVal || '暂无内容' }}</span>
+            </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"
+            >
+                <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">
+                    <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>
+
+                <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>
+
+            <transition>
+                <div
+                    v-if="showModal"
+                    id="mapContain"
+                    class="DshCoordinates-map"
+                ></div>
+            </transition>
+            <div
+                ref="divCoordinate"
+                style="display: none; position:absolute;background:#fff;padding: 5px 10px"
+            ></div>
+        </Modal>
+    </div>
+</template>
+
+<script>
+    import controlMixin from "../controlMixin.js";
+    const plotStrokeColor = "#4575EF";
+    const plotFillColor = "#4575EF";
+
+    let polygonOpt = {
+        fillColor: plotFillColor,
+        fillOpacity: 0.4,
+        strokeColor: plotStrokeColor,
+        strokeWeight: 5
+    };
+    let lineOpt = {
+        strokeColor: plotStrokeColor,
+        strokeWeight: 5
+    };
+    let markerOpt = {};
+
+    export default {
+        name: "DshCoordinates",
+        mixins: [controlMixin],
+        computed: {
+            curVal: {
+                get () {
+                    return this.value[this.controlKey] || {
+                        name: "",
+                        lnglat: []
+                    };
+                },
+                set (val) {
+                    this.value[this.controlKey] = val;
+                }
+            },
+            showVal () {
+                return this.curVal && this.curVal.name;
+            },
+            curLnglat: {
+                get () {
+                    return this.curVal.lnglat || [];
+                },
+                set (val) {
+                    this.curVal.lnglat = val;
+                }
+            },
+
+            selfPropsObj () {
+                return {
+                    ...this.propsObj,
+                    ...this.commonDealPropsObj
+                };
+            },
+            kind () {
+                return this.selfPropsObj._showType;
+            }
+        },
+        data () {
+            return {
+                // 确认前的value
+                cloneValue: {
+                    name: "",
+                    lnglat: []
+                },
+                showModal: false,
+                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: {
+            // 打开窗体
+            clickOpenModal () {
+                if (this.canEdit || this.curLnglat.length) {
+                    this.showModal = true;
+                    this.cloneValue = this.$deepCopy(this.curVal);
+                    this.getMap();
+                }
+            },
+            // 点击确认
+            clickConfirm () {
+                this.showModal = false;
+                this.change();
+            },
+            // 点击取消
+            clickCancel () {
+                this.curVal = this.cloneValue;
+            },
+            // 点击删除
+            clickDelete () {
+                this.curVal = {
+                    name: "",
+                    lnglat: []
+                };
+                this.$emit("change", []);
+            },
+            // 清除已选内容
+            clickClear () {
+                this.curVal = {
+                    name: "",
+                    lnglat: []
+                }; // 清除当前标记
+                this.handleRmoveMarker("default"); // 清除地图内标记
+                this.handleOpenDraw(); // 打开绘图功能
+            },
+            // 点击搜索
+            clickSearch () {
+                if (!this.formData.searchText) {
+                    this.searchMessage = "请输入搜索内容！";
+                    return;
+                }
+                if (this.formData.kind === "coordinate") {
+                    let lnglat = this.formData.searchText.split(",");
+                    let lng = Number(lnglat[0]);
+                    let lat = Number(lnglat[1]);
+                    if (isNaN(lng) || isNaN(lat) || lng < -180 || lng > 180 || lat < -90 || lat > 90) {
+                        this.searchMessage = "请输入正确的经纬度坐标！";
+                    } else {
+                        lnglat = new AMap.LngLat(lng, lat);
+                        this.searchMessage = "";
+                        this.handleAddMarker([lnglat.lng, lnglat.lat], true, "default");
+                    }
+                } else {
+                    this.placeSearch.search(this.formData.searchText, this.handlePlaceSearchCallback);
+                }
+            },
+            // 地图自适应点
+            clickMapFitView (view = this.plot) {
+                this.map.setFitView(view);
+            },
+            getMap () {
+                this.$nextTick(() => {
+                    let divCoordinate = this.$refs.divCoordinate;
+                    this.map = new AMap.Map("mapContain", {
+                        rotateEnable: true,
+                        pitchEnable: true,
+                        zoom: this.propsObj._zoom || 12,
+                        pitch: 50,
+                        viewMode: this.propsObj._mapType || "2D", // 开启3D视图,默认为关闭
+                        center: this.propsObj._center && this.propsObj._center.split(",").map(i => Number(i)) || undefined
+                    });
+
+                    // 滑动显示坐标点
+                    this.map.on("mouseover", function (e) {
+                        divCoordinate.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";
+                    });
+                    this.map.on("mouseout", function (e) {
+                        divCoordinate.style.display = "none";
+                    });
+
+                    // 集成插件
+                    AMap.plugin(["AMap.PlaceSearch", "AMap.Scale", "AMap.ControlBar", "AMap.MouseTool"], this.handlePluginCallback);
+
+                });
+            },
+            handlePluginCallback () {
+                // 构造地点查询类
+                this.placeSearch = new AMap.PlaceSearch();
+                this.placeSearch.on("complete", this.handlePlaceSearchCallback);
+                this.placeSearch.on("error", this.handlePlaceSearchCallback);
+
+                // 加载集成工具
+                this.map.addControl(new AMap.Scale());
+                this.map.addControl(new AMap.ControlBar());
+                // this.map.addControl(new AMap.ToolBar());
+
+                // 监听draw事件可获取画好的覆盖物
+                this.mouseTool = new AMap.MouseTool(this.map);
+                this.mouseTool.on("draw", this.handleMouseToolCallback);
+                // 设置默认坐标
+                if (this.curLnglat.length) {
+                    this.handleAddMarker(this.curLnglat, true);
+
+                    if (this.kind === "multipleMarker") { // 多选打开绘图功能
+                        this.finalCanEdit && this.handleOpenDraw();
+                    }
+                } else {
+                    this.finalCanEdit && this.handleOpenDraw();
+                }
+            },
+            handleMouseToolCallback (e) {
+                if (e.obj.CLASS_NAME === "AMap.Marker") {
+                    if (this.kind === "marker") {
+                        this.plot = e.obj;
+                        this.handleCloseDraw();
+                    } else if (this.kind === "multipleMarker") {
+                        if (this.plot) {
+                            this.plot.push(e.obj);
+                        } else {
+                            this.plot = [e.obj];
+                        }
+                    }
+                    // 设置坐标
+                    let lnglat = e.obj.getPosition();
+                    this.curLnglat.push([lnglat.lng, lnglat.lat]);
+                    this.getRegeoCode();
+
+                } else {
+                    this.plot = e.obj;
+                    // 设置坐标
+                    this.curLnglat.push(...e.obj.getPath().map(lnglat => [lnglat.lng, lnglat.lat]));
+                    this.getRegeoCode();
+                    this.handleCloseDraw();
+                }
+            },
+            handlePlaceSearchCallback (result) {
+                if (result == "complete") {
+                    return;
+                }
+                if (result.poiList && result.poiList.pois && result.poiList.pois.length) {
+                    this.searchMessage = "";
+                    let poi = result.poiList.pois[0];
+                    this.handleAddMarker([poi.location.lng, poi.location.lat], true, "default");
+                    this.marker.setTitle([poi.name, poi.address].join(poi.name && poi.address ? "\n" : ""));
+                } else {
+                    this.searchMessage = "没有搜索到结果！";
+                }
+            },
+            // 打开绘图
+            handleOpenDraw (type = this.kind) {
+                switch (type) {
+                case "marker": {
+                    this.mouseTool.marker(markerOpt);
+                    break;
+                }
+                case "multipleMarker": {
+                    this.mouseTool.marker(markerOpt);
+                    break;
+                }
+                case "polyline": {
+                    this.mouseTool.polyline(lineOpt);
+                    break;
+                }
+                case "polygon": {
+                    this.mouseTool.polygon(polygonOpt);
+                    break;
+                }
+                case "rectangle": {
+                    this.mouseTool.rectangle(polygonOpt);
+                    break;
+                }
+                case "circle": {
+                    this.mouseTool.circle(polygonOpt);
+                    break;
+                }
+                }
+            },
+            // 关闭绘图
+            handleCloseDraw () {
+                this.mouseTool.close();
+            },
+            // 添加图形
+            handleAddMarker (location, centerView = true, type = this.kind) {
+                location = JSON.parse(JSON.stringify(location));
+                // 分类型添加
+                if (["polygon", "rectangle", "circle"].includes(type)) {
+                    // 图形类
+                    this.plot = new AMap.Polygon({
+                        ...polygonOpt,
+                        path: location
+                    });
+                    this.map.add(this.plot);
+                    centerView && this.map.setFitView(this.plot);// 视口自适应
+                } else if (["default"].includes(type)) {
+                    !this.marker && (this.marker = new AMap.Marker());
+                    this.marker.setPosition(location);
+                    this.marker.setMap(this.map);
+                    if (this.kind === "marker") {
+                        this.handleRmoveMarker();
+                        this.handleCloseDraw();
+                        this.curLnglat = [location];
+                        this.getRegeoCode();
+                    } else if (this.kind === "multipleMarker") {
+                        this.curLnglat.push(location);
+                        this.getRegeoCode();
+                    }
+                    centerView && this.map.setFitView(this.marker);
+                } else if (["polyline"].includes(type)) {
+                    this.plot = new AMap.Polyline({
+                        ...polygonOpt,
+                        path: location
+                    });
+                    this.map.add(this.plot);
+                    centerView && this.map.setFitView(this.plot);// 视口自适应
+                } else if (["multipleMarker", "marker"].includes(type)) {
+                    this.plot = location.map(position => {
+                        return new AMap.Marker({
+                            map: this.map,
+                            position: position
+                        });
+                    });
+                    centerView && this.map.setFitView(this.plot);
+                }
+            },
+            // 移除图形
+            handleRmoveMarker (type = this.kind) {
+                if (["default"].includes(type)) {
+                    this.marker && this.map.remove(this.marker);
+                    this.plot && this.map.remove(this.plot);
+                } else {
+                    this.plot && this.map.remove(this.plot);
+                }
+            },
+            // 获取逆地理编码
+            getRegeoCode (value, scuessFun) {
+                let params = {
+                    key: window.config.amapKey,
+                    location: this.curLnglat[0],
+                    radius: 1000,
+                    extensions: "base",
+                    batch: false,
+                    roadlevel: 1
+                };
+
+                let paramStr = "";
+                for (let attr in params) {
+                    paramStr += attr + "=" + params[attr] + "&";
+                }
+
+                fetch("http://restapi.amap.com/v3/geocode/regeo?" + paramStr)
+                    .then(res => res.json())
+                    .then(response => {
+                        if (response.status === "1" && response.regeocode) {
+                            let address = response.regeocode.formatted_address;
+                            this.curVal.name = address;
+                        }
+                });
+            }
+        }
+    };
+</script>