247 lines
7.3 KiB
Vue
247 lines
7.3 KiB
Vue
<template>
|
|
<el-drawer v-model="_visible" title="土地信息" :size="800" @close="handleClose">
|
|
<el-card>
|
|
<div class="title_">基础信息</div>
|
|
<el-form ref="baseForm" :model="baseInfo" class="base_form" label-width="120px" :rules="rules">
|
|
<el-form-item label="土地名称" prop="landName">
|
|
<el-input v-model="baseInfo.landName" placeholder="请输入名称"></el-input>
|
|
</el-form-item>
|
|
<el-form-item label="所属网格" prop="gridId">
|
|
<CustomSelect
|
|
v-model:value="baseInfo.gridId"
|
|
:set="{
|
|
url: '/land-resource/gridManage/page',
|
|
props: {
|
|
value: 'id',
|
|
label: 'gridName',
|
|
},
|
|
}"
|
|
placeholder="请选择所属网格"
|
|
/>
|
|
</el-form-item>
|
|
<el-form-item label="用地分类" prop="landClassificationType">
|
|
<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="土壤类型">
|
|
<el-input v-model="baseInfo.soilType" placeholder="请输入土壤类型"></el-input>
|
|
</el-form-item>
|
|
</el-form>
|
|
</el-card>
|
|
<br />
|
|
<el-card>
|
|
<div class="title_">土地产权信息</div>
|
|
<el-form ref="propertyForm" :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" class="land_code">
|
|
<el-input v-model="propertyInfo.landCode" placeholder="请输入联系人"></el-input>
|
|
</el-form-item>
|
|
<el-form-item label="产权证书" prop="propertyCertificateUrl" class="attrs_content">
|
|
<el-upload class="custom-form__uploader" action="#" :show-file-list="false" accept="image/*" :limit="20" :http-request="rowUploadPicture">
|
|
<el-icon class="custom-form__uploader__icon"><Plus /></el-icon>
|
|
</el-upload>
|
|
<div v-for="item in propertyInfo.propertyCertificateUrl" :key="`attr_${item.id}`" class="attrs_content__item">
|
|
<img :src="item.url" :alt="item.name" style="width: 100%; height: 100%" />
|
|
<el-icon class="clear_btn" @click="handleClearAttr(item.id)"><CircleCloseFilled /></el-icon>
|
|
</div>
|
|
</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 CustomSelect from '@/components/CustomSelect.vue';
|
|
import LandIsTranfer from '@/components/LandIsTranfer.vue';
|
|
import { lnadSave, exportLands } from '@/apis/land';
|
|
import { ElMessage } from 'element-plus';
|
|
import { CommonUpload } from '@/apis';
|
|
|
|
const props = defineProps({
|
|
visible: {
|
|
type: Boolean,
|
|
default: false,
|
|
},
|
|
});
|
|
const emit = defineEmits(['close']);
|
|
/* --------------- data --------------- */
|
|
// #region
|
|
|
|
const _visible = ref(false);
|
|
const baseInfo = reactive({
|
|
landName: '',
|
|
gridId: '',
|
|
landClassificationType: '',
|
|
villageCode: '',
|
|
isTransfer: '',
|
|
area: '',
|
|
owner: '',
|
|
soilType: '',
|
|
});
|
|
const propertyInfo = reactive({
|
|
propertyName: '',
|
|
propertyPhone: '',
|
|
landCode: '',
|
|
propertyCertificateUrl: [],
|
|
});
|
|
watch(
|
|
() => props.visible,
|
|
() => {
|
|
_visible.value = props.visible;
|
|
}
|
|
);
|
|
watch(
|
|
() => baseInfo,
|
|
() => {
|
|
console.log('---', baseInfo);
|
|
}
|
|
);
|
|
const baseForm = ref();
|
|
const propertyForm = ref();
|
|
const rules = reactive({
|
|
landName: [{ required: true, message: '请输入名称', trigger: 'blur' }],
|
|
gridId: [{ required: true, message: '请选择所属网格', trigger: 'blur' }],
|
|
landClassificationType: [{ required: true, message: '请选择用地分类', trigger: 'blur' }],
|
|
villageCode: [{ required: true, message: '请输入位置', trigger: 'blur' }],
|
|
});
|
|
// #endregion
|
|
|
|
/* --------------- methods --------------- */
|
|
// #region
|
|
const rowUploadPicture = async ({ file }) => {
|
|
const formData = new FormData();
|
|
formData.append('file', file);
|
|
const res = await CommonUpload(formData);
|
|
if (res.code === 200) {
|
|
propertyInfo.propertyCertificateUrl.push({
|
|
...res.data,
|
|
id: 'id_' + Date.now(),
|
|
});
|
|
console.log('---', res);
|
|
// state.form.productUrl = res.data.url;
|
|
// const base64 = await imageToBase64(file);
|
|
// state.form.base64 = base64;
|
|
}
|
|
};
|
|
function handleClearAttr(id) {
|
|
propertyInfo.propertyCertificateUrl = propertyInfo.propertyCertificateUrl.filter((item) => item.id !== id);
|
|
}
|
|
async function handleSubmit() {
|
|
baseForm.value.validate().then(async () => {
|
|
const data = {
|
|
...baseInfo,
|
|
...propertyInfo,
|
|
isDraftsSave: 0,
|
|
};
|
|
let ids = '';
|
|
propertyInfo.propertyCertificateUrl.map((item) => (ids += item.id));
|
|
data.propertyCertificateUrl = ids;
|
|
const res = await lnadSave(data);
|
|
if (res.code == 200) {
|
|
ElMessage.success('保存成功');
|
|
resFrom();
|
|
}
|
|
});
|
|
}
|
|
function handleClose() {
|
|
resFrom();
|
|
emit('close');
|
|
}
|
|
function resFrom() {
|
|
baseForm.value.resetFields();
|
|
propertyForm.value.resetFields();
|
|
}
|
|
|
|
// #endregion
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
* {
|
|
box-sizing: border-box;
|
|
}
|
|
.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;
|
|
}
|
|
.attrs_content__item {
|
|
position: relative;
|
|
padding: 6px;
|
|
border: 1px solid #ccc;
|
|
border-radius: 4px;
|
|
img {
|
|
border-radius: 2px;
|
|
}
|
|
.clear_btn {
|
|
position: absolute;
|
|
right: 0px;
|
|
top: 0px;
|
|
font-size: 18px;
|
|
color: #f15c5c;
|
|
opacity: 0;
|
|
cursor: pointer;
|
|
background-color: #fff;
|
|
border-radius: 50%;
|
|
}
|
|
&:hover {
|
|
.clear_btn {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
}
|
|
::v-deep() {
|
|
.land_code {
|
|
.el-form-item__content {
|
|
align-items: baseline;
|
|
}
|
|
}
|
|
.attrs_content {
|
|
.el-form-item__content {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 10px;
|
|
> div {
|
|
width: 100px;
|
|
height: 100px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|