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

@ -4,7 +4,7 @@
<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 class="add-btn" type="primary" @click="handleAdd">+ 添加品牌</a-button>
<Button type="primary" class="add-btn" @click="handleAdd">+ 添加品牌</Button>
</div>
</div>
@ -21,18 +21,18 @@
</a-space>
</div>
<div class="filter-row flex">
<a-button type="outline" class="mr-12px" size="medium" @click="handleSearch">
<Button type="outline" 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>
<a-modal
@ -65,8 +65,8 @@
</a-form-item>
</a-form>
<template #footer>
<a-button @click="handleModalCancel">取消</a-button>
<a-button type="primary" @click="handleModalOk">{{ btn_str }}</a-button>
<Button @click="handleModalCancel" class="mr-8px">取消</Button>
<Button type="primary" @click="handleModalOk">{{ btn_str }}</Button>
</template>
</a-modal>
</div>
@ -98,7 +98,7 @@
</a-popconfirm>
</a-space>
<a-space>
<a-button class="edit-btn" type="outline" @click="handleEdit(record.id)">编辑</a-button>
<Button type="outline" class="edit-btn" size="small" @click="handleEdit(record.id)">编辑</Button>
</a-space>
</a-space>
</template>
@ -127,6 +127,7 @@
import { ref, computed, reactive, onMounted } from 'vue';
import { Message } from '@arco-design/web-vue';
import { IconDelete } from '@arco-design/web-vue/es/icon';
import { Button } from 'ant-design-vue';
import {
addMaterials,

View File

@ -25,18 +25,18 @@
</div>
<div class="filter-row flex">
<a-button type="outline" class="mr-12px" size="medium">
<Button class="mr-12px outline-btn">
<template #icon>
<icon-search />
</template>
<template #default>搜索</template>
</a-button>
<a-button size="medium">
搜索
</Button>
<Button>
<template #icon>
<icon-refresh />
</template>
<template #default>重置</template>
</a-button>
重置
</Button>
</div>
</div>
</div>
@ -65,6 +65,7 @@
<script setup lang="ts">
import { reactive, ref } from 'vue';
import { Button } from 'ant-design-vue';
const pageInfo = reactive({
page: 1,
@ -140,10 +141,12 @@ const columns = [
display: flex;
flex-direction: column;
:deep(.search-btn) {
border-radius: 4px;
border: 1px solid var(--Brand-Brand-6, #6d4cfe);
color: #6d4cfe;
:deep(.outline-btn) {
border: 1px solid #d9d9d9;
&:hover {
color: #6d4cfe;
border-color: #6d4cfe;
}
}
:deep(.edit-btn) {

View File

@ -25,18 +25,18 @@
</div>
<div class="filter-row flex">
<a-button type="outline" class="mr-12px" size="medium">
<Button type="primary" ghost class="mr-12px">
<template #icon>
<icon-search />
<icon-search class="mr-8px" />
</template>
<template #default>搜索</template>
</a-button>
<a-button size="medium">
</Button>
<Button>
<template #icon>
<icon-refresh />
<icon-refresh class="mr-8px" />
</template>
<template #default>重置</template>
</a-button>
</Button>
</div>
</div>
</div>
@ -44,8 +44,7 @@
<div
class="table-wrap bg-#fff rounded-8px border-1px border-#D7D7D9 border-solid px-24px py-24px flex-1 flex flex-col"
>
<a-table :columns="columns" :data="tableData" @change="handleChange" :pagination="false">
</a-table>
<a-table :columns="columns" :data="tableData" @change="handleChange" :pagination="false"> </a-table>
<div class="pagination-row">
<a-pagination
:total="pageInfo.total"
@ -64,6 +63,7 @@
</template>
<script setup lang="ts">
import { Button } from 'ant-design-vue';
import { reactive, ref } from 'vue';
const pageInfo = reactive({

View File

@ -9,6 +9,7 @@
width="960px"
unmountOnClose
titleAlign="start"
centered
wrapClassName="custom-table-column-modal-98"
@cancel="close"
>
@ -64,7 +65,7 @@
</div>
<template #footer>
<div style="text-align: right">
<div class="flex">
<Button @click="close">取消</Button>
<Button type="primary" @click="onSubmit">确定</Button>
</div>

View File

@ -51,24 +51,25 @@
</a-select>
</div>
<div class="filter-row-item flex items-center">
<a-button type="outline" class="w-84px mr-12px" size="medium" @click="handleSearch">
<Button type="primary" ghost class="w-84px mr-12px" @click="handleSearch">
<template #icon>
<icon-search />
<icon-search class="mr-8px" />
</template>
<template #default>搜索</template>
</a-button>
<a-button class="w-84px" size="medium" @click="handleReset">
</Button>
<Button class="w-84px" @click="handleReset">
<template #icon>
<icon-refresh />
<icon-refresh class="mr-8px" />
</template>
<template #default>重置</template>
</a-button>
</Button>
</div>
</div>
</div>
</template>
<script setup>
import { Button } from 'ant-design-vue';
import { reactive, defineEmits, defineProps } from 'vue';
import { fetchAccountGroups, fetchAccountOperators } from '@/api/all/propertyMarketing';
import StatusSelect from '@/views/property-marketing/media-account/components/status-select';

View File

@ -36,18 +36,18 @@
/>
</a-space>
</div>
<a-button type="outline" class="w-84px mr-12px" size="medium" @click="handleSearch">
<Button type="primary" ghost class="w-84px mr-12px" @click="handleSearch">
<template #icon>
<icon-search />
<icon-search class="mr-8px"/>
</template>
<template #default>搜索</template>
</a-button>
<a-button class="w-84px" size="medium" @click="handleReset">
</Button>
<Button class="w-84px" @click="handleReset">
<template #icon>
<icon-refresh />
<icon-refresh class="mr-8px" />
</template>
<template #default>重置</template>
</a-button>
</Button>
</div>
<a-table
:data="dataSource"
@ -114,6 +114,7 @@
</template>
<script setup>
import { Button } from 'ant-design-vue';
import { TABLE_COLUMNS, INITIAL_QUERY, INITIAL_PAGE_INFO } from './constants';
import { useRoute } from 'vue-router';
import { formatTableField, exactFormatTime, formatNumberShow } from '@/utils/tools';

View File

@ -115,10 +115,10 @@
<span class="name !mb-0">{{ getErrorStatusText(item) }}</span>
</div>
<div class="flex items-center">
<a-button type="outline" class="mr-8px" size="mini" @click="handleCancel(item)">取消</a-button>
<a-button type="outline" size="mini" @click="handleConfirm(item)" v-if="showConfirmBtn(item)">{{
<Button type="primary" ghost class="mr-8px" size="small" @click="handleCancel(item)">取消</Button>
<Button type="primary" ghost size="small" @click="handleConfirm(item)" v-if="showConfirmBtn(item)">{{
getConfirmBtnText(item)
}}</a-button>
}}</Button>
</div>
</div>
</a-spin>
@ -130,7 +130,7 @@
<script setup>
import { defineProps, ref, computed, inject } from 'vue';
import { Checkbox } from 'ant-design-vue';
import { Checkbox, Button } from 'ant-design-vue';
import { useRouter } from 'vue-router';
import { deleteSyncStatus } from '@/api/all/propertyMarketing';
import { exactFormatTime } from '@/utils/tools';

View File

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

View File

@ -4,6 +4,7 @@
-->
<script lang="jsx">
import { ref, computed } from 'vue';
import { Button } from 'ant-design-vue';
import {
Modal,
Form,
@ -12,10 +13,8 @@ import {
RadioGroup,
Radio,
Upload,
Button,
Switch,
Tooltip,
Notification,
Message as AMessage,
Textarea,
} from '@arco-design/web-vue';

View File

@ -76,15 +76,15 @@
</div>
<template #footer>
<a-button v-if="modalState === MODAL_STATE.QR_READY" size="large" @click="handleRefreshQrCode">
<Button v-if="modalState === MODAL_STATE.QR_READY" size="large" @click="handleRefreshQrCode">
重新生成
</a-button>
<a-button v-if="[MODAL_STATE.SUCCESS, MODAL_STATE.FAILED].includes(modalState)" size="large" @click="close">
</Button>
<Button v-if="[MODAL_STATE.SUCCESS, MODAL_STATE.FAILED].includes(modalState)" size="large" @click="close">
取消
</a-button>
<a-button type="primary" size="large" @click="handleOk">
</Button>
<Button type="primary" size="large" @click="handleOk">
{{ confirmBtnText }}
</a-button>
</Button>
</template>
</a-modal>
@ -94,6 +94,7 @@
<script setup>
import { defineExpose, ref, computed } from 'vue';
import { Message as AMessage } from '@arco-design/web-vue';
import { Button } from 'ant-design-vue';
import { getAuthorizedImage, getMediaAccountsAuthorizedStatus } from '@/api/all/propertyMarketing';
import SyncDataModal from '../sync-data-modal';

View File

@ -76,14 +76,15 @@
</template>
</a-form>
<template #footer>
<a-button size="large" @click="onClose">取消</a-button>
<a-button type="primary" size="large" @click="onSubmit">确定</a-button>
<Button size="large" @click="onClose">取消</Button>
<Button type="primary" size="large" @click="onSubmit">确定</Button>
</template>
</a-modal>
</template>
<script setup>
import { ref, reactive } from 'vue';
import { Button } from 'ant-design-vue';
import { fetchAccountTags, batchPutTag } from '@/api/all/propertyMarketing';
import icon1 from '@/assets/img/icon-question.png';

View File

@ -76,18 +76,18 @@
</a-space>
</div>
<div class="filter-row-item">
<a-button type="outline" class="w-84px mr-12px" size="medium" @click="handleSearch">
<Button type="primary" ghost class="w-84px mr-12px"@click="handleSearch">
<template #icon>
<icon-search />
<icon-search class="mr-8px"/>
</template>
<template #default>搜索</template>
</a-button>
<a-button class="w-84px" size="medium" @click="handleReset">
</Button>
<Button class="w-84px" @click="handleReset">
<template #icon>
<icon-refresh />
<icon-refresh class="mr-8px"/>
</template>
<template #default>重置</template>
</a-button>
</Button>
</div>
</div>
</div>
@ -95,6 +95,7 @@
<script setup>
import { reactive, defineEmits, defineProps } from 'vue';
import { Button } from 'ant-design-vue';
import {
fetchAccountTags,
getProjectList,

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 { postAccountGroups, putGroup } 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 size="large" @click="onDelete">确认删除</Button>
</template>
</a-modal>
</template>
<script setup>
import { ref } from 'vue';
import { Button } from 'ant-design-vue';
import { deleteGroup } 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="middle" @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
@ -45,18 +45,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="middle" @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" size="small" @click="openEdit(record)">编辑</Button>
</div>
</template>
</a-table>
@ -81,6 +81,7 @@
<script setup>
import { ref, reactive, onMounted } from 'vue';
import { Button } from 'ant-design-vue';
import { getAccountGroup } from '@/api/all/propertyMarketing';
import { exactFormatTime } from '@/utils/tools';

View File

@ -21,13 +21,14 @@
</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 { Button } from 'ant-design-vue';
import { defineExpose } from 'vue';
import icon1 from '@/assets/img/media-account/icon-warn-1.png';

View File

@ -92,19 +92,19 @@
</div>
<template #footer>
<a-button v-if="modalState === MODAL_STATE.QR_READY" size="large" @click="handleRefreshQrCode">
<Button v-if="modalState === MODAL_STATE.QR_READY" size="large" @click="handleRefreshQrCode">
重新生成
</a-button>
<a-button
</Button>
<Button
v-if="modalState === MODAL_STATE.SUCCESS || modalState === MODAL_STATE.FAILED"
size="large"
@click="close"
>
取消
</a-button>
<a-button type="primary" size="large" @click="handleOk">
</Button>
<Button type="primary" size="large" @click="handleOk">
{{ confirmBtnText }}
</a-button>
</Button>
</template>
</a-modal>
@ -114,6 +114,7 @@
<script setup>
import { defineExpose, ref, computed } from 'vue';
import { Message as AMessage } from '@arco-design/web-vue';
import { Button } from 'ant-design-vue';
import { getMediaAccountsAuthorizedStatus, getAuthorizedImage } from '@/api/all/propertyMarketing';
import SyncDataModal from '../sync-data-modal';

View File

@ -20,14 +20,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

@ -12,14 +12,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, nextTick } from 'vue';
import { Button } from 'ant-design-vue';
import { postAccountTags, putTag } from '@/api/all/propertyMarketing';
const emits = defineEmits(['success', 'close']);

View File

@ -9,9 +9,9 @@
<span>确认删除 "{{ tagName }}" 这个标签吗</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>
@ -19,6 +19,7 @@
<script setup>
import { ref } from 'vue';
import { Button } from 'ant-design-vue';
import { deleteTag } 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" @click="openAdd">
<template #icon>
<icon-plus size="16" />
<icon-plus size="16" class="mr-8px"/>
</template>
<template #default>添加新标签</template>
</a-button>
</Button>
</div>
<div class="h-300px">
@ -43,12 +43,12 @@
<template v-else>
<NoData>
<span class="s1 mb-16px">暂无标签</span>
<a-button type="primary" class="mb-16px" size="medium" @click="openAdd">
<Button type="primary" class="mb-16px" @click="openAdd">
<template #icon>
<icon-plus size="16" />
<icon-plus size="16" class="mr-8px"/>
</template>
<template #default>去添加</template>
</a-button>
</Button>
</NoData>
</template>
</div>
@ -60,6 +60,7 @@
<script setup>
import { ref } from 'vue';
import { Button } from 'ant-design-vue';
import { getTagsList } from '@/api/all/propertyMarketing';
import AddTag from './add-tag.vue';

View File

@ -8,24 +8,24 @@
<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 class="w-112px mr-12px" type="outline" size="medium" @click="handleOpenTagsModal">
<Button class="w-112px mr-12px" type="primary" ghost size="middle" @click="handleOpenTagsModal">
<template #icon>
<img :src="icon3" width="16" height="16" />
<img :src="icon3" width="16" height="16" class="mr-8px" />
</template>
<template #default>标签管理</template>
</a-button>
<a-button class="w-112px mr-12px" type="outline" size="medium" @click="handleOpenGroupModal">
标签管理
</Button>
<Button class="w-112px mr-12px" type="outline" size="middle" @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>
<a-button type="primary" class="w-112px" size="medium" @click="handleOpenAccountModal">
分组管理
</Button>
<Button type="primary" class="w-112px" size="middle" @click="handleOpenAccountModal">
<template #icon>
<icon-plus size="16"/>
<icon-plus size="16" class="mr-8px"/>
</template>
<template #default>添加账号</template>
</a-button>
</Button>
</div>
</div>
<FilterBlock ref="filterBlockRef" v-model:query="query" @onSearch="handleSearch" @onReset="handleReset" />
@ -33,7 +33,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">
@ -70,9 +70,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>
@ -120,7 +120,7 @@
<script setup>
import { ref, provide } from 'vue';
import { Notification } from '@arco-design/web-vue';
import {Checkbox, Button} 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

@ -17,11 +17,11 @@
<template #footer>
<div class="flex justify-between items-center w-100%">
<div>
<a-button type="outline" size="medium" @click="onPrev" v-if="!isFirstStep">上一步</a-button>
<Button type="primary" ghost size="middle" @click="onPrev" v-if="!isFirstStep">上一步</Button>
</div>
<div class="flex items-center">
<a-button size="medium" class="mr-8px" @click="onCancel">取消</a-button>
<a-button type="primary" size="medium" @click="onSubmit">{{ isLastStep ? '确认添加' : '下一步' }}</a-button>
<Button size="middle" class="mr-8px" @click="onCancel">取消</Button>
<Button type="primary" size="middle" @click="onSubmit">{{ isLastStep ? '确认添加' : '下一步' }}</Button>
</div>
</div>
</template>
@ -30,6 +30,7 @@
<script setup>
import { postAddProject, putProject, getProjectDetail } from '@/api/all/propertyMarketing';
import { Button } from 'ant-design-vue';
import StepOne from './stepOne.vue';
import StepTwo from './stepTwo.vue';

View File

@ -94,7 +94,7 @@
<div class="right w-320px px-12px flex flex-col">
<div class="flex justify-between">
<p class="mb-16px s1">{{ `已选择(${selectedRows?.length ?? 0}` }}</p>
<a-button type="text" @click="onClearSelect" v-if="selectedRows.length">清空</a-button>
<Button type="text" @click="onClearSelect" v-if="selectedRows.length">清空</Button>
</div>
<div class="flex-1 overflow-y-auto overflow-x-hidden">
<template v-if="selectedRows?.length">
@ -113,6 +113,7 @@
<script setup>
import { formatTableField, exactFormatTime } from '@/utils/tools';
import { Button } from 'ant-design-vue';
import { getPlacementAccountOperators, getWorksList } from '@/api/all/propertyMarketing';
import { getUserList } from '@/api/all/common';

View File

@ -97,7 +97,7 @@
<div class="right w-320px px-12px flex flex-col">
<div class="flex justify-between">
<p class="mb-16px s1">{{ `已选择(${selectedRows?.length ?? 0}` }}</p>
<a-button type="text" @click="onClearSelect" v-if="selectedRows.length">清空</a-button>
<Button type="text" @click="onClearSelect" v-if="selectedRows.length">清空</Button>
</div>
<div class="flex-1 overflow-y-auto overflow-x-hidden">
<template v-if="selectedRows?.length">
@ -117,6 +117,7 @@
<script setup>
import { PLATFORM_LIST, getPutAccountPlatformLogo } from '@/utils/platform';
import { formatTableField } from '@/utils/tools';
import { Button } from 'ant-design-vue';
import { getPlacementAccountOperators, getPlacementAccountsList } from '@/api/all/propertyMarketing';
import { useTableSelectionWithPagination } from '@/hooks/useTableSelectionWithPagination';

View File

@ -97,7 +97,7 @@
<div class="right w-320px px-12px flex flex-col">
<div class="flex justify-between">
<p class="mb-16px s1">{{ `已选择(${selectedRows?.length ?? 0}` }}</p>
<a-button type="text" @click="onClearSelect" v-if="selectedRows.length">清空</a-button>
<Button type="text" @click="onClearSelect" v-if="selectedRows.length">清空</Button>
</div>
<div class="flex-1 overflow-y-auto">
<div class="flex flex-wrap" v-if="selectedRows?.length">
@ -115,6 +115,7 @@
<script setup>
import { MEDIA_ACCOUNT_PLATFORMS, getMediaAccountPlatformLogo } from '@/utils/platform';
import { formatTableField } from '@/utils/tools';
import { Button } from 'ant-design-vue';
import { fetchAccountOperators, getMediaAccountList } from '@/api/all/propertyMarketing';
import { useTableSelectionWithPagination } from '@/hooks/useTableSelectionWithPagination';

View File

@ -24,18 +24,18 @@
</a-space>
</div>
<div class="filter-row-item flex items-center">
<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>
@ -43,6 +43,7 @@
<script setup>
import { defineEmits, defineProps } from 'vue';
import { Button } from 'ant-design-vue';
const props = defineProps({
query: {

View File

@ -15,9 +15,9 @@
<span>确认删除 {{ projectName }} 这个项目吗</span>
</div>
<template #footer>
<a-button size="large" @click="onClose">取消</a-button>
<a-button type="primary" class="ml-16px" 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>
@ -25,6 +25,7 @@
<script setup>
import { ref } from 'vue';
import { Button } from 'ant-design-vue';
import { deleteProject } from '@/api/all/propertyMarketing';
import icon1 from '@/assets/img/media-account/icon-warn-1.png';

View File

@ -41,7 +41,7 @@
<template v-else-if="column.dataIndex === 'operation'" #cell="{ record }">
<div class="flex items-center">
<img class="mr-8px cursor-pointer" :src="icon1" width="14" height="14" @click="onDelete(record)" />
<a-button type="outline" size="mini" @click="onEdit(record)">编辑</a-button>
<Button type="primary" ghost size="small" @click="onEdit(record)">编辑</Button>
</div>
</template>
@ -55,6 +55,7 @@
<script setup>
import { ref } from 'vue';
import { Button } from 'ant-design-vue';
import { formatTableField, exactFormatTime } from '@/utils/tools';
import { TABLE_COLUMNS } from './constants';

View File

@ -4,12 +4,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 search-btn" size="medium" @click="handleOpenAddProjectModal">
<Button type="primary" class="w-112px search-btn" size="medium" @click="handleOpenAddProjectModal">
<template #icon>
<icon-plus size="16" />
</template>
<template #default>添加项目</template>
</a-button>
</Button>
</div>
</div>
<FilterBlock v-model:query="query" @onSearch="handleSearch" @onReset="handleReset" />
@ -43,6 +43,7 @@
<script setup>
import { INITIAL_QUERY } from './constants';
import { Button } from 'ant-design-vue';
import { useTableSelectionWithPagination } from '@/hooks/useTableSelectionWithPagination';
import { getProjects } from '@/api/all/propertyMarketing';

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