仿照以下代码用SSM框架和vue完成角色的权限配置div id=app table class=table table-striped thead tr th scope=col角色名称th th scope=col权限名称th tr thead tbody tr

<p>由于缺少相关后端代码，无法提供完整的代码实现。以下是参考实现：</p>
<ol>
<li>后端代码实现：</li>
</ol>
<ul>
<li>角色表（role）中需要添加一个权限ID（pid）字段，用于表示该角色拥有的权限。</li>
<li>提供一个接口用于查询所有角色（findAllRole）。</li>
<li>提供一个接口用于保存角色及其权限（saveRoleAndPre）。</li>
</ul>
<ol start="2">
<li>前端代码实现：</li>
</ol>
<ul>
<li>使用Vue框架，将角色及其权限以表格的形式展示出来。</li>
<li>点击“配置权限”按钮，弹出模态框，展示当前角色已有的权限及所有可选权限。</li>
<li>选择需要的权限后，点击“提交”按钮，调用后端保存角色及其权限的接口。</li>
</ul>
<p>以下是前端代码实现：</p>
<p>HTML代码：</p>
<div id="app">
    <table class="table table-striped">
        <thead>
            <tr>
                <th scope="col">角色名称</th>
                <th scope="col">权限名称</th>
                <th scope="col">操作</th>
            </tr>
        </thead>
        <tbody>
            <tr v-for="(item, index) in list" :key="index">
                <td>{{ item.rname }}</td>
                <td>{{ item.pname }}</td>
                <td>
                    <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal"
                        @click="showModal(item)">配置权限</button>
                </td>
            </tr>
        </tbody>
    </table>
<pre><code>&lt;div class=&quot;modal fade&quot; id=&quot;exampleModal&quot; tabindex=&quot;-1&quot; role=&quot;dialog&quot; aria-labelledby=&quot;exampleModalLabel&quot;
    aria-hidden=&quot;true&quot;&gt;
    &lt;div class=&quot;modal-dialog&quot; role=&quot;document&quot;&gt;
        &lt;div class=&quot;modal-content&quot;&gt;
            &lt;div class=&quot;modal-header&quot;&gt;
                &lt;h5 class=&quot;modal-title&quot; id=&quot;exampleModalLabel&quot;&gt;配置权限&lt;/h5&gt;
                &lt;button type=&quot;button&quot; class=&quot;close&quot; data-dismiss=&quot;modal&quot; aria-label=&quot;Close&quot;&gt;
                    &lt;span aria-hidden=&quot;true&quot;&gt;&amp;times;&lt;/span&gt;
                &lt;/button&gt;
            &lt;/div&gt;
            &lt;div class=&quot;modal-body&quot;&gt;
                &lt;div class=&quot;form-group&quot;&gt;
                    &lt;label for=&quot;roleName&quot; class=&quot;col-form-label&quot;&gt;角色名称：&lt;/label&gt;
                    &lt;input type=&quot;text&quot; class=&quot;form-control&quot; id=&quot;roleName&quot; v-model=&quot;selectedRole.rname&quot;
                        disabled&gt;
                &lt;/div&gt;
                &lt;div class=&quot;form-group&quot;&gt;
                    &lt;label for=&quot;preSelect&quot; class=&quot;col-form-label&quot;&gt;权限：&lt;/label&gt;
                    &lt;select class=&quot;form-control&quot; id=&quot;preSelect&quot; v-model=&quot;selectedRole.pid&quot;&gt;
                        &lt;option v-for=&quot;(pre, index) in allPres&quot; :key=&quot;index&quot; :value=&quot;pre.id&quot;&gt;{{ pre.pname }}
                        &lt;/option&gt;
                    &lt;/select&gt;
                &lt;/div&gt;
            &lt;/div&gt;
            &lt;div class=&quot;modal-footer&quot;&gt;
                &lt;button type=&quot;button&quot; class=&quot;btn btn-secondary&quot; data-dismiss=&quot;modal&quot;&gt;取消&lt;/button&gt;
                &lt;button type=&quot;button&quot; class=&quot;btn btn-primary&quot; @click=&quot;saveRoleAndPre()&quot;&gt;保存&lt;/button&gt;
            &lt;/div&gt;
        &lt;/div&gt;
    &lt;/div&gt;
&lt;/div&gt;
</code></pre>
</div>
<p>JavaScript代码：</p>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<script>
    new Vue({
        el: "#app",
        data: {
            list: [], // 角色及其权限列表
            allPres: [], // 所有权限列表
            selectedRole: {}, // 当前选择的角色
        },
        mounted() {
            this.findAllRoles();
            this.findAllPres();
        },
        methods: {
            // 查询所有角色及其权限
            findAllRoles() {
                axios.get("/role/findAllRoles").then(response => {
                    this.list = response.data;
                });
            },
            // 查询所有权限
            findAllPres() {
                axios.get("/pre/findAllPres").then(response => {
                    this.allPres = response.data;
                });
            },
            // 显示模态框
            showModal(role) {
                this.selectedRole = role;
            },
            // 保存角色及其权限
            saveRoleAndPre() {
                axios.post("/role/saveRoleAndPre", this.selectedRole).then(response => {
                    // 保存成功后，关闭模态框并刷新角色及其权限列表
                    $("#exampleModal").modal("hide");
                    this.findAllRoles();
                });
            },
        },
    });
</script