haiwei-ui 1.0.0

package/src/views/components/form/form-dialog/demo1/demo.vue

@@ -0,0 +1,81 @@
+<template>
+  <nm-box page header title="对话框表单示例">
+    <nm-button text="新增" @click="dialog.add = true" />
+    <nm-button text="编辑" @click="dialog.edit = true" />
+    <nm-form-dialog v-bind="dialogAdd" :visible.sync="dialog.add">
+      <el-row>
+        <el-col :span="21" :offset="1">
+          <el-form-item label="姓名：" prop="name">
+            <el-input v-model="dialogAdd.model.name" />
+          </el-form-item>
+        </el-col>
+        <el-col :span="21" :offset="1">
+          <el-form-item label="年龄：" prop="age">
+            <el-input v-model="dialogAdd.model.age" />
+          </el-form-item>
+        </el-col>
+      </el-row>
+    </nm-form-dialog>
+    <nm-form-dialog v-bind="dialogEdit" :visible.sync="dialog.edit">
+      <el-row>
+        <el-col :span="21" :offset="1">
+          <el-form-item label="姓名：" prop="name">
+            <el-input v-model="dialogEdit.model.name" />
+          </el-form-item>
+        </el-col>
+        <el-col :span="21" :offset="1">
+          <el-form-item label="年龄：" prop="age">
+            <el-input v-model="dialogEdit.model.age" />
+          </el-form-item>
+        </el-col>
+      </el-row>
+    </nm-form-dialog>
+  </nm-box>
+</template>
+<script>
+export default {
+  data() {
+    return {
+      dialog: {
+        add: false,
+        edit: false
+      },
+      dialogAdd: {
+        header: true,
+        title: '新增',
+        icon: 'add',
+        draggable: true,
+        model: {
+          name: '',
+          age: 0
+        },
+        rules: {
+          name: [{ required: true, message: '请输入姓名' }]
+        },
+        action() {
+          return new Promise(resolve => {
+            resolve()
+          })
+        }
+      },
+      dialogEdit: {
+        header: true,
+        title: '编辑',
+        icon: 'edit',
+        model: {
+          name: '',
+          age: 0
+        },
+        rules: {
+          name: [{ required: true, message: '请输入姓名' }]
+        },
+        action() {
+          return new Promise(resolve => {
+            resolve()
+          })
+        }
+      }
+    }
+  }
+}
+</script>

package/src/views/components/form/form-dialog/demo1/index.vue

@@ -0,0 +1,24 @@
+<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
+    }
+  },
+  created() {
+    this.setTabName('表单对话框示例代码')
+  }
+}
+</script>

package/src/views/components/form/form-dialog/demo1/page.js

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

package/src/views/components/form/form-page/_index/data/attrs.js

@@ -0,0 +1,135 @@
+export default [
+  {
+    name: 'header',
+    desc: '是否显示头部',
+    type: 'Boolean',
+    opt: '-',
+    def: 'true'
+  },
+  {
+    name: 'title',
+    desc: '标题',
+    type: 'String',
+    opt: '-',
+    def: '-'
+  },
+  {
+    name: 'icon',
+    desc: '图标',
+    type: 'String',
+    opt: '-',
+    def: 'detail'
+  },
+  {
+    name: 'model',
+    desc: '表单对象，必须',
+    type: 'Object',
+    opt: '-',
+    def: '-'
+  },
+  {
+    name: 'rules',
+    desc: '验证规则',
+    type: 'Object',
+    opt: '-',
+    def: '-'
+  },
+  {
+    name: 'action',
+    desc: '提交请求，必须',
+    type: 'Function',
+    opt: '-',
+    def: '-'
+  },
+  {
+    name: 'inline',
+    desc: '行内表单模式',
+    type: 'Boolean',
+    opt: '-',
+    def: 'false'
+  },
+  {
+    name: 'label-width',
+    desc: '标签的宽度',
+    type: 'String',
+    opt: '-',
+    def: '100px'
+  },
+  {
+    name: 'label-position',
+    desc: '表单域标签的位置，如果值为 left 或者 right 时，则需要设置 label-width',
+    type: 'String',
+    opt: 'right/left/top',
+    def: 'right'
+  },
+  {
+    name: 'validate',
+    desc: '自定义验证，在表单验证通过之后，表单提交之前调用',
+    type: 'Function',
+    opt: '-',
+    def: '-'
+  },
+  {
+    name: 'success-msg',
+    desc: '是否显示成功提示消息',
+    type: 'Boolean',
+    opt: '-',
+    def: 'true'
+  },
+  {
+    name: 'success-msg-text',
+    desc: '成功提示消息文本',
+    type: 'String',
+    opt: '-',
+    def: '保存成功'
+  },
+  {
+    name: 'btn-ok',
+    desc: '是否显示确认按钮',
+    type: 'Boolean',
+    opt: '-',
+    def: 'true'
+  },
+  {
+    name: 'btn-ok-text',
+    desc: '确认按钮文本',
+    type: 'String',
+    opt: '-',
+    def: '保存'
+  },
+  {
+    name: 'btn-ok-type',
+    desc: '确认按钮类型',
+    type: 'String',
+    opt: '-',
+    def: 'primary'
+  },
+  {
+    name: 'btn-reset',
+    desc: '是否显示重置按钮',
+    type: 'Boolean',
+    opt: '-',
+    def: 'true'
+  },
+  {
+    name: 'custom-reset-function',
+    desc: '自定义重置操作',
+    type: 'Function',
+    opt: '-',
+    def: '-'
+  },
+  {
+    name: 'fullscreen',
+    desc: '是否显示全屏按钮',
+    type: 'Boolean',
+    opt: '-',
+    def: 'true'
+  },
+  {
+    name: 'disabled',
+    desc: '禁用表单',
+    type: 'Boolean',
+    opt: '-',
+    def: 'false'
+  }
+]

package/src/views/components/form/form-page/_index/data/events.js

@@ -0,0 +1,35 @@
+export default [
+  {
+    name: 'open',
+    desc: '打开事件',
+    params: ''
+  },
+  {
+    name: 'opened',
+    desc: '已打开事件',
+    params: ''
+  },
+  {
+    name: 'open',
+    desc: '打开事件',
+    params: ''
+  },
+  {
+    name: 'closed',
+    desc: '已关闭事件',
+    params: ''
+  },
+  {
+    name: 'success',
+    desc: '成功',
+    params: '响应数据'
+  },
+  {
+    name: 'error',
+    desc: '失败'
+  },
+  {
+    name: 'validate-error',
+    desc: '验证失败'
+  }
+]

package/src/views/components/form/form-page/_index/data/methods.js

@@ -0,0 +1,14 @@
+export default [
+  {
+    name: 'submit',
+    desc: '提交'
+  },
+  {
+    name: 'reset',
+    desc: '重置'
+  },
+  {
+    name: 'clearValidate',
+    desc: '清除验证信息'
+  }
+]

package/src/views/components/form/form-page/_index/index.vue

@@ -0,0 +1,30 @@
+<template>
+  <nm-tmpl v-bind="tmpl">
+    <el-alert title="说明" type="warning" show-icon :closable="false">
+      <p>页表单组件会填充满整个父级元素，所以一般当成一个页面级组件使用</p>
+    </el-alert>
+  </nm-tmpl>
+</template>
+<script>
+import page from './page.js'
+import attrs from './data/attrs.js'
+import methods from './data/methods'
+import events from './data/events.js'
+export default {
+  name: page.name,
+  data() {
+    return {
+      tmpl: {
+        title: '页表单(nm-form-page)',
+        icon: 'list',
+        attrs,
+        methods,
+        events
+      }
+    }
+  },
+  created() {
+    this.setTabName(this.tmpl.title)
+  }
+}
+</script>

package/src/views/components/form/form-page/_index/page.js

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

package/src/views/components/form/form-page/demo1/demo.vue

@@ -0,0 +1,41 @@
+<template>
+  <nm-form-page v-bind="form">
+    <el-row>
+      <el-col :span="21" :offset="1">
+        <el-form-item label="姓名：" prop="name">
+          <el-input v-model="form.model.name" />
+        </el-form-item>
+      </el-col>
+      <el-col :span="21" :offset="1">
+        <el-form-item label="年龄：" prop="age">
+          <el-input v-model="form.model.age" />
+        </el-form-item>
+      </el-col>
+    </el-row>
+  </nm-form-page>
+</template>
+<script>
+export default {
+  data() {
+    return {
+      form: {
+        header: true,
+        title: '页表单示例',
+        icon: 'add',
+        model: {
+          name: '',
+          age: 0
+        },
+        rules: {
+          name: [{ required: true, message: '请输入姓名' }]
+        },
+        action() {
+          return new Promise(resolve => {
+            resolve()
+          })
+        }
+      }
+    }
+  }
+}
+</script>

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

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

package/src/views/components/form/icon-picker/_index/data/attrs.js

@@ -0,0 +1,16 @@
+export default [
+  {
+    name: 'v-model/value',
+    desc: '绑定值',
+    type: 'String',
+    opt: '-',
+    def: '-'
+  },
+  {
+    name: 'placeholder',
+    desc: 'placeholder',
+    type: 'String',
+    opt: '-',
+    def: '-'
+  }
+]

package/src/views/components/form/icon-picker/_index/data/events.js

@@ -0,0 +1,7 @@
+export default [
+  {
+    name: 'on-change',
+    desc: '数据更改事件',
+    params: '更改后的值'
+  }
+]

package/src/views/components/form/icon-picker/_index/index.vue

@@ -0,0 +1,29 @@
+<template>
+  <nm-tmpl v-bind="tmpl">
+    <el-alert title="说明" type="warning" show-icon :closable="false">
+      所有图标均使用svg格式，从
+      <a href="http://iconfont.cn" target="_blank">阿里巴巴图标库</a> 获取
+    </el-alert>
+  </nm-tmpl>
+</template>
+<script>
+import page from './page.js'
+import attrs from './data/attrs.js'
+import events from './data/events.js'
+export default {
+  name: page.name,
+  data() {
+    return {
+      tmpl: {
+        title: '图标选择器(nm-icon-picker)',
+        icon: 'list',
+        attrs,
+        events
+      }
+    }
+  },
+  created() {
+    this.setTabName(this.tmpl.title)
+  }
+}
+</script>

package/src/views/components/form/icon-picker/_index/page.js

@@ -0,0 +1,16 @@
+/** 页面信息 */
+const page = new (function() {
+  this.title = '图标选择器'
+  this.name = 'components-icon-picker-index'
+  this.path = '/components/icon-picker/index'
+  this.icon = 'list'
+  this.group = 1
+  this.sort = 6
+})()
+
+export const route = {
+  page,
+  component: () => import('./index')
+}
+
+export default page

package/src/views/components/form/icon-picker/demo1/demo.vue

@@ -0,0 +1,47 @@
+<template>
+  <nm-form-page v-bind="form">
+    <el-row>
+      <el-col :span="21" :offset="1">
+        <el-form-item label="姓名：" prop="name">
+          <el-input v-model="form.model.name" />
+        </el-form-item>
+      </el-col>
+      <el-col :span="21" :offset="1">
+        <el-form-item label="年龄：" prop="age">
+          <el-input v-model="form.model.age" />
+        </el-form-item>
+      </el-col>
+      <el-col :span="21" :offset="1">
+        <el-form-item label="图标：" prop="age">
+          <nm-icon-picker v-model="form.model.icon" />
+        </el-form-item>
+      </el-col>
+    </el-row>
+  </nm-form-page>
+</template>
+<script>
+export default {
+  data() {
+    return {
+      form: {
+        header: true,
+        title: '页表单示例',
+        icon: 'add',
+        model: {
+          name: '',
+          age: 0,
+          icon: ''
+        },
+        rules: {
+          name: [{ required: true, message: '请输入姓名' }]
+        },
+        action() {
+          return new Promise(resolve => {
+            resolve()
+          })
+        }
+      }
+    }
+  }
+}
+</script>

package/src/views/components/form/icon-picker/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/form/icon-picker/demo1/page.js

@@ -0,0 +1,14 @@
+/** 页面信息 */
+const page = new (function() {
+  this.title = '图标选择器示例'
+  this.name = 'components-icon-picker-demo1'
+  this.path = '/components/icon-picker/demo1'
+  this.icon = 'develop'
+})()
+
+export const route = {
+  page,
+  component: () => import('./index')
+}
+
+export default page

package/src/views/components/form/select/_index/data/attrs.js

@@ -0,0 +1,79 @@
+export default [
+  {
+    name: 'v-model/value',
+    desc: '绑定值',
+    type: 'String, Number, Array',
+    opt: '-',
+    def: '-'
+  },
+  {
+    name: 'method',
+    desc: '接口请求方法，必须',
+    type: 'Function',
+    opt: '-',
+    def: '-'
+  },
+  {
+    name: 'multiple',
+    desc: '多选',
+    type: 'Boolean',
+    opt: '-',
+    def: 'false'
+  },
+  {
+    name: 'clearable',
+    desc: '可清空',
+    type: 'Boolean',
+    opt: '-',
+    def: 'true'
+  },
+  {
+    name: 'disabled',
+    desc: '禁用',
+    type: 'Boolean',
+    opt: '-',
+    def: 'false'
+  },
+  {
+    name: 'filterable',
+    desc: '是否可搜索',
+    type: 'Boolean',
+    opt: '-',
+    def: 'false'
+  },
+  {
+    name: 'show-refresh',
+    desc: '显示刷新按钮',
+    type: 'Boolean',
+    opt: '-',
+    def: 'false'
+  },
+  {
+    name: 'multiple-limit',
+    desc: '多选时用户最多可以选择的项目数，为 0 则不限制',
+    type: 'Number',
+    opt: '-',
+    def: '0'
+  },
+  {
+    name: 'placeholder',
+    desc: '占位符',
+    type: 'String',
+    opt: '-',
+    def: '请选择...'
+  },
+  {
+    name: 'checked-first',
+    desc: '默认选中第一个',
+    type: 'Boolean',
+    opt: '-',
+    def: 'false'
+  },
+  {
+    name: 'icon',
+    desc: '图标',
+    type: 'String',
+    opt: '-',
+    def: '-'
+  }
+]