feat: select组件替换
This commit is contained in:
@ -8,13 +8,7 @@
|
||||
<div class="filter-row flex">
|
||||
<div class="filter-row-item flex items-center">
|
||||
<span class="label">账号名称</span>
|
||||
<Input
|
||||
v-model:value="query.name"
|
||||
placeholder="请搜索..."
|
||||
class="!w-240px"
|
||||
allowClear
|
||||
@change="handleSearch"
|
||||
>
|
||||
<Input v-model:value="query.name" placeholder="请搜索..." class="!w-240px" allowClear @change="handleSearch">
|
||||
<template #prefix>
|
||||
<icon-search />
|
||||
</template>
|
||||
@ -42,12 +36,12 @@
|
||||
<div class="filter-row flex">
|
||||
<div class="filter-row-item flex items-center">
|
||||
<span class="label">时间筛选</span>
|
||||
<a-select v-model="query.type" size="medium" placeholder="全部" class="!w-240px" @change="handleSearch">
|
||||
<template #arrow-icon> <icon-calendar size="16" /> </template>
|
||||
<a-option :value="7" label="近7天">近7天</a-option>
|
||||
<!-- <a-option :value="14" label="近14天">近14天</a-option> -->
|
||||
<a-option :value="30" label="近30天">近30天</a-option>
|
||||
</a-select>
|
||||
<Select v-model:value="query.type" size="middle" placeholder="全部" class="!w-240px" @change="handleSearch">
|
||||
<template #suffixIcon> <icon-calendar size="16" /> </template>
|
||||
<Option :value="7" label="近7天">近7天</Option>
|
||||
<!-- <Option :value="14" label="近14天">近14天</Option> -->
|
||||
<Option :value="30" label="近30天">近30天</Option>
|
||||
</Select>
|
||||
</div>
|
||||
<div class="filter-row-item flex items-center">
|
||||
<Button type="primary" ghost class="w-84px mr-12px" @click="handleSearch">
|
||||
@ -68,12 +62,14 @@
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { Button, Input } from 'ant-design-vue';
|
||||
import { Button, Input, Select } from 'ant-design-vue';
|
||||
import { reactive, defineEmits, defineProps, onMounted, nextTick, ref } from 'vue';
|
||||
import { fetchAccountGroups, fetchAccountOperators } from '@/api/all/propertyMarketing';
|
||||
import StatusSelect from '@/views/property-marketing/media-account/components/status-select';
|
||||
import CommonSelect from '@/components/common-select';
|
||||
|
||||
const { Option } = Select;
|
||||
|
||||
const props = defineProps({
|
||||
query: {
|
||||
type: Object,
|
||||
|
||||
@ -37,8 +37,8 @@ export const CARD_FIELDS = [
|
||||
|
||||
export const INITIAL_QUERY = {
|
||||
name: '',
|
||||
status: '',
|
||||
operator_id: '',
|
||||
status: undefined,
|
||||
operator_id: undefined,
|
||||
group_ids: [],
|
||||
type: 7,
|
||||
column: '',
|
||||
|
||||
@ -31,15 +31,14 @@
|
||||
<FormItem label="选择标签" required>
|
||||
<template v-if="editType === 'all'">
|
||||
<div class="flex items-center w-100%">
|
||||
<a-select
|
||||
v-model="form.tags"
|
||||
<Select
|
||||
v-model:value="form.tags"
|
||||
:options="tagOptions"
|
||||
multiple
|
||||
allow-create
|
||||
mode="tags"
|
||||
placeholder="请输入标签,回车键可直接添加..."
|
||||
:limit="5"
|
||||
:max-tag-count="5"
|
||||
class="flex-1"
|
||||
@create="handleCreateTag"
|
||||
@search="handleCreateTag"
|
||||
/>
|
||||
<span class="ml-12px">{{ `${form.tags.length}/5` }}</span>
|
||||
</div>
|
||||
@ -58,15 +57,14 @@
|
||||
<a-table-column title="选择标签" data-index="tags">
|
||||
<template #cell="{ record, rowIndex }">
|
||||
<div class="flex items-center w-100%">
|
||||
<a-select
|
||||
v-model="record.tags"
|
||||
<Select
|
||||
v-model:value="record.tags"
|
||||
:options="tagOptions"
|
||||
multiple
|
||||
allow-create
|
||||
mode="tags"
|
||||
placeholder="请输入标签,回车键可直接添加..."
|
||||
:limit="5"
|
||||
:max-tag-count="5"
|
||||
style="width: 90%"
|
||||
@create="(val) => handleCreateTag(val, rowIndex)"
|
||||
@search="(val) => handleCreateTag(val, rowIndex)"
|
||||
/>
|
||||
<span class="tag-count ml-8px">{{ record.tags.length }}/5</span>
|
||||
</div>
|
||||
@ -85,7 +83,7 @@
|
||||
|
||||
<script setup>
|
||||
import { ref, reactive } from 'vue';
|
||||
import { Button, Modal, Form, FormItem, RadioGroup, Radio } from 'ant-design-vue';
|
||||
import { Button, Modal, Form, FormItem, RadioGroup, Radio, Select } from 'ant-design-vue';
|
||||
import { fetchAccountTags, batchPutTag } from '@/api/all/propertyMarketing';
|
||||
|
||||
import icon1 from '@/assets/img/icon-question.png';
|
||||
|
||||
@ -20,22 +20,22 @@
|
||||
</div>
|
||||
<div class="filter-row-item">
|
||||
<span class="label">平台</span>
|
||||
<a-select
|
||||
v-model="query.platform"
|
||||
<Select
|
||||
v-model:value="query.platform"
|
||||
class="w-160px"
|
||||
size="medium"
|
||||
size="middle"
|
||||
placeholder="全部"
|
||||
allow-clear
|
||||
allowClear
|
||||
@change="handleSearch"
|
||||
>
|
||||
<a-option
|
||||
<Option
|
||||
v-for="(item, index) in MEDIA_ACCOUNT_PLATFORMS"
|
||||
:key="index"
|
||||
:value="item.value"
|
||||
:label="item.label"
|
||||
>{{ item.label }}</a-option
|
||||
>{{ item.label }}</Option
|
||||
>
|
||||
</a-select>
|
||||
</Select>
|
||||
</div>
|
||||
<div class="filter-row-item">
|
||||
<span class="label">运营人员</span>
|
||||
@ -82,7 +82,8 @@
|
||||
|
||||
<script setup>
|
||||
import { reactive, defineEmits, defineProps } from 'vue';
|
||||
import { Button, Input } from 'ant-design-vue';
|
||||
import { Button, Input, Select } from 'ant-design-vue';
|
||||
const { Option } = Select;
|
||||
import {
|
||||
fetchAccountTags,
|
||||
getProjectList,
|
||||
|
||||
@ -4,9 +4,9 @@
|
||||
*/
|
||||
export const INITIAL_QUERY = {
|
||||
search: '',
|
||||
status: '',
|
||||
platform: '',
|
||||
operator_id: '',
|
||||
status: undefined,
|
||||
platform: undefined,
|
||||
operator_id: undefined,
|
||||
group_ids: [],
|
||||
tag_ids: [],
|
||||
project_ids: [],
|
||||
|
||||
@ -3,15 +3,15 @@
|
||||
* @Date: 2025-06-25 14:02:40
|
||||
-->
|
||||
<template>
|
||||
<a-select
|
||||
v-model="selectedStatus"
|
||||
:multiple="multiple"
|
||||
size="medium"
|
||||
<Select
|
||||
v-model:value="selectedStatus"
|
||||
:mode="multiple ? 'multiple' : undefined"
|
||||
size="middle"
|
||||
:placeholder="placeholder"
|
||||
allow-clear
|
||||
allowClear
|
||||
@change="handleChange"
|
||||
>
|
||||
<a-option
|
||||
<Option
|
||||
v-for="(item, index) in STATUS_LIST"
|
||||
:key="index"
|
||||
:value="item.value"
|
||||
@ -19,11 +19,13 @@
|
||||
:style="item.style"
|
||||
>
|
||||
{{ item.text }}
|
||||
</a-option>
|
||||
</a-select>
|
||||
</Option>
|
||||
</Select>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { Select } from 'ant-design-vue';
|
||||
const { Option } = Select;
|
||||
import { ref, watch } from 'vue';
|
||||
import { STATUS_LIST } from '@/views/property-marketing/media-account/components/status-select/constants';
|
||||
|
||||
|
||||
@ -142,12 +142,15 @@ const handleEdit = () => {
|
||||
});
|
||||
};
|
||||
|
||||
const setCurrent = async (current) => {
|
||||
if (isFirstStep.value) {
|
||||
const setCurrent = (current) => {
|
||||
if (isFirstStep.value) {
|
||||
compRef.value.validate().then(() => {
|
||||
currentStep.value = current;
|
||||
});
|
||||
return;
|
||||
}
|
||||
currentStep.value = current;
|
||||
|
||||
};
|
||||
const onPrev = () => {
|
||||
currentStep.value--;
|
||||
|
||||
@ -27,18 +27,18 @@
|
||||
</template>
|
||||
</Input>
|
||||
|
||||
<a-select
|
||||
v-model="query.uploader_id"
|
||||
size="medium"
|
||||
<Select
|
||||
v-model:value="query.uploader_id"
|
||||
size="middle"
|
||||
placeholder="选择上传人员"
|
||||
class="w-160px"
|
||||
allow-clear
|
||||
allowClear
|
||||
@change="handleSearch"
|
||||
>
|
||||
<a-option v-for="(item, index) in uploaders" :key="index" :value="item.id" :label="item.name">
|
||||
<Option v-for="(item, index) in uploaders" :key="index" :value="item.id" :label="item.name">
|
||||
{{ item.name || '-' }}
|
||||
</a-option>
|
||||
</a-select>
|
||||
</Option>
|
||||
</Select>
|
||||
</div>
|
||||
<a-table
|
||||
ref="tableRef"
|
||||
@ -113,7 +113,8 @@
|
||||
|
||||
<script setup>
|
||||
import { formatTableField, exactFormatTime } from '@/utils/tools';
|
||||
import { Button, Input } from 'ant-design-vue';
|
||||
import { Button, Input, Select } from 'ant-design-vue';
|
||||
const { Option } = Select;
|
||||
|
||||
import { getPlacementAccountOperators, getWorksList } from '@/api/all/propertyMarketing';
|
||||
import { getUserList } from '@/api/all/common';
|
||||
@ -159,7 +160,7 @@ const { dataSource, selectedRowKeys, selectedRows, rowSelection, handleSelect, h
|
||||
|
||||
const query = ref({
|
||||
uid: '',
|
||||
uploader_id: '',
|
||||
uploader_id: undefined,
|
||||
title: '',
|
||||
});
|
||||
const uploaders = ref([]);
|
||||
|
||||
@ -14,34 +14,34 @@
|
||||
<icon-search />
|
||||
</template>
|
||||
</Input>
|
||||
<a-select
|
||||
v-model="query.platform"
|
||||
<Select
|
||||
v-model:value="query.platform"
|
||||
class="mr-16px w-160px"
|
||||
size="medium"
|
||||
size="middle"
|
||||
placeholder="选择平台"
|
||||
allow-clear
|
||||
allowClear
|
||||
@change="handleSearch"
|
||||
>
|
||||
<a-option
|
||||
<Option
|
||||
v-for="(item, index) in PLATFORM_LIST"
|
||||
:key="index"
|
||||
:value="item.value"
|
||||
:label="item.label"
|
||||
>{{ item.label }}</a-option
|
||||
>{{ item.label }}</Option
|
||||
>
|
||||
</a-select>
|
||||
<a-select
|
||||
v-model="query.operator_id"
|
||||
size="medium"
|
||||
</Select>
|
||||
<Select
|
||||
v-model:value="query.operator_id"
|
||||
size="middle"
|
||||
placeholder="选择运营人员"
|
||||
class="w-160px"
|
||||
allow-clear
|
||||
allowClear
|
||||
@change="handleSearch"
|
||||
>
|
||||
<a-option v-for="(item, index) in operators" :key="index" :value="item.id" :label="item.name">
|
||||
<Option v-for="(item, index) in operators" :key="index" :value="item.id" :label="item.name">
|
||||
{{ item.name }}
|
||||
</a-option>
|
||||
</a-select>
|
||||
</Option>
|
||||
</Select>
|
||||
</div>
|
||||
<a-table
|
||||
ref="tableRef"
|
||||
@ -117,7 +117,8 @@
|
||||
<script setup>
|
||||
import { PLATFORM_LIST, getPutAccountPlatformLogo } from '@/utils/platform';
|
||||
import { formatTableField } from '@/utils/tools';
|
||||
import { Button, Input } from 'ant-design-vue';
|
||||
import { Button, Input, Select } from 'ant-design-vue';
|
||||
const { Option } = Select;
|
||||
|
||||
import { getPlacementAccountOperators, getPlacementAccountsList } from '@/api/all/propertyMarketing';
|
||||
import { useTableSelectionWithPagination } from '@/hooks/useTableSelectionWithPagination';
|
||||
@ -156,8 +157,8 @@ const { dataSource, selectedRowKeys, selectedRows, rowSelection, handleSelect, h
|
||||
|
||||
const query = ref({
|
||||
name: '',
|
||||
operator_id: '',
|
||||
platform: '',
|
||||
operator_id: undefined,
|
||||
platform: undefined,
|
||||
});
|
||||
const operators = ref([]);
|
||||
const allData = ref([]);
|
||||
|
||||
@ -14,34 +14,34 @@
|
||||
<icon-search />
|
||||
</template>
|
||||
</Input>
|
||||
<a-select
|
||||
v-model="query.platform"
|
||||
<Select
|
||||
v-model:value="query.platform"
|
||||
class="mr-16px w-160px"
|
||||
size="medium"
|
||||
size="middle"
|
||||
placeholder="选择平台"
|
||||
allow-clear
|
||||
allowClear
|
||||
@change="handleSearch"
|
||||
>
|
||||
<a-option
|
||||
<Option
|
||||
v-for="(item, index) in MEDIA_ACCOUNT_PLATFORMS"
|
||||
:key="index"
|
||||
:value="item.value"
|
||||
:label="item.label"
|
||||
>{{ item.label }}</a-option
|
||||
>{{ item.label }}</Option
|
||||
>
|
||||
</a-select>
|
||||
<a-select
|
||||
v-model="query.operator_id"
|
||||
size="medium"
|
||||
</Select>
|
||||
<Select
|
||||
v-model:value="query.operator_id"
|
||||
size="middle"
|
||||
placeholder="选择运营人员"
|
||||
class="w-160px"
|
||||
allow-clear
|
||||
allowClear
|
||||
@change="handleSearch"
|
||||
>
|
||||
<a-option v-for="(item, index) in operators" :key="index" :value="item.id" :label="item.name">
|
||||
<Option v-for="(item, index) in operators" :key="index" :value="item.id" :label="item.name">
|
||||
{{ item.name }}
|
||||
</a-option>
|
||||
</a-select>
|
||||
</Option>
|
||||
</Select>
|
||||
</div>
|
||||
<a-table
|
||||
ref="tableRef"
|
||||
@ -115,7 +115,8 @@
|
||||
<script setup>
|
||||
import { MEDIA_ACCOUNT_PLATFORMS, getMediaAccountPlatformLogo } from '@/utils/platform';
|
||||
import { formatTableField } from '@/utils/tools';
|
||||
import { Button, Input } from 'ant-design-vue';
|
||||
import { Button, Input, Select } from 'ant-design-vue';
|
||||
const { Option } = Select;
|
||||
|
||||
import { fetchAccountOperators, getMediaAccountList } from '@/api/all/propertyMarketing';
|
||||
import { useTableSelectionWithPagination } from '@/hooks/useTableSelectionWithPagination';
|
||||
@ -154,8 +155,8 @@ const { dataSource, selectedRowKeys, selectedRows, rowSelection, handleSelect, h
|
||||
|
||||
const query = ref({
|
||||
name: '',
|
||||
operator_id: '',
|
||||
platform: '',
|
||||
operator_id: undefined,
|
||||
platform: undefined,
|
||||
});
|
||||
const operators = ref([]);
|
||||
const allData = ref([]);
|
||||
|
||||
@ -10,38 +10,30 @@
|
||||
<div class="filter-row flex mb-20px">
|
||||
<div class="filter-row-item flex items-center" v-if="accountType == 2">
|
||||
<span class="label">计划名称</span>
|
||||
<a-space size="medium" class="w-240px">
|
||||
<PlanSelect v-model="query.ids"></PlanSelect>
|
||||
</a-space>
|
||||
<PlanSelect v-model="query.ids" class="w-240px"></PlanSelect>
|
||||
</div>
|
||||
<div class="filter-row-item flex items-center">
|
||||
<span class="label">账号名称</span>
|
||||
<a-space size="medium" class="w-240px">
|
||||
<AccountSelect v-model="query.placement_account_id"></AccountSelect>
|
||||
</a-space>
|
||||
<AccountSelect v-model:value="query.placement_account_id" class="w-240px"></AccountSelect>
|
||||
</div>
|
||||
<div class="filter-row-item flex items-center">
|
||||
<span class="label">平台</span>
|
||||
<a-select v-model="query.platform" class="w-150" size="medium" placeholder="全部" allow-clear>
|
||||
<a-option v-for="(item, index) in PLATFORM_LIST" :key="index" :value="item.value" :label="item.label"
|
||||
<Select v-model:value="query.platform" class="w-150" size="middle" placeholder="全部" allowClear>
|
||||
<Option v-for="(item, index) in PLATFORM_LIST" :key="index" :value="item.value" :label="item.label"
|
||||
>{{ item.label }}
|
||||
</a-option>
|
||||
</a-select>
|
||||
</Option>
|
||||
</Select>
|
||||
</div>
|
||||
|
||||
<div class="filter-row-item flex items-center">
|
||||
<span class="label">运营人员</span>
|
||||
<a-space class="w-160px">
|
||||
<CommonSelect v-model="query.operator_id" :multiple="false" :options="operators" />
|
||||
</a-space>
|
||||
<CommonSelect v-model:value="query.operator_id" class="!w-160px" :multiple="false" :options="operators" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="filter-row flex">
|
||||
<div class="filter-row-item flex items-center">
|
||||
<span class="label">时间筛选</span>
|
||||
<a-space class="w-240px">
|
||||
<a-range-picker v-model="query.data_time" size="medium" allow-clear format="YYYY-MM-DD" class="w-100%" />
|
||||
</a-space>
|
||||
<a-range-picker v-model="query.data_time" size="medium" allow-clear format="YYYY-MM-DD" class="!w-240px" />
|
||||
</div>
|
||||
<Button type="primary" ghost class="mr-12px" @click="handleSearch">
|
||||
<template #icon>
|
||||
@ -75,7 +67,7 @@
|
||||
<script setup lang="ts">
|
||||
import EchartsItem from './components/echarts-item/index';
|
||||
import { PLATFORM_LIST } from '@/utils/platform';
|
||||
import { Button } from 'ant-design-vue';
|
||||
import { Button, Select } from 'ant-design-vue';
|
||||
import {
|
||||
getPlacementAccountsTrend,
|
||||
getPlacementAccountProjectsTrend,
|
||||
@ -85,6 +77,7 @@ import CommonSelect from '@/components/common-select';
|
||||
import AccountSelect from '@/views/components/common/AccountSelect.vue';
|
||||
import PlanSelect from '@/views/components/common/PlanSelect.vue';
|
||||
|
||||
const { Option } = Select;
|
||||
const accountType = ref(1);
|
||||
|
||||
const onLoading = ref(true);
|
||||
@ -96,8 +89,8 @@ const getOperators = async () => {
|
||||
}
|
||||
};
|
||||
const query = reactive({
|
||||
platform: '',
|
||||
operator_id: '',
|
||||
platform: undefined,
|
||||
operator_id: undefined,
|
||||
data_time: [],
|
||||
ids: [],
|
||||
placement_account_id: [],
|
||||
@ -227,8 +220,8 @@ const chartConfigs = ref([
|
||||
},
|
||||
]);
|
||||
const handleReset = async () => {
|
||||
query.platform = '';
|
||||
query.operator_id = '';
|
||||
query.platform = undefined;
|
||||
query.operator_id = undefined;
|
||||
query.ids = [];
|
||||
query.placement_account_id = [];
|
||||
handleSearch();
|
||||
|
||||
@ -8,52 +8,58 @@
|
||||
<div class="filter-row flex mb-20px">
|
||||
<div class="filter-row-item flex items-center">
|
||||
<span class="label">{{ isAccountTab ? '账户名称' : '计划名称' }}</span>
|
||||
<a-space size="medium" class="w-240px">
|
||||
<Input v-model:value="query.name" placeholder="请搜索..." size="middle" allowClear @change="handleSearch">
|
||||
<template #prefix>
|
||||
<SearchOutlined />
|
||||
</template>
|
||||
</Input>
|
||||
</a-space>
|
||||
<Input
|
||||
v-model:value="query.name"
|
||||
class="w-240px"
|
||||
placeholder="请搜索..."
|
||||
size="middle"
|
||||
allowClear
|
||||
@change="handleSearch"
|
||||
>
|
||||
<template #prefix>
|
||||
<SearchOutlined />
|
||||
</template>
|
||||
</Input>
|
||||
</div>
|
||||
<div v-if="!isAccountTab" class="filter-row-item flex items-center">
|
||||
<span class="label">计划分组</span>
|
||||
<a-space class="w-200px">
|
||||
<CommonSelect v-model="query.group_ids" multiple :options="groups" @change="handleSearch" />
|
||||
</a-space>
|
||||
<CommonSelect class="w-200px" v-model="query.group_ids" multiple :options="groups" @change="handleSearch" />
|
||||
</div>
|
||||
<div class="filter-row-item flex items-center">
|
||||
<span class="label">状态</span>
|
||||
<a-space class="w-180px">
|
||||
<StatusSelect v-model="query.status" @change="handleSearch" />
|
||||
</a-space>
|
||||
<StatusSelect class="w-180px" v-model="query.status" @change="handleSearch" />
|
||||
</div>
|
||||
<div class="filter-row-item flex items-center">
|
||||
<span class="label">运营人员</span>
|
||||
<a-space class="w-160px">
|
||||
<CommonSelect v-model="query.operator_id" :multiple="false" :options="operators" @change="handleSearch" />
|
||||
</a-space>
|
||||
<CommonSelect
|
||||
class="w-160px"
|
||||
v-model="query.operator_id"
|
||||
:multiple="false"
|
||||
:options="operators"
|
||||
@change="handleSearch"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="filter-row flex">
|
||||
<div v-if="!isAccountTab" class="filter-row-item flex items-center">
|
||||
<span class="label">关联账户</span>
|
||||
<a-space class="w-240px">
|
||||
<AccountSelect v-model="query.placement_account_id" :options="placementAccounts" @change="handleSearch" />
|
||||
</a-space>
|
||||
<CommonSelect
|
||||
class="w-240px"
|
||||
v-model:value="query.placement_account_id"
|
||||
:options="placementAccounts"
|
||||
@change="handleSearch"
|
||||
/>
|
||||
</div>
|
||||
<div class="filter-row-item flex items-center">
|
||||
<span class="label">时间筛选</span>
|
||||
<a-space class="w-240px">
|
||||
<a-range-picker
|
||||
v-model="query.data_time"
|
||||
size="medium"
|
||||
:allow-clear="false"
|
||||
format="YYYY-MM-DD"
|
||||
class="w-100%"
|
||||
@change="handleSearch"
|
||||
/>
|
||||
</a-space>
|
||||
<a-range-picker
|
||||
v-model="query.data_time"
|
||||
size="medium"
|
||||
:allow-clear="false"
|
||||
format="YYYY-MM-DD"
|
||||
class="w-240px"
|
||||
@change="handleSearch"
|
||||
/>
|
||||
</div>
|
||||
<Button type="primary" ghost class="mr-12px" @click="handleSearch">
|
||||
<template #icon>
|
||||
|
||||
@ -3,22 +3,24 @@
|
||||
* @Date: 2025-06-25 14:02:40
|
||||
-->
|
||||
<template>
|
||||
<a-select
|
||||
v-model="selectedGroups"
|
||||
:multiple="multiple"
|
||||
size="medium"
|
||||
<Select
|
||||
v-model:value="selectedGroups"
|
||||
:mode="multiple ? 'multiple' : undefined"
|
||||
size="middle"
|
||||
:placeholder="placeholder"
|
||||
allow-clear
|
||||
:max-tag-count="3"
|
||||
allowClear
|
||||
:maxTagCount="3"
|
||||
@change="handleChange"
|
||||
>
|
||||
<a-option v-for="(item, index) in options" :key="index" :value="item.id" :label="item.name">
|
||||
<Option v-for="(item, index) in options" :key="index" :value="item.id" :label="item.name">
|
||||
{{ item.name }}
|
||||
</a-option>
|
||||
</a-select>
|
||||
</Option>
|
||||
</Select>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { Select } from 'ant-design-vue';
|
||||
const { Option } = Select;
|
||||
import { ref, watch } from 'vue';
|
||||
|
||||
const props = defineProps({
|
||||
|
||||
@ -5,9 +5,9 @@
|
||||
|
||||
export const INITIAL_QUERY = {
|
||||
name: '',
|
||||
status: '',
|
||||
operator_id: '',
|
||||
placement_account_id: '',
|
||||
status: undefined,
|
||||
operator_id: undefined,
|
||||
placement_account_id: undefined,
|
||||
group_ids: [],
|
||||
data_time: [],
|
||||
column: '',
|
||||
|
||||
@ -27,18 +27,18 @@
|
||||
</div>
|
||||
<div class="filter-row-item">
|
||||
<span class="label">平台</span>
|
||||
<a-select
|
||||
<Select
|
||||
class="!w-160px"
|
||||
v-model="query.platform"
|
||||
size="medium"
|
||||
v-model:value="query.platform"
|
||||
size="middle"
|
||||
placeholder="全部"
|
||||
allow-clear
|
||||
allowClear
|
||||
@change="handleSearch"
|
||||
>
|
||||
<a-option v-for="(item, index) in PLATFORM_LIST" :key="index" :value="item.value" :label="item.label">{{
|
||||
<Option v-for="(item, index) in PLATFORM_LIST" :key="index" :value="item.value" :label="item.label">{{
|
||||
item.label
|
||||
}}</a-option>
|
||||
</a-select>
|
||||
}}</Option>
|
||||
</Select>
|
||||
</div>
|
||||
<div class="filter-row-item">
|
||||
<span class="label">运营人员</span>
|
||||
@ -76,7 +76,8 @@
|
||||
|
||||
<script setup>
|
||||
import { defineEmits, defineProps } from 'vue';
|
||||
import { Button, Input } from 'ant-design-vue';
|
||||
import { Button, Input, Select } from 'ant-design-vue';
|
||||
const { Option } = Select;
|
||||
import { getPlacementAccountOperators, getProjectList } from '@/api/all/propertyMarketing';
|
||||
import { PLATFORM_LIST } from '@/utils/platform';
|
||||
import StatusSelect from '@/views/property-marketing/put-account/components/status-select';
|
||||
|
||||
@ -5,8 +5,8 @@
|
||||
|
||||
export const INITIAL_QUERY = {
|
||||
search: '',
|
||||
status: '',
|
||||
platform: '',
|
||||
operator_id: '',
|
||||
status: undefined,
|
||||
platform: undefined,
|
||||
operator_id: undefined,
|
||||
project_ids: [],
|
||||
};
|
||||
|
||||
@ -3,24 +3,26 @@
|
||||
* @Date: 2025-06-25 14:02:40
|
||||
-->
|
||||
<template>
|
||||
<a-select
|
||||
v-model="selectedOperators"
|
||||
:multiple="multiple"
|
||||
size="medium"
|
||||
<Select
|
||||
v-model:value="selectedOperators"
|
||||
:mode="multiple ? 'multiple' : undefined"
|
||||
size="middle"
|
||||
:placeholder="placeholder"
|
||||
allow-clear
|
||||
allow-search
|
||||
allowClear
|
||||
showSearch
|
||||
@change="handleChange"
|
||||
>
|
||||
<a-tooltip v-for="(item, index) in options" :key="index" :content="item.name">
|
||||
<a-option :value="item.id" :label="item.name">
|
||||
<Tooltip v-for="(item, index) in options" :key="index" :title="item.name">
|
||||
<Option :value="item.id" :label="item.name">
|
||||
{{ item.name }}
|
||||
</a-option>
|
||||
</a-tooltip>
|
||||
</a-select>
|
||||
</Option>
|
||||
</Tooltip>
|
||||
</Select>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { Select, Tooltip } from 'ant-design-vue';
|
||||
const { Option } = Select;
|
||||
import { ref, watch } from 'vue';
|
||||
|
||||
const props = defineProps({
|
||||
|
||||
@ -3,21 +3,23 @@
|
||||
* @Date: 2025-06-25 14:02:40
|
||||
-->
|
||||
<template>
|
||||
<a-select
|
||||
v-model="selectedStatus"
|
||||
:multiple="multiple"
|
||||
size="medium"
|
||||
<Select
|
||||
v-model:value="selectedStatus"
|
||||
:mode="multiple ? 'multiple' : undefined"
|
||||
size="middle"
|
||||
:placeholder="placeholder"
|
||||
allow-clear
|
||||
allowClear
|
||||
@change="handleChange"
|
||||
>
|
||||
<a-option v-for="(item, index) in STATUS_LIST" :key="index" :value="item.value" :label="item.text">
|
||||
<Option v-for="(item, index) in STATUS_LIST" :key="index" :value="item.value" :label="item.text">
|
||||
{{ item.text }}
|
||||
</a-option>
|
||||
</a-select>
|
||||
</Option>
|
||||
</Select>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { Select } from 'ant-design-vue';
|
||||
const { Option } = Select;
|
||||
import { ref, watch } from 'vue';
|
||||
import { STATUS_LIST } from '@/views/property-marketing/put-account/components/status-select/constants';
|
||||
|
||||
|
||||
@ -4,46 +4,40 @@
|
||||
<div class="filter-row flex mb-20px">
|
||||
<div class="filter-row-item flex items-center">
|
||||
<span class="label">账户名称</span>
|
||||
<a-space size="medium" class="w-240px">
|
||||
<AccountSelect v-model="query.placement_account_id"></AccountSelect>
|
||||
</a-space>
|
||||
<AccountSelect v-model="query.placement_account_id" class="w-240px"></AccountSelect>
|
||||
</div>
|
||||
|
||||
<div class="filter-row-item flex items-center">
|
||||
<span class="label">计划</span>
|
||||
<a-space size="medium" class="w-240px">
|
||||
<PlanSelect v-model="query.placement_account_project_id"></PlanSelect>
|
||||
</a-space>
|
||||
<PlanSelect v-model="query.placement_account_project_id" class="w-240px"></PlanSelect>
|
||||
</div>
|
||||
|
||||
<div class="filter-row-item flex items-center">
|
||||
<span class="label">平台</span>
|
||||
<a-select v-model="query.platform" class="w-150" size="medium" placeholder="全部" allow-clear>
|
||||
<a-option v-for="(item, index) in PLATFORM_LIST" :key="index" :value="item.value" :label="item.label"
|
||||
<Select v-model:value="query.platform" class="w-150" size="middle" placeholder="全部" allowClear>
|
||||
<Option v-for="(item, index) in PLATFORM_LIST" :key="index" :value="item.value" :label="item.label"
|
||||
>{{ item.label }}
|
||||
</a-option>
|
||||
</a-select>
|
||||
</Option>
|
||||
</Select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="filter-row flex mb-20px">
|
||||
<div class="filter-row-item flex items-center">
|
||||
<span class="label">时间筛选</span>
|
||||
<a-space size="medium" class="w-240px">
|
||||
<a-range-picker v-model="query.data_time" size="medium" allow-clear format="YYYY-MM-DD" class="w-310" />
|
||||
</a-space>
|
||||
<a-range-picker v-model="query.data_time" size="medium" allow-clear format="YYYY-MM-DD" class="w-310" />
|
||||
</div>
|
||||
|
||||
<div class="filter-row-item flex items-center">
|
||||
<Button type="primary" ghost class="mr-12px" :disabled="disabled" @click="handleSearch">
|
||||
<template #icon>
|
||||
<icon-search class="mr-8px"/>
|
||||
<icon-search class="mr-8px" />
|
||||
</template>
|
||||
<template #default>搜索</template>
|
||||
</Button>
|
||||
<Button @click="handleReset">
|
||||
<Button @click="handleReset">
|
||||
<template #icon>
|
||||
<icon-refresh class="mr-8px"/>
|
||||
<icon-refresh class="mr-8px" />
|
||||
</template>
|
||||
<template #default>重置</template>
|
||||
</Button>
|
||||
@ -54,11 +48,13 @@
|
||||
|
||||
<script setup lang="ts">
|
||||
import { defineEmits, defineProps } from 'vue';
|
||||
import { Button } from 'ant-design-vue';
|
||||
import { Button, Select } from 'ant-design-vue';
|
||||
import { PLATFORM_LIST } from '@/utils/platform';
|
||||
import AccountSelect from '@/views/components/common/AccountSelect.vue';
|
||||
import PlanSelect from '@/views/components/common/PlanSelect.vue';
|
||||
|
||||
const { Option } = Select;
|
||||
|
||||
const props = defineProps({
|
||||
query: {
|
||||
type: Object,
|
||||
|
||||
@ -93,7 +93,7 @@ import { uploadPdf } from '@/views/property-marketing/put-account/investment-gui
|
||||
const tabData = ref('placement_guide');
|
||||
|
||||
const query = reactive({
|
||||
platform: '',
|
||||
platform: undefined,
|
||||
date_time: [],
|
||||
placement_account_id: [],
|
||||
placement_account_project_id: [],
|
||||
@ -239,7 +239,7 @@ const handleReset = () => {
|
||||
query.platform = '';
|
||||
query.sort_column = '';
|
||||
query.sort_order = '';
|
||||
query.platform = '';
|
||||
query.platform = undefined;
|
||||
query.date_time = [];
|
||||
onSearch();
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user