功能变化: 取消冗余按钮功能，改用简单的字典管理

backend/dvadmin/system/models.py

@@ -109,17 +109,6 @@ class Dept(CoreModel):
         ordering = ('sort',)
 
 
-class Button(CoreModel):
-    name = models.CharField(max_length=64, unique=True, verbose_name="权限名称", help_text="权限名称")
-    value = models.CharField(max_length=64, unique=True, verbose_name="权限值", help_text="权限值")
-
-    class Meta:
-        db_table = table_prefix + "system_button"
-        verbose_name = '权限标识表'
-        verbose_name_plural = verbose_name
-        ordering = ('-name',)
-
-
 class Menu(CoreModel):
     parent = models.ForeignKey(to='Menu', on_delete=models.CASCADE, verbose_name="上级菜单", null=True, blank=True,
                                db_constraint=False, help_text="上级菜单")

backend/dvadmin/system/urls.py

@@ -3,7 +3,6 @@ from rest_framework import routers
 
 from dvadmin.system.views.api_white_list import ApiWhiteListViewSet
 from dvadmin.system.views.area import AreaViewSet
-from dvadmin.system.views.button import ButtonViewSet
 from dvadmin.system.views.dept import DeptViewSet
 from dvadmin.system.views.dictionary import DictionaryViewSet
 from dvadmin.system.views.file_list import FileViewSet
@@ -17,7 +16,6 @@ from dvadmin.system.views.user import UserViewSet
 
 system_url = routers.SimpleRouter()
 system_url.register(r'menu', MenuViewSet)
-system_url.register(r'button', ButtonViewSet)
 system_url.register(r'menu_button', MenuButtonViewSet)
 system_url.register(r'role', RoleViewSet)
 system_url.register(r'dept', DeptViewSet)

backend/dvadmin/system/views/button.py

@@ -1,36 +0,0 @@
-# -*- coding: utf-8 -*-
-
-"""
-@author: 猿小天
-@contact: QQ:1638245306
-@Created on: 2021/6/3 003 0:30
-@Remark: 按钮权限管理
-"""
-from dvadmin.system.models import Button
-from dvadmin.utils.serializers import CustomModelSerializer
-from dvadmin.utils.viewset import CustomModelViewSet
-
-
-class ButtonSerializer(CustomModelSerializer):
-    """
-    按钮权限-序列化器
-    """
-
-    class Meta:
-        model = Button
-        fields = "__all__"
-        read_only_fields = ["id"]
-
-
-class ButtonViewSet(CustomModelViewSet):
-    """
-    按钮权限接口
-    list:查询
-    create:新增
-    update:修改
-    retrieve:单例
-    destroy:删除
-    """
-    queryset = Button.objects.all()
-    serializer_class = ButtonSerializer
-    extra_filter_backends = []

web/src/views/system/button/api.js

@@ -1,41 +0,0 @@
-/*
- * @创建文件时间: 2021-06-01 22:41:21
- * @Auther: 猿小天
- * @最后修改人: 猿小天
- * @最后修改时间: 2021-07-04 22:39:11
- * 联系Qq:1638245306
- * @文件介绍: 权限管理接口
- */
-import { request } from '@/api/service'
-
-export const urlPrefix = '/api/system/button/'
-
-export function GetList (query) {
-  return request({
-    url: urlPrefix,
-    method: 'get',
-    params: query
-  })
-}
-export function createObj (obj) {
-  return request({
-    url: urlPrefix,
-    method: 'post',
-    data: obj
-  })
-}
-
-export function UpdateObj (obj) {
-  return request({
-    url: urlPrefix + obj.id + '/',
-    method: 'put',
-    data: obj
-  })
-}
-export function DelObj (id) {
-  return request({
-    url: urlPrefix + id + '/',
-    method: 'delete',
-    data: { id }
-  })
-}

web/src/views/system/button/crud.js

@@ -1,167 +0,0 @@
-/*
- * @创建文件时间: 2021-06-03 00:34:42
- * @Auther: 猿小天
- * @最后修改人: 猿小天
- * @最后修改时间: 2021-11-19 22:18:47
- * 联系Qq:1638245306
- * @文件介绍: 权限配置
- */
-export const crudOptions = (vm) => {
-  return {
-    pageOptions: {
-      compact: true
-    },
-    options: {
-      tableType: 'vxe-table',
-      rowKey: true,
-      width: '100%',
-      height: '100%' // 表格高度100%, 使用toolbar必须设置
-    },
-    rowHandle: {
-      edit: {
-        thin: true,
-        text: '编辑',
-        disabled () {
-          return !vm.hasPermissions('Update')
-        }
-      },
-      remove: {
-        thin: true,
-        text: '删除',
-        disabled () {
-          return !vm.hasPermissions('Delete')
-        }
-      }
-    },
-    indexRow: { // 或者直接传true,不显示title，不居中
-      title: '序号',
-      align: 'center',
-      width: 100
-    },
-    viewOptions: {
-      disabled: true,
-      componentType: 'form'
-    },
-    formOptions: {
-      defaultSpan: 24, // 默认的表单 span
-      width: '35%'
-    },
-    columns: [{
-      title: '关键词',
-      key: 'search',
-      show: false,
-      disabled: true,
-      search: {
-        disabled: false
-      },
-      form: {
-        disabled: true,
-        component: {
-          placeholder: '请输入关键字'
-        }
-      },
-      view: { // 查看对话框组件的单独配置
-        disabled: true
-      }
-    },
-    {
-      title: 'ID',
-      key: 'id',
-      show: false,
-      width: 90,
-      form: {
-        disabled: true
-      }
-    },
-    {
-      title: '名称',
-      key: 'name',
-      sortable: true,
-      search: {
-        disabled: false
-      },
-
-      type: 'input',
-      form: {
-        rules: [ // 表单校验规则
-          { required: true, message: '名称必填项' }
-        ],
-        component: {
-          placeholder: '请输入名称'
-        },
-        itemProps: {
-          class: { yxtInput: true }
-        }
-      }
-    },
-    {
-      title: 'key值',
-      key: 'value',
-      sortable: true,
-      search: {
-        disabled: false
-      },
-
-      type: 'input',
-      form: {
-        rules: [ // 表单校验规则
-          { required: true, message: 'key值必填项' }
-        ],
-        component: {
-          placeholder: '请输入key值'
-        },
-        itemProps: {
-          class: { yxtInput: true }
-        }
-      }
-    },
-    {
-      title: '备注',
-      key: 'description',
-      show: false,
-      search: {
-        disabled: true
-      },
-      type: 'textarea',
-      form: {
-        component: {
-          placeholder: '请输入内容',
-          showWordLimit: true,
-          maxlength: '200',
-          props: {
-            type: 'textarea'
-          }
-        }
-      }
-    }, {
-      title: '创建人',
-      show: false,
-      width: 100,
-      key: 'modifier_name',
-      form: {
-        disabled: true
-      }
-    },
-    {
-      title: '更新时间',
-      key: 'update_datetime',
-      width: 160,
-      type: 'datetime',
-      sortable: true,
-      form: {
-        disabled: true
-      }
-    },
-    {
-      title: '创建时间',
-      key: 'create_datetime',
-      width: 160,
-      type: 'datetime',
-      sortable: true,
-      form: {
-        disabled: true
-      }
-    }
-    ]
-  }
-}

web/src/views/system/button/index.vue

@@ -1,90 +0,0 @@
-<!--
- * @创建文件时间: 2021-06-01 22:41:21
- * @Auther: 猿小天
- * @最后修改人: 猿小天
- * @最后修改时间: 2021-07-29 22:17:28
- * 联系Qq:1638245306
- * @文件介绍:
--->
-<template>
-  <d2-container :class="{ 'page-compact': crud.pageOptions.compact }">
-    <!--    <template slot="header">测试页面1</template>-->
-    <d2-crud-x
-      ref="d2Crud"
-      v-bind="_crudProps"
-      v-on="_crudListeners"
-      @createPermission="createPermission"
-    >
-      <div slot="header">
-        <crud-search
-          ref="search"
-          :options="crud.searchOptions"
-          @submit="handleSearch"
-        />
-        <el-button-group>
-          <el-button
-            size="small"
-            type="primary"
-            v-permission="'Create'"
-            @click="addRow"
-            ><i class="el-icon-plus" /> 新增</el-button
-          >
-        </el-button-group>
-        <crud-toolbar
-          :search.sync="crud.searchOptions.show"
-          :compact.sync="crud.pageOptions.compact"
-          :columns="crud.columns"
-          @refresh="doRefresh()"
-          @columns-filter-changed="handleColumnsFilterChanged"
-        />
-      </div>
-    </d2-crud-x>
-  </d2-container>
-</template>
-
-<script>
-import * as api from './api'
-import { crudOptions } from './crud'
-import { d2CrudPlus } from 'd2-crud-plus'
-export default {
-  name: 'buttons',
-  mixins: [d2CrudPlus.crud],
-  data () {
-    return {}
-  },
-  methods: {
-    getCrudOptions () {
-      return crudOptions(this)
-    },
-    pageRequest (query) {
-      return api.GetList(query)
-    },
-    addRequest (row) {
-      console.log('api', api)
-      return api.createObj(row)
-    },
-    updateRequest (row) {
-      console.log('----', row)
-      return api.UpdateObj(row)
-    },
-    delRequest (row) {
-      return api.DelObj(row.id)
-    },
-    // 授权
-    createPermission (scope) {
-      console.log('custom btn:', scope)
-      this.$message(
-        '自定义操作按钮：' + scope.row.data + ',index:' + scope.index
-      )
-    }
-  }
-}
-</script>
-
-<style lang="scss">
-.yxtInput {
-  .el-form-item__label {
-    color: #49a1ff;
-  }
-}
-</style>

web/src/views/system/menu/crud.js

@@ -1,7 +1,5 @@
 import { request } from '@/api/service'
-import { BUTTON_VALUE_TO_COLOR_MAPPING } from '@/config/button'
 import { urlPrefix as menuPrefix } from './api'
-import { urlPrefix as buttonPrefix } from '../button/api'
 import XEUtils from 'xe-utils'
 export const crudOptions = (vm) => {
   // 验证路由地址
@@ -373,18 +371,6 @@ export const crudOptions = (vm) => {
               clearable: true
             }
           }
-        },
-        dict: {
-          url: buttonPrefix,
-          label: 'name',
-          value: 'name',
-          getData: (url, dict) => {
-            return request({ url: url }).then(ret => {
-              return ret.data.data.map(item => {
-                return Object.assign(item, { color: BUTTON_VALUE_TO_COLOR_MAPPING[item.value] || 'auto' })
-              })
-            })
-          }
         }
       },
       {

web/src/views/system/menuButton/crud.js

@@ -47,7 +47,13 @@ export const crudOptions = (vm) => {
       show: false,
       disabled: true,
       search: {
-        disabled: false
+        disabled: false,
+        component: {
+          props: {
+            clearable: true
+          },
+          placeholder: '请输入关键词'
+        }
       },
       form: {
         disabled: true
@@ -67,84 +73,85 @@ export const crudOptions = (vm) => {
     },
 
     {
-      title: '名称',
+      title: '权限名称',
       key: 'name',
       sortable: true,
+      width: 150,
       search: {
         disabled: false
       },
       type: 'select',
       dict: {
-        cache: false,
+        data: vm.dictionary('system_button')
-        url: '/api/system/button/',
-        label: 'name',
-        value: 'name',
-        getData: (url, dict) => {
-          return request({ url: url }).then(ret => {
-            return ret.data.data
-          })
-        }
       },
       form: {
         rules: [ // 表单校验规则
           { required: true, message: '必填项' }
         ],
         component: {
-          span: 10
+          span: 12,
+          props: {
+            clearable: true,
+            elProps: {
+              allowCreate: true,
+              filterable: true,
+              clearable: true
+            }
+          }
         },
         itemProps: {
           class: { yxtInput: true }
         },
         valueChange (key, value, form, { getColumn, mode, component, immediate, getComponent }) {
           if (value != null) {
+            console.log('component.dictOptions', component.dictOptions)
             const obj = component.dictOptions.find(item => {
-              return item.name === value
+              console.log(item.label, value)
+              return item.value === value
             })
-            form.value = obj.value
+            if (obj && obj.value) {
+              form.value = obj.value
+            }
+          }
+        },
+        helper: {
+          render (h) {
+            return (< el-alert title="可手动输入不在列表中的新值" type="warning" description="比较常用的建议放在字典管理中"/>
+            )
           }
         }
       }
     },
-    {
-      title: '',
-      key: 'createBtn',
-      type: 'button',
-      show: false,
-      search: {
-        disabled: true
-      },
-      form: {
-        slot: true,
-        component: {
-          span: 2
-        },
-        itemProps: {
-          labelWidth: '0px' // 可以隐藏表单项的label
-        }
-      }
-
-    },
     {
       title: '权限值',
       key: 'value',
-
-      show: false,
       sortable: true,
+      width: 200,
       search: {
-        disabled: true
+        disabled: false
       },
       type: 'input',
       form: {
-        disabled: true,
-        show: false,
         rules: [ // 表单校验规则
           { required: true, message: '必填项' }
         ],
         component: {
-          span: 12
+          span: 12,
+          placeholder: '请输入权限值',
+          props: {
+            elProps: {
+              clearable: true
+            }
+          }
         },
         itemProps: {
           class: { yxtInput: true }
+        },
+        helper: {
+          render (h) {
+            return (< el-alert title="用于前端按钮权限的判断展示" type="warning" description="使用方法：vm.hasPermissions(权限值)"/>
+            )
+          }
         }
       }
     },
@@ -152,6 +159,7 @@ export const crudOptions = (vm) => {
       title: '请求方式',
       key: 'method',
       sortable: true,
+      width: 150,
       search: {
         disabled: false
       },

web/src/views/system/menuButton/index.vue

@@ -35,15 +35,6 @@
           @columns-filter-changed="handleColumnsFilterChanged"
         />
       </div>
-      <template slot="createBtnFormSlot" slot-scope="scope">
-        <el-button
-          :disabled="scope.mode === 'view'"
-          icon="el-icon-plus"
-          type="primary"
-          circle
-          @click="onLinkBtn"
-        ></el-button>
-      </template>
     </d2-crud-x>
   </d2-container>
 </template>
@@ -76,10 +67,6 @@ export default {
     },
     delRequest (row) {
       return api.DelObj(row.id)
-    },
-    // 跳转到添加按钮界面
-    onLinkBtn () {
-      router.push({ path: '/button' })
     }
   }
 }