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

<template>
  <CusDialog
    :show="show"
    :title="titleCpt"
    @onClose="$emit('update:show', false)"
    width="1000px"
    height="auto"
    @onSubmit="onSubmit"
    :loading="state.loading"
  >
    <div class="__cus-dialog-form">
      <CusForm ref="ref_form" label-width="120">
        <CusFormColumn
          :span="12"
          required
          label="索引中文"
          v-model:param="state.form.indexName"
        />
        <CusFormColumn
          :span="12"
          required
          label="索引表名"
          v-model:param="state.form.indexTableName"
        />
        <CusFormColumn
          :span="12"
          required
          label="数据共享来源"
          v-model:param="state.form.dataSource"
        />
        <CusFormColumn
          :span="12"
          required
          label="数据提供来源"
          v-model:param="state.form.dataOffer"
        />
        <CusFormColumn
          :span="12"
          required
          label="共享方式"
          v-model:param="state.form.shareMethod"
          link="select"
          :options="DictionaryStore.gxMethodList"
        />
        <CusFormColumn
          :span="12"
          required
          label="共享周期"
          v-model:param="state.form.shareCycle"
          link="select"
          :options="DictionaryStore.gxCycleList"
        />
        <CusFormColumn
          :span="12"
          required
          label="默认模式"
          v-model:param="state.form.defModel"
          link="radio"
          :options="DictionaryStore.defaultModelList"
        />
        <CusFormColumn
          :span="12"
          :required="state.form.defModel == 1"
          label="图片字段"
          v-model:param="state.form.pictureField"
        />
        <CusFormColumn
          :span="12"
          required
          label="主题模式"
          v-model:param="state.form.themeMode"
          link="select"
          :options="DictionaryStore.themeModeList"
        />
        <CusFormColumn
          :span="12"
          :required="state.form.themeMode !== 'no_support'"
          label="主题字段"
          v-model:param="state.form.themeField"
        />
        <CusFormColumn
          :span="12"
          label="图模式卡片数"
          v-model:param="state.form.pictureModeCardNum"
          link="input-number"
          :min="1"
          :max="5"
        />
        <CusFormColumn
          :span="12"
          label="卡片列数"
          v-model:param="state.form.cardColumnNum"
          link="input-number"
          :min="1"
          :max="5"
        />
        <CusFormColumn
          :span="12"
          label="列模式列数"
          v-model:param="state.form.columnModelNum"
          link="input-number"
          :min="1"
          :max="8"
        />
        <CusFormColumn
          v-if="state.form.shareMethod === 'lxfz'"
          :span="12"
          label="数据更新时间"
          v-model:param="state.form.updateTime"
          link="datetime"
        />
        <CusFormColumn
          :span="24"
          label="备注"
          v-model:param="state.form.remark"
          type="textarea"
          :rows="5"
        />
      </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 {sysIndexGetDetail, sysIndexSaveOrUpdate} 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
})
const ref_form = ref()
const titleCpt = computed(() => {
  let t = ''
  switch (props.transfer.mode) {
    case 'add': t = '新增索引'
      break
    case 'edit': t = '编辑索引'
      break
  }
  return t
})
const onSubmit = () => {
  ref_form.value.submit().then(() => {
    ElMessageBox.confirm("是否提交?", "提示", {
      confirmButtonText: "确定",
      cancelButtonText: "取消",
      type: "warning",
    } as any).then(() => {
      state.loading = true
      sysIndexSaveOrUpdate(state.form).then(res => {
        if (res.code === 200) {
          ElMessage.success(props.transfer.mode === 'add' ? '新增成功！' : '编辑成功！')
          emit('update:show', false)
          emit('refresh')
        } else {
          ElMessage.error(res.msg)
        }
        state.loading = false
      })
    }).catch(() => {})
  }).catch((e) => {
    ElMessage({
      message: e[0].message,
      grouping: true,
      type: 'warning',
    })
  })
}
const initDetail = () => {
  state.loading = true
  sysIndexGetDetail(props.transfer.id).then(res => {
    if (res.code === 200) {
      state.form = res.data
      state.loading = false
    } else {
      ElMessage.error(res.msg)
    }
  })
}
watch(() => props.show, (n) => {
  if (n) {
    initDictionary()
    if (props.transfer.mode === 'add') {
      state.form = {
        pictureModeCardNum: 3,
        cardColumnNum: 2,
        columnModelNum: 4,
        defModel: 'column_model',
      }
    } else {
      initDetail()
    }
    nextTick(() => {
      ref_form.value.reset()
    })
  }
})
const initDictionary = () => {
  DictionaryStore.initDict('gx_method')
  DictionaryStore.initDict('gx_cycle')
  DictionaryStore.initDict('theme_mode')
  DictionaryStore.initDict('default_model')
}
</script>

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