sea-warning-web/src/views/web/archive/detail.vue

<template>
  <CusDialog
    :show="show"
    :title="titleCpt"
    @onClose="$emit('update:show', false)"
    width="800px"
    height="auto"
    @onSubmit="onSubmit"
    :loading="state.loading"
  >
    <div class="__cus-dialog-form">
      <CusForm ref="ref_form" label-width="110px" :form-view="!noViewCpt">
        <el-col :span="11">
          <CusFormColumn
            :span="24"
            required
            label="船名号"
            v-model:param="state.form.name"
          />
          <CusFormColumn
            :span="24"
            required
            label="船舶类型"
            v-model:param="state.form.type"
            link="select"
            :options="DictionaryStore.shipTypeList"
          />
          <CusFormColumn
            :span="24"
            required
            label="持证类型"
            v-model:param="state.form.certType"
            link="select"
            :options="DictionaryStore.certTypeList"
          />
          <CusFormColumn
            :span="24"
            required
            label="最大航速"
            v-model:param="state.form.maxSpeed"
            link="number"
            unit="节"
            :decimal="2"
          />
          <CusFormColumn
            :span="24"
            required
            label="船长"
            v-model:param="state.form.length"
            link="number"
            unit="米"
            :decimal="2"
          />
          <CusFormColumn
            :span="24"
            required
            label="船宽"
            v-model:param="state.form.width"
            link="number"
            unit="米"
            :decimal="2"
          />
        </el-col>
        <el-col :span="12" :offset="1">
          <CusFormColumn
            :span="24"
            label="船舶照片"
            v-model:param="state.form.indexUrl"
            link="upload"
            layout="card"
            type="img"
            :limit="1"
            limitNoUpload
            :delRule="(file) => true"
            cardHeight="118px"
          />
          <CusFormColumn
            :span="24"
            label="重点船舶"
            v-model:param="state.form.important"
            link="radio"
            :options="DictionaryStore.importantList"
          />
          <CusFormColumn
            :span="24"
            label="北斗终端号"
            v-model:param="state.form.beidouId"
          />
          <CusFormColumn
            :span="24"
            label="MMSI"
            v-model:param="state.form.mmsi"
          />
        </el-col>
      </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 {shipArchiveAdd, shipArchiveDetail, shipArchiveEdit} from "@/api/modules/web/archive";

const emit = defineEmits(['update:show', 'refresh'])
const {proxy} = getCurrentInstance()
const DictionaryStore = useDictionaryStore()
const props = defineProps({
  show: {default: false},
  transfer: {}
})
const state: any = reactive({
  form: {
    indexUrl: []
  },
})
const ref_form = ref()
const noViewCpt = computed(() => props.transfer?.mode !== 'view')
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
      const params = {...state.form}
      if (props.transfer.mode === 'add') {
        shipArchiveAdd(params).then(res => {
          if (res.code == 0) {
            ElMessage.success('新增成功！')
            emit('update:show', false)
            emit('refresh')
            state.loading = false
          } else {
            ElMessage.error(res.msg)
          }
        }).catch(() => {
          state.loading = false
        })
      } else {
        shipArchiveEdit(params).then(res => {
          if (res.code == 0) {
            ElMessage.success('编辑成功！')
            emit('update:show', false)
            emit('refresh')
            state.loading = false
          } else {
            ElMessage.error(res.msg)
          }
        }).catch(() => {
          state.loading = false
        })
      }
    }).catch(() => {})
  }).catch((e) => {
    ElMessage({
      message: e[0].message,
      grouping: true,
      type: 'warning',
    })
  })
}
const initDetail = () => {
  state.loading = true
  shipArchiveDetail(proxy.$util.formatGetParam({id: props.transfer.id})).then(res => {
    if (res.code == 0) {
      state.form = Object.assign(res.data, {indexUrl: []})
      state.loading = false
    } else {
      ElMessage.error(res.msg)
    }
  })
}
watch(() => props.show, (n) => {
  if (n) {
    state.loading = false
    initDictionary()
    if (props.transfer.mode === 'add') {
      state.form = {
        indexUrl: []
      }
    } else {
      initDetail()
    }
    nextTick(() => {
      ref_form.value.reset()
    })
  }
})
const initDictionary = () => {
  // DictionaryStore.initDict('relation_chart_layout')
}
</script>

<style lang="scss" scoped>
:deep(.upload-layout-card_item) {
  background-color: #999999;
}
.__cus-dialog-form {
  margin: 20px;
  background: rgba(88, 148, 235, 0.2);
  border-radius: 8px;
  padding: 26px 54px;
}
</style>