新增用户选择功能

ruoyi-admin/src/main/java/com/ruoyi/web/controller/system/SysUserController.java

@@ -3,18 +3,14 @@ package com.ruoyi.web.controller.system;
 import java.util.List;
 import java.util.stream.Collectors;
 import javax.servlet.http.HttpServletResponse;
+
+import cn.hutool.core.util.StrUtil;
+import com.ruoyi.system.domain.dto.SysUserDTO;
 import org.apache.commons.lang3.ArrayUtils;
 import org.springframework.beans.factory.annotation.Autowired;
 import org.springframework.security.access.prepost.PreAuthorize;
 import org.springframework.validation.annotation.Validated;
-import org.springframework.web.bind.annotation.DeleteMapping;
-import org.springframework.web.bind.annotation.GetMapping;
-import org.springframework.web.bind.annotation.PathVariable;
-import org.springframework.web.bind.annotation.PostMapping;
-import org.springframework.web.bind.annotation.PutMapping;
-import org.springframework.web.bind.annotation.RequestBody;
-import org.springframework.web.bind.annotation.RequestMapping;
-import org.springframework.web.bind.annotation.RestController;
+import org.springframework.web.bind.annotation.*;
 import org.springframework.web.multipart.MultipartFile;
 import com.ruoyi.common.annotation.Log;
 import com.ruoyi.common.core.controller.BaseController;
@@ -54,6 +50,31 @@ public class SysUserController extends BaseController
     private ISysPostService postService;
 
     /**
+     * 通过用户名查询用户
+     *
+     * @param sysUserDTO 查询条件
+     * @return 用户对象信息
+     */
+    @PreAuthorize("@ss.hasPermi('system:user:query')")
+    @PostMapping("/search")
+    public AjaxResult search(@RequestBody(required = false) SysUserDTO sysUserDTO)
+    {
+        Long deptId = sysUserDTO.getDeptId();
+        String userName = sysUserDTO.getUserName();
+        if (StrUtil.isBlank(userName)) {
+            sysUserDTO.setUserName(null);
+        }
+        // 判断是否传值部门ID
+        if (deptId == null) {
+            // 获取用户所属部门ID
+            sysUserDTO.setDeptId(getDeptId());
+        }
+        startPage();
+        List<SysUser> list = userService.selectUserByAddressName(sysUserDTO);
+        return success(list);
+    }
+
+    /**
      * 获取用户列表
      */
     @PreAuthorize("@ss.hasPermi('system:user:list')")

ruoyi-system/src/main/java/com/ruoyi/system/domain/dto/SysUserDTO.java

@@ -0,0 +1,38 @@
+package com.ruoyi.system.domain.dto;
+
+public class SysUserDTO {
+    private String userName;
+    private Long deptId;
+
+    public String getUserName() {
+        return userName;
+    }
+
+    public void setUserName(String userName) {
+        this.userName = userName;
+    }
+
+    public Long getDeptId() {
+        return deptId;
+    }
+
+    public void setDeptId(Long deptId) {
+        this.deptId = deptId;
+    }
+
+    public SysUserDTO() {
+    }
+
+    public SysUserDTO(String userName, Long deptId) {
+        this.userName = userName;
+        this.deptId = deptId;
+    }
+
+    @Override
+    public String toString() {
+        return "SysUserDTO{" +
+                "userName='" + userName + '\'' +
+                ", deptId=" + deptId +
+                '}';
+    }
+}

ruoyi-system/src/main/java/com/ruoyi/system/mapper/SysUserMapper.java

@@ -1,6 +1,8 @@
 package com.ruoyi.system.mapper;
 
 import java.util.List;
+
+import com.ruoyi.system.domain.dto.SysUserDTO;
 import org.apache.ibatis.annotations.Param;
 import com.ruoyi.common.core.domain.entity.SysUser;
 
@@ -44,6 +46,14 @@ public interface SysUserMapper
     public SysUser selectUserByUserName(String userName);
 
     /**
+     * 通过用户名查询用户
+     *
+     * @param sysUserDTO 查询条件
+     * @return 用户对象信息
+     */
+    public List<SysUser> selectUserByAddressName(SysUserDTO sysUserDTO);
+
+    /**
      * 通过用户ID查询用户
      * 
      * @param userId 用户ID

ruoyi-system/src/main/java/com/ruoyi/system/service/ISysUserService.java

@@ -2,6 +2,7 @@ package com.ruoyi.system.service;
 
 import java.util.List;
 import com.ruoyi.common.core.domain.entity.SysUser;
+import com.ruoyi.system.domain.dto.SysUserDTO;
 
 /**
  * 用户 业务层
@@ -43,6 +44,14 @@ public interface ISysUserService
     public SysUser selectUserByUserName(String userName);
 
     /**
+     * 通过用户名查询用户
+     *
+     * @param sysUserDTO 查询条件
+     * @return 用户对象信息
+     */
+    public List<SysUser> selectUserByAddressName(SysUserDTO sysUserDTO);
+
+    /**
      * 通过用户ID查询用户
      * 
      * @param userId 用户ID

ruoyi-system/src/main/java/com/ruoyi/system/service/impl/SysUserServiceImpl.java

@@ -4,6 +4,8 @@ import java.util.ArrayList;
 import java.util.List;
 import java.util.stream.Collectors;
 import javax.validation.Validator;
+
+import com.ruoyi.system.domain.dto.SysUserDTO;
 import org.slf4j.Logger;
 import org.slf4j.LoggerFactory;
 import org.springframework.beans.factory.annotation.Autowired;
@@ -113,6 +115,17 @@ public class SysUserServiceImpl implements ISysUserService
     }
 
     /**
+     * 通过用户名查询用户
+     *
+     * @param sysUserDTO 查询条件
+     * @return 用户对象信息
+     */
+    @Override
+    public List<SysUser> selectUserByAddressName(SysUserDTO sysUserDTO) {
+        return userMapper.selectUserByAddressName(sysUserDTO);
+    }
+
+    /**
      * 通过用户ID查询用户
      * 
      * @param userId 用户ID

ruoyi-system/src/main/resources/mapper/system/SysUserMapper.xml

@@ -124,7 +124,19 @@ PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
 	    <include refid="selectUserVo"/>
 		where u.user_name = #{userName} and u.del_flag = '0'
 	</select>
-	
+
+	<select id="selectUserByAddressName" parameterType="SysUserDTO" resultMap="SysUserResult">
+		<include refid="selectUserVo"/>
+		where u.del_flag = '0'
+		<if test="userName != null and userName != ''">
+			AND u.user_name like concat('%', #{userName}, '%') or u.nick_name like concat('%', #{userName}, '%')
+		</if>
+		<if test="deptId != null">
+			AND u.dept_id = #{deptId}
+		</if>
+	</select>
+
+
 	<select id="selectUserById" parameterType="Long" resultMap="SysUserResult">
 		<include refid="selectUserVo"/>
 		where u.user_id = #{userId}

ruoyi-ui/src/api/system/user.js

@@ -1,6 +1,15 @@
 import request from '@/utils/request'
 import { parseStrEmpty } from "@/utils/ruoyi";
 
+// 用户查询
+export function search(data) {
+  return request({
+    url: '/system/user/search',
+    method: 'post',
+    data
+  })
+}
+
 // 查询用户列表
 export function listUser(query) {
   return request({

ruoyi-ui/src/components/SysUserSearch/index.vue

@@ -0,0 +1,185 @@
+<template>
+  <div class="container">
+    <!-- 搜索表单区 -->
+    <div class="form">
+      <el-form :inline="true" ref="searchform" :model="searchForm" class="demo-form-inline">
+        <el-form-item label="用户名称">
+          <el-input v-model.trim="searchForm.userName" placeholder="用户名称" :size="searchSize"></el-input>
+        </el-form-item>
+        <el-form-item label="所在部门">
+          <treeselect
+            v-model="searchForm.deptId"
+            :options="deptOptions"
+            placeholder="选择所在部门"
+          />
+        </el-form-item>
+        <el-form-item>
+          <el-button type="primary" icon="el-icon-search" @click="onSearchSubmit" :size="searchSize">查询</el-button>
+          <el-button @click="onSearchReset" icon="el-icon-refresh" :size="searchSize">重置</el-button>
+        </el-form-item>
+      </el-form>
+    </div>
+
+    <!-- 表格数据展示区 -->
+    <div class="table">
+      <el-table
+        v-loading="loading"
+        element-loading-text="拼命加载中"
+        element-loading-spinner="el-icon-loading"
+        element-loading-background="rgba(0, 0, 0, 0.8)"
+        ref="table"
+        :data="list"
+        style="width: 100%"
+        @selection-change="handleSelectionChange">
+        <el-table-column
+          type="selection"
+          width="55">
+        </el-table-column>
+        <el-table-column
+          label="序号"
+          type="index"
+          width="50">
+        </el-table-column>
+        <el-table-column
+          prop="userName"
+          label="用户名"
+          align="center">
+        </el-table-column>
+        <el-table-column
+          prop="nickName"
+          label="用户昵称"
+          align="center">
+        </el-table-column>
+        <el-table-column
+          label="部门名称"
+          align="center">
+          <template slot-scope="scope">
+            <div>{{scope.row.dept.deptName}}</div>
+          </template>
+        </el-table-column>
+      </el-table>
+    </div>
+
+    <div class="function">
+      <el-button style="margin-right:30px;" type="primary" @click="onSubmit" :size="buttonSize">确 定</el-button>
+      <el-button @click="onCancel" :size="buttonSize">取 消</el-button>
+    </div>
+  </div>
+</template>
+
+<script>
+/**
+ * 使用文档
+ * 1.引入组件并注册
+ *  import UserSearch from '@/components/SysUserSearch/index.vue'
+ * 2.使用组件
+ *  <UserSearch @submit="onSelectUser" @cancel="() => {openUserSearch = false}" v-if="openUserSearch"></UserSearch>
+ * 事件说明：
+ *    submit: 点击“确认”后触发事件    返回选中用户信息
+ *    cancel：点击“取消”后触发事件    返回数值 0
+ */
+import { search, deptTreeSelect } from '@/api/system/user.js'
+import Treeselect from "@riophae/vue-treeselect";
+import "@riophae/vue-treeselect/dist/vue-treeselect.css";
+export default {
+  name: 'SysUser-Search',
+  components: {
+    Treeselect
+  },
+  data() {
+    return {
+      /** 配置 */
+      searchSize: 'small', // 搜索表单大小
+      buttonSize: 'default', // 按钮大小
+      /** 表格 */
+      loading: true, // 加载遮罩
+      list: [],
+      searchForm: {
+        userName: null,
+        deptId: null
+      },
+      // 部门树选项
+      deptOptions: [],
+      deptId: null,
+      user: null
+    }
+  },
+  methods: {
+    /** 查询部门下拉树结构 */
+    getDeptTree() {
+      deptTreeSelect().then((response) => {
+        this.deptOptions = response.data;
+      });
+    },
+    /** 用户搜索列表初始化 */
+    getUserSearch() {
+      search(this.searchForm).then(res => {
+        this.loading = false
+        this.list = res.data
+        this.deptId = res.data[0].dept.deptId 
+        this.searchForm.deptId = res.data[0].dept.deptId
+      })
+    },
+    /** 搜索表单重置 */
+    onSearchReset() {
+      this.searchForm = {
+        userName: null,
+        deptId: this.deptId
+      }
+      this.onSearchSubmit()
+    },
+    /** 搜索表单提交 */
+    onSearchSubmit() {
+      this.loading = true
+      search(this.searchForm).then(res => {
+        this.loading = false
+        this.list = res.data
+      })
+    },
+    /** 表格选中 */
+    handleSelectionChange(selection) {
+      if (!selection.length) {
+        this.user = null
+        return
+      }
+      this.user = selection[selection.length - 1]
+      selection.forEach((item) => {
+        if (item.userId !== this.user.userId) {
+          this.$refs.table.toggleRowSelection(item, false);
+        }
+      });
+      console.log(this.user)
+    },
+    onSubmit() {
+      if (this.user === null) {
+        this.$modal.msgWarning("未选择用户");
+        return
+      }
+      console.log('选中用户：', this.user)
+      this.$emit('submit', this.user)
+    },
+    onCancel() {
+      console.log('已取消')
+      this.$emit('cancel', 0)
+    }
+  },
+  created() {
+    this.getDeptTree()
+    this.getUserSearch()
+  }
+}
+</script>
+
+<style lang="less" scoped>
+/deep/ .vue-treeselect {
+  display: inline-block;
+  width: 190px;
+  height: 32px;
+}
+.function {
+  margin-top: 30px;
+  width: 100%;
+  text-align: center;
+}
+</style>
+

ruoyi-ui/src/views/inventory/inventory/index.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="app-container">
-    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
+    <el-form :model="queryParams" ref="queryForm" class="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
       <el-form-item label="单据编号" prop="orderNumber">
         <el-input
           v-model="queryParams.orderNumber"
@@ -18,12 +18,12 @@
         />
       </el-form-item>
       <el-form-item label="盘点部门" prop="inventoryDepartment">
-        <el-input
-          v-model="queryParams.inventoryDepartment"
-          placeholder="请输入盘点部门"
-          clearable
-          @keyup.enter.native="handleQuery"
-        />
+        <treeselect
+            v-model="queryParams.inventoryDepartment"
+            :options="deptOptions"
+            placeholder="选择盘点部门"
+            @keyup.enter.native="handleQuery"
+          />
       </el-form-item>
       <el-form-item label="盘点人" prop="inventoryBy">
         <el-input
@@ -31,7 +31,8 @@
           placeholder="请输入盘点人"
           clearable
           @keyup.enter.native="handleQuery"
-        />
+        >
+        </el-input>
       </el-form-item>
       <el-form-item label="盘点日期" prop="inventoryDate">
         <el-date-picker clearable
@@ -195,10 +196,17 @@
           <el-input v-model="form.name" placeholder="请输入任务名称" />
         </el-form-item>
         <el-form-item label="盘点部门" prop="inventoryDepartment">
-          <el-input v-model="form.inventoryDepartment" placeholder="请输入盘点部门" />
+          <treeselect
+            v-model="form.inventoryDepartment"
+            :options="deptOptions"
+            placeholder="选择盘点部门"
+            @keyup.enter.native="handleQuery"
+          />
         </el-form-item>
         <el-form-item label="盘点人" prop="inventoryBy">
-          <el-input v-model="form.inventoryBy" placeholder="请输入盘点人" />
+          <el-input v-model="form.inventoryBy" placeholder="请输入盘点人" >
+            <el-button slot="append" icon="el-icon-search" @click="openUserSearch = true"></el-button>
+          </el-input>
         </el-form-item>
         <el-form-item label="盘点日期" prop="inventoryDate">
           <el-date-picker clearable
@@ -227,18 +235,30 @@
         <el-button @click="cancel">取 消</el-button>
       </div>
     </el-dialog>
+
+    <el-dialog :visible.sync="openUserSearch">
+      <UserSearch @submit="onSelectUser" @cancel="() => {openUserSearch = false}" v-if="openUserSearch"></UserSearch>
+    </el-dialog>
   </div>
 </template>
 
 <script>
+import { deptTreeSelect } from '@/api/system/user.js'
 import { listInventory, getInventory, delInventory, addInventory, updateInventory } from "@/api/inventory/inventory";
 import { listLocation } from "@/api/asset/location";
-
+import UserSearch from '@/components/SysUserSearch/index.vue'
+import Treeselect from "@riophae/vue-treeselect";
+import "@riophae/vue-treeselect/dist/vue-treeselect.css";
 export default {
   name: "Inventory",
   dicts: ['inventory_result', 'asset_record_status', 'inventory_status'],
+  components : {
+    UserSearch,
+    Treeselect
+  },
   data() {
     return {
+      openUserSearch: false,
       // 遮罩层
       loading: true,
       // 选中数组
@@ -254,6 +274,8 @@ export default {
       // 资产盘点记录表格数据
       inventoryList: [],
       locationList: [],
+      // 部门树选项
+      deptOptions: [],
       // 弹出层标题
       title: "",
       // 是否显示弹出层
@@ -299,8 +321,20 @@ export default {
   },
   created() {
     this.getList();
+    this.getDeptTree()
   },
   methods: {
+    /** 查询部门下拉树结构 */
+    getDeptTree() {
+      deptTreeSelect().then((response) => {
+        this.deptOptions = response.data;
+      });
+    },
+    onSelectUser(info) {
+      this.openUserSearch = false
+      console.log('获取用户：', info)
+      this.form.inventoryBy = info.userName
+    },
     /** 查询资产盘点记录列表 */
     getList() {
       this.loading = true;
@@ -408,3 +442,15 @@ export default {
   }
 };
 </script>
+
+<style lang="less" scoped>
+/deep/ .vue-treeselect {
+  display: inline-block;
+}
+.queryForm {
+  /deep/ .vue-treeselect {
+    width: 205px;
+    height: 32px;
+  }
+}
+</style>