From d91f0dfcd2ef95fb3624d94ade24fe69a9169a58 Mon Sep 17 00:00:00 2001
From: 13693261870 <252740454@qq.com>
Date: 星期日, 04 二月 2024 15:15:00 +0800
Subject: [PATCH] Merge branch 'master' of http://192.168.20.92:8888/r/P2022036_Web2

---
 src/views/userManage/roleManage.vue | 1154 +++++++++++++++++++++++++++++----------------------------
 1 files changed, 589 insertions(+), 565 deletions(-)

diff --git a/src/views/userManage/roleManage.vue b/src/views/userManage/roleManage.vue
index 91a2f57..49cd7e0 100644
--- a/src/views/userManage/roleManage.vue
+++ b/src/views/userManage/roleManage.vue
@@ -1,104 +1,129 @@
 <template>
   <div class="logLog_box">
-    <My-bread
-      :list="[
-        `${$t('userManage.userManage')}`,
-        `${$t('userManage.roleManage')}`,
-      ]"
-    ></My-bread>
+    <My-bread :list="[
+      `${$t('operatManage.operatManage')}`,
+      `${$t('userManage.roleManage')}`,
+    ]"></My-bread>
     <el-divider />
-    <div class="inquire">
+    <div class="inquire subpage_Div" ref="container">
       <el-form ref="ruleForm" :model="roleForm" :inline="true">
-        <el-form-item :label="$t('userManage.RM.roleName')" prop="username">
-          <el-input v-model="roleForm.username" />
-        </el-form-item>
-        <el-form-item
-          :label="$t('userManage.RM.ownedSystem')"
-          prop="ownedSystem"
-        >
-          <el-input
+        <div class="flex_box">
+          <div style="margin-right: auto">
+            <el-form-item :label="$t('userManage.RM.ownedSystem')" prop="ownedSystem">
+              <el-select :popper-append-to-body="false" size="small" v-model="roleForm.depValue"
+                :placeholder="$t('userManage.RM.ownedSystemHolder')" style="width: 200px" ref="treeSelect">
+                <el-option :value="roleForm.depid" :label="roleForm.depValue" style="height: auto">
+                  <el-tree ref="tree" :data="depList" node-key="id" :props="props" @node-click="handleRouleDepList" />
+                </el-option>
+              </el-select>
+              <!-- <el-input
             v-model="roleForm.value"
             :disabled="true"
             :placeholder="$t('common.pleaseInput')"
-          />
-          <el-button style="margin-left: 20px" @click="showDepTree(1)">{{
-            $t('common.choose')
-          }}</el-button>
-        </el-form-item>
-        <br />
-        <el-form-item>
-          <el-button @click="InsertFormdialog = true" v-if="menuStatus.insert"
-            ><i class="el-icon-circle-plus-outline"></i> &nbsp;{{
+          /> -->
+            </el-form-item>
+            <el-form-item :label="$t('userManage.RM.roleName')" prop="username">
+              <el-input v-model="roleForm.username" :placeholder="$t('userManage.RM.roleNameHolder')" size="small"
+                style="width: 200px">
+                <i slot="suffix" class="el-icon-search" @click="onSubmit"></i>
+              </el-input>
+            </el-form-item>
+          </div>
+          <div>
+            <!--            <el-form-item>-->
+            <!--              <el-button-->
+            <!--                size="small"-->
+            <!--                type="primary"-->
+            <!--                @click="onSubmit('ruleForm')"-->
+            <!--              ><i class="el-icon-search"></i> &nbsp;{{-->
+            <!--                  $t("userManage.RM.query")-->
+            <!--                }}</el-button>-->
+            <!--            </el-form-item>-->
+            <el-form-item>
+              <el-button type="success" size="small" @click="setInsertFormdialog" v-if="menuStatus.insert"><i
+                  class="el-icon-circle-plus-outline"></i> &nbsp;{{
+                    $t("userManage.RM.add")
+                  }}</el-button>
+            </el-form-item>
+            <el-form-item>
+              <el-button type="danger" size="small" @click="handleDelete()" v-if="menuStatus.delete"><i
+                  class="el-icon-delete"></i>&nbsp;{{
+                    $t("common.delete")
+                  }}</el-button>
+            </el-form-item>
+            <el-form-item>
+              <el-button type="info" size="small" @click="resetForm('ruleForm')"><i class="el-icon-delete"></i>&nbsp;{{
+                $t("userManage.RM.reset")
+              }}</el-button>
+            </el-form-item>
+          </div>
+        </div>
+
+        <!-- <el-form-item>
+          <el-button
+            size="small"
+            type="primary"
+            @click="showDepTree(1)"
+          >{{ $t('common.choose') }}</el-button>
+        </el-form-item> -->
+        <!-- <el-form-item style="float:right">
+          <el-button
+            type="success"
+            size="small"
+            @click="setInsertFormdialog "
+            v-if="menuStatus.insert"
+          ><i class="el-icon-circle-plus-outline"></i> &nbsp;{{
               $t('userManage.RM.add')
-            }}</el-button
-          >
+            }}</el-button>
         </el-form-item>
-        <el-form-item>
-          <el-button @click="onSubmit('ruleForm')"
-            ><i class="el-icon-search"></i> &nbsp;{{
+        <el-form-item style="float:right">
+          <el-button
+            size="small"
+            type="primary"
+            @click="onSubmit('ruleForm')"
+          ><i class="el-icon-search"></i> &nbsp;{{
               $t('userManage.RM.query')
-            }}</el-button
-          >
+            }}</el-button>
         </el-form-item>
-        <el-form-item>
-          <el-button @click="resetForm('ruleForm')"
-            ><i class="el-icon-delete"></i>&nbsp;{{
+        <el-form-item style="float:right">
+          <el-button
+            type="info"
+            size="small"
+            @click="resetForm('ruleForm')"
+          ><i class="el-icon-delete"></i>&nbsp;{{
               $t('userManage.RM.reset')
-            }}</el-button
-          >
+            }}</el-button>
         </el-form-item>
-        <el-form-item>
-          <el-button @click="handleDelete()" v-if="menuStatus.delete"
-            ><i class="el-icon-delete"></i>&nbsp;{{
+        <el-form-item style="float:right">
+          <el-button
+            type="danger"
+            size="small"
+            @click="handleDelete()"
+            v-if="menuStatus.delete"
+          ><i class="el-icon-delete"></i>&nbsp;{{
               $t('common.delete')
-            }}</el-button
-          >
-        </el-form-item>
+            }}</el-button>
+        </el-form-item> -->
       </el-form>
     </div>
-    <div class="table_box">
-      <el-table
-        :data="tableData"
-        stripe
-        style="width: 100%"
-        @selection-change="handleSelectionChange"
-        height="99%"
-      >
+    <div class="dividing-line"></div>
+    <div class="table_box subpage_Div" :style="styleVar">
+      <el-table :data="tableData" style="width: 100%" border height="calc(100% - 45px)"
+        @selection-change="handleSelectionChange">
         <el-table-column type="selection" width="55" />
-        <el-table-column
-          align="center"
-          type="index"
-          :label="$t('userManage.RM.index')"
-          width="70px"
-        />
+        <el-table-column align="center" type="index" :label="$t('userManage.RM.index')" width="70px" />
         <el-table-column align="center" prop="id" v-if="false" />
-        <el-table-column
-          align="center"
-          prop="name"
-          :label="$t('userManage.RM.roleName')"
-        />
+        <el-table-column align="center" prop="name" :label="$t('userManage.RM.roleName')" />
 
-        <el-table-column
-          align="center"
-          prop="depName"
-          :label="$t('userManage.RM.ownedSystem')"
-        />
+        <el-table-column align="center" prop="depName" :label="$t('userManage.RM.ownedSystem')" />
 
-        <el-table-column
-          align="center"
-          prop="isAdmin"
-          :label="$t('userManage.RM.isAdmin')"
-        >
-          <template slot-scope="scope">
+        <el-table-column align="center" prop="isAdmin" :label="$t('userManage.RM.isAdmin')" :formatter="formateIsAdmin">
+          <!-- <template slot-scope="scope">
             <span v-if="scope.row.isAdmin == 1">鏄� </span>
-            <span v-else-if="scope.row.isAdmin == 0">鍚�</span>
-          </template>
+            <span v-else>鍚�</span>
+          </template> -->
         </el-table-column>
-        <el-table-column
-          align="center"
-          prop="descr"
-          :label="$t('userManage.RM.describe')"
-        />
+        <el-table-column align="center" prop="descr" :label="$t('userManage.RM.describe')" />
 
         <!-- <el-table-column
           align="center"
@@ -127,235 +152,223 @@
           prop="bak"
           :label="$t('userManage.RM.remarks')"
         /> -->
-        <el-table-column
-          fixed="right"
-          :label="$t('common.operate')"
-          width="200"
-        >
+        <el-table-column fixed="right" :label="$t('common.operate')" width="200">
           <template slot-scope="scope">
-            <el-button
-              v-if="menuStatus.update"
-              type="warning"
-              @click="handleEdit(scope.$index, scope.row)"
-              size="small"
-              >{{ $t('common.update') }}</el-button
-            >
-            <el-button
-              @click="showDetail(scope.$index, scope.row)"
-              type="primary"
-              size="small"
-              >{{ $t('common.see') }}</el-button
-            >
+            <el-button type="primary" @click="showDetail(scope.$index, scope.row)" size="small" plain>{{ $t("common.see")
+            }}</el-button>
+            <el-button v-if="menuStatus.update" type="warning" @click="handleEdit(scope.$index, scope.row)" size="small"
+              plain>{{ $t("common.update") }}</el-button>
           </template>
         </el-table-column>
       </el-table>
-      <div style="margin-top: 25px" class="pagination_box">
-        <el-pagination
-          @size-change="handleSizeChange"
-          @current-change="handleCurrentChange"
-          :current-page="listData.pageIndex"
-          :page-sizes="[10, 20, 30, 40]"
-          :page-size="listData.pageSize"
-          layout="total, sizes, prev, pager, next, jumper"
-          :total="count"
-        >
+      <div style="margin-top: 10px" class="pagination_box">
+        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
+          :current-page="listData.pageIndex" :page-sizes="[10, 20, 50, 100]" :page-size="listData.pageSize"
+          layout="total, sizes, prev, pager, next, jumper" :total="count">
         </el-pagination>
       </div>
     </div>
 
-    <el-dialog
-      :title="$t('userManage.RM.insertRole')"
-      top="15vh"
-      width="80vh"
-      style="overflow: hidden"
-      :visible.sync="InsertFormdialog"
-    >
-      <el-form :model="insertform">
-        <el-form-item
-          :label="$t('userManage.RM.roleName')"
-          :label-width="formLabelWidth"
-        >
-          <el-input v-model="insertform.name" autocomplete="off"></el-input>
-        </el-form-item>
-        <el-form-item
-          :label="$t('userManage.RM.ownedSystem')"
-          :label-width="formLabelWidth"
-          :prop="insertform.depValue"
-          :rules="[{ required: true, message: '涓嶈兘涓虹┖' }]"
-        >
-          <el-input
+    <el-dialog :title="$t('userManage.RM.insertRole')" :before-close="handleClose" style="overflow: hidden"
+      :visible.sync="InsertFormdialog">
+      <div style="height: 500px; overflow: auto">
+        <el-form :model="insertform" label-position="top">
+          <el-form-item :label="$t('userManage.RM.roleName')" :label-width="formLabelWidth">
+            <el-input style="width: 85%" v-model="insertform.name" autocomplete="off" :placeholder="$t('shuJuGuanLi.shuJuJianSuo.valuetwo') +
+              $t('userManage.RM.roleName')
+              "></el-input>
+          </el-form-item>
+          <el-form-item :label="$t('userManage.RM.ownedSystem')" :label-width="formLabelWidth" :prop="insertform.depValue"
+            :rules="[{ required: true, message: '涓嶈兘涓虹┖' }]">
+            <el-select :popper-append-to-body="false" v-model="insertform.depValue" :placeholder="$t('shuJuGuanLi.shuJuJianSuo.valuetree') +
+              $t('userManage.RM.ownedSystem')
+              " style="width: 85%">
+              <el-option :value="insertform.depid" :label="insertform.depValue" style="height: auto">
+                <el-tree ref="tree" :data="depList" node-key="id" :props="props" @node-click="handleDepList" />
+              </el-option>
+            </el-select>
+            <!-- <el-input
             v-model="insertform.depValue"
             :disabled="true"
             :placeholder="$t('common.pleaseInput')"
           />
-          <el-button style="margin-left: 20px" @click="showDepTree(2)">{{
-            $t('common.choose')
-          }}</el-button>
-        </el-form-item>
-        <el-form-item
-          :label="$t('userManage.RM.describe')"
-          :label-width="formLabelWidth"
-        >
-          <el-input v-model="insertform.descr" autocomplete="off"></el-input>
-        </el-form-item>
-        <el-form-item
-          :label="$t('userManage.RM.isAdmin')"
-          :label-width="formLabelWidth"
-        >
-          <el-radio v-model="insertform.isAdmin" label="1">鏄�</el-radio>
-          <el-radio v-model="insertform.isAdmin" label="0">鍚�</el-radio>
-        </el-form-item>
-        <el-form-item
-          :label="$t('userManage.RM.remarks')"
-          :label-width="formLabelWidth"
-        >
-          <el-input v-model="insertform.bak" autocomplete="off"></el-input>
-        </el-form-item>
-      </el-form>
+          <el-button
+            size="small"
+            type="primary"
+            style="margin-left:10px"
+            @click="showDepTree(2)"
+          >{{ $t('common.choose') }}</el-button> -->
+          </el-form-item>
+          <el-form-item :label="$t('userManage.RM.describe')" :label-width="formLabelWidth">
+            <el-input style="width: 85%" v-model="insertform.descr" autocomplete="off" :placeholder="$t('shuJuGuanLi.shuJuJianSuo.valuetwo') +
+              $t('userManage.RM.describe')
+              "></el-input>
+          </el-form-item>
+          <el-form-item :label="$t('userManage.RM.isAdmin')" :label-width="formLabelWidth">
+            <!-- <el-radio
+           
+              label="1"
+            >鏄�</el-radio>
+            <el-radio
+              v-model="insertform.isAdmin"
+              label="0"
+            >鍚�</el-radio> -->
+            <el-select style="width: 85%" v-model="insertform.isAdmin" :placeholder="$t('shuJuGuanLi.shuJuJianSuo.valuetree') +
+              $t('userManage.RM.isAdmin')
+              ">
+              <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
+            </el-select>
+          </el-form-item>
+          <el-form-item :label="$t('userManage.RM.remarks')" :label-width="formLabelWidth">
+            <el-input style="width: 85%" v-model="insertform.bak" autocomplete="off" :placeholder="$t('shuJuGuanLi.shuJuJianSuo.valuetwo') +
+              $t('userManage.RM.remarks')
+              "></el-input>
+          </el-form-item>
+        </el-form>
+      </div>
       <div slot="footer" class="dialog-footer">
-        <el-button @click="insertFromClose">{{ $t('common.close') }}</el-button>
-        <el-button type="primary" @click="insertFromData">{{
-          $t('common.confirm')
+        <el-button size="small" @click="insertFromClose">{{
+          $t("common.close")
+        }}</el-button>
+        <el-button type="primary" size="small" @click="insertFromData">{{
+          $t("common.confirm")
         }}</el-button>
       </div>
     </el-dialog>
-    <el-dialog
-      :title="$t('userManage.RM.updateRole')"
-      top="15vh"
-      width="80vh"
-      style="overflow: hidden"
-      :visible.sync="UpdateFormdialog"
-    >
-      <el-form :model="updateform">
-        <el-form-item
-          :label="$t('userManage.RM.roleName')"
-          :label-width="formLabelWidth"
-        >
-          <el-input v-model="updateform.name" autocomplete="off"></el-input>
-        </el-form-item>
+    <el-dialog :title="$t('userManage.RM.updateRole')" :visible.sync="UpdateFormdialog" :before-close="handleCloseEdit">
+      <div style="height: 500px; overflow: auto">
+        <el-form :model="updateform" label-position="top">
+          <el-form-item :label="$t('userManage.RM.roleName')" :label-width="formLabelWidth">
+            <el-input v-model="updateform.name" autocomplete="off" style="width: 85%"></el-input>
+          </el-form-item>
 
-        <el-form-item
-          :label="$t('userManage.RM.ownedSystem')"
-          :label-width="formLabelWidth"
-          :prop="updateform.depValue"
-        >
-          <el-input
+          <el-form-item :label="$t('userManage.RM.ownedSystem')" :label-width="formLabelWidth"
+            :prop="updateform.depValue">
+            <el-select :popper-append-to-body="false" v-model="updateform.depValue" placeholder="璇烽�夋嫨" style="width: 85%">
+              <el-option :value="updateform.depid" :label="updateform.depValue" style="height: auto">
+                <el-tree ref="tree" :data="depList" node-key="id" :props="props" @node-click="handleUpdataDepList" />
+              </el-option>
+            </el-select>
+
+            <!-- <el-input
             v-model="updateform.depValue"
             :disabled="true"
             :placeholder="$t('common.pleaseInput')"
           />
-          <el-button style="margin-left: 20px" @click="showDepTree(3)">{{
-            $t('common.choose')
-          }}</el-button>
-        </el-form-item>
-        <el-form-item
-          :label="$t('userManage.RM.isAdmin')"
-          :label-width="formLabelWidth"
-        >
-          <el-radio v-model="updateform.isAdmin" label="1">鏄�</el-radio>
-          <el-radio v-model="updateform.isAdmin" label="0">鍚�</el-radio>
-        </el-form-item>
-        <el-form-item
-          :label="$t('userManage.RM.describe')"
-          :label-width="formLabelWidth"
-        >
-          <el-input v-model="updateform.descr" autocomplete="off"></el-input>
-        </el-form-item>
-        <el-form-item
-          :label="$t('userManage.RM.remarks')"
-          :label-width="formLabelWidth"
-        >
-          <el-input v-model="updateform.bak" autocomplete="off"></el-input>
-        </el-form-item>
-      </el-form>
+          <el-button
+            size="small"
+            type="primary"
+            style="margin-left:10px"
+            @click="showDepTree(3)"
+          >{{ $t('common.choose') }}</el-button> -->
+          </el-form-item>
+          <el-form-item :label="$t('userManage.RM.isAdmin')" :label-width="formLabelWidth">
+            <!-- <el-radio
+              v-model="updateform.isAdmin"
+              label="1"
+            >鏄�</el-radio>
+            <el-radio
+              v-model="updateform.isAdmin"
+              label="0"
+            >鍚�</el-radio> -->
+            <el-select style="width: 85%" v-model="updateform.isAdmin">
+              <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
+            </el-select>
+          </el-form-item>
+          <el-form-item :label="$t('userManage.RM.describe')" :label-width="formLabelWidth">
+            <el-input v-model="updateform.descr" autocomplete="off" style="width: 85%"></el-input>
+          </el-form-item>
+          <el-form-item :label="$t('userManage.RM.remarks')" :label-width="formLabelWidth">
+            <el-input v-model="updateform.bak" autocomplete="off" style="width: 85%"></el-input>
+          </el-form-item>
+        </el-form>
+      </div>
       <div slot="footer" class="dialog-footer">
-        <el-button @click="updateFromClose">{{ $t('common.close') }}</el-button>
-        <el-button type="primary" @click="updateFromData">{{
-          $t('common.confirm')
+        <el-button size="small" @click="updateFromClose">{{
+          $t("common.close")
+        }}</el-button>
+        <el-button type="primary" size="small" @click="updateFromData">{{
+          $t("common.confirm")
         }}</el-button>
       </div>
     </el-dialog>
-    <div class="leftTree" v-if="showCata">
+    <div class="leftTree subpage_Div box_div" v-if="showCata">
       <div class="treeBox">
         <role-dep-tree></role-dep-tree>
       </div>
       <div class="btnBox">
-        <el-button type="primary" size="small" @click="selectCataName"
-          >纭畾</el-button
-        >
-        <el-button type="primary" size="small" @click="showCata = false"
-          >鍙栨秷</el-button
-        >
+        <el-button type="primary" size="small" @click="selectCataName">纭畾</el-button>
+        <el-button type="info" size="small" @click="showCata = false">鍙栨秷</el-button>
       </div>
     </div>
-
-    <div class="infoBox" v-show="showinfoBox">
-      <el-card>
+    <div class="infoBox_box" v-show="showinfoBox">
+      <div class="infoBox box_div subpage_Div">
         <div slot="header" class="clearfix">
-          <span>{{ $t('dataManage.styleObj.deInformation') }}</span>
+          <span>{{ $t("dataManage.styleObj.deInformation") }}</span>
           <div style="float: right; cursor: pointer" @click="closeDetial">
             <i class="el-icon-close"></i>
           </div>
         </div>
+        <el-divider></el-divider>
         <div class="contentBox">
           <p>
-            <label> {{ $t('userManage.RM.roleName') }}:</label>
+            <label> {{ $t("userManage.RM.roleName") }}:</label>
             <label class="boxlabel">{{ itemdetail.name }}</label>
           </p>
           <el-divider></el-divider>
 
           <p>
-            <label> {{ $t('userManage.RM.ownedSystem') }}:</label>
+            <label> {{ $t("userManage.RM.ownedSystem") }}:</label>
             <label class="boxlabel">{{ itemdetail.depName }}</label>
           </p>
           <el-divider></el-divider>
 
           <p>
-            <label> {{ $t('userManage.RM.isAdmin') }}:</label>
+            <label> {{ $t("userManage.RM.isAdmin") }}:</label>
             <label class="boxlabel">{{ itemdetail.admin }}</label>
           </p>
           <el-divider></el-divider>
           <p>
-            <label> {{ $t('userManage.RM.describe') }}:</label>
+            <label> {{ $t("userManage.RM.describe") }}:</label>
             <label class="boxlabel">{{ itemdetail.descr }}</label>
           </p>
           <el-divider></el-divider>
           <p>
-            <label> {{ $t('userManage.RM.creationuser') }}:</label>
+            <label> {{ $t("userManage.RM.creationuser") }}:</label>
             <label class="boxlabel">{{ itemdetail.createUser }}</label>
           </p>
           <el-divider></el-divider>
           <p>
-            <label> {{ $t('userManage.RM.creationtime') }}:</label>
+            <label> {{ $t("userManage.RM.creationtime") }}:</label>
             <label class="boxlabel">{{ itemdetail.createTime }}</label>
           </p>
           <el-divider></el-divider>
           <p>
-            <label> {{ $t('userManage.RM.updateonuser') }}:</label>
-            <label class="boxlabel">{{ itemdetail.UpdateUser }}</label>
+            <label> {{ $t("userManage.RM.updateonuser") }}:</label>
+            <label class="boxlabel">{{ itemdetail.updateUser }}</label>
           </p>
           <el-divider></el-divider>
 
           <p>
-            <label> {{ $t('userManage.RM.updateontime') }}:</label>
+            <label> {{ $t("userManage.RM.updateontime") }}:</label>
             <label class="boxlabel">{{ itemdetail.updateTime }}</label>
           </p>
           <el-divider></el-divider>
           <p>
-            <label> {{ $t('userManage.RM.remarks') }}:</label>
+            <label> {{ $t("userManage.RM.remarks") }}:</label>
             <label class="boxlabel">{{ itemdetail.bak }}</label>
           </p>
           <el-divider></el-divider>
         </div>
-      </el-card>
+      </div>
     </div>
   </div>
 </template>
 
 <script>
-import moment from 'moment';
-import MyBread from '../../components/MyBread.vue';
-import roleDepTree from './roleDepTree.vue';
+import moment from "moment";
+import MyBread from "../../components/MyBread.vue";
+import roleDepTree from "./roleDepTree.vue";
 import {
   select_Role_ByPageAndCount,
   selectdepTab,
@@ -363,7 +376,7 @@
   deleteRoles,
   selectDep,
   updateRole,
-} from '../../api/api';
+} from "../../api/api";
 export default {
   //import寮曞叆鐨勭粍浠堕渶瑕佹敞鍏ュ埌瀵硅薄涓墠鑳戒娇鐢�
   components: {
@@ -372,18 +385,32 @@
   },
   data() {
     return {
+      props: {
+        label: "name",
+        value: "id",
+        children: "children",
+        checkStrictly: true,
+        emitPath: false,
+      },
+      depList: [],
       showinfoBox: false,
       showCata: false,
-      formLabelWidth: '120px',
+      formLabelWidth: "120px",
       InsertFormdialog: false,
       UpdateFormdialog: false,
-      roleForm: {},
-      cataName: '',
-      depValue: '',
+      roleForm: {
+        depid: "",
+        depValue: "",
+      },
+      cataName: "",
+      depValue: "",
       elTreeFlag: 0,
-      path_id: '',
+      path_id: "",
       tableData: [],
-      insertform: {},
+      insertform: {
+        depValue: "",
+        depid: "",
+      },
       updateform: {},
       count: 0,
       selData: [],
@@ -401,9 +428,84 @@
         insert: false,
         update: false,
       },
+      tableHeight: 0,
+      timer: 0,
+      styleVar: {
+        height: "calc(100% - 109px)",
+      },
+      options: [
+        {
+          value: 0,
+          label: "鏅�氱敤鎴�",
+        },
+        {
+          value: 1,
+          label: "瓒呯骇绠$悊鍛�",
+        },
+        {
+          value: 2,
+          label: "鏁版嵁绠$悊鍛�",
+        },
+        {
+          value: 3,
+          label: "棰嗗",
+        },
+      ],
     };
   },
+  watch: {
+    "roleForm.depValue"() {
+      this.$refs.treeSelect.visible = false;
+    },
+  },
   methods: {
+    onResize() {
+      this.timer && clearTimeout(this.timer);
+      this.timer = setTimeout(() => {
+        this.calHeight();
+      }, 500);
+    },
+    calHeight() {
+      this.$nextTick(() => {
+        const rect = this.$refs.container.getBoundingClientRect();
+        this.tableHeight = `${rect.height + 97}px`;
+        // this.styleVar["height"] = `calc(100% - ${rect.height + 97}px)`;
+        this.styleVar["height"] = `calc(100% - ${rect.height + 30}px)`;
+      });
+    },
+    handleRouleDepList(data, node, nodeData) {
+      this.roleForm.depid = data.id;
+      this.roleForm.depValue = data.name;
+    },
+    handleDepList(data, node, nodeData) {
+      this.insertform.depid = data.id;
+      this.insertform.depValue = data.name;
+    },
+    handleUpdataDepList(data, node, nodeData) {
+      this.updateform.depid = data.id;
+      this.updateform.depValue = data.name;
+    },
+    setInsertFormdialog() {
+      this.InsertFormdialog = true;
+    },
+    treeData(source) {
+      let cloneData = JSON.parse(JSON.stringify(source)); // 瀵规簮鏁版嵁娣卞害鍏嬮殕
+      return cloneData.filter((father) => {
+        // 寰幆鎵�鏈夐」
+        let branchArr = cloneData.filter((child) => father.id == child.pid); // 瀵规瘮ID锛屽垎鍒笂涓嬬骇鑿滃崟锛屽苟杩斿洖鏁版嵁
+        branchArr.length > 0 ? (father.children = branchArr) : ""; // 缁欑埗绾ф坊鍔犱竴涓猚hildren灞炴�э紝骞惰祴鍊�
+        // 灞炰簬鍚屼竴瀵硅薄闂锛屼緥濡傦細浠� a=b銆乧=1 锛岀劧鍚庡啀浠� b.c=c 锛� 閭d箞 a.c=b.c=c=1 锛涘悓鐞嗭紝鍚庣画浠� c.d=2 ,閭d箞 a.c.d 涔熸槸=2锛�
+        // 鐢辨寰幆澶氭鍚庯紝灏辫兘褰㈡垚鐩稿簲鐨勬爲褰㈡暟鎹粨鏋�
+        return father.pid == 0; // 杩斿洖涓�绾ц彍鍗�
+      });
+    },
+    async getDepList() {
+      const data = await selectdepTab();
+      if (data.code != 200) {
+        return this.$message.error("鍗曚綅鍒楄〃璋冪敤澶辫触");
+      }
+      this.depList = this.treeData(data.result);
+    },
     closeDetial() {
       this.showinfoBox = false;
       this.itemdetail = {};
@@ -417,8 +519,11 @@
       this.itemdetail.updateTime = this.formomentTime(
         this.itemdetail.updateTime
       );
-      this.itemdetail.admin =
-        parseInt(this.itemdetail.isAdmin) === 0 ? '鍚�' : '鏄�';
+      this.itemdetail.createUser = this.itemdetail.createName;
+
+      this.itemdetail.updateUser = this.itemdetail.updateName;
+      this.itemdetail.admin =this.formateIsAdmin(this.itemdetail)
+        
     },
     handleSelectionChange(val) {
       this.multipleSelection = val;
@@ -427,211 +532,283 @@
       let date = row[column.property];
       return this.formomentTime(date);
     },
-    formomentTime(date) {
-      if (date === undefined || date === null) {
-        return;
-      }
-      return moment(parseInt(date)).format('YYYY-MM-DD HH:mm:ss');
-    },
-    showDepTree(res) {
-      this.showCata = true;
-      this.elTreeFlag = res;
-    },
-    selectCataName() {
-      this.cataName = this.$store.state.catalogueName;
-      this.path_id = this.$store.state.cataNode.id;
-      var value;
-      if (this.cataName.indexOf('>') != -1) {
-        var data = this.$store.state.catalogueName.split('>');
-        value = data[data.length - 1];
-      } else {
-        value = this.$store.state.catalogueName;
-      }
-      this.$store.commit('changeCata', ''); //娓呯┖state鐨勯潰鍖呭睉
-      this.$store.commit('changeNode', ''); //娓呯┖state鐨勮妭鐐瑰璞�
-      this.showCata = false;
-      switch (this.elTreeFlag) {
+
+    formateIsAdmin(row, column) {
+      switch (row.isAdmin) {
+        case 0:
+          return "鏅�氱敤鎴�";
+          break;
         case 1:
-          this.roleForm.value = value;
-          this.roleForm.depid = this.path_id;
+          return "瓒呯骇绠$悊鍛�";
           break;
         case 2:
-          this.insertform.depid = this.path_id;
-          this.insertform.depValue = value;
+          return "鏁版嵁绠$悊鍛�";
           break;
         case 3:
-          this.updateform.depid = this.path_id;
-          this.updateform.depValue = value;
+          return "棰嗗";
           break;
+      
       }
+  
     },
+
+
+formomentTime(date) {
+  if (date === undefined || date === null) {
+    return;
+  }
+  return moment(parseInt(date)).format("YYYY-MM-DD HH:mm:ss");
+},
+showDepTree(res) {
+  this.showCata = true;
+  this.elTreeFlag = res;
+},
+selectCataName() {
+  this.cataName = this.$store.state.catalogueName;
+  this.path_id = this.$store.state.cataNode.id;
+  var value;
+  if (this.cataName.indexOf(">") != -1) {
+    var data = this.$store.state.catalogueName.split(">");
+    value = data[data.length - 1];
+  } else {
+    value = this.$store.state.catalogueName;
+  }
+  this.$store.commit("changeCata", ""); //娓呯┖state鐨勯潰鍖呭睉
+  this.$store.commit("changeNode", ""); //娓呯┖state鐨勮妭鐐瑰璞�
+  this.showCata = false;
+  switch (this.elTreeFlag) {
+    case 1:
+      this.roleForm.value = value;
+      this.roleForm.depid = this.path_id;
+      break;
+    case 2:
+      this.insertform.depid = this.path_id;
+      this.insertform.depValue = value;
+      break;
+    case 3:
+      this.updateform.depid = this.path_id;
+      this.updateform.depValue = value;
+      break;
+  }
+},
     async getRoleTabelData() {
-      if (this.listData.tab == '') {
-        delete this.listData.tab;
-      }
-      this.listData.name = this.roleForm.username;
-      this.listData.depName = this.roleForm.value;
-      const data = await select_Role_ByPageAndCount(this.listData);
-      if (data.code != 200) {
-        this.$message.error('鍒楄〃璋冪敤澶辫触');
-      }
-      console.log(data);
-      this.tableData = data.result;
-      this.count = data.count;
-    },
+  if (this.listData.tab == "") {
+    delete this.listData.tab;
+  }
+  this.listData.name = this.roleForm.username;
+  this.listData.depid = this.roleForm.depid;
+  const data = await select_Role_ByPageAndCount(this.listData);
+  if (data.code != 200) {
+    this.$message.error("鍒楄〃璋冪敤澶辫触");
+  }
+
+  this.tableData = data.result;
+  this.count = data.count;
+},
     async getSelectDepTab() {
-      this.selectData = [];
-      const data = await selectdepTab();
-      if (data.code != 200) {
-        this.$message.error('涓嬫媺璋冪敤澶辫触');
-      }
-      data.result.forEach((e) => {
-        if (e) {
-          this.selData.push({
-            label: e.name,
-            value: e.id,
-          });
-        }
+  this.selectData = [];
+  const data = await selectdepTab();
+  if (data.code != 200) {
+    this.$message.error("涓嬫媺璋冪敤澶辫触");
+  }
+  data.result.forEach((e) => {
+    if (e) {
+      this.selData.push({
+        label: e.name,
+        value: e.id,
       });
-    },
-    insertFromClose() {
+    }
+  });
+},
+insertFromClose() {
+  this.$confirm("鍏抽棴鍚庢棤娉曚繚瀛橈紝鏄惁鍏抽棴?")
+    .then((_) => {
       this.InsertFormdialog = false;
       this.insertform = {};
-    },
+    })
+    .catch((_) => { });
+},
     async insertFromData() {
-      if (this.insertform.depValue == null) {
-        this.$message({
-          message: '璇烽�夋嫨瑙掕壊鎵�灞炲崟浣�',
-          type: 'warning',
-        });
-        return;
-      }
-      const data = await insertRole(this.insertform);
-      if (data.code == 200) {
-        this.InsertFormdialog = false;
-        this.insertform = {};
-        this.$message({
-          message: '娣诲姞鎴愬姛锛�',
-          type: 'success',
-        });
-        this.getRoleTabelData();
-      } else {
-        this.$message({
-          message: '娣诲姞澶辫触锛�',
-          type: 'warning',
-        });
-      }
-    },
-    updateFromClose() {
+  if (this.insertform.depValue == null) {
+    this.$message({
+      message: "璇烽�夋嫨瑙掕壊鎵�灞炲崟浣�",
+      type: "warning",
+    });
+    return;
+  }
+  const data = await insertRole(this.insertform);
+  if (data.code == 200) {
+    this.InsertFormdialog = false;
+    this.insertform = {};
+    this.$message({
+      message: "娣诲姞鎴愬姛锛�",
+      type: "success",
+    });
+    this.getRoleTabelData();
+  } else {
+    this.$message({
+      message: "娣诲姞澶辫触锛�",
+      type: "warning",
+    });
+  }
+},
+updateFromClose() {
+  this.$confirm("鍏抽棴鍚庢棤娉曚繚瀛橈紝鏄惁鍏抽棴?")
+    .then((_) => {
       this.UpdateFormdialog = false;
       this.updateform = {};
-    },
+      this.getRoleTabelData();
+    })
+    .catch((_) => { });
+},
     async updateFromData() {
-      if (this.updateform.depValue == null) {
-        this.$message({
-          message: '璇烽�夋嫨瑙掕壊鎵�灞炲崟浣�',
-          type: 'warning',
-        });
-        return;
-      }
-      console.log(this.updateform);
-      const data = await updateRole(this.updateform);
-      if (data.code == 200) {
-        this.UpdateFormdialog = false;
-        this.updateform = {};
-        this.$message({
-          message: '淇敼鎴愬姛锛�',
-          type: 'success',
-        });
-        this.getRoleTabelData();
-      } else {
-        this.$message({
-          message: '淇敼澶辫触锛�',
-          type: 'warning',
-        });
-      }
-    },
-    async handleDelete() {
-      var std = [];
-      for (var i in this.multipleSelection) {
-        std.push(this.multipleSelection[i].id);
-      }
+  if (this.updateform.depValue == null) {
+    this.$message({
+      message: "璇烽�夋嫨瑙掕壊鎵�灞炲崟浣�",
+      type: "warning",
+    });
+    return;
+  }
+  console.log(this.updateform);
+  const data = await updateRole(this.updateform);
+  if (data.code == 200) {
+    this.UpdateFormdialog = false;
+    this.updateform = {};
+    this.$message({
+      message: "淇敼鎴愬姛锛�",
+      type: "success",
+    });
+    this.getRoleTabelData();
+  } else {
+    this.$message({
+      message: "淇敼澶辫触锛�",
+      type: "warning",
+    });
+  }
+},
+handleDelete() {
+  var std = [];
+  for (var i in this.multipleSelection) {
+    std.push(this.multipleSelection[i].id);
+  }
+  this.$confirm("姝ゆ搷浣滃皢姘镐箙鍒犻櫎璇ヨ鑹�, 鏄惁缁х画?", "鎻愮ず", {
+    confirmButtonText: "纭畾",
+    cancelButtonText: "鍙栨秷",
+    type: "warning",
+  })
+    .then(async () => {
       const data = await deleteRoles({ ids: std.toString() });
 
       if (data.code == 200) {
         this.InsertFormdialog = false;
         this.$message({
-          message: '鍒犻櫎鎴愬姛锛�',
-          type: 'success',
+          message: "鍒犻櫎鎴愬姛锛�",
+          type: "success",
         });
         this.getRoleTabelData();
       } else {
         this.$message({
-          message: '鍒犻櫎澶辫触锛�',
-          type: 'warning',
+          message: "鍒犻櫎澶辫触锛�",
+          type: "warning",
         });
       }
-    },
-    handleSizeChange(val) {
-      this.listData.pageSize = val;
-      this.getRoleTabelData();
-    },
-    handleCurrentChange(val) {
-      this.listData.pageIndex = val;
-      this.getRoleTabelData();
-    },
+    })
+    .catch(() => {
+      this.$message({
+        type: "info",
+        message: "宸插彇娑堝垹闄�",
+      });
+    });
+},
+handleSizeChange(val) {
+  this.listData.pageSize = val;
+  this.getRoleTabelData();
+},
+handleCurrentChange(val) {
+  this.listData.pageIndex = val;
+  this.getRoleTabelData();
+},
     async handleEdit(index, row) {
-      this.updateform = row;
-      this.updateform.isAdmin = row.isAdmin.toString();
-      const data = await selectDep({ id: row.depid });
-      this.updateform.depValue = data.result.name;
-      this.UpdateFormdialog = true;
-    },
-    onSubmit() {
+  this.updateform = row;
+  // this.updateform.isAdmin = row.isAdmin.toString();
+  const data = await selectDep({ id: row.depid });
+  if (data.result == null) {
+    this.updateform.depValue = null;
+  } else {
+    this.updateform.depValue = data.result.name;
+  }
+
+  this.UpdateFormdialog = true;
+},
+onSubmit() {
+  this.getRoleTabelData();
+},
+resetForm(formName) {
+  this.$refs[formName].resetFields();
+  this.roleForm = {};
+  this.getRoleTabelData();
+},
+showPermsMenu(res) {
+  switch (res.tag) {
+    case "/delete":
+      this.menuStatus.delete = true;
+      break;
+    case "/insert":
+      this.menuStatus.insert = true;
+      break;
+    case "/update":
+      this.menuStatus.update = true;
+      break;
+  }
+},
+handleClose() {
+  this.$confirm("鍏抽棴鍚庢棤娉曚繚瀛橈紝鏄惁鍏抽棴?")
+    .then((_) => {
+      this.InsertFormdialog = false;
+    })
+    .catch((_) => { });
+},
+handleCloseEdit() {
+  this.$confirm("鍏抽棴鍚庢棤娉曚繚瀛橈紝鏄惁鍏抽棴?")
+    .then((_) => {
+      this.UpdateFormdialog = false;
       this.getRoleTabelData();
-    },
-    resetForm(formName) {
-      this.$refs[formName].resetFields();
-      this.roleForm = {};
-      this.getRoleTabelData();
-    },
-    showPermsMenu(res) {
-      switch (res.tag) {
-        case '/delete':
-          this.menuStatus.delete = true;
-          break;
-        case '/insert':
-          this.menuStatus.insert = true;
-          break;
-        case '/update':
-          this.menuStatus.update = true;
-          break;
-      }
-    },
+    })
+    .catch((_) => { });
+},
   },
-  created() {
-    var val = this.$store.state.currentPerms;
-    var permsEntity = this.$store.state.permsEntity;
-    for (var i = 0; i < permsEntity.length; i++) {
-      if (permsEntity[i].perms == val) {
-        this.showPermsMenu(permsEntity[i]);
-      }
+beforeDestroy() {
+  this.timer && clearTimeout(this.timer);
+  window.removeEventListener("resize", this.onResize);
+},
+mounted() {
+  window.addEventListener("resize", this.onResize);
+  this.calHeight();
+},
+created() {
+  var val = this.$store.state.currentPerms;
+  var permsEntity = this.$store.state.permsEntity;
+  for (var i = 0; i < permsEntity.length; i++) {
+    if (permsEntity[i].perms == val) {
+      this.showPermsMenu(permsEntity[i]);
     }
-    this.getRoleTabelData();
-    this.getSelectDepTab();
-  },
+  }
+  this.getRoleTabelData();
+  this.getDepList();
+},
 };
 </script>
 <style lang="less" scoped>
 //@import url(); 寮曞叆鍏叡css绫�
 .logLog_box {
-  border-radius: 10px;
-  height: 100%;
+  height: 98%;
+  width: 98%;
+  padding: 0.5%;
 
-  box-sizing: border-box;
   .el-input {
     width: 300px;
   }
+
   .leftTree {
     position: absolute;
     z-index: 9999;
@@ -639,190 +816,37 @@
     left: 37%;
     width: 400px;
     height: 600px;
-    background: white;
-    border: 1px solid #000;
-    color: white;
+
     .treeBox {
       height: 550px;
       overflow: auto;
-      /deep/ .el-tree-node__content:hover {
-        background-color: rgb(153, 153, 153);
-      }
     }
+
     .btnBox {
       width: 123px;
       margin: 10px auto 0;
       // background-color: red;
     }
   }
+
   .inquire {
-    height: 115px;
-    overflow: auto;
-    padding: 10px;
-    margin-top: 20px;
+    height: auto;
+
+    //padding: 8px;
+    //margin-top: 20px;
 
     border-radius: 5px;
-    border: 1px solid rgb(202, 201, 204);
-    margin-bottom: 10px;
+
+    //margin-bottom: 20px;
+    // width: calc(100% - 22px);
+
     .el-form-item {
-      margin: 7px;
-    }
-    /deep/ .el-input__inner {
-      background-color: transparent !important;
-      border: 1px solid;
-      color: white;
-    }
-    /deep/.el-form-item__label {
-      color: white;
+      margin: 5px;
     }
   }
-  .table_box {
-    height: 470px;
-    padding: 10px;
 
-    border-radius: 5px;
-    border: 1px solid rgb(202, 201, 204);
-    /deep/.el-input__inner {
-      background-color: transparent !important;
-      border: 1px solid;
-      color: white;
-    }
-    /deep/.el-pagination__total {
-      color: white;
-    }
-    /deep/.el-pagination__jump {
-      color: white;
-    }
-    /deep/.el-pager li.active {
-      color: #1890ff;
-    }
-    /deep/.el-pager li {
-      color: white;
-      background: transparent;
-    }
-    /deep/.el-pager li {
-      color: white;
-    }
-    /deep/.btn-prev {
-      background: transparent;
-    }
-    /deep/.btn-next {
-      background: transparent;
-    }
-    /*淇敼table 琛ㄤ綋鐨勮儗鏅鑹插拰鏂囧瓧棰滆壊*/
-    /deep/ .el-table {
-      background-color: transparent;
-
-      th,
-      td {
-        background-color: transparent;
-      }
-      .el-table__expanded-cell {
-        background-color: transparent !important;
-      }
-
-      // 琛ㄥご鑳屾櫙鑹�
-      th.el-table__cell {
-        background-color: #303030;
-        color: #fff;
-      }
-      tr > td {
-        background-color: #303030;
-        color: #fff;
-      }
-
-      // hover鏁堟灉
-      tr:hover > td {
-        background-color: rgba(255, 255, 255, 0.3) !important;
-      }
-
-      tbody tr:hover {
-        background-color: rgba(255, 255, 255, 0.3) !important;
-        // text-align: center;
-      }
-
-      // 婊氬姩鏉″楂�
-      .el-table__body-wrapper::-webkit-scrollbar {
-        width: 5px;
-        height: 5px;
-      }
-
-      .el-table__body-wrapper::-webkit-scrollbar {
-        width: 5px;
-        /*婊氬姩鏉″搴�*/
-        height: 10px;
-        /*婊氬姩鏉¢珮搴�*/
-      }
-      /*瀹氫箟婊氬姩鏉¤建閬� 鍐呴槾褰�+鍦嗚*/
-      .el-table__body-wrapper::-webkit-scrollbar-track {
-        box-shadow: 0px 1px 3px #216fe6 inset;
-        /*婊氬姩鏉$殑鑳屾櫙鍖哄煙鐨勫唴闃村奖*/
-        border-radius: 10px;
-      }
-
-      /*瀹氫箟婊戝潡 鍐呴槾褰�+鍦嗚*/
-      .el-table__body-wrapper::-webkit-scrollbar-thumb {
-        box-shadow: 0px 1px 3px #216fe6 inset;
-        border-radius: 6px;
-        background-color: #216fe6;
-      }
-    }
-  }
   .text-center {
     text-align: center;
-  }
-  .infoBox {
-    width: 500px;
-    border: 1px solid #eee;
-    position: absolute;
-    z-index: 100;
-    top: 25%;
-    right: 12%;
-    background-color: #fff;
-    .el-card {
-      background-color: transparent;
-      span {
-        font-size: 16px;
-        font-weight: 600;
-      }
-    }
-    .contentBox {
-      margin: 0 aotu 10px;
-      height: 485px;
-      overflow: auto;
-      p {
-        // background-color: #bfa;
-        // margin-bottom: 10px;
-        font-size: 14px;
-      }
-      .boxlabel {
-        margin-left: 10px;
-      }
-    }
-    /* 鏁翠綋鏍峰紡 */
-    .contentBox::-webkit-scrollbar {
-      width: 6px;
-      height: 6px;
-    }
-
-    /* 婊氬姩鏉� */
-    .contentBox::-webkit-scrollbar-thumb {
-      background-color: #b3d8ff;
-      border-radius: 6px;
-    }
-
-    /* 婊氬姩鏉¢紶鏍囩粡杩囨牱寮� */
-    .contentBox::-webkit-scrollbar-thumb:hover {
-      background-color: #b3d8ff;
-      border-radius: 6px;
-    }
-
-    /* 婊氬姩鏉¤建閬� */
-    .contentBox::-webkit-scrollbar-track-piece {
-      -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
-      border-radius: 10px;
-      background: #ededed;
-    }
   }
 }
 </style>

--
Gitblit v1.9.3