子表格的操作和问题解决

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