141 lines
4.3 KiB
Vue
141 lines
4.3 KiB
Vue
<template>
|
|
<el-drawer v-model="_visible" title="土地信息" :size="800" @close="handleClose">
|
|
<el-card>
|
|
<div class="title_">基础信息</div>
|
|
<el-form :model="baseInfo" class="base_form" label-width="120px">
|
|
<el-form-item label="土地名称" prop="landName">
|
|
<el-input v-model="baseInfo.landName" placeholder="请输入名称"></el-input>
|
|
</el-form-item>
|
|
<el-form-item label="所属网格" prop="gridName" placeholder="请选择所属网格">
|
|
<GridSelect />
|
|
</el-form-item>
|
|
<el-form-item label="用地分类" prop="LandType">
|
|
<LandClassificationType v-model:value="baseInfo.landClassificationType" placeholder="请选择用地分类" />
|
|
</el-form-item>
|
|
<el-form-item label="位置" prop="villageCode">
|
|
<el-input v-model="baseInfo.villageCode" placeholder="请输入"></el-input>
|
|
</el-form-item>
|
|
<el-form-item label="是否土地流转" prop="isTransfer">
|
|
<LandIsTranfer v-model:value="baseInfo.isTransfer" />
|
|
</el-form-item>
|
|
<el-form-item label="面积" prop="area">
|
|
<el-input v-model="baseInfo.area" placeholder="请输入面积"></el-input>
|
|
</el-form-item>
|
|
<el-form-item label="产权人" prop="owner">
|
|
<el-input v-model="baseInfo.owner" placeholder="请输入"></el-input>
|
|
</el-form-item>
|
|
<el-form-item label="土壤类型">
|
|
<LandType v-model:value="baseInfo.landType" placeholder="请选择土壤类型" />
|
|
</el-form-item>
|
|
</el-form>
|
|
</el-card>
|
|
<br />
|
|
<el-card>
|
|
<div class="title_">土地产权信息</div>
|
|
<el-form :model="propertyInfo" class="property_form" label-width="120px">
|
|
<el-form-item label="产权人姓名" prop="propertyName">
|
|
<el-input v-model="propertyInfo.propertyName" placeholder="请输入联系人"></el-input>
|
|
</el-form-item>
|
|
<el-form-item label="产权人联系电话" prop="propertyPhone">
|
|
<el-input v-model="propertyInfo.propertyPhone" placeholder="请输入联系人"></el-input>
|
|
</el-form-item>
|
|
<el-form-item label="产权编号" prop="landCode">
|
|
<el-input v-model="propertyInfo.landCode" placeholder="请输入联系人"></el-input>
|
|
</el-form-item>
|
|
</el-form>
|
|
</el-card>
|
|
<section class="btns">
|
|
<el-button type="primary" @click="handleSubmit">保存并提交审核</el-button>
|
|
<el-button type="warning" @click="handleSubmit">保存草稿</el-button>
|
|
<el-button @click="handleClose">取消</el-button>
|
|
</section>
|
|
</el-drawer>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { reactive, ref, watch } from 'vue';
|
|
import LandClassificationType from '@/components/LandClassificationType.vue';
|
|
import GridSelect from '@/components/GridSelect.vue';
|
|
import LandIsTranfer from '@/components/LandIsTranfer.vue';
|
|
import LandType from '@/components/LandType.vue';
|
|
import { lnadSave } from '@/apis/land';
|
|
import { ElMessage } from 'element-plus';
|
|
|
|
const props = defineProps({
|
|
visible: {
|
|
type: Boolean,
|
|
default: false,
|
|
},
|
|
});
|
|
const emit = defineEmits(['close']);
|
|
/* --------------- data --------------- */
|
|
// #region
|
|
|
|
const _visible = ref(false);
|
|
const baseInfo = reactive({
|
|
landName: '',
|
|
gridName: '',
|
|
landClassificationType: '1',
|
|
villageCode: '',
|
|
isTransfer: '1',
|
|
area: '',
|
|
owner: '',
|
|
landType: '0',
|
|
});
|
|
const propertyInfo = reactive({
|
|
propertyName: '',
|
|
propertyPhone: '',
|
|
landCode: '',
|
|
propertyCertificateUrl: '',
|
|
});
|
|
watch(
|
|
() => props.visible,
|
|
() => {
|
|
_visible.value = props.visible;
|
|
}
|
|
);
|
|
watch(
|
|
() => baseInfo,
|
|
() => {
|
|
console.log('---', baseInfo);
|
|
}
|
|
);
|
|
// #endregion
|
|
|
|
/* --------------- methods --------------- */
|
|
// #region
|
|
async function handleSubmit() {
|
|
const data = {
|
|
...baseInfo,
|
|
...propertyInfo,
|
|
};
|
|
const res = await lnadSave(data);
|
|
if (res.code == 200) ElMessage.success('保存成功');
|
|
}
|
|
function handleClose() {
|
|
emit('close');
|
|
}
|
|
// #endregion
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.title_ {
|
|
margin-bottom: 12px;
|
|
font-size: 16px;
|
|
font-weight: bold;
|
|
}
|
|
.base_form,
|
|
.property_form {
|
|
display: grid;
|
|
grid-template-columns: repeat(2, 1fr);
|
|
gap: 20px;
|
|
}
|
|
.btns {
|
|
margin-top: 12px;
|
|
display: grid;
|
|
justify-content: center;
|
|
grid-template-columns: auto auto auto;
|
|
gap: 12px;
|
|
}
|
|
</style>
|