feat: select组件替换

This commit is contained in:
rd
2025-09-04 12:07:18 +08:00
parent cf574da1da
commit 23d614a07f
29 changed files with 327 additions and 301 deletions

View File

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

View File

@ -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: '',

View File

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

View File

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

View File

@ -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: [],

View File

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

View File

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

View File

@ -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([]);

View File

@ -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([]);

View File

@ -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([]);

View File

@ -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();

View File

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

View File

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

View File

@ -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: '',

View File

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

View File

@ -5,8 +5,8 @@
export const INITIAL_QUERY = {
search: '',
status: '',
platform: '',
operator_id: '',
status: undefined,
platform: undefined,
operator_id: undefined,
project_ids: [],
};

View File

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

View File

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

View File

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

View File

@ -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();
};