初始化项目

mes/qd/src/views/system/menu/dd/index.vue

@@ -0,0 +1,304 @@
+<template>
+  <div class="app-container">
+    <!--工具栏-->
+    <div class="head-container">
+      <div v-if="crud.props.searchToggle">
+        <!-- 搜索 -->
+        <el-input
+          v-model="query.blurry"
+          clearable
+          size="mini"
+          placeholder="模糊搜索"
+          style="width: 200px;"
+          class="filter-item"
+          @keyup.enter.native="crud.toQuery"
+        />
+        <rrOperation />
+      </div>
+      <crudOperation :permission="permission" />
+    </div>
+    <!--表单渲染-->
+    <el-dialog
+      append-to-body
+      :close-on-click-modal="false"
+      :before-close="crud.cancelCU"
+      :visible.sync="crud.status.cu > 0"
+      :title="crud.status.title"
+      width="650px"
+    >
+      <el-form ref="form" :inline="true" :model="form" :rules="rules" size="mini" label-width="80px">
+        <el-form-item label="菜单类型" prop="type">
+          <el-radio-group v-model="form.type" size="mini">
+            <el-radio-button label="1">系统</el-radio-button>
+            <el-radio-button label="2">目录</el-radio-button>
+            <el-radio-button label="3">菜单</el-radio-button>
+            <el-radio-button label="4">按钮</el-radio-button>
+          </el-radio-group>
+        </el-form-item>
+        <el-form-item v-show="form.type.toString() !== '1' && form.type.toString() !== '4' " label="菜单图标" prop="icon">
+          <el-popover
+            placement="bottom-start"
+            width="450"
+            trigger="click"
+            @show="$refs['iconSelect'].reset()"
+          >
+            <IconSelect ref="iconSelect" @selected="selected" />
+            <el-input slot="reference" v-model="form.icon" style="width: 450px;" placeholder="点击选择图标" readonly>
+              <svg-icon
+                v-if="form.icon"
+                slot="prefix"
+                :icon-class="form.icon"
+                class="el-input__icon"
+                style="height: 32px;width: 16px;"
+              />
+              <i v-else slot="prefix" class="el-icon-search el-input__icon" />
+            </el-input>
+          </el-popover>
+        </el-form-item>
+        <el-form-item v-show="form.type.toString() !== '2' && form.type.toString() !== '1'" label="外链菜单" prop="iframe">
+          <el-radio-group v-model="form.iframe" size="mini">
+            <el-radio-button label="1">是</el-radio-button>
+            <el-radio-button label="0">否</el-radio-button>
+          </el-radio-group>
+        </el-form-item>
+        <el-form-item v-show="form.type.toString() === '2'" label="菜单缓存" prop="cache">
+          <el-radio-group v-model="form.cache" size="mini">
+            <el-radio-button label="1">是</el-radio-button>
+            <el-radio-button label="0">否</el-radio-button>
+          </el-radio-group>
+        </el-form-item>
+        <el-form-item v-show="form.type.toString() !== '2' && form.type.toString() !== '1' " label="菜单隐藏" prop="hidden">
+          <el-radio-group v-model="form.hidden" size="mini">
+            <el-radio-button label=true>是</el-radio-button>
+            <el-radio-button label=false>否</el-radio-button>
+          </el-radio-group>
+        </el-form-item>
+        <el-form-item v-if="form.type.toString() !== '2'" label="菜单标题" prop="title">
+          <el-input
+            v-model="form.title"
+            :style=" form.type.toString() === '0' ? 'width: 450px' : 'width: 190px'"
+            placeholder="菜单标题"
+          />
+        </el-form-item>
+        <el-form-item v-if="form.type.toString() === '2'" label="按钮名称" prop="title">
+          <el-input v-model="form.title" placeholder="按钮名称" style="width: 190px;" />
+        </el-form-item>
+        <el-form-item v-show="form.type.toString() !== '1' " label="权限标识" prop="permission">
+          <el-input v-model="form.permission" :disabled="form.iframe=='1'" placeholder="权限标识" style="width: 190px;" />
+        </el-form-item>
+        <el-form-item v-if="form.type.toString() !== '1' && form.type.toString() !== '2'" label="路由地址" prop="path">
+          <el-input v-model="form.path" placeholder="路由地址" style="width: 190px;" />
+        </el-form-item>
+        <el-form-item label="菜单排序" prop="menuSort">
+          <el-input-number
+            v-model.number="form.menuSort"
+            :min="0"
+            :max="999"
+            controls-position="right"
+            style="width: 190px;"
+          />
+        </el-form-item>
+        <el-form-item v-show="!form.iframe && form.type.toString() === '3' " label="组件名称" prop="componentName">
+          <el-input v-model="form.componentName" style="width: 190px;" placeholder="匹配组件内Name字段" />
+        </el-form-item>
+        <el-form-item v-show="!form.iframe && (form.type.toString() === '2' ||form.type.toString() === '3' ) " label="组件路径" prop="component">
+          <el-input v-model="form.component" style="width: 190px;" placeholder="组件路径" />
+        </el-form-item>
+        <el-form-item label="上级类目" prop="pid">
+          <!--         normalizer转换-  loadMenus 点击扩展的时候会调用该方法-->
+          <treeselect
+            v-model="form.pid"
+            :options="menus"
+            :load-options="loadMenus"
+            :normalizer="normalizer"
+            style="width: 450px;"
+            placeholder="选择上级类目"
+          />
+        </el-form-item>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button type="text" @click="crud.cancelCU">取消</el-button>
+        <el-button :loading="crud.status.cu === 2" type="primary" @click="crud.submitCU">确认</el-button>
+      </div>
+    </el-dialog>
+    <!--表格渲染-->
+    <el-table
+      ref="table"
+      v-loading="crud.loading"
+      lazy
+      :load="getMenus"
+      :auto-load-root-options="false"
+      :data="crud.data"
+      :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
+      row-key="menuId"
+
+      @select="crud.selectChange"
+      @select-all="crud.selectAllChange"
+      @selection-change="crud.selectionChangeHandler"
+    >
+      <el-table-column type="selection" width="55" />
+      <el-table-column label="菜单标题" prop="title" :min-width="flexWidth('title',crud.data,'菜单标题')" />
+      <el-table-column label="子系统" prop="system_type" :min-width="flexWidth('system_type',crud.data,'子系统')" />
+      <el-table-column prop="icon" label="图标" align="center" :min-width="flexWidth('icon',crud.data,'图标')">
+        <template slot-scope="scope">
+          <svg-icon :icon-class="scope.row.icon ? scope.row.icon : ''" />
+        </template>
+      </el-table-column>
+      <el-table-column prop="menuSort" align="center" label="排序" :min-width="flexWidth('menuSort',crud.data,'排序')">
+        <template slot-scope="scope">
+          {{ scope.row.menuSort }}
+        </template>
+      </el-table-column>
+      <el-table-column prop="permission" label="权限标识" :min-width="flexWidth('permission',crud.data,'权限标识')" />
+      <el-table-column prop="component" label="组件路径" min-width="120" />
+      <el-table-column prop="iframe" label="外链" :formatter="crud.formatIsOrNot" :min-width="flexWidth('iframe',crud.data,'外链')" />
+
+      <el-table-column prop="cache" label="缓存" :formatter="crud.formatIsOrNot" :min-width="flexWidth('cache',crud.data,'缓存')" />
+      <el-table-column prop="hidden" label="可见" :formatter="crud.formatIsOrNot" :min-width="flexWidth('hidden',crud.data,'可见')" />
+      <el-table-column prop="createTime" label="创建日期" :min-width="flexWidth('createTime',crud.data,'创建日期')" />
+      <el-table-column
+        v-permission="['admin','menu:edit','menu:del']"
+        label="操作"
+        width="130px"
+        align="center"
+        fixed="right"
+      >
+        <template slot-scope="scope">
+          <udOperation
+            :data="scope.row"
+            :permission="permission"
+            msg="确定删除吗,如果存在下级节点则一并删除，此操作不能撤销！"
+          />
+        </template>
+      </el-table-column>
+    </el-table>
+  </div>
+</template>
+
+<script>
+import crudMenu from '@/views/system/menu/menu'
+import IconSelect from '@/components/IconSelect'
+import Treeselect from '@riophae/vue-treeselect'
+import '@riophae/vue-treeselect/dist/vue-treeselect.css'
+import { LOAD_CHILDREN_OPTIONS } from '@riophae/vue-treeselect'
+import CRUD, { presenter, header, form, crud } from '@crud/crud'
+import rrOperation from '@crud/RR.operation'
+import crudOperation from '@crud/CRUD.operation'
+import udOperation from '@crud/UD.operation'
+
+// crud交由presenter持有
+const defaultForm = {
+  menuId: null,
+  title: null,
+  menuSort: 999,
+  path: null,
+  system_type: null,
+  category: null,
+  component: null,
+  componentName: null,
+  iframe: 0,
+  roles: [],
+  pid: 0,
+  icon: null,
+  cache: 0,
+  hidden: 0,
+  type: 0,
+  permission: null
+}
+export default {
+  name: 'Menu',
+  components: { Treeselect, IconSelect, crudOperation, rrOperation, udOperation },
+  cruds() {
+    return CRUD({ title: '菜单', idField: 'menuId', url: 'api/sysMenu', crudMethod: { ...crudMenu }})
+  },
+  mixins: [presenter(), header(), form(defaultForm), crud()],
+  data() {
+    return {
+      menus: [],
+      permission: {
+        add: ['admin', 'menu:add'],
+        edit: ['admin', 'menu:edit'],
+        del: ['admin', 'menu:del']
+      },
+      normalizer(node) {
+        return {
+          id: node.menuId,
+          label: node.title,
+          children: node.children
+        }
+      },
+      rules: {
+        title: [
+          { required: true, message: '请输入标题', trigger: 'blur' }
+        ],
+        path: [
+          { required: true, message: '请输入地址', trigger: 'blur' }
+        ]
+      }
+    }
+  },
+  methods: {
+    // 新增与编辑前做的操作
+    [CRUD.HOOK.afterToCU](crud, form) {
+      this.menus = []
+      if (form.menuId) { // 修改
+        if (!form.pid) { // 一级菜单，一级的父级菜单的pid为0.
+          form.pid = 0
+        }
+        this.getSupDepts(form.menuId)
+      } else { // 新增
+        this.menus.push({ menuId: 0, title: '顶级类目', children: null })
+      }
+    },
+    getMenus(tree, treeNode, resolve) {
+      const params = { pid: tree.menuId }
+      setTimeout(() => {
+        crudMenu.getMenus(params).then(res => {
+          resolve(res.content)
+        })
+      }, 100)
+    },
+    getSupDepts(menuId) {
+      crudMenu.getMenuSuperior(menuId).then(res => {
+        const children = res.map(function(obj) {
+          if (!obj.leaf && !obj.children) {
+            obj.children = null
+          }
+          return obj
+        })
+        this.menus = [{ menuId: 0, title: '顶级类目', children: children }]
+      })
+    },
+    loadMenus({ action, parentNode, callback }) {
+      if (action === LOAD_CHILDREN_OPTIONS) {
+        crudMenu.getMenusTree(parentNode.menuId).then(res => {
+          parentNode.children = res.map(function(obj) {
+            if (!obj.leaf) {
+              obj.children = null
+            }
+            return obj
+          })
+          setTimeout(() => {
+            callback()
+          }, 100)
+        })
+      }
+    },
+    // 选中图标
+    selected(name) {
+      this.form.icon = name
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+::v-deep .el-input-number .el-input__inner {
+  text-align: left;
+}
+
+::v-deep .vue-treeselect__control, ::v-deep .vue-treeselect__placeholder, ::v-deep .vue-treeselect__single-value {
+  height: 30px;
+  line-height: 30px;
+}
+</style>

mes/qd/src/views/system/menu/index.vue

@@ -4,23 +4,50 @@
     <div class="head-container">
       <div v-if="crud.props.searchToggle">
         <!-- 搜索 -->
-        <el-input v-model="query.blurry" clearable size="small" placeholder="模糊搜索" style="width: 200px;" class="filter-item" @keyup.enter.native="crud.toQuery" />
-        <date-range-picker v-model="query.createTime" class="date-item" />
+        <el-input
+          v-model="query.blurry"
+          clearable
+          size="mini"
+          placeholder="模糊搜索"
+          style="width: 200px;margin-bottom: 10px"
+          class="filter-item"
+          @keyup.enter.native="queryBlurry"
+        />
+        <el-select
+          v-model="query.systemType"
+          style="width: 100px; height: 35px;top: -5px;"
+          placeholder="所属系统"
+          @change="changetype"
+        >
+          <el-option
+            v-for="item in dict.system_type"
+            :label="item.label"
+            :value="item.value"
+          />
+        </el-select>
         <rrOperation />
       </div>
       <crudOperation :permission="permission" />
     </div>
     <!--表单渲染-->
-    <el-dialog append-to-body :close-on-click-modal="false" :before-close="crud.cancelCU" :visible.sync="crud.status.cu > 0" :title="crud.status.title" width="580px">
-      <el-form ref="form" :inline="true" :model="form" :rules="rules" size="small" label-width="80px">
+    <el-dialog
+      append-to-body
+      :close-on-click-modal="false"
+      :before-close="crud.cancelCU"
+      :visible.sync="crud.status.cu > 0"
+      :title="crud.status.title"
+      width="650px"
+    >
+      <el-form ref="form" :inline="true" :model="form" :rules="rules" size="mini" label-width="80px">
         <el-form-item label="菜单类型" prop="type">
-          <el-radio-group v-model="form.type" size="mini" style="width: 178px">
-            <el-radio-button label="0">目录</el-radio-button>
-            <el-radio-button label="1">菜单</el-radio-button>
-            <el-radio-button label="2">按钮</el-radio-button>
+          <el-radio-group v-model="form.type" size="mini">
+            <el-radio-button label="1">系统</el-radio-button>
+            <el-radio-button label="2">目录</el-radio-button>
+            <el-radio-button label="3">菜单</el-radio-button>
+            <el-radio-button label="4">按钮</el-radio-button>
           </el-radio-group>
         </el-form-item>
-        <el-form-item v-show="form.type.toString() !== '2'" label="菜单图标" prop="icon">
+        <el-form-item v-show="form.type.toString() !== '1' && form.type.toString() !== '4' " label="菜单图标" prop="icon">
           <el-popover
             placement="bottom-start"
             width="450"
@@ -29,55 +56,73 @@
           >
             <IconSelect ref="iconSelect" @selected="selected" />
             <el-input slot="reference" v-model="form.icon" style="width: 450px;" placeholder="点击选择图标" readonly>
-              <svg-icon v-if="form.icon" slot="prefix" :icon-class="form.icon" class="el-input__icon" style="height: 32px;width: 16px;" />
+              <svg-icon
+                v-if="form.icon"
+                slot="prefix"
+                :icon-class="form.icon"
+                class="el-input__icon"
+                style="height: 32px;width: 16px;"
+              />
               <i v-else slot="prefix" class="el-icon-search el-input__icon" />
             </el-input>
           </el-popover>
         </el-form-item>
-        <el-form-item v-show="form.type.toString() !== '2'" label="外链菜单" prop="iframe">
+        <el-form-item v-show="form.type.toString() !== '2' && form.type.toString() !== '1'" label="外链菜单" prop="iframe">
           <el-radio-group v-model="form.iframe" size="mini">
             <el-radio-button label="true">是</el-radio-button>
             <el-radio-button label="false">否</el-radio-button>
           </el-radio-group>
         </el-form-item>
-        <el-form-item v-show="form.type.toString() === '1'" label="菜单缓存" prop="cache">
+        <el-form-item v-show="form.type.toString() === '3'" label="菜单缓存" prop="cache">
           <el-radio-group v-model="form.cache" size="mini">
-            <el-radio-button label="true">是</el-radio-button>
-            <el-radio-button label="false">否</el-radio-button>
+            <el-radio-button label=true>是</el-radio-button>
+            <el-radio-button label=false>否</el-radio-button>
           </el-radio-group>
         </el-form-item>
-        <el-form-item v-show="form.type.toString() !== '2'" label="菜单可见" prop="hidden">
+        <el-form-item v-show="form.type.toString() !== '2' && form.type.toString() !== '1' " label="菜单隐藏" prop="hidden">
           <el-radio-group v-model="form.hidden" size="mini">
-            <el-radio-button label="false">是</el-radio-button>
-            <el-radio-button label="true">否</el-radio-button>
+            <el-radio-button label=true>是</el-radio-button>
+            <el-radio-button label=false>否</el-radio-button>
           </el-radio-group>
         </el-form-item>
         <el-form-item v-if="form.type.toString() !== '2'" label="菜单标题" prop="title">
-          <el-input v-model="form.title" :style=" form.type.toString() === '0' ? 'width: 450px' : 'width: 178px'" placeholder="菜单标题" />
+          <el-input
+            v-model="form.title"
+            :style=" form.type.toString() === '0' ? 'width: 450px' : 'width: 190px'"
+            placeholder="菜单标题"
+          />
         </el-form-item>
         <el-form-item v-if="form.type.toString() === '2'" label="按钮名称" prop="title">
-          <el-input v-model="form.title" placeholder="按钮名称" style="width: 178px;" />
+          <el-input v-model="form.title" placeholder="按钮名称" style="width: 190px;" />
         </el-form-item>
-        <el-form-item v-show="form.type.toString() !== '0'" label="权限标识" prop="permission">
-          <el-input v-model="form.permission" :disabled="form.iframe" placeholder="权限标识" style="width: 178px;" />
+        <el-form-item v-show="form.type.toString() !== '1' " label="权限标识" prop="permission">
+          <el-input v-model="form.permission" :disabled="form.iframe" placeholder="权限标识" style="width: 190px;" />
         </el-form-item>
-        <el-form-item v-if="form.type.toString() !== '2'" label="路由地址" prop="path">
-          <el-input v-model="form.path" placeholder="路由地址" style="width: 178px;" />
+        <el-form-item v-if="form.type.toString() !== '1' && form.type.toString() !== '2'" label="路由地址" prop="path">
+          <el-input v-model="form.path" placeholder="路由地址" style="width: 190px;" />
         </el-form-item>
         <el-form-item label="菜单排序" prop="menuSort">
-          <el-input-number v-model.number="form.menuSort" :min="0" :max="999" controls-position="right" style="width: 178px;" />
+          <el-input-number
+            v-model.number="form.menuSort"
+            :min="0"
+            :max="999"
+            controls-position="right"
+            style="width: 190px;"
+          />
         </el-form-item>
-        <el-form-item v-show="!form.iframe && form.type.toString() === '1'" label="组件名称" prop="componentName">
-          <el-input v-model="form.componentName" style="width: 178px;" placeholder="匹配组件内Name字段" />
+        <el-form-item v-show="!form.iframe && form.type.toString() === '3' " label="组件名称" prop="componentName">
+          <el-input v-model="form.componentName" style="width: 190px;" placeholder="匹配组件内Name字段" />
         </el-form-item>
-        <el-form-item v-show="!form.iframe && form.type.toString() === '1'" label="组件路径" prop="component">
-          <el-input v-model="form.component" style="width: 178px;" placeholder="组件路径" />
+        <el-form-item v-show="!form.iframe && (form.type.toString() === '2' ||form.type.toString() === '3' ) " label="组件路径" prop="component">
+          <el-input v-model="form.component" style="width: 190px;" placeholder="组件路径" />
         </el-form-item>
         <el-form-item label="上级类目" prop="pid">
+          <!--         normalizer转换-  loadMenus 点击扩展的时候会调用该方法-->
           <treeselect
             v-model="form.pid"
             :options="menus"
             :load-options="loadMenus"
+            :normalizer="normalizer"
             style="width: 450px;"
             placeholder="选择上级类目"
           />
@@ -94,51 +139,60 @@
       v-loading="crud.loading"
       lazy
       :load="getMenus"
+      :auto-load-root-options="false"
       :data="crud.data"
       :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
-      row-key="id"
+      row-key="menuId"
+
       @select="crud.selectChange"
       @select-all="crud.selectAllChange"
       @selection-change="crud.selectionChangeHandler"
     >
       <el-table-column type="selection" width="55" />
-      <el-table-column :show-overflow-tooltip="true" label="菜单标题" width="125px" prop="title" />
-      <el-table-column prop="icon" label="图标" align="center" width="60px">
+      <el-table-column label="菜单标题" prop="title" :min-width="100" />
+      <el-table-column label="所属系统" prop="systemType" :min-width="flexWidth('systemType',crud.data,'所属系统')">
+        <template slot-scope="scope">
+          {{ dict.label.system_type[scope.row.systemType] }} : {{scope.row.systemType}}
+        </template>
+      </el-table-column>
+      <el-table-column prop="icon" label="图标" align="center" :min-width="flexWidth('icon',crud.data,'图标')">
         <template slot-scope="scope">
           <svg-icon :icon-class="scope.row.icon ? scope.row.icon : ''" />
         </template>
       </el-table-column>
-      <el-table-column prop="menuSort" align="center" label="排序">
+      <el-table-column prop="menuSort" align="center" label="排序" :min-width="flexWidth('menuSort',crud.data,'排序')">
         <template slot-scope="scope">
           {{ scope.row.menuSort }}
         </template>
       </el-table-column>
-      <el-table-column :show-overflow-tooltip="true" prop="permission" label="权限标识" />
-      <el-table-column :show-overflow-tooltip="true" prop="component" label="组件路径" />
-      <el-table-column prop="iframe" label="外链" width="75px">
+      <el-table-column prop="permission" label="权限标识" :min-width="flexWidth('permission',crud.data,'权限标识')" />
+      <el-table-column prop="component" label="组件路径" min-width="120" />
+      <el-table-column prop="iframe" label="外链" :formatter="crud.formatIsOrNot" :min-width="flexWidth('iframe',crud.data,'外链')">
         <template slot-scope="scope">
           <span v-if="scope.row.iframe">是</span>
           <span v-else>否</span>
         </template>
       </el-table-column>
-      <el-table-column prop="cache" label="缓存" width="75px">
+      <el-table-column prop="cache" label="缓存" :formatter="crud.formatIsOrNot" :min-width="flexWidth('cache',crud.data,'缓存')">
         <template slot-scope="scope">
           <span v-if="scope.row.cache">是</span>
           <span v-else>否</span>
         </template>
       </el-table-column>
-      <el-table-column prop="hidden" label="可见" width="75px">
+      <el-table-column prop="hidden" label="可见" :formatter="crud.formatIsOrNot" :min-width="flexWidth('hidden',crud.data,'可见')">
         <template slot-scope="scope">
           <span v-if="scope.row.hidden">否</span>
           <span v-else>是</span>
         </template>
       </el-table-column>
-      <el-table-column prop="createTime" label="创建日期" width="135px">
-        <template slot-scope="scope">
-          <span>{{ parseTime(scope.row.createTime) }}</span>
-        </template>
-      </el-table-column>
-      <el-table-column v-permission="['admin','menu:edit','menu:del']" label="操作" width="130px" align="center" fixed="right">
+      <el-table-column prop="createTime" label="创建日期" :min-width="flexWidth('createTime',crud.data,'创建日期')" />
+      <el-table-column
+        v-permission="['admin','menu:edit','menu:del']"
+        label="操作"
+        width="130px"
+        align="center"
+        fixed="right"
+      >
         <template slot-scope="scope">
           <udOperation
             :data="scope.row"
@@ -152,7 +206,7 @@
 </template>
 
 <script>
-import crudMenu from '@/api/system/menu'
+import crudMenu from '@/views/system/menu/menu'
 import IconSelect from '@/components/IconSelect'
 import Treeselect from '@riophae/vue-treeselect'
 import '@riophae/vue-treeselect/dist/vue-treeselect.css'
@@ -162,18 +216,39 @@ import rrOperation from '@crud/RR.operation'
 import crudOperation from '@crud/CRUD.operation'
 import udOperation from '@crud/UD.operation'
 import DateRangePicker from '@/components/DateRangePicker'
+import Dict from '../../../components/Dict/Dict'
 
 // crud交由presenter持有
-const defaultForm = { id: null, title: null, menuSort: 999, path: null, component: null, componentName: null, iframe: false, roles: [], pid: 0, icon: null, cache: false, hidden: false, type: 0, permission: null }
+const defaultForm = {
+  menuId: null,
+  title: null,
+  menuSort: 999,
+  path: null,
+  systemType: null,
+  category: null,
+  component: null,
+  componentName: null,
+  iframe: false,
+  roles: [],
+  pid: 0,
+  icon: null,
+  cache: 0,
+  hidden: 0,
+  type: 0,
+  permission: null
+}
 export default {
   name: 'Menu',
   components: { Treeselect, IconSelect, crudOperation, rrOperation, udOperation, DateRangePicker },
   cruds() {
-    return CRUD({ title: '菜单', url: 'api/menus', crudMethod: { ...crudMenu }})
+    return CRUD({ title: '菜单', idField: 'menuId', url: 'api/sysMenu', crudMethod: { ...crudMenu }})
   },
   mixins: [presenter(), header(), form(defaultForm), crud()],
+  dicts: ['system_type'],
   data() {
     return {
+      typeList: [],
+      defaultType: '',
       menus: [],
       permission: {
         add: ['admin', 'menu:add'],
@@ -191,40 +266,83 @@ export default {
     }
   },
   methods: {
+    normalizer(node) {
+      return {
+        id: node.menuId,
+        label: node.title,
+        children: node.children
+      }
+    },
+    queryBlurry() {
+      if (this.query.blurry) {
+        this.query.pid = null
+      }
+      this.crud.toQuery()
+    },
+    changetype() {
+      const sysType = this.dict.dict.system_type[this.query.systemType]
+      this.query.pid = sysType.para1
+      this.crud.toQuery()
+    },
+    [CRUD.HOOK.beforeRefresh]() {
+      // if (this.crud.query.system_type == null) {
+      //   this.crud.query.system_type = '1'
+      // }
+      return true
+    },
     // 新增与编辑前做的操作
     [CRUD.HOOK.afterToCU](crud, form) {
+      console.log(this.dict)
       this.menus = []
-      if (form.id != null) {
-        if (form.pid === null) {
+      if (form.menuId) { // 修改
+        if (!form.pid) { // 一级菜单，一级的父级菜单的pid为0.
           form.pid = 0
         }
-        this.getSupDepts(form.id)
-      } else {
-        this.menus.push({ id: 0, label: '顶级类目', children: null })
+        this.getSupMenus(form.menuId)
+      } else { // 新增
+        this.menus.push({ menuId: 0, title: '顶级类目', children: null })
+      }
+    },
+    [CRUD.HOOK.afterSubmit](crud, form) {
+      if (this.$options.dicts instanceof Array) {
+        new Dict(this.dict).init(this.$options.dicts, () => {
+          this.$nextTick(() => {
+            this.$emit('dictReady')
+          })
+        })
+      }
+    },
+    [CRUD.HOOK.afterDelete](crud, form) {
+      if (this.$options.dicts instanceof Array) {
+        new Dict(this.dict).init(this.$options.dicts, () => {
+          this.$nextTick(() => {
+            this.$emit('dictReady')
+          })
+        })
       }
     },
     getMenus(tree, treeNode, resolve) {
-      const params = { pid: tree.id }
+      const params = { pid: tree.menuId, systemType: tree.systemType }
       setTimeout(() => {
         crudMenu.getMenus(params).then(res => {
           resolve(res.content)
         })
       }, 100)
     },
-    getSupDepts(id) {
-      crudMenu.getMenuSuperior(id).then(res => {
+    getSupMenus(menuId) {
+      crudMenu.getMenuSuperior(menuId).then(res => {
         const children = res.map(function(obj) {
           if (!obj.leaf && !obj.children) {
             obj.children = null
           }
           return obj
         })
-        this.menus = [{ id: 0, label: '顶级类目', children: children }]
+        this.menus = [{ menuId: 0, title: '顶级类目', children: children }]
       })
     },
     loadMenus({ action, parentNode, callback }) {
       if (action === LOAD_CHILDREN_OPTIONS) {
-        crudMenu.getMenusTree(parentNode.id).then(res => {
+        crudMenu.getMenusTree(parentNode.menuId).then(res => {
           parentNode.children = res.map(function(obj) {
             if (!obj.leaf) {
               obj.children = null
@@ -246,11 +364,12 @@ export default {
 </script>
 
 <style rel="stylesheet/scss" lang="scss" scoped>
- ::v-deep .el-input-number .el-input__inner {
-    text-align: left;
-  }
- ::v-deep .vue-treeselect__control,::v-deep .vue-treeselect__placeholder,::v-deep .vue-treeselect__single-value {
-    height: 30px;
-    line-height: 30px;
-  }
+::v-deep .el-input-number .el-input__inner {
+  text-align: left;
+}
+
+::v-deep .vue-treeselect__control, ::v-deep .vue-treeselect__placeholder, ::v-deep .vue-treeselect__single-value {
+  height: 30px;
+  line-height: 30px;
+}
 </style>

mes/qd/src/views/system/menu/menu.js

@@ -0,0 +1,75 @@
+import request from '@/utils/request'
+
+export function getMenusTree(pid) {
+  return request({
+    url: 'api/sysMenu/lazy?pid=' + pid,
+    method: 'get'
+  })
+}
+
+export function getMenus(params) {
+  return request({
+    url: 'api/sysMenu',
+    method: 'get',
+    params
+  })
+}
+
+export function getMenusByRole(params) {
+  return request({
+    url: 'api/sysMenu/getMenusByRole',
+    method: 'post',
+    data: params
+  })
+}
+
+export function getMenuSuperior(ids) {
+  const data = {
+    'ids': ids
+  }
+  return request({
+    url: 'api/sysMenu/superior',
+    method: 'post',
+    data
+  })
+}
+
+export function getChild(id) {
+  return request({
+    url: 'api/sysMenu/child?id=' + id,
+    method: 'get'
+  })
+}
+
+export function buildMenus(data) {
+  return request({
+    url: 'api/sysMenu/build?systemType=' + data,
+    method: 'get'
+  })
+}
+
+export function add(data) {
+  return request({
+    url: 'api/sysMenu',
+    method: 'post',
+    data
+  })
+}
+
+export function del(ids) {
+  return request({
+    url: 'api/sysMenu',
+    method: 'delete',
+    data: ids
+  })
+}
+
+export function edit(data) {
+  return request({
+    url: 'api/sysMenu',
+    method: 'put',
+    data
+  })
+}
+
+export default { add, edit, del, getMenusTree, getMenuSuperior, getMenus, getChild, getMenusByRole }