If you feel like life is playing tricks on you, maybe this is the perfect time to stop and reflect on yourself.
fake add remove summary
1. Front-end false addition
// 绑定资源提交2-前端实现假添加- 添加资源账户到tab列表
addToList() {
// 把选中数据添加到已绑定账号后面
console.log(this.resourcePzTableData, "添加前数据");
// 两个数组去重-补集
let diff = this.addItem.filter(
(item) => !this.resourcePzTableData.some((val) => item.id === val.id)
);
console.log(diff, "diff");
// 是否有重复项-消息提示
if (diff.length !== this.addItem.length) {
this.$message.warning("有重复选择项，已过滤。");
}
// 找到数组差集添加到原有数组
this.resourcePzTableData = this.resourcePzTableData.concat(diff);
// 返回上级页面并刷新数据
this.pageindex = 2;
this.page = 0;
// 隐藏侧边栏资源分组树
this.$store.state.treeShow = false;
},step1: Get the selected add resource array addItem. Use filter to filter functions. Calculate the complement diff of addItem and resourcePzTableData
addItem = [1,2,3,4]
resourcePzTableData = [3,4,6,7,8,9]
diff = [1,2]
Step2: Add the difference set diff of the array to the back of the original array using the concat method
step3: Return to the parent page and display the list
2. Front-end false deletion
handleResourcePzDelete(row) {
const resourcePzIds = row.id == undefined ? this.ids : [row.id];
// debugger;
const ids = row.id != undefined ? [row.id] : this.ids;
const vm = this;
this.$modal
.confirm("是否确认删除？")
.then(function () {
// return deleteData({ ids: stuffPzIds });
console.log("删除前", vm.resourcePzTableData);
for (var value of ids) {
vm.resourcePzTableData.splice(
vm.resourcePzTableData.findIndex((item) => item.id == value),
1
);
}
console.log("删除后", vm.resourcePzTableData);
})
.then(() => {
this.getResourcePzList();
this.$message.success("删除成功");
})
.catch(() => {});
},step1: Find the id that needs to be deleted according to the check box
step2: Use splice to cut the array and delete the resource lines found using findIndex
If you understand it, you don’t need to read the detailed function explanation below.
Table of contents
1. Front-end page and function overview
1. Resource configuration page
2. Realization of front-end false addition function
(1) Resource configuration page
2. Obtain the list of bound resources and all resources
(1) Resource configuration page ---- list of bound resources
(2) Add resource page ----- list of all resources
3. Front-end fake add/delete operations
(1) Select the data in the multi-select box
(2) False addition implementation
(3) False delete implementation
1. Front-end page and function overview
1. Resource configuration page
(1) [List] The page loads the list of bound resources
(2) [Add resource] Click the button to jump to the add resource page
(3) [Add resource group] Click the button to jump to the page of adding resource group
(4) [Delete] Click the button to delete a row of data in the list! ! Delete the front-end list operation without adjusting the interface
(5) [Save] Click the save button to send a request to the backend, pass the resource id array, and realize the binding
2. Add resource page
(1) [Query reset] Normal page query and list reset functions, no more details
(2) [OK] Select the resource row data and click the 'OK' button. The system returns to the resource configuration page, and adds the selected row to the resource configuration page list (front-end implementation, not involving back-end saving). If there is duplicate data, the front-end will remove it and prompt.
3. Add resource group page
(1) [Select resource grouping] Select resource grouping in the resource grouping tree on the left
(2) [OK] After clicking, request the backend interface, return data, and add resources at the same time, so I won’t go into details here
2. Realization of front-end false addition function
1. Front-end page layout
(1) Resource configuration page
The array involved in table is resourcePzTableData
<el-tab-pane label="资源配置" name="third">
<!-- 资源配置页 -->
<div v-show="pageindex == 2" style="min-height: 500px">
<div class="tableHeaderWrap">
<!-- 按钮部分 -->
<!-- 按钮部分 -->
</div>
<el-row style="padding: 30px 30px 0px 25px;">
<!-- 表格部分 -->
<el-table
:data="resourcePzTableData"
fit
border
stripe
@selection-change="handleSelectionChange"
>
....
<el-table-column label="操作" align="center">
<template slot-scope="scope">
<el-button
type="text"
:style="'padding:none'"
@click="handleResourcePzDelete(scope.row)"
>删除</el-button
>
</template>
</el-table-column>
</el-table>
<div>
<el-button type="primary" size="mini" @click="resourceAddSubmit"
>保 存</el-button>
</div>
</el-row>
</div>
</el-tab-pane>pzId: undefined, //资源配置选中id
activeName: "first",
pageindex: 2, // 控制显示哪个页面
//资源配置
resourcePzTableData: [
{
id: "1",
name: "运维资源假数据",
},
{
id: "2",
name: "运维资源假数据2",
},
],
resourcePageInfo: {
pageNum: 1,
pageSize: 10,
total: 0,
},
radio: 1,
resourceList: [], //资源列表(2) Add resource page
Add the array of resource pages as resourceList
<el-tab-pane label="资源配置" name="third">
<!-- 资源配置页 -->
<!--上部分代码 -->
<!-- 添加资源页 -->
<el-form :model="queryParams" ref="queryForm" label-width="auto">
<!--查询表单 -->
</el-form>
<el-table
:data="resourceList"
fit
border
stripe
@selection-change="handleSelectionChange1"
>
.....
</el-table>
<el-button type="primary" size="mini" @click="addToList">确 定</el-button>
</el-tab-pane>
2. Obtain the list of bound resources and all resources
(1) Resource configuration page ---- list of bound resources
// 已绑定资源列表列表
getResourcePzList() {
getPzBingdingList({ resourceConfigId: this.pzId }).then((res) => {
this.resourcePzTableData = res.data.list;
});
},(2) Add resource page ----- list of all resources
// 添加资源按钮
resourceAdd() {
// this.resourceDialog = true;
this.page = 1;
this.pageindex = 0;
this.$store.commit("treeVis");
// 调接口显示可以绑定的资源
this.getAllResourceList();
},
// 已有全部资源列表
getAllResourceList() {
const params = {
...this.queryParams,
};
debugger;
allResourceList(params).then((res) => {
console.log(res);
this.resourceList = res.data.list;
this.total = res.data.totalCount;
});
},3. Front-end fake add/delete operations
Select【Add data row in resourceList on resource page】-------click OK------add to【behind resourcePzTableData table on resource configuration page】
(1) Select the data in the multi-select box
addids:[], // 多选框选中的item的id
addItem;[], // 多选框选中的item
// 多选框选中需要添加的数据
handleSelectionChange1(selection) {
this.addids = selection.map((item) => item.id);
this.addItem = selection.map((item) => item);
// this.addsingle = selection.length != 1; // 是否单选
// this.addmultiple = !selection.length; // 是否多选
},(2) False addition implementation
Compare the list of bound resources and remove duplicate data
// 绑定资源提交2-前端实现假添加- 添加资源账户到tab列表
addToList() {
// 把选中数据添加到已绑定账号后面
console.log(this.resourcePzTableData, "添加前数据");
// 两个数组去重-补集
let diff = this.addItem.filter(
(item) => !this.resourcePzTableData.some((val) => item.id === val.id)
);
console.log(diff, "diff");
// 是否有重复项-消息提示
if (diff.length !== this.addItem.length) {
this.$message.warning("有重复选择项，已过滤。");
}
// 找到数组差集添加到原有数组
this.resourcePzTableData = this.resourcePzTableData.concat(diff);
// 返回上级页面并刷新数据
this.pageindex = 2;
this.page = 0;
// 隐藏侧边栏资源分组树
this.$store.state.treeShow = false;
},step1: Get the selected add resource array addItem. Use filter to filter functions. Calculate the complement diff of addItem and resourcePzTableData
addItem = [1,2,3,4]
resourcePzTableData = [3,4,6,7,8,9]
diff = [1,2]Step2: Add the difference set diff of the array to the back of the original array using the concat method
step3: Return to the parent page and display the list
(3) False delete implementation
handleResourcePzDelete(row) {
// 要删除的id数组或字符
const resourcePzIds = row.id == undefined ? this.ids : [row.id];
// debugger;
const ids = row.id != undefined ? [row.id] : this.ids;
const vm = this;
this.$modal
.confirm("是否确认删除？")
.then(function () {
// return deleteData({ ids: stuffPzIds });
console.log("删除前", vm.resourcePzTableData);
// ===================核心操作================================
for (var value of ids) {
vm.resourcePzTableData.splice(
vm.resourcePzTableData.findIndex((item) => item.id == value),
1
);
}
console.log("删除后", vm.resourcePzTableData);
})
.then(() => {
this.getResourcePzList();
this.$message.success("删除成功");
})
.catch(() => {});
},step1: Find the id that needs to be deleted according to the check box
step2: Use splice to cut the array and delete the resource lines found using findIndex
3. Final commit binding
// 资源配置页面确认添加绑定-向后端传数据
resourceAddSubmit() {
this.resourceData;
// const idarray = this.resourceData.map((item) => item.id);
// 提交修改
const params = {
resourceConfigId: this.pzId,
ids: this.resourcePzTableData.map((item) => item.id),
};
debugger;
resourceBinding(params).then((response) => {
if (response.code === 200) {
this.$message.success("保存修改成功");
// this.detailForm = response.data.list;
this.getResourcePzList();
} else {
this.$message.error(response.message);
}
});
},