update:表格按钮

2025-11-20 11:42:28 +08:00
parent 8520aae64e
commit 880290d3e8
6 changed files with 198 additions and 43 deletions
--- a/src/api/project/node.ts
+++ b/src/api/project/node.ts
@@ -91,3 +91,11 @@ export const getUserGroupDifficultyStatisticsApi = (params: any) => {
 export const getCommonCompleteStatisticsApi = (params: any) => {
  return post(`${PREFIX}node/getCommonCompleteStatistics`, params);
 };
+// 新增任务（数据总览专用）
+export const addTaskForDataApi = (params: any) => {
+  return post(`${PREFIX}node/addTaskForData`, params);
+};
+// 新增节点（数据总览专用）
+export const addNodeForDataApi = (params: any) => {
+  return post(`${PREFIX}node/addNodeForData`, params);
+};
--- a/src/components/common/table/baseTable.vue
+++ b/src/components/common/table/baseTable.vue
@@ -69,7 +69,7 @@
          showDragTip: false
        }"
      >
-        <vxe-column v-if="showCheckbox" type="checkbox" width="60" align="center" header-align="left"></vxe-column>
+        <vxe-column v-if="showCheckbox" type="checkbox" width="60" align="center" header-align="center"></vxe-column>
        <vxe-column v-if="showIndex" type="seq" width="80" align="center" header-align="left" />
        <vxe-column
          v-for="(item) in tableHeadVisible"
@@ -90,15 +90,34 @@
          </template>
        </vxe-column>
        <vxe-column
-          v-if="$slots.tableActions"
+          v-if="$slots.tableActions || actionList"
          title="操作"
-          :width="actionsWidth"
+          :width="$slots.tableActions ? actionsWidth : actionAutoWidth"
          align="center"
          header-align="left"
          fixed="right"
        >
          <template #default="{ row }">
-            <slot name="tableActions" :row="row" />
+            <div class="actions">
+              <template v-for="(action, aIndex) in actionList" :key="aIndex">
+                <el-link v-if="!(action.hide && action.hide(row)) && (aIndex < visibleIndex(row))" class="action-item" :type="action.type" @click="actionClickFun(row, action)">
+                  {{ action.title }}
+                </el-link>
+              </template>
+              <el-dropdown v-if="visibleNum(row) > 2">
+                <el-icon>
+                  <MoreFilled />
+                </el-icon>
+                <template #dropdown>
+                  <el-dropdown-menu>
+                    <template v-for="(action, aIndex) in actionList" :key="aIndex">
+                      <el-dropdown-item v-if="!(action.hide && action.hide(row)) && (aIndex >= visibleIndex(row))" @click="actionClickFun(row, action)">{{ action.title }}</el-dropdown-item>
+                    </template>
+                  </el-dropdown-menu>
+                </template>
+              </el-dropdown>
+              <slot name="tableActions" :row="row" />
+            </div>
          </template>
        </vxe-column>
      </vxe-table>
@@ -124,7 +143,8 @@

 <script setup lang="ts">
 import { ref, onMounted, watch } from 'vue';
-import { Download, Upload, Setting, Menu, List } from '@element-plus/icons-vue';
+import { ElMessageBox } from 'element-plus';
+import { Download, Upload, Setting, Menu, List, MoreFilled } from '@element-plus/icons-vue';
 import type { TableHead, ApiParams, ApiResult } from './types';
 import TableSearch from './tableSearch.vue';
 import TableFormDia from './tableFormDia.vue';
@@ -150,6 +170,7 @@ interface Props {
  showExport?: boolean;
  showImport?: boolean;
  listTitle?: string;
+  actionList?: any;
 }

 const props = withDefaults(defineProps<Props>(), {
@@ -169,6 +190,7 @@ const props = withDefaults(defineProps<Props>(), {
  showExport: false,
  showImport: false,
  listTitle: '',
+  actionList: [],
 });

 const tableData = ref<any[]>([]);
@@ -183,6 +205,29 @@ const loading = ref(false);
 const vxeTableRef = ref<any>();
 const tableSearchRef = ref<any>();
 const searchList = ref<any>(props.searchItems);
+const actionAutoWidth = ref(95);
+const visibleIndex = (row: any) => { // 按钮index扣除隐藏的按钮，大于2个则放入下拉中
+  return 2 + props.actionList.length - props.actionList.filter((d: any) => !(d.hide && d.hide(row))).length;
+};
+const visibleNum = (row: any) => { // 展示按钮数量
+  return props.actionList.filter((d: any) => !(d.hide && d.hide(row))).length;
+};
+
+watch(() => props.actionList, (list: any) => {
+  let width = 16; // cell内边距
+  list.some((item: any, index: number) => {
+    if (index < 2) {
+      width += item.title.length * 14; // 一个汉字14
+      width += 8; // 内边距
+    } else {
+      return true;
+    }
+  });
+  if (list.length > 2) {
+    width += 20; // 更多宽度
+  }
+  actionAutoWidth.value = width;
+}, { immediate: true });

 watch(() => props.params, (val: any) => {
  resetFun(val);
@@ -341,6 +386,20 @@ const setOptionsFun = (key: string, options: any[]) => {
 const searchLoadFun = () => {
  emit('load');
 };
+const actionClickFun = (row: any, action: any) => {
+  const { click, needConfirm, confirmTip } = action;
+  if (click) {
+    if (needConfirm) {
+      ElMessageBox.confirm(confirmTip || '确定操作吗？', '提示', {
+        type: 'warning',
+      }).then(() => {
+        click(row);
+      }).catch(() => {});
+    } else {
+      click(row);
+    }
+  }
+};

 watch(() => props.tableName, () => {
  initFun();
@@ -394,6 +453,14 @@ defineExpose({
      }
    }
  }
+  .actions {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    .action-item {
+      padding: 0 4px;
+    }
+  }
  .pagination {
    width: 100%;
    display: flex;
--- a/src/components/common/table/treeTable.vue
+++ b/src/components/common/table/treeTable.vue
@@ -67,7 +67,7 @@
          showDragTip: false
        }"
      >
-        <vxe-column v-if="showCheckbox" type="checkbox" width="60" align="center" header-align="left" fixed="left"></vxe-column>
+        <vxe-column v-if="showCheckbox" type="checkbox" width="60" align="center" header-align="center"></vxe-column>
        <vxe-column v-if="showIndex" type="seq" width="80" align="center" header-align="left" fixed="left" />
        <vxe-column
          v-for="(item) in tableHeadVisible"
@@ -127,15 +127,34 @@
          </template>
        </vxe-column>
        <vxe-column
-          v-if="$slots.tableActions"
+          v-if="$slots.tableActions || actionList"
          title="操作"
-          :width="actionsWidth"
+          :width="$slots.tableActions ? actionsWidth : actionAutoWidth"
          align="center"
          header-align="left"
          fixed="right"
        >
          <template #default="{ row }">
-            <slot name="tableActions" :row="row" />
+            <div class="actions">
+              <template v-for="(action, aIndex) in actionList" :key="aIndex">
+                <el-link v-if="!(action.hide && action.hide(row)) && (aIndex < visibleIndex(row))" class="action-item" :type="action.type" @click="actionClickFun(row, action)">
+                  {{ action.title }}
+                </el-link>
+              </template>
+              <el-dropdown v-if="visibleNum(row) > 2">
+                <el-icon>
+                  <MoreFilled />
+                </el-icon>
+                <template #dropdown>
+                  <el-dropdown-menu>
+                    <template v-for="(action, aIndex) in actionList" :key="aIndex">
+                      <el-dropdown-item v-if="!(action.hide && action.hide(row)) && (aIndex >= visibleIndex(row))" @click="actionClickFun(row, action)">{{ action.title }}</el-dropdown-item>
+                    </template>
+                  </el-dropdown-menu>
+                </template>
+              </el-dropdown>
+              <slot name="tableActions" :row="row" />
+            </div>
          </template>
        </vxe-column>
      </vxe-table>
@@ -146,7 +165,8 @@

 <script setup lang="ts">
 import { ref, onMounted, watch, nextTick } from 'vue';
-import { Download, Upload, Filter, Finished } from '@element-plus/icons-vue';
+import { ElMessageBox } from 'element-plus';
+import { Download, Upload, Filter, Finished, MoreFilled } from '@element-plus/icons-vue';
 import type { TableHead } from './types';
 import TableSearch from './tableSearch.vue';
 import TableFormDia from './tableFormDia.vue';
@@ -171,6 +191,7 @@ interface Props {
  data: any;
  editMode?: boolean;
  listTitle?: string;
+  actionList?: any;
 }

 const props = withDefaults(defineProps<Props>(), {
@@ -188,6 +209,7 @@ const props = withDefaults(defineProps<Props>(), {
  data: [],
  editMode: false,
  listTitle: '',
+  actionList: [],
 });

 const tableData = ref<any[]>([]);
@@ -207,6 +229,29 @@ const editData = ref<any>([]);
 const formatData = ref<any>([]);
 const filterData = ref<any>({});
 let originData: any = [];
+const actionAutoWidth = ref(95);
+const visibleIndex = (row: any) => { // 按钮index扣除隐藏的按钮，大于2个则放入下拉中
+  return 2 + props.actionList.length - props.actionList.filter((d: any) => !(d.hide && d.hide(row))).length;
+};
+const visibleNum = (row: any) => { // 展示按钮数量
+  return props.actionList.filter((d: any) => !(d.hide && d.hide(row))).length;
+};
+
+watch(() => props.actionList, (list: any) => {
+  let width = 16; // cell内边距
+  list.some((item: any, index: number) => {
+    if (index < 2) {
+      width += item.title.length * 14; // 一个汉字14
+      width += 8; // 内边距
+    } else {
+      return true;
+    }
+  });
+  if (list.length > 2) {
+    width += 20; // 更多宽度
+  }
+  actionAutoWidth.value = width;
+}, { immediate: true });

 watch(() => props.data, (data) => {
  data.forEach((item: any) => {
@@ -411,6 +456,21 @@ const getRecordSetFun = () => {
  };
 };

+const actionClickFun = (row: any, action: any) => {
+  const { click, needConfirm, confirmTip } = action;
+  if (click) {
+    if (needConfirm) {
+      ElMessageBox.confirm(confirmTip || '确定操作吗？', '提示', {
+        type: 'warning',
+      }).then(() => {
+        click(row);
+      }).catch(() => {});
+    } else {
+      click(row);
+    }
+  }
+};
+
 watch(() => props.tableName, () => {
  initFun();
 });
@@ -468,6 +528,14 @@ defineExpose({
      }
    }
  }
+  .actions {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    .action-item {
+      padding: 0 4px;
+    }
+  }
  .table {
    width: 100%;
    height: calc(100% - 32px - 10px);
--- a/src/views/competenceCenter/condition/components/taskPool.vue
+++ b/src/views/competenceCenter/condition/components/taskPool.vue
@@ -254,7 +254,7 @@
 <script lang="ts" setup>
 import { computed, nextTick, onMounted, ref, type Ref } from 'vue';
 import { ElMessageBox, ElMessage } from 'element-plus';
-import { cloneDeep, get, groupBy, isEqual, uniqBy } from 'lodash-es';
+import { cloneDeep, groupBy, isEqual, uniqBy } from 'lodash-es';
 import { onBeforeRouteLeave, useRouter } from 'vue-router';
 import loadCaseTable from '@/components/common/treeCaseTable/loadCaseTable.vue';
 import { initProjectDicts, taskPoolDictOptions } from '@/utils/project';
@@ -349,17 +349,17 @@ const isHaveNotSave = () => {
  }
 };

-const saveType = ref<string>('');
+// const saveType = ref<string>('');

-const refreshData = async (callback?: any) => {
-  if (callback) {
-    callback();
-  }
-  // 指标库
-  if (props.pageType === 'performance') {
-  }
-  saveType.value = '';
-};
+// const refreshData = async (callback?: any) => {
+//   if (callback) {
+//     callback();
+//   }
+//   // 指标库
+//   if (props.pageType === 'performance') {
+//   }
+//   saveType.value = '';
+// };

 const treeTableRef = ref();
 const listTableRef = ref();
@@ -737,10 +737,10 @@ const formatDelFun = (removeRecords: TreeNode[]) => {
  };
 };

-const tableKey = ref<any>(new Date().getTime());
-const changeLoadcaseOrPerformanceType = () => {
-  tableKey.value = new Date().getTime();
-};
+// const tableKey = ref<any>(new Date().getTime());
+// const changeLoadcaseOrPerformanceType = () => {
+//   tableKey.value = new Date().getTime();
+// };
 const router = useRouter();
 const pendingRoute: any = ref(null);
 const suppressConfirm = ref(false);
--- a/src/views/data/overview/index.vue
+++ b/src/views/data/overview/index.vue
@@ -160,7 +160,7 @@
 import { ref, onMounted } from 'vue';
 import FileTree from '@/components/common/dataFileTree/index.vue';
 import { getSimulationNodeTreeApi, getAllTemplateApi } from '@/api/data/dimensionTemplate';
-import { modifyNodeTaskPerformanceApi } from '@/api/project/node';
+import { addNodeForDataApi } from '@/api/project/node';
 import { dataOverViewListSimulationNodeFilesApi, dataOverViewDeleteSimulationNodeFilesApi, dataOverViewUploadSimulationNodeFilesApi } from '@/api/data/dataOverView';
 import BaseTable from '@/components/common/table/baseTable.vue';
 import Configuration from './components/configuration.vue';
@@ -308,9 +308,10 @@ const addNodeFun = (data: any) => {
    }],
    tagMap: getTagMapList(),
  };
-  modifyNodeTaskPerformanceApi(params).then((res: any) => {
+  addNodeForDataApi(params).then((res: any) => {
    if (res.code === 200) {
      ElMessage.success('操作成功');
+      modalVisible.value = false;
      reloadFun();
    }
  });
--- a/src/views/task/projectList/index.vue
+++ b/src/views/task/projectList/index.vue
@@ -9,7 +9,7 @@
        tableName="NODE_LIST_LEVEL1"
        :api="nodeListApi"
        :searchLimitNum="3"
-        :actionsWidth="tableActionsLength['2-2-2']"
+        :actionList="actionList"
      >
        <template #cardTemplate="{tableData}">
          <div class="project-card-box" >
@@ -80,20 +80,6 @@
        <template #memberList="{row}">
          {{ disposeMemberList(row) }}
        </template>
-        <template #tableActions="{ row }">
-          <div class="gl-table-actions">
-            <el-link type="primary" @click="goProjectDetailFun(row.uuid,row.nodeName)">查看</el-link>
-            <el-link type="primary" @click="openProjectInfoDiaFun('edit',row)">编辑</el-link>
-            <el-popconfirm
-              title="确认删除吗？"
-              @confirm="deleteNodeFun(row)"
-            >
-              <template #reference>
-                <el-link type="danger">删除</el-link>
-              </template>
-            </el-popconfirm>
-          </div>
-        </template>
      </BaseTable>
    </div>
  </div>
@@ -124,7 +110,6 @@ import { ElMessage } from 'element-plus';
 import { NODE_TYPE } from '@/utils/enum/node';
 import { disposeMemberList } from '../projectDetail/components/project';
 import { useDict } from '@/utils/useDict';
-import { tableActionsLength } from '@/utils/common';
 import dayjs from 'dayjs';
 import ProjectDetail from '../projectDetail/index.vue';

@@ -159,6 +144,32 @@ interface IProjectInfo {
  description: string;
 }

+const actionList = ref<any>([
+  {
+    title: '查看',
+    type: 'primary',
+    click: (row: any) => {
+      goProjectDetailFun(row.uuid, row.nodeName);
+    },
+  },
+  {
+    title: '编辑',
+    type: 'primary',
+    click: (row: any) => {
+      openProjectInfoDiaFun('edit', row);
+    },
+  },
+  {
+    title: '删除',
+    type: 'danger',
+    needConfirm: true,
+    confirmTip: '确认删除吗？',
+    click: (row: any) => {
+      deleteNodeFun(row);
+    },
+  },
+]);
+
 // const router = useRouter();
 const basePageRef = ref();
 const nodePageRef = ref();