This commit is contained in:
郭永超 2025-07-02 10:51:27 +08:00
commit e1ae3939a3
4 changed files with 130 additions and 111 deletions

View File

@ -90,7 +90,7 @@ const fetchAreaData = async () => {
},
});
areaOptions.value = res.data ?? [];
console.log('AreaSelect区域数据', areaOptions.value);
// console.log('AreaSelect', areaOptions.value);
} catch (err) {
console.error('加载行政区域失败', err);
}

View File

@ -1,12 +1,13 @@
<template>
<el-icon v-if="icon.includes('icon')" :class="`iconfont ${icon}`" :size="size" />
<el-icon v-if="!icon" :size="size" />
<el-icon v-else-if="icon.includes('icon')" :class="`iconfont ${icon}`" :size="size" />
<el-icon v-else :size="size"> <component :is="icon" /></el-icon>
</template>
<script setup name="layout-icon">
defineProps({
icon: {
type: String,
required: true,
default: '',
},
size: {
type: Number,

View File

@ -2,26 +2,26 @@
<el-form ref="formRef" :model="localFormModel" :rules="rules" :disabled="disabled" label-width="120px">
<el-row :gutter="20">
<el-col :span="12">
<el-form-item label="地块编号" prop="id">
<el-input v-model="localFormModel.id" placeholder="请输入地块编号" />
<el-form-item label="地块编号" prop="landNumber">
<el-input v-model="localFormModel.landNumber" placeholder="请输入地块编号" />
</el-form-item>
<el-form-item label="面积(亩)" prop="area">
<el-input-number v-model="localFormModel.area" :min="0" placeholder="请输入面积" />
<el-form-item label="面积(亩)" prop="planArea">
<el-input-number v-model="localFormModel.planArea" :min="0" placeholder="请输入面积" style="width: 100%" />
</el-form-item>
<el-form-item label="所属行政区域" prop="areaCode">
<AreaSelect v-model="localFormModel.areaCode" :emit-path="false" label="" />
</el-form-item>
<el-form-item label="经营主体编码" prop="businessSubjectCode">
<el-input v-model="localFormModel.businessSubjectCode" placeholder="请输入经营主体编码" />
<el-form-item label="经营主体编码" prop="businessEntityCode">
<el-input v-model="localFormModel.businessEntityCode" placeholder="请输入经营主体编码" />
</el-form-item>
<el-form-item label="种植开始时间" prop="plantingStartTime">
<el-date-picker v-model="localFormModel.plantingStartTime" type="date" placeholder="请选择种植开始时间" />
<el-form-item label="种植开始时间" prop="startDate">
<el-date-picker v-model="localFormModel.plantingStartTime" type="date" placeholder="请选择种植开始时间" style="width: 100%" />
</el-form-item>
<el-form-item label="账号(手机号)" prop="account">
<el-input v-model="localFormModel.account" placeholder="请输入账号(手机号)" />
</el-form-item>
<el-form-item label="信息审核时间" prop="auditTime">
<el-date-picker v-model="localFormModel.auditTime" type="date" placeholder="请选择信息审核时间" />
<el-form-item label="信息审核时间" prop="approvalTime">
<el-date-picker v-model="localFormModel.approvalTime" type="date" placeholder="请选择信息审核时间" style="width: 100%" />
</el-form-item>
</el-col>
<el-col :span="12">
@ -31,20 +31,20 @@
<el-form-item label="具体位置" prop="address">
<el-input v-model="localFormModel.address" placeholder="请输入具体位置" />
</el-form-item>
<el-form-item label="种植作物" prop="CropName">
<el-input v-model="localFormModel.CropName" placeholder="请输入种植作物" />
<el-form-item label="种植作物" prop="crop">
<el-input v-model="localFormModel.crop" placeholder="请输入种植作物" />
</el-form-item>
<el-form-item label="作物品种" prop="CropVarietyName">
<el-input v-model="localFormModel.CropVarietyName" placeholder="请输入作物品种" />
<el-form-item label="作物品种" prop="cropBrand">
<el-input v-model="localFormModel.cropBrand" placeholder="请输入作物品种" />
</el-form-item>
<el-form-item label="种植结束时间" prop="plantingEndTime">
<el-date-picker v-model="localFormModel.plantingEndTime" type="date" placeholder="请选择种植结束时间" />
<el-form-item label="种植结束时间" prop="endDate">
<el-date-picker v-model="localFormModel.endDate" type="date" placeholder="请选择种植结束时间" style="width: 100%" />
</el-form-item>
<el-form-item label="经营主体名称" prop="businessSubjectName">
<el-input v-model="localFormModel.businessSubjectName" placeholder="请输入经营主体名称" />
<el-form-item label="经营主体名称" prop="businessEntityName">
<el-input v-model="localFormModel.businessEntityName" placeholder="请输入经营主体名称" />
</el-form-item>
<el-form-item label="信息填报时间" prop="fillTime">
<el-date-picker v-model="localFormModel.fillTime" type="date" placeholder="请选择信息填报时间" />
<el-date-picker v-model="localFormModel.fillTime" type="date" placeholder="请选择信息填报时间" style="width: 100%" />
</el-form-item>
</el-col>
</el-row>
@ -52,12 +52,13 @@
</template>
<script setup>
import { ref, watch } from 'vue';
import { ref, watch, toRaw } from 'vue';
const props = defineProps({
modelValue: {
type: Object,
required: true,
default: () => ({}),
},
disabled: {
type: Boolean,
@ -67,22 +68,13 @@ const props = defineProps({
const emit = defineEmits(['update:modelValue']);
//
const localFormModel = ref({ ...props.modelValue });
watch(
() => props.modelValue,
(val) => {
if (val) {
localFormModel.value = { ...val };
}
},
{ deep: true, immediate: true }
);
watch(
localFormModel,
(val) => {
emit('update:modelValue', val);
Object.assign(localFormModel.value, val);
},
{ deep: true }
);
@ -91,4 +83,10 @@ const rules = {
// id: [{ required: true, message: '', trigger: 'blur' }],
// area: [{ type: 'number', min: 0, message: '0', trigger: 'change' }],
};
const getFormData = () => toRaw(localFormModel.value);
defineExpose({
getFormData,
});
</script>

View File

@ -1,134 +1,154 @@
<template>
<div class="custom-body">
<!-- 搜索栏 -->
<SearchBar v-model:search="searchForm" @search="handleSearch" @reset="handleReset" />
<!-- 标签页 -->
<el-tabs v-model="activeTab" @tab-click="handleTabChange">
<!-- <el-tab-pane label="待提交" name="-1" /> -->
<el-tab-pane label="待审核" name="1" />
<el-tab-pane label="已通过" name="2" />
<el-tab-pane label="已驳回" name="3" />
</el-tabs>
<avue-crud
ref="crudRef"
v-model:page="pagination"
:data="crudData"
:option="crudOptions"
:table-loading="loading"
@current-change="handleCurrentChange"
@size-change="handleSizeChange"
<!-- 表格组件 -->
<TableComponent
:loading="loading"
:columns="columns"
:table-data="tableData"
:current-page="pageData.currentPage"
:page-size="pageData.pageSize"
:total="pageData.total"
:show-pagination="true"
:show-border="true"
:show-sort="true"
style="max-height: calc(100vh - 220px)"
@page-change="handlePageChange"
>
<template #menu="scope">
<!-- 操作列插槽 -->
<template #action="scope">
<custom-table-operate :actions="getActions(scope.row)" :data="scope" />
</template>
</avue-crud>
</TableComponent>
<!-- 查看/编辑弹窗 -->
<el-dialog v-model="visible" title="查看" width="60%" align-center :draggable="true">
<RecordForm ref="formRef" v-model="formData" :disabled="mode === 'view'" />
<!-- 弹窗底部按钮 -->
<template #footer>
<el-button @click="visible = false">取消</el-button>
<el-button v-if="mode !== 'view'" type="primary" @click="handleSubmit">提交</el-button>
<el-button v-if="mode !== 'view'" type="primary" @click="handleSubmit"> 提交 </el-button>
</template>
</el-dialog>
</div>
</template>
<script setup>
import { ref, reactive, computed, watch, onMounted } from 'vue';
import { ref, onMounted, nextTick } from 'vue';
import SearchBar from './SearchBar.vue';
import { CRUD_OPTIONS } from '@/config';
import RecordForm from './RecordForm.vue';
import { fetchRecordList } from '@/apis/inputSuppliesApi/record';
const loading = ref(false);
const visible = ref(false);
// ============= =============
const loading = ref(false); //
const visible = ref(false); //
const activeTab = ref('1'); //
const formRef = ref(); //
const formData = ref({}); //
const mode = ref('view'); // view/edit/create
const tableData = ref([]); //
//
const searchForm = ref({
status: 1,
keyword: '',
regionCode: '',
gridId: '',
landTypeId: '',
keyword: '', //
regionCode: '', //
gridId: '', // ID
landTypeId: '', // ID
});
const activeTab = ref('1');
const handleTabChange = ({ name }) => {
getData();
};
const pagination = ref({
//
const pageData = ref({
currentPage: 1,
pageSize: 10,
total: 0,
});
const crudData = ref([]);
const crudOptions = reactive({
...CRUD_OPTIONS,
header: false,
// menu: false,
height: 'calc(100vh - 330px)',
column: [
{ label: '地块编号', prop: 'landNumber', width: 160 },
{ label: '地块名称', prop: 'landName', width: 170 },
{ label: '面积', prop: 'planArea', formatter: (row, column, cellValue) => `${Number(cellValue).toFixed(2)}` },
{ label: '所属行政区域', prop: 'belongRegion', width: 160 },
{ label: '所属网格', prop: 'belongGrid', width: 90 },
{ label: '具体位置', prop: 'address', width: 160 },
{ label: '基地名称', prop: 'baseName' },
{ label: '种植批次编码', prop: 'batchCode' },
{ label: '种植批次名称', prop: 'batchName' },
{ label: '种植作物', prop: 'crop' },
{ label: '作物品种', prop: 'cropBrand' },
{ label: '种植开始时间', prop: 'startDate' },
{ label: '种植结束时间', prop: 'endDate' },
{ label: '经营主体代码', prop: 'businessEntityCode', width: 130 },
{ label: '经营主体类型', prop: 'businessEntityType', width: 130 },
{ label: '经营主体名称', prop: 'businessEntityName', width: 130 },
{ label: '账号(手机号)', prop: 'account', width: 130 },
{ label: '信息填报时间', prop: 'fillTime', width: 110 },
{ label: '信息审核时间', prop: 'approvalTime', width: 110 },
],
});
const handleCurrentChange = (val) => {
pagination.value.currentPage = val;
// ============= =============
const columns = ref([
{ label: '地块编号', prop: 'landNumber', width: 160 },
{ label: '地块名称', prop: 'landName', width: 170 },
{
label: '面积',
prop: 'planArea',
formatter: (row, column, cellValue) => `${Number(cellValue).toFixed(2)}`,
},
{ label: '所属行政区域', prop: 'belongRegion', width: 160 },
{ label: '所属网格', prop: 'belongGrid', width: 90 },
{ label: '具体位置', prop: 'address', width: 160 },
{ label: '基地名称', prop: 'baseName' },
{ label: '种植批次编码', prop: 'batchCode' },
{ label: '种植批次名称', prop: 'batchName' },
{ label: '种植作物', prop: 'crop' },
{ label: '作物品种', prop: 'cropBrand' },
{ label: '种植开始时间', prop: 'startDate' },
{ label: '种植结束时间', prop: 'endDate' },
{ label: '经营主体代码', prop: 'businessEntityCode', width: 130 },
{ label: '经营主体类型', prop: 'businessEntityType', width: 130 },
{ label: '经营主体名称', prop: 'businessEntityName', width: 130 },
{ label: '账号(手机号)', prop: 'account', width: 130 },
{ label: '信息填报时间', prop: 'fillTime', width: 110 },
{ label: '信息审核时间', prop: 'approvalTime', width: 110 },
{ label: '操作', prop: 'action', slotName: 'action', fixed: 'right' },
]);
// ============= =============
const handleTabChange = ({ name }) => {
getData();
};
const handleSizeChange = (val) => {
pagination.value.pageSize = val;
const handlePageChange = ({ page, pageSize }) => {
pageData.value.currentPage = page;
pageData.value.pageSize = pageSize;
getData();
};
const getActions = (row) => {
return [{ name: '查看', icon: 'view', event: () => handleView(row) }];
};
const formRef = ref();
const formData = ref({}); //
const mode = ref('view'); // 'edit' / 'create'
const handleView = (row) => {
const handleView = async (row) => {
formData.value = { ...row };
await nextTick();
mode.value = 'view';
visible.value = true;
};
const handleSearch = () => {};
const handleSearch = () => {
getData();
};
const handleReset = () => {
getData();
};
import { mockData } from '../mockData';
import { createRecord, deleteRecord, updateRecord, getRecord, fetchRecordList } from '@/apis/inputSuppliesApi/record';
const getData = async () => {
loading.value = true;
searchForm.value.status = Number(activeTab.value);
//
const response = await fetchRecordList(searchForm.value);
crudData.value = response.data.records;
pagination.value.total = response.data.total;
loading.value = false;
// setTimeout(() => {
// crudData.value = mockData.filter((item) => item.landStatus === Number(activeTab.value));
// pagination.value.total = crudData.value.length;
// loading.value = false;
// }, 200);
const searchParms = { ...searchForm.value, ...pageData.value, status: activeTab.value };
try {
const response = await fetchRecordList(searchParms);
tableData.value = response.data.records;
pageData.value.total = response.data.total;
} finally {
loading.value = false;
}
};
onMounted(() => {
getData();
});
</script>
<style scoped>
:deep(.el-dialog__body) {
padding: 20px;