<template>
  <div class="powerEdit">
    <div class="bread ">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item>采购商管理</el-breadcrumb-item>
        <el-breadcrumb-item>采购商权限管理</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <h3>新建角色</h3>
    <div class="content">
      <el-form ref="form" :model="form" :rules="rules" label-width="100px">
        <el-form-item label="角色名称" prop="name">
          <el-input v-model="form.name" placeholder="请输入" style="width:400px"></el-input>
        </el-form-item>
        <el-form-item label="备注" prop="remark">
          <el-input v-model="form.remark" placeholder="最多输入20个字符" type="textarea" maxlength="20" style="width:400px"></el-input>
        </el-form-item>
      </el-form>
      <div class="flex power">
        <div>权限</div>
        <el-tree 
          :data="data" 
          :default-expanded-keys="[2, 3]" 
          :default-checked-keys="[5]" 
          :props="defaultProps"
          show-checkbox 
          node-key="id">
        </el-tree>
      </div>
      <div class="button">
        <el-button style="margin-right:50px" @click="back">取消</el-button>
        <el-button type="primary">保存</el-button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'powerEdit',
  data() {
    return {
      form: {
        name: '',
        remark: ''
      },
      rules: {
        name: [{
          required: true,
          message: '请输入角色名称',
          trigger: 'blur'
        }],
        remark: [{
          required: true,
          message: '请输入备注',
          trigger: 'blur'
        }]
      },
      data: [{
        id: 1,
        label: '首页',
        children: [{
          id: 4,
          label: '招标管理',
          children: [{
            id: 9,
            label: '招标项目管理'
          }]
        }]
      }, {
        id: 2,
        label: '平台交货管理',
        children: [{
          id: 5,
          label: '平台交货列表'
        }]
      }, {
        id: 3,
        label: '供应商管理',
        children: [{
          id: 7,
          label: '供应商列表'
        }, {
          id: 8,
          label: '我的供应商'
        }]
      }, {
        id: 10,
        label: '组织管理',
        children: [{
          id: 11,
          label: '单位信息'
        }, {
          id: 12,
          label: '成员管理'
        }, {
          id: 13,
          label: '权限管理'
        }]
      }, {
        id: 14,
        label: '系统管理',
        children: [{
          id: 15,
          label: '绑定CA'
        }, {
          id: 16,
          label: '日志列表'
        }]
      }],
      defaultProps: {
        children: 'children',
        label: 'label'
      }
    }
  },
  methods: {
    back() {
      this.$router.go(-1); s
    }
  }
}
</script>

<style scoped>
	.powerEdit h3 {
		margin: 10px 0;
	}

	.power {
		margin-left: 50px;
		margin-top: 30px;
	}
	.button{
		margin-left:200px;
		margin-top:50px
	}
</style>
