vue2-client 1.2.51 → 1.2.52

package/src/base-client/components/common/AmapMarker/AmapPointRendering.vue

@@ -1,107 +1,111 @@
-<template >
-  <div id="amap_point_rendering_map" :style="mapStyle">
-    <div v-show="false">
-      <div id="amap_point_rendering_template">
-        <a-descriptions :column="1">
-          <a-descriptions-item v-for="(des, index) in describeList" :key="index" :label="des.describe" >{{ markers[des.field] }}</a-descriptions-item>
-        </a-descriptions>
-      </div>
-    </div>
-  </div>
-</template>
-<script>
-  import { GetGDMap } from '@vue2-client/utils/map-utils'
-  export default {
-    name: 'AmapPointRendering',
-    props: {
-      // 选中点位后需要展示的信息描述
-      describeList: {
-        type: Array,
-        // eslint-disable-next-line vue/require-valid-default-prop
-        default: () => { return [ ] } // lng:描述信息 lat:描述信息对应的值的字段名 { describe: '用户名称', field: 'name' }
-      },
-      // 需要渲染的点位数据
-      markers: {
-        type: Object,
-        default: null // lng:经度值 lat:纬度值
-      },
-      // 渲染点位的图片
-      imgurl: {
-        type: String,
-        default: '/image/success1.png'
-      },
-      mapStyle: {
-        type: Object,
-        default: () => {
-          return {
-            width: '100%',
-            height: '85vh',
-            border: '2px solid lightgray',
-            'border-radius': '5px'
-          }
-        }
-      }
-    },
-    data () {
-      return {
-        map: null,
-        geocoder: null, // 逆地理编码
-        infoWindow: null,
-        selectrow: {}
-      }
-    },
-    created () {
-    },
-    async mounted () {
-     await this.initMap()
-     await this.initData()
-    },
-    methods: {
-      async initData () {
-        const aMap = GetGDMap()
-        // 创建一个 Marker 实例：
-        if (this.markers && this.markers.lng && this.markers.lat) {
-          const that = this
-          const marker = new (aMap).Marker({
-            position: new (aMap).LngLat(this.markers.lng, this.markers.lat), // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
-            title: '北京',
-            icon: new (aMap).Icon({
-              size: new (aMap).Size(26, 28), // 图标大小
-              url: this.imgurl, // 报警图标URL
-              anchor: new (aMap).Pixel(0, 0), // 图标偏移位置
-            }),
-            extData: this.markers
-          })
-          marker.on('click', function (e) {
-            that.infoWindow.setContent(document.getElementById('amap_point_rendering_template'))
-            that.infoWindow.open(that.map, [e.target.getExtData().lng, e.target.getExtData().lat])
-          })
-          // 将创建的点标记添加到已有的地图实例：
-          this.map.add(marker)
-          this.map.setFitView()
-        }
-      },
-      async initMap () {
-        const aMap = GetGDMap()
-        this.map = new (aMap).Map('amap_point_rendering_map', { // 设置地图容器id
-          resizeEnable: true, // 是否监控地图容器尺寸变化
-          zoom: 17, // 初始化地图层级
-          center: [108.943784, 34.265] // 初始化地图中心点
-        })
-        this.geocoder = new (aMap).Geocoder({
-          radius: 500 // 范围，默认：500
-        })
-        this.map.addControl(new (aMap).ToolBar()) // 初始化工具插件
-        // 初始化窗体
-        this.infoWindow = new (aMap).InfoWindow({
-          anchor: 'bottom-center',
-          isCustom: false, // 使用自定义窗体
-          autoMove: true,
-          content: '',
-          showShadow: true,
-          offset: new (aMap).Pixel(0, -25)
-        })
-      }
-    }
-  }
-</script>
+<template >
+  <div id="amap_point_rendering_map" :style="mapStyle">
+    <div v-show="false">
+      <div id="amap_point_rendering_template">
+        <a-descriptions :column="1">
+          <a-descriptions-item v-for="(des, index) in describeList" :key="index" :label="des.describe" >{{ markers[des.field] }}</a-descriptions-item>
+        </a-descriptions>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+  import { GetGDMap } from '@vue2-client/utils/map-utils'
+  export default {
+    name: 'AmapPointRendering',
+    props: {
+      // 选中点位后需要展示的信息描述
+      describeList: {
+        type: Array,
+        // eslint-disable-next-line vue/require-valid-default-prop
+        default: () => { return [ ] } // lng:描述信息 lat:描述信息对应的值的字段名 { describe: '用户名称', field: 'name' }
+      },
+      // 需要渲染的点位数据
+      markers: {
+        type: Object,
+        default: null // lng:经度值 lat:纬度值
+      },
+      // 渲染点位的图片
+      imgurl: {
+        type: String,
+        default: '/image/success1.png'
+      },
+      mapStyle: {
+        type: Object,
+        default: () => {
+          return {
+            width: '100%',
+            height: '85vh',
+            border: '2px solid lightgray',
+            'border-radius': '5px'
+          }
+        }
+      }
+    },
+    data () {
+      return {
+        map: null,
+        geocoder: null, // 逆地理编码
+        infoWindow: null,
+        selectrow: {}
+      }
+    },
+    created () {
+    },
+    mounted () {
+      GetGDMap().then(aMap => {
+        this.initMap(aMap)
+        this.initData(aMap)
+      })
+    },
+    methods: {
+      initMap (aMap) {
+        this.map = new (aMap).Map('amap_point_rendering_map', { // 设置地图容器id
+          resizeEnable: true, // 是否监控地图容器尺寸变化
+          zoom: 17, // 初始化地图层级
+          center: [108.943784, 34.265] // 初始化地图中心点
+        })
+        this.geocoder = new (aMap).Geocoder({
+          radius: 500 // 范围，默认：500
+        })
+        this.map.addControl(new (aMap).ToolBar()) // 初始化工具插件
+        // 初始化窗体
+        this.infoWindow = new (aMap).InfoWindow({
+          anchor: 'bottom-center',
+          isCustom: false, // 使用自定义窗体
+          autoMove: true,
+          content: '',
+          showShadow: true,
+          offset: new (aMap).Pixel(0, -25)
+        })
+      },
+      initData (aMap) {
+        // 创建一个 Marker 实例：
+        if (this.markers && this.markers.lng && this.markers.lat) {
+          const that = this
+          const marker = new (aMap).Marker({
+            // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
+            position: new (aMap).LngLat(this.markers.lng, this.markers.lat),
+            title: '北京',
+            icon: new (aMap).Icon({
+              // 图标大小
+              size: new (aMap).Size(26, 28),
+              // 报警图标URL
+              url: this.imgurl,
+              // 图标偏移位置
+              anchor: new (aMap).Pixel(0, 0),
+            }),
+            extData: this.markers
+          })
+          marker.on('click', function (e) {
+            that.infoWindow.setContent(document.getElementById('amap_point_rendering_template'))
+            that.infoWindow.open(that.map, [e.target.getExtData().lng, e.target.getExtData().lat])
+          })
+          // 将创建的点标记添加到已有的地图实例：
+          this.map.add(marker)
+          this.map.setFitView()
+        }
+      }
+    }
+  }
+</script>

package/src/base-client/components/common/CitySelect/CitySelect.vue

@@ -0,0 +1,244 @@
+<template>
+  <div>
+    <a-cascader
+      v-if="type === 'cascader'"
+      :options="tagData.divisionsForTree"
+      :placeholder="placeholder"
+      style="width: 100%;"
+      :size="size"
+    />
+    <a-select
+      ref="select"
+      :size="size"
+      :value="valueView"
+      style="width: 100%;"
+      :dropdownMatchSelectWidth="false"
+      :dropdownStyle="dropdownStyle"
+      :placeholder="placeholder"
+      @blur="selectBlurHandle"
+      :getPopupContainer=" triggerNode => { return triggerNode.parentNode } "
+      :style="inputStyle">
+      <div slot="dropdownRender" @mousedown.prevent>
+        <a-tabs v-model="activeKey" :size="size">
+          <a-tab-pane
+            :tab="view.key"
+            v-for="(view,index) in viewArr"
+            :key="view.key"
+            v-if="contexts > index"
+            :disabled="tagData[view.value].length === 0">
+
+            <a-checkable-tag
+              :style="tagStyle"
+              v-for="item of tagData[view.value]"
+              :key="item.code"
+              @change="tagClick(view.key,item)">
+              <a-tooltip
+                placement="top"
+                :mouseEnterDelay="0.5"
+                :title="item.name"
+                :getPopupContainer=" triggerNode => { return triggerNode.parentElement } "
+              >
+                {{ item.name.length > 8 ?`${item.name.slice(0, 8)}...`:item.name }}
+              </a-tooltip>
+            </a-checkable-tag>
+          </a-tab-pane>
+        </a-tabs>
+      </div>
+    </a-select>
+  </div>
+</template>
+
+<script>
+const viewArr = [
+  {
+    key: '省/直辖市',
+    value: 'divisionsForTree',
+  }, {
+    key: '市',
+    value: 'cityData',
+  }, {
+    key: '区',
+    value: 'areaData',
+  }, {
+    key: '街道',
+    value: 'streetData',
+  }
+]
+export default {
+  name: 'CitySelect',
+  data () {
+    return {
+      open: false,
+      tagData: {
+        divisionsForTree: this.$appdata.getDivisionsOhChinaForTree(),
+        // 市
+        cityData: [],
+        // 区
+        areaData: [],
+        // 街道
+        streetData: [],
+      },
+      // model: {
+      //   provinceModel: { name: '', code: '' },
+      //   cityModel: { name: '', code: '' },
+      //   areaModel: { name: '', code: '' },
+      //   streetModel: { name: '', code: '' }
+      // },
+      model: [
+        { name: '', code: '' },
+        { name: '', code: '' },
+        { name: '', code: '' },
+        { name: '', code: '' }
+      ],
+      // 控制标签
+      activeKey: '省/直辖市',
+      // 遍历以渲染页面
+      viewArr,
+      // 框内显示值 valueView
+      valueView: undefined
+    }
+  },
+  mounted () {
+
+  },
+  model: {
+    prop: 'value',
+    event: 'onChange'
+  },
+  computed: {},
+  props: {
+    // 页面渲染内容  默认 省市区街道 四个 所以是4
+    contexts: {
+      type: Number,
+      default: 3
+    },
+    placeholder: {
+      type: String,
+      default: '请选择省市区'
+    },
+    // small lage 输入框大小
+    size: {
+      type: String,
+      default: undefined
+    },
+    // 类型 simple / undefined
+    // simple 就是用的 cascader  不穿就是用的 自己封装的
+    type: {
+      type: String,
+      default: undefined
+    },
+    // 框的样式
+    inputStyle: {
+      type: Object,
+      default: () => {
+      }
+    },
+    // 下拉框的样式
+    dropdownStyle: {
+      type: Object,
+      default: () => {
+        return {
+          width: '35rem',
+          padding: '1%'
+        }
+      }
+    },
+    // 标签的样式
+    tagStyle: {
+      type: Object,
+      default: () => {
+        return {
+          fontSize: '0.88rem',
+          width: '23%',
+          textAlign: 'left',
+          margin: '0.5%',
+          cursor: 'pointer'
+        }
+      }
+    },
+    // 用于v-model 绑定
+    value: {
+      type: String,
+      default: undefined
+    },
+    // 用于v-model 绑定 code :最后一级的code  address: 所有级拼接的地址
+    valueType: {
+      type: String,
+      default: 'address'
+    }
+  },
+  watch: {},
+  methods: {
+    tagClick (e, item) {
+      if (e === '省/直辖市') {
+        // 如果是同一个标签
+        if (this.model[0].name !== item.name) {
+          this.tagData.cityData = item.children
+          this.tagData.areaData = []
+          this.tagData.streetData = []
+          this.model[0].name = item.name
+          this.model[0].code = item.code
+          this.model[1] = { name: '', code: '' }
+          this.model[2] = { name: '', code: '' }
+          this.model[3] = { name: '', code: '' }
+        }
+        if (this.contexts !== 1) {
+          this.activeKey = '市'
+        }
+        this.getResultText(1)
+      } else if (e === '市') {
+        if (this.model[1].name !== item.name) {
+          this.tagData.areaData = item.children
+          this.tagData.streetData = []
+          this.model[1].name = item.name
+          this.model[1].code = item.code
+          this.model[2] = { name: '', code: '' }
+          this.model[3] = { name: '', code: '' }
+        }
+        if (this.contexts !== 2) {
+          this.activeKey = '区'
+        }
+        this.getResultText(2)
+      } else if (e === '区') {
+        if (this.model[2].name !== item.name) {
+          this.tagData.streetData = item.children
+          this.model[2].name = item.name
+          this.model[2].code = item.code
+          this.model[3] = { name: '', code: '' }
+        }
+        if (this.contexts !== 3) {
+          this.activeKey = '街道'
+        }
+        this.getResultText(3)
+      } else if (e === '街道') {
+        if (this.model[3].name !== item.name) {
+          this.model[3].name = item.name
+          this.model[3].code = item.code
+        }
+        this.getResultText(4)
+      }
+    },
+    getResultText (tag) {
+      const address = []
+      let code = ''
+      for (let i = 0; i < this.contexts; i++) {
+        if (this.model[i].name && this.model[i].name !== '') {
+          address.push(this.model[i].name)
+        }
+        code = this.model[i].code ?? ''
+      }
+      this.valueView = this.valueType === 'address' ? address.join('/') : code
+      if (tag === this.contexts) {
+        this.$refs.select.blur()
+        this.$emit('onChange', this.valueType === 'address' ? address.join('') : code)
+      }
+    },
+    // 失去焦点回调
+    selectBlurHandle () {
+      if (!this.model[this.contexts - 1].code || this.model[this.contexts - 1].code === '') {
+        this.valueView = undefined
+      }
+    }
+  }
+}
+</script>

package/src/base-client/components/common/CitySelect/index.js

@@ -0,0 +1,3 @@
+import CitySelect from './CitySelect'
+
+export default CitySelect

package/src/base-client/components/common/CitySelect/index.md

@@ -0,0 +1,109 @@
+# 省市区修改组件
+
+> 下拉框数据从库里查询 divisions_of_china 表
+> 省市区数据存储格式
+
++---------+-----+------------+--------+--------+----------+
+|code     |name |provinceCode|cityCode|areaCode|parentCode|
++---------+-----+------------+--------+--------+----------+
+|11       |北京市  |NULL        |NULL    |NULL    |NULL      |
+|1101     |市辖区  |11          |NULL    |NULL    |11        |
+|110101   |东城区  |11          |1101    |NULL    |1101      |
+|110101001|东华门街道|11          |1101    |110101  |1101     |
+|110101002|景山街道 |11          |1101    |110101  |1101      |
++---------+-----+------------+--------+--------+----------+
+
+
+查询出来之后转成tree 作为数据 (截取了一段数据)
+
+```json
+[
+    {
+        "code": "11",
+        "name": "北京",
+        "label": "北京",
+        "value": "北京",
+        "children":
+        [
+            {
+                "code": "1101",
+                "parentcode": "11",
+                "name": "辖区",
+                "label": "辖区",
+                "value": "辖区",
+                "children":
+                [
+                  {
+                    "code": "110101",
+                    "parentcode": "1101",
+                    "name": "东城区",
+                    "label": "东城区",
+                    "value": "东城区"
+                  }
+                ]}]}]
+```
+
+可传递参数
+```js
+props = {
+    // 页面渲染内容  默认 省市区街道 四个 所以是4
+    contexts: {
+      type: Number,
+      default: 3
+    },
+    placeholder: {
+      type: String,
+      default: '请选择省市区'
+    },
+    // small lage 输入框大小
+    size: {
+      type: String,
+      default: undefined
+    },
+    // 类型 simple / undefined
+    // simple 就是用的 cascader  不穿就是用的 自己封装的
+    type: {
+      type: String,
+      default: undefined
+    },
+    // 框的样式
+    inputStyle: {
+      type: Object,
+      default: () => {
+      }
+    },
+    // 下拉框的样式
+    dropdownStyle: {
+      type: Object,
+      default: () => {
+        return {
+          width: '35rem',
+          padding: '1%'
+        }
+      }
+    },
+    // 标签的样式
+    tagStyle: {
+      type: Object,
+      default: () => {
+        return {
+          fontSize: '0.88rem',
+          width: '23%',
+          textAlign: 'left',
+          margin: '0.5%',
+          cursor: 'pointer'
+        }
+      }
+    },
+    // 用于v-model 绑定
+    value: {
+      type: String,
+      default: undefined
+    },
+    // 用于v-model 绑定 code :最后一级的code  address: 所有级拼接的地址
+    valueType: {
+      type: String,
+      default: 'address'
+    }
+  }
+```