| | |
| | | <el-form-item> |
| | | <!-- <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> |
| | |
| | | :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> |
| | |
| | | </div> |
| | | </div> |
| | | </template> |
| | | </el-table-column> |
| | | </el-table-column> --> |
| | | <el-table-column type="index" label="序号" width="55" fixed="left" align="center"></el-table-column> |
| | | |
| | | <el-table-column prop="id" label="维度编号" width="125" fixed="left"></el-table-column> |
| | | <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> |
| | |
| | | </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> </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="200" fixed="right" show-overflow-tooltip> |
| | | <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 { convertListToTree, debounce, getItemMap } from '/@/utils/util'; |
| | | import { convertListToTree, debounce, getItemMap, travelTree } from '/@/utils/util'; |
| | | |
| | | 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 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 { SupervisorPublished } from '../../lowCode/sqlAmis/types'; |
| | | import { getSceneGroupTreeByPost } from '/@/api/scene'; |
| | | import HMContainer from '/@/components/layout/HMContainer.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(); |
| | |
| | | }; |
| | | const selectGroupChange = () => { |
| | | handleQueryTable(); |
| | | |
| | | }; |
| | | const listTreeData = computed(() => { |
| | | const byParentData = convertListToTree(themeDomainData.value, { |
| | |
| | | |
| | | const queryParams = ref({ |
| | | title: '', |
| | | group:'' |
| | | group: '', |
| | | }); |
| | | const { resetQuery, handleQueryTable, displayTableData } = useQueryTable(tableData, queryParams, () => { |
| | | displayTableData.value = tableData.value; |
| | |
| | | //#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 |
| | | |
| | |
| | | // }, |
| | | // }); |
| | | //#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> |