feat: 配置-网元管理添加Column settings

src/views/configManage/neManage/index.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { reactive, onMounted, toRaw } from 'vue';
+import { reactive, onMounted, toRaw, ref } from 'vue';
 import { PageContainer } from 'antdv-pro-layout';
 import { message, Modal, Form } from 'ant-design-vue/lib';
 import { SizeType } from 'ant-design-vue/lib/config-provider';
@@ -22,6 +22,7 @@ import { updateNeConfigReload } from '@/api/configManage/configParam';
 import useI18n from '@/hooks/useI18n';
 import { FileType } from 'ant-design-vue/lib/upload/interface';
 import { UploadRequestOption } from 'ant-design-vue/lib/vc-upload/interface';
+import TableColumnsDnd from '@/components/TableColumnsDnd/index.vue';
 import { RESULT_CODE_SUCCESS } from '@/constants/result-constants';
 import { NE_TYPE_LIST } from '@/constants/ne-constants';
 import useNeInfoStore from '@/store/modules/neinfo';
@@ -87,71 +88,74 @@ let tableColumns: ColumnsType = [
     title: t('views.configManage.neManage.neType'),
     dataIndex: 'neType',
     align: 'center',
-    width: 3,
+    width: 100,
   },
   {
     title: t('views.configManage.neManage.neId'),
     dataIndex: 'neId',
     align: 'center',
-    width: 3,
-  },
-  {
-    title: t('views.configManage.neManage.uid'),
-    dataIndex: 'rmUid',
-    align: 'center',
-    width: 5,
-  },
-  {
-    title: t('views.configManage.neManage.neName'),
-    dataIndex: 'neName',
-    align: 'center',
-    width: 5,
+    width: 100,
   },
   {
     title: t('views.configManage.neManage.ip'),
     dataIndex: 'ip',
     align: 'center',
-    width: 5,
+    width: 150,
   },
   {
     title: t('views.configManage.neManage.port'),
     dataIndex: 'port',
     align: 'center',
-    width: 3,
+    width: 100,
+  },
+  {
+    title: t('views.configManage.neManage.neName'),
+    dataIndex: 'neName',
+    align: 'center',
+    width: 150,
+  },
+  {
+    title: t('views.configManage.neManage.uid'),
+    dataIndex: 'rmUid',
+    align: 'center',
+    width: 200,
   },
   {
     title: t('views.configManage.neManage.pvflag'),
     dataIndex: 'pvFlag',
     align: 'center',
-    width: 5,
+    width: 100,
   },
   {
     title: t('views.configManage.neManage.province'),
     dataIndex: 'province',
     align: 'center',
-    width: 5,
+    width: 100,
   },
   {
     title: t('views.configManage.neManage.vendorName'),
     dataIndex: 'vendorName',
     align: 'center',
-    width: 5,
+    width: 150,
   },
   {
     title: t('views.configManage.neManage.dn'),
     dataIndex: 'dn',
     align: 'center',
-    width: 5,
+    width: 200,
   },
   {
     title: t('common.operate'),
     key: 'id',
     align: 'center',
     fixed: 'right',
-    width: 5,
+    width: 150,
   },
 ];
 
+/**表格字段列排序 */
+let tableColumnsDnd = ref<ColumnsType>([]);
+
 /**表格分页器参数 */
 let tablePagination = reactive({
   /**当前页数 */
@@ -841,6 +845,11 @@ onMounted(() => {
               <template #icon><ReloadOutlined /></template>
             </a-button>
           </a-tooltip>
+          <TableColumnsDnd
+            cache-id="neManageData"
+            :columns="tableColumns"
+            v-model:columns-dnd="tableColumnsDnd"
+          ></TableColumnsDnd>
           <a-tooltip>
             <template #title>{{ t('common.sizeText') }}</template>
             <a-dropdown trigger="click" placement="bottomRight">
@@ -872,15 +881,15 @@ onMounted(() => {
       <a-table
         class="table"
         row-key="id"
-        :columns="tableColumns"
+        :columns="tableColumnsDnd"
         :loading="tableState.loading"
         :data-source="tableState.data"
         :size="tableState.size"
         :pagination="tablePagination"
-        :scroll="{ x: 2000, y: 480 }"
+        :scroll="{ y: 'calc(100vh - 480px)' }"
       >
         <template #bodyCell="{ column, record }">
-          <template v-if="column.key === 'id'">
+          <template v-if="column?.key === 'id'">
             <a-space :size="8" align="center">
               <a-tooltip>
                 <template #title>{{ t('common.editText') }}</template>