haiwei-ui 1.0.0

package/src/views/components/advanced/details/demo1/demo.vue

@@ -0,0 +1,59 @@
+<template>
+  <nm-box page header no-padding title="产品详情" icon="detail" fullscreen>
+    <nm-details v-bind="details"></nm-details>
+  </nm-box>
+</template>
+<script>
+export default {
+  data() {
+    return {
+      details: {
+        action() {
+          return new Promise(resolve => {
+            resolve({
+              id: 1,
+              title: '三星Galaxy Node 10',
+              price: 6999,
+              store: 98989,
+              des: `三星Galaxy Node 10三星Galaxy Node 10三星Galaxy Node 10三星Galaxy Node 10三星Galaxy
+         Node 10三星Galaxy Node 10三星Galaxy Node 10三星Galaxy Node 10三星Galaxy Node 10三星Galaxy Node 10
+         三星Galaxy Node 10三星Galaxy Node 10三星Galaxy Node 10三星Galaxy Node 10三星Galaxy Node 10
+         三星Galaxy Node 10三星Galaxy Node 10三星Galaxy Node 10三星Galaxy Node 10三星Galaxy Node 10
+         三星Galaxy Node 10三星Galaxy Node 10三星Galaxy Node 10三星Galaxy Node 10三星Galaxy Node 10
+         三星Galaxy Node 10三星Galaxy Node 10三星Galaxy Node 10三星Galaxy Node 10三星Galaxy Node 10`
+            })
+          })
+        },
+        options: [
+          [
+            {
+              label: '编号',
+              prop: 'id'
+            },
+            {
+              label: '产品名称',
+              prop: 'title'
+            }
+          ],
+          [
+            {
+              label: '价格',
+              prop: 'price'
+            },
+            {
+              label: '库存',
+              prop: 'store'
+            }
+          ],
+          [
+            {
+              label: '介绍',
+              prop: 'des'
+            }
+          ]
+        ]
+      }
+    }
+  }
+}
+</script>

package/src/views/components/advanced/details/demo1/index.vue

@@ -0,0 +1,21 @@
+<template>
+  <nm-container>
+    <demo />
+    <nm-code-preview :code="code" />
+  </nm-container>
+</template>
+<script>
+import page from './page.js'
+import Demo from './demo'
+import code from '!!raw-loader!./demo'
+export default {
+  name: page.name,
+  components: { Demo },
+  data() {
+    return {
+      timer: null,
+      code
+    }
+  }
+}
+</script>

package/src/views/components/advanced/details/demo1/page.js

@@ -0,0 +1,14 @@
+/** 页面信息 */
+const page = new (function() {
+  this.title = '详情页实例'
+  this.name = 'components-details-demo1'
+  this.path = '/components/details/demo1'
+  this.icon = 'develop'
+})()
+
+export const route = {
+  page,
+  component: () => import('./index')
+}
+
+export default page

package/src/views/components/advanced/drag-sort/_index/data/attrs.js

@@ -0,0 +1,9 @@
+export default [
+  {
+    name: 'value/v-model',
+    desc: '值',
+    type: 'Arrary',
+    opt: '-',
+    def: '-'
+  }
+]

package/src/views/components/advanced/drag-sort/_index/data/events.js

@@ -0,0 +1,12 @@
+export default [
+  {
+    name: 'start',
+    desc: '拖拽开始',
+    params: '-'
+  },
+  {
+    name: 'end',
+    desc: '拖拽结束',
+    params: 'value'
+  }
+]

package/src/views/components/advanced/drag-sort/_index/index.vue

@@ -0,0 +1,24 @@
+<template>
+  <nm-tmpl v-bind="tmpl"></nm-tmpl>
+</template>
+<script>
+import page from './page.js'
+import attrs from './data/attrs.js'
+import events from './data/events'
+export default {
+  name: page.name,
+  data() {
+    return {
+      tmpl: {
+        title: '拖动排序(nm-drag-sort)',
+        icon: 'list',
+        attrs,
+        events
+      }
+    }
+  },
+  created() {
+    this.setTabName(this.tmpl.title)
+  }
+}
+</script>

package/src/views/components/advanced/drag-sort/_index/page.js

@@ -0,0 +1,16 @@
+/** 页面信息 */
+const page = new (function() {
+  this.title = '拖动排序'
+  this.name = 'components-drag-sort-index'
+  this.path = '/components/drag-sort/index'
+  this.icon = 'list'
+  this.group = 2
+  this.sort = 4
+})()
+
+export const route = {
+  page,
+  component: () => import('./index')
+}
+
+export default page

package/src/views/components/advanced/drag-sort/demo1/demo.vue

@@ -0,0 +1,34 @@
+<template>
+  <nm-box page header title="拖拽排序示例" icon="sort">
+    <nm-box-row height="400px">
+      <nm-box-col :span="12">
+        <nm-drag-sort style="width:500px" v-model="list" />
+      </nm-box-col>
+      <nm-box-col :span="12">
+        <textarea rows="50" cols="100" :value="listJson"></textarea>
+      </nm-box-col>
+    </nm-box-row>
+  </nm-box>
+</template>
+<script>
+export default {
+  data() {
+    let list = []
+    for (var i = 1; i < 10; i++) {
+      list.push({
+        id: i,
+        label: `第${i}个`,
+        sort: i
+      })
+    }
+    return {
+      list
+    }
+  },
+  computed: {
+    listJson() {
+      return JSON.stringify(this.list, null, 2)
+    }
+  }
+}
+</script>

package/src/views/components/advanced/drag-sort/demo1/index.vue

@@ -0,0 +1,21 @@
+<template>
+  <nm-container>
+    <demo />
+    <nm-code-preview :code="code" />
+  </nm-container>
+</template>
+<script>
+import page from './page.js'
+import Demo from './demo'
+import code from '!!raw-loader!./demo'
+export default {
+  name: page.name,
+  components: { Demo },
+  data() {
+    return {
+      timer: null,
+      code
+    }
+  }
+}
+</script>

package/src/views/components/advanced/drag-sort/demo1/page.js

@@ -0,0 +1,14 @@
+/** 页面信息 */
+const page = new (function() {
+  this.title = '拖拽排序示例'
+  this.name = 'components-drag-sort-demo1'
+  this.path = '/components/drag-sort/demo1'
+  this.icon = 'develop'
+})()
+
+export const route = {
+  page,
+  component: () => import('./index')
+}
+
+export default page

package/src/views/components/advanced/drag-sort-dialog/_index/data/attrs.js

@@ -0,0 +1,58 @@
+export default [
+  {
+    name: 'visible',
+    desc: '是否显示',
+    type: 'Boolean',
+    opt: '-',
+    def: 'false'
+  },
+  {
+    name: 'title',
+    desc: '标题',
+    type: 'String',
+    opt: '-',
+    def: '-'
+  },
+  {
+    name: 'icon',
+    desc: '图标',
+    type: 'String',
+    opt: '-',
+    def: 'sort'
+  },
+  {
+    name: 'width',
+    desc: '宽度',
+    type: 'String',
+    opt: '-',
+    def: '400px'
+  },
+  {
+    name: 'height',
+    desc: '高度',
+    type: 'String',
+    opt: '-',
+    def: '60%'
+  },
+  {
+    name: 'query-action',
+    desc: '查询数据方法',
+    type: 'Function',
+    opt: '-',
+    def: '-'
+  },
+  {
+    name: 'update-action',
+    desc: '更新数据方法',
+    type: 'Function',
+    opt: '-',
+    def: '-'
+  },
+  {
+    name: 'close-on-success',
+    desc: '保存成功后关闭',
+    type: 'Boolean',
+    opt: '-',
+    def: 'false'
+  }
+]

package/src/views/components/advanced/drag-sort-dialog/_index/data/events.js

@@ -0,0 +1,12 @@
+export default [
+  {
+    name: 'success',
+    desc: '保存成功事件',
+    params: '排序后的options'
+  },
+  {
+    name: 'error',
+    desc: '保存失败事件',
+    params: '-'
+  }
+]

package/src/views/components/advanced/drag-sort-dialog/_index/index.vue

@@ -0,0 +1,28 @@
+<template>
+  <nm-tmpl v-bind="tmpl">
+    <el-alert type="warning">
+      <p>该组件有固定的数据格式，需要与后端接口搭配使用</p>
+    </el-alert>
+  </nm-tmpl>
+</template>
+<script>
+import page from './page.js'
+import attrs from './data/attrs.js'
+import events from './data/events'
+export default {
+  name: page.name,
+  data() {
+    return {
+      tmpl: {
+        title: '拖动排序对话框(nm-drag-sort-dialog)',
+        icon: 'list',
+        attrs,
+        events
+      }
+    }
+  },
+  created() {
+    this.setTabName(this.tmpl.title)
+  }
+}
+</script>

package/src/views/components/advanced/drag-sort-dialog/_index/page.js

@@ -0,0 +1,16 @@
+/** 页面信息 */
+const page = new (function() {
+  this.title = '拖动排序对话框'
+  this.name = 'components-drag-sort-dialog-index'
+  this.path = '/components/drag-sort-dialog/index'
+  this.icon = 'list'
+  this.group = 2
+  this.sort = 5
+})()
+
+export const route = {
+  page,
+  component: () => import('./index')
+}
+
+export default page

package/src/views/components/advanced/drag-sort-dialog/demo1/demo.vue

@@ -0,0 +1,36 @@
+<template>
+  <nm-box page header title="拖拽排序对话框示例" icon="sort">
+    <nm-button type="primary" text="排序" @click="show = true" />
+    <nm-drag-sort-dialog :query-action="query" :update-action="update" :visible.sync="show"></nm-drag-sort-dialog>
+  </nm-box>
+</template>
+<script>
+export default {
+  data() {
+    return {
+      show: false
+    }
+  },
+  methods: {
+    query() {
+      let options = []
+      for (var i = 1; i < 10; i++) {
+        options.push({
+          id: i,
+          label: `第${i}个`,
+          sort: i
+        })
+      }
+
+      return new Promise(resolve => {
+        resolve({ options })
+      })
+    },
+    update() {
+      return new Promise(resolve => {
+        resolve({ code: 1, data: '' })
+      })
+    }
+  }
+}
+</script>

package/src/views/components/advanced/drag-sort-dialog/demo1/index.vue

@@ -0,0 +1,21 @@
+<template>
+  <nm-container>
+    <demo />
+    <nm-code-preview :code="code" />
+  </nm-container>
+</template>
+<script>
+import page from './page.js'
+import Demo from './demo'
+import code from '!!raw-loader!./demo'
+export default {
+  name: page.name,
+  components: { Demo },
+  data() {
+    return {
+      timer: null,
+      code
+    }
+  }
+}
+</script>

package/src/views/components/advanced/drag-sort-dialog/demo1/page.js

@@ -0,0 +1,14 @@
+/** 页面信息 */
+const page = new (function() {
+  this.title = '拖拽排序对话框示例'
+  this.name = 'components-drag-sort-dialog-demo1'
+  this.path = '/components/drag-sort-dialog/demo1'
+  this.icon = 'develop'
+})()
+
+export const route = {
+  page,
+  component: () => import('./index')
+}
+
+export default page

package/src/views/components/advanced/list/_index/data/attrs.js

@@ -0,0 +1,177 @@
+export default [
+  {
+    name: 'title',
+    desc: '标题',
+    type: 'string',
+    opt: '-',
+    def: '-'
+  },
+  {
+    name: 'icon',
+    desc: '头部左侧的图标',
+    type: 'string',
+    opt: '-',
+    def: '-'
+  },
+  {
+    name: 'action',
+    desc: '数据查询方法，必须',
+    type: 'Function',
+    opt: '-',
+    def: '-'
+  },
+  {
+    name: 'input-width',
+    desc: '查询表单输入框宽度',
+    type: 'String',
+    opt: '-',
+    def: '-'
+  },
+  {
+    name: 'model',
+    desc: '查询模型',
+    type: 'Object',
+    opt: '-',
+    def: '-'
+  },
+  {
+    name: 'rules',
+    desc: '查询模型验证规则',
+    type: 'Object',
+    opt: '-',
+    def: '-'
+  },
+  {
+    name: 'advanced',
+    desc: '高级查询',
+    type: 'Object',
+    opt: '-',
+    def: '数据结构在页面底部'
+  },
+  {
+    name: 'cols',
+    desc: '列信息',
+    type: 'Arrary',
+    opt: '-',
+    def: '数据结构在页面底部'
+  },
+  {
+    name: 'multiple',
+    desc: '是否可多选',
+    type: 'Boolean',
+    opt: '-',
+    def: 'false'
+  },
+  {
+    name: 'show-no',
+    desc: '是否显示序号',
+    type: 'Boolean',
+    opt: '-',
+    def: 'true'
+  },
+  {
+    name: 'no-operation',
+    desc: '不显示操作列',
+    type: 'Boolean',
+    opt: '-',
+    def: 'false'
+  },
+  {
+    name: 'operation-width',
+    desc: '操作列宽度',
+    type: 'String, Number',
+    opt: '-',
+    def: '-'
+  },
+  {
+    name: 'no-select-column',
+    desc: '不显示选择列按钮',
+    type: 'Boolean',
+    opt: '-',
+    def: 'false'
+  },
+  {
+    name: 'no-querybar',
+    desc: '不显示查询栏',
+    type: 'Boolean',
+    opt: '-',
+    def: 'false'
+  },
+  {
+    name: 'no-fullscreen',
+    desc: '不显示全屏按钮',
+    type: 'Boolean',
+    opt: '-',
+    def: 'false'
+  },
+  {
+    name: 'no-refresh',
+    desc: '不显示刷新按钮',
+    type: 'Boolean',
+    opt: '-',
+    def: 'false'
+  },
+  {
+    name: 'no-header',
+    desc: '不显示头部',
+    type: 'Boolean',
+    opt: '-',
+    def: 'false'
+  },
+  {
+    name: 'no-footer',
+    desc: '不显示底部',
+    type: 'Boolean',
+    opt: '-',
+    def: 'false'
+  },
+  {
+    name: 'no-search',
+    desc: '不包含搜索功能',
+    type: 'Boolean',
+    opt: '-',
+    def: 'false'
+  },
+  {
+    name: 'no-search-button-icon',
+    desc: '不显示查询按钮图标',
+    type: 'Boolean',
+    opt: '-',
+    def: 'false'
+  },
+  {
+    name: 'footer-reverse',
+    desc: '底部反转',
+    type: 'Boolean',
+    opt: '-',
+    def: 'false'
+  },
+  {
+    name: 'span-method',
+    desc: '合并行列的方法',
+    type: 'Function',
+    opt: '-',
+    def: '-'
+  },
+  {
+    name: 'loading',
+    desc: '加载中动画',
+    type: 'Boolean',
+    opt: '-',
+    def: 'false'
+  },
+  {
+    name: 'loading-text',
+    desc: '加载中文本',
+    type: 'String',
+    opt: '-',
+    def: 'false'
+  },
+  {
+    name: 'query-on-created',
+    desc: '创建后是否执行一次查询',
+    type: 'Boolean',
+    opt: '-',
+    def: 'true'
+  }
+]

package/src/views/components/advanced/list/_index/data/events.js

@@ -0,0 +1,87 @@
+export default [
+  {
+    name: 'select',
+    desc: '当用户手动勾选数据行的 Checkbox 时触发的事件',
+    params: 'selection, row'
+  },
+  {
+    name: 'select-all',
+    desc: '当用户手动勾选全选 Checkbox 时触发的事件',
+    params: 'selection'
+  },
+  {
+    name: 'selection-change',
+    desc: '当选择项发生变化时会触发该事件',
+    params: 'selection'
+  },
+  {
+    name: 'cell-mouse-enter',
+    desc: '当单元格 hover 进入时会触发该事件',
+    params: 'row, column, cell, event'
+  },
+  {
+    name: 'cell-mouse-leave',
+    desc: '当单元格 hover 退出时会触发该事件',
+    params: 'row, column, cell, event'
+  },
+  {
+    name: 'cell-click',
+    desc: '当某个单元格被点击时会触发该事件',
+    params: 'row, column, cell, event'
+  },
+  {
+    name: 'cell-dblclick',
+    desc: '当某个单元格被双击击时会触发该事件',
+    params: 'row, column, cell, event'
+  },
+  {
+    name: 'row-click',
+    desc: '当某一行被点击时会触发该事件',
+    params: 'row, event, column'
+  },
+  {
+    name: 'row-contextmenu',
+    desc: '当某一行被鼠标右键点击时会触发该事件',
+    params: 'row, event'
+  },
+  {
+    name: 'row-dblclick',
+    desc: '当某一行被双击时会触发该事件',
+    params: 'row, event'
+  },
+  {
+    name: 'header-click',
+    desc: '当某一列的表头被点击时会触发该事件',
+    params: 'column, event'
+  },
+  {
+    name: 'header-contextmenu',
+    desc: '当某一列的表头被鼠标右键点击时触发该事件',
+    params: 'column, event'
+  },
+  {
+    name: 'sort-change',
+    desc: '当表格的排序条件发生变化的时候会触发该事件',
+    params: 'sort,val'
+  },
+  {
+    name: 'current-change',
+    desc: '当表格的当前行发生变化的时候会触发该事件',
+    params: 'currentRow, oldCurrentRow'
+  },
+  {
+    name: 'size-change',
+    desc: '分页大小改变时触发',
+    params: 'size'
+  },
+  {
+    name: 'index-change',
+    desc: '分页页码改变时触发',
+    params: 'index'
+  },
+  {
+    name: 'query',
+    desc: '刷新事件',
+    params: '接口返回的数据对象'
+  }
+]