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

src/views/configManage/configParamTreeTable/index.vue

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