color-titration-web/src/components/SavePosition/index.vue

<script setup lang="ts">
import { getPointList, updatePoint } from 'apis/point'
import { getPoint } from 'apis/system'
import { onMounted, ref } from 'vue'

const emits = defineEmits(['ok', 'cancel'])

const pointList = ref<Point.Point[]>([])
onMounted(async () => {
  pointList.value = await getPointList()
})

const form = ref<Point.UpdateParams>({})
const formRef = ref()
const rules = {
  id: [
    { required: true, message: '请选择名称', trigger: 'change' },
  ],
  position: [
    { required: true, message: '请输入坐标', trigger: 'blur' },
  ],
}

const okHandle = async () => {
  try {
    const valid = await formRef.value.validate()
    if (!valid) {
      return
    }
    await updatePoint(form.value!)
    emits('ok')
  }
  catch (error) {
    console.log(error)
  }
}
const cancel = () => {
  emits('cancel')
}

const motor = [
  {
    name: '转运机械臂三维点',
    code: 'Transfer',
  },
  {
    name: 'X轴电机',
    code: 'XSV',
  },

  {
    name: 'Z轴电机',
    code: 'ZM',
  },
  {

    name: '门电机',
    code: 'DoorM',
  },
  {

    name: '加液臂电机',
    code: 'LiquidM',
  },
]

const selectChange = async (val: string) => {
  form.value!.position = await getPoint(val)
}
</script>

<template>
  <FtDialog visible title="保存坐标" width="40%" :ok-handle="okHandle" @cancel="cancel">
    <el-form ref="formRef" label-width="auto" :model="form" :rules="rules">
      <el-form-item label="选择电机">
        <el-select v-model="form.type" clearable placeholder="请选择电机" @change="selectChange">
          <el-option
            v-for="item in motor"
            :key="item.code"
            :label="item.name"
            :value="item.code"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="当前坐标" prop="position">
        <el-input v-model="form.position" />
      </el-form-item>
      <el-form-item label="名称" prop="id">
        <el-select v-model="form.id" placeholder="请选择名称">
          <el-option
            v-for="item in pointList"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          />
        </el-select>
      </el-form-item>
    </el-form>
  </FtDialog>
</template>

<style scoped lang="scss">
.item-box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 5px;
}
</style>