smart-search-web/src/views/manage/theme/relation-column.vue

<template>
  <CusDialog
    :show="show"
    title="索引构成-配置列"
    @onClose="$emit('update:show', false)"
    @onSubmit="onSubmit"
    width="70%"
    max-height="80%"
    :loading="state.loading"
  >
    <template #foot>
      <div class="__cus-dialog-foot_cancel __hover" @click="onReset">重置默认</div>
    </template>
    <div class="__cus-manage_content">
      <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 #sort-column-value="{scope}">
            {{scope.$index + 1}}
          </template>
          <template #searchShow-column-value="{scope}">
            <el-switch
              v-model="scope.row.searchShow"
              active-value="1"
              inactive-value="0"
            />
          </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 {
  sysThemeIndexFindAll,
  sysThemeIndexGetIndexFields,
  sysThemeIndexSaveIndexFields
} from "@/api/modules/manage/theme";
import {sysIndexFieldList} from "@/api/modules/manage";

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: "fieldNameCn", label: "列名称"},
      {value: "fieldNameEn", label: "列英文名称"},
      {value: "sort", label: "排序"},
      {value: "searchShow", label: "展示"},
    ],
    result: {
      defaultShowIds: [],
      data: []
    }
  },
})
const initText = () => {
  state.query.loading = true
  sysIndexFieldList(proxy.$util.formatGetParam({
    indexId: props.transfer.indexId
  })).then(res => {
    state.query.result.data = res.data
    state.query.result.defaultShowIds = state.query.result.data.filter(v => v.searchShow == 1).map(v => v.id)
    state.query.loading = false
    initRelation()
  })
}
const initRelation = () => {
  state.query.loading = true
  sysThemeIndexGetIndexFields(proxy.$util.formatGetParam({
    themeId: props.transfer.themeId,
    indexId: props.transfer.indexId,
  })).then(res => {
    state.query.result.data.forEach(v => {
      v.searchShow = res.data.some(s => s.fieldId == v.id) ? '1' : '0'
    })
    state.query.loading = false
  })
}
const onReset = () => {
  state.query.result.data.forEach(v => {
    v.searchShow = state.query.result.defaultShowIds.includes(v.id) ? '1' : '0'
  })
}
const onSubmit = () => {
  ElMessageBox.confirm("是否提交?", "提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  } as any).then(() => {
    const arr = state.query.result.data.filter(v => v.searchShow == 1).map((v, i) => ({
      themeId: props.transfer.themeId,
      indexId: props.transfer.indexId,
      fieldId: v.id,
      sort: i
    }))
    state.loading = true
    sysThemeIndexSaveIndexFields(arr).then(res => {
      ElMessage.success('保存成功！')
      state.loading = false
    }).catch(() => {
      state.loading = false
    })
  }).catch(() => {})
}
watch(() => props.show, (n) => {
  if (n) {
    initText()
  }
})
const initDictionary = () => {
  DictionaryStore.initDict('is_main_index')
}
</script>

<style lang="scss" scoped>
.__cus-manage_content {
  margin-bottom: 0;
  height: calc(100% - 24px);
}
</style>