smart-search-web/src/views/manage/theme/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="50px" @handleEnter="onSearch">
        <CusFormColumn
          label-width="80px"
          :span="4"
          label="主题名称"
          v-model:param="state.query.form.themeName"
        />
        <CusFormColumn
          :span="4"
          label="类别"
          v-model:param="state.query.form.themeType"
          link="select"
          :options="DictionaryStore.themeTypeList"
        />
        <CusFormColumn
          :span="4"
          label="状态"
          v-model:param="state.query.form.themeState"
          link="select"
          :options="DictionaryStore.themeStatusList"
        />
        <CusButton type="main" title="搜索" @click="onSearch"/>
        <CusButton type="main" title="重置" @click="onReset"/>
        <CusButton type="main" title="新增" style="margin-left: auto" @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 #themeType-column-value="{scope}">
          {{DictionaryStore.themeTypeMap.get(scope.row.themeType)}}
        </template>
        <template #themeState-column-value="{scope}">
          {{DictionaryStore.themeStatusMap.get(scope.row.themeState)}}
        </template>
        <template #themeUrl-column-value="{scope}">
          {{formatUrl(scope.row)}}
        </template>
        <template #do-column-value="{scope}">
          <CusButton type="table-edit" @click="onEdit(scope.row)"/>
          <CusButton type="table-del" @click="onDel(scope.row)"/>
          <template v-if="scope.row.themeType == '1'">
            <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="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"/>
    <RelationCom v-model:show="state.relation.show" :transfer="state.relation.transfer"/>
  </div>
</template>

<script setup lang="ts">
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";

const {proxy} = getCurrentInstance()
const DictionaryStore = useDictionaryStore()
const state: any = reactive({
  query: {
    loading: false,
    page: {
      pageNum: 1,
      pageSize: 10
    },
    tableHead: [
      {value: "themeName", label: "主题名称", fixed: 'left'},
      {value: "themeType", label: "类别"},
      {value: "themeState", label: "状态"},
      {value: "themeUrl", label: "请求URL示例",width: 200, popover: true},
      {value: "createTime", label: "创建时间", width: 200},
      {value: "createBy", label: "创建人"},
      {value: "updateTime", label: "最后修改时间", width: 200},
      {value: "updateBy", label: "最后修改人"},
      {value: "do", label: "操作", width: 280, fixed: 'right'},
    ],
    form: {},
    formReal: {},
    result: {
      total: 0,
      data: []
    }
  },
  detail: {
    show: false,
    transfer: {}
  },
  style: {
    show: false,
    transfer: {}
  },
  relation: {
    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
  sysThemeGetPageTheme(proxy.$util.formatGetParam(params)).then(res => {
    state.query.result.total = res.data.totalElements
    state.query.result.data = res.data.content
    state.query.loading = false
  })
}
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 onAdd = () => {
  state.detail.transfer = {
    mode: 'add'
  }
  state.detail.show = true
}
const onEdit = (row) => {
  state.detail.transfer = {
    mode: 'edit',
    id: row.themeId,
  }
  state.detail.show = true
}
const onStyle = (row) => {
  state.style.transfer = {
    id: row.themeId,
  }
  state.style.show = true
}
const onRelation = (row) => {
  state.relation.transfer = {
    id: row.themeId,
  }
  state.relation.show = true
}
const onDel = (row) => {
  ElMessageBox.confirm(`请确认是否删除${row.themeName}?`, "提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  } as any).then(() => {
    state.query.loading = true
    sysThemeDelete(row.themeId).then(res => {
      ElMessage.success('删除成功！')
      state.query.loading = false
      onSearch()
    })
  }).catch(() => {})
}
const formatUrl = (row) => {
  let str = `${row.themeUrl}`
  if (row.themeParam) {
    str += '?' + row.themeParam.split(',').map(v => `${v}=value`).join('&')
  }
  return str
}
const initDictionary = () => {
  DictionaryStore.initDict('theme_type')
  DictionaryStore.initDict('theme_status')
}
onMounted(() => {
  initDictionary()
  onReset()
})
</script>

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