feat: 内容稿件列表筛选栏

This commit is contained in:
rd
2025-07-25 17:15:44 +08:00
parent e88695a5e4
commit 52a696c133
6 changed files with 75 additions and 17 deletions

View File

@ -21,15 +21,17 @@
.arco-btn-primary {
background-color: $color-primary !important;
border: none !important;
border-color: transparent !important;
color: #fff !important;
&.arco-btn-disabled {
color: #fff !important;
border-color: transparent !important;
background-color: $color-primary-3 !important;
}
&:not(.arco-btn-disabled) {
&:hover {
color: #fff !important;
border-color: transparent !important;
background-color: $color-primary-5 !important;
}
}
@ -134,14 +136,16 @@
.arco-btn-text {
background-color: transparent !important;
border: none !important;
border-color: transparent !important;
color: $color-primary !important;
&.arco-btn-disabled {
color: $color-primary-2 !important;
border-color: transparent !important;
}
&:not(.arco-btn-disabled) {
&:hover {
color: $color-primary-5 !important;
border-color: transparent !important;
}
}

View File

@ -112,4 +112,6 @@ onMounted(() => {
provide('update', getData);
</script>
<style scoped lang="scss"></style>
<style scoped lang="scss">
@import "./style.scss"
</style>

View File

@ -1,17 +1,11 @@
<!-- eslint-disable vue/no-mutating-props -->
<!--
* @Author: RenXiaoDong
* @Date: 2025-06-25 14:02:40
-->
<template>
<div class="filter-wrap px-24px pt-12px pb-24px">
<div class="filter-row flex">
<div class="filter-wrap px-24px py-24px">
<div class="filter-row flex mb-16px">
<div class="filter-row-item flex items-center">
<span class="label">内容稿件标题</span>
<a-space size="medium">
<a-input
v-model="query.name"
class="w-240px"
class="!w-240px"
placeholder="请输入内容稿件标题"
size="medium"
allow-clear
@ -21,8 +15,45 @@
<icon-search />
</template>
</a-input>
</div>
<div class="filter-row-item flex items-center">
<span class="label">所属项目</span>
<CommonSelect placeholder="请选择所属项目" v-model="query.project_id" class="!w-166px" />
</div>
<div class="filter-row-item flex items-center">
<span class="label">序号</span>
<a-space size="medium">
<a-input
v-model="query.number"
class="w-160px"
placeholder="请输入序号"
size="medium"
allow-clear
@change="handleSearch"
>
<template #prefix>
<icon-search />
</template>
</a-input>
</a-space>
</div>
<div class="filter-row-item flex items-center">
<span class="label">审核状态</span>
<CommonSelect placeholder="请选择审核状态" v-model="query.status" class="!w-166px" />
</div>
</div>
<div class="filter-row flex">
<div class="filter-row-item flex items-center">
<span class="label">发布日期</span>
<a-range-picker
v-model="published_at"
size="medium"
allow-clear
format="YYYY-MM-DD"
class="w-280px"
@change="onDateChange"
/>
</div>
<div class="filter-row-item flex items-center">
<a-button type="outline" class="mr-12px" size="medium" @click="handleSearch">
<template #icon>
@ -43,7 +74,7 @@
<script setup>
import { defineEmits, defineProps } from 'vue';
import CommonSelect from '@/components/common-select';
const props = defineProps({
query: {
type: Object,
@ -53,6 +84,8 @@ const props = defineProps({
const emits = defineEmits('search', 'reset', 'update:query');
const published_at = ref([]);
const handleSearch = () => {
emits('update:query', props.query);
nextTick(() => {
@ -60,7 +93,19 @@ const handleSearch = () => {
});
};
const onDateChange = (value) => {
const [start, end] = value;
const FORMAT_DATE = 'YYYY-MM-DD HH:mm:ss';
props.query.published_at = [
dayjs(start).startOf('day').format(FORMAT_DATE),
dayjs(end).endOf('day').format(FORMAT_DATE),
];
handleSearch();
};
const handleReset = () => {
published_at.value = [];
emits('reset');
};
</script>

View File

@ -11,7 +11,7 @@
@sorter-change="handleSorterChange"
>
<template #empty>
<NoData text="暂无项目"/>
<NoData text="暂无稿件"/>
</template>
<template #columns>
<a-table-column

View File

@ -1,5 +1,9 @@
export const INITIAL_QUERY = {
name: '',
project_id: '',
number: '',
status: '',
published_at: [],
sort_column: undefined,
sort_order: undefined,
};

View File

@ -4,9 +4,10 @@
<div class="top flex h-64px px-24px py-10px justify-between items-center">
<p class="text-18px font-400 lh-26px color-#211F24 title">内容稿件列表</p>
<div class="flex items-center">
<a-button type="outline" size="medium" class="mr-12px" @click="handleOpenAddProjectModal"> 分享内容稿件 </a-button>
<a-button type="primary" size="medium" @click="handleOpenAddProjectModal">
<template #icon>
<icon-plus size="16"/>
<icon-plus size="16" />
</template>
<template #default>上传内容稿件</template>
</a-button>
@ -112,4 +113,6 @@ onMounted(() => {
provide('update', getData);
</script>
<style scoped lang="scss"></style>
<style scoped lang="scss">
@import "./style.scss"
</style>