前言
本系列博客基于B站的云e办管理系统,前端和后端我都自己敲了一遍,这里做一个学习记录。云e办的原始视频链接如下:https://www.bilibili.com/video/BV1Ai4y1P7Tk?p=1
<template>
<div>
<div>
<!-- 空格回车也能触发添加事件-->
<el-input
size="small"
placeholder="添加职位"
prefix-icon="el-icon-plus"
v-model="pos.name"
class="addPosInput"
@keydown.enter.native="addPosition"
>
</el-input>
<el-button
size="small"
icon="el-icon-plus"
type="primary"
@click="addPosition"
>添加</el-button
>
</div>
<div>
<el-table
size="small"
stripe
border
:data="positions"
style="width: 100%"
class="posManaMain"
@selection-change="handleSelectionChange"
>
<el-table-column type="selection" width="55">
</el-table-column>
<el-table-column prop="id" label="编号" width="180">
</el-table-column>
<el-table-column prop="name" label="职位" width="120">
</el-table-column>
<el-table-column prop="createDate" label="创建时间" width="200">
</el-table-column>
<el-table-column prop="enabled" label="是否启用" width="120">
</el-table-column>
<el-table-column label="操作" width="150">
<template slot-scope="scope">
<el-button size="mini" @click="handleEdit(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>
<!-- 当多选框的值为0时候,禁用-->
<el-button
type="danger"
style="margin-top=10px"
:disabled="this.multipleSelection.length == 0"
@click="deleteMany"
>批量删除</el-button
>
<el-dialog title="编辑职位" :visible.sync="dialogVisible" width="30%">
<div>
<el-tag>职位名称</el-tag>
<el-input
v-model="updatePos.name"
size="small"
class="updataPosInput"
></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: "PosMana",
data() {
return {
//职称名
pos: {
name: "",
},
//职位列表
positions: [],
// 弹出框是否显示
dialogVisible: false,
//更新职位名
updatePos: {
name: "",
},
//多选框列表
multipleSelection: [],
};
},
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(
(res) => {
if (res) {
this.initPositions();
}
}
);
})
.catch(() => {
this.$message({
type: "info",
message: "已取消删除",
});
});
},
//获取多选框勾选的值
handleSelectionChange(val) {
this.multipleSelection = val;
},
//更新
doupdate() {
this.putRequest("/system/basic/pos/", this.updatePos).then(
(resp) => {
if (resp) {
//编辑的时候显示职位名
this.initPositions();
this.dialogVisible = false;
}
}
);
},
//添加
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("职位名称不能为空!");
}
},
//编辑职位
handleEdit(index, data) {
//通过拷贝的方式来更新
Object.assign(this.updatePos, data);
//创建时间的逻辑在后端进行处理
this.updatePos.createDate = '';
this.dialogVisible = true;
},
//删除职位
handleDelete(index, data) {
this.$confirm("删除[" + data.name + "]职位, 是否继续?", "提示", {
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning",
})
.then(() => {
console.log(data);
this.deleteRequest("/system/basic/pos/" + data.id)
.then((res) => {
if (res) {
this.initPositions();
}
});
})
.catch(() => {
this.$message({
type: "info",
message: "已取消删除",
});
});
},
//展示职位
initPositions() {
this.getRequest("/system/basic/pos/").then((resp) => {
if (resp) {
this.positions = resp;
}
});
},
},
};
</script>
<style>
.addPosInput {
width: 300px;
margin-right: 10px;
}
.posManaMain {
margin-top: 10px;
}
.updataPosInput {
width: 180px;
margin-left: 10px;
}
</style>