feat: select组件替换

2025-09-04 12:07:18 +08:00
parent cf574da1da
commit 23d614a07f
29 changed files with 327 additions and 301 deletions
--- a/src/views/property-marketing/put-account/account-dashboard/index.vue
+++ b/src/views/property-marketing/put-account/account-dashboard/index.vue
@ -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();
--- a/src/views/property-marketing/put-account/account-data/components/filter-block/index.vue
+++ b/src/views/property-marketing/put-account/account-data/components/filter-block/index.vue
@ -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>
--- a/src/views/property-marketing/put-account/account-data/components/group-select/index.vue
+++ b/src/views/property-marketing/put-account/account-data/components/group-select/index.vue
@ -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({
--- a/src/views/property-marketing/put-account/account-data/constants.ts
+++ b/src/views/property-marketing/put-account/account-data/constants.ts
@ -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: '',
--- a/src/views/property-marketing/put-account/account-manage/components/filter-block/index.vue
+++ b/src/views/property-marketing/put-account/account-manage/components/filter-block/index.vue
@ -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';
--- a/src/views/property-marketing/put-account/account-manage/constants.ts
+++ b/src/views/property-marketing/put-account/account-manage/constants.ts
@ -5,8 +5,8 @@

 export const INITIAL_QUERY = {
  search: '',
-  status: '',
-  platform: '',
-  operator_id: '',
+  status: undefined,
+  platform: undefined,
+  operator_id: undefined,
  project_ids: [],
 };
--- a/src/views/property-marketing/put-account/components/account-select/index.vue
+++ b/src/views/property-marketing/put-account/components/account-select/index.vue
@ -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({
--- a/src/views/property-marketing/put-account/components/status-select/index.vue
+++ b/src/views/property-marketing/put-account/components/status-select/index.vue
@ -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';

--- a/src/views/property-marketing/put-account/investment-guidelines/components/table-data/listSearchForm.vue
+++ b/src/views/property-marketing/put-account/investment-guidelines/components/table-data/listSearchForm.vue
@ -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,
--- a/src/views/property-marketing/put-account/investment-guidelines/index.vue
+++ b/src/views/property-marketing/put-account/investment-guidelines/index.vue
@ -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();
 };