haiwei-ui 1.0.0

package/packages/index.js

@@ -0,0 +1,209 @@
+import '@babel/polyfill'
+import './utils/const'
+import Vue from 'vue'
+import lodash from 'lodash'
+import ElementUI from 'element-ui'
+import 'element-ui/lib/theme-chalk/index.css'
+import './styles/app.scss'
+import UseRouter, { router, routes } from './router/'
+import UseStore, { store, storeOptions } from './store/'
+import HttpInit from './utils/http'
+import Layout from './layout'
+import Components, { loginComponents } from './components'
+import Mixins from './mixins/'
+import Directive from './directive'
+import regex from './utils/regex'
+import dayjs from 'dayjs'
+import VueClipboard from 'vue-clipboard2'
+// 皮肤
+import SkinPretty from './skins/pretty/index'
+// 皮肤集合
+let skins = [SkinPretty]
+
+Vue.config.productionTip = false
+
+// 附加自定义样式
+const appendCustomCss = config => {
+  const customCss = config.component.customCss
+  if (customCss) {
+    var style = document.createElement('style')
+    style.type = 'text/css'
+    if (style.styleSheet) {
+      style.styleSheet.cssText = customCss
+    } else {
+      // w3c浏览器中只要创建文本节点插入到style元素中就行了
+      var textNode = document.createTextNode(customCss)
+      style.appendChild(textNode)
+    }
+    document.head.appendChild(style)
+  }
+}
+
+/** 注册皮肤 */
+const useSkin = skin => {
+  // 注册组件
+  Vue.component('skin-' + skin.options.code.toLowerCase(), skin.component)
+  // 注册状态
+  store.registerModule('app/skins/' + skin.options.code, skin.store)
+  // 添加到列表
+  store.commit('app/skins/registerSkin', skin.options)
+}
+
+export default {
+  /** 注册皮肤 */
+  registerSkin(skin) {
+    skins.push(skin)
+  },
+  /** 设置接口 */
+  configApi(config) {
+    // 初始化接口信息
+    HttpInit(config)
+  },
+  /**
+   * @description 加载皮肤组件
+   */
+  use: async ({ config, modules, actions }) => {
+    // 设置标题
+    document.title = config.system.title
+
+    // 将lodash添加到Vue的实例属性
+    Vue.prototype.$_ = lodash
+
+    // 日期格式化插件
+    Vue.prototype.$dayjs = dayjs
+
+    // 全局混入
+    Mixins.global(Vue)
+
+    // 加载饿了么框架
+    Vue.use(ElementUI)
+
+    // 复制到粘贴板组件
+    Vue.use(VueClipboard)
+
+    // 加载自定义组件
+    Vue.use(Components)
+
+    // 注册皮肤组件
+    Vue.component('nm-skins', Layout)
+
+    // 注册指令
+    Vue.use(Directive)
+
+    // 全局组件
+    let globalComponents = []
+    // 自定义工具栏组件
+    let customToolbars = []
+    // 回调方法
+    let callbacks = []
+    //页面集合
+    let pages = []
+
+    // 加载模块信息
+    modules.forEach(m => {
+      // 注入路由信息
+      if (m.routes) {
+        m.routes.forEach(r => {
+          routes.push(r)
+          pages.push({
+            moduleCode: m.module.code,
+            name: r.meta.title || '',
+            icon: r.meta.icon || '',
+            code: r.name.toLowerCase(),
+            frameIn: typeof r.meta.frameIn === 'undefined' ? true : r.meta.frameIn,
+            cache: typeof r.meta.cache === 'undefined' ? true : r.meta.cache,
+            noPermission: typeof r.meta.noPermission === 'undefined' ? false : r.meta.noPermission,
+            path: r.path,
+            permissions: r.meta.permissions,
+            buttons: r.meta.buttons
+          })
+        })
+      }
+
+      // 注入状态信息
+      if (m.store) {
+        storeOptions.modules.module.modules[m.module.code] = m.store
+      }
+
+      // 注入回调方法
+      if (m.callback) {
+        callbacks.push(m.callback)
+      }
+
+      // 添加全局组件
+      if (m.components) {
+        m.components.forEach(c => {
+          globalComponents.push(c)
+
+          // 判断是否是登录组件
+          if (c.name.startsWith('nm-login-')) {
+            loginComponents.push(c.name.replace('nm-login-', ''))
+          }
+          // 判断是否是登录组件
+          if (c.name.startsWith('nm-toolbar-')) {
+            customToolbars.push(c.name.replace('nm-toolbar-', ''))
+          }
+        })
+      }
+    })
+
+    // 保存登录页组件
+    config.component.login.pageTypeOptions = loginComponents
+
+    // 系统属性
+    let system = {
+      modules: modules.map(m => m.module),
+      customToolbars: customToolbars,
+      globalComponents: globalComponents.map(m => m.name),
+      actions
+    }
+
+    // 使用状态
+    UseStore()
+
+    // 使用路由
+    UseRouter(store, config)
+
+    // 注册皮肤
+    skins.map(s => {
+      useSkin(s)
+    })
+
+    // 加载页面数据
+    await store.dispatch('app/config/init', { config, system, pages }, { root: true })
+
+    // 加载本地令牌
+    store.commit('app/token/load', null, { root: true })
+
+    // 注册全局组件
+    if (globalComponents) {
+      globalComponents.forEach(com => {
+        Vue.component(com.name, com.component)
+      })
+    }
+
+    // 创建根实例
+    const vm = new Vue({
+      router,
+      store,
+      render: h => h('nm-skins')
+    }).$mount('#app')
+
+    // 处理回调
+    if (callbacks) {
+      callbacks.forEach(cb => {
+        cb({ vm, store, router, Vue })
+      })
+    }
+
+    // 附加自定义样式
+    appendCustomCss(config)
+
+    return { router, store, vm }
+  }
+}
+
+const mixins = Mixins.components
+
+// 导出混入组件、状态实例、路由实例
+export { mixins, store, router, regex }

package/packages/layout.vue

@@ -0,0 +1,39 @@
+<template>
+  <div id="app" :class="current.theme">
+    <template v-if="inFrame">
+      <component v-if="initialized" :is="`skin-${current.name.toLowerCase()}`"></component>
+    </template>
+    <template v-else>
+      <router-view />
+    </template>
+
+    <!--对话框菜单-->
+    <nm-dialog v-bind="dialogMenu" :visible.sync="dialogNemuVisible">
+      <iframe :src="dialogMenu.url" style="width:100%;height:100%"></iframe>
+    </nm-dialog>
+  </div>
+</template>
+<script>
+import { mapState, mapActions } from 'vuex'
+export default {
+  computed: {
+    ...mapState('app/skins', ['initialized', 'current']),
+    ...mapState('app/dialog-menu', { dialogMenu: state => state }),
+    // 是否在框架中显示
+    inFrame() {
+      return !this.$route.meta || this.$route.meta.frameIn !== false
+    },
+    dialogNemuVisible: {
+      get() {
+        return this.dialogMenu.visible
+      },
+      set() {
+        this.dialogMenuClose()
+      }
+    }
+  },
+  methods: {
+    ...mapActions('app/dialog-menu', { dialogMenuClose: 'close' })
+  }
+}
+</script>

package/packages/library.js

@@ -0,0 +1,5 @@
+// 当前库的一些信息
+export default {
+  // 前缀
+  prefix: 'Nm'
+}

package/packages/mixins/components/button.js

@@ -0,0 +1,15 @@
+import { mapState } from 'vuex'
+export default {
+  computed: {
+    ...mapState('app/config', { _buttonPermissionEnabled: s => s.permission.button }),
+    ...mapState('app/account', { _buttons: s => s.buttons })
+  },
+  methods: {
+    _hasButton(btn) {
+      if (!this._buttonPermissionEnabled) {
+        return true
+      }
+      return !this._buttons.every(c => c.toLowerCase() !== btn.code.toLowerCase())
+    }
+  }
+}

package/packages/mixins/components/checkbox.vue

@@ -0,0 +1,98 @@
+<template>
+  <el-checkbox-group
+    class="nm-checkbox"
+    v-model="value_"
+    :size="size || fontSize"
+    :disabled="disabled"
+    :min="min"
+    :max="max"
+    :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-checkbox-group>
+</template>
+<script>
+import loading from './loading'
+export default {
+  mixins: [loading],
+  data() {
+    return {
+      value_: this.value,
+      options: [],
+      action: null,
+      loading: false
+    }
+  },
+  props: {
+    value: {
+      type: Array,
+      default() {
+        return []
+      }
+    },
+    size: String,
+    disabled: Boolean,
+    min: Number,
+    max: Number,
+    border: Boolean,
+    textColor: String,
+    fill: String,
+    button: Boolean
+  },
+  computed: {
+    _tagName() {
+      return this.button ? 'el-checkbox-button' : 'el-checkbox'
+    },
+    selection() {
+      let list = []
+      if (this.value_) {
+        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
+            }
+          }
+        })
+      }
+      return list
+    }
+  },
+  methods: {
+    refresh() {
+      this.loading = true
+      this.action()
+        .then(options => {
+          this.options = options
+          this.loading = false
+        })
+        .catch(() => {
+          this.loading = false
+        })
+    },
+    // 清楚已选项
+    clear() {
+      this.value_ = this.value
+      this.onChange()
+    },
+    onChange() {
+      this.$emit('input', this.value_)
+      this.$emit('change', this.value_, this.selection, this.options)
+    }
+  },
+  created() {
+    this.refresh()
+  },
+  watch: {
+    value(val) {
+      if (val !== this.value_) this.value_ = val
+    }
+  }
+}
+</script>

package/packages/mixins/components/dialog.js

@@ -0,0 +1,3 @@
+import visible from './visible'
+//历史遗留文件
+export default visible

package/packages/mixins/components/drawer.js

@@ -0,0 +1,3 @@
+import visible from './visible'
+
+export default visible

package/packages/mixins/components/form-dialog-edit.js

@@ -0,0 +1,67 @@
+import dialog from './dialog'
+export default {
+  mixins: [dialog],
+  data() {
+    return {
+      // 存储表单数据
+      model_: {},
+      form: {
+        icon: 'edit',
+        model: {
+          id: ''
+        },
+        customResetFunction: this.onReset,
+        loading: false
+      },
+      on: {
+        success: this.onSuccess,
+        open: this.onOpen
+      }
+    }
+  },
+  props: {
+    id: {
+      type: [String, Number],
+      required: true
+    },
+    /** 是否总是刷新数据，即使相同id */
+    allRefresh: {
+      type: Boolean,
+      default: true
+    }
+  },
+  methods: {
+    async edit() {
+      this.form.loading = true
+      if (this.editAction) {
+        this.form.model = await this.editAction()
+      } else {
+        this.form.model = await this.api.edit(this.id)
+      }
+      this.model_ = this.$_.merge({}, this.form.model)
+      this.form.loading = false
+
+      // 刷新数据后的回调方法
+      if (this.afterRefresh) {
+        this.afterRefresh()
+      }
+    },
+    onReset() {
+      this.form.model = this.$_.merge({}, this.model_)
+    },
+    onSuccess(data) {
+      this.$emit('success', this.form.model, data)
+    },
+    onOpen() {
+      if (!this.id) {
+        this._warning('请选择要编辑的数据~')
+        this.$refs.form.reset()
+        return
+      }
+
+      if (this.allRefresh || this.id !== this.form.model.id) {
+        this.edit()
+      }
+    }
+  }
+}

package/packages/mixins/components/form-readonly.js

@@ -0,0 +1,33 @@
+export default {
+  data() {
+    return {
+      id_: '',
+      form: {
+        model: {},
+        disabled: true,
+        loading: false
+      },
+      on: {
+        open: this.onOpen
+      }
+    }
+  },
+  props: {
+    id: [String, Number]
+  },
+  methods: {
+    onOpen() {
+      if (this.id !== this.id_) {
+        this.form.loading = true
+        this.action(this.id)
+          .then(data => {
+            this.form.model = data
+            this.form.loading = false
+          })
+          .catch(() => {
+            this.form.loading = false
+          })
+      }
+    }
+  }
+}

package/packages/mixins/components/form-save.js

@@ -0,0 +1,123 @@
+import visible from './visible'
+export default {
+  mixins: [visible],
+  data() {
+    return {
+      // 存储表单数据
+      model_: {},
+      form: {
+        icon: '',
+        action: null,
+        model: {
+          id: null
+        },
+        customResetFunction: null,
+        disabled: this.readonly,
+        footerCloseButton: true,
+        loading: false
+      },
+      //编辑时，是否总是刷新
+      allRefresh: true,
+      on: {
+        success: this.onSuccess,
+        opened: this.onOpened
+      },
+      //文本标签
+      labels: {
+        add: '新增',
+        edit: '编辑',
+        read: '查看'
+      }
+    }
+  },
+  props: {
+    //id不为空，标识编辑或预览，反之为新增
+    id: [String, Number],
+    /**是否只读 */
+    readonly: Boolean,
+    /**总数，用于有排序需求的默认值 */
+    total: Number
+  },
+  computed: {
+    //是否添加
+    isAdd_() {
+      return this.id === null || this.id === '' || typeof this.id === 'undefined'
+    },
+    //是否编辑
+    isEdit_() {
+      return !this.isAdd_
+    }
+  },
+  methods: {
+    /**设置信息 */
+    setInfo() {
+      const { form, title, readonly, actions, labels } = this
+      //添加
+      if (this.isAdd_) {
+        form.title = `${labels.add}${title}`
+        form.icon = 'add'
+        form.customResetFunction = null
+        form.action = actions.add
+        return
+      }
+      //编辑
+      form.title = `${readonly ? labels.read : labels.edit}${title}`
+      form.icon = readonly ? 'preview' : 'edit'
+      form.customResetFunction = this.reset
+      form.action = actions.update
+    },
+    reset() {
+      this.form.model = this.$_.merge({}, this.model_)
+    },
+    //获取编辑信息
+    edit() {
+      const { id, form, actions } = this
+      form.loading = true
+      actions
+        .edit(id)
+        .then(data => {
+          this.model_ = this.$_.merge({}, data)
+          //重置
+          this.$refs.form.reset()
+
+          //打开后执行的方法
+          if (this.afterEdit) {
+            this.afterEdit()
+          }
+          form.loading = false
+        })
+        .catch(() => {
+          form.loading = false
+        })
+    },
+    onSuccess(data) {
+      this.$emit('success', this.form.model, data, this.isAdd_)
+    },
+    onOpened() {
+      //设置图标
+      this.setInfo()
+
+      if (this.isEdit_) {
+        //编辑时是否总是刷新或者id不同时也刷新
+        if (this.allRefresh || this.id !== this.form.model.id) {
+          this.edit()
+        }
+      } else {
+        //如果总是刷新则要重置
+        if (this.allRefresh) {
+          this.$refs.form.reset()
+        }
+      }
+
+      //打开后执行的方法
+      if (this.afterOpen) {
+        this.afterOpen()
+      }
+    }
+  },
+  watch: {
+    readonly(val) {
+      this.form.disabled = val
+    }
+  }
+}

package/packages/mixins/components/input.js

@@ -0,0 +1,24 @@
+export default {
+  data() {
+    return {
+      value_: this.value
+    }
+  },
+  props: {
+    value: {
+      type: String
+    }
+  },
+  methods: {
+    onChange(val) {
+      this.value_ = val
+      this.$emit('input', this.value_)
+      this.$emit('change', this.value_)
+    }
+  },
+  watch: {
+    value(val) {
+      this.value_ = val
+    }
+  }
+}

package/packages/mixins/components/list.js

@@ -0,0 +1,36 @@
+export default {
+  data() {
+    return {
+      //当前选中项
+      curr: { id: '' },
+      dialog: {
+        save: false
+      },
+      //只读
+      readonly: false,
+      //总数量
+      total: 0
+    }
+  },
+  methods: {
+    refresh() {
+      this.$refs.list.refresh()
+    },
+    add(total) {
+      this.curr.id = ''
+      this.total = total
+      this.readonly = false
+      this.dialog.save = true
+    },
+    edit(row) {
+      this.curr.id = row.id
+      this.readonly = false
+      this.dialog.save = true
+    },
+    preview(row) {
+      this.curr.id = row.id
+      this.readonly = true
+      this.dialog.save = true
+    }
+  }
+}

package/packages/mixins/components/loading.js

@@ -0,0 +1,20 @@
+import { mapState } from 'vuex'
+export default {
+  computed: {
+    ...mapState('app/loading', {
+      loadingText: 'text',
+      loadingBackground: 'background',
+      loadingSpinner: 'spinner'
+    })
+  },
+  methods: {
+    _loading(text) {
+      return this.$loading({
+        lock: true,
+        text: text || this.loadingText,
+        spinner: this.loadingSpinner,
+        background: this.loadingBackground
+      })
+    }
+  }
+}