Merge branch 'develop' of gitee.com:youlaiorg/vue-uniapp-template into develop
This commit is contained in:
ray
@@ -56,9 +56,9 @@
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/work/config/item",
|
||||
"path": "pages/work/config/edit",
|
||||
"style": {
|
||||
"navigationBarTitleText": "配置详情"
|
||||
"navigationBarTitleText": "新增修改配置页面"
|
||||
}
|
||||
},
|
||||
{
|
||||
|
||||
@@ -1,277 +0,0 @@
|
||||
<template>
|
||||
<view class="work">
|
||||
<!-- 筛选 -->
|
||||
<wd-drop-menu
|
||||
close-on-click-modal
|
||||
class="mb-20rpx"
|
||||
style="margin-right: 20rpx; margin-left: 20rpx"
|
||||
>
|
||||
<wd-drop-menu-item
|
||||
ref="dropMenu"
|
||||
title="筛选"
|
||||
icon="filter"
|
||||
icon-size="18px"
|
||||
@opened="handleOpened"
|
||||
>
|
||||
<view>
|
||||
<wd-input
|
||||
v-model="queryParams.keywords"
|
||||
label="关键字"
|
||||
type="text"
|
||||
placeholder="请输入关键字"
|
||||
/>
|
||||
<view class="flex flex-row items-center mb-20rpx">
|
||||
<wd-button class="mt-20rpx mb-20rpx" size="medium" @click="search()">查询</wd-button>
|
||||
<wd-button size="medium" type="info" @click="reset">重置</wd-button>
|
||||
</view>
|
||||
</view>
|
||||
</wd-drop-menu-item>
|
||||
</wd-drop-menu>
|
||||
|
||||
<!-- 列表 -->
|
||||
<scroll-view scroll-y class="list-container">
|
||||
<view
|
||||
v-for="(item, index) in pageData"
|
||||
:key="index"
|
||||
class="card"
|
||||
style="margin: 20rpx; border-bottom: 1px solid #ccc"
|
||||
@click="itemClicked(item)"
|
||||
>
|
||||
<view class="card-content" style="padding: 20rpx; margin: 20rpx">
|
||||
<view class="item">
|
||||
<view class="title">配置名称：{{ item.configName }}</view>
|
||||
<view class="content">
|
||||
<!-- <view class="row">-->
|
||||
<!-- <view class="label">配置名称：</view>-->
|
||||
<!-- <view class="value">{{ item.configName }}</view>-->
|
||||
<!-- </view>-->
|
||||
<view class="row">
|
||||
<view class="label">配置键：</view>
|
||||
<view class="value">{{ item.configKey }}</view>
|
||||
</view>
|
||||
<view class="row">
|
||||
<view class="label">配置值：</view>
|
||||
<view class="value">{{ item.configValue }}</view>
|
||||
</view>
|
||||
<view class="row">
|
||||
<view class="label">备注：</view>
|
||||
<view class="value">{{ item.remark }}</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<wd-loadmore :state="state" @reload="handleQuery" />
|
||||
</scroll-view>
|
||||
|
||||
<!-- 底部按钮 -->
|
||||
<view
|
||||
class="footer-buttons"
|
||||
style="
|
||||
position: fixed;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
padding: 20rpx;
|
||||
background-color: #fff;
|
||||
"
|
||||
>
|
||||
<wd-button size="medium" type="primary" @click="add">添加</wd-button>
|
||||
<wd-button size="medium" type="success" @click="refreshCache">刷新缓存</wd-button>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import ConfigAPI, { ConfigPageVO, ConfigForm, ConfigPageQuery } from "@/api/system/config";
|
||||
import { DropMenuItemExpose } from "wot-design-uni/components/wd-drop-menu-item/types";
|
||||
import { LoadMoreState } from "wot-design-uni/components/wd-loadmore/types";
|
||||
|
||||
const state = ref<LoadMoreState>("loading"); // 加载状态 loading, finished:, error
|
||||
const loading = ref(false);
|
||||
const total = ref(0);
|
||||
const queryParams = reactive<ConfigPageQuery>({
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
keywords: "",
|
||||
});
|
||||
// 系统配置表格数据
|
||||
const pageData = ref<ConfigPageVO[]>([]);
|
||||
/**
|
||||
* 搜索栏
|
||||
*/
|
||||
const dropMenu = ref<DropMenuItemExpose>();
|
||||
|
||||
function search() {
|
||||
pageData.value = [];
|
||||
dropMenu.value?.close();
|
||||
handleQuery();
|
||||
}
|
||||
|
||||
/**
|
||||
* 重置搜索条件
|
||||
*/
|
||||
function reset() {
|
||||
queryParams.pageNum = 1;
|
||||
queryParams.keywords = "";
|
||||
// queryParams.createTime = ["", ""];
|
||||
// timeStampArray.value = [];
|
||||
pageData.value = [];
|
||||
dropMenu.value?.close();
|
||||
handleQuery();
|
||||
}
|
||||
|
||||
/**
|
||||
* 处理下拉菜单打开事件
|
||||
*/
|
||||
function handleOpened() {
|
||||
// 在这里可以添加处理下拉菜单打开时的逻辑
|
||||
console.log("下拉菜单已打开");
|
||||
}
|
||||
|
||||
/**
|
||||
* 触底事件
|
||||
*/
|
||||
onReachBottom(() => {
|
||||
queryParams.pageNum++;
|
||||
handleQuery();
|
||||
});
|
||||
|
||||
function handleQuery() {
|
||||
state.value = "loading";
|
||||
ConfigAPI.getPage(queryParams)
|
||||
.then((data) => {
|
||||
pageData.value = data.list;
|
||||
total.value = data.total;
|
||||
// // 计算当前已加载的条数
|
||||
// const loadedCount = queryParams.pageNum * queryParams.pageSize;
|
||||
//
|
||||
// // 判断是否需要加载下一页
|
||||
// if (loadedCount < total.value) {
|
||||
// queryParams.pageNum++;
|
||||
// // 调用 handleQuery 继续加载下一页
|
||||
// handleQuery();
|
||||
// }
|
||||
})
|
||||
.finally(() => {
|
||||
state.value = "finished";
|
||||
});
|
||||
}
|
||||
|
||||
function add() {
|
||||
// 跳转到指定页面
|
||||
uni.navigateTo({
|
||||
url: "/pages/work/system/config/item",
|
||||
});
|
||||
}
|
||||
|
||||
function refreshCache() {
|
||||
ConfigAPI.refreshCache().then(() => {
|
||||
uni.showToast({
|
||||
title: "刷新缓存成功",
|
||||
icon: "success",
|
||||
duration: 1000, // 显示时间，单位为毫秒，设置为 0 则不会自动消失
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
function itemClicked(item: ConfigPageVO) {
|
||||
console.log(item);
|
||||
|
||||
// 直接传递整个 item 对象
|
||||
uni.navigateTo({
|
||||
url: "/pages/work/system/config/item?item=" + encodeURIComponent(JSON.stringify(item)),
|
||||
});
|
||||
}
|
||||
|
||||
// 新增 onShow 方法
|
||||
onShow(() => {
|
||||
handleQuery(); // 重新加载数据
|
||||
});
|
||||
|
||||
onLoad(() => {
|
||||
handleQuery();
|
||||
});
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
/* stylelint-disable selector-type-no-unknown */
|
||||
page {
|
||||
background: #f8f8f8;
|
||||
}
|
||||
|
||||
/* stylelint-enable selector-type-no-unknown */
|
||||
|
||||
.work {
|
||||
padding: 40rpx 0;
|
||||
}
|
||||
|
||||
::v-deep .wd-drop-menu__item {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
padding: 0 50rpx;
|
||||
}
|
||||
|
||||
.list-container {
|
||||
height: calc(100vh - 350rpx); /* 调整高度以避免被底部按钮挡住 */
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.card {
|
||||
background-color: #fff;
|
||||
border-radius: 8rpx;
|
||||
box-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.card-content {
|
||||
padding: 10rpx;
|
||||
}
|
||||
|
||||
.item {
|
||||
//margin-bottom: 20rpx;
|
||||
}
|
||||
|
||||
.title {
|
||||
margin-bottom: 10rpx;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10rpx;
|
||||
padding: 10rpx;
|
||||
margin: 10rpx;
|
||||
background: #f5f5f5;
|
||||
}
|
||||
|
||||
.row-group {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 10rpx;
|
||||
}
|
||||
|
||||
.row {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
gap: 0rpx; /* 调整 label 和 value 之间的间距 */
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
width: 100%; /* 调整宽度以适应两列布局 */
|
||||
margin-left: 20rpx;
|
||||
}
|
||||
|
||||
.label {
|
||||
flex: 1; /* 让 label 占据剩余空间的一部分 */
|
||||
font-size: 24rpx;
|
||||
}
|
||||
|
||||
.value {
|
||||
flex: 3; /* 让 value 占据剩余空间的大部分 */
|
||||
font-size: 22rpx;
|
||||
color: #999;
|
||||
}
|
||||
</style>
|
||||
217
src/pages/work/config/edit.vue
Normal file
217
src/pages/work/config/edit.vue
Normal file
@@ -0,0 +1,217 @@
|
||||
<template>
|
||||
<view class="form-container">
|
||||
<wd-form ref="formRef" :model="form">
|
||||
<wd-cell-group border>
|
||||
<wd-input
|
||||
v-model="form.configName"
|
||||
label="配置名称"
|
||||
label-width="100px"
|
||||
label-align="right"
|
||||
prop="configName"
|
||||
clearable
|
||||
placeholder="请输入配置名称"
|
||||
:rules="[{ required: true, message: '请填写配置名称' }]"
|
||||
/>
|
||||
<wd-input
|
||||
v-model="form.configKey"
|
||||
label="配置键"
|
||||
label-width="100px"
|
||||
label-align="right"
|
||||
prop="configKey"
|
||||
clearable
|
||||
placeholder="请输入配置键"
|
||||
:rules="[{ required: true, message: '请填写配置键' }]"
|
||||
/>
|
||||
<wd-input
|
||||
v-model="form.configValue"
|
||||
label="配置值"
|
||||
label-width="100px"
|
||||
label-align="right"
|
||||
prop="configValue"
|
||||
clearable
|
||||
placeholder="请输入配置值"
|
||||
:rules="[{ required: true, message: '请填写配置值' }]"
|
||||
/>
|
||||
<wd-textarea
|
||||
v-model="form.remark"
|
||||
prop="remark"
|
||||
label="配置描述"
|
||||
label-align="right"
|
||||
clearable
|
||||
:maxlength="100"
|
||||
show-word-limit
|
||||
label-width="100px"
|
||||
placeholder="请输入配置描述"
|
||||
/>
|
||||
</wd-cell-group>
|
||||
<view class="footer">
|
||||
<view class="button-container">
|
||||
<wd-button type="info" size="large" block @click="handleBack">返回</wd-button>
|
||||
<wd-button
|
||||
type="primary"
|
||||
size="large"
|
||||
native-type="submit"
|
||||
:disabled="subDisable"
|
||||
block
|
||||
@click="handleSubmit"
|
||||
>
|
||||
提交
|
||||
</wd-button>
|
||||
</view>
|
||||
</view>
|
||||
</wd-form>
|
||||
</view>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { ref, onMounted } from "vue";
|
||||
import { onLoad } from "@dcloudio/uni-app";
|
||||
import ConfigAPI, { ConfigForm, ConfigPageVO } from "@/api/system/config";
|
||||
import { FormInstance } from "wot-design-uni/components/wd-form/types";
|
||||
|
||||
const form = ref<ConfigForm>({
|
||||
id: undefined,
|
||||
configName: "",
|
||||
configKey: "",
|
||||
configValue: "",
|
||||
remark: "",
|
||||
});
|
||||
|
||||
const formRef = ref<FormInstance>();
|
||||
const subDisable = ref(false);
|
||||
|
||||
/**
|
||||
* 返回
|
||||
*/
|
||||
const handleBack = () => {
|
||||
uni.navigateBack();
|
||||
};
|
||||
|
||||
/**
|
||||
* 提交
|
||||
*/
|
||||
const handleSubmit = () => {
|
||||
subDisable.value = true;
|
||||
if (formRef.value) {
|
||||
formRef.value!.validate().then(({ valid, errors }) => {
|
||||
if (valid) {
|
||||
if (form.value.id) {
|
||||
// 如果 id 不为 null，调用更新 API
|
||||
ConfigAPI.update(form.value.id as number, form.value)
|
||||
.then((response) => {
|
||||
uni.showToast({
|
||||
title: "更新成功",
|
||||
icon: "success",
|
||||
duration: 2000,
|
||||
});
|
||||
setTimeout(() => {
|
||||
uni.navigateBack();
|
||||
}, 2000);
|
||||
})
|
||||
.catch((error) => {
|
||||
console.error("更新失败:", error);
|
||||
subDisable.value = false;
|
||||
});
|
||||
} else {
|
||||
// 如果 id 为 null，调用新增 API
|
||||
ConfigAPI.add(form.value)
|
||||
.then((response) => {
|
||||
uni.showToast({
|
||||
title: "提交成功",
|
||||
icon: "success",
|
||||
duration: 2000,
|
||||
});
|
||||
setTimeout(() => {
|
||||
uni.navigateBack();
|
||||
}, 2000);
|
||||
})
|
||||
.catch((error) => {
|
||||
console.error("提交失败:", error);
|
||||
subDisable.value = false;
|
||||
});
|
||||
}
|
||||
} else {
|
||||
uni.showToast({
|
||||
title: "请按照要求填写表单",
|
||||
icon: "error",
|
||||
duration: 2000,
|
||||
});
|
||||
subDisable.value = false;
|
||||
}
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
// 定义接收的参数
|
||||
const item = ref<ConfigPageVO | null>(null);
|
||||
|
||||
// 获取传递的参数
|
||||
onLoad((options) => {
|
||||
const title = options && options.item ? "编辑配置" : "新增配置";
|
||||
uni.setNavigationBarTitle({
|
||||
title: title,
|
||||
});
|
||||
if (options && options.item) {
|
||||
try {
|
||||
item.value = JSON.parse(decodeURIComponent(options.item));
|
||||
if (item.value) {
|
||||
form.value = {
|
||||
id: item.value.id,
|
||||
configName: item.value.configName,
|
||||
configKey: item.value.configKey,
|
||||
configValue: item.value.configValue,
|
||||
remark: item.value.remark,
|
||||
};
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("解析参数失败:", error);
|
||||
}
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 100vh;
|
||||
padding: 40rpx;
|
||||
background: #f8f8f8;
|
||||
}
|
||||
|
||||
.form-container {
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding: 40rpx;
|
||||
background: #fff;
|
||||
border-radius: 8rpx;
|
||||
box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.footer {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.button-container {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.button-container .wd-button {
|
||||
flex: 1;
|
||||
margin: 0 5px; /* 调整按钮之间的间距 */
|
||||
}
|
||||
|
||||
.wd-cell-group {
|
||||
margin-bottom: 20rpx;
|
||||
}
|
||||
|
||||
.wd-button {
|
||||
width: 100%;
|
||||
margin-top: 10rpx; /* 调整按钮间距 */
|
||||
}
|
||||
</style>
|
||||
@@ -1,23 +1,14 @@
|
||||
<template>
|
||||
<view class="work">
|
||||
<!-- 筛选 -->
|
||||
<wd-drop-menu
|
||||
close-on-click-modal
|
||||
class="mb-20rpx"
|
||||
style="margin-right: 20rpx; margin-left: 20rpx"
|
||||
>
|
||||
<wd-drop-menu-item
|
||||
ref="dropMenu"
|
||||
title="筛选"
|
||||
icon="filter"
|
||||
icon-size="18px"
|
||||
@opened="handleOpened"
|
||||
>
|
||||
<wd-drop-menu close-on-click-modal class="mb-20rpx mr-20rpx ml-20rpx">
|
||||
<wd-drop-menu-item ref="dropMenu" title="筛选" icon="filter" icon-size="18px">
|
||||
<view>
|
||||
<wd-input
|
||||
v-model="queryParams.keywords"
|
||||
label="关键字"
|
||||
type="text"
|
||||
clearable
|
||||
placeholder="请输入关键字"
|
||||
/>
|
||||
<view class="flex flex-row items-center mb-20rpx">
|
||||
@@ -28,56 +19,57 @@
|
||||
</wd-drop-menu-item>
|
||||
</wd-drop-menu>
|
||||
|
||||
<!-- 列表 -->
|
||||
<scroll-view scroll-y class="list-container">
|
||||
<view
|
||||
v-for="(item, index) in pageData"
|
||||
:key="index"
|
||||
class="card"
|
||||
style="margin: 20rpx; border-bottom: 1px solid #ccc"
|
||||
@click="itemClicked(item)"
|
||||
>
|
||||
<view class="card-content" style="padding: 20rpx; margin: 20rpx">
|
||||
<view class="item">
|
||||
<view class="title">配置名称：{{ item.configName }}</view>
|
||||
<view class="content">
|
||||
<!-- <view class="row">-->
|
||||
<!-- <view class="label">配置名称：</view>-->
|
||||
<!-- <view class="value">{{ item.configName }}</view>-->
|
||||
<!-- </view>-->
|
||||
<view class="row">
|
||||
<view class="label">配置键：</view>
|
||||
<view class="value">{{ item.configKey }}</view>
|
||||
</view>
|
||||
<view class="row">
|
||||
<view class="label">配置值：</view>
|
||||
<view class="value">{{ item.configValue }}</view>
|
||||
</view>
|
||||
<view class="row">
|
||||
<view class="label">备注：</view>
|
||||
<view class="value">{{ item.remark }}</view>
|
||||
</view>
|
||||
<view class="mt-20rpx">
|
||||
<!-- 列表内容 -->
|
||||
<view v-for="(item, index) in pageData" :key="index" class="mb-20rpx">
|
||||
<wd-card>
|
||||
<template #title>
|
||||
<view class="flex items-center justify-between">
|
||||
<view class="flex-1 text-truncate">{{ item.configName }}</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<wd-row class="mb-20rpx">
|
||||
<wd-col :span="24">
|
||||
<wd-col :span="5">
|
||||
<view>配置键：</view>
|
||||
</wd-col>
|
||||
<wd-col :span="19">
|
||||
<view>{{ item.configKey || "-" }}</view>
|
||||
</wd-col>
|
||||
</wd-col>
|
||||
<wd-col :span="24">
|
||||
<wd-col :span="5">
|
||||
<view>配置值：</view>
|
||||
</wd-col>
|
||||
<wd-col :span="19">
|
||||
<view>{{ item.configValue || "-" }}</view>
|
||||
</wd-col>
|
||||
</wd-col>
|
||||
<wd-col :span="24">
|
||||
<wd-col :span="5">
|
||||
<view>备注：</view>
|
||||
</wd-col>
|
||||
<wd-col :span="19">
|
||||
<view>{{ item.remark || "-" }}</view>
|
||||
</wd-col>
|
||||
</wd-col>
|
||||
</wd-row>
|
||||
|
||||
<template #footer>
|
||||
<view class="flex justify-end pr-20rpx">
|
||||
<wd-button size="small" type="primary" @click="handleAction(item)">操作</wd-button>
|
||||
</view>
|
||||
</template>
|
||||
</wd-card>
|
||||
</view>
|
||||
<wd-loadmore :state="state" @reload="handleQuery" />
|
||||
</scroll-view>
|
||||
</view>
|
||||
|
||||
<!-- 加载更多 -->
|
||||
<wd-loadmore :state="state" @reload="handleQuery" />
|
||||
|
||||
<!-- 底部按钮 -->
|
||||
<view
|
||||
class="footer-buttons"
|
||||
style="
|
||||
position: fixed;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
padding: 20rpx;
|
||||
background-color: #fff;
|
||||
"
|
||||
>
|
||||
<view class="fixed bottom-0 left-0 right-0 flex justify-around p-20rpx bg-#fff">
|
||||
<wd-button size="medium" type="primary" @click="add">添加</wd-button>
|
||||
<wd-button size="medium" type="success" @click="refreshCache">刷新缓存</wd-button>
|
||||
</view>
|
||||
@@ -88,9 +80,8 @@
|
||||
import ConfigAPI, { ConfigPageVO, ConfigForm, ConfigPageQuery } from "@/api/system/config";
|
||||
import { DropMenuItemExpose } from "wot-design-uni/components/wd-drop-menu-item/types";
|
||||
import { LoadMoreState } from "wot-design-uni/components/wd-loadmore/types";
|
||||
|
||||
import { debounce } from "@/utils/commonUtil";
|
||||
const state = ref<LoadMoreState>("loading"); // 加载状态 loading, finished:, error
|
||||
const loading = ref(false);
|
||||
const total = ref(0);
|
||||
const queryParams = reactive<ConfigPageQuery>({
|
||||
pageNum: 1,
|
||||
@@ -104,9 +95,13 @@ const pageData = ref<ConfigPageVO[]>([]);
|
||||
*/
|
||||
const dropMenu = ref<DropMenuItemExpose>();
|
||||
|
||||
/**
|
||||
* 搜索
|
||||
*/
|
||||
function search() {
|
||||
pageData.value = [];
|
||||
dropMenu.value?.close();
|
||||
queryParams.pageNum = 1;
|
||||
handleQuery();
|
||||
}
|
||||
|
||||
@@ -116,21 +111,11 @@ function search() {
|
||||
function reset() {
|
||||
queryParams.pageNum = 1;
|
||||
queryParams.keywords = "";
|
||||
// queryParams.createTime = ["", ""];
|
||||
// timeStampArray.value = [];
|
||||
pageData.value = [];
|
||||
dropMenu.value?.close();
|
||||
handleQuery();
|
||||
}
|
||||
|
||||
/**
|
||||
* 处理下拉菜单打开事件
|
||||
*/
|
||||
function handleOpened() {
|
||||
// 在这里可以添加处理下拉菜单打开时的逻辑
|
||||
console.log("下拉菜单已打开");
|
||||
}
|
||||
|
||||
/**
|
||||
* 触底事件
|
||||
*/
|
||||
@@ -139,35 +124,38 @@ onReachBottom(() => {
|
||||
handleQuery();
|
||||
});
|
||||
|
||||
/**
|
||||
* 查询
|
||||
*/
|
||||
function handleQuery() {
|
||||
state.value = "loading";
|
||||
ConfigAPI.getPage(queryParams)
|
||||
.then((data) => {
|
||||
pageData.value = data.list;
|
||||
if (queryParams.pageNum === 1) {
|
||||
pageData.value = data.list;
|
||||
} else {
|
||||
pageData.value.push(...data.list);
|
||||
}
|
||||
total.value = data.total;
|
||||
// // 计算当前已加载的条数
|
||||
// const loadedCount = queryParams.pageNum * queryParams.pageSize;
|
||||
//
|
||||
// // 判断是否需要加载下一页
|
||||
// if (loadedCount < total.value) {
|
||||
// queryParams.pageNum++;
|
||||
// // 调用 handleQuery 继续加载下一页
|
||||
// handleQuery();
|
||||
// }
|
||||
})
|
||||
.finally(() => {
|
||||
state.value = "finished";
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* 添加
|
||||
*/
|
||||
function add() {
|
||||
// 跳转到指定页面
|
||||
uni.navigateTo({
|
||||
url: "/pages/work/config/item",
|
||||
url: "/pages/work/config/edit",
|
||||
});
|
||||
}
|
||||
|
||||
function refreshCache() {
|
||||
/**
|
||||
* 刷新缓存
|
||||
*/
|
||||
const refreshCache = debounce(() => {
|
||||
ConfigAPI.refreshCache().then(() => {
|
||||
uni.showToast({
|
||||
title: "刷新缓存成功",
|
||||
@@ -175,103 +163,66 @@ function refreshCache() {
|
||||
duration: 1000, // 显示时间，单位为毫秒，设置为 0 则不会自动消失
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
function itemClicked(item: ConfigPageVO) {
|
||||
console.log(item);
|
||||
}, 1000);
|
||||
|
||||
/**
|
||||
* 编辑
|
||||
*/
|
||||
function handleEdit(item: ConfigPageVO) {
|
||||
// 直接传递整个 item 对象
|
||||
uni.navigateTo({
|
||||
url: "/pages/work/system/config/item?item=" + encodeURIComponent(JSON.stringify(item)),
|
||||
url: "/pages/work/config/edit?item=" + encodeURIComponent(JSON.stringify(item)),
|
||||
});
|
||||
}
|
||||
|
||||
// 新增 onShow 方法
|
||||
onShow(() => {
|
||||
handleQuery(); // 重新加载数据
|
||||
/**
|
||||
* 删除
|
||||
*/
|
||||
function handleDelete(item: ConfigPageVO) {
|
||||
uni.showModal({
|
||||
title: "提示",
|
||||
content: "确定要删除该配置吗？",
|
||||
success: async (res) => {
|
||||
if (res.confirm) {
|
||||
if (item.id) {
|
||||
ConfigAPI.deleteById(item.id).then(() => {
|
||||
uni.showToast({ title: "删除成功", icon: "success" });
|
||||
});
|
||||
}
|
||||
}
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* 操作
|
||||
*/
|
||||
function handleAction(item: ConfigPageVO) {
|
||||
const actions = ["编辑", "删除"];
|
||||
uni.showActionSheet({
|
||||
itemList: actions,
|
||||
success: ({ tapIndex }) => {
|
||||
switch (actions[tapIndex]) {
|
||||
case "编辑":
|
||||
handleEdit(item);
|
||||
break;
|
||||
case "删除":
|
||||
handleDelete(item);
|
||||
break;
|
||||
}
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
handleQuery();
|
||||
});
|
||||
|
||||
/**
|
||||
* 页面返回回来也要重新加载数据
|
||||
*/
|
||||
onLoad(() => {
|
||||
queryParams.pageNum = 1;
|
||||
handleQuery();
|
||||
});
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
/* stylelint-disable selector-type-no-unknown */
|
||||
page {
|
||||
background: #f8f8f8;
|
||||
}
|
||||
|
||||
/* stylelint-enable selector-type-no-unknown */
|
||||
|
||||
.work {
|
||||
padding: 40rpx 0;
|
||||
}
|
||||
|
||||
::v-deep .wd-drop-menu__item {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
padding: 0 50rpx;
|
||||
}
|
||||
|
||||
.list-container {
|
||||
height: calc(100vh - 350rpx); /* 调整高度以避免被底部按钮挡住 */
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.card {
|
||||
background-color: #fff;
|
||||
border-radius: 8rpx;
|
||||
box-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.card-content {
|
||||
padding: 10rpx;
|
||||
}
|
||||
|
||||
.item {
|
||||
//margin-bottom: 20rpx;
|
||||
}
|
||||
|
||||
.title {
|
||||
margin-bottom: 10rpx;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10rpx;
|
||||
padding: 10rpx;
|
||||
margin: 10rpx;
|
||||
background: #f5f5f5;
|
||||
}
|
||||
|
||||
.row-group {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 10rpx;
|
||||
}
|
||||
|
||||
.row {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
gap: 0rpx; /* 调整 label 和 value 之间的间距 */
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
width: 100%; /* 调整宽度以适应两列布局 */
|
||||
margin-left: 20rpx;
|
||||
}
|
||||
|
||||
.label {
|
||||
flex: 1; /* 让 label 占据剩余空间的一部分 */
|
||||
font-size: 24rpx;
|
||||
}
|
||||
|
||||
.value {
|
||||
flex: 3; /* 让 value 占据剩余空间的大部分 */
|
||||
font-size: 22rpx;
|
||||
color: #999;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,227 +0,0 @@
|
||||
<template>
|
||||
<view class="container">
|
||||
<view class="form-container">
|
||||
<wd-form ref="formRef" :model="form">
|
||||
<wd-cell-group border>
|
||||
<wd-input
|
||||
v-model="form.configName"
|
||||
label="配置名称"
|
||||
label-width="100px"
|
||||
prop="configName"
|
||||
clearable
|
||||
placeholder="请输入配置名称"
|
||||
:rules="[{ required: true, message: '请填写配置名称' }]"
|
||||
/>
|
||||
<wd-input
|
||||
v-model="form.configKey"
|
||||
label="配置键"
|
||||
label-width="100px"
|
||||
prop="configKey"
|
||||
clearable
|
||||
placeholder="请输入配置键"
|
||||
:rules="[{ required: true, message: '请填写配置键' }]"
|
||||
/>
|
||||
<wd-input
|
||||
v-model="form.configValue"
|
||||
label="配置值"
|
||||
label-width="100px"
|
||||
prop="configValue"
|
||||
clearable
|
||||
placeholder="请输入配置值"
|
||||
:rules="[{ required: true, message: '请填写配置值' }]"
|
||||
/>
|
||||
<wd-input
|
||||
v-model="form.remark"
|
||||
label="描述、备注"
|
||||
label-width="100px"
|
||||
prop="remark"
|
||||
clearable
|
||||
placeholder="请输入描述或备注"
|
||||
/>
|
||||
</wd-cell-group>
|
||||
<view class="footer">
|
||||
<view class="button-container">
|
||||
<wd-button type="primary" size="large" native-type="submit" block @click="handleSubmit">
|
||||
提交
|
||||
</wd-button>
|
||||
<wd-button v-if="form.id" type="error" size="large" block @click="handleDelete">
|
||||
删除
|
||||
</wd-button>
|
||||
</view>
|
||||
</view>
|
||||
</wd-form>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { ref, onMounted } from "vue";
|
||||
import { onLoad } from "@dcloudio/uni-app";
|
||||
import ConfigAPI, { ConfigForm, ConfigPageVO } from "@/api/system/config";
|
||||
import { FormInstance } from "wot-design-uni/components/wd-form/types";
|
||||
|
||||
const form = ref<ConfigForm>({
|
||||
id: undefined,
|
||||
configName: "",
|
||||
configKey: "",
|
||||
configValue: "",
|
||||
remark: "",
|
||||
});
|
||||
|
||||
const formRef = ref<FormInstance>();
|
||||
|
||||
onMounted(() => {
|
||||
console.log("Form ref:", formRef.value);
|
||||
});
|
||||
|
||||
const handleSubmit = () => {
|
||||
console.log("点击了提交按钮");
|
||||
|
||||
if (formRef.value) {
|
||||
formRef.value!.validate().then(({ valid, errors }) => {
|
||||
if (valid) {
|
||||
console.log("表单数据:", form.value);
|
||||
if (form.value.id) {
|
||||
// 如果 id 不为 null，调用更新 API
|
||||
ConfigAPI.update(form.value.id as number, form.value)
|
||||
.then((response) => {
|
||||
console.log("更新成功:", response);
|
||||
uni.showToast({
|
||||
title: "更新成功",
|
||||
icon: "success",
|
||||
duration: 2000,
|
||||
});
|
||||
uni.navigateBack();
|
||||
})
|
||||
.catch((error) => {
|
||||
console.error("更新失败:", error);
|
||||
});
|
||||
} else {
|
||||
// 如果 id 为 null，调用新增 API
|
||||
ConfigAPI.add(form.value)
|
||||
.then((response) => {
|
||||
console.log("提交成功:", response);
|
||||
uni.showToast({
|
||||
title: "提交成功",
|
||||
icon: "success",
|
||||
duration: 2000,
|
||||
});
|
||||
uni.navigateBack();
|
||||
})
|
||||
.catch((error) => {
|
||||
console.error("提交失败:", error);
|
||||
});
|
||||
}
|
||||
} else {
|
||||
console.log("表单验证未通过", errors);
|
||||
}
|
||||
});
|
||||
} else {
|
||||
console.error("Form ref is not defined");
|
||||
}
|
||||
};
|
||||
const handleDelete = () => {
|
||||
if (form.value.id !== undefined) {
|
||||
uni.showModal({
|
||||
title: "提示",
|
||||
content: "确定要删除此配置吗？",
|
||||
success: (res) => {
|
||||
if (res.confirm) {
|
||||
ConfigAPI.deleteById(form.value.id as number)
|
||||
.then((response) => {
|
||||
console.log("删除成功:", response);
|
||||
uni.showToast({
|
||||
title: "删除成功",
|
||||
icon: "success",
|
||||
duration: 2000,
|
||||
});
|
||||
uni.navigateBack();
|
||||
})
|
||||
.catch((error) => {
|
||||
console.error("删除失败:", error);
|
||||
});
|
||||
}
|
||||
},
|
||||
});
|
||||
} else {
|
||||
console.error("无效的 ID");
|
||||
}
|
||||
};
|
||||
|
||||
// 定义接收的参数
|
||||
const item = ref<ConfigPageVO | null>(null);
|
||||
|
||||
// 获取传递的参数
|
||||
onLoad((options) => {
|
||||
console.log("接收到参数:", options);
|
||||
const title = options && options.item ? "编辑配置" : "新增配置";
|
||||
uni.setNavigationBarTitle({
|
||||
title: title,
|
||||
});
|
||||
if (options && options.item) {
|
||||
try {
|
||||
item.value = JSON.parse(decodeURIComponent(options.item));
|
||||
console.log("接收到的参数:", item.value);
|
||||
if (item.value) {
|
||||
form.value = {
|
||||
id: item.value.id,
|
||||
configName: item.value.configName,
|
||||
configKey: item.value.configKey,
|
||||
configValue: item.value.configValue,
|
||||
remark: item.value.remark,
|
||||
};
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("解析参数失败:", error);
|
||||
}
|
||||
} else {
|
||||
console.log("没有接收到 item 参数");
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 100vh;
|
||||
padding: 40rpx;
|
||||
background: #f8f8f8;
|
||||
}
|
||||
|
||||
.form-container {
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding: 40rpx;
|
||||
background: #fff;
|
||||
border-radius: 8rpx;
|
||||
box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.footer {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.button-container {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.button-container .wd-button {
|
||||
flex: 1;
|
||||
margin: 0 5px; /* 调整按钮之间的间距 */
|
||||
}
|
||||
|
||||
.wd-cell-group {
|
||||
margin-bottom: 20rpx;
|
||||
}
|
||||
|
||||
.wd-button {
|
||||
width: 100%;
|
||||
margin-top: 10rpx; /* 调整按钮间距 */
|
||||
}
|
||||
</style>
|
||||
@@ -29,24 +29,13 @@
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted } from "vue";
|
||||
import { useRoute } from "vue-router";
|
||||
import { ref } from "vue";
|
||||
import type { NoticeDetailVO } from "@/api/system/notice";
|
||||
import NoticeAPI from "@/api/system/notice";
|
||||
import { TagType } from "wot-design-uni/components/wd-tag/types";
|
||||
|
||||
const route = useRoute();
|
||||
const noticeDetail = ref<NoticeDetailVO>({});
|
||||
|
||||
const getLevelColor = (level?: string) => {
|
||||
const colorMap: Record<string, string> = {
|
||||
L: "blue",
|
||||
M: "orange",
|
||||
H: "red",
|
||||
};
|
||||
return colorMap[level || "L"];
|
||||
};
|
||||
|
||||
const getLevelText = (level?: string) => {
|
||||
const textMap: Record<string, string> = {
|
||||
L: "低",
|
||||
@@ -64,9 +53,13 @@ const getLevelType = (level?: string) => {
|
||||
return typeMap[level || "L"];
|
||||
};
|
||||
|
||||
const getNoticeDetail = async () => {
|
||||
/**
|
||||
* 获取通知详情
|
||||
* @param id 通知ID
|
||||
*/
|
||||
const getNoticeDetail = async (id: string) => {
|
||||
try {
|
||||
const res = await NoticeAPI.getDetail(route.query.id as string);
|
||||
const res = await NoticeAPI.getDetail(id);
|
||||
console.log(res);
|
||||
noticeDetail.value = res;
|
||||
} catch (error) {
|
||||
@@ -74,12 +67,24 @@ const getNoticeDetail = async () => {
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* 格式化日期
|
||||
* @param date 日期
|
||||
* @returns 格式化后的日期
|
||||
*/
|
||||
const formatDate = (date: string | Date): string => {
|
||||
return date ? date.toString().split(" ")[0] : "-";
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
getNoticeDetail();
|
||||
onLoad((options: any) => {
|
||||
if (options && options.id) {
|
||||
getNoticeDetail(options.id as string);
|
||||
} else {
|
||||
uni.showToast({
|
||||
title: "通知不存在",
|
||||
icon: "none",
|
||||
});
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<view class="notice-container">
|
||||
<view>
|
||||
<!-- 添加搜索栏 -->
|
||||
<wd-drop-menu close-on-click-modal class="mb-20rpx">
|
||||
<wd-drop-menu close-on-click-modal class="mb-20rpx mr-20rpx ml-20rpx">
|
||||
<wd-drop-menu-item ref="dropMenu" title="筛选" icon="filter" icon-size="18px">
|
||||
<view>
|
||||
<wd-input
|
||||
@@ -22,7 +22,7 @@
|
||||
</wd-drop-menu>
|
||||
|
||||
<!-- 列表内容 -->
|
||||
<view v-for="(item, index) in dataList" :key="index" class="mb-20rpx">
|
||||
<view v-for="(item, index) in dataList" :key="index" class="mt-20rpx">
|
||||
<wd-card>
|
||||
<template #title>
|
||||
<view class="flex items-center justify-between">
|
||||
@@ -112,7 +112,6 @@ const queryParams = ref<NoticePageQuery>({
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
title: "",
|
||||
publishStatus: undefined,
|
||||
});
|
||||
|
||||
// 添加搜索处理函数
|
||||
|
||||
17
src/utils/commonUtil.ts
Normal file
17
src/utils/commonUtil.ts
Normal file
@@ -0,0 +1,17 @@
|
||||
/**
|
||||
* 防抖函数
|
||||
* @param fn 函数
|
||||
* @param delay 延迟时间
|
||||
* @returns
|
||||
*/
|
||||
const debounce = <T extends (...args: any[]) => any>(fn: T, delay: number) => {
|
||||
let timer: number | null = null;
|
||||
return function (this: any, ...args: Parameters<T>) {
|
||||
if (timer) clearTimeout(timer);
|
||||
timer = setTimeout(() => {
|
||||
fn.apply(this, args);
|
||||
}, delay);
|
||||
};
|
||||
};
|
||||
|
||||
export { debounce };
|
||||
Reference in New Issue
Block a user