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

<template>
  <CusDialog
    :show="show"
    :title="titleCpt"
    @onClose="$emit('update:show', false)"
    width="60%"
    max-height="80%"
    @onSubmit="onSubmit"
    :loading="state.loading"
  >
    <div class="__cus-dialog-form">
      <CusForm ref="ref_form" label-width="100px">
        <CusFormColumn
          :span="24"
          required
          label="主字段"
          v-model:param="state.form.mainParam"
          link="select"
          :options="state.textOptions"
        />
        <CusFormColumn
          :span="24"
          label="标签字段"
          v-model:param="state.form.tagParams"
          link="select"
          :options="state.textOptions"
          multiple
        />
        <CusFormColumn
          :span="24"
          label="副字段"
          v-model:param="state.form.subParams"
          link="select"
          :options="state.textOptions"
          multiple
        />
        <CusFormColumn
          :span="24"
          label="图片字段"
          v-model:param="state.form.imgParam"
          link="select"
          :options="state.textOptions"
        />
        <CusFormColumn
          :span="24"
          label="其他字段"
          v-model:param="state.form.otherParams"
          link="select"
          :options="state.textOptions"
          multiple
        />
      </CusForm>
    </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 {sysThemeFind, sysThemeIndexMainConfig, sysThemeStyleConfig} 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({
  form: {},
  loading: false,
  textOptions: []
})
const ref_form = ref()
const titleCpt = computed(() => {
  let t = '索引构成-主配置'
  return t
})
const onSubmit = () => {
  ref_form.value.submit().then(() => {
    ElMessageBox.confirm("是否提交?", "提示", {
      confirmButtonText: "确定",
      cancelButtonText: "取消",
      type: "warning",
    } as any).then(() => {
      state.loading = true
      const params = JSON.parse(JSON.stringify(state.form))
      params.otherParams = params.otherParams.map(v => {
        const obj = state.textOptions.filter(t => t.fieldKey == v)[0]
        return {
          label: obj.fieldName,
          value: obj.fieldKey
        }
      })
      sysThemeIndexMainConfig({
        id: props.transfer.id,
        indexStyle: JSON.stringify(params)
      }).then(res => {
        ElMessage.success('配置成功！')
        emit('update:show', false)
        emit('refresh')
        state.loading = false
      })
    }).catch(() => {})
  }).catch((e) => {
    ElMessage({
      message: e[0].message,
      grouping: true,
      type: 'warning',
    })
  })
}
const initDetail = () => {
  if (props.transfer.indexStyle) {
    state.form = JSON.parse(props.transfer.indexStyle)
    state.form.otherParams = state.form.otherParams.map(v => v.value)
  } else {
    state.form = {
      mainParam: '',
      tagParams: [],
      subParams: [],
      imgParam: '',
      otherParams: []
    }
  }
}
const initText = () => {
  sysIndexFieldList(proxy.$util.formatGetParam({
    indexId: props.transfer.indexId,
    type: props.transfer.type
  })).then(res => {
    state.textOptions = res.data.map(v => {
      v.dictLabel = v.fieldName
      v.dictValue = v.fieldKey
      return v
    })
  })
}
watch(() => props.show, (n) => {
  if (n) {
    initText()
    initDetail()
    nextTick(() => {
      ref_form.value.reset()
    })
  }
})
</script>

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