feat(survey): 优化问卷列表页面

- 添加搜索功能,用户可以按项目名称搜索问卷
- 调整问卷列表项的样式,优化布局
- 移除多余的 padding 样式
- 更新 base.scss 中的变量定义
This commit is contained in:
陈昱达
2025-03-18 13:52:51 +08:00
parent 4ffde6cc5c
commit 1a9383840f
3 changed files with 32 additions and 10 deletions

View File

@@ -1,6 +1,13 @@
<template>
<div class="survey-search">
<van-search class="theme-background" :border="false" background="#71b73c"></van-search>
<van-search
class="theme-background"
:border="false"
background="#71b73c"
v-model="searchValue"
@blur="blurs"
@search="blurs"
></van-search>
</div>
<div class="new-survey-container container">
<van-list
@@ -103,9 +110,18 @@ const loading = ref(false);
const finished = ref(false);
const form = ref({
page: 0,
pageSize: 10
pageSize: 10,
project_name: ''
});
const searchValue = ref('');
const blurs = () => {
form.value.page = 1;
form.value.project_name = searchValue.value;
survey.value = [];
fetchSurveys();
};
const onLoad = () => {
// 异步更新数据
setTimeout(() => {
@@ -113,11 +129,12 @@ const onLoad = () => {
fetchSurveys();
}, 500);
};
const fetchSurveys = async() => {
const fetchSurveys = async () => {
const params = {
page: form.value.page,
per_page: form.value.pageSize,
group_id: 0
group_id: 0,
project_name: searchValue.value
};
const res = await getSurveysPage(params);
if (res.data.code === 0) {
@@ -150,7 +167,7 @@ const deleteItem = (item) => {
showCancelButton: true,
confirmButtonColor: '#03B03C'
})
.then(async() => {
.then(async () => {
const res = await deleteSurveys(item.sn);
if (res.data.message) {
showToast(res.data.message);
@@ -174,7 +191,7 @@ const copyItem = (item) => {
showCancelButton: true,
confirmButtonColor: '#03B03C'
})
.then(async() => {
.then(async () => {
const res = await copySurveys(item.sn);
if (res.data.code === 200 || res.data.code === 201) {
showSuccessToast('复制成功');
@@ -215,7 +232,7 @@ const editItem = (item) => {
});
};
// 保存为模板
const saveTemplate = async(item) => {
const saveTemplate = async (item) => {
const data = JSON.parse(JSON.stringify(item));
const res = await saveTemplates(item.sn, data);
if (res.data.code === 200 || res.data.code === 201) {
@@ -259,12 +276,12 @@ onMounted(() => {
.new-survey-container {
//min-height: calc(100vh - 100px);
padding: 1px;
//padding: 1px;
//background: linear-gradient(to bottom, $theme-color 200px, #f2f2f2 300px);
.new-survey_item {
margin: 10px;
margin: 0 10px 10px 10px;
padding: 10px 0 8px 7px;
border-radius: 8px;
background-color: white;
@@ -354,5 +371,9 @@ onMounted(() => {
}
}
}
.new-survey_item + .new-survey_item {
margin: 0 10px 10px 10px;
}
}
</style>