big-model-web/src/views/manage/center/square/model-detail.vue

<template>
  <CzrDialog
    :show="show"
    :title="titleCpt"
    @onClose="$emit('update:show', false)"
    @onSubmit="onSubmit"
    width="62.5rem"
    height="auto"
    max-height="90%"
    :loading="state.loading"
    :show-submit="!isViewCpt"
  >
    <div class="bm-form">
      <CzrForm ref="ref_form" :form-view="isViewCpt">
        <CzrFormColumn
          required
          :span="8"
          label="模型类型"
          v-model:param="state.form.type"
          link="select"
          :options="DictionaryStore.modelTypes.list"
          @change="state.form.pluginClass = ''"
        />
        <template v-if="state.form.type">
          <CzrFormColumn
            required
            :span="8"
            label="模型供应商"
            v-model:param="state.form.manufacturer"
            link="select"
            :options="
              DictionaryStore.modelProvides.list.filter(
                (v) => v.type === state.form.type,
              )
            "
            @getObject="getModelProvide"
          />
          <template v-if="state.form.manufacturer">
            <CzrFormColumn
              :span="8"
              label="版本"
              v-model:param="state.form.version"
              :disabled="true"
            />
            <CzrFormColumn
              required
              :span="24"
              label="模型名称"
              v-model:param="state.form.name"
            />
            <CzrFormColumn
              required
              :span="24"
              label="模型简介"
              v-model:param="state.form.synopsis"
              type="textarea"
              :rows="4"
            />
            <CzrFormColumn
              required
              :span="24"
              label="详细介绍"
              v-model:param="state.form.overview"
              link="markdown"
              height="400px"
            />
          </template>
        </template>
      </CzrForm>
    </div>
  </CzrDialog>
</template>

<script setup lang="ts">
import {
  computed,
  getCurrentInstance,
  nextTick,
  reactive,
  ref,
  watch,
} from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import {
  useAppStore,
  useDialogStore,
  useDictionaryStore,
  useRegexStore,
} from '@/stores'
import { useRouter } from 'vue-router'
import {
  modelManageGetModelManageById,
  modelManageSaveModelManage,
  modelManageUpdateModelManage,
} from '@/api/modules/center/square'

const router = useRouter()
const AppStore = useAppStore()
const DictionaryStore = useDictionaryStore()
const DialogStore = useDialogStore()
const RegexStore = useRegexStore()
const emit = defineEmits(['update:show', 'refresh'])
const { proxy } = getCurrentInstance()
const props = defineProps({
  show: { default: false },
  transfer: <any>{},
})
const state: any = reactive({
  loading: false,
  form: {},
})
const ref_form = ref()
const titleCpt = computed(() => {
  let t = ''
  switch (props.transfer.mode) {
    case 'add':
      t = '新增' + t
      break
    case 'edit':
      t = '编辑' + t
      break
    case 'view':
      t = '查看' + t
      break
  }
  return t
})
const isViewCpt = computed(() => props.transfer?.mode === 'view')
watch(
  () => props.show,
  (n) => {
    if (n) {
      initDictionary()
      state.form = {
        state: 0,
      }
      if (props.transfer.mode !== 'add') {
        initData()
      }
      nextTick(() => {
        ref_form.value.reset()
      })
    }
  },
)
const initDictionary = () => {
  DictionaryStore.initModelTypes()
  DictionaryStore.initModelProvides()
}
const initData = () => {
  state.loading = true
  modelManageGetModelManageById({ id: props.transfer.id })
    .then(({ data }: any) => {
      state.form = data
    })
    .catch(() => {})
    .finally(() => {
      state.loading = false
    })
}
const onSubmit = () => {
  ref_form.value
    .submit()
    .then(() => {
      DialogStore.confirm({
        content: `请确认是否提交？`,
        onSubmit: () => {
          state.loading = true
          if (props.transfer.mode === 'add') {
            modelManageSaveModelManage(state.form)
              .then(({ data }: any) => {
                ElMessage.success(`${titleCpt.value}成功！`)
                emit('update:show', false)
                emit('refresh')
              })
              .catch(() => {})
              .finally(() => {
                state.loading = false
              })
          } else {
            modelManageUpdateModelManage(state.form)
              .then(({ data }: any) => {
                ElMessage.success(`${titleCpt.value}成功！`)
                emit('update:show', false)
                emit('refresh')
              })
              .catch(() => {})
              .finally(() => {
                state.loading = false
              })
          }
        },
      })
    })
    .catch((e) => {
      ElMessage({
        message: e[0].message,
        grouping: true,
        type: 'warning',
      })
    })
}
const getModelProvide = (obj) => {
  console.log(obj)
  state.form.name = obj.name
  state.form.version = obj.version
  state.form.synopsis = obj.description
  state.form.overview = obj.description
}
</script>

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