101 lines
		
	
	
		
			2.0 KiB
		
	
	
	
		
			Vue
		
	
	
	
			
		
		
	
	
			101 lines
		
	
	
		
			2.0 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: 'name',
 | 
						|
          key: 'name',
 | 
						|
          title: '菜单名'
 | 
						|
        },
 | 
						|
        {
 | 
						|
          dataIndex: 'url',
 | 
						|
          key: 'url',
 | 
						|
          title: '菜单URL'
 | 
						|
        }
 | 
						|
      ],
 | 
						|
      apiConf: {
 | 
						|
        addApi: {api: '/api/Menu/add', method: 'post',},
 | 
						|
        listApi: {api: '/api/Menu/list', method: 'get', noPage: true},
 | 
						|
        deleteApi: {api: '/api/Menu/remove', method: 'delete', paramsType: 'Array'},
 | 
						|
        editApi: {api: '/api/Menu/update', method: 'put'},
 | 
						|
      }
 | 
						|
    }
 | 
						|
  },
 | 
						|
 | 
						|
 | 
						|
  computed: {
 | 
						|
    formItems() {
 | 
						|
      const self = this
 | 
						|
      return [
 | 
						|
        {
 | 
						|
          type: 'input',
 | 
						|
          key: 'name',
 | 
						|
          label: '菜单名',
 | 
						|
          isSearch: true,
 | 
						|
          placeholder: '请输入菜单名',
 | 
						|
          rules: [
 | 
						|
            {required: true, message: '请输入菜单名'}
 | 
						|
          ]
 | 
						|
        },
 | 
						|
 | 
						|
        {
 | 
						|
          type: 'input',
 | 
						|
          key: 'url',
 | 
						|
          label: '路由',
 | 
						|
          rules: [
 | 
						|
            {required: true, message: '请输入菜单名'}
 | 
						|
          ]
 | 
						|
        },
 | 
						|
        {
 | 
						|
          type: 'treeSelect',
 | 
						|
          key: 'parentId',
 | 
						|
          label: '父级菜单',
 | 
						|
          placeholder: '',
 | 
						|
          children: self.menus,
 | 
						|
          props: {
 | 
						|
            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>
 |