feat: 自定义列
This commit is contained in:
rd
216
src/components/custom-table-column-modal/index.vue
Normal file
216
src/components/custom-table-column-modal/index.vue
Normal file
@ -0,0 +1,216 @@
|
||||
<!--
|
||||
* @Author: RenXiaoDong
|
||||
* @Date: 2025-06-30 10:54:49
|
||||
-->
|
||||
<template>
|
||||
<a-modal
|
||||
v-model:visible="visible"
|
||||
title="自定义列"
|
||||
width="960px"
|
||||
unmountOnClose
|
||||
titleAlign="start"
|
||||
class="custom-table-column-modal"
|
||||
@close="close"
|
||||
>
|
||||
<div class="modal-body">
|
||||
<!-- 左侧分组 -->
|
||||
<div class="left">
|
||||
<div v-for="group in dataSource" :key="group.label" class="group-item">
|
||||
<div class="title-row">
|
||||
<span class="text">{{ group.label }}</span>
|
||||
</div>
|
||||
<div class="fields">
|
||||
<a-checkbox
|
||||
v-for="option in group.columns"
|
||||
:key="option.value"
|
||||
:model-value="isCheck(option)"
|
||||
:value="option.value"
|
||||
:disabled="option.is_require === ENUM_STATUS.NO"
|
||||
@change="(checked) => onCheckChange(checked, option)"
|
||||
>
|
||||
{{ option.label }}
|
||||
</a-checkbox>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 右侧已选 -->
|
||||
<div class="right">
|
||||
<span class="checked-title mb-16px">
|
||||
已添加<span class="count">（{{ checkColumns.length }}）</span>
|
||||
</span>
|
||||
<div class="checked-list">
|
||||
<div v-for="(groupName, index) in requiredGroupNames" :key="index" class="checked-item">
|
||||
<div class="flex items-center">
|
||||
<img :src="icon1" alt="icon" class="mr-8px" width="16" height="16" />
|
||||
<span>{{ groupName }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<VueDraggable v-model="checkColumns">
|
||||
<div
|
||||
v-for="item in checkColumns"
|
||||
:key="item"
|
||||
class="checked-item justify-between"
|
||||
:class="isRequiredColumn(item) ? '!display-none' : ''"
|
||||
>
|
||||
<div class="flex items-center">
|
||||
<icon-menu size="16" class="mr-8px" />
|
||||
<span>{{ getCheckColumnLabel(item) }}</span>
|
||||
</div>
|
||||
<icon-close size="16" class="color-#737478 cursor-pointer" @click="removeCheckedField(item)" />
|
||||
</div>
|
||||
</VueDraggable>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<template #footer>
|
||||
<div style="text-align: right">
|
||||
<a-button class="mr-8px cancel-btn" size="medium" @click="close">取消</a-button>
|
||||
<a-button type="primary" size="medium" @click="onSubmit">确定</a-button>
|
||||
</div>
|
||||
</template>
|
||||
</a-modal>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, defineExpose } from 'vue';
|
||||
import { VueDraggable } from 'vue-draggable-plus';
|
||||
|
||||
import { getCustomColumns, updateCustomColumns } from '@/api/all/common';
|
||||
|
||||
import icon1 from './img/icon-lock.png';
|
||||
|
||||
const props = defineProps({
|
||||
type: {
|
||||
type: String,
|
||||
default: '',
|
||||
required: true,
|
||||
},
|
||||
});
|
||||
|
||||
const emit = defineEmits(['success']);
|
||||
|
||||
const ENUM_STATUS = {
|
||||
YES: 0,
|
||||
NO: 1,
|
||||
};
|
||||
|
||||
const visible = ref(false);
|
||||
|
||||
const dataSource = ref([]);
|
||||
const checkColumns = ref([]); // 选中字段
|
||||
const allColumns = ref([]); // 所有字段
|
||||
const requiredGroupNames = ref([]); // 必选分组名称
|
||||
|
||||
const open = () => {
|
||||
initData();
|
||||
visible.value = true;
|
||||
};
|
||||
|
||||
const close = () => {
|
||||
visible.value = false;
|
||||
|
||||
dataSource.value = [];
|
||||
checkColumns.value = [];
|
||||
allColumns.value = [];
|
||||
requiredGroupNames.value = [];
|
||||
};
|
||||
|
||||
const initData = async () => {
|
||||
const data = {
|
||||
selected_columns: [],
|
||||
groups: [
|
||||
{
|
||||
label: '基础信息',
|
||||
is_require: 1,
|
||||
columns: [
|
||||
{ label: '账号名称', value: 'account_name', is_require: 1 },
|
||||
{ label: '项目分组', value: 'project_group', is_require: 1 },
|
||||
{ label: '状态', value: 'status', is_require: 1 },
|
||||
{ label: '运营人员', value: 'operator', is_require: 1 },
|
||||
{ label: 'AI评价', value: 'ai_score', is_require: 1 },
|
||||
],
|
||||
},
|
||||
{
|
||||
label: '分析数据',
|
||||
is_require: 0,
|
||||
columns: [
|
||||
{ label: '粉丝量', value: 'fans', is_require: 0 },
|
||||
{ label: '总赞藏数', value: 'total_likes', is_require: 0 },
|
||||
{ label: '观看量', value: 'views', is_require: 0 },
|
||||
{ label: '观看量环比', value: 'views_ratio', is_require: 0 },
|
||||
{ label: '点赞量', value: 'likes', is_require: 0 },
|
||||
{ label: '点赞量环比', value: 'likes_ratio', is_require: 0 },
|
||||
{ label: '最新内容标题/日期', value: 'latest_content', is_require: 0 },
|
||||
{ label: '最新作品观看数', value: 'latest_views', is_require: 0 },
|
||||
{ label: '最新作品日增长', value: 'latest_growth', is_require: 0 },
|
||||
{ label: '次新内容标题/日期', value: 'second_latest_content', is_require: 0 },
|
||||
{ label: '次新作品观看数', value: 'second_latest_views', is_require: 0 },
|
||||
{ label: '次新作品日增长', value: 'second_latest_growth', is_require: 0 },
|
||||
],
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
// const { code, data } = await getCustomColumns({ type: props.type });
|
||||
// if (code === 0) {
|
||||
const { selected_columns, groups } = data;
|
||||
dataSource.value = groups;
|
||||
setDefaultCheckColumns(groups, selected_columns);
|
||||
allColumns.value = groups.flatMap((group) => group.columns);
|
||||
// }
|
||||
};
|
||||
|
||||
const isCheck = (option) => {
|
||||
return checkColumns.value.includes(option.value);
|
||||
};
|
||||
const getCheckColumnLabel = (value) => {
|
||||
const column = allColumns.value.find((column) => column.value === value);
|
||||
return column?.label;
|
||||
};
|
||||
const isRequiredColumn = (value) => {
|
||||
const column = allColumns.value.find((column) => column.value === value);
|
||||
return column?.is_require === 1;
|
||||
};
|
||||
|
||||
const removeCheckedField = (value) => {
|
||||
checkColumns.value = checkColumns.value.filter((column) => column !== value);
|
||||
};
|
||||
|
||||
// 勾选/取消
|
||||
const onCheckChange = (checked, option) => {
|
||||
if (checked) {
|
||||
checkColumns.value.push(option.value);
|
||||
} else {
|
||||
checkColumns.value = checkColumns.value.filter((item) => item !== option.value);
|
||||
}
|
||||
};
|
||||
|
||||
// 提交
|
||||
const onSubmit = async () => {
|
||||
const { code } = await updateCustomColumns({ type: props.type, selected_columns: checkColumns.value });
|
||||
if (code === 200) {
|
||||
emit('success', checkColumns.value);
|
||||
close();
|
||||
}
|
||||
};
|
||||
|
||||
function setDefaultCheckColumns(groups, selected_columns) {
|
||||
const requiredGroups = groups.filter((group) => group.is_require === 1);
|
||||
const requiredValues = requiredGroups
|
||||
.flatMap((group) => (group.columns || []).filter((col) => col.is_require === 1))
|
||||
.map((col) => col.value);
|
||||
|
||||
const merged = union(requiredValues, selected_columns);
|
||||
|
||||
checkColumns.value = merged;
|
||||
requiredGroupNames.value = requiredGroups.map((group) => group.label);
|
||||
}
|
||||
|
||||
// 暴露方法
|
||||
defineExpose({ open });
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
@import './style.scss';
|
||||
</style>
|
||||
Reference in New Issue
Block a user