<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>
