feat
This commit is contained in:
parent
0269e6f355
commit
302afa4502
@ -1,15 +1,22 @@
|
||||
import request from '@/utils/axios';
|
||||
|
||||
/* 土地列表 */
|
||||
export function getLandsList(params = {}) {
|
||||
return request('land-resource/landManage/page', {
|
||||
method: 'GET',
|
||||
params,
|
||||
});
|
||||
}
|
||||
|
||||
/* 新增土地 */
|
||||
export function lnadSave(data = {}) {
|
||||
return request('/land-resource/landManage/save', {
|
||||
method: 'POST',
|
||||
data,
|
||||
});
|
||||
}
|
||||
/* 导出土地 */
|
||||
export function exportLands(params = {}) {
|
||||
return request('/land-resource/landManage/export', {
|
||||
method: 'GET',
|
||||
params,
|
||||
});
|
||||
}
|
||||
|
||||
@ -10,7 +10,7 @@
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, onMounted } from 'vue';
|
||||
import { ref, onMounted, watch } from 'vue';
|
||||
import request from '@/utils/axios';
|
||||
const emit = defineEmits(['update:value']);
|
||||
|
||||
@ -69,6 +69,16 @@ onMounted(async () => {
|
||||
/* --------------- data --------------- */
|
||||
// #region
|
||||
const val = ref(null);
|
||||
watch(
|
||||
() => props.value,
|
||||
() => {
|
||||
val.value = props.value;
|
||||
},
|
||||
{
|
||||
deep: true,
|
||||
immediate: true,
|
||||
}
|
||||
);
|
||||
const options = ref([]);
|
||||
|
||||
// #endregion
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
<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">
|
||||
<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>
|
||||
@ -19,7 +19,7 @@
|
||||
placeholder="请选择所属网格"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="用地分类" prop="LandType">
|
||||
<el-form-item label="用地分类" prop="landClassificationType">
|
||||
<LandClassificationType v-model:value="baseInfo.landClassificationType" placeholder="请选择用地分类" />
|
||||
</el-form-item>
|
||||
<el-form-item label="位置" prop="villageCode">
|
||||
@ -49,14 +49,18 @@
|
||||
<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-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">
|
||||
<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>
|
||||
</el-form-item> -->
|
||||
<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">
|
||||
@ -72,7 +76,7 @@ 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 } from '@/apis/land';
|
||||
import { lnadSave, exportLands } from '@/apis/land';
|
||||
import { ElMessage } from 'element-plus';
|
||||
import { CommonUpload } from '@/apis';
|
||||
|
||||
@ -101,7 +105,7 @@ const propertyInfo = reactive({
|
||||
propertyName: '',
|
||||
propertyPhone: '',
|
||||
landCode: '',
|
||||
propertyCertificateUrl: '',
|
||||
propertyCertificateUrl: [],
|
||||
});
|
||||
watch(
|
||||
() => props.visible,
|
||||
@ -117,6 +121,12 @@ watch(
|
||||
);
|
||||
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 --------------- */
|
||||
@ -126,23 +136,35 @@ const rowUploadPicture = async ({ file }) => {
|
||||
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();
|
||||
@ -157,6 +179,9 @@ function resFrom() {
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.title_ {
|
||||
margin-bottom: 12px;
|
||||
font-size: 16px;
|
||||
@ -175,4 +200,47 @@ function resFrom() {
|
||||
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>
|
||||
|
||||
@ -29,13 +29,13 @@
|
||||
</el-row>
|
||||
</el-form>
|
||||
<div class="options_btns">
|
||||
<el-button v-for="(item, i) in btns" :key="'btns_' + i" type="primary" @click="item.method">
|
||||
<el-button v-for="(item, i) in btns" :key="'btns_' + i" type="primary" :disabled="item.needKey && item.disabled" @click="item.method">
|
||||
{{ item.label }}
|
||||
</el-button>
|
||||
</div>
|
||||
<el-table :data="list">
|
||||
<el-table :data="list" @selection-change="handleSelectionChange">
|
||||
<el-table-column type="selection" width="55" />
|
||||
<el-table-column type="index"> </el-table-column>
|
||||
<el-table-column type="index" label="序号" width="100"> </el-table-column>
|
||||
<el-table-column label="地块名" prop="landName" width="240" show-overflow-tooltip />
|
||||
<el-table-column label="地址" prop="address" show-overflow-tooltip />
|
||||
<el-table-column label="产权人" prop="owner" show-overflow-tooltip />
|
||||
@ -43,19 +43,20 @@
|
||||
<el-table-column label="农用地分类" prop="landClassificationType" show-overflow-tooltip />
|
||||
<el-table-column label="面积" prop="978.2" show-overflow-tooltip />
|
||||
<el-table-column label="坐标" prop="coordinate" show-overflow-tooltip />
|
||||
<el-table-column label="是否土地流转" prop="landTransfer" show-overflow-tooltip>
|
||||
<el-table-column label="是否土地流转" prop="landTransfer" width="110">
|
||||
<template #default="{ row }">
|
||||
{{ !row.landTransfer ? '是' : '否' }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="产权编号" prop="" show-overflow-tooltip />
|
||||
<el-table-column label="产权编号" prop="landCode" show-overflow-tooltip />
|
||||
<el-table-column label="土壤类型" prop="soilType" show-overflow-tooltip />
|
||||
<el-table-column label="是否上传附件" prop="isUpload" show-overflow-tooltip>
|
||||
<el-table-column label="是否上传附件" prop="isUpload" width="110">
|
||||
<template #default="{ row }">{{ !row.isUpload ? '是' : '否' }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column fixed="right" label="操作" width="200" show-overflow-tooltip />
|
||||
</el-table>
|
||||
<Pagina :page-data="pageData" />
|
||||
<br />
|
||||
<Pagina :page-data="pageData" @page-change="(v) => handlePaginaChange(v, true)" @size-hange="(v) => handlePaginaChange(v)" />
|
||||
</CustCard>
|
||||
<CreateLand :visible="addFlag" @close="addFlag = false" />
|
||||
</template>
|
||||
@ -102,6 +103,7 @@ const pageData = reactive({
|
||||
});
|
||||
|
||||
const list = ref([]);
|
||||
const selectRowKeys = ref([]);
|
||||
const btns = reactive([
|
||||
{
|
||||
label: '新增土地',
|
||||
@ -110,22 +112,24 @@ const btns = reactive([
|
||||
addFlag.value = true;
|
||||
},
|
||||
},
|
||||
{
|
||||
label: '审核',
|
||||
disabled: true,
|
||||
method: function () {
|
||||
console.log('examine');
|
||||
},
|
||||
},
|
||||
// {
|
||||
// label: '审核',
|
||||
// disabled: true,
|
||||
// method: function () {
|
||||
// console.log('examine');
|
||||
// },
|
||||
// },
|
||||
{
|
||||
label: '导入',
|
||||
disabled: false,
|
||||
needKey: true,
|
||||
disabled: true,
|
||||
method: function () {
|
||||
console.log('import');
|
||||
},
|
||||
},
|
||||
{
|
||||
label: '导出',
|
||||
needKey: true,
|
||||
disabled: true,
|
||||
method: function () {
|
||||
console.log('export');
|
||||
@ -156,6 +160,23 @@ function handleResetSearch() {
|
||||
searchRef.value && searchRef.value.resetFields();
|
||||
getLandsList();
|
||||
}
|
||||
function handleSelectionChange(val) {
|
||||
console.log(val);
|
||||
selectRowKeys.value = val.map((item) => item.id);
|
||||
btns.forEach((item) => {
|
||||
if (item.needKey) {
|
||||
item.disabled = !selectRowKeys.value.length;
|
||||
}
|
||||
});
|
||||
}
|
||||
function handlePaginaChange(v, t = false) {
|
||||
if (t) pageData.page = v;
|
||||
else {
|
||||
pageData;
|
||||
pageData.size = v;
|
||||
}
|
||||
getList();
|
||||
}
|
||||
// #endregion
|
||||
</script>
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user