文件的分开

This commit is contained in:
lq
2025-09-12 17:46:01 +08:00
parent a1f2bb0519
commit b3d1a4789d
6 changed files with 312 additions and 90 deletions

View File

@ -0,0 +1,38 @@
<template>
<a-trigger
trigger="click"
style="
background-color: #ffffff;
border: 1px solid #d9d9d9;
border-radius: 4px;
box-shadow: #00000010 0px 2px 8px;
padding: 8px;
margin-top: 8px;
"
>
<a-button size="small" class="mr-12px color-scheme-btn" :bordered="false">
<template #icon>
<icon-info-circle-fill size="16" class="color-#55585F" />
</template>
<template #default>颜色示意</template>
</a-button>
<template #content>
<div class="flex items-center mt-8px w-104px mr-8px">
<div style="background-color: #ffae00; width: 16px; height: 16px; margin-right: 5px; border-radius: 4px"></div>
<div>待生成</div>
</div>
<div class="flex items-center mt-8px w-104px mr-8px">
<div style="background-color: #6d4cfe; width: 16px; height: 16px; margin-right: 5px; border-radius: 4px"></div>
<div>待发布</div>
</div>
<div class="flex items-center mt-8px w-104px mr-8px">
<div style="background-color: #939499; width: 16px; height: 16px; margin-right: 5px; border-radius: 4px"></div>
<div>已发布</div>
</div>
<div class="flex items-center mt-8px mb-4px w-104px mr-8px">
<div style="background-color: #f64b31; width: 16px; height: 16px; margin-right: 5px; border-radius: 4px"></div>
<div>发布失败</div>
</div>
</template>
</a-trigger>
</template>

View File

@ -0,0 +1,119 @@
<!-- // 新增内容: -->
<template>
<a-trigger trigger="click" :clickOutsideToClose="true" :clickToClose="false">
<a-button size="small">
<template #icon>
<icon-filter size="16" class="color-#55585F" />
</template>
<template #default>筛选</template>
</a-button>
<template #content>
<div class="filter-popup-content">
<!-- 运营人员 -->
<div class="flex items-center mb-24px">
<div class="w-70px">运营人员</div>
<a-space class="w-240px">
<CommonSelect
placeholder="请选择运营人员"
:options="operators || []"
v-model="localQuery.operator"
@change="(val) => handleChange('operator_id', val)"
class="!w-240px"
:allowSearch="true"
popup-container=".filter-popup-content"
/>
</a-space>
</div>
<!-- 发布平台 -->
<div class="flex items-center mb-24px">
<div class="w-70px">发布平台</div>
<a-space class="w-240px">
<CommonSelect
:options="platformOptions || []"
v-model="localQuery.platform"
@change="(val) => handleChange('platform', val)"
class="!w-240px"
placeholder="请选择发布平台"
:allowSearch="true"
popup-container=".filter-popup-content"
/>
</a-space>
</div>
<!-- 账号名称 -->
<div class="flex items-center">
<div class="w-70px">账号名称</div>
<a-space class="w-240px">
<CommonSelect
v-model="localQuery.accounts"
:options="accountList || []"
:multiple="true"
@change="(val) => handleChange('account_id', val)"
class="!w-240px"
placeholder="请选择账号名称"
:allowSearch="true"
popup-container=".filter-popup-content"
/>
</a-space>
</div>
</div>
</template>
</a-trigger>
</template>
<script setup>
import { ref, watch } from 'vue';
const props = defineProps({
operators: Array,
platformOptions: Array,
accountList: Array,
query: Object,
});
onMounted(() => {});
const emit = defineEmits(['update:query']);
// 初始化本地查询对象,只设置非空值
const localQuery = ref({});
// 监听外部 query 变化并同步到本地状态
watch(
() => props.query,
(newQuery) => {
if (newQuery) {
// 只有当值不为空时才设置到localQuery中
const filteredQuery = {};
if (newQuery.operator) {
filteredQuery.operator = newQuery.operator;
}
if (newQuery.platform) {
filteredQuery.platform = newQuery.platform;
}
if (newQuery.accounts && newQuery.accounts.length > 0) {
filteredQuery.accounts = newQuery.accounts;
}
localQuery.value = { ...filteredQuery };
}
},
{ deep: true, immediate: true },
);
// 处理筛选变化
const handleChange = (field, value) => {
localQuery.value[field] = value;
emit('update:query', { ...localQuery.value });
};
</script>
<style scoped>
.filter-popup-content {
background-color: #ffffff;
border: 1px solid #d9d9d9;
border-radius: 4px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
overflow-y: auto;
padding: 24px;
margin-top: 8px;
margin-right: 25px;
}
</style>