feature-0627-土地资源库 #5
| @ -20,7 +20,13 @@ | ||||
|       :show-sort="true" | ||||
|       style="height: calc(100vh - 320px)" | ||||
|       @page-change="handlePageChange" | ||||
|     /> | ||||
|     > | ||||
|       <template #action="scope"> | ||||
|         <!-- <el-button size="small" @click="handleEdit(scope.row)">编辑</el-button> | ||||
|         <el-button size="small" type="danger" @click="handleDelete(scope.row)">删除</el-button> --> | ||||
|         <custom-table-operate :actions="getActions(scope.row)" :data="scope" /> | ||||
|       </template> | ||||
|     </TableComponent> | ||||
|     <el-dialog :key="dialogTitle" v-model="visible" :title="dialogTitle" width="60%" align-center :draggable="true"> | ||||
|       <el-tabs v-model="activeFormTab" class="tabs-wrapper"> | ||||
|         <el-tab-pane label="土地基本信息" name="basic"> | ||||
| @ -40,7 +46,6 @@ | ||||
|                     clearable | ||||
|                     check-strictly | ||||
|                     :render-after-expand="false" | ||||
|                     @change="handleLandTypeChange" | ||||
|                   /> | ||||
|                 </el-form-item> | ||||
|                 <el-form-item label="具体位置" prop="address"> | ||||
| @ -157,7 +162,6 @@ const activeTab = ref('1'); | ||||
| const handleTabChange = ({ name }) => { | ||||
|   //   activeTab.value = name; | ||||
|   console.log('切换tab', activeTab.value); | ||||
|   searchForm.value.landStatus = Number(activeTab.value); | ||||
|   getData(); | ||||
| }; | ||||
| 
 | ||||
| @ -180,7 +184,7 @@ const columns = ref([ | ||||
|   { label: '土地承包经营人', prop: 'propertyName' }, | ||||
|   { label: '联系电话', prop: 'propertyPhone' }, | ||||
|   { label: '土地经营权证书编号', prop: 'landCode', width: 160 }, | ||||
|   { label: '是否土地流转', prop: 'isTransfer' }, | ||||
|   { label: '是否土地流转', prop: 'isTransfer', formatter: (row, column, cellValue) => (cellValue === 1 ? '是' : '否') }, | ||||
|   { label: '土地受让方', prop: 'transferName' }, | ||||
|   { label: '受让方联系电话', prop: 'transferPhone', width: 100 }, | ||||
|   { label: '流转合同', prop: 'transferContract' }, | ||||
| @ -190,8 +194,62 @@ const columns = ref([ | ||||
|   // { label: '信息更新人', prop: 'updateName' }, | ||||
|   // { label: '信息更新单位', prop: 'updateGroup' }, | ||||
|   { label: '信息更新时间', prop: 'updateTime' }, | ||||
|   { label: '操作', prop: 'action', slotName: 'action', fixed: 'right' }, | ||||
| ]); | ||||
| 
 | ||||
| const actions = [ | ||||
|   { | ||||
|     name: '查看', | ||||
|     icon: 'view', | ||||
|     event: ({ row }) => handleView(row), | ||||
|   }, | ||||
|   { | ||||
|     name: '编辑', | ||||
|     icon: 'edit', | ||||
|     event: ({ row }) => handleEdit(row), | ||||
|   }, | ||||
|   { | ||||
|     type: 'danger', | ||||
|     name: '删除', | ||||
|     icon: 'delete', | ||||
|     event: ({ row }) => handleDelete(row.id), | ||||
|   }, | ||||
| ]; | ||||
| const handleView = async (row) => { | ||||
|   isReadonly.value = true; | ||||
|   formData.value = await getLandDetail(row.id); | ||||
|   dialogTitle.value = '查看网格'; | ||||
|   visible.value = true; | ||||
| }; | ||||
| const handleEdit = (row) => { | ||||
|   isReadonly.value = false; | ||||
|   formData.value = { ...row }; | ||||
|   dialogTitle.value = '编辑网格'; | ||||
|   visible.value = true; | ||||
| }; | ||||
| const handleDelete = async (row) => { | ||||
|   console.log('删除', row); | ||||
|   //   try { | ||||
|   //     await ElMessageBox.confirm('确认删除该网格吗?', '提示', { | ||||
|   //       confirmButtonText: '确定', | ||||
|   //       cancelButtonText: '取消', | ||||
|   //       type: 'warning', | ||||
|   //     }); | ||||
| 
 | ||||
|   //     const response = await deleteGrid(row.id); | ||||
| 
 | ||||
|   //     ElMessage.success('删除成功'); | ||||
|   //     getData(); | ||||
|   //   } catch (error) { | ||||
|   //     if (error === 'cancel') { | ||||
|   //       ElMessage.info('已取消删除'); | ||||
|   //     } else { | ||||
|   //       ElMessage.error('删除失败'); | ||||
|   //       console.error('删除异常:', error); | ||||
|   //     } | ||||
|   //   } | ||||
| }; | ||||
| 
 | ||||
| const handlePageChange = ({ page, pageSize }) => { | ||||
|   pageData.value.currentPage = page; | ||||
|   pageData.value.pageSize = pageSize; | ||||
| @ -218,18 +276,16 @@ import { mockData } from './landData'; | ||||
| import { createLand, deleteLand, editLand, fetchLandList, getLandById, approveLand } from '@/apis/landResourceManagement/landManagement'; | ||||
| import request from '@/utils/axios'; | ||||
| const getData = async () => { | ||||
|   //   const filteredParams = filterObject(searchForm.value); | ||||
|   //   const response = await fetchGridList(filteredParams); | ||||
|   //   crudData.value = Array.isArray(response.data.records) ? response.data.records : []; | ||||
|   loading.value = true; | ||||
|   // 模拟接口延迟 | ||||
|   await new Promise((resolve) => setTimeout(resolve, 300)); | ||||
|   tableData.value = mockData | ||||
|     .filter((item) => item.status === activeTab.value) | ||||
|     .map((item) => ({ | ||||
|       ...item, | ||||
|       landTypeName: '林地', | ||||
|     })); | ||||
|   const requestData = { | ||||
|     ...searchForm.value, | ||||
|     page: pageData.value.currentPage, | ||||
|     size: pageData.value.pageSize, | ||||
|     landStatus: activeTab.value, | ||||
|     landTypeName: '草地', | ||||
|   }; | ||||
|   const response = await fetchLandList(requestData); | ||||
|   tableData.value = Array.isArray(response.data.records) ? response.data.records : []; | ||||
|   pageData.value.total = tableData.value.length; | ||||
|   loading.value = false; | ||||
| }; | ||||
| @ -270,4 +326,51 @@ h1 { | ||||
|   font-size: 20px; | ||||
|   font-weight: bold; | ||||
| } | ||||
| .tabs-wrapper { | ||||
|   width: 100%; | ||||
|   display: flex; | ||||
|   align-items: center; | ||||
|   // background-color: #7daaaa; | ||||
| 
 | ||||
|   .el-tabs__header { | ||||
|     width: 100%; | ||||
| 
 | ||||
|     .el-tabs__nav-scroll { | ||||
|       display: flex; | ||||
|       justify-content: center; | ||||
|     } | ||||
| 
 | ||||
|     .el-tabs__item { | ||||
|       font-size: 16px; | ||||
|       color: #555555; | ||||
|       font-weight: 500; | ||||
|     } | ||||
|   } | ||||
|   :deep(.el-tabs__content) { | ||||
|     padding: 20px; | ||||
|     // background-color: #af8686; | ||||
|     border-radius: 4px; | ||||
|     width: 80%; | ||||
|     height: calc(100vh - 400px); | ||||
|     overflow-y: auto; | ||||
| 
 | ||||
|     .el-tab-pane { | ||||
|       margin: 0 auto; | ||||
|       width: 100%; | ||||
|       // background-color: #555555; | ||||
|     } | ||||
|   } | ||||
| } | ||||
| 
 | ||||
| .form-title { | ||||
|   font-size: 16px; | ||||
|   font-weight: 500; | ||||
|   margin: 30px 0; | ||||
|   color: #333333; | ||||
| } | ||||
| 
 | ||||
| .dialog-footer { | ||||
|   display: block; | ||||
|   text-align: center; | ||||
| } | ||||
| </style> | ||||
|  | ||||
| @ -31,7 +31,7 @@ | ||||
|       @size-change="handleSizeChange" | ||||
|     > | ||||
|       <template #menu="scope"> | ||||
|         <custom-table-operate :actions="crudOptions.actions" :show="false" :data="scope" /> | ||||
|         <custom-table-operate :actions="crudOptions.actions" :data="scope" /> | ||||
|       </template> | ||||
|     </avue-crud> | ||||
|     <el-dialog :key="dialogTitle" v-model="visible" :title="dialogTitle" width="60%" align-center :draggable="true"> | ||||
| @ -236,7 +236,7 @@ const crudOptions = reactive({ | ||||
|     { label: '土地承包经营人', prop: 'propertyName' }, | ||||
|     { label: '联系电话', prop: 'propertyPhone' }, | ||||
|     { label: '土地经营权证书编号', prop: 'landCode', width: 160 }, | ||||
|     { label: '是否土地流转', prop: 'landTransfer' }, | ||||
|     { label: '是否土地流转', prop: 'landTransfer', formatter: (row, column, cellValue) => (cellValue === 1 ? '是' : '否') }, | ||||
|     { label: '土地受让方', prop: 'transferName' }, | ||||
|     { label: '受让方联系电话', prop: 'transferPhone', width: 100 }, | ||||
|     { label: '流转合同', prop: 'transferContract' }, | ||||
|  | ||||
| @ -25,7 +25,7 @@ | ||||
| </template> | ||||
| 
 | ||||
| <script setup> | ||||
| import { ref } from 'vue'; | ||||
| import { ref, computed } from 'vue'; | ||||
| 
 | ||||
| const props = defineProps({ | ||||
|   search: { | ||||
|  | ||||
		Loading…
	
	
			
			x
			
			
		
	
		Reference in New Issue
	
	Block a user