macao

wujingjing

2025-04-08 c320220c0f882d36d4b5c571b35deb201f7807ac

 src/views/project/yw/systemManage/dimensionMgr/DimensionMgr.vue

@@ -5,11 +5,31 @@
            <el-form-item label="名称" prop="title">
               <el-input v-model="queryParams.title" style="width: 226.4px" placeholder="名称" clearable @input="debounceQueryTable" />
            </el-form-item>
            <el-form-item label="主题域" prop="metrics_group">
               <el-tree-select
                  filterable
                  style="width: 206.4px"
                  :props="{
                     id: 'group_id',
                     label: 'group_name',
                     children: 'Children',
                  }"
                  v-model="queryParams.group"
                  node-key="group_id"
                  clearable
                  defaultExpandAll
                  :data="listTreeData"
                  placeholder="请选择主题域"
                  check-strictly
                  @change="selectGroupChange"
               >
               </el-tree-select>
            </el-form-item>

            <el-form-item>
               <el-button type="primary" icon="ele-Search" @click="handleQueryTable"> 查询 </el-button>
               <!-- <el-button type="primary" icon="ele-Search" @click="handleQueryTable"> 查询 </el-button> -->
               <el-button icon="ele-Refresh" @click="resetQuery">重置 </el-button>
               <!-- <el-button icon="ele-Plus" @click="openOptDlg()"> 添加 </el-button> -->
               <el-button type="primary" icon="ele-Plus" @click="openOptDlg()"> 添加 </el-button>
            </el-form-item>
         </el-form>
      </template>
@@ -24,7 +44,7 @@
               :data="displayTableData"
               highlight-current-row
            >
               <el-table-column type="expand" fixed="left">
               <!-- <el-table-column type="expand" fixed="left">
                  <template #default="scope">
                     <div class="ml-16" v-if="scope.row.alias && Object.keys(scope.row.alias).length > 0">
                        <h3>别名</h3>
@@ -38,67 +58,109 @@
                        </div>
                     </div>
                  </template>
               </el-table-column>
               <el-table-column prop="title" label="名称" width="120" fixed="left" show-overflow-tooltip> </el-table-column>
               <el-table-column label="提示词" prop="prompt" show-overflow-tooltip> </el-table-column>
               <el-table-column label="类型" prop="type" width="100" show-overflow-tooltip> </el-table-column>
               </el-table-column> -->
               <el-table-column type="index" label="序号" width="55" fixed="left" align="center"></el-table-column>

               <el-table-column label="操作" width="200" fixed="right" show-overflow-tooltip>
               <el-table-column prop="id" label="维度编号" width="125" fixed="left"></el-table-column>
               <el-table-column prop="title" label="维度名称" width="120" fixed="left" show-overflow-tooltip> </el-table-column>
               <el-table-column label="维度定义" prop="prompt" show-overflow-tooltip> </el-table-column>
               <el-table-column prop="metrics_group" label="主题域" width="130" show-overflow-tooltip>
                  <template #default="scope">
                     {{ themeDomainMap[scope.row.group]?.group_name }}
                  </template>
               </el-table-column>
               <el-table-column label="单位" prop="unit" width="100" show-overflow-tooltip> </el-table-column>

               <el-table-column label="类型" prop="type" width="100" show-overflow-tooltip>
                  <template #default="scope">
                     {{ DimensionTypeMap[scope.row.type] }}
                  </template>
               </el-table-column>

               <el-table-column label="操作" width="150" fixed="right" show-overflow-tooltip>
                  <template #default="scope">
                     <div class="space-x-3 items-center flex">
                        <!-- <el-tooltip effect="dark" content="编辑" placement="top">
                        <el-tooltip effect="dark" content="别名" placement="top" v-if="checkAliasExist(scope.row)">
                           <i
                              class="ywifont ywicon-gongsijieshao !text-[15px] text-blue-400 cursor-pointer"
                              @click="openAliasDisplayDlg(scope.row)"
                           ></i>
                        </el-tooltip>
                        <el-tooltip effect="dark" content="编辑" placement="top">
                           <i class="ywifont ywicon-bianji !text-[15px] text-blue-400 cursor-pointer" @click="openOptDlg(scope.row)"></i>
                        </el-tooltip>
                        <el-tooltip effect="dark" content="删除" placement="top">
                           <i
                              class="ywifont ywicon-shanchu !text-[17px] text-red-400 cursor-pointer"
                              @click="
                                 () => {
                                    deleteCurrentRow(scope.row, '页面', metricApi.deleteSupervisor, () => {
                                       const foundIndex = tableData.findIndex((item) => item === scope.row);
                                       foundIndex > -1 && tableData.splice(foundIndex, 1);
                                    });
                                 }
                              "
                           ></i>
                        </el-tooltip> -->
                     </div>
                  </template>
               </el-table-column>
            </el-table>
         </div>
      </template>

      <!-- <OptDlg v-model="optDlgIsShow" :item="optDlgMapRow" @insert="insertOpt" @update="updateOpt" :groupId="currentListID"></OptDlg> -->
      <AliasDisplayDlg v-model="aliasDisplayDlgIsShow" :item="aliasDisplayDlgMapRow"></AliasDisplayDlg>
      <OptDlg
         :groupId="queryParams.group"
         v-model="optDlgIsShow"
         :listTreeData="listTreeData"
         :item="optDlgMapRow"
         @insert="insertOpt"
         @update="updateOpt"
         :tableData="tableData"
         :dataSources="dataSources"
      ></OptDlg>
      <!-- <MetricPrompt v-model="infoDlgIsShow" :metricItem="infoDlgMapRow"></MetricPrompt>
      <MetricName v-model="metricNameIsShow" :metricItem="metricNameMapRow"></MetricName> -->
   </HMContainer>
</template>

<script setup lang="ts">
import { useDraggable } from '@vueuse/core';
import { debounce, deleteCurrentRow } from '/@/utils/util';
import { convertListToTree, debounce, getItemMap, travelTree } from '/@/utils/util';

import { onMounted, ref } from 'vue';
import { computed, onMounted, ref } from 'vue';
import { usePageDisplay } from '/@/hooks/usePageDisplay';
import { useQueryTable } from '/@/hooks/useQueryTable';
// import { useTableSort } from '/@/hooks/useTableSort';
// import { useValidateUniqueness } from '/@/hooks/useValidateUniqueness';
import { ElMessage } from 'element-plus';
import { nextTick } from 'vue';
import OptDlg from './optDlg/OptDlg.vue';
import type { SupervisorPublished } from '../../lowCode/sqlAmis/types';
import AliasDisplayDlg from './components/AliasDisplayDlg.vue';
import { DimensionTypeMap } from './components/constants';
import OptDlg from './components/OptDlg.vue';
import { getDataSourceList } from '/@/api/dataSource';
import * as dimensionApi from '/@/api/dimension';
import Chat from '/@/components/chat/Chat.vue';
import { gotoRoute } from '/@/utils/route';
import { useCompRef } from '/@/utils/types';

import axios, { CancelTokenSource } from 'axios';
import { getSceneGroupTreeByPost } from '/@/api/scene';
import HMContainer from '/@/components/layout/HMContainer.vue';
import { useUpdateData } from '/@/hooks/useUpdateData';
import { SupervisorPublished, supervisorPublishedMap } from '../../lowCode/sqlAmis/types';
import MetricPrompt from './optDlg/MetricPrompt.vue';
import MetricName from './optDlg/MetricName.vue';

import { OptClassificationMap, classificationEnum } from '/@/views/types/metrics';
const dataSources = ref([]);
const initDataSources = async () => {
   const res = await getDataSourceList();
   dataSources.value = res.values;
};
const themeDomainData = ref([]);
const initThemeDomainData = async () => {
   const res = await getSceneGroupTreeByPost();
   themeDomainData.value = res.groups || [];
};
const selectGroupChange = () => {
   handleQueryTable();
};
const listTreeData = computed(() => {
   const byParentData = convertListToTree(themeDomainData.value, {
      ID: 'group_id',
      Children: 'Children',
      ParentID: 'p_group_id',
   });
   const result = [];
   byParentData.forEach((item) => {
      if (
         item.group_type != OptClassificationMap[classificationEnum.Office] &&
         item.group_type != OptClassificationMap[classificationEnum.Knowledge]
      ) {
         result.push(item);
      }
   });
   return result;
});
const themeDomainMap = computed(() => {
   return getItemMap(themeDomainData.value, 'group_id');
});
//#region ====================== 表格数据，table init ======================
const tableLoading = ref(false);
const tableData = ref([]);
@@ -114,11 +176,12 @@

const queryParams = ref({
   title: '',
   group: '',
});
const { resetQuery, handleQueryTable, displayTableData } = useQueryTable(tableData, queryParams, () => {
   displayTableData.value = tableData.value;
});
const debounceQueryTable = debounce(handleQueryTable,400)
const debounceQueryTable = debounce(handleQueryTable, 400);

//#endregion

@@ -140,25 +203,81 @@
//#endregion

//#region ====================== 添加修改操作 ======================

let preGroup = '';
const optDlgIsShow = ref(false);
const optDlgMapRow = ref(null);
const openOptDlg = (row?: any) => {
   optDlgMapRow.value = row;
   optDlgIsShow.value = true;
   if (row) {
      preGroup = row.group;
   }
};

const updateOpt = (formValue) => {
   const foundIndex = tableData.value.findIndex((item) => item.id === formValue.id);
const updateOptData = (optData, formValue) => {
   const foundIndex = optData.findIndex((item) => item.id === formValue.id);
   if (foundIndex > -1) {
      tableData.value[foundIndex] = {
         ...tableData.value[foundIndex],
      optData[foundIndex] = {
         ...optData[foundIndex],
         ...formValue,
      };
   }
};
const updateOpt = (formValue) => {
   if (formValue.group === queryParams.value.group) {
      updateOptData(displayTableData.value, formValue);
      updateOptData(tableData.value, formValue);
   } else {
      if (queryParams.value.group !== '' && preGroup === queryParams.value.group) {
         const id = formValue.id;
         const index = displayTableData.value.findIndex((item) => item.id === id);
         if (index > -1) {
            displayTableData.value.splice(index, 1);
         }
      }

      updateOptData(tableData.value, formValue);
   }
};

const insertOptData = (optData, newData) => {
   optData.unshift({ ...newData });
};

// 判断是否属于当前主题域，或当期主题域下属主题域
const isIncludeGroup = (group, currentGroup) => {
   if (!currentGroup) return true;
   if (group === currentGroup) return true;

   let curGroupItem;

   travelTree(listTreeData.value, (item) => {
      if (item.group_id === currentGroup) {
         curGroupItem = item;
         return true;
      }
   });

   if (!curGroupItem) return false;

   let isFind = false;
   travelTree(curGroupItem.Children as any[], (item) => {
      if (item.group_id === group) {
         isFind = true;
         return true;
      }
   });

   return isFind;
};
const insertOpt = (newData) => {
   tableData.value.unshift({ ...newData, published: SupervisorPublished.N });
   if (newData.group === queryParams.value.group) {
      insertOptData(displayTableData.value, newData);
      insertOptData(tableData.value, newData);
   } else {
      insertOptData(tableData.value, newData);
   }
};
//#endregion

@@ -200,8 +319,24 @@
//    },
// });
//#endregion

//#region ====================== 别名弹窗 ======================
const aliasDisplayDlgIsShow = ref(false);
const aliasDisplayDlgMapRow = ref(null);
const checkAliasExist = (row: any) => {
   const isExist = row.alias && Object.keys(row.alias).length > 0;
   return isExist;
};
const openAliasDisplayDlg = (row) => {
   aliasDisplayDlgMapRow.value = row;
   aliasDisplayDlgIsShow.value = true;
};

//#endregion
onMounted(() => {
   getTableData();
   initThemeDomainData();
   initDataSources();
});
</script>
<style scoped lang="scss"></style>