new-zx-front-admin/src/views/system/user/index.vue

<template>
  <el-row :gutter="20">
    <!-- 左侧部门树 -->
    <el-col :span="4" :xs="24" v-if="!mobile">
      <ContentWrap class="h-1/1">
        <DeptTree @node-click="handleDeptNodeClick" />
      </ContentWrap>
    </el-col>
    <el-col :span="20" :xs="24">
      
      <!-- 搜索 -->
      <div class="search-one">
        <div style="text-align: right;" class="search-input">
          <el-input v-model="queryParams.username" placeholder="用户名称" clearable @keyup.enter="handleQuery">
            <template #suffix>
              <Icon class="mr-5px" icon="ep:search" @click="handleQuery" style="cursor: pointer;" />
            </template>
            <template #append>
              <el-button :icon="Operation" @click="showSearchMore" />
            </template>
          </el-input>
          <el-button type="primary" plain @click="openForm('create')" v-hasPermi="['system:user:create']"
            v-if="!mobile">
            <Icon icon="ep:plus" /> 新增
          </el-button>
        </div>
      </div>
      <div class="searchMore" v-show="searchMoreShow" :style="{width: (mobile?'88.7%' :'80.7%')}" >
        <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" />
          </el-form-item>
          <el-form-item label="手机号码" prop="mobile">
            <el-input v-model="queryParams.mobile" placeholder="请输入手机号码" clearable @keyup.enter="handleQuery" />
          </el-form-item>
          <el-form-item label="部门" prop="deptId" v-if="mobile">
            <el-select v-model="queryParams.deptId" placeholder="用户部门" clearable>
              <el-option v-for="item in dept" :key="item.id"
                :label="item.name" :value="item.id" />
            </el-select>
          </el-form-item>
          <el-form-item label="状态" prop="status">
            <el-select v-model="queryParams.status" placeholder="用户状态" clearable>
              <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="结束日期" style="width: auto;" />
          </el-form-item>
          <el-row>
            <el-col>
              <el-form-item>
                <el-button @click="hideSearchMore">
                  收起
                </el-button>
                
                <el-button @click="resetQuery">
                  重置
                </el-button>
                <el-button @click="handleQuery">
                  <Icon icon="ep:search" />搜索
                </el-button>
                <!-- <el-button
              type="warning"
              plain
              @click="handleImport"
              v-hasPermi="['system:user:import']"
            >
              <Icon icon="ep:upload" /> 导入
            </el-button>
            <el-button
              type="success"
              plain
              @click="handleExport"
              :loading="exportLoading"
              v-hasPermi="['system:user:export']"
            >
              <Icon icon="ep:download" />导出
            </el-button> -->
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
      <!-- 内容 -->
      <el-row>
        <el-col v-for="(o, index) in list" class="card" :key="index" :span="7" :xl="7" :lg="7" :md="7" :sm="24"
          :xs="24">
          <el-card @click="openForm('view', o)">
            <div style="display: flex;justify-content: space-between;align-items: center;margin-bottom: 5px;">
              <p style="width: 100%;white-space: nowrap;text-overflow: ellipsis;overflow: hidden;font-size: 16px;color:#000"
                :title="o.username">{{ o.username }}
              </p>
              <div v-show="!mobile" class="setting" @click.stop="openForm('update', o)"
                v-hasPermi="['system:user:update']">
                <el-icon size="20" color="rgb(220 223 231)">
                  <Setting />
                </el-icon>
              </div>
            </div>
            <div style="display:flex;align-items: center;">
              <div
							style="width: 46px;height: 65px;margin-right:10px;border:1px solid rgb(220 223 231);border-radius: 5px;display: flex;align-items: center;justify-content: center;overflow: hidden;">
							<img :src="o.avatar" style="width: 100%;" @error="o.avatar = 'https://mall-ffkj.oss-cn-guangzhou.aliyuncs.com/2e05b76706334aef023b85ec6aef6ffd4615aae3d06f302aa7d273e97f263025.png'"/>
						</div>

              <div style='line-height: 25px;'>
                <p>{{ o.deptName || "无部门" }}</p>
                <p>{{ o.mobile }}</p>
                <p>状态:{{ o.status == 0 ? "启用" : "停用" }}</p>
              </div>
            </div>
          </el-card>
        </el-col>
      </el-row>
      <div v-if="list.length == 0">
        <p style="text-align: center;margin-top: 100px;">暂无平台用户</p>
      </div>


      <Pagination :total="total" v-model:page="queryParams.pageNo" v-model:limit="queryParams.pageSize"
        @pagination="getList" />

    </el-col>
  </el-row>

  <!-- 添加或修改用户对话框 -->
  <!-- <UserForm ref="formRef" @success="getList" /> -->
  <UserTab ref="userTabRef" @success="getList" />
  <!-- 用户导入对话框 -->
  <UserImportForm ref="importFormRef" @success="getList" />
  <!-- 分配角色 -->
  <!-- <UserAssignRoleForm ref="assignRoleFormRef" @success="getList" /> -->
</template>
<script lang="ts" setup>
import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
import download from '@/utils/download'
import * as UserApi from '@/api/system/user'
import * as DeptApi from '@/api/system/dept'
const { currentRoute, push } = useRouter() // 路由跳转

import UserTab from './UserTab.vue'
import UserImportForm from './UserImportForm.vue'
import DeptTree from './DeptTree.vue'

defineOptions({ name: 'SystemUser' })

/*********************** 中星查询列表开始 **********************/

import { Setting, Search, Operation } from '@element-plus/icons-vue'
// 从路由中引入store中的app仓库
import { useAppStore } from '@/store/modules/app'
const appStore = useAppStore()
const mobile = computed(() => appStore.getMobile)

const searchMoreShow = ref(false)
// 打开更多搜索条件
const showSearchMore = () => {
  searchMoreShow.value = !searchMoreShow.value
}
const hideSearchMore = () => {
  searchMoreShow.value = false
}
/** 查看/添加/修改操作 */
const userTabRef = ref()
const openForm = (type: string, obj?: object) => {
  if (mobile.value) {
    const userObj = JSON.stringify(obj)
    // console.log(userObj)
		push({ name: 'UserMobileTab', query: { 'type':type,'obj':userObj } })
	} else {
    userTabRef.value.open(type, obj)
	}
}
const dept = ref([])
const getTree = async () => {
  const res = await DeptApi.getSimpleDeptList()
  dept.value = res
}
/************************ 中星查询列表结束 ***************************/

const message = useMessage() // 消息弹窗
const { t } = useI18n() // 国际化

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 = () => {
  hideSearchMore()
  queryParams.pageNo = 1
  getList()
}

/** 重置按钮操作 */
const resetQuery = () => {
  hideSearchMore()
  queryFormRef.value?.resetFields()
  handleQuery()
}

/** 处理部门被点击 */
const handleDeptNodeClick = async (row) => {
  hideSearchMore()
  queryParams.deptId = row.id
  await getList()

}





/** 用户导入 */
const importFormRef = ref()
const handleImport = () => {
  importFormRef.value.open()
}



/** 导出按钮操作 */
const exportLoading = ref(false)
const handleExport = async () => {
  try {
    // 导出的二次确认
    await message.exportConfirm()
    // 发起导出
    exportLoading.value = true
    const data = await UserApi.exportUser(queryParams)
    download.excel(data, '用户数据.xls')
  } catch {
  } finally {
    exportLoading.value = false
  }
}




/** 初始化 */
onMounted(() => {
  getList()
  getTree()
})
</script>
<style src="@/styles/SearchIndex.css"  lang="scss" scoped></style>
<style lang="scss" scoped>
.setting {
  display: none !important;
}

.card:hover {
  .setting {
    display: block !important;

    .el-icon {
      margin-top: 5px;
    }
  }
}
</style>