@v2coding/ui 0.1.3 → 0.1.7

package/src/components/field/field.lnglat.vue

@@ -0,0 +1,236 @@
+<template>
+  <div class="ui-field-latlng" v-loading="loading">
+    <div class="map"></div>
+    <div class="info" v-show="!loading">
+      <div class="input-item searchbox">
+        <div class="input-item-prepend">
+          <span class="input-item-text">搜索关键字</span>
+        </div>
+        <!--    form="__ignore__" 避免 enter提交表单    -->
+        <input ref="input" type="text" form="__ignore__" placeholder="请输入...">
+        <div ref="output" class="search-result"></div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+  import gcoord from 'gcoord';
+  import {getAMap} from '../../config/config.amap';
+  import FieldMixin from './field.mixin';
+
+  const CoordTypes = {
+    bd09: gcoord.BD09,
+    gcj02: gcoord.GCJ02,
+    wgs84: gcoord.WGS84,
+  };
+
+  export default {
+    name: 'ui-field-latlng',
+    mixins: [FieldMixin],
+    props: {
+      coordType: {
+        type: String,
+        default: 'wgs84',
+        validator: (val) => Object.keys(CoordTypes).includes(val),
+      },
+    },
+    data() {
+      return {
+        loading: true,
+        keyword: '',
+      };
+    },
+    computed: {
+      point() {
+        if (!this.value) {
+          return null;
+        }
+        if (!this.isValidPoint(this.value)) {
+          return null;
+        }
+        const [lat, lng] = this.value.split(',');
+        return {lat: +lat, lng: +lng};
+      },
+    },
+    watch: {
+      point(p) {
+        this.onPointChange(p);
+      },
+    },
+    methods: {
+      init() {
+        getAMap(['AMap.ToolBar', 'AMap.Geolocation', 'AMap.AutoComplete']).then((AMap) => {
+          this.initMap(AMap);
+          this.loading = false;
+          this.done();
+        });
+      },
+      initMap(AMap) {
+        const map = new AMap.Map(this.$el.querySelector('.map'), {
+          zoom: 11,
+        });
+
+        map.addControl(new AMap.ToolBar({position: 'RT'}));
+        map.addControl(new AMap.Geolocation({position: 'RB'}));
+        const auto = new AMap.AutoComplete({
+          input: this.$refs.input,
+          output: this.$refs.output,
+        });
+
+        map.on('click', this.onMapClick);
+        auto.on('select', (event) => {
+          if (!event.poi || !event.poi.location) {
+            return;
+          }
+          map.setZoomAndCenter(16, event.poi.location);
+        });
+
+        this.map = map;
+
+        this.onPointChange(this.point);
+      },
+      isValidPoint(val) {
+        const [lat, lng] = val.split(',');
+        return !(isNaN(+lat) || isNaN(+lng));
+      },
+      onMapClick({lnglat}) {
+        let {lat, lng} = lnglat;
+        // 当前地图是 GCJ02 坐标系
+        if (this.coordType !== 'gcj02') {
+          [lng, lat] = gcoord.transform([lng, lat], gcoord.GCJ02, CoordTypes[this.coordType]);
+          lng = lng.toFixed(7) / 1;
+          lat = lat.toFixed(7) / 1;
+        }
+        this.onChange([lat, lng].join(','));
+      },
+      onPointChange(point) {
+        if (!this.map) {
+          return;
+        }
+        this.map.clearMap();
+        if (!point) {
+          return;
+        }
+        let {lng, lat} = point;
+        // 当前地图是 GCJ02 坐标系
+        if (this.coordType !== 'gcj02') {
+          [lng, lat] = gcoord.transform([lng, lat], CoordTypes[this.coordType], gcoord.GCJ02);
+        }
+        // eslint-disable-next-line no-undef
+        const marker = new AMap.Marker({position: new AMap.LngLat(lng, lat)});
+        this.map.add(marker);
+        this.map.setCenter([lng, lat]);
+      },
+    },
+  };
+</script>
+
+<style lang="less">
+  .ui-field-latlng {
+    width: 100%;
+    height: 280px;
+    position: relative;
+
+    .map {
+      width: 100%;
+      height: 100%;
+    }
+
+    .info {
+      position: absolute;
+      top: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      pointer-events: none;
+
+      .searchbox {
+        left: 12px;
+        top: 12px;
+        background-color: #fff;
+        box-shadow: 0 0 3px rgba(0, 0, 0, .5);
+        pointer-events: initial;
+        border-radius: 3px;
+        padding: 3px;
+
+        .search-result {
+          position: absolute;
+          top: calc(100% - 2px);
+          left: 0;
+          right: 0;
+          background-color: #fefefe;
+          box-shadow: 0 1px 3px #999 ;
+          visibility: hidden;
+          border-radius: 0 0 3px 3px;
+
+          .auto-item {
+            white-space: nowrap;
+            font-size: 12px;
+            cursor: pointer;
+            padding: 4px;
+            line-height: 14px;
+          }
+        }
+      }
+    }
+
+    .input-item {
+      position: relative;
+      display: inline-flex;
+      align-items: center;
+      width: 220px;
+      font-size: 12px;
+
+      .input-item-prepend {
+        margin-right: -1px;
+
+        .input-item-text {
+          padding: 0.25em 0.5em;
+          display: block;
+          text-justify: distribute-all-lines;
+          text-align-last: justify;
+          align-items: center;
+          margin-bottom: 0;
+          font-weight: 400;
+          line-height: 1.5;
+          color: #495057;
+          text-align: center;
+          white-space: nowrap;
+          background-color: #e9ecef;
+          border: 1px solid #ced4da;
+          border-radius: .25rem 0 0 .25rem;
+          box-sizing: border-box;
+        }
+      }
+
+      input {
+        position: relative;
+        flex: 1 1 auto;
+        width: 1%;
+        margin: 0;
+        background: #fff;
+        padding: 0.25em 0.5em;
+        display: inline-block;
+        line-height: 1.5;
+        color: #495057;
+        vertical-align: middle;
+        border: 1px solid #ced4da;
+        border-radius: 0 .25rem .25rem 0;
+        appearance: none;
+        box-sizing: border-box;
+
+        &:focus {
+          border-color: #80bdff;
+          outline: 0;
+          box-shadow: 0 0 0 0.1rem rgba(128, 189, 255, .1);
+        }
+      }
+    }
+
+    .amap-logo,
+    .amap-copyright {
+      display: none !important;
+    }
+  }
+</style>

package/src/components/field/field.upload.file.vue

@@ -79,7 +79,7 @@
     },
     createAttachmentUrl: {
       type: String,
-      default: '/Sys/SysAttachment/create',
+      default: '/System/SystemSysAttachment/create',
     },
     createAttachmentParams: null,
     createAttachment: {

package/src/components/history/history.vue

@@ -109,7 +109,7 @@ export default {
       this.$emit("remove-history", { type: "current", name: path });
     },
     onContextMenu(event) {
-      const container = this.$el.querySelector(".scroll-nav__nav");
+      const container = this.$el.querySelector(".ui-scroll-view__nav");
       const index = this.getChildContainIndex(container, event.target);
       const rect = this.$el.getBoundingClientRect();
       if (index !== -1) {
@@ -168,7 +168,7 @@ export default {
   position: relative;
   margin: 10px 0 0;
 
-  .history-tabs.scroll-nav__nav-wrap {
+  .history-tabs.ui-scroll-view__nav-wrap {
     left: 0;
     right: 0;
     top: 0;
@@ -176,11 +176,11 @@ export default {
     position: absolute;
     align-items: flex-end;
 
-    .scroll-nav__nav-scroll {
+    .ui-scroll-view__nav-scroll {
       flex: 1;
     }
 
-    .scroll-nav__nav-control {
+    .ui-scroll-view__nav-control {
       width: 20px;
       height: 30px;
 
@@ -194,7 +194,7 @@ export default {
       }
     }
 
-    .scroll-nav__nav {
+    .ui-scroll-view__nav {
       align-items: flex-end;
     }
 

package/src/components/table/table.vue

@@ -779,7 +779,7 @@
 
     .ui-table-empty {
       padding-top: 110px;
-      background: url("../../assets/svg/empty.svg") center top no-repeat;
+      background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTg0IiBoZWlnaHQ9IjE1MiIgdmlld0JveD0iMCAwIDE4NCAxNTIiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPGcgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj4KICAgIDxnIHRyYW5zZm9ybT0idHJhbnNsYXRlKDI0IDMxLjY3KSI+CiAgICAgIDxlbGxpcHNlIGZpbGwtb3BhY2l0eT0iLjgiIGZpbGw9IiNGNUY1RjciIGN4PSI2Ny43OTciIGN5PSIxMDYuODkiIHJ4PSI2Ny43OTciIHJ5PSIxMi42NjgiPjwvZWxsaXBzZT4KICAgICAgPHBhdGggZD0iTTEyMi4wMzQgNjkuNjc0TDk4LjEwOSA0MC4yMjljLTEuMTQ4LTEuMzg2LTIuODI2LTIuMjI1LTQuNTkzLTIuMjI1aC01MS40NGMtMS43NjYgMC0zLjQ0NC44MzktNC41OTIgMi4yMjVMMTMuNTYgNjkuNjc0djE1LjM4M2gxMDguNDc1VjY5LjY3NHoiIGZpbGw9IiNBRUI4QzIiPjwvcGF0aD4KICAgICAgPHBhdGggZD0iTTEwMS41MzcgODYuMjE0TDgwLjYzIDYxLjEwMmMtMS4wMDEtMS4yMDctMi41MDctMS44NjctNC4wNDgtMS44NjdIMzEuNzI0Yy0xLjU0IDAtMy4wNDcuNjYtNC4wNDggMS44NjdMNi43NjkgODYuMjE0djEzLjc5Mmg5NC43NjhWODYuMjE0eiIgZmlsbD0idXJsKCNsaW5lYXJHcmFkaWVudC0xKSIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMTMuNTYpIj48L3BhdGg+CiAgICAgIDxwYXRoIGQ9Ik0zMy44MyAwaDY3LjkzM2E0IDQgMCAwIDEgNCA0djkzLjM0NGE0IDQgMCAwIDEtNCA0SDMzLjgzYTQgNCAwIDAgMS00LTRWNGE0IDQgMCAwIDEgNC00eiIgZmlsbD0iI0Y1RjVGNyI+PC9wYXRoPgogICAgICA8cGF0aAogICAgICAgIGQ9Ik00Mi42NzggOS45NTNoNTAuMjM3YTIgMiAwIDAgMSAyIDJWMzYuOTFhMiAyIDAgMCAxLTIgMkg0Mi42NzhhMiAyIDAgMCAxLTItMlYxMS45NTNhMiAyIDAgMCAxIDItMnpNNDIuOTQgNDkuNzY3aDQ5LjcxM2EyLjI2MiAyLjI2MiAwIDEgMSAwIDQuNTI0SDQyLjk0YTIuMjYyIDIuMjYyIDAgMCAxIDAtNC41MjR6TTQyLjk0IDYxLjUzaDQ5LjcxM2EyLjI2MiAyLjI2MiAwIDEgMSAwIDQuNTI1SDQyLjk0YTIuMjYyIDIuMjYyIDAgMCAxIDAtNC41MjV6TTEyMS44MTMgMTA1LjAzMmMtLjc3NSAzLjA3MS0zLjQ5NyA1LjM2LTYuNzM1IDUuMzZIMjAuNTE1Yy0zLjIzOCAwLTUuOTYtMi4yOS02LjczNC01LjM2YTcuMzA5IDcuMzA5IDAgMCAxLS4yMjItMS43OVY2OS42NzVoMjYuMzE4YzIuOTA3IDAgNS4yNSAyLjQ0OCA1LjI1IDUuNDJ2LjA0YzAgMi45NzEgMi4zNyA1LjM3IDUuMjc3IDUuMzdoMzQuNzg1YzIuOTA3IDAgNS4yNzctMi40MjEgNS4yNzctNS4zOTNWNzUuMWMwLTIuOTcyIDIuMzQzLTUuNDI2IDUuMjUtNS40MjZoMjYuMzE4djMzLjU2OWMwIC42MTctLjA3NyAxLjIxNi0uMjIxIDEuNzg5eiIKICAgICAgICBmaWxsPSIjRENFMEU2Ij48L3BhdGg+CiAgICA8L2c+CiAgICA8cGF0aCBkPSJNMTQ5LjEyMSAzMy4yOTJsLTYuODMgMi42NWExIDEgMCAwIDEtMS4zMTctMS4yM2wxLjkzNy02LjIwN2MtMi41ODktMi45NDQtNC4xMDktNi41MzQtNC4xMDktMTAuNDA4QzEzOC44MDIgOC4xMDIgMTQ4LjkyIDAgMTYxLjQwMiAwIDE3My44ODEgMCAxODQgOC4xMDIgMTg0IDE4LjA5N2MwIDkuOTk1LTEwLjExOCAxOC4wOTctMjIuNTk5IDE4LjA5Ny00LjUyOCAwLTguNzQ0LTEuMDY2LTEyLjI4LTIuOTAyeiIgZmlsbD0iI0RDRTBFNiI+PC9wYXRoPgogICAgPGcgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMTQ5LjY1IDE1LjM4MykiIGZpbGw9IiNGRkYiPgogICAgICA8ZWxsaXBzZSBjeD0iMjAuNjU0IiBjeT0iMy4xNjciIHJ4PSIyLjg0OSIgcnk9IjIuODE1Ij48L2VsbGlwc2U+CiAgICAgIDxwYXRoIGQ9Ik01LjY5OCA1LjYzSDBMMi44OTguNzA0ek05LjI1OS43MDRoNC45ODVWNS42M0g5LjI1OXoiPjwvcGF0aD4KICAgIDwvZz4KICA8L2c+Cjwvc3ZnPgo=) center top no-repeat;
       background-size: auto 100px;
       color: rgba(0, 0, 0, 0.65);
       font-size: 14px;

package/src/components/head-menu/head-menu.vue

@@ -1,188 +0,0 @@
-<template>
-  <el-menu
-    class="head-menu"
-    v-bind="$attrs"
-    v-on="$listeners"
-    :mode="mode"
-    :router="router"
-    :default-active="active"
-  >
-    <menu-item v-for="item in displayMenus" :item="item" :key="item.id"/>
-  </el-menu>
-</template>
-
-<script>
-  import {mapState} from 'vuex';
-  import MenuItem from './menu-item';
-
-  export default {
-    name: 'ui-head-menu',
-    components: {MenuItem},
-    provide() {
-      return {
-        headMenu: this,
-      };
-    },
-    props: {
-      router: {
-        type: Boolean,
-        default: true,
-      },
-      defaultActive: String,
-      mode: {
-        default: 'horizontal',
-      },
-    },
-    data() {
-      return {
-        packUpWidth: 0,
-      };
-    },
-    computed: {
-      ...mapState(['menus']),
-      headMenu() {
-        // eslint-disable-next-line
-        return this.menus.filter(menu => [1, 2].includes(menu.type)).map(({children, ...menu}) => menu);
-      },
-      active() {
-        if (!this.router) {
-          return this.defaultActive;
-        }
-        const currentPath = this.$route.path;
-        const isHeadRoute = this.headMenu.some(menu => menu.url === currentPath);
-        if (isHeadRoute) {
-          return currentPath;
-        }
-        const currentHeadMenu = this.getCurrentHeadMenu(currentPath, this.menus);
-        return currentHeadMenu && (currentHeadMenu.path || currentHeadMenu.url);
-      },
-      menuWidth() {
-        return this.headMenu.reduce((total, item) => {
-          return total + (item.name || '').split('').length * 16 + 25 * 2; // 16:字体大小值; 25:左右padding/margin值
-        }, 60); // 100:菜单左边的margin值
-      },
-      packUpIndex() {
-        if (this.packUpWidth <= 0) {
-          return -1;
-        }
-        let index = -1;
-        let width = this.packUpWidth + 130; // 50:更多下拉菜单所占宽度
-        for(let i = this.headMenu.length - 1; i >= 0; i--) {
-          const item = this.headMenu[i];
-          const currentWidth = (item.name || '').split('').length * 16 + 25 * 2;
-          if (currentWidth >= width) {
-            index = i - 1;
-            break;
-          }
-          width = width - currentWidth;
-        }
-        return Math.max(0, index);
-      },
-      displayMenus() {
-        if (this.packUpIndex === -1) {
-          return this.headMenu;
-        }
-        const menus = this.headMenu.slice(0, this.packUpIndex);
-        const moreMenus = this.headMenu.slice(this.packUpIndex);
-        menus.push({
-          id: 'more',
-          name: '更多菜单',
-          children: moreMenus,
-        });
-        return menus;
-      },
-    },
-    mounted() {
-      window.addEventListener('resize', this.onResize);
-      this.onResize();
-
-      const logo = document.querySelector('.page-header > .logo');
-      logo && logo.addEventListener('load', () => this.onResize());
-    },
-    beforeDestroy() {
-      window.removeEventListener('resize', this.onResize);
-    },
-    methods: {
-      onResize() {
-        clearTimeout(this.timer);
-        this.timer = setTimeout(() => {
-          const headerWidth = document.documentElement.clientWidth;
-          const logoEl = document.querySelector('.page-header > .logo');
-          const titleEl = document.querySelector('.page-header > .title');
-          const messageEl = document.querySelector('.page-header > .screen');
-          const usernameEl = document.querySelector('.page-header > .username');
-          const logoWidth = (logoEl && logoEl.offsetWidth || 0) + 20; // 20 margin
-          const titleWidth = titleEl && titleEl.offsetWidth || 0;
-          const messageElWidth = messageEl && messageEl.offsetWidth || 0;
-          const usernameWidth = usernameEl && usernameEl.offsetWidth || 0;
-          const allowedMenuWidth = headerWidth - 60 - logoWidth - titleWidth - messageElWidth - usernameWidth;
-          this.packUpWidth = Math.max(0, this.menuWidth - allowedMenuWidth);
-        }, 50);
-      },
-      getCurrentHeadMenu(path, menus) {
-        if (!Array.isArray(menus) || menus.length <= 0) {
-          return undefined;
-        }
-        return menus.find(menu => {
-          const isMatched = (menu.children || []).some(childMenu => (childMenu.path || childMenu.url) === path);
-          if (isMatched) {
-            return true;
-          }
-          return this.getCurrentHeadMenu(path, menu.children);
-        });
-      },
-    },
-  };
-</script>
-
-<style lang="scss">
-
-  .head-menu.el-menu {
-    background-color: transparent;
-    border-bottom: none;
-
-    > .el-menu-item,
-    > .el-submenu .el-submenu__title {
-      font-size: 16px;
-      font-weight: 400;
-      color: inherit;
-      height: var(--header-height);
-      line-height: var(--header-height);
-      padding: 0 25px;
-      border: none;
-      box-sizing: border-box;
-      transition: all 0.2s ease-in-out;
-
-      span {
-        vertical-align: unset;
-      }
-
-      i {
-        width: 20px;
-        font-size: 14px;
-      }
-    }
-
-    > .el-menu-item:not(.is-disabled):not(.is-active):hover,
-    > .el-menu-item:not(.is-disabled):not(.is-active):focus,
-    > .el-submenu:not(.is-disabled):not(.is-active):hover .el-submenu__title,
-    > .el-submenu:not(.is-disabled):not(.is-active):focus .el-submenu__title {
-      color: inherit;
-      background-color: rgba(0, 146, 63, 0.3);
-    }
-
-    > .el-menu-item.is-active,
-    > .el-submenu.is-active .el-submenu__title {
-      color: inherit;
-      background-color: rgba(0, 146, 63, 0.6);
-    }
-
-    .el-submenu__title i {
-      color: inherit;
-    }
-
-    .el-menu--popup {
-
-    }
-  }
-</style>

package/src/components/head-menu/menu-item.vue

@@ -1,80 +0,0 @@
-<script type="text/jsx">
-  export default {
-    name: 'head-menu-submenu',
-    inject: ['headMenu'],
-    props: {
-      item: Object,
-    },
-    computed: {
-      isLeaf() {
-        const {children} = this.item;
-        return !Array.isArray(children) || children.length <= 0;
-      },
-      index() {
-        const {url, id} = this.item;
-        if (this.isRouter) {
-          return url || id + '';
-        }
-        return id + '';
-      },
-      route() {
-        const {url} = this.item;
-        return url;
-      },
-      isRouter() {
-        return this.headMenu.router;
-      },
-      theme() {
-        return this.headMenu.theme;
-      },
-      popperClass() {
-        return ['nav-menu-submenu-popup', this.theme].join(' ');
-      },
-    },
-    render(createElement) {
-      if (this.isLeaf) {
-        return createElement('el-menu-item', {props: {index: this.index, route: this.route}}, [
-            createElement('template', {slot: 'title'}, [this.item.name]),
-        ]);
-      }
-      return createElement('el-submenu', {props: {index: this.index, popperClass: this.popperClass, popperAppendToBody: false}}, [
-          createElement('template', {slot: 'title'}, [this.item.name]),
-          ...this.item.children.map(child => createElement('head-menu-submenu', {key: child.id, props: {item: child}})),
-      ]);
-    },
-  };
-</script>
-<style lang="less">
-  .el-menu--collapse .el-menu-item [class^=el-icon-],
-  .el-menu--collapse .el-submenu .el-submenu__title [class^=el-icon-] {
-    margin: 0;
-    vertical-align: middle;
-    width: 24px;
-    text-align: center
-  }
-
-  .el-menu--collapse .el-menu-item .el-submenu__icon-arrow,
-  .el-menu--collapse .el-submenu .el-submenu__title .el-submenu__icon-arrow {
-    display: none
-  }
-
-  .el-menu--collapse .el-menu-item span,
-  .el-menu--collapse .el-submenu .el-submenu__title span {
-    height: 0;
-    width: 0;
-    overflow: hidden;
-    visibility: hidden;
-    display: inline-block
-  }
-
-  .nav-menu-submenu-popup {
-
-    .el-menu-item,
-    .el-submenu__title {
-      height: 40px;
-      line-height: 40px;
-      font-size: 12px;
-    }
-  }
-
-</style>