Spring Boot + Vue.js 实现 EAM 企业资产管理系统之 02-开发笔记（2）

开发笔记

新建修改资产视图页面组件（src/views/Modify.vue），编写修改资产的表单组件，整体与新增资产的表单组件类似。

data() {
    return {
    // 定义资产对象
    zichan: {
        type: '',
            status: '',
            name: '',
            usage: '',
            place: '',
        },
        // 定义表单校验规则
    // ...
    }
},
methods: {
    // 定义根据资产id获取资产的方法
    // 资产id：路由跳转时传参
    getById() {
    axios.get('/api/zichan/getById?id=' + this.$route.params.id)
        .then(ret => {
        if(ret.data.code == 200) {
            this.zichan = ret.data.data
                } else {
                    this.$message.error('请求失败')
                }
            })
            .catch(error => {
                this.$message.error('请求失败')
            })
    }
},
created() {
    // 调用根据资产id获取资产的方法
    // 用于获取表单数据回显的数据
    this.getById()
}

修改路由配置文件（src/router/index.js），编写修改资产视图页面组件的路由配置。

{
    path: '/modify/:id',
    component: () => import('@/views/Modify.vue')
}

修改资产列表视图页面组件（src/views/List.vue），为相关按钮添加路由跳转。

<el-button type="primary" size="mini" @click="$router.push('/modify/' + scope.row.id)">编辑</el-button>

修改 Mock.js 配置文件（src/mock/index.js），编写根据资产 id 获取资产的接口，用于实现表单数据回显。

// 根据资产id获取资产
// URL包含资产id，是一个动态的URL，使用正则表达式匹配
Mock.mock(new RegExp('/api/zichan/getById'), 'get', function(options) {
    // 控制台调试输出
    // options中没有包含GET请求参数，只包含完整的URL
    // 获取GET需要自己定义方法
    console.log(options)
})

运行项目，查看效果。

Mock.js 的 mock 方法中，options 中没有包含 GET 请求参数，只包含完整的 URL，需要自己定义方法用于解析 GET 请求参数。

修改 Mock.js 配置文件（src/mock/index.js），编写根据资产 id 获取资产的接口。

// 根据资产id获取资产
// URL包含资产id，是一个动态的URL，使用正则表达式匹配
Mock.mock(new RegExp('/api/zichan/getById'), 'get', function(options) {
    let params = parseUrlParams(options.url)
    let id = params.id

    // 遍历资产列表，找到id匹配的资产
    for(let index in zichanDatabase) {
        if(zichanDatabase[index].id == id) {
            return {
                code: 200,
                message: 'success',
                data: zichanDatabase[index]
            }
        }
    }
})

// URL参数解析方法
const parseUrlParams = urlStr => {
    let query = urlStr.split('?')[1]
    let searchParams = new URLSearchParams(query)

    let json = {};
    for (let [key, value] of searchParams.entries()) {
        json[key] = value;
    }
    return json;
}

运行项目，查看效果。

此时表单数据回显的效果，下拉框组件的回显存在问题。下拉框组件使用 v-model 绑定的数据来自 API 接口，是一个数值类型的数据。而 el-option 中的 value 却是一个 String 类型的数据，数据类型不匹配，下拉框组件的回显绑定失效。

修改资产列表视图页面组件（src/views/List.vue），使用 v-bind 绑定下拉框组件中的选项的 value 属性。

<el-option label="固定资产" :value="0"></el-option>

运行项目，查看效果。

修改 Mock.js 配置文件（src/mock/index.js），编写修改资产的接口。

// 修改资产
Mock.mock('/api/zichan/modify', 'put', function(options) {
    let params = JSON.parse(options.body)

    for(let index in zichanDatabase) {
        if(zichanDatabase[index].id == params.id) {
            // 修改原有的资产数据
            zichanDatabase[index].type = params.type
            zichanDatabase[index].status = params.status
            zichanDatabase[index].name = params.name
            zichanDatabase[index].usage = params.usage
            zichanDatabase[index].place = params.place

            return {
                code: 200,
                message: 'success'
            }
        }
    }

    return {
        code: -1,
        message: 'error'
    }
})

修改修改资产视图页面组件（src/views/Modify.vue），编写发送表单请求的方法。

methods: {
    modify() {
        this.$refs['zichanForm'].validate((valid) => {
            if (valid) {
                // 表单校验通过
                axios.put('/api/zichan/modify', this.zichan)
                    .then(ret => {
                        // code == 200即修改成功
                        if(ret.data.code == 200) {
                            this.$message.success('修改成功')
                            this.$router.push('/')
                        } else {
                            this.$message.error('修改失败')
                        }
                    })
                    .catch(error => {
                        this.$message.error('请求失败')
                    })
            } else {
                return false
            }
        })
    },
    // ...
}

修改修改资产视图页面组件（src/views/Modify.vue），为相关按钮绑定点击事件。

<el-button type="primary" @click="modify">提交</el-button>

运行项目，查看效果。

修改 Mock.js 配置文件（src/mock/index.js），编写删除资产列表的接口。

// 删除资产
Mock.mock(new RegExp('/api/zichan/delete'), 'delete', function(options) {
    let params = parseUrlParams(options.url)
    let id = params.id

    for(let index in zichanDatabase) {
        if(zichanDatabase[index].id == id) {
            // 使用splice删除资产
            // 参数1：删除的起始位置
            // 参数2：删除个数
            zichanDatabase.splice(index, 1)
            return {
                code: 200,
                message: 'success'
            }
        }
    }

    return {
        code: -1,
        message: 'error'
    }
})

修改资产列表视图页面组件（src/views/List.vue），添加删除数据请求的方法。

methods: {
    // ...
    // 定义删除资产的方法
    deleteById(id) {
        this.$confirm('此操作将永久删除该资产, 是否继续?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
        }).then(() => {
            // 点击确定，发送请求
            axios.delete('/api/zichan/deleteById?id=' + id)
                .then(ret => {
                    // code == 200即删除成功
                    if(ret.data.code == 200) {
                        this.$message.success('删除成功')
                        // 重新获取资产列表
                        this.getList()
                    } else {
                        this.$message.error('删除失败')
                    }
                })
                .catch(error => {
                    this.$message.error('请求失败')
                   })
        })
    }
}

修改资产列表视图页面组件（src/views/List.vue），为相关按钮绑定点击事件。

<el-button type="danger" size="mini" @click="deleteById(scope.row.id)">删除</el-button>

运行项目，查看效果。