haiwei-ui 1.0.0

package/packages/mixins/components/radio.vue

@@ -0,0 +1,84 @@
+<template>
+  <el-radio-group class="nm-radio" v-model="value_" :size="size || fontSize" :disabled="disabled" :text-color="textColor" :fill="fill" @change="onChange" v-loading="loading">
+    <slot :options="options">
+      <component :is="_tagName" v-for="item in options" :key="item.value" :label="item.value" :disabled="item.disabled" :border="border">{{ item.label }}</component>
+    </slot>
+  </el-radio-group>
+</template>
+<script>
+import loading from './loading'
+
+export default {
+  mixins: [loading],
+  data() {
+    return {
+      value_: this.value,
+      options: [],
+      loading: false,
+      /**数据请求方法 */
+      action: null
+    }
+  },
+  props: {
+    value: [String, Number],
+    /** 大小 */
+    size: String,
+    /** 禁用 */
+    disabled: Boolean,
+    /** 按钮形式的 Radio 激活时的文本颜色，默认 #fff */
+    textColor: String,
+    /** 按钮形式的 Radio 激活时的填充色和边框色，默认 #409EFF */
+    fill: String,
+    /** 是否显示边框 */
+    border: Boolean,
+    /** 是否默认选中第一个 */
+    checkedFirst: Boolean,
+    /**  按钮样式 */
+    button: Boolean
+  },
+  computed: {
+    _tagName() {
+      return this.button ? 'el-radio-button' : 'el-radio'
+    }
+  },
+  methods: {
+    refresh() {
+      this.loading = true
+      this.action()
+        .then(data => {
+          this.options = data
+          if (data.length > 0 && this.checkedFirst) {
+            this.onChange(data[0].value)
+          }
+          this.loading = false
+        })
+        .catch(() => {
+          this.loading = false
+        })
+    },
+    onChange(val) {
+      this.value_ = val
+      this.$emit('input', this.value_)
+      this.$emit(
+        'change',
+        this.value_,
+        this.options.find(m => m.value === this.value_),
+        this.options
+      )
+    },
+    reset() {
+      if (this.options.length > 0 && this.checkedFirst) {
+        this.onChange(this.options[0].value)
+      }
+    }
+  },
+  created() {
+    this.refresh()
+  },
+  watch: {
+    value(val) {
+      if (val !== this.value_) this.value_ = val
+    }
+  }
+}
+</script>

package/packages/mixins/components/select.js

@@ -0,0 +1,293 @@
+export default {
+  data() {
+    return {
+      //初始值
+      initValue: this.value,
+      value_: this.value,
+      options: [],
+      action: null,
+      loading: false,
+      hasInit: false,
+      remoteTimer: null
+    }
+  },
+  props: {
+    value: {
+      type: [String, Number, Array],
+      default: ''
+    },
+    // 多选
+    multiple: Boolean,
+    // 可清空
+    clearable: {
+      type: Boolean,
+      default: true
+    },
+    // 禁用
+    disabled: Boolean,
+    // 是否可搜索
+    filterable: Boolean,
+    // 显示刷新按钮
+    showRefresh: Boolean,
+    /** 多选时用户最多可以选择的项目数，为 0 则不限制 */
+    multipleLimit: {
+      type: Number,
+      default: 0
+    },
+    /** 占位符 */
+    placeholder: {
+      type: String,
+      default: '请选择...'
+    },
+    /** 是否默认选中第一个 */
+    checkedFirst: Boolean,
+    /** 头部的图标 */
+    icon: String,
+    /**远程搜索 */
+    remote: Boolean,
+    /**远程查询间隔，默认800ms */
+    remoteQueryInterval: {
+      type: Number,
+      default: 800
+    }
+  },
+  computed: {
+    selection() {
+      let list
+      if (!this.value_) return list
+
+      if (this.multiple) {
+        list = []
+        this.value_.forEach(item => {
+          for (var i = 0; i < this.options.length; i++) {
+            const opt = this.options[i]
+            if (opt.value === item) {
+              list.push(opt)
+              break
+            }
+          }
+        })
+      } else {
+        for (var i = 0; i < this.options.length; i++) {
+          const opt = this.options[i]
+          if (opt.value === this.value_) {
+            list = opt
+            break
+          }
+        }
+      }
+      return list
+    }
+  },
+  mounted() {
+    this.refresh()
+  },
+  methods: {
+    // 刷新
+    refresh() {
+      //远程搜索使用远程方法
+      if (this.filterable && this.remote) return
+
+      this.loading = true
+      this.action().then(options => {
+        this.options = options
+        this.loading = false
+
+        if (this.checkedFirst && !this.hasInit && options.length > 0) {
+          this.onChange(options[0].value)
+          this.hasInit = true
+        }
+      })
+    },
+    onChange(val) {
+      this.value_ = val
+      this.$emit('input', this.value_)
+      this.$emit('change', this.value_, this.selection, this.options)
+    },
+    onVisibleChange(val) {
+      this.$emit('visible-change', val)
+    },
+    onRemoveTag(tag) {
+      this.$emit('remove-tag', tag)
+    },
+    onClear() {
+      this.$emit('clear')
+    },
+    onBlur(event) {
+      this.$emit('blur', event)
+    },
+    onFocus(event) {
+      this.$emit('focus', event)
+    },
+    reset() {
+      this.onChange(this.initValue)
+    },
+    remoteMethod(keyword) {
+      if (this.remoteTimer) clearTimeout(this.remoteTimer)
+      this.remoteTimer = setTimeout(() => {
+        if (keyword !== '') {
+          this.loading = true
+          this.action(keyword).then(options => {
+            this.options = options
+
+            if (this.checkedFirst && options.length > 0) {
+              this.value_ = options[0].value
+              this.onChange()
+            }
+            this.loading = false
+          })
+        } else {
+          this.options = []
+        }
+      }, this.remoteQueryInterval)
+    }
+  },
+  watch: {
+    value() {
+      this.value_ = this.value
+    }
+  },
+  render(h) {
+    let options = []
+    if (this.$scopedSlots.default) {
+      options = [this.$scopedSlots.default({ options: this.options })]
+    } else {
+      options = this.options.map(item => {
+        return h('el-option', {
+          props: {
+            label: item.label,
+            value: item.value,
+            disabled: item.disabled
+          }
+        })
+      })
+    }
+    if (this.icon) {
+      options.push(h('nm-icon', { props: { name: this.icon }, slot: 'prefix' }))
+    }
+    return h(
+      'div',
+      {
+        class: 'nm-select',
+        attrs: {
+          'element-loading-background': 'rgba(255, 255, 255, 0.5)'
+        },
+        directives: [
+          {
+            name: 'loading',
+            value: this.loading
+          }
+        ]
+      },
+      [
+        h(
+          'div',
+          {
+            class: 'nm-select-input'
+          },
+          [
+            h(
+              'el-select',
+              {
+                props: {
+                  value: this.value_,
+                  clearable: this.clearable,
+                  multiple: this.multiple,
+                  disabled: this.disabled,
+                  size: this.fontSize,
+                  filterable: this.filterable,
+                  multipleLimit: this.multipleLimit,
+                  placeholder: this.placeholder,
+                  remote: this.remote,
+                  remoteMethod: this.remoteMethod
+                },
+                on: {
+                  change: this.onChange,
+                  'visible-change': this.onVisibleChange,
+                  'remove-tag': this.onRemoveTag,
+                  clear: this.onClear,
+                  blur: this.onBlur,
+                  focus: this.onFocus
+                }
+              },
+              options
+            )
+          ]
+        ),
+        h(
+          'div',
+          {
+            class: 'nm-select-button'
+          },
+          [
+            h('nm-button', {
+              class: '',
+              props: {
+                icon: 'refresh'
+              },
+              directives: [
+                {
+                  name: 'show',
+                  value: this.showRefresh
+                }
+              ],
+              on: {
+                click: this.refresh
+              }
+            })
+          ]
+        )
+      ]
+    )
+    /** JSX方式，老是存在编译不了的情况，取消该方式 */
+
+    // return (
+    //   <div
+    //     class="nm-select"
+    //     v-loading={this.loading}
+    //     element-loading-background="rgba(255, 255, 255, 0.5)"
+    //   >
+    //     <div class="nm-select-input">
+    //       <el-select
+    //         placeholder="请选择..."
+    //         value={this.value_}
+    //         clearable={this.clearable}
+    //         multiple={this.multiple}
+    //         disabled={this.disabled}
+    //         size={this.fontSize}
+    //         filterable={this.filterable}
+    //         multipleLimit={this.multipleLimit}
+    //         placeholder={this.placeholder}
+    //         vOn:change={this.onChange}
+    //         vOn:visible-change={this.onVisibleChange}
+    //         vOn:remove-tag={this.onRemoveTag}
+    //         vOn:clear={this.onClear}
+    //         vOn:blur={this.onBlur}
+    //         vOn:focus={this.onFocus}
+    //       >
+    //         {this.$scopedSlots.default
+    //           ? this.$scopedSlots.default({ options: this.options })
+    //           : this.options.map(item => {
+    //             return (
+    //               <el-option
+    //                 label={item.label}
+    //                 value={item.value}
+    //                 disabled={item.disabled}
+    //               />
+    //             )
+    //           })}
+    //         {this.icon ? <nm-icon name={this.icon} slot="prefix" /> : ''}
+    //       </el-select>
+    //     </div>
+    //     <div class="nm-select-button">
+    //       <nm-button
+    //         v-show={this.showRefresh}
+    //         icon="refresh"
+    //         class="nm-select-botton-refresh"
+    //         vOn:click={this.refresh}
+    //       />
+    //     </div>
+    //   </div>
+    // )
+  }
+}

package/packages/mixins/components/visible.js

@@ -0,0 +1,24 @@
+// 显示隐藏混入
+export default {
+  computed: {
+    visible_: {
+      get() {
+        return this.visible
+      },
+      set(val) {
+        this.$emit('update:visible', val)
+      }
+    }
+  },
+  props: {
+    visible: Boolean
+  },
+  methods: {
+    show() {
+      this.visible_ = true
+    },
+    hide() {
+      this.visible_ = false
+    }
+  }
+}

package/packages/mixins/global/fontSize.js

@@ -0,0 +1,6 @@
+import { mapGetters } from 'vuex'
+export default {
+  computed: {
+    ...mapGetters('app/skins', ['fontSize'])
+  }
+}

package/packages/mixins/global/loading.js

@@ -0,0 +1,15 @@
+export default {
+  methods: {
+    _openLoading(msg) {
+      window.$loading = this.$loading({
+        lock: true,
+        text: msg || '正在努力加载...',
+        background: 'rgba(255, 255, 255, 0.6)',
+        spinner: 'el-icon-loading'
+      })
+    },
+    _closeLoading() {
+      window.$loading.close()
+    }
+  }
+}

package/packages/mixins/global/message.js

@@ -0,0 +1,64 @@
+// 消息提示
+const duration = 2500
+export default {
+  methods: {
+    /**
+     * @description 成功消息
+     * @param {String} msg 消息内容
+     */
+    async _success(msg, onClose) {
+      await this.$message({
+        message: msg,
+        showClose: true,
+        type: 'success',
+        duration,
+        onClose
+      })
+    },
+    /**
+     * @description 警告消息
+     * @param {String} msg 消息内容
+     */
+    async _warning(msg, onClose) {
+      await this.$message({
+        message: msg,
+        showClose: true,
+        type: 'warning',
+        duration,
+        onClose
+      })
+    },
+    /**
+     * @description 错误消息
+     * @param {String} msg 消息内容
+     */
+    async _error(msg, onClose) {
+      await this.$message({
+        message: msg,
+        showClose: true,
+        type: 'error',
+        duration,
+        onClose
+      })
+    },
+    /** 二次确认 */
+    async _confirm(msg, title, type) {
+      await this.$confirm(msg, title || '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: type || 'warning'
+      })
+    },
+    /** 删除数据确认 */
+    async _delete(action, title) {
+      const msg = title || '您确认要删除该数据吗?'
+
+      await this._confirm(msg)
+
+      // 执行删除操作
+      if (action || typeof action === 'function') {
+        action()
+      }
+    }
+  }
+}

package/packages/mixins/global/setTabName.js

@@ -0,0 +1,6 @@
+import { mapActions } from 'vuex'
+export default {
+  methods: {
+    ...mapActions('app/page', ['setTabName'])
+  }
+}

package/packages/mixins/index.js

@@ -0,0 +1,51 @@
+// 全局混入
+import message from './global/message'
+import fontSize from './global/fontSize'
+import _loading from './global/loading'
+import setTabName from './global/setTabName'
+
+// 局部混入
+import dialog from './components/dialog'
+import select from './components/select'
+import drawer from './components/drawer'
+import loading from './components/loading'
+import formDialogEdit from './components/form-dialog-edit'
+import formSave from './components/form-save'
+import formReadonly from './components/form-readonly'
+import visible from './components/visible'
+import list from './components/list'
+import treeSelect from '../../packages/components/tree-select/mixins.vue'
+import button from './components/button'
+import radio from './components/radio.vue'
+import checkbox from './components/checkbox.vue'
+
+export default {
+  global(Vue) {
+    // 消息提示
+    Vue.mixin(message)
+
+    // 字号
+    Vue.mixin(fontSize)
+
+    // 设置loading
+    Vue.mixin(_loading)
+
+    //设置标签导航名称
+    Vue.mixin(setTabName)
+  },
+  components: {
+    dialog,
+    select,
+    drawer,
+    formDialogEdit,
+    loading,
+    formSave,
+    formReadonly,
+    visible,
+    list,
+    treeSelect,
+    button,
+    radio,
+    checkbox
+  }
+}

package/packages/page/403/index.vue

@@ -0,0 +1,50 @@
+<template>
+  <nm-container>
+    <nm-box page>
+      <div class="nm-error-403">
+        <div class="nm-error-403-number">
+          <div>4</div>
+          <div>0</div>
+          <div>3</div>
+        </div>
+        <p class="nm-m-10 nm-size-60">ERROR !</p>
+        <p class="nm-m-20">亲！您无权访问该页面哦~</p>
+        <p class="nm-text-center"><nm-button type="text" text="《 带您回家" @click="$router.push('/')" /> | <nm-button type="text" text="原路返回 》" class="nm-m-l-0" @click="$router.go(-1)" /></p>
+      </div>
+    </nm-box>
+  </nm-container>
+</template>
+<style lang="scss">
+.nm-error-403 {
+  margin: 100px auto;
+  width: 600px;
+  height: 400px;
+  color: #979797;
+  text-align: center;
+  &-number {
+    div {
+      position: relative;
+      display: inline-block;
+      margin: 5px;
+      width: 90px;
+      height: 120px;
+      line-height: 120px;
+      text-align: center;
+      font-size: 80px;
+      border: 1px solid #cccccc;
+      box-sizing: border-box;
+
+      &::after {
+        content: '';
+        position: absolute;
+        top: -4px;
+        left: -4px;
+        width: 96px;
+        height: 126px;
+        border: 1px solid #cccccc;
+        box-sizing: border-box;
+      }
+    }
+  }
+}
+</style>

package/packages/page/404/index.vue

@@ -0,0 +1,50 @@
+<template>
+  <nm-container>
+    <nm-box page>
+      <div class="nm-error-404">
+        <div class="nm-error-404-number">
+          <div>4</div>
+          <div>0</div>
+          <div>4</div>
+        </div>
+        <p class="nm-m-10 nm-size-60">ERROR !</p>
+        <p class="nm-m-20">亲！您是不是迷路了~</p>
+        <p class="nm-text-center"><nm-button type="text" text="《 带您回家" @click="$router.push('/')" /> | <nm-button type="text" text="原路返回 》" class="nm-m-l-0" @click="$router.go(-1)" /></p>
+      </div>
+    </nm-box>
+  </nm-container>
+</template>
+<style lang="scss">
+.nm-error-404 {
+  margin: 100px auto;
+  width: 600px;
+  height: 400px;
+  color: #979797;
+  text-align: center;
+  &-number {
+    div {
+      position: relative;
+      display: inline-block;
+      margin: 5px;
+      width: 90px;
+      height: 120px;
+      line-height: 120px;
+      text-align: center;
+      font-size: 80px;
+      border: 1px solid #cccccc;
+      box-sizing: border-box;
+
+      &::after {
+        content: '';
+        position: absolute;
+        top: -4px;
+        left: -4px;
+        width: 96px;
+        height: 126px;
+        border: 1px solid #cccccc;
+        box-sizing: border-box;
+      }
+    }
+  }
+}
+</style>

package/packages/page/default/index.vue

@@ -0,0 +1,29 @@
+<template>
+  <nm-container>
+    <nm-box page>
+      <div class="nm-default">
+        <nm-icon name="work" class="nm-size-100" />
+        <h1 class="nm-m-20 nm-size-20">欢迎登录{{ title }}~</h1>
+        <p>本系统使用开源框架 <a class="nm-link" target="_blank" href="https://github.com/iamoldli/NetModular">NetModular</a> 开发</p>
+        <img style="width:100%" src="../../../public/images/motto.png" />
+      </div>
+    </nm-box>
+  </nm-container>
+</template>
+<script>
+import { mapState } from 'vuex'
+export default {
+  computed: {
+    ...mapState('app/config', { title: s => s.system.title })
+  }
+}
+</script>
+<style lang="scss">
+.nm-default {
+  margin: 100px auto;
+  width: 600px;
+  height: 400px;
+  color: #979797;
+  text-align: center;
+}
+</style>

package/packages/page/iframe/index.vue

@@ -0,0 +1,15 @@
+<template>
+  <nm-container>
+    <iframe :src="url" style="width:100%;height:100%" />
+  </nm-container>
+</template>
+<script>
+export default {
+  name: 'IframeMenu',
+  computed: {
+    url() {
+      return decodeURI(this.$route.params.url)
+    }
+  }
+}
+</script>