smart-search-web/src/views/manage/index/index.vue

<template>
  <div class="__cus-manage_content">
    <div class="__cus-manage_content-title"><SvgIcon class="flag" name="flag_1" color="var(--cus-main-color)"/>{{$route.meta.title}}</div>
    <div class="__cus-manage_content-filters">
      <CusForm labelWidth="100px" @handleEnter="onSearch">
        <CusFormColumn
          :span="8"
          v-model:param="state.query.form.keyword"
          placeholder="请输入索引中文名称或索引表名进行搜索"
        />
        <CusButton type="main" title="搜索" @click="onSearch"/>
        <CusButton type="main" title="重置" @click="onReset"/>
        <CusButton title="导出" style="margin-left: auto" @click="onExport"/>
        <CusButton type="main" title="新增" @click="onAdd"/>
      </CusForm>
    </div>
    <div class="__cus-manage_content-main" v-loading="state.query.loading">
      <CusTable
        :page-num="state.query.page.pageNum"
        :page-size="state.query.page.pageSize"
        :total="state.query.result.total"
        :data="state.query.result.data"
        :table-head="state.query.tableHead"
        @handlePage="onPage"
      >
        <template #shareMethod-column-value="{scope}">
          {{DictionaryStore.gxMethodMap.get(scope.row.shareMethod)}}
        </template>
        <template #shareCycle-column-value="{scope}">
          {{DictionaryStore.gxCycleMap.get(scope.row.shareCycle)}}
        </template>
        <template #themeMode-column-value="{scope}">
          {{DictionaryStore.themeModeMap.get(scope.row.themeMode)}}
        </template>
        <template #do-column-value="{scope}">
          <CusButton type="table" icon="relation" title="关联分类" @click="onRelation(scope.row)"/>
          <CusButton type="table" icon="relation" title="关联主题" @click="onTheme(scope.row)"/>
          <CusButton type="table-add" icon="text" title="字段" @click="onText(scope.row)"/>
          <CusButton type="table-edit" @click="onEdit(scope.row)"/>
          <CusButton type="table-del" @click="onDel(scope.row)"/>
        </template>
      </CusTable>
    </div>
    <DetailCom v-model:show="state.detail.show" :transfer="state.detail.transfer" @refresh="onSearch"/>
    <RelationCom v-model:show="state.relation.show" :transfer="state.relation.transfer" @refresh="onSearch"/>
    <TextCom v-model:show="state.text.show" :transfer="state.text.transfer"/>
    <ThemeCom v-model:show="state.theme.show" :transfer="state.theme.transfer"/>
  </div>
</template>

<script setup lang="ts">
import {getCurrentInstance, onMounted, reactive} from "vue";
import {ElMessage, ElMessageBox} from "element-plus";
import {
  sysIndexDeleteIndexById,
  sysIndexExport,
  sysIndexFindIndexByPage
} from "@/api/modules/manage";
import DetailCom from "./detail.vue";
import RelationCom from "./relation.vue";
import TextCom from "./text.vue";
import ThemeCom from "./theme.vue";
import {useDictionaryStore} from "@/stores";
import {downLoadBlob} from "@/utils/downLoadUrl";

const {proxy} = getCurrentInstance()
const DictionaryStore = useDictionaryStore()
const state: any = reactive({
  query: {
    loading: false,
    page: {
      pageNum: 1,
      pageSize: 10
    },
    tableHead: [
      {value: "indexName", label: "索引中文", fixed: 'left', width: 180},
      {value: "indexTableName", label: "索引表名", fixed: 'left', width: 180, popover: true},
      {value: "dataSource", label: "数据共享来源", width: 180},
      {value: "dataOffer", label: "数据提供来源", width: 180},
      {value: "shareMethod", label: "共享方式", width: 180},
      {value: "shareCycle", label: "共享周期", width: 180},
      {value: "pictureField", label: "图片字段", width: 180},
      {value: "themeMode", label: "主题模式", width: 180},
      {value: "pictureModeCardNum", label: "图模式卡片数", width: 180},
      {value: "cardColumnNum", label: "卡片列数", width: 180},
      {value: "columnModelNum", label: "列模式列数", width: 180},
      {value: "num", label: "数据量", width: 180},
      {value: "linkTypeNum", label: "关联分类数量", width: 180},
      {value: "createTime", label: "创建时间", width: 200},
      {value: "updateTime", label: "最后修改时间", width: 200},
      {value: "remark", label: "备注", width: 200},
      {value: "do", label: "操作", width: 420, fixed: 'right'},
    ],
    form: {},
    formReal: {},
    result: {
      total: 0,
      data: []
    }
  },
  detail: {
    show: false,
    transfer: {}
  },
  relation: {
    show: false,
    transfer: {}
  },
  text: {
    show: false,
    transfer: {}
  },
  theme: {
    show: false,
    transfer: {}
  }
})
const onPage = (pageNum, pageSize) => {
  state.query.page = {
    pageNum: pageNum,
    pageSize: pageSize
  }
  const params = {
    page: state.query.page.pageNum,
    size: state.query.page.pageSize,
  }
  //  添加表单参数
  for (const [k, v] of Object.entries(state.query.formReal)) {
    if (proxy.$util.isValue(v)) {
      params[k] = v
    }
  }
  state.query.loading = true
  sysIndexFindIndexByPage(proxy.$util.formatGetParam(params)).then(res => {
    if (res.code === 200) {
      state.query.result.total = res.data.totalElements
      state.query.result.data = res.data.content
      state.query.loading = false
    } else {
      ElMessage.error(res.msg)
    }
  })
}
const onSearch = () => {
  state.query.formReal = JSON.parse(JSON.stringify(state.query.form))
  onPage(1, state.query.page.pageSize)
}
const onReset = () => {
  state.query.page = {
    pageNum: 1,
    pageSize: 10
  }
  state.query.form = {}
  onSearch()
}
const onRelation = (row) => {
  state.relation.transfer = {
    id: row.id
  }
  state.relation.show = true
}
const onTheme = (row) => {
  state.theme.transfer = {
    row: JSON.parse(JSON.stringify(row))
  }
  state.theme.show = true
}
const onText = (row) => {
  state.text.transfer = {
    id: row.id,
    maxCol: row.columnModelNum < row.cardColumnNum ? row.columnModelNum : row.cardColumnNum,
  }
  state.text.show = true
}
const onAdd = () => {
  state.detail.transfer = {
    mode: 'add'
  }
  state.detail.show = true
}
const onEdit = (row) => {
  state.detail.transfer = {
    mode: 'edit',
    id: row.id,
  }
  state.detail.show = true
}
const onDel = (row) => {
  ElMessageBox.confirm(`请确认是否删除${row.indexName}?`, "提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  } as any).then(() => {
    state.query.loading = true
    sysIndexDeleteIndexById(row.id).then(res => {
      if (res.code === 200) {
        ElMessage.success('删除成功！')
        state.query.loading = false
        onSearch()
      } else {
        ElMessage.error(res.msg)
      }
    })
  }).catch(() => {})
}
const onExport = () => {
  state.query.loading = true
  const params = {}
  //  添加表单参数
  for (const [k, v] of Object.entries(state.query.formReal)) {
    if (proxy.$util.isValue(v)) {
      params[k] = v
    }
  }
  sysIndexExport(proxy.$util.formatGetParam(params)).then(res => {
    downLoadBlob(res.data, '索引导出.xlsx')
    state.query.loading = false
  })
}
const initDictionary = () => {
  DictionaryStore.initDict('gx_method')
  DictionaryStore.initDict('gx_cycle')
  DictionaryStore.initDict('theme_mode')
  DictionaryStore.initDict('default_model')
}
onMounted(() => {
  initDictionary()
  onReset()
})
</script>

<style lang="scss" scoped>
</style>