107 lines
3.6 KiB
Vue
107 lines
3.6 KiB
Vue
<template>
|
|
<div class="custom-page">
|
|
<el-form :inline="true" :model="searchForm" class="search-bar">
|
|
<el-form-item label="关键词">
|
|
<el-input v-model="searchForm.name" placeholder="请输入关键词" clearable />
|
|
</el-form-item>
|
|
<el-form-item label="" label-width="0">
|
|
<AreaCascader v-model:region-code="searchForm.regionCode" v-model:grid-id="searchForm.id" :width="600" />
|
|
</el-form-item>
|
|
<el-form-item label="种植作物" prop="planCrop">
|
|
<url-select
|
|
v-model="searchForm.planCrop"
|
|
url="/land-resource/crops/page"
|
|
:params="{ status: '0' }"
|
|
label-key="cropsName"
|
|
value-key="id"
|
|
placeholder="请选择种植作物"
|
|
style="width: 200px"
|
|
/>
|
|
</el-form-item>
|
|
<el-form-item>
|
|
<el-button type="primary" @click="handleSearch">查询</el-button>
|
|
<el-button @click="handleReset">重置</el-button>
|
|
</el-form-item>
|
|
</el-form>
|
|
<avue-crud
|
|
ref="crudRef"
|
|
v-model:page="pagination"
|
|
:data="crudData"
|
|
:option="crudOptions"
|
|
:table-loading="loading"
|
|
@current-change="handleCurrentChange"
|
|
@size-change="handleSizeChange"
|
|
>
|
|
<!-- <template #menu="scope">
|
|
<custom-table-operate :actions="getActions(scope.row)" :data="scope" />
|
|
</template> -->
|
|
</avue-crud>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref, watch, onMounted, computed } from 'vue';
|
|
import { CRUD_OPTIONS } from '@/config';
|
|
import { mockData } from './mockData';
|
|
onMounted(() => {
|
|
getData();
|
|
});
|
|
const getData = async () => {
|
|
await new Promise((resolve) => setTimeout(resolve, 300));
|
|
crudData.value = mockData;
|
|
pagination.value.total = crudData.value.length;
|
|
};
|
|
const loading = ref(false);
|
|
|
|
const searchForm = ref({});
|
|
|
|
const pagination = ref({
|
|
currentPage: 1,
|
|
pageSize: 10,
|
|
total: 0,
|
|
});
|
|
const crudData = ref([]);
|
|
const crudOptions = ref({
|
|
...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: 'baseCode' },
|
|
{ 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 handleSizeChange = (val) => {
|
|
pagination.value.pageSize = val;
|
|
};
|
|
const getActions = (row) => {
|
|
return [{ name: '查看', icon: 'view', event: () => handleView(row) }];
|
|
};
|
|
const handleView = (row) => {
|
|
console.log(row);
|
|
};
|
|
</script>
|
|
|
|
<style scoped lang="scss"></style>
|