renxiaodong/lingji-work-fe
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

修改ui组件

Browse Source
This commit is contained in:
lq
2025-09-15 14:19:43 +08:00
parent 2b98615d2a
commit 9fce76d952
6 changed files with 114 additions and 140 deletions
Download Patch File Download Diff File Expand all files Collapse all files

47
src/views/property-marketing/assignment-management/components/colorTip.vue
View File

@ -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>

30
src/views/property-marketing/assignment-management/components/filter-popup.vue
View File

@ -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>