matrix-spray-web/src/components/point/Edit/index.vue

<script setup lang="ts">
import { add, update } from 'apis/point'
import FtDialog from 'components/common/FTDialog/index.vue'
import { FtMessage } from 'libs/message'
import { onMounted, ref } from 'vue'

const props = defineProps({
  formData: {
    type: Object,
    default: () => ({}),
  },
})
const emits = defineEmits(['ok', 'cancel'])

onMounted(() => {
  if (props.formData.id) {
    form.value = { ...props.formData }
  }
})

const form = ref({})

const rules = {
  pointName: [{ required: true, message: '请输入坐标名称', trigger: 'blur' }],
  x: [{ required: true, message: '请输入x', trigger: 'blur' }],
  y: [{ required: true, message: '请输入y', trigger: 'blur' }],
  z: [{ required: true, message: '请输入z', trigger: 'blur' }],
}

const formRef = ref()

const okLoading = ref(false)
const okHandle = () => {
  formRef.value.validate(async (valid: any) => {
    if (!valid) {
      return
    }
    okLoading.value = true
    // TODO 调用保存接口
    if (form.value.id) {
      await update(form.value)
    }
    else {
      await add(form.value)
    }
    setTimeout(() => {
      okLoading.value = false
      FtMessage.success('保存成功')
      emits('ok')
    }, 300)
  })
}

const cancel = () => {
  emits('cancel')
}
</script>

<template>
  <FtDialog visible :title="form.id ? '编辑坐标' : '新增坐标'" width="40%" @ok="okHandle" @cancel="cancel">
    <el-form ref="formRef" label-width="120" :model="form" :rules="rules">
      <el-form-item label="坐标名称" prop="pointName">
        <el-input v-model="form.pointName" placeholder="" />
      </el-form-item>
      <el-form-item label="x" prop="x">
        <el-input v-model="form.x" type="number" placeholder="" />
      </el-form-item>
      <el-form-item label="y" prop="y">
        <el-input v-model="form.y" type="number" placeholder="" />
      </el-form-item>
      <el-form-item label="z" prop="z">
        <el-input v-model="form.z" type="number" placeholder="" />
      </el-form-item>
    </el-form>
  </FtDialog>
</template>

<style scoped lang="scss">
.el-select {
  width: 80%;
}
.el-input {
  width: 80%;
}
.unit-text {
  font-size: 40px;
  color: #0349A8;
  font-weight: 500;
  margin-left: 20px;
}
.select-box {
  display: flex;
  margin: 40px;
}
.route-img {
  display: flex;
  img {
    width: 70px;
  }
}
</style>