|
|
@@ -0,0 +1,179 @@
|
|
|
+<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>
|
