第11章角色页的删除、批量删除

<el-form :model="formQuery" ref="ruleFormRef" label-width="120px" label-position="left" class="demo-form-inline">

<el-row :gutter="20">

<el-col :span="7">

<el-form-item label="名称:">

<el-input v-model="formQuery.name" type="text" auto-complete="off" />

</el-form-item>

</el-col>

<el-col :span="7">

<el-form-item label="状态:">

<el-select v-model="formQuery.isActive">

<el-option label="不限" value="" />

<el-option label="启用" value=true />

<el-option label="禁用" value=false />

</el-select>

</el-form-item>

</el-col>

<el-col :span="2">

<el-form-item>

<el-button type="primary" size="large" @click="submitQuery">

<el-icon style="margin-right:5px; font-size: 22px;">

</el-icon>

查询

</el-button>

</el-form-item>

</el-col>

<el-col :span="2">

<el-form-item>

<el-button type="info" size="large" @click="resertTable">

<el-icon style="margin-right:5px; font-size: 22px;">

</el-icon>

重置

</el-button>

</el-form-item>

</el-col>

<el-col :span="2">

<el-form-item>

<el-button type="danger" size="large" @click="deleteArrayRole()">

<el-icon style="margin-right:5px; font-size: 22px;">

</el-icon>

删除所选

</el-button>

</el-form-item>

</el-col>

</el-row>

</el-form>

<el-table :data="rolePageList" style="width: 100%" :row-style="{height:'30px'}" @sort-change="handleTableSort"

:default-sort="{'prop': JSON.parse(this.pagination.OrderByFiled).filed,'order':JSON.parse(this.pagination.OrderByFiled).type}"

ref="refTable" @selection-change="selectionChangeRole">

<el-table-column type="selection" width="50px" />

<el-table-column property="id" label="编号" width="100px" sortable />

<el-table-column property="name" label="名称" sortable />

<el-table-column prop="isActive" label="启用？" width="200">

<el-tag type="success" size="large" v-if="scope.row.isActive">启用</el-tag>

<el-tag type="danger" v-else>禁用</el-tag>

</template>

</el-table-column>

<el-table-column property="remark" label="备注" />

<el-table-column label="操作" align="center">

<el-button type="primary" @click="editRole(scope.$index, scope.row)" size="large"

style="margin-right: 10px;">编辑</el-button>

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

</template>

</el-table-column>

</el-table>

<el-pagination v-model:current-page="this.pagination.pageIndex" v-model:page-size="this.pagination.pageSize"

:page-sizes="[5, 10, 15, 20, 50]" :total="this.pagination.totalCount" prev-text="上一页" next-text="下一页" background

layout="->, total, sizes, prev, pager, next" @size-change="handleSizeChange"

@current-change="handleCurrentChange" />

</template>

import axios from 'axios'

export default ({

data() {

return {

//该实例用于指示，当前页面是否正在调用后端的API方法，获取当前页面渲染显示所需的数据源。

listLoading: false,

formQuery: {

name: '',

isActive: '',

//初始化当前页的渲染数据集列表实例。

rolePageList: [],

//分页初始化实例。

pagination: {

pageIndex: 1, //初始化当前页，即第1页。

pageSize: 15, //初始化每页最多所包含的项数值，即每页最多所包含15项。

totalCount: 0, //初始化数据源的总计项数值，由于还没有加载数据源所以该值为：0。

//初始化排序字段及其方式。

OrderByFiled: JSON.stringify({

filed: 'id',

type: 'descending',

}),

QueryCondition: ""

//用于限定批量删操作中的除定时器实例，能且只能被触发执行1次。

timer: null,

};

methods: {

//用于限定批量删操作中的除定时器实例，能且只能被触发执行1次。

async initTimer() {

//console.log(this.timer != null);

//用于限定批量删操作中的除定时器实例，能且只能被触发执行1次。

if (this.timer != null) {

await clearInterval(this.timer);

this.timer = null;

}

//获取当前页面渲染显示所需的数据源。

async getRolePageList() {

this.listLoading = true;

//"axios.post"方式没有加载“headers”参数实例，需要在后端进行相应的配置，否则访问后端的POST-API,否则会出现:"HTTP:415"错误。

let res = await axios.post('https://localhost:7043/Role/PostRolePageByFromBody', JSON.stringify(

this.pagination));

//console.log(res.data);

this.pagination.totalCount = res.data.response.totalCount;

this.rolePageList = res.data.response.data;

this.listLoading = false;

//用于限定批量删操作中的除定时器实例，能且只能被触发执行1次。

await this.initTimer();

//该事件在改变每页最多所包含的项数值后，把数据源加载到当前页面中，并重新对当前页进行渲染显示。

async handleSizeChange(size) {

this.pagination.pagesize = size;

//console.log(this.pagesize); //每页最多所包含的项数值。

await this.getRolePageList();

//该事件在改变当前页的索引值后，把数据源加载到当前页面中，并重新对当前页进行渲染显示。

async handleCurrentChange(currentPage) {

this.pagination.PageIndex = currentPage;

//console.log(this.PageIndex); //当前页的索引值。

await this.getRolePageList();

// 点击三角图标时触发事件

async handleTableSort({

column

}) {

/* console.log(JSON.stringify({

filed: column.property,

type: column.order,

})); */

this.pagination.OrderByFiled = JSON.stringify({

filed: column.property,

type: column.order,

});

await this.getRolePageList();

//重置页面样式及其数据。

async resertTable() {

//重置查询表单。

this.formQuery = {

name: '',

isActive: '',

};

//重置排序字段试及其排序方式。

this.pagination = {

pageIndex: 1, //初始化当前页，即第1页。

pageSize: 15, //初始化每页最多所包含的项数值，即每页最多所包含15项。

totalCount: 0, //初始化数据源的总计项数值，由于还没有加载数据源所以该值为：0。

//初始化排序字段及其方式。

OrderByFiled: JSON.stringify({

filed: 'id',

type: 'descending',

}),

QueryCondition: ""

}

await this.$refs.refTable.sort(JSON.parse(this.pagination.OrderByFiled).filed, JSON.parse(this

.pagination.OrderByFiled).type);

await this.getRolePageList();

//查询操作。

async submitQuery() {

var where = {};

if (this.formQuery.name != '') {

where.name = this.formQuery.name;

}

if (this.formQuery.isActive != '') {

where.isActive = this.formQuery.isActive;

}

this.pagination.QueryCondition = JSON.stringify(where);

await this.getRolePageList();

//从角色表中删除单行指定数据后，并重新渲染显示当前页面。

async deleteSingleRole(row) {

await this.$confirm(`确认删除记录:${row.id}!`, '提示', {

type: 'warning'

})

.then(async () => { // 确定操作

let para = {

"Id": row.id,

};

console.log(row.id);

this.listLoading = true;

let res = await axios.delete(

'https://localhost:7043/Role/DeleteRoleSingle', {

params: para

});

console.log(res.data);

this.listLoading = false;

})

.catch(() => { // 取消操作

this.$message({

type: 'info',

message: '已取消退出'

});

this.$message.success(`成功删除记录:${row.id}!`);

//通过定时器，3秒钟刷新数据源。

await setInterval(

async () => {

await this.getRolePageList();

}, 3000);

//获取将要被删除的编号值集，编号之间用“，”隔开。

async selectionChangeRole(selectArray) {

//获取编号值集，编号之间用“，”隔开；例如： 1,2,3 这种格式。

this.idArray = selectArray.map(item => item.id);

//console.log(this.idArray);

//console.log(this.idArray.length);

async deleteArrayRole() {

if (this.idArray.length <= 0) {

this.$message.error("请选择要删除的一行数据！");

return;

}

await this.$confirm(`确认删除记录:${this.idArray}!`, '提示', {

type: 'warning'

})

.then(async () => { // 确定操作

let para = {

"idArray": this.idArray.join(),

};

this.listLoading = true;

let res = await axios.delete(

'https://localhost:7043/Role/DeleteRoleArray', {

params: para

});

console.log(res.data);

this.listLoading = false;

})

.catch(() => { // 取消操作

this.$message({

type: 'info',

message: '已取消退出'

});

await this.$message.success(`成功删除记录:${this.idArray}!`);

//用于限定批量删操作中的除定时器实例，能且只能被触发执行1次。

this.timer = await setInterval(

async () => {

return await this.getRolePageList();

}, 3000);

async mounted() {

await this.getRolePageList();

async beforeUnmount() {

//用于限定批量删操作中的除定时器实例，能且只能被触发执行1次。

await this.initTimer();

});

</script>

//表单“label”字体样式

:deep(.el-form-item__label) {

font-size: 120%;

font-weight: 700;

}

// 修改表头样式。

:deep(.el-table__header thead th) {

background-color: #000000;

color: #ffd04b;

font-size: 150%;

font-weight: 700;

text-align: center;

}

//修改复选框控件样式。

:deep(.el-checkbox) {

display: flex;

align-items: center;

width: 25px;

height: 25px;

//修改选中框的大小

.el-checkbox__inner {

width: 20px;

height: 20px;

border: #409EFF solid 2px;

//修改选中框中的对勾的大小和位置

&::after {

// 对号

border: 4px solid #FFFFFF;

// 不覆盖下面的会导致对号变形

box-sizing: content-box;

content: "";

border-left: 0;

border-top: 0;

height: 15px;

position: absolute;

top: -3px;

}

//修改点击文字颜色不变

.el-checkbox__input.is-checked+.el-checkbox__label {

color: #333333;

}

.el-checkbox__label {

line-height: 25px;

//padding-left: 8px;

}

//表格隔行变换颜色。

:deep(.el-table__body tbody tr:nth-child(odd)) {

background-color: #FFFFFF;

font-size: 120%;

font-weight: 700;

}

:deep(.el-table__body tbody tr:nth-child(even) td) {

background-color: #CCFFFF;

font-size: 120%;

font-weight: 700;

}

//标签控件字体样式。

.el-tag {

font-size: 100%;

font-weight: 700;

}

//按钮控件字体样式。

.el-button {

font-size: 100%;

font-weight: 700;

}

//“el-pagination”分页组件样式。

.el-pagination {

margin-top: 10px;

font-size: 25px;

//"上一页"样式。

:deep(.btn-prev) {

background-color: transparent;

width: 40px;

height: 40px;

margin-right: 20px;

font-size: 25px;

}

//"下一页"样式。

:deep(.btn-next) {

background-color: transparent;

width: 40px;

height: 40px;

margin-left: 20px;

font-size: 25px;

}

//分页索引样式。

:deep(.number) {

background-color: transparent;

width: 40px;

height: 40px;

margin-right: 15px;

font-size: 25px;

}

//“el-pagination”分页组件中下拉框控件字体样式。

:deep(.el-input__wrapper) {

font-size: 25px;

}

</style>

对以上功能更为具体实现和注释见：230102_006shopvue(角色页的删除、批量删除)。

第11章角色页的删除、批量删除相关推荐

Shoping~添加+修改+删除+批量删除
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
小程序对七牛云文件上传删除批量删除生成token封装无需服务器一个小程序搞定
微信小程序获取token接入七牛云上传删除批量删除图片封装亲测可用小程序获取七牛云uptoken删除文件封装在研究官方文档后自己用小程序生成uptoken上传凭证封装,其他资料都说要服务器我又没钱 ...
11月1日上午PHP批量删除
1.在主页面上添加批量删除有关代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " ...
indesign选中不了图片删除_有办法了！批量删除多个Word页眉页脚
在实际工作中,我们时常需要添加页眉页脚,那如果不需要,该如何删除呢?怎样批量删除多个文档的页眉页脚呢?本期Word妹与大家分享相应的技巧. 1.删除单个文档的页眉页脚双击页眉处,进入编辑状态,然后选 ...
批量删除订阅kindle、kindle touch 推送
多日使用kindle发现推送是个好东西,但是不能在亚马逊的账号中批量删除, javascript:(function(){ var v = new RegExp("PersonalDocum ...
PHP批量删除报错,批量删除的PHP
第一个页面shanchu.php 无标题文档批量删除代号名称 $db = new MySQLi("localhost","root","root ...
ORACLE JDBC 对千万数据批量删除和批量插入
文章目录 1. 表结构 2. 批量删除 3. 批量插入 4. 批量删除和插入 5. 实体类 6. main 1. 表结构 -- Create table create table HERO (SNO ...
axios+vue+springboot完成批量删除
前端html页面需要重点理解的就是全选的事件还有点击选中然后传递id给后端,需要把多个id放到一个数组里面然后传递到controller去执行批量删除的方法 <!DOCTYPE html> ...
MySQL 删除数据批量删除(大量)数据
在删除数据的时候根据不同的场景使用不同的方法,比如说删除表中部分数据.删除表的结构.删除所有记录并重置自增ID.批量删除大量数据等,可以使用delete.truncate.drop等语句. 一.方法分 ...

第11章角色页的删除、批量删除

第11章角色页的删除、批量删除相关推荐

最新文章

热门文章

第11章 角色页的删除、批量删除

第11章 角色页的删除、批量删除相关推荐

最新文章

热门文章

第11章角色页的删除、批量删除

第11章角色页的删除、批量删除相关推荐