Merge remote-tracking branch 'origin/feature/0902_antd组件替换' into test
# Conflicts: # src/App.vue # src/components/common-select/index.vue # src/layouts/components/navbar/components/task-center-modal/components/import-task/index.vue # src/views/components/login/index.vue # src/views/home/components/history-conversation-drawer/index.vue # src/views/login/style.scss # src/views/property-marketing/media-account/account-manage/components/add-account-modal/index.vue
This commit is contained in:
rd
@ -5,151 +5,143 @@
|
||||
<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>
|
||||
|
||||
<a-table
|
||||
<Table
|
||||
ref="tableRef"
|
||||
:data="dataSource"
|
||||
row-key="id"
|
||||
column-resizable
|
||||
:row-selection="{
|
||||
:dataSource="dataSource"
|
||||
rowKey="id"
|
||||
:rowSelection="{
|
||||
type: 'checkbox',
|
||||
showCheckedAll: true,
|
||||
width: 48,
|
||||
selectedRowKeys: selectedItems,
|
||||
onSelect: handleSelect,
|
||||
onSelectAll: handleSelectAll,
|
||||
}"
|
||||
:selected-keys="selectedItems"
|
||||
:pagination="false"
|
||||
:scroll="{ x: '100%' }"
|
||||
class="account-table w-100% flex-1"
|
||||
bordered
|
||||
@sorter-change="handleSorterChange"
|
||||
@select="handleSelect"
|
||||
@select-all="handleSelectAll"
|
||||
:showSorterTooltip="false"
|
||||
@change="handleTableChange"
|
||||
>
|
||||
<template #empty>
|
||||
<template #emptyText>
|
||||
<NoData />
|
||||
</template>
|
||||
<template #columns>
|
||||
<a-table-column
|
||||
v-for="column in tableColumns"
|
||||
:key="column.dataIndex"
|
||||
:data-index="column.dataIndex"
|
||||
:fixed="column.fixed"
|
||||
:width="column.width"
|
||||
:min-width="column.minWidth"
|
||||
:sortable="column.sortable"
|
||||
:align="column.align"
|
||||
ellipsis
|
||||
tooltip
|
||||
>
|
||||
<template #title>
|
||||
<div class="flex items-center">
|
||||
<img v-if="column.dataIndex === 'ai_evaluate'" width="16" height="16" :src="icon5" class="mr-4px" />
|
||||
<span class="cts mr-4px">{{ column.title }}</span>
|
||||
<a-tooltip v-if="column.tooltip" :content="column.tooltip" position="top">
|
||||
<icon-question-circle class="tooltip-icon color-#737478" size="16" />
|
||||
</a-tooltip>
|
||||
</div>
|
||||
</template>
|
||||
<Column
|
||||
v-for="column in tableColumns"
|
||||
:key="column.dataIndex"
|
||||
:dataIndex="column.dataIndex"
|
||||
:fixed="column.fixed"
|
||||
:width="column.width"
|
||||
:minWidth="column.minWidth"
|
||||
:sorter="column.sortable"
|
||||
:align="column.align"
|
||||
:ellipsis="true"
|
||||
>
|
||||
<template #title>
|
||||
<img v-if="column.dataIndex === 'ai_evaluate'" width="16" height="16" :src="icon5" class="mr-4px" />
|
||||
<span class="cts mr-4px">{{ column.title }}</span>
|
||||
<Tooltip v-if="column.tooltip" :title="column.tooltip" placement="top">
|
||||
<icon-question-circle class="tooltip-icon color-#737478" size="16" />
|
||||
</Tooltip>
|
||||
</template>
|
||||
|
||||
<template v-if="column.dataIndex === 'platform'" #cell="{ record }">
|
||||
<img :src="getMediaAccountPlatformLogo(record.platform)" width="20" height="20" class="rounded-4px" />
|
||||
</template>
|
||||
<template v-else-if="column.dataIndex === 'status'" #cell="{ record }">
|
||||
<StatusBox :item="record" class="w-fit h-28px" />
|
||||
</template>
|
||||
<template v-else-if="column.dataIndex === 'ai_evaluate'" #cell="{ record }">
|
||||
<div class="ai-evaluation-row flex">
|
||||
<template v-if="record.ai_evaluate">
|
||||
<img
|
||||
width="16"
|
||||
height="16"
|
||||
:src="record.ai_evaluate?.status === 0 ? icon2 : record.ai_evaluate?.status === 1 ? icon3 : icon4"
|
||||
class="mr-8px icon"
|
||||
/>
|
||||
<div>
|
||||
<p class="cts">{{ `${record.ai_evaluate?.level} | ${record.ai_evaluate?.advise}` }}。</p>
|
||||
<p class="cts text-12px lh-20px !color-#939499">
|
||||
{{
|
||||
`观看: ${record[`${getPropPrefix(dateType)}view_rate`]}% 点赞: ${
|
||||
record[`${getPropPrefix(dateType)}like_rate`]
|
||||
}%`
|
||||
}}
|
||||
</p>
|
||||
</div>
|
||||
</template>
|
||||
<template v-else>
|
||||
<p class="cts">-</p>
|
||||
</template>
|
||||
</div>
|
||||
</template>
|
||||
<template v-else-if="column.dataIndex === 'like_collect_number'" #cell="{ record }">
|
||||
{{
|
||||
formatNumberShow({
|
||||
value: `${record[`${getPropPrefix(dateType)}like_number`] ?? 0} + ${
|
||||
record[`${getPropPrefix(dateType)}collect_number`] ?? 0
|
||||
}`,
|
||||
showExactValue: true,
|
||||
})
|
||||
}}
|
||||
</template>
|
||||
<template v-else-if="column.dataIndex === 'operation'" #cell="{ record }">
|
||||
<a-button type="outline" size="small" @click="handleDetail(record)">详情</a-button>
|
||||
</template>
|
||||
<template v-if="column.dataIndex === 'platform'" #customRender="{ record }">
|
||||
<img :src="getMediaAccountPlatformLogo(record.platform)" width="20" height="20" class="rounded-4px" />
|
||||
</template>
|
||||
<template v-else-if="column.dataIndex === 'status'" #customRender="{ record }">
|
||||
<StatusBox :item="record" class="w-fit h-28px" />
|
||||
</template>
|
||||
<template v-else-if="column.dataIndex === 'ai_evaluate'" #customRender="{ record }">
|
||||
<div class="ai-evaluation-row flex">
|
||||
<template v-if="record.ai_evaluate">
|
||||
<img
|
||||
width="16"
|
||||
height="16"
|
||||
:src="record.ai_evaluate?.status === 0 ? icon2 : record.ai_evaluate?.status === 1 ? icon3 : icon4"
|
||||
class="mr-8px icon"
|
||||
/>
|
||||
<div>
|
||||
<p class="cts">{{ `${record.ai_evaluate?.level} | ${record.ai_evaluate?.advise}` }}。</p>
|
||||
<p class="cts text-12px lh-20px !color-#939499">
|
||||
{{
|
||||
`观看: ${record[`${getPropPrefix(dateType)}view_rate`]}% 点赞: ${
|
||||
record[`${getPropPrefix(dateType)}like_rate`]
|
||||
}%`
|
||||
}}
|
||||
</p>
|
||||
</div>
|
||||
</template>
|
||||
<template v-else>
|
||||
<p class="cts">-</p>
|
||||
</template>
|
||||
</div>
|
||||
</template>
|
||||
<template v-else-if="column.dataIndex === 'like_collect_number'" #customRender="{ record }">
|
||||
{{
|
||||
formatNumberShow({
|
||||
value: `${record[`${getPropPrefix(dateType)}like_number`] ?? 0} + ${
|
||||
record[`${getPropPrefix(dateType)}collect_number`] ?? 0
|
||||
}`,
|
||||
showExactValue: true,
|
||||
})
|
||||
}}
|
||||
</template>
|
||||
<template v-else-if="column.dataIndex === 'operation'" #customRender="{ record }">
|
||||
<Button type="outline" size="small" @click="handleDetail(record)">详情</Button>
|
||||
</template>
|
||||
|
||||
<template v-else-if="column.isRateField" #cell="{ record }">
|
||||
<div class="flex items-center rate-row justify-end" :class="record[column.dataIndex] > 0 ? 'up' : 'down'">
|
||||
<icon-arrow-up v-if="record[column.dataIndex] > 0" size="16" />
|
||||
<icon-arrow-down v-else size="16" />
|
||||
{{ formatTableField(column, record) }}
|
||||
</div>
|
||||
</template>
|
||||
<template v-else-if="column.dataIndex === 'newest_work_title'" #cell="{ record }">
|
||||
<p class="cts cursor-pointer hover:!color-#6D4CFE">{{ record.newest_work_title }}</p>
|
||||
<p class="cts text-12px lh-20px !color-#939499">
|
||||
{{ exactFormatTime(record.newest_work_published_at) }}
|
||||
</p>
|
||||
</template>
|
||||
<template v-else-if="column.dataIndex === 'second_new_work_title'" #cell="{ record }">
|
||||
<p class="cts cursor-pointer hover:!color-#6D4CFE">{{ record.second_new_work_title }}</p>
|
||||
<p class="cts text-12px lh-20px !color-#939499">
|
||||
{{ exactFormatTime(record.second_new_work_published_at) }}
|
||||
</p>
|
||||
</template>
|
||||
<template v-else-if="column.isRateField" #customRender="{ record }">
|
||||
<div class="flex items-center rate-row justify-end" :class="record[column.dataIndex] > 0 ? 'up' : 'down'">
|
||||
<icon-arrow-up v-if="record[column.dataIndex] > 0" size="16" />
|
||||
<icon-arrow-down v-else size="16" />
|
||||
{{ formatTableField(column, record) }}
|
||||
</div>
|
||||
</template>
|
||||
<template v-else-if="column.dataIndex === 'newest_work_title'" #customRender="{ record }">
|
||||
<p class="cts cursor-pointer hover:!color-#6D4CFE">{{ record.newest_work_title }}</p>
|
||||
<p class="cts text-12px lh-20px !color-#939499">
|
||||
{{ exactFormatTime(record.newest_work_published_at) }}
|
||||
</p>
|
||||
</template>
|
||||
<template v-else-if="column.dataIndex === 'second_new_work_title'" #customRender="{ record }">
|
||||
<p class="cts cursor-pointer hover:!color-#6D4CFE">{{ record.second_new_work_title }}</p>
|
||||
<p class="cts text-12px lh-20px !color-#939499">
|
||||
{{ exactFormatTime(record.second_new_work_published_at) }}
|
||||
</p>
|
||||
</template>
|
||||
|
||||
<template v-else #cell="{ record }">
|
||||
{{ formatTableField(column, record, true) }}
|
||||
</template>
|
||||
|
||||
</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>
|
||||
</template>
|
||||
</a-table-column>
|
||||
</template>
|
||||
</a-table>
|
||||
<template v-else #customRender="{ record }">
|
||||
{{ formatTableField(column, record, true) }}
|
||||
</template>
|
||||
</Column>
|
||||
<Column dataIndex="operation" fixed="right" :width="100" title="操作">
|
||||
<template #customRender="{ record }">
|
||||
<Button type="outline" size="small" @click="handleDetail(record)">详情</Button>
|
||||
</template>
|
||||
</Column>
|
||||
</Table>
|
||||
|
||||
<CustomTableColumnModal
|
||||
ref="customTableColumnModalRef"
|
||||
@ -162,6 +154,8 @@
|
||||
<script setup>
|
||||
import { ref, computed } from 'vue';
|
||||
import { useRouter } from 'vue-router';
|
||||
import { Checkbox, Button, Tooltip, Table } from 'ant-design-vue';
|
||||
const { Column } = Table;
|
||||
|
||||
import { getCustomColumns } from '@/api/all/common';
|
||||
import StatusBox from '@/views/property-marketing/media-account/components/status-select/status-box.tsx';
|
||||
@ -209,7 +203,7 @@ const dateType = computed(() => (props.query.type === 7 ? 'week' : 'month'));
|
||||
const tableColumns = computed(() => {
|
||||
const _result = [];
|
||||
const _columns = getDefaultColumns(dateType.value);
|
||||
console.log({_columns})
|
||||
console.log({ _columns });
|
||||
|
||||
selectedColumns.value.forEach((item) => {
|
||||
const _column = _columns.find((_item) => _item.prop === item);
|
||||
@ -220,30 +214,32 @@ const tableColumns = computed(() => {
|
||||
return _result;
|
||||
});
|
||||
|
||||
const handleSelectAll = (checked) => {
|
||||
if (checked) {
|
||||
selectedItems.value = props.dataSource.map((item) => item.id);
|
||||
} else {
|
||||
selectedItems.value = [];
|
||||
}
|
||||
emit('selectionChange', checked ? selectedItems.value : []);
|
||||
};
|
||||
|
||||
const handleDetail = (record) => {
|
||||
router.push(`/media-account/detail/${record.id}?type=${dateType.value}`);
|
||||
};
|
||||
|
||||
// 处理排序变化
|
||||
const handleSorterChange = (column, order) => {
|
||||
console.log(column, order);
|
||||
emit('sorterChange', column, order === 'ascend' ? 'asc' : 'desc');
|
||||
// 处理表格变化
|
||||
const handleTableChange = (pagination, filters, sorter) => {
|
||||
if (sorter && sorter.field) {
|
||||
emit('sorterChange', sorter.field, sorter.order === 'ascend' ? 'asc' : 'desc');
|
||||
}
|
||||
};
|
||||
|
||||
const handleSelect = (selectedRowKeys, selectedRows) => {
|
||||
selectedItems.value = selectedRowKeys;
|
||||
const handleSelect = (record, selected, selectedRows, nativeEvent) => {
|
||||
selectedItems.value = selectedRows.map((row) => row.id);
|
||||
emit('selectionChange', selectedRows);
|
||||
};
|
||||
|
||||
const handleSelectAll = (selected, selectedRows, changeRows) => {
|
||||
if (selected) {
|
||||
selectedItems.value = props.dataSource.map((item) => item.id);
|
||||
emit('selectionChange', props.dataSource);
|
||||
} else {
|
||||
selectedItems.value = [];
|
||||
emit('selectionChange', []);
|
||||
}
|
||||
};
|
||||
|
||||
const handleExport = () => {
|
||||
emit('export');
|
||||
};
|
||||
|
||||
@ -3,14 +3,15 @@
|
||||
* @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"
|
||||
centered
|
||||
wrapClassName="custom-table-column-modal-98"
|
||||
@cancel="close"
|
||||
>
|
||||
<div class="modal-body">
|
||||
<!-- 左侧分组 -->
|
||||
@ -20,16 +21,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>
|
||||
@ -64,15 +65,16 @@
|
||||
</div>
|
||||
|
||||
<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>
|
||||
<div class="flex">
|
||||
<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 +171,7 @@ const removeCheckedField = (value) => {
|
||||
|
||||
// 勾选/取消
|
||||
const onCheckChange = (checked, option) => {
|
||||
console.log(checked, option);
|
||||
if (checked) {
|
||||
checkColumns.value.push(option.value);
|
||||
} else {
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
.custom-table-column-modal-98 {
|
||||
.arco-modal-body {
|
||||
.ant-modal-body {
|
||||
.modal-body {
|
||||
height: 504px;
|
||||
border-radius: 8px;
|
||||
|
||||
@ -8,18 +8,11 @@
|
||||
<div class="filter-row flex">
|
||||
<div class="filter-row-item flex items-center">
|
||||
<span class="label">账号名称</span>
|
||||
<a-input
|
||||
v-model="query.name"
|
||||
placeholder="请搜索..."
|
||||
size="medium"
|
||||
class="!w-240px"
|
||||
allow-clear
|
||||
@change="handleSearch"
|
||||
>
|
||||
<Input v-model:value="query.name" placeholder="请搜索..." class="!w-240px" allowClear @change="handleSearch">
|
||||
<template #prefix>
|
||||
<icon-search />
|
||||
</template>
|
||||
</a-input>
|
||||
</Input>
|
||||
</div>
|
||||
<div class="filter-row-item flex items-center">
|
||||
<span class="label">分组</span>
|
||||
@ -43,37 +36,40 @@
|
||||
<div class="filter-row flex">
|
||||
<div class="filter-row-item flex items-center">
|
||||
<span class="label">时间筛选</span>
|
||||
<a-select v-model="query.type" size="medium" placeholder="全部" class="!w-240px" @change="handleSearch">
|
||||
<template #arrow-icon> <icon-calendar size="16" /> </template>
|
||||
<a-option :value="7" label="近7天">近7天</a-option>
|
||||
<!-- <a-option :value="14" label="近14天">近14天</a-option> -->
|
||||
<a-option :value="30" label="近30天">近30天</a-option>
|
||||
</a-select>
|
||||
<Select v-model:value="query.type" size="middle" placeholder="全部" class="!w-240px" @change="handleSearch">
|
||||
<template #suffixIcon> <icon-calendar size="16" /> </template>
|
||||
<Option :value="7" label="近7天">近7天</Option>
|
||||
<!-- <Option :value="14" label="近14天">近14天</Option> -->
|
||||
<Option :value="30" label="近30天">近30天</Option>
|
||||
</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 { reactive, defineEmits, defineProps } from 'vue';
|
||||
import { Button, Input, Select } from 'ant-design-vue';
|
||||
import { reactive, defineEmits, defineProps, onMounted, nextTick, ref } from 'vue';
|
||||
import { fetchAccountGroups, fetchAccountOperators } from '@/api/all/propertyMarketing';
|
||||
import StatusSelect from '@/views/property-marketing/media-account/components/status-select';
|
||||
import CommonSelect from '@/components/common-select';
|
||||
|
||||
const { Option } = Select;
|
||||
|
||||
const props = defineProps({
|
||||
query: {
|
||||
type: Object,
|
||||
@ -81,7 +77,7 @@ const props = defineProps({
|
||||
},
|
||||
});
|
||||
|
||||
const emits = defineEmits('onSearch', 'onReset', 'update:query');
|
||||
const emits = defineEmits(['onSearch', 'onReset', 'update:query']);
|
||||
|
||||
const groups = ref([]);
|
||||
const operators = ref([]);
|
||||
|
||||
@ -37,8 +37,8 @@ export const CARD_FIELDS = [
|
||||
|
||||
export const INITIAL_QUERY = {
|
||||
name: '',
|
||||
status: '',
|
||||
operator_id: '',
|
||||
status: undefined,
|
||||
operator_id: undefined,
|
||||
group_ids: [],
|
||||
type: 7,
|
||||
column: '',
|
||||
|
||||
@ -9,9 +9,9 @@
|
||||
<div class="top flex h-64px py-10px justify-between items-center">
|
||||
<div class="flex items-center">
|
||||
<p class="text-18px font-400 lh-26px color-#211F24 mr-4px title">数据总览</p>
|
||||
<a-tooltip content="展示所筛选的账号的信息汇总">
|
||||
<Tooltip title="展示所筛选的账号的信息汇总">
|
||||
<icon-question-circle size="16" class="color-#737478" />
|
||||
</a-tooltip>
|
||||
</Tooltip>
|
||||
</div>
|
||||
</div>
|
||||
<div class="overview-row flex">
|
||||
@ -19,15 +19,15 @@
|
||||
<div class="flex items-center mb-8px">
|
||||
<img :src="item.icon" width="20" height="20" class="mr-8px" />
|
||||
<p class="label color-#211F24">{{ item.label }}</p>
|
||||
<a-tooltip v-if="item.tooltip" :content="item.tooltip">
|
||||
<Tooltip v-if="item.tooltip" :title="item.tooltip">
|
||||
<img :src="icon1" width="14" height="14" class="ml-4px" />
|
||||
</a-tooltip>
|
||||
</Tooltip>
|
||||
</div>
|
||||
<span class="value color-#211F24 ml-32px">{{ formatNumberShow(overviewData[item.prop]) }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class=" bg-#fff rounded-8px mb-16px">
|
||||
<div class="bg-#fff rounded-8px mb-16px">
|
||||
<FilterBlock v-model:query="query" @onSearch="handleSearch" @onReset="handleReset" />
|
||||
</div>
|
||||
<div class="table-wrap bg-#fff rounded-8px px-24px py-24px flex flex-col">
|
||||
@ -40,16 +40,15 @@
|
||||
@sorterChange="handleSorterChange"
|
||||
/>
|
||||
<div v-if="pageInfo.total > 0" class="pagination-row">
|
||||
<a-pagination
|
||||
<Pagination
|
||||
:total="pageInfo.total"
|
||||
size="mini"
|
||||
show-total
|
||||
show-jumper
|
||||
show-page-size
|
||||
size="small"
|
||||
:showTotal="(total, range) => `共 ${total} 条`"
|
||||
showSizeChanger
|
||||
showQuickJumper
|
||||
:current="pageInfo.page"
|
||||
:page-size="pageInfo.page_size"
|
||||
:pageSize="pageInfo.page_size"
|
||||
@change="onPageChange"
|
||||
@page-size-change="onPageSizeChange"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
@ -60,6 +59,7 @@
|
||||
import FilterBlock from './components/filter-block';
|
||||
import AccountTable from './components/account-table';
|
||||
|
||||
import { Tooltip, Pagination } from 'ant-design-vue';
|
||||
import { getAccountBoardOverview, getAccountBoardList, postAccountBoardExport } from '@/api/all/propertyMarketing';
|
||||
import { formatNumberShow } from '@/utils/tools';
|
||||
import { INITIAL_QUERY, CARD_FIELDS } from './constants';
|
||||
@ -99,8 +99,9 @@ const getData = async () => {
|
||||
}
|
||||
};
|
||||
|
||||
const onPageChange = (current) => {
|
||||
const onPageChange = (current, pageSize) => {
|
||||
pageInfo.value.page = current;
|
||||
pageInfo.value.page_size = pageSize;
|
||||
getData();
|
||||
};
|
||||
|
||||
|
||||
@ -3,7 +3,7 @@
|
||||
* @Date: 2025-06-28 12:58:25
|
||||
-->
|
||||
<template>
|
||||
<div class="account-info-wrap bg-#fff rounded-8px px-24px mb-16px">
|
||||
<div class="account-info-wrap bg-#fff rounded-8px px-24px mb-16px">
|
||||
<div class="title-row">
|
||||
<span class="cts !text-18px !lh-26px title">账号信息</span>
|
||||
</div>
|
||||
@ -47,9 +47,9 @@
|
||||
<template v-else>
|
||||
<div class="flex items-center mb-4px">
|
||||
<p class="cts !color-#737478 !mr-4px">{{ field.title }}</p>
|
||||
<a-tooltip v-if="field.tooltip" :content="field.tooltip" position="top">
|
||||
<Tooltip v-if="field.tooltip" :title="field.tooltip" position="top">
|
||||
<icon-question-circle class="tooltip-icon color-#737478" size="16" />
|
||||
</a-tooltip>
|
||||
</Tooltip>
|
||||
</div>
|
||||
<p class="cts">
|
||||
<template v-if="field.type === 'status'">
|
||||
@ -60,10 +60,10 @@
|
||||
<div v-for="(tag, index) in detailData.tags.slice(0, 2)" :key="index" class="tag-box">
|
||||
<span class="text">{{ tag.name }}</span>
|
||||
</div>
|
||||
<a-tooltip
|
||||
<Tooltip
|
||||
v-if="detailData.tags.length > 2"
|
||||
position="top"
|
||||
:content="
|
||||
:title="
|
||||
detailData.tags
|
||||
.slice(2)
|
||||
.map((v) => v.name)
|
||||
@ -73,7 +73,7 @@
|
||||
<div class="tag-box">
|
||||
<span class="text">{{ `+${detailData.tags.length - 2}` }}</span>
|
||||
</div>
|
||||
</a-tooltip>
|
||||
</Tooltip>
|
||||
</div>
|
||||
<span class="cts" v-else>-</span>
|
||||
</template>
|
||||
@ -88,7 +88,12 @@
|
||||
}}
|
||||
</template>
|
||||
<template v-else-if="field.dataIndex === 'platform'">
|
||||
<img :src="getMediaAccountPlatformLogo(detailData.platform)" width="16" height="16" class="rounded-4px" />
|
||||
<img
|
||||
:src="getMediaAccountPlatformLogo(detailData.platform)"
|
||||
width="16"
|
||||
height="16"
|
||||
class="rounded-4px"
|
||||
/>
|
||||
</template>
|
||||
<template v-else-if="['last_authorized_at', 'last_synced_at'].includes(field.dataIndex)">
|
||||
{{ exactFormatTime(detailData[field.dataIndex], 'YYYY-MM-DD HH:mm:ss', 'YYYY-MM-DD HH:mm:ss') }}
|
||||
@ -132,6 +137,7 @@
|
||||
<script setup>
|
||||
import { useRoute } from 'vue-router';
|
||||
|
||||
import { Tooltip } from 'ant-design-vue';
|
||||
import { formatTableField, formatNumberShow, exactFormatTime } from '@/utils/tools';
|
||||
import { getMediaAccountPlatformLogo } from '@/utils/platform';
|
||||
import { getAccountInfoFields } from '../../constants';
|
||||
|
||||
@ -18,7 +18,7 @@ export const TABLE_COLUMNS = [
|
||||
{
|
||||
title: '笔记标题',
|
||||
dataIndex: 'title',
|
||||
width: 240,
|
||||
width: 280,
|
||||
fixed: 'left',
|
||||
},
|
||||
{
|
||||
@ -30,42 +30,42 @@ export const TABLE_COLUMNS = [
|
||||
{
|
||||
title: '曝光量',
|
||||
dataIndex: 'exposure_number',
|
||||
width: 180,
|
||||
width: 160,
|
||||
tooltip: '内容被展示给用户的总次数，不代表用户实际观看。',
|
||||
align: 'right',
|
||||
},
|
||||
{
|
||||
title: '观看量',
|
||||
dataIndex: 'view_number',
|
||||
width: 180,
|
||||
width: 160,
|
||||
tooltip: '用户点击内容并实际观看的次数，是内容实际触达的重要指标。',
|
||||
align: 'right',
|
||||
},
|
||||
{
|
||||
title: '点赞量',
|
||||
dataIndex: 'like_number',
|
||||
width: 180,
|
||||
width: 160,
|
||||
tooltip: '单篇笔记获得的点赞总数，反映用户喜好程度。',
|
||||
align: 'right',
|
||||
},
|
||||
{
|
||||
title: '收藏量',
|
||||
dataIndex: 'collect_number',
|
||||
width: 180,
|
||||
width: 160,
|
||||
tooltip: '用户将内容保存到收藏夹的次数，代表内容被认可为“值得保留”。',
|
||||
align: 'right',
|
||||
},
|
||||
{
|
||||
title: '评论数',
|
||||
dataIndex: 'comment_number',
|
||||
width: 180,
|
||||
width: 160,
|
||||
tooltip: '内容下方用户留言的总数，体现用户参与度与讨论热度。',
|
||||
align: 'right',
|
||||
},
|
||||
{
|
||||
title: '分享量',
|
||||
dataIndex: 'share_number',
|
||||
width: 180,
|
||||
width: 160,
|
||||
tooltip: '内容被转发或分享至其他平台或私信的次数，代表外扩传播意愿。',
|
||||
align: 'right',
|
||||
},
|
||||
|
||||
@ -3,121 +3,115 @@
|
||||
* @Date: 2025-06-28 12:58:09
|
||||
-->
|
||||
<template>
|
||||
<div class="note-table-wrap bg-#fff rounded-8px px-24px flex-1 flex flex-col">
|
||||
<div class="note-table-wrap bg-#fff rounded-8px px-24px flex-1 flex flex-col">
|
||||
<div class="title-row">
|
||||
<div class="flex items-center">
|
||||
<span class="cts !text-18px !lh-26px mr-4px title">笔记详情</span>
|
||||
<a-tooltip content="展示笔记层级的详细数据，如曝光、互动等，是内容精细分析入口。">
|
||||
<Tooltip title="展示笔记层级的详细数据，如曝光、互动等，是内容精细分析入口。">
|
||||
<icon-question-circle size="16" class="color-#737478" />
|
||||
</a-tooltip>
|
||||
</Tooltip>
|
||||
</div>
|
||||
</div>
|
||||
<div class="filter-row flex my-16px">
|
||||
<div class="filter-row-item flex items-center">
|
||||
<span class="label">笔记标题</span>
|
||||
<a-space size="medium" class="w-240px">
|
||||
<a-input v-model="query.title" placeholder="请搜索..." size="medium" allow-clear @change="handleSearch">
|
||||
<template #prefix>
|
||||
<icon-search />
|
||||
</template>
|
||||
</a-input>
|
||||
</a-space>
|
||||
<Input v-model:value="query.title" class="!w-240px" placeholder="请搜索..." allowClear @change="handleSearch">
|
||||
<template #prefix>
|
||||
<icon-search />
|
||||
</template>
|
||||
</Input>
|
||||
</div>
|
||||
<div class="filter-row-item flex items-center">
|
||||
<span class="label">发布日期</span>
|
||||
<a-space size="medium" class="w-260px">
|
||||
<a-range-picker
|
||||
v-model="published_at"
|
||||
size="medium"
|
||||
allow-clear
|
||||
format="YYYY-MM-DD"
|
||||
class="w-100%"
|
||||
@change="onDateChange"
|
||||
/>
|
||||
</a-space>
|
||||
<DatePicker.RangePicker
|
||||
v-model:value="published_at"
|
||||
size="medium"
|
||||
class="!w-260px"
|
||||
allow-clear
|
||||
format="YYYY-MM-DD"
|
||||
@change="onDateChange"
|
||||
/>
|
||||
</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"
|
||||
row-key="id"
|
||||
<Table
|
||||
:dataSource="dataSource"
|
||||
rowKey="id"
|
||||
:pagination="false"
|
||||
:scroll="{ x: '100%' }"
|
||||
class="w-100%"
|
||||
bordered
|
||||
column-resizable
|
||||
:showSorterTooltip="false"
|
||||
>
|
||||
<template #empty>
|
||||
<Table.Column
|
||||
v-for="column in TABLE_COLUMNS"
|
||||
:key="column.dataIndex"
|
||||
:dataIndex="column.dataIndex"
|
||||
:fixed="column.fixed"
|
||||
:width="column.width"
|
||||
:minWidth="column.minWidth"
|
||||
:sortable="column.sortable"
|
||||
:align="column.align"
|
||||
:ellipsis="true"
|
||||
>
|
||||
<template #title>
|
||||
<span class="cts mr-4px">{{ column.title }}</span>
|
||||
<Tooltip v-if="column.tooltip" :title="column.tooltip" placement="top">
|
||||
<icon-question-circle class="tooltip-icon color-#737478" size="16" />
|
||||
</Tooltip>
|
||||
</template>
|
||||
<template #customRender="{ record }">
|
||||
<template v-if="column.dataIndex === 'published_at'">
|
||||
{{ exactFormatTime(record.published_at) }}
|
||||
</template>
|
||||
<template v-else-if="column.dataIndex === 'exposure_number'">
|
||||
{{ formatNumberShow({ value: record.view_number * 10, showExactValue: true }) }}
|
||||
</template>
|
||||
<template v-else-if="column.dataIndex === 'title'">
|
||||
<TextoverTips :context="record.title" />
|
||||
</template>
|
||||
<template v-else>
|
||||
{{ formatTableField(column, record, true) }}
|
||||
</template>
|
||||
</template>
|
||||
</Table.Column>
|
||||
<template #emptyText>
|
||||
<NoData />
|
||||
</template>
|
||||
<template #columns>
|
||||
<a-table-column
|
||||
v-for="column in TABLE_COLUMNS"
|
||||
:key="column.dataIndex"
|
||||
:data-index="column.dataIndex"
|
||||
:fixed="column.fixed"
|
||||
:width="column.width"
|
||||
:min-width="column.minWidth"
|
||||
:sortable="column.sortable"
|
||||
:align="column.align"
|
||||
ellipsis
|
||||
tooltip
|
||||
>
|
||||
<template #title>
|
||||
<div class="flex items-center">
|
||||
<span class="cts mr-4px">{{ column.title }}</span>
|
||||
<a-tooltip v-if="column.tooltip" :content="column.tooltip" position="top">
|
||||
<icon-question-circle class="tooltip-icon color-#737478" size="16" />
|
||||
</a-tooltip>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<template #cell="{ record }">
|
||||
<template v-if="column.dataIndex === 'published_at'">
|
||||
{{ exactFormatTime(record.published_at) }}
|
||||
</template>
|
||||
<template v-else-if="column.dataIndex === 'exposure_number'">
|
||||
{{ formatNumberShow({ value: record.view_number * 10, showExactValue: true }) }}
|
||||
</template>
|
||||
<template v-else>
|
||||
{{ formatTableField(column, record, true) }}
|
||||
</template>
|
||||
</template>
|
||||
</a-table-column>
|
||||
</template>
|
||||
</a-table>
|
||||
</Table>
|
||||
<div v-if="pageInfo.total > 0" class="pagination-row mb-24px">
|
||||
<a-pagination
|
||||
<Pagination
|
||||
:total="pageInfo.total"
|
||||
size="mini"
|
||||
show-total
|
||||
show-jumper
|
||||
show-page-size
|
||||
size="small"
|
||||
:showTotal="(total, range) => `共 ${total} 条`"
|
||||
showSizeChanger
|
||||
showQuickJumper
|
||||
:current="pageInfo.page"
|
||||
:page-size="pageInfo.page_size"
|
||||
:pageSize="pageInfo.page_size"
|
||||
@change="onPageChange"
|
||||
@page-size-change="onPageSizeChange"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { Button, Input, Tooltip, Table, Pagination, DatePicker } 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';
|
||||
import { getMediaAccountBoardWorks } from '@/api/all/propertyMarketing';
|
||||
import TextoverTips from '@/components/text-over-tips/index.vue';
|
||||
|
||||
const route = useRoute();
|
||||
const id = route.params.id;
|
||||
@ -148,8 +142,9 @@ const onDateChange = (value) => {
|
||||
handleSearch();
|
||||
};
|
||||
|
||||
const onPageChange = (current) => {
|
||||
const onPageChange = (current, pageSize) => {
|
||||
pageInfo.value.page = current;
|
||||
pageInfo.value.page_size = pageSize;
|
||||
getData();
|
||||
};
|
||||
|
||||
|
||||
@ -3,27 +3,27 @@
|
||||
* @Date: 2025-06-26 17:44:16
|
||||
-->
|
||||
<template>
|
||||
<a-modal
|
||||
v-model:visible="visible"
|
||||
<Modal
|
||||
v-model:open="visible"
|
||||
:title="isBatch ? '批量删除账号' : '删除账号'"
|
||||
width="400px"
|
||||
modal-class="account-manage-modal"
|
||||
@close="onClose"
|
||||
wrapClassName="account-manage-modal"
|
||||
@cancel="onClose"
|
||||
centered
|
||||
>
|
||||
<div class="flex items-center">
|
||||
<img :src="icon1" width="20" height="20" class="mr-12px" />
|
||||
<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 @click="onClose">取消</Button>
|
||||
<Button type="primary" class="ml-16px" danger @click="onDelete">确认删除</Button>
|
||||
</template>
|
||||
</a-modal>
|
||||
</Modal>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { Modal, Button, message } from 'ant-design-vue';
|
||||
import { ref } from 'vue';
|
||||
import { deleteMediaAccount, batchDeleteMediaAccounts } from '@/api/all/propertyMarketing';
|
||||
import icon1 from '@/assets/img/media-account/icon-warn-1.png';
|
||||
@ -56,7 +56,7 @@ async function onDelete() {
|
||||
const _params = isBatch.value ? { ids: accountId.value } : accountId.value;
|
||||
const { code } = await _fn(_params);
|
||||
if (code === 200) {
|
||||
AMessage.success('删除成功');
|
||||
message.success('删除成功');
|
||||
isBatch.value ? emits('batchUpdate') : emits('update');
|
||||
onClose();
|
||||
}
|
||||
|
||||
@ -3,7 +3,9 @@ import {
|
||||
EnumErrorStatus,
|
||||
getStatusInfo,
|
||||
} from '@/views/property-marketing/media-account/components/status-select/status-box';
|
||||
import { Dropdown, Doption, Button, Tooltip } from '@arco-design/web-vue';
|
||||
import { Dropdown, Menu } from 'ant-design-vue';
|
||||
const { Item: MenuItem } = Menu;
|
||||
import { Tooltip, Button } from 'ant-design-vue';
|
||||
export default defineComponent({
|
||||
name: 'FooterBtn',
|
||||
props: {
|
||||
@ -21,37 +23,37 @@ export default defineComponent({
|
||||
|
||||
const renderEditDoption = () => {
|
||||
return (
|
||||
<Doption class="color-#211F24" onClick={() => emit('openEdit', props.item)}>
|
||||
<MenuItem class="color-#211F24" onClick={() => emit('openEdit', props.item)}>
|
||||
编辑
|
||||
</Doption>
|
||||
</MenuItem>
|
||||
);
|
||||
};
|
||||
const renderReauthorizeDoption = (text = '重新授权') => {
|
||||
return (
|
||||
<Doption class="color-#211F24" onClick={() => emit('handleReauthorize', props.item)}>
|
||||
<MenuItem class="color-#211F24" onClick={() => emit('handleReauthorize', props.item)}>
|
||||
{text}
|
||||
</Doption>
|
||||
</MenuItem>
|
||||
);
|
||||
};
|
||||
const renderPauseDoption = () => {
|
||||
return (
|
||||
<Doption class="color-#211F24" onClick={() => emit('handlePause', props.item)}>
|
||||
<MenuItem class="color-#211F24" onClick={() => emit('handlePause', props.item)}>
|
||||
暂停同步
|
||||
</Doption>
|
||||
</MenuItem>
|
||||
);
|
||||
};
|
||||
const renderUpdateBtn = () => {
|
||||
return (
|
||||
<Button type="outline" size="mini" onClick={() => emit('syncData', props.item)}>
|
||||
<Button type="primary" ghost size="small" onClick={() => emit('syncData', props.item)}>
|
||||
更新数据
|
||||
</Button>
|
||||
);
|
||||
};
|
||||
const renderDeleteDoption = () => {
|
||||
return (
|
||||
<Doption class="color-#F64B31" onClick={() => emit('openDelete', props.item)}>
|
||||
<MenuItem class="color-#F64B31" onClick={() => emit('openDelete', props.item)}>
|
||||
删除
|
||||
</Doption>
|
||||
</MenuItem>
|
||||
);
|
||||
};
|
||||
const renderNormal = () => {
|
||||
@ -61,17 +63,17 @@ export default defineComponent({
|
||||
trigger="hover"
|
||||
v-slots={{
|
||||
default: () => (
|
||||
<Button type="outline" class="mr-8px" size="mini">
|
||||
<Button type="primary" ghost class="mr-8px" size="small">
|
||||
更多
|
||||
</Button>
|
||||
),
|
||||
content: () => (
|
||||
<>
|
||||
overlay: () => (
|
||||
<Menu>
|
||||
{renderEditDoption()}
|
||||
{renderReauthorizeDoption()}
|
||||
{renderPauseDoption()}
|
||||
{renderDeleteDoption()}
|
||||
</>
|
||||
</Menu>
|
||||
),
|
||||
}}
|
||||
></Dropdown>
|
||||
@ -86,19 +88,19 @@ export default defineComponent({
|
||||
trigger="hover"
|
||||
v-slots={{
|
||||
default: () => (
|
||||
<Button type="outline" class="mr-8px" size="mini">
|
||||
<Button type="primary" ghost class="mr-8px" size="small">
|
||||
更多
|
||||
</Button>
|
||||
),
|
||||
content: () => (
|
||||
<>
|
||||
overlay: () => (
|
||||
<Menu>
|
||||
{renderEditDoption()}
|
||||
{renderDeleteDoption()}
|
||||
</>
|
||||
</Menu>
|
||||
),
|
||||
}}
|
||||
></Dropdown>
|
||||
<Button type="outline" size="mini" onClick={() => emit('handleReauthorize', props.item)}>
|
||||
<Button type="primary" ghost size="small" onClick={() => emit('handleReauthorize', props.item)}>
|
||||
开启同步
|
||||
</Button>
|
||||
</>
|
||||
@ -115,15 +117,15 @@ export default defineComponent({
|
||||
return renderUpdateBtn();
|
||||
} else if ([EnumErrorStatus.REQUEST, EnumErrorStatus.FREEZE].includes(error_status)) {
|
||||
return (
|
||||
<Tooltip content={statusInfo.value.disabledBtnTooltip}>
|
||||
<Button type="outline" size="mini" disabled>
|
||||
<Tooltip title={statusInfo.value.disabledBtnTooltip}>
|
||||
<Button type="primary" ghost size="small" disabled>
|
||||
重新授权
|
||||
</Button>
|
||||
</Tooltip>
|
||||
);
|
||||
} else {
|
||||
return (
|
||||
<Button type="outline" size="mini" onClick={() => emit('handleReauthorize', props.item)}>
|
||||
<Button type="primary" ghost size="small" onClick={() => emit('handleReauthorize', props.item)}>
|
||||
{isUnauthorized ? '去授权' : '重新授权'}
|
||||
</Button>
|
||||
);
|
||||
@ -135,17 +137,17 @@ export default defineComponent({
|
||||
trigger="hover"
|
||||
v-slots={{
|
||||
default: () => (
|
||||
<Button type="outline" class="mr-8px" size="mini">
|
||||
<Button type="primary" ghost class="mr-8px" size="small">
|
||||
更多
|
||||
</Button>
|
||||
),
|
||||
content: () => (
|
||||
<>
|
||||
overlay: () => (
|
||||
<Menu>
|
||||
{renderEditDoption()}
|
||||
{isMissing && renderReauthorizeDoption()}
|
||||
{renderPauseDoption()}
|
||||
{renderDeleteDoption()}
|
||||
</>
|
||||
</Menu>
|
||||
),
|
||||
}}
|
||||
></Dropdown>
|
||||
|
||||
@ -4,24 +4,21 @@
|
||||
-->
|
||||
<template>
|
||||
<div class="card-container">
|
||||
<a-spin
|
||||
<Spin
|
||||
v-for="(item, index) in dataSource"
|
||||
:key="index"
|
||||
:loading="isSyncing(item)"
|
||||
:spinning="isSyncing(item)"
|
||||
tip="更新数据中..."
|
||||
class="card-item"
|
||||
:class="{
|
||||
checked: isSelected(item),
|
||||
}"
|
||||
:wrapperClassName="`card-item ${isSelected(item) ? 'checked' : ''}`"
|
||||
>
|
||||
<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)" class="relative top--2px"></Checkbox>
|
||||
<div class="ml-8px flex-1">
|
||||
<a-tooltip content="点击查看账号详情">
|
||||
<Tooltip title="点击查看账号详情">
|
||||
<p class="name cursor-pointer hover:!color-#6d4cfe" @click="goDetail(item)">{{ item.name || '-' }}</p>
|
||||
</a-tooltip>
|
||||
</Tooltip>
|
||||
<div class="field-row">
|
||||
<span class="label">状态</span>
|
||||
<StatusBox :item="item" />
|
||||
@ -74,10 +71,10 @@
|
||||
<span class="label">所属项目</span>
|
||||
<span v-if="!item.projects.length" class="cts">-</span>
|
||||
<div v-else class="flex items-center">
|
||||
<a-tooltip
|
||||
<Tooltip
|
||||
v-if="item.projects.length > 2"
|
||||
position="bottom"
|
||||
:content="
|
||||
placement="bottom"
|
||||
:title="
|
||||
item.projects
|
||||
.slice(2)
|
||||
.map((v) => v.name)
|
||||
@ -87,7 +84,7 @@
|
||||
<div class="tag-box">
|
||||
<span class="text">{{ `+${item.projects.length - 2}` }}</span>
|
||||
</div>
|
||||
</a-tooltip>
|
||||
</Tooltip>
|
||||
|
||||
<div v-for="(project, index) in item.projects.slice(0, 2)" :key="index" class="tag-box">
|
||||
<span class="text">{{ project.name }}</span>
|
||||
@ -102,10 +99,10 @@
|
||||
<span class="label">标签</span>
|
||||
<span v-if="!item.tags.length" class="cts">-</span>
|
||||
<div v-else class="flex items-center">
|
||||
<a-tooltip
|
||||
<Tooltip
|
||||
v-if="item.tags.length > 2"
|
||||
position="bottom"
|
||||
:content="
|
||||
placement="bottom"
|
||||
:title="
|
||||
item.tags
|
||||
.slice(2)
|
||||
.map((v) => v.name)
|
||||
@ -115,7 +112,7 @@
|
||||
<div class="tag-box">
|
||||
<span class="text">{{ `+${item.tags.length - 2}` }}</span>
|
||||
</div>
|
||||
</a-tooltip>
|
||||
</Tooltip>
|
||||
|
||||
<div v-for="(tag, index) in item.tags.slice(0, 2)" :key="index" class="tag-box">
|
||||
<span class="text">{{ tag.name }}</span>
|
||||
@ -139,13 +136,13 @@
|
||||
<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>
|
||||
</Spin>
|
||||
<PauseAccountPatchModal ref="pauseAccountPatchModalRef" @success="emits('update')" />
|
||||
<ReauthorizeAccountModal ref="reauthorizeAccountModalRef" @update="emits('update')" />
|
||||
<AuthorizedAccountModal ref="authorizedAccountModalRef" @update="emits('update')" />
|
||||
@ -154,6 +151,7 @@
|
||||
|
||||
<script setup>
|
||||
import { defineProps, ref, computed, inject } from 'vue';
|
||||
import { Checkbox, Button, Tooltip, Spin } from 'ant-design-vue';
|
||||
import { useRouter } from 'vue-router';
|
||||
import { deleteSyncStatus } from '@/api/all/propertyMarketing';
|
||||
import { exactFormatTime } from '@/utils/tools';
|
||||
|
||||
@ -3,19 +3,27 @@
|
||||
* @Date: 2025-06-27 14:41:20
|
||||
-->
|
||||
<template>
|
||||
<a-modal v-model:visible="visible" title="暂停同步" width="400px" modal-class="account-manage-modal" @close="onClose">
|
||||
<Modal
|
||||
v-model:open="visible"
|
||||
title="暂停同步"
|
||||
centered
|
||||
width="400px"
|
||||
wrapClassName="account-manage-modal"
|
||||
@cancel="onClose"
|
||||
>
|
||||
<div class="flex items-center">
|
||||
<img :src="icon1" width="20" height="20" class="mr-12px" />
|
||||
<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>
|
||||
</Modal>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { Button, Modal, message } 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';
|
||||
@ -44,7 +52,7 @@ const open = (record) => {
|
||||
async function onConfirm() {
|
||||
const { code } = await pausePatchAccount(accountId.value);
|
||||
if (code === 200) {
|
||||
AMessage.success('暂停成功');
|
||||
message.success('暂停成功');
|
||||
emits('success');
|
||||
onClose();
|
||||
}
|
||||
|
||||
@ -4,13 +4,17 @@
|
||||
// grid-template-rows: repeat(2, 1fr); /* 2行 */
|
||||
grid-template-columns: repeat(4, 1fr); /* 4列 */
|
||||
gap: 20px;
|
||||
:deep(.ant-spin-container) {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
}
|
||||
.card-item {
|
||||
border-radius: 8px;
|
||||
// border: 1px solid var(--BG-300, #e6e6e8);
|
||||
background: var(--BG-white, #fff);
|
||||
padding: 12px 16px 16px;
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
position: relative;
|
||||
.name {
|
||||
color: var(--Text-1, #211f24);
|
||||
|
||||
@ -5,20 +5,19 @@
|
||||
<script lang="jsx">
|
||||
import { ref, computed } from 'vue';
|
||||
import {
|
||||
Button,
|
||||
Modal,
|
||||
Form,
|
||||
FormItem,
|
||||
Input,
|
||||
RadioGroup,
|
||||
Radio,
|
||||
Upload,
|
||||
Button,
|
||||
Switch,
|
||||
Input,
|
||||
message,
|
||||
Tooltip,
|
||||
Notification,
|
||||
Message as AMessage,
|
||||
Textarea,
|
||||
} from '@arco-design/web-vue';
|
||||
Upload,
|
||||
Switch,
|
||||
} from 'ant-design-vue';
|
||||
const { TextArea } = Input;
|
||||
import AuthorizedAccountModal from '../authorized-account-modal';
|
||||
// import ImportPromptModal from '../import-prompt-modal';
|
||||
import StatusBox from '@/views/property-marketing/media-account/components/status-select/status-box.tsx';
|
||||
@ -97,15 +96,14 @@ export default {
|
||||
mobile: [
|
||||
{
|
||||
required: true,
|
||||
message: '请填写手机号',
|
||||
trigger: ['blur', 'change'],
|
||||
},
|
||||
{
|
||||
validator: (value, callback) => {
|
||||
validator: (_rule, value) => {
|
||||
if (!value) {
|
||||
return Promise.reject('请填写手机号');
|
||||
}
|
||||
if (!/^1[3-9]\d{9}$/.test(value)) {
|
||||
callback('手机号格式不正确');
|
||||
return Promise.reject('手机号格式不正确');
|
||||
} else {
|
||||
callback();
|
||||
return Promise.resolve();
|
||||
}
|
||||
},
|
||||
trigger: ['blur', 'change'],
|
||||
@ -145,10 +143,9 @@ export default {
|
||||
}
|
||||
};
|
||||
function handleUpload(option) {
|
||||
const { fileItem } = option;
|
||||
uploadStatus.value = UploadStatus.WAITING;
|
||||
file.value = fileItem.file;
|
||||
fileName.value = fileItem.name;
|
||||
file.value = option.file;
|
||||
fileName.value = option.file.name;
|
||||
}
|
||||
function removeFile() {
|
||||
fileName.value = '';
|
||||
@ -198,7 +195,7 @@ export default {
|
||||
const handleBatchImport = async () => {
|
||||
try {
|
||||
if (!file.value) {
|
||||
AMessage.warning('请上传要导入的文件');
|
||||
message.warning('请上传要导入的文件');
|
||||
return;
|
||||
}
|
||||
|
||||
@ -244,7 +241,7 @@ export default {
|
||||
const handleEditAccount = async () => {
|
||||
const { code } = await putMediaAccounts({ id: id.value, ...form.value });
|
||||
if (code === 200) {
|
||||
AMessage.success('修改成功');
|
||||
message.success('修改成功');
|
||||
emit('update');
|
||||
onClose();
|
||||
}
|
||||
@ -254,14 +251,12 @@ export default {
|
||||
handleBatchImport();
|
||||
return;
|
||||
}
|
||||
formRef.value.validate(async (errors) => {
|
||||
if (!errors) {
|
||||
if (isCustomCookie.value && !form.value.cookie) {
|
||||
AMessage.warning('请填写Cookie值');
|
||||
return;
|
||||
}
|
||||
isEdit.value ? handleEditAccount() : handleAddAccount();
|
||||
formRef.value.validate().then(async () => {
|
||||
if (isCustomCookie.value && !form.value.cookie) {
|
||||
message.warning('请填写Cookie值');
|
||||
return;
|
||||
}
|
||||
isEdit.value ? handleEditAccount() : handleAddAccount();
|
||||
});
|
||||
}
|
||||
const startAuthorized = (id, platform) => {
|
||||
@ -288,18 +283,27 @@ export default {
|
||||
|
||||
return () => (
|
||||
<Modal
|
||||
v-model:visible={visible.value}
|
||||
v-model:open={visible.value}
|
||||
title={isEdit.value ? '编辑账号' : '添加账号'}
|
||||
modal-class="add-account-modal"
|
||||
wrapClassName="add-account-modal"
|
||||
width="500px"
|
||||
mask-closable={false}
|
||||
onClose={onClose}
|
||||
centered
|
||||
maskClosable={false}
|
||||
onCancel={onClose}
|
||||
footer={null}
|
||||
>
|
||||
<Form ref={formRef} model={form.value} rules={rules} layout="horizontal" auto-label-width>
|
||||
<Form
|
||||
ref={formRef}
|
||||
model={form.value}
|
||||
rules={rules}
|
||||
layout="horizontal"
|
||||
labelAlign="right"
|
||||
labelCol={{ span: 4 }}
|
||||
wrapperCol={{ span: 20 }}
|
||||
>
|
||||
{!isEdit.value && (
|
||||
<FormItem label="上传方式" required>
|
||||
<RadioGroup v-model={uploadType.value}>
|
||||
<RadioGroup v-model:value={uploadType.value}>
|
||||
<Radio value="manual">手动添加账号</Radio>
|
||||
<Radio value="batch">批量导入账号</Radio>
|
||||
</RadioGroup>
|
||||
@ -312,19 +316,14 @@ export default {
|
||||
<Upload
|
||||
ref={uploadRef}
|
||||
action="/"
|
||||
draggable
|
||||
custom-request={handleUpload}
|
||||
customRequest={handleUpload}
|
||||
accept=".xlsx,.xls"
|
||||
show-file-list={false}
|
||||
showUploadList={false}
|
||||
>
|
||||
{{
|
||||
'upload-button': () => (
|
||||
<div class="upload-box">
|
||||
<span class="text mb-4px">点击或拖拽文件到此处上传</span>
|
||||
<span class="tip">支持 xls, xlsx格式</span>
|
||||
</div>
|
||||
),
|
||||
}}
|
||||
<div class="upload-box">
|
||||
<span class="text mb-4px">点击或拖拽文件到此处上传</span>
|
||||
<span class="tip">支持 xls, xlsx格式</span>
|
||||
</div>
|
||||
</Upload>
|
||||
) : (
|
||||
<div class="flex items-center">
|
||||
@ -356,22 +355,22 @@ export default {
|
||||
<>
|
||||
{isEdit.value && (
|
||||
<>
|
||||
<FormItem label="账号名称" field="name">
|
||||
<Input v-model={form.value.name} placeholder="请输入..." size="large" disabled />
|
||||
<FormItem label="账号名称" name="name">
|
||||
<Input v-model:value={form.value.name} placeholder="请输入..." size="large" disabled />
|
||||
</FormItem>
|
||||
<FormItem label="账号ID" field="account_id">
|
||||
<Input v-model={form.value.account_id} placeholder="请输入..." size="large" disabled />
|
||||
<FormItem label="账号ID" name="account_id">
|
||||
<Input v-model:value={form.value.account_id} placeholder="请输入..." size="large" disabled />
|
||||
</FormItem>
|
||||
<FormItem label="状态" field="status">
|
||||
<FormItem label="状态" name="status">
|
||||
<StatusBox item={form.value} />
|
||||
</FormItem>
|
||||
</>
|
||||
)}
|
||||
<FormItem label="手机号码" field="mobile" required>
|
||||
<Input v-model={form.value.mobile} placeholder="请输入..." size="large" />
|
||||
<FormItem label="手机号码" name="mobile" required>
|
||||
<Input v-model:value={form.value.mobile} placeholder="请输入..." size="large" />
|
||||
</FormItem>
|
||||
<FormItem label="运营人员" field="operator_name" required>
|
||||
<Input v-model={form.value.operator_name} placeholder="请输入..." class="w-240px" size="large" />
|
||||
<FormItem label="运营人员" name="operator_name" required>
|
||||
<Input v-model:value={form.value.operator_name} placeholder="请输入..." class="w-240px" size="large" />
|
||||
</FormItem>
|
||||
<FormItem label="运营平台" required={!isEdit.value}>
|
||||
{isEdit.value ? (
|
||||
@ -398,7 +397,7 @@ export default {
|
||||
height="24"
|
||||
/>
|
||||
) : (
|
||||
<RadioGroup v-model={form.value.platform}>
|
||||
<RadioGroup v-model:value={form.value.platform}>
|
||||
<Radio value={1}>小红书</Radio>
|
||||
<Radio value={0}>抖音</Radio>
|
||||
<Radio value={2}>B站</Radio>
|
||||
@ -409,8 +408,8 @@ export default {
|
||||
</RadioGroup>
|
||||
)}
|
||||
</FormItem>
|
||||
<FormItem label="号码持有人" field="holder_name">
|
||||
<Input v-model={form.value.holder_name} placeholder="请输入..." class="w-240px" size="large" />
|
||||
<FormItem label="号码持有人" name="holder_name">
|
||||
<Input v-model:value={form.value.holder_name} placeholder="请输入..." class="w-240px" size="large" />
|
||||
</FormItem>
|
||||
<FormItem label="所属项目">
|
||||
<CommonSelect
|
||||
@ -448,10 +447,10 @@ export default {
|
||||
}}
|
||||
>
|
||||
<Textarea
|
||||
v-model={form.value.end_work_link}
|
||||
v-model:value={form.value.end_work_link}
|
||||
placeholder="请输入笔记链接。若无需输入，填写 “无” "
|
||||
size="large"
|
||||
auto-size={{ minRows: 3, maxRows: 5 }}
|
||||
autoSize={{ minRows: 3, maxRows: 5 }}
|
||||
/>
|
||||
</FormItem>
|
||||
<FormItem
|
||||
@ -463,12 +462,12 @@ export default {
|
||||
<Switch v-model={isCustomCookie.value} size="large" />
|
||||
</FormItem>
|
||||
{isCustomCookie.value && (
|
||||
<FormItem label="" field="cookie">
|
||||
<Textarea
|
||||
v-model={form.value.cookie}
|
||||
<FormItem label=" " name="cookie">
|
||||
<TextArea
|
||||
v-model:value={form.value.cookie}
|
||||
placeholder="请输入..."
|
||||
size="large"
|
||||
auto-size={{ minRows: 5, maxRows: 8 }}
|
||||
autoSize={{ minRows: 5, maxRows: 8 }}
|
||||
/>
|
||||
</FormItem>
|
||||
)}
|
||||
|
||||
@ -4,7 +4,7 @@
|
||||
.w-240px {
|
||||
width: 240px !important;
|
||||
}
|
||||
.arco-modal-body {
|
||||
.ant-modal-body {
|
||||
.upload-block {
|
||||
width: 100%;
|
||||
.dt {
|
||||
@ -36,15 +36,8 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
.arco-upload-drag {
|
||||
height: 120px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
.arco-icon {
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
.ant-upload {
|
||||
width: 100%;
|
||||
}
|
||||
.upload-box {
|
||||
display: flex;
|
||||
@ -77,13 +70,13 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
.upload-dragger {
|
||||
border: 1px dashed #d9d9d9;
|
||||
padding: 24px 0;
|
||||
text-align: center;
|
||||
background: #fafafa;
|
||||
cursor: pointer;
|
||||
}
|
||||
// .upload-dragger {
|
||||
// border: 1px dashed #d9d9d9;
|
||||
// padding: 24px 0;
|
||||
// text-align: center;
|
||||
// background: #fafafa;
|
||||
// cursor: pointer;
|
||||
// }
|
||||
.upload-error {
|
||||
color: #f53f3f;
|
||||
margin-left: 8px;
|
||||
|
||||
@ -3,24 +3,25 @@
|
||||
* @Date: 2025-06-25 17:51:46
|
||||
-->
|
||||
<template>
|
||||
<a-modal
|
||||
v-model:visible="visible"
|
||||
<Modal
|
||||
v-model:open="visible"
|
||||
width="480px"
|
||||
title="授权账号"
|
||||
modal-class="authorized-account-modal"
|
||||
:mask-closable="false"
|
||||
:footer="modalState !== MODAL_STATE.LOADING"
|
||||
@close="close"
|
||||
centered
|
||||
wrapClassName="authorized-account-modal"
|
||||
:maskClosable="false"
|
||||
:footer="modalState === MODAL_STATE.LOADING ? null : footer"
|
||||
@cancel="close"
|
||||
>
|
||||
<div class="flex flex-col items-center">
|
||||
<!-- 加载中状态 -->
|
||||
<template v-if="modalState === MODAL_STATE.LOADING">
|
||||
<a-progress
|
||||
<Progress
|
||||
:percent="progress"
|
||||
color="#6D4CFE"
|
||||
trackColor="#E6E6E8"
|
||||
size="large"
|
||||
:stroke-width="4"
|
||||
strokeColor="#6D4CFE"
|
||||
trailColor="#E6E6E8"
|
||||
size="default"
|
||||
:strokeWidth="4"
|
||||
type="circle"
|
||||
/>
|
||||
<p class="s2 mt-16px">数据同步和初始化中，请勿关闭窗口。</p>
|
||||
@ -40,7 +41,7 @@
|
||||
<!-- 二维码加载中或失败 -->
|
||||
<template v-if="modalState === MODAL_STATE.QR_LOADING || modalState === MODAL_STATE.QR_FAILED">
|
||||
<div class="relative w-160px h-160px">
|
||||
<a-image :src="icon1" width="160" height="160" />
|
||||
<Image :src="icon1" :width="160" :height="160" />
|
||||
<div class="absolute top-0 left-0 z-2 w-full h-full flex flex-col items-center justify-center">
|
||||
<img
|
||||
v-if="modalState === MODAL_STATE.QR_FAILED"
|
||||
@ -62,7 +63,7 @@
|
||||
</div>
|
||||
</template>
|
||||
<!-- 正常二维码 -->
|
||||
<a-image v-else :src="qrCodeUrl" width="160" height="160" />
|
||||
<Image v-else :src="qrCodeUrl" :width="160" :height="160" />
|
||||
<!-- 二维码失效遮罩 -->
|
||||
<div v-if="modalState === MODAL_STATE.QR_EXPIRED" class="mask cursor-pointer" @click="handleRefreshQrCode">
|
||||
<icon-refresh size="24" class="mb-13px" />
|
||||
@ -76,24 +77,24 @@
|
||||
</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>
|
||||
</Modal>
|
||||
|
||||
<SyncDataModal ref="syncDataModalRef" />
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { defineExpose, ref, computed } from 'vue';
|
||||
import { Message as AMessage } from '@arco-design/web-vue';
|
||||
import { Button, Modal, message, Image, Progress } from 'ant-design-vue';
|
||||
import { getAuthorizedImage, getMediaAccountsAuthorizedStatus } from '@/api/all/propertyMarketing';
|
||||
import SyncDataModal from '../sync-data-modal';
|
||||
|
||||
@ -262,12 +263,12 @@ const getAuthorizedStatus = async () => {
|
||||
const startFakeProgressPolling = () => {
|
||||
clearFakeProgressTimer();
|
||||
progressTimer = setInterval(() => {
|
||||
if (modalState.value === MODAL_STATE.LOADING && progress.value < 0.99) {
|
||||
const step = Math.random() * 0.04 + 0.01;
|
||||
progress.value = Math.min(progress.value + step, 0.99);
|
||||
if (modalState.value === MODAL_STATE.LOADING && progress.value < 99) {
|
||||
const step = Math.random() * 4 + 1;
|
||||
progress.value = Math.min(progress.value + step, 99);
|
||||
progress.value = Number(progress.value.toFixed(2));
|
||||
} else if (modalState.value === MODAL_STATE.LOADING && progress.value >= 0.99) {
|
||||
progress.value = 0.99; // 卡在99%
|
||||
} else if (modalState.value === MODAL_STATE.LOADING && progress.value >= 99) {
|
||||
progress.value = 99; // 卡在99%
|
||||
} else {
|
||||
clearFakeProgressTimer();
|
||||
clearStatusPollingTimer();
|
||||
@ -305,7 +306,7 @@ const handleOk = () => {
|
||||
|
||||
// 二维码还在加载中
|
||||
if (modalState.value === MODAL_STATE.QR_LOADING) {
|
||||
AMessage.warning('二维码生成中，请稍等');
|
||||
message.warning('二维码生成中，请稍等');
|
||||
return;
|
||||
}
|
||||
|
||||
|
||||
@ -3,73 +3,87 @@
|
||||
* @Date: 2025-06-27 09:35:49
|
||||
-->
|
||||
<template>
|
||||
<a-modal
|
||||
v-model:visible="visible"
|
||||
<Modal
|
||||
v-model:open="visible"
|
||||
title="批量分组"
|
||||
modal-class="batch-group-modal"
|
||||
wrapClassName="batch-group-modal"
|
||||
width="800px"
|
||||
:mask-closable="false"
|
||||
:maskClosable="false"
|
||||
centered
|
||||
>
|
||||
<div class="mb-16px t1">
|
||||
{{ `已选${accountGroupList.length}个账号` }}
|
||||
</div>
|
||||
<a-form ref="formRef" :model="form" layout="horizontal" auto-label-width>
|
||||
<a-form-item label="编辑方式" required>
|
||||
<a-radio-group v-model="editType">
|
||||
<a-radio value="all">
|
||||
<Form ref="formRef" :model="form" layout="horizontal">
|
||||
<FormItem label="编辑方式" required>
|
||||
<Radio.Group v-model:value="editType">
|
||||
<Radio value="all">
|
||||
<div class="flex items-center">
|
||||
<span>统一编辑</span>
|
||||
<a-tooltip content="原分组将被清除，统一加入新分组。">
|
||||
<Tooltip title="原分组将被清除，统一加入新分组。">
|
||||
<img :src="icon1" alt="icon" class="ml-2px" width="14" height="14" />
|
||||
</a-tooltip>
|
||||
</Tooltip>
|
||||
</div>
|
||||
</a-radio>
|
||||
<a-radio value="each">分别编辑</a-radio>
|
||||
</a-radio-group>
|
||||
</a-form-item>
|
||||
<a-form-item label="选择分组" required>
|
||||
</Radio>
|
||||
<Radio value="each">分别编辑</Radio>
|
||||
</Radio.Group>
|
||||
</FormItem>
|
||||
<FormItem label="选择分组" required>
|
||||
<template v-if="editType === 'all'">
|
||||
<div class="flex items-center w-100%">
|
||||
<CommonSelect v-model="form.group_id" :options="groupOptions" :multiple="false" class="flex-1" />
|
||||
</div>
|
||||
</template>
|
||||
</a-form-item>
|
||||
</FormItem>
|
||||
|
||||
<!-- 分别编辑 -->
|
||||
<template v-if="editType === 'each'">
|
||||
<a-table :data="accountGroupList" :pagination="false" row-key="id" class="w-100%" column-resizable>
|
||||
<template #columns>
|
||||
<a-table-column title="账号名称" data-index="name" width="200">
|
||||
<template #cell="{ record }">
|
||||
<span>{{ record.name || '-' }}</span>
|
||||
</template>
|
||||
</a-table-column>
|
||||
<a-table-column title="选择分组" data-index="group_id">
|
||||
<template #cell="{ record }">
|
||||
<div class="flex items-center w-100%">
|
||||
<CommonSelect v-model="record.group_id" :options="groupOptions" :multiple="false" />
|
||||
</div>
|
||||
</template>
|
||||
</a-table-column>
|
||||
<Table
|
||||
:dataSource="accountGroupList"
|
||||
:columns="columns"
|
||||
:pagination="false"
|
||||
rowKey="id"
|
||||
bordered
|
||||
:showSorterTooltip="false"
|
||||
@resizeColumn="handleResizeColumn"
|
||||
>
|
||||
<template #bodyCell="{ column, record }">
|
||||
<template v-if="column.dataIndex === 'name'">
|
||||
<span>{{ record.name || '-' }}</span>
|
||||
</template>
|
||||
<template v-else-if="column.dataIndex === 'group_id'">
|
||||
<div class="flex items-center w-100%">
|
||||
<CommonSelect v-model="record.group_id" :options="groupOptions" :multiple="false" class="w-full" />
|
||||
</div>
|
||||
</template>
|
||||
</template>
|
||||
</a-table>
|
||||
</Table>
|
||||
</template>
|
||||
</a-form>
|
||||
</Form>
|
||||
<template #footer>
|
||||
<a-button size="large" @click="onClose">取消</a-button>
|
||||
<a-button type="primary" size="large" @click="onSubmit">确定</a-button>
|
||||
<Button @click="onClose">取消</Button>
|
||||
<Button type="primary" @click="onSubmit">确定</Button>
|
||||
</template>
|
||||
</a-modal>
|
||||
</Modal>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, reactive } from 'vue';
|
||||
import { ref, reactive, computed } from 'vue';
|
||||
import { Modal, Form, FormItem, Radio, Tooltip, Button, Table, message } from 'ant-design-vue';
|
||||
import { fetchAccountGroups, batchPutGroup } from '@/api/all/propertyMarketing';
|
||||
import CommonSelect from '@/components/common-select';
|
||||
|
||||
import icon1 from '@/assets/img/icon-question.png';
|
||||
|
||||
// [{id, name, group_id: null}]
|
||||
const columns = ref([
|
||||
{ title: '账号名称', dataIndex: 'name', width: 100, minWidth: 100, resizable: true },
|
||||
{ title: '选择分组', dataIndex: 'group_id' },
|
||||
]);
|
||||
|
||||
const handleResizeColumn = (w, col) => {
|
||||
const idx = columns.value.findIndex((c) => c.dataIndex === col.dataIndex);
|
||||
if (idx !== -1) columns.value[idx].width = w;
|
||||
};
|
||||
|
||||
const emits = defineEmits(['update']);
|
||||
const visible = ref(false);
|
||||
@ -102,18 +116,17 @@ const getTags = async () => {
|
||||
|
||||
const onClose = () => {
|
||||
visible.value = false;
|
||||
form.group_id = null;
|
||||
};
|
||||
|
||||
const onSubmit = async () => {
|
||||
if (isAllEdit.value) {
|
||||
if (form.group_id === null) {
|
||||
AMessage.error('请选择分组');
|
||||
message.error('请选择分组');
|
||||
return;
|
||||
}
|
||||
} else {
|
||||
if (accountGroupList.value.some((item) => item.group_id === null)) {
|
||||
AMessage.error('请选择分组');
|
||||
message.error('请选择分组');
|
||||
return;
|
||||
}
|
||||
}
|
||||
@ -126,7 +139,7 @@ const onSubmit = async () => {
|
||||
// 这里处理批量标签的提交逻辑
|
||||
const { code } = await batchPutGroup({ media_accounts });
|
||||
if (code === 200) {
|
||||
AMessage.success('设置分组成功');
|
||||
message.success('设置分组成功');
|
||||
emits('update');
|
||||
visible.value = false;
|
||||
}
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
|
||||
.batch-group-modal {
|
||||
border-radius: 8px;
|
||||
.arco-modal-body {
|
||||
.ant-modal-body {
|
||||
// min-height: 200px;
|
||||
.t1 {
|
||||
color: var(--Text-3, #737478);
|
||||
|
||||
@ -3,87 +3,85 @@
|
||||
* @Date: 2025-06-27 09:35:49
|
||||
-->
|
||||
<template>
|
||||
<a-modal
|
||||
v-model:visible="visible"
|
||||
<Modal
|
||||
v-model:open="visible"
|
||||
title="批量标签"
|
||||
modal-class="batch-tag-modal"
|
||||
wrapClassName="batch-tag-modal"
|
||||
width="800px"
|
||||
:mask-closable="false"
|
||||
centered
|
||||
:maskClosable="false"
|
||||
>
|
||||
<div class="mb-16px t1">
|
||||
{{ `已选${accountTagList.length}个账号` }}
|
||||
</div>
|
||||
<a-form ref="formRef" :model="form" layout="horizontal" auto-label-width>
|
||||
<a-form-item label="编辑方式" required>
|
||||
<a-radio-group v-model="editType">
|
||||
<a-radio value="all">
|
||||
<Form ref="formRef" :model="form" layout="horizontal" auto-label-width>
|
||||
<FormItem label="编辑方式" required>
|
||||
<RadioGroup v-model:value="editType">
|
||||
<Radio value="all">
|
||||
<div class="flex items-center">
|
||||
<span>统一编辑</span>
|
||||
<a-tooltip content="原标签将被清除，统一为新标签。">
|
||||
<Tooltip title="原标签将被清除，统一为新标签。">
|
||||
<img :src="icon1" alt="icon" class="ml-2px" width="14" height="14" />
|
||||
</a-tooltip>
|
||||
</Tooltip>
|
||||
</div>
|
||||
</a-radio>
|
||||
<a-radio value="each">分别编辑</a-radio>
|
||||
</a-radio-group>
|
||||
</a-form-item>
|
||||
<a-form-item label="选择标签" required>
|
||||
</Radio>
|
||||
<Radio value="each">分别编辑</Radio>
|
||||
</RadioGroup>
|
||||
</FormItem>
|
||||
<FormItem label="选择标签" required>
|
||||
<template v-if="editType === 'all'">
|
||||
<div class="flex items-center w-100%">
|
||||
<a-select
|
||||
v-model="form.tags"
|
||||
<Select
|
||||
v-model:value="form.tags"
|
||||
:options="tagOptions"
|
||||
multiple
|
||||
allow-create
|
||||
mode="tags"
|
||||
placeholder="请输入标签，回车键可直接添加..."
|
||||
:limit="5"
|
||||
:max-tag-count="5"
|
||||
class="flex-1"
|
||||
@create="handleCreateTag"
|
||||
@search="handleCreateTag"
|
||||
/>
|
||||
<span class="ml-12px">{{ `${form.tags.length}/5` }}</span>
|
||||
</div>
|
||||
</template>
|
||||
</a-form-item>
|
||||
</FormItem>
|
||||
|
||||
<!-- 分别编辑 -->
|
||||
<template v-if="editType === 'each'">
|
||||
<a-table :data="accountTagList" :pagination="false" row-key="id" class="w-100%" column-resizable>
|
||||
<template #columns>
|
||||
<a-table-column title="账号名称" data-index="name" width="200">
|
||||
<template #cell="{ record }">
|
||||
<span>{{ record.name || '-' }}</span>
|
||||
</template>
|
||||
</a-table-column>
|
||||
<a-table-column title="选择标签" data-index="tags">
|
||||
<template #cell="{ record, rowIndex }">
|
||||
<div class="flex items-center w-100%">
|
||||
<a-select
|
||||
v-model="record.tags"
|
||||
:options="tagOptions"
|
||||
multiple
|
||||
allow-create
|
||||
placeholder="请输入标签，回车键可直接添加..."
|
||||
:limit="5"
|
||||
style="width: 90%"
|
||||
@create="(val) => handleCreateTag(val, rowIndex)"
|
||||
/>
|
||||
<span class="tag-count ml-8px">{{ record.tags.length }}/5</span>
|
||||
</div>
|
||||
</template>
|
||||
</a-table-column>
|
||||
</template>
|
||||
</a-table>
|
||||
<Table :dataSource="accountTagList" :pagination="false" rowKey="id" class="w-100%">
|
||||
<Table.Column title="账号名称" dataIndex="name" :width="200">
|
||||
<template #customRender="{ record }">
|
||||
<span>{{ record.name || '-' }}</span>
|
||||
</template>
|
||||
</Table.Column>
|
||||
<Table.Column title="选择标签" dataIndex="tags">
|
||||
<template #customRender="{ record, index }">
|
||||
<div class="flex items-center w-100%">
|
||||
<Select
|
||||
v-model:value="record.tags"
|
||||
:options="tagOptions"
|
||||
mode="tags"
|
||||
placeholder="请输入标签，回车键可直接添加..."
|
||||
:max-tag-count="5"
|
||||
class="!w-full"
|
||||
@search="(val) => handleCreateTag(val, index)"
|
||||
/>
|
||||
<span class="tag-count ml-8px">{{ record.tags.length }}/5</span>
|
||||
</div>
|
||||
</template>
|
||||
</Table.Column>
|
||||
</Table>
|
||||
</template>
|
||||
</a-form>
|
||||
</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>
|
||||
</Modal>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, reactive } from 'vue';
|
||||
import { Button, Form, FormItem, Modal, Radio, RadioGroup, Select, Table, Tooltip, message } from 'ant-design-vue';
|
||||
import { fetchAccountTags, batchPutTag } from '@/api/all/propertyMarketing';
|
||||
|
||||
import icon1 from '@/assets/img/icon-question.png';
|
||||
@ -143,12 +141,12 @@ const onClose = () => {
|
||||
const onSubmit = async () => {
|
||||
if (isAllEdit.value) {
|
||||
if (form.tags.length === 0) {
|
||||
AMessage.error('请输入标签');
|
||||
message.error('请输入标签');
|
||||
return;
|
||||
}
|
||||
} else {
|
||||
if (accountTagList.value.some((item) => item.tags.length === 0)) {
|
||||
AMessage.error('请输入标签');
|
||||
message.error('请输入标签');
|
||||
return;
|
||||
}
|
||||
}
|
||||
@ -160,7 +158,7 @@ const onSubmit = async () => {
|
||||
console.log({ media_accounts });
|
||||
const { code } = await batchPutTag({ media_accounts });
|
||||
if (code === 200) {
|
||||
AMessage.success('设置标签成功');
|
||||
message.success('设置标签成功');
|
||||
emits('update');
|
||||
visible.value = false;
|
||||
}
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
|
||||
.batch-tag-modal {
|
||||
border-radius: 8px;
|
||||
.arco-modal-body {
|
||||
.ant-modal-body {
|
||||
// min-height: 200px;
|
||||
.t1 {
|
||||
color: var(--Text-3, #737478);
|
||||
|
||||
@ -8,86 +8,73 @@
|
||||
<div class="filter-row flex">
|
||||
<div class="filter-row-item">
|
||||
<span class="label">账号名称/ID/手机号</span>
|
||||
<a-space size="medium">
|
||||
<a-input
|
||||
v-model="query.search"
|
||||
class="w-240px"
|
||||
placeholder="请搜索..."
|
||||
size="medium"
|
||||
allow-clear
|
||||
@change="handleSearch"
|
||||
>
|
||||
<template #prefix>
|
||||
<icon-search />
|
||||
</template>
|
||||
</a-input>
|
||||
</a-space>
|
||||
<Input v-model:value="query.search" class="w-240px" placeholder="请搜索..." allowClear @change="handleSearch">
|
||||
<template #prefix>
|
||||
<icon-search />
|
||||
</template>
|
||||
</Input>
|
||||
</div>
|
||||
<div class="filter-row-item">
|
||||
<span class="label">状态</span>
|
||||
<a-space class="w-180px">
|
||||
<StatusSelect v-model="query.status" @change="handleSearch" />
|
||||
</a-space>
|
||||
<StatusSelect v-model="query.status" @change="handleSearch" class="w-180px" />
|
||||
</div>
|
||||
<div class="filter-row-item">
|
||||
<span class="label">平台</span>
|
||||
<a-space class="w-160px">
|
||||
<a-select v-model="query.platform" size="medium" placeholder="全部" allow-clear @change="handleSearch">
|
||||
<a-option
|
||||
v-for="(item, index) in MEDIA_ACCOUNT_PLATFORMS"
|
||||
:key="index"
|
||||
:value="item.value"
|
||||
:label="item.label"
|
||||
>{{ item.label }}</a-option
|
||||
>
|
||||
</a-select>
|
||||
</a-space>
|
||||
<Select
|
||||
v-model:value="query.platform"
|
||||
class="w-160px"
|
||||
size="middle"
|
||||
placeholder="全部"
|
||||
allowClear
|
||||
@change="handleSearch"
|
||||
>
|
||||
<Option
|
||||
v-for="(item, index) in MEDIA_ACCOUNT_PLATFORMS"
|
||||
:key="index"
|
||||
:value="item.value"
|
||||
:label="item.label"
|
||||
>{{ item.label }}</Option
|
||||
>
|
||||
</Select>
|
||||
</div>
|
||||
<div class="filter-row-item">
|
||||
<span class="label">运营人员</span>
|
||||
<a-space class="w-160px">
|
||||
<CommonSelect
|
||||
v-model="query.operator_id"
|
||||
allowSearch
|
||||
:multiple="false"
|
||||
:options="operators"
|
||||
@change="handleSearch"
|
||||
/>
|
||||
</a-space>
|
||||
<CommonSelect
|
||||
class="w-160px"
|
||||
v-model="query.operator_id"
|
||||
allowSearch
|
||||
:multiple="false"
|
||||
:options="operators"
|
||||
@change="handleSearch"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="filter-row">
|
||||
<div class="filter-row-item">
|
||||
<span class="label">分组</span>
|
||||
<a-space class="w-200px">
|
||||
<CommonSelect v-model="query.group_ids" multiple :options="groups" @change="handleSearch" />
|
||||
</a-space>
|
||||
<CommonSelect v-model="query.group_ids" multiple :options="groups" @change="handleSearch" class="!w-200px" />
|
||||
</div>
|
||||
<div class="filter-row-item">
|
||||
<span class="label">所属项目</span>
|
||||
<a-space class="w-200px">
|
||||
<CommonSelect v-model="query.project_ids" :options="projects" @change="handleSearch" />
|
||||
</a-space>
|
||||
<CommonSelect v-model="query.project_ids" :options="projects" @change="handleSearch" class="!w-200px" />
|
||||
</div>
|
||||
<div class="filter-row-item">
|
||||
<span class="label">标签</span>
|
||||
<a-space class="w-320px">
|
||||
<CommonSelect v-model="query.tag_ids" :options="tags" @change="handleSearch" />
|
||||
</a-space>
|
||||
<CommonSelect v-model="query.tag_ids" :options="tags" @change="handleSearch" class="!w-320px" />
|
||||
</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 +82,8 @@
|
||||
|
||||
<script setup>
|
||||
import { reactive, defineEmits, defineProps } from 'vue';
|
||||
import { Button, Input, Select } from 'ant-design-vue';
|
||||
const { Option } = Select;
|
||||
import {
|
||||
fetchAccountTags,
|
||||
getProjectList,
|
||||
@ -114,7 +103,7 @@ const props = defineProps({
|
||||
},
|
||||
});
|
||||
|
||||
const emits = defineEmits('onSearch', 'onReset', 'update:query');
|
||||
const emits = defineEmits(['onSearch', 'onReset', 'update:query']);
|
||||
|
||||
const tags = ref([]);
|
||||
const groups = ref([]);
|
||||
|
||||
@ -3,27 +3,29 @@
|
||||
* @Date: 2025-06-26 11:44:17
|
||||
-->
|
||||
<template>
|
||||
<a-modal
|
||||
v-model:visible="visible"
|
||||
<Modal
|
||||
v-model:open="visible"
|
||||
:title="isEdit ? '编辑分组' : '添加新分组'"
|
||||
modal-class="account-manage-modal"
|
||||
wrapClassName="group-manage-modal"
|
||||
width="400px"
|
||||
@close="onClose"
|
||||
centered
|
||||
@cancel="onClose"
|
||||
>
|
||||
<a-form ref="formRef" :model="form" :rules="rules" layout="horizontal" auto-label-width>
|
||||
<a-form-item :label="isEdit ? '分组名称' : '新分组名称'" field="name" required>
|
||||
<a-input v-model="form.name" placeholder="请输入…" />
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
<Form ref="formRef" :model="form" :rules="rules" layout="horizontal" auto-label-width>
|
||||
<FormItem :label="isEdit ? '分组名称' : '新分组名称'" name="name" required>
|
||||
<Input v-model:value="form.name" placeholder="请输入…" />
|
||||
</FormItem>
|
||||
</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>
|
||||
</Modal>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, watch, nextTick } from 'vue';
|
||||
import { Button, Modal, Form, FormItem, Input, message } from 'ant-design-vue';
|
||||
import { postAccountGroups, putGroup } from '@/api/all/propertyMarketing';
|
||||
|
||||
const emits = defineEmits(['success', 'close']);
|
||||
@ -61,16 +63,14 @@ const open = (record = {}) => {
|
||||
};
|
||||
|
||||
async function onSubmit() {
|
||||
formRef.value.validate(async (errors) => {
|
||||
if (!errors) {
|
||||
const _fn = isEdit.value ? putGroup : postAccountGroups;
|
||||
const _params = isEdit.value ? { id: groupId.value, ...form.value } : form.value;
|
||||
const { code } = await _fn(_params);
|
||||
if (code === 200) {
|
||||
AMessage.success(isEdit.value ? '编辑成功' : '添加成功');
|
||||
emits('success');
|
||||
onClose();
|
||||
}
|
||||
formRef.value.validate().then(async () => {
|
||||
const _fn = isEdit.value ? putGroup : postAccountGroups;
|
||||
const _params = isEdit.value ? { id: groupId.value, ...form.value } : form.value;
|
||||
const { code } = await _fn(_params);
|
||||
if (code === 200) {
|
||||
message.success(isEdit.value ? '编辑成功' : '添加成功');
|
||||
emits('success');
|
||||
onClose();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
@ -3,22 +3,28 @@
|
||||
* @Date: 2025-06-26 11:45:05
|
||||
-->
|
||||
<template>
|
||||
<a-modal v-model:visible="visible" title="删除分组" width="400px" modal-class="account-manage-modal" @close="onClose">
|
||||
<Modal
|
||||
v-model:open="visible"
|
||||
title="删除分组"
|
||||
centered
|
||||
width="400px"
|
||||
wrapClassName="account-manage-modal"
|
||||
@cancel="onClose"
|
||||
>
|
||||
<div class="flex items-center mb-24px">
|
||||
<img :src="icon1" width="20" height="20" class="mr-12px" />
|
||||
<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>
|
||||
</Modal>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from 'vue';
|
||||
import { Button, Modal, message } from 'ant-design-vue';
|
||||
import { deleteGroup } from '@/api/all/propertyMarketing';
|
||||
import icon1 from '@/assets/img/media-account/icon-warn-1.png';
|
||||
|
||||
@ -46,7 +52,7 @@ const open = (record) => {
|
||||
async function onDelete() {
|
||||
const { code } = await deleteGroup(groupId.value);
|
||||
if (code === 200) {
|
||||
AMessage.success('删除成功');
|
||||
message.success('删除成功');
|
||||
emits('success');
|
||||
onClose();
|
||||
}
|
||||
|
||||
@ -3,84 +3,103 @@
|
||||
* @Date: 2025-06-25 17:51:46
|
||||
-->
|
||||
<template>
|
||||
<a-modal
|
||||
v-model:visible="visible"
|
||||
<Modal
|
||||
v-model:open="visible"
|
||||
width="900px"
|
||||
modal-class="account-manage-modal"
|
||||
:footer="false"
|
||||
wrapClassName="account-manage-modal"
|
||||
:footer="null"
|
||||
centered
|
||||
title="分组管理"
|
||||
:mask-closable="false"
|
||||
@close="close"
|
||||
:maskClosable="false"
|
||||
@cancel="close"
|
||||
>
|
||||
<div class="flex items-center justify-between mb-16px">
|
||||
<div class="filter-row-item flex items-center">
|
||||
<span class="s1 !color-#211F24 mr-12px">分组名称</span>
|
||||
<a-space size="medium" class="w-240px">
|
||||
<a-input v-model="query.name" placeholder="请搜索..." size="medium" allow-clear @change="reload">
|
||||
<Space size="medium" class="w-240px">
|
||||
<Input v-model:value="query.name" placeholder="请搜索..." size="middle" allowClear @change="reload">
|
||||
<template #prefix>
|
||||
<icon-search />
|
||||
</template>
|
||||
</a-input>
|
||||
</a-space>
|
||||
</Input>
|
||||
</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
|
||||
column-resizable
|
||||
:columns="columns"
|
||||
:data="list"
|
||||
row-key="id"
|
||||
<Table
|
||||
:dataSource="list"
|
||||
rowKey="id"
|
||||
:loading="loading"
|
||||
:scroll="{ y: 500 }"
|
||||
class="h-500px"
|
||||
:pagination="false"
|
||||
@sorter-change="handleSorterChange"
|
||||
:showSorterTooltip="false"
|
||||
@change="
|
||||
(pagination, filters, sorter) => {
|
||||
if (sorter && sorter.columnKey) {
|
||||
handleSorterChange(sorter.columnKey, sorter.order);
|
||||
}
|
||||
}
|
||||
"
|
||||
>
|
||||
<template #empty>
|
||||
<Table.Column title="分组名称" dataIndex="name" />
|
||||
<Table.Column title="创建人" dataIndex="creator">
|
||||
<template #customRender="{ record }">
|
||||
{{ record.creator?.name || '-' }}
|
||||
</template>
|
||||
</Table.Column>
|
||||
<Table.Column title="创建日期" dataIndex="created_at" :width="160" key="created_at" :sorter="true">
|
||||
<template #customRender="{ record }">
|
||||
{{ exactFormatTime(record.created_at) }}
|
||||
</template>
|
||||
</Table.Column>
|
||||
<Table.Column title="操作" :align="'center'" :width="120">
|
||||
<template #customRender="{ record }">
|
||||
<div class="flex items-center">
|
||||
<img :src="icon1" width="16" height="16" class="mr-8px cursor-pointer" @click="openDelete(record)" />
|
||||
<Button type="primary" size="small" @click="openEdit(record)">编辑</Button>
|
||||
</div>
|
||||
</template>
|
||||
</Table.Column>
|
||||
<template #emptyText>
|
||||
<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>
|
||||
</div>
|
||||
</template>
|
||||
</a-table>
|
||||
</Table>
|
||||
<div v-if="pageInfo.total > 0" class="pagination-row flex justify-end">
|
||||
<a-pagination
|
||||
<Pagination
|
||||
:total="pageInfo.total"
|
||||
size="mini"
|
||||
show-total
|
||||
show-jumper
|
||||
show-page-size
|
||||
size="small"
|
||||
:showTotal="(total, range) => `共 ${total} 条`"
|
||||
showSizeChanger
|
||||
showQuickJumper
|
||||
:current="pageInfo.page"
|
||||
:page-size="pageInfo.pageSize"
|
||||
:pageSize="pageInfo.pageSize"
|
||||
@change="onPageChange"
|
||||
@page-size-change="onPageSizeChange"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<AddGroup ref="addGroupRef" @success="update" />
|
||||
<DeleteGroup ref="deleteGroupRef" @success="update" />
|
||||
</a-modal>
|
||||
</Modal>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, reactive, onMounted } from 'vue';
|
||||
import { Button, Input, Modal, Space, Table, Pagination } from 'ant-design-vue';
|
||||
import { getAccountGroup } from '@/api/all/propertyMarketing';
|
||||
import { exactFormatTime } from '@/utils/tools';
|
||||
|
||||
@ -115,25 +134,6 @@ const loading = ref(false);
|
||||
const query = ref(cloneDeep(INITIAL_QUERY));
|
||||
const pageInfo = ref(cloneDeep(INITIAL_PAGE_INFO));
|
||||
|
||||
const columns = [
|
||||
{ title: '分组名称', dataIndex: 'name' },
|
||||
{
|
||||
title: '创建人',
|
||||
dataIndex: 'creator',
|
||||
render: ({ record }) => record.creator?.name || '-',
|
||||
},
|
||||
{
|
||||
title: '创建日期',
|
||||
dataIndex: 'created_at',
|
||||
width: 160,
|
||||
render: ({ record }) => exactFormatTime(record.created_at),
|
||||
sortable: {
|
||||
sortDirections: ['ascend', 'descend'],
|
||||
},
|
||||
},
|
||||
{ title: '操作', slotName: 'action', align: 'center', width: 120 },
|
||||
];
|
||||
|
||||
function open() {
|
||||
visible.value = true;
|
||||
getData();
|
||||
@ -188,8 +188,9 @@ const reload = () => {
|
||||
getData();
|
||||
};
|
||||
|
||||
const onPageChange = (current) => {
|
||||
const onPageChange = (current, pageSize) => {
|
||||
pageInfo.value.page = current;
|
||||
pageInfo.value.pageSize = pageSize;
|
||||
getData();
|
||||
};
|
||||
const onPageSizeChange = (pageSize) => {
|
||||
|
||||
@ -2,9 +2,9 @@
|
||||
|
||||
.account-manage-modal {
|
||||
border-radius: 8px;
|
||||
.arco-modal-body {
|
||||
.arco-btn {
|
||||
.arco-btn-icon {
|
||||
.ant-modal-body {
|
||||
.ant-btn {
|
||||
.ant-btn-icon {
|
||||
line-height: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
@ -3,13 +3,14 @@
|
||||
* @Date: 2025-06-25 17:51:46
|
||||
-->
|
||||
<template>
|
||||
<a-modal
|
||||
v-model:visible="visible"
|
||||
<Modal
|
||||
v-model:open="visible"
|
||||
width="480px"
|
||||
title="导入提示"
|
||||
modal-class="import-prompt-modal"
|
||||
:mask-closable="false"
|
||||
@close="close"
|
||||
wrapClassName="import-prompt-modal"
|
||||
:maskClosable="false"
|
||||
centered
|
||||
@cancel="close"
|
||||
>
|
||||
<div class="flex flex-col items-center">
|
||||
<div class="flex items-center">
|
||||
@ -21,13 +22,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>
|
||||
</Modal>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { Button, Modal } from 'ant-design-vue';
|
||||
import { defineExpose } from 'vue';
|
||||
|
||||
import icon1 from '@/assets/img/media-account/icon-warn-1.png';
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
@import "@/views/property-marketing/component.scss";
|
||||
.import-prompt-modal {
|
||||
border-radius: 8px;
|
||||
.arco-modal-body {
|
||||
.ant-modal-body {
|
||||
.tip {
|
||||
color: var(--Text-1, #211f24);
|
||||
font-family: $font-family-regular;
|
||||
|
||||
@ -3,24 +3,25 @@
|
||||
* @Date: 2025-06-25 17:51:46
|
||||
-->
|
||||
<template>
|
||||
<a-modal
|
||||
v-model:visible="visible"
|
||||
<Modal
|
||||
v-model:open="visible"
|
||||
width="500px"
|
||||
centered
|
||||
title="重新授权"
|
||||
modal-class="reauthorize-account-modal"
|
||||
:mask-closable="false"
|
||||
:footer="modalState !== MODAL_STATE.LOADING"
|
||||
@close="close"
|
||||
wrapClassName="reauthorize-account-modal"
|
||||
:maskClosable="false"
|
||||
:footer="modalState === MODAL_STATE.LOADING ? null : footer"
|
||||
@cancel="close"
|
||||
>
|
||||
<div class="flex flex-col items-center">
|
||||
<!-- 加载中状态 -->
|
||||
<template v-if="modalState === MODAL_STATE.LOADING">
|
||||
<a-progress
|
||||
<Progress
|
||||
:percent="progress"
|
||||
color="#6D4CFE"
|
||||
trackColor="#E6E6E8"
|
||||
size="large"
|
||||
:stroke-width="4"
|
||||
strokeColor="#6D4CFE"
|
||||
trailColor="#E6E6E8"
|
||||
size="default"
|
||||
:strokeWidth="4"
|
||||
type="circle"
|
||||
/>
|
||||
<p class="s2 mt-16px">数据同步和初始化中，请勿关闭窗口。</p>
|
||||
@ -54,7 +55,7 @@
|
||||
<!-- 二维码加载中或失败 -->
|
||||
<template v-if="modalState === MODAL_STATE.QR_LOADING || modalState === MODAL_STATE.QR_FAILED">
|
||||
<div class="relative w-160px h-160px">
|
||||
<a-image :src="icon1" width="160" height="160" />
|
||||
<Image :src="icon1" :width="160" :height="160" />
|
||||
<div class="absolute top-0 left-0 z-2 w-full h-full flex flex-col items-center justify-center">
|
||||
<img
|
||||
v-if="modalState === MODAL_STATE.QR_FAILED"
|
||||
@ -77,7 +78,7 @@
|
||||
</template>
|
||||
|
||||
<!-- 正常二维码 -->
|
||||
<a-image v-else :src="qrCodeUrl" width="160" height="160" />
|
||||
<Image v-else :src="qrCodeUrl" :width="160" :height="160" />
|
||||
|
||||
<!-- 二维码失效遮罩 -->
|
||||
<div v-if="modalState === MODAL_STATE.QR_EXPIRED" class="mask cursor-pointer" @click="handleRefreshQrCode">
|
||||
@ -92,28 +93,26 @@
|
||||
</div>
|
||||
|
||||
<template #footer>
|
||||
<a-button v-if="modalState === MODAL_STATE.QR_READY" size="large" @click="handleRefreshQrCode">
|
||||
重新生成
|
||||
</a-button>
|
||||
<a-button
|
||||
<Button v-if="modalState === MODAL_STATE.QR_READY" size="large" @click="handleRefreshQrCode"> 重新生成 </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>
|
||||
</Modal>
|
||||
|
||||
<SyncDataModal ref="syncDataModalRef" />
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { defineExpose, ref, computed } from 'vue';
|
||||
import { Message as AMessage } from '@arco-design/web-vue';
|
||||
import { Button, Modal, message, Image, Progress } from 'ant-design-vue';
|
||||
import { getMediaAccountsAuthorizedStatus, getAuthorizedImage } from '@/api/all/propertyMarketing';
|
||||
import SyncDataModal from '../sync-data-modal';
|
||||
|
||||
@ -282,12 +281,12 @@ const getAuthorizedStatus = async () => {
|
||||
const startFakeProgressPolling = () => {
|
||||
clearFakeProgressTimer();
|
||||
progressTimer = setInterval(() => {
|
||||
if (modalState.value === MODAL_STATE.LOADING && progress.value < 0.99) {
|
||||
const step = Math.random() * 0.04 + 0.01;
|
||||
progress.value = Math.min(progress.value + step, 0.99);
|
||||
if (modalState.value === MODAL_STATE.LOADING && progress.value < 99) {
|
||||
const step = Math.random() * 4 + 1;
|
||||
progress.value = Math.min(progress.value + step, 99);
|
||||
progress.value = Number(progress.value.toFixed(2));
|
||||
} else if (modalState.value === MODAL_STATE.LOADING && progress.value >= 0.99) {
|
||||
progress.value = 0.99; // 卡在99%
|
||||
} else if (modalState.value === MODAL_STATE.LOADING && progress.value >= 99) {
|
||||
progress.value = 99; // 卡在99%
|
||||
} else {
|
||||
clearFakeProgressTimer();
|
||||
clearStatusPollingTimer();
|
||||
@ -319,14 +318,14 @@ const handleRefreshQrCode = () => {
|
||||
const handleOk = () => {
|
||||
// 二维码已过期
|
||||
if (modalState.value === MODAL_STATE.QR_EXPIRED) {
|
||||
AMessage.error('二维码已失效，请重新扫码');
|
||||
message.error('二维码已失效，请重新扫码');
|
||||
handleRefreshQrCode();
|
||||
return;
|
||||
}
|
||||
|
||||
// 二维码还在加载中
|
||||
if (modalState.value === MODAL_STATE.QR_LOADING) {
|
||||
AMessage.warning('二维码生成中，请稍等');
|
||||
message.warning('二维码生成中，请稍等');
|
||||
return;
|
||||
}
|
||||
|
||||
|
||||
@ -3,13 +3,14 @@
|
||||
* @Date: 2025-06-25 17:51:46
|
||||
-->
|
||||
<template>
|
||||
<a-modal
|
||||
v-model:visible="visible"
|
||||
<Modal
|
||||
v-model:open="visible"
|
||||
width="480px"
|
||||
title="更新数据"
|
||||
modal-class="sync-data-modal"
|
||||
:mask-closable="false"
|
||||
@close="close"
|
||||
centered
|
||||
wrapClassName="sync-data-modal"
|
||||
:maskClosable="false"
|
||||
@cancel="close"
|
||||
>
|
||||
<div class="flex flex-col items-center">
|
||||
<div class="flex items-center">
|
||||
@ -20,14 +21,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>
|
||||
</Modal>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { defineExpose } from 'vue';
|
||||
import { Button, Modal } from 'ant-design-vue';
|
||||
|
||||
import icon1 from '@/assets/img/media-account/icon-warn-1.png';
|
||||
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
@import "@/views/property-marketing/component.scss";
|
||||
.sync-data-modal {
|
||||
border-radius: 8px;
|
||||
.arco-modal-body {
|
||||
.ant-modal-body {
|
||||
.tip {
|
||||
color: var(--Text-1, #211f24);
|
||||
font-family: $font-family-regular;
|
||||
|
||||
@ -1,25 +1,27 @@
|
||||
<template>
|
||||
<a-modal
|
||||
v-model:visible="visible"
|
||||
<Modal
|
||||
v-model:open="visible"
|
||||
:title="isEdit ? '编辑标签' : '添加新标签'"
|
||||
modal-class="tags-manage-modal"
|
||||
wrapClassName="tags-manage-modal"
|
||||
width="400px"
|
||||
@close="onClose"
|
||||
centered
|
||||
@cancel="onClose"
|
||||
>
|
||||
<a-form ref="formRef" :model="form" :rules="rules" layout="horizontal" auto-label-width>
|
||||
<a-form-item :label="isEdit ? '标签名称' : '新标签名称'" field="name" required>
|
||||
<a-input v-model="form.name" placeholder="请输入…" />
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
<Form ref="formRef" :model="form" :rules="rules" layout="horizontal" auto-label-width>
|
||||
<FormItem :label="isEdit ? '标签名称' : '新标签名称'" name="name" required>
|
||||
<Input v-model:value="form.name" placeholder="请输入…" />
|
||||
</FormItem>
|
||||
</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>
|
||||
</Modal>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, nextTick } from 'vue';
|
||||
import { Button, Modal, Form, FormItem, Input, message } from 'ant-design-vue';
|
||||
import { postAccountTags, putTag } from '@/api/all/propertyMarketing';
|
||||
|
||||
const emits = defineEmits(['success', 'close']);
|
||||
@ -57,18 +59,17 @@ const open = (record = {}) => {
|
||||
};
|
||||
|
||||
async function onSubmit() {
|
||||
formRef.value.validate(async (errors) => {
|
||||
if (!errors) {
|
||||
formRef.value.validate()
|
||||
.then(async () => {
|
||||
const _fn = isEdit.value ? putTag : postAccountTags;
|
||||
const _params = isEdit.value ? { id: tagId.value, ...form.value } : form.value;
|
||||
const { code } = await _fn(_params);
|
||||
if (code === 200) {
|
||||
AMessage.success(isEdit.value ? '编辑成功' : '添加成功');
|
||||
message.success(isEdit.value ? '编辑成功' : '添加成功');
|
||||
emits('success');
|
||||
onClose();
|
||||
}
|
||||
}
|
||||
});
|
||||
})
|
||||
}
|
||||
|
||||
defineExpose({ open });
|
||||
|
||||
@ -3,22 +3,28 @@
|
||||
* @Date: 2025-06-26 17:23:52
|
||||
-->
|
||||
<template>
|
||||
<a-modal v-model:visible="visible" title="删除标签" width="400px" modal-class="account-manage-modal" @close="onClose">
|
||||
<Modal
|
||||
v-model:open="visible"
|
||||
title="删除标签"
|
||||
centered
|
||||
width="400px"
|
||||
wrapClassName="account-manage-modal"
|
||||
@cancel="onClose"
|
||||
>
|
||||
<div class="flex items-center">
|
||||
<img :src="icon1" width="20" height="20" class="mr-12px" />
|
||||
<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>
|
||||
</Modal>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from 'vue';
|
||||
import { Button, message } from 'ant-design-vue';
|
||||
import { deleteTag } from '@/api/all/propertyMarketing';
|
||||
import icon1 from '@/assets/img/media-account/icon-warn-1.png';
|
||||
|
||||
@ -46,7 +52,7 @@ const open = (record) => {
|
||||
async function onDelete() {
|
||||
const { code } = await deleteTag(tagId.value);
|
||||
if (code === 200) {
|
||||
AMessage.success('删除成功');
|
||||
message.success('删除成功');
|
||||
emits('success');
|
||||
onClose();
|
||||
}
|
||||
|
||||
@ -3,65 +3,71 @@
|
||||
* @Date: 2025-06-25 17:58:28
|
||||
-->
|
||||
<template>
|
||||
<a-modal
|
||||
v-model:visible="visible"
|
||||
<Modal
|
||||
v-model:open="visible"
|
||||
width="800px"
|
||||
modal-class="tags-manage-modal"
|
||||
:footer="false"
|
||||
wrapClassName="tags-manage-modal"
|
||||
:footer="null"
|
||||
centered
|
||||
title="标签管理"
|
||||
:mask-closable="false"
|
||||
@close="close"
|
||||
:maskClosable="false"
|
||||
@cancel="close"
|
||||
>
|
||||
<div class="flex items-center justify-between mb-16px">
|
||||
<div class="filter-row-item flex items-center">
|
||||
<span class="s1 !color-#211F24 mr-12px">分组名称</span>
|
||||
<a-space size="medium" class="w-240px">
|
||||
<a-input v-model="query.name" placeholder="请搜索..." size="medium" allow-clear @change="handleSearch">
|
||||
<template #prefix>
|
||||
<icon-search />
|
||||
</template>
|
||||
</a-input>
|
||||
</a-space>
|
||||
<Input
|
||||
v-model:value="query.name"
|
||||
placeholder="请搜索..."
|
||||
class="w-240px"
|
||||
size="medium"
|
||||
allowClear
|
||||
@change="handleSearch"
|
||||
>
|
||||
<template #prefix>
|
||||
<icon-search />
|
||||
</template>
|
||||
</Input>
|
||||
</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">
|
||||
<div v-if="showDataSource.length" class="tag-list">
|
||||
<a-tooltip v-for="tag in showDataSource" :key="tag.id" content="双击修改标签名">
|
||||
<Tooltip v-for="tag in showDataSource" :key="tag.id" title="双击修改标签名">
|
||||
<div class="tag-item cursor-pointer" @dblclick="openEdit(tag)">
|
||||
<span>{{ tag.name }}</span>
|
||||
<img :src="iconDelete" class="delete-icon" @click="openDelete(tag)" />
|
||||
</div>
|
||||
</a-tooltip>
|
||||
</Tooltip>
|
||||
</div>
|
||||
<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>
|
||||
|
||||
<AddTag ref="addTagRef" @success="update" />
|
||||
<DeleteTag ref="deleteTagRef" @success="update" />
|
||||
</a-modal>
|
||||
</Modal>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from 'vue';
|
||||
import { Button, Modal, Input, Tooltip } from 'ant-design-vue';
|
||||
import { getTagsList } from '@/api/all/propertyMarketing';
|
||||
|
||||
import AddTag from './add-tag.vue';
|
||||
import DeleteTag from './delete-tag.vue';
|
||||
|
||||
|
||||
@ -3,14 +3,14 @@
|
||||
.tags-manage-modal {
|
||||
border-radius: 8px;
|
||||
|
||||
.arco-modal-body {
|
||||
.ant-modal-body {
|
||||
// padding: 24px 24px 44px !important;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
.arco-btn {
|
||||
.arcanto-btn {
|
||||
width: fit-content;
|
||||
.arco-btn-icon {
|
||||
.ant-btn-icon {
|
||||
line-height: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
@ -4,9 +4,9 @@
|
||||
*/
|
||||
export const INITIAL_QUERY = {
|
||||
search: '',
|
||||
status: '',
|
||||
platform: '',
|
||||
operator_id: '',
|
||||
status: undefined,
|
||||
platform: undefined,
|
||||
operator_id: undefined,
|
||||
group_ids: [],
|
||||
tag_ids: [],
|
||||
project_ids: [],
|
||||
|
||||
@ -4,28 +4,28 @@
|
||||
-->
|
||||
<template>
|
||||
<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">
|
||||
<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,17 +33,17 @@
|
||||
|
||||
<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 items-center px-16px py-10px w-100% my-12px h-48px"
|
||||
:class="selectedItems.length > 0 ? 'selected' : isAbNormalStatus ? 'abnormal' : 'normal'"
|
||||
>
|
||||
<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">
|
||||
已选
|
||||
@ -69,11 +69,11 @@
|
||||
<img :src="icon6" width="16" height="16" class="cursor-pointer" @click="handleCloseTip" />
|
||||
</template>
|
||||
<div v-else>
|
||||
<a-space v-if="isAbNormalStatus" class="flex items-center">
|
||||
<a-button type="primary" status="danger" size="mini" @click="handleOpenAbnormalAccount">
|
||||
<Space v-if="isAbNormalStatus" class="flex items-center">
|
||||
<Button type="primary" danger size="small" @click="handleOpenAbnormalAccount">
|
||||
<template #default>查看异常账号</template>
|
||||
</a-button>
|
||||
</a-space>
|
||||
</Button>
|
||||
</Space>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-wrap">
|
||||
@ -92,17 +92,16 @@
|
||||
<NoData v-else />
|
||||
|
||||
<div v-if="pageInfo.total > 0" class="pagination-row">
|
||||
<a-pagination
|
||||
<Pagination
|
||||
:total="pageInfo.total"
|
||||
size="mini"
|
||||
show-total
|
||||
show-jumper
|
||||
show-page-size
|
||||
:page-size-options="[8, 16, 20, 32, 64]"
|
||||
size="small"
|
||||
:showTotal="(total, range) => `共 ${total} 条`"
|
||||
showSizeChanger
|
||||
showQuickJumper
|
||||
:current="pageInfo.page"
|
||||
:page-size="pageInfo.pageSize"
|
||||
:pageSize="pageInfo.pageSize"
|
||||
:pageSizeOptions="['8', '16', '20', '32', '64']"
|
||||
@change="onPageChange"
|
||||
@page-size-change="onPageSizeChange"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
@ -119,7 +118,7 @@
|
||||
|
||||
<script setup>
|
||||
import { ref, provide } from 'vue';
|
||||
import { Notification } from '@arco-design/web-vue';
|
||||
import { Checkbox, Button, Space, Pagination, notification } from 'ant-design-vue';
|
||||
|
||||
import FilterBlock from './components/filter-block';
|
||||
import AccountTable from './components/account-table';
|
||||
@ -240,8 +239,10 @@ const handleReset = () => {
|
||||
reload();
|
||||
};
|
||||
|
||||
const onPageChange = (current) => {
|
||||
const onPageChange = (current, pageSize) => {
|
||||
pageInfo.value.page = current;
|
||||
pageInfo.value.pageSize = pageSize;
|
||||
|
||||
getData();
|
||||
};
|
||||
const onPageSizeChange = (pageSize) => {
|
||||
@ -355,7 +356,7 @@ const getSyncTaskStatus = async (id, notificationId) => {
|
||||
if (code === 200) {
|
||||
if (data?.status !== 0) {
|
||||
clearQueryTaskTimer();
|
||||
notificationId && Notification.remove(notificationId);
|
||||
notificationId && notification.close(notificationId);
|
||||
showImportResultNotification(data);
|
||||
getData();
|
||||
}
|
||||
|
||||
@ -3,15 +3,15 @@
|
||||
* @Date: 2025-06-25 14:02:40
|
||||
-->
|
||||
<template>
|
||||
<a-select
|
||||
v-model="selectedStatus"
|
||||
:multiple="multiple"
|
||||
size="medium"
|
||||
<Select
|
||||
v-model:value="selectedStatus"
|
||||
:mode="multiple ? 'multiple' : undefined"
|
||||
size="middle"
|
||||
:placeholder="placeholder"
|
||||
allow-clear
|
||||
allowClear
|
||||
@change="handleChange"
|
||||
>
|
||||
<a-option
|
||||
<Option
|
||||
v-for="(item, index) in STATUS_LIST"
|
||||
:key="index"
|
||||
:value="item.value"
|
||||
@ -19,11 +19,13 @@
|
||||
:style="item.style"
|
||||
>
|
||||
{{ item.text }}
|
||||
</a-option>
|
||||
</a-select>
|
||||
</Option>
|
||||
</Select>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { Select } from 'ant-design-vue';
|
||||
const { Option } = Select;
|
||||
import { ref, watch } from 'vue';
|
||||
import { STATUS_LIST } from '@/views/property-marketing/media-account/components/status-select/constants';
|
||||
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
import { defineComponent, computed } from 'vue';
|
||||
import { Tooltip } from '@arco-design/web-vue';
|
||||
import { Tooltip } from 'ant-design-vue';
|
||||
|
||||
import iconWarn1 from '@/assets/img/media-account/icon-warn-1.png';
|
||||
import iconWarn2 from '@/assets/img/media-account/icon-warn-2.png';
|
||||
@ -111,7 +111,7 @@ export default defineComponent({
|
||||
const { background, color, label } = statusInfo.value;
|
||||
if (status === EnumStatus.NORMAL) {
|
||||
return (
|
||||
<div class="flex items-center status-box">
|
||||
<div class="flex items-center status-box w-fit">
|
||||
{to_be_expire_for_cookie === EnumExpireForCookie.EXPIRE && (
|
||||
<div class="flex items-center rounded-2px px-8px mr-8px" style={{ background, color }}>
|
||||
<img src={icon1} width="12" height="12" class="mr-4px" />
|
||||
@ -129,12 +129,12 @@ export default defineComponent({
|
||||
}
|
||||
|
||||
return (
|
||||
<div class="flex items-center rounded-2px px-8px status-box" style={{ background, color }}>
|
||||
<div class="flex items-center rounded-2px px-8px status-box w-fit" style={{ background, color }}>
|
||||
<span class="text-14px lh-22px font-400 label">{label}</span>
|
||||
{status === EnumStatus.PAUSE ? (
|
||||
<img src={iconWarn1} width="12" height="12" class="ml-4px" />
|
||||
) : (
|
||||
<Tooltip content={statusInfo.value.tooltip}>
|
||||
<Tooltip title={statusInfo.value.tooltip}>
|
||||
<img src={iconWarn2} width="12" height="12" class="ml-4px" />
|
||||
</Tooltip>
|
||||
)}
|
||||
|
||||
Reference in New Issue
Block a user