haiwei-ui 1.0.0

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

@@ -0,0 +1,18 @@
+export default [
+  {
+    name: 'query',
+    desc: '查询'
+  },
+  {
+    name: 'refresh',
+    desc: '刷新(重新设置为第一页)'
+  },
+  {
+    name: 'reset',
+    desc: '重置表单'
+  },
+  {
+    name: 'doLayout',
+    desc: '重新绘制表格布局'
+  }
+]

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

@@ -0,0 +1,46 @@
+export default [
+  {
+    name: 'header-toolbar',
+    desc: '头部工具栏插槽'
+  },
+  {
+    name: 'querybar',
+    desc: '查询栏'
+  },
+  {
+    name: 'querybar-buttons',
+    desc: '查询栏的按钮区域'
+  },
+  {
+    name: 'querybar-advanced',
+    desc: '查询栏的高级查询区域'
+  },
+  {
+    name: 'col-no-header',
+    desc: '序号列的头部插槽'
+  },
+  {
+    name: 'col-no',
+    desc: '自定义序号列'
+  },
+  {
+    name: 'col-operation-header',
+    desc: '操作列头部插槽'
+  },
+  {
+    name: 'col-operation',
+    desc: '自定义操作列'
+  },
+  {
+    name: 'col-{列名}-header',
+    desc: '指定列的头部查询'
+  },
+  {
+    name: 'col-{列名}',
+    desc: '自定义列插槽'
+  },
+  {
+    name: 'footer',
+    desc: '底部左侧区域插槽'
+  }
+]

package/src/views/components/advanced/list/_index/index.vue

@@ -0,0 +1,87 @@
+<template>
+  <nm-tmpl v-bind="tmpl">
+    <el-alert title="说明" type="warning">
+      <p>列表页是根据我个人的经验封装的一个高级组件，专门用于展示列表数据。</p>
+    </el-alert>
+
+    <template v-slot:after-events>
+      <el-alert title="注意事项" type="warning" :closable="false">
+        <p>高级查询属性</p>
+        <pre>
+          {
+            // 是否开启
+            enabled: false,
+
+            // 宽度
+            width: '400px',
+
+            // 高度
+            height: '',
+
+            // 表单标签宽度
+            labelWidth: '100px',
+
+            // 内联表单
+            inline: false
+          }
+        </pre>
+        <p>列信息属性</p>
+        <pre>
+          {
+            // 列的字段名称
+            name: '',
+
+            // 列的显示名称
+            label: '',
+
+            // 宽度
+            width: '',
+
+            // 排序
+            sortable: false,
+
+            // 固定列
+            fixed: false,
+
+            // 对其方式
+            align: 'center',
+
+            // 表头对其方式
+            headerAlign: 'center',
+            // 当内容过长被隐藏时显示 tooltip
+            showOverflowTooltip: false
+
+            // 是否显示
+            show: true
+          }
+        </pre>
+      </el-alert>
+    </template>
+  </nm-tmpl>
+</template>
+<script>
+import page from './page.js'
+import attrs from './data/attrs.js'
+import slots from './data/slots.js'
+import methods from './data/methods.js'
+import events from './data/events.js'
+export default {
+  name: page.name,
+  data() {
+    return {
+      val: '',
+      tmpl: {
+        title: '列表页(nm-list)',
+        icon: 'card',
+        attrs,
+        slots,
+        methods,
+        events
+      }
+    }
+  },
+  created() {
+    this.setTabName(this.tmpl.title)
+  }
+}
+</script>

package/src/views/components/advanced/list/_index/page.js

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

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

@@ -0,0 +1,90 @@
+<template>
+  <nm-list v-bind="list">
+    <template v-slot:querybar>
+      <el-form-item label="姓名：" prop="name">
+        <el-input v-model="list.model.name" />
+      </el-form-item>
+    </template>
+
+    <template v-slot:col-operation>
+      <nm-button type="text" text="编辑" icon="edit" />
+      <nm-button-delete type="text" :action="remove" id="1" @success="onSuccess" />
+    </template>
+  </nm-list>
+</template>
+<script>
+export default {
+  data() {
+    return {
+      list: {
+        title: '简单列表',
+        icon: 'list',
+        action: this.query,
+        rowKey: 'id',
+        treeProps: { children: 'children', hasChildren: 'hasChildren' },
+        model: {
+          name: ''
+        },
+        cols: [
+          {
+            name: 'id',
+            label: '编号',
+            show: false
+          },
+          {
+            name: 'name',
+            label: '姓名'
+          },
+          {
+            name: 'age',
+            label: '年龄'
+          },
+          {
+            name: 'birthday',
+            label: '出生日期',
+            format: 'YYYY年MM月DD日'
+          }
+        ]
+      }
+    }
+  },
+  methods: {
+    query() {
+      const rows = [
+        { id: 1, name: '张三', age: 22, birthday: '1991-1-8' },
+        {
+          id: 2,
+          name: '李四',
+          age: 26,
+          birthday: '1991-1-8 10:33',
+          children: [
+            {
+              id: 31,
+              age: 29,
+              birthday: '2016-05-01',
+              name: '王小虎'
+            },
+            {
+              id: 32,
+              age: 78,
+              birthday: '2016-05-01',
+              name: '王小虎'
+            }
+          ]
+        },
+        { id: 3, name: '王五', age: 26, birthday: '1991-1-8' }
+      ]
+      return new Promise(resolve => {
+        resolve({
+          rows,
+          total: 3
+        })
+      })
+    },
+    remove() {},
+    onSuccess() {
+      this.query()
+    }
+  }
+}
+</script>

package/src/views/components/advanced/list/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/list/demo1/page.js

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

package/src/views/components/advanced/list/demo2/demo.vue

@@ -0,0 +1,78 @@
+<template>
+  <nm-list v-bind="list">
+    <template v-slot:querybar>
+      <el-form-item label="姓名：" prop="name">
+        <el-input v-model="list.model.name" />
+      </el-form-item>
+    </template>
+    <template v-slot:querybar-advanced>
+      <el-form-item label="年龄：" prop="age">
+        <el-input v-model="list.model.age" />
+      </el-form-item>
+    </template>
+    <template v-slot:col-operation>
+      <nm-button type="text" text="编辑" icon="edit" />
+      <nm-button-delete type="text" :action="remove" id="1" @success="onSuccess" />
+    </template>
+  </nm-list>
+</template>
+<script>
+export default {
+  data() {
+    return {
+      list: {
+        title: '简单列表',
+        icon: 'list',
+        action: this.query,
+        model: {
+          name: '',
+          age: ''
+        },
+        advanced: {
+          enabled: true
+        },
+        pageSizes: [50, 100, 200],
+        cols: [
+          {
+            name: 'id',
+            label: '编号',
+            show: false
+          },
+          {
+            name: 'name',
+            label: '姓名'
+          },
+          {
+            name: 'age',
+            label: '年龄'
+          },
+          {
+            name: 'birthday',
+            label: '出生日期',
+            format: 'YYYY年MM月DD日'
+          }
+        ]
+      }
+    }
+  },
+  methods: {
+    query() {
+      const rows = [
+        { id: 1, name: '张三', age: 22, birthday: '1991-1-8' },
+        { id: 2, name: '李四', age: 26, birthday: '1991-1-8 10:33' },
+        { id: 3, name: '王五', age: 26, birthday: '1991-1-8' }
+      ]
+      return new Promise(resolve => {
+        resolve({
+          rows,
+          total: 3
+        })
+      })
+    },
+    remove() {},
+    onSuccess() {
+      this.query()
+    }
+  }
+}
+</script>

package/src/views/components/advanced/list/demo2/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/list/demo2/page.js

@@ -0,0 +1,14 @@
+/** 页面信息 */
+const page = new (function() {
+  this.title = '高级查询'
+  this.name = 'components-list-demo2'
+  this.path = '/components/list/demo2'
+  this.icon = 'develop'
+})()
+
+export const route = {
+  page,
+  component: () => import('./index')
+}
+
+export default page

package/src/views/components/advanced/list/demo4/demo.vue

@@ -0,0 +1,56 @@
+<template>
+  <nm-list-agile v-bind="list">
+    <template v-slot:querybar>
+      <el-form-item label="姓名：" prop="name">
+        <el-input v-model="list.model.name" />
+      </el-form-item>
+    </template>
+
+    <template v-slot:tbody>
+      <el-table-column label="基本信息">
+        <el-table-column prop="name" label="姓名" width="120"></el-table-column>
+        <el-table-column prop="age" label="年龄" width="120"></el-table-column>
+      </el-table-column>
+    </template>
+
+    <template v-slot:col-operation>
+      <nm-button type="text" text="编辑" icon="edit" />
+      <nm-button-delete type="text" :action="remove" id="1" @success="onSuccess" />
+    </template>
+  </nm-list-agile>
+</template>
+<script>
+export default {
+  data() {
+    return {
+      list: {
+        title: '敏捷列表页--多表头',
+        icon: 'list',
+        action: this.query,
+        model: {
+          name: ''
+        }
+      }
+    }
+  },
+  methods: {
+    query() {
+      const rows = [
+        { id: 1, name: '张三', age: 22 },
+        { id: 2, name: '李四', age: 26 },
+        { id: 3, name: '王五', age: 26 }
+      ]
+      return new Promise(resolve => {
+        resolve({
+          rows,
+          total: 3
+        })
+      })
+    },
+    remove() {},
+    onSuccess() {
+      this.query()
+    }
+  }
+}
+</script>

package/src/views/components/advanced/list/demo4/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/list/demo4/page.js

@@ -0,0 +1,14 @@
+/** 页面信息 */
+const page = new (function() {
+  this.title = '敏捷列表页'
+  this.name = 'components-list-demo4'
+  this.path = '/components/list/demo4'
+  this.icon = 'develop'
+})()
+
+export const route = {
+  page,
+  component: () => import('./index')
+}
+
+export default page

package/src/views/components/advanced/list-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: 'list'
+  },
+  {
+    name: 'width',
+    desc: 'Dialog 的宽度',
+    type: 'string',
+    opt: '-',
+    def: '60%'
+  },
+  {
+    name: 'height',
+    desc: 'Dialog 的高度',
+    type: 'Number, String',
+    opt: '-',
+    def: '80%'
+  },
+  {
+    name: 'fullscreen',
+    desc: '是否显示全屏按钮',
+    type: 'Boolean',
+    opt: '-',
+    def: 'true'
+  },
+  {
+    name: 'close-on-click-modal',
+    desc: '是否显示全屏按钮',
+    type: 'Boolean',
+    opt: '-',
+    def: '默认与系统设置中的一样'
+  },
+  {
+    name: 'draggable',
+    desc: '是否可拖拽',
+    type: 'Boolean',
+    opt: '-',
+    def: 'false'
+  }
+]

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

@@ -0,0 +1,22 @@
+export default [
+  {
+    name: 'open',
+    desc: '打开事件',
+    params: '-'
+  },
+  {
+    name: 'opened',
+    desc: '打开后事件',
+    params: '-'
+  },
+  {
+    name: 'close',
+    desc: '关闭事件',
+    params: '-'
+  },
+  {
+    name: 'closed',
+    desc: '关闭后事件',
+    params: '-'
+  }
+]

package/src/views/components/advanced/list-dialog/_index/data/methods.js

@@ -0,0 +1,6 @@
+export default [
+  {
+    name: 'refresh',
+    desc: '刷新'
+  }
+]

package/src/views/components/advanced/list-dialog/_index/data/slots.js

@@ -0,0 +1,6 @@
+export default [
+  {
+    name: '-',
+    desc: '内容'
+  }
+]

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

@@ -0,0 +1,31 @@
+<template>
+  <nm-tmpl v-bind="tmpl">
+    <el-alert type="warning">列表页对话框是专门用于再对话框中显示列表的组件，他是基于dialog的，然后针对列表页做了一些优化</el-alert>
+  </nm-tmpl>
+</template>
+<script>
+import page from './page.js'
+import attrs from './data/attrs.js'
+import slots from './data/slots.js'
+import methods from './data/methods.js'
+import events from './data/events.js'
+export default {
+  name: page.name,
+  data() {
+    return {
+      val: '',
+      tmpl: {
+        title: '列表页对话框(nm-list-dialog)',
+        icon: 'list',
+        attrs,
+        slots,
+        methods,
+        events
+      }
+    }
+  },
+  created() {
+    this.setTabName(this.tmpl.title)
+  }
+}
+</script>

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

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