138 lines
4.5 KiB
Vue
138 lines
4.5 KiB
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> |