通过Element开发基础增删改查页面——Vue项目实战(三)

一、Tab标签页设置

tab标签引入

在这里插入图片描述

<div>
        <el-tabs v-model="activeName" type="card">
            <el-tab-pane label="部门管理" name="depManager"><DepManager></DepManager></el-tab-pane>
            <el-tab-pane label="职位管理" name="posManager"><PosManager></PosManager></el-tab-pane>
            <el-tab-pane label="角色管理" name="roleManager"><RoleManager></RoleManager></el-tab-pane>
        </el-tabs>
    </div>
1
2
3
4
5
6
7

标签页面引入

在这里插入图片描述

二、页面开发

页面样式

<template>
    <div>
        <div>
            <el-input
                    size="small"
                    class="addPosInput"
                    placeholder="添加职位... "
                    prefix-icon="el-icon-plus"
                    v-model="pos.name">
            </el-input>
            <el-button icon="el-icon-plus" size="small" type="primary">添加</el-button>
        </div>
        <div class="posManagerMain">
            <el-table
                    :data="positions"
                    border
                    stripe
                    size="small"
                    style="width: 70%">
                <el-table-column
                        prop="id"
                        label="编号"
                        width="55">
                </el-table-column>
                <el-table-column
                        prop="name"
                        label="职位名称"
                        width="120">
                </el-table-column>
                <el-table-column
                        prop="createDate"
                        label="创建时间">
                </el-table-column>
            </el-table>
        </div>
    </div>
</template>

<script>
    export default {
        name: "PosManager",
        data() {
            return {
                pos : {
                    name : ""
                },
                positions: []
            }
        }
    }
</script>

<style scoped>

</style>
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

在这里插入图片描述

增删改查数据交互

数据结构:

{
	"status": 200,
	"msg": null,
	"obj": [{
		createDate: "2022-06-25"
		createDateFormate: "2022-06-25 17:45:20"
		createTime: "2022-06-25 17:45:20"
		createUserId: 1
		createUserName: "系统管理员"
		deleted: 0
		id: 1
		name: "技术总监"
		updateDate: "2022-06-25"
		updateDateFormate: "2022-06-25 17:45:25"
		updateTime: "2022-06-25 17:45:25"
		updateUserId: 1
		updateUserName: "系统管理员"
	}]
} 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

前端代码：

<template>
    <div>
        <div>
            <el-input
                    size="small"
                    class="addPosInput"
                    placeholder="添加职位... "
                    prefix-icon="el-icon-plus"
                    @keydown.enter.native="addPosition"
                    v-model="pos.name">
            </el-input>
            <el-button icon="el-icon-plus" size="small" type="primary" @click="addPosition">添加</el-button>
            <el-button @click="deleteMany" type="danger" size="small" style="margin-top: 8px;" :disabled="multipleSelection.length==0">批量删除</el-button>
        </div>
        <div class="posManagerMain">
            <!-- 多选框的点击事件 @selection-change="handleSelectionChange-->
            <el-table
                    :data="positions"
                    border
                    stripe
                    @selection-change="handleSelectionChange"
                    size="small"
                    style="width: 70%">
                <!--                多选框-->
                <el-table-column
                        type="selection"
                        width="55">
                </el-table-column>
                <el-table-column
                        prop="id"
                        label="编号"
                        width="55">
                </el-table-column>
                <el-table-column
                        prop="name"
                        label="职位名称"
                        width="120">
                </el-table-column>
                <el-table-column
                        prop="createUserName"
                        label="创建人">
                </el-table-column>
                <el-table-column
                        prop="createTime"
                        label="创建时间">
                </el-table-column>
                <el-table-column
                        prop="updateUserName"
                        label="更新人">
                </el-table-column>
                <el-table-column
                        prop="updateTime"
                        label="更新时间">
                </el-table-column>
                <el-table-column label="操作">
                    <template slot-scope="scope">
                        <el-button
                                size="mini"
                                @click="showEditView(scope.$index, scope.row)">编辑</el-button>
                        <el-button
                                size="mini"
                                type="danger"
                                @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
<!--        对话框-->
        <el-dialog
                title="修改职位"
                :visible.sync="dialogVisible"
                width="30%">
            <div>
                <el-tag>职位名称</el-tag>
                <el-input class="updatePosInput" size="small" v-model="updatePos.name"></el-input>
            </div>
            <span slot="footer" class="dialog-footer">
    <el-button size="small" @click="dialogVisible = false">取 消</el-button>
    <el-button size="small" type="primary" @click="doUpdate">确 定</el-button>
  </span>
        </el-dialog>
    </div>
</template>

<script>
    export default {
        name: "PosManager",
        data() {
            return {
                pos : {
                    name : ""
                },
                dialogVisible:false,
                updatePos: {
                    name:''
                },
                multipleSelection: [],
                positions: []
            }
        },
        //数据初始化
        mounted() {
            this.initPositions();
        },
        methods: {
            deleteMany() {
                this.$confirm('此操作将永久删除【' + this.multipleSelection.length + '】条记录, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    let ids = '?';
                    this.multipleSelection.forEach(item => {
                        ids += 'ids=' + item.id + '&';
                    })
                    this.deleteRequest("/system/basic/pos/" + ids).then( resp => {
                        if (resp) {
                            this.initPositions();
                        }
                    });
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },
            handleSelectionChange(val) {
                this.multipleSelection = val;
                console.log(val);
            },
            showEditView(index,data) {
                // this.updatePos = data;
                //拷贝属性(防止点击【取消】按钮无法返回原来数值)
                Object.assign(this.updatePos,data);
                this.dialogVisible = true;
            },
            doUpdate() {
                this.putRequest("/system/basic/pos/",this.updatePos).then(resp => {
                    if (resp) {
                        //刷新数据
                        this.initPositions();
                        this.updatePos.name = '';
                        //隐藏对话框
                        this.dialogVisible = false;
                    }
                });
            },
            handleDelete(index, data) {
                this.$confirm('此操作将永久删除【' + data.name + '】职位, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.deleteRequest("/system/basic/pos/" + data.id).then(resp => {
                        if (resp) {
                            this.initPositions();
                        }
                    })
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },
            addPosition() {
                if (this.pos.name) {
                    this.postRequest("system/basic/pos/", this.pos).then(resp => {
                        if (resp) {
                            //刷新数据
                            this.initPositions();
                            //清空数据
                            this.pos.name = '';
                        }
                    })
                } else {
                    this.$message.error('职位名称不可以为空！');
                }
            },
            initPositions() {
                this.getRequest("/system/basic/pos/").then(resp => {
                    if (resp) {
                        this.positions = resp.obj;
                    }
                })
            }
        }
    }
</script>

<style scoped>
    .addPosInput {
        width: 300px;
        margin-right: 8px;
    }
    .posManagerMain {
        margin-top: 10px;
    }
    .updatePosInput {
        width: 200px;
        margin-left: 8px;
    }

</style>
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
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205

在这里插入图片描述

注：能力有限，还请谅解，争取早日能够写出有质量的文章！

我是皮蛋布丁，一位爱吃皮蛋的热爱运动的废铁程序猿。

在这里插入图片描述

感谢各位大佬光临寒舍~

相关阅读:
Java项目精选|Java毕业设计项目源码
 第三范式
 【数据库系统概论】数据库系统外部的体系结构
 历时一年，论文终于被国际顶会接收了
 上能写代码，下要“揍”黑客，还有什么不是程序员的“锅”？
[UIUCTF 2022] crypto ASR,WringingRing
Vscode LinuxC++环境配置
 JAVA经典百题之坐电梯
 Python中的enum的食用方法
 js-Date对象
原文地址：https://blog.csdn.net/qq_42700766/article/details/125464866