Browse Source

用户管理、角色页面样式

xusl 6 months ago
parent
commit
6e182ba836
2 changed files with 349 additions and 305 deletions
  1. 14 8
      cpp-ui/src/views/system/role/index.vue
  2. 335 297
      cpp-ui/src/views/system/user/index.vue

+ 14 - 8
cpp-ui/src/views/system/role/index.vue

@@ -1,5 +1,6 @@
 <template>
 <template>
   <div class="app-container">
   <div class="app-container">
+    <div class="dark-el-input dark-el-button">
     <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch">
     <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch">
       <el-form-item label="角色名称" prop="roleName">
       <el-form-item label="角色名称" prop="roleName">
         <el-input
         <el-input
@@ -25,6 +26,7 @@
           placeholder="角色状态"
           placeholder="角色状态"
           clearable
           clearable
           style="width: 240px"
           style="width: 240px"
+          popper-class="cpp-popper"
         >
         >
           <el-option
           <el-option
             v-for="dict in dict.type.sys_normal_disable"
             v-for="dict in dict.type.sys_normal_disable"
@@ -43,13 +45,15 @@
           range-separator="-"
           range-separator="-"
           start-placeholder="开始日期"
           start-placeholder="开始日期"
           end-placeholder="结束日期"
           end-placeholder="结束日期"
+          popper-class="cpp-popper"
         ></el-date-picker>
         ></el-date-picker>
       </el-form-item>
       </el-form-item>
       <el-form-item>
       <el-form-item>
-        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
-        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
+        <el-button type="primary" icon="el-icon-search" size="small" @click="handleQuery">搜索</el-button>
+        <el-button icon="el-icon-refresh" size="small" @click="resetQuery">重置</el-button>
       </el-form-item>
       </el-form-item>
     </el-form>
     </el-form>
+    </div>
 
 
     <el-row :gutter="10" class="mb8">
     <el-row :gutter="10" class="mb8">
       <el-col :span="1.5">
       <el-col :span="1.5">
@@ -97,7 +101,7 @@
       <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
       <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
     </el-row>
     </el-row>
 
 
-    <el-table v-loading="loading" :data="roleList" @selection-change="handleSelectionChange">
+    <el-table v-loading="loading" :data="roleList" @selection-change="handleSelectionChange" element-loading-background="rgba(8, 61, 92,1)">
       <el-table-column type="selection" width="55" align="center" />
       <el-table-column type="selection" width="55" align="center" />
       <el-table-column label="角色编号" prop="roleId" width="120" />
       <el-table-column label="角色编号" prop="roleId" width="120" />
       <el-table-column label="角色名称" prop="roleName" :show-overflow-tooltip="true" width="150" />
       <el-table-column label="角色名称" prop="roleName" :show-overflow-tooltip="true" width="150" />
@@ -157,6 +161,7 @@
 
 
     <!-- 添加或修改角色配置对话框 -->
     <!-- 添加或修改角色配置对话框 -->
     <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
     <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
+      <div class="dark-el-dialog">
       <el-form ref="form" :model="form" :rules="rules" label-width="100px">
       <el-form ref="form" :model="form" :rules="rules" label-width="100px">
         <el-form-item label="角色名称" prop="roleName">
         <el-form-item label="角色名称" prop="roleName">
           <el-input v-model="form.roleName" placeholder="请输入角色名称" />
           <el-input v-model="form.roleName" placeholder="请输入角色名称" />
@@ -183,9 +188,9 @@
           </el-radio-group>
           </el-radio-group>
         </el-form-item>
         </el-form-item>
         <el-form-item label="菜单权限">
         <el-form-item label="菜单权限">
-          <el-checkbox v-model="menuExpand" @change="handleCheckedTreeExpand($event, 'menu')">展开/折叠</el-checkbox>
-          <el-checkbox v-model="menuNodeAll" @change="handleCheckedTreeNodeAll($event, 'menu')">全选/全不选</el-checkbox>
-          <el-checkbox v-model="form.menuCheckStrictly" @change="handleCheckedTreeConnect($event, 'menu')">父子联动</el-checkbox>
+          <el-checkbox v-model="menuExpand" @change="handleCheckedTreeExpand($event, 'menu')" style="color: white;">展开/折叠</el-checkbox>
+          <el-checkbox v-model="menuNodeAll" @change="handleCheckedTreeNodeAll($event, 'menu')" style="color: white;">全选/全不选</el-checkbox>
+          <el-checkbox v-model="form.menuCheckStrictly" @change="handleCheckedTreeConnect($event, 'menu')" style="color: white;">父子联动</el-checkbox>
           <el-tree
           <el-tree
             class="tree-border"
             class="tree-border"
             :data="menuOptions"
             :data="menuOptions"
@@ -201,10 +206,11 @@
           <el-input v-model="form.remark" type="textarea" placeholder="请输入内容"></el-input>
           <el-input v-model="form.remark" type="textarea" placeholder="请输入内容"></el-input>
         </el-form-item>
         </el-form-item>
       </el-form>
       </el-form>
-      <div slot="footer" class="dialog-footer">
+      <div slot="footer" class="dialog-footer flex" style="justify-content: end">
         <el-button type="primary" @click="submitForm">确 定</el-button>
         <el-button type="primary" @click="submitForm">确 定</el-button>
         <el-button @click="cancel">取 消</el-button>
         <el-button @click="cancel">取 消</el-button>
       </div>
       </div>
+      </div>
     </el-dialog>
     </el-dialog>
 
 
     <!-- 分配角色数据权限对话框 -->
     <!-- 分配角色数据权限对话框 -->
@@ -602,4 +608,4 @@ export default {
     }
     }
   }
   }
 };
 };
-</script>
+</script>

+ 335 - 297
cpp-ui/src/views/system/user/index.vue

@@ -1,155 +1,171 @@
 <template>
 <template>
   <div class="app-container">
   <div class="app-container">
     <el-row :gutter="20">
     <el-row :gutter="20">
-      <!--部门数据-->
-      <el-col :span="4" :xs="24">
-        <div class="head-container">
-          <el-input
-            v-model="deptName"
-            placeholder="请输入部门名称"
-            clearable
-            size="small"
-            prefix-icon="el-icon-search"
-            style="margin-bottom: 20px"
-          />
-        </div>
-        <div class="head-container">
-          <el-tree
-            :data="deptOptions"
-            :props="defaultProps"
-            :expand-on-click-node="false"
-            :filter-node-method="filterNode"
-            ref="tree"
-            node-key="id"
-            default-expand-all
-            highlight-current
-            @node-click="handleNodeClick"
-          />
-        </div>
-      </el-col>
-      <!--用户数据-->
-      <el-col :span="20" :xs="24">
-        <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
-          <el-form-item label="用户名称" prop="userName">
+      <div class="dark-el-input dark-el-button">
+        <!--部门数据-->
+        <el-col :span="4" :xs="24">
+          <div class="head-container">
             <el-input
             <el-input
-              v-model="queryParams.userName"
-              placeholder="请输入用户名称"
-              clearable
-              style="width: 240px"
-              @keyup.enter.native="handleQuery"
+                v-model="deptName"
+                placeholder="请输入部门名称"
+                clearable
+                size="small"
+                prefix-icon="el-icon-search"
+                style="margin-bottom: 20px"
             />
             />
-          </el-form-item>
-          <el-form-item label="手机号码" prop="phonenumber">
-            <el-input
-              v-model="queryParams.phonenumber"
-              placeholder="请输入手机号码"
-              clearable
-              style="width: 240px"
-              @keyup.enter.native="handleQuery"
+          </div>
+          <div class="head-container">
+            <el-tree
+                :data="deptOptions"
+                :props="defaultProps"
+                :expand-on-click-node="false"
+                :filter-node-method="filterNode"
+                ref="tree"
+                node-key="id"
+                default-expand-all
+                highlight-current
+                @node-click="handleNodeClick"
             />
             />
-          </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 dict.type.sys_normal_disable"
-                :key="dict.value"
-                :label="dict.label"
-                :value="dict.value"
+          </div>
+        </el-col>
+      </div>
+      <!--用户数据-->
+      <el-col :span="20" :xs="24">
+        <div class="dark-el-input dark-el-button">
+          <el-form :model="queryParams" ref="queryForm" size="small" :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.native="handleQuery"
               />
               />
-            </el-select>
-          </el-form-item>
-          <el-form-item label="创建时间">
-            <el-date-picker
-              v-model="dateRange"
-              style="width: 240px"
-              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="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
-            <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
-          </el-form-item>
-        </el-form>
-
+            </el-form-item>
+            <el-form-item label="手机号码" prop="phonenumber">
+              <el-input
+                  v-model="queryParams.phonenumber"
+                  placeholder="请输入手机号码"
+                  clearable
+                  style="width: 240px"
+                  @keyup.enter.native="handleQuery"
+              />
+            </el-form-item>
+            <el-form-item label="状态" prop="status">
+              <el-select
+                  v-model="queryParams.status"
+                  placeholder="用户状态"
+                  clearable
+                  style="width: 240px"
+                  popper-class="cpp-popper"
+              >
+                <el-option
+                    v-for="dict in dict.type.sys_normal_disable"
+                    :key="dict.value"
+                    :label="dict.label"
+                    :value="dict.value"
+                />
+              </el-select>
+            </el-form-item>
+            <el-form-item label="创建时间">
+              <el-date-picker
+                  v-model="dateRange"
+                  style="width: 240px"
+                  value-format="yyyy-MM-dd"
+                  type="daterange"
+                  range-separator="-"
+                  start-placeholder="开始日期"
+                  end-placeholder="结束日期"
+                  popper-class="cpp-popper"
+              ></el-date-picker>
+            </el-form-item>
+            <el-form-item>
+              <el-button type="primary" icon="el-icon-search" size="small" @click="handleQuery">查询</el-button>
+              <el-button icon="el-icon-refresh" size="small" @click="resetQuery">重置</el-button>
+            </el-form-item>
+          </el-form>
+        </div>
         <el-row :gutter="10" class="mb8">
         <el-row :gutter="10" class="mb8">
           <el-col :span="1.5">
           <el-col :span="1.5">
             <el-button
             <el-button
-              type="primary"
-              plain
-              icon="el-icon-plus"
-              size="mini"
-              @click="handleAdd"
-              v-hasPermi="['system:user:add']"
-            >新增</el-button>
+                type="primary"
+                plain
+                icon="el-icon-plus"
+                size="mini"
+                @click="handleAdd"
+                v-hasPermi="['system:user:add']"
+            >新增
+            </el-button>
           </el-col>
           </el-col>
           <el-col :span="1.5">
           <el-col :span="1.5">
             <el-button
             <el-button
-              type="success"
-              plain
-              icon="el-icon-edit"
-              size="mini"
-              :disabled="single"
-              @click="handleUpdate"
-              v-hasPermi="['system:user:edit']"
-            >修改</el-button>
+                type="success"
+                plain
+                icon="el-icon-edit"
+                size="mini"
+                :disabled="single"
+                @click="handleUpdate"
+                v-hasPermi="['system:user:edit']"
+            >修改
+            </el-button>
           </el-col>
           </el-col>
           <el-col :span="1.5">
           <el-col :span="1.5">
             <el-button
             <el-button
-              type="danger"
-              plain
-              icon="el-icon-delete"
-              size="mini"
-              :disabled="multiple"
-              @click="handleDelete"
-              v-hasPermi="['system:user:remove']"
-            >删除</el-button>
+                type="danger"
+                plain
+                icon="el-icon-delete"
+                size="mini"
+                :disabled="multiple"
+                @click="handleDelete"
+                v-hasPermi="['system:user:remove']"
+            >删除
+            </el-button>
           </el-col>
           </el-col>
           <el-col :span="1.5">
           <el-col :span="1.5">
             <el-button
             <el-button
-              type="info"
-              plain
-              icon="el-icon-upload2"
-              size="mini"
-              @click="handleImport"
-              v-hasPermi="['system:user:import']"
-            >导入</el-button>
+                type="info"
+                plain
+                icon="el-icon-upload2"
+                size="mini"
+                @click="handleImport"
+                v-hasPermi="['system:user:import']"
+            >导入
+            </el-button>
           </el-col>
           </el-col>
           <el-col :span="1.5">
           <el-col :span="1.5">
             <el-button
             <el-button
-              type="warning"
-              plain
-              icon="el-icon-download"
-              size="mini"
-              @click="handleExport"
-              v-hasPermi="['system:user:export']"
-            >导出</el-button>
+                type="warning"
+                plain
+                icon="el-icon-download"
+                size="mini"
+                @click="handleExport"
+                v-hasPermi="['system:user:export']"
+            >导出
+            </el-button>
           </el-col>
           </el-col>
           <right-toolbar :showSearch.sync="showSearch" @queryTable="getList" :columns="columns"></right-toolbar>
           <right-toolbar :showSearch.sync="showSearch" @queryTable="getList" :columns="columns"></right-toolbar>
         </el-row>
         </el-row>
 
 
-        <el-table v-loading="loading" :data="userList" @selection-change="handleSelectionChange">
-          <el-table-column type="selection" width="50" align="center" />
-          <el-table-column label="用户编号" align="center" key="userId" prop="userId" v-if="columns[0].visible" />
-          <el-table-column label="用户名称" align="center" key="userName" prop="userName" v-if="columns[1].visible" :show-overflow-tooltip="true" />
-          <el-table-column label="用户昵称" align="center" key="nickName" prop="nickName" v-if="columns[2].visible" :show-overflow-tooltip="true" />
-          <el-table-column label="部门" align="center" key="deptName" prop="dept.deptName" v-if="columns[3].visible" :show-overflow-tooltip="true" />
-          <el-table-column label="手机号码" align="center" key="phonenumber" prop="phonenumber" v-if="columns[4].visible" width="120" />
+        <el-table v-loading="loading" :data="userList" @selection-change="handleSelectionChange"
+                  element-loading-background="rgba(8, 61, 92,1)">
+          <el-table-column type="selection" width="50" align="center"/>
+          <el-table-column label="用户编号" align="center" key="userId" prop="userId" v-if="columns[0].visible"/>
+          <el-table-column label="用户名称" align="center" key="userName" prop="userName" v-if="columns[1].visible"
+                           :show-overflow-tooltip="true"/>
+          <el-table-column label="用户昵称" align="center" key="nickName" prop="nickName" v-if="columns[2].visible"
+                           :show-overflow-tooltip="true"/>
+          <el-table-column label="部门" align="center" key="deptName" prop="dept.deptName" v-if="columns[3].visible"
+                           :show-overflow-tooltip="true"/>
+          <el-table-column label="手机号码" align="center" key="phonenumber" prop="phonenumber"
+                           v-if="columns[4].visible" width="120"/>
           <el-table-column label="状态" align="center" key="status" v-if="columns[5].visible">
           <el-table-column label="状态" align="center" key="status" v-if="columns[5].visible">
             <template slot-scope="scope">
             <template slot-scope="scope">
               <el-switch
               <el-switch
-                v-model="scope.row.status"
-                active-value="0"
-                inactive-value="1"
-                @change="handleStatusChange(scope.row)"
+                  v-model="scope.row.status"
+                  active-value="0"
+                  inactive-value="1"
+                  @change="handleStatusChange(scope.row)"
               ></el-switch>
               ></el-switch>
             </template>
             </template>
           </el-table-column>
           </el-table-column>
@@ -159,33 +175,38 @@
             </template>
             </template>
           </el-table-column>
           </el-table-column>
           <el-table-column
           <el-table-column
-            label="操作"
-            align="center"
-            width="160"
-            class-name="small-padding fixed-width"
+              label="操作"
+              align="center"
+              width="160"
+              class-name="small-padding fixed-width"
           >
           >
             <template slot-scope="scope" v-if="scope.row.userId !== 1">
             <template slot-scope="scope" v-if="scope.row.userId !== 1">
               <el-button
               <el-button
-                size="mini"
-                type="text"
-                icon="el-icon-edit"
-                @click="handleUpdate(scope.row)"
-                v-hasPermi="['system:user:edit']"
-              >修改</el-button>
+                  size="mini"
+                  type="text"
+                  icon="el-icon-edit"
+                  @click="handleUpdate(scope.row)"
+                  v-hasPermi="['system:user:edit']"
+              >修改
+              </el-button>
               <el-button
               <el-button
-                size="mini"
-                type="text"
-                icon="el-icon-delete"
-                @click="handleDelete(scope.row)"
-                v-hasPermi="['system:user:remove']"
-              >删除</el-button>
-              <el-dropdown size="mini" @command="(command) => handleCommand(command, scope.row)" v-hasPermi="['system:user:resetPwd', 'system:user:edit']">
+                  size="mini"
+                  type="text"
+                  icon="el-icon-delete"
+                  @click="handleDelete(scope.row)"
+                  v-hasPermi="['system:user:remove']"
+              >删除
+              </el-button>
+              <el-dropdown size="mini" @command="(command) => handleCommand(command, scope.row)"
+                           v-hasPermi="['system:user:resetPwd', 'system:user:edit']">
                 <el-button size="mini" type="text" icon="el-icon-d-arrow-right">更多</el-button>
                 <el-button size="mini" type="text" icon="el-icon-d-arrow-right">更多</el-button>
                 <el-dropdown-menu slot="dropdown">
                 <el-dropdown-menu slot="dropdown">
                   <el-dropdown-item command="handleResetPwd" icon="el-icon-key"
                   <el-dropdown-item command="handleResetPwd" icon="el-icon-key"
-                    v-hasPermi="['system:user:resetPwd']">重置密码</el-dropdown-item>
+                                    v-hasPermi="['system:user:resetPwd']">重置密码
+                  </el-dropdown-item>
                   <el-dropdown-item command="handleAuthRole" icon="el-icon-circle-check"
                   <el-dropdown-item command="handleAuthRole" icon="el-icon-circle-check"
-                    v-hasPermi="['system:user:edit']">分配角色</el-dropdown-item>
+                                    v-hasPermi="['system:user:edit']">分配角色
+                  </el-dropdown-item>
                 </el-dropdown-menu>
                 </el-dropdown-menu>
               </el-dropdown>
               </el-dropdown>
             </template>
             </template>
@@ -193,143 +214,150 @@
         </el-table>
         </el-table>
 
 
         <pagination
         <pagination
-          v-show="total>0"
-          :total="total"
-          :page.sync="queryParams.pageNum"
-          :limit.sync="queryParams.pageSize"
-          @pagination="getList"
+            v-show="total>0"
+            :total="total"
+            :page.sync="queryParams.pageNum"
+            :limit.sync="queryParams.pageSize"
+            @pagination="getList"
         />
         />
       </el-col>
       </el-col>
     </el-row>
     </el-row>
-
     <!-- 添加或修改用户配置对话框 -->
     <!-- 添加或修改用户配置对话框 -->
     <el-dialog :title="title" :visible.sync="open" width="600px" append-to-body>
     <el-dialog :title="title" :visible.sync="open" width="600px" append-to-body>
-      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
-        <el-row>
-          <el-col :span="12">
-            <el-form-item label="用户昵称" prop="nickName">
-              <el-input v-model="form.nickName" placeholder="请输入用户昵称" maxlength="30" />
-            </el-form-item>
-          </el-col>
-          <el-col :span="12">
-            <el-form-item label="归属部门" prop="deptId">
-              <treeselect v-model="form.deptId" :options="deptOptions" :show-count="true" placeholder="请选择归属部门" />
-            </el-form-item>
-          </el-col>
-        </el-row>
-        <el-row>
-          <el-col :span="12">
-            <el-form-item label="手机号码" prop="phonenumber">
-              <el-input v-model="form.phonenumber" placeholder="请输入手机号码" maxlength="11" />
-            </el-form-item>
-          </el-col>
-          <el-col :span="12">
-            <el-form-item label="邮箱" prop="email">
-              <el-input v-model="form.email" placeholder="请输入邮箱" maxlength="50" />
-            </el-form-item>
-          </el-col>
-        </el-row>
-        <el-row>
-          <el-col :span="12">
-            <el-form-item v-if="form.userId == undefined" label="用户名称" prop="userName">
-              <el-input v-model="form.userName" placeholder="请输入用户名称" maxlength="30" />
-            </el-form-item>
-          </el-col>
-          <el-col :span="12">
-            <el-form-item v-if="form.userId == undefined" label="用户密码" prop="password">
-              <el-input v-model="form.password" placeholder="请输入用户密码" type="password" maxlength="20" show-password/>
-            </el-form-item>
-          </el-col>
-        </el-row>
-        <el-row>
-          <el-col :span="12">
-            <el-form-item label="用户性别">
-              <el-select v-model="form.sex" placeholder="请选择性别">
-                <el-option
-                  v-for="dict in dict.type.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 dict.type.sys_normal_disable"
-                  :key="dict.value"
-                  :label="dict.value"
-                >{{dict.label}}</el-radio>
-              </el-radio-group>
-            </el-form-item>
-          </el-col>
-        </el-row>
-        <el-row>
-          <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-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-select>
-            </el-form-item>
-          </el-col>
-        </el-row>
-        <el-row>
-          <el-col :span="24">
-            <el-form-item label="备注">
-              <el-input v-model="form.remark" type="textarea" placeholder="请输入内容"></el-input>
-            </el-form-item>
-          </el-col>
-        </el-row>
-      </el-form>
-      <div slot="footer" class="dialog-footer">
-        <el-button type="primary" @click="submitForm">确 定</el-button>
-        <el-button @click="cancel">取 消</el-button>
+      <div class="dark-el-dialog">
+        <el-form ref="form" :model="form" :rules="rules" label-width="80px">
+          <el-row>
+            <el-col :span="12">
+              <el-form-item label="用户昵称" prop="nickName">
+                <el-input v-model="form.nickName" placeholder="请输入用户昵称" maxlength="30"/>
+              </el-form-item>
+            </el-col>
+            <el-col :span="12">
+              <el-form-item label="归属部门" prop="deptId">
+                <treeselect v-model="form.deptId" :options="deptOptions" :show-count="true"
+                            placeholder="请选择归属部门"/>
+              </el-form-item>
+            </el-col>
+          </el-row>
+          <el-row>
+            <el-col :span="12">
+              <el-form-item label="手机号码" prop="phonenumber">
+                <el-input v-model="form.phonenumber" placeholder="请输入手机号码" maxlength="11"/>
+              </el-form-item>
+            </el-col>
+            <el-col :span="12">
+              <el-form-item label="邮箱" prop="email">
+                <el-input v-model="form.email" placeholder="请输入邮箱" maxlength="50"/>
+              </el-form-item>
+            </el-col>
+          </el-row>
+          <el-row>
+            <el-col :span="12">
+              <el-form-item v-if="form.userId == undefined" label="用户名称" prop="userName">
+                <el-input v-model="form.userName" placeholder="请输入用户名称" maxlength="30"/>
+              </el-form-item>
+            </el-col>
+            <el-col :span="12">
+              <el-form-item v-if="form.userId == undefined" label="用户密码" prop="password">
+                <el-input v-model="form.password" placeholder="请输入用户密码" type="password" maxlength="20"
+                          show-password/>
+              </el-form-item>
+            </el-col>
+          </el-row>
+          <el-row>
+            <el-col :span="12">
+              <el-form-item label="用户性别">
+                <el-select v-model="form.sex" placeholder="请选择性别" popper-class="cpp-popper">
+                  <el-option
+                      v-for="dict in dict.type.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 dict.type.sys_normal_disable"
+                      :key="dict.value"
+                      :label="dict.value"
+                  >{{ dict.label }}
+                  </el-radio>
+                </el-radio-group>
+              </el-form-item>
+            </el-col>
+          </el-row>
+          <el-row>
+            <el-col :span="12">
+              <el-form-item label="岗位">
+                <el-select v-model="form.postIds" multiple placeholder="请选择岗位" popper-class="cpp-popper">
+                  <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="请选择角色" popper-class="cpp-popper">
+                  <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>
+          </el-row>
+          <el-row>
+            <el-col :span="24">
+              <el-form-item label="备注">
+                <el-input v-model="form.remark" type="textarea" placeholder="请输入内容"></el-input>
+              </el-form-item>
+            </el-col>
+          </el-row>
+        </el-form>
+        <div slot="footer" class="dialog-footer flex" style="justify-content: end">
+          <el-button type="primary" @click="submitForm">确 定</el-button>
+          <el-button @click="cancel">取 消</el-button>
+        </div>
       </div>
       </div>
     </el-dialog>
     </el-dialog>
 
 
     <!-- 用户导入对话框 -->
     <!-- 用户导入对话框 -->
     <el-dialog :title="upload.title" :visible.sync="upload.open" width="400px" append-to-body>
     <el-dialog :title="upload.title" :visible.sync="upload.open" width="400px" append-to-body>
       <el-upload
       <el-upload
-        ref="upload"
-        :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
+          ref="upload"
+          :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
       >
       >
         <i class="el-icon-upload"></i>
         <i class="el-icon-upload"></i>
         <div class="el-upload__text">将文件拖到此处,或<em>点击上传</em></div>
         <div class="el-upload__text">将文件拖到此处,或<em>点击上传</em></div>
         <div class="el-upload__tip text-center" slot="tip">
         <div class="el-upload__tip text-center" slot="tip">
           <div class="el-upload__tip" slot="tip">
           <div class="el-upload__tip" slot="tip">
-            <el-checkbox v-model="upload.updateSupport" /> 是否更新已经存在的用户数据
+            <el-checkbox v-model="upload.updateSupport"/>
+            是否更新已经存在的用户数据
           </div>
           </div>
           <span>仅允许导入xls、xlsx格式文件。</span>
           <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>
         </div>
       </el-upload>
       </el-upload>
       <div slot="footer" class="dialog-footer">
       <div slot="footer" class="dialog-footer">
@@ -341,15 +369,24 @@
 </template>
 </template>
 
 
 <script>
 <script>
-import { listUser, getUser, delUser, addUser, updateUser, resetUserPwd, changeUserStatus, deptTreeSelect } from "@/api/system/user";
-import { getToken } from "@/utils/auth";
+import {
+  listUser,
+  getUser,
+  delUser,
+  addUser,
+  updateUser,
+  resetUserPwd,
+  changeUserStatus,
+  deptTreeSelect
+} from "@/api/system/user";
+import {getToken} from "@/utils/auth";
 import Treeselect from "@riophae/vue-treeselect";
 import Treeselect from "@riophae/vue-treeselect";
 import "@riophae/vue-treeselect/dist/vue-treeselect.css";
 import "@riophae/vue-treeselect/dist/vue-treeselect.css";
 
 
 export default {
 export default {
   name: "User",
   name: "User",
   dicts: ['sys_normal_disable', 'sys_user_sex'],
   dicts: ['sys_normal_disable', 'sys_user_sex'],
-  components: { Treeselect },
+  components: {Treeselect},
   data() {
   data() {
     return {
     return {
       // 遮罩层
       // 遮罩层
@@ -399,7 +436,7 @@ export default {
         // 是否更新已经存在的用户数据
         // 是否更新已经存在的用户数据
         updateSupport: 0,
         updateSupport: 0,
         // 设置上传的请求头部
         // 设置上传的请求头部
-        headers: { Authorization: "Bearer " + getToken() },
+        headers: {Authorization: "Bearer " + getToken()},
         // 上传的地址
         // 上传的地址
         url: process.env.VUE_APP_BASE_API + "/system/user/importData"
         url: process.env.VUE_APP_BASE_API + "/system/user/importData"
       },
       },
@@ -414,27 +451,27 @@ export default {
       },
       },
       // 列信息
       // 列信息
       columns: [
       columns: [
-        { key: 0, label: `用户编号`, visible: true },
-        { key: 1, label: `用户名称`, visible: true },
-        { key: 2, label: `用户昵称`, visible: true },
-        { key: 3, label: `部门`, visible: true },
-        { key: 4, label: `手机号码`, visible: true },
-        { key: 5, label: `状态`, visible: true },
-        { key: 6, label: `创建时间`, visible: true }
+        {key: 0, label: `用户编号`, visible: true},
+        {key: 1, label: `用户名称`, visible: true},
+        {key: 2, label: `用户昵称`, visible: true},
+        {key: 3, label: `部门`, visible: true},
+        {key: 4, label: `手机号码`, visible: true},
+        {key: 5, label: `状态`, visible: true},
+        {key: 6, label: `创建时间`, visible: true}
       ],
       ],
       // 表单校验
       // 表单校验
       rules: {
       rules: {
         userName: [
         userName: [
-          { required: true, message: "用户名称不能为空", trigger: "blur" },
-          { min: 2, max: 20, message: '用户名称长度必须介于 2 和 20 之间', trigger: 'blur' }
+          {required: true, message: "用户名称不能为空", trigger: "blur"},
+          {min: 2, max: 20, message: '用户名称长度必须介于 2 和 20 之间', trigger: 'blur'}
         ],
         ],
         nickName: [
         nickName: [
-          { required: true, message: "用户昵称不能为空", trigger: "blur" }
+          {required: true, message: "用户昵称不能为空", trigger: "blur"}
         ],
         ],
         password: [
         password: [
-          { required: true, message: "用户密码不能为空", trigger: "blur" },
-          { min: 5, max: 20, message: '用户密码长度必须介于 5 和 20 之间', trigger: 'blur' },
-          { pattern: /^[^<>"'|\\]+$/, message: "不能包含非法字符:< > \" ' \\\ |", trigger: "blur" }
+          {required: true, message: "用户密码不能为空", trigger: "blur"},
+          {min: 5, max: 20, message: '用户密码长度必须介于 5 和 20 之间', trigger: 'blur'},
+          {pattern: /^[^<>"'|\\]+$/, message: "不能包含非法字符:< > \" ' \\\ |", trigger: "blur"}
         ],
         ],
         email: [
         email: [
           {
           {
@@ -471,10 +508,10 @@ export default {
     getList() {
     getList() {
       this.loading = true;
       this.loading = true;
       listUser(this.addDateRange(this.queryParams, this.dateRange)).then(response => {
       listUser(this.addDateRange(this.queryParams, this.dateRange)).then(response => {
-          this.userList = response.rows;
-          this.total = response.total;
-          this.loading = false;
-        }
+            this.userList = response.rows;
+            this.total = response.total;
+            this.loading = false;
+          }
       );
       );
     },
     },
     /** 查询部门下拉树结构 */
     /** 查询部门下拉树结构 */
@@ -496,11 +533,11 @@ export default {
     // 用户状态修改
     // 用户状态修改
     handleStatusChange(row) {
     handleStatusChange(row) {
       let text = row.status === "0" ? "启用" : "停用";
       let text = row.status === "0" ? "启用" : "停用";
-      this.$modal.confirm('确认要"' + text + '""' + row.userName + '"用户吗?').then(function() {
+      this.$modal.confirm('确认要"' + text + '""' + row.userName + '"用户吗?').then(function () {
         return changeUserStatus(row.userId, row.status);
         return changeUserStatus(row.userId, row.status);
       }).then(() => {
       }).then(() => {
         this.$modal.msgSuccess(text + "成功");
         this.$modal.msgSuccess(text + "成功");
-      }).catch(function() {
+      }).catch(function () {
         row.status = row.status === "0" ? "1" : "0";
         row.status = row.status === "0" ? "1" : "0";
       });
       });
     },
     },
@@ -598,19 +635,20 @@ export default {
             return "不能包含非法字符:< > \" ' \\\ |"
             return "不能包含非法字符:< > \" ' \\\ |"
           }
           }
         },
         },
-      }).then(({ value }) => {
-          resetUserPwd(row.userId, value).then(response => {
-            this.$modal.msgSuccess("修改成功,新密码是:" + value);
-          });
-        }).catch(() => {});
+      }).then(({value}) => {
+        resetUserPwd(row.userId, value).then(response => {
+          this.$modal.msgSuccess("修改成功,新密码是:" + value);
+        });
+      }).catch(() => {
+      });
     },
     },
     /** 分配角色操作 */
     /** 分配角色操作 */
-    handleAuthRole: function(row) {
+    handleAuthRole: function (row) {
       const userId = row.userId;
       const userId = row.userId;
       this.$router.push("/system/user-auth/role/" + userId);
       this.$router.push("/system/user-auth/role/" + userId);
     },
     },
     /** 提交按钮 */
     /** 提交按钮 */
-    submitForm: function() {
+    submitForm: function () {
       this.$refs["form"].validate(valid => {
       this.$refs["form"].validate(valid => {
         if (valid) {
         if (valid) {
           if (this.form.userId != undefined) {
           if (this.form.userId != undefined) {
@@ -632,12 +670,13 @@ export default {
     /** 删除按钮操作 */
     /** 删除按钮操作 */
     handleDelete(row) {
     handleDelete(row) {
       const userIds = row.userId || this.ids;
       const userIds = row.userId || this.ids;
-      this.$modal.confirm('是否确认删除用户编号为"' + userIds + '"的数据项?').then(function() {
+      this.$modal.confirm('是否确认删除用户编号为"' + userIds + '"的数据项?').then(function () {
         return delUser(userIds);
         return delUser(userIds);
       }).then(() => {
       }).then(() => {
         this.getList();
         this.getList();
         this.$modal.msgSuccess("删除成功");
         this.$modal.msgSuccess("删除成功");
-      }).catch(() => {});
+      }).catch(() => {
+      });
     },
     },
     /** 导出按钮操作 */
     /** 导出按钮操作 */
     handleExport() {
     handleExport() {
@@ -652,8 +691,7 @@ export default {
     },
     },
     /** 下载模板操作 */
     /** 下载模板操作 */
     importTemplate() {
     importTemplate() {
-      this.download('system/user/importTemplate', {
-      }, `user_template_${new Date().getTime()}.xlsx`)
+      this.download('system/user/importTemplate', {}, `user_template_${new Date().getTime()}.xlsx`)
     },
     },
     // 文件上传中处理
     // 文件上传中处理
     handleFileUploadProgress(event, file, fileList) {
     handleFileUploadProgress(event, file, fileList) {
@@ -664,7 +702,7 @@ export default {
       this.upload.open = false;
       this.upload.open = false;
       this.upload.isUploading = false;
       this.upload.isUploading = false;
       this.$refs.upload.clearFiles();
       this.$refs.upload.clearFiles();
-      this.$alert("<div style='overflow: auto;overflow-x: hidden;max-height: 70vh;padding: 10px 20px 0;'>" + response.msg + "</div>", "导入结果", { dangerouslyUseHTMLString: true });
+      this.$alert("<div style='overflow: auto;overflow-x: hidden;max-height: 70vh;padding: 10px 20px 0;'>" + response.msg + "</div>", "导入结果", {dangerouslyUseHTMLString: true});
       this.getList();
       this.getList();
     },
     },
     // 提交上传文件
     // 提交上传文件
@@ -673,4 +711,4 @@ export default {
     }
     }
   }
   }
 };
 };
-</script>
+</script>