wuyajie/daoyou_manage_web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

优化表格高度计算及组件引用调整

Browse Source
This commit is contained in:
wuyajie
2024-12-12 18:08:47 +08:00
parent a10ecd6609
commit 7b64f36c69
14 changed files with 1066 additions and 406 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/views/manage/dyUser/index.vue
+247 -104
View File
@@ -39,110 +39,110 @@
</div>
</transition>
<el-card shadow="never">
<!-- <template #header id="table_top">
<el-row :gutter="10" class="mb8">
<el-col :span="1.5">
<el-button type="success" plain icon="Edit" :disabled="single" @click="handleUpdate()" v-hasPermi="['manage:dyUser:edit']"
>封禁</el-button
>
</el-col>
<el-col :span="1.5">
<el-button type="danger" plain icon="Delete" :disabled="multiple" @click="handleDelete()" v-hasPermi="['manage:dyUser:remove']"
>注销</el-button
>
</el-col>
<right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
</el-row>
</template> -->
<el-table :height="autoTableHeight" v-loading="loading" :data="dyUserList" @selection-change="handleSelectionChange" style="width: 100%" border>
<el-table-column fixed type="selection" width="55" align="center" />
<el-table-column fixed label="用户ID" align="center" prop="id" />
<el-table-column fixed label="帐号状态" align="center" prop="status">
<template #default="scope">
<dict-tag :options="dy_user_status" :value="scope.row.status" />
</template>
</el-table-column>
<el-table-column fixed label="会员等级" align="center" prop="levelId" />
<el-table-column fixed label="昵称" align="center" prop="nickName" />
<el-table-column label="用户性别" align="center" prop="sex">
<template #default="scope">
<dict-tag :options="sys_user_sex" :value="scope.row.sex" />
</template>
</el-table-column>
<el-table-column label="头像" align="center" prop="">
<template #default="scope">
<img src="" width="30" height="30" lt="" />
</template>
</el-table-column>
<el-table-column label="背景图" align="center" prop="">
<template #default="scope">
<img src="" width="30" height="30" lt="" />
</template>
</el-table-column>
<el-table-column width="120" label="手机号码" align="center" prop="phone" />
<el-table-column width="130" label="绑定微信账号" align="center" prop="openId" />
<el-table-column label="生日" align="center" prop="birthday" width="100">
<template #default="scope">
<span>{{ parseTime(scope.row.birthday, '{y}-{m}-{d}') }}</span>
</template>
</el-table-column>
<el-table-column width="55" label="年龄" align="center" prop="age" />
<el-table-column width="150" label="常住地" align="center" prop="address" />
<el-table-column width="70" label="星座" align="center" prop="constellation" />
<el-table-column width="100" label="职业" align="center" prop="occupation" />
<el-table-column width="120" label="简介" align="center" prop="remark" />
<el-table-column width="80" label="IP形象" align="center" prop="" />
<el-table-column width="80" label="发布笔记" align="center" prop="">
<template #default="scope">
<span style="color: dodgerblue; cursor: pointer; text-decoration: underline" @click="openNoteListDialog(scope.row)">12</span>
</template>
</el-table-column>
<el-table-column width="90" label="发布的活动" align="center" prop="">
<template #default="scope">
<span style="color: dodgerblue; cursor: pointer; text-decoration: underline" @click="openPartyListDialog(scope.row)">15</span>
</template>
</el-table-column>
<el-table-column width="80" label="关注的人" align="center" prop="" />
<el-table-column width="80" label="粉丝数" align="center" prop="" />
<el-table-column width="90" label="点亮的景点" align="center" prop="">
<template #default="scope">
<span style="color: dodgerblue; cursor: pointer; text-decoration: underline" @click="openScenicListDialog(scope.row)">20</span>
</template>
</el-table-column>
<el-table-column width="90" label="点亮的城市" align="center" prop="">
<template #default="scope">
<span style="color: dodgerblue; cursor: pointer; text-decoration: underline" @click="openCityListDialog(scope.row)">25</span>
</template>
</el-table-column>
<el-table-column width="110" label="获得的明信片" align="center" prop="">
<template #default="scope">
<span style="color: dodgerblue; cursor: pointer; text-decoration: underline" @click="openPostcardListDialog(scope.row)">12</span>
</template>
</el-table-column>
<el-table-column width="80" label="我的愿望" align="center" prop="" />
<el-table-column width="80" label="我的背包" align="center" prop="" />
<el-table-column width="90" label="获得的物品" align="center" prop="" />
<el-table-column width="70" label="积分" align="center" prop="score" />
<el-table-column width="90" label="我的订单" align="center" prop="">
<template #default="scope">
<span style="color: dodgerblue; cursor: pointer" @click="openOrderListDialog(scope.row)">查看详情</span>
</template>
</el-table-column>
<el-table-column width="80" label="邀请人数" align="center" prop="">
<template #default="scope">
<span style="color: dodgerblue; cursor: pointer; text-decoration: underline" @click="openInviteListDialog(scope.row)">35</span>
</template>
</el-table-column>
<el-table-column width="80" label="处理方式" align="center" prop="" />
<el-table-column width="150" label="封禁理由" align="center" prop="reason" show-overflow-tooltip />
<el-table-column width="80" label="封禁天数" align="center" prop="banDays">
<template #default="scope">
<dict-tag :options="dy_user_ban_days" :value="scope.row.banDays" />
</template>
</el-table-column>
<el-table-column width="120" label="操作时间" align="center" prop="" />
<el-table-column width="90" label="操作人" align="center" prop="" />
<el-table-column fixed="right" label="操作" min-width="120">
<template #default="scope">
<el-button link type="primary" size="small" @click="openbanned(scope.row)">封禁</el-button>
<!-- <el-button link type="primary" size="small">权限</el-button> -->
</template>
</el-table-column>
</el-table>
<el-table :height="autoTableHeight" v-loading="loading" :data="dyUserList" @selection-change="handleSelectionChange" style="width: 100%" border>
<el-table-column fixed type="selection" width="55" align="center" />
<el-table-column fixed label="用户ID" align="center" prop="id" v-if="true" />
<el-table-column fixed label="帐号状态" align="center" prop="status">
<template #default="scope">
<dict-tag :options="dy_user_status" :value="scope.row.status" />
</template>
</el-table-column>
<el-table-column fixed label="会员等级" align="center" prop="leveId" />
<el-table-column fixed label="昵称" align="center" prop="nickName" />
<el-table-column label="用户性别" align="center" prop="sex">
<template #default="scope">
<dict-tag :options="sys_user_sex" :value="scope.row.sex" />
</template>
</el-table-column>
<el-table-column label="头像" align="center" prop="">
<template #default="scope">
<img src="" width="30" height="30" lt="" />
</template>
</el-table-column>
<el-table-column label="背景图" align="center" prop="">
<template #default="scope">
<img src="" width="30" height="30" lt="" />
</template>
</el-table-column>
<el-table-column width="120" label="手机号码" align="center" prop="phone" />
<el-table-column width="130" label="绑定微信账号" align="center" prop="openId" />
<el-table-column label="生日" align="center" prop="birthday" width="180">
<template #default="scope">
<span>{{ parseTime(scope.row.birthday, '{y}-{m}-{d}') }}</span>
</template>
</el-table-column>
<el-table-column width="55" label="年龄" align="center" prop="age" />
<el-table-column width="150" label="常住地" align="center" prop="address" />
<el-table-column width="55" label="星座" align="center" prop="constellation" />
<el-table-column width="100" label="职业" align="center" prop="occupation" />
<el-table-column width="120" label="简介" align="center" prop="remark" />
<el-table-column width="120" label="IP形象" align="center" prop="" />
<el-table-column width="120" label="发布的笔记" align="center" prop="" />
<el-table-column width="120" label="发布的活动" align="center" prop="" />
<el-table-column width="120" label="关注的人" align="center" prop="" />
<el-table-column width="120" label="粉丝数" align="center" prop="" />
<el-table-column width="120" label="到过的景点" align="center" prop="" />
<el-table-column width="120" label="点亮的城市" align="center" prop="" />
<el-table-column width="120" label="获得的明信片" align="center" prop="" />
<el-table-column width="120" label="我的愿望" align="center" prop="" />
<el-table-column width="120" label="我的背包" align="center" prop="" />
<el-table-column width="120" label="获得的物品" align="center" prop="" />
<el-table-column width="120" label="积分" align="center" prop="score" />
<el-table-column width="120" label="收藏" align="center" prop="" />
<el-table-column width="120" label="收货地址" align="center" prop="" />
<el-table-column width="120" label="我的订单" align="center" prop="" />
<el-table-column width="120" label="邀请人数" align="center" prop="" />
<el-table-column width="120" label="处理方式" align="center" prop="" />
<el-table-column width="130" label="封禁理由" align="center" prop="reason" show-overflow-tooltip />
<el-table-column width="100" label="封禁天数" align="center" prop="banDays">
<template #default="scope">
<dict-tag :options="dy_user_ban_days" :value="scope.row.banDays" />
</template>
</el-table-column>
<el-table-column width="120" label="操作时间" align="center" prop="" />
<el-table-column width="120" label="操作人" align="center" prop="" />
<!-- <el-table-column label="最后登录IP" width="100" align="center" prop="loginIp" />
<el-table-column label="最后登录时间" align="center" prop="loginDate" width="180">
<template #default="scope">
<span>{{ parseTime(scope.row.loginDate, '{y}-{m}-{d}') }}</span>
</template>
</el-table-column> -->
<el-table-column fixed="right" label="操作" min-width="120">
<template #default="scope">
<el-button link type="primary" size="small" @click="openbanned(scope.row)">封禁</el-button>
<el-button link type="primary" size="small">权限</el-button>
</template>
</el-table-column>
</el-table>
<pagination
id="table_page"
v-show="total > 0"
:total="total"
v-model:page="queryParams.pageNum"
v-model:limit="queryParams.pageSize"
@pagination="getList"
/>
</el-card>
<pagination
id="table_page"
v-show="total > 0"
:total="total"
v-model:page="queryParams.pageNum"
v-model:limit="queryParams.pageSize"
@pagination="getList"
/>
<!-- 添加或修改C端用户信息对话框 -->
<el-dialog :title="dialog.title" v-model="dialog.visible" width="500px" append-to-body center>
<el-form ref="dyUserFormRef" :model="form" :rules="rules" label-width="80px">
@@ -169,6 +169,84 @@
</div>
</template>
</el-dialog>
<!-- 笔记列表 -->
<el-dialog title="发布的笔记" v-model="noteListDialog" width="1200px" append-to-body>
<noteList :articleList="articleList" :autoTableHeight="300" parentName="dyUser"></noteList>
<template #footer>
<div class="dialog-footer">
<el-button @click="cancel">关 闭</el-button>
</div>
</template>
</el-dialog>
<!-- 活动列表 -->
<el-dialog title="发布的活动" v-model="partyListDialog" width="1200px" append-to-body>
<partyList :articleList="partyLists" :autoTableHeight="300" parentName="dyUser"></partyList>
<template #footer>
<div class="dialog-footer">
<el-button @click="cancel">关 闭</el-button>
</div>
</template>
</el-dialog>
<!-- 点亮的景点 -->
<el-dialog title="点亮的景点" v-model="scenicListDialog" width="500px" append-to-body>
<el-table :height="300" v-loading="loading" :data="scenicList" @selection-change="handleSelectionChange" border>
<el-table-column label="景点名称" align="center" fixed prop="" />
<el-table-column label="打卡时间" align="center" fixed prop="" />
</el-table>
<template #footer>
<div class="dialog-footer">
<el-button @click="cancel">关 闭</el-button>
</div>
</template>
</el-dialog>
<!-- 点亮的城市 -->
<el-dialog title="点亮的城市" v-model="cityListDialog" width="500px" append-to-body>
<el-table :height="300" v-loading="loading" :data="scenicList" @selection-change="handleSelectionChange" border>
<el-table-column label="城市名称" align="center" fixed prop="" />
<el-table-column label="打卡时间" align="center" fixed prop="" />
</el-table>
<template #footer>
<div class="dialog-footer">
<el-button @click="cancel">关 闭</el-button>
</div>
</template>
</el-dialog>
<!-- 获得的明信片 -->
<el-dialog title="获得的明信片" v-model="postcardListDialog" width="600px" append-to-body>
<el-table :height="300" v-loading="loading" :data="postcardList" @selection-change="handleSelectionChange" border>
<el-table-column label="景点名称" align="center" fixed prop="" />
<el-table-column label="明信片" align="center" fixed prop="" />
<el-table-column label="获得日期" align="center" fixed prop="" />
<el-table-column label="邮寄地址" align="center" fixed prop="" />
</el-table>
<template #footer>
<div class="dialog-footer">
<el-button @click="cancel">关 闭</el-button>
</div>
</template>
</el-dialog>
<!-- 用户邀请人数 -->
<el-dialog title="邀请人数" v-model="inviteListDialog" width="500px" append-to-body>
<el-table :height="300" v-loading="loading" :data="inviteList" @selection-change="handleSelectionChange" border>
<el-table-column label="用户名称" align="center" fixed prop="" />
<el-table-column label="用户头像" align="center" fixed prop="" />
<el-table-column label="邀请日期" align="center" fixed prop="" />
</el-table>
<template #footer>
<div class="dialog-footer">
<el-button @click="cancel">关 闭</el-button>
</div>
</template>
</el-dialog>
<!-- 用户订单 -->
<el-dialog title="用户订单" v-model="orderListDialog" width="1000px" append-to-body>
<orderList :orderList="orderLists" :autoTableHeight="300" parentName="dyUser"></orderList>
<template #footer>
<div class="dialog-footer">
<el-button @click="cancel">关 闭</el-button>
</div>
</template>
</el-dialog>
</div>
</template>
@@ -180,7 +258,11 @@ const { proxy } = getCurrentInstance() as ComponentInternalInstance;
const { dy_user_ban_days, dy_user_status, sys_user_sex, dy_user_ban_mode } = toRefs<any>(
proxy?.useDict('dy_user_ban_days', 'dy_user_status', 'sys_user_sex', 'dy_user_ban_mode')
);
const orderLists = ref([]); //用户订单列表
const scenicList = ref([]); //用户点亮的景点
const articleList = ref([]); //用户笔记列表
const partyLists = ref([]); //用户活动列表
const postcardList = ref([]); //用户明信片列表
const dyUserList = ref<DyUserVO[]>([]);
const buttonLoading = ref(false);
const loading = ref(true);
@@ -278,6 +360,13 @@ const getList = async () => {
const cancel = () => {
reset();
dialog.visible = false;
noteListDialog.value = false;
partyListDialog.value = false;
scenicListDialog.value = false;
cityListDialog.value = false;
postcardListDialog.value = false;
inviteListDialog.value = false;
orderListDialog.value = false;
};
/** 表单重置 */
@@ -347,6 +436,60 @@ const openbanned = async (row: DyUserVO) => {
dialog.visible = true;
dialog.rowData = row;
};
/**
* 打开笔记列表弹层
* @param row
*/
const noteListDialog = ref(false);
const openNoteListDialog = async (row: DyUserVO) => {
noteListDialog.value = true;
};
/**
* 打开活动列表弹层
*/
const partyListDialog = ref(false);
const openPartyListDialog = async (row: DyUserVO) => {
partyListDialog.value = true;
};
/**
* 用户点亮的景点
*/
const scenicListDialog = ref(false);
const openScenicListDialog = async (row: DyUserVO) => {
scenicListDialog.value = true;
};
/**
* 用户点亮的城市
*/
const cityListDialog = ref(false);
const openCityListDialog = async (row: DyUserVO) => {
cityListDialog.value = true;
};
/**
* 用户获得的明信片
*/
const postcardListDialog = ref(false);
const openPostcardListDialog = async (row: DyUserVO) => {
postcardListDialog.value = true;
};
/**
* 打开我的订单
*/
const orderListDialog = ref(false);
const openOrderListDialog = async (row: DyUserVO) => {
orderListDialog.value = true;
};
/**
* 用户邀请列表
*/
const inviteList = ref([]); //用户邀请列表
const inviteListDialog = ref(false);
const openInviteListDialog = async (row: DyUserVO) => {
inviteListDialog.value = true;
};
/**
* 封禁用户
*/