haiwei-ui 1.0.0

package/packages/components/toolbar/components/skin-toggle/form.vue

@@ -0,0 +1,100 @@
+<template>
+  <nm-drawer class="nm-skin-toggle" v-bind="deawer" :visible.sync="visible_" v-on="on">
+    <el-divider>皮肤</el-divider>
+    <section class="skin-list">
+      <div v-for="item in list" :key="item.code" :class="['skin-list-item', model.name === item.code ? 'active' : '']" @click="onSkinChange(item)">
+        <div class="img">
+          <img :src="item.preview" />
+        </div>
+        <div class="text">
+          <span>{{ item.name }}</span
+          >&nbsp;&nbsp;
+          <el-popover placement="left" :title="item.name" width="700" trigger="click">
+            <img style="width:100%" :src="item.preview" />
+            <nm-button slot="reference" type="text" text="查看大图" />
+          </el-popover>
+        </div>
+      </div>
+    </section>
+    <el-divider>主题</el-divider>
+    <section class="theme-list">
+      <div :class="['theme-list-item', model.theme === item.name ? 'active' : '']" v-for="item in themes" :key="item.name" :style="{ backgroundColor: item.color }" @click="onThemeChange(item)"></div>
+    </section>
+    <el-divider>字号</el-divider>
+    <section class="fontsize-list">
+      <el-radio v-model="model.fontSize" label="default" border>默认</el-radio>
+      <el-radio v-model="model.fontSize" label="medium" border size="medium">中号</el-radio>
+      <el-radio v-model="model.fontSize" label="small" border size="small">小号</el-radio>
+      <el-radio v-model="model.fontSize" label="mini" border size="mini">超小</el-radio>
+    </section>
+
+    <template v-slot:footer>
+      <nm-button type="success" text="保存" @click="onSave" />
+    </template>
+  </nm-drawer>
+</template>
+<script>
+import drawer from '../../../../mixins/components/drawer'
+import { mapState, mapMutations } from 'vuex'
+export default {
+  mixins: [drawer],
+  data() {
+    return {
+      deawer: {
+        header: true,
+        footer: true,
+        title: '皮肤设置',
+        icon: 'skin',
+        width: '650px',
+        fullscreen: false,
+        modal: false
+      },
+      model: {
+        name: '',
+        theme: '',
+        fontSize: ''
+      },
+      on: {
+        success: this.onSuccess,
+        open: this.onOpen
+      }
+    }
+  },
+  computed: {
+    ...mapState('app/system', { saveSkin: s => s.actions.saveSkin }),
+    ...mapState('app/skins', ['current', 'list']),
+    currSkin() {
+      return this.list.find(m => m.code === this.model.name)
+    },
+    themes() {
+      return this.currSkin ? this.currSkin.themes : []
+    }
+  },
+  methods: {
+    ...mapMutations('app/skins', ['toggle', 'init']),
+    onSuccess() {
+      this.$emit('success')
+    },
+    onOpen() {
+      this.model = {
+        name: this.current.name,
+        theme: this.current.theme,
+        fontSize: this.current.fontSize || 'default'
+      }
+    },
+    onSkinChange(skin) {
+      this.model.name = skin.code
+      this.model.theme = skin.themes[0].name
+      this.model.fontSize = 'default'
+    },
+    onThemeChange(theme) {
+      this.model.theme = theme.name
+    },
+    onSave() {
+      this.saveSkin(this.model).then(() => {
+        this.init(this.model)
+      })
+    }
+  }
+}
+</script>

package/packages/components/toolbar/components/skin-toggle/index.vue

@@ -0,0 +1,25 @@
+<template>
+  <div class="nm-toolbar-item">
+    <nm-button class="nm-toolbar-button" type="text" @click="open">
+      <nm-icon name="skin" />
+    </nm-button>
+
+    <toggle-form :visible.sync="visible" />
+  </div>
+</template>
+<script>
+import ToggleForm from './form'
+export default {
+  components: { ToggleForm },
+  data() {
+    return {
+      visible: false
+    }
+  },
+  methods: {
+    open() {
+      this.visible = true
+    }
+  }
+}
+</script>

package/packages/components/toolbar/components/userInfo/index.vue

@@ -0,0 +1,44 @@
+<template>
+  <div class="nm-toolbar-item">
+    <el-dropdown trigger="click">
+      <nm-button class="nm-toolbar-button" type="text">
+        <nm-icon name="user" />
+      </nm-button>
+
+      <el-dropdown-menu class="nm-header-userinfo-dropdown" slot="dropdown">
+        <el-dropdown-item>
+          <nm-button type="text" text="账户信息" icon="user" @click="openUserInfo" />
+        </el-dropdown-item>
+        <el-dropdown-item>
+          <nm-button type="text" text="修改密码" icon="password" @click="updatePassword.visiable = true" />
+        </el-dropdown-item>
+      </el-dropdown-menu>
+    </el-dropdown>
+
+    <!--修改密码-->
+    <nm-update-password :visible.sync="updatePassword.visiable" />
+  </div>
+</template>
+<script>
+import { mapState, mapGetters } from 'vuex'
+import NmUpdatePassword from '../../../update-password'
+export default {
+  components: { NmUpdatePassword },
+  data() {
+    return {
+      updatePassword: {
+        visiable: false
+      }
+    }
+  },
+  computed: {
+    ...mapState('app/account', { userName: 'name' }),
+    ...mapGetters('app/config', ['userPage'])
+  },
+  methods: {
+    openUserInfo() {
+      this.$router.push({ name: this.userPage, query: { tn_: '账户信息' } })
+    }
+  }
+}
+</script>

package/packages/components/toolbar/index.vue

@@ -0,0 +1,26 @@
+<template>
+  <div class="nm-toolbar">
+    <template v-for="t in customToolbars">
+      <component :key="t" :is="`nm-toolbar-${t}`" />
+    </template>
+    <nm-skin-toggle v-if="toolbar.skin" />
+    <nm-userinfo v-if="toolbar.userInfo" />
+    <nm-fullscreen v-if="toolbar.fullscreen" />
+    <nm-logout v-if="toolbar.logout" />
+  </div>
+</template>
+<script>
+import { mapState } from 'vuex'
+import NmFullscreen from './components/fullscreen'
+import NmLogout from './components/logout'
+import NmSkinToggle from './components/skin-toggle'
+import NmUserinfo from './components/userInfo'
+export default {
+  name: 'Toolbar',
+  components: { NmFullscreen, NmLogout, NmSkinToggle, NmUserinfo },
+  computed: {
+    ...mapState('app/config', { toolbar: s => s.component.toolbar }),
+    ...mapState('app/system', { customToolbars: s => s.customToolbars })
+  }
+}
+</script>

package/packages/components/tree-select/index.js

@@ -0,0 +1,12 @@
+import mixins from './mixins.vue'
+export default {
+  name: 'TreeSelect',
+  mixins: [mixins],
+  props: {
+    /**数据请求方法 */
+    action: {
+      type: Function,
+      required: true
+    }
+  }
+}

package/packages/components/tree-select/mixins.vue

@@ -0,0 +1,334 @@
+<template>
+  <!--使用popover来实现下拉效果-->
+  <el-popover ref="popover" :popper-class="popperClass" v-model="visible" :width="width">
+    <nm-box page header no-scrollbar :title="title_" :icon="icon" footer :loading="showLoading">
+      <template v-slot:toolbar>
+        <!--全部折叠按钮-->
+        <el-tooltip v-if="collapseAll" effect="dark" :content="collapsed ? '展开全部' : '折叠全部'" placement="top">
+          <nm-button :icon="collapsed ? 'unfold' : 'fold'" @click="onCollapseAll" />
+        </el-tooltip>
+        <!--刷新按钮-->
+        <nm-button v-if="refresh" icon="refresh" @click="refreshTree" />
+      </template>
+      <section class="nm-tree-select-content">
+        <!--搜索框-->
+        <div class="nm-tree-select-search-wrapper">
+          <el-input :size="fontSize" v-if="filterable" class="nm-tree-select-search" v-model="keyword" placeholder="请输入内容" prefix-icon="el-icon-search"> </el-input>
+        </div>
+        <!--树结构-->
+        <div class="nm-tree-select-tree-wrapper">
+          <div class="nm-tree-select-tree-main">
+            <nm-scrollbar horizontal>
+              <el-tree ref="tree" v-bind="treeOptions" v-on="treeOn"> </el-tree>
+            </nm-scrollbar>
+          </div>
+        </div>
+      </section>
+      <!--按钮-->
+      <template v-slot:footer>
+        <div style="float:left">
+          <span style="float:left;font-size:12px;">
+            {{ multiple ? '多选' : '单选' }}
+            <span v-if="multiple && multipleLimit > 0"
+              >(<label class="nm-size-13 nm-text-danger nm-p-3">{{ selection.length }}/{{ multipleLimit }}</label
+              >)</span
+            >
+          </span>
+        </div>
+        <el-button type="text" @click="save">确定</el-button>
+        <el-button class="nm-text-warning" type="text" @click="reset">重置</el-button>
+        <el-button class="nm-text-info" type="text" @click="visible = false">取消</el-button>
+      </template>
+    </nm-box>
+    <!--展示-->
+    <el-input
+      ref="input"
+      :value="label"
+      class="nm-tree-select-input"
+      :placeholder="placeholder"
+      :disabled="disabled"
+      :suffix-icon="visible ? 'el-icon-arrow-up' : 'el-icon-arrow-down'"
+      readonly
+      slot="reference"
+    >
+    </el-input>
+  </el-popover>
+</template>
+<script>
+export default {
+  data() {
+    return {
+      title_: this.title,
+      /**树配置 */
+      treeOptions: {
+        data: [],
+        nodeKey: 'id',
+        props: {
+          children: 'children',
+          label: 'label'
+        },
+        showCheckbox: true,
+        checkStrictly: true,
+        defaultExpandAll: this.defaultExpandAll,
+        defaultExpandedKeys: [],
+        filterNodeMethod: this.filterNode
+      },
+      /**树事件 */
+      treeOn: {
+        check: this.onCheck,
+        'node-expand': this.onNodeExpand,
+        'node-collapse': this.onNodeCollapse
+      },
+      /**是否显示 */
+      visible: false,
+      /**输入框显示文本 */
+      label: '',
+      /**过滤关键字 */
+      keyword: '',
+      /**已选项 */
+      selection: [],
+      /**折叠状态 */
+      collapsed: false,
+      /**加载动画 */
+      loading: false
+    }
+  },
+  props: {
+    value: [String, Number, Array],
+    placeholder: {
+      type: String,
+      default: '请选择...'
+    },
+    /**头部标题 */
+    title: {
+      type: String,
+      default: '请选择'
+    },
+    /**图标 */
+    icon: {
+      type: String,
+      default: 'tree'
+    },
+    /**宽度 */
+    width: {
+      type: String,
+      default: '250px'
+    },
+    /**高度 */
+    height: {
+      type: String,
+      default: '400px'
+    },
+    /**可搜索的 */
+    filterable: Boolean,
+    /**禁用的 */
+    disabled: Boolean,
+    /**多选 */
+    multiple: Boolean,
+    /**多选时最多可以选择的项目数，为 0 则不限制 */
+    multipleLimit: {
+      type: Number,
+      default: 0
+    },
+    /**多选时展示用的分隔符 */
+    separator: {
+      type: String,
+      default: '/'
+    },
+    /**是否显示折叠/展开全部按钮 */
+    collapseAll: Boolean,
+    /**默认展开所有 */
+    defaultExpandAll: Boolean,
+    /**不显示加载动画 */
+    noLoading: Boolean,
+    /**是否显示刷新按钮 */
+    refresh: Boolean
+  },
+  computed: {
+    popperClass() {
+      return `nm-tree-select-popover ${this.filterable ? 'filterable' : ''}`
+    },
+    selection_() {
+      let sl = this.selection
+      return this.multiple ? sl.map(m => m) : sl.length > 0 ? sl[0] : null
+    },
+    /**已选中的值 */
+    value_() {
+      let sl = this.selection
+      return this.multiple ? sl.map(m => m.id) : sl.length > 0 ? sl[0].id : ''
+    },
+    showLoading() {
+      return !this.noLoading && this.loading
+    }
+  },
+  methods: {
+    refreshTree() {
+      this.loading = true
+      this.action().then(data => {
+        this.treeOptions.data = data
+        this.change()
+        this.loading = false
+      })
+    },
+    /**
+     * @description 选项更改处理
+     */
+    change() {
+      if (!this.value) return
+
+      let data = this.treeOptions.data
+      if (data.length < 1) return
+
+      let value = this.multiple ? this.value : [this.value]
+
+      //设置显示文本
+      this.setLabel(value)
+      //清除已选项
+      this.selection = []
+      //要展开的选项
+      this.treeOptions.defaultExpandedKeys = value
+
+      this.$nextTick(() => {
+        this.setCheckedKeys(value)
+        this.$emit('change', this.value_, this.selection_)
+      })
+    },
+    /**保存 */
+    save() {
+      if (this.multiple && this.multipleLimit > 0 && this.selection.length > this.multipleLimit) {
+        this.showLimitMsg()
+        return
+      }
+      this.setLabel(this.multiple ? this.value_ : [this.value_])
+      this.$emit('input', this.value_)
+      this.$emit('change', this.value_, this.selection_)
+      this.visible = false
+    },
+    /**重置 */
+    reset() {
+      this.selection = this.multiple ? [] : ''
+      this.setCheckedKeys([])
+
+      this.setLabel(this.multiple ? this.value_ : [this.value_])
+      this.$emit('input', this.value_)
+      this.$emit('change', this.value_, this.selection_)
+    },
+    setLabel(ids) {
+      let datas = []
+      if (ids && ids.length > 0) {
+        ids.map(m => {
+          let nodeData = this.getNodeData(this.treeOptions.data, m)
+          if (nodeData) {
+            datas.push(nodeData)
+          }
+        })
+      }
+      this.label = datas.map(m => m.label).join(` ${this.separator} `)
+    },
+    //递归获取当前数据对象
+    getNodeData(list, id) {
+      for (let i = 0; i < list.length; i++) {
+        const m = list[i]
+        if (m.id === id) {
+          return m
+        }
+
+        if (m.children) {
+          const nodeData = this.getNodeData(m.children, id)
+          if (nodeData != null) return nodeData
+        }
+      }
+      return null
+    },
+    /**设置选中 */
+    setCheckedKeys(keys) {
+      this.$refs.tree.setCheckedKeys(keys || this.selection.map(m => m.id))
+    },
+    /**过滤方法 */
+    filterNode(value, data) {
+      if (!value) return true
+      return data.label.indexOf(value) !== -1
+    },
+    /**显示限制提醒消息 */
+    showLimitMsg() {
+      this._warning(`最多只能选择${this.multipleLimit}个`)
+    },
+    /**复选框点击事件 */
+    onCheck(data, curr) {
+      const { checkedNodes, checkedKeys } = curr
+      if (this.multiple) {
+        if (this.multipleLimit > 0 && checkedKeys.length > this.multipleLimit) {
+          this.showLimitMsg()
+          this.setCheckedKeys() //恢复
+          return
+        }
+        this.selection = checkedNodes.map(m => m.item)
+      } else {
+        this.selection = checkedKeys.length > 0 ? [data.item] : []
+        this.setCheckedKeys()
+      }
+
+      this.$emit('check', data, curr)
+    },
+    /**折叠展开全部事件 */
+    onCollapseAll() {
+      this.collapsed = !this.collapsed
+      let treeStore = this.$refs.tree.store
+      for (var i = 0; i < treeStore._getAllNodes().length; i++) {
+        treeStore._getAllNodes()[i].expanded = !this.collapsed
+      }
+    },
+    /**节点被点击时的回调 */
+    onNodeClick(data, node, cmp) {
+      this.$emit('node-click', data, node, cmp)
+    },
+    /**节点选中状态发生变化时的回调 */
+    onCheckChange(data, checked, indeterminate) {
+      this.$emit('check-change', data, checked, indeterminate)
+    },
+    /**当前选中节点变化时触发的事件 */
+    onCurrentChange(data, node) {
+      this.$emit('current-change', data, node)
+    },
+    /**节点被展开时触发的事件 */
+    onNodeExpand(data, node, cmp) {
+      //记录展开的节点
+      this.treeOptions.defaultExpandedKeys.push(data.id)
+      this.$emit('node-expand', data, node, cmp)
+    },
+    /**节点被关闭时触发的事件 */
+    onNodeCollapse(data, node, cmp) {
+      //移除展开的节点
+      this.$_.pull(this.treeOptions.defaultExpandedKeys, data.id)
+      this.$emit('node-collapse', data, node, cmp)
+    }
+  },
+  created() {
+    this.refreshTree()
+  },
+  mounted() {
+    this.$nextTick(() => {
+      //初始化宽高
+      let el = this.$refs.popover.$el.querySelector('.el-popover')
+      el.style.height = this.height
+      el.style.width = this.width
+    })
+  },
+  watch: {
+    title(val) {
+      this.title_ = val
+    },
+    value(val) {
+      if (val !== this.value_) {
+        this.change()
+      }
+    },
+    defaultExpandAll(val) {
+      this.treeOptions.defaultExpandAll = val
+    },
+    keyword(val) {
+      if (this.filterable) this.$refs.tree.filter(val)
+    }
+  }
+}
+</script>

package/packages/components/txt/index.vue

@@ -0,0 +1,27 @@
+<template>
+  <div :class="['nm-txt', 'nm-text-' + this.type, 'nm-size-' + this.size, { 'nm-text-icon': icon }]">
+    <nm-icon v-if="icon" :name="type" />
+    <slot>{{ text }}</slot>
+  </div>
+</template>
+<script>
+export default {
+  name: 'Txt',
+  props: {
+    // 文本
+    text: String,
+    // 类型 primary\success\warning\danger
+    type: {
+      type: String,
+      default: 'warning'
+    },
+    /** 显示图标 */
+    icon: Boolean,
+    /** 字体大小 */
+    size: {
+      type: [Number, String],
+      default: 12
+    }
+  }
+}
+</script>

package/packages/components/update-password/index.vue

@@ -0,0 +1,84 @@
+<template>
+  <nm-form-dialog
+    ref="form"
+    title="修改密码"
+    class="nm-update-password"
+    width="400px"
+    icon="password"
+    :model="model"
+    :rules="rules"
+    :action="updatePassword"
+    :visible.sync="visible_"
+    success-msg-text="修改成功"
+    @success="logout"
+  >
+    <el-alert title="提示" type="warning" description="密码修改成功后，需要重新登录" show-icon :closable="false"></el-alert>
+    <el-row>
+      <el-col :span="18" :offset="2">
+        <el-form-item label="原密码：" prop="oldPassword">
+          <el-input type="password" v-model="model.oldPassword"></el-input>
+        </el-form-item>
+        <el-form-item label="新密码：" prop="newPassword">
+          <el-input type="password" v-model="model.newPassword"></el-input>
+        </el-form-item>
+        <el-form-item label="确认密码：" prop="confirmPassword">
+          <el-input type="password" v-model="model.confirmPassword"></el-input>
+        </el-form-item>
+      </el-col>
+    </el-row>
+  </nm-form-dialog>
+</template>
+<script>
+import visible from '../../mixins/components/visible.js'
+import { mapState, mapActions } from 'vuex'
+
+export default {
+  name: 'UpdatePassword',
+  mixins: [visible],
+  data() {
+    // 密码验证
+    const validator = (rule, value, callback) => {
+      if (value === '') {
+        callback(new Error('请输入确认密码'))
+      } else if (value !== this.model.newPassword) {
+        callback(new Error('两次输入密码不一致!'))
+      } else {
+        callback()
+      }
+    }
+    return {
+      model: {
+        oldPassword: '',
+        newPassword: '',
+        confirmPassword: ''
+      },
+      rules: {
+        oldPassword: [{ required: true, message: '请输入原密码' }],
+        newPassword: [
+          { required: true, message: '请输入新密码' },
+          { min: 6, message: '密码长度不能小于6' }
+        ],
+        confirmPassword: [{ validator }]
+      }
+    }
+  },
+  computed: {
+    ...mapState('app/system', { updatePassword: s => s.actions.updatePassword })
+  },
+  methods: {
+    ...mapActions('app/system', ['logout'])
+  }
+}
+</script>
+<style lang="scss" scoped>
+.nm-update-password {
+  .el-alert {
+    margin-top: -5px;
+    margin-bottom: 10px;
+    line-height: 15px;
+  }
+  .el-visible__footer {
+    line-height: 15px;
+  }
+}
+</style>

package/packages/directive/has/index.js

@@ -0,0 +1,23 @@
+import { store } from '../../store'
+
+// 按钮权限指令
+const has = {
+  inserted: (el, binding) => {
+    // 如果编码为空则始终显示
+    if (!binding.value) return
+
+    // 验证是否开启按钮验证
+    if (store.state.app.config.permission.button) {
+      var buttons = store.state.app.account.buttons
+      const code = binding.value
+      if (buttons.every(c => c.toLowerCase() !== code.toLowerCase())) {
+        el.parentNode.removeChild(el)
+      }
+    }
+  }
+}
+
+export default {
+  name: 'Has',
+  directive: has
+}

package/packages/directive/index.js

@@ -0,0 +1,13 @@
+import lib from '../library'
+import has from './has'
+
+const directives = [has]
+
+const install = {
+  install: Vue => {
+    directives.forEach(o => {
+      Vue.directive(`${lib.prefix}${o.name}`, o.directive)
+    })
+  }
+}
+export default install