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