86 lines
2.6 KiB
Vue
86 lines
2.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>
|
|
<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: 'baseCode' },
|
|
{ label: '基地名称', prop: 'baseName' },
|
|
{ label: '所属行政区域', prop: 'regionName' },
|
|
{ label: '所属网格', prop: 'gridName' },
|
|
{ label: '具体位置', prop: 'adress' },
|
|
{ label: '经纬度', prop: 'longitude' },
|
|
{ label: '气候条件', prop: 'weather' },
|
|
{ label: '海拔（米）', prop: 'altitude' },
|
|
{ label: '面积（亩）', prop: 'area', formatter: (row, column, cellValue) => `${Number(cellValue).toFixed(2)} 亩` },
|
|
{ label: '使用状态', prop: 'status' },
|
|
{ label: '经营主体代码', prop: 'businessCode' },
|
|
{ label: '经营主体类型', prop: 'businessType' },
|
|
{ label: '经营主体名称', prop: 'businessSubjectName' },
|
|
{ label: '创建时间', prop: 'createTime' },
|
|
],
|
|
});
|
|
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>
|