修改ui组件
This commit is contained in:
lq
@ -1,21 +1,5 @@
|
||||
<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>
|
||||
<a-popover trigger="click" overlayClassName="color-tip-popover">
|
||||
<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>
|
||||
@ -29,10 +13,35 @@
|
||||
<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 class="flex items-center mt-8px 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>
|
||||
<a-button size="small" class="mr-3 color-scheme-btn">
|
||||
<template #icon>
|
||||
<InfoCircleOutlined class="color-#55585F" />
|
||||
</template>
|
||||
<template #default>颜色示意</template>
|
||||
</a-button>
|
||||
</a-popover>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { InfoCircleOutlined } from '@ant-design/icons-vue';
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.color-tip-popover :deep(.ant-popover-inner-content) {
|
||||
background-color: #ffffff;
|
||||
border: 1px solid #d9d9d9;
|
||||
border-radius: 4px;
|
||||
box-shadow: #00000010 0px 2px 8px;
|
||||
padding: 8px;
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
.color-tip-popover :deep(.ant-popover-arrow) {
|
||||
display: none;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,16 +1,10 @@
|
||||
<!-- // 新增内容： -->
|
||||
<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>
|
||||
<a-popover trigger="click" :overlayStyle="{ width: '360px' }" overlayClassName="filter-popup-popover">
|
||||
<template #content>
|
||||
<div class="filter-popup-content">
|
||||
<!-- 运营人员 -->
|
||||
<div class="flex items-center mb-24px">
|
||||
<div class="flex items-center mb-6">
|
||||
<div class="w-70px">运营人员</div>
|
||||
<a-space class="w-240px">
|
||||
<CommonSelect
|
||||
@ -25,7 +19,7 @@
|
||||
</a-space>
|
||||
</div>
|
||||
<!-- 发布平台 -->
|
||||
<div class="flex items-center mb-24px">
|
||||
<div class="flex items-center mb-6">
|
||||
<div class="w-70px">发布平台</div>
|
||||
<a-space class="w-240px">
|
||||
<CommonSelect
|
||||
@ -57,11 +51,18 @@
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</a-trigger>
|
||||
<a-button size="small">
|
||||
<template #icon>
|
||||
<FilterOutlined class="color-#55585F" />
|
||||
</template>
|
||||
<template #default>筛选</template>
|
||||
</a-button>
|
||||
</a-popover>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, watch } from 'vue';
|
||||
import { FilterOutlined } from '@ant-design/icons-vue';
|
||||
|
||||
const props = defineProps({
|
||||
operators: Array,
|
||||
@ -71,7 +72,7 @@ const props = defineProps({
|
||||
});
|
||||
|
||||
onMounted(() => {});
|
||||
const emit = defineEmits(['update:query']);
|
||||
const emit = defineEmits(['filter-change']);
|
||||
|
||||
// 初始化本地查询对象，只设置非空值
|
||||
const localQuery = ref({});
|
||||
@ -101,12 +102,13 @@ watch(
|
||||
// 处理筛选变化
|
||||
const handleChange = (field, value) => {
|
||||
localQuery.value[field] = value;
|
||||
emit('update:query', { ...localQuery.value });
|
||||
console.log(localQuery.value);
|
||||
emit('filter-change', { ...localQuery.value });
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.filter-popup-content {
|
||||
.filter-popup-popover :deep(.ant-popover-inner-content) {
|
||||
background-color: #ffffff;
|
||||
border: 1px solid #d9d9d9;
|
||||
border-radius: 4px;
|
||||
@ -114,6 +116,6 @@ const handleChange = (field, value) => {
|
||||
overflow-y: auto;
|
||||
padding: 24px;
|
||||
margin-top: 8px;
|
||||
margin-right: 25px;
|
||||
margin-right: 50px;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -53,46 +53,13 @@
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-start">
|
||||
<!-- <a-trigger
|
||||
trigger="click"
|
||||
style="
|
||||
background-color: #ffffff;
|
||||
border: 1px solid #d9d9d9;
|
||||
border-radius: 4px;
|
||||
box-shadow: #00000010 0px 2px 8px;
|
||||
width: 120px;
|
||||
height: 64px;
|
||||
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 mb-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">
|
||||
<div
|
||||
style="background-color: #ffae00; width: 16px; height: 16px; margin-right: 5px; border-radius: 4px"
|
||||
></div>
|
||||
<div>内容稿件</div>
|
||||
</div>
|
||||
</template>
|
||||
</a-trigger> -->
|
||||
<colorTip />
|
||||
<FilterPopup
|
||||
:operators="operators"
|
||||
:platformOptions="platformOptions"
|
||||
:accountList="accountList"
|
||||
:query="query"
|
||||
@filter-change="handleFilterChange"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
@ -261,7 +228,7 @@
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { ref, reactive, onMounted, watch, computed, nextTick } from 'vue';
|
||||
import type { TableColumnData } from '@arco-design/web-vue';
|
||||
import type { ColumnProps } from 'ant-design-vue/es/table';
|
||||
import { getTaskSchedules, delTaskSchedules, editTaskSchedules } from '@/api/all/assignment-management';
|
||||
import { fetchAccountOperators, getMediaAccountList } from '@/api/all/propertyMarketing';
|
||||
import icon1 from '@/assets/img/platform/icon-dy.png';
|
||||
@ -351,7 +318,7 @@ const currentDateRange = reactive({
|
||||
start: '',
|
||||
end: '',
|
||||
});
|
||||
const columns = ref<TableColumnData[]>([]);
|
||||
const columns = ref<ColumnProps[]>([]);
|
||||
const data = ref<any[]>([]);
|
||||
const operators = ref([]);
|
||||
const accountList = ref([]);
|
||||
@ -744,57 +711,29 @@ const handleToday = () => {
|
||||
}
|
||||
};
|
||||
// 处理筛选项选择事件
|
||||
const handleFilterChange = (field: string, value: any, options?: any[]) => {
|
||||
console.log(`筛选项 ${field} 发生变化:`, value);
|
||||
// 根据不同的筛选字段执行不同的操作
|
||||
switch (field) {
|
||||
case 'operator_id':
|
||||
console.log('运营人员选择:', value, typeof value, Array.isArray(value), options);
|
||||
// 查找选中的运营人员完整信息
|
||||
if (options && value) {
|
||||
if (Array.isArray(value)) {
|
||||
// 多选情况
|
||||
const selectedOperators = options.filter((op) => value.includes(op.name)).map((op) => op.value);
|
||||
query.operator_ids = selectedOperators;
|
||||
}
|
||||
} else {
|
||||
query.operator_ids = [];
|
||||
const handleFilterChange = (field: object) => {
|
||||
console.log(`筛选项发生变化:`, field);
|
||||
// // 根据不同的筛选字段执行不同的操作
|
||||
if (typeof field === 'object' && field !== null) {
|
||||
// 处理传入整个对象的情况
|
||||
Object.keys(field).forEach((key) => {
|
||||
const value = field[key];
|
||||
switch (key) {
|
||||
case 'operator':
|
||||
query.operator_ids = value;
|
||||
break;
|
||||
case 'platform':
|
||||
query.platforms = value;
|
||||
break;
|
||||
case 'accounts':
|
||||
query.ids = value;
|
||||
break;
|
||||
default:
|
||||
// 其他字段直接赋值
|
||||
query[key] = value;
|
||||
}
|
||||
console.log('选中的运营人员完整信息(多选):', query.operator_ids);
|
||||
handleSearch();
|
||||
break;
|
||||
case 'account_id':
|
||||
// 查找选中的账号完整信息
|
||||
if (options && value !== undefined && value !== '') {
|
||||
if (Array.isArray(value)) {
|
||||
console.log(options, value);
|
||||
// 多选情况
|
||||
const selectedAccounts = options.filter((op: any) => value.includes(op.name));
|
||||
query.ids = selectedAccounts.map((account: any) => account.value);
|
||||
}
|
||||
} else {
|
||||
query.ids = [];
|
||||
}
|
||||
console.log('选中的账号完整信息(单选):', query.ids);
|
||||
handleSearch();
|
||||
break;
|
||||
case 'platform':
|
||||
// 查找选中的平台完整信息
|
||||
if (options && value !== undefined && value !== '') {
|
||||
console.log(options, value);
|
||||
if (Array.isArray(value)) {
|
||||
// 多选情况
|
||||
const selectedPlatforms = options.filter((op: any) => value.includes(op.id));
|
||||
query.platforms = selectedPlatforms.map((account: any) => account.id);
|
||||
}
|
||||
} else {
|
||||
query.platforms = [];
|
||||
}
|
||||
console.log('发布平台选择:', query.platforms);
|
||||
handleSearch();
|
||||
break;
|
||||
default:
|
||||
console.log('未知筛选字段:', field, value);
|
||||
});
|
||||
handleSearch();
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
Reference in New Issue
Block a user