feat: 样式调整
This commit is contained in:
@ -60,13 +60,11 @@
|
||||
:ellipsis="true"
|
||||
>
|
||||
<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>
|
||||
<Tooltip v-if="column.tooltip" :title="column.tooltip" placement="top">
|
||||
<icon-question-circle class="tooltip-icon color-#737478" size="16" />
|
||||
</Tooltip>
|
||||
</div>
|
||||
<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'" #customRender="{ record }">
|
||||
@ -216,8 +214,6 @@ const tableColumns = computed(() => {
|
||||
return _result;
|
||||
});
|
||||
|
||||
|
||||
|
||||
const handleDetail = (record) => {
|
||||
router.push(`/media-account/detail/${record.id}?type=${dateType.value}`);
|
||||
};
|
||||
@ -230,7 +226,7 @@ const handleTableChange = (pagination, filters, sorter) => {
|
||||
};
|
||||
|
||||
const handleSelect = (record, selected, selectedRows, nativeEvent) => {
|
||||
selectedItems.value = selectedRows.map(row => row.id);
|
||||
selectedItems.value = selectedRows.map((row) => row.id);
|
||||
emit('selectionChange', selectedRows);
|
||||
};
|
||||
|
||||
|
||||
@ -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',
|
||||
},
|
||||
|
||||
@ -66,12 +66,10 @@
|
||||
:ellipsis="true"
|
||||
>
|
||||
<template #title>
|
||||
<div class="flex items-center">
|
||||
<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>
|
||||
</div>
|
||||
<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'">
|
||||
@ -80,6 +78,9 @@
|
||||
<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>
|
||||
@ -110,6 +111,7 @@ 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;
|
||||
|
||||
@ -117,7 +117,7 @@ export default defineComponent({
|
||||
return renderUpdateBtn();
|
||||
} else if ([EnumErrorStatus.REQUEST, EnumErrorStatus.FREEZE].includes(error_status)) {
|
||||
return (
|
||||
<Tooltip title={statusInfo.value?.disabledBtnTooltip}>
|
||||
<Tooltip title={statusInfo.value.disabledBtnTooltip}>
|
||||
<Button type="primary" ghost size="small" disabled>
|
||||
重新授权
|
||||
</Button>
|
||||
|
||||
@ -4,7 +4,19 @@
|
||||
-->
|
||||
<script lang="jsx">
|
||||
import { ref, computed } from 'vue';
|
||||
import { Button, Modal, Form, FormItem, RadioGroup, Radio, Input, message, Tooltip, Upload, Switch } from 'ant-design-vue';
|
||||
import {
|
||||
Button,
|
||||
Modal,
|
||||
Form,
|
||||
FormItem,
|
||||
RadioGroup,
|
||||
Radio,
|
||||
Input,
|
||||
message,
|
||||
Tooltip,
|
||||
Upload,
|
||||
Switch,
|
||||
} from 'ant-design-vue';
|
||||
const { TextArea } = Input;
|
||||
import AuthorizedAccountModal from '../authorized-account-modal';
|
||||
// import ImportPromptModal from '../import-prompt-modal';
|
||||
@ -275,6 +287,7 @@ export default {
|
||||
model={form.value}
|
||||
rules={rules}
|
||||
layout="horizontal"
|
||||
labelAlign="right"
|
||||
labelCol={{ span: 4 }}
|
||||
wrapperCol={{ span: 20 }}
|
||||
>
|
||||
@ -293,19 +306,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">
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -67,12 +67,10 @@
|
||||
:ellipsis="true"
|
||||
>
|
||||
<template #title>
|
||||
<div class="flex items-center">
|
||||
<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>
|
||||
</div>
|
||||
<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 }">
|
||||
|
||||
@ -22,13 +22,9 @@
|
||||
allowClear
|
||||
@change="handleSearch"
|
||||
>
|
||||
<Option
|
||||
v-for="(item, index) in PLATFORM_LIST"
|
||||
:key="index"
|
||||
:value="item.value"
|
||||
:label="item.label"
|
||||
>{{ item.label }}</Option
|
||||
>
|
||||
<Option v-for="(item, index) in PLATFORM_LIST" :key="index" :value="item.value" :label="item.label">{{
|
||||
item.label
|
||||
}}</Option>
|
||||
</Select>
|
||||
<Select
|
||||
v-model:value="query.operator_id"
|
||||
@ -71,12 +67,10 @@
|
||||
:ellipsis="true"
|
||||
>
|
||||
<template #title>
|
||||
<div class="flex items-center">
|
||||
<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>
|
||||
</div>
|
||||
<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 }">
|
||||
@ -89,7 +83,7 @@
|
||||
</template>
|
||||
</Table.Column>
|
||||
<template #emptyText>
|
||||
<NoData text="暂无账户"/>
|
||||
<NoData text="暂无账户" />
|
||||
</template>
|
||||
</Table>
|
||||
</div>
|
||||
@ -147,12 +141,11 @@ const props = defineProps({
|
||||
},
|
||||
});
|
||||
|
||||
const { dataSource, selectedRowKeys, selectedRows, handleSelect, handleSelectAll } =
|
||||
useTableSelectionWithPagination({
|
||||
onSelectChange: () => {
|
||||
updateFormQuery();
|
||||
},
|
||||
});
|
||||
const { dataSource, selectedRowKeys, selectedRows, handleSelect, handleSelectAll } = useTableSelectionWithPagination({
|
||||
onSelectChange: () => {
|
||||
updateFormQuery();
|
||||
},
|
||||
});
|
||||
|
||||
const query = ref({
|
||||
name: '',
|
||||
|
||||
@ -70,12 +70,10 @@
|
||||
:ellipsis="true"
|
||||
>
|
||||
<template #title>
|
||||
<div class="flex items-center">
|
||||
<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>
|
||||
</div>
|
||||
<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 === 'platform'">
|
||||
@ -87,7 +85,7 @@
|
||||
</template>
|
||||
</Table.Column>
|
||||
<template #emptyText>
|
||||
<NoData text="暂无账号"/>
|
||||
<NoData text="暂无账号" />
|
||||
</template>
|
||||
</Table>
|
||||
</div>
|
||||
@ -143,12 +141,11 @@ const props = defineProps({
|
||||
},
|
||||
});
|
||||
|
||||
const { dataSource, selectedRowKeys, selectedRows, handleSelect, handleSelectAll } =
|
||||
useTableSelectionWithPagination({
|
||||
onSelectChange: () => {
|
||||
updateFormQuery();
|
||||
},
|
||||
});
|
||||
const { dataSource, selectedRowKeys, selectedRows, handleSelect, handleSelectAll } = useTableSelectionWithPagination({
|
||||
onSelectChange: () => {
|
||||
updateFormQuery();
|
||||
},
|
||||
});
|
||||
|
||||
const query = ref({
|
||||
name: '',
|
||||
|
||||
@ -43,11 +43,13 @@
|
||||
class="account-table w-100%"
|
||||
bordered
|
||||
:showSorterTooltip="false"
|
||||
@change="(pagination, filters, sorter) => {
|
||||
if (sorter && sorter.columnKey) {
|
||||
handleSorterChange(sorter.columnKey, sorter.order === 'ascend' ? 'asc' : 'desc');
|
||||
@change="
|
||||
(pagination, filters, sorter) => {
|
||||
if (sorter && sorter.columnKey) {
|
||||
handleSorterChange(sorter.columnKey, sorter.order === 'ascend' ? 'asc' : 'desc');
|
||||
}
|
||||
}
|
||||
}"
|
||||
"
|
||||
>
|
||||
<Table.Column
|
||||
v-for="column in tableColumns"
|
||||
@ -61,13 +63,11 @@
|
||||
:ellipsis="true"
|
||||
>
|
||||
<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>
|
||||
<Tooltip v-if="column.tooltip" :title="column.tooltip" placement="top">
|
||||
<icon-question-circle class="tooltip-icon color-#737478" size="16" />
|
||||
</Tooltip>
|
||||
</div>
|
||||
<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'" #customRender="{ record }">
|
||||
@ -75,9 +75,7 @@
|
||||
</template>
|
||||
<template v-else-if="column.dataIndex === 'status'" #customRender="{ record }">
|
||||
<div class="status-tag" :class="`status-tag-${record.status}`">
|
||||
<span class="cts status-tag-text">{{
|
||||
STATUS_LIST.find((item) => item.value === record.status)?.label
|
||||
}}</span>
|
||||
<span class="cts status-tag-text">{{ STATUS_LIST.find((item) => item.value === record.status)?.label }}</span>
|
||||
</div>
|
||||
</template>
|
||||
<template v-else-if="column.dataIndex === 'ai_evaluate'" #customRender="{ record }">
|
||||
|
||||
@ -58,13 +58,11 @@
|
||||
:ellipsis="true"
|
||||
>
|
||||
<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>
|
||||
<Tooltip v-if="column.tooltip" :title="column.tooltip" placement="top">
|
||||
<icon-question-circle class="tooltip-icon color-#737478" size="16" />
|
||||
</Tooltip>
|
||||
</div>
|
||||
<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 #customRender="{ record }">
|
||||
<template v-if="column.dataIndex === 'platform'">
|
||||
|
||||
@ -42,13 +42,11 @@
|
||||
accept=".xlsx,.xls,.docx,.doc"
|
||||
:showUploadList="false"
|
||||
>
|
||||
<template #default>
|
||||
<div class="upload-box">
|
||||
<icon-plus size="14" class="mb-16px" />
|
||||
<span class="text mb-4px">点击或拖拽文件到此处上传</span>
|
||||
<span class="tip">支持 xls, xlsx格式</span>
|
||||
</div>
|
||||
</template>
|
||||
<div class="upload-box">
|
||||
<icon-plus size="14" class="mb-16px" />
|
||||
<span class="text mb-4px">点击或拖拽文件到此处上传</span>
|
||||
<span class="tip">支持 xls, xlsx格式</span>
|
||||
</div>
|
||||
</Upload>
|
||||
</template>
|
||||
<template v-else>
|
||||
@ -154,7 +152,19 @@
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { Modal, Form, FormItem, Button, Input, RadioGroup, Radio, Tooltip, message, Switch, Upload } from 'ant-design-vue';
|
||||
import {
|
||||
Modal,
|
||||
Form,
|
||||
FormItem,
|
||||
Button,
|
||||
Input,
|
||||
RadioGroup,
|
||||
Radio,
|
||||
Tooltip,
|
||||
message,
|
||||
Switch,
|
||||
Upload,
|
||||
} from 'ant-design-vue';
|
||||
import { ref, defineEmits } from 'vue';
|
||||
|
||||
import AuthorizedAccountModal from '../authorized-account-modal';
|
||||
|
||||
@ -70,12 +70,10 @@
|
||||
:ellipsis="true"
|
||||
>
|
||||
<template #title>
|
||||
<div class="flex items-center">
|
||||
<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>
|
||||
</div>
|
||||
<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 }">
|
||||
|
||||
Reference in New Issue
Block a user