smart-search-web/src/views/manage/system/dict/detail.vue

<template>
  <CusDialog
    :show="show"
    :title="titleCpt"
    @onClose="$emit('update:show', false)"
    width="400px"
    height="auto"
    @onSubmit="onSubmit"
    :loading="state.loading"
  >
    <div class="__cus-dialog-form">
      <CusForm ref="ref_form" label-width="90px">
        <CusFormColumn
          :span="24"
          required
          label="字典名称"
          v-model:param="state.form.dictLabel"
        />
        <CusFormColumn
          :span="24"
          required
          label="字典值"
          v-model:param="state.form.dictValue"
        />
        <CusFormColumn
          v-if="transfer.mode !== 'parent'"
          :span="24"
          required
          label="字典状态"
          v-model:param="state.form.dictState"
          link="switch"
          :options="DictionaryStore.dictStateList"
          active-value="0"
          inactive-value="1"
        />
        <CusFormColumn
          :span="24"
          required
          label="排序"
          v-model:param="state.form.sortCode"
          link="input-number"
          :min="0"
          :max="999"
        />
      </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 {dictAdd, dictEdit, dictInfo} from "@/api/modules/manage/dict";

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 'parent': t = '新增字典'
      break
    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
      switch (props.transfer.mode) {
        case 'parent': {
          dictAdd(state.form).then(res => {
            if (res.code === 200) {
              ElMessage.success('新增成功！')
              emit('update:show', false)
              emit('refresh', true)
            } else {
              ElMessage.error(res.msg)
            }
            state.loading = false
          })
        } break
        case 'add': {
          dictAdd(state.form).then(res => {
            if (res.code === 200) {
              ElMessage.success('新增成功！')
              emit('update:show', false)
              emit('refresh')
            } else {
              ElMessage.error(res.msg)
            }
            state.loading = false
          })
        } break
        case 'edit': {
          dictEdit(state.form).then(res => {
            if (res.code === 200) {
              ElMessage.success('编辑成功！')
              emit('update:show', false)
              emit('refresh')
            } else {
              ElMessage.error(res.msg)
            }
            state.loading = false
          })
        } break
      }
    }).catch(() => {})
  }).catch((e) => {
    ElMessage({
      message: e[0].message,
      grouping: true,
      type: 'warning',
    })
  })
}
const initDetail = () => {
  state.form = props.transfer.row
}
watch(() => props.show, (n) => {
  if (n) {
    initDictionary()
    if (props.transfer.mode === 'parent') {
      state.form = {
        parentId: 0,
        dictState: '0',
        sortCode: 999
      }
    } else if (props.transfer.mode === 'add') {
      state.form = {
        parentId: props.transfer.parentId,
        dictState: '0',
        sortCode: 999
      }
    } else {
      initDetail()
    }
    nextTick(() => {
      ref_form.value.reset()
    })
  }
})
const initDictionary = () => {
}
</script>

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