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
-->
<template>
<a-select
v-model="selectedValues"
:multiple="multiple"
size="medium"
<Select
v-model:value="selectedValues"
:mode="multiple ? 'multiple' : undefined"
size="middle"
:placeholder="placeholder"
:allow-clear="allClear"
:allow-search="allowSearch"
:max-tag-count="maxTagCount"
:allowClear="allClear"
:showSearch="allowSearch"
:maxTagCount="maxTagCount"
@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({

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

@ -54,4 +54,14 @@
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]"
:limit="field.props.limit"
></FileUpload>
<a-select
<Select
v-else-if="field.type === 'select'"
v-model="formData[field.props.name]"
v-model:value="formData[field.props.name]"
: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 }}
</a-option>
</a-select>
</Option>
</Select>
</a-form-item>
</a-form>
<Button class="submit-btn" type="primary" :disabled="loading" @click="handleSubmit">提交执行</Button>
@ -52,8 +52,9 @@
import { defineProps, defineEmits } from 'vue';
import ImageUpload from '@/components/upload/ImageUpload.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 { Option } = Select;
const props = defineProps({
formFields: {

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

@ -1,13 +1,15 @@
<template>
<a-select allow-search v-model="selectedValue" placeholder="请选择账号" allow-clear filterable @change="handleChange">
<a-option v-for="account in filteredAccounts" :key="account.id" :value="account.id" :label="account.name">
<Select showSearch v-model:value="selectedValue" placeholder="请选择账号" allowClear filterable @change="handleChange">
<Option v-for="account in filteredAccounts" :key="account.id" :value="account.id" :label="account.name">
{{ account.name }}
</a-option>
</a-select>
</Option>
</Select>
</template>
<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';
// 定义账号对象类型

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

@ -1,13 +1,15 @@
<template>
<a-select allow-search v-model="selectedValue" placeholder="请选择计划" allow-clear filterable @change="handleChange">
<a-option v-for="item in listData" :key="item.id" :value="item.id" :label="item.name">
<Select showSearch v-model:value="selectedValue" placeholder="请选择计划" allowClear filterable @change="handleChange">
<Option v-for="item in listData" :key="item.id" :value="item.id" :label="item.name">
{{ item.name }}
</a-option>
</a-select>
</Option>
</Select>
</template>
<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';
interface Account {
@ -17,7 +19,7 @@ interface Account {
const props = defineProps({
modelValue: {
type: Array,
type: Array as PropType<number[]>,
default: () => [],
},
});
@ -25,7 +27,7 @@ const props = defineProps({
const emit = defineEmits(['update:modelValue', 'change']);
// 响应式数据
const selectedValue = ref(props.modelValue);
const selectedValue = ref<number | undefined>(props.modelValue?.[0]);
const allAccounts = ref<Account[]>([]);
const listData = ref<Account[]>([]);
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)">
<div class="filter-row-item">
<span class="label">审核平台</span>
<a-select
v-model="query.audit_platform"
size="medium"
<Select
v-model:value="query.audit_platform"
size="middle"
placeholder="全部"
allow-clear
allowClear
@change="handleSearch"
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
}}</a-option>
</a-select>
}}</Option>
</Select>
</div>
<div class="filter-row-item">
<span class="label">审核时间</span>
@ -99,7 +99,8 @@
</template>
<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 { PLATFORMS } from '@/views/material-center/components/finished-products/manuscript/check-list/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>
<div class="highlight-textarea-container">
<a-textarea
<TextArea
ref="textareaWrapRef"
v-model="inputValue"
v-model:value="inputValue"
placeholder="请输入作品描述"
:disabled="disabled"
show-word-limit
:max-length="1000"
showCount
:maxlength="1000"
size="large"
class="textarea-input h-full w-full"
@input="handleInput"
@change="handleInput"
@focus="() => (focus = true)"
@blur="() => (focus = false)"
/>
@ -24,6 +24,9 @@
</template>
<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 { 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);
};
@ -113,8 +117,8 @@ const generateHighlightedHtml = (): string => {
onMounted(() => {
nativeTextarea =
(textareaWrapRef.value?.$el || textareaWrapRef.value)?.querySelector?.('textarea.arco-textarea') ||
document.querySelector('.textarea-input .arco-textarea');
(textareaWrapRef.value?.$el || textareaWrapRef.value)?.querySelector?.('textarea.ant-input') ||
document.querySelector('.textarea-input .ant-input');
if (nativeTextarea) {
nativeTextarea.addEventListener('scroll', handleTextareaScroll);
@ -143,7 +147,9 @@ const handleTextareaScroll = (e: Event) => {
};
const handleCompositionUpdate = () => {
console.log('handleCompositionUpdate');
if (!nativeTextarea) return;
// 使用 rAF 等待浏览器把最新字符写入 textarea.value 再读取
requestAnimationFrame(() => {
if (!nativeTextarea) return;
@ -197,36 +203,35 @@ const handleCompositionUpdate = () => {
}
}
:deep(.arco-textarea-wrapper) {
:deep(.ant-input-textarea) {
@include textarea-style;
.arco-textarea {
.ant-input {
padding: 0;
overflow: hidden;
position: absolute;
z-index: 1;
width: 100%;
height: 100%;
background: transparent;
color: transparent;
caret-color: #211f24 !important;
resize: none;
@include textarea-padding;
overflow-y: auto;
border: none;
}
}
.arco-textarea-word-limit {
:deep(.ant-input-data-count) {
z-index: 2;
}
&.arco-textarea-disabled {
.arco-textarea {
&:deep(.ant-input:disabled) {
background: #f2f3f5;
}
}
}
// 处于中文输入法合成态时，显示真实文本并隐藏高亮层
:deep(.textarea-input.composing .arco-textarea) {
:deep(.textarea-input.composing .ant-input) {
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-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,

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 = {
name: '',
status: '',
operator_id: '',
status: undefined,
operator_id: undefined,
group_ids: [],
type: 7,
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>
<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';

17
src/views/property-marketing/media-account/account-manage/components/filter-block/index.vue
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,

6
src/views/property-marketing/media-account/account-manage/constants.ts
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: [],

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

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) {
compRef.value.validate().then(() => {
currentStep.value = current;
});
return;
}
currentStep.value = current;
};
const onPrev = () => {
currentStep.value--;

19
src/views/property-marketing/project-manage/project-list/components/add-project-modal/stepFour.vue
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([]);

35
src/views/property-marketing/project-manage/project-list/components/add-project-modal/stepThree.vue
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([]);

35
src/views/property-marketing/project-manage/project-list/components/add-project-modal/stepTwo.vue
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([]);

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

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-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">
<Input
v-model:value="query.name"
class="w-240px"
placeholder="请搜索..."
size="middle"
allowClear
@change="handleSearch"
>
<template #prefix>
<SearchOutlined />
</template>
</Input>
</a-space>
</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%"
class="w-240px"
@change="handleSearch"
/>
</a-space>
</div>
<Button type="primary" ghost class="mr-12px" @click="handleSearch">
<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
-->
<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({

6
src/views/property-marketing/put-account/account-data/constants.ts
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: '',

17
src/views/property-marketing/put-account/account-manage/components/filter-block/index.vue
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';

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

@ -5,8 +5,8 @@
export const INITIAL_QUERY = {
search: '',
status: '',
platform: '',
operator_id: '',
status: undefined,
platform: undefined,
operator_id: undefined,
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
-->
<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({

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

26
src/views/property-marketing/put-account/investment-guidelines/components/table-data/listSearchForm.vue
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>
</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">
<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,

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

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)">
<div class="filter-row-item">
<span class="label">审核平台</span>
<a-select
v-model="query.audit_platform"
size="medium"
<Select
v-model:value="query.audit_platform"
size="middle"
placeholder="全部"
allow-clear
allowClear
@change="handleSearch"
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
}}</a-option>
</a-select>
}}</Option>
</Select>
</div>
<div class="filter-row-item">
<span class="label">审核时间</span>
@ -100,7 +100,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 { PLATFORMS } from '@/views/writer-material-center/components/finished-products/manuscript/check-list/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>
<div class="highlight-textarea-container">
<a-textarea
<TextArea
ref="textareaWrapRef"
v-model="inputValue"
v-model:value="inputValue"
placeholder="请输入作品描述"
:disabled="disabled"
show-word-limit
:max-length="1000"
showCount
:maxlength="1000"
size="large"
class="textarea-input h-full w-full"
@input="handleInput"
@ -24,6 +24,8 @@
</template>
<script setup lang="ts">
import { Input } from 'ant-design-vue';
const { TextArea } = Input;
import { ref, computed, watch, defineProps, defineEmits, onMounted, onUnmounted } from 'vue';
import { escapeRegExp } from './constants';
@ -112,8 +114,8 @@ const generateHighlightedHtml = (): string => {
onMounted(() => {
nativeTextarea =
(textareaWrapRef.value?.$el || textareaWrapRef.value)?.querySelector?.('textarea.arco-textarea') ||
document.querySelector('.textarea-input .arco-textarea');
(textareaWrapRef.value?.$el || textareaWrapRef.value)?.querySelector?.('textarea.ant-input') ||
document.querySelector('.textarea-input .ant-input');
if (nativeTextarea) {
nativeTextarea.addEventListener('scroll', handleTextareaScroll);
@ -196,10 +198,8 @@ const handleCompositionUpdate = () => {
}
}
:deep(.arco-textarea-wrapper) {
:deep(.ant-input) {
@include textarea-style;
.arco-textarea {
padding: 0;
overflow: hidden;
position: absolute;
@ -213,19 +213,16 @@ const handleCompositionUpdate = () => {
overflow-y: auto;
}
.arco-textarea-word-limit {
:deep(.ant-input-data-count) {
z-index: 2;
}
&.arco-textarea-disabled {
.arco-textarea {
&:deep(.ant-input:disabled) {
background: #f2f3f5;
}
}
}
// 处于中文输入法合成态时，显示真实文本并隐藏高亮层
:deep(.textarea-input.composing .arco-textarea) {
:deep(.textarea-input.composing .ant-input) {
color: #211f24 !important;
-webkit-text-fill-color: #211f24 !important;
}