<p align="center">
	<img alt="logo" src="https://oscimg.oschina.net/oscnet/up-d3d0a9303e11d522a06cd263f3079027715.png">
</p>
<h1 align="center" style="margin: 30px 0 30px; font-weight: bold;">RuoYi v3.8.4</h1>
<h4 align="center">基于SpringBoot+Vue前后端分离的Java快速开发框架</h4>
<p align="center">
	<a href="https://gitee.com/y_project/RuoYi-Vue/stargazers"><img src="https://gitee.com/y_project/RuoYi-Vue/badge/star.svg?theme=dark"></a>
	<a href="https://gitee.com/y_project/RuoYi-Vue"><img src="https://img.shields.io/badge/RuoYi-v3.8.4-brightgreen.svg"></a>
	<a href="https://gitee.com/y_project/RuoYi-Vue/blob/master/LICENSE"><img src="https://img.shields.io/github/license/mashape/apistatus.svg"></a>
</p>

## 平台简介

一七生活是一套全部开源的快速开发平台，毫无保留给个人及企业免费使用。

0 去除laber标签
1. 修改page  selectionChange 多选时候要加

<Page uri="/mapi/core/clothItem/list" :request-params="queryParams" ref="pagination">
<Page uri="/mapi/core/clothItem/list" :request-params="queryParams" ref="pagination" :selectionChange="handleSelectionChange">
2. 去除分页查询相关字段 pageNum

3. 修改查询
      this.$nextTick(() => {
        this.$refs.pagination.handleSearch(true)
      })


单选多选设置
<template>
  <div class="app-container">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>选择器组件示例</span>
      </div>

      <!-- 单选示例 -->
      <div class="demo-block">
        <h3>单选示例</h3>
        <div class="selected-info">
          <el-descriptions v-if="selectedUser" :column="1" border>
            <el-descriptions-item label="用户名">{{ selectedUser.userName }}</el-descriptions-item>
            <el-descriptions-item label="昵称">{{ selectedUser.nickName }}</el-descriptions-item>
            <el-descriptions-item label="手机号">{{ selectedUser.phonenumber }}</el-descriptions-item>
          </el-descriptions>
          <el-empty v-else description="暂未选择用户"></el-empty>
        </div>
        <div class="button-group">
          <el-button type="primary" @click="handleSelectUser">选择用户</el-button>
          <el-button v-if="selectedUser" @click="selectedUser = null">清除选择</el-button>
        </div>
      </div>

      <!-- 多选示例 -->
      <div class="demo-block">
        <h3>多选示例</h3>
        <div class="selected-info">
          <template v-if="selectedDepts.length">
            <el-tag
              v-for="dept in selectedDepts"
              :key="dept.deptId"
              closable
              class="tag-item"
              @close="removeDept(dept)"
            >
              {{ dept.deptName }}
            </el-tag>
          </template>
          <el-empty v-else description="暂未选择部门"></el-empty>
        </div>
        <div class="button-group">
          <el-button type="primary" @click="handleSelectDept">选择部门</el-button>
          <el-button v-if="selectedDepts.length" @click="selectedDepts = []">清除全部</el-button>
        </div>
      </div>
    </el-card>

    <!-- 用户选择器 -->
    <DataSelector
      ref="userSelector"
      title="选择用户"
      :multiple="false"
      :data-columns="userColumns"
      :fetch-data="fetchUserData"
      @confirm="handleUserSelect"
    />

    <!-- 部门选择器 -->
    <DataSelector
      ref="deptSelector"
      title="选择部门"
      :multiple="true"
      :data-columns="deptColumns"
      :fetch-data="fetchDeptData"
      @confirm="handleDeptSelect"
    />
  </div>
</template>

<script>
import DataSelector from '@/components/DataSelector'
import { listUser } from '@/api/system/user'
import { listDept } from '@/api/system/dept'

export default {
  name: 'SelectorDemo',
  components: {
    DataSelector
  },
  data() {
    return {
      // 单选数据
      selectedUser: null,
      // 多选数据
      selectedDepts: [],

      // 用户选择器列配置
      userColumns: [
        { field: 'userName', label: '用户名称', width: '120' },
        { field: 'nickName', label: '用户昵称', width: '120' },
        { field: 'deptName', label: '所属部门' },
        { field: 'phonenumber', label: '手机号码', width: '120' },
        { field: 'email', label: '邮箱', width: '180' }
      ],

      // 部门选择器列配置
      deptColumns: [
        { field: 'deptName', label: '部门名称', width: '180' },
        { field: 'leader', label: '负责人', width: '120' },
        { field: 'phone', label: '联系电话', width: '120' },
        { field: 'email', label: '邮箱', width: '180' },
        { field: 'status', label: '状态', width: '100', formatter: this.formatStatus }
      ]
    }
  },
  methods: {
    // 打开用户选择器
    handleSelectUser() {
      this.$refs.userSelector.show()
    },

    // 打开部门选择器
    handleSelectDept() {
      this.$refs.deptSelector.show()
    },

    // 获取用户数据
    async fetchUserData(params) {
      try {
        const response = await listUser({
          pageNum: params.pageNum,
          pageSize: params.pageSize,
          userName: params.title
        })
        return {
          data: response.rows,
          total: response.total
        }
      } catch (error) {
        console.error('获取用户数据失败:', error)
        return {
          data: [],
          total: 0
        }
      }
    },

    // 获取部门数据
    async fetchDeptData(params) {
      try {
        const response = await listDept({
          pageNum: params.pageNum,
          pageSize: params.pageSize,
          deptName: params.title
        })
        return {
          data: response.rows,
          total: response.total
        }
      } catch (error) {
        console.error('获取部门数据失败:', error)
        return {
          data: [],
          total: 0
        }
      }
    },

    // 处理用户选择
    handleUserSelect(data) {
      this.selectedUser = data
      this.$message.success(`已选择用户：${data.userName}`)
    },

    // 处理部门选择
    handleDeptSelect(data) {
      this.selectedDepts = data
      this.$message.success(`已选择 ${data.length} 个部门`)
    },

    // 移除选中部门
    removeDept(dept) {
      this.selectedDepts = this.selectedDepts.filter(item => item.deptId !== dept.deptId)
    },

    // 格式化状态
    formatStatus(row) {
      return row.status === '0' ? '正常' : '停用'
    }
  }
}
</script>

<style lang="scss" scoped>
.app-container {
  padding: 20px;

  .demo-block {
    margin-bottom: 20px;
    padding: 20px;
    border-bottom: 1px solid #ebeef5;

    h3 {
      margin: 0 0 15px;
      font-size: 16px;
      color: #303133;
    }

    .selected-info {
      margin-bottom: 15px;
      min-height: 100px;
      padding: 15px;
      background-color: #f5f7fa;
      border-radius: 4px;

      .tag-item {
        margin-right: 8px;
        margin-bottom: 8px;
      }
    }

    .button-group {
      .el-button {
        margin-right: 10px;
      }
    }
  }

  .box-card {
    margin-bottom: 20px;
  }
}
</style>