'接口联调、封装弹窗组件'
This commit is contained in:
张磊
@@ -4,258 +4,96 @@
|
||||
<el-form ref="queryFormRef" :model="queryParams" :inline="true">
|
||||
<el-form-item label="关键词" prop="keyword">
|
||||
<el-input v-model="queryParams.keyword" placeholder="用户名/昵称" clearable style="width: 200px"
|
||||
@keyup.enter="handleQuery" />
|
||||
</el-form-item>
|
||||
<el-form-item label="状态" prop="state">
|
||||
<el-select v-model="queryParams.state" placeholder="状态" clearable style="width: 200px"
|
||||
@keyup.enter="handleQuery">
|
||||
<el-option value="2" label="分析列表"></el-option>
|
||||
<el-option value="3" label="问题列表"></el-option>
|
||||
</el-select>
|
||||
@keyup.enter="loadList" />
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" :icon="Search" @click="handleQuery">
|
||||
搜索
|
||||
</el-button>
|
||||
<el-button :icon="Refresh" @click="resetQuery">
|
||||
重置
|
||||
</el-button>
|
||||
<el-button type="primary" :icon="Search" @click="loadList">搜索</el-button>
|
||||
<el-button :icon="Refresh" @click="resetQuery">重置</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
|
||||
<el-table v-loading="loading" :data="userList" border stripe style="width: 100%">
|
||||
<el-table-column prop="username" label="用户名" align="center" />
|
||||
<el-table-column prop="username" label="用户名" align="center">
|
||||
<template #default="{ row }">
|
||||
{{ row.username || row.nickname }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="nickname" label="昵称" align="center" />
|
||||
<el-table-column prop="mobile" label="手机号" align="center" />
|
||||
<el-table-column prop="district" label="地区" align="center" />
|
||||
<el-table-column prop="gender_text" label="性别" align="center" />
|
||||
<el-table-column prop="birthday_text" label="年龄" align="center" />
|
||||
|
||||
<el-table-column prop="created_at" label="创建时间" align="center" />
|
||||
<el-table-column prop="status" label="状态" align="center">
|
||||
<template #default="{ row }">
|
||||
<el-tag>
|
||||
{{ statusData[row.state] }}
|
||||
</el-tag>
|
||||
<el-tag>{{ statusData[row.state] }}</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="detection_number" label="总检测次数" align="center" />
|
||||
<el-table-column label="操作" align="center" width="150">
|
||||
<template #default="{ row }">
|
||||
<el-button text @click="archiveDetail(row)">详情</el-button>
|
||||
<el-button text @click="handleOperation(row)">操作</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
|
||||
<pagination v-if="total > 0" :total="total" v-model:page="queryParams.page" v-model:limit="queryParams.size"
|
||||
@pagination="handleQuery" />
|
||||
<pagination :total="total" v-model:page="queryParams.page" v-model:limit="queryParams.size"
|
||||
@pagination="loadList" />
|
||||
</el-card>
|
||||
|
||||
|
||||
<!-- 用户授权门店列表弹窗 -->
|
||||
<el-dialog v-model="authStoreUserListDialogVisible" title="用户授权门店列表" width="940px">
|
||||
<el-table v-loading="authStoreUserListLoading" :data="authStorelists" border stripe style="width: 100%">
|
||||
<el-table-column prop="name" label="门店名称" align="center" />
|
||||
<el-table-column prop="user_name" label="管理门店的用户名" align="center" />
|
||||
<el-table-column prop="user_mobile" label="电话" align="center" />
|
||||
<el-table-column prop="district_text" label="地区" align="center" />
|
||||
<el-table-column prop="validity_time" label="授权到期时间" align="center" />
|
||||
<el-table-column prop="status" label="状态" align="center"><template #default="{ row }">
|
||||
<el-tag>
|
||||
{{ authStatusData[row.status] }}
|
||||
</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</el-dialog>
|
||||
<!-- 用户操作弹窗 -->
|
||||
<el-dialog v-model="userOperationDialogVisible" title="用户操作" width="640px">
|
||||
<el-form ref="userOperationFormRef" :model="userOperationForm" :rules="userOperationFormRules"
|
||||
label-width="120px">
|
||||
<el-form-item label="操作" prop="operation">
|
||||
<el-select v-model="userOperationForm.state" placeholder="请选择操作" style="width: 100%">
|
||||
<el-option value="3" label="有问题"></el-option>
|
||||
<el-option value="4" label="已退款"></el-option>
|
||||
<el-option value="5" label="正常"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<template #footer>
|
||||
<el-button @click="userOperationDialogVisible = false">取消</el-button>
|
||||
<el-button type="primary" @click="userOperationSubmit">确定</el-button>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { reactive, ref, onMounted } from 'vue';
|
||||
import { getUserList, getUserarchive, getUserarchiveDetail, getUserAuthStoreList, getUserDetectionList, userDetectionOperation } from '@/api/user';
|
||||
import { reactive, ref } from 'vue';
|
||||
import { getUserDetectionList } from '@/api/user';
|
||||
import { ElMessage } from 'element-plus';
|
||||
import { Search, Refresh } from '@element-plus/icons-vue';
|
||||
const statusData = {
|
||||
|
||||
const statusData: Record<number, string> = {
|
||||
1: '检测过一次',
|
||||
2: '分析中',
|
||||
3: '已退款',
|
||||
4: '正常'
|
||||
}
|
||||
const authStatusData = {
|
||||
1: '授权中',
|
||||
2: '已过期'
|
||||
}
|
||||
const loading = ref(false);
|
||||
const userOperationDialogVisible = ref(false);
|
||||
const userOperationFormRef = ref();
|
||||
const userOperationForm = reactive({
|
||||
state: null
|
||||
})
|
||||
const userOperationFormRules = reactive({
|
||||
state: [{ required: true, message: '请选择操作', trigger: 'change' }]
|
||||
})
|
||||
3: '有问题',
|
||||
4: '已退款',
|
||||
5: '正常',
|
||||
};
|
||||
|
||||
const loading = ref(false);
|
||||
const total = ref(0);
|
||||
const userList = ref<any[]>([]);
|
||||
const queryFormRef = ref();
|
||||
const authStoreUserListDialogVisible = ref(false)
|
||||
const authStoreUserListLoading = ref(false)
|
||||
const authStorelists = ref<any[]>([])
|
||||
// 档案弹窗相关
|
||||
const archiveDialogVisible = ref(false);
|
||||
const archiveLoading = ref(false);
|
||||
const archiveTotal = ref(0);
|
||||
const archiveList = ref<any[]>([]);
|
||||
const currentUserId = ref<number | null>(null);
|
||||
const archiveParams = reactive({
|
||||
page: 1,
|
||||
size: 10
|
||||
});
|
||||
const handleOperation = (row: any) => {
|
||||
userOperationDialogVisible.value = true;
|
||||
userOperationForm.id = row.id;
|
||||
userOperationForm.state = null;
|
||||
userOperationFormRef.value?.resetFields();
|
||||
}
|
||||
const userOperationSubmit = () => {
|
||||
userOperationFormRef.value?.validate((valid) => {
|
||||
if (valid) {
|
||||
userDetectionOperation(userOperationForm).then(({ data }: any) => {
|
||||
console.log(data, 'data用户检测操作')
|
||||
ElMessage.success('操作成功');
|
||||
userOperationDialogVisible.value = false;
|
||||
handleQuery();
|
||||
})
|
||||
.catch((err: any) => {
|
||||
ElMessage.error(err.message || '操作失败');
|
||||
})
|
||||
.finally(() => {
|
||||
loading.value = false;
|
||||
});
|
||||
}
|
||||
})
|
||||
}
|
||||
const authStoreUserList = (row: any) => {
|
||||
authStoreUserListDialogVisible.value = true;
|
||||
authStoreUserListLoading.value = true;
|
||||
getUserAuthStoreList({ user_id: row.id }).then(({ data }: any) => {
|
||||
console.log(data, 'data授权门店列表')
|
||||
authStorelists.value = data;
|
||||
})
|
||||
.catch((err: any) => {
|
||||
ElMessage.error(err.message || '获取用户授权门店列表失败');
|
||||
})
|
||||
.finally(() => {
|
||||
authStoreUserListLoading.value = false;
|
||||
});
|
||||
}
|
||||
// 打开档案弹窗
|
||||
function openArchiveDialog(row: any) {
|
||||
currentUserId.value = row.id;
|
||||
archiveDialogVisible.value = true;
|
||||
archiveParams.page = 1;
|
||||
archiveParams.size = 10;
|
||||
loadArchive();
|
||||
}
|
||||
|
||||
// 加载档案列表
|
||||
function loadArchive() {
|
||||
if (!currentUserId.value) return;
|
||||
archiveLoading.value = true;
|
||||
getUserarchive({ user_id: currentUserId.value, ...archiveParams })
|
||||
.then(({ data }: any) => {
|
||||
const list = Array.isArray(data) ? data : data?.data ?? data?.list ?? [];
|
||||
archiveList.value = list;
|
||||
archiveTotal.value =
|
||||
typeof data?.total === 'number' ? data.total : Array.isArray(data) ? data.length : list.length;
|
||||
})
|
||||
.catch((err: any) => {
|
||||
ElMessage.error(err.message || '获取用户档案失败');
|
||||
})
|
||||
.finally(() => {
|
||||
archiveLoading.value = false;
|
||||
});
|
||||
}
|
||||
|
||||
const queryParams = reactive({
|
||||
page: 1,
|
||||
size: 10,
|
||||
keyword: '',
|
||||
state: null,
|
||||
});
|
||||
|
||||
function handleQuery() {
|
||||
function normalizePageData(data: any): { list: any[]; total: number } {
|
||||
if (Array.isArray(data)) return { list: data, total: data.length };
|
||||
const list = data?.list ?? data?.data ?? [];
|
||||
const total = Number(data?.total);
|
||||
return { list, total: Number.isFinite(total) ? total : list.length };
|
||||
}
|
||||
|
||||
// 加载列表
|
||||
const loadList = () => {
|
||||
loading.value = true;
|
||||
getUserDetectionList(queryParams)
|
||||
.then(({ data }: any) => {
|
||||
userList.value = data;
|
||||
.then(({ data }) => {
|
||||
const { list, total: t } = normalizePageData(data);
|
||||
userList.value = list;
|
||||
total.value = t;
|
||||
})
|
||||
.catch((err: any) => {
|
||||
ElMessage.error(err.message || '获取用户列表失败');
|
||||
})
|
||||
.finally(() => {
|
||||
loading.value = false;
|
||||
});
|
||||
}
|
||||
//用户档案详情
|
||||
const archiveDetail = async (row) => {
|
||||
const res = await getUserarchiveDetail({ id: row.id });
|
||||
console.log(res, 'res用户档案详情')
|
||||
}
|
||||
function resetQuery() {
|
||||
.catch((err: any) => ElMessage.error(err.message || '获取用户列表失败'))
|
||||
.finally(() => (loading.value = false));
|
||||
};
|
||||
|
||||
// 重置
|
||||
const resetQuery = () => {
|
||||
queryFormRef.value?.resetFields();
|
||||
queryParams.page = 1;
|
||||
handleQuery();
|
||||
}
|
||||
loadList();
|
||||
};
|
||||
|
||||
function handleSizeChange(size: number) {
|
||||
queryParams.size = size;
|
||||
queryParams.page = 1;
|
||||
handleQuery();
|
||||
}
|
||||
|
||||
function handleCurrentChange(page: number) {
|
||||
queryParams.page = page;
|
||||
handleQuery();
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
handleQuery();
|
||||
});
|
||||
loadList();
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.app-container {
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.avatar-thumb {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.archive-cover {
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user