lzga-ui/src/views1/File/Level/LevelView.vue

<template>
    <div class="containe">
      <!-- <div class="header">
        <span>文档管理</span>
        <img src="../../../assets/img/chevron-down.png" alt="" />
        <img src="../../../assets/img/slash.png" alt="" />
        <span class="top1">文档级别</span>
        <img src="../../../assets/img/chevron-up.png" alt="" class="top2" />
        <img src="../../../assets/img/slash.png" alt="" />
      </div>
      <div class="title">文档级别</div> -->
      <div class="main">
        <h3>文档级别管理</h3>
    <div class="main-main">
        <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd"
          v-hasPermi="['doc:level:add']">新增</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button type="success" plain icon="el-icon-edit" size="mini" :disabled="single" @click="handleUpdate"
          v-hasPermi="['doc:level:edit']">修改</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button type="danger" plain icon="el-icon-delete" size="mini" :disabled="multiple" @click="handleDelete"
          v-hasPermi="['doc:level:remove']">删除</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button type="warning" plain icon="el-icon-download" size="mini" @click="handleExport"
          v-hasPermi="['doc:level:export']">导出</el-button>
      </el-col>
      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
    </el-row>

    <el-table v-loading="loading" :data="levelList" @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55" align="center" />
      <el-table-column label="级别ID" align="center" prop="levelId" />
      <el-table-column label="级别名称" align="center" prop="levelName" />
      <el-table-column label="级别权限" align="center" prop="levelRole" />
      <el-table-column label="创建人" align="center" prop="createBy" />
      <el-table-column label="更新人" align="center" prop="updateBy" />
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)"
            v-hasPermi="['doc:level:edit']">修改</el-button>
          <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)"
            v-hasPermi="['doc:level:remove']">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination v-show="total>0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
      @pagination="getList" />

    <!-- 添加或修改文档级别对话框 -->
    <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
        <el-form-item label="级别名称" prop="levelName">
          <el-input v-model="form.levelName" placeholder="请输入级别名称" />
        </el-form-item>
        <el-form-item label="级别权限" prop="levelRole">
          <el-input v-model="form.levelRole" placeholder="请输入级别权限" />
        </el-form-item>
        <el-form-item label="备注" prop="remark">
          <el-input v-model="form.remark" placeholder="请输入备注" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
    </div>
      </div>
    </div>
  </template>
    
<script>
 import {
    listLevel,
    getLevel,
    delLevel,
    addLevel,
    updateLevel
  } from "@/api/doc/level";

  export default {
    name: "Level",
    data() {
      return {
        // 遮罩层
        loading: true,
        // 选中数组
        ids: [],
        // 非单个禁用
        single: true,
        // 非多个禁用
        multiple: true,
        // 显示搜索条件
        showSearch: true,
        // 总条数
        total: 0,
        // 文档级别表格数据
        levelList: [],
        // 弹出层标题
        title: "",
        // 是否显示弹出层
        open: false,
        // 查询参数
        queryParams: {
          pageNum: 1,
          pageSize: 10,
          levelName: null,
          levelRole: null,
          createBy: null,
          updateBy: null,
        },
        // 表单参数
        form: {},
        // 表单校验
        rules: {}
      };
    },
    created() {
      this.getList();
    },
    methods: {
      /** 查询文档级别列表 */
      getList() {
        this.loading = true;
        listLevel(this.queryParams).then(response => {
          this.levelList = response.rows;
          this.total = response.total;
          this.loading = false;
        });
      },
      // 取消按钮
      cancel() {
        this.open = false;
        this.reset();
      },
      // 表单重置
      reset() {
        this.form = {
          levelId: null,
          levelName: null,
          levelRole: null,
          createBy: null,
          createTime: null,
          updateBy: null,
          updateTime: null,
          remark: null,
          isDel: null
        };
        this.resetForm("form");
      },
      /** 搜索按钮操作 */
      handleQuery() {
        this.queryParams.pageNum = 1;
        this.getList();
      },
      /** 重置按钮操作 */
      resetQuery() {
        this.resetForm("queryForm");
        this.handleQuery();
      },
      // 多选框选中数据
      handleSelectionChange(selection) {
        this.ids = selection.map(item => item.levelId)
        this.single = selection.length !== 1
        this.multiple = !selection.length
      },
      /** 新增按钮操作 */
      handleAdd() {
        this.reset();
        this.open = true;
        this.title = "添加文档级别";
      },
      /** 修改按钮操作 */
      handleUpdate(row) {
        this.reset();
        const levelId = row.levelId || this.ids
        getLevel(levelId).then(response => {
          this.form = response.data;
          this.open = true;
          this.title = "修改文档级别";
        });
      },
      /** 提交按钮 */
      submitForm() {
        this.$refs["form"].validate(valid => {
          if (valid) {
            if (this.form.levelId != null) {
              updateLevel(this.form).then(response => {
                this.$modal.msgSuccess("修改成功");
                this.open = false;
                this.getList();
              });
            } else {
              addLevel(this.form).then(response => {
                this.$modal.msgSuccess("新增成功");
                this.open = false;
                this.getList();
              });
            }
          }
        });
      },
      /** 删除按钮操作 */
      handleDelete(row) {
        const levelIds = row.levelId || this.ids;
        this.$modal.confirm('你确定要删除该文件吗？').then(function() {
          return delLevel(levelIds);
        }).then(() => {
          this.getList();
          this.$modal.msgSuccess("删除成功");
        }).catch(() => {});
      },
      /** 导出按钮操作 */
      handleExport() {
        this.download('doc/level/export', {
          ...this.queryParams
        }, `level_${new Date().getTime()}.xlsx`)
      }
    }
  };
</script>
    
    <style scoped lang='scss'>
  .containe {
    color: #7ea4c8;
    font-size: 0.14rem;
    font-family: PingFang SC-Medium, PingFang SC;
    font-weight: 500;
    padding-left: calc(100vw * (20 / 1920));
    //顶部信息
    // .header {
    //   width: calc(100vw * (300 / 1920));
    //   height: calc(100vh * (22 / 1080));
    //   margin-top: calc(100vh * (20 / 1080));
    //   margin-bottom: calc(100vh * (20 / 1080));
    //   display: flex;
    //   align-items: center;
    //   img {
    //     width: calc(100vw * (16 / 1920));
    //     height: calc(100vh * (16 / 1080));
    //     border: 1px dashed grey;
    //     margin-left: 3px;
    //     margin-right: 3px;
    //   }
    //   .top1 {
    //     color: #2e8aecff;
    //   }
    // }
    // //中间目录列表
    // .title {
    //   height: calc(100vh * (22 / 1080));
    //   margin-top: calc(100vh * (20 / 1080));
    //   margin-bottom: calc(100vh * (20 / 1080));
    //   color: #ffffffff;
    //   font-size: 0.16rem;
    //   font-weight: bold;
    //   line-height: calc(100vh * (22 / 1080));
    // }
    .main {
      width: calc(100vw * (1876 / 1920));
      height: calc(100vh * (930 / 1080));
      background: url(../../../assets/img/Group-610.png);
      background-size: calc(100vw * (1876 / 1920)) calc(100vh * (930 / 1080));
      margin-top: calc(100vh * (35 / 1080));
      h3 {
        font-size: 0.2rem;
        color: #ffffffff;
        padding-top: calc(100vh * (25 / 1080));
        padding-bottom: calc(100vh * (10 / 1080));
        padding-left: calc(100vw * (30 / 1920));
      }
    .main-main{
      width: calc(100vw * (1822 / 1920));
      height: calc(100vh * (800 / 1080));
      margin-left: calc(100vw * (25 / 1920));
      margin-top: calc(100vh * (20 / 1080));
    //   background: seagreen;
      .el-table{
      width: calc(100vw * (1822 / 1920));
      height: calc(100vh * (700 / 1080));
      background: transparent;
      overflow: auto;
      }
    }
      //滚动条样式
    //   ::-webkit-scrollbar {
    //     width: 3.5px;
    //   }
    //   ::-webkit-scrollbar-track {
    //     background-color: rgba(0, 0, 0, 0);
    //   }
    //   ::-webkit-scrollbar-thumb {
    //     background: #2e8aec;
    //     border-radius: 3px;
    //   }
    //   ::-webkit-scrollbar-thumb:hover {
    //     background: #2e8aec;
    //   }
    }
  }
  ::v-deep .pagination-container .el-pagination{
    top: 0;
  }
  //底部跳转
  ::v-deep .pagination-container{
    height: calc(100vh * (50 / 1080));
    background: transparent;
  }
  ::v-deep .el-table th{
 background: #016C9AA6;
 color: #2E8AEC;
  }
::v-deep .el-table tr{
 background: transparent;
}
::v-deep .el-table tbody tr:hover>td { 
    background-color:#016C9A78 !important; 
}
::v-deep .el-table td.el-table__cell { 
    border-bottom: 1px solid #006C9AFF; 
}
::v-deep .el-table th.el-table__cell.is-leaf { 
    border-bottom: 1px solid #006C9AFF; 
}
//按钮的样式
::v-deep .el-button--primary.is-plain { 
    background-color: #002A5CFF; 
    border: none;
}
::v-deep .el-button--success.is-plain.is-disabled,
.el-button--danger.is-plain.is-disabled, 
.el-button--warning.is-plain{ 
    background-color: #002A5CFF; 
    color: #1890ff;
    border: none;
}

//table底下白线消失处理
::v-deep .el-table {
    color: #ffffffff;
}
::v-deep .el-table::before {
    width: 0;
}
//搜索刷新按钮颜色
::v-deep .el-button.is-circle{
    background: #006C9AFF;
    color: white;
}
//修改的弹出框样式
::v-deep .el-input__inner{
    color: #7EA4C8;
}
::v-deep .el-form-item__label{
    color: #2E8AECFF;
}
::v-deep .el-input__inner{
    background: transparent;
    border: 1px solid #006C9AFF;
}
::v-deep .el-button--primary{
    background: #1E5095FF;
    border: 1px solid #02C2E3FF;
}
::v-deep .el-button--default {
    background: transparent;
    color: white;
    border: 1px solid #02C2E3FF;
}
::v-deep .el-dialog__title {
    color: white;
    margin-left: 10px;
}


  </style>

  <style lang='scss'>
  /* 删除弹出框样式 */
 .el-message-box{
   width: calc(100vw * (600 / 1920));
   height: calc(100vh * (370 / 1080));
   padding-top: calc(100vh * (50 / 1080));
   padding-right: calc(100vw * (50 / 1920));    
   padding-left: calc(100vw * (50 / 1920));    
   background: url(../../../assets/img/Group-542.png); 
   background-size: calc(100vw * (600 / 1920)) calc(100vh * (370 / 1080)); 
   border: none;
   margin-bottom: 200px;
   .el-message-box__headerbtn .el-message-box__close{
    color: #FF0000FF;
    border: 1px solid #FF0000FF;
    border-radius: 50%;
    }
   .el-message-box__title{
    color: #ffffffff;
   }
   .el-message-box__btns{
    padding-right: 20px;
   }
   .el-message-box__content {
  padding-top: calc(100vh * (50 / 1080));
  padding-bottom: calc(100vh * (50 / 1080));
  color: #ffffffff;
  .el-message-box__status.el-icon-warning{
  color: transparent;
  }
}
.el-button--small{
    background: transparent;
    color: #ffffffff;
    border: 1px solid #FF0000FF;
    margin-left: -50px;
  }
  .el-button--primary{
    background: #951E1EFF;
    
  }
  .el-message-box__btns{
    padding-left: 60px;
  }
}
</style>