菜单

src/views/manage/index.vue

@@ -5,7 +5,7 @@
         <template v-for="(item, index) in menusCpt">
           <div v-if="index > 0" class="menu-split"/>
           <template v-if="item.children?.length > 0">
-            <el-dropdown :teleported="false">
+            <el-dropdown :teleported="false" @command="menuClick">
               <div class="menu-item __hover" :class="{active: validMenuActive(item)}">
                 <SvgIcon :name="item.meta.icon" :color="validMenuActive(item) ? 'var(--cus-main-color)' : 'var(--cus-text-color-2)'" size="20"/>
                 {{item.meta.title}}
@@ -13,7 +13,7 @@
               <template #dropdown>
                 <el-dropdown-menu>
                   <template v-for="son in item.children">
-                    <el-dropdown-item @click="$router.push({name: son.name})">
+                    <el-dropdown-item :command="son.name">
                       <span :style="{color: validMenuActive(son) ? 'var(--cus-main-color)' : 'var(--cus-text-color-2)'}">{{son.meta.title}}</span>
                     </el-dropdown-item>
                   </template>
@@ -39,9 +39,10 @@
 <script setup lang="ts">
 import {computed, getCurrentInstance, onMounted, reactive} from "vue";
 import routerView from "@/layout/router-view.vue";
-import {useRoute} from "vue-router";
+import {useRoute, useRouter} from "vue-router";
 
 const route = useRoute()
+const router = useRouter()
 const {proxy} = getCurrentInstance()
 const state: any = reactive({})
 const menusCpt = computed(() => {
@@ -54,6 +55,9 @@ const validMenuActive = (val) => {
     return route.name === val.name
   }
 }
+const menuClick = (name) => {
+  router.push({name: name})
+}
 onMounted(() => {
 })
 </script>

src/views/manage/theme/index.vue

@@ -50,13 +50,14 @@
             <CusButton type="table-edit" title="配置" icon="text" @click="onStyle(scope.row)"/>
           </template>
           <template v-else-if="scope.row.themeType == '2'">
-            <CusButton type="table" icon="relation" title="索引构成"  @click="onIndexBuild(scope.row)"/>
+            <CusButton type="table" icon="relation" title="索引构成"  @click="onRelation(scope.row)"/>
           </template>
         </template>
       </CusTable>
     </div>
     <DetailCom v-model:show="state.detail.show" :transfer="state.detail.transfer" @refresh="onSearch"/>
-    <StyleCom v-model:show="state.style.show" :transfer="state.style.transfer" @refresh="onSearch"/>
+    <StyleCom v-model:show="state.style.show" :transfer="state.style.transfer"/>
+    <RelationCom v-model:show="state.relation.show" :transfer="state.relation.transfer"/>
   </div>
 </template>
 
@@ -65,6 +66,7 @@ import {getCurrentInstance, onMounted, reactive} from "vue";
 import {ElMessage, ElMessageBox} from "element-plus";
 import DetailCom from "./detail.vue";
 import StyleCom from "./style.vue";
+import RelationCom from "./relation.vue";
 import {useDictionaryStore} from "@/stores";
 import {sysThemeDelete, sysThemeGetPageTheme} from "@/api/modules/manage/theme";
 
@@ -103,7 +105,7 @@ const state: any = reactive({
     show: false,
     transfer: {}
   },
-  indexBuild: {
+  relation: {
     show: false,
     transfer: {}
   },
@@ -159,11 +161,11 @@ const onStyle = (row) => {
   }
   state.style.show = true
 }
-const onIndexBuild = (row) => {
-  state.indexBuild.transfer = {
+const onRelation = (row) => {
+  state.relation.transfer = {
     id: row.themeId,
   }
-  state.indexBuild.show = true
+  state.relation.show = true
 }
 const onDel = (row) => {
   ElMessageBox.confirm(`请确认是否删除${row.themeName}?`, "提示", {

src/views/manage/theme/relation.vue

@@ -0,0 +1,172 @@
+<template>
+  <CusDialog
+    :show="show"
+    title="索引构成"
+    @onClose="$emit('update:show', false)"
+    width="90%"
+    height="90%"
+    :show-submit="false"
+    :loading="state.loading"
+  >
+    <div class="__cus-manage_content">
+      <div class="__cus-manage_content-filters" v-loading="state.loadingIndex">
+        <el-autocomplete
+          ref="ref_search"
+          v-model="state.indexSelect"
+          :fetch-suggestions="fetchSuggestions"
+          clearable
+          placeholder="搜索添加索引"
+          @select="handleSelect"
+          :select-when-unmatched="true"
+        >
+          <template #default="{ item }">
+            <div class="index-item" v-html="item.html"/>
+          </template>
+        </el-autocomplete>
+      </div>
+      <div class="__cus-manage_content-main" v-loading="state.query.loading">
+        <CusTable
+          :data="state.query.result.data"
+          :table-head="state.query.tableHead"
+          :no-page="true"
+        >
+          <template #do-column-value="{scope}">
+            <CusButton type="table-del" @click="onDel(scope.row)"/>
+          </template>
+        </CusTable>
+      </div>
+    </div>
+  </CusDialog>
+</template>
+
+<script setup lang="ts">
+import {computed, getCurrentInstance, nextTick, reactive, ref, watch} from "vue";
+import {useDictionaryStore} from "@/stores";
+import {ElMessage, ElMessageBox} from "element-plus";
+import DetailCom from "@/views/manage/type/detail.vue";
+import {
+  sysLabelAddIndexToLabel, sysLabelDeleteLink,
+  sysLabelGetAllIndexsByKey,
+  sysLabelGetAllSysLabelTypes
+} from "@/api/modules/manage/type";
+
+const emit = defineEmits(['update:show', 'refresh'])
+const {proxy} = getCurrentInstance()
+const DictionaryStore = useDictionaryStore()
+const props = defineProps({
+  show: {default: false},
+  transfer: {}
+ })
+const state: any = reactive({
+  loading: false,
+  query: {
+    loading: false,
+    tableHead: [
+      {value: "indexName", label: "索引中文"},
+      {value: "indexTableName", label: "索引表名", popover: true},
+      {value: "num", label: "数据量", width: 100},
+      {value: "linkTime", label: "关联时间", minWidth: 200},
+      {value: "do", label: "操作", width: 100, fixed: 'right'},
+    ],
+    result: {
+      data: []
+    }
+  },
+  loadingIndex: false,
+  indexList: [],
+  indexSelect: ''
+})
+const ref_search = ref()
+const fetchSuggestions = (queryString: string, cb: any) => {
+  const arr = state.indexList.filter(v => state.query.result.data.every(s => s.indexId != v.id))
+  const results = queryString
+    ? arr.filter(v => [v.indexName, v.indexTableName].some(s => s.includes(queryString)))
+    : arr
+  results.map(v => {
+    const str1 = queryString ? v.indexName.replace(new RegExp(queryString, 'g'), `<em>${queryString}</em>`) : v.indexName
+    const str2 = queryString ? v.indexTableName.replace(new RegExp(queryString, 'g'), `<em>${queryString}</em>`) : v.indexTableName
+    v.html = `${str1}<span style="margin-right: 20px;"></span>${str2}`
+    return v
+  })
+  cb(results)
+}
+const handleSelect = (item) => {
+  ElMessageBox.confirm(`是否关联${item.indexName}?`, "提示", {
+    confirmButtonText: "确定",
+    cancelButtonText: "取消",
+    type: "warning",
+  } as any).then(() => {
+    state.loading = true
+    sysLabelAddIndexToLabel(proxy.$util.formatGetParam({
+      indexId: item.id,
+      typeId: props.transfer.id
+    })).then(res => {
+      if (res.code === 200) {
+        ElMessage.success('添加成功！')
+        emit('refresh')
+        state.loading = false
+        ref_search.value?.blur()
+        initRelation()
+      } else {
+        ElMessage.error(res.msg)
+      }
+    })
+  }).catch(() => {})
+}
+const initIndex = () => {
+  state.loadingIndex = true
+  sysLabelGetAllIndexsByKey().then(res => {
+    if (res.code === 200) {
+      state.indexList = res.data
+      state.loadingIndex = false
+    } else {
+      ElMessage.error(res.msg)
+    }
+  })
+}
+const initRelation = () => {
+  state.query.loading = true
+  sysLabelGetAllSysLabelTypes(props.transfer.id).then(res => {
+    if (res.code === 200) {
+      state.query.result.data = res.data
+      state.query.loading = false
+    } else {
+      ElMessage.error(res.msg)
+    }
+  })
+}
+const onDel = (row) => {
+  ElMessageBox.confirm(`请确认是否取消关联${row.indexName}?`, "提示", {
+    confirmButtonText: "确定",
+    cancelButtonText: "取消",
+    type: "warning",
+  } as any).then(() => {
+    state.loading = true
+    sysLabelDeleteLink(row.id).then(res => {
+      if (res.code === 200) {
+        ElMessage.success('删除成功！')
+        emit('refresh')
+        state.loading = false
+        initRelation()
+      } else {
+        ElMessage.error(res.msg)
+      }
+    })
+  }).catch(() => {})
+}
+watch(() => props.show, (n) => {
+  if (n) {
+    initIndex()
+    // initRelation()
+  }
+})
+const initDictionary = () => {
+}
+</script>
+
+<style lang="scss" scoped>
+.__cus-manage_content {
+  margin-bottom: 0;
+  height: calc(100% - 24px);
+}
+</style>