Эх сурвалжийг харах

新增了左边树可以拖拽自动加宽宽度

coys 2 жил өмнө
parent
commit
70d146851f

+ 3 - 3
.env.development

@@ -6,14 +6,14 @@ ENV = 'development'
 
 # 开发环境
 #测试地址
-#VUE_APP_BASE_API = 'http://10.87.10.91:8080'
+VUE_APP_BASE_API = 'http://10.87.10.91:8080'
 #罗俊
-#VUE_APP_BASE_API = 'http://10.87.10.49:8080'
+VUE_APP_BASE_API = 'http://10.87.10.49:8080'
 #罗伟
 # VUE_APP_BASE_API = 'http://10.87.10.47:8080'
 #高雄
 #VUE_APP_BASE_API = 'http://10.87.11.94:8080'
-VUE_APP_BASE_API = 'http://localhost:8080'
+#VUE_APP_BASE_API = 'http://localhost:8080'
 # 路由懒加载
 VUE_CLI_BABEL_TRANSPILE_MODULES = true
 

+ 82 - 0
src/components/layoutContainer/index.vue

@@ -0,0 +1,82 @@
+<template>
+  <div>
+    <div class="big_box">
+      <div class="leftBar">
+        <slot name="leftBar"></slot>
+      </div>
+      <div class="dragonet" v-move></div>
+      <div class="rightBar">
+        <slot name="rightBar"></slot>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  name: "SocWebIndex",
+
+  data() {
+    return {
+        leftWith:0
+    };
+  },
+  directives: {
+    move(el, bindings, that) {
+       
+      that = that.context;
+    
+
+      el.onmousedown = function (e) {
+        var init = e.clientX;
+
+        var parent = document.querySelector(".leftBar");
+        // var searchInput = document.querySelector(".input-with-select");
+        // var parentelement = document.querySelector("#form");
+        // var formBox = document.querySelector(".formBox");
+        var initWidth = parent.offsetWidth;
+        
+
+        document.onmousemove = function (e) {
+            var end = e.clientX;
+           
+          if (end > that.leftWith) {
+              var newWidth = end - init + initWidth;
+              parent.style.width = newWidth + "px";
+              console.log(parent);
+          
+          } else {
+            end = that.leftWith + "px";
+            parent.style.width = that.leftWith + "px";
+           
+          }
+        };
+        document.onmouseup = function () {
+          document.onmousemove = document.onmouseup = null;
+        };
+      };
+    },
+  },
+  mounted() {},
+
+  methods: {},
+};
+</script>
+<style lang="scss" scoped>
+.big_box {
+  width: 100%;
+  display: flex;
+  .leftBar {
+    min-width: 200px;
+  }
+  .rightBar {
+    width: 85%;
+  }
+  .dragonet {
+    width: 10px;
+    min-width: 10px;
+    cursor: col-resize;
+    background-color: #fff;
+    z-index: 5;
+  }
+}
+</style>

+ 3 - 0
src/main.js

@@ -49,6 +49,8 @@ import DictData from '@/components/DictData'
 import TreeSelect from "@riophae/vue-treeselect";
 // elementui Dialog组件
 import DialogCom from '@/components/elDialog/dialog.vue'
+//布局容器
+import layoutCom from '@/components/layoutContainer/index.vue'
 // 全局方法挂载
 Vue.prototype.getDicts = getDicts
 //根据参数键名查询参数值
@@ -79,6 +81,7 @@ Vue.component('ImagePreview', ImagePreview)
 Vue.component('ImageListPreview', ImageListPreview)
 Vue.component('TreeSelect', TreeSelect)
 Vue.component('DialogCom', DialogCom)
+Vue.component('layoutCom', layoutCom)
 
 Vue.use(directive)
 Vue.use(plugins)

+ 485 - 216
src/views/system/user/index.vue

@@ -1,47 +1,90 @@
 <template>
   <div class="app-container">
-    <el-row :gutter="20">
-      <!--机构数据-->
-      <el-col :span="4" :xs="24">
-        <org-tree v-model="queryParams.orgId" @defaultKey="getDefaultKey" @checkChange="checkChange"
-          @click="clickTreeNode"></org-tree>
-      </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">
-            <el-input v-model="queryParams.username" placeholder="请输入用户名称" clearable style="width: 240px"
-              @keyup.enter.native="handleQuery" />
-          </el-form-item>
-          <el-form-item label="手机号码" prop="phone">
-            <el-input v-model="queryParams.phone" placeholder="请输入手机号码" clearable style="width: 240px"
-              @keyup.enter.native="handleQuery" />
-          </el-form-item>
-          <el-form-item label="状态" prop="isLock">
-            <el-select v-model="queryParams.isLock" 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" />
-            </el-select>
-          </el-form-item>
-          <!-- <el-form-item label="创建时间">
+    <layoutCom>
+      <org-tree
+        slot="leftBar"
+        v-model="queryParams.orgId"
+        @defaultKey="getDefaultKey"
+        @checkChange="checkChange"
+        @click="clickTreeNode"
+      ></org-tree>
+      <el-row slot="rightBar">
+        <!--用户数据-->
+        <el-col>
+          <!--    搜索条件    -->
+          <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-form-item>
+            <el-form-item label="手机号码" prop="phone">
+              <el-input
+                v-model="queryParams.phone"
+                placeholder="请输入手机号码"
+                clearable
+                style="width: 240px"
+                @keyup.enter.native="handleQuery"
+              />
+            </el-form-item>
+            <el-form-item label="状态" prop="isLock">
+              <el-select
+                v-model="queryParams.isLock"
+                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"
+                />
+              </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-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-row :gutter="10" class="mb8">
-          <el-col :span="1.5">
-            <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd"
-              v-hasPermi="['system:user:add']">新增</el-button>
-          </el-col>
-          <!-- <el-col :span="1.5">
+          <!--    按纽    -->
+          <el-row :gutter="10" class="mb8">
+            <el-col :span="1.5">
+              <el-button
+                type="primary"
+                plain
+                icon="el-icon-plus"
+                size="mini"
+                @click="handleAdd"
+                v-hasPermi="['system:user:add']"
+                >新增</el-button
+              >
+            </el-col>
+            <!-- <el-col :span="1.5">
             <el-button type="success" plain icon="el-icon-edit" size="mini" :disabled="single" @click="handleUpdate"
               v-hasPermi="['system:user:edit']">修改</el-button>
           </el-col>
@@ -49,92 +92,204 @@
             <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 :span="1.5">-->
-          <!--            <el-button-->
-          <!--              type="info"-->
-          <!--              plain-->
-          <!--              icon="el-icon-upload2"-->
-          <!--              size="mini"-->
-          <!--              @click="handleImport"-->
-          <!--              v-hasPermi="['system:user:import']"-->
-          <!--            >导入</el-button>-->
-          <!--          </el-col>-->
-          <!--          <el-col :span="1.5">-->
-          <!--            <el-button-->
-          <!--              type="warning"-->
-          <!--              plain-->
-          <!--              icon="el-icon-download"-->
-          <!--              size="mini"-->
-          <!--              @click="handleExport"-->
-          <!--              v-hasPermi="['system:user:export']"-->
-          <!--            >导出</el-button>-->
-          <!--          </el-col>-->
-          <right-toolbar :showSearch.sync="showSearch" @queryTable="getList" :columns="columns"></right-toolbar>
-        </el-row>
-        <el-table v-loading="loading" :data="userList" @selection-change="handleSelectionChange">
-          <el-table-column v-if="false" type="selection" width="50" align="center" />
-          <el-table-column label="用户名称" align="center" key="username" prop="username" v-if="columns[0].visible" />
-          <el-table-column label="用户昵称" align="center" key="name" prop="name" v-if="columns[1].visible"
-            :show-overflow-tooltip="true" />
+            <!--          <el-col :span="1.5">-->
+            <!--            <el-button-->
+            <!--              type="info"-->
+            <!--              plain-->
+            <!--              icon="el-icon-upload2"-->
+            <!--              size="mini"-->
+            <!--              @click="handleImport"-->
+            <!--              v-hasPermi="['system:user:import']"-->
+            <!--            >导入</el-button>-->
+            <!--          </el-col>-->
+            <!--          <el-col :span="1.5">-->
+            <!--            <el-button-->
+            <!--              type="warning"-->
+            <!--              plain-->
+            <!--              icon="el-icon-download"-->
+            <!--              size="mini"-->
+            <!--              @click="handleExport"-->
+            <!--              v-hasPermi="['system:user:export']"-->
+            <!--            >导出</el-button>-->
+            <!--          </el-col>-->
+            <right-toolbar
+              :showSearch.sync="showSearch"
+              @queryTable="getList"
+              :columns="columns"
+            ></right-toolbar>
+          </el-row>
+          <el-table
+            v-loading="loading"
+            :data="userList"
+            @selection-change="handleSelectionChange"
+          >
+            <el-table-column
+              v-if="false"
+              type="selection"
+              width="50"
+              align="center"
+            />
+            <el-table-column
+              label="用户名称"
+              align="center"
+              key="username"
+              prop="username"
+              v-if="columns[0].visible"
+            />
+            <el-table-column
+              label="用户昵称"
+              align="center"
+              key="name"
+              prop="name"
+              v-if="columns[1].visible"
+              :show-overflow-tooltip="true"
+            />
 
-          <el-table-column label="所属机构" align="center" key="orgName" prop="orgName" v-if="columns[3].visible"
-            :show-overflow-tooltip="true" />
-          <el-table-column label="用户角色" align="center" prop="roles" v-if="columns[2].visible"
-            :show-overflow-tooltip="true">
-            <template slot-scope="scope">
-              <template v-for="item in scope.row.roles">
-                {{ item.roleName }}
-                <br />
+            <el-table-column
+              label="所属机构"
+              align="center"
+              key="orgName"
+              prop="orgName"
+              v-if="columns[3].visible"
+              :show-overflow-tooltip="true"
+            />
+            <el-table-column
+              label="用户角色"
+              align="center"
+              prop="roles"
+              v-if="columns[2].visible"
+              :show-overflow-tooltip="true"
+            >
+              <template slot-scope="scope">
+                <template v-for="item in scope.row.roles">
+                  {{ item.roleName }}
+                  <br />
+                </template>
+              </template>
+            </el-table-column>
+            <el-table-column
+              label="状态"
+              align="center"
+              key="isLock"
+              prop="isLock"
+              v-if="columns[4].visible"
+              width="80"
+            >
+              <template slot-scope="scope">
+                <dict-tag
+                  :options="dict.type.sys_normal_disable"
+                  :value="scope.row.isLock"
+                />
+              </template>
+            </el-table-column>
+            <el-table-column
+              label="是否管理人员"
+              align="center"
+              key="isManager"
+              prop="isManager"
+              v-if="columns[5].visible"
+              width="120"
+            >
+              <template slot-scope="scope">
+                {{ scope.row.isManager > 0 ? "是" : "否" }}
               </template>
-            </template>
-          </el-table-column>
-          <el-table-column label="状态" align="center" key="isLock" prop="isLock" v-if="columns[4].visible" width="80">
-            <template slot-scope="scope">
-              <dict-tag :options="dict.type.sys_normal_disable" :value="scope.row.isLock" />
-            </template>
-          </el-table-column>
-          <el-table-column label="是否管理人员" align="center" key="isManager" prop="isManager" v-if="columns[5].visible"
-            width="120">
-            <template slot-scope="scope">
-              {{ scope.row.isManager > 0 ? "是" : "否" }}
-            </template>
-          </el-table-column>
-          <el-table-column label="登录IP" align="center" key="lastIp" prop="lastIp" v-if="columns[6].visible" width="120" />
-          <el-table-column label="登录时间" align="center" key="lastTime" prop="lastTime" v-if="columns[7].visible"
-            width="120" />
-          <el-table-column label="操作" align="center" width="160" class-name="small-padding fixed-width">
-            <template slot-scope="scope" v-if="scope.row.userId !== 1">
-              <el-button size="mini" type="text" icon="el-icon-plus" @click="handleExtend(scope.row)"
-                v-hasPermi="['system:user:extend']">补充信息</el-button>
-              <!-- <el-button
+            </el-table-column>
+            <el-table-column
+              label="登录IP"
+              align="center"
+              key="lastIp"
+              prop="lastIp"
+              v-if="columns[6].visible"
+              width="120"
+            />
+            <el-table-column
+              label="登录时间"
+              align="center"
+              key="lastTime"
+              prop="lastTime"
+              v-if="columns[7].visible"
+              width="120"
+            />
+            <el-table-column
+              label="操作"
+              align="center"
+              width="160"
+              class-name="small-padding fixed-width"
+            >
+              <template slot-scope="scope" v-if="scope.row.userId !== 1">
+                <el-button
+                  size="mini"
+                  type="text"
+                  icon="el-icon-plus"
+                  @click="handleExtend(scope.row)"
+                  v-hasPermi="['system:user:extend']"
+                  >补充信息</el-button
+                >
+                <!-- <el-button
                   size="mini"
                   type="text"
                   icon="el-icon-plus"
                   v-hasPermi="['system:user:extend']"
                   >补充信息</el-button
                 > -->
-              <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)"
-                v-hasPermi="['system:user:edit']">编辑</el-button>
-              <el-button v-if="!scope.row.source" 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-dropdown-menu slot="dropdown">
-                  <el-dropdown-item command="handleResetPwd" icon="el-icon-key"
-                    v-hasPermi="['system:user:resetPwd']">重置密码</el-dropdown-item>
-                  <el-dropdown-item command="handleAuthRole" v-if="false" icon="el-icon-circle-check"
-                    v-hasPermi="['system:user:edit']">分配角色</el-dropdown-item>
-                </el-dropdown-menu>
-              </el-dropdown>
-            </template>
-          </el-table-column>
-        </el-table>
+                <el-button
+                  size="mini"
+                  type="text"
+                  icon="el-icon-edit"
+                  @click="handleUpdate(scope.row)"
+                  v-hasPermi="['system:user:edit']"
+                  >编辑</el-button
+                >
+                <el-button
+                  v-if="!scope.row.source"
+                  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-dropdown-menu slot="dropdown">
+                    <el-dropdown-item
+                      command="handleResetPwd"
+                      icon="el-icon-key"
+                      v-hasPermi="['system:user:resetPwd']"
+                      >重置密码</el-dropdown-item
+                    >
+                    <el-dropdown-item
+                      command="handleAuthRole"
+                      v-if="false"
+                      icon="el-icon-circle-check"
+                      v-hasPermi="['system:user:edit']"
+                      >分配角色</el-dropdown-item
+                    >
+                  </el-dropdown-menu>
+                </el-dropdown>
+              </template>
+            </el-table-column>
+          </el-table>
 
-        <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
-          @pagination="getList" />
-      </el-col>
-    </el-row>
+          <pagination
+            v-show="total > 0"
+            :total="total"
+            :page.sync="queryParams.pageNum"
+            :limit.sync="queryParams.pageSize"
+            @pagination="getList"
+          />
+        </el-col>
+      </el-row>
+    </layoutCom>
 
     <!-- 添加或修改用户配置对话框 -->
     <DialogCom :title="title" :visible.sync="open" width="800px" append-to-body>
@@ -142,28 +297,51 @@
         <el-row>
           <el-col :span="10">
             <el-form-item label="用户名称" prop="username" v-if="!form.source">
-              <el-input v-model="form.username" placeholder="请输入用户名" maxlength="30" />
+              <el-input
+                v-model="form.username"
+                placeholder="请输入用户名"
+                maxlength="30"
+              />
             </el-form-item>
           </el-col>
           <el-col :span="10">
             <el-form-item label="用户昵称" prop="name" v-if="!form.source">
-              <el-input v-model="form.name" placeholder="请输入用户昵称" maxlength="30" />
+              <el-input
+                v-model="form.name"
+                placeholder="请输入用户昵称"
+                maxlength="30"
+              />
             </el-form-item>
           </el-col>
         </el-row>
         <el-row>
-
           <el-col :span="10">
             <el-form-item label="所属机构" prop="orgId" v-if="!form.source">
-              <tree-select v-model="form.orgId" :options="deptOptions" :show-count="true" :normalizer="tenantIdnormalizer"
-                :props="{ checkStrictly: true, label: 'name' }" placeholder="请选择归属机构" />
+              <tree-select
+                v-model="form.orgId"
+                :options="deptOptions"
+                :show-count="true"
+                :normalizer="tenantIdnormalizer"
+                :props="{ checkStrictly: true, label: 'name' }"
+                placeholder="请选择归属机构"
+              />
             </el-form-item>
           </el-col>
           <el-col :span="10">
             <el-form-item label="用户角色" prop="roleIds">
-              <el-select style="width: 100%;" v-model="form.roleIds" multiple placeholder="请选择角色">
-                <el-option v-for="item in roleOptions" :key="item.id" :label="item.roleName" :value="item.id"
-                  :disabled="item.status == 1"></el-option>
+              <el-select
+                style="width: 100%"
+                v-model="form.roleIds"
+                multiple
+                placeholder="请选择角色"
+              >
+                <el-option
+                  v-for="item in roleOptions"
+                  :key="item.id"
+                  :label="item.roleName"
+                  :value="item.id"
+                  :disabled="item.status == 1"
+                ></el-option>
               </el-select>
             </el-form-item>
           </el-col>
@@ -171,14 +349,26 @@
         <el-row>
           <el-col :span="10">
             <el-form-item label="手机号码" prop="phone" v-if="!form.source">
-              <el-input v-model="form.phone" placeholder="请输入手机号码" maxlength="11" />
+              <el-input
+                v-model="form.phone"
+                placeholder="请输入手机号码"
+                maxlength="11"
+              />
             </el-form-item>
           </el-col>
           <el-col :span="10">
             <el-form-item label="用户性别" v-if="!form.source">
-              <el-select style="width: 100%;" v-model="form.gender" 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
+                style="width: 100%"
+                v-model="form.gender"
+                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>
@@ -196,17 +386,26 @@
           </el-col>   -->
           <el-col :span="14">
             <el-form-item v-if="!form.id" label="用户密码" prop="password">
-              <el-input v-model="form.password" placeholder="请输入用户密码" type="password" maxlength="20" show-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="14">
             <el-form-item label="状态" v-if="!form.source">
               <el-radio-group v-model="form.isLock">
-                <el-radio v-for="dict in dict.type.sys_normal_disable" :key="`${dict.value}`" :label="dict.value">{{
-                  dict.label }}</el-radio>
+                <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>
@@ -219,19 +418,39 @@
     </DialogCom>
 
     <!-- 用户导入对话框 -->
-    <DialogCom :title="upload.title" :visible.sync="upload.open" width="400px" append-to-body>
-      <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>
+    <DialogCom
+      :title="upload.title"
+      :visible.sync="upload.open"
+      width="400px"
+      append-to-body
+    >
+      <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
+      >
         <i class="el-icon-upload"></i>
         <div class="el-upload__text">将文件拖到此处,或<em>点击上传</em></div>
         <div class="el-upload__tip text-center" slot="tip">
           <div class="el-upload__tip" slot="tip">
-            <el-checkbox v-model="upload.updateSupport" /> 是否更新已经存在的用户数据
+            <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>
       </el-upload>
       <div slot="footer" class="dialog-footer">
@@ -243,15 +462,23 @@
 </template>
 
 <script>
-import OrgTree from '@/components/orgTree'
-import { listUser, getUser, delUser, addUser, updateUser, resetUserPwd, changeUserStatus } from "@/api/system/user";
+import OrgTree from "@/components/orgTree";
+import {
+  listUser,
+  getUser,
+  delUser,
+  addUser,
+  updateUser,
+  resetUserPwd,
+  changeUserStatus,
+} from "@/api/system/user";
 import { getToken } from "@/utils/auth";
 import { deptTreeSelect } from "@/api/system/public";
 import tableList from "@/mixins/tableList";
 
 export default {
   name: "User",
-  dicts: ['sys_normal_disable', 'sys_user_sex'],
+  dicts: ["sys_normal_disable", "sys_user_sex"],
   components: { OrgTree },
   mixins: [tableList],
   data() {
@@ -301,7 +528,7 @@ export default {
         // 设置上传的请求头部
         headers: { Authorization: "Bearer " + getToken() },
         // 上传的地址
-        url: process.env.VUE_APP_BASE_API + "/system/user/importData"
+        url: process.env.VUE_APP_BASE_API + "/system/user/importData",
       },
       // 查询参数
       queryParams: {
@@ -311,7 +538,7 @@ export default {
         phone: null,
         status: null,
         orgId: null,
-        checkSub: false
+        checkSub: false,
       },
       // 列信息
       columns: [
@@ -322,26 +549,36 @@ export default {
         { key: 4, label: `状态`, visible: true },
         { key: 5, label: `是否管理人员`, visible: true },
         { key: 6, label: `登录IP`, visible: true },
-        { key: 7, label: `登录时间`, visible: true }
+        { key: 7, label: `登录时间`, visible: true },
       ],
       // 表单校验
       rules: {
         username: [
           { required: true, message: "用户名称不能为空", trigger: "blur" },
-          { min: 2, max: 20, message: '用户名称长度必须介于 2 和 20 之间', trigger: 'blur' }
+          {
+            min: 2,
+            max: 20,
+            message: "用户名称长度必须介于 2 和 20 之间",
+            trigger: "blur",
+          },
         ],
         name: [
-          { required: true, message: "用户昵称不能为空", trigger: "blur" }
+          { required: true, message: "用户昵称不能为空", trigger: "blur" },
         ],
         roleIds: [
-          { required: true, message: "用户角色不能为空", trigger: "blur" }
+          { required: true, message: "用户角色不能为空", trigger: "blur" },
         ],
         password: [
           { required: true, message: "用户密码不能为空", trigger: "blur" },
-          { min: 5, max: 20, message: '用户密码长度必须介于 5 和 20 之间', trigger: 'blur' }
+          {
+            min: 5,
+            max: 20,
+            message: "用户密码长度必须介于 5 和 20 之间",
+            trigger: "blur",
+          },
         ],
         orgId: [
-          { required: true, message: "所属机构不能为空", trigger: "blur" }
+          { required: true, message: "所属机构不能为空", trigger: "blur" },
         ],
         // email: [
         //   {
@@ -354,9 +591,9 @@ export default {
           {
             pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
             message: "请输入正确的手机号码",
-            trigger: "blur"
-          }
-        ]
+            trigger: "blur",
+          },
+        ],
       },
       //默认选中节点
       defaultKeys: null,
@@ -371,13 +608,11 @@ export default {
     //   this.initPassword = response.msg;
     // });
   },
-  mounted() {
-
-  },
+  mounted() {},
   methods: {
     /** 查询机构树数据 */
     getDeptTree() {
-      deptTreeSelect().then(response => {
+      deptTreeSelect().then((response) => {
         this.deptOptions = response.data;
       });
     },
@@ -394,13 +629,13 @@ export default {
     /** treeSelect组件自定义数据*/
     tenantIdnormalizer(node, instanceId) {
       if (node.children && !node.children.length) {
-        delete node.children
+        delete node.children;
       }
       return {
         id: node.id,
         label: node.name,
-        children: node.children
-      }
+        children: node.children,
+      };
     },
 
     /** 搜索按钮操作 */
@@ -412,23 +647,25 @@ export default {
     resetQuery() {
       this.resetForm("queryForm");
       this.handleQuery();
-
     },
 
     /** 查询列表 */
     getList() {
       this.loading = true;
-      listUser(this.addDateRange(this.queryParams, this.dateRange)).then(response => {
-        //兼容框架userId字段
-        response.data.rows.forEach(v => { v.userId = v.id });
-        this.userList = response.data.rows;
-        this.total = response.data.total;
-        this.check = response.check;
-        this.loading = false;
-      }
-      ).catch(err => {
-        this.loading = false;
-      })
+      listUser(this.addDateRange(this.queryParams, this.dateRange))
+        .then((response) => {
+          //兼容框架userId字段
+          response.data.rows.forEach((v) => {
+            v.userId = v.id;
+          });
+          this.userList = response.data.rows;
+          this.total = response.data.total;
+          this.check = response.check;
+          this.loading = false;
+        })
+        .catch((err) => {
+          this.loading = false;
+        });
     },
 
     getDefaultKey(key) {
@@ -443,17 +680,21 @@ export default {
     // 用户状态修改
     handleStatusChange(row) {
       let text = row.status === "1" ? "启用" : "停用";
-      this.$modal.confirm('确认要' + text + '"' + row.name + '"用户吗?').then(function () {
-        const data = {
-          id: row.id,
-          isLock: row.isLock
-        }
-        return changeUserStatus(data);
-      }).then(() => {
-        this.$modal.msgSuccess(text + "成功");
-      }).catch(function () {
-        row.status = row.status === "0" ? "1" : "0";
-      });
+      this.$modal
+        .confirm("确认要" + text + '"' + row.name + '"用户吗?')
+        .then(function () {
+          const data = {
+            id: row.id,
+            isLock: row.isLock,
+          };
+          return changeUserStatus(data);
+        })
+        .then(() => {
+          this.$modal.msgSuccess(text + "成功");
+        })
+        .catch(function () {
+          row.status = row.status === "0" ? "1" : "0";
+        });
     },
     // 取消按钮
     cancel() {
@@ -475,13 +716,13 @@ export default {
         remark: undefined,
         postIds: [],
         roleIds: [],
-        isLock: "0"
+        isLock: "0",
       };
       this.resetForm("form");
     },
     // 多选框选中数据
     handleSelectionChange(selection) {
-      this.ids = selection.map(item => item.userId);
+      this.ids = selection.map((item) => item.userId);
       this.single = selection.length != 1;
       this.multiple = !selection.length;
     },
@@ -501,7 +742,7 @@ export default {
     /** 新增按钮操作 */
     handleAdd() {
       this.reset();
-      getUser().then(response => {
+      getUser().then((response) => {
         this.postOptions = response.posts;
         this.roleOptions = response.roles;
         this.open = true;
@@ -514,8 +755,8 @@ export default {
       console.log(row);
       this.reset();
       const userId = row.id || this.ids;
-      getUser(userId).then(response => {
-        console.log(response.data, 'data')
+      getUser(userId).then((response) => {
+        console.log(response.data, "data");
         this.form = response.data;
         this.postOptions = response.posts;
         this.roleOptions = response.roles;
@@ -528,22 +769,24 @@ export default {
     },
     /** 重置密码按钮操作 */
     handleResetPwd(row) {
-      console.log(row, 'row')
+      console.log(row, "row");
       this.$prompt('请输入"' + row.name + '"的新密码', "提示", {
         confirmButtonText: "确定",
         cancelButtonText: "取消",
         closeOnClickModal: false,
         inputPattern: /^.{5,20}$/,
-        inputErrorMessage: "用户密码长度必须介于 5 和 20 之间"
-      }).then(({ value }) => {
-        let data = {
-          id: row.userId,
-          password: value
-        }
-        resetUserPwd(data).then(response => {
-          this.$modal.msgSuccess("修改成功,新密码是:" + value);
-        });
-      }).catch(() => { });
+        inputErrorMessage: "用户密码长度必须介于 5 和 20 之间",
+      })
+        .then(({ value }) => {
+          let data = {
+            id: row.userId,
+            password: value,
+          };
+          resetUserPwd(data).then((response) => {
+            this.$modal.msgSuccess("修改成功,新密码是:" + value);
+          });
+        })
+        .catch(() => {});
     },
     /** 分配角色操作 */
     handleAuthRole: function (row) {
@@ -552,16 +795,16 @@ export default {
     },
     /** 提交按钮 */
     submitForm: function () {
-      this.$refs["form"].validate(valid => {
+      this.$refs["form"].validate((valid) => {
         if (valid) {
           if (this.form.id != undefined) {
-            updateUser(this.form).then(response => {
+            updateUser(this.form).then((response) => {
               this.$modal.msgSuccess("修改成功");
               this.open = false;
               this.getList();
             });
           } else {
-            addUser(this.form).then(response => {
+            addUser(this.form).then((response) => {
               this.$modal.msgSuccess("新增成功");
               this.open = false;
               this.getList();
@@ -574,18 +817,26 @@ export default {
     handleDelete(row) {
       console.log(row);
       const userIds = row.id || this.ids;
-      this.$modal.confirm('是否确认删除用户编号为"' + userIds + '"的数据项?').then(function () {
-        return delUser(userIds);
-      }).then(() => {
-        this.getList();
-        this.$modal.msgSuccess("删除成功");
-      }).catch(() => { });
+      this.$modal
+        .confirm('是否确认删除用户编号为"' + userIds + '"的数据项?')
+        .then(function () {
+          return delUser(userIds);
+        })
+        .then(() => {
+          this.getList();
+          this.$modal.msgSuccess("删除成功");
+        })
+        .catch(() => {});
     },
     /** 导出按钮操作 */
     handleExport() {
-      this.download('system/user/export', {
-        ...this.queryParams
-      }, `user_${new Date().getTime()}.xlsx`)
+      this.download(
+        "system/user/export",
+        {
+          ...this.queryParams,
+        },
+        `user_${new Date().getTime()}.xlsx`
+      );
     },
     /** 导入按钮操作 */
     handleImport() {
@@ -594,8 +845,11 @@ export default {
     },
     /** 下载模板操作 */
     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) {
@@ -606,15 +860,30 @@ export default {
       this.upload.open = false;
       this.upload.isUploading = false;
       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();
     },
     // 提交上传文件
     submitFileForm() {
       this.$refs.upload.submit();
-    }
-  }
+    },
+  },
 };
 </script>
 <style lang="scss"></style>
-<style lang="scss" scoped></style>
+<style lang="scss" scoped>
+// .dragonet{
+//   max-width: 10px;
+//   min-width: 10px;
+//   cursor: col-resize;
+//   background-color: #f2f2f2;
+//   height: 100%;
+//   z-index: 2;
+// }
+</style>