106 lines
		
	
	
		
			2.2 KiB
		
	
	
	
		
			Vue
		
	
	
	
			
		
		
	
	
			106 lines
		
	
	
		
			2.2 KiB
		
	
	
	
		
			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>
 |