feat: 工况库视图切换

src/utils/i18n/en.ts

@@ -133,6 +133,10 @@ const lang = {
     '新增': 'Add',
     '编辑': 'Edit',
     '审批预览提示': 'Green row indicates new content, blue row indicates modified content, red row indicates deleted content',
+    '切换至一维表格视图': 'Switch to List View',
+    '切换至树结构视图': 'Switch to Tree View',
+    '不能提交空数据': 'Cannot submit empty data',
+    '没有修改的数据需要提交审批': 'No modified data to submit for approval',
   },
   '知识库': {
     '上传': 'Upload',

src/utils/i18n/zh.ts

@@ -133,6 +133,10 @@ const lang = {
     '新增': '新增',
     '编辑': '编辑',
     '审批预览提示': '绿色行表示新增内容，蓝色行表示修改内容，红色行表示删除内容',
+    '切换至一维表格视图': '切换至一维表格视图',
+    '切换至树结构视图': '切换至树结构视图',
+    '不能提交空数据': '不能提交空数据',
+    '没有修改的数据需要提交审批': '没有修改的数据需要提交审批',
   },
   '知识库': {
     '上传': '上传',

src/views/competenceCenter/condition/components/taskPool.scss

@@ -106,3 +106,9 @@
 .flex-end {
   margin-bottom: var(--margin-small);
 }
+
+.icon-change-view {
+  cursor: pointer;
+  margin-left: var(--margin-small);
+  color: var(--color);
+}

src/views/competenceCenter/condition/components/taskPool.vue

@@ -73,30 +73,32 @@
                   />
                 </el-select>
               </el-form-item>
-              <el-form-item :label="$t('工况库.显示配置')" :label-width="80">
-                <el-select
-                  v-model="currentTableType"
-                  :fit-input-width="true"
-                  :options="tableTypeOptions"
-                  @change='onTableTypeChangeFun'
-                >
-                </el-select>
-              </el-form-item>
             </el-form>
           </div>
         </el-space>
       </div>
       <loadCaseTable
-        v-show="currentTableType === 'tree'"
+        v-show="currentTableType === TableViewType.TREE"
         ref="treeTableRef"
         tableName="TASK_POOL"
         :modalTableNameList="['TASK_POOL_CATEGORY', 'TASK_POOL_TASK', 'TASK_POOL_PERFORMANCE']"
         :data="tableData"
         :loading="loading"
         :editMode="true"
-      > </loadCaseTable>
+      >
+        <template #otherLeftOptions>
+          <el-tooltip v-if="currentTableType === TableViewType.TREE" :content="$t('工况库.切换至一维表格视图')" placement="top" >
+            <div class="icon-change-view" @click="onTableTypeChangeFun(TableViewType.LIST)">
+              <el-icon :size="18">
+                <Grid />
+              </el-icon>
+            </div>
+          </el-tooltip>
+        </template>
+
+      </loadCaseTable>
       <loadCaseTable
-        v-show="currentTableType === 'list'"
+        v-show="currentTableType === TableViewType.LIST"
         ref="listTableRef"
         border="full"
         :hasOperationColumn="false"
@@ -110,6 +112,16 @@
         @filterReset="onListTableFilterResetFun"
         @filterConfirm="onListTableFilterConfirmFun"
       >
+        <template #otherLeftOptions>
+          <el-tooltip :content="$t('工况库.切换至树结构视图')" placement="top" >
+            <div class="icon-change-view" @click="onTableTypeChangeFun(TableViewType.TREE)">
+              <el-icon :size="18">
+                <Tickets />
+              </el-icon>
+            </div>
+          </el-tooltip>
+
+        </template>
       </loadCaseTable>
     </div>
     <div class="contain" v-if="pageType !== 'loadcase'">
@@ -217,8 +229,10 @@ import addPoolModal from './addPoolModal.vue';
 import delPoolModal from './delPoolModal.vue';
 import importPoolModal from './importPoolModal.vue';
 import type { Pool, Extra } from './types';
+import { TableViewType } from './types';
 import type { TreeNode } from '@/utils/enum/node';
 import { getUserTenantId } from '@/utils/user';
+import i18n from '@/utils/i18n';
 
 const props = defineProps(['pageType']);
 
@@ -255,21 +269,19 @@ const getRecordSetFun = () => {
   return treeTableRef?.value?.loadcaseTableRef?.TreeTableRef?.getRecordSetFun();
 };
 
-// 获取指标库
 const performanceLoading = ref<boolean>(false);
 const performanceData = ref<any>([]);
 
 const dialogApproveUserVisible = ref(false);
-// 打开选中评审人弹窗
 const openAddApproveUserFun = () => {
   const { visibleData } = getVxeRef()?.getTableData();
   if (!visibleData.length) {
-    ElMessage.warning('不能提交空数据');
+    ElMessage.warning(i18n?.global?.t('工况库.不能提交空数据') as string);
     return;
   }
   if (!isEmptyPool.value) {
     if (!isHaveNotSave()) {
-      ElMessage.warning('没有修改的数据需要提交审批');
+      ElMessage.warning(i18n?.global?.t('工况库.没有修改的数据需要提交审批') as string);
       return;
     }
   }
@@ -280,11 +292,8 @@ const openAddApproveUserFun = () => {
 const isEmptyPool = ref(true);
 const currentPoolBrief = ref();
 const currentPoolBriefVersion = ref();
-const currentTableType = ref('tree');
-const tableTypeOptions = ref([
-  { label: '树结构', value: 'tree' },
-  { label: '一维表格', value: 'list' },
-]);
+const currentTableType = ref(TableViewType.TREE);
+
 const mergeListTableColumnsFun = (flattenData?: any[]) => {
   if (flattenData) {
     extractTableData.value = flattenData;
@@ -298,8 +307,9 @@ const mergeListTableColumnsFun = (flattenData?: any[]) => {
     vxeInstance.setMergeCells(mergeCells);
   });
 };
-const onTableTypeChangeFun = (type: string) => {
-  if (type === 'list') {
+const onTableTypeChangeFun = (type: TableViewType) => {
+  currentTableType.value = type;
+  if (type === TableViewType.LIST) {
     mergeListTableColumnsFun();
   }
 };
@@ -735,7 +745,7 @@ const queryTaskPoolFun = async () => {
     tableData.value = tree;
     originalSnapshot = cloneDeep(tree);
     isEmptyPool.value = false;
-    if (currentTableType.value === 'list') {
+    if (currentTableType.value === TableViewType.LIST) {
       mergeListTableColumnsFun(res.data.nodes);
     }
     expandAllFun();
@@ -955,7 +965,7 @@ const onImportPoolConfirmFun = async (formData: any) => {
     const tree = transformPoolNodesToTree(res.data.nodes);
     tableData.value = tree;
     expandAllFun();
-    if (currentTableType.value === 'list') {
+    if (currentTableType.value === TableViewType.LIST) {
       mergeListTableColumnsFun();
     }
   }

src/views/competenceCenter/condition/components/types.ts

@@ -21,3 +21,8 @@ export interface Extra {
   nodeId?: string;
   poolName?: string;
 };
+
+export enum TableViewType {
+  TREE = 'tree',
+  LIST = 'list'
+}