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="name" :formatter="formatterRoles" />
          <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-select v-model="form.roles" placeholder="请选择级别权限" clearable multiple="true">
                <el-option v-for="dict in dict.type.level_role" :key="dict.value" :label="dict.label"
                  :value="dict.value" />
              </el-select>
            </el-form-item>
            <el-form-item label="备注" prop="remark">
              <textarea v-model="form.remark" rows="6" cols="32"
                style="background: transparent; color: #7ea4c8ff;border: 1px solid #006c9aff;"></textarea>
            </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 "@/styles1/element-ui1.scss";
import { parseTime, resetForm, addDateRange, selectDictLabel, selectDictLabels, handleTree } from "@/utils/ruoyi";
  import {
    listLevel,
    getLevel,
    delLevel,
    addLevel,
    updateLevel
  } from "@/api/doc/level";

  export default {
    name: "Level",
    dicts: ['level_role'],
    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,
          roles: null,
          createBy: null,
          updateBy: null,
        },
        // 表单参数
        form: {},
        // 表单校验
        rules: {}
      };
    },
    created() {
      this.getList();
    },
    methods: {
      formatterRoles(row){
        return selectDictLabels(this.dict.type.level_role, row.roles, ",");
      },
      /** 查询文档级别列表 */
      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,
          roles: 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('是否确认删除级别名称为"' + row.levelName + '"的数据项？').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));
  }

  .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 * (30 / 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;
      }
    }
  }

  ::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%;
      font-size: 25px;
    }
    .el-message-box__headerbtn{
      border: none;
    }

    .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 {
      margin-left: -50px;
      background: transparent !important;
      border: 1px solid #FF0000FF !important;
    }

    .el-button--primary {
      background: #951E1EFF !important;
    }

    .el-message-box__btns {
      // padding-left: 60px;
      margin-top: calc(100vh * (50 / 1080));
      margin-left: calc(100vw * (300 / 1920));
    }
  }
</style>