VUE项目实战46完成参数的编辑和删除功能

Posted 2023-03-19

接上篇《​​45、编写添加参数和添加属性的功能​​》
上一篇我们完成了“添加参数”和“添加属性”的功能，本篇我们来完成参数的编辑和删除功能。

一、要实现的效果

我们要实现在点击“修改”按钮的时候，可以对动态参数或静态属性进行修改：

里面会自动带出当前的参数或属性信息。

思路：因为修改对话框和添加对话框的元素基本一致，可以复制添加对话框的代码修改为修改对话框。

二、绘制修改对话框

首先我们赋值添加对话框，在其下面粘贴修改为以下代码：

<!-- 修改参数的对话框 -->
<el-dialog
    :title="修改+titleText"
    :visible.sync="editDialogVisible"  @close="editDialogClosed">
    <!-- 修改参数的对话框 -->
    <el-form :model="editForm" :rules="editFormRules" ref="editFormRef" label->
        <el-form-item :label="titleText" prop="attr_name">
            <el-input v-model="editForm.attr_name"></el-input>
        </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
        <el-button @click="editDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="editParams">确 定</el-button>
    </span>
</el-dialog>

其中的参数在data区定义：

//控制修改对话框的显示与否
editDialogVisible: false,
//修改参数的表单数据对象
editForm: 
    attr_name: 
,
//修改表单的验证规则对象
editFormRules: 
    attr_name: [required: true,message:请输入参数名称,trigger: blur]

方法区定义“editDialogClosed”与“editParams”方法：

//监听修改对话框的关闭事件
editDialogClosed()
    //重置表单的所有内容
    this.$refs.editFormRef.resetFields();
,
//点击按钮，修改参数
editParams()

然后给动态参数和静态属性的修改按钮都添加一个名为“showEditDialog”的单击事件，用来触发修改对话框：

<el-button type="primary" size="mini" icon="el-icon-edit"
 @click="showEditDialog()">编辑</el-button>

然后在方法区定义该方法：

//点击按钮，显示修改对话框
showEditDialog()
    this.editDialogVisible = true;

效果：

三、在修改对话框中显示属性值

我们要在弹出修改对话框时，获取当前参数ID，以及当前的分类ID，去查询该参数的详情信息，带到编辑页面上。
首先在编辑按钮的触发事件中，通过作用域插槽scope对象，获取当前行属性的id“scope.row.attr_id”：

<el-table-column label="操作">
    <template slot-scope="scope">
        <el-button type="primary" size="mini" 
        icon="el-icon-edit" @click="showEditDialog(scope.row.attr_id)">编辑</el-button>
        <el-button type="danger" size="mini" 
        icon="el-icon-delete">删除</el-button>
    </template>
</el-table-column>

然后在showEditDialog方法中通过attr_id获取该参数的详情，API文档如下：

showEditDialog方法编写如下：

//点击按钮，显示修改对话框
async showEditDialog(attr_id)
    const data:res = await this.$http.get("categories/"+this.cateId+"/attributes/"+attr_id,
        params: attr_sel:this.activeName=="first"?"many":"only"
    );
    if(res.meta.status!==200)
        return this.$message.error(获取参数信息失败！);
    
    this.editForm = res.data;
    this.editDialogVisible = true;

效果：

四、点击确定修改参数

我们最后一步来完成点击确定之后的修改入库操作，需要用到的API如下：

我们完善editParams方法，首先在提交之前先进行表单的校验，校验成功之后触发上面的API提交修改入库：

//点击按钮，修改参数
editParams()
    this.$refs.editFormRef.validate(async valid =>
        if(!valid) return;
        let attr_id = this.editForm.attr_id;
        const data:res = await this.$http.put("categories/"+this.cateId+"/attributes/"+attr_id,
            attr_name: this.editForm.attr_name,
            attr_sel: this.activeName=="first"?"many":"only"
        );
        if(res.meta.status!==200)
            return this.$message.error(修改参数失败！);
        
        this.$message.success("修改参数成功！");
        this.editDialogVisible = false;//关闭对话框
        this.getParamsData();//重新加载数据
    )
,

效果：

五、完成参数的删除功能

我们要实现在点击某一行参数的删除按钮时，删除该行参数以及其下面所有选项：

需要调用的API如下：

我们只需要在删除按钮的点击事件里将参数id传入进去即可。首先我们在动态参数和静态属性的删除按钮中都指定一个名为“removeParams”的方法，然后利用作用域插槽scope传入attr_id参数：

<el-button type="danger" size="mini"
 icon="el-icon-delete" @click="removeParams(scope.row.attr_id)">删除</el-button>

然后在方法区指定该方法，编写删除逻辑：

//点击按钮，删除参数
async removeParams(attr_id)
    //弹框询问用户是否删除数据
    this.$confirm(此操作将永久删除该参数, 是否继续?, 提示, 
        confirmButtonText: 确定,
        cancelButtonText: 取消,
        type: warning
    ).then(async () => 
        const data: res = await this.$http.delete("categories/"+this.cateId+"/attributes/"+attr_id);
        if(res.meta.status!==200)
        return this.$message.error(删除参数失败！);
        
        this.$message(type: success,message: 删除参数成功!);
        this.getParamsData();//重新加载数据
    ).catch(() => 
        this.$message(type: info,message: 已取消删除 );          
    );

效果：

至此我们完成了参数的编辑和删除功能。
下一篇我们来完成渲染参数下面的选项。

VUE项目实战34编辑角色下的权限

接上篇《33、角色下权限的删除》
上个阶段我们完成了角色下的权限删除功能，本篇我们来实现角色下权限的编辑功能。

一、要实现的效果

点击角色下的“分配权限”按钮，弹出权限列表的对话框，选中部分为目前角色下的权限，未选中部分为待选：

二、实现对话框的弹出

我们在分配权限按钮上，绑定一个click事件处理函数“showSetRightDialog”：

<el-table-column label="操作" width="300px">
    <template slot-scope="scope">
        <el-button size= "mini" type="primary" icon="el-icon-edit">编辑</el-button>
        <el-button size= "mini" type="danger" icon="el-icon-delete">删除</el-button>
        <el-button size= "mini" type="warning" icon="el-icon-setting" @click="showSetRightDialog(scope.row)">
            分配权限
        </el-button>
    </template>
</el-table-column>

showSetRightDialog中的参数为当前角色对象本身。
然后在el-card下面，div的最底部添加dialog对话框，用来展示对话框内容：

<el-dialog title="分配权限" :visible.sync="setRightDialogVisible" width="50%">
    <span>这是一段信息</span>
    <span slot="footer" class="dialog-footer">
        <el-button @click="setRightDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="setRightDialogVisible = false">确 定</el-button>
    </span>
</el-dialog>

上面使用setRightDialogVisible变量来控制对话框是否显示。
然后在数据区定义setRightDialogVisible参数，默认是false不显示：

data()
    return 
        //角色列表
        rolesList: [],
        //控制分配权限对话框的显示与隐藏
        setRightDialogVisible: false
    

最后在方法区定义“showSetRightDialog”函数：

//展示权限分配的对话框
showSetRightDialog(role)
    this.setRightDialogVisible = true;

这里先写一个让显示参数为true的语句，用来弹出对话框。
效果：

三、在对话框打开前获取权限数据

我们在showSetRightDialog方法中，需要在setRightDialogVisible设置为true（即显示对话框）之前，加载所有的权限信息。获取所有权限的API接口如下：

●响应数据type=tree

    data: [
      
        id: 101,
        authName: '商品管理',
        path: null,
        pid: 0,
        children: [
          
            id: 104,
            authName: '商品列表',
            path: null,
            pid: 101,
            children: [
              
                id: 105,
                authName: '添加商品',
                path: null,
                pid: '104,101'
              
            ]
          
        ]
      
    ],
    meta: 
      msg: '获取权限列表成功',
      status: 200
    

这里的type我们选择tree，因为我们要把权限渲染成一个树形结构。
下面我们编写获取所有权限的代码：

//展示权限分配的对话框
async showSetRightDialog(role)
    //获取所有权限的数据
    const data: res = await this.$http.get('rights/tree');
    if(res.meta.status!==200)
        return this.$message.error('获取权限数据失败！');
    
    //把获取到的权限数据保存到data中
    this.rightsList = res.data;
    console.log(this.rightsList);
    //显示对话框
    this.setRightDialogVisible = true;

里面的rightsList对象在data区域定义好：

data()
    return 
        //角色列表
        rolesList: [],
        //控制分配权限对话框的显示与隐藏
        setRightDialogVisible: false,
        //所有权限的数据
        rightsList: []
    

效果：

四、将获取到的权限数据渲染至对话框

上面我们获取到了所有权限，并赋值到了rightsList对象上，下面我们将权限数据以树形结构渲染到对话框中。
我们这里需要使用到Element-UI中的tree树形组件：

我们将代码复制，在dialog中修改一下：

<el-dialog title="分配权限" :visible.sync="setRightDialogVisible" width="50%">
    <!-- 树形组件 -->
    <el-tree :data="rightsList" :props="treeProps"></el-tree>
    <span slot="footer" class="dialog-footer">
        <el-button @click="setRightDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="setRightDialogVisible = false">确 定</el-button>
    </span>
</el-dialog>

这里的el-tree就是树形组件，其中data是需要渲染的数据，props是每个树节点对应绑定的data的字段，包含一个“children”属性，来绑定data中定义子节点的属性（这里正好我们越是children属性），另一个属性为“label”，用来绑定data中定义节点名称的字段（这里我们是authName）。

然后我们在data区域定义treeProps字段：

data()
    return 
        //角色列表
        rolesList: [],
        //控制分配权限对话框的显示与隐藏
        setRightDialogVisible: false,
        //所有权限的数据
        rightsList: [],
        //树形控件的属性绑定对象
        treeProps: 
            label: 'authName',
            children: 'children'
        
    
,

然后在main.js中按需引入“Tree”组件：

import Vue from 'vue'
import  Button, Form, FormItem, Input, Message, Container, 
    Header, Aside, Main, Menu, Submenu, MenuItem, MenuItemGroup,
    Breadcrumb,BreadcrumbItem,Card,Row,Col,Table,TableColumn,Switch,
    Tooltip,Pagination,Dialog,MessageBox,Tag,Tree  from 'element-ui'

Vue.use(Button);Vue.use(Form);Vue.use(FormItem);Vue.use(Input);
Vue.use(Container);Vue.use(Header);Vue.use(Aside);Vue.use(Main);
Vue.use(Menu);Vue.use(Submenu);Vue.use(MenuItem);Vue.use(MenuItemGroup);
Vue.use(Breadcrumb);Vue.use(BreadcrumbItem);Vue.use(Card);Vue.use(Row);
Vue.use(Col);Vue.use(Table);Vue.use(TableColumn);Vue.use(Switch);Vue.use(Tooltip);
Vue.use(Pagination);Vue.use(Dialog);Vue.use(Tag);Vue.use(Tree);
Vue.prototype.$message = Message
Vue.prototype.$confirm = MessageBox.confirm

点击分配权限按钮后，可以看到权限被以树形结构的方式加载出来：

然后我们需要为每一个权限前面加一个复选框，只需要在el-tree标签中添加show-checkbox树形即可（再添加一个default-expand-all，默认展开所有树节点）：

<!-- 树形组件 -->
<el-tree :data="rightsList" :props="treeProps" show-checkbox default-expand-all></el-tree>

效果：

然后指定选中的内容为id值，为el-tree添加node-key属性，指向权限的id值：

<!-- 树形组件 -->
<el-tree :data="rightsList" :props="treeProps" show-checkbox default-expand-all 
node-key="id"></el-tree>

五、加载角色默认拥有的权限

我们需要指定默认勾选的树节点，el-tree为我们提供了一个“default-checked-keys”属性，该属性可以指定一个默认勾选的节点的key的数组，我们可以在显示对话框之前，获取角色下的权限的所有id，封装为数组，赋值给“default-checked-keys”即可：

<!-- 树形组件 -->
<el-tree :data="rightsList" :props="treeProps" show-checkbox default-expand-all 
node-key="id" :default-checked-keys="defkeys"></el-tree>

data区定义“defkeys”数组对象：

data()
    return 
        //角色列表
        rolesList: [],
        //控制分配权限对话框的显示与隐藏
        setRightDialogVisible: false,
        //所有权限的数据
        rightsList: [],
        //树形控件的属性绑定对象
        treeProps: 
            label: 'authName',
            children: 'children'
        ,
        //默认选中的权限ID数组对象
        defkeys: []
    
,

在showSetRightDialog函数中新增代码：

//展示权限分配的对话框
async showSetRightDialog(role)
    //获取所有权限的数据
    const data: res = await this.$http.get('rights/tree');
    if(res.meta.status!==200)
        return this.$message.error('获取权限数据失败！');
    
    //把获取到的权限数据保存到data中
    this.rightsList = res.data;
    //递归获取三级节点的ID
    this.defkeys = [];//清空数组
    this.getLeafKeys(role,this.defkeys);
    //显示对话框
    this.setRightDialogVisible = true;
,
//获取角色下的三级权限ID(通过递归)，保存到defkeys数组
getLeafKeys(node,arr)
    //如果当前node节点不包含children属性，则是三级节点
    if(!node.children)
        return arr.push(node.id);
    
    node.children.forEach(item => this.getLeafKeys(item,arr));

这里我们新增了一个名为“getLeafKeys”的函数，它可以通过递归调用的形式，获取到所有节点的三级权限ID，并封装到defkeys数组中，效果：

至此权限编辑的功能已经部分实现。
下一篇我们继续实现为角色分配新的权限并保存的效果。

参考：黑马程序员（www.itheima.com）Vue项目实战教学视频
转载请注明出处：https://blog.csdn.net/u013517797/article/details/122799489