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

feat: select组件替换

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files

22
src/components/common-select/index.vue
View File

@ -3,23 +3,25 @@
* @Date: 2025-06-25 14:02:40 * @Date: 2025-06-25 14:02:40
--> -->
<template> <template>
<a-select <Select
v-model="selectedValues" v-model:value="selectedValues"
:multiple="multiple" :mode="multiple ? 'multiple' : undefined"
size="medium" size="middle"
:placeholder="placeholder" :placeholder="placeholder"
:allow-clear="allClear" :allowClear="allClear"
:allow-search="allowSearch" :showSearch="allowSearch"
:max-tag-count="maxTagCount" :maxTagCount="maxTagCount"
@change="handleChange" @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 }} {{ item.name }}
</a-option> </Option>
</a-select> </Select>
</template> </template>
<script setup> <script setup>
import { Select } from 'ant-design-vue';
const { Option } = Select;
import { ref, watch } from 'vue'; import { ref, watch } from 'vue';
const props = defineProps({ const props = defineProps({

10
src/styles/components/ant-input.scss
View File

@ -54,4 +54,14 @@
height: 26px; height: 26px;
} }
} }
.ant-input-suffix {
.ant-input-show-count-suffix {
color: var(--Text-4, #939499);
font-family: font-family-manrope-regular;
font-size: 12px;
font-style: normal;
font-weight: 400;
line-height: 20px;
}
}
} }

13
src/views/agent/work-flow/components/DynamicForm.vue
View File

@ -34,15 +34,15 @@
v-model="formData[field.props.name]" v-model="formData[field.props.name]"
:limit="field.props.limit" :limit="field.props.limit"
></FileUpload> ></FileUpload>
<a-select <Select
v-else-if="field.type === 'select'" v-else-if="field.type === 'select'"
v-model="formData[field.props.name]" v-model:value="formData[field.props.name]"
:placeholder="field.placeholder" :placeholder="field.placeholder"
> >
<a-option v-for="(option, optIndex) in field.props.options" :key="optIndex" :value="option.value"> <Option v-for="(option, optIndex) in field.props.options" :key="optIndex" :value="option.value">
{{ option.label }} {{ option.label }}
</a-option> </Option>
</a-select> </Select>
</a-form-item> </a-form-item>
</a-form> </a-form>
<Button class="submit-btn" type="primary" :disabled="loading" @click="handleSubmit">提交执行</Button> <Button class="submit-btn" type="primary" :disabled="loading" @click="handleSubmit">提交执行</Button>
@ -52,8 +52,9 @@
import { defineProps, defineEmits } from 'vue'; import { defineProps, defineEmits } from 'vue';
import ImageUpload from '@/components/upload/ImageUpload.vue'; import ImageUpload from '@/components/upload/ImageUpload.vue';
import FileUpload from '@/components/upload/FileUpload.vue'; import FileUpload from '@/components/upload/FileUpload.vue';
import { Button, Input } from 'ant-design-vue'; import { Button, Input, Select } from 'ant-design-vue';
const { TextArea } = Input; const { TextArea } = Input;
const { Option } = Select;
const props = defineProps({ const props = defineProps({
formFields: { formFields: {

12
src/views/components/common/AccountSelect.vue
View File

@ -1,13 +1,15 @@
<template> <template>
<a-select allow-search v-model="selectedValue" placeholder="请选择账号" allow-clear filterable @change="handleChange"> <Select showSearch v-model:value="selectedValue" placeholder="请选择账号" allowClear filterable @change="handleChange">
<a-option v-for="account in filteredAccounts" :key="account.id" :value="account.id" :label="account.name"> <Option v-for="account in filteredAccounts" :key="account.id" :value="account.id" :label="account.name">
{{ account.name }} {{ account.name }}
</a-option> </Option>
</a-select> </Select>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { ref, computed, onMounted } from 'vue'; import { Select } from 'ant-design-vue';
const { Option } = Select;
import { ref, onMounted } from 'vue';
import { getPlacementAccountsList } from '@/api/all/propertyMarketing'; import { getPlacementAccountsList } from '@/api/all/propertyMarketing';
// 定义账号对象类型 // 定义账号对象类型

16
src/views/components/common/PlanSelect.vue
View File

@ -1,13 +1,15 @@
<template> <template>
<a-select allow-search v-model="selectedValue" placeholder="请选择计划" allow-clear filterable @change="handleChange"> <Select showSearch v-model:value="selectedValue" placeholder="请选择计划" allowClear filterable @change="handleChange">
<a-option v-for="item in listData" :key="item.id" :value="item.id" :label="item.name"> <Option v-for="item in listData" :key="item.id" :value="item.id" :label="item.name">
{{ item.name }} {{ item.name }}
</a-option> </Option>
</a-select> </Select>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { ref, computed, onMounted } from 'vue'; import { Select } from 'ant-design-vue';
const { Option } = Select;
import { ref, computed, onMounted, type PropType } from 'vue';
import { getplacementAccountProjectsLlist } from '@/api/all/propertyMarketing'; import { getplacementAccountProjectsLlist } from '@/api/all/propertyMarketing';
interface Account { interface Account {
@ -17,7 +19,7 @@ interface Account {
const props = defineProps({ const props = defineProps({
modelValue: { modelValue: {
type: Array, type: Array as PropType<number[]>,
default: () => [], default: () => [],
}, },
}); });
@ -25,7 +27,7 @@ const props = defineProps({
const emit = defineEmits(['update:modelValue', 'change']); const emit = defineEmits(['update:modelValue', 'change']);
// 响应式数据 // 响应式数据
const selectedValue = ref(props.modelValue); const selectedValue = ref<number | undefined>(props.modelValue?.[0]);
const allAccounts = ref<Account[]>([]); const allAccounts = ref<Account[]>([]);
const listData = ref<Account[]>([]); const listData = ref<Account[]>([]);
const loading = ref(false); const loading = ref(false);

17
src/views/material-center/components/finished-products/manuscript/check-list/components/filter-block/index.vue
View File

@ -54,18 +54,18 @@
<template v-if="[AuditStatus.Auditing, AuditStatus.Passed].includes(query.audit_status)"> <template v-if="[AuditStatus.Auditing, AuditStatus.Passed].includes(query.audit_status)">
<div class="filter-row-item"> <div class="filter-row-item">
<span class="label">审核平台</span> <span class="label">审核平台</span>
<a-select <Select
v-model="query.audit_platform" v-model:value="query.audit_platform"
size="medium" size="middle"
placeholder="全部" placeholder="全部"
allow-clear allowClear
@change="handleSearch" @change="handleSearch"
class="!w-160px" class="!w-160px"
> >
<a-option v-for="(item, index) in PLATFORMS" :key="index" :value="item.value" :label="item.label">{{ <Option v-for="(item, index) in PLATFORMS" :key="index" :value="item.value" :label="item.label">{{
item.label item.label
}}</a-option> }}</Option>
</a-select> </Select>
</div> </div>
<div class="filter-row-item"> <div class="filter-row-item">
<span class="label">审核时间</span> <span class="label">审核时间</span>
@ -99,7 +99,8 @@
</template> </template>
<script setup> <script setup>
import { Button, Input } from 'ant-design-vue'; import { Button, Input, Select } from 'ant-design-vue';
const { Option } = Select;
import { defineEmits, defineProps } from 'vue'; import { defineEmits, defineProps } from 'vue';
import { PLATFORMS } from '@/views/material-center/components/finished-products/manuscript/check-list/constants'; import { PLATFORMS } from '@/views/material-center/components/finished-products/manuscript/check-list/constants';
import { AuditStatus } from '@/views/material-center/components/finished-products/constants'; import { AuditStatus } from '@/views/material-center/components/finished-products/constants';

39
src/views/material-center/components/finished-products/manuscript/check/components/content-card/highlight-textarea.vue
View File

@ -1,15 +1,15 @@
<template> <template>
<div class="highlight-textarea-container"> <div class="highlight-textarea-container">
<a-textarea <TextArea
ref="textareaWrapRef" ref="textareaWrapRef"
v-model="inputValue" v-model:value="inputValue"
placeholder="请输入作品描述" placeholder="请输入作品描述"
:disabled="disabled" :disabled="disabled"
show-word-limit showCount
:max-length="1000" :maxlength="1000"
size="large" size="large"
class="textarea-input h-full w-full" class="textarea-input h-full w-full"
@input="handleInput" @change="handleInput"
@focus="() => (focus = true)" @focus="() => (focus = true)"
@blur="() => (focus = false)" @blur="() => (focus = false)"
/> />
@ -24,6 +24,9 @@
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { Input } from 'ant-design-vue';
import type { ElementEvent } from 'echarts';
const { TextArea } = Input;
import { ref, computed, watch, defineProps, defineEmits, onMounted, onUnmounted } from 'vue'; import { ref, computed, watch, defineProps, defineEmits, onMounted, onUnmounted } from 'vue';
import { escapeRegExp } from './constants'; import { escapeRegExp } from './constants';
@ -67,7 +70,8 @@ watch(
); );
// 处理输入事件 // 处理输入事件
const handleInput = (value: string) => { const handleInput = (e: any) => {
const value = e.currentTarget.value;
emit('update:modelValue', value); emit('update:modelValue', value);
}; };
@ -113,8 +117,8 @@ const generateHighlightedHtml = (): string => {
onMounted(() => { onMounted(() => {
nativeTextarea = nativeTextarea =
(textareaWrapRef.value?.$el || textareaWrapRef.value)?.querySelector?.('textarea.arco-textarea') || (textareaWrapRef.value?.$el || textareaWrapRef.value)?.querySelector?.('textarea.ant-input') ||
document.querySelector('.textarea-input .arco-textarea'); document.querySelector('.textarea-input .ant-input');
if (nativeTextarea) { if (nativeTextarea) {
nativeTextarea.addEventListener('scroll', handleTextareaScroll); nativeTextarea.addEventListener('scroll', handleTextareaScroll);
@ -143,7 +147,9 @@ const handleTextareaScroll = (e: Event) => {
}; };
const handleCompositionUpdate = () => { const handleCompositionUpdate = () => {
console.log('handleCompositionUpdate');
if (!nativeTextarea) return; if (!nativeTextarea) return;
// 使用 rAF 等待浏览器把最新字符写入 textarea.value 再读取 // 使用 rAF 等待浏览器把最新字符写入 textarea.value 再读取
requestAnimationFrame(() => { requestAnimationFrame(() => {
if (!nativeTextarea) return; if (!nativeTextarea) return;
@ -197,36 +203,35 @@ const handleCompositionUpdate = () => {
} }
} }
:deep(.arco-textarea-wrapper) { :deep(.ant-input-textarea) {
@include textarea-style; @include textarea-style;
.ant-input {
.arco-textarea {
padding: 0; padding: 0;
overflow: hidden; overflow: hidden;
position: absolute; position: absolute;
z-index: 1; z-index: 1;
width: 100%; width: 100%;
height: 100%;
background: transparent; background: transparent;
color: transparent; color: transparent;
caret-color: #211f24 !important; caret-color: #211f24 !important;
resize: none; resize: none;
@include textarea-padding; @include textarea-padding;
overflow-y: auto; overflow-y: auto;
border: none;
}
} }
.arco-textarea-word-limit { :deep(.ant-input-data-count) {
z-index: 2; z-index: 2;
} }
&.arco-textarea-disabled { &:deep(.ant-input:disabled) {
.arco-textarea {
background: #f2f3f5; background: #f2f3f5;
} }
}
}
// 处于中文输入法合成态时，显示真实文本并隐藏高亮层 // 处于中文输入法合成态时，显示真实文本并隐藏高亮层
:deep(.textarea-input.composing .arco-textarea) { :deep(.textarea-input.composing .ant-input) {
color: #211f24 !important; color: #211f24 !important;
-webkit-text-fill-color: #211f24 !important; -webkit-text-fill-color: #211f24 !important;
} }

24
src/views/property-marketing/media-account/account-dashboard/components/filter-block/index.vue
View File

@ -8,13 +8,7 @@
<div class="filter-row flex"> <div class="filter-row flex">
<div class="filter-row-item flex items-center"> <div class="filter-row-item flex items-center">
<span class="label">账号名称</span> <span class="label">账号名称</span>
<Input <Input v-model:value="query.name" placeholder="请搜索..." class="!w-240px" allowClear @change="handleSearch">
v-model:value="query.name"
placeholder="请搜索..."
class="!w-240px"
allowClear
@change="handleSearch"
>
<template #prefix> <template #prefix>
<icon-search /> <icon-search />
</template> </template>
@ -42,12 +36,12 @@
<div class="filter-row flex"> <div class="filter-row flex">
<div class="filter-row-item flex items-center"> <div class="filter-row-item flex items-center">
<span class="label">时间筛选</span> <span class="label">时间筛选</span>
<a-select v-model="query.type" size="medium" placeholder="全部" class="!w-240px" @change="handleSearch"> <Select v-model:value="query.type" size="middle" placeholder="全部" class="!w-240px" @change="handleSearch">
<template #arrow-icon> <icon-calendar size="16" /> </template> <template #suffixIcon> <icon-calendar size="16" /> </template>
<a-option :value="7" label="近7天">近7天</a-option> <Option :value="7" label="近7天">近7天</Option>
<!-- <a-option :value="14" label="近14天">近14天</a-option> --> <!-- <Option :value="14" label="近14天">近14天</Option> -->
<a-option :value="30" label="近30天">近30天</a-option> <Option :value="30" label="近30天">近30天</Option>
</a-select> </Select>
</div> </div>
<div class="filter-row-item flex items-center"> <div class="filter-row-item flex items-center">
<Button type="primary" ghost class="w-84px mr-12px" @click="handleSearch"> <Button type="primary" ghost class="w-84px mr-12px" @click="handleSearch">
@ -68,12 +62,14 @@
</template> </template>
<script setup> <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 { reactive, defineEmits, defineProps, onMounted, nextTick, ref } from 'vue';
import { fetchAccountGroups, fetchAccountOperators } from '@/api/all/propertyMarketing'; import { fetchAccountGroups, fetchAccountOperators } from '@/api/all/propertyMarketing';
import StatusSelect from '@/views/property-marketing/media-account/components/status-select'; import StatusSelect from '@/views/property-marketing/media-account/components/status-select';
import CommonSelect from '@/components/common-select'; import CommonSelect from '@/components/common-select';
const { Option } = Select;
const props = defineProps({ const props = defineProps({
query: { query: {
type: Object, type: Object,

4
src/views/property-marketing/media-account/account-dashboard/constants.ts
View File

@ -37,8 +37,8 @@ export const CARD_FIELDS = [
export const INITIAL_QUERY = { export const INITIAL_QUERY = {
name: '', name: '',
status: '', status: undefined,
operator_id: '', operator_id: undefined,
group_ids: [], group_ids: [],
type: 7, type: 7,
column: '', column: '',

24
src/views/property-marketing/media-account/account-manage/components/batch-tag-modal/index.vue
View File

@ -31,15 +31,14 @@
<FormItem label="选择标签" required> <FormItem label="选择标签" required>
<template v-if="editType === 'all'"> <template v-if="editType === 'all'">
<div class="flex items-center w-100%"> <div class="flex items-center w-100%">
<a-select <Select
v-model="form.tags" v-model:value="form.tags"
:options="tagOptions" :options="tagOptions"
multiple mode="tags"
allow-create
placeholder="请输入标签，回车键可直接添加..." placeholder="请输入标签，回车键可直接添加..."
:limit="5" :max-tag-count="5"
class="flex-1" class="flex-1"
@create="handleCreateTag" @search="handleCreateTag"
/> />
<span class="ml-12px">{{ `${form.tags.length}/5` }}</span> <span class="ml-12px">{{ `${form.tags.length}/5` }}</span>
</div> </div>
@ -58,15 +57,14 @@
<a-table-column title="选择标签" data-index="tags"> <a-table-column title="选择标签" data-index="tags">
<template #cell="{ record, rowIndex }"> <template #cell="{ record, rowIndex }">
<div class="flex items-center w-100%"> <div class="flex items-center w-100%">
<a-select <Select
v-model="record.tags" v-model:value="record.tags"
:options="tagOptions" :options="tagOptions"
multiple mode="tags"
allow-create
placeholder="请输入标签，回车键可直接添加..." placeholder="请输入标签，回车键可直接添加..."
:limit="5" :max-tag-count="5"
style="width: 90%" style="width: 90%"
@create="(val) => handleCreateTag(val, rowIndex)" @search="(val) => handleCreateTag(val, rowIndex)"
/> />
<span class="tag-count ml-8px">{{ record.tags.length }}/5</span> <span class="tag-count ml-8px">{{ record.tags.length }}/5</span>
</div> </div>
@ -85,7 +83,7 @@
<script setup> <script setup>
import { ref, reactive } from 'vue'; 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 { fetchAccountTags, batchPutTag } from '@/api/all/propertyMarketing';
import icon1 from '@/assets/img/icon-question.png'; import icon1 from '@/assets/img/icon-question.png';

17
src/views/property-marketing/media-account/account-manage/components/filter-block/index.vue
View File

@ -20,22 +20,22 @@
</div> </div>
<div class="filter-row-item"> <div class="filter-row-item">
<span class="label">平台</span> <span class="label">平台</span>
<a-select <Select
v-model="query.platform" v-model:value="query.platform"
class="w-160px" class="w-160px"
size="medium" size="middle"
placeholder="全部" placeholder="全部"
allow-clear allowClear
@change="handleSearch" @change="handleSearch"
> >
<a-option <Option
v-for="(item, index) in MEDIA_ACCOUNT_PLATFORMS" v-for="(item, index) in MEDIA_ACCOUNT_PLATFORMS"
:key="index" :key="index"
:value="item.value" :value="item.value"
:label="item.label" :label="item.label"
>{{ item.label }}</a-option >{{ item.label }}</Option
> >
</a-select> </Select>
</div> </div>
<div class="filter-row-item"> <div class="filter-row-item">
<span class="label">运营人员</span> <span class="label">运营人员</span>
@ -82,7 +82,8 @@
<script setup> <script setup>
import { reactive, defineEmits, defineProps } from 'vue'; 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 { import {
fetchAccountTags, fetchAccountTags,
getProjectList, getProjectList,

6
src/views/property-marketing/media-account/account-manage/constants.ts
View File

@ -4,9 +4,9 @@
*/ */
export const INITIAL_QUERY = { export const INITIAL_QUERY = {
search: '', search: '',
status: '', status: undefined,
platform: '', platform: undefined,
operator_id: '', operator_id: undefined,
group_ids: [], group_ids: [],
tag_ids: [], tag_ids: [],
project_ids: [], project_ids: [],

18
src/views/property-marketing/media-account/components/status-select/index.vue
View File

@ -3,15 +3,15 @@
* @Date: 2025-06-25 14:02:40 * @Date: 2025-06-25 14:02:40
--> -->
<template> <template>
<a-select <Select
v-model="selectedStatus" v-model:value="selectedStatus"
:multiple="multiple" :mode="multiple ? 'multiple' : undefined"
size="medium" size="middle"
:placeholder="placeholder" :placeholder="placeholder"
allow-clear allowClear
@change="handleChange" @change="handleChange"
> >
<a-option <Option
v-for="(item, index) in STATUS_LIST" v-for="(item, index) in STATUS_LIST"
:key="index" :key="index"
:value="item.value" :value="item.value"
@ -19,11 +19,13 @@
:style="item.style" :style="item.style"
> >
{{ item.text }} {{ item.text }}
</a-option> </Option>
</a-select> </Select>
</template> </template>
<script setup> <script setup>
import { Select } from 'ant-design-vue';
const { Option } = Select;
import { ref, watch } from 'vue'; import { ref, watch } from 'vue';
import { STATUS_LIST } from '@/views/property-marketing/media-account/components/status-select/constants'; import { STATUS_LIST } from '@/views/property-marketing/media-account/components/status-select/constants';

5
src/views/property-marketing/project-manage/project-list/components/add-project-modal/index.vue
View File

@ -142,12 +142,15 @@ const handleEdit = () => {
}); });
}; };
const setCurrent = async (current) => { const setCurrent = (current) => {
if (isFirstStep.value) { if (isFirstStep.value) {
compRef.value.validate().then(() => { compRef.value.validate().then(() => {
currentStep.value = current; currentStep.value = current;
}); });
return;
} }
currentStep.value = current;
}; };
const onPrev = () => { const onPrev = () => {
currentStep.value--; currentStep.value--;

19
src/views/property-marketing/project-manage/project-list/components/add-project-modal/stepFour.vue
View File

@ -27,18 +27,18 @@
</template> </template>
</Input> </Input>
<a-select <Select
v-model="query.uploader_id" v-model:value="query.uploader_id"
size="medium" size="middle"
placeholder="选择上传人员" placeholder="选择上传人员"
class="w-160px" class="w-160px"
allow-clear allowClear
@change="handleSearch" @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 || '-' }} {{ item.name || '-' }}
</a-option> </Option>
</a-select> </Select>
</div> </div>
<a-table <a-table
ref="tableRef" ref="tableRef"
@ -113,7 +113,8 @@
<script setup> <script setup>
import { formatTableField, exactFormatTime } from '@/utils/tools'; 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 { getPlacementAccountOperators, getWorksList } from '@/api/all/propertyMarketing';
import { getUserList } from '@/api/all/common'; import { getUserList } from '@/api/all/common';
@ -159,7 +160,7 @@ const { dataSource, selectedRowKeys, selectedRows, rowSelection, handleSelect, h
const query = ref({ const query = ref({
uid: '', uid: '',
uploader_id: '', uploader_id: undefined,
title: '', title: '',
}); });
const uploaders = ref([]); const uploaders = ref([]);

35
src/views/property-marketing/project-manage/project-list/components/add-project-modal/stepThree.vue
View File

@ -14,34 +14,34 @@
<icon-search /> <icon-search />
</template> </template>
</Input> </Input>
<a-select <Select
v-model="query.platform" v-model:value="query.platform"
class="mr-16px w-160px" class="mr-16px w-160px"
size="medium" size="middle"
placeholder="选择平台" placeholder="选择平台"
allow-clear allowClear
@change="handleSearch" @change="handleSearch"
> >
<a-option <Option
v-for="(item, index) in PLATFORM_LIST" v-for="(item, index) in PLATFORM_LIST"
:key="index" :key="index"
:value="item.value" :value="item.value"
:label="item.label" :label="item.label"
>{{ item.label }}</a-option >{{ item.label }}</Option
> >
</a-select> </Select>
<a-select <Select
v-model="query.operator_id" v-model:value="query.operator_id"
size="medium" size="middle"
placeholder="选择运营人员" placeholder="选择运营人员"
class="w-160px" class="w-160px"
allow-clear allowClear
@change="handleSearch" @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 }} {{ item.name }}
</a-option> </Option>
</a-select> </Select>
</div> </div>
<a-table <a-table
ref="tableRef" ref="tableRef"
@ -117,7 +117,8 @@
<script setup> <script setup>
import { PLATFORM_LIST, getPutAccountPlatformLogo } from '@/utils/platform'; import { PLATFORM_LIST, getPutAccountPlatformLogo } from '@/utils/platform';
import { formatTableField } from '@/utils/tools'; 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 { getPlacementAccountOperators, getPlacementAccountsList } from '@/api/all/propertyMarketing';
import { useTableSelectionWithPagination } from '@/hooks/useTableSelectionWithPagination'; import { useTableSelectionWithPagination } from '@/hooks/useTableSelectionWithPagination';
@ -156,8 +157,8 @@ const { dataSource, selectedRowKeys, selectedRows, rowSelection, handleSelect, h
const query = ref({ const query = ref({
name: '', name: '',
operator_id: '', operator_id: undefined,
platform: '', platform: undefined,
}); });
const operators = ref([]); const operators = ref([]);
const allData = ref([]); const allData = ref([]);

35
src/views/property-marketing/project-manage/project-list/components/add-project-modal/stepTwo.vue
View File

@ -14,34 +14,34 @@
<icon-search /> <icon-search />
</template> </template>
</Input> </Input>
<a-select <Select
v-model="query.platform" v-model:value="query.platform"
class="mr-16px w-160px" class="mr-16px w-160px"
size="medium" size="middle"
placeholder="选择平台" placeholder="选择平台"
allow-clear allowClear
@change="handleSearch" @change="handleSearch"
> >
<a-option <Option
v-for="(item, index) in MEDIA_ACCOUNT_PLATFORMS" v-for="(item, index) in MEDIA_ACCOUNT_PLATFORMS"
:key="index" :key="index"
:value="item.value" :value="item.value"
:label="item.label" :label="item.label"
>{{ item.label }}</a-option >{{ item.label }}</Option
> >
</a-select> </Select>
<a-select <Select
v-model="query.operator_id" v-model:value="query.operator_id"
size="medium" size="middle"
placeholder="选择运营人员" placeholder="选择运营人员"
class="w-160px" class="w-160px"
allow-clear allowClear
@change="handleSearch" @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 }} {{ item.name }}
</a-option> </Option>
</a-select> </Select>
</div> </div>
<a-table <a-table
ref="tableRef" ref="tableRef"
@ -115,7 +115,8 @@
<script setup> <script setup>
import { MEDIA_ACCOUNT_PLATFORMS, getMediaAccountPlatformLogo } from '@/utils/platform'; import { MEDIA_ACCOUNT_PLATFORMS, getMediaAccountPlatformLogo } from '@/utils/platform';
import { formatTableField } from '@/utils/tools'; 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 { fetchAccountOperators, getMediaAccountList } from '@/api/all/propertyMarketing';
import { useTableSelectionWithPagination } from '@/hooks/useTableSelectionWithPagination'; import { useTableSelectionWithPagination } from '@/hooks/useTableSelectionWithPagination';
@ -154,8 +155,8 @@ const { dataSource, selectedRowKeys, selectedRows, rowSelection, handleSelect, h
const query = ref({ const query = ref({
name: '', name: '',
operator_id: '', operator_id: undefined,
platform: '', platform: undefined,
}); });
const operators = ref([]); const operators = ref([]);
const allData = ref([]); const allData = ref([]);

35
src/views/property-marketing/put-account/account-dashboard/index.vue
View File

@ -10,38 +10,30 @@
<div class="filter-row flex mb-20px"> <div class="filter-row flex mb-20px">
<div class="filter-row-item flex items-center" v-if="accountType == 2"> <div class="filter-row-item flex items-center" v-if="accountType == 2">
<span class="label">计划名称</span> <span class="label">计划名称</span>
<a-space size="medium" class="w-240px"> <PlanSelect v-model="query.ids" class="w-240px"></PlanSelect>
<PlanSelect v-model="query.ids"></PlanSelect>
</a-space>
</div> </div>
<div class="filter-row-item flex items-center"> <div class="filter-row-item flex items-center">
<span class="label">账号名称</span> <span class="label">账号名称</span>
<a-space size="medium" class="w-240px"> <AccountSelect v-model:value="query.placement_account_id" class="w-240px"></AccountSelect>
<AccountSelect v-model="query.placement_account_id"></AccountSelect>
</a-space>
</div> </div>
<div class="filter-row-item flex items-center"> <div class="filter-row-item flex items-center">
<span class="label">平台</span> <span class="label">平台</span>
<a-select v-model="query.platform" class="w-150" size="medium" placeholder="全部" allow-clear> <Select v-model:value="query.platform" class="w-150" size="middle" placeholder="全部" allowClear>
<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 }} >{{ item.label }}
</a-option> </Option>
</a-select> </Select>
</div> </div>
<div class="filter-row-item flex items-center"> <div class="filter-row-item flex items-center">
<span class="label">运营人员</span> <span class="label">运营人员</span>
<a-space class="w-160px"> <CommonSelect v-model:value="query.operator_id" class="!w-160px" :multiple="false" :options="operators" />
<CommonSelect v-model="query.operator_id" :multiple="false" :options="operators" />
</a-space>
</div> </div>
</div> </div>
<div class="filter-row flex"> <div class="filter-row flex">
<div class="filter-row-item flex items-center"> <div class="filter-row-item flex items-center">
<span class="label">时间筛选</span> <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-240px" />
<a-range-picker v-model="query.data_time" size="medium" allow-clear format="YYYY-MM-DD" class="w-100%" />
</a-space>
</div> </div>
<Button type="primary" ghost class="mr-12px" @click="handleSearch"> <Button type="primary" ghost class="mr-12px" @click="handleSearch">
<template #icon> <template #icon>
@ -75,7 +67,7 @@
<script setup lang="ts"> <script setup lang="ts">
import EchartsItem from './components/echarts-item/index'; import EchartsItem from './components/echarts-item/index';
import { PLATFORM_LIST } from '@/utils/platform'; import { PLATFORM_LIST } from '@/utils/platform';
import { Button } from 'ant-design-vue'; import { Button, Select } from 'ant-design-vue';
import { import {
getPlacementAccountsTrend, getPlacementAccountsTrend,
getPlacementAccountProjectsTrend, getPlacementAccountProjectsTrend,
@ -85,6 +77,7 @@ import CommonSelect from '@/components/common-select';
import AccountSelect from '@/views/components/common/AccountSelect.vue'; import AccountSelect from '@/views/components/common/AccountSelect.vue';
import PlanSelect from '@/views/components/common/PlanSelect.vue'; import PlanSelect from '@/views/components/common/PlanSelect.vue';
const { Option } = Select;
const accountType = ref(1); const accountType = ref(1);
const onLoading = ref(true); const onLoading = ref(true);
@ -96,8 +89,8 @@ const getOperators = async () => {
} }
}; };
const query = reactive({ const query = reactive({
platform: '', platform: undefined,
operator_id: '', operator_id: undefined,
data_time: [], data_time: [],
ids: [], ids: [],
placement_account_id: [], placement_account_id: [],
@ -227,8 +220,8 @@ const chartConfigs = ref([
}, },
]); ]);
const handleReset = async () => { const handleReset = async () => {
query.platform = ''; query.platform = undefined;
query.operator_id = ''; query.operator_id = undefined;
query.ids = []; query.ids = [];
query.placement_account_id = []; query.placement_account_id = [];
handleSearch(); handleSearch();

42
src/views/property-marketing/put-account/account-data/components/filter-block/index.vue
View File

@ -8,52 +8,58 @@
<div class="filter-row flex mb-20px"> <div class="filter-row flex mb-20px">
<div class="filter-row-item flex items-center"> <div class="filter-row-item flex items-center">
<span class="label">{{ isAccountTab ? '账户名称' : '计划名称' }}</span> <span class="label">{{ isAccountTab ? '账户名称' : '计划名称' }}</span>
<a-space size="medium" class="w-240px"> <Input
<Input v-model:value="query.name" placeholder="请搜索..." size="middle" allowClear @change="handleSearch"> v-model:value="query.name"
class="w-240px"
placeholder="请搜索..."
size="middle"
allowClear
@change="handleSearch"
>
<template #prefix> <template #prefix>
<SearchOutlined /> <SearchOutlined />
</template> </template>
</Input> </Input>
</a-space>
</div> </div>
<div v-if="!isAccountTab" class="filter-row-item flex items-center"> <div v-if="!isAccountTab" class="filter-row-item flex items-center">
<span class="label">计划分组</span> <span class="label">计划分组</span>
<a-space class="w-200px"> <CommonSelect class="w-200px" v-model="query.group_ids" multiple :options="groups" @change="handleSearch" />
<CommonSelect v-model="query.group_ids" multiple :options="groups" @change="handleSearch" />
</a-space>
</div> </div>
<div class="filter-row-item flex items-center"> <div class="filter-row-item flex items-center">
<span class="label">状态</span> <span class="label">状态</span>
<a-space class="w-180px"> <StatusSelect class="w-180px" v-model="query.status" @change="handleSearch" />
<StatusSelect v-model="query.status" @change="handleSearch" />
</a-space>
</div> </div>
<div class="filter-row-item flex items-center"> <div class="filter-row-item flex items-center">
<span class="label">运营人员</span> <span class="label">运营人员</span>
<a-space class="w-160px"> <CommonSelect
<CommonSelect v-model="query.operator_id" :multiple="false" :options="operators" @change="handleSearch" /> class="w-160px"
</a-space> v-model="query.operator_id"
:multiple="false"
:options="operators"
@change="handleSearch"
/>
</div> </div>
</div> </div>
<div class="filter-row flex"> <div class="filter-row flex">
<div v-if="!isAccountTab" class="filter-row-item flex items-center"> <div v-if="!isAccountTab" class="filter-row-item flex items-center">
<span class="label">关联账户</span> <span class="label">关联账户</span>
<a-space class="w-240px"> <CommonSelect
<AccountSelect v-model="query.placement_account_id" :options="placementAccounts" @change="handleSearch" /> class="w-240px"
</a-space> v-model:value="query.placement_account_id"
:options="placementAccounts"
@change="handleSearch"
/>
</div> </div>
<div class="filter-row-item flex items-center"> <div class="filter-row-item flex items-center">
<span class="label">时间筛选</span> <span class="label">时间筛选</span>
<a-space class="w-240px">
<a-range-picker <a-range-picker
v-model="query.data_time" v-model="query.data_time"
size="medium" size="medium"
:allow-clear="false" :allow-clear="false"
format="YYYY-MM-DD" format="YYYY-MM-DD"
class="w-100%" class="w-240px"
@change="handleSearch" @change="handleSearch"
/> />
</a-space>
</div> </div>
<Button type="primary" ghost class="mr-12px" @click="handleSearch"> <Button type="primary" ghost class="mr-12px" @click="handleSearch">
<template #icon> <template #icon>

20
src/views/property-marketing/put-account/account-data/components/group-select/index.vue
View File

@ -3,22 +3,24 @@
* @Date: 2025-06-25 14:02:40 * @Date: 2025-06-25 14:02:40
--> -->
<template> <template>
<a-select <Select
v-model="selectedGroups" v-model:value="selectedGroups"
:multiple="multiple" :mode="multiple ? 'multiple' : undefined"
size="medium" size="middle"
:placeholder="placeholder" :placeholder="placeholder"
allow-clear allowClear
:max-tag-count="3" :maxTagCount="3"
@change="handleChange" @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 }} {{ item.name }}
</a-option> </Option>
</a-select> </Select>
</template> </template>
<script setup> <script setup>
import { Select } from 'ant-design-vue';
const { Option } = Select;
import { ref, watch } from 'vue'; import { ref, watch } from 'vue';
const props = defineProps({ const props = defineProps({

6
src/views/property-marketing/put-account/account-data/constants.ts
View File

@ -5,9 +5,9 @@
export const INITIAL_QUERY = { export const INITIAL_QUERY = {
name: '', name: '',
status: '', status: undefined,
operator_id: '', operator_id: undefined,
placement_account_id: '', placement_account_id: undefined,
group_ids: [], group_ids: [],
data_time: [], data_time: [],
column: '', column: '',

17
src/views/property-marketing/put-account/account-manage/components/filter-block/index.vue
View File

@ -27,18 +27,18 @@
</div> </div>
<div class="filter-row-item"> <div class="filter-row-item">
<span class="label">平台</span> <span class="label">平台</span>
<a-select <Select
class="!w-160px" class="!w-160px"
v-model="query.platform" v-model:value="query.platform"
size="medium" size="middle"
placeholder="全部" placeholder="全部"
allow-clear allowClear
@change="handleSearch" @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 item.label
}}</a-option> }}</Option>
</a-select> </Select>
</div> </div>
<div class="filter-row-item"> <div class="filter-row-item">
<span class="label">运营人员</span> <span class="label">运营人员</span>
@ -76,7 +76,8 @@
<script setup> <script setup>
import { defineEmits, defineProps } from 'vue'; 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 { getPlacementAccountOperators, getProjectList } from '@/api/all/propertyMarketing';
import { PLATFORM_LIST } from '@/utils/platform'; import { PLATFORM_LIST } from '@/utils/platform';
import StatusSelect from '@/views/property-marketing/put-account/components/status-select'; import StatusSelect from '@/views/property-marketing/put-account/components/status-select';

6
src/views/property-marketing/put-account/account-manage/constants.ts
View File

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

24
src/views/property-marketing/put-account/components/account-select/index.vue
View File

@ -3,24 +3,26 @@
* @Date: 2025-06-25 14:02:40 * @Date: 2025-06-25 14:02:40
--> -->
<template> <template>
<a-select <Select
v-model="selectedOperators" v-model:value="selectedOperators"
:multiple="multiple" :mode="multiple ? 'multiple' : undefined"
size="medium" size="middle"
:placeholder="placeholder" :placeholder="placeholder"
allow-clear allowClear
allow-search showSearch
@change="handleChange" @change="handleChange"
> >
<a-tooltip v-for="(item, index) in options" :key="index" :content="item.name"> <Tooltip v-for="(item, index) in options" :key="index" :title="item.name">
<a-option :value="item.id" :label="item.name"> <Option :value="item.id" :label="item.name">
{{ item.name }} {{ item.name }}
</a-option> </Option>
</a-tooltip> </Tooltip>
</a-select> </Select>
</template> </template>
<script setup> <script setup>
import { Select, Tooltip } from 'ant-design-vue';
const { Option } = Select;
import { ref, watch } from 'vue'; import { ref, watch } from 'vue';
const props = defineProps({ const props = defineProps({

18
src/views/property-marketing/put-account/components/status-select/index.vue
View File

@ -3,21 +3,23 @@
* @Date: 2025-06-25 14:02:40 * @Date: 2025-06-25 14:02:40
--> -->
<template> <template>
<a-select <Select
v-model="selectedStatus" v-model:value="selectedStatus"
:multiple="multiple" :mode="multiple ? 'multiple' : undefined"
size="medium" size="middle"
:placeholder="placeholder" :placeholder="placeholder"
allow-clear allowClear
@change="handleChange" @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 }} {{ item.text }}
</a-option> </Option>
</a-select> </Select>
</template> </template>
<script setup> <script setup>
import { Select } from 'ant-design-vue';
const { Option } = Select;
import { ref, watch } from 'vue'; import { ref, watch } from 'vue';
import { STATUS_LIST } from '@/views/property-marketing/put-account/components/status-select/constants'; import { STATUS_LIST } from '@/views/property-marketing/put-account/components/status-select/constants';

22
src/views/property-marketing/put-account/investment-guidelines/components/table-data/listSearchForm.vue
View File

@ -4,34 +4,28 @@
<div class="filter-row flex mb-20px"> <div class="filter-row flex mb-20px">
<div class="filter-row-item flex items-center"> <div class="filter-row-item flex items-center">
<span class="label">账户名称</span> <span class="label">账户名称</span>
<a-space size="medium" class="w-240px"> <AccountSelect v-model="query.placement_account_id" class="w-240px"></AccountSelect>
<AccountSelect v-model="query.placement_account_id"></AccountSelect>
</a-space>
</div> </div>
<div class="filter-row-item flex items-center"> <div class="filter-row-item flex items-center">
<span class="label">计划</span> <span class="label">计划</span>
<a-space size="medium" class="w-240px"> <PlanSelect v-model="query.placement_account_project_id" class="w-240px"></PlanSelect>
<PlanSelect v-model="query.placement_account_project_id"></PlanSelect>
</a-space>
</div> </div>
<div class="filter-row-item flex items-center"> <div class="filter-row-item flex items-center">
<span class="label">平台</span> <span class="label">平台</span>
<a-select v-model="query.platform" class="w-150" size="medium" placeholder="全部" allow-clear> <Select v-model:value="query.platform" class="w-150" size="middle" placeholder="全部" allowClear>
<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 }} >{{ item.label }}
</a-option> </Option>
</a-select> </Select>
</div> </div>
</div> </div>
<div class="filter-row flex mb-20px"> <div class="filter-row flex mb-20px">
<div class="filter-row-item flex items-center"> <div class="filter-row-item flex items-center">
<span class="label">时间筛选</span> <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-range-picker v-model="query.data_time" size="medium" allow-clear format="YYYY-MM-DD" class="w-310" />
</a-space>
</div> </div>
<div class="filter-row-item flex items-center"> <div class="filter-row-item flex items-center">
@ -54,11 +48,13 @@
<script setup lang="ts"> <script setup lang="ts">
import { defineEmits, defineProps } from 'vue'; 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 { PLATFORM_LIST } from '@/utils/platform';
import AccountSelect from '@/views/components/common/AccountSelect.vue'; import AccountSelect from '@/views/components/common/AccountSelect.vue';
import PlanSelect from '@/views/components/common/PlanSelect.vue'; import PlanSelect from '@/views/components/common/PlanSelect.vue';
const { Option } = Select;
const props = defineProps({ const props = defineProps({
query: { query: {
type: Object, type: Object,

4
src/views/property-marketing/put-account/investment-guidelines/index.vue
View File

@ -93,7 +93,7 @@ import { uploadPdf } from '@/views/property-marketing/put-account/investment-gui
const tabData = ref('placement_guide'); const tabData = ref('placement_guide');
const query = reactive({ const query = reactive({
platform: '', platform: undefined,
date_time: [], date_time: [],
placement_account_id: [], placement_account_id: [],
placement_account_project_id: [], placement_account_project_id: [],
@ -239,7 +239,7 @@ const handleReset = () => {
query.platform = ''; query.platform = '';
query.sort_column = ''; query.sort_column = '';
query.sort_order = ''; query.sort_order = '';
query.platform = ''; query.platform = undefined;
query.date_time = []; query.date_time = [];
onSearch(); onSearch();
}; };

17
src/views/writer-material-center/components/finished-products/manuscript/check-list/components/filter-block/index.vue
View File

@ -54,18 +54,18 @@
<template v-if="[AuditStatus.Auditing, AuditStatus.Passed].includes(query.audit_status)"> <template v-if="[AuditStatus.Auditing, AuditStatus.Passed].includes(query.audit_status)">
<div class="filter-row-item"> <div class="filter-row-item">
<span class="label">审核平台</span> <span class="label">审核平台</span>
<a-select <Select
v-model="query.audit_platform" v-model:value="query.audit_platform"
size="medium" size="middle"
placeholder="全部" placeholder="全部"
allow-clear allowClear
@change="handleSearch" @change="handleSearch"
class="!w-160px" class="!w-160px"
> >
<a-option v-for="(item, index) in PLATFORMS" :key="index" :value="item.value" :label="item.label">{{ <Option v-for="(item, index) in PLATFORMS" :key="index" :value="item.value" :label="item.label">{{
item.label item.label
}}</a-option> }}</Option>
</a-select> </Select>
</div> </div>
<div class="filter-row-item"> <div class="filter-row-item">
<span class="label">审核时间</span> <span class="label">审核时间</span>
@ -100,7 +100,8 @@
<script setup> <script setup>
import { defineEmits, defineProps } from 'vue'; import { defineEmits, defineProps } from 'vue';
import { Button, Input } from 'ant-design-vue'; import { Button, Input, Select } from 'ant-design-vue';
const { Option } = Select;
import { PLATFORMS } from '@/views/writer-material-center/components/finished-products/manuscript/check-list/constants'; import { PLATFORMS } from '@/views/writer-material-center/components/finished-products/manuscript/check-list/constants';
import { AuditStatus } from '@/views/writer-material-center/components/finished-products/constants'; import { AuditStatus } from '@/views/writer-material-center/components/finished-products/constants';

27
src/views/writer-material-center/components/finished-products/manuscript/check/components/content-card/highlight-textarea.vue
View File

@ -1,12 +1,12 @@
<template> <template>
<div class="highlight-textarea-container"> <div class="highlight-textarea-container">
<a-textarea <TextArea
ref="textareaWrapRef" ref="textareaWrapRef"
v-model="inputValue" v-model:value="inputValue"
placeholder="请输入作品描述" placeholder="请输入作品描述"
:disabled="disabled" :disabled="disabled"
show-word-limit showCount
:max-length="1000" :maxlength="1000"
size="large" size="large"
class="textarea-input h-full w-full" class="textarea-input h-full w-full"
@input="handleInput" @input="handleInput"
@ -24,6 +24,8 @@
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { Input } from 'ant-design-vue';
const { TextArea } = Input;
import { ref, computed, watch, defineProps, defineEmits, onMounted, onUnmounted } from 'vue'; import { ref, computed, watch, defineProps, defineEmits, onMounted, onUnmounted } from 'vue';
import { escapeRegExp } from './constants'; import { escapeRegExp } from './constants';
@ -112,8 +114,8 @@ const generateHighlightedHtml = (): string => {
onMounted(() => { onMounted(() => {
nativeTextarea = nativeTextarea =
(textareaWrapRef.value?.$el || textareaWrapRef.value)?.querySelector?.('textarea.arco-textarea') || (textareaWrapRef.value?.$el || textareaWrapRef.value)?.querySelector?.('textarea.ant-input') ||
document.querySelector('.textarea-input .arco-textarea'); document.querySelector('.textarea-input .ant-input');
if (nativeTextarea) { if (nativeTextarea) {
nativeTextarea.addEventListener('scroll', handleTextareaScroll); nativeTextarea.addEventListener('scroll', handleTextareaScroll);
@ -196,10 +198,8 @@ const handleCompositionUpdate = () => {
} }
} }
:deep(.arco-textarea-wrapper) { :deep(.ant-input) {
@include textarea-style; @include textarea-style;
.arco-textarea {
padding: 0; padding: 0;
overflow: hidden; overflow: hidden;
position: absolute; position: absolute;
@ -213,19 +213,16 @@ const handleCompositionUpdate = () => {
overflow-y: auto; overflow-y: auto;
} }
.arco-textarea-word-limit { :deep(.ant-input-data-count) {
z-index: 2; z-index: 2;
} }
&.arco-textarea-disabled { &:deep(.ant-input:disabled) {
.arco-textarea {
background: #f2f3f5; background: #f2f3f5;
} }
}
}
// 处于中文输入法合成态时，显示真实文本并隐藏高亮层 // 处于中文输入法合成态时，显示真实文本并隐藏高亮层
:deep(.textarea-input.composing .arco-textarea) { :deep(.textarea-input.composing .ant-input) {
color: #211f24 !important; color: #211f24 !important;
-webkit-text-fill-color: #211f24 !important; -webkit-text-fill-color: #211f24 !important;
} }