renxiaodong/lingji-work-fe
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 投放账户数据

Browse Source
This commit is contained in:
rd
2025-07-02 17:55:20 +08:00
parent b8d88cd6cb
commit 2b4e691f4e
21 changed files with 222 additions and 860 deletions
Download Patch File Download Diff File Expand all files Collapse all files

389
src/components/custom-table-column-modal/test.vue
View File

@ -1,389 +0,0 @@
<!--
* @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">&nbsp;&nbsp;取消&nbsp;&nbsp;</el-button>
<el-button type="primary" @click="onSubmit">&nbsp;&nbsp;确定&nbsp;&nbsp;</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>