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
-->
<template>
<a-modal
v-model:visible="visible"
<Modal
v-model:open="visible"
title="自定义列"
width="960px"
unmountOnClose
titleAlign="start"
class="custom-table-column-modal"
@close="close"
wrapClassName="custom-table-column-modal"
@cancel="close"
>
<div class="modal-body">
<!-- 左侧分组 -->
@ -20,16 +20,16 @@
<span class="text">{{ group.label }}</span>
</div>
<div class="fields">
<a-checkbox
<Checkbox
v-for="option in group.columns"
:key="option.value"
:model-value="isCheck(option)"
:checked="isCheck(option)"
:value="option.value"
:disabled="option.is_require === ENUM_STATUS.NO"
@change="(checked) => onCheckChange(checked, option)"
@change="(e) => onCheckChange(e.target.checked, option)"
>
{{ option.label }}
</a-checkbox>
</Checkbox>
</div>
</div>
</div>
@ -65,14 +65,15 @@
<template #footer>
<div style="text-align: right">
<a-button class="mr-8px" size="medium" @click="close">取消</a-button>
<a-button type="primary" size="medium" @click="onSubmit">确定</a-button>
<Button @click="close">取消</Button>
<Button type="primary" @click="onSubmit">确定</Button>
</div>
</template>
</a-modal>
</Modal>
</template>
<script setup>
import { Checkbox, Modal, Button } from 'ant-design-vue';
import { ref, defineExpose } from 'vue';
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 {
.arco-modal-body {
.ant-modal-body {
.modal-body {
height: 504px;
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,
activeMatch: ['MediaAccountAccountDashboard', 'MediaAccountAccountDetails'],
},
// {
// key: 'ModPutAccountManage',
// icon: 'svg-putAccountManage',
// label: '账户管理',
// routeName: 'PutAccountAccountManagement',
// requireLogin: true,
// activeMatch: ['PutAccountAccountManagement'],
// },
// {
// key: 'ModPutAccountData',
// icon: 'svg-putAccountData',
// label: '账户数据',
// routeName: 'PutAccountAccountData',
// requireLogin: true,
// activeMatch: ['PutAccountAccountData'],
// },
// {
// key: 'ModPutAccountAccountDashboard',
// icon: 'svg-putAccountAccountDashboard',
// label: '投放表现分析',
// routeName: 'PutAccountAccountDashboard',
// requireLogin: true,
// activeMatch: ['PutAccountAccountDashboard'],
// },
// {
// key: 'ModInvestmentGuidelines',
// icon: 'svg-putAccountInvestmentGuidelines',
// label: '投放指南',
// routeName: 'PutAccountInvestmentGuidelines',
// requireLogin: true,
// activeMatch: ['PutAccountInvestmentGuidelines', 'PutAccountInvestmentGuidelinesDetail'],
// },
{
key: 'ModPutAccountManage',
icon: 'svg-putAccountManage',
label: '账户管理',
routeName: 'PutAccountAccountManagement',
requireLogin: true,
activeMatch: ['PutAccountAccountManagement'],
},
{
key: 'ModPutAccountData',
icon: 'svg-putAccountData',
label: '账户数据',
routeName: 'PutAccountAccountData',
requireLogin: true,
activeMatch: ['PutAccountAccountData'],
},
{
key: 'ModPutAccountAccountDashboard',
icon: 'svg-putAccountAccountDashboard',
label: '投放表现分析',
routeName: 'PutAccountAccountDashboard',
requireLogin: true,
activeMatch: ['PutAccountAccountDashboard'],
},
{
key: 'ModInvestmentGuidelines',
icon: 'svg-putAccountInvestmentGuidelines',
label: '投放指南',
routeName: 'PutAccountInvestmentGuidelines',
requireLogin: true,
activeMatch: ['PutAccountInvestmentGuidelines', 'PutAccountInvestmentGuidelinesDetail'],
},
],
},
{

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

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

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

@ -17,3 +17,5 @@
@import "./ant-form.scss";
@import "./ant-button.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>
<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>
<a-link href="link" class="form-link color-#211F24" target="_blank">用户协议</a-link>
<span class="text-12px color-#737478">和</span>
@ -110,7 +110,7 @@
<a-list-item-meta>
<template #title>
<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>
</div>
</template>
@ -123,6 +123,7 @@
</template>
<script setup lang="ts">
import { Checkbox } from "ant-design-vue";
import PuzzleVerification from './components/PuzzleVerification.vue';
import { fetchLoginCaptCha, fetchAuthorizationsCaptcha, fetchProfileInfo } from '@/api/all/login';
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>
<div class="action-row mb-12px flex justify-between">
<div>
<a-checkbox
<Checkbox
v-if="dataSource.length > 0"
:model-value="checkedAll"
:checked="checkedAll"
:indeterminate="indeterminate"
class="!pl-13px"
@change="handleSelectAll"
>全选</a-checkbox
>
@change="(e) => handleSelectAll(e.target.checked)"
>全选</Checkbox>
</div>
<div class="flex items-center">
<a-button type="outline" class="w-110px mr-12px" size="medium" @click="handleExport">
<template #icon> <icon-download /> </template>
<Button type="outline" class="w-110px mr-12px" size="medium" @click="handleExport">
<template #icon> <icon-download class="mr-8px"/> </template>
<template #default>导出数据</template>
</a-button>
<a-button type="outline" class="w-110px" size="medium" @click="openCustomColumn">
</Button>
<Button type="outline" class="w-110px" 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>
@ -115,7 +114,7 @@
}}
</template>
<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 v-else-if="column.isRateField" #cell="{ record }">
@ -145,7 +144,7 @@
</a-table-column>
<a-table-column data-index="operation" fixed="right" width="100" title="操作">
<template #cell="{ record }">
<a-button type="outline" size="small" @click="handleDetail(record)">详情</a-button>
<Button type="outline" size="small" @click="handleDetail(record)">详情</Button>
</template>
</a-table-column>
</template>
@ -162,6 +161,7 @@
<script setup>
import { ref, computed } from 'vue';
import { useRouter } from 'vue-router';
import { Checkbox, Button } from 'ant-design-vue';
import { getCustomColumns } from '@/api/all/common';
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
-->
<template>
<a-modal
v-model:visible="visible"
<Modal
v-model:open="visible"
title="自定义列"
width="960px"
unmountOnClose
titleAlign="start"
class="custom-table-column-modal-98"
@close="close"
wrapClassName="custom-table-column-modal-98"
@cancel="close"
>
<div class="modal-body">
<!-- 左侧分组 -->
@ -20,16 +20,16 @@
<span class="text">{{ group.label }}</span>
</div>
<div class="fields">
<a-checkbox
<Checkbox
v-for="option in group.columns"
:key="option.value"
:model-value="isCheck(option)"
:checked="isCheck(option)"
:value="option.value"
: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 }}
</a-checkbox>
</Checkbox>
</div>
</div>
</div>
@ -65,14 +65,15 @@
<template #footer>
<div style="text-align: right">
<a-button class="mr-8px" size="medium" @click="close">取消</a-button>
<a-button type="primary" size="medium" @click="onSubmit">确定</a-button>
<Button @click="close">取消</Button>
<Button type="primary" @click="onSubmit">确定</Button>
</div>
</template>
</a-modal>
</Modal>
</template>
<script setup>
import { Checkbox, Modal, Button } from 'ant-design-vue';
import { ref, defineExpose } from 'vue';
import { VueDraggable } from 'vue-draggable-plus';
@ -169,6 +170,7 @@ const removeCheckedField = (value) => {
// 勾选/取消
const onCheckChange = (checked, option) => {
console.log(checked, option);
if (checked) {
checkColumns.value.push(option.value);
} 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 {
.arco-modal-body {
.ant-modal-body {
.modal-body {
height: 504px;
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>
<icon-sync size="24" />
</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">
<a-tooltip content="点击查看账号详情">
<p class="name cursor-pointer hover:!color-#6d4cfe" @click="goDetail(item)">{{ item.name || '-' }}</p>
@ -130,6 +130,7 @@
<script setup>
import { defineProps, ref, computed, inject } from 'vue';
import { Checkbox } from 'ant-design-vue';
import { useRouter } from 'vue-router';
import { deleteSyncStatus } from '@/api/all/propertyMarketing';
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">
<template v-if="selectedItems.length > 0">
<a-checkbox
:model-value="checkedAll"
<Checkbox
:checked="checkedAll"
:indeterminate="indeterminate"
class="mr-8px"
@change="handleChangeAll"
@change="(e) => handleChangeAll(e.target.checked)"
/>
<span class="label mr-24px">
已选
@ -120,6 +120,7 @@
<script setup>
import { ref, provide } from 'vue';
import { Notification } from '@arco-design/web-vue';
import {Checkbox, Button} from 'ant-design-vue';
import FilterBlock from './components/filter-block';
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>
<div class="action-row mb-12px flex justify-between">
<div>
<a-checkbox
<Checkbox
v-if="dataSource.length > 0"
:model-value="checkedAll"
:checked="checkedAll"
:indeterminate="indeterminate"
class="!pl-13px"
@change="handleSelectAll"
>全选</a-checkbox
@change="(e) => handleSelectAll(e.target.checked)"
>全选</Checkbox
>
</div>
@ -134,6 +134,7 @@
</template>
<script setup>
import { Checkbox } 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';

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

@ -5,13 +5,13 @@
<template>
<div class="action-row mb-12px flex justify-between">
<div>
<a-checkbox
<Checkbox
v-if="dataSource.length > 0"
:model-value="checkedAll"
:checked="checkedAll"
:indeterminate="indeterminate"
class="!pl-13px"
@change="handleSelectAll"
>全选</a-checkbox
@change="(e) => handleSelectAll(e.target.checked)"
>全选</Checkbox
>
</div>
@ -132,6 +132,7 @@
</template>
<script setup>
import { Checkbox } 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';

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

@ -12,7 +12,7 @@
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">
<p class="name">{{ item.name || '-' }}</p>
<div class="field-row">
@ -100,6 +100,7 @@
</template>
<script setup>
import { Checkbox } 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';

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

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