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

feat: a-checkbox替换

Browse Source
This commit is contained in:
rd
2025-09-02 17:16:02 +08:00
parent 38f2b2c20c
commit 01d561cfb2
17 changed files with 280 additions and 198 deletions
Download Patch File Download Diff File Expand all files Collapse all files

23
src/components/custom-table-column-modal/index.vue
View File

@ -3,14 +3,14 @@
* @Date: 2025-06-30 10:54:49 * @Date: 2025-06-30 10:54:49
--> -->
<template> <template>
<a-modal <Modal
v-model:visible="visible" v-model:open="visible"
title="自定义列" title="自定义列"
width="960px" width="960px"
unmountOnClose unmountOnClose
titleAlign="start" titleAlign="start"
class="custom-table-column-modal" wrapClassName="custom-table-column-modal"
@close="close" @cancel="close"
> >
<div class="modal-body"> <div class="modal-body">
<!-- 左侧分组 --> <!-- 左侧分组 -->
@ -20,16 +20,16 @@
<span class="text">{{ group.label }}</span> <span class="text">{{ group.label }}</span>
</div> </div>
<div class="fields"> <div class="fields">
<a-checkbox <Checkbox
v-for="option in group.columns" v-for="option in group.columns"
:key="option.value" :key="option.value"
:model-value="isCheck(option)" :checked="isCheck(option)"
:value="option.value" :value="option.value"
:disabled="option.is_require === ENUM_STATUS.NO" :disabled="option.is_require === ENUM_STATUS.NO"
@change="(checked) => onCheckChange(checked, option)" @change="(e) => onCheckChange(e.target.checked, option)"
> >
{{ option.label }} {{ option.label }}
</a-checkbox> </Checkbox>
</div> </div>
</div> </div>
</div> </div>
@ -65,14 +65,15 @@
<template #footer> <template #footer>
<div style="text-align: right"> <div style="text-align: right">
<a-button class="mr-8px" size="medium" @click="close">取消</a-button> <Button @click="close">取消</Button>
<a-button type="primary" size="medium" @click="onSubmit">确定</a-button> <Button type="primary" @click="onSubmit">确定</Button>
</div> </div>
</template> </template>
</a-modal> </Modal>
</template> </template>
<script setup> <script setup>
import { Checkbox, Modal, Button } from 'ant-design-vue';
import { ref, defineExpose } from 'vue'; import { ref, defineExpose } from 'vue';
import { VueDraggable } from 'vue-draggable-plus'; import { VueDraggable } from 'vue-draggable-plus';

2
src/components/custom-table-column-modal/style.scss
View File

@ -1,5 +1,5 @@
.custom-table-column-modal { .custom-table-column-modal {
.arco-modal-body { .ant-modal-body {
.modal-body { .modal-body {
height: 504px; height: 504px;
border-radius: 8px; border-radius: 8px;

64
src/layouts/components/siderBar/menu-list.ts
View File

@ -36,38 +36,38 @@ export const MENU_LIST = <Record<string, typeMenuItem[]>>{
requireLogin: true, requireLogin: true,
activeMatch: ['MediaAccountAccountDashboard', 'MediaAccountAccountDetails'], activeMatch: ['MediaAccountAccountDashboard', 'MediaAccountAccountDetails'],
}, },
// { {
// key: 'ModPutAccountManage', key: 'ModPutAccountManage',
// icon: 'svg-putAccountManage', icon: 'svg-putAccountManage',
// label: '账户管理', label: '账户管理',
// routeName: 'PutAccountAccountManagement', routeName: 'PutAccountAccountManagement',
// requireLogin: true, requireLogin: true,
// activeMatch: ['PutAccountAccountManagement'], activeMatch: ['PutAccountAccountManagement'],
// }, },
// { {
// key: 'ModPutAccountData', key: 'ModPutAccountData',
// icon: 'svg-putAccountData', icon: 'svg-putAccountData',
// label: '账户数据', label: '账户数据',
// routeName: 'PutAccountAccountData', routeName: 'PutAccountAccountData',
// requireLogin: true, requireLogin: true,
// activeMatch: ['PutAccountAccountData'], activeMatch: ['PutAccountAccountData'],
// }, },
// { {
// key: 'ModPutAccountAccountDashboard', key: 'ModPutAccountAccountDashboard',
// icon: 'svg-putAccountAccountDashboard', icon: 'svg-putAccountAccountDashboard',
// label: '投放表现分析', label: '投放表现分析',
// routeName: 'PutAccountAccountDashboard', routeName: 'PutAccountAccountDashboard',
// requireLogin: true, requireLogin: true,
// activeMatch: ['PutAccountAccountDashboard'], activeMatch: ['PutAccountAccountDashboard'],
// }, },
// { {
// key: 'ModInvestmentGuidelines', key: 'ModInvestmentGuidelines',
// icon: 'svg-putAccountInvestmentGuidelines', icon: 'svg-putAccountInvestmentGuidelines',
// label: '投放指南', label: '投放指南',
// routeName: 'PutAccountInvestmentGuidelines', routeName: 'PutAccountInvestmentGuidelines',
// requireLogin: true, requireLogin: true,
// activeMatch: ['PutAccountInvestmentGuidelines', 'PutAccountInvestmentGuidelinesDetail'], activeMatch: ['PutAccountInvestmentGuidelines', 'PutAccountInvestmentGuidelinesDetail'],
// }, },
], ],
}, },
{ {

216
src/router/routes/modules/propertyMarketing.ts
View File

@ -88,114 +88,114 @@ const COMPONENTS: AppRouteRecordRaw[] = [
}, },
], ],
}, },
// { {
// path: '/put-account', path: '/put-account',
// name: 'PutAccount', name: 'PutAccount',
// redirect: 'put-account/accountManagement', redirect: 'put-account/accountManagement',
// meta: { meta: {
// locale: '投放资源中心', locale: '投放资源中心',
// icon: IconPutAccount, icon: IconPutAccount,
// requiresAuth: true, requiresAuth: true,
// requireLogin: true, requireLogin: true,
// roles: ['*'], roles: ['*'],
// id: MENU_GROUP_IDS.PROPERTY_ID, id: MENU_GROUP_IDS.PROPERTY_ID,
// }, },
// children: [ children: [
// { {
// path: 'manage', path: 'manage',
// name: 'PutAccountAccountManagement', name: 'PutAccountAccountManagement',
// meta: { meta: {
// locale: '账户管理', locale: '账户管理',
// requiresAuth: true, requiresAuth: true,
// requireLogin: true, requireLogin: true,
// roles: ['*'], roles: ['*'],
// }, },
// component: () => import('@/views/property-marketing/put-account/account-manage/index.vue'), component: () => import('@/views/property-marketing/put-account/account-manage/index.vue'),
// }, },
// { {
// path: 'data', path: 'data',
// name: 'PutAccountAccountData', name: 'PutAccountAccountData',
// meta: { meta: {
// locale: '账户数据', locale: '账户数据',
// requiresAuth: true, requiresAuth: true,
// requireLogin: true, requireLogin: true,
// roles: ['*'], roles: ['*'],
// }, },
// component: () => import('@/views/property-marketing/put-account/account-data/index.vue'), component: () => import('@/views/property-marketing/put-account/account-data/index.vue'),
// }, },
// { {
// path: 'account-dashboard', path: 'account-dashboard',
// name: 'PutAccountAccountDashboard', name: 'PutAccountAccountDashboard',
// meta: { meta: {
// locale: '投放表现分析', locale: '投放表现分析',
// requiresAuth: true, requiresAuth: true,
// requireLogin: true, requireLogin: true,
// roles: ['*'], roles: ['*'],
// }, },
// component: () => import('@/views/property-marketing/put-account/account-dashboard/index.vue'), component: () => import('@/views/property-marketing/put-account/account-dashboard/index.vue'),
// }, },
// { {
// path: 'investmentGuidelines', path: 'investmentGuidelines',
// name: 'PutAccountInvestmentGuidelines', name: 'PutAccountInvestmentGuidelines',
// meta: { meta: {
// locale: '投放指南', locale: '投放指南',
// requiresAuth: true, requiresAuth: true,
// requireLogin: true, requireLogin: true,
// roles: ['*'], roles: ['*'],
// }, },
// component: () => import('@/views/property-marketing/put-account/investment-guidelines/index.vue'), component: () => import('@/views/property-marketing/put-account/investment-guidelines/index.vue'),
// }, },
// { {
// path: 'detail/:id', path: 'detail/:id',
// name: 'PutAccountInvestmentGuidelinesDetail', name: 'PutAccountInvestmentGuidelinesDetail',
// meta: { meta: {
// locale: '投放指南详情', locale: '投放指南详情',
// requiresAuth: true, requiresAuth: true,
// hideInMenu: true, hideInMenu: true,
// roles: ['*'], roles: ['*'],
// activeMenu: 'PutAccountInvestmentGuidelines', activeMenu: 'PutAccountInvestmentGuidelines',
// }, },
// component: () => import('@/views/property-marketing/put-account/investment-guidelines/detail.vue'), component: () => import('@/views/property-marketing/put-account/investment-guidelines/detail.vue'),
// }, },
// ], ],
// }, },
// { {
// path: '/intelligent-solution', path: '/intelligent-solution',
// name: 'IntelligentSolution', name: 'IntelligentSolution',
// redirect: 'intelligent-solution/businessAnalysisReport', redirect: 'intelligent-solution/businessAnalysisReport',
// meta: { meta: {
// locale: '智能方案管理', locale: '智能方案管理',
// icon: IconIntelligentSolution, icon: IconIntelligentSolution,
// requiresAuth: true, requiresAuth: true,
// requireLogin: true, requireLogin: true,
// roles: ['*'], roles: ['*'],
// id: MENU_GROUP_IDS.PROPERTY_ID, id: MENU_GROUP_IDS.PROPERTY_ID,
// }, },
// children: [ children: [
// { {
// path: 'businessAnalysisReport', path: 'businessAnalysisReport',
// name: 'IntelligentSolutionBusinessAnalysisReport', name: 'IntelligentSolutionBusinessAnalysisReport',
// meta: { meta: {
// locale: '业务洞察报告', locale: '业务洞察报告',
// requiresAuth: true, requiresAuth: true,
// requireLogin: true, requireLogin: true,
// roles: ['*'], roles: ['*'],
// }, },
// component: () => import('@/views/property-marketing/intelligent-solution/businessAnalysisReport.vue'), component: () => import('@/views/property-marketing/intelligent-solution/businessAnalysisReport.vue'),
// }, },
// { {
// path: 'competitiveProductAnalysisReport', path: 'competitiveProductAnalysisReport',
// name: 'IntelligentSolutionCompetitiveProductAnalysisReport', name: 'IntelligentSolutionCompetitiveProductAnalysisReport',
// meta: { meta: {
// locale: '竟品对比报告', locale: '竟品对比报告',
// requiresAuth: true, requiresAuth: true,
// requireLogin: true, requireLogin: true,
// roles: ['*'], roles: ['*'],
// }, },
// component: () => import('@/views/property-marketing/intelligent-solution/competitiveProductAnalysisReport.vue'), component: () => import('@/views/property-marketing/intelligent-solution/competitiveProductAnalysisReport.vue'),
// }, },
// ], ],
// }, },
{ {
path: '/project-manage', path: '/project-manage',
name: 'ProjectManagement', name: 'ProjectManagement',

68
src/styles/components/ant-checkbox.scss Normal file
View File

@ -0,0 +1,68 @@
.ant-checkbox-group {
.ant-checkbox-wrapper {
margin-right: 24px;
}
}
.ant-checkbox-wrapper {
.ant-checkbox {
&::after {
display: none !important;
}
.ant-checkbox-inner {
border-radius: 2px;
border: 2px solid #d7d7d9;
}
&.ant-checkbox-disabled {
background: #f2f3f5;
}
&.ant-checkbox-indeterminate {
.ant-checkbox-inner {
background-color: #6d4cfe !important;
border-color: transparent !important;
&::after {
height: 2px;
width: 6px;
background-color: #fff !important;
}
}
}
&.ant-checkbox-indeterminate.ant-checkbox-disabled {
.ant-checkbox-inner {
background-color: #a794fe !important;
&::after {
transform: translate(-50%, -50%) scale(1);
}
}
}
&.ant-checkbox-checked {
.ant-checkbox-inner {
background-color: #6d4cfe !important;
border-color: transparent !important;
}
}
&.ant-checkbox-checked.ant-checkbox-disabled {
.ant-checkbox-inner {
background-color: #a794fe !important;
border-color: transparent !important;
&::after {
border-color: #fff;
}
}
}
}
.ant-checkbox + span {
padding-left: 8px;
padding-right: 0;
color: #211f24;
font-family: $font-family-regular;
font-size: 14px;
font-style: normal;
font-weight: 400;
line-height: 22px;
}
&:hover {
.ant-checkbox-inner {
border-color: #d7d7d9 !important;
}
}
}

4
src/styles/components/ant-radio.scss
View File

@ -1,7 +1,9 @@
.ant-radio-group { .ant-radio-group {
.ant-radio-wrapper {
margin-right: 24px;
}
} }
.ant-radio-wrapper { .ant-radio-wrapper {
margin-right: 24px;
.ant-radio { .ant-radio {
.ant-radio-inner { .ant-radio-inner {
width: 14px; width: 14px;

2
src/styles/components/index.scss
View File

@ -17,3 +17,5 @@
@import "./ant-form.scss"; @import "./ant-form.scss";
@import "./ant-button.scss"; @import "./ant-button.scss";
@import "./ant-table.scss"; @import "./ant-table.scss";
@import "./ant-checkbox.scss";

5
src/views/components/login/index.vue
View File

@ -66,7 +66,7 @@
</a-form-item> </a-form-item>
</a-form> </a-form>
<a-space class="text-12px color-#737478 justify-start items-center"> <a-space class="text-12px color-#737478 justify-start items-center">
<a-checkbox v-model="hasCheck" class="!text-12px mr-8px"></a-checkbox> <Checkbox v-model:checked="hasCheck" class="!text-12px mr-8px"></Checkbox>
<span class="text-12px color-#737478">{{ isLogin ? '登录' : '注册' }}即代表同意</span> <span class="text-12px color-#737478">{{ isLogin ? '登录' : '注册' }}即代表同意</span>
<a-link href="link" class="form-link color-#211F24" target="_blank">用户协议</a-link> <a-link href="link" class="form-link color-#211F24" target="_blank">用户协议</a-link>
<span class="text-12px color-#737478">和</span> <span class="text-12px color-#737478">和</span>
@ -110,7 +110,7 @@
<a-list-item-meta> <a-list-item-meta>
<template #title> <template #title>
<div style="display: flex; align-items: center; gap: 12px"> <div style="display: flex; align-items: center; gap: 12px">
<a-checkbox :model-value="selectedAccountIndex === index" /> <Checkbox :checked="selectedAccountIndex === index" />
<a-typography-text>{{ account.name || '-' }}</a-typography-text> <a-typography-text>{{ account.name || '-' }}</a-typography-text>
</div> </div>
</template> </template>
@ -123,6 +123,7 @@
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { Checkbox } from "ant-design-vue";
import PuzzleVerification from './components/PuzzleVerification.vue'; import PuzzleVerification from './components/PuzzleVerification.vue';
import { fetchLoginCaptCha, fetchAuthorizationsCaptcha, fetchProfileInfo } from '@/api/all/login'; import { fetchLoginCaptCha, fetchAuthorizationsCaptcha, fetchProfileInfo } from '@/api/all/login';
import { joinEnterpriseByInviteCode } from '@/api/all'; import { joinEnterpriseByInviteCode } from '@/api/all';

26
src/views/property-marketing/media-account/account-dashboard/components/account-table/index.vue
View File

@ -5,26 +5,25 @@
<template> <template>
<div class="action-row mb-12px flex justify-between"> <div class="action-row mb-12px flex justify-between">
<div> <div>
<a-checkbox <Checkbox
v-if="dataSource.length > 0" v-if="dataSource.length > 0"
:model-value="checkedAll" :checked="checkedAll"
:indeterminate="indeterminate" :indeterminate="indeterminate"
class="!pl-13px" class="!pl-13px"
@change="handleSelectAll" @change="(e) => handleSelectAll(e.target.checked)"
>全选</a-checkbox >全选</Checkbox>
>
</div> </div>
<div class="flex items-center"> <div class="flex items-center">
<a-button type="outline" class="w-110px mr-12px" size="medium" @click="handleExport"> <Button type="outline" class="w-110px mr-12px" size="medium" @click="handleExport">
<template #icon> <icon-download /> </template> <template #icon> <icon-download class="mr-8px"/> </template>
<template #default>导出数据</template> <template #default>导出数据</template>
</a-button> </Button>
<a-button type="outline" class="w-110px" size="medium" @click="openCustomColumn"> <Button type="outline" class="w-110px" size="medium" @click="openCustomColumn">
<template #icon> <template #icon>
<img :src="icon1" width="14" height="14" /> <img :src="icon1" width="14" height="14" class="mr-8px"/>
</template> </template>
<template #default>自定义列</template> <template #default>自定义列</template>
</a-button> </Button>
</div> </div>
</div> </div>
@ -115,7 +114,7 @@
}} }}
</template> </template>
<template v-else-if="column.dataIndex === 'operation'" #cell="{ record }"> <template v-else-if="column.dataIndex === 'operation'" #cell="{ record }">
<a-button type="outline" size="small" @click="handleDetail(record)">详情</a-button> <Button type="outline" size="small" @click="handleDetail(record)">详情</Button>
</template> </template>
<template v-else-if="column.isRateField" #cell="{ record }"> <template v-else-if="column.isRateField" #cell="{ record }">
@ -145,7 +144,7 @@
</a-table-column> </a-table-column>
<a-table-column data-index="operation" fixed="right" width="100" title="操作"> <a-table-column data-index="operation" fixed="right" width="100" title="操作">
<template #cell="{ record }"> <template #cell="{ record }">
<a-button type="outline" size="small" @click="handleDetail(record)">详情</a-button> <Button type="outline" size="small" @click="handleDetail(record)">详情</Button>
</template> </template>
</a-table-column> </a-table-column>
</template> </template>
@ -162,6 +161,7 @@
<script setup> <script setup>
import { ref, computed } from 'vue'; import { ref, computed } from 'vue';
import { useRouter } from 'vue-router'; import { useRouter } from 'vue-router';
import { Checkbox, Button } from 'ant-design-vue';
import { getCustomColumns } from '@/api/all/common'; import { getCustomColumns } from '@/api/all/common';
import StatusBox from '@/views/property-marketing/media-account/components/status-select/status-box.tsx'; import StatusBox from '@/views/property-marketing/media-account/components/status-select/status-box.tsx';

24
src/views/property-marketing/media-account/account-dashboard/components/custom-column-modal/index.vue
View File

@ -3,14 +3,14 @@
* @Date: 2025-06-30 10:54:49 * @Date: 2025-06-30 10:54:49
--> -->
<template> <template>
<a-modal <Modal
v-model:visible="visible" v-model:open="visible"
title="自定义列" title="自定义列"
width="960px" width="960px"
unmountOnClose unmountOnClose
titleAlign="start" titleAlign="start"
class="custom-table-column-modal-98" wrapClassName="custom-table-column-modal-98"
@close="close" @cancel="close"
> >
<div class="modal-body"> <div class="modal-body">
<!-- 左侧分组 --> <!-- 左侧分组 -->
@ -20,16 +20,16 @@
<span class="text">{{ group.label }}</span> <span class="text">{{ group.label }}</span>
</div> </div>
<div class="fields"> <div class="fields">
<a-checkbox <Checkbox
v-for="option in group.columns" v-for="option in group.columns"
:key="option.value" :key="option.value"
:model-value="isCheck(option)" :checked="isCheck(option)"
:value="option.value" :value="option.value"
:disabled="option.is_require === ENUM_STATUS.NO" :disabled="option.is_require === ENUM_STATUS.NO"
@change="(checked) => onCheckChange(checked, option)" @change="(e) => onCheckChange(e.target.checked, option)"
> >
{{ localFields.find((item) => item.prop === option.value)?.title }} {{ localFields.find((item) => item.prop === option.value)?.title }}
</a-checkbox> </Checkbox>
</div> </div>
</div> </div>
</div> </div>
@ -65,14 +65,15 @@
<template #footer> <template #footer>
<div style="text-align: right"> <div style="text-align: right">
<a-button class="mr-8px" size="medium" @click="close">取消</a-button> <Button @click="close">取消</Button>
<a-button type="primary" size="medium" @click="onSubmit">确定</a-button> <Button type="primary" @click="onSubmit">确定</Button>
</div> </div>
</template> </template>
</a-modal> </Modal>
</template> </template>
<script setup> <script setup>
import { Checkbox, Modal, Button } from 'ant-design-vue';
import { ref, defineExpose } from 'vue'; import { ref, defineExpose } from 'vue';
import { VueDraggable } from 'vue-draggable-plus'; import { VueDraggable } from 'vue-draggable-plus';
@ -169,6 +170,7 @@ const removeCheckedField = (value) => {
// 勾选/取消 // 勾选/取消
const onCheckChange = (checked, option) => { const onCheckChange = (checked, option) => {
console.log(checked, option);
if (checked) { if (checked) {
checkColumns.value.push(option.value); checkColumns.value.push(option.value);
} else { } else {

2
src/views/property-marketing/media-account/account-dashboard/components/custom-column-modal/style.scss
View File

@ -1,5 +1,5 @@
.custom-table-column-modal-98 { .custom-table-column-modal-98 {
.arco-modal-body { .ant-modal-body {
.modal-body { .modal-body {
height: 504px; height: 504px;
border-radius: 8px; border-radius: 8px;

3
src/views/property-marketing/media-account/account-manage/components/account-table/index.vue
View File

@ -17,7 +17,7 @@
<template #icon> <template #icon>
<icon-sync size="24" /> <icon-sync size="24" />
</template> </template>
<a-checkbox :model-value="isSelected(item)" :value="item.id" @change="toggleSelect(item)"></a-checkbox> <Checkbox :checked="isSelected(item)" :value="item.id" @change="toggleSelect(item)"></Checkbox>
<div class="ml-8px flex-1"> <div class="ml-8px flex-1">
<a-tooltip content="点击查看账号详情"> <a-tooltip content="点击查看账号详情">
<p class="name cursor-pointer hover:!color-#6d4cfe" @click="goDetail(item)">{{ item.name || '-' }}</p> <p class="name cursor-pointer hover:!color-#6d4cfe" @click="goDetail(item)">{{ item.name || '-' }}</p>
@ -130,6 +130,7 @@
<script setup> <script setup>
import { defineProps, ref, computed, inject } from 'vue'; import { defineProps, ref, computed, inject } from 'vue';
import { Checkbox } from 'ant-design-vue';
import { useRouter } from 'vue-router'; import { useRouter } from 'vue-router';
import { deleteSyncStatus } from '@/api/all/propertyMarketing'; import { deleteSyncStatus } from '@/api/all/propertyMarketing';
import { exactFormatTime } from '@/utils/tools'; import { exactFormatTime } from '@/utils/tools';

7
src/views/property-marketing/media-account/account-manage/index.vue
View File

@ -39,11 +39,11 @@
<div class="flex items-center"> <div class="flex items-center">
<div class="flex items-center"> <div class="flex items-center">
<template v-if="selectedItems.length > 0"> <template v-if="selectedItems.length > 0">
<a-checkbox <Checkbox
:model-value="checkedAll" :checked="checkedAll"
:indeterminate="indeterminate" :indeterminate="indeterminate"
class="mr-8px" class="mr-8px"
@change="handleChangeAll" @change="(e) => handleChangeAll(e.target.checked)"
/> />
<span class="label mr-24px"> <span class="label mr-24px">
已选 已选
@ -120,6 +120,7 @@
<script setup> <script setup>
import { ref, provide } from 'vue'; import { ref, provide } from 'vue';
import { Notification } from '@arco-design/web-vue'; import { Notification } from '@arco-design/web-vue';
import {Checkbox, Button} from 'ant-design-vue';
import FilterBlock from './components/filter-block'; import FilterBlock from './components/filter-block';
import AccountTable from './components/account-table'; import AccountTable from './components/account-table';

9
src/views/property-marketing/put-account/account-data/components/board-table/index.vue
View File

@ -5,13 +5,13 @@
<template> <template>
<div class="action-row mb-12px flex justify-between"> <div class="action-row mb-12px flex justify-between">
<div> <div>
<a-checkbox <Checkbox
v-if="dataSource.length > 0" v-if="dataSource.length > 0"
:model-value="checkedAll" :checked="checkedAll"
:indeterminate="indeterminate" :indeterminate="indeterminate"
class="!pl-13px" class="!pl-13px"
@change="handleSelectAll" @change="(e) => handleSelectAll(e.target.checked)"
>全选</a-checkbox >全选</Checkbox
> >
</div> </div>
@ -134,6 +134,7 @@
</template> </template>
<script setup> <script setup>
import { Checkbox } from 'ant-design-vue';
import { ref, computed } from 'vue'; import { ref, computed } from 'vue';
import { STATUS_LIST } from '@/views/property-marketing/put-account/components/status-select/constants'; import { STATUS_LIST } from '@/views/property-marketing/put-account/components/status-select/constants';
import { formatTableField, exactFormatTime } from '@/utils/tools'; import { formatTableField, exactFormatTime } from '@/utils/tools';

9
src/views/property-marketing/put-account/account-data/components/plan-table/index.vue
View File

@ -5,13 +5,13 @@
<template> <template>
<div class="action-row mb-12px flex justify-between"> <div class="action-row mb-12px flex justify-between">
<div> <div>
<a-checkbox <Checkbox
v-if="dataSource.length > 0" v-if="dataSource.length > 0"
:model-value="checkedAll" :checked="checkedAll"
:indeterminate="indeterminate" :indeterminate="indeterminate"
class="!pl-13px" class="!pl-13px"
@change="handleSelectAll" @change="(e) => handleSelectAll(e.target.checked)"
>全选</a-checkbox >全选</Checkbox
> >
</div> </div>
@ -132,6 +132,7 @@
</template> </template>
<script setup> <script setup>
import { Checkbox } from 'ant-design-vue';
import { ref, computed } from 'vue'; import { ref, computed } from 'vue';
import { STATUS_LIST } from '@/views/property-marketing/put-account/components/status-select/constants'; import { STATUS_LIST } from '@/views/property-marketing/put-account/components/status-select/constants';
import { formatTableField } from '@/utils/tools'; import { formatTableField } from '@/utils/tools';

3
src/views/property-marketing/put-account/account-manage/components/account-table/index.vue
View File

@ -12,7 +12,7 @@
checked: isSelected(item), checked: isSelected(item),
}" }"
> >
<a-checkbox :model-value="isSelected(item)" :value="item.id" @change="toggleSelect(item)"></a-checkbox> <Checkbox :checked="isSelected(item)" :value="item.id" @change="toggleSelect(item)"></Checkbox>
<div class="ml-8px flex-1"> <div class="ml-8px flex-1">
<p class="name">{{ item.name || '-' }}</p> <p class="name">{{ item.name || '-' }}</p>
<div class="field-row"> <div class="field-row">
@ -100,6 +100,7 @@
</template> </template>
<script setup> <script setup>
import { Checkbox } from 'ant-design-vue';
import { defineProps, ref, computed } from 'vue'; import { defineProps, ref, computed } from 'vue';
import { PLATFORM_LIST } from '@/utils/platform'; import { PLATFORM_LIST } from '@/utils/platform';
import { EnumPutAccountStatus } from '@/views/property-marketing/put-account/components/status-select/constants'; import { EnumPutAccountStatus } from '@/views/property-marketing/put-account/components/status-select/constants';

11
src/views/property-marketing/put-account/account-manage/index.vue
View File

@ -4,13 +4,13 @@
--> -->
<template> <template>
<div class="account-manage-wrap"> <div class="account-manage-wrap">
<div class="filter-wrap bg-#fff rounded-8px "> <div class="filter-wrap bg-#fff rounded-8px">
<div class="top flex h-64px px-24px py-10px justify-between items-center"> <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> <p class="text-18px font-400 lh-26px color-#211F24 title">账户管理</p>
<div class="flex items-center"> <div class="flex items-center">
<a-button type="primary" class="w-112px" size="medium" @click="handleOpenAccountModal"> <a-button type="primary" class="w-112px" size="medium" @click="handleOpenAccountModal">
<template #icon> <template #icon>
<icon-plus size="16"/> <icon-plus size="16" />
</template> </template>
<template #default>添加账户</template> <template #default>添加账户</template>
</a-button> </a-button>
@ -27,11 +27,11 @@
<div class="flex items-center"> <div class="flex items-center">
<div class="flex items-center"> <div class="flex items-center">
<template v-if="selectedItems.length > 0"> <template v-if="selectedItems.length > 0">
<a-checkbox <Checkbox
:model-value="checkedAll" :checked="checkedAll"
:indeterminate="indeterminate" :indeterminate="indeterminate"
class="mr-8px" class="mr-8px"
@change="handleChangeAll" @change="(e) => handleChangeAll(e.target.checked)"
/> />
<span class="label mr-24px"> <span class="label mr-24px">
已选 已选
@ -93,6 +93,7 @@
<script setup> <script setup>
import { ref } from 'vue'; import { ref } from 'vue';
import { Checkbox } from 'ant-design-vue';
import FilterBlock from './components/filter-block'; import FilterBlock from './components/filter-block';
import AccountTable from './components/account-table'; import AccountTable from './components/account-table';