feat: 内容稿件列表筛选栏
This commit is contained in:
@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -112,4 +112,6 @@ onMounted(() => {
|
||||
provide('update', getData);
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss"></style>
|
||||
<style scoped lang="scss">
|
||||
@import "./style.scss"
|
||||
</style>
|
||||
@ -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>
|
||||
|
||||
@ -11,7 +11,7 @@
|
||||
@sorter-change="handleSorterChange"
|
||||
>
|
||||
<template #empty>
|
||||
<NoData text="暂无项目"/>
|
||||
<NoData text="暂无稿件"/>
|
||||
</template>
|
||||
<template #columns>
|
||||
<a-table-column
|
||||
|
||||
@ -1,5 +1,9 @@
|
||||
export const INITIAL_QUERY = {
|
||||
name: '',
|
||||
project_id: '',
|
||||
number: '',
|
||||
status: '',
|
||||
published_at: [],
|
||||
sort_column: undefined,
|
||||
sort_order: undefined,
|
||||
};
|
||||
|
||||
@ -4,6 +4,7 @@
|
||||
<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" />
|
||||
@ -112,4 +113,6 @@ onMounted(() => {
|
||||
provide('update', getData);
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss"></style>
|
||||
<style scoped lang="scss">
|
||||
@import "./style.scss"
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user