From 7cb0d9e84ed1e2f36ca8b7791543ae207caec6e0 Mon Sep 17 00:00:00 2001
From: XaoLi717 <144221124+XaoLi717@users.noreply.github.com>
Date: Tue, 26 Nov 2024 11:33:17 +0800
Subject: [PATCH] =?UTF-8?q?=E7=94=A8=E6=88=B7=E9=80=89=E6=8B=A9=E7=BB=84?=
 =?UTF-8?q?=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/userSelector/UserSelector.vue | 244 +++++++++++++++++++
 1 file changed, 244 insertions(+)
 create mode 100644 src/components/userSelector/UserSelector.vue

diff --git a/src/components/userSelector/UserSelector.vue b/src/components/userSelector/UserSelector.vue
new file mode 100644
index 0000000..7830427
--- /dev/null
+++ b/src/components/userSelector/UserSelector.vue
@@ -0,0 +1,244 @@
+<template>
+  <Dialog v-model="dialogVisible" :title="dialogTitle" style="width: 80%">
+
+    <el-row :gutter="20">
+      <!-- 左侧部门树 -->
+      <el-col :span="4" :xs="24">
+        <ContentWrap class="h-1/1">
+          <DeptTree @node-click="handleDeptNodeClick" />
+        </ContentWrap>
+      </el-col>
+      <el-col :span="20" :xs="24">
+        <!-- 搜索 -->
+        <ContentWrap>
+          <el-form
+            class="-mb-15px"
+            :model="queryParams"
+            ref="queryFormRef"
+            :inline="true"
+            label-width="68px"
+          >
+            <el-form-item label="用户名称" prop="username">
+              <el-input
+                v-model="queryParams.username"
+                placeholder="请输入用户名称"
+                clearable
+                @keyup.enter="handleQuery"
+                class="!w-240px"
+              />
+            </el-form-item>
+            <el-form-item label="手机号码" prop="mobile">
+              <el-input
+                v-model="queryParams.mobile"
+                placeholder="请输入手机号码"
+                clearable
+                @keyup.enter="handleQuery"
+                class="!w-240px"
+              />
+            </el-form-item>
+            <el-form-item label="状态" prop="status">
+              <el-select
+                v-model="queryParams.status"
+                placeholder="用户状态"
+                clearable
+                class="!w-240px"
+              >
+                <el-option
+                  v-for="dict in getIntDictOptions(DICT_TYPE.COMMON_STATUS)"
+                  :key="dict.value"
+                  :label="dict.label"
+                  :value="dict.value"
+                />
+              </el-select>
+            </el-form-item>
+            <el-form-item label="创建时间" prop="createTime">
+              <el-date-picker
+                v-model="queryParams.createTime"
+                value-format="YYYY-MM-DD HH:mm:ss"
+                type="datetimerange"
+                start-placeholder="开始日期"
+                end-placeholder="结束日期"
+                class="!w-240px"
+              />
+            </el-form-item>
+            <el-form-item>
+              <el-button @click="handleQuery"><Icon icon="ep:search" />搜索</el-button>
+              <el-button @click="resetQuery"><Icon icon="ep:refresh" />重置</el-button>
+            </el-form-item>
+          </el-form>
+        </ContentWrap>
+        <ContentWrap>
+          <el-table
+            v-loading="loading"
+            :data="list"
+            :highlight-current-row="props.singleSelect"
+            @current-change="handleCurrentChange"
+            @selection-change="handleSelectionChange"
+          >
+            <el-table-column v-if="!props.singleSelect" type="selection" width="50" />
+            <el-table-column label="用户编号" align="center" key="id" prop="id" />
+            <el-table-column
+              label="用户名称"
+              align="center"
+              prop="username"
+              :show-overflow-tooltip="true"
+            />
+            <el-table-column
+              label="用户昵称"
+              align="center"
+              prop="nickname"
+              :show-overflow-tooltip="true"
+            />
+            <el-table-column
+              label="部门"
+              align="center"
+              key="deptName"
+              prop="deptName"
+              :show-overflow-tooltip="true"
+            />
+            <el-table-column label="手机号码" align="center" prop="mobile" width="120" />
+            <el-table-column
+              label="创建时间"
+              align="center"
+              prop="createTime"
+              :formatter="dateFormatter"
+              width="180"
+            />
+          </el-table>
+          <Pagination
+            :total="total"
+            v-model:page="queryParams.pageNo"
+            v-model:limit="queryParams.pageSize"
+            @pagination="getList"
+          />
+        </ContentWrap>
+      </el-col>
+    </el-row>
+    <template #footer>
+      <el-button type="primary" @click="submit()">确定</el-button>
+      <el-button @click="dialogVisible=false">取消</el-button>
+    </template>
+  </Dialog>
+</template>
+
+<script setup lang="ts">
+import DeptTree from "@/views/system/user/DeptTree.vue";
+import * as UserApi from "@/api/system/user";
+import {DICT_TYPE, getIntDictOptions} from "@/utils/dict";
+import {dateFormatter} from "@/utils/formatTime";
+
+defineOptions({ name: 'UserSelector' })
+/*定义事件*/
+const emit = defineEmits(['change', 'update:singleUser', 'update:multiUser','update:index']);
+
+
+//接受父组件参数
+const props = defineProps({
+  // 单选true多选false
+  singleSelect: {
+    required: true,
+    type: Boolean,
+    default: true
+  },
+})
+
+const dialogVisible = ref(false) // 弹窗的是否展示
+const dialogTitle = ref('') // 弹窗的标题
+const loading = ref(true) // 列表的加载中
+const total = ref(0) // 列表的总页数
+const list = ref([]) // 列表的数
+const queryParams = reactive({
+  pageNo: 1,
+  pageSize: 10,
+  username: undefined,
+  mobile: undefined,
+  status: undefined,
+  deptId: undefined,
+  createTime: []
+})
+const queryFormRef = ref() // 搜索的表单
+
+/** 查询列表 */
+const getList = async () => {
+  loading.value = true
+  try {
+    const data = await UserApi.getUserPage(queryParams)
+    list.value = data.list
+    total.value = data.total
+  } finally {
+    loading.value = false
+  }
+}
+
+/** 搜索按钮操作 */
+const handleQuery = () => {
+  queryParams.pageNo = 1
+  getList()
+}
+
+/** 重置按钮操作 */
+const resetQuery = () => {
+  queryFormRef.value?.resetFields()
+  handleQuery()
+}
+
+/** 处理部门被点击 */
+const handleDeptNodeClick = async (row) => {
+  queryParams.deptId = row.id
+  await getList()
+}
+//定义数据模型
+interface User {
+  id:number,
+}
+const singleUser = ref()
+const multiUser = ref([])
+/** 处理单选数据 */
+const handleCurrentChange = async (val: any | undefined)=>{
+  restForm()
+  singleUser.value = val.id
+}
+/** 处理多选数据 */
+const handleSelectionChange = async (val: any | undefined)=>{
+  restForm()
+  for (let item of val){
+    multiUser.value.push(item.id)
+  }
+}
+
+/** 确定时,判断一下singleSelect参数,单选就传递单选,多选就传递多选,最后change */
+const submit = ()=>{
+  if (props.singleSelect){
+    emit('update:singleUser',singleUser.value)
+  }else if (!props.singleSelect){
+    emit('update:multiUser',multiUser.value)
+  }
+  if (uIndex.value!==null){
+    emit('update:index',uIndex.value)
+  }
+  emit('change')
+  dialogVisible.value = false
+}
+
+const restForm = ()=>{
+  singleUser.value={
+    id:0,
+  }
+  multiUser.value=[]
+}
+const uIndex = ref(null)
+/** open方法 */
+const open = async (index?:any)=>{
+  uIndex.value=index
+  dialogVisible.value=true;
+  dialogTitle.value='选择用户'
+  loading.value=true
+  restForm()
+  try {
+    await getList()
+  } finally {
+    loading.value=false
+  }
+}
+defineExpose({ open })
+</script>