OMC/fe.ems.vue3
1
0
Fork 0
Code Issues Releases 3 Activity

feat: 参数配置modal拖拽/表格列排序可选

Browse Source
This commit is contained in:
TsMask
2023-11-27 16:40:04 +08:00
parent c1d513bc82
commit ec21656385
1 changed files with 68 additions and 41 deletions
Download Patch File Download Diff File Expand all files Collapse all files

109
src/views/configManage/configParamTreeTable/index.vue
View File

@@ -1,5 +1,5 @@
<script setup lang="ts"> <script setup lang="ts">
import { reactive, ref, onMounted } from 'vue'; import { reactive, ref, onMounted, watch, toRaw, nextTick } from 'vue';
import { PageContainer } from '@ant-design-vue/pro-layout'; import { PageContainer } from '@ant-design-vue/pro-layout';
import { message } from 'ant-design-vue/lib'; import { message } from 'ant-design-vue/lib';
import useI18n from '@/hooks/useI18n'; import useI18n from '@/hooks/useI18n';
@@ -13,7 +13,6 @@ import {
addParamConfigInfo, addParamConfigInfo,
} from '@/api/configManage/configParam'; } from '@/api/configManage/configParam';
import useNeInfoStore from '@/store/modules/neinfo'; import useNeInfoStore from '@/store/modules/neinfo';
import { toRaw } from 'vue';
import { regExpIPv4, regExpIPv6 } from '@/utils/regular-utils'; import { regExpIPv4, regExpIPv6 } from '@/utils/regular-utils';
import { SizeType } from 'ant-design-vue/lib/config-provider'; import { SizeType } from 'ant-design-vue/lib/config-provider';
import { DataNode } from 'ant-design-vue/lib/tree'; import { DataNode } from 'ant-design-vue/lib/tree';
@@ -109,7 +108,7 @@ function fnActiveConfigNode(key: string | number) {
align: 'left', align: 'left',
resizable: true, resizable: true,
width: 150, width: 150,
minWidth: 150, minWidth: 100,
maxWidth: 350, maxWidth: 350,
}); });
} }
@@ -304,6 +303,14 @@ let arrayState: ArrayStateType = reactive({
dataRule: {}, dataRule: {},
}); });
/**监听表格字段列排序变化关闭展开 */
watch(
() => arrayState.columnsDnd,
() => {
arrayEditClose();
}
);
/**多列表编辑 */ /**多列表编辑 */
function arrayEdit(rowIndex: Record<string, any>) { function arrayEdit(rowIndex: Record<string, any>) {
const item = arrayState.data.find((s: any) => s.key === rowIndex.value); const item = arrayState.data.find((s: any) => s.key === rowIndex.value);
@@ -502,6 +509,8 @@ type ArrayChildStateType = {
size: SizeType; size: SizeType;
/**多列嵌套记录字段 */ /**多列嵌套记录字段 */
columns: Record<string, any>[]; columns: Record<string, any>[];
/**表格字段列排序 */
columnsDnd: Record<string, any>[];
/**多列记录数据 */ /**多列记录数据 */
columnsData: Record<string, any>[]; columnsData: Record<string, any>[];
@@ -517,6 +526,7 @@ let arrayChildState: ArrayChildStateType = reactive({
loc: '', loc: '',
size: 'middle', size: 'middle',
columns: [], columns: [],
columnsDnd: [],
columnsData: [], columnsData: [],
data: [], data: [],
dataRule: {}, dataRule: {},
@@ -590,7 +600,10 @@ function arrayChildExpand(
title: rule.display, title: rule.display,
dataIndex: rule.name, dataIndex: rule.name,
align: 'left', align: 'left',
width: 5, resizable: true,
width: 50,
minWidth: 50,
maxWidth: 250,
}); });
} }
columns.push({ columns.push({
@@ -599,16 +612,18 @@ function arrayChildExpand(
key: 'index', key: 'index',
align: 'center', align: 'center',
fixed: 'right', fixed: 'right',
width: 3, width: 100,
}); });
arrayChildState.columns = columns; arrayChildState.columns = columns;
// 设置展开key nextTick(() => {
arrayState.arrayChildExpandKeys = [indexRow]; // 设置展开key
arrayState.arrayChildExpandKeys = [indexRow];
arrayChildState.loc = `${loc}/${from['name']}`; // 层级标识
// 设置展开列表标题 arrayChildState.loc = `${loc}/${from['name']}`;
arrayChildState.title = `${from['display']}`; // 设置展开列表标题
arrayChildState.title = `${from['display']}`;
});
} }
/**多列表展开嵌套行 */ /**多列表展开嵌套行 */
@@ -1283,35 +1298,38 @@ onMounted(() => {
<a-table <a-table
class="table" class="table"
row-key="index" row-key="index"
:columns="treeState.selectNode.method === 'get' ? arrayState.columns.filter((s:any)=>s.key !== 'index') : arrayState.columns" :columns="treeState.selectNode.method === 'get' ? arrayState.columnsDnd.filter((s:any)=>s.key !== 'index') : arrayState.columnsDnd"
:data-source="arrayState.columnsData" :data-source="arrayState.columnsData"
:size="arrayState.size" :size="arrayState.size"
:pagination="false" :pagination="false"
:bordered="true" :bordered="true"
:scroll="{ x: arrayState.columns.length * 200, y: 450 }" :scroll="{ x: arrayState.columnsDnd.length * 200, y: 450 }"
@resizeColumn="(w:number, col:any) => (col.width = w)" @resizeColumn="(w:number, col:any) => (col.width = w)"
:show-expand-column="false" :show-expand-column="false"
v-model:expanded-row-keys="arrayState.arrayChildExpandKeys" v-model:expanded-row-keys="arrayState.arrayChildExpandKeys"
> >
<!-- 多列新增操作 --> <!-- 多列新增操作 -->
<template #title v-if="treeState.selectNode.method !== 'get'"> <template #title v-if="treeState.selectNode.method !== 'get'">
<a-button <a-space :size="16" align="center">
type="primary" <a-button
@click.prevent="arrayAdd()" type="primary"
size="small" @click.prevent="arrayAdd()"
> size="small"
<template #icon> <PlusOutlined /> </template> >
{{ t('common.addText') }} <template #icon> <PlusOutlined /> </template>
</a-button> {{ t('common.addText') }}
<TableColumnsDnd </a-button>
:columns="arrayState.columns" <TableColumnsDnd
v-model:columns-dnd="arrayState.columnsDnd" type="ghost"
></TableColumnsDnd> :columns="[...arrayState.columns]"
v-model:columns-dnd="arrayState.columnsDnd"
></TableColumnsDnd>
</a-space>
</template> </template>
<!-- 多列数据渲染 --> <!-- 多列数据渲染 -->
<template #bodyCell="{ column, text, record }"> <template #bodyCell="{ column, text, record }">
<template v-if="column.key === 'index'"> <template v-if="column?.key === 'index'">
<a-space :size="16" align="center"> <a-space :size="16" align="center">
<a-tooltip> <a-tooltip>
<template #title>{{ t('common.editText') }}</template> <template #title>{{ t('common.editText') }}</template>
@@ -1327,7 +1345,7 @@ onMounted(() => {
</a-tooltip> </a-tooltip>
</a-space> </a-space>
</template> </template>
<template v-else> <template v-else-if="text">
<a-tooltip placement="topLeft"> <a-tooltip placement="topLeft">
<template #title v-if="text.comment"> <template #title v-if="text.comment">
{{ text.comment }} {{ text.comment }}
@@ -1370,28 +1388,37 @@ onMounted(() => {
<a-table <a-table
class="table" class="table"
row-key="index" row-key="index"
:columns="arrayChildState.columns" :columns="arrayChildState.columnsDnd"
:data-source="arrayChildState.columnsData" :data-source="arrayChildState.columnsData"
:size="arrayChildState.size" :size="arrayChildState.size"
:pagination="false" :pagination="false"
:bordered="true" :bordered="true"
:scroll="{ :scroll="{
x: arrayChildState.columns.length * 200, x: arrayChildState.columnsDnd.length * 200,
y: 450, y: 450,
}" }"
@resizeColumn="(w:number, col:any) => (col.width = w)"
> >
<template #title> <template #title>
<a-button <a-space :size="16" align="center">
type="primary" <a-button
@click.prevent="arrayChildAdd" type="primary"
size="small" @click.prevent="arrayChildAdd"
> size="small"
<template #icon> <PlusOutlined /> </template> >
{{ t('common.addText') }} {{ arrayChildState.title }} <template #icon> <PlusOutlined /> </template>
</a-button> {{ t('common.addText') }} {{ arrayChildState.title }}
</a-button>
<TableColumnsDnd
type="ghost"
:columns="[...arrayChildState.columns]"
v-model:columns-dnd="arrayChildState.columnsDnd"
v-if="arrayChildState.loc"
></TableColumnsDnd>
</a-space>
</template> </template>
<template #bodyCell="{ column, text, record }"> <template #bodyCell="{ column, text, record }">
<template v-if="column.key === 'index'"> <template v-if="column?.key === 'index'">
<a-space :size="8" align="center"> <a-space :size="8" align="center">
<a-tooltip> <a-tooltip>
<template #title>{{ t('common.editText') }}</template> <template #title>{{ t('common.editText') }}</template>
@@ -1415,7 +1442,7 @@ onMounted(() => {
</a-tooltip> </a-tooltip>
</a-space> </a-space>
</template> </template>
<template v-else> <template v-else-if="text">
<a-tooltip placement="topLeft"> <a-tooltip placement="topLeft">
<template #title v-if="text.comment"> <template #title v-if="text.comment">
{{ text.comment }} {{ text.comment }}
@@ -1453,7 +1480,7 @@ onMounted(() => {
</a-row> </a-row>
<!-- 新增框或修改框 --> <!-- 新增框或修改框 -->
<a-modal <DraggableModal
width="800px" width="800px"
:body-style="{ maxHeight: '650px', 'overflow-y': 'auto' }" :body-style="{ maxHeight: '650px', 'overflow-y': 'auto' }"
:keyboard="false" :keyboard="false"
@@ -1530,7 +1557,7 @@ onMounted(() => {
</a-tooltip> </a-tooltip>
</a-form-item> </a-form-item>
</a-form> </a-form>
</a-modal> </DraggableModal>
</PageContainer> </PageContainer>
</template> </template>