style
This commit is contained in:
parent
5dc37ccdf2
commit
05e93d5ecd
3
sub-government-affairs-service/src/apis/casualLandApi.js
Normal file
3
sub-government-affairs-service/src/apis/casualLandApi.js
Normal file
@ -0,0 +1,3 @@
|
||||
import request from '@/utils/request';
|
||||
|
||||
|
||||
@ -1,4 +1,5 @@
|
||||
import request from '@/utils/axios';
|
||||
|
||||
/* 土地列表 */
|
||||
export function getLandsList(params = {}) {
|
||||
return request('land-resource/landManage/page', {
|
||||
@ -7,10 +8,10 @@ export function getLandsList(params = {}) {
|
||||
});
|
||||
}
|
||||
|
||||
export function saveLand(params = {}) {
|
||||
export function saveLand(data = {}) {
|
||||
return request('land-resource/landManage/save', {
|
||||
method: 'POST',
|
||||
params,
|
||||
data,
|
||||
});
|
||||
}
|
||||
export function exportLands(params = {}) {
|
||||
@ -125,3 +126,9 @@ export function delPlantingStage(params) {
|
||||
method: 'DELETE',
|
||||
});
|
||||
}
|
||||
/* 删除土地 */
|
||||
export function delLand(id) {
|
||||
return request('land-resource/landManage/delete/' + id, {
|
||||
method: 'DELETE',
|
||||
});
|
||||
}
|
||||
|
||||
@ -1,144 +1,307 @@
|
||||
<template>
|
||||
<CustomCard>
|
||||
<el-radio-group v-model="searchCondition.landType" class="lands_types" style="margin-bottom: 30px" @change="getList()">
|
||||
<el-radio-group v-model="landType" class="lands_types" style="margin-bottom: 30px" @change="getList()">
|
||||
<el-radio-button v-for="item in landsType" :key="'landsType_' + item.value" :value="item.value">
|
||||
{{ item.label }}
|
||||
</el-radio-button>
|
||||
</el-radio-group>
|
||||
<el-form ref="searchRef" :model="searchCondition">
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="6">
|
||||
<el-form-item label="土地名称:" prop="landName">
|
||||
<el-input v-model="searchCondition.landName" placeholder="请输入"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<el-form-item label="所属网格" prop="gridName">
|
||||
<el-input v-model="searchCondition.gridName" placeholder="请输入"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<el-form-item label="产权人" prop="owner">
|
||||
<el-input v-model="searchCondition.owner" placeholder="请输入"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<el-button type="primary" @click="getList()">查询</el-button>
|
||||
<el-button type="" @click="handleResetSearch">重置</el-button>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
<div class="options_btns">
|
||||
<el-button v-for="(item, i) in btns" :key="'btns_' + i" type="primary" @click="item.method">
|
||||
{{ item.label }}
|
||||
</el-button>
|
||||
</div>
|
||||
<el-table :data="list" @selection-change="handleSelectionChange">
|
||||
<el-table-column type="selection" width="55" />
|
||||
<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 />
|
||||
<el-table-column label="所属网格" prop="gridName" show-overflow-tooltip />
|
||||
<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" width="110">
|
||||
<template #default="{ row }">
|
||||
{{ !row.landTransfer ? '是' : '否' }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="产权编号" prop="landCode" show-overflow-tooltip />
|
||||
<el-table-column label="土壤类型" prop="soilType" 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>
|
||||
<template #default="{ row }">
|
||||
<el-button type="primary" link @click="handleEdit(row)">编辑</el-button>
|
||||
<el-button type="info" link @click="handleEdit(row, true)">详情</el-button>
|
||||
<el-button type="danger" link @click="handleDelete(row)">删除</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<br />
|
||||
<Pagina :page-data="pageData" @page-change="(v) => handlePaginaChange(v, true)" @size-hange="(v) => handlePaginaChange(v)" />
|
||||
<avue-crud
|
||||
ref="crudRef"
|
||||
v-model:page="pageData"
|
||||
v-model:search="searchData"
|
||||
class="custon_create_land_"
|
||||
:data="data"
|
||||
:option="option"
|
||||
@current-change="handlePageChange"
|
||||
@size-change="handleSizeChange"
|
||||
@search-reset="handleResetSearch"
|
||||
@search-change="handleSearch"
|
||||
@row-save="handleRowSave"
|
||||
>
|
||||
<!-- <template #menu-form>
|
||||
<CreateLand :row-data="rowData" :land-type="0" />
|
||||
</template> -->
|
||||
<template #menu-left>
|
||||
<el-button type="success" icon="upload">导入</el-button>
|
||||
<el-button type="success" icon="download" @click="handleExport">导出</el-button>
|
||||
</template>
|
||||
<template #menu="{ row }">
|
||||
<el-button type="info" link @click="handleView(row)">查看</el-button>
|
||||
<el-popconfirm title="确定删除该土地?" @confirm="() => handleDelete(row.id)">
|
||||
<template #reference>
|
||||
<el-button type="danger" link>删除</el-button>
|
||||
</template>
|
||||
</el-popconfirm>
|
||||
</template>
|
||||
|
||||
<template #propertyCertificateUrl-form="{ type }">
|
||||
<section class="create_land_attrs_content_">
|
||||
<el-upload
|
||||
v-if="type !== 'view'"
|
||||
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 attrs" :key="`attr_${item.id}`" class="attrs_content__item">
|
||||
<img :src="item.url" :alt="item.name" style="" />
|
||||
<el-icon class="clear_btn" @click="handleClearAttr(item.id)"><CircleCloseFilled /></el-icon>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
</avue-crud>
|
||||
</CustomCard>
|
||||
<CreateLand :visible="addFlag" :row-data="rowData" :land-type="searchCondition.landType" @close="addFlag = false" />
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, reactive, onMounted } from 'vue';
|
||||
import Pagina from '@/components/pagina.vue';
|
||||
import CustomCard from '@/components/CustomCard.vue';
|
||||
import { getLandsList, exportLands } from '@/apis/land.js';
|
||||
import CreateLand from './common/CreateLand.vue';
|
||||
import CustomCard from '@/components/CustomCard';
|
||||
import { CRUD_OPTIONS } from '@/config';
|
||||
import { useUserStore } from '@/store/modules/user';
|
||||
import { getLandsList, exportLands, delLand, saveLand } from '@/apis/land.js';
|
||||
import { ElMessage } from 'element-plus';
|
||||
|
||||
import useLandHook from './useLandHook';
|
||||
import { CommonUpload } from '@/apis';
|
||||
import { get } from 'lodash';
|
||||
const { landType, landsType, landClassificationType, handleIficationType } = useLandHook();
|
||||
const { VITE_APP_BASE_API } = import.meta.env;
|
||||
const UserStore = useUserStore();
|
||||
|
||||
const landClassificationType_ = ref('');
|
||||
onMounted(() => {
|
||||
getList();
|
||||
});
|
||||
|
||||
/* --------------- data --------------- */
|
||||
// #region
|
||||
const addFlag = ref(false);
|
||||
const landsType = ref([
|
||||
{
|
||||
value: '0',
|
||||
label: '农用地',
|
||||
},
|
||||
{
|
||||
value: '1',
|
||||
label: '住宅用地',
|
||||
},
|
||||
{
|
||||
value: '2',
|
||||
label: '园林',
|
||||
},
|
||||
]);
|
||||
const searchCondition = reactive({
|
||||
landType: '0',
|
||||
|
||||
const crudRef = ref();
|
||||
const pageData = reactive({
|
||||
currentPage: 1,
|
||||
pageSize: 10,
|
||||
total: 0,
|
||||
});
|
||||
const data = ref([]);
|
||||
const option = reactive({
|
||||
...CRUD_OPTIONS,
|
||||
selection: false,
|
||||
menuWidth: 120,
|
||||
column: [
|
||||
{
|
||||
label: '地块名',
|
||||
prop: 'landName',
|
||||
search: true,
|
||||
addDisplay: false,
|
||||
display: false,
|
||||
editDisplay: false,
|
||||
},
|
||||
{
|
||||
label: '地址',
|
||||
prop: 'address',
|
||||
addDisplay: false,
|
||||
display: false,
|
||||
editDisplay: false,
|
||||
},
|
||||
{
|
||||
label: '产权人',
|
||||
prop: 'owner',
|
||||
search: true,
|
||||
addDisplay: false,
|
||||
display: false,
|
||||
editDisplay: false,
|
||||
},
|
||||
{
|
||||
label: '所属网格',
|
||||
prop: 'gridName',
|
||||
// type: 'select',
|
||||
search: true,
|
||||
addDisplay: false,
|
||||
display: false,
|
||||
editDisplay: false,
|
||||
},
|
||||
{
|
||||
label: '农用地分类',
|
||||
prop: 'landClassificationType',
|
||||
select: 'select',
|
||||
dicData: landClassificationType,
|
||||
addDisplay: false,
|
||||
display: false,
|
||||
editDisplay: false,
|
||||
},
|
||||
{
|
||||
label: '面积',
|
||||
prop: 'area',
|
||||
addDisplay: false,
|
||||
display: false,
|
||||
editDisplay: false,
|
||||
},
|
||||
{
|
||||
label: '坐标',
|
||||
prop: 'coordinate',
|
||||
addDisplay: false,
|
||||
display: false,
|
||||
editDisplay: false,
|
||||
},
|
||||
{
|
||||
label: '是否流转土地',
|
||||
prop: 'landTransfer',
|
||||
addDisplay: false,
|
||||
display: false,
|
||||
editDisplay: false,
|
||||
},
|
||||
{
|
||||
label: '产权编号',
|
||||
prop: 'landCode',
|
||||
addDisplay: false,
|
||||
display: false,
|
||||
editDisplay: false,
|
||||
},
|
||||
{
|
||||
label: '土壤类型',
|
||||
prop: 'soilType',
|
||||
addDisplay: false,
|
||||
display: false,
|
||||
editDisplay: false,
|
||||
},
|
||||
{
|
||||
label: '是否上传附件',
|
||||
prop: 'isUpload',
|
||||
addDisplay: false,
|
||||
display: false,
|
||||
editDisplay: false,
|
||||
},
|
||||
],
|
||||
group: [
|
||||
{
|
||||
label: '用户信息',
|
||||
prop: 'baseGroup',
|
||||
column: [
|
||||
{
|
||||
label: '土地名称',
|
||||
prop: 'landName',
|
||||
rules: [
|
||||
{
|
||||
required: true,
|
||||
message: '请输入',
|
||||
trigger: 'blur',
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
label: '所属网格',
|
||||
prop: 'gridId',
|
||||
type: 'select',
|
||||
dicUrl: `${VITE_APP_BASE_API}/land-resource/gridManage/page`,
|
||||
dicQuery: {
|
||||
current: 1,
|
||||
size: 9999,
|
||||
},
|
||||
props: {
|
||||
value: 'id',
|
||||
label: 'gridName',
|
||||
},
|
||||
dicMethod: 'get',
|
||||
dicHeaders: {
|
||||
authorization: UserStore.token,
|
||||
},
|
||||
dicFormatter: (res) => res?.data?.records ?? [],
|
||||
rules: [
|
||||
{
|
||||
required: true,
|
||||
message: '请输入',
|
||||
trigger: 'blur',
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
label: '用地分类',
|
||||
prop: 'landClassificationType',
|
||||
type: 'select',
|
||||
dicData: landClassificationType,
|
||||
rules: [
|
||||
{
|
||||
required: true,
|
||||
message: '请输入',
|
||||
trigger: 'blur',
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
label: '位置',
|
||||
prop: 'villageCode',
|
||||
rules: [
|
||||
{
|
||||
required: true,
|
||||
message: '请输入',
|
||||
trigger: 'blur',
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
label: '是否土地流转',
|
||||
prop: 'isTransfer',
|
||||
type: 'select',
|
||||
dicData: [
|
||||
{
|
||||
label: '是',
|
||||
value: '0',
|
||||
},
|
||||
{
|
||||
label: '否',
|
||||
value: '1',
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
label: '面积',
|
||||
prop: 'area',
|
||||
},
|
||||
{
|
||||
label: '产权人',
|
||||
prop: 'owner',
|
||||
},
|
||||
{
|
||||
label: '土壤类型',
|
||||
prop: 'soilType',
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
label: '土地产权信息',
|
||||
prop: 'baseGroup',
|
||||
column: [
|
||||
{
|
||||
label: '产权人姓名',
|
||||
prop: 'propertyName',
|
||||
},
|
||||
{
|
||||
label: '产权人联系电话',
|
||||
prop: 'propertyPhone',
|
||||
},
|
||||
{
|
||||
label: '产权编号',
|
||||
prop: 'landCode',
|
||||
},
|
||||
{
|
||||
label: '产权证书',
|
||||
prop: 'propertyCertificateUrl',
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
});
|
||||
const searchData = reactive({
|
||||
landName: '',
|
||||
gridName: '',
|
||||
owner: '',
|
||||
});
|
||||
const searchRef = ref();
|
||||
const pageData = reactive({
|
||||
page: 1,
|
||||
size: 10,
|
||||
total: 0,
|
||||
});
|
||||
|
||||
const list = ref([]);
|
||||
const selectRowKeys = ref([]);
|
||||
const btns = reactive([
|
||||
{
|
||||
label: '新增土地',
|
||||
method: function () {
|
||||
console.log('add');
|
||||
rowData.value = {};
|
||||
addFlag.value = true;
|
||||
},
|
||||
},
|
||||
// {
|
||||
// label: '审核',
|
||||
// disabled: true,
|
||||
// method: function () {
|
||||
// console.log('examine');
|
||||
// },
|
||||
// },
|
||||
{
|
||||
label: '导入',
|
||||
method: function () {
|
||||
console.log('import');
|
||||
},
|
||||
},
|
||||
{
|
||||
label: '导出',
|
||||
method: handleExport,
|
||||
},
|
||||
]);
|
||||
const rowData = ref({});
|
||||
|
||||
const attrs = ref([]);
|
||||
const rowData = ref([]);
|
||||
// #endregion
|
||||
|
||||
/* --------------- methods --------------- */
|
||||
@ -146,47 +309,67 @@ const rowData = ref({});
|
||||
|
||||
async function getList() {
|
||||
const params = {
|
||||
current: pageData.page,
|
||||
size: pageData.size,
|
||||
...searchCondition,
|
||||
current: pageData.currentPage,
|
||||
size: pageData.pageSize,
|
||||
landType: landType.value,
|
||||
...searchData,
|
||||
};
|
||||
let res = await getLandsList(params);
|
||||
console.log('res ---------', res);
|
||||
if (res.code == 200) {
|
||||
list.value = res.data.records;
|
||||
data.value = res.data.records;
|
||||
pageData.total = res.data.total;
|
||||
}
|
||||
}
|
||||
function handleResetSearch() {
|
||||
console.log('searchRef', searchRef.value);
|
||||
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;
|
||||
}
|
||||
function handlePageChange(val) {
|
||||
console.log('page', val);
|
||||
pageData.currentPage = val;
|
||||
getList();
|
||||
}
|
||||
const attrNames = ref(['农用地', '住宅用地', '园林']);
|
||||
function handleSizeChange(val) {
|
||||
pageData.pageSize = val;
|
||||
getList();
|
||||
}
|
||||
async function handleSearch(form, done) {
|
||||
for (let key in form) {
|
||||
searchData[key] = form[key];
|
||||
}
|
||||
await getList();
|
||||
done();
|
||||
}
|
||||
async function handleResetSearch() {
|
||||
for (let key in searchData) {
|
||||
searchData[key] = '';
|
||||
}
|
||||
pageData.currentPage = 1;
|
||||
pageData.pageSize = 10;
|
||||
pageData.total = 0;
|
||||
await getList();
|
||||
}
|
||||
async function handleRowSave(val, done, loading) {
|
||||
let data = JSON.parse(JSON.stringify(val));
|
||||
data.isDraftsSave = 0;
|
||||
data.landType = 0;
|
||||
let urls = [];
|
||||
if (data.propertyCertificateUrl.length) {
|
||||
data.propertyCertificateUrl.forEach((item) => urls.push(item.url));
|
||||
}
|
||||
data.propertyCertificateUrl = urls.join();
|
||||
const res = await saveLand(data);
|
||||
if (res.code == 200) {
|
||||
ElMessage.success('保存成功');
|
||||
getList();
|
||||
done();
|
||||
}
|
||||
}
|
||||
async function handleExport() {
|
||||
let res = await exportLands({
|
||||
landType: searchCondition.landType,
|
||||
landType: 1,
|
||||
});
|
||||
if (res) {
|
||||
let a = document.createElement('a');
|
||||
a.download = attrNames.value[Number(searchCondition.landType)] + '.xlsx';
|
||||
// a.download = attrNames.value[Number(searchCondition.landType)] + '.xlsx';
|
||||
a.download = 'test.xlsx';
|
||||
let blob = new Blob([res.data], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' });
|
||||
let link = window.URL.createObjectURL(blob);
|
||||
a.href = link;
|
||||
@ -196,11 +379,30 @@ async function handleExport() {
|
||||
window.URL.revokeObjectURL(link);
|
||||
}
|
||||
}
|
||||
function handleEdit(row, info = true) {
|
||||
rowData.value = row;
|
||||
rowData.value.isDetails = info;
|
||||
addFlag.value = true;
|
||||
console.log('rowd', rowData.value);
|
||||
const rowUploadPicture = async ({ file }) => {
|
||||
const formData = new FormData();
|
||||
formData.append('file', file);
|
||||
const res = await CommonUpload(formData);
|
||||
if (res.code === 200) {
|
||||
attrs.value.push({
|
||||
...res.data,
|
||||
id: 'id_' + Date.now(),
|
||||
});
|
||||
}
|
||||
};
|
||||
function handleClearAttr(id) {
|
||||
attrs.value = attrs.value.filter((item) => item.id !== id);
|
||||
}
|
||||
async function handleDelete(id) {
|
||||
let res = await delLand(id);
|
||||
if (res.code == 200) {
|
||||
getList();
|
||||
}
|
||||
}
|
||||
function handleView(obj) {
|
||||
rowData.value = obj;
|
||||
console.log('row', rowData.value);
|
||||
crudRef.value.rowView(obj);
|
||||
}
|
||||
// #endregion
|
||||
</script>
|
||||
@ -218,10 +420,46 @@ function handleEdit(row, info = true) {
|
||||
}
|
||||
}
|
||||
}
|
||||
.options_btns {
|
||||
margin-bottom: 12px;
|
||||
.el-button {
|
||||
width: 120px;
|
||||
.create_land_attrs_content_ {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
box-sizing: border-box;
|
||||
gap: 20px;
|
||||
.custom-form__uploader {
|
||||
box-sizing: border-box;
|
||||
height: auto;
|
||||
}
|
||||
> div {
|
||||
width: calc(50% - 10px);
|
||||
aspect-ratio: 1 / 1;
|
||||
}
|
||||
.attrs_content__item {
|
||||
box-sizing: border-box;
|
||||
position: relative;
|
||||
padding: 6px;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 4px;
|
||||
img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -0,0 +1,43 @@
|
||||
import { ref, reactive } from 'vue';
|
||||
export default function useLandHook() {
|
||||
const landType = ref('0');
|
||||
const landsType = reactive([
|
||||
{
|
||||
value: '0',
|
||||
label: '农用地',
|
||||
},
|
||||
{
|
||||
value: '1',
|
||||
label: '住宅用地',
|
||||
},
|
||||
{
|
||||
value: '2',
|
||||
label: '园林',
|
||||
},
|
||||
]);
|
||||
const landClassificationType = reactive([
|
||||
{ label: '耕地', value: '0' },
|
||||
{ label: '果园', value: '1' },
|
||||
{ label: '茶园', value: '2' },
|
||||
{ label: '其他园地', value: '3' },
|
||||
{ label: '林地', value: '4' },
|
||||
{ label: '草地', value: '5' },
|
||||
{ label: '其他农用地', value: '6' },
|
||||
{ label: '农村宅基地', value: '7' },
|
||||
]);
|
||||
function handleIficationType(t = 0) {
|
||||
let arr = landClassificationType.filter((v) => v.value == t);
|
||||
|
||||
let txt = '--';
|
||||
if (arr.length > 0) {
|
||||
txt = arr[0].label;
|
||||
}
|
||||
return txt;
|
||||
}
|
||||
return {
|
||||
landType,
|
||||
landsType,
|
||||
landClassificationType,
|
||||
handleIficationType,
|
||||
};
|
||||
}
|
||||
Loading…
x
Reference in New Issue
Block a user