bxztApp/packages/screen/src/views/EquipmentManagement/addDialog.vue

<template>
  <div>
    <div class="area-title-block">
      所属服务站: <span class="title-text">{{ stationName }}</span>
    </div>
    <el-form :model="form" class="equipment-form">
      <!-- 第一行：设备名称、设备大类、设备类型 -->
      <el-row :gutter="20">
        <el-col :span="8">
          <el-form-item label="设备名称" prop="sbmc">
            <el-input v-model="form.sbmc" maxlength="20" placeholder="请输入设备名称" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="设备大类" prop="sbdl">
            <el-select v-model="form.sbdl" placeholder="请选择">
              <el-option label="示例大类1" value="dl1" />
              <el-option label="示例大类2" value="dl2" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="设备类型" prop="sblx">
            <el-select v-model="form.sblx" placeholder="请选择">
              <el-option label="示例类型1" value="lx1" />
              <el-option label="示例类型2" value="lx2" />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>

      <!-- 第二行：设备型号、设备经度（只读）、设备纬度（只读） -->
      <el-row :gutter="20">
        <el-col :span="8">
          <el-form-item label="设备型号" prop="sbxh">
            <el-input v-model="form.sbxh" placeholder="请输入设备型号" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="设备经度" prop="jd">
            <el-input v-model="form.jd" placeholder="自动填充服务站经纬度" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="设备纬度" prop="wd">
            <el-input v-model="form.wd" placeholder="自动填充服务站经纬度" />
          </el-form-item>
        </el-col>
      </el-row>

      <!-- 第三行：购置日期、购买费用（万元）、应急设备 -->
      <el-row :gutter="20">
        <el-col :span="8">
          <el-form-item label="购置日期" prop="gzrq">
            <el-date-picker v-model="form.gzrq" type="date" placeholder="请选择购置日期" style="width: 100%;" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="购买费用（万元）" prop="gmfy">
            <el-input-number v-model="form.gmfy" :min="1" :max="10" controls-position="right"  />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="应急设备" prop="sfyjsb">
            <el-select v-model="form.sfyjsb" placeholder="请选择">
              <el-option label="是" value="是" />
              <el-option label="否" value="否" />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>

      <!-- 第四行：辐射范围、生产商、纳入市级补助范围 -->
      <el-row :gutter="20">
        <el-col :span="8">
          <el-form-item label="辐射范围" prop="fsfw">
            <el-input v-model="form.fsfw" placeholder="请输入辐射范围" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="生产商" prop="sccj">
            <el-input v-model="form.sccj" placeholder="请输入生产商" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="纳入市级补助范围" prop="sfnrsjbz">
            <el-select v-model="form.sfnrsjbz" placeholder="请选择">
              <el-option label="是" value="是" />
              <el-option label="否" value="否" />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </div>

</template>

<script setup>
import { ref, computed } from "vue";

const props = defineProps({
  detailData: {
    type: Object,
    default: () => ({}),
  },
  form: {
    type: Object,
    default: () => ({}),
  },
  // 养护站数据
  yhzData: {
    type: [Object, null],
    default: null,
  }
});

const stationName = computed(() => {
  return props.yhzData ? props.yhzData.rawName : ''
})
</script>

<style scoped lang="scss">
.area-title-block {
  margin-bottom: 20px;

  .title-text {
    color: rgb(10, 124, 255);
    font-size: 16px;
  }
}

:deep(.equipment-form) {
  .el-form-item {
    margin-bottom: 30px;
  }
}
</style>