haiwei-module-admin 1.0.0

package/src/views/menu/components/edit/components/node/index.vue

@@ -0,0 +1,53 @@
+<template>
+  <nm-form ref="form" v-bind="form" v-on="on">
+    <el-row :gutter="50">
+      <el-col :span="10" :offset="2">
+        <el-form-item label="父节点">
+          <el-input v-model="parent.path" disabled />
+        </el-form-item>
+      </el-col>
+      <el-col :span="10">
+        <el-form-item label="菜单名称：" prop="name">
+          <el-input v-model="form.model.name" />
+        </el-form-item>
+      </el-col>
+    </el-row>
+    <el-row :gutter="50">
+      <el-col :span="10" :offset="2">
+        <el-form-item label="图标：" prop="icon">
+          <nm-icon-picker v-model="form.model.icon" />
+        </el-form-item>
+      </el-col>
+      <el-col :span="10">
+        <el-form-item label="图标颜色：" prop="iconColor">
+          <nm-color-picker v-model="form.model.iconColor" />
+        </el-form-item>
+      </el-col>
+    </el-row>
+    <el-row :gutter="50">
+      <el-col :span="10" :offset="2">
+        <el-form-item label="排序：" prop="sort">
+          <el-input v-model="form.model.sort" />
+        </el-form-item>
+      </el-col>
+      <el-col :span="10">
+        <el-form-item label="显示：" prop="show">
+          <el-switch v-model="form.model.show" />
+        </el-form-item>
+      </el-col>
+    </el-row>
+    <el-row :gutter="50">
+      <el-col :span="20" :offset="2">
+        <el-form-item label="备注：" prop="remarks">
+          <el-input v-model="form.model.remarks" type="textarea" :rows="2" placeholder="请输入内容"></el-input>
+        </el-form-item>
+      </el-col>
+    </el-row>
+  </nm-form>
+</template>
+<script>
+import mixins from '../mixins'
+export default {
+  mixins: [mixins]
+}
+</script>

package/src/views/menu/components/edit/components/route/index.vue

@@ -0,0 +1,122 @@
+<template>
+  <nm-form ref="form" v-bind="form" v-on="on">
+    <el-row :gutter="50">
+      <el-col :span="20" :offset="2">
+        <el-form-item label="父节点">
+          <el-input v-model="parent.path" disabled />
+        </el-form-item>
+      </el-col>
+    </el-row>
+    <el-row :gutter="50">
+      <el-col :span="10" :offset="2">
+        <el-form-item label="所属模块：" prop="moduleCode">
+          <nm-module-select v-model="form.model.moduleCode" />
+        </el-form-item>
+      </el-col>
+      <el-col :span="10">
+        <el-form-item label="选择页面：" prop="route">
+          <el-select v-model="form.model.routeName" placeholder="请选择" @change="onPageChange">
+            <el-option v-for="p in pages" :key="p.code" :label="p.name" :value="p.code">
+              <span>{{ p.name }}__{{ p.code }}</span>
+            </el-option>
+          </el-select>
+        </el-form-item>
+      </el-col>
+    </el-row>
+    <el-row :gutter="50">
+      <el-col :span="10" :offset="2">
+        <el-form-item label="菜单名称：" prop="name">
+          <el-input v-model="form.model.name" />
+        </el-form-item>
+      </el-col>
+      <el-col :span="10">
+        <el-form-item label="路由名称：" prop="routeName">
+          <el-input v-model="form.model.routeName" disabled />
+        </el-form-item>
+      </el-col>
+    </el-row>
+    <el-row :gutter="50">
+      <el-col :span="10" :offset="2">
+        <el-form-item label="路由参数：" prop="routeParams">
+          <el-input v-model="form.model.routeParams" type="textarea" :rows="2" placeholder="params"></el-input>
+        </el-form-item>
+      </el-col>
+      <el-col :span="10">
+        <el-form-item label="路由参数：" prop="routeQuery">
+          <el-input v-model="form.model.routeQuery" type="textarea" :rows="2" placeholder="query"></el-input>
+        </el-form-item>
+      </el-col>
+    </el-row>
+    <el-row :gutter="50">
+      <el-col :span="10" :offset="2">
+        <el-form-item label="图标：" prop="icon">
+          <nm-icon-picker v-model="form.model.icon" />
+        </el-form-item>
+      </el-col>
+      <el-col :span="10">
+        <el-form-item label="图标颜色：" prop="iconColor">
+          <nm-color-picker v-model="form.model.iconColor" />
+        </el-form-item>
+      </el-col>
+    </el-row>
+    <el-row :gutter="50">
+      <el-col :span="10" :offset="2">
+        <el-form-item label="排序：" prop="sort">
+          <el-input v-model="form.model.sort" />
+        </el-form-item>
+      </el-col>
+      <el-col :span="10">
+        <el-form-item label="显示：" prop="show">
+          <el-switch v-model="form.model.show" />
+        </el-form-item>
+      </el-col>
+    </el-row>
+    <el-row :gutter="50">
+      <el-col :span="20" :offset="2">
+        <el-form-item label="备注：" prop="remarks">
+          <el-input v-model="form.model.remarks" type="textarea" :rows="2" placeholder="请输入内容"></el-input>
+        </el-form-item>
+      </el-col>
+    </el-row>
+  </nm-form>
+</template>
+<script>
+import { mapState } from 'vuex'
+import mixins from '../mixins'
+export default {
+  mixins: [mixins],
+  data() {
+    return {
+      form: {
+        model: {
+          type: 1
+        },
+        rules: {
+          moduleCode: [{ required: true, message: '请选择模块' }],
+          routeName: [{ required: true, message: '请选择路由名称' }]
+        }
+      }
+    }
+  },
+  computed: {
+    ...mapState('app/page', { allPages: s => s.pages }),
+    pages() {
+      if (!this.form.model.moduleCode) return []
+      return this.allPages.filter(m => m.moduleCode.toLowerCase() === this.form.model.moduleCode.toLowerCase())
+    }
+  },
+  methods: {
+    onPageChange(val) {
+      for (var i = 0; i < this.pages.length; i++) {
+        let page = this.pages[i]
+        if (page.code === val) {
+          this.form.model.name = page.name
+          this.form.model.routeName = page.code
+          this.form.model.icon = page.icon
+          break
+        }
+      }
+    }
+  }
+}
+</script>

package/src/views/menu/components/edit/index.vue

@@ -0,0 +1,95 @@
+<template>
+  <nm-dialog v-bind="dialog" @open="onOpen" :visible.sync="visible_">
+    <node-menu ref="node" v-if="model.type === 0" :model="model" :parent="parent" v-on="on" />
+    <route-menu ref="route" v-else-if="model.type === 1" :model="model" :parent="parent" v-on="on" />
+    <link-menu ref="link" v-else :model="model" :parent="parent" v-on="on" />
+    <template v-slot:footer>
+      <nm-button text="保存" type="success" @click="onSubmit" />
+      <nm-button text="重置" type="info" @click="onReset" />
+    </template>
+  </nm-dialog>
+</template>
+<script>
+import { mixins } from 'netmodular-ui'
+import NodeMenu from './components/node'
+import RouteMenu from './components/route'
+import LinkMenu from './components/link'
+
+const api = $api.admin.menu
+
+export default {
+  mixins: [mixins.dialog],
+  components: { NodeMenu, RouteMenu, LinkMenu },
+  data() {
+    return {
+      model: {
+        type: 0
+      },
+      dialog: {
+        footer: true,
+        title: '编辑菜单',
+        icon: 'add',
+        width: '60%',
+        class: 'nm-admin-menu-edit',
+        loading: false,
+        draggable: true
+      },
+      on: {
+        success: this.onSuccess,
+        error: this.onError,
+        'validate-error': this.onValidateError
+      }
+    }
+  },
+  props: ['parent', 'id'],
+  methods: {
+    async edit() {
+      if (this.id === '') {
+        this._warning('请选择要编辑的菜单~')
+        return
+      }
+
+      this.dialog.loading = true
+      this.model = await api.edit(this.id)
+      this.setModel()
+      this.dialog.loading = false
+    },
+    onOpen() {
+      this.edit()
+    },
+    onSubmit() {
+      this.dialog.loading = true
+      this.getModel().submit()
+    },
+    onReset() {
+      this.$nextTick(() => {
+        this.getModel().reset()
+      })
+    },
+    onSuccess(model) {
+      this.dialog.loading = false
+      this.$emit('success', model)
+    },
+    onError() {
+      this.dialog.loading = false
+    },
+    onValidateError() {
+      this.dialog.loading = false
+    },
+    setModel() {
+      this.$nextTick(() => {
+        this.getModel().setModel()
+      })
+    },
+    getModel() {
+      if (this.model.type === 0) {
+        return this.$refs.node
+      } else if (this.model.type === 1) {
+        return this.$refs.route
+      } else {
+        return this.$refs.link
+      }
+    }
+  }
+}
+</script>

package/src/views/menu/components/tree/index.vue

@@ -0,0 +1,153 @@
+<template>
+  <nm-box page header refresh title="菜单预览" icon="menu" @refresh="refresh">
+    <el-tree class="nm-tree" ref="tree" v-bind="tree" :show-checkbox="showCheckbox" :default-expand-all="defaultExpandAll" v-on="on">
+      <span slot-scope="{ data }">
+        <nm-icon :name="data.item.icon || 'attachment'" />
+        <span class="nm-m-l-5">{{ data.label }}</span>
+      </span>
+    </el-tree>
+  </nm-box>
+</template>
+<script>
+const api = $api.admin.menu
+export default {
+  data() {
+    return {
+      tree: {
+        data: [],
+        nodeKey: 'id',
+        highlightCurrent: true,
+        props: { children: 'children', label: 'label' },
+        currentNodeKey: '00000000-0000-0000-0000-000000000000',
+        expandOnClickNode: false,
+        defaultExpandedKeys: ['00000000-0000-0000-0000-000000000000']
+      },
+      on: {
+        'current-change': this.onChange,
+        'node-expand': this.onNodeExpand,
+        'node-collapse': this.onNodeCollapse,
+        'check-change': this.onCheckChange,
+        check: this.onCheck
+      },
+      selection: null
+    }
+  },
+  props: {
+    //创建时刷新
+    refreshOnCreated: {
+      type: Boolean,
+      default: true
+    },
+    showCheckbox: Boolean,
+    defaultExpandAll: Boolean
+  },
+  methods: {
+    //刷新
+    refresh(init) {
+      api.getTree().then(data => {
+        this.tree.data = [data]
+        if (init) {
+          //初始化触发一次change事件
+          this.onChange(data)
+        } else {
+          //刷新要保留当前点击节点
+          this.$nextTick(() => {
+            this.$refs.tree.setCurrentKey(this.tree.currentNodeKey)
+          })
+        }
+      })
+    },
+    onChange(data, node) {
+      if (this.selection === data) return
+
+      this.tree.currentNodeKey = data.id
+      this.selection = data
+      this.$emit('change', this.selection, node)
+    },
+    onCheck(data, checkedObject) {
+      this.$emit('check', data, checkedObject)
+    },
+    onCheckChange(data, checked) {
+      this.$emit('check-change', data, checked)
+    },
+    onNodeExpand(data) {
+      //记录展开的节点
+      this.tree.defaultExpandedKeys.push(data.id)
+    },
+    onNodeCollapse(data) {
+      //移除展开的节点
+      this.$_.pull(this.tree.defaultExpandedKeys, data.id)
+    },
+    /**插入 */
+    insert(data) {
+      data.path = this.selection.path.concat([data.label])
+
+      //设置子节点
+      if (!data.children) {
+        data.children = []
+      }
+
+      let children = this.selection.children
+      //如果不包含子节点，直接push
+      if (children.length < 1) {
+        children.push(data)
+        return
+      }
+      for (let i = 0; i < children.length; i++) {
+        if (data.item.sort < children[i].item.sort) {
+          children.splice(i, 0, data)
+          break
+        }
+
+        //如果是最后一个，则附加到最后一个节点后面
+        if (i === children.length - 1) {
+          children.push(data)
+          break
+        }
+      }
+    },
+    /**删除 */
+    remove(id) {
+      let children = this.selection.children
+      for (let i = 0; i < children.length; i++) {
+        let child = children[i]
+        if (id === child.id) {
+          children.splice(i, 1)
+          return child
+        }
+      }
+    },
+    /**更新 */
+    update(model) {
+      //先判断是否展开,已展开的先删除
+      let expanded = this.$refs.tree.getNode(model.id).expanded
+      if (!expanded) {
+        this.$_.pull(this.tree.defaultExpandedKeys, model.id)
+      }
+      //保存原来的子节点，同时先删除，再添加，这样可以保证排序
+      model.children = this.remove(model.id).children
+      this.insert(model)
+      //若是展开状态要再次展开
+      if (expanded) {
+        this.tree.defaultExpandedKeys.push(model.id)
+      }
+    },
+    setCheckedKeys(checkedKeys) {
+      this.$nextTick(() => {
+        if (this.showCheckbox) {
+          this.$refs.tree.setCheckedKeys(checkedKeys)
+        }
+      })
+    },
+    /**排序，重新刷新 */
+    sort() {
+      this.refresh()
+    }
+  },
+  created() {
+    if (this.refreshOnCreated) {
+      this.refresh(true)
+    }
+  }
+}
+</script>

package/src/views/menu/index/cols.js

@@ -0,0 +1,46 @@
+export default [
+  {
+    name: 'id',
+    label: '编号',
+    show: false
+  },
+  {
+    name: 'name',
+    label: '名称',
+    sortable: true,
+    width: '150'
+  },
+  {
+    name: 'typeName',
+    label: '类型'
+  },
+  {
+    name: 'routeName',
+    label: '路由名称',
+    width: '150'
+  },
+  {
+    name: 'icon',
+    label: '图标'
+  },
+  {
+    name: 'iconColor',
+    label: '图标颜色'
+  },
+  {
+    name: 'level',
+    label: '等级'
+  },
+  {
+    name: 'show',
+    label: '是否显示'
+  },
+  {
+    name: 'sort',
+    label: '排序'
+  },
+  {
+    name: 'targetName',
+    label: '打开方式'
+  }
+]

package/src/views/menu/index/index.vue

@@ -0,0 +1,175 @@
+<template>
+  <nm-container>
+    <nm-split v-model="split">
+      <template v-slot:left>
+        <menu-tree ref="tree" @change="onTreeChange" />
+      </template>
+      <template v-slot:right>
+        <nm-list ref="list" :title="title" v-bind="list">
+          <!--查询条件-->
+          <template v-slot:querybar>
+            <el-form-item label="名称：" prop="name">
+              <el-input v-model="list.model.name" clearable />
+            </el-form-item>
+            <el-form-item label="编码：" prop="code">
+              <el-input v-model="list.model.code" clearable />
+            </el-form-item>
+          </template>
+
+          <!--按钮-->
+          <template v-slot:querybar-buttons="{ total }">
+            <nm-button :disabled="!menu.isNode" v-bind="buttons.add" @click="add(total)" />
+            <nm-button :disabled="!menu.isNode" v-bind="buttons.sort" @click="openSort" />
+          </template>
+
+          <!--类型-->
+          <template v-slot:col-typeName="{ row }">
+            <el-tag type="success" v-if="row.type === 0">{{ row.typeName }}</el-tag>
+            <el-tag type="warning" v-if="row.type === 1">{{ row.typeName }}</el-tag>
+            <el-tag v-if="row.type === 2">{{ row.typeName }}</el-tag>
+          </template>
+
+          <!--图标-->
+          <template v-slot:col-icon="{ row }">
+            <el-tooltip :content="row.icon" effect="dark" placement="right" v-if="row.icon">
+              <label>
+                <nm-icon :name="row.icon" size="20px" />
+              </label>
+            </el-tooltip>
+            <label v-else>无</label>
+          </template>
+
+          <!--是否显示-->
+          <template v-slot:col-show="{ row }">{{ row.show ? '是' : '否' }}</template>
+
+          <!--操作列-->
+          <template v-slot:col-operation="{ row }">
+            <el-dropdown trigger="click">
+              <span class="el-dropdown-link">
+                操作
+                <i class="el-icon-arrow-down el-icon--right"></i>
+              </span>
+              <el-dropdown-menu class="nm-list-operation-dropdown" slot="dropdown">
+                <el-dropdown-item>
+                  <nm-button v-bind="buttons.edit" @click="edit(row)" />
+                </el-dropdown-item>
+                <el-dropdown-item>
+                  <nm-button-delete v-bind="buttons.del" :action="remove" :id="row.id" @success="onDelete(row.id)" />
+                </el-dropdown-item>
+              </el-dropdown-menu>
+            </el-dropdown>
+          </template>
+        </nm-list>
+      </template>
+    </nm-split>
+
+    <!--添加菜单-->
+    <add-page :parent="menu" :sort="total" :visible.sync="dialog.add" @success="onAdd" />
+    <!--编辑菜单-->
+    <edit-page :parent="menu" :id="curr.id" :visible.sync="dialog.edit" @success="onEdit" />
+    <!--排序-->
+    <nm-drag-sort-dialog v-bind="dragSort" :visible.sync="dialog.sort" @success="onSort" />
+  </nm-container>
+</template>
+<script>
+import page from './page'
+import cols from './cols.js'
+import AddPage from '../components/add'
+import EditPage from '../components/edit'
+import MenuTree from '../components/tree'
+
+// 接口
+const api = $api.admin.menu
+
+export default {
+  name: page.name,
+  components: { MenuTree, AddPage, EditPage },
+  data() {
+    return {
+      split: 0.2,
+      curr: { id: '' },
+      list: {
+        cols,
+        action: api.query,
+        labelWidth: '60px',
+        model: {
+          parentId: '',
+          name: '',
+          code: ''
+        }
+      },
+      remove: api.remove,
+      // 当前数量
+      total: 0,
+      // 弹出框
+      dialog: {
+        add: false,
+        edit: false,
+        // 排序
+        sort: false
+      },
+      // 左侧菜单树选择的菜单
+      menu: {
+        id: '',
+        name: '',
+        path: ''
+      },
+      buttons: page.buttons,
+      dragSort: {
+        queryAction: this.querySortList,
+        updateAction: api.updateSortList,
+        height: '700px'
+      }
+    }
+  },
+  computed: {
+    title() {
+      return '菜单列表—' + this.menu.name
+    }
+  },
+  methods: {
+    refresh() {
+      this.list.model.parentId = this.menu.id
+      this.$refs.list.refresh()
+    },
+    onTreeChange({ id, label, path, item }) {
+      this.menu.id = id
+      this.menu.name = label
+      //是否是节点菜单
+      this.menu.isNode = item.type === 0
+      this.menu.path = path.join(' / ')
+      this.refresh()
+    },
+    add(total) {
+      this.total = total
+      this.dialog.add = true
+    },
+    edit(row) {
+      this.curr = row
+      this.dialog.edit = true
+    },
+    querySortList() {
+      return api.querySortList(this.menu.id)
+    },
+    openSort() {
+      this.dialog.sort = true
+    },
+    onAdd(model) {
+      this.$refs.tree.insert(model)
+      this.refresh()
+    },
+    onDelete(id) {
+      this.$refs.tree.remove(id)
+      this.refresh()
+    },
+    onEdit(model) {
+      this.$refs.tree.update(model)
+      this.refresh()
+    },
+    onSort(data) {
+      this.$refs.tree.sort(data)
+      this.refresh()
+    }
+  }
+}
+</script>

package/src/views/menu/index/page.js

@@ -0,0 +1,48 @@
+/** 页面信息 */
+const page = new (function() {
+  this.title = '菜单管理'
+  this.icon = 'menu'
+  this.name = 'admin_menu'
+  this.path = '/admin/menu'
+  // 权限
+  this.permissions = [`${this.name}_query_get`, `${this.name}_tree_get`]
+  // 按钮
+  this.buttons = {
+    add: {
+      text: '添加',
+      icon: 'add',
+      type: 'success',
+      code: `${this.name}_add`,
+      permissions: [`${this.name}_add_post`]
+    },
+    edit: {
+      text: '编辑',
+      icon: 'edit',
+      type: 'text',
+      code: `${this.name}_edit`,
+      permissions: [`${this.name}_edit_Get`, `${this.name}_update_post`]
+    },
+    del: {
+      text: '删除',
+      icon: 'delete',
+      type: 'text',
+      code: `${this.name}_del`,
+      permissions: [`${this.name}_delete_delete`]
+    },
+    sort: {
+      text: '排序',
+      icon: 'sort',
+      type: 'warning',
+      code: `${this.name}_sort`,
+      permissions: [`${this.name}_sort_get`, `${this.name}_sort_post`]
+    }
+  }
+})()
+
+/** 路由信息 */
+export const route = {
+  page,
+  component: () => import(/* webpackChunkName: "admin.menu" */ './index')
+}
+
+export default page