haiwei-ui 1.0.0

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

@@ -0,0 +1,35 @@
+<template>
+  <nm-list ref="list" v-bind="list">
+    <!--日期过滤-->
+    <template v-slot:header-toolbar>
+      <nm-date-range-picker size="mini" :start.sync="list.model.startDate" :end.sync="list.model.endDate" @change="refresh" />
+    </template>
+  </nm-list>
+</template>
+<script>
+export default {
+  data() {
+    return {
+      curr: { id: '' },
+      list: {
+        title: '时间段组件示例代码',
+        cols: [],
+        action: () => {
+          return new Promise(resolve => {
+            resolve({ code: 0, data: { row: [] } })
+          })
+        },
+        model: {
+          startDate: null,
+          endDate: null
+        }
+      }
+    }
+  },
+  methods: {
+    refresh() {
+      this.$refs.list.refresh()
+    }
+  }
+}
+</script>

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

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

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

@@ -0,0 +1,93 @@
+export default [
+  {
+    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: 'success-msg',
+    desc: '是否显示成功提示消息',
+    type: 'Boolean',
+    opt: '-',
+    def: 'true'
+  },
+  {
+    name: 'success-msg-text',
+    desc: '成功提示消息文本',
+    type: 'String',
+    opt: '-',
+    def: '保存成功'
+  },
+  {
+    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: 'disabled',
+    desc: '禁用表单',
+    type: 'Boolean',
+    opt: '-',
+    def: 'false'
+  },
+  {
+    name: 'loading',
+    desc: '加载中动画',
+    type: 'Boolean',
+    opt: '-',
+    def: 'false'
+  },
+  {
+    name: 'noLoading',
+    desc: '不显示加载动画',
+    type: 'Boolean',
+    opt: '-',
+    def: 'false'
+  },
+  {
+    name: 'customResetFunction',
+    desc: '自定义重置操作',
+    type: 'Function',
+    opt: '-',
+    def: '-'
+  }
+]

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

@@ -0,0 +1,19 @@
+export default [
+  {
+    name: 'success',
+    desc: '保存成功',
+    params: '响应数据'
+  },
+  {
+    name: 'error',
+    desc: '保存失败'
+  },
+  {
+    name: 'validate-error',
+    desc: '验证失败'
+  },
+  {
+    name: 'reset',
+    desc: '重置'
+  }
+]

package/src/views/components/form/form/_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/_index/index.vue

@@ -0,0 +1,26 @@
+<template>
+  <nm-tmpl v-bind="tmpl"></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)',
+        icon: 'list',
+        attrs,
+        methods,
+        events
+      }
+    }
+  },
+  created() {
+    this.setTabName(this.tmpl.title)
+  }
+}
+</script>

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

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

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

@@ -0,0 +1,89 @@
+<template>
+  <div>
+    <nm-box-row height="300px">
+      <nm-box-col :span="12">
+        <nm-box header footer title="基础表单示例" icon="list">
+          <nm-form ref="form1" v-bind="form1">
+            <el-row>
+              <el-col :span="21" :offset="1">
+                <el-form-item label="姓名：" prop="name">
+                  <el-input v-model="form1.model.name" />
+                </el-form-item>
+              </el-col>
+              <el-col :span="21" :offset="1">
+                <el-form-item label="年龄：" prop="age">
+                  <el-input v-model="form1.model.age" />
+                </el-form-item>
+              </el-col>
+            </el-row>
+          </nm-form>
+          <template v-slot:footer>
+            <nm-button type="success" text="保存" @click="$refs.form1.submit()" />
+          </template>
+        </nm-box>
+      </nm-box-col>
+      <nm-box-col :span="12">
+        <nm-box header footer title="基础表单示例" icon="list">
+          <nm-form ref="form2" v-bind="form2">
+            <el-row>
+              <el-col :span="10" :offset="1">
+                <el-form-item label="姓名：" prop="name">
+                  <el-input v-model="form2.model.name" />
+                </el-form-item>
+              </el-col>
+              <el-col :span="10">
+                <el-form-item label="年龄：" prop="age">
+                  <el-input v-model="form2.model.age" />
+                </el-form-item>
+              </el-col>
+            </el-row>
+          </nm-form>
+          <template v-slot:footer>
+            <nm-button type="success" text="保存" @click="$refs.form2.submit()" />
+            <nm-button type="info" text="重置" @click="$refs.form2.reset()" />
+          </template>
+        </nm-box>
+      </nm-box-col>
+    </nm-box-row>
+  </div>
+</template>
+<script>
+export default {
+  data() {
+    return {
+      drawer1: false,
+      drawer2: false,
+      drawer3: false,
+      drawer4: false,
+      form1: {
+        model: {
+          name: '',
+          age: 0
+        },
+        rules: {
+          name: [{ required: true, message: '请输入姓名' }]
+        },
+        action() {
+          return new Promise(resolve => {
+            resolve()
+          })
+        }
+      },
+      form2: {
+        model: {
+          name: '',
+          age: 0
+        },
+        rules: {
+          name: [{ required: true, message: '请输入姓名' }]
+        },
+        action() {
+          return new Promise(resolve => {
+            resolve()
+          })
+        }
+      }
+    }
+  }
+}
+</script>

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

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

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

@@ -0,0 +1,191 @@
+export default [
+  {
+    name: 'visible',
+    desc: '是否显示',
+    type: 'Boolean',
+    opt: '-',
+    def: 'false'
+  },
+  {
+    name: 'title',
+    desc: '标题',
+    type: 'String',
+    opt: '-',
+    def: '-'
+  },
+  {
+    name: 'icon',
+    desc: '图标',
+    type: 'String',
+    opt: '-',
+    def: '-'
+  },
+  {
+    name: 'width',
+    desc: 'dialog的宽度',
+    type: 'String',
+    opt: '-',
+    def: '-'
+  },
+  {
+    name: 'height',
+    desc: ' Dialog 的高度',
+    type: 'Number, String',
+    opt: '-',
+    def: '-'
+  },
+  {
+    name: 'close-on-click-modal',
+    desc: '是否可以通过点击 modal 关闭 Dialog',
+    type: 'Boolean',
+    opt: '-',
+    def: '默认根据系统设置来'
+  },
+  {
+    name: 'fullscreen',
+    desc: '是否显示全屏按钮',
+    type: 'Boolean',
+    opt: '-',
+    def: 'false'
+  },
+  {
+    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: 'close-when-success',
+    desc: '保存成功后是否关闭对话框',
+    type: 'Boolean',
+    opt: '-',
+    def: 'true'
+  },
+  {
+    name: 'disabled',
+    desc: '禁用表单',
+    type: 'Boolean',
+    opt: '-',
+    def: 'false'
+  },
+  {
+    name: 'loading',
+    desc: '显示加载动画',
+    type: 'Boolean',
+    opt: '-',
+    def: 'false'
+  },
+  {
+    name: 'noLoading',
+    desc: '不显示加载动画',
+    type: 'Boolean',
+    opt: '-',
+    def: 'false'
+  },
+  {
+    name: 'clear-validate-on-open',
+    desc: '打开时是否清除验证信息',
+    type: 'Boolean',
+    opt: '-',
+    def: 'true'
+  },
+  {
+    name: 'footer-close-button',
+    desc: '是否显示底部关闭按钮',
+    type: 'Boolean',
+    opt: '-',
+    def: 'false'
+  }
+]

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

@@ -0,0 +1,39 @@
+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: '验证失败'
+  },
+  {
+    name: 'reset',
+    desc: '重置'
+  }
+]

package/src/views/components/form/form-dialog/_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-dialog/_index/index.vue

@@ -0,0 +1,26 @@
+<template>
+  <nm-tmpl v-bind="tmpl"></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-dialog)',
+        icon: 'list',
+        attrs,
+        methods,
+        events
+      }
+    }
+  },
+  created() {
+    this.setTabName(this.tmpl.title)
+  }
+}
+</script>

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

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