quanwei
18 hours ago c441dea81bd86bdfb12dff35821fed51f4cc91c2
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
<template>
  <!--
        作者:参考 auth/role
        时间:2026-01-20
        描述:区域代理商-角色管理-添加角色
    -->
  <div v-loading="loading">
    <!--form表单-->
    <el-form size="small" ref="form" :model="form" label-width="180px">
      <!--添加门店-->
      <div class="common-form">添加角色</div>
 
      <el-form-item label="角色名称:" prop="role_name" :rules="[{ required: true, message: ' ' }]">
        <el-input v-model="form.role_name" placeholder="请输入角色名称" class="max-w460"></el-input>
      </el-form-item>
 
      <el-form-item label="权限列表:" v-model="form.access_id">
        <el-tree :data="data" show-checkbox node-key="access_id" :default-expand-all="true" :default-checked-keys="[]" :props="defaultProps" @check="handleCheckChange"></el-tree>
      </el-form-item>
 
      <el-form-item label="排序:"><el-input type="number" v-model="form.sort" placeholder="请输入排序" class="max-w460"></el-input></el-form-item>
 
      <!--提交-->
      <div class="common-button-wrapper">
        <el-button size="small" type="info" @click="cancelFunc">取消</el-button>
        <el-button type="primary" size="small" @click="onSubmit" :loading="loading">提交</el-button>
      </div>
    </el-form>
  </div>
</template>
 
<script>
import OperationsApi from '@/api/plus/operations.js';
 
export default {
  data() {
    return {
      /*是否正在加载*/
      loading:true,
      /*表单数据对象*/
      form: {
        access_id: [],
        sort: 1
      },
      data: [],
      roleList: [],
      defaultProps: {
        children: 'children',
        label: 'name'
      }
    };
  },
  created() {
    /*获取列表*/
    this.getData();
  },
  methods: {
    /*添加角色*/
    onSubmit() {
      let self = this;
      let form = self.form;
      self.$refs.form.validate(valid => {
        if (valid) {
          self.loading = true;
          OperationsApi.operationsRoleAdd({
            params: JSON.stringify(form)
          }, true)
            .then(data => {
              self.loading = false;
              self.$message({
                message: '添加成功',
                type: 'success'
              });
              self.$router.push('/plus/operations/role/index');
            })
            .catch(error => {
              self.loading = false;
            });
        }
      });
    },
 
    /*获取数据*/
    getData() {
      let self = this;
      OperationsApi.operationsRoleAddInfo()
        .then(data => {
          self.data = data.data.menu;
          self.roleList = data.data.roleList;
           self.loading = false;
        })
        .catch(error => {
          self.loading = false;
        });
    },
 
    //监听选中
    handleCheckChange(data, checked) {
      this.form.access_id = checked.checkedKeys.concat(checked.halfCheckedKeys);
    },
 
    /*取消*/
    cancelFunc() {
      this.$router.back(-1);
    }
  }
};
</script>
 
<style lang="scss" scoped>
.basic-setting-content {
}
 
.product-add {
  padding-bottom: 50px;
}
 
.img {
  margin-top: 10px;
}
</style>