子表格的操作和问题解决
<template>
<div class="enterprise-documents">
<el-card>
<div slot="header" class="header">
<span>企业文档</span>
</div>
<!-- 表单数据 -->
<el-form
ref="ruleForm"
:rules="rules"
:inline="true"
:model="formInline"
class="demo-form-inline"
>
<el-form-item label="操作人">
<el-input
v-model="formInline.nickName"
placeholder="操作人"
></el-input>
</el-form-item>
<el-form-item label="操作人部门">
<el-input
v-model="formInline.deptName"
placeholder="操作人部门"
></el-input>
</el-form-item>
<el-form-item label="时间范围" prop="type">
<el-select v-model="formInline.type" placeholder="时间范围">
<el-option label="今天" value="today"></el-option>
<el-option label="本周" value="week"></el-option>
<el-option label="本月" value="month"></el-option>
<el-option label="本季" value="quarter"></el-option>
<el-option label="本年" value="year"></el-option>
<el-option label="全部" value="all"></el-option>
</el-select>
</el-form-item>
<el-form-item>
<el-button type="success" @click="searchForm('ruleForm')"
>搜索</el-button
>
<el-button type="warning" @click="resetForm">重置</el-button>
</el-form-item>
</el-form>
<el-button
icon="el-icon-delete"
style="margin: 15px 0"
type="danger"
@click="delAll"
>清空</el-button
>
<!-- 表格数据 -->
<el-table
v-loading="Dialogloading"
:data="tableData"
v-if="isTable"
row-key="id"
style="width: 100%"
@expand-change="handleExpand"
:row-class-name="isShowIcon"
>
<el-table-column type="expand">
<template slot-scope="scope">
<el-table
border
style="width: 50%; margin: 15px auto"
:data="scope.row.child"
v-loading="childloading"
>
<el-table-column prop="nickName" label="权限人">
</el-table-column>
<el-table-column prop="perm" label="权限">
<template slot-scope="scope">
{{
scope.row.perm === "query"
? "查看"
: scope.row.perm === "editor"
? "编辑"
: "管理"
}}
</template>
</el-table-column>
</el-table>
</template>
</el-table-column>
<el-table-column prop="operatorNickname" label="操作人">
</el-table-column>
<el-table-column label="操作人部门">
<template slot-scope="scope">{{
scope.row.operationDeptName
}}</template>
</el-table-column>
<el-table-column prop="operationType" label="操作类型">
</el-table-column>
<el-table-column prop="documentName" label="操作文档">
</el-table-column>
<el-table-column prop="documentPath" label="文档路径">
</el-table-column>
<el-table-column prop="documentStatus" label="当前文档状态">
</el-table-column>
<el-table-column prop="createTime" label="操作时间"> </el-table-column>
</el-table>
<!-- 分割线 -->
<el-divider></el-divider>
<!-- 分页数据 -->
<el-pagination
@size-change="sizeChange"
@current-change="currentPage"
:current-page="page"
:page-sizes="[6, 12, 18, 24]"
:page-size="100"
layout="total, sizes, prev, pager, next, jumper"
:total="total"
>
</el-pagination>
</el-card>
</div>
</template><script>
import {
apisysEnterpriseLog,
apisysLogPerm,
apideleteLog,
} from "@/api/monitor/documents.js";
export default {
name: "enterprise-documents",
data() {
return {
isTable: true,
childloading: false,
Dialogloading: false,
formInline: {
nickName: "", //用户id
deptName: "", //部门id
type: "today", //时间类型（今天（默认）：today，本周：week，本月：month，本季：quarter，本年：year，全部：all）
},
tableData: [],
//自定义验证
rules: {
type: [{ required: true, message: "请选择时间范围", trigger: "blur" }],
},
// documentStatus: [],
total: 0, //数据总条数
pageSize: 6, //每页显示多少条
page: 0, //当前在第几页上
};
},
mounted() {},
created() {
this.getData(); //表格默认显示
},
methods: {
delAll() {
this.$confirm("此操作将清空全部企业文档, 是否继续?", "提示", {
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning",
})
.then(() => {
apideleteLog().then((res) => {
// console.log(res,"全部模板删除")
if (res.code == 200) {
this.$message({
type: "success",
message: "删除成功!",
});
this.search();
}
});
})
.catch(() => {
this.$message({
type: "info",
message: "已取消删除",
});
});
},
// 展开行的请求
handleExpand(row) {
if (!row.child.length) {
// 获取展开的数据
let oParam = {
logId: row.id,
};
// 发起异步请求来获取展开的数据
apisysLogPerm(oParam)
.then((res) => {
if (res.code == "200") {
this.childloading = false;
// this.$message.success(res.message);
row.child = res.rows;
console.log(row.child, "row.child ");
}
})
.catch((error) => {
// 错误处理
});
}
},
// 判断权限显示展开符号
isShowIcon(row, index) {
if (
["新增权限", "变更权限", "删除权限"].indexOf(row.row.operationType) > -1
)
return "";
else return "hiderow";
},
// 搜索
searchForm(formName) {
this.$refs[formName].validate((valid) => {
if (valid) {
this.isTable = false;
this.$nextTick(() => {
this.isTable = true;
});
this.getData();
} else {
return false;
}
});
},
// 分页数据*****************start*/
sizeChange(val) {
this.pageSize = val;
this.getData();
// console.log(`每页 ${val} 条`);
},
currentPage(val) {
this.page = val;
this.getData();
// console.log(`当前页: ${val}`);
},
//***********************end */
// 页面数据
async getData() {
this.Dialogloading = true;
let oParam = {
nickName: this.formInline.nickName || null,
deptName: this.formInline.deptName || null,
type: this.formInline.type,
page: this.page - 1,
size: this.pageSize,
};
await apisysEnterpriseLog(oParam).then((res) => {
if (res.code == "200") {
this.Dialogloading = false;
// this.$message.success(res.message);
res.rows.forEach((item) => {
item.child = [];
});
this.tableData = res.rows;
this.total = res.totalCount;
// 进行过滤和判断
// for (let item of res.rows) {
// if (item.documentStatus === "") {
// item.documentStatus = "正常";
// } else if (item.documentStatus === "1") {
// item.documentStatus = "停用";
// } else if (item.documentStatus === "2") {
// item.documentStatus = "删除";
// }
// }
}
console.log(res, "000000");
});
},
//重置
resetForm() {
// 解决重置后的子表格的关闭
this.isTable = false;
this.$nextTick(() => {
this.isTable = true;
});
this.formInline = {
nickName: "",
deptName: "",
type: "today",
};
this.getData();
},
},
};
</script><style lang="scss" scoped>
::v-deep .el-table__expanded-cell {
padding: 0 !important;
border-bottom: none;
}
::v-deep .hiderow .el-table__expand-column .el-icon {
visibility: hidden;
}
::v-deep .hiderow .el-table__expand-icon {
display: none !important;
}
.enterprise-documents {
padding: 20px;
}
</style>
推荐阅读：
扫描二维码，在手机上阅读