simple-frame-unit 1.0.2

package/src/components/ed-base-vue/package/EdIcons/src/index.vue

@@ -0,0 +1,13 @@
+<template>
+  <div></div>
+</template>
+
+<script>
+export default {
+  name: "EdIcons"
+}
+</script>
+
+<style scoped>
+
+</style>

package/src/components/ed-base-vue/package/EdImage/index.js

@@ -0,0 +1,8 @@
+import EdImage from "./src/index.vue";
+
+/* istanbul ignore next */
+EdImage.install = function (Vue) {
+  Vue.component(EdImage.name, EdImage)
+}
+
+export default EdImage

package/src/components/ed-base-vue/package/EdImage/src/index.vue

@@ -0,0 +1,28 @@
+<template>
+  <el-image :previewSrcList="previewList" v-bind="$props"></el-image>
+</template>
+
+<script>
+export default {
+  name: "EdImage",
+  props: {
+    src: String,
+    fit: String,
+    alt: String,
+    preview: {type: Boolean, default: false},
+    referrerPolicy: String,
+    lazy: Boolean,
+    scrollContainer: {},
+    previewSrcList: {type: Array, default: () => []},
+    zIndex: {type: Number, default: 2000},
+    initialIndex: Number
+  },
+  computed: {
+    previewList() {
+      if (this.preview && this.previewSrcList.length === 0) {
+        return [this.src]
+      }
+    }
+  }
+}
+</script>

package/src/components/ed-base-vue/package/EdInputArray/index.js

@@ -0,0 +1,8 @@
+import EdInputArray from "./src/index.vue";
+
+/* istanbul ignore next */
+EdInputArray.install = function (Vue) {
+    Vue.component(EdInputArray.name, EdInputArray)
+}
+
+export default EdInputArray

package/src/components/ed-base-vue/package/EdInputArray/src/Props.js

@@ -0,0 +1,26 @@
+export default {
+    // medium / small / mini
+    size: {type: String, default: 'small'},
+
+    // 是否禁用
+    disabled: {type: Boolean, default: false},
+
+    // 值
+    value: {type: Array, default: () => []},
+
+    // 输入类型 img / link / text
+    type: {type: String, default: "text"},
+
+    // 描述
+    placeholder: {type: String, default: ""},
+    target: {type: String, default: ""},
+
+    // 最大数量限制
+    limit: {type: [String, Number]},
+
+    // 是否单个输入框
+    alone: {
+        type: Boolean,
+        default: false
+    }
+}

package/src/components/ed-base-vue/package/EdInputArray/src/index.vue

@@ -0,0 +1,97 @@
+<template>
+  <div class="ed-input--array">
+    <!--  初始添加  -->
+    <el-button v-if="validateNull(value)" :disabled="disabled" :size="size" circle icon="el-icon-plus" type="primary"
+               @click="add"></el-button>
+
+    <!--  内容层  -->
+    <div v-for="(item,index) in value" :key="index" class="array-item">
+      <div class="array-item-input">
+        <el-tooltip :disabled="(!isImg && !isLink) || validateNull(item)" placement="bottom">
+          <div slot="content">
+            <component :is="isMediaType(item)" v-if="isImg" :src="item" controls="controls" style="width: 200px"
+                       @click="openImg(index)"></component>
+
+            <el-link v-else-if="isLink" :href="item" :target="target" type="primary">{{ item }}</el-link>
+          </div>
+          <el-input v-model="value[index]" :disabled="disabled" :placeholder="placeholder" :size="size"
+                    @blur="emitValue"></el-input>
+        </el-tooltip>
+
+        <!--  新增/删除  -->
+        <template v-if="!(disabled || alone)">
+          <el-button v-if="!isLimit" :disabled="disabled" :size="size" circle icon="el-icon-plus" type="primary"
+                     @click="add(index)"></el-button>
+          <el-button :disabled="disabled" :size="size" circle icon="el-icon-minus" type="danger"
+                     @click="remove(index)"></el-button>
+        </template>
+      </div>
+    </div>
+
+  </div>
+</template>
+
+<script>
+import {isMediaType, validateNull} from "../../../tools/utils";
+import Props                       from "./Props"
+
+export default {
+  name: "EdInputArray",
+  props: Props,
+  computed: {
+    isLimit() {
+      if (validateNull(this.limit)) return false
+      else if (this.textLen >= this.limit) return true
+      return false
+    },
+    textLen() {
+      return this.value.length
+    },
+    isImg() {
+      return this.type === 'img'
+    },
+    isLink() {
+      return this.type === 'link'
+    },
+  },
+  methods: {
+    isMediaType,
+    validateNull,
+    // 新增
+    add(index) {
+      this.value.splice(index + 1, 0, '');
+    },
+    // 删除
+    remove(index) {
+      this.value.splice(index, 1)
+    },
+    // 打开
+    openImg() {
+    },
+    emitValue() {
+      // this.$emit('input', value)
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.ed-input--array {
+
+  .array-item {
+    margin-bottom: 5px;
+
+    .array-item-input {
+      display: flex;
+
+      .el-input {
+        flex: auto;
+      }
+
+      .el-button {
+        margin-left: 5px;
+      }
+    }
+  }
+}
+</style>

package/src/components/ed-base-vue/package/EdInputColor/index.js

@@ -0,0 +1,8 @@
+import InputColor from './src/InputColor.vue'
+
+/* istanbul ignore next */
+InputColor.install = function (Vue) {
+    Vue.component(InputColor.name, InputColor)
+}
+
+export default InputColor

package/src/components/ed-base-vue/package/EdInputColor/src/InputColor.vue

@@ -0,0 +1,81 @@
+<template>
+  <div :class="customClass" class="ed-input-color">
+    <el-input v-model="colorValue" :clearable="clearable" :disabled="disabled"
+              :placeholder="placeholder" :prefix-icon="prefixIcon" :readonly="readonly" :size="size"
+              :suffix-icon="suffixIcon">
+      <template slot="append">
+        <el-color-picker v-model="colorValue"
+                         :color-format="colorFormat"
+                         :disabled="disabled"
+                         :popper-class="popperClass"
+                         :predefine="predefine"
+                         :show-alpha="showAlpha"
+                         :size="size"
+                         @activeChange="activeChange"
+                         @change="handleChange"></el-color-picker>
+      </template>
+    </el-input>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "EdInputColor",
+  props: {
+    // 值
+    value: {type: String},
+    // 自定义class 类名
+    customClass: {type: String},
+    // 输入框头部图标
+    prefixIcon: {type: String},
+    // 输入框尾部图标
+    suffixIcon: {type: String},
+    // 输入框占位文本
+    placeholder: {type: String},
+    // 是否禁用
+    disabled: {type: Boolean, default: false},
+    // 输入框尺寸
+    size: {type: String, default: 'small'},
+    // 	原生属性，是否只读
+    readonly: {type: Boolean, default: false},
+    // 是否可清空
+    clearable: {type: Boolean, default: false},
+    // ColorPicker 下拉框的类名
+    popperClass: {type: String},
+    // 预定义颜色
+    predefine: {type: Array},
+    // 写入 v-model 的颜色的格式 hsl / hsv / hex / rgb
+    colorFormat: {type: String, default: 'hex'},
+    // 是否支持透明度选择
+    showAlpha: {type: Boolean, default: false},
+  },
+  data() {
+    return {
+      colorValue: this.value
+    }
+  },
+  methods: {
+    handleChange(e) {
+      this.$emit("input", e)
+      this.$emit("change", e)
+    },
+
+    activeChange(e) {
+      this.$emit("activeChange", e)
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+@import "../../../style/index";
+
+.ed-input-color {
+  ::v-deep {
+    .el-color-picker {
+      display: block;
+    }
+  }
+}
+
+</style>

package/src/components/ed-base-vue/package/EdInputMap/index.js

@@ -0,0 +1,9 @@
+// Map坐标选择器
+import EdInputMap from './src/EdInputMap.vue';
+
+/* istanbul ignore next */
+EdInputMap.install = function (Vue) {
+  Vue.component(EdInputMap.name, EdInputMap)
+}
+
+export default EdInputMap;

package/src/components/ed-base-vue/package/EdInputMap/src/EdInputMap.vue

@@ -0,0 +1,246 @@
+<template>
+  <div>
+    <el-input v-model="value" placeholder="请选择坐标" readonly @focus="handlerFocus"/>
+
+    <!-- 地图弹窗 -->
+    <ed-dialog ref="elsDialog" :close-on-click-modal="false" :closeOnPressEscape="false" :title="title"
+                :visible="visible"
+                width="65vw" @close="handlerClose" @ok="handlerOk">
+      <!-- 查询表单 -->
+      <ed-form ref="elsForm" :inline="true" v-model="formData" :form-desc="formDesc">
+        <template v-slot:form-btn>
+          <el-button icon="el-icon-search" type="primary" @click="handlerSearch">搜索</el-button>
+          <el-button icon="el-icon-delete" @click="handlerClear">清空</el-button>
+        </template>
+      </ed-form>
+
+      <!-- 地图渲染 -->
+      <div class="gao-de-map">
+        <div id="gao-de-map"></div>
+        <div v-show="showPlaceSearch" id="map__result"></div>
+      </div>
+    </ed-dialog>
+  </div>
+</template>
+
+<script>
+import AMapLoader from "@amap/amap-jsapi-loader";
+
+window._AMapSecurityConfig = {
+  securityJsCode: '0be9b3d556aa10ca3b722f97ce0b96c6' // 输入你的jscode
+}
+/**
+ * 地图组件
+ *
+ * - 示例
+ *
+ * ```vue
+ * <ed-input-map v-model="elsFormData" :options="elsFormOptions">
+ * </ed-input-map>
+ * ```
+ *
+ * [](./EdInputMap.md ':include')
+ */
+export default {
+  name: "EdInputMap",
+  props: {
+    //默认值
+    value: {
+      type: String,
+      default: ""
+    },
+    //标题
+    title: {
+      type: String,
+      default: "坐标选择器"
+    },
+    //选项
+    options: {
+      type: Object
+    },
+  },
+
+  data() {
+    return {
+      visible: false,
+      map: null, // 地图
+      placeSearch: null, // //构造地点查询类
+      showPlaceSearch: false, // 是否显示搜索结果
+      auto: null, // 搜索框自动完成类
+      startIcon: null, // 自定义标记图标属性
+      formDesc: [{
+        label: '地址',
+        prop: "address",
+        children: {tags: "el-input", attrs: {id: "mapInput", placeholder: `输入关键字选取地点`}}
+      }],
+      formData: {},
+    }
+  },
+  watch: {
+    options: {
+      handler(nVal, oVal) {
+        if (nVal) {
+          if (nVal.jsCode) {
+            // 该写法只推荐在开发阶段，如果在生产阶段建议采用反向代理
+            // 官网说明https://lbs.amap.com/api/javascript-api/guide/abc/prepare
+
+          }
+        }
+      },
+      deep: true,
+      immediate: true
+    }
+  },
+  methods: {
+    /**
+     * @description 初始化地图
+     */
+    initMap() {
+      console.log('initMap')
+      AMapLoader.load({
+        "key": this.options.key,              // 申请好的Web端开发者Key，首次调用 load 时必填
+        "version": "2.0",   // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
+        "plugins": ["AMap.AutoComplete", "AMap.PlaceSearch", "AMap.Geocoder"],           // 需要使用的的插件列表，如比例尺'AMap.Scale'等
+
+      }).then((AMap) => {
+        console.log(AMap)
+        // 初始化地图
+        this.map = new AMap.Map("gao-de-map", {
+          viewMode: "2D",  //  是否为3D地图模式
+          zoom: 18,   // 初始化地图级别
+          willReadFrequently: true,
+          resizeEnable: true
+        });
+
+        // 关键字查询
+        this.searchMap();
+
+        // 配置标记点
+        this.initMarker()
+
+        // 监听鼠标点击事件
+        this.map.on("click", this.clickMapHandler);
+      }).catch(err => {
+        console.log(err)
+      });
+    },
+
+    // 配置搜索框及搜索结果
+    searchMap() {
+      // 搜索框自动完成类
+      this.auto = new AMap.AutoComplete({
+        input: "mapInput", // 使用联想输入的input的id
+      });
+      //构造地点查询类
+      this.placeSearch = new AMap.PlaceSearch({
+        pageSize: 10, // 单页显示结果条数
+        pageIndex: 1, // 页码
+        map: this.map,
+        panel: "map__result", // 结果列表将在此容器中进行展示。
+        autoFitView: true, // 是否自动调整地图视野使绘制的 Marker点都处于视口的可见范围
+        extensions: 'base' //返回基本地址信息
+      });
+
+      // 当选中某条搜索记录时触发
+      this.auto.on("select", this.selectSite);
+    },
+
+    // 配置标记点
+    initMarker() {
+      if (Object.prototype.hasOwnProperty.call(this.options, 'icons')) {
+        const icons = this.options.icons
+
+        //创建marker图标的大小和图片路径
+        this.startIcon = new AMap.Icon({
+          // 图标尺寸
+          size: new AMap.Size(icons.size, icons.size),
+          // 图标的取图地址
+          image: icons.image,
+          // 图标所用图片大小
+          imageSize: new AMap.Size(icons.imageSize, icons.imageSize),
+          // 图标取图偏移量
+          imageOffset: new AMap.Pixel(icons.imageOffset[0], icons.imageOffset[1])
+        });
+      }
+    },
+
+    // 实例化点标记
+    setMapMarker(position) {
+      this.marker = new AMap.Marker({
+        icon: this.startIcon,
+        map: this.map,
+        position: position,
+        offset: new AMap.Pixel(-5, -30),
+      });
+    },
+
+    // 地图点击事件
+    clickMapHandler(e) {
+      console.log(e)
+      if (this.marker) {
+        this.marker.setMap(null);
+        this.marker = null;
+      }
+      this.setMapMarker([e.lnglat.lng, e.lnglat.lat])
+    },
+
+    //当选中某条搜索记录时触发
+    selectSite(e) {
+      console.log(e)
+    },
+    // 确认
+    handlerOk() {
+
+    },
+
+    // 获取焦点时,打开弹窗
+    handlerFocus() {
+      this.visible = true
+      this.$nextTick(() => {
+        this.initMap()
+      })
+    },
+
+    // 关闭
+    handlerClose() {
+      this.visible = false
+    },
+    // 清空
+    handlerClear() {
+    },
+    // 搜索
+    handlerSearch() {
+      this.placeSearch.search(this.formData.address, (status, res) => {
+        if (status === 'complete') {
+          console.log(status)
+          console.log(res)
+          this.showPlaceSearch = true
+        }
+      });
+    },
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+@import "../../../style/index";
+.gao-de-map {
+  height: 50vh;
+  position: relative;
+
+  #gao-de-map {
+    height: 100%;
+  }
+
+  #map__result {
+    position: absolute;
+    background-color: white;
+    height: 100%;
+    overflow-y: auto;
+    top: 0;
+    right: 0;
+    width: 280px;
+  }
+}
+
+</style>

package/src/components/ed-base-vue/package/EdInputMap/src/EdInputMapProps.js

@@ -0,0 +1,6 @@
+/**
+ * EdInputMap组件属性
+ */
+export default {
+
+}

package/src/components/ed-base-vue/package/EdInputPop/index.js

@@ -0,0 +1,13 @@
+/**
+ * <EdInputPop v-model="value"></EdInputPop>
+ * @description input 放大输入
+ */
+
+import EdInputPop from './src/EdInputPop.vue';
+
+/* istanbul ignore next */
+EdInputPop.install = function (Vue) {
+  Vue.component(EdInputPop.name, EdInputPop)
+}
+
+export default EdInputPop;

package/src/components/ed-base-vue/package/EdInputPop/src/EdInputPop.vue

@@ -0,0 +1,144 @@
+<template>
+  <div>
+    <el-popover ref="popover" v-model="visible" v-bind="bindProps()" @show="handlerShow" @hide="handlerHide">
+      <!-- content -->
+      <template v-slot:default>
+        <div class="el-popover-title">
+          <span>{{ content }}</span>
+          <i class="el-icon-close" title="关闭"></i>
+        </div>
+        <el-input ref="textarea" :disabled="disabled" :style="{ height: height + 'px' }" v-model="inputContent"
+                  type="textarea" :size="size"
+                  @blur="popBlur" @input="handleInputChange"/>
+      </template>
+
+      <!-- reference -->
+      <el-input slot="reference" :disabled="disabled" v-model="inputContent" :placeholder="placeholder" :size="size"
+                @change="handleInputChange">
+        <i slot="suffix" class="el-input__icon el-icon-full-screen" @click.stop="pop"></i>
+      </el-input>
+    </el-popover>
+
+  </div>
+</template>
+
+<script>
+import props, { PopverProps } from './Props'
+
+/**
+ * 支持放大输入的输入框
+ *
+ * - 示例
+ *
+ * ```vue
+ * <ed-input-pop ref="elsInputPop" :title="title" :value="value" @change="handlerChange">
+ * </ed-input-pop>
+ * ```
+ *
+ * [](./EdInputPopProps.md ':include')
+ *
+ * [](./EdInputPopverProps.md ':include')
+ */
+export default {
+  name: "EdInputPop",
+  props: props,
+  model: {
+    prop: 'value',
+    event: 'change'
+  },
+  data() {
+    return {
+      visible: false,
+      inputContent: ''
+    }
+  },
+  watch: {
+    value: {
+      immediate: true,
+      handler: function () {
+        if (this.value && this.value.length > 0) {
+          this.inputContent = this.value;
+        }
+      }
+    },
+  },
+  methods: {
+    /**
+     * 绑定属性
+     * @private
+     * @returns {any}
+     */
+    bindProps() {
+      let props = Object.assign({}, this.$attrs, this.$props)
+      Object.keys(PopverProps).map(key => {
+        if (!Object.prototype.hasOwnProperty.call(props, key)) {
+          delete props[key]
+        }
+      })
+      return props
+    },
+    /**
+     * 输入框内容改变时触发
+     * @param event
+     */
+    handleInputChange(event) {
+      /**
+       * 调用父组件的change事件
+       */
+      this.$emit('change', event)
+    },
+    /**
+     * 弹出放大的输入界面
+     */
+    pop() {
+      this.visible = true
+      this.$nextTick(() => {
+        this.$refs.textarea.focus()
+      })
+    },
+    /**
+     * 关闭放大的输入界面
+     */
+    popBlur() {
+      this.visible = false
+    },
+
+    /**
+     * @name handlerShow
+     * @description 弹出框显示时触发
+     */
+    handlerShow(){
+      this.$emit('show')
+    },
+
+    /**
+     * @name handlerHide
+     * @description 隐藏时触发
+     */
+    handlerHide(){
+      this.$emit('hide')
+    },
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+@import "../../../style/index";
+
+::v-deep {
+
+  .el-textarea__inner {
+    width: 100%;
+    padding: 0;
+    height: 100%;
+  }
+}
+
+.el-popover-title {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding-bottom: 5px;
+  margin-bottom: 5px;
+}
+</style>