bianjiAdnmin

src/views/permissions/permission.vue

@@ -21,7 +21,7 @@ const admin = ref({
 })
 // 角色搜索
 const role = ref({
-  name:''
+  name: ''
 })
 // 搜索对象
 const getObj = ref({
@@ -63,7 +63,8 @@ const addRole = ref({
   roleName: '',
   parentId: null,
   checkedKeys: [],
-  grade: ''
+  grade: '',
+  market:''
 })
 // 新增角色的权限列表
 const permissionSelect = ref()
@@ -128,11 +129,11 @@ const getRoleList = async function (val) {
 // 试试D老师的方法
 const formatPermissions = (tree) => {
   if (!tree || tree.length === 0) return '';
-  
+
   return tree.map(menu => {
     const mainMenu = menu.menuName;
     const subMenus = menu.children?.map(child => child.menuName) || [];
-    
+
     // 如果有子菜单，显示前2个子菜单名称
     if (subMenus.length > 0) {
       const maxSub = Math.min(2, subMenus.length);
@@ -140,7 +141,7 @@ const formatPermissions = (tree) => {
       const moreText = subMenus.length > maxSub ? '...' : '';
       return `${mainMenu}+${subText}${moreText}`;
     }
-    
+
     // 没有子菜单时只显示主菜单
     return mainMenu;
   }).join('+');
@@ -319,18 +320,25 @@ const closeUserEditVisible = function () {
   userEditVisible.value = false
 }
 // 编辑用户权限初始化
-const permissionEditInit = function (row) {
-  console.log('row',row)
+const permissionEditInit = async function (row) {
+  console.log('row', row)
   permissionEditObj.value = {}
   permissionEditObj.value.id = row.id
   permissionEditObj.value.account = row.account
   permissionEditObj.value.name = row.name
   permissionEditObj.value.market = row.market
   permissionEditObj.value.postiton = row.postiton
+  permissionEditObj.value.roleId = row.roleId
+  const result = await request({
+    url: '/role/selectFather',
+    data: row.roleId
+  })
+  permissionEditObj.value.parentId = result.data?.fatherId
+  permissionEditObj.value.parentName = result.data?.fatherName
 
 
-  permissionEditObj.value.permission = row.permission
-  permissionEditObj.value.roleId = row.roleId
+    //permissionEditObj.value.permission = row.permission
+
   permissionEditObj.value.roleName = row.roleName
   console.log('编辑用户权限', permissionEditObj.value)
   openUserEditVisible()
@@ -411,7 +419,8 @@ const handleAddRole = async function () {
         "roleName": addRole.value.roleName,
         "menuIds": addRole.value.checkedKeys,
         "priority": addRole.value.grade,
-        "fatherId": addRole.value.parentName
+        "fatherId": addRole.value.parentName,
+        "market":addRole.value.market
       }
     })
     console.log('成功了，看看addRole', addRole.value)
@@ -492,180 +501,180 @@ const handleCheckChange = (checkedNodes, { checkedKeys }) => {
 <template>
   <div style="margin-bottom:20px">
     <el-button-group>
-      <el-button :type="checkTab === 'admin' ? 'primary' : 'default'" @click="checkTab = 'admin'" >
+      <el-button :type="checkTab === 'admin' ? 'primary' : 'default'" @click="checkTab = 'admin'">
         用户管理
       </el-button>
-      <el-button :type="checkTab === 'role' ? 'primary' : 'default'" @click="checkTab = 'role'" >
+      <el-button :type="checkTab === 'role' ? 'primary' : 'default'" @click="checkTab = 'role'">
         角色管理
       </el-button>
     </el-button-group>
   </div>
   <div v-show="checkTab === 'admin'">
-  <!-- 用户搜索和展示 -->
-  <el-row>
-    <el-col>
-      <el-card style="margin-bottom: 20px">
-        <div class="head-card">
-          <div class="head-card-element">
-            <el-text class="mx-1" size="large">OA号：</el-text>
-            <el-input v-model="admin.account" style="width: 240px" placeholder="请输入OA号" clearable />
-          </div>
-          <div class="head-card-element" style="margin-left: 50px">
-            <el-text class="mx-1" size="large">所属地区：</el-text>
-            <el-select v-model="admin.market" placeholder="请选择所属地区" style="width: 240px" clearable>
-              <el-option v-for="item in market" :key="item" :label="item" :value="item" />
-            </el-select>
-          </div>
-          <div class="head-card-element" style="margin-left: 50px">
-            <el-text class="mx-1" size="large">职位名称：</el-text>
-            <el-select v-model="admin.postiton" placeholder="请选择职位名称" style="width: 240px" clearable>
-              <el-option v-for="item in postiton" :key="item" :label="item" :value="item" />
-            </el-select>
-          </div>
+    <!-- 用户搜索和展示 -->
+    <el-row>
+      <el-col>
+        <el-card style="margin-bottom: 20px">
+          <div class="head-card">
+            <div class="head-card-element">
+              <el-text class="mx-1" size="large">OA号：</el-text>
+              <el-input v-model="admin.account" style="width: 240px" placeholder="请输入OA号" clearable />
+            </div>
+            <div class="head-card-element" style="margin-left: 50px">
+              <el-text class="mx-1" size="large">所属地区：</el-text>
+              <el-select v-model="admin.market" placeholder="请选择所属地区" style="width: 240px" clearable>
+                <el-option v-for="item in market" :key="item" :label="item" :value="item" />
+              </el-select>
+            </div>
+            <div class="head-card-element" style="margin-left: 50px">
+              <el-text class="mx-1" size="large">职位名称：</el-text>
+              <el-select v-model="admin.postiton" placeholder="请选择职位名称" style="width: 240px" clearable>
+                <el-option v-for="item in postiton" :key="item" :label="item" :value="item" />
+              </el-select>
+            </div>
 
-          <div class="head-card-btn">
-            <el-button type="success" @click="reset()">重置</el-button>
-            <el-button type="primary" @click="search()">查询</el-button>
+            <div class="head-card-btn">
+              <el-button type="success" @click="reset()">重置</el-button>
+              <el-button type="primary" @click="search()">查询</el-button>
+            </div>
+          </div>
+        </el-card>
+      </el-col>
+    </el-row>
+
+    <el-row>
+      <el-col>
+        <el-card>
+          <!-- 展示表单 -->
+          <div class="add-item">
+            <el-button style="color: #048efb; border: 1px solid #048efb" @click="userAddInit()">新增用户</el-button>
           </div>
-        </div>
-      </el-card>
-    </el-col>
-  </el-row>
-
-  <el-row>
-    <el-col>
-      <el-card>
-        <!-- 展示表单 -->
-        <div class="add-item">
-          <el-button style="color: #048efb; border: 1px solid #048efb" @click="userAddInit()">新增用户</el-button>
-        </div>
 
-        <div>
-          <el-table :data="tableData" style="width: 100%" show-overflow-tooltip>
-            <el-table-column type="index" label="序号" width="100px" fixed="left">
-              <template #default="scope">
-                <span>{{
-                  scope.$index + 1 + (getObj.pageNum - 1) * getObj.pageSize
-                }}</span>
-              </template>
-            </el-table-column>
-
-            <el-table-column prop="account" label="OA号" />
-            <el-table-column prop="name" label="姓名" />
-            <el-table-column prop="market" label="所属地区" />
-            <el-table-column prop="postiton" label="职位" />
-            <el-table-column prop="roleName" label="部门权限">
-            </el-table-column>
-            <el-table-column prop="remark" label="备注" />
-            <el-table-column prop="operation" label="操作" width="200px">
-              <template #default="scope">
-                <el-button type="warning" text @click="permissionEditInit(scope.row)"
-                  :disabled="scope.row.adminStatus === 0">
-                  修改权限
-                </el-button>
-                <el-popconfirm title="确定将此用户删除吗？" @confirm="delRoleConfirm">
-                  <template #reference>
-                    <el-button type="danger" text @click="del(scope.row)" :disabled="scope.row.adminStatus === 0">
-                      删除
-                    </el-button>
-                  </template>
-                  <template #actions="{ confirm, cancel }">
-                    <el-button size="small" @click="cancel">取消</el-button>
-                    <el-button type="primary" size="small" @click="confirm">
-                      确定
-                    </el-button>
-                  </template>
-                </el-popconfirm>
-              </template>
-            </el-table-column>
-            <el-table-column prop="adminStatus" label="状态">
-              <template #default="scope">
-                <el-switch v-model="scope.row.adminStatus" :active-value="1" :inactive-value="0" size="large"
-                  @change="editStatus(scope.row)" style="
+          <div>
+            <el-table :data="tableData" style="width: 100%" show-overflow-tooltip>
+              <el-table-column type="index" label="序号" width="100px" fixed="left">
+                <template #default="scope">
+                  <span>{{
+                    scope.$index + 1 + (getObj.pageNum - 1) * getObj.pageSize
+                    }}</span>
+                </template>
+              </el-table-column>
+
+              <el-table-column prop="account" label="OA号" />
+              <el-table-column prop="name" label="姓名" />
+              <el-table-column prop="market" label="所属地区" />
+              <el-table-column prop="postiton" label="职位" />
+              <el-table-column prop="roleName" label="部门权限">
+              </el-table-column>
+              <el-table-column prop="remark" label="备注" />
+              <el-table-column prop="operation" label="操作" width="200px">
+                <template #default="scope">
+                  <el-button type="warning" text @click="permissionEditInit(scope.row)"
+                    :disabled="scope.row.adminStatus === 0">
+                    修改权限
+                  </el-button>
+                  <el-popconfirm title="确定将此用户删除吗？" @confirm="delRoleConfirm">
+                    <template #reference>
+                      <el-button type="danger" text @click="del(scope.row)" :disabled="scope.row.adminStatus === 0">
+                        删除
+                      </el-button>
+                    </template>
+                    <template #actions="{ confirm, cancel }">
+                      <el-button size="small" @click="cancel">取消</el-button>
+                      <el-button type="primary" size="small" @click="confirm">
+                        确定
+                      </el-button>
+                    </template>
+                  </el-popconfirm>
+                </template>
+              </el-table-column>
+              <el-table-column prop="adminStatus" label="状态">
+                <template #default="scope">
+                  <el-switch v-model="scope.row.adminStatus" :active-value="1" :inactive-value="0" size="large"
+                    @change="editStatus(scope.row)" style="
                     --el-switch-on-color: #13ce66;
                     --el-switch-off-color: #ff4949;
                   " active-text="启用" inactive-text="禁用" inline-prompt />
-              </template>
-            </el-table-column>
-          </el-table>
-        </div>
+                </template>
+              </el-table-column>
+            </el-table>
+          </div>
 
-        <!-- 分页 -->
-        <div class="pagination" style="margin-top: 20px">
-          <el-pagination background :page-size="getObj.pageSize" :page-sizes="[5, 10, 20, 50, 100]"
-            layout="total, sizes, prev, pager, next, jumper" :total="total" @size-change="handlePageSizeChange"
-            @current-change="handleCurrentChange"></el-pagination>
-        </div>
-      </el-card>
-    </el-col>
-  </el-row>
-</div>
-<div v-show="checkTab === 'role'">
-  <!-- 角色搜索 -->
-      <el-card style="margin-bottom: 20px">
-        <div class="head-card">
-            <el-text class="mx-1" size="large">角色名称：</el-text>
-            <el-input v-model="role.name" style="width: 240px" placeholder="请输入角色名称" clearable />
-          <div class="head-card-btn">
-            <el-button type="success" @click="reset()">重置</el-button>
-            <el-button type="primary" @click="search()">查询</el-button>
+          <!-- 分页 -->
+          <div class="pagination" style="margin-top: 20px">
+            <el-pagination background :page-size="getObj.pageSize" :page-sizes="[5, 10, 20, 50, 100]"
+              layout="total, sizes, prev, pager, next, jumper" :total="total" @size-change="handlePageSizeChange"
+              @current-change="handleCurrentChange"></el-pagination>
           </div>
+        </el-card>
+      </el-col>
+    </el-row>
+  </div>
+  <div v-show="checkTab === 'role'">
+    <!-- 角色搜索 -->
+    <el-card style="margin-bottom: 20px">
+      <div class="head-card">
+        <el-text class="mx-1" size="large">角色名称：</el-text>
+        <el-input v-model="role.name" style="width: 240px" placeholder="请输入角色名称" clearable />
+        <div class="head-card-btn">
+          <el-button type="success" @click="reset()">重置</el-button>
+          <el-button type="primary" @click="search()">查询</el-button>
         </div>
-      </el-card>
+      </div>
+    </el-card>
 
-      <el-card>
-        <!-- 展示表单 -->
-        <div class="add-item">
-          <el-button style="color: #048efb; border: 1px solid #048efb" @click="permissionAddInit()">新增角色</el-button>
-        </div>
-        <div>
-          <el-table :data="roleData" style="width: 100%" show-overflow-tooltip>
-            <el-table-column type="index" label="序号" width="100px" fixed="left">
-              <template #default="scope">
-                <span>{{
-                  scope.$index + 1 + (getRoleObj.pageNum - 1) * getRoleObj.pageSize
-                }}</span>
-              </template>
-            </el-table-column>
-
-            <el-table-column prop="roleName" label="角色名称" />
-            <el-table-column prop="fatherName" label="上级角色" />
-            <el-table-column prop="priority" label="优先级" />
-            <el-table-column label="权限范围" show-overflow-tooltip>
-          <template #default="scope">
-            <div class="permission-cell">
-              {{ formatPermissions(scope.row.tree) }}
-            </div>
-          </template>
-        </el-table-column>
-            <el-table-column prop="operation" label="操作" width="200px">
-              <template #default="scope">
-                <el-popconfirm title="确定将此用户删除吗？" @confirm="delRoleConfirm">
-                  <template #reference>
-                    <el-button type="danger" text @click="delRole(scope.row)">
-                      删除
-                    </el-button>
-                  </template>
-                  <template #actions="{ confirm, cancel }">
-                    <el-button size="small" @click="cancel">取消</el-button>
-                    <el-button type="primary" size="small" @click="confirm">
-                      确定
-                    </el-button>
-                  </template>
-                </el-popconfirm>
-              </template>
-            </el-table-column>
-          </el-table>
-        </div>
+    <el-card>
+      <!-- 展示表单 -->
+      <div class="add-item">
+        <el-button style="color: #048efb; border: 1px solid #048efb" @click="permissionAddInit()">新增角色</el-button>
+      </div>
+      <div>
+        <el-table :data="roleData" style="width: 100%" show-overflow-tooltip>
+          <el-table-column type="index" label="序号" width="100px" fixed="left">
+            <template #default="scope">
+              <span>{{
+                scope.$index + 1 + (getRoleObj.pageNum - 1) * getRoleObj.pageSize
+              }}</span>
+            </template>
+          </el-table-column>
+
+          <el-table-column prop="roleName" label="角色名称" />
+          <el-table-column prop="fatherName" label="上级角色" />
+          <el-table-column prop="priority" label="优先级" />
+          <el-table-column label="权限范围" show-overflow-tooltip>
+            <template #default="scope">
+              <div class="permission-cell">
+                {{ formatPermissions(scope.row.tree) }}
+              </div>
+            </template>
+          </el-table-column>
+          <el-table-column prop="operation" label="操作" width="200px">
+            <template #default="scope">
+              <el-popconfirm title="确定将此用户删除吗？" @confirm="delRoleConfirm">
+                <template #reference>
+                  <el-button type="danger" text @click="delRole(scope.row)">
+                    删除
+                  </el-button>
+                </template>
+                <template #actions="{ confirm, cancel }">
+                  <el-button size="small" @click="cancel">取消</el-button>
+                  <el-button type="primary" size="small" @click="confirm">
+                    确定
+                  </el-button>
+                </template>
+              </el-popconfirm>
+            </template>
+          </el-table-column>
+        </el-table>
+      </div>
 
-        <!-- 分页 -->
-        <div class="pagination" style="margin-top: 20px">
-          <el-pagination background :page-size="getObj.pageSize" :page-sizes="[5, 10, 20, 50, 100]"
-            layout="total, sizes, prev, pager, next, jumper" :total="total" @size-change="handlePageSizeChange"
-            @current-change="handleCurrentChange"></el-pagination>
-        </div>
-      </el-card>
-</div>
+      <!-- 分页 -->
+      <div class="pagination" style="margin-top: 20px">
+        <el-pagination background :page-size="getObj.pageSize" :page-sizes="[5, 10, 20, 50, 100]"
+          layout="total, sizes, prev, pager, next, jumper" :total="total" @size-change="handlePageSizeChange"
+          @current-change="handleCurrentChange"></el-pagination>
+      </div>
+    </el-card>
+  </div>
   <!-- 新增用户权限 -->
   <el-dialog v-model="userAddVisible" title="新增用户权限" width="800px" :close-on-click-modal="false">
     <template #footer>
@@ -724,20 +733,20 @@ const handleCheckChange = (checkedNodes, { checkedKeys }) => {
   <!-- 这是编辑用户权限弹窗 -->
   <el-dialog v-model="userEditVisible" title="编辑用户权限" width="800px" :close-on-click-modal="false">
     <el-form ref="Ref" :model="permissionEditObj" label-width="auto" style="max-width: 600px; align-items: center">
-       <el-form-item prop="account" label="用户账号:" required clearable>
-          <el-input v-model="permissionEditObj.account" placeholder="请输入OA号" style="width: 220px"  disabled  />
-        </el-form-item>
+      <el-form-item prop="account" label="用户账号:" required clearable>
+        <el-input v-model="permissionEditObj.account" placeholder="请输入OA号" style="width: 220px" disabled />
+      </el-form-item>
       <el-form-item prop="name" label="用户名称:" required>
-        <el-input v-model="permissionEditObj.name" placeholder="请输入用户名" style="width: 220px"  disabled  />
+        <el-input v-model="permissionEditObj.name" placeholder="请输入用户名" style="width: 220px" disabled />
       </el-form-item>
       <el-form-item prop="market" label="所属地区:" required clearable>
-          <el-select multiple v-model="permissionEditObj.market" placeholder="请选择所属地区" style="width: 440px" clearable>
-            <el-option v-for="item in market" :key="item" :label="item" :value="item" :disabled="includeHq(item)" />
-          </el-select>
-        </el-form-item>
-        <el-form-item prop="postiton" label="职位:" required>
-          <el-input v-model="permissionEditObj.postiton" placeholder="请输入职位" style="width: 220px" clearable />
-        </el-form-item>
+        <el-select multiple v-model="permissionEditObj.market" placeholder="请选择所属地区" style="width: 440px" clearable>
+          <el-option v-for="item in market" :key="item" :label="item" :value="item" :disabled="includeHq(item)" />
+        </el-select>
+      </el-form-item>
+      <el-form-item prop="postiton" label="职位:" required>
+        <el-input v-model="permissionEditObj.postiton" placeholder="请输入职位" style="width: 220px" clearable />
+      </el-form-item>
       <el-form-item prop="roleName" label="角色名称:" required>
         <el-input v-model="permissionEditObj.roleName" placeholder="请输入用户名" style="width: 220px" />
       </el-form-item>
@@ -771,6 +780,11 @@ const handleCheckChange = (checkedNodes, { checkedKeys }) => {
         <el-form-item prop="roleName" label="角色名称:" required>
           <el-input v-model="addRole.roleName" placeholder="请输入用户名" style="width: 220px" />
         </el-form-item>
+        <el-form-item prop="market" label="所属地区:" required>
+          <el-select v-model="addRole.market" placeholder="请选择所属地区" style="width: 240px" clearable>
+            <el-option v-for="item in market" :key="item" :label="item" :value="item" />
+          </el-select>
+        </el-form-item>
         <el-form-item prop="parentName" label="上级角色:">
           <el-select v-model="addRole.parentId" placeholder="请选择上级角色" style="width: 220px" @change="getLists" clearable>
             <el-option v-for="item in permissionList" :key="item.value" :label="item.label"