用户管理支持分栏拖动

RuoYi

2024-11-22 341728774cb98e3aa4abfe32a6ff5e6e49c7055d

 src/views/system/user/index.vue

@@ -1,76 +1,35 @@
<template>

   <div class="app-container">

      <el-row :gutter="20">

      <splitpanes class="default-theme">

         <!--部门数据-->

         <el-col :span="4" :xs="24">

        <pane size="15">

          <el-col>

            <div class="head-container">

               <el-input

                  v-model="deptName"

                  placeholder="请输入部门名称"

                  clearable

                  prefix-icon="Search"

                  style="margin-bottom: 20px"

               />

              <el-input v-model="deptName" placeholder="请输入部门名称" clearable prefix-icon="Search" style="margin-bottom: 20px" />

            </div>

            <div class="head-container">

               <el-tree

                  :data="deptOptions"

                  :props="{ label: 'label', children: 'children' }"

                  :expand-on-click-node="false"

                  :filter-node-method="filterNode"

                  ref="deptTreeRef"

                  node-key="id"

                  highlight-current

                  default-expand-all

                  @node-click="handleNodeClick"

               />

              <el-tree :data="deptOptions" :props="{ label: 'label', children: 'children' }" :expand-on-click-node="false" :filter-node-method="filterNode" ref="deptTreeRef" node-key="id" highlight-current default-expand-all @node-click="handleNodeClick" />

            </div>

         </el-col>

        </pane>

         <!--用户数据-->

         <el-col :span="20" :xs="24">

        <pane>

          <el-col size="85">

            <el-form :model="queryParams" ref="queryRef" :inline="true" v-show="showSearch" label-width="68px">

               <el-form-item label="用户名称" prop="userName">

                  <el-input

                     v-model="queryParams.userName"

                     placeholder="请输入用户名称"

                     clearable

                     style="width: 240px"

                     @keyup.enter="handleQuery"

                  />

                <el-input v-model="queryParams.userName" placeholder="请输入用户名称" clearable style="width: 240px" @keyup.enter="handleQuery" />

               </el-form-item>

               <el-form-item label="手机号码" prop="phonenumber">

                  <el-input

                     v-model="queryParams.phonenumber"

                     placeholder="请输入手机号码"

                     clearable

                     style="width: 240px"

                     @keyup.enter="handleQuery"

                  />

                <el-input v-model="queryParams.phonenumber" placeholder="请输入手机号码" clearable style="width: 240px" @keyup.enter="handleQuery" />

               </el-form-item>

               <el-form-item label="状态" prop="status">

                  <el-select

                     v-model="queryParams.status"

                     placeholder="用户状态"

                     clearable

                     style="width: 240px"

                  >

                     <el-option

                        v-for="dict in sys_normal_disable"

                        :key="dict.value"

                        :label="dict.label"

                        :value="dict.value"

                     />

                <el-select v-model="queryParams.status" placeholder="用户状态" clearable style="width: 240px">

                  <el-option v-for="dict in sys_normal_disable" :key="dict.value" :label="dict.label" :value="dict.value" />

                  </el-select>

               </el-form-item>

               <el-form-item label="创建时间" style="width: 308px;">

                  <el-date-picker

                     v-model="dateRange"

                     value-format="YYYY-MM-DD"

                     type="daterange"

                     range-separator="-"

                     start-placeholder="开始日期"

                     end-placeholder="结束日期"

                  ></el-date-picker>

              <el-form-item label="创建时间" style="width: 308px">

                <el-date-picker v-model="dateRange" value-format="YYYY-MM-DD" type="daterange" range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>

               </el-form-item>

               <el-form-item>

                  <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>

@@ -80,51 +39,19 @@


            <el-row :gutter="10" class="mb8">

               <el-col :span="1.5">

                  <el-button

                     type="primary"

                     plain

                     icon="Plus"

                     @click="handleAdd"

                     v-hasPermi="['system:user:add']"

                  >新增</el-button>

                <el-button type="primary" plain icon="Plus" @click="handleAdd" v-hasPermi="['system:user:add']">新增</el-button>

               </el-col>

               <el-col :span="1.5">

                  <el-button

                     type="success"

                     plain

                     icon="Edit"

                     :disabled="single"

                     @click="handleUpdate"

                     v-hasPermi="['system:user:edit']"

                  >修改</el-button>

                <el-button type="success" plain icon="Edit" :disabled="single" @click="handleUpdate" v-hasPermi="['system:user:edit']">修改</el-button>

               </el-col>

               <el-col :span="1.5">

                  <el-button

                     type="danger"

                     plain

                     icon="Delete"

                     :disabled="multiple"

                     @click="handleDelete"

                     v-hasPermi="['system:user:remove']"

                  >删除</el-button>

                <el-button type="danger" plain icon="Delete" :disabled="multiple" @click="handleDelete" v-hasPermi="['system:user:remove']">删除</el-button>

               </el-col>

               <el-col :span="1.5">

                  <el-button

                     type="info"

                     plain

                     icon="Upload"

                     @click="handleImport"

                     v-hasPermi="['system:user:import']"

                  >导入</el-button>

                <el-button type="info" plain icon="Upload" @click="handleImport" v-hasPermi="['system:user:import']">导入</el-button>

               </el-col>

               <el-col :span="1.5">

                  <el-button

                     type="warning"

                     plain

                     icon="Download"

                     @click="handleExport"

                     v-hasPermi="['system:user:export']"

                  >导出</el-button>

                <el-button type="warning" plain icon="Download" @click="handleExport" v-hasPermi="['system:user:export']">导出</el-button>

               </el-col>

               <right-toolbar v-model:showSearch="showSearch" @queryTable="getList" :columns="columns"></right-toolbar>

            </el-row>

@@ -168,14 +95,10 @@
                  </template>

               </el-table-column>

            </el-table>

            <pagination

               v-show="total > 0"

               :total="total"

               v-model:page="queryParams.pageNum"

               v-model:limit="queryParams.pageSize"

               @pagination="getList"

            />

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

         </el-col>

        </pane>

      </splitpanes>

      </el-row>



      <!-- 添加或修改用户配置对话框 -->

@@ -189,14 +112,7 @@
               </el-col>

               <el-col :span="12">

                  <el-form-item label="归属部门" prop="deptId">

                     <el-tree-select

                        v-model="form.deptId"

                        :data="deptOptions"

                        :props="{ value: 'id', label: 'label', children: 'children' }"

                        value-key="id"

                        placeholder="请选择归属部门"

                        check-strictly

                     />

              <el-tree-select v-model="form.deptId" :data="deptOptions" :props="{ value: 'id', label: 'label', children: 'children' }" value-key="id" placeholder="请选择归属部门" check-strictly />

                  </el-form-item>

               </el-col>

            </el-row>

@@ -228,23 +144,14 @@
               <el-col :span="12">

                  <el-form-item label="用户性别">

                     <el-select v-model="form.sex" placeholder="请选择">

                        <el-option

                           v-for="dict in sys_user_sex"

                           :key="dict.value"

                           :label="dict.label"

                           :value="dict.value"

                        ></el-option>

                <el-option v-for="dict in sys_user_sex" :key="dict.value" :label="dict.label" :value="dict.value"></el-option>

                     </el-select>

                  </el-form-item>

               </el-col>

               <el-col :span="12">

                  <el-form-item label="状态">

                     <el-radio-group v-model="form.status">

                        <el-radio

                           v-for="dict in sys_normal_disable"

                           :key="dict.value"

                           :value="dict.value"

                        >{{ dict.label }}</el-radio>

                <el-radio v-for="dict in sys_normal_disable" :key="dict.value" :value="dict.value">{{ dict.label }}</el-radio>

                     </el-radio-group>

                  </el-form-item>

               </el-col>

@@ -253,26 +160,14 @@
               <el-col :span="12">

                  <el-form-item label="岗位">

                     <el-select v-model="form.postIds" multiple placeholder="请选择">

                        <el-option

                           v-for="item in postOptions"

                           :key="item.postId"

                           :label="item.postName"

                           :value="item.postId"

                           :disabled="item.status == 1"

                        ></el-option>

                <el-option v-for="item in postOptions" :key="item.postId" :label="item.postName" :value="item.postId" :disabled="item.status == 1"></el-option>

                     </el-select>

                  </el-form-item>

               </el-col>

               <el-col :span="12">

                  <el-form-item label="角色">

                     <el-select v-model="form.roleIds" multiple placeholder="请选择">

                        <el-option

                           v-for="item in roleOptions"

                           :key="item.roleId"

                           :label="item.roleName"

                           :value="item.roleId"

                           :disabled="item.status == 1"

                        ></el-option>

                <el-option v-for="item in roleOptions" :key="item.roleId" :label="item.roleName" :value="item.roleId" :disabled="item.status == 1"></el-option>

                     </el-select>

                  </el-form-item>

               </el-col>

@@ -295,18 +190,7 @@


      <!-- 用户导入对话框 -->

      <el-dialog :title="upload.title" v-model="upload.open" width="400px" append-to-body>

         <el-upload

            ref="uploadRef"

            :limit="1"

            accept=".xlsx, .xls"

            :headers="upload.headers"

            :action="upload.url + '?updateSupport=' + upload.updateSupport"

            :disabled="upload.isUploading"

            :on-progress="handleFileUploadProgress"

            :on-success="handleFileSuccess"

            :auto-upload="false"

            drag

         >

      <el-upload ref="uploadRef" :limit="1" accept=".xlsx, .xls" :headers="upload.headers" :action="upload.url + '?updateSupport=' + upload.updateSupport" :disabled="upload.isUploading" :on-progress="handleFileUploadProgress" :on-success="handleFileSuccess" :auto-upload="false" drag>

            <el-icon class="el-icon--upload"><upload-filled /></el-icon>

            <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>

            <template #tip>

@@ -315,7 +199,7 @@
                     <el-checkbox v-model="upload.updateSupport" />是否更新已经存在的用户数据

                  </div>

                  <span>仅允许导入xls、xlsx格式文件。</span>

                  <el-link type="primary" :underline="false" style="font-size:12px;vertical-align: baseline;" @click="importTemplate">下载模板</el-link>

            <el-link type="primary" :underline="false" style="font-size: 12px; vertical-align: baseline" @click="importTemplate">下载模板</el-link>

               </div>

            </template>

         </el-upload>

@@ -332,6 +216,8 @@
<script setup name="User">

import { getToken } from "@/utils/auth";

import { changeUserStatus, listUser, resetUserPwd, delUser, getUser, updateUser, addUser, deptTreeSelect } from "@/api/system/user";

import { Splitpanes, Pane } from "splitpanes"

import "splitpanes/dist/splitpanes.css"



const router = useRouter();

const { proxy } = getCurrentInstance();