feat: button组件替换

This commit is contained in:
rd
2025-09-03 11:15:37 +08:00
parent 01d561cfb2
commit db67274583
128 changed files with 805 additions and 745 deletions

View File

@ -1,6 +1,6 @@
<template>
<div class="account-dashboard-wrap">
<div class="filter-wrap bg-#fff rounded-8px pb-24px mb-16px">
<div class="filter-wrap bg-#fff rounded-8px pb-24px mb-16px">
<a-tabs v-model:activeKey="accountType" @tab-click="handleTabClick">
<a-tab-pane key="1" title="账户"></a-tab-pane>
<a-tab-pane key="2" title="计划"></a-tab-pane>
@ -43,18 +43,18 @@
<a-range-picker v-model="query.data_time" size="medium" allow-clear format="YYYY-MM-DD" class="w-100%" />
</a-space>
</div>
<a-button type="outline" class="mr-12px" size="medium" @click="handleSearch">
<Button type="primary" ghost class="mr-12px" @click="handleSearch">
<template #icon>
<icon-search />
<icon-search class="mr-8px" />
</template>
<template #default>搜索</template>
</a-button>
<a-button size="medium" @click="handleReset">
</Button>
<Button @click="handleReset">
<template #icon>
<icon-refresh />
<icon-refresh class="mr-8px" />
</template>
<template #default>重置</template>
</a-button>
</Button>
</div>
</div>
</div>
@ -75,6 +75,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 {
getPlacementAccountsTrend,
getPlacementAccountProjectsTrend,

View File

@ -16,16 +16,16 @@
</div>
<div class="flex items-center">
<a-button type="outline" class="mr-12px" size="medium" @click="handleExport">
<template #icon> <icon-download /> </template>
<Button type="primary" ghost class="mr-12px" size="medium" @click="handleExport">
<template #icon> <icon-download class="mr-8px" /> </template>
<template #default>导出数据</template>
</a-button>
<a-button type="outline" size="medium" @click="openCustomColumn">
</Button>
<Button type="primary" ghost size="medium" @click="openCustomColumn">
<template #icon>
<img :src="icon1" width="14" height="14" />
<img :src="icon1" width="14" height="14" class="mr-8px" />
</template>
<template #default>自定义列</template>
</a-button>
</Button>
</div>
</div>
@ -106,7 +106,7 @@
</div>
</template>
<template v-else-if="column.dataIndex === 'operation'" #cell="{ record }">
<a-button type="outline" size="small" @click="handleDetail(record)">详情</a-button>
<Button type="primary" ghost size="small" @click="handleDetail(record)">详情</Button>
</template>
<template v-else-if="column.isRateField" #cell="{ record }">
@ -134,7 +134,7 @@
</template>
<script setup>
import { Checkbox } from 'ant-design-vue';
import { Checkbox, Button } from 'ant-design-vue';
import { ref, computed } from 'vue';
import { STATUS_LIST } from '@/views/property-marketing/put-account/components/status-select/constants';
import { formatTableField, exactFormatTime } from '@/utils/tools';

View File

@ -55,24 +55,25 @@
/>
</a-space>
</div>
<a-button type="outline" class="mr-12px" size="medium" @click="handleSearch">
<Button type="primary" ghost class="mr-12px" @click="handleSearch">
<template #icon>
<icon-search />
<icon-search class="mr-8px" />
</template>
<template #default>搜索</template>
</a-button>
<a-button size="medium" @click="handleReset">
</Button>
<Button @click="handleReset">
<template #icon>
<icon-refresh />
<icon-refresh class="mr-8px" />
</template>
<template #default>重置</template>
</a-button>
</Button>
</div>
</div>
</template>
<script setup>
import { reactive, defineEmits, defineProps } from 'vue';
import { Button } from 'ant-design-vue';
import {
getPlacementAccountProjectGroupsList,
getPlacementAccountsList,

View File

@ -16,14 +16,15 @@
</a-form-item>
</a-form>
<template #footer>
<a-button @click="onClose">取消</a-button>
<a-button type="primary" class="ml-16px" @click="onSubmit">确认</a-button>
<Button @click="onClose">取消</Button>
<Button type="primary" class="ml-16px" @click="onSubmit">确认</Button>
</template>
</a-modal>
</template>
<script setup>
import { ref, watch, nextTick } from 'vue';
import { Button } from 'ant-design-vue';
import { postPlacementAccountProjectGroups, putPlacementAccountProjectGroups } from '@/api/all/propertyMarketing';
const emits = defineEmits(['success', 'close']);

View File

@ -9,16 +9,15 @@
<span>确认删除 "{{ groupName }}" 这个分组吗</span>
</div>
<template #footer>
<a-button size="large" @click="onClose">取消</a-button>
<a-button type="primary" class="ml-16px danger-btn" status="danger" size="large" @click="onDelete"
>确认删除</a-button
>
<Button size="large" @click="onClose">取消</Button>
<Button type="primary" class="ml-16px danger-btn" danger size="large" @click="onDelete">确认删除</Button>
</template>
</a-modal>
</template>
<script setup>
import { ref } from 'vue';
import { Button } from 'ant-design-vue';
import { deletePlacementAccountProjectGroups } from '@/api/all/propertyMarketing';
import icon1 from '@/assets/img/media-account/icon-warn-1.png';

View File

@ -23,12 +23,12 @@
</a-input>
</a-space>
</div>
<a-button type="primary" size="medium" @click="openAdd"
<Button type="primary" size="medium" @click="openAdd"
><template #icon>
<icon-plus size="16" />
<icon-plus size="16" class="mr-8px"/>
</template>
<template #default>添加新分组</template>
</a-button>
</Button>
</div>
<a-table
column-resizable
@ -44,18 +44,18 @@
<template #empty>
<NoData>
<span class="s1 mb-16px">暂无分组</span>
<a-button type="primary" class="mb-16px" size="medium" @click="openAdd"
<Button type="primary" class="mb-16px" size="medium" @click="openAdd"
><template #icon>
<icon-plus size="16" />
<icon-plus size="16" class="mr-8px"/>
</template>
<template #default>去添加</template>
</a-button>
</Button>
</NoData>
</template>
<template #action="{ record }">
<div class="flex items-center">
<img :src="icon1" width="16" height="16" class="mr-8px cursor-pointer" @click="openDelete(record)" />
<a-button type="primary" @click="openEdit(record)">编辑</a-button>
<Button type="primary" @click="openEdit(record)">编辑</Button>
</div>
</template>
</a-table>
@ -80,6 +80,7 @@
<script setup>
import { ref, reactive, onMounted } from 'vue';
import { Button } from 'ant-design-vue';
import { getPlacementAccountProjectGroups } from '@/api/all/propertyMarketing';
import { exactFormatTime } from '@/utils/tools';

View File

@ -16,16 +16,16 @@
</div>
<div class="flex items-center">
<a-button type="outline" class="mr-12px" size="medium" @click="handleExport">
<template #icon> <icon-download /> </template>
<Button type="primary" ghost class="mr-12px" @click="handleExport">
<template #icon> <icon-download class="mr-8px" /> </template>
<template #default>导出数据</template>
</a-button>
<a-button type="outline" size="medium" @click="openCustomColumn">
</Button>
<Button type="primary" ghost @click="openCustomColumn">
<template #icon>
<img :src="icon1" width="14" height="14" />
<img :src="icon1" width="14" height="14" class="mr-8px" />
</template>
<template #default>自定义列</template>
</a-button>
</Button>
</div>
</div>
@ -106,7 +106,7 @@
</div>
</template>
<template v-else-if="column.dataIndex === 'operation'" #cell="{ record }">
<a-button type="outline" size="small" @click="handleDetail(record)">详情</a-button>
<Button type="primary" ghost size="small" @click="handleDetail(record)">详情</Button>
</template>
<template v-else-if="column.isRateField" #cell="{ record }">
@ -132,7 +132,7 @@
</template>
<script setup>
import { Checkbox } from 'ant-design-vue';
import { Checkbox, Button } from 'ant-design-vue';
import { ref, computed } from 'vue';
import { STATUS_LIST } from '@/views/property-marketing/put-account/components/status-select/constants';
import { formatTableField } from '@/utils/tools';

View File

@ -9,12 +9,12 @@
<a-tab-pane key="1" title="账户"></a-tab-pane>
<a-tab-pane key="2" title="计划"></a-tab-pane>
<template v-if="!isAccountTab" #extra>
<a-button type="outline" class="mr-12px flex items-center" size="medium" @click="handleOpenGroupModal">
<Button type="primary" ghost class="mr-12px flex items-center" @click="handleOpenGroupModal">
<template #icon>
<img :src="icon2" width="16" height="16" />
<img :src="icon2" width="16" height="16" class="mr-8px" />
</template>
<template #default>分组管理</template>
</a-button>
</Button>
</template>
</a-tabs>
<FilterBlock
@ -54,6 +54,7 @@
</template>
<script setup>
import { Button } from 'ant-design-vue';
import FilterBlock from './components/filter-block';
import BoardTable from './components/board-table';
import PlanTable from './components/plan-table';

View File

@ -15,16 +15,15 @@
<span>确认删除 {{ accountName }} 这个账户吗</span>
</div>
<template #footer>
<a-button size="large" @click="onClose">取消</a-button>
<a-button type="primary" class="ml-16px danger-btn" status="danger" size="large" @click="onDelete"
>确认删除</a-button
>
<Button size="large" @click="onClose">取消</Button>
<Button type="primary" class="ml-16px" danger size="large" @click="onDelete">确认删除</Button>
</template>
</a-modal>
</template>
<script setup>
import { ref } from 'vue';
import { Button } from 'ant-design-vue';
import { deletePlacementAccount, batchDeletePlacementAccounts } from '@/api/all/propertyMarketing';
import icon1 from '@/assets/img/media-account/icon-warn-1.png';

View File

@ -75,22 +75,23 @@
</div>
<div class="operate-row">
<img :src="icon1" width="16" height="16" class="mr-8px cursor-pointer" @click="openDelete(item)" />
<a-button
<Button
v-if="showPauseButton(item.status)"
type="outline"
type="primary"
ghost
class="mr-8px"
size="mini"
size="small"
@click="handlePause(item)"
>
<template #default>暂停同步</template>
</a-button>
<a-button type="outline" class="mr-8px" size="mini" @click="handleReauthorize(item)">
</Button>
<Button type="primary" ghost class="mr-8px" size="small" @click="handleReauthorize(item)">
<template #default>获取凭证</template>
</a-button>
</Button>
<a-button type="outline" size="mini" @click="openEdit(item)">
<Button type="primary" ghost size="small" @click="openEdit(item)">
<template #default>编辑</template>
</a-button>
</Button>
</div>
</div>
</div>
@ -100,7 +101,7 @@
</template>
<script setup>
import { Checkbox } from 'ant-design-vue';
import { Checkbox, Button } from 'ant-design-vue';
import { defineProps, ref, computed } from 'vue';
import { PLATFORM_LIST } from '@/utils/platform';
import { EnumPutAccountStatus } from '@/views/property-marketing/put-account/components/status-select/constants';

View File

@ -9,14 +9,15 @@
<span>确认暂停同步 {{ accountName }} 这个账号的数据吗</span>
</div>
<template #footer>
<a-button size="large" @click="onClose">取消</a-button>
<a-button type="primary" class="ml-16px !bg-#f64b31" size="large" @click="onConfirm">确定</a-button>
<Button size="large" @click="onClose">取消</Button>
<Button type="primary" class="ml-16px !bg-#f64b31" size="large" @click="onConfirm">确定</Button>
</template>
</a-modal>
</template>
<script setup>
import { ref } from 'vue';
import { Button } from 'ant-design-vue';
import { pausePatchPlacementAccount } from '@/api/all/propertyMarketing';
import icon1 from '@/assets/img/media-account/icon-warn-1.png';

View File

@ -134,10 +134,10 @@
</template>
</a-form>
<template #footer>
<a-button size="large" @click="onClose">取消</a-button>
<a-button type="primary" size="large" @click="onSubmit" :loading="importLoading">
<Button size="large" @click="onClose">取消</Button>
<Button type="primary" size="large" @click="onSubmit" :loading="importLoading">
{{ confirmBtnText }}
</a-button>
</Button>
</template>
<AuthorizedAccountModal ref="authorizedAccountModalRef" />
@ -147,6 +147,7 @@
<script setup>
import { ref, defineEmits } from 'vue';
import { Button } from 'ant-design-vue';
import AuthorizedAccountModal from '../authorized-account-modal';
// import ImportPromptModal from '../import-prompt-modal';

View File

@ -55,8 +55,8 @@
</template>
</div>
<template #footer>
<a-button size="large" @click="close">取消</a-button>
<a-button type="primary" size="large" @click="handleOk">{{ confirmBtnText }} </a-button>
<Button size="large" @click="close">取消</Button>
<Button type="primary" size="large" @click="handleOk">{{ confirmBtnText }} </Button>
</template>
</a-modal>
@ -65,6 +65,7 @@
<script setup>
import dayjs from 'dayjs';
import { Button } from 'ant-design-vue';
import { defineExpose, ref, computed, defineEmits } from 'vue';
import { exactFormatTime } from '@/utils/tools';
import {

View File

@ -57,18 +57,18 @@
<CommonSelect class="!w-200px" v-model="query.project_ids" :options="projects" @change="handleSearch" />
</div>
<div class="filter-row-item">
<a-button type="outline" class="mr-12px" size="medium" @click="handleSearch">
<Button type="primary" ghost class="mr-12px" size="medium" @click="handleSearch">
<template #icon>
<icon-search />
<icon-search class="mr-8px" />
</template>
<template #default>搜索</template>
</a-button>
<a-button size="medium" @click="handleReset">
</Button>
<Button size="medium" @click="handleReset">
<template #icon>
<icon-refresh />
<icon-refresh class="mr-8px" />
</template>
<template #default>重置</template>
</a-button>
</Button>
</div>
</div>
</div>
@ -76,6 +76,7 @@
<script setup>
import { defineEmits, defineProps } from 'vue';
import { Button } from 'ant-design-vue';
import { getPlacementAccountOperators, getProjectList } from '@/api/all/propertyMarketing';
import { PLATFORM_LIST } from '@/utils/platform';
import StatusSelect from '@/views/property-marketing/put-account/components/status-select';

View File

@ -18,14 +18,15 @@
</div>
</div>
<template #footer>
<a-button size="large" @click="close">取消</a-button>
<a-button type="primary" size="large" @click="handleOk"> 去授权 </a-button>
<Button size="large" @click="close">取消</Button>
<Button type="primary" size="large" @click="handleOk"> 去授权 </Button>
</template>
</a-modal>
</template>
<script setup>
import { defineExpose } from 'vue';
import { Button } from 'ant-design-vue';
import icon1 from '@/assets/img/media-account/icon-warn-1.png';

View File

@ -103,15 +103,9 @@
>已选<span class="color-#6D4CFE num mx-3px">{{ selectedRows.length }}</span>账户</span
>
<div class="flex items-center">
<a-button size="large" @click="onClose">取消</a-button>
<a-button
type="primary"
class="ml-16px"
status="danger"
size="large"
:disabled="!selectedRows.length"
@click="onConfirm"
>添加已选账户</a-button
<Button size="large" @click="onClose">取消</Button>
<Button type="primary" class="ml-16px" danger size="large" :disabled="!selectedRows.length" @click="onConfirm"
>添加已选账户</Button
>
</div>
</template>
@ -119,6 +113,7 @@
</template>
<script setup>
import { Button } from 'ant-design-vue';
import { INITIAL_FORM, INITIAL_PAGE_INFO, TABLE_COLUMNS } from './constants';
import { formatTableField } from '@/utils/tools';
import { postSubAccount, postAddSubAccount } from '@/api/all/propertyMarketing';

View File

@ -8,12 +8,12 @@
<div class="top flex h-64px px-24px py-10px justify-between items-center">
<p class="text-18px font-400 lh-26px color-#211F24 title">账户管理</p>
<div class="flex items-center">
<a-button type="primary" class="w-112px" size="medium" @click="handleOpenAccountModal">
<Button type="primary" class="w-112px" @click="handleOpenAccountModal">
<template #icon>
<icon-plus size="16" />
</template>
<template #default>添加账户</template>
</a-button>
</Button>
</div>
</div>
<FilterBlock v-model:query="query" @onSearch="handleSearch" @onReset="handleReset" />
@ -21,7 +21,7 @@
<div
v-if="dataSource.length > 0"
class="tip-row flex justify-between px-16px py-10px w-100% my-12px h-42px"
class="tip-row flex justify-between px-16px py-10px w-100% my-12px"
:class="selectedItems.length > 0 ? 'selected' : isAbNormalStatus ? 'abnormal' : 'normal'"
>
<div class="flex items-center">
@ -53,9 +53,9 @@
</template>
<div v-else>
<a-space v-if="isAbNormalStatus" class="flex items-center">
<a-button type="primary" status="danger" size="mini" @click="handleOpenAbnormalAccount">
<Button type="primary" danger size="small" @click="handleOpenAbnormalAccount">
<template #default>查看异常账号</template>
</a-button>
</Button>
</a-space>
</div>
</div>
@ -93,7 +93,7 @@
<script setup>
import { ref } from 'vue';
import { Checkbox } from 'ant-design-vue';
import { Checkbox, Button } from 'ant-design-vue';
import FilterBlock from './components/filter-block';
import AccountTable from './components/account-table';

View File

@ -21,8 +21,8 @@
</a-popconfirm>
</a-space>
<a-space>
<a-button type="outline" @click="downLoad(record.file_url)" class="operation-btn">下载</a-button>
<a-button type="outline" @click="goDetail(record.id)" class="operation-btn">详情</a-button>
<Button type="primary" ghost @click="downLoad(record.file_url)" class="operation-btn">下载</Button>
<Button type="primary" ghost @click="goDetail(record.id)" class="operation-btn">详情</Button>
</a-space>
</a-space>
</template>
@ -30,6 +30,7 @@
</view>
</template>
<script setup lang="ts">
import { Button } from 'ant-design-vue';
import { IconDelete } from '@arco-design/web-vue/es/icon';
import { PLATFORM_LIST } from '@/utils/platform';
import { Message } from '@arco-design/web-vue';

View File

@ -35,18 +35,18 @@
</div>
<div class="filter-row-item flex items-center">
<a-button type="outline" class="mr-12px" :disabled="disabled" size="medium" @click="handleSearch">
<Button type="primary" ghost class="mr-12px" :disabled="disabled" @click="handleSearch">
<template #icon>
<icon-search />
<icon-search class="mr-8px"/>
</template>
<template #default>搜索</template>
</a-button>
<a-button size="medium" @click="handleReset">
</Button>
<Button @click="handleReset">
<template #icon>
<icon-refresh />
<icon-refresh class="mr-8px"/>
</template>
<template #default>重置</template>
</a-button>
</Button>
</div>
</div>
</div>
@ -54,6 +54,7 @@
<script setup lang="ts">
import { defineEmits, defineProps } from 'vue';
import { Button } 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';

View File

@ -61,12 +61,12 @@
<PlacementSuggestions :optimization="aiResult.optimization"></PlacementSuggestions>
<div class="ignore-export">
<a-space class="down-btn">
<a-button type="outline" :loading="exportLoading" @click="downPage">
<Button type="primary" ghost :loading="exportLoading" @click="downPage">
<template #icon>
<icon-download />
<icon-download class="mr-8px"/>
</template>
<template #default>下载</template>
</a-button>
</Button>
</a-space>
</div>
</div>
@ -74,7 +74,7 @@
<script setup lang="ts">
import { reactive, ref } from 'vue';
import { Button } from 'ant-design-vue';
import MonthData from './components/month-data/index.vue';
import PlacementSuggestions from './components/placement-suggestions/index.vue';
import { PLATFORM_LIST } from '@/utils/platform';

View File

@ -55,18 +55,18 @@
<div v-if="tabData == 'placement_guide'" class="ignore-export">
<a-space class="down-btn">
<a-button type="outline" :loading="exportLoading" @click="downPage">
<Button type="primary" ghost :loading="exportLoading" @click="downPage">
<template #icon>
<icon-download />
<icon-download class="mr-8px"/>
</template>
<template #default>下载</template>
</a-button>
<a-button type="primary" @click="handleSave">
</Button>
<Button type="primary" @click="handleSave">
<template #icon>
<icon-drive-file />
<icon-drive-file class="mr-8px"/>
</template>
<template #default>保存</template>
</a-button>
</Button>
</a-space>
</div>
</div>
@ -74,6 +74,7 @@
<script setup lang="ts">
import { reactive, ref } from 'vue';
import { Button } from 'ant-design-vue';
import PlacementGuideList from './components/table-data/placementGuideList.vue';
import listSearchForm from './components/table-data/listSearchForm.vue';
import GuideListHistory from './components/table-data/guideListHistory.vue';