Selaa lähdekoodia

菜单管理完成

daxiong.yang 7 vuotta sitten
vanhempi
commit
3f10755a1a

+ 6 - 3
src/api/modules/menu.js

31
}
31
}
32
32
33
// 获取菜单信息
33
// 获取菜单信息
34
export function info (menuId) {
34
export function info (id) {
35
  return request({
35
  return request({
36
    url: requestUrl('/sys/menu/info' + (isInteger(menuId) ? `/${menuId}` : '')),
36
    url: requestUrl('/sys/menu/info' + (isInteger(id) ? `/${id}` : '')),
37
    method: 'get',
37
    method: 'get',
38
    params: requestParam({}, 'get')
38
    params: requestParam({}, 'get')
39
  })
39
  })
62
  return request({
62
  return request({
63
    url: requestUrl('/sys/menu/delete'),
63
    url: requestUrl('/sys/menu/delete'),
64
    method: 'post',
64
    method: 'post',
65
    data: requestParam(params)
65
    headers: {
66
      'Content-Type': 'application/x-www-form-urlencoded; charset=utf-8'
67
    },
68
    data: requestParam(params, 'post', false, 'form')
66
  })
69
  })
67
}
70
}

+ 1 - 1
src/api/requestParam.js

16
    't': new Date().getTime()
16
    't': new Date().getTime()
17
  }
17
  }
18
  params = openDefultParams ? merge(defaults, params) : params
18
  params = openDefultParams ? merge(defaults, params) : params
19
  params = requestType === 'post' ? (contentType === 'form' ? qs.stringify(params) : JSON.stringify(params)) : params
19
  params = requestType === 'post' ? (contentType === 'json' ? JSON.stringify(params) : qs.stringify(params)) : params
20
  return params
20
  return params
21
}
21
}

+ 43 - 21
src/views/menu/add-or-update.vue

26
            ref="menuListTree"
26
            ref="menuListTree"
27
            @current-change="menuListTreeCurrentChangeHandle"
27
            @current-change="menuListTreeCurrentChangeHandle"
28
            :default-expand-all="true"
28
            :default-expand-all="true"
29
            :highlight-current="true"
29
            :expand-on-click-node="false">
30
            :expand-on-click-node="false">
30
          </el-tree>
31
          </el-tree>
31
        </el-popover>
32
        </el-popover>
32
        <el-input v-model="dataForm.parentName" v-popover:menuListPopover :readonly="true" placeholder="点击选择上级菜单" class="menu-list__input"></el-input>
33
        <el-input v-model="dataForm.parentName" v-popover:menuListPopover :readonly="true" placeholder="点击选择上级菜单" class="menu-list__input"></el-input>
33
      </el-form-item>
34
      </el-form-item>
34
      <el-form-item label="菜单URL" prop="url">
35
      <el-form-item v-if="dataForm.type === 1" label="菜单URL" prop="url">
35
        <el-input v-model="dataForm.url" placeholder="菜单URL"></el-input>
36
        <el-input v-model="dataForm.url" placeholder="菜单URL"></el-input>
36
      </el-form-item>
37
      </el-form-item>
37
      <el-form-item label="授权标识" prop="perms">
38
      <el-form-item v-if="dataForm.type !== 0" label="授权标识" prop="perms">
38
        <el-input v-model="dataForm.perms" placeholder="多个用逗号分隔, 如: user:list,user:create"></el-input>
39
        <el-input v-model="dataForm.perms" placeholder="多个用逗号分隔, 如: user:list,user:create"></el-input>
39
      </el-form-item>
40
      </el-form-item>
40
      <el-form-item label="排序号" prop="orderNum">
41
        <el-input-number v-model="dataForm.orderNum" :min="1" :max="10" label="排序号"></el-input-number>
41
      <el-form-item v-if="dataForm.type !== 2" label="排序号" prop="orderNum">
42
        <el-input-number v-model="dataForm.orderNum" controls-position="right" :min="0" label="排序号"></el-input-number>
42
      </el-form-item>
43
      </el-form-item>
43
      <el-form-item label="菜单图标" prop="icon">
44
      <el-form-item v-if="dataForm.type !== 2" label="菜单图标" prop="icon">
44
        <el-row>
45
        <el-row>
45
          <el-col :span="22">
46
          <el-col :span="22">
46
            <el-input v-model="dataForm.icon" placeholder="菜单图标"></el-input>
47
            <el-input v-model="dataForm.icon" placeholder="菜单图标"></el-input>
68
<script>
69
<script>
69
  import API from '@/api'
70
  import API from '@/api'
70
  import { treeDataTranslate } from '@/utils'
71
  import { treeDataTranslate } from '@/utils'
71
  import isFinite from 'lodash/isFinite'
72
  export default {
72
  export default {
73
    data () {
73
    data () {
74
      var validateUrl = (rule, value, callback) => {
74
      var validateUrl = (rule, value, callback) => {
81
      return {
81
      return {
82
        visible: false,
82
        visible: false,
83
        dataForm: {
83
        dataForm: {
84
          id: null,
84
          id: 0,
85
          type: 1,
85
          type: 1,
86
          name: '',
86
          name: '',
87
          parentId: null,
87
          parentId: 0,
88
          parentName: '',
88
          parentName: '',
89
          url: '',
89
          url: '',
90
          perms: '',
90
          perms: '',
91
          orderNum: '',
91
          orderNum: 0,
92
          icon: ''
92
          icon: ''
93
        },
93
        },
94
        dataRule: {
94
        dataRule: {
111
    },
111
    },
112
    methods: {
112
    methods: {
113
      init (id) {
113
      init (id) {
114
        this.dataForm.id = isFinite(id) ? id : null
114
        this.dataForm.id = id || 0
115
        API.menu.select().then(({data}) => {
115
        API.menu.select().then(({data}) => {
116
          this.menuList = treeDataTranslate(data.menuList, 'menuId')
116
          this.menuList = treeDataTranslate(data.menuList, 'menuId')
117
        }).then(() => {
117
        }).then(() => {
120
            this.$refs['dataForm'].resetFields()
120
            this.$refs['dataForm'].resetFields()
121
          })
121
          })
122
        }).then(() => {
122
        }).then(() => {
123
          if (isFinite(this.dataForm.id)) {
123
          if (!this.dataForm.id) {
124
            // 新增
125
            this.menuListTreeSetCurrentNode()
126
          } else {
127
            // 修改
128
            API.menu.info(this.dataForm.id).then(({data}) => {
129
              this.dataForm.id = data.menu.menuId
130
              this.dataForm.type = data.menu.type
131
              this.dataForm.name = data.menu.name
132
              this.dataForm.parentId = data.menu.parentId
133
              this.dataForm.url = data.menu.url
134
              this.dataForm.perms = data.menu.perms
135
              this.dataForm.orderNum = data.menu.orderNum
136
              this.dataForm.icon = data.menu.icon
137
              this.menuListTreeSetCurrentNode()
138
            })
124
          }
139
          }
125
        })
140
        })
126
      },
141
      },
129
        this.dataForm.parentId = data.menuId
144
        this.dataForm.parentId = data.menuId
130
        this.dataForm.parentName = data.name
145
        this.dataForm.parentName = data.name
131
      },
146
      },
147
      // 菜单树设置当前选中节点
148
      menuListTreeSetCurrentNode () {
149
        this.$refs.menuListTree.setCurrentKey(this.dataForm.parentId)
150
        this.dataForm.parentName = (this.$refs.menuListTree.getCurrentNode() || {})['name']
151
      },
152
      // 表单提交
132
      dataFormSubmit () {
153
      dataFormSubmit () {
133
        this.$refs['dataForm'].validate((valid) => {
154
        this.$refs['dataForm'].validate((valid) => {
134
          if (valid) {
155
          if (valid) {
135
            var params = {
156
            var params = {
136
              'userId': this.dataForm.userId || undefined,
137
              'username': this.dataForm.userName,
138
              'password': this.dataForm.password,
139
              'email': this.dataForm.email,
140
              'mobile': this.dataForm.mobile,
141
              'status': this.dataForm.status,
142
              'roleIdList': this.dataForm.roleIdList
157
              'menuId': this.dataForm.id || undefined,
158
              'type': this.dataForm.type,
159
              'name': this.dataForm.name,
160
              'parentId': this.dataForm.parentId,
161
              'url': this.dataForm.url,
162
              'perms': this.dataForm.perms,
163
              'orderNum': this.dataForm.orderNum,
164
              'icon': this.dataForm.icon
143
            }
165
            }
144
            var tick = this.dataForm.userId ? API.user.update(params) : API.user.add(params)
166
            var tick = !this.dataForm.id ? API.menu.add(params) : API.menu.update(params)
145
            tick.then(({data}) => {
167
            tick.then(({data}) => {
146
              if (data && data.code === 0) {
168
              if (data && data.code === 0) {
147
                this.$message({
169
                this.$message({
149
                  type: 'success',
171
                  type: 'success',
150
                  duration: 1500,
172
                  duration: 1500,
151
                  onClose: () => {
173
                  onClose: () => {
152
                    this.addOrUpdateVisible = false
153
                    this.getDataList()
174
                    this.visible = false
175
                    this.$emit('refreshDataList')
154
                  }
176
                  }
155
                })
177
                })
156
              } else {
178
              } else {

+ 5 - 3
src/views/menu/index.vue

65
        label="授权标识">
65
        label="授权标识">
66
      </el-table-column>
66
      </el-table-column>
67
      <el-table-column
67
      <el-table-column
68
        fixed="right"
69
        header-align="center"
68
        header-align="center"
70
        align="center"
69
        align="center"
71
        width="200"
70
        width="200"
77
      </el-table-column>
76
      </el-table-column>
78
    </tree-table>
77
    </tree-table>
79
    <!-- 弹窗, 新增 / 修改 -->
78
    <!-- 弹窗, 新增 / 修改 -->
80
    <add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate"></add-or-update>
79
    <add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getDataList"></add-or-update>
81
  </div>
80
  </div>
82
</template>
81
</template>
83
82
132
          cancelButtonText: '取消',
131
          cancelButtonText: '取消',
133
          type: 'warning'
132
          type: 'warning'
134
        }).then(() => {
133
        }).then(() => {
135
          API.menu.del([id]).then(({data}) => {
134
          var params = {
135
            'menuId': id
136
          }
137
          API.menu.del(params).then(({data}) => {
136
            if (data && data.code === 0) {
138
            if (data && data.code === 0) {
137
              this.$message({
139
              this.$message({
138
                message: '操作成功',
140
                message: '操作成功',