优化用户界面及功能,调整表格高度和搜索框宽度

This commit is contained in:
2024-12-11 17:43:35 +08:00
parent dc10df8f64
commit a10ecd6609
25 changed files with 2744 additions and 174 deletions
+2 -2
View File
@@ -2,9 +2,9 @@
<div class="app-container home">
<el-row :gutter="20">
<el-col :sm="24" :lg="12" style="padding-left: 20px">
<h2>RuoYi-Vue-Plus多租户管理系统</h2>
<h2>岛游后台管理系统</h2>
<p>
RuoYi-Vue-Plus 是基于 RuoYi-Vue 针对 分布式集群 场景升级(不兼容原框架)
岛游后台管理系统 是基于 RuoYi-Vue 针对 分布式集群 场景升级(不兼容原框架)
<br />
* 前端开发框架 Vue3TSElement Plus<br />
* 后端开发框架 Spring Boot<br />
+6 -6
View File
@@ -1,13 +1,13 @@
<template>
<div class="login">
<el-form ref="loginRef" :model="loginForm" :rules="loginRules" class="login-form">
<h3 class="title">岛游管理系统</h3>
<el-form-item v-if="tenantEnabled" prop="tenantId">
<h2 class="title">岛游后台管理系统</h2>
<!-- <el-form-item v-if="tenantEnabled" prop="tenantId">
<el-select v-model="loginForm.tenantId" filterable placeholder="请选择/输入公司名称" style="width: 100%">
<el-option v-for="item in tenantList" :key="item.tenantId" :label="item.companyName" :value="item.tenantId"></el-option>
<template #prefix><svg-icon icon-class="company" class="el-input__icon input-icon" /></template>
</el-select>
</el-form-item>
</el-form-item> -->
<el-form-item prop="username">
<el-input v-model="loginForm.username" type="text" size="large" auto-complete="off" placeholder="账号">
<template #prefix><svg-icon icon-class="user" class="el-input__icon input-icon" /></template>
@@ -27,7 +27,7 @@
</div>
</el-form-item>
<el-checkbox v-model="loginForm.rememberMe" style="margin: 0 0 25px 0">记住密码</el-checkbox>
<el-form-item style="float: right">
<!-- <el-form-item style="float: right">
<el-button circle title="微信登录" @click="doSocialLogin('wechat')">
<svg-icon icon-class="wechat" />
</el-button>
@@ -43,7 +43,7 @@
<el-button circle title="Github登录" @click="doSocialLogin('github')">
<svg-icon icon-class="github" />
</el-button>
</el-form-item>
</el-form-item> -->
<el-form-item style="width: 100%">
<el-button :loading="loading" size="large" type="primary" style="width: 100%" @click.prevent="handleLogin">
<span v-if="!loading"> </span>
@@ -56,7 +56,7 @@
</el-form>
<!-- 底部 -->
<div class="el-login-footer">
<span>Copyright © 2018-2024 疯狂的狮子Li All Rights Reserved.</span>
<span>Copyright © 2024 岛游 All Rights Reserved.</span>
</div>
</div>
</template>
+326
View File
@@ -0,0 +1,326 @@
<!-- 文章管理列表 -->
<template>
<div class="p-2">
<transition :enter-active-class="proxy?.animate.searchAnimate.enter" :leave-active-class="proxy?.animate.searchAnimate.leave">
<div v-show="showSearch" class="mb-[10px]" id="search_div">
<el-card shadow="hover">
<el-form ref="queryFormRef" :model="queryParams" :inline="true" label-width="70px">
<el-form-item label="文章标题" prop="">
<el-input class="inputWidth" placeholder="请输入文章标题" clearable @keyup.enter="handleQuery" />
</el-form-item>
<el-form-item label="发布状态" prop="">
<el-select class="inputWidth" v-model="queryParams.status" placeholder="请选择发布状态" clearable>
<el-option v-for="dict in note_publish_list" :key="dict.value" :label="dict.label" :value="dict.value" />
</el-select>
</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" plain icon="Plus" @click="handleAdd" v-hasPermi="['system:article:add']">新增</el-button>
<el-button type="success" plain icon="Edit" :disabled="single" @click="handleUpdate()" v-hasPermi="['system:article:edit']"
>修改</el-button
>
<el-button type="danger" plain icon="Delete" :disabled="multiple" @click="handleDelete()" v-hasPermi="['system:article:remove']"
>删除</el-button
>
</el-form-item>
</el-form>
</el-card>
</div>
</transition>
<el-card shadow="never">
<el-table :height="autoTableHeight" v-loading="loading" :data="articleList" @selection-change="handleSelectionChange" border>
<el-table-column type="selection" width="55" align="center" />
<el-table-column label="ID" align="center" prop="id" v-if="true" />
<el-table-column label="文章标题" align="center" prop="" />
<el-table-column label="线路标签" align="center" prop="" />
<el-table-column label="文章内容" align="center" prop="" />
<el-table-column label="喜欢数" align="center" prop="" />
<el-table-column label="线路评论数" align="center" prop="" />
<el-table-column label="发布状态" align="center" prop="" />
<el-table-column label="操作" align="center" class-name="small-padding fixed-width">
<template #default="scope">
<el-tooltip content="编辑" placement="top">
<el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)" v-hasPermi="['system:article:edit']"></el-button>
</el-tooltip>
<el-tooltip content="发布" placement="top">
<el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)" v-hasPermi="['system:article:edit']"></el-button>
</el-tooltip>
<el-tooltip content="删除" placement="top">
<el-button link type="primary" icon="Delete" @click="handleDelete(scope.row)" v-hasPermi="['system:article:remove']"></el-button>
</el-tooltip>
</template>
</el-table-column>
</el-table>
<pagination
v-show="total > 0"
id="table_page"
:total="total"
v-model:page="queryParams.pageNum"
v-model:limit="queryParams.pageSize"
@pagination="getList"
/>
</el-card>
<!-- 添加或修改景点租赁管理对话框 -->
<el-dialog :title="dialog.title" v-model="dialog.visible" width="500px" append-to-body>
<el-form ref="articleFormRef" :model="form" :rules="rules" label-width="80px">
<el-form-item label="开放/营业" prop="isOpen">
<el-input v-model="form.isOpen" placeholder="请输入开放/营业" />
</el-form-item>
<el-form-item label="景点属性/商家属性" prop="attribute">
<el-input v-model="form.attribute" placeholder="请输入景点属性/商家属性" />
</el-form-item>
<el-form-item label="省code" prop="province">
<el-input v-model="form.province" placeholder="请输入省code" />
</el-form-item>
<el-form-item label="市/区" prop="city">
<el-input v-model="form.city" placeholder="请输入市/区" />
</el-form-item>
<el-form-item label="个人简介" prop="remark">
<el-input v-model="form.remark" placeholder="请输入个人简介" />
</el-form-item>
<el-form-item label="会员等级" prop="memberLevel">
<el-input v-model="form.memberLevel" placeholder="请输入会员等级" />
</el-form-item>
<el-form-item label="标签" prop="tagId">
<el-input v-model="form.tagId" placeholder="请输入标签" />
</el-form-item>
<el-form-item label="推荐语" prop="recommend">
<el-input v-model="form.recommend" placeholder="请输入推荐语" />
</el-form-item>
<el-form-item label="介绍" prop="intro">
<el-input v-model="form.intro" type="textarea" placeholder="请输入内容" />
</el-form-item>
<el-form-item label="详细地址" prop="address">
<el-input v-model="form.address" placeholder="请输入详细地址" />
</el-form-item>
<el-form-item label="经度" prop="longitude">
<el-input v-model="form.longitude" placeholder="请输入经度" />
</el-form-item>
<el-form-item label="纬度" prop="latitude">
<el-input v-model="form.latitude" placeholder="请输入纬度" />
</el-form-item>
<el-form-item label="排序" prop="orderNum">
<el-input v-model="form.orderNum" placeholder="请输入排序" />
</el-form-item>
<el-form-item label="景区等级" prop="level">
<el-input v-model="form.level" placeholder="请输入景区等级" />
</el-form-item>
</el-form>
<template #footer>
<div class="dialog-footer">
<el-button :loading="buttonLoading" type="primary" @click="submitForm"> </el-button>
<el-button @click="cancel"> </el-button>
</div>
</template>
</el-dialog>
</div>
</template>
<script setup name="Article" lang="ts">
import { listArticle, getArticle, delArticle, addArticle, updateArticle } from '@/api/manage/article';
import { ArticleVO, ArticleQuery, ArticleForm } from '@/api/manage/article/types';
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
const autoTableHeight = ref<number>(750);
const articleList = ref<ArticleVO[]>([]);
const buttonLoading = ref(false);
const loading = ref(true);
const showSearch = ref(true);
const ids = ref<Array<string | number>>([]);
const single = ref(true);
const multiple = ref(true);
const total = ref(0);
const note_publish_list = ref([
{ label: '已发布', value: 1 },
{ label: '未发布', value: 2 }
]);
const queryFormRef = ref<ElFormInstance>();
const articleFormRef = ref<ElFormInstance>();
const dialog = reactive<DialogOption>({
visible: false,
title: ''
});
const initFormData: ArticleForm = {
id: undefined,
type: undefined,
secondType: undefined,
isOpen: undefined,
attribute: undefined,
status: undefined,
province: undefined,
city: undefined,
remark: undefined,
memberLevel: undefined,
tagId: undefined,
recommend: undefined,
intro: undefined,
address: undefined,
longitude: undefined,
latitude: undefined,
orderNum: undefined,
level: undefined
};
const data = reactive<PageData<ArticleForm, ArticleQuery>>({
form: { ...initFormData },
queryParams: {
pageNum: 1,
pageSize: 10,
type: undefined,
secondType: undefined,
isOpen: undefined,
attribute: undefined,
status: undefined,
province: undefined,
city: undefined,
memberLevel: undefined,
tagId: undefined,
recommend: undefined,
intro: undefined,
address: undefined,
longitude: undefined,
latitude: undefined,
orderNum: undefined,
level: undefined,
params: {}
},
rules: {
id: [{ required: true, message: '景点ID/租赁ID/游艇ID不能为空', trigger: 'blur' }],
type: [{ required: true, message: '类别 景点-0、租赁-1 游艇-2不能为空', trigger: 'change' }],
secondType: [{ required: true, message: '二级类别不能为空', trigger: 'change' }],
isOpen: [{ required: true, message: '开放/营业不能为空', trigger: 'blur' }],
attribute: [{ required: true, message: '景点属性/商家属性不能为空', trigger: 'blur' }],
status: [{ required: true, message: '状态 0-未发布 1-审核中 2-发布不能为空', trigger: 'change' }],
province: [{ required: true, message: '省code不能为空', trigger: 'blur' }],
city: [{ required: true, message: '市/区不能为空', trigger: 'blur' }],
remark: [{ required: true, message: '个人简介不能为空', trigger: 'blur' }],
memberLevel: [{ required: true, message: '会员等级不能为空', trigger: 'blur' }],
tagId: [{ required: true, message: '标签不能为空', trigger: 'blur' }],
recommend: [{ required: true, message: '推荐语不能为空', trigger: 'blur' }],
intro: [{ required: true, message: '介绍不能为空', trigger: 'blur' }],
address: [{ required: true, message: '详细地址不能为空', trigger: 'blur' }],
longitude: [{ required: true, message: '经度不能为空', trigger: 'blur' }],
latitude: [{ required: true, message: '纬度不能为空', trigger: 'blur' }],
orderNum: [{ required: true, message: '排序不能为空', trigger: 'blur' }],
level: [{ required: true, message: '景区等级不能为空', trigger: 'blur' }]
}
});
const { queryParams, form, rules } = toRefs(data);
onMounted(() => {
getList();
nextTick(() => {
autoTableHeight.value = proxy?.autoTableHeight();
});
window.onresize = () => {
autoTableHeight.value = proxy?.autoTableHeight();
};
});
/** 查询景点、租赁管理列表 */
const getList = async () => {
loading.value = true;
const res = await listArticle(queryParams.value).finally(() => (loading.value = false));
articleList.value = res.rows;
total.value = res.total;
loading.value = false;
};
/** 取消按钮 */
const cancel = () => {
reset();
dialog.visible = false;
};
/** 表单重置 */
const reset = () => {
form.value = { ...initFormData };
articleFormRef.value?.resetFields();
};
/** 搜索按钮操作 */
const handleQuery = () => {
queryParams.value.pageNum = 1;
getList();
};
/** 重置按钮操作 */
const resetQuery = () => {
queryFormRef.value?.resetFields();
handleQuery();
};
/** 多选框选中数据 */
const handleSelectionChange = (selection: ArticleVO[]) => {
ids.value = selection.map((item) => item.id);
single.value = selection.length != 1;
multiple.value = !selection.length;
};
/** 新增按钮操作 */
const handleAdd = () => {
reset();
dialog.visible = true;
dialog.title = '添加景点、租赁管理';
};
/** 修改按钮操作 */
const handleUpdate = async (row?: ArticleVO) => {
reset();
const _id = row?.id || ids.value[0];
const res = await getArticle(_id);
Object.assign(form.value, res.data);
dialog.visible = true;
dialog.title = '修改景点、租赁管理';
};
/** 提交按钮 */
const submitForm = () => {
articleFormRef.value?.validate(async (valid: boolean) => {
if (valid) {
buttonLoading.value = true;
if (form.value.id) {
await updateArticle(form.value).finally(() => (buttonLoading.value = false));
} else {
await addArticle(form.value).finally(() => (buttonLoading.value = false));
}
proxy?.$modal.msgSuccess('操作成功');
dialog.visible = false;
await getList();
}
});
};
/** 删除按钮操作 */
const handleDelete = async (row?: ArticleVO) => {
const _ids = row?.id || ids.value;
await proxy?.$modal.confirm('是否确认删除景点、租赁管理编号为"' + _ids + '"的数据项?').finally(() => (loading.value = false));
await delArticle(_ids);
proxy?.$modal.msgSuccess('删除成功');
await getList();
};
/** 导出按钮操作 */
const handleExport = () => {
proxy?.download(
'system/article/export',
{
...queryParams.value
},
`article_${new Date().getTime()}.xlsx`
);
};
</script>
<style lang="scss" scoped>
.el-card :deep(.el-card__body) {
padding-bottom: 0px !important;
}
#table_page {
height: 50px !important;
margin-top: 10px !important;
padding-bottom: 10px !important;
}
</style>
+384
View File
@@ -0,0 +1,384 @@
<!-- banner管理列表 -->
<template>
<div class="p-2">
<transition :enter-active-class="proxy?.animate.searchAnimate.enter" :leave-active-class="proxy?.animate.searchAnimate.leave">
<div v-show="showSearch" class="mb-[10px]" id="search_div">
<el-card shadow="hover">
<el-form ref="queryFormRef" :model="queryParams" :inline="true" label-width="70px">
<el-form-item label="banner名称" prop="" label-width="90px">
<el-input class="inputWidth" placeholder="请输入banner名称" clearable @keyup.enter="handleQuery" />
</el-form-item>
<el-form-item label="发布状态" prop="">
<el-select class="inputWidth" v-model="queryParams.status" placeholder="请选择发布状态" clearable>
<el-option v-for="dict in note_publish_list" :key="dict.value" :label="dict.label" :value="dict.value" />
</el-select>
</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" plain icon="Plus" @click="handleAdd" v-hasPermi="['system:article:add']">新增</el-button>
<el-button type="success" plain icon="Edit" :disabled="single" @click="handleUpdate()" v-hasPermi="['system:article:edit']"
>修改</el-button
>
<el-button type="danger" plain icon="Delete" :disabled="multiple" @click="handleDelete()" v-hasPermi="['system:article:remove']"
>删除</el-button
>
</el-form-item>
</el-form>
</el-card>
</div>
</transition>
<el-tabs type="border-card">
<el-tab-pane label="发现页banner">
<el-table :height="autoTableHeight" v-loading="loading" :data="articleList" @selection-change="handleSelectionChange" border>
<el-table-column label="banner名称" align="center" prop="" />
<el-table-column label="图片" align="center" prop="" />
<el-table-column label="跳转地址" align="center" prop="" />
<el-table-column label="排序" align="center" prop="" />
<el-table-column label="操作人" align="center" prop="" />
<el-table-column label="操作时间" align="center" prop="" />
<el-table-column label="状态" align="center" prop="" />
<el-table-column label="操作" align="center" class-name="small-padding fixed-width">
<template #default="scope">
<el-tooltip content="编辑" placement="top">
<el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)" v-hasPermi="['system:article:edit']"></el-button>
</el-tooltip>
<el-tooltip content="下架" placement="top">
<el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)" v-hasPermi="['system:article:edit']"></el-button>
</el-tooltip>
<el-tooltip content="上架" placement="top">
<el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)" v-hasPermi="['system:article:edit']"></el-button>
</el-tooltip>
<el-tooltip content="删除" placement="top">
<el-button link type="primary" icon="Delete" @click="handleDelete(scope.row)" v-hasPermi="['system:article:remove']"></el-button>
</el-tooltip>
</template>
</el-table-column>
</el-table>
</el-tab-pane>
<el-tab-pane label="租车图片">
<el-table :height="autoTableHeight" v-loading="loading" :data="articleList" @selection-change="handleSelectionChange" border>
<el-table-column label="banner名称" align="center" prop="" />
<el-table-column label="图片" align="center" prop="" />
<el-table-column label="跳转地址" align="center" prop="" />
<el-table-column label="排序" align="center" prop="" />
<el-table-column label="操作人" align="center" prop="" />
<el-table-column label="操作时间" align="center" prop="" />
<el-table-column label="状态" align="center" prop="" />
<el-table-column label="操作" align="center" class-name="small-padding fixed-width">
<template #default="scope">
<el-tooltip content="编辑" placement="top">
<el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)" v-hasPermi="['system:article:edit']"></el-button>
</el-tooltip>
<el-tooltip content="下架" placement="top">
<el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)" v-hasPermi="['system:article:edit']"></el-button>
</el-tooltip>
<el-tooltip content="上架" placement="top">
<el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)" v-hasPermi="['system:article:edit']"></el-button>
</el-tooltip>
<el-tooltip content="删除" placement="top">
<el-button link type="primary" icon="Delete" @click="handleDelete(scope.row)" v-hasPermi="['system:article:remove']"></el-button>
</el-tooltip>
</template>
</el-table-column>
</el-table>
</el-tab-pane>
<el-tab-pane label="租游艇图片">
<el-table :height="autoTableHeight" v-loading="loading" :data="articleList" @selection-change="handleSelectionChange" border>
<el-table-column label="banner名称" align="center" prop="" />
<el-table-column label="图片" align="center" prop="" />
<el-table-column label="跳转地址" align="center" prop="" />
<el-table-column label="排序" align="center" prop="" />
<el-table-column label="操作人" align="center" prop="" />
<el-table-column label="操作时间" align="center" prop="" />
<el-table-column label="状态" align="center" prop="" />
<el-table-column label="操作" align="center" class-name="small-padding fixed-width">
<template #default="scope">
<el-tooltip content="编辑" placement="top">
<el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)" v-hasPermi="['system:article:edit']"></el-button>
</el-tooltip>
<el-tooltip content="下架" placement="top">
<el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)" v-hasPermi="['system:article:edit']"></el-button>
</el-tooltip>
<el-tooltip content="上架" placement="top">
<el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)" v-hasPermi="['system:article:edit']"></el-button>
</el-tooltip>
<el-tooltip content="删除" placement="top">
<el-button link type="primary" icon="Delete" @click="handleDelete(scope.row)" v-hasPermi="['system:article:remove']"></el-button>
</el-tooltip>
</template>
</el-table-column>
</el-table>
</el-tab-pane>
</el-tabs>
<pagination
v-show="total > 0"
id="table_page"
:total="total"
v-model:page="queryParams.pageNum"
v-model:limit="queryParams.pageSize"
@pagination="getList"
/>
<!-- 添加或修改景点租赁管理对话框 -->
<el-dialog :title="dialog.title" v-model="dialog.visible" width="500px" append-to-body>
<el-form ref="articleFormRef" :model="form" :rules="rules" label-width="80px">
<el-form-item label="开放/营业" prop="isOpen">
<el-input v-model="form.isOpen" placeholder="请输入开放/营业" />
</el-form-item>
<el-form-item label="景点属性/商家属性" prop="attribute">
<el-input v-model="form.attribute" placeholder="请输入景点属性/商家属性" />
</el-form-item>
<el-form-item label="省code" prop="province">
<el-input v-model="form.province" placeholder="请输入省code" />
</el-form-item>
<el-form-item label="市/区" prop="city">
<el-input v-model="form.city" placeholder="请输入市/区" />
</el-form-item>
<el-form-item label="个人简介" prop="remark">
<el-input v-model="form.remark" placeholder="请输入个人简介" />
</el-form-item>
<el-form-item label="会员等级" prop="memberLevel">
<el-input v-model="form.memberLevel" placeholder="请输入会员等级" />
</el-form-item>
<el-form-item label="标签" prop="tagId">
<el-input v-model="form.tagId" placeholder="请输入标签" />
</el-form-item>
<el-form-item label="推荐语" prop="recommend">
<el-input v-model="form.recommend" placeholder="请输入推荐语" />
</el-form-item>
<el-form-item label="介绍" prop="intro">
<el-input v-model="form.intro" type="textarea" placeholder="请输入内容" />
</el-form-item>
<el-form-item label="详细地址" prop="address">
<el-input v-model="form.address" placeholder="请输入详细地址" />
</el-form-item>
<el-form-item label="经度" prop="longitude">
<el-input v-model="form.longitude" placeholder="请输入经度" />
</el-form-item>
<el-form-item label="纬度" prop="latitude">
<el-input v-model="form.latitude" placeholder="请输入纬度" />
</el-form-item>
<el-form-item label="排序" prop="orderNum">
<el-input v-model="form.orderNum" placeholder="请输入排序" />
</el-form-item>
<el-form-item label="景区等级" prop="level">
<el-input v-model="form.level" placeholder="请输入景区等级" />
</el-form-item>
</el-form>
<template #footer>
<div class="dialog-footer">
<el-button :loading="buttonLoading" type="primary" @click="submitForm"> </el-button>
<el-button @click="cancel"> </el-button>
</div>
</template>
</el-dialog>
</div>
</template>
<script setup name="Article" lang="ts">
import { listArticle, getArticle, delArticle, addArticle, updateArticle } from '@/api/manage/article';
import { ArticleVO, ArticleQuery, ArticleForm } from '@/api/manage/article/types';
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
const autoTableHeight = ref<number>(750);
const articleList = ref<ArticleVO[]>([]);
const buttonLoading = ref(false);
const loading = ref(true);
const showSearch = ref(true);
const ids = ref<Array<string | number>>([]);
const single = ref(true);
const multiple = ref(true);
const total = ref(0);
const queryFormRef = ref<ElFormInstance>();
const articleFormRef = ref<ElFormInstance>();
const note_publish_list = ref([
{ label: '已发布', value: 1 },
{ label: '未发布', value: 2 }
]);
const dialog = reactive<DialogOption>({
visible: false,
title: ''
});
const initFormData: ArticleForm = {
id: undefined,
type: undefined,
secondType: undefined,
isOpen: undefined,
attribute: undefined,
status: undefined,
province: undefined,
city: undefined,
remark: undefined,
memberLevel: undefined,
tagId: undefined,
recommend: undefined,
intro: undefined,
address: undefined,
longitude: undefined,
latitude: undefined,
orderNum: undefined,
level: undefined
};
const data = reactive<PageData<ArticleForm, ArticleQuery>>({
form: { ...initFormData },
queryParams: {
pageNum: 1,
pageSize: 10,
type: undefined,
secondType: undefined,
isOpen: undefined,
attribute: undefined,
status: undefined,
province: undefined,
city: undefined,
memberLevel: undefined,
tagId: undefined,
recommend: undefined,
intro: undefined,
address: undefined,
longitude: undefined,
latitude: undefined,
orderNum: undefined,
level: undefined,
params: {}
},
rules: {
id: [{ required: true, message: '景点ID/租赁ID/游艇ID不能为空', trigger: 'blur' }],
type: [{ required: true, message: '类别 景点-0、租赁-1 游艇-2不能为空', trigger: 'change' }],
secondType: [{ required: true, message: '二级类别不能为空', trigger: 'change' }],
isOpen: [{ required: true, message: '开放/营业不能为空', trigger: 'blur' }],
attribute: [{ required: true, message: '景点属性/商家属性不能为空', trigger: 'blur' }],
status: [{ required: true, message: '状态 0-未发布 1-审核中 2-发布不能为空', trigger: 'change' }],
province: [{ required: true, message: '省code不能为空', trigger: 'blur' }],
city: [{ required: true, message: '市/区不能为空', trigger: 'blur' }],
remark: [{ required: true, message: '个人简介不能为空', trigger: 'blur' }],
memberLevel: [{ required: true, message: '会员等级不能为空', trigger: 'blur' }],
tagId: [{ required: true, message: '标签不能为空', trigger: 'blur' }],
recommend: [{ required: true, message: '推荐语不能为空', trigger: 'blur' }],
intro: [{ required: true, message: '介绍不能为空', trigger: 'blur' }],
address: [{ required: true, message: '详细地址不能为空', trigger: 'blur' }],
longitude: [{ required: true, message: '经度不能为空', trigger: 'blur' }],
latitude: [{ required: true, message: '纬度不能为空', trigger: 'blur' }],
orderNum: [{ required: true, message: '排序不能为空', trigger: 'blur' }],
level: [{ required: true, message: '景区等级不能为空', trigger: 'blur' }]
}
});
const { queryParams, form, rules } = toRefs(data);
onMounted(() => {
getList();
nextTick(() => {
autoTableHeight.value = proxy?.autoTableHeight();
});
window.onresize = () => {
autoTableHeight.value = proxy?.autoTableHeight();
};
});
/** 查询景点、租赁管理列表 */
const getList = async () => {
loading.value = true;
const res = await listArticle(queryParams.value).finally(() => (loading.value = false));
articleList.value = res.rows;
total.value = res.total;
loading.value = false;
};
/** 取消按钮 */
const cancel = () => {
reset();
dialog.visible = false;
};
/** 表单重置 */
const reset = () => {
form.value = { ...initFormData };
articleFormRef.value?.resetFields();
};
/** 搜索按钮操作 */
const handleQuery = () => {
queryParams.value.pageNum = 1;
getList();
};
/** 重置按钮操作 */
const resetQuery = () => {
queryFormRef.value?.resetFields();
handleQuery();
};
/** 多选框选中数据 */
const handleSelectionChange = (selection: ArticleVO[]) => {
ids.value = selection.map((item) => item.id);
single.value = selection.length != 1;
multiple.value = !selection.length;
};
/** 新增按钮操作 */
const handleAdd = () => {
reset();
dialog.visible = true;
dialog.title = '添加景点、租赁管理';
};
/** 修改按钮操作 */
const handleUpdate = async (row?: ArticleVO) => {
reset();
const _id = row?.id || ids.value[0];
const res = await getArticle(_id);
Object.assign(form.value, res.data);
dialog.visible = true;
dialog.title = '修改景点、租赁管理';
};
/** 提交按钮 */
const submitForm = () => {
articleFormRef.value?.validate(async (valid: boolean) => {
if (valid) {
buttonLoading.value = true;
if (form.value.id) {
await updateArticle(form.value).finally(() => (buttonLoading.value = false));
} else {
await addArticle(form.value).finally(() => (buttonLoading.value = false));
}
proxy?.$modal.msgSuccess('操作成功');
dialog.visible = false;
await getList();
}
});
};
/** 删除按钮操作 */
const handleDelete = async (row?: ArticleVO) => {
const _ids = row?.id || ids.value;
await proxy?.$modal.confirm('是否确认删除景点、租赁管理编号为"' + _ids + '"的数据项?').finally(() => (loading.value = false));
await delArticle(_ids);
proxy?.$modal.msgSuccess('删除成功');
await getList();
};
/** 导出按钮操作 */
const handleExport = () => {
proxy?.download(
'system/article/export',
{
...queryParams.value
},
`article_${new Date().getTime()}.xlsx`
);
};
</script>
<style lang="scss" scoped>
.el-card :deep(.el-card__body) {
padding-bottom: 0px !important;
}
#table_page {
height: 50px !important;
margin-top: 10px !important;
padding-bottom: 10px !important;
}
</style>
+168 -83
View File
@@ -1,32 +1,38 @@
<!-- 用户列表 -->
<template>
<div class="p-2">
<transition :enter-active-class="proxy?.animate.searchAnimate.enter"
:leave-active-class="proxy?.animate.searchAnimate.leave">
<div v-show="showSearch" class="mb-[10px]">
<transition :enter-active-class="proxy?.animate.searchAnimate.enter" :leave-active-class="proxy?.animate.searchAnimate.leave">
<div v-show="showSearch" class="mb-[10px]" id="search_div">
<el-card shadow="hover">
<el-form ref="queryFormRef" :model="queryParams" :inline="true">
<el-form ref="queryFormRef" :model="queryParams" :inline="true" label-width="80px">
<el-form-item label="用户昵称" prop="nickName">
<el-input v-model="queryParams.nickName" placeholder="请输入用户昵称" clearable @keyup.enter="handleQuery" />
<el-input class="inputWidth" v-model="queryParams.nickName" placeholder="请输入用户昵称" clearable @keyup.enter="handleQuery" />
</el-form-item>
<el-form-item label="手机号码" prop="phone">
<el-input v-model="queryParams.phone" placeholder="请输入手机号码" clearable @keyup.enter="handleQuery" />
<el-input class="inputWidth" v-model="queryParams.phone" placeholder="请输入手机号码" clearable @keyup.enter="handleQuery" />
</el-form-item>
<el-form-item label="用户性别" prop="sex">
<el-select v-model="queryParams.sex" placeholder="请选择用户性别" clearable>
<el-select class="inputWidth" v-model="queryParams.sex" placeholder="请选择用户性别" clearable>
<el-option v-for="dict in sys_user_sex" :key="dict.value" :label="dict.label" :value="dict.value" />
</el-select>
</el-form-item>
<el-form-item label="帐号状态" prop="status">
<el-select v-model="queryParams.status" placeholder="请选择帐号状态" clearable>
<el-select class="inputWidth" v-model="queryParams.status" placeholder="请选择帐号状态" clearable>
<el-option v-for="dict in dy_user_status" :key="dict.value" :label="dict.label" :value="dict.value" />
</el-select>
</el-form-item>
<el-form-item label="会员等级" prop="leveId">
<el-input v-model="queryParams.leveId" placeholder="请输入会员等级" clearable @keyup.enter="handleQuery" />
<el-input class="inputWidth" v-model="queryParams.leveId" placeholder="请输入会员等级" clearable @keyup.enter="handleQuery" />
</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="success" plain icon="Edit" :disabled="single" @click="handleUpdate()" v-hasPermi="['manage:dyUser:edit']"
>封禁</el-button
> -->
<el-button type="danger" plain icon="Delete" :disabled="multiple" @click="handleDelete()" v-hasPermi="['manage:dyUser:remove']"
>注销</el-button
>
</el-form-item>
</el-form>
</el-card>
@@ -34,88 +40,131 @@
</transition>
<el-card shadow="never">
<template #header>
<!-- <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-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-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>
</template> -->
<el-table v-loading="loading" :data="dyUserList" @selection-change="handleSelectionChange" style="width: 100%">
<el-table-column type="selection" width="55" align="center" />
<el-table-column label="用户ID" align="center" prop="id" v-if="true" />
<el-table-column label="帐号状态" align="center" prop="status">
<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 label="会员等级" align="center" prop="leveId" />
<el-table-column label="昵称" align="center" prop="nickName" />
<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 width="110" label="手机号码" align="center" prop="phone"/>
<el-table-column width="130" label="绑定微信账号" align="center" prop="openId"/>
<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="积分" align="center" prop="score"/>
<el-table-column width="130" label="封禁理由" align="center" prop="reason"/>
<el-table-column width="100" label="封禁天数" align="center" prop="banDays">
<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 label="最后登录IP" width="100" align="center" prop="loginIp"/>
<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 v-show="total > 0" :total="total" v-model:page="queryParams.pageNum"
v-model:limit="queryParams.pageSize" @pagination="getList" />
<pagination
id="table_page"
v-show="total > 0"
:total="total"
v-model:page="queryParams.pageNum"
v-model:limit="queryParams.pageSize"
@pagination="getList"
/>
</el-card>
<!-- 添加或修改C端用户信息对话框 -->
<el-dialog :title="dialog.title" v-model="dialog.visible" width="500px" append-to-body>
<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">
<el-form-item label="封禁理由" prop="reason">
<el-input v-model="form.reason" placeholder="请输入封禁理由" />
<el-form-item label="封禁原因" prop="reason">
<el-select v-model="form.reason" placeholder="请选择封禁原因">
<el-option v-for="dict in dy_user_ban_mode" :key="dict.value" :label="dict.label" :value="parseInt(dict.value)"></el-option>
</el-select>
</el-form-item>
<el-form-item label="封禁状态" prop="status">
<el-form-item label="处理方式" prop="status">
<el-radio-group v-model="form.status">
<el-radio v-for="dict in dy_user_status" :key="dict.value" :label="dict.label"
:value="parseInt(dict.value)">{{dict.label}}</el-radio>
<el-radio v-for="dict in dy_user_status" :key="dict.value" :label="dict.label" :value="parseInt(dict.value)">{{ dict.label }}</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="封禁天数" prop="banDays">
<el-form-item label="处理天数" prop="banDays">
<el-select v-model="form.banDays" placeholder="请选择封禁天数">
<el-option v-for="dict in dy_user_ban_days" :key="dict.value" :label="dict.label"
:value="parseInt(dict.value)"></el-option>
<el-option v-for="dict in dy_user_ban_days" :key="dict.value" :label="dict.label" :value="parseInt(dict.value)"></el-option>
</el-select>
</el-form-item>
</el-form>
<template #footer>
<div class="dialog-footer">
<el-button :loading="buttonLoading" type="primary" @click="submitForm"> </el-button>
<el-button :loading="buttonLoading" type="primary" @click="bannedUser"> </el-button>
<el-button @click="cancel"> </el-button>
</div>
</template>
@@ -128,7 +177,9 @@ import { listDyUser, getDyUser, delDyUser, addDyUser, updateDyUser } from '@/api
import { DyUserVO, DyUserQuery, DyUserForm } from '@/api/manage/dyUser/types';
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
const { dy_user_ban_days, dy_user_status, sys_user_sex } = toRefs<any>(proxy?.useDict('dy_user_ban_days', 'dy_user_status', 'sys_user_sex'));
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 dyUserList = ref<DyUserVO[]>([]);
const buttonLoading = ref(false);
@@ -138,15 +189,16 @@ const ids = ref<Array<string | number>>([]);
const single = ref(true);
const multiple = ref(true);
const total = ref(0);
const autoTableHeight = ref<number>(750);
const queryFormRef = ref<ElFormInstance>();
const dyUserFormRef = ref<ElFormInstance>();
const dialog = reactive<DialogOption>({
rowData: {} as DyUserVO,
visible: false,
title: ''
});
const initFormData: DyUserForm = {
id: undefined,
nickName: undefined,
@@ -169,7 +221,7 @@ const initFormData: DyUserForm = {
banDays: undefined,
longitude: undefined,
latitude: undefined
}
};
const data = reactive<PageData<DyUserForm, DyUserQuery>>({
form: { ...initFormData },
queryParams: {
@@ -194,21 +246,25 @@ const data = reactive<PageData<DyUserForm, DyUserQuery>>({
banDays: undefined,
longitude: undefined,
latitude: undefined,
params: {
}
params: {}
},
rules: {
id: [
{ required: true, message: "用户ID不能为空", trigger: "blur" }
],
leveId: [
{ required: true, message: "会员等级不能为空", trigger: "blur" }
],
reason: [{ required: true, message: '请选择封禁原因', trigger: 'blur' }],
status: [{ required: true, message: '请选择处理方式', trigger: 'blur' }],
banDays: [{ required: true, message: '请选择处理天数', trigger: 'blur' }]
}
});
const { queryParams, form, rules } = toRefs(data);
onMounted(() => {
getList();
nextTick(() => {
autoTableHeight.value = proxy?.autoTableHeight();
});
window.onresize = () => {
autoTableHeight.value = proxy?.autoTableHeight();
};
});
/** 查询C端用户信息列表 */
const getList = async () => {
loading.value = true;
@@ -216,48 +272,48 @@ const getList = async () => {
dyUserList.value = res.rows;
total.value = res.total;
loading.value = false;
}
};
/** 取消按钮 */
const cancel = () => {
reset();
dialog.visible = false;
}
};
/** 表单重置 */
const reset = () => {
form.value = { ...initFormData };
dyUserFormRef.value?.resetFields();
}
};
/** 搜索按钮操作 */
const handleQuery = () => {
queryParams.value.pageNum = 1;
getList();
}
};
/** 重置按钮操作 */
const resetQuery = () => {
queryFormRef.value?.resetFields();
handleQuery();
}
};
/** 多选框选中数据 */
const handleSelectionChange = (selection: DyUserVO[]) => {
ids.value = selection.map(item => item.id);
ids.value = selection.map((item) => item.id);
single.value = selection.length != 1;
multiple.value = !selection.length;
}
};
/** 修改按钮操作 */
const handleUpdate = async (row?: DyUserVO) => {
reset();
const _id = row?.id || ids.value[0]
const _id = row?.id || ids.value[0];
const res = await getDyUser(_id);
Object.assign(form.value, res.data);
dialog.visible = true;
dialog.title = "封禁用户";
}
dialog.title = '封禁用户';
};
/** 提交按钮 */
const submitForm = () => {
@@ -265,34 +321,63 @@ const submitForm = () => {
if (valid) {
buttonLoading.value = true;
if (form.value.id) {
await updateDyUser(form.value).finally(() => buttonLoading.value = false);
await updateDyUser(form.value).finally(() => (buttonLoading.value = false));
} else {
await addDyUser(form.value).finally(() => buttonLoading.value = false);
await addDyUser(form.value).finally(() => (buttonLoading.value = false));
}
proxy?.$modal.msgSuccess("操作成功");
proxy?.$modal.msgSuccess('操作成功');
dialog.visible = false;
await getList();
}
});
}
};
/** 删除按钮操作 */
const handleDelete = async (row?: DyUserVO) => {
const _ids = row?.id || ids.value;
await proxy?.$modal.confirm('是否确认删除C端用户信息编号为"' + _ids + '"的数据项?').finally(() => loading.value = false);
await proxy?.$modal.confirm('是否确认删除C端用户信息编号为"' + _ids + '"的数据项?').finally(() => (loading.value = false));
await delDyUser(_ids);
proxy?.$modal.msgSuccess("删除成功");
proxy?.$modal.msgSuccess('删除成功');
await getList();
}
onMounted(() => {
getList();
});
};
// 列表 操作项
//打开封禁弹层
const openbanned = async (row: DyUserVO) => {
dialog.title = `封禁【${row.nickName}`;
dialog.visible = true;
dialog.rowData = row;
};
/**
* 封禁用户
*/
const bannedUser = async () => {
dyUserFormRef.value?.validate(async (valid: boolean) => {
if (valid) {
buttonLoading.value = true;
form.value.id = dialog.rowData.id;
await updateDyUser(form.value).finally(() => (buttonLoading.value = false));
proxy?.$modal.msgSuccess('操作成功');
dialog.visible = false;
await getList();
}
});
};
</script>
<style scoped>
.el-table .cell {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
<style scoped lang="scss">
.el-table .cell {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.inputWidth {
width: 130px;
}
.el-card :deep(.el-card__body) {
padding-bottom: 0px !important;
}
#table_page {
height: 50px !important;
margin-top: 10px !important;
padding-bottom: 10px !important;
}
</style>
+336
View File
@@ -0,0 +1,336 @@
<!-- 笔记列表 -->
<template>
<div class="p-2">
<transition :enter-active-class="proxy?.animate.searchAnimate.enter" :leave-active-class="proxy?.animate.searchAnimate.leave">
<div v-show="showSearch" class="mb-[10px]" id="search_div">
<el-card shadow="hover">
<el-form ref="queryFormRef" :model="queryParams" :inline="true" label-width="70px">
<el-form-item label="笔记标题" prop="">
<el-input class="inputWidth" placeholder="请输入笔记标题" clearable @keyup.enter="handleQuery" />
</el-form-item>
<el-form-item label="发布人" prop="">
<el-input class="inputWidth" placeholder="请输入发布人" clearable @keyup.enter="handleQuery" />
</el-form-item>
<el-form-item label="标记地点" prop="">
<el-input class="inputWidth" placeholder="请输入标记地点" clearable @keyup.enter="handleQuery" />
</el-form-item>
<el-form-item label="发布状态" prop="">
<el-select class="inputWidth" v-model="queryParams.status" placeholder="请选择发布状态" clearable>
<el-option v-for="dict in note_publish_list" :key="dict.value" :label="dict.label" :value="dict.value" />
</el-select>
</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" plain icon="Plus" @click="handleAdd" v-hasPermi="['system:article:add']">新增</el-button>
<el-button type="success" plain icon="Edit" :disabled="single" @click="handleUpdate()" v-hasPermi="['system:article:edit']"
>修改</el-button
>
<el-button type="danger" plain icon="Delete" :disabled="multiple" @click="handleDelete()" v-hasPermi="['system:article:remove']"
>删除</el-button
>
</el-form-item>
</el-form>
</el-card>
</div>
</transition>
<el-card shadow="never">
<el-table :height="autoTableHeight" v-loading="loading" :data="articleList" @selection-change="handleSelectionChange" border>
<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="" />
<el-table-column label="笔记封面" align="center" prop="" />
<el-table-column label="笔记类别" align="center" prop="" />
<el-table-column label="标记地点" align="center" prop="" />
<el-table-column label="标签" align="center" prop="" />
<el-table-column label="笔记详情" align="center" prop="" />
<el-table-column label="笔记评论数" align="center" prop="" />
<el-table-column label="笔记点赞数" align="center" prop="" />
<el-table-column label="发布状态" align="center" prop="" />
<el-table-column label="操作人" align="center" prop="" />
<el-table-column label="操作时间" align="center" prop="" />
<el-table-column label="操作" align="center" class-name="small-padding fixed-width">
<template #default="scope">
<el-tooltip content="编辑" placement="top">
<el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)" v-hasPermi="['system:article:edit']"></el-button>
</el-tooltip>
<el-tooltip content="发布" placement="top">
<el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)" v-hasPermi="['system:article:edit']"></el-button>
</el-tooltip>
<el-tooltip content="删除" placement="top">
<el-button link type="primary" icon="Delete" @click="handleDelete(scope.row)" v-hasPermi="['system:article:remove']"></el-button>
</el-tooltip>
</template>
</el-table-column>
</el-table>
<pagination
v-show="total > 0"
id="table_page"
:total="total"
v-model:page="queryParams.pageNum"
v-model:limit="queryParams.pageSize"
@pagination="getList"
/>
</el-card>
<!-- 添加或修改景点租赁管理对话框 -->
<el-dialog :title="dialog.title" v-model="dialog.visible" width="500px" append-to-body>
<el-form ref="articleFormRef" :model="form" :rules="rules" label-width="80px">
<el-form-item label="开放/营业" prop="isOpen">
<el-input v-model="form.isOpen" placeholder="请输入开放/营业" />
</el-form-item>
<el-form-item label="景点属性/商家属性" prop="attribute">
<el-input v-model="form.attribute" placeholder="请输入景点属性/商家属性" />
</el-form-item>
<el-form-item label="省code" prop="province">
<el-input v-model="form.province" placeholder="请输入省code" />
</el-form-item>
<el-form-item label="市/区" prop="city">
<el-input v-model="form.city" placeholder="请输入市/区" />
</el-form-item>
<el-form-item label="个人简介" prop="remark">
<el-input v-model="form.remark" placeholder="请输入个人简介" />
</el-form-item>
<el-form-item label="会员等级" prop="memberLevel">
<el-input v-model="form.memberLevel" placeholder="请输入会员等级" />
</el-form-item>
<el-form-item label="标签" prop="tagId">
<el-input v-model="form.tagId" placeholder="请输入标签" />
</el-form-item>
<el-form-item label="推荐语" prop="recommend">
<el-input v-model="form.recommend" placeholder="请输入推荐语" />
</el-form-item>
<el-form-item label="介绍" prop="intro">
<el-input v-model="form.intro" type="textarea" placeholder="请输入内容" />
</el-form-item>
<el-form-item label="详细地址" prop="address">
<el-input v-model="form.address" placeholder="请输入详细地址" />
</el-form-item>
<el-form-item label="经度" prop="longitude">
<el-input v-model="form.longitude" placeholder="请输入经度" />
</el-form-item>
<el-form-item label="纬度" prop="latitude">
<el-input v-model="form.latitude" placeholder="请输入纬度" />
</el-form-item>
<el-form-item label="排序" prop="orderNum">
<el-input v-model="form.orderNum" placeholder="请输入排序" />
</el-form-item>
<el-form-item label="景区等级" prop="level">
<el-input v-model="form.level" placeholder="请输入景区等级" />
</el-form-item>
</el-form>
<template #footer>
<div class="dialog-footer">
<el-button :loading="buttonLoading" type="primary" @click="submitForm"> </el-button>
<el-button @click="cancel"> </el-button>
</div>
</template>
</el-dialog>
</div>
</template>
<script setup name="Article" lang="ts">
import { listArticle, getArticle, delArticle, addArticle, updateArticle } from '@/api/manage/article';
import { ArticleVO, ArticleQuery, ArticleForm } from '@/api/manage/article/types';
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
const autoTableHeight = ref<number>(750);
const articleList = ref<ArticleVO[]>([]);
const buttonLoading = ref(false);
const loading = ref(true);
const showSearch = ref(true);
const ids = ref<Array<string | number>>([]);
const single = ref(true);
const multiple = ref(true);
const total = ref(0);
const note_publish_list = ref([
{ label: '已发布', value: 1 },
{ label: '未发布', value: 2 }
]);
const queryFormRef = ref<ElFormInstance>();
const articleFormRef = ref<ElFormInstance>();
const dialog = reactive<DialogOption>({
visible: false,
title: ''
});
const initFormData: ArticleForm = {
id: undefined,
type: undefined,
secondType: undefined,
isOpen: undefined,
attribute: undefined,
status: undefined,
province: undefined,
city: undefined,
remark: undefined,
memberLevel: undefined,
tagId: undefined,
recommend: undefined,
intro: undefined,
address: undefined,
longitude: undefined,
latitude: undefined,
orderNum: undefined,
level: undefined
};
const data = reactive<PageData<ArticleForm, ArticleQuery>>({
form: { ...initFormData },
queryParams: {
pageNum: 1,
pageSize: 10,
type: undefined,
secondType: undefined,
isOpen: undefined,
attribute: undefined,
status: undefined,
province: undefined,
city: undefined,
memberLevel: undefined,
tagId: undefined,
recommend: undefined,
intro: undefined,
address: undefined,
longitude: undefined,
latitude: undefined,
orderNum: undefined,
level: undefined,
params: {}
},
rules: {
id: [{ required: true, message: '景点ID/租赁ID/游艇ID不能为空', trigger: 'blur' }],
type: [{ required: true, message: '类别 景点-0、租赁-1 游艇-2不能为空', trigger: 'change' }],
secondType: [{ required: true, message: '二级类别不能为空', trigger: 'change' }],
isOpen: [{ required: true, message: '开放/营业不能为空', trigger: 'blur' }],
attribute: [{ required: true, message: '景点属性/商家属性不能为空', trigger: 'blur' }],
status: [{ required: true, message: '状态 0-未发布 1-审核中 2-发布不能为空', trigger: 'change' }],
province: [{ required: true, message: '省code不能为空', trigger: 'blur' }],
city: [{ required: true, message: '市/区不能为空', trigger: 'blur' }],
remark: [{ required: true, message: '个人简介不能为空', trigger: 'blur' }],
memberLevel: [{ required: true, message: '会员等级不能为空', trigger: 'blur' }],
tagId: [{ required: true, message: '标签不能为空', trigger: 'blur' }],
recommend: [{ required: true, message: '推荐语不能为空', trigger: 'blur' }],
intro: [{ required: true, message: '介绍不能为空', trigger: 'blur' }],
address: [{ required: true, message: '详细地址不能为空', trigger: 'blur' }],
longitude: [{ required: true, message: '经度不能为空', trigger: 'blur' }],
latitude: [{ required: true, message: '纬度不能为空', trigger: 'blur' }],
orderNum: [{ required: true, message: '排序不能为空', trigger: 'blur' }],
level: [{ required: true, message: '景区等级不能为空', trigger: 'blur' }]
}
});
const { queryParams, form, rules } = toRefs(data);
onMounted(() => {
getList();
nextTick(() => {
autoTableHeight.value = proxy?.autoTableHeight();
});
window.onresize = () => {
autoTableHeight.value = proxy?.autoTableHeight();
};
});
/** 查询景点、租赁管理列表 */
const getList = async () => {
loading.value = true;
const res = await listArticle(queryParams.value).finally(() => (loading.value = false));
articleList.value = res.rows;
total.value = res.total;
loading.value = false;
};
/** 取消按钮 */
const cancel = () => {
reset();
dialog.visible = false;
};
/** 表单重置 */
const reset = () => {
form.value = { ...initFormData };
articleFormRef.value?.resetFields();
};
/** 搜索按钮操作 */
const handleQuery = () => {
queryParams.value.pageNum = 1;
getList();
};
/** 重置按钮操作 */
const resetQuery = () => {
queryFormRef.value?.resetFields();
handleQuery();
};
/** 多选框选中数据 */
const handleSelectionChange = (selection: ArticleVO[]) => {
ids.value = selection.map((item) => item.id);
single.value = selection.length != 1;
multiple.value = !selection.length;
};
/** 新增按钮操作 */
const handleAdd = () => {
reset();
dialog.visible = true;
dialog.title = '添加景点、租赁管理';
};
/** 修改按钮操作 */
const handleUpdate = async (row?: ArticleVO) => {
reset();
const _id = row?.id || ids.value[0];
const res = await getArticle(_id);
Object.assign(form.value, res.data);
dialog.visible = true;
dialog.title = '修改景点、租赁管理';
};
/** 提交按钮 */
const submitForm = () => {
articleFormRef.value?.validate(async (valid: boolean) => {
if (valid) {
buttonLoading.value = true;
if (form.value.id) {
await updateArticle(form.value).finally(() => (buttonLoading.value = false));
} else {
await addArticle(form.value).finally(() => (buttonLoading.value = false));
}
proxy?.$modal.msgSuccess('操作成功');
dialog.visible = false;
await getList();
}
});
};
/** 删除按钮操作 */
const handleDelete = async (row?: ArticleVO) => {
const _ids = row?.id || ids.value;
await proxy?.$modal.confirm('是否确认删除景点、租赁管理编号为"' + _ids + '"的数据项?').finally(() => (loading.value = false));
await delArticle(_ids);
proxy?.$modal.msgSuccess('删除成功');
await getList();
};
/** 导出按钮操作 */
const handleExport = () => {
proxy?.download(
'system/article/export',
{
...queryParams.value
},
`article_${new Date().getTime()}.xlsx`
);
};
</script>
<style lang="scss" scoped>
.el-card :deep(.el-card__body) {
padding-bottom: 0px !important;
}
#table_page {
height: 50px !important;
margin-top: 10px !important;
padding-bottom: 10px !important;
}
</style>
+345
View File
@@ -0,0 +1,345 @@
<!-- 活动列表 -->
<template>
<div class="p-2">
<transition :enter-active-class="proxy?.animate.searchAnimate.enter" :leave-active-class="proxy?.animate.searchAnimate.leave">
<div v-show="showSearch" class="mb-[10px]" id="search_div">
<el-card shadow="hover">
<el-form ref="queryFormRef" :model="queryParams" :inline="true" label-width="70px">
<el-form-item label="行程路线" prop="">
<el-input class="inputWidth" placeholder="请输入行程路线" clearable @keyup.enter="handleQuery" />
</el-form-item>
<el-form-item label="线路地点" prop="">
<el-input class="inputWidth" placeholder="请输入线路地点" clearable @keyup.enter="handleQuery" />
</el-form-item>
<el-form-item label="线路类型" prop="">
<el-input class="inputWidth" placeholder="请输入线路类型" clearable @keyup.enter="handleQuery" />
</el-form-item>
<el-form-item label="发布状态" prop="">
<el-select class="inputWidth" v-model="queryParams.status" placeholder="请选择发布状态" clearable>
<el-option v-for="dict in note_publish_list" :key="dict.value" :label="dict.label" :value="dict.value" />
</el-select>
</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" plain icon="Plus" @click="handleAdd" v-hasPermi="['system:article:add']">新增</el-button>
<el-button type="success" plain icon="Edit" :disabled="single" @click="handleUpdate()" v-hasPermi="['system:article:edit']"
>编辑</el-button
>
<el-button type="danger" plain icon="Delete" :disabled="multiple" @click="handleDelete()" v-hasPermi="['system:article:remove']"
>删除</el-button
>
</el-form-item>
</el-form>
</el-card>
</div>
</transition>
<el-card shadow="never">
<el-table :height="autoTableHeight" v-loading="loading" :data="articleList" @selection-change="handleSelectionChange" border>
<el-table-column type="selection" width="55" align="center" />
<el-table-column label="ID" align="center" prop="id" fixed v-if="true" />
<el-table-column label="活动名称" align="center" fixed prop="" />
<el-table-column label="活动描述" align="center" fixed prop="" />
<el-table-column label="活动图片" align="center" prop="" />
<el-table-column label="排序" align="center" prop="" />
<el-table-column label="活动人数" align="center" prop="" />
<el-table-column label="报名人数" align="center" prop="" />
<el-table-column label="挑选玩友" align="center" prop="" />
<el-table-column label="活动时间" align="center" prop="" />
<el-table-column label="报名截止时间" align="center" prop="" width="120px" />
<el-table-column label="发布者地址" align="center" prop="" width="120px" />
<el-table-column label="活动地点" align="center" prop="" />
<el-table-column label="收费方式" align="center" prop="" />
<el-table-column label="活动流程" align="center" prop="" />
<el-table-column label="问答" align="center" prop="" />
<el-table-column label="发布状态" align="center" prop="" />
<el-table-column label="发布时间" align="center" prop="" />
<el-table-column label="发布人员" align="center" prop="" />
<el-table-column label="操作人员" align="center" prop="" />
<el-table-column label="操作时间" align="center" prop="" />
<el-table-column label="操作" align="center" width="150px" fixed="right" class-name="small-padding fixed-width">
<template #default="scope">
<el-tooltip content="编辑" placement="top">
<el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)" v-hasPermi="['system:article:edit']"></el-button>
</el-tooltip>
<el-tooltip content="发布" placement="top">
<el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)" v-hasPermi="['system:article:edit']"></el-button>
</el-tooltip>
<el-tooltip content="删除" placement="top">
<el-button link type="primary" icon="Delete" @click="handleDelete(scope.row)" v-hasPermi="['system:article:remove']"></el-button>
</el-tooltip>
</template>
</el-table-column>
</el-table>
<pagination
v-show="total > 0"
id="table_page"
:total="total"
v-model:page="queryParams.pageNum"
v-model:limit="queryParams.pageSize"
@pagination="getList"
/>
</el-card>
<!-- 添加或修改景点租赁管理对话框 -->
<el-dialog :title="dialog.title" v-model="dialog.visible" width="500px" append-to-body>
<el-form ref="articleFormRef" :model="form" :rules="rules" label-width="80px">
<el-form-item label="开放/营业" prop="isOpen">
<el-input v-model="form.isOpen" placeholder="请输入开放/营业" />
</el-form-item>
<el-form-item label="景点属性/商家属性" prop="attribute">
<el-input v-model="form.attribute" placeholder="请输入景点属性/商家属性" />
</el-form-item>
<el-form-item label="省code" prop="province">
<el-input v-model="form.province" placeholder="请输入省code" />
</el-form-item>
<el-form-item label="市/区" prop="city">
<el-input v-model="form.city" placeholder="请输入市/区" />
</el-form-item>
<el-form-item label="个人简介" prop="remark">
<el-input v-model="form.remark" placeholder="请输入个人简介" />
</el-form-item>
<el-form-item label="会员等级" prop="memberLevel">
<el-input v-model="form.memberLevel" placeholder="请输入会员等级" />
</el-form-item>
<el-form-item label="标签" prop="tagId">
<el-input v-model="form.tagId" placeholder="请输入标签" />
</el-form-item>
<el-form-item label="推荐语" prop="recommend">
<el-input v-model="form.recommend" placeholder="请输入推荐语" />
</el-form-item>
<el-form-item label="介绍" prop="intro">
<el-input v-model="form.intro" type="textarea" placeholder="请输入内容" />
</el-form-item>
<el-form-item label="详细地址" prop="address">
<el-input v-model="form.address" placeholder="请输入详细地址" />
</el-form-item>
<el-form-item label="经度" prop="longitude">
<el-input v-model="form.longitude" placeholder="请输入经度" />
</el-form-item>
<el-form-item label="纬度" prop="latitude">
<el-input v-model="form.latitude" placeholder="请输入纬度" />
</el-form-item>
<el-form-item label="排序" prop="orderNum">
<el-input v-model="form.orderNum" placeholder="请输入排序" />
</el-form-item>
<el-form-item label="景区等级" prop="level">
<el-input v-model="form.level" placeholder="请输入景区等级" />
</el-form-item>
</el-form>
<template #footer>
<div class="dialog-footer">
<el-button :loading="buttonLoading" type="primary" @click="submitForm"> </el-button>
<el-button @click="cancel"> </el-button>
</div>
</template>
</el-dialog>
</div>
</template>
<script setup name="Article" lang="ts">
import { listArticle, getArticle, delArticle, addArticle, updateArticle } from '@/api/manage/article';
import { ArticleVO, ArticleQuery, ArticleForm } from '@/api/manage/article/types';
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
const autoTableHeight = ref<number>(750);
const articleList = ref<ArticleVO[]>([]);
const buttonLoading = ref(false);
const loading = ref(true);
const showSearch = ref(true);
const ids = ref<Array<string | number>>([]);
const single = ref(true);
const multiple = ref(true);
const total = ref(0);
const note_publish_list = ref([
{ label: '已发布', value: 1 },
{ label: '未发布', value: 2 }
]);
const queryFormRef = ref<ElFormInstance>();
const articleFormRef = ref<ElFormInstance>();
const dialog = reactive<DialogOption>({
visible: false,
title: ''
});
const initFormData: ArticleForm = {
id: undefined,
type: undefined,
secondType: undefined,
isOpen: undefined,
attribute: undefined,
status: undefined,
province: undefined,
city: undefined,
remark: undefined,
memberLevel: undefined,
tagId: undefined,
recommend: undefined,
intro: undefined,
address: undefined,
longitude: undefined,
latitude: undefined,
orderNum: undefined,
level: undefined
};
const data = reactive<PageData<ArticleForm, ArticleQuery>>({
form: { ...initFormData },
queryParams: {
pageNum: 1,
pageSize: 10,
type: undefined,
secondType: undefined,
isOpen: undefined,
attribute: undefined,
status: undefined,
province: undefined,
city: undefined,
memberLevel: undefined,
tagId: undefined,
recommend: undefined,
intro: undefined,
address: undefined,
longitude: undefined,
latitude: undefined,
orderNum: undefined,
level: undefined,
params: {}
},
rules: {
id: [{ required: true, message: '景点ID/租赁ID/游艇ID不能为空', trigger: 'blur' }],
type: [{ required: true, message: '类别 景点-0、租赁-1 游艇-2不能为空', trigger: 'change' }],
secondType: [{ required: true, message: '二级类别不能为空', trigger: 'change' }],
isOpen: [{ required: true, message: '开放/营业不能为空', trigger: 'blur' }],
attribute: [{ required: true, message: '景点属性/商家属性不能为空', trigger: 'blur' }],
status: [{ required: true, message: '状态 0-未发布 1-审核中 2-发布不能为空', trigger: 'change' }],
province: [{ required: true, message: '省code不能为空', trigger: 'blur' }],
city: [{ required: true, message: '市/区不能为空', trigger: 'blur' }],
remark: [{ required: true, message: '个人简介不能为空', trigger: 'blur' }],
memberLevel: [{ required: true, message: '会员等级不能为空', trigger: 'blur' }],
tagId: [{ required: true, message: '标签不能为空', trigger: 'blur' }],
recommend: [{ required: true, message: '推荐语不能为空', trigger: 'blur' }],
intro: [{ required: true, message: '介绍不能为空', trigger: 'blur' }],
address: [{ required: true, message: '详细地址不能为空', trigger: 'blur' }],
longitude: [{ required: true, message: '经度不能为空', trigger: 'blur' }],
latitude: [{ required: true, message: '纬度不能为空', trigger: 'blur' }],
orderNum: [{ required: true, message: '排序不能为空', trigger: 'blur' }],
level: [{ required: true, message: '景区等级不能为空', trigger: 'blur' }]
}
});
const { queryParams, form, rules } = toRefs(data);
onMounted(() => {
getList();
nextTick(() => {
autoTableHeight.value = proxy?.autoTableHeight();
});
window.onresize = () => {
autoTableHeight.value = proxy?.autoTableHeight();
};
});
/** 查询景点、租赁管理列表 */
const getList = async () => {
loading.value = true;
const res = await listArticle(queryParams.value).finally(() => (loading.value = false));
articleList.value = res.rows;
total.value = res.total;
loading.value = false;
};
/** 取消按钮 */
const cancel = () => {
reset();
dialog.visible = false;
};
/** 表单重置 */
const reset = () => {
form.value = { ...initFormData };
articleFormRef.value?.resetFields();
};
/** 搜索按钮操作 */
const handleQuery = () => {
queryParams.value.pageNum = 1;
getList();
};
/** 重置按钮操作 */
const resetQuery = () => {
queryFormRef.value?.resetFields();
handleQuery();
};
/** 多选框选中数据 */
const handleSelectionChange = (selection: ArticleVO[]) => {
ids.value = selection.map((item) => item.id);
single.value = selection.length != 1;
multiple.value = !selection.length;
};
/** 新增按钮操作 */
const handleAdd = () => {
reset();
dialog.visible = true;
dialog.title = '添加景点、租赁管理';
};
/** 修改按钮操作 */
const handleUpdate = async (row?: ArticleVO) => {
reset();
const _id = row?.id || ids.value[0];
const res = await getArticle(_id);
Object.assign(form.value, res.data);
dialog.visible = true;
dialog.title = '修改景点、租赁管理';
};
/** 提交按钮 */
const submitForm = () => {
articleFormRef.value?.validate(async (valid: boolean) => {
if (valid) {
buttonLoading.value = true;
if (form.value.id) {
await updateArticle(form.value).finally(() => (buttonLoading.value = false));
} else {
await addArticle(form.value).finally(() => (buttonLoading.value = false));
}
proxy?.$modal.msgSuccess('操作成功');
dialog.visible = false;
await getList();
}
});
};
/** 删除按钮操作 */
const handleDelete = async (row?: ArticleVO) => {
const _ids = row?.id || ids.value;
await proxy?.$modal.confirm('是否确认删除景点、租赁管理编号为"' + _ids + '"的数据项?').finally(() => (loading.value = false));
await delArticle(_ids);
proxy?.$modal.msgSuccess('删除成功');
await getList();
};
/** 导出按钮操作 */
const handleExport = () => {
proxy?.download(
'system/article/export',
{
...queryParams.value
},
`article_${new Date().getTime()}.xlsx`
);
};
</script>
<style lang="scss" scoped>
.el-card :deep(.el-card__body) {
padding-bottom: 0px !important;
}
#table_page {
height: 50px !important;
margin-top: 10px !important;
padding-bottom: 10px !important;
}
</style>
+328
View File
@@ -0,0 +1,328 @@
<!-- 路线导航管理列表 -->
<template>
<div class="p-2">
<transition :enter-active-class="proxy?.animate.searchAnimate.enter" :leave-active-class="proxy?.animate.searchAnimate.leave">
<div v-show="showSearch" class="mb-[10px]" id="search_div">
<el-card shadow="hover">
<el-form ref="queryFormRef" :model="queryParams" :inline="true" label-width="70px">
<el-form-item label="行程路线" prop="">
<el-input class="inputWidth" placeholder="请输入行程路线" clearable @keyup.enter="handleQuery" />
</el-form-item>
<el-form-item label="发布状态" prop="">
<el-select class="inputWidth" v-model="queryParams.status" placeholder="请选择发布状态" clearable>
<el-option v-for="dict in note_publish_list" :key="dict.value" :label="dict.label" :value="dict.value" />
</el-select>
</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" plain icon="Plus" @click="handleAdd" v-hasPermi="['system:article:add']">新增</el-button>
<el-button type="success" plain icon="Edit" :disabled="single" @click="handleUpdate()" v-hasPermi="['system:article:edit']"
>修改</el-button
>
<el-button type="danger" plain icon="Delete" :disabled="multiple" @click="handleDelete()" v-hasPermi="['system:article:remove']"
>删除</el-button
>
</el-form-item>
</el-form>
</el-card>
</div>
</transition>
<el-card shadow="never">
<el-table :height="autoTableHeight" v-loading="loading" :data="articleList" @selection-change="handleSelectionChange" border>
<el-table-column label="ID" align="center" prop="id" />
<el-table-column label="线路标题" align="center" prop="" />
<el-table-column label="线路封面" align="center" prop="" />
<el-table-column label="线路标签" align="center" prop="" />
<el-table-column label="行程天数" align="center" prop="" />
<el-table-column label="行程里数" align="center" prop="" />
<el-table-column label="行驶时长" align="center" prop="" />
<el-table-column label="最佳时间" align="center" prop="" />
<el-table-column label="行程" align="center" prop="" />
<el-table-column label="加入行程数" align="center" prop="" />
<el-table-column label="喜欢数" align="center" prop="" />
<el-table-column label="线路评论数" align="center" prop="" />
<el-table-column label="发布状态" align="center" prop="" />
<el-table-column label="操作" align="center" class-name="small-padding fixed-width">
<template #default="scope">
<el-tooltip content="编辑" placement="top">
<el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)" v-hasPermi="['system:article:edit']"></el-button>
</el-tooltip>
<el-tooltip content="删除" placement="top">
<el-button link type="primary" icon="Delete" @click="handleDelete(scope.row)" v-hasPermi="['system:article:remove']"></el-button>
</el-tooltip>
</template>
</el-table-column>
</el-table>
<pagination
v-show="total > 0"
id="table_page"
:total="total"
v-model:page="queryParams.pageNum"
v-model:limit="queryParams.pageSize"
@pagination="getList"
/>
</el-card>
<!-- 添加或修改景点租赁管理对话框 -->
<el-dialog :title="dialog.title" v-model="dialog.visible" width="500px" append-to-body>
<el-form ref="articleFormRef" :model="form" :rules="rules" label-width="80px">
<el-form-item label="开放/营业" prop="isOpen">
<el-input v-model="form.isOpen" placeholder="请输入开放/营业" />
</el-form-item>
<el-form-item label="景点属性/商家属性" prop="attribute">
<el-input v-model="form.attribute" placeholder="请输入景点属性/商家属性" />
</el-form-item>
<el-form-item label="省code" prop="province">
<el-input v-model="form.province" placeholder="请输入省code" />
</el-form-item>
<el-form-item label="市/区" prop="city">
<el-input v-model="form.city" placeholder="请输入市/区" />
</el-form-item>
<el-form-item label="个人简介" prop="remark">
<el-input v-model="form.remark" placeholder="请输入个人简介" />
</el-form-item>
<el-form-item label="会员等级" prop="memberLevel">
<el-input v-model="form.memberLevel" placeholder="请输入会员等级" />
</el-form-item>
<el-form-item label="标签" prop="tagId">
<el-input v-model="form.tagId" placeholder="请输入标签" />
</el-form-item>
<el-form-item label="推荐语" prop="recommend">
<el-input v-model="form.recommend" placeholder="请输入推荐语" />
</el-form-item>
<el-form-item label="介绍" prop="intro">
<el-input v-model="form.intro" type="textarea" placeholder="请输入内容" />
</el-form-item>
<el-form-item label="详细地址" prop="address">
<el-input v-model="form.address" placeholder="请输入详细地址" />
</el-form-item>
<el-form-item label="经度" prop="longitude">
<el-input v-model="form.longitude" placeholder="请输入经度" />
</el-form-item>
<el-form-item label="纬度" prop="latitude">
<el-input v-model="form.latitude" placeholder="请输入纬度" />
</el-form-item>
<el-form-item label="排序" prop="orderNum">
<el-input v-model="form.orderNum" placeholder="请输入排序" />
</el-form-item>
<el-form-item label="景区等级" prop="level">
<el-input v-model="form.level" placeholder="请输入景区等级" />
</el-form-item>
</el-form>
<template #footer>
<div class="dialog-footer">
<el-button :loading="buttonLoading" type="primary" @click="submitForm"> </el-button>
<el-button @click="cancel"> </el-button>
</div>
</template>
</el-dialog>
</div>
</template>
<script setup name="Article" lang="ts">
import { listArticle, getArticle, delArticle, addArticle, updateArticle } from '@/api/manage/article';
import { ArticleVO, ArticleQuery, ArticleForm } from '@/api/manage/article/types';
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
const autoTableHeight = ref<number>(750);
const articleList = ref<ArticleVO[]>([]);
const buttonLoading = ref(false);
const loading = ref(true);
const showSearch = ref(true);
const ids = ref<Array<string | number>>([]);
const single = ref(true);
const multiple = ref(true);
const total = ref(0);
const note_publish_list = ref([
{ label: '已发布', value: 1 },
{ label: '未发布', value: 2 }
]);
const queryFormRef = ref<ElFormInstance>();
const articleFormRef = ref<ElFormInstance>();
const dialog = reactive<DialogOption>({
visible: false,
title: ''
});
const initFormData: ArticleForm = {
id: undefined,
type: undefined,
secondType: undefined,
isOpen: undefined,
attribute: undefined,
status: undefined,
province: undefined,
city: undefined,
remark: undefined,
memberLevel: undefined,
tagId: undefined,
recommend: undefined,
intro: undefined,
address: undefined,
longitude: undefined,
latitude: undefined,
orderNum: undefined,
level: undefined
};
const data = reactive<PageData<ArticleForm, ArticleQuery>>({
form: { ...initFormData },
queryParams: {
pageNum: 1,
pageSize: 10,
type: undefined,
secondType: undefined,
isOpen: undefined,
attribute: undefined,
status: undefined,
province: undefined,
city: undefined,
memberLevel: undefined,
tagId: undefined,
recommend: undefined,
intro: undefined,
address: undefined,
longitude: undefined,
latitude: undefined,
orderNum: undefined,
level: undefined,
params: {}
},
rules: {
id: [{ required: true, message: '景点ID/租赁ID/游艇ID不能为空', trigger: 'blur' }],
type: [{ required: true, message: '类别 景点-0、租赁-1 游艇-2不能为空', trigger: 'change' }],
secondType: [{ required: true, message: '二级类别不能为空', trigger: 'change' }],
isOpen: [{ required: true, message: '开放/营业不能为空', trigger: 'blur' }],
attribute: [{ required: true, message: '景点属性/商家属性不能为空', trigger: 'blur' }],
status: [{ required: true, message: '状态 0-未发布 1-审核中 2-发布不能为空', trigger: 'change' }],
province: [{ required: true, message: '省code不能为空', trigger: 'blur' }],
city: [{ required: true, message: '市/区不能为空', trigger: 'blur' }],
remark: [{ required: true, message: '个人简介不能为空', trigger: 'blur' }],
memberLevel: [{ required: true, message: '会员等级不能为空', trigger: 'blur' }],
tagId: [{ required: true, message: '标签不能为空', trigger: 'blur' }],
recommend: [{ required: true, message: '推荐语不能为空', trigger: 'blur' }],
intro: [{ required: true, message: '介绍不能为空', trigger: 'blur' }],
address: [{ required: true, message: '详细地址不能为空', trigger: 'blur' }],
longitude: [{ required: true, message: '经度不能为空', trigger: 'blur' }],
latitude: [{ required: true, message: '纬度不能为空', trigger: 'blur' }],
orderNum: [{ required: true, message: '排序不能为空', trigger: 'blur' }],
level: [{ required: true, message: '景区等级不能为空', trigger: 'blur' }]
}
});
const { queryParams, form, rules } = toRefs(data);
onMounted(() => {
getList();
nextTick(() => {
autoTableHeight.value = proxy?.autoTableHeight();
});
window.onresize = () => {
autoTableHeight.value = proxy?.autoTableHeight();
};
});
/** 查询景点、租赁管理列表 */
const getList = async () => {
loading.value = true;
const res = await listArticle(queryParams.value).finally(() => (loading.value = false));
articleList.value = res.rows;
total.value = res.total;
loading.value = false;
};
/** 取消按钮 */
const cancel = () => {
reset();
dialog.visible = false;
};
/** 表单重置 */
const reset = () => {
form.value = { ...initFormData };
articleFormRef.value?.resetFields();
};
/** 搜索按钮操作 */
const handleQuery = () => {
queryParams.value.pageNum = 1;
getList();
};
/** 重置按钮操作 */
const resetQuery = () => {
queryFormRef.value?.resetFields();
handleQuery();
};
/** 多选框选中数据 */
const handleSelectionChange = (selection: ArticleVO[]) => {
ids.value = selection.map((item) => item.id);
single.value = selection.length != 1;
multiple.value = !selection.length;
};
/** 新增按钮操作 */
const handleAdd = () => {
reset();
dialog.visible = true;
dialog.title = '添加景点、租赁管理';
};
/** 修改按钮操作 */
const handleUpdate = async (row?: ArticleVO) => {
reset();
const _id = row?.id || ids.value[0];
const res = await getArticle(_id);
Object.assign(form.value, res.data);
dialog.visible = true;
dialog.title = '修改景点、租赁管理';
};
/** 提交按钮 */
const submitForm = () => {
articleFormRef.value?.validate(async (valid: boolean) => {
if (valid) {
buttonLoading.value = true;
if (form.value.id) {
await updateArticle(form.value).finally(() => (buttonLoading.value = false));
} else {
await addArticle(form.value).finally(() => (buttonLoading.value = false));
}
proxy?.$modal.msgSuccess('操作成功');
dialog.visible = false;
await getList();
}
});
};
/** 删除按钮操作 */
const handleDelete = async (row?: ArticleVO) => {
const _ids = row?.id || ids.value;
await proxy?.$modal.confirm('是否确认删除景点、租赁管理编号为"' + _ids + '"的数据项?').finally(() => (loading.value = false));
await delArticle(_ids);
proxy?.$modal.msgSuccess('删除成功');
await getList();
};
/** 导出按钮操作 */
const handleExport = () => {
proxy?.download(
'system/article/export',
{
...queryParams.value
},
`article_${new Date().getTime()}.xlsx`
);
};
</script>
<style lang="scss" scoped>
.el-card :deep(.el-card__body) {
padding-bottom: 0px !important;
}
#table_page {
height: 50px !important;
margin-top: 10px !important;
padding-bottom: 10px !important;
}
</style>
+380
View File
@@ -0,0 +1,380 @@
<!-- 景点列表 -->
<template>
<div class="p-2">
<transition :enter-active-class="proxy?.animate.searchAnimate.enter" :leave-active-class="proxy?.animate.searchAnimate.leave">
<div v-show="showSearch" class="mb-[10px]" id="search_div">
<el-card shadow="hover">
<el-form ref="queryFormRef" :model="queryParams" :inline="true" label-width="70px">
<el-form-item label="景点名称" prop="">
<el-input class="inputWidth" placeholder="请输入景点名称" clearable @keyup.enter="handleQuery" />
</el-form-item>
<el-form-item label="提示语" prop="">
<el-input class="inputWidth" placeholder="请输入提示语" clearable @keyup.enter="handleQuery" />
</el-form-item>
<el-form-item label="发布状态" prop="">
<el-input class="inputWidth" placeholder="请输入提示语" clearable @keyup.enter="handleQuery" />
</el-form-item>
<el-form-item label="景点等级" prop="">
<el-input class="inputWidth" placeholder="请输入提示语" clearable @keyup.enter="handleQuery" />
</el-form-item>
<el-form-item label="是否开放" prop="isOpen">
<el-input class="inputWidth" v-model="queryParams.isOpen" placeholder="请输入开放/营业" clearable @keyup.enter="handleQuery" />
</el-form-item>
<el-form-item label="景点属性" prop="attribute">
<el-input class="inputWidth" v-model="queryParams.attribute" placeholder="请输入景点属性" clearable @keyup.enter="handleQuery" />
</el-form-item>
<el-form-item label="一级标签" prop="attribute">
<el-input class="inputWidth" v-model="queryParams.attribute" placeholder="请输入景点属性" clearable @keyup.enter="handleQuery" />
</el-form-item>
<el-form-item label="二级标签" prop="attribute">
<el-input class="inputWidth" v-model="queryParams.attribute" placeholder="请输入景点属性" clearable @keyup.enter="handleQuery" />
</el-form-item>
<!-- <el-form-item label="省code" prop="province">
<el-input v-model="queryParams.province" placeholder="请输入省code" clearable @keyup.enter="handleQuery" />
</el-form-item>
<el-form-item label="市/区" prop="city">
<el-input v-model="queryParams.city" placeholder="请输入市/区" clearable @keyup.enter="handleQuery" />
</el-form-item>
<el-form-item label="会员等级" prop="memberLevel">
<el-input v-model="queryParams.memberLevel" placeholder="请输入会员等级" clearable @keyup.enter="handleQuery" />
</el-form-item>
<el-form-item label="标签" prop="tagId">
<el-input v-model="queryParams.tagId" placeholder="请输入标签" clearable @keyup.enter="handleQuery" />
</el-form-item>
<el-form-item label="推荐语" prop="recommend">
<el-input v-model="queryParams.recommend" placeholder="请输入推荐语" clearable @keyup.enter="handleQuery" />
</el-form-item>
<el-form-item label="介绍" prop="intro">
<el-input v-model="queryParams.intro" placeholder="请输入介绍" clearable @keyup.enter="handleQuery" />
</el-form-item>
<el-form-item label="详细地址" prop="address">
<el-input v-model="queryParams.address" placeholder="请输入详细地址" clearable @keyup.enter="handleQuery" />
</el-form-item>
<el-form-item label="经度" prop="longitude">
<el-input v-model="queryParams.longitude" placeholder="请输入经度" clearable @keyup.enter="handleQuery" />
</el-form-item>
<el-form-item label="纬度" prop="latitude">
<el-input v-model="queryParams.latitude" placeholder="请输入纬度" clearable @keyup.enter="handleQuery" />
</el-form-item>
<el-form-item label="排序" prop="orderNum">
<el-input v-model="queryParams.orderNum" placeholder="请输入排序" clearable @keyup.enter="handleQuery" />
</el-form-item> -->
<!-- <el-form-item label="景区等级" prop="level">
<el-input class="inputWidth" v-model="queryParams.level" placeholder="请输入景区等级" clearable @keyup.enter="handleQuery" />
</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" plain icon="Plus" @click="handleAdd" v-hasPermi="['system:article:add']">新增</el-button>
<el-button type="success" plain icon="Edit" :disabled="single" @click="handleUpdate()" v-hasPermi="['system:article:edit']"
>修改</el-button
>
<el-button type="danger" plain icon="Delete" :disabled="multiple" @click="handleDelete()" v-hasPermi="['system:article:remove']"
>删除</el-button
>
</el-form-item>
</el-form>
</el-card>
</div>
</transition>
<el-card shadow="never">
<el-table :height="autoTableHeight" v-loading="loading" :data="articleList" @selection-change="handleSelectionChange" border>
<el-table-column type="selection" width="55" align="center" />
<el-table-column label="景点ID/租赁ID/游艇ID" align="center" prop="id" v-if="true" />
<el-table-column label="类别 景点-0、租赁-1 游艇-2" align="center" prop="type" />
<el-table-column label="二级类别" align="center" prop="secondType" />
<el-table-column label="开放/营业" align="center" prop="isOpen" />
<el-table-column label="景点属性/商家属性" align="center" prop="attribute" />
<el-table-column label="状态 0-未发布 1-审核中 2-发布" align="center" prop="status" />
<el-table-column label="省code" align="center" prop="province" />
<el-table-column label="市/区" align="center" prop="city" />
<el-table-column label="个人简介" align="center" prop="remark" />
<el-table-column label="会员等级" align="center" prop="memberLevel" />
<el-table-column label="标签" align="center" prop="tagId" />
<el-table-column label="推荐语" align="center" prop="recommend" />
<el-table-column label="介绍" align="center" prop="intro" />
<el-table-column label="详细地址" align="center" prop="address" />
<el-table-column label="经度" align="center" prop="longitude" />
<el-table-column label="纬度" align="center" prop="latitude" />
<el-table-column label="排序" align="center" prop="orderNum" />
<el-table-column label="景区等级" align="center" prop="level" />
<el-table-column label="操作" align="center" class-name="small-padding fixed-width">
<template #default="scope">
<el-tooltip content="修改" placement="top">
<el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)" v-hasPermi="['system:article:edit']"></el-button>
</el-tooltip>
<el-tooltip content="删除" placement="top">
<el-button link type="primary" icon="Delete" @click="handleDelete(scope.row)" v-hasPermi="['system:article:remove']"></el-button>
</el-tooltip>
</template>
</el-table-column>
</el-table>
<pagination
v-show="total > 0"
id="table_page"
:total="total"
v-model:page="queryParams.pageNum"
v-model:limit="queryParams.pageSize"
@pagination="getList"
/>
</el-card>
<!-- 添加或修改景点租赁管理对话框 -->
<el-dialog :title="dialog.title" v-model="dialog.visible" width="500px" append-to-body>
<el-form ref="articleFormRef" :model="form" :rules="rules" label-width="80px">
<el-form-item label="开放/营业" prop="isOpen">
<el-input v-model="form.isOpen" placeholder="请输入开放/营业" />
</el-form-item>
<el-form-item label="景点属性/商家属性" prop="attribute">
<el-input v-model="form.attribute" placeholder="请输入景点属性/商家属性" />
</el-form-item>
<el-form-item label="省code" prop="province">
<el-input v-model="form.province" placeholder="请输入省code" />
</el-form-item>
<el-form-item label="市/区" prop="city">
<el-input v-model="form.city" placeholder="请输入市/区" />
</el-form-item>
<el-form-item label="个人简介" prop="remark">
<el-input v-model="form.remark" placeholder="请输入个人简介" />
</el-form-item>
<el-form-item label="会员等级" prop="memberLevel">
<el-input v-model="form.memberLevel" placeholder="请输入会员等级" />
</el-form-item>
<el-form-item label="标签" prop="tagId">
<el-input v-model="form.tagId" placeholder="请输入标签" />
</el-form-item>
<el-form-item label="推荐语" prop="recommend">
<el-input v-model="form.recommend" placeholder="请输入推荐语" />
</el-form-item>
<el-form-item label="介绍" prop="intro">
<el-input v-model="form.intro" type="textarea" placeholder="请输入内容" />
</el-form-item>
<el-form-item label="详细地址" prop="address">
<el-input v-model="form.address" placeholder="请输入详细地址" />
</el-form-item>
<el-form-item label="经度" prop="longitude">
<el-input v-model="form.longitude" placeholder="请输入经度" />
</el-form-item>
<el-form-item label="纬度" prop="latitude">
<el-input v-model="form.latitude" placeholder="请输入纬度" />
</el-form-item>
<el-form-item label="排序" prop="orderNum">
<el-input v-model="form.orderNum" placeholder="请输入排序" />
</el-form-item>
<el-form-item label="景区等级" prop="level">
<el-input v-model="form.level" placeholder="请输入景区等级" />
</el-form-item>
</el-form>
<template #footer>
<div class="dialog-footer">
<el-button :loading="buttonLoading" type="primary" @click="submitForm"> </el-button>
<el-button @click="cancel"> </el-button>
</div>
</template>
</el-dialog>
</div>
</template>
<script setup name="Article" lang="ts">
import { listArticle, getArticle, delArticle, addArticle, updateArticle } from '@/api/manage/article';
import { ArticleVO, ArticleQuery, ArticleForm } from '@/api/manage/article/types';
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
const autoTableHeight = ref<number>(750);
const articleList = ref<ArticleVO[]>([]);
const buttonLoading = ref(false);
const loading = ref(true);
const showSearch = ref(true);
const ids = ref<Array<string | number>>([]);
const single = ref(true);
const multiple = ref(true);
const total = ref(0);
const queryFormRef = ref<ElFormInstance>();
const articleFormRef = ref<ElFormInstance>();
const dialog = reactive<DialogOption>({
visible: false,
title: ''
});
const initFormData: ArticleForm = {
id: undefined,
type: undefined,
secondType: undefined,
isOpen: undefined,
attribute: undefined,
status: undefined,
province: undefined,
city: undefined,
remark: undefined,
memberLevel: undefined,
tagId: undefined,
recommend: undefined,
intro: undefined,
address: undefined,
longitude: undefined,
latitude: undefined,
orderNum: undefined,
level: undefined
};
const data = reactive<PageData<ArticleForm, ArticleQuery>>({
form: { ...initFormData },
queryParams: {
pageNum: 1,
pageSize: 10,
type: undefined,
secondType: undefined,
isOpen: undefined,
attribute: undefined,
status: undefined,
province: undefined,
city: undefined,
memberLevel: undefined,
tagId: undefined,
recommend: undefined,
intro: undefined,
address: undefined,
longitude: undefined,
latitude: undefined,
orderNum: undefined,
level: undefined,
params: {}
},
rules: {
id: [{ required: true, message: '景点ID/租赁ID/游艇ID不能为空', trigger: 'blur' }],
type: [{ required: true, message: '类别 景点-0、租赁-1 游艇-2不能为空', trigger: 'change' }],
secondType: [{ required: true, message: '二级类别不能为空', trigger: 'change' }],
isOpen: [{ required: true, message: '开放/营业不能为空', trigger: 'blur' }],
attribute: [{ required: true, message: '景点属性/商家属性不能为空', trigger: 'blur' }],
status: [{ required: true, message: '状态 0-未发布 1-审核中 2-发布不能为空', trigger: 'change' }],
province: [{ required: true, message: '省code不能为空', trigger: 'blur' }],
city: [{ required: true, message: '市/区不能为空', trigger: 'blur' }],
remark: [{ required: true, message: '个人简介不能为空', trigger: 'blur' }],
memberLevel: [{ required: true, message: '会员等级不能为空', trigger: 'blur' }],
tagId: [{ required: true, message: '标签不能为空', trigger: 'blur' }],
recommend: [{ required: true, message: '推荐语不能为空', trigger: 'blur' }],
intro: [{ required: true, message: '介绍不能为空', trigger: 'blur' }],
address: [{ required: true, message: '详细地址不能为空', trigger: 'blur' }],
longitude: [{ required: true, message: '经度不能为空', trigger: 'blur' }],
latitude: [{ required: true, message: '纬度不能为空', trigger: 'blur' }],
orderNum: [{ required: true, message: '排序不能为空', trigger: 'blur' }],
level: [{ required: true, message: '景区等级不能为空', trigger: 'blur' }]
}
});
const { queryParams, form, rules } = toRefs(data);
onMounted(() => {
getList();
nextTick(() => {
autoTableHeight.value = proxy?.autoTableHeight();
});
window.onresize = () => {
autoTableHeight.value = proxy?.autoTableHeight();
};
});
/** 查询景点、租赁管理列表 */
const getList = async () => {
loading.value = true;
const res = await listArticle(queryParams.value).finally(() => (loading.value = false));
articleList.value = res.rows;
total.value = res.total;
loading.value = false;
};
/** 取消按钮 */
const cancel = () => {
reset();
dialog.visible = false;
};
/** 表单重置 */
const reset = () => {
form.value = { ...initFormData };
articleFormRef.value?.resetFields();
};
/** 搜索按钮操作 */
const handleQuery = () => {
queryParams.value.pageNum = 1;
getList();
};
/** 重置按钮操作 */
const resetQuery = () => {
queryFormRef.value?.resetFields();
handleQuery();
};
/** 多选框选中数据 */
const handleSelectionChange = (selection: ArticleVO[]) => {
ids.value = selection.map((item) => item.id);
single.value = selection.length != 1;
multiple.value = !selection.length;
};
/** 新增按钮操作 */
const handleAdd = () => {
reset();
dialog.visible = true;
dialog.title = '添加景点、租赁管理';
};
/** 修改按钮操作 */
const handleUpdate = async (row?: ArticleVO) => {
reset();
const _id = row?.id || ids.value[0];
const res = await getArticle(_id);
Object.assign(form.value, res.data);
dialog.visible = true;
dialog.title = '修改景点、租赁管理';
};
/** 提交按钮 */
const submitForm = () => {
articleFormRef.value?.validate(async (valid: boolean) => {
if (valid) {
buttonLoading.value = true;
if (form.value.id) {
await updateArticle(form.value).finally(() => (buttonLoading.value = false));
} else {
await addArticle(form.value).finally(() => (buttonLoading.value = false));
}
proxy?.$modal.msgSuccess('操作成功');
dialog.visible = false;
await getList();
}
});
};
/** 删除按钮操作 */
const handleDelete = async (row?: ArticleVO) => {
const _ids = row?.id || ids.value;
await proxy?.$modal.confirm('是否确认删除景点、租赁管理编号为"' + _ids + '"的数据项?').finally(() => (loading.value = false));
await delArticle(_ids);
proxy?.$modal.msgSuccess('删除成功');
await getList();
};
/** 导出按钮操作 */
const handleExport = () => {
proxy?.download(
'system/article/export',
{
...queryParams.value
},
`article_${new Date().getTime()}.xlsx`
);
};
</script>
<style lang="scss" scoped>
.el-card :deep(.el-card__body) {
padding-bottom: 0px !important;
}
#table_page {
height: 50px !important;
margin-top: 10px !important;
padding-bottom: 10px !important;
}
</style>
+89 -69
View File
@@ -1,23 +1,32 @@
<!-- 用户等级列表 -->
<template>
<div class="p-2">
<transition :enter-active-class="proxy?.animate.searchAnimate.enter" :leave-active-class="proxy?.animate.searchAnimate.leave">
<div v-show="showSearch" class="mb-[10px]">
<div v-show="showSearch" class="mb-[10px]" id="search_div">
<el-card shadow="hover">
<el-form ref="queryFormRef" :model="queryParams" :inline="true">
<el-form-item label="等级名称" prop="levelName">
<el-input v-model="queryParams.levelName" placeholder="请输入等级名称" clearable @keyup.enter="handleQuery" />
<el-input class="inputWidth" v-model="queryParams.levelName" placeholder="请输入等级名称" clearable @keyup.enter="handleQuery" />
</el-form-item>
<el-form-item label="积分上限" prop="score">
<el-input v-model="queryParams.score" placeholder="请输入积分上限" clearable @keyup.enter="handleQuery" />
<el-input class="inputWidth" v-model="queryParams.score" placeholder="请输入积分上限" clearable @keyup.enter="handleQuery" />
</el-form-item>
<el-form-item label="状态" prop="status">
<el-select v-model="queryParams.status" placeholder="请选择状态" clearable >
<el-option v-for="dict in dy_user_level_status" :key="dict.value" :label="dict.label" :value="dict.value"/>
<el-select class="inputWidth" v-model="queryParams.status" placeholder="请选择状态" clearable>
<el-option v-for="dict in dy_user_level_status" :key="dict.value" :label="dict.label" :value="dict.value" />
</el-select>
</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" plain icon="Plus" @click="handleAdd" v-hasPermi="['manage:userLevel:add']">新增</el-button>
<el-button type="success" plain icon="Edit" :disabled="single" @click="handleUpdate()" v-hasPermi="['manage:userLevel:edit']"
>修改</el-button
>
<el-button type="danger" plain icon="Delete" :disabled="multiple" @click="handleDelete()" v-hasPermi="['manage:userLevel:remove']"
>删除</el-button
>
</el-form-item>
</el-form>
</el-card>
@@ -25,31 +34,29 @@
</transition>
<el-card shadow="never">
<template #header>
<!-- <template #header>
<el-row :gutter="10" class="mb8">
<el-col :span="1.5">
<el-button type="primary" plain icon="Plus" @click="handleAdd" v-hasPermi="['manage:userLevel:add']">新增</el-button>
</el-col>
<el-col :span="1.5">
<el-button type="success" plain icon="Edit" :disabled="single" @click="handleUpdate()" v-hasPermi="['manage:userLevel:edit']">修改</el-button>
<el-button type="success" plain icon="Edit" :disabled="single" @click="handleUpdate()" v-hasPermi="['manage:userLevel:edit']"
>修改</el-button
>
</el-col>
<el-col :span="1.5">
<el-button type="danger" plain icon="Delete" :disabled="multiple" @click="handleDelete()" v-hasPermi="['manage:userLevel:remove']">删除</el-button>
<el-button type="danger" plain icon="Delete" :disabled="multiple" @click="handleDelete()" v-hasPermi="['manage:userLevel:remove']"
>删除</el-button
>
</el-col>
<right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
</el-row>
</template>
</template> -->
<el-table v-loading="loading" :data="userLevelList" @selection-change="handleSelectionChange">
<el-table :height="autoTableHeight" v-loading="loading" :data="userLevelList" @selection-change="handleSelectionChange" border>
<el-table-column type="selection" width="55" align="center" />
<el-table-column label="等级ID" align="center" prop="id" v-if="true" />
<el-table-column label="等级名称" align="center" prop="levelName" />
<el-table-column label="积分上限" align="center" prop="score" />
<el-table-column label="状态" align="center" prop="status">
<template #default="scope">
<dict-tag :options="dy_user_level_status" :value="scope.row.status"/>
</template>
</el-table-column>
<el-table-column label="用户等级" align="center" prop="levelName" />
<el-table-column label="等级所达积分" align="center" prop="score" />
<el-table-column label="排序" align="center" prop="orderNum" />
<el-table-column label="创建者" align="center" prop="createBy" />
<el-table-column label="创建时间" align="center" prop="createTime" width="180">
@@ -57,6 +64,13 @@
<span>{{ parseTime(scope.row.createTime, '{y}-{m}-{d}') }}</span>
</template>
</el-table-column>
<el-table-column label="状态" align="center" prop="status">
<template #default="scope">
<dict-tag :options="dy_user_level_status" :value="scope.row.status" />
</template>
</el-table-column>
<!-- <el-table-column label="等级名称" align="center" prop="levelName" />
<el-table-column label="积分上限" align="center" prop="score" /> -->
<el-table-column label="操作" align="center" class-name="small-padding fixed-width">
<template #default="scope">
<el-tooltip content="修改" placement="top">
@@ -69,7 +83,14 @@
</el-table-column>
</el-table>
<pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize" @pagination="getList" />
<pagination
id="table_page"
v-show="total > 0"
:total="total"
v-model:page="queryParams.pageNum"
v-model:limit="queryParams.pageSize"
@pagination="getList"
/>
</el-card>
<!-- 添加或修改用户等级对话框 -->
<el-dialog :title="dialog.title" v-model="dialog.visible" width="500px" append-to-body>
@@ -85,11 +106,7 @@
</el-form-item>
<el-form-item label="状态" prop="status">
<el-radio-group v-model="form.status">
<el-radio
v-for="dict in dy_user_level_status"
:key="dict.value"
:value="parseInt(dict.value)"
>{{dict.label}}</el-radio>
<el-radio v-for="dict in dy_user_level_status" :key="dict.value" :value="parseInt(dict.value)">{{ dict.label }}</el-radio>
</el-radio-group>
</el-form-item>
</el-form>
@@ -109,7 +126,7 @@ import { UserLevelVO, UserLevelQuery, UserLevelForm } from '@/api/manage/userLev
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
const { dy_user_level_status } = toRefs<any>(proxy?.useDict('dy_user_level_status'));
const autoTableHeight = ref<number>(750);
const userLevelList = ref<UserLevelVO[]>([]);
const buttonLoading = ref(false);
const loading = ref(true);
@@ -133,9 +150,9 @@ const initFormData: UserLevelForm = {
status: undefined,
score: undefined,
orderNum: undefined
}
};
const data = reactive<PageData<UserLevelForm, UserLevelQuery>>({
form: {...initFormData},
form: { ...initFormData },
queryParams: {
pageNum: 1,
pageSize: 10,
@@ -143,30 +160,27 @@ const data = reactive<PageData<UserLevelForm, UserLevelQuery>>({
status: undefined,
score: undefined,
orderNum: undefined,
params: {
}
params: {}
},
rules: {
id: [
{ required: true, message: "等级ID不能为空", trigger: "blur" }
],
levelName: [
{ required: true, message: "等级名称不能为空", trigger: "blur" }
],
status: [
{ required: true, message: "状态不能为空", trigger: "change" }
],
score: [
{ required: true, message: "积分上限不能为空", trigger: "blur" }
],
orderNum: [
{ required: true, message: "排序不能为空", trigger: "blur" }
]
id: [{ required: true, message: '等级ID不能为空', trigger: 'blur' }],
levelName: [{ required: true, message: '等级名称不能为空', trigger: 'blur' }],
status: [{ required: true, message: '状态不能为空', trigger: 'change' }],
score: [{ required: true, message: '积分上限不能为空', trigger: 'blur' }],
orderNum: [{ required: true, message: '排序不能为空', trigger: 'blur' }]
}
});
const { queryParams, form, rules } = toRefs(data);
onMounted(() => {
getList();
nextTick(() => {
autoTableHeight.value = proxy?.autoTableHeight();
});
window.onresize = () => {
autoTableHeight.value = proxy?.autoTableHeight();
};
});
/** 查询用户等级列表 */
const getList = async () => {
loading.value = true;
@@ -174,55 +188,55 @@ const getList = async () => {
userLevelList.value = res.rows;
total.value = res.total;
loading.value = false;
}
};
/** 取消按钮 */
const cancel = () => {
reset();
dialog.visible = false;
}
};
/** 表单重置 */
const reset = () => {
form.value = {...initFormData};
form.value = { ...initFormData };
userLevelFormRef.value?.resetFields();
}
};
/** 搜索按钮操作 */
const handleQuery = () => {
queryParams.value.pageNum = 1;
getList();
}
};
/** 重置按钮操作 */
const resetQuery = () => {
queryFormRef.value?.resetFields();
handleQuery();
}
};
/** 多选框选中数据 */
const handleSelectionChange = (selection: UserLevelVO[]) => {
ids.value = selection.map(item => item.id);
ids.value = selection.map((item) => item.id);
single.value = selection.length != 1;
multiple.value = !selection.length;
}
};
/** 新增按钮操作 */
const handleAdd = () => {
reset();
dialog.visible = true;
dialog.title = "添加用户等级";
}
dialog.title = '添加用户等级';
};
/** 修改按钮操作 */
const handleUpdate = async (row?: UserLevelVO) => {
reset();
const _id = row?.id || ids.value[0]
const _id = row?.id || ids.value[0];
const res = await getUserLevel(_id);
Object.assign(form.value, res.data);
dialog.visible = true;
dialog.title = "修改用户等级";
}
dialog.title = '修改用户等级';
};
/** 提交按钮 */
const submitForm = () => {
@@ -230,27 +244,33 @@ const submitForm = () => {
if (valid) {
buttonLoading.value = true;
if (form.value.id) {
await updateUserLevel(form.value).finally(() => buttonLoading.value = false);
await updateUserLevel(form.value).finally(() => (buttonLoading.value = false));
} else {
await addUserLevel(form.value).finally(() => buttonLoading.value = false);
await addUserLevel(form.value).finally(() => (buttonLoading.value = false));
}
proxy?.$modal.msgSuccess("操作成功");
proxy?.$modal.msgSuccess('操作成功');
dialog.visible = false;
await getList();
}
});
}
};
/** 删除按钮操作 */
const handleDelete = async (row?: UserLevelVO) => {
const _ids = row?.id || ids.value;
await proxy?.$modal.confirm('是否确认删除用户等级编号为"' + _ids + '"的数据项?').finally(() => loading.value = false);
await proxy?.$modal.confirm('是否确认删除用户等级编号为"' + _ids + '"的数据项?').finally(() => (loading.value = false));
await delUserLevel(_ids);
proxy?.$modal.msgSuccess("删除成功");
proxy?.$modal.msgSuccess('删除成功');
await getList();
}
onMounted(() => {
getList();
});
};
</script>
<style lang="scss" scoped>
.el-card :deep(.el-card__body) {
padding-bottom: 0px !important;
}
#table_page {
height: 50px !important;
margin-top: 10px !important;
padding-bottom: 10px !important;
}
</style>