anxine-htgl/src/views/userManage/index.vue

<template>
  <div class="app-container">
    <div v-show="!detailState.show">
      <transition name="fade">
        <el-form ref="queryFormRef" :model="queryParams" :inline="true" label-width="70px">
          <el-form-item label="搜索：" prop="keywords">
            <el-input v-model="queryParams.keywords" placeholder="请输入用户ID/账号" clearable @keyup.enter="handleQuery"/>
          </el-form-item>
          <el-form-item label="用户昵称：" prop="nickname">
            <el-input v-model="queryParams.nickname" placeholder="请输入用户昵称" clearable @keyup.enter="handleQuery"/>
          </el-form-item>
          <el-form-item label="注册时间：">
            <el-date-picker
              v-model="dataRange"
              type="datetimerange"
              start-placeholder="开始时间"
              end-placeholder="结束时间"
              format="YYYY-MM-DD HH:mm:ss"
              value-format="YYYY-MM-DD HH:mm:ss"
              date-format="YYYY/MM/DD"
              time-format="hh:mm:ss"
            />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="handleQuery">搜索</el-button>
            <el-button @click="resetQuery">重置</el-button>
          </el-form-item>
        </el-form>
      </transition>
      <el-row :gutter="10" class="mb8" style="margin-top: 10px">
        <el-col :span="1.5">
          <el-button type="danger" plain icon="Delete" :disabled="multiple" @click="handleDelete(selectedRow)">删除
          </el-button>
        </el-col>
        <el-col :span="1.5">
          <el-button type="warning" plain icon="Download" @click="handleExport">导出</el-button>
        </el-col>
      </el-row>
      <!-- 表格组件 -->
      <el-table ref="multipleTable" v-loading="loading" :data="dataList" @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="55" align="center"/>
        <el-table-column label="用户ID" align="center" prop="id"/>
        <el-table-column label="用户账号" align="center" prop="account"/>
        <el-table-column label="用户昵称" align="center" prop="nickname"/>
        <el-table-column label="注册时间" align="center" prop="registerTime"/>
        <el-table-column label="上次登录时间" align="center" prop="lastLoginTime"/>
        <el-table-column label="消费金额" align="center" prop="amount"/>
        <el-table-column label="订单数量" align="center" prop="orderAmount"/>
        <el-table-column label="账户状态" align="center" prop="accountStatus">
          <template #default="scope">
            <el-switch v-model="scope.row.accountStatus" inline-prompt active-text="ON" inactive-text="OFF"
                       @change="handleStatusChange(scope.row)"/>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
          <template #default="scope">
            <el-text class="common-btn-text-primary" @click="handleView(scope.row)">查看</el-text>
            <el-text class="common-btn-text-primary" @click="handleEdit(scope.row)">编辑</el-text>
            <el-text class="common-btn-text-danger" @click="handleDelete(scope.row)">删除</el-text>
          </template>
        </el-table-column>
      </el-table>

      <pagination v-show="total > 0" v-model:page="queryParams.page" v-model:limit="queryParams.page_size"
                  :total="total" @pagination="getList"/>
    </div>
    <UserDetails v-if="detailState.show" :id="detailState.show" @back="handleBack"/>
  </div>
</template>

<script setup name="UserManage">
import UserDetails from '@/views/userManage/userDetails.vue';
import {addDateRange2} from '@/utils/ruoyi.js';

const {proxy} = getCurrentInstance();
const queryFormRef = ref();
// 搜索条件
const queryParams = reactive({
  keywords: '',
  nickname: '',
  page: 1,
  page_size: 10
});
const dataRange = ref([]);
// 表格数据
const dataList = ref([]);
// 加载中
const loading = ref(false);
// 总数
const total = ref(0);
// 表格选中的所有id
const ids = ref([]);
// 表格选中一个
const single = ref(true);
// 表格选中多个
const multiple = ref(true);
// 选中行的数据
const selectedRow = ref(null);
// 详情弹窗
const detailState = ref({
  show: false,
  id: ''
});

// 获取数据
const getList = () => {
  loading.value = true;
  const query = addDateRange2(queryParams, dataRange.value, 'startTime', 'endTime');
  console.log(query);
  setTimeout(() => {
    dataList.value = [{interfacesAmount: 20}];
    loading.value = false;
  }, 500);
};
// 点击查询
const handleQuery = () => {
  queryParams.page = 1;
  getList();
};

// 重置查询条件
const resetQuery = () => {
  dataRange.value = ['', ''];
  if (queryFormRef.value) {
    queryFormRef.value.resetFields(); // 重置表单并清除校验状态
  }
  queryParams.page = 1;
  getList();
};

// 删除按钮操作
const handleDelete = (row) => {
  proxy?.$modal.confirm('是否确认删除名称为"' + row.menuName + '"的数据项?').then(() => {
    getList();
    proxy?.$modal.msgSuccess('删除成功');
  });
};

const handleView = (row) => {
  detailState.value = {
    show: true,
    id: row.id
  };
};

const handleEdit = () => {
};

// 多选框选中数据
const handleSelectionChange = (selection) => {
  ids.value = selection.map((item) => item.reportId);
  selectedRow.value = selection.length === 1 ? selection[0] : null;
  single.value = selection.length != 1;
  multiple.value = !selection.length;
};

//导入
const handleImport = () => {
};

// 导出
const handleExport = () => {
};

// 修改状态
const handleStatusChange = (status) => {
};

const handleBack = () => {
  detailState.value = {
    show: false,
    id: ''
  };
};

getList();
</script>

<style lang="scss" scoped></style>