Merge remote-tracking branch 'origin/feature/v1.3_营销资产中台' into feature/v1.3_营销资产中台
# Conflicts: # src/views/property-marketing/intelligent-solution/businessAnalysisReport.vue # src/views/property-marketing/put-account/account-dashboard/index.vue
This commit is contained in:
林志军
15
src/api/all/common.ts
Normal file
15
src/api/all/common.ts
Normal file
@ -0,0 +1,15 @@
|
||||
/*
|
||||
* @Author: RenXiaoDong
|
||||
* @Date: 2025-06-30 14:25:22
|
||||
*/
|
||||
import Http from '@/api';
|
||||
|
||||
// 获取用户自定义列
|
||||
export const getCustomColumns = (params = {}) => {
|
||||
return Http.get('/v1/user-custom-columns', params);
|
||||
};
|
||||
|
||||
// 保存用户自定义列
|
||||
export const updateCustomColumns = (params = {}) => {
|
||||
return Http.put('/v1/user-custom-columns', params);
|
||||
};
|
||||
BIN
src/components/custom-table-column-modal/img/icon-lock.png
Normal file
BIN
src/components/custom-table-column-modal/img/icon-lock.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 677 B |
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>
|
||||
99
src/components/custom-table-column-modal/style.scss
Normal file
99
src/components/custom-table-column-modal/style.scss
Normal file
@ -0,0 +1,99 @@
|
||||
.custom-table-column-modal {
|
||||
.arco-modal-body {
|
||||
.modal-body {
|
||||
height: 504px;
|
||||
border-radius: 8px;
|
||||
border: 1px solid var(--BG-300, #e6e6e8);
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
.left {
|
||||
flex: 1;
|
||||
padding: 20px;
|
||||
border-right: 1px solid #eee;
|
||||
overflow-y: auto;
|
||||
.group-item {
|
||||
.title-row {
|
||||
border-radius: 4px;
|
||||
background: var(--BG-100, #f7f8fa);
|
||||
display: flex;
|
||||
height: 44px;
|
||||
padding: 0px 12px;
|
||||
align-items: center;
|
||||
margin-bottom: 16px;
|
||||
.text {
|
||||
color: var(--Text-1, #211f24);
|
||||
font-family: 'Alibaba PuHuiTi';
|
||||
font-size: 16px;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
line-height: 24px; /* 150% */
|
||||
}
|
||||
}
|
||||
.fields {
|
||||
width: 100%;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: 16px;
|
||||
}
|
||||
&:not(:last-child) {
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.right {
|
||||
width: 280px;
|
||||
padding: 16px 12px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
.checked-title {
|
||||
color: var(--Text-1, #211f24);
|
||||
font-family: 'Alibaba PuHuiTi';
|
||||
font-size: 16px;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
line-height: 24px;
|
||||
.count {
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
.checked-list {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
.checked-item {
|
||||
cursor: move;
|
||||
border-radius: 4px;
|
||||
background: var(--BG-100, #f7f8fa);
|
||||
display: flex;
|
||||
height: 32px;
|
||||
padding: 0px 12px;
|
||||
align-items: center;
|
||||
.text {
|
||||
color: var(--Text-1, #211f24);
|
||||
font-family: 'Alibaba PuHuiTi';
|
||||
font-size: 14px;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
line-height: 22px; /* 157.143% */
|
||||
}
|
||||
&:not(:last-child) {
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
}
|
||||
.draggable-list {
|
||||
min-height: 40px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.arco-modal-footer {
|
||||
.cancel-btn {
|
||||
border-radius: 4px;
|
||||
border: 1px solid var(--BG-500, #b1b2b5);
|
||||
background: var(--BG-white, #fff);
|
||||
&:hover {
|
||||
border: 1px solid var(--BG-500, #b1b2b5);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
389
src/components/custom-table-column-modal/test.vue
Normal file
389
src/components/custom-table-column-modal/test.vue
Normal file
@ -0,0 +1,389 @@
|
||||
<!--
|
||||
* @Author: RenXiaoDong
|
||||
* @Date: 2025-06-30 13:51:40
|
||||
-->
|
||||
<template>
|
||||
<el-drawer v-model:visible="visible" direction="rtl" :wrapperClosable="false" class="com-custom-table-field">
|
||||
<div slot="title" class="drawer-header flex align-items-center">
|
||||
<span class="title">{{ title }}</span>
|
||||
<span class="range">指标最少选择{{ min }}个字段，最多选择{{ max }}个，已选择{{ checkLength }}个</span>
|
||||
<slot></slot>
|
||||
<!-- <div
|
||||
class="font-weight-400 font-size-12 color-primary cursor-pointer"
|
||||
@click="onFieldDescClick"
|
||||
>
|
||||
<span>数据字段说明</span>
|
||||
<i class="el-icon-arrow-right"></i>
|
||||
</div> -->
|
||||
</div>
|
||||
|
||||
<div class="panel-wrapper">
|
||||
<div class="custom-panel left ui-card-block">
|
||||
<!-- <div class="flex justify-content-space-between">
|
||||
<div class="hd">
|
||||
全部字段【{{ columnLength }}个】
|
||||
<span>请至少选择{{ min }}个字段</span
|
||||
><span v-if="max">至多{{ max }}个字段</span>
|
||||
</div>
|
||||
<slot></slot>
|
||||
</div> -->
|
||||
|
||||
<div class="bd">
|
||||
<template v-for="column in columns">
|
||||
<div v-if="column.children.length" :key="column.prop" class="bd-item">
|
||||
<div class="flex">
|
||||
<p class="title width-fit-content">{{ column.label }}</p>
|
||||
<svg-icon v-if="column.icon" :icon-class="column.icon.name" :style="column.icon.style" class="icon" />
|
||||
</div>
|
||||
<el-checkbox
|
||||
v-for="item in column.children"
|
||||
:key="`${item.prop}${Math.random()}`"
|
||||
:label="item"
|
||||
:disabled="
|
||||
!column.editable ||
|
||||
!item.editable ||
|
||||
(isMax && !getItemChecked(item)) ||
|
||||
(isMin && getItemChecked(item))
|
||||
"
|
||||
:data-checked="getItemChecked(item)"
|
||||
:checked="getItemChecked(item) || item.selectDisabled"
|
||||
@change="onCheckColumns(item, column.prop, column)"
|
||||
>
|
||||
<div class="flex align-item-center">
|
||||
<FieldTooltip
|
||||
v-if="showNewTooltip"
|
||||
:openDelay="300"
|
||||
:fieldTooltip="item.fieldTooltip"
|
||||
:fieldTooltip2="item.fieldTooltip2"
|
||||
:title="item.label"
|
||||
:fieldCase="item.fieldCase"
|
||||
>
|
||||
<span>{{ item.label }}</span>
|
||||
</FieldTooltip>
|
||||
<el-tooltip
|
||||
v-else
|
||||
popper-class="ui-overflow-tooltip"
|
||||
effect="dark"
|
||||
:content="item.fieldTooltip"
|
||||
placement="top-start"
|
||||
:open-delay="300"
|
||||
:disabled="!item.fieldTooltip"
|
||||
>
|
||||
<div slot="content">
|
||||
<div v-html="item.fieldTooltip"></div>
|
||||
</div>
|
||||
<span>{{ item.label }}</span>
|
||||
</el-tooltip>
|
||||
|
||||
<svg-icon v-if="item.icon" :icon-class="item.icon.name" :style="item.icon.style" class="icon" />
|
||||
</div>
|
||||
</el-checkbox>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="custom-panel right ui-card-block">
|
||||
<div class="hd flex justify-content-space-between align-items-center mr14">
|
||||
<span class="hd-check-num">已选({{ `${checkLength}` }})</span>
|
||||
|
||||
<span class="label">长按可拖动调整展示排序</span>
|
||||
</div>
|
||||
<div class="bd">
|
||||
<div class="column-row">
|
||||
<draggable v-model="checkColumns">
|
||||
<transition-group>
|
||||
<div v-for="checkColumn in checkColumns" :key="checkColumn.prop" class="column-item mb16">
|
||||
<p class="title">{{ checkColumn.label }}</p>
|
||||
<draggable v-model="checkColumn.children">
|
||||
<transition-group>
|
||||
<div v-for="item in checkColumn.children" :key="item.prop" class="column-children-item">
|
||||
<i class="el-icon-more"></i>
|
||||
<i class="el-icon-more"></i>
|
||||
<span class="label">{{ item.label }}</span>
|
||||
|
||||
<i class="el-icon-close" @click="onDelete(item, checkColumn.prop)"></i>
|
||||
</div>
|
||||
</transition-group>
|
||||
</draggable>
|
||||
</div>
|
||||
</transition-group>
|
||||
</draggable>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="submit-row">
|
||||
<el-button @click="visible = false"> 取消 </el-button>
|
||||
<el-button type="primary" @click="onSubmit"> 确定 </el-button>
|
||||
</div>
|
||||
</el-drawer>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { cloneDeep } from 'lodash';
|
||||
import draggable from 'vuedraggable';
|
||||
import { setCustomTableFields } from '@/api/common';
|
||||
import { includes } from '@/utils/tools';
|
||||
import FieldTooltip from '@/components/CommonTooltip/FieldTooltip';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
draggable,
|
||||
FieldTooltip,
|
||||
},
|
||||
props: {
|
||||
title: {
|
||||
type: String,
|
||||
default: '自定义表格字段',
|
||||
},
|
||||
// 表格类型
|
||||
type: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
// 默认字段
|
||||
defaultColumns: {
|
||||
type: Array,
|
||||
default: () => [],
|
||||
},
|
||||
// 至少字段
|
||||
min: {
|
||||
type: Number,
|
||||
default: 3,
|
||||
},
|
||||
// 至多字段
|
||||
max: {
|
||||
type: Number,
|
||||
default: null,
|
||||
},
|
||||
showNewTooltip: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
other_setting: {
|
||||
type: Object,
|
||||
default: () => {},
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
checkColumns: [], // 选中字段
|
||||
visible: false,
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
// 选择区，显示字段
|
||||
columns() {
|
||||
const list = cloneDeep(this.defaultColumns);
|
||||
list.forEach((item) => {
|
||||
item.children = item.children.sort((a, b) => {
|
||||
return a.order - b.order;
|
||||
});
|
||||
});
|
||||
return list.sort((a, b) => {
|
||||
return a.order - b.order;
|
||||
});
|
||||
},
|
||||
columnLength() {
|
||||
return this.columns.length || 0;
|
||||
},
|
||||
checkLength() {
|
||||
return this.getFlatColumns().length || 0;
|
||||
},
|
||||
isMin() {
|
||||
return this.min && this.checkLength - 1 < this.min;
|
||||
},
|
||||
// 勾选数量达到最大值
|
||||
isMax() {
|
||||
return this.max && this.checkLength + 1 > this.max;
|
||||
},
|
||||
},
|
||||
watch: {},
|
||||
mounted() {},
|
||||
methods: {
|
||||
includes,
|
||||
init() {
|
||||
this.initCheckColumns();
|
||||
},
|
||||
// 初始化选中字段
|
||||
initCheckColumns() {
|
||||
const list = cloneDeep(this.defaultColumns);
|
||||
this.checkColumns = this.getCheckColumns(list);
|
||||
},
|
||||
getFlatColumns() {
|
||||
const fields = cloneDeep(this.checkColumns);
|
||||
let _flatColumns = [];
|
||||
for (let i = 0; i < fields.length; i++) {
|
||||
const { children, ...props } = fields[i];
|
||||
_flatColumns = [..._flatColumns, ...children];
|
||||
}
|
||||
return _flatColumns;
|
||||
},
|
||||
getItemChecked(item) {
|
||||
return !!this.getFlatColumns().some((column) => column.prop === item.prop);
|
||||
},
|
||||
|
||||
onCheckColumns(data, parentProp, column) {
|
||||
const _target = this.checkColumns.find((v) => v.prop === parentProp);
|
||||
const isChecked = this.getItemChecked(data);
|
||||
const fn = () => {
|
||||
if (this.checkLength === this.max) {
|
||||
this.$message.warning(`指标最多选择${this.max}个`);
|
||||
}
|
||||
};
|
||||
|
||||
// 新增一组
|
||||
if (!_target) {
|
||||
const { children, ...props } = column;
|
||||
this.checkColumns.push({
|
||||
...props,
|
||||
children: [
|
||||
{
|
||||
...data,
|
||||
is_show: true,
|
||||
},
|
||||
],
|
||||
});
|
||||
|
||||
fn();
|
||||
return;
|
||||
}
|
||||
if (isChecked) {
|
||||
if (_target.children.length === 1) {
|
||||
const _index = this.checkColumns.findIndex((v) => v.prop === parentProp);
|
||||
this.checkColumns.splice(_index, 1);
|
||||
return;
|
||||
}
|
||||
|
||||
_target.children.forEach((item, index) => {
|
||||
if (item.prop == data.prop) {
|
||||
_target.children.splice(index, 1);
|
||||
}
|
||||
});
|
||||
} else {
|
||||
_target.children.push({
|
||||
...data,
|
||||
is_show: true,
|
||||
});
|
||||
|
||||
fn();
|
||||
}
|
||||
},
|
||||
onDelete(data, parentProp) {
|
||||
if (this.isMin) {
|
||||
return this.$message.warning(`最少选择${this.min}个指标`);
|
||||
}
|
||||
|
||||
const _target = this.checkColumns.find((v) => v.prop === parentProp);
|
||||
// 该组最后一项，直接删除整组
|
||||
if (_target.children.length === 1) {
|
||||
const _index = this.checkColumns.findIndex((v) => v.prop === parentProp);
|
||||
this.checkColumns.splice(_index, 1);
|
||||
return;
|
||||
}
|
||||
|
||||
_target.children.forEach((item, index) => {
|
||||
if (item.prop == data.prop) {
|
||||
_target.children.splice(index, 1);
|
||||
}
|
||||
});
|
||||
|
||||
// this.$forceUpdate();
|
||||
},
|
||||
// 获取重新排序后数组
|
||||
getSortedColumns() {
|
||||
let columns = cloneDeep(this.columns); // 复制原数据列
|
||||
const checkColumns = cloneDeep(this.checkColumns); // 复制已选数据列
|
||||
|
||||
// 全部置为false
|
||||
columns.forEach((column) => {
|
||||
if (column.editable) {
|
||||
column.is_show = false;
|
||||
column.children.forEach((item) => item.editable && (item.is_show = false));
|
||||
}
|
||||
});
|
||||
|
||||
// 对父级分组排序
|
||||
checkColumns.forEach((checkColumn) => {
|
||||
const _index = columns.findIndex((column) => column.prop === checkColumn.prop);
|
||||
if (_index > -1) {
|
||||
const item = columns.splice(_index, 1)[0];
|
||||
columns.push(item);
|
||||
}
|
||||
});
|
||||
|
||||
// 对子级元素分组排序
|
||||
for (let i = 0; i < checkColumns.length; i++) {
|
||||
const { prop, children } = checkColumns[i];
|
||||
const _target = columns.find((v) => v.prop === prop);
|
||||
const _allIndex = children.map((item) => item.prop);
|
||||
|
||||
// if (_allIndex === 0) {
|
||||
// _target.is_show = false;
|
||||
// break;
|
||||
// }
|
||||
|
||||
_target.is_show = true;
|
||||
// 删除已勾选的数据，再把这些数据插入到数组最后面
|
||||
_target.children = _target.children.filter((item) => !_allIndex.includes(item.prop));
|
||||
|
||||
_target.children = [..._target.children, ...children];
|
||||
}
|
||||
return columns;
|
||||
},
|
||||
async onSubmit() {
|
||||
if (this.max && this.checkLength > this.max) {
|
||||
this.$message.error(`你已经选择${this.checkLength}个,最多不能超过${this.max}个`);
|
||||
return;
|
||||
}
|
||||
if (this.min && this.checkLength < this.min) {
|
||||
this.$message.error(`你已经选择${this.checkLength}个,至少不能少于${this.min}个`);
|
||||
return;
|
||||
}
|
||||
const fields = this.getSortedColumns();
|
||||
|
||||
try {
|
||||
const { code } = await setCustomTableFields({
|
||||
custom_type: this.type,
|
||||
fields,
|
||||
other_setting: this.other_setting,
|
||||
});
|
||||
if (code === 0) this.$message.success('保存成功');
|
||||
this.visible = false;
|
||||
this.$emit('submit', fields);
|
||||
} catch (err) {
|
||||
this.$message.error(err);
|
||||
}
|
||||
},
|
||||
showDrawer() {
|
||||
this.visible = true;
|
||||
this.init();
|
||||
},
|
||||
onFieldDescClick() {
|
||||
this.$emit('onFieldDescClick');
|
||||
},
|
||||
getCheckColumns(list) {
|
||||
let arr = [];
|
||||
for (let i = 0, j = list.length; i < j; i++) {
|
||||
if (list[i].editable) {
|
||||
let obj = { ...list[i], children: [] };
|
||||
for (let l = 0, k = list[i].children.length; l < k; l++) {
|
||||
if (list[i].children[l].is_show && list[i].children[l].editable) {
|
||||
obj.children.push(list[i].children[l]);
|
||||
}
|
||||
}
|
||||
if (obj.children.length) {
|
||||
arr.push(obj);
|
||||
}
|
||||
}
|
||||
}
|
||||
return arr;
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
@import './style.scss';
|
||||
</style>
|
||||
@ -2,4 +2,5 @@
|
||||
@import './table.scss';
|
||||
@import './checkbox.scss';
|
||||
@import './pagination.scss';
|
||||
@import './tabs.scss';
|
||||
@import './tabs.scss';
|
||||
@import './modal.scss';
|
||||
23
src/styles/components/modal.scss
Normal file
23
src/styles/components/modal.scss
Normal file
@ -0,0 +1,23 @@
|
||||
.arco-modal {
|
||||
.arco-modal-header {
|
||||
border-bottom: 1px solid var(--Border-1, #d7d7d9);
|
||||
height: 56px;
|
||||
padding: 0 20px;
|
||||
.arco-modal-title {
|
||||
justify-content: flex-start;
|
||||
}
|
||||
}
|
||||
|
||||
.arco-modal-body {
|
||||
padding: 24px 20px;
|
||||
}
|
||||
|
||||
.arco-modal-footer {
|
||||
display: flex;
|
||||
height: 64px;
|
||||
padding: 0px 20px;
|
||||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
border-top: 1px solid var(--Border-1, #d7d7d9);
|
||||
}
|
||||
}
|
||||
@ -22,17 +22,8 @@
|
||||
border: 1px solid var(--BG-500, #b1b2b5);
|
||||
}
|
||||
}
|
||||
.arco-modal-header {
|
||||
border-bottom: 1px solid var(--Border-1, #d7d7d9);
|
||||
height: 56px;
|
||||
padding: 0 20px;
|
||||
.arco-modal-title {
|
||||
justify-content: flex-start;
|
||||
}
|
||||
}
|
||||
|
||||
.arco-modal-body {
|
||||
padding: 24px 20px;
|
||||
.arco-form-item {
|
||||
margin-bottom: 16px;
|
||||
&:last-child {
|
||||
@ -48,15 +39,6 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.arco-modal-footer {
|
||||
display: flex;
|
||||
height: 64px;
|
||||
padding: 0px 20px;
|
||||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
border-top: 1px solid var(--Border-1, #d7d7d9);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
@ -5,7 +5,7 @@
|
||||
<span class="part-div-header-title">业务洞察报告 </span>
|
||||
</a-space>
|
||||
<a-space align="center" class="search-form-div" size="medium">
|
||||
<a-form-item field="name" class="" label="服务/产品">
|
||||
<a-form-item field="name" class="search-form" label="服务/产品">
|
||||
<a-input v-model="listQuery.name" placeholder="请搜索...">
|
||||
<template #prefix>
|
||||
<icon-search />
|
||||
|
||||
@ -12,7 +12,7 @@
|
||||
<template #icon> <icon-download /> </template>
|
||||
<template #default>导出数据</template>
|
||||
</a-button>
|
||||
<a-button class="w-110px search-btn" size="medium">
|
||||
<a-button class="w-110px search-btn" size="medium" @click="openCustomColumn">
|
||||
<template #icon>
|
||||
<img :src="icon1" width="14" height="14" />
|
||||
</template>
|
||||
@ -106,14 +106,18 @@
|
||||
</a-table-column>
|
||||
</template>
|
||||
</a-table>
|
||||
|
||||
<CustomTableColumnModal ref="modalRef" type="media_account" @success="onCustomColumnSuccess" />
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, computed } from 'vue';
|
||||
import { useRouter } from 'vue-router';
|
||||
|
||||
import { STATUS_LIST } from '../../constants';
|
||||
import { formatTableField } from '@/utils/tools';
|
||||
import { TABLE_COLUMNS } from './constants';
|
||||
import { useRouter } from 'vue-router';
|
||||
import CustomTableColumnModal from '@/components/custom-table-column-modal';
|
||||
|
||||
import icon1 from '@/assets/img/media-account/icon-custom.png';
|
||||
import icon2 from '@/assets/img/media-account/icon-warn.png';
|
||||
@ -134,6 +138,7 @@ const router = useRouter();
|
||||
|
||||
const selectedItems = ref([]);
|
||||
const tableRef = ref(null);
|
||||
const modalRef = ref(null);
|
||||
|
||||
const checkedAll = computed(
|
||||
() => selectedItems.value.length > 0 && selectedItems.value.length === props.dataSource.length,
|
||||
@ -179,6 +184,14 @@ const resetTable = () => {
|
||||
tableRef.value?.clearSorters();
|
||||
};
|
||||
|
||||
const openCustomColumn = () => {
|
||||
modalRef.value.open();
|
||||
};
|
||||
|
||||
const onCustomColumnSuccess = (selectedColumns) => {
|
||||
console.log(selectedColumns);
|
||||
};
|
||||
|
||||
defineExpose({
|
||||
resetTable,
|
||||
});
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
<view>
|
||||
<div class="part-div">
|
||||
<div>
|
||||
<a-tabs v-model:activeKey="tabData" default-active-key="acctoun">
|
||||
<a-tabs v-model:activeKey="tabData" class="a-tab-class" default-active-key="acctoun">
|
||||
<a-tab-pane key="acctoun" title="账户"></a-tab-pane>
|
||||
<a-tab-pane key="project">
|
||||
<template #title>项目</template>
|
||||
@ -10,60 +10,71 @@
|
||||
</a-tabs>
|
||||
</div>
|
||||
<a-space size="large" direction="vertical" class="search-form">
|
||||
<a-space size="large">
|
||||
<a-space>
|
||||
<span>账户名称</span>
|
||||
<a-select multiple placeholder="全部">
|
||||
<a-option>Beijing</a-option>
|
||||
<a-option>Shanghai</a-option>
|
||||
<a-option>Guangzhou</a-option>
|
||||
</a-select>
|
||||
</a-space>
|
||||
<a-space>
|
||||
<span>平台</span>
|
||||
<a-select placeholder="全部">
|
||||
<a-option>Beijing</a-option>
|
||||
<a-option>Shanghai</a-option>
|
||||
<a-option>Guangzhou</a-option>
|
||||
</a-select>
|
||||
</a-space>
|
||||
<a-space>
|
||||
<span>运营人员</span>
|
||||
<a-select placeholder="全部">
|
||||
<a-option>Beijing</a-option>
|
||||
<a-option>Shanghai</a-option>
|
||||
<a-option>Guangzhou</a-option>
|
||||
</a-select>
|
||||
</a-space>
|
||||
</a-space>
|
||||
<a-row class="grid-demo" :gutter="{ md: 8, lg: 24, xl: 32 }">
|
||||
<a-col :span="5">
|
||||
<a-space>
|
||||
<span>账户名称</span>
|
||||
<a-select :style="{ width: '320px' }" placeholder="全部">
|
||||
<a-option>Beijing</a-option>
|
||||
<a-option>Shanghai</a-option>
|
||||
<a-option>Guangzhou</a-option>
|
||||
</a-select>
|
||||
</a-space>
|
||||
</a-col>
|
||||
<a-col :span="5">
|
||||
<a-space>
|
||||
<span>平台</span>
|
||||
<a-select :style="{ width: '320px' }" placeholder="全部">
|
||||
<a-option>Beijing</a-option>
|
||||
<a-option>Shanghai</a-option>
|
||||
<a-option>Guangzhou</a-option>
|
||||
</a-select>
|
||||
</a-space>
|
||||
</a-col>
|
||||
<a-col :span="5">
|
||||
<a-space>
|
||||
<span>运营人员</span>
|
||||
<a-select :style="{ width: '320px' }" placeholder="全部">
|
||||
<a-option>Beijing</a-option>
|
||||
<a-option>Shanghai</a-option>
|
||||
<a-option>Guangzhou</a-option>
|
||||
</a-select>
|
||||
</a-space>
|
||||
</a-col>
|
||||
</a-row>
|
||||
|
||||
<a-space size="large">
|
||||
<a-space>
|
||||
<span>时间筛选</span>
|
||||
<a-range-picker
|
||||
showTime
|
||||
:time-picker-props="{
|
||||
defaultValue: ['00:00:00', '00:00:00'],
|
||||
}"
|
||||
@change="onChange"
|
||||
@select="onSelect"
|
||||
/>
|
||||
</a-space>
|
||||
<a-space>
|
||||
<a-button type="outline" class="search-btn" @click="handleSearch">
|
||||
<template #icon>
|
||||
<icon-search />
|
||||
</template>
|
||||
<template #default>搜索</template>
|
||||
</a-button>
|
||||
<a-button type="outline" class="reset-btn" @click="handleSearch">
|
||||
<template #icon>
|
||||
<icon-refresh />
|
||||
</template>
|
||||
<template #default>重置</template>
|
||||
</a-button>
|
||||
</a-space>
|
||||
</a-space>
|
||||
<a-row class="grid-demo" :gutter="{ md: 8, lg: 24, xl: 32 }">
|
||||
<a-col :span="6">
|
||||
<a-space>
|
||||
<span>时间筛选</span>
|
||||
<a-range-picker
|
||||
showTime
|
||||
:time-picker-props="{
|
||||
defaultValue: ['00:00:00', '00:00:00'],
|
||||
}"
|
||||
@change="onChange"
|
||||
@select="onSelect"
|
||||
style="width: 380px"
|
||||
/>
|
||||
</a-space>
|
||||
</a-col>
|
||||
<a-col :span="5">
|
||||
<a-space>
|
||||
<a-button type="outline" class="search-btn" @click="handleSearch">
|
||||
<template #icon>
|
||||
<icon-search />
|
||||
</template>
|
||||
<template #default>搜索</template>
|
||||
</a-button>
|
||||
<a-button type="outline" class="reset-btn" @click="handleSearch">
|
||||
<template #icon>
|
||||
<icon-refresh />
|
||||
</template>
|
||||
<template #default>重置</template>
|
||||
</a-button>
|
||||
</a-space>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</a-space>
|
||||
</div>
|
||||
|
||||
|
||||
@ -12,7 +12,7 @@
|
||||
<template #icon> <icon-download /> </template>
|
||||
<template #default>导出数据</template>
|
||||
</a-button>
|
||||
<a-button class="w-110px search-btn" size="medium">
|
||||
<a-button class="w-110px search-btn" size="medium" @click="openCustomColumn">
|
||||
<template #icon>
|
||||
<img :src="icon1" width="14" height="14" />
|
||||
</template>
|
||||
@ -118,6 +118,8 @@
|
||||
</a-table-column>
|
||||
</template>
|
||||
</a-table>
|
||||
|
||||
<CustomTableColumnModal ref="modalRef" type="media_account" @success="onCustomColumnSuccess" />
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
@ -126,6 +128,7 @@ import { STATUS_LIST } from '../../constants';
|
||||
import { formatTableField } from '@/utils/tools';
|
||||
import { TABLE_COLUMNS } from './constants';
|
||||
import { useRouter } from 'vue-router';
|
||||
import CustomTableColumnModal from '@/components/custom-table-column-modal';
|
||||
|
||||
import icon1 from '@/assets/img/media-account/icon-custom.png';
|
||||
import icon2 from '@/assets/img/media-account/icon-warn.png';
|
||||
@ -150,6 +153,7 @@ const router = useRouter();
|
||||
|
||||
const selectedItems = ref([]);
|
||||
const tableRef = ref(null);
|
||||
const modalRef = ref(null);
|
||||
|
||||
const checkedAll = computed(
|
||||
() => selectedItems.value.length > 0 && selectedItems.value.length === props.dataSource.length,
|
||||
@ -203,6 +207,14 @@ const resetTable = () => {
|
||||
tableRef.value?.clearSorters();
|
||||
};
|
||||
|
||||
const openCustomColumn = () => {
|
||||
modalRef.value.open();
|
||||
};
|
||||
|
||||
const onCustomColumnSuccess = (selectedColumns) => {
|
||||
console.log(selectedColumns);
|
||||
};
|
||||
|
||||
defineExpose({
|
||||
resetTable,
|
||||
});
|
||||
|
||||
Reference in New Issue
Block a user