处理文档级别的选择

src/views1/File/Level/LevelView.vue

@@ -1,6 +1,6 @@
 <template>
-    <div class="containe">
-      <!-- <div class="header">
+  <div class="containe">
+    <!-- <div class="header">
         <span>文档管理</span>
         <img src="../../../assets/img/chevron-down.png" alt="" />
         <img src="../../../assets/img/slash.png" alt="" />
@@ -9,76 +9,80 @@
         <img src="../../../assets/img/slash.png" alt="" />
       </div>
       <div class="title">文档级别</div> -->
-      <div class="main">
-        <h3>文档级别管理</h3>
-    <div class="main-main">
+    <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>
+          <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>
-  </template>
-    
+  </div>
+</template>
+
 <script>
   import "@/styles1/element-ui1.scss";
-
- import {
+import { parseTime, resetForm, addDateRange, selectDictLabel, selectDictLabels, handleTree } from "@/utils/ruoyi";
+  import {
     listLevel,
     getLevel,
     delLevel,
@@ -88,6 +92,7 @@
 
   export default {
     name: "Level",
+    dicts: ['level_role'],
     data() {
       return {
         // 遮罩层
@@ -114,6 +119,7 @@
           pageSize: 10,
           levelName: null,
           levelRole: null,
+          roles: null,
           createBy: null,
           updateBy: null,
         },
@@ -127,6 +133,9 @@
       this.getList();
     },
     methods: {
+      formatterRoles(row){
+        return selectDictLabels(this.dict.type.level_role, row.roles, ",");
+      },
       /** 查询文档级别列表 */
       getList() {
         this.loading = true;
@@ -147,6 +156,7 @@
           levelId: null,
           levelName: null,
           levelRole: null,
+          roles: null,
           createBy: null,
           createTime: null,
           updateBy: null,
@@ -227,209 +237,189 @@
     }
   };
 </script>
-    
-    <style scoped lang='scss'>
+
+<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{
+  }
+
+  .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;
+
+      //   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{
+
+  ::v-deep .pagination-container .el-pagination {
     top: 0;
   }
+
   //底部跳转
-  ::v-deep .pagination-container{
+  ::v-deep .pagination-container {
     height: calc(100vh * (50 / 1080));
     background: transparent;
   }
-  ::v-deep .el-table th{
- background: #016C9AA6;
- color: #2E8AEC;
+
+  ::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 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; 
+
+  ::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; 
+  }
+
+  ::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 {
+  //table底下白线消失处理
+  ::v-deep .el-table {
     color: #ffffffff;
-}
-::v-deep .el-table::before {
+  }
+
+  ::v-deep .el-table::before {
     width: 0;
-}
-//搜索刷新按钮颜色
-::v-deep .el-button.is-circle{
+  }
+
+  //搜索刷新按钮颜色
+  ::v-deep .el-button.is-circle {
     background: #006C9AFF;
     color: white;
-}
-//修改的弹出框样式
-::v-deep .el-input__inner{
+  }
+
+  //修改的弹出框样式
+  ::v-deep .el-input__inner {
     color: #7EA4C8;
-}
-::v-deep .el-form-item__label{
+  }
+
+  ::v-deep .el-form-item__label {
     color: #2E8AECFF;
-}
-::v-deep .el-input__inner{
+  }
+
+  ::v-deep .el-input__inner {
     background: transparent;
     border: 1px solid #006C9AFF;
-}
-::v-deep .el-button--primary{
+  }
+
+  ::v-deep .el-button--primary {
     background: #1E5095FF;
     border: 1px solid #02C2E3FF;
-}
-::v-deep .el-button--default {
+  }
+
+  ::v-deep .el-button--default {
     background: transparent;
     color: white;
     border: 1px solid #02C2E3FF;
-}
-::v-deep .el-dialog__title {
+  }
+
+  ::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;
 
-  </style>
+    .el-message-box__headerbtn .el-message-box__close {
+      color: #FF0000FF;
+      border: 1px solid #FF0000FF;
+      border-radius: 50%;
+    }
 
-  <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;
     }
-   .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>
- 
-  
-  
-