haiwei-ui 1.0.0

package/packages/components/drawer/index.vue

@@ -0,0 +1,239 @@
+<template>
+  <section :class="class_">
+    <transition name="fade">
+      <section class="nm-drawer-modal" @click="onModalClick" v-if="modal" v-show="visible"></section>
+    </transition>
+    <transition :name="`move-${placement}`">
+      <section
+        ref="dialog"
+        class="nm-drawer-dialog"
+        :style="{ width: wrapperWidth }"
+        v-show="visible"
+        v-loading="loading"
+        :element-loading-text="loadingText"
+        :element-loading-background="loadingBackground"
+        :element-loading-spinner="loadingSpinner"
+      >
+        <!--头部-->
+        <header v-if="header" class="nm-drawer-header">
+          <slot name="header">
+            <div v-if="icon" class="nm-drawer-header-icon">
+              <nm-icon v-if="icon" :name="icon" />
+            </div>
+            <!--标题-->
+            <div class="nm-drawer-header-title">{{ title }}</div>
+            <!--工具栏-->
+            <div class="nm-drawer-header-toolbar">
+              <!--工具栏插槽-->
+              <slot name="toolbar" />
+
+              <!--全屏按钮-->
+              <nm-button v-if="fullscreen" :icon="fullscreen_ ? 'min' : 'max'" @click="triggerFullscreen" />
+              <!--关闭按钮-->
+              <nm-button icon="close" @click="close" />
+            </div>
+          </slot>
+        </header>
+        <section class="nm-drawer-body">
+          <section class="nm-drawer-body-wrapper">
+            <nm-scrollbar v-if="!noScrollbar" ref="scrollbar" :horizontal="horizontal">
+              <slot />
+            </nm-scrollbar>
+            <slot v-else />
+          </section>
+        </section>
+        <footer v-if="footer" class="nm-drawer-footer">
+          <slot name="footer"></slot>
+        </footer>
+
+        <!--拖拽按钮-->
+        <div v-if="draggable" class="nm-drawer-drag" :class="{ 'nm-drawer-drag-left': placement === 'left' }" @mousedown="onTriggerMousedown">
+          <slot name="trigger">
+            <div class="nm-drawer-drag-move-trigger">
+              <div class="nm-drawer-drag-move-trigger-point">
+                <i></i>
+                <i></i>
+                <i></i>
+                <i></i>
+                <i></i>
+              </div>
+            </div>
+          </slot>
+        </div>
+      </section>
+    </transition>
+  </section>
+</template>
+<script>
+import { mapState } from 'vuex'
+import { oneOf } from '../../utils/assist'
+import { on, off } from '../../utils/dom'
+export default {
+  name: 'Drawer',
+  data() {
+    return {
+      canMove: false,
+      fullscreen_: false,
+      wrapperWidth: this.width,
+      minWidth: 226
+    }
+  },
+  props: {
+    /** 是否显示 */
+    visible: Boolean,
+    /** 是否显示头部 */
+    header: Boolean,
+    /** 是否显示底部 */
+    footer: Boolean,
+    /** 标题 */
+    title: String,
+    /** 图标 */
+    icon: String,
+    /** 位置 */
+    placement: {
+      type: String,
+      default: 'right',
+      validator(value) {
+        return oneOf(value, ['left', 'right'])
+      }
+    },
+    /** 宽度 */
+    width: {
+      type: String,
+      default: '30%'
+    },
+    /** 是否显示水平滚动条 */
+    horizontal: Boolean,
+    /** loading */
+    loading: Boolean,
+    /** 是否附加到Body */
+    appendToBody: Boolean,
+    /** 是否显示模态框 */
+    modal: {
+      type: Boolean,
+      default: true
+    },
+    /** 是否点击模态框关闭抽屉 */
+    modalClickClose: {
+      type: Boolean,
+      default: true
+    },
+    /** 自定义class */
+    customClass: String,
+    /** 是否显示全屏按钮 */
+    fullscreen: {
+      type: Boolean,
+      default: true
+    },
+    /** 没有内边距 */
+    noPadding: Boolean,
+    /** 可拖拽 */
+    draggable: {
+      type: Boolean,
+      default: false
+    },
+    /** 不显示滚动条 */
+    noScrollbar: Boolean
+  },
+  computed: {
+    ...mapState('app/loading', { loadingText: 'text', loadingBackground: 'background', loadingSpinner: 'spinner' }),
+    class_() {
+      return ['nm-drawer', this.placement, this.fullscreen_ ? 'fullscreen' : '', this.draggable ? 'draggable' : '', this.customClass, this.noPadding ? 'no-padding' : '', this.fontSize]
+    }
+  },
+  methods: {
+    append() {
+      if (this.appendToBody) {
+        // 附加到body下面
+        document.body.appendChild(this.$el)
+      }
+
+      window.addEventListener('resize', this.resize)
+    },
+    close() {
+      this.fullscreen_ = false
+      this.$emit('update:visible', false)
+    },
+    resize() {
+      this.$refs.scrollbar.update()
+    },
+    /** 开启全屏 */
+    openFullscreen() {
+      this.fullscreen_ = true
+      // 全屏事件
+      this.$emit('fullscreen-change', this.fullscreen_)
+    },
+    /** 关闭全屏 */
+    closeFullscreen() {
+      this.fullscreen_ = false
+      // 全屏事件
+      this.$emit('fullscreen-change', this.fullscreen_)
+    },
+    /** 全屏事件 */
+    triggerFullscreen() {
+      this.fullscreen_ ? this.closeFullscreen() : this.openFullscreen()
+    },
+    onModalClick() {
+      if (this.modal && this.modalClickClose) {
+        this.close()
+      }
+    },
+    /** 拖拽按钮鼠标按下事件 */
+    onTriggerMousedown() {
+      if (!this.draggable) return
+      this.canMove = true
+      // 防止鼠标选中抽屉中文字，造成拖动trigger触发浏览器原生拖动行为
+      window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty()
+      on(document, 'mousemove', this.onMousemove)
+      on(document, 'mouseup', this.onMouseup)
+    },
+    onMousemove(event) {
+      if (!this.canMove || !this.draggable) return
+      const { width, x } = this.$el.getBoundingClientRect()
+      let wrapperWidth
+      if (this.placement === 'right' && event.pageX - x > 20) {
+        wrapperWidth = width + x - event.pageX
+      } else if (this.placement === 'left' && event.pageX - x < width - 20) {
+        wrapperWidth = event.pageX - x
+      }
+      if (wrapperWidth > this.minWidth) {
+        this.wrapperWidth = wrapperWidth + 'px'
+      }
+    },
+    onMouseup() {
+      if (!this.draggable) return
+      this.canMove = false
+      off(document, 'mousemove', this.onMousemove)
+      off(document, 'mouseup', this.onMouseup)
+    }
+  },
+  mounted() {
+    this.append()
+  },
+  destroyed() {
+    off(document, 'mousemove', this.onMousemove)
+    off(document, 'mouseup', this.onMouseup)
+    if (this.$el && this.$el.parentNode) {
+      this.$el.parentNode.removeChild(this.$el)
+      window.removeEventListener('resize', this.resize)
+    }
+  },
+  watch: {
+    visible(val) {
+      if (val) {
+        this.$emit('open')
+
+        this.$nextTick(() => {
+          this.$emit('opened')
+        })
+      } else {
+        this.$emit('close')
+
+        this.$nextTick(() => {
+          this.$emit('closed')
+        })
+      }
+    }
+  }
+}
+</script>

package/packages/components/enums/sex/index.vue

@@ -0,0 +1,3 @@
+<template>
+  <el-select v-model="form.model.sex"> </el-select>
+</template>

package/packages/components/flex/index.vue

@@ -0,0 +1,58 @@
+<template>
+  <section :class="['nm-flex', direction, fixMode]" :style="{ height, width }">
+    <template v-if="direction === 'column'">
+      <section class="nm-flex_top" :style="{ height: fixMode === 'top' ? fix : '' }">
+        <slot name="top" />
+      </section>
+      <section class="nm-flex_bottom" :style="{ height: fixMode === 'bottom' ? fix : '', paddingTop: gutter ? gutter + 'px' : 0 }">
+        <slot name="bottom" />
+      </section>
+    </template>
+    <template v-else>
+      <section class="nm-flex_left" :style="{ width: fixMode === 'left' ? fix : '' }">
+        <slot name="left" />
+      </section>
+      <section class="nm-flex_right" :style="{ width: fixMode === 'right' ? fix : '', paddingLeft: gutter ? gutter + 'px' : 0 }">
+        <slot name="right" />
+      </section>
+    </template>
+  </section>
+</template>
+<script>
+export default {
+  name: 'Flex',
+  props: {
+    // 布局方向，对应flex-direction属性
+    direction: {
+      type: String,
+      validator(value) {
+        return value === 'column' || value === 'row'
+      },
+      default: 'column'
+    },
+    // 固定宽度或高度
+    fix: {
+      type: String,
+      required: true
+    },
+    // 固定模式，top、bottom、left、right
+    fixMode: {
+      type: String,
+      validator(value) {
+        return ['top', 'bottom', 'left', 'right'].includes(value)
+      },
+      default: 'top'
+    },
+    height: {
+      type: String,
+      default: '100%'
+    },
+    width: {
+      type: String,
+      default: '100%'
+    },
+    /** 间隔 */
+    gutter: Number
+  }
+}
+</script>

package/packages/components/form/index.vue

@@ -0,0 +1,153 @@
+<template>
+  <el-form
+    class="nm-form"
+    ref="form"
+    :model="model"
+    :rules="rules"
+    :label-width="labelWidth"
+    :label-position="labelPosition"
+    :size="fontSize"
+    :inline="inline"
+    :disabled="disabled"
+    v-loading="showLoading"
+    :element-loading-text="loadingText"
+    :element-loading-background="loadingBackground"
+    :element-loading-spinner="loadingSpinner"
+    @validate="onValidate"
+  >
+    <slot />
+  </el-form>
+</template>
+<script>
+import loading from '../../mixins/components/loading'
+export default {
+  name: 'Form',
+  mixins: [loading],
+  data() {
+    return {
+      loading_: false
+    }
+  },
+  props: {
+    /** 表单对象 */
+    model: {
+      type: Object,
+      required: true
+    },
+    /** 验证规则 */
+    rules: Object,
+    /** 提交请求 */
+    action: Function,
+    /** 行内表单模式 */
+    inline: Boolean,
+    /** 是否显示成功提示消息 */
+    successMsg: {
+      type: Boolean,
+      default: true
+    },
+    /** 成功提示消息文本 */
+    successMsgText: {
+      type: String,
+      default: '保存成功'
+    },
+    /** 标签的宽度 */
+    labelWidth: {
+      type: String,
+      default: '100px'
+    },
+    /** 表单域标签的位置，如果值为 left 或者 right 时，则需要设置 label-width */
+    labelPosition: {
+      type: String,
+      default: 'right'
+    },
+    // 自定义验证
+    customValidate: Function,
+    /** 禁用表单 */
+    disabled: Boolean,
+    /** 显示加载动画 */
+    loading: Boolean,
+    /** 不显示加载动画 */
+    noLoading: Boolean,
+    /** 自定义重置操作 */
+    customResetFunction: Function
+  },
+  computed: {
+    showLoading() {
+      return !this.noLoading && (this.loading_ || this.loading)
+    }
+  },
+  methods: {
+    /** 提交 */
+    submit() {
+      this.validate(() => {
+        this.openLoading()
+        this.action(this.model)
+          .then(data => {
+            if (this.successMsg === true) {
+              this._success(this.successMsgText)
+            }
+            this.$emit('success', data)
+          })
+          .catch(() => {
+            this.$emit('error')
+          })
+          .finally(() => {
+            this.closeLoading()
+          })
+      })
+    },
+    /** 表单验证 */
+    validate(callback) {
+      this.$refs.form.validate(async valid => {
+        // 自定义验证
+        if (valid && (!this.customValidate || this.customValidate() === true)) {
+          callback()
+        } else {
+          // 验证失败
+          this.$emit('validate-error')
+        }
+      })
+    },
+    /** 重置 */
+    reset() {
+      if (this.customResetFunction) {
+        this.customResetFunction()
+      } else {
+        this.$refs.form.resetFields()
+        this.resetChildren(this.$refs.form)
+      }
+      this.$emit('reset')
+    },
+    /** 重置子组件 */
+    resetChildren(vnode) {
+      if (vnode.$children && vnode.$children.length > 0) {
+        vnode.$children.forEach(item => {
+          if (item && item.reset && typeof item.reset === 'function') {
+            item.reset()
+          }
+          this.resetChildren(item)
+        })
+      }
+    },
+    /** 清除验证结果 */
+    clearValidate(props) {
+      this.$refs.form.clearValidate(props)
+    },
+    /** 打开加载中 */
+    openLoading() {
+      if (!this.noLoading) {
+        this.loading_ = true
+      }
+    },
+    /** 关闭加载中 */
+    closeLoading() {
+      if (!this.noLoading) {
+        this.loading_ = false
+      }
+    },
+    onValidate(prop, valid, msg) {
+      this.$emit('validate', prop, valid, msg)
+    }
+  }
+}
+</script>

package/packages/components/form-dialog/index.vue

@@ -0,0 +1,245 @@
+<template>
+  <nm-dialog
+    ref="dialog"
+    class="nm-form-dialog"
+    :title="title"
+    :icon="icon"
+    :width="width"
+    :height="height"
+    :footer="footer"
+    :fullscreen="fullscreen"
+    :close-on-click-modal="closeOnClickModal"
+    :loading="showLoading"
+    :footer-close-button="footerCloseButton"
+    :draggable="draggable"
+    :drag-out-page="dragOutPage"
+    :drag-min-width="dragMinWidth"
+    :visible.sync="visible_"
+    v-on="dialogOn"
+  >
+    <nm-form
+      ref="form"
+      no-loading
+      :model="model"
+      :rules="rules"
+      :action="action"
+      :label-width="labelWidth"
+      :label-position="labelPosition"
+      :customValidate="validate"
+      :success-msg="successMsg"
+      :success-msg-text="successMsgText"
+      :disabled="disabled"
+      :inline="inline"
+      :customResetFunction="customResetFunction"
+      v-on="formOn"
+      @validate="onValidate"
+    >
+      <slot />
+    </nm-form>
+
+    <template v-slot:footer-left>
+      <slot name="footer-left" />
+    </template>
+
+    <template v-slot:footer>
+      <slot name="footer-buttons" />
+      <slot name="footer">
+        <el-button v-if="btnOk && !disabled" type="success" @click="submit" :size="fontSize">{{ btnOkText }}</el-button>
+        <el-button v-if="btnReset && !disabled" type="warning" @click="reset" :size="fontSize">重置</el-button>
+      </slot>
+    </template>
+  </nm-dialog>
+</template>
+<script>
+import visible from '../../mixins/components/visible'
+export default {
+  name: 'FormDialog',
+  mixins: [visible],
+  data() {
+    return {
+      loading_: false,
+      formOn: {
+        success: this.onSuccess,
+        error: this.onError,
+        reset: this.onReset,
+        'validate-error': this.onValidateError
+      },
+      dialogOn: {
+        open: this.onOpen,
+        opened: this.onOpened,
+        close: this.onClose,
+        closed: this.onClosed
+      }
+    }
+  },
+  props: {
+    /** 标题 */
+    title: String,
+    /** 图标 */
+    icon: String,
+    /** 宽度 */
+    width: String,
+    /** Dialog 的高度 */
+    height: [Number, String],
+    /** 显示尾部 */
+    footer: {
+      type: Boolean,
+      default: true
+    },
+    /** 是否可以通过点击 modal 关闭 Dialog */
+    closeOnClickModal: {
+      type: Boolean,
+      default: null
+    },
+    /** 是否显示全屏按钮 */
+    fullscreen: Boolean,
+    /** 表单模型 */
+    model: {
+      type: Object,
+      required: true
+    },
+    /** 验证规则 */
+    rules: Object,
+    /** 提交请求 */
+    action: Function,
+    /** 行内表单 */
+    inline: {
+      type: Boolean,
+      default: false
+    },
+    /** 标签的宽度 */
+    labelWidth: String,
+    /** 表单域标签的位置，如果值为 left 或者 right 时，则需要设置 label-width */
+    labelPosition: String,
+    // 自定义验证
+    validate: Function,
+    /** 是否显示成功提示消息 */
+    successMsg: {
+      type: Boolean,
+      default: true
+    },
+    /** 成功提示消息文本 */
+    successMsgText: {
+      type: String,
+      default: '保存成功'
+    },
+    /** Ok按钮 */
+    btnOk: {
+      type: Boolean,
+      default: true
+    },
+    /** Ok按钮文本 */
+    btnOkText: {
+      type: String,
+      default: '保存'
+    },
+    /** reset按钮 */
+    btnReset: {
+      type: Boolean,
+      default: true
+    },
+    /** 自定义重置操作 */
+    customResetFunction: Function,
+    // 保存成功后是否关闭对话框
+    closeWhenSuccess: {
+      type: Boolean,
+      default: true
+    },
+    /** 禁用表单 */
+    disabled: Boolean,
+    /** 显示加载动画 */
+    loading: Boolean,
+    /** 不显示加载动画 */
+    noLoading: {
+      type: Boolean,
+      default: false
+    },
+    /** 打开时是否清楚验证信息 */
+    clearValidateOnOpen: {
+      type: Boolean,
+      default: true
+    },
+    /** 是否显示底部关闭按钮 */
+    footerCloseButton: Boolean,
+    /** 可拖拽的 */
+    draggable: {
+      type: Boolean,
+      default: null
+    },
+    /** 是否可拖出页面 */
+    dragOutPage: Boolean,
+    /** 拖拽出页面后保留的最小宽度 */
+    dragMinWidth: Number
+  },
+  computed: {
+    showLoading() {
+      return !this.noLoading && (this.loading_ || this.loading)
+    }
+  },
+  methods: {
+    /** 提交 */
+    submit() {
+      this.loading_ = true
+      this.$refs.form.submit()
+    },
+    /** 重置 */
+    reset() {
+      this.$nextTick(() => {
+        this.$refs.form.reset()
+      })
+    },
+    /** 清除验证信息 */
+    clearValidate() {
+      this.$refs.form.clearValidate()
+    },
+    /** 打开loading */
+    openLoading() {
+      this.loading_ = true
+    },
+    /** 关闭loading */
+    closeLoading() {
+      this.loading = false
+    },
+    // 成功
+    onSuccess(data) {
+      // 关闭对话框
+      if (this.closeWhenSuccess) {
+        setTimeout(this.hide, 800)
+      }
+      this.loading_ = false
+      this.$emit('success', data)
+    },
+    onReset() {
+      this.$emit('reset')
+    },
+    onError() {
+      this.loading_ = false
+      this.$emit('error')
+    },
+    onValidateError() {
+      this.loading_ = false
+      this.$emit('validate-error')
+    },
+    onOpen() {
+      if (this.clearValidateOnOpen) {
+        this.$nextTick(() => {
+          this.$refs.form.clearValidate()
+        })
+      }
+      this.$emit('open')
+    },
+    onOpened() {
+      this.$emit('opened')
+    },
+    onClose() {
+      this.$emit('close')
+    },
+    onClosed() {
+      this.$emit('closed')
+    },
+    onValidate(prop, valid, msg) {
+      this.$emit('validate', prop, valid, msg)
+    }
+  }
+}
+</script>