lg_frontend/pages/manager/role.vue

<template>
  <div>
    <Curd
      :columns="columns"
      :api-conf="apiConf"
      :form-items="formItems"
    />
  </div>
</template>
<script>
import base from "~/templates/base";
import Curd from "../../components/smallCommon/Curd.vue";

export default {
  name: "role",
  extends: base,
  components: {
    Curd
  },
  data() {
    return {
      menus: [],
      columns: [
        {
          dataIndex: 'roleName',
          key: 'roleName',
          title: '角色名'
        }
      ],
      apiConf: {
        listApi: {api: '/api/Role/all', method: 'get', noPage: true},
        deleteApi: {api: '/api/Role/remove', method: 'delete', paramsType: 'Array'},
        editApi: {api: '/api/Role/update', method: 'put', updateKey: 'roleId'},
        detailApi: {
          api: '/api/Role/get',
          method: 'get',
          detailHandler({role, menus}) {
            return {
              roleName: role.roleName,
              roleDescription: role.roleDescription,
              menuIds: menus.map(item => item.menuId),
              id: role.id
            }
          }
        },
        addApi: {api: '/api/Role/add', method: 'post',}
      }
    }
  },


  computed: {
    formItems() {
      const self = this
      return [
        {
          type: 'input',
          key: 'roleName',
          label: '角色名',
          isSearch: true,
          placeholder: '请输入角色名',
          rules: [
            {required: true, message: '请输入角色名'}
          ]
        },

        {
          type: 'input',
          key: 'roleDescription',
          label: '角色描述'
        },
        {
          type: 'treeSelect',
          key: 'menuIds',
          label: '菜单',
          placeholder: '',
          children: self.menus,
          props: {
            treeCheckable: true,
            replaceFields: {
              title: 'name',
              value: 'id',
              key: 'id',
              children: 'children'
            }
          }
        }
      ]
    }
  },
  created() {
    this.getMenus()
  },
  methods: {
    getMenus() {
      this.$get('/api/Menu/list').then(({data}) => {
        this.menus = data
      })
    }
  }
}
</script>
<style scoped lang="less">

</style>