feat: 自定义列
This commit is contained in:
rd
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>
|
||||
Reference in New Issue
Block a user