luosijie / vue-manager

A panel framework based on Vue 2.0, iView and ECharts.

Vue Panel Framework, Live Demo

 

安装

1. install node / npm(cnpm)
2. git clone "https://github.com/luosijie/vue-manager"
3. cnpm install
4. npm run dev
5. visit localhost:8080

依赖

1. Vue2.0
2. iView
3. ECharts

全局样式

你可以通过修改less文件 theme/index.less 来自定义全局样式

组件使用

组件列表

例子

vm-progress

属性	描述	类型	默认
title	自定义标题	String	Progress
data	显示的结构化数据	Array	详见属性

属性

    props: {
      title: {
        type: String,
        default: 'Progress'
      },
      data: {
        type: Array,
        default: function () {
          return [
            {
              name: 'JesseLuo',
              tags: ['hansome', 'cool'],
              value: 100
            }
          ]
        }
      }
    }

应用

<VmProgress title="工作进度" :data="dataProgress"></VmProgress>
...
export default {
  data: function () {
   return dataProgress: [
      {
        name: 'Jesse Luo',
        tags: ['很帅', '逗比'],
        value: 90
      },
      {
        name: 'Angla Cool',
        tags: ['美丽', '感性', '文艺'],
        value: 30
      },
      {
        name: 'lele Wang',
        tags: ['气质', '厉害'],
        value: 80
      },
      {
        name: 'Jesse Ca',
        tags: ['才女', '努力', '博学'],
        value: 20
      },
      {
        name: 'Jesse Lee',
        tags: ['很帅', '牛逼'],
        value: 100
      }
    ],
  }
}

vm-timeline

属性	描述	类型	默认
title	自定义标题	String	时间轴
data	显示的结构化数据	Array	详见属性

属性

   props: {
      title: {
        type: String,
        default: '时间轴'
      },
      data: {
        type: Array,
        default: function () {
          return [
            {
              date: '2017年6月26日',
              time: '11:58 am',
              content: '完成VmManager时间轴组件'
            }
          ]
        }
      }
    }

应用

<VmTimeline :data="dataTimeline"></VmTimeline>
...

export default {
  data: function () {
    return {
      dataTimeline: [
        {
          date: '2017年7月15日',
          time: '8:35 am',
          content: 'Lorem ipsum dolor sit amet consiquest dio'
        },
        {
          date: '2017年7月15日',
          time: '8:35 am',
          content: 'Lorem ipsum dolor sit amet consiquest dio'
        },
        {
          date: '2017年7月15日',
          time: '8:35 am',
          content: 'Lorem ipsum dolor sit amet consiquest dio'
        },
        {
          date: '2017年7月15日',
          time: '8:35 am',
          content: 'Lorem ipsum dolor sit amet consiquest dio'
        },
        {
          date: '2017年7月15日',
          time: '8:35 am',
          content: 'Lorem ipsum dolor sit amet consiquest dio'
        }
      ]
    }
  }
}

vm-chart-bar-line

属性	描述	类型	默认
title	自定义标题	String	时间轴
height	图表高度	Number	400
color	图表渲染颜色,依次从颜色数组中提取	Array	详见属性
bgColor	图表背景色	String	#fff
xAxisData	横坐标的值	Array	详见属性
series	纵坐标的值	Array	详见属性

属性

   props: {
      // 图表区域高度
      title: {
        type: String,
        default: '柱形图'
      },
      height: {
        type: Number,
        default: 400
      },
      // 图表形状颜色, ecahrt依次选择颜色渲染
      color: {
        type: Array,
        default: function () {
          return chartTheme.color
        }
      },
      // 背景颜色
      bgColor: {
        type: String,
        default: '#fff'
      },
      // 横坐标数据
      xAxisData: {
        type: Array,
        required: true,
        default: function () {
          return ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
        }
      },
      // 纵坐标数据
      series: {
        type: Array,
        required: true,
        default: function () {
          return [{
            name: '销量',
            type: 'bar',
            data: [5, 20, 36, 10, 10, 20]
          }]
        }
      }
    }

应用

<VmChartBarLine  title="二维柱形图" :xAxisData="dataBar2.xAxisData" :series="dataBar2.series">
</VmChartBarLine>
...

export default {
  data: function () {
    return {
      dataBar2: {
        xAxisData: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子'],
        series: [
          {
            name: '销量',
            type: 'bar',
            data: [50, 200, 360, 100, 100, 200]
          },
          {
            name: '增长量',
            type: 'bar',
            data: [5, 20, 36, 10, 10, 20]
          }
        ]
      },
    }
  }
}

vm-table

属性	描述	类型	默认
title	自定义标题	String	Basic Table
type	可编辑和不可编辑,不可编辑值为 edit	String	null
columns	表格列的配置描述	Array	[]
data	显示的结构化数据	Array	[]

属性

   props: {
      title: {
        type: String,
        default: 'Basic Table'
      },
      type: String,
      columns: Array,
      data: Array
    }

事件 编辑模式下可用

事件名	描述	返回值
edit-ok	编辑完成后触发	编辑表单的数据
add-ok	添加完成后触发	添加表单的数据
delete-ok	删除完成后触发	删除的数据集合

应用

<VmTable title="可编辑表格" 
         type="edit" 
         :columns="dataColumns" 
         :data="dataTable"
         v-on:add-ok="add"
         v-on:edit-ok="edit"
         v-on:delete-ok="deletefn">
</VmTable>
...

export default {
  methods: {
    add: function (data) {
      //...
    },
    edit: function (data) {
      //...
    },
    deletefn: function (data) {
      //...
    }
  },
  data: function () {
    return {
      dataColumns: [
        {
          title: '编号',
          key: 'id'
        },
        {
          title: '姓名',
          key: 'name'
        },
        {
          title: '年龄',
          key: 'age'
        },
        {
          title: '地址',
          key: 'address'
        }
      ],
      dataTable: [
        {
          id: '65416s843154',
          name: '王小明',
          age: 18,
          address: '北京市朝阳区芍药居'
        },
        {
          id: '6541684q6534',
          name: '张小刚',
          age: 25,
          address: '北京市海淀区西二旗'
        },

        ...

        {
          id: '65419843f154',
          name: '周小伟',
          age: 26,
          address: '深圳市南山区深南大道'
        }
      ]
    }
  }
}

vue-manager's Issues

表格搜索功能

表格右上角的搜索,应该是搜索之后只显示搜索出的结果,但是现在是搜索之后,结果显示在当前页,但是总条数和页数都没有改变,而且可以翻页,下一页的内容和搜索的没有什么关系.

父子组件传数据问题

[Vue warn]: Error in callback for watcher "data": "TypeError: Cannot set property '_index' of undefined" 父子组件数据传递出现这样一个问题怎么解决呢？

It's awesome,and you are headsome!

插件很Nice，但是我觉得有个小问题，如果当前组件是keep-alive状态，改变default-text的绑定值，编辑器是不会更新的

如果组件是keep-alive状态，这个方法是不执行的，建议加上 activated钩子

Cool, keep doing.

iview对响应式的支持貌似不太好

网站通过手机浏览器访问，基本就不可用，该怎么解决？～

導航菜單不響應

導航菜單多切換幾次就會出現不響應的情況，但不是一直不響應。

是否可以为table item的添加和修改添加属性校验？

UI风格很棒，希望能持续维护下去

网站更新后，请求 js 文件会有路径错误的问题，需手动清理浏览器缓存

设置权限之后，访问时会跳转 login 页面，好像有个强跳转效果，导致浏览器不会去服务器请求最新的页面资源；看了下应该是<router-view name="blank">的问题？

文本编辑功能对后台来说很重要

是否考虑加入一下文本编辑的功能，同时支持下markdown

很不错的项目，有个分页小问题

感觉对于学习vue的话很全面，表格分页好像不能自己输入分页数目？只能自增或者自减？

异步请求图表不显示

用axios异步请求赋值，图表没有渲染出来

请问如何放到Laravel中，或者有demo吗

请问为啥不把less的代码放在每个组件的.vue文件中

1.感觉这样会比较好维护，否则后期theme/components.less会很庞大，修改起来也不方便，放在组件里，只要快速找到组件的vue文件，就可以修改了。

2.目前遇到一个问题，如果放在组件的.vue文件中，修改.ivu-xxx这种全局class不管用，必须放在theme/index.less才有效果，该怎么解决。

关于刷新后，导航菜单丢失焦点的问题

Hi 兄弟，如果我选择了一个导航菜单，进入某个页面，然后刷新浏览器，就会发现之前的导航菜单结构和焦点全部没了，这个你有什么好的解决思路没

这个左边的二级菜单怎么改造成三级菜单呢？