文件的分开
This commit is contained in:
@ -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>
|
||||
@ -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>
|
||||
Reference in New Issue
Block a user