@v2coding/ui 0.1.1 → 0.1.6

package/src/components/table/table.vue

@@ -20,7 +20,7 @@
         </div>
       </div>
     </div>
-    <flex-scroll-view>
+    <fill-view>
       <el-table
         ref="table"
         height="100%"
@@ -42,7 +42,7 @@
           <div class="ui-table-empty">暂无数据</div>
         </template>
       </el-table>
-    </flex-scroll-view>
+    </fill-view>
     <div v-show="hasPagination" class="footer-bar">
       <slot name="footer-bar"/>
     </div>
@@ -50,6 +50,7 @@
   </div>
 </template>
 <script>
+  import FillView from '../fill-view/fill-view';
   import ExportsMixin from '../exports/mixin';
   import RemoteExportsDialog from '../exports/remote-exports-dialog';
 
@@ -595,12 +596,13 @@
       // },
     },
     components: {
+      FillView,
       RemoteExportsDialog,
       Refresh: {
         render(createElement) {
           return createElement('el-tooltip', {props: {content: '刷新'}}, [
               createElement('el-button', {
-                props: {icon: 'el-icon-fa-refresh', size: 'mini', circle: true},
+                props: {icon: 'el-icon-refresh', size: 'mini', circle: true},
                 on: {click: this.$parent.reload},
               }),
           ]);
@@ -610,7 +612,7 @@
         render(createElement) {
           return createElement('el-tooltip', {props: {content: '导出Excel'}}, [
               createElement('el-button', {
-                props: {icon: 'el-icon-fa-cloud-download', size: 'mini', circle: true},
+                props: {icon: 'el-icon-download', size: 'mini', circle: true},
                 on: {click: this.$parent.exportsRemote},
               }),
           ]);
@@ -665,7 +667,7 @@
           }
           return createElement('el-tooltip', {props: {content: this.$parent.searchBarVisible ? '隐藏查询区域' : '显示查询区域'}}, [
               createElement('el-button', {
-                props: {icon: 'el-icon-fa-search', circle: true},
+                props: {icon: 'el-icon-search', circle: true},
                 on: {click: this.$parent.toggleSearchBarVisible},
               }),
           ]);
@@ -777,7 +779,7 @@
 
     .ui-table-empty {
       padding-top: 110px;
-      background: url("../../../assets/img/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/field/field.upload.portrait.vue

@@ -1,304 +0,0 @@
-<template>
-  <div>
-    <div class="ui-image-upload-file">
-      <div class="item" v-show="showPhoto">
-        <div class="modal">
-          <a :href="photoUrl" target="_blank"><i class="el-icon-zoom-in"></i></a>
-          <i class="el-icon-delete" @click="remove()"></i>
-        </div>
-        <div class="image" :style="{'background-image': `url(${imgUrl})`}"></div>
-      </div>
-      <el-row v-show="!showPhoto">
-        <div @click="showDialog" class="item upload-btn">
-          <i class="el-icon-fa-camera"></i>
-        </div>
-      </el-row>
-    </div>
-    <ui-dialog :title="title" :visible.sync="visible" width="30%" :confirm="onConfirm">
-      <el-row v-loading="videoLoading">
-        <video id="videos" width="100%"/>
-      </el-row>
-      <el-row class="close">
-        <el-col v-show="false">
-          <canvas id="canvas" :width="w + 'px'" :height="h + 'px'"/>
-        </el-col>
-        <el-col :span="12">
-          <img :src="imgUrl" class="show-img" width="100%" alt="">
-        </el-col>
-        <el-col :span="12" class="buttons">
-          <div class="buttons-desc">
-            <div class="capture">
-              <div
-                  :class="{'out-circle': true, reduce: isReduce}"
-                  @click="capture"
-                  @mousedown="isReduce = true"
-                  @mouseup="isReduce = false"
-                  @mouseleave="isReduce = false"
-              >
-                <i class="el-icon-fa-camera"></i>
-              </div>
-            </div>
-            <el-button @click="updatePortrait">上传照片</el-button>
-          </div>
-        </el-col>
-      </el-row>
-      <span slot="footer" class="dialog-footer">
-        <el-button>取 消</el-button>
-        <el-button type="primary">确 定</el-button>
-      </span>
-    </ui-dialog>
-  </div>
-</template>
-<script>
-  import FieldMixin from './field.mixin';
-  import Upload from './field.helper.upload';
-
-  export default {
-    name: 'ui-field-upload-portrait',
-    mixins: [FieldMixin],
-    data() {
-      return {
-        videoLoading: true, //相机初始化loading
-        isReduce: false, //拍照按钮动画
-        front: true,//是否打开后摄像头
-        showPhoto: false,
-        imgUrl: '',
-        photoUrl: '',
-        w: 320,
-        h: 240,
-      };
-    },
-    props: {
-      params: {
-        type: Object,
-        default: () => ({
-          rootDirName: 'image',
-          fileType: 2,
-        }),
-      },
-      title: {
-        type: String,
-        default: '请上传照片',
-      },
-      filename: {
-        type: String,
-        default: 'file',
-      },
-      url: {
-        type: String,
-        default: '/api/oss/upload',
-      },
-      uploadType: {
-        type: String,
-        validator: (val) => ['oss', 'default'].includes(val),
-        default: 'default',
-      },
-      visible: {
-        type: Boolean,
-        default: false,
-      },
-    },
-    methods: {
-      remove() {
-        this.imgUrl = '';
-        this.showPhoto = false;
-      },
-      showDialog() {
-        this.visible = true;
-        this.init();
-      },
-      onConfirm() {
-        if (this.photoUrl === '') {
-          this.$message.error('请上传图片后点击确定');
-          return;
-        }
-        this.visible = false;
-        this.onChange(this.photoUrl);
-        this.showPhoto = true;
-      },
-      //点击拍照
-      capture() {
-        const videoDom = document.getElementById('videos');
-        const canvas = document.getElementById('canvas');
-        const ctx = canvas.getContext('2d');
-        ctx.drawImage(videoDom, 0, 0, this.w, this.h);
-        this.imgUrl = canvas.toDataURL();
-      },
-      //初始化 打开摄像头
-      init() {
-        const _this = this;
-        const constraints = {video: {width: this.w, height: this.h, facingMode: {exact: this.front ? 'user' : 'environment'}}};
-        navigator.mediaDevices.getUserMedia(constraints).then(function(mediaStream) {
-          const video = document.querySelector('video');
-          video.srcObject = mediaStream;
-          _this.videoLoading = false;
-          video.onloadedmetadata = function() {
-            video.play();
-          };
-        }).catch(function(err) {
-          console.log(err.name + ': ' + err.message);
-        }); // 总是在最后检查错误
-      },
-      //base64转file
-      toFile(value, fileName) {
-        if (value !== null || ('' && value.indexOf('base'))) {
-          const arr = value.split(','), mime = arr[0].match(/:(.*?);/)[1], bsTr = atob(arr[1]);
-          let n = bsTr.length, u8arr = new Uint8Array(n);
-          while (n--) {
-            u8arr[n] = bsTr.charCodeAt(n);
-          }
-          return new File([u8arr], fileName, {type: mime});
-        }
-      },
-      //上传照片
-      updatePortrait() {
-        if (!this.imgUrl) {
-          this.$message.error('请先拍照后上传');
-          return;
-        }
-        const file = this.toFile(this.imgUrl, 'file.png');
-        console.log(file);
-        const uploadServer = Upload[this.uploadType] || Upload.default;
-        uploadServer(this.url, this.params, {file, filename: this.filename}).then((result) => {
-          console.log(result);
-          this.photoUrl = result.content.url;
-          if (!result.success) {
-            this.$message.error(result.message || '上传失败');
-            return;
-          }
-          this.$message.success('上传成功');
-          this.onChange('');
-        });
-      },
-    },
-  };
-</script>
-<style lang="less" scoped>
-  .ui-image-upload-file {
-    width: 100%;
-    display: flex;
-    flex-direction: row;
-    flex-wrap: wrap;
-
-    .item {
-      position: relative;
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      overflow: hidden;
-      width: 140px;
-      height: 140px;
-      margin-bottom: 10px;
-      margin-right: 10px;
-      border: 1px dashed #d0d2d7;
-      padding: 8px;
-      border-radius: 2px;
-      box-sizing: border-box;
-
-      .modal {
-        position: absolute;
-        top: 0;
-        right: 0;
-        bottom: 0;
-        left: 0;
-        display: flex;
-        align-items: center;
-        justify-content: space-around;
-        background: rgba(0, 0, 0, 0.5);
-        visibility: hidden;
-        line-height: initial;
-        border-radius: 2px;
-
-        [class^='el-icon-'] {
-          color: #fff;
-          font-size: 1.5em;
-          cursor: pointer;
-        }
-      }
-
-      > .image {
-        width: 100%;
-        height: 100%;
-        background: no-repeat center;
-        background-size: contain;
-      }
-
-      &.upload-btn {
-        background: #edeef0;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        border: none;
-        cursor: pointer;
-
-        & > i {
-          width: 2em;
-          color: #888c94;
-          font-size: 20px;
-          line-height: 1.2;
-        }
-      }
-    }
-
-    .item:hover .modal {
-      visibility: visible;
-    }
-
-    ::v-deep .preview {
-      display: inline-block;
-      width: auto;
-      max-width: 60%;
-      left: 50%;
-      transform: translateX(-50%);
-    }
-  }
-
-  .show-img {
-    border: 1px dashed #ccc;
-    padding: 5px;
-  }
-
-  .capture {
-    width: 60px;
-    height: 60px;
-    border-radius: 50%;
-    background: #ccc;
-    text-align: center;
-    color: #CCC;
-    overflow: hidden;
-    margin: 0 auto 10px;
-
-    .out-circle {
-      width: 50px;
-      height: 50px;
-      background: #FFF;
-      border-radius: 50%;
-      line-height: 55px;
-      margin: 5px auto;
-      overflow: hidden;
-      cursor: pointer;
-
-      i {
-        font-size: 20px;
-      }
-    }
-
-    .reduce {
-      transform: scale(.8);
-      transition: .2s linear;
-    }
-  }
-
-  .buttons {
-    position: relative;
-    height: 240px;
-
-    .buttons-desc {
-      position: absolute;
-      top: 50%;
-      left: 50%;
-      transform: translate(-50%, -50%);
-
-    }
-  }
-</style>

package/src/components/head-menu/index.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: '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,84 +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() {
-      if (this.isLeaf) {
-        return (
-          <el-menu-item index={this.index} route={this.route}>
-            <template slot="title">{this.item.name}</template>
-          </el-menu-item>
-        );
-      }
-      return (
-        <el-submenu index={this.index} popperClass={this.popperClass} popper-append-to-body={false}>
-          <template slot="title">{this.item.name}</template>
-          {this.item.children.map(child => <head-menu-submenu key={child.id} item={child}/>)}
-        </el-submenu>
-      );
-    },
-  };
-</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>