kd-aiot-frontend-eam/src/views/ledgerAssets/robot/components/presetInfo/formModel.vue

<template>
  <ele-modal
    :visible.sync="visible"
    :title="title"
    width="50%"
    append-to-body
    @close="cancel"
  >
    <el-form ref="form" :model="form" :rules="rules" label-width="120px" v-loading="loading">
      <el-row>
        <el-col :span="12">
          <el-form-item label="预置位名称" prop="pointName">
            <el-input v-model="form.pointName" placeholder="请输入" :maxlength="20" class="!w-100%" />
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="16">
          <el-form-item label="行车距离">
            <el-progress :percentage="dirv">
              <el-button text>3500</el-button>
            </el-progress>
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item prop="dirv">
            <el-input
              v-model="form.dirv"
              @input="progressUpdate($event, 'dirv')"
              placeholder="请输入"
            />
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="16">
          <el-form-item label="升降距离">
            <el-progress :percentage="lift">
              <el-button text>3500</el-button>
            </el-progress>
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item prop="lift">
            <el-input
              v-model="form.lift"
              @input="progressUpdate($event, 'lift')"
              placeholder="请输入"
            />
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="12">
          <el-form-item label="排序号" prop="indexNo">
            <el-input-number
              v-model="form.indexNo"
              class="!w-100%"
              placeholder="请输入"
              :min="1"
              :max="99999"
              controls-position="right"
            />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>

    <template #footer>
      <el-button @click="cancel">取消</el-button>
      <el-button type="primary" @click="save" :loading="saving">确定</el-button>
    </template>
  </ele-modal>
</template>

<script>
import * as DevicePointApi from '@/api/ledgerAssets/device/presetInfo'

const defForm = {
  pointName: '',
  dirv: 2000,
  lift: 2000,
  indexNo: 100
}

export default {
  name: 'RobotPresetInfoForm',
  props: {
    dId: ''
  },
  data() {
    return {
      visible: false,
      title: '',
      loading: false,
      saving: false,
      type: '',
      dirv: 57,
      lift: 57,
      form: { ...defForm },
      rules: {
        pointName: [{ required: true, message: '预置位名称不能为空', trigger: 'blur' }],
        dirv: [{ required: true, message: '行车距离不能为空', trigger: 'blur' }],
        lift: [{ required: true, message: '升降距离不能为空', trigger: 'blur' }],
        indexNo: [{ required: true, message: '排序号不能为空', trigger: 'change' }]
      }
    }
  },
  methods: {
    /** 进度更新 */
    progressUpdate(value, type) {
      let num = parseInt(value) || 0
      if (num > 3500) {
        num = 3500
        this.form[type] = num
      } else if (num < -3500) {
        num = -3500
        this.form[type] = num
      }
      this[type] = Math.abs(Math.round(num / 35))
    },

    /** 打开弹窗 */
    open(type, id) {
      this.type = type
      this.title = type === 'create' ? '新增预置位' : '编辑预置位'
      this.resetForm()

      if (id) {
        this.loading = true
        DevicePointApi.getDevicePoint(id)
          .then((res) => {
            const pointJson = JSON.parse(res.pointJson || '{}')
            this.form = {
              ...res,
              dirv: pointJson.xcjl || 0,
              lift: pointJson.sjjl || 0
            }
            this.progressUpdate(this.form.dirv, 'dirv')
            this.progressUpdate(this.form.lift, 'lift')
          })
          .catch((e) => {
            this.$message.error(e.message)
          })
          .finally(() => {
            this.loading = false
          })
      }

      this.visible = true
    },

    /** 取消 */
    cancel() {
      this.resetForm()
      this.visible = false
    },

    /** 重置表单 */
    resetForm() {
      this.form = { ...defForm }
      this.dirv = 57
      this.lift = 57
      this.$refs.form?.resetFields()
    },

    /** 保存 */
    save() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          this.saving = true
          const data = {
            ...this.form,
            deviceId: this.dId,
            pointJson: JSON.stringify({
              xcjl: this.form.dirv,
              sjjl: this.form.lift
            })
          }
          delete data.dirv
          delete data.lift

          const action =
            this.type === 'create'
              ? DevicePointApi.createDevicePoint(data)
              : DevicePointApi.updateDevicePoint(data)

          action
            .then(() => {
              this.$message.success(this.type === 'create' ? '新增成功' : '修改成功')
              this.cancel()
              this.$emit('success')
            })
            .catch((e) => {
              this.$message.error(e.message)
            })
            .finally(() => {
              this.saving = false
            })
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.el-col-4 {
  .el-form-item {
    :deep(.el-form-item__content) {
      margin-left: 20px !important;
    }
  }
}

.tit {
  margin-left: 10px;
  font-weight: bold;
  border-left: 3px solid #9266f9;
  padding-left: 10px;
  margin-bottom: 14px;
}
</style>