359 lines
11 KiB
Vue
359 lines
11 KiB
Vue
<template>
|
|
<CustCard>
|
|
<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="crop">
|
|
<el-input v-model="searchCondition.crop" 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">
|
|
<el-table-column type="selection" width="55" />
|
|
<el-table-column type="index"> </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="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="soilType" show-overflow-tooltip />
|
|
<el-table-column label="种植产物" prop="" show-overflow-tooltip />
|
|
<el-table-column label="种子供应商" prop="" show-overflow-tooltip />
|
|
<el-table-column label="年度计划" prop="" show-overflow-tooltip />
|
|
<el-table-column label="种植日期" prop="" show-overflow-tooltip />
|
|
<el-table-column fixed="right" label="操作" width="200" show-overflow-tooltip>
|
|
<el-button type="primary" @click="doEdit()">编辑</el-button>
|
|
<el-button type="danger" @click="doDel()">删除</el-button>
|
|
</el-table-column>
|
|
</el-table>
|
|
<Pagina :page-data="pageData" />
|
|
<el-dialog v-model="infoVisible" title="种植规划" width="1000" center>
|
|
<el-form ref="infoRef" :model="infoData" :rules="infoRules">
|
|
<el-row :gutter="20">
|
|
<el-col :span="12">
|
|
<el-form-item label="地块名:" prop="landName">
|
|
<el-input v-model="infoData.landName" placeholder="请输入" style="width: 240px"></el-input>
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="12">
|
|
<el-form-item label="面积" prop="gridName">
|
|
<el-input v-model="infoData.gridName" placeholder="请输入面积" style="width: 240px"></el-input>
|
|
</el-form-item>
|
|
</el-col>
|
|
</el-row>
|
|
<el-row :gutter="20">
|
|
<el-col :span="12">
|
|
<el-form-item label="种植产物" prop="gridName">
|
|
<el-input v-model="infoData.gridName" placeholder="请输入种植产物" style="width: 240px"></el-input>
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="12">
|
|
<el-form-item label="种植日期" prop="gridName">
|
|
<el-date-picker
|
|
v-model="infoData.date"
|
|
type="date"
|
|
placeholder="请选择种植日期"
|
|
:disabled-date="disabledDate"
|
|
:shortcuts="shortcuts"
|
|
:size="size"
|
|
/>
|
|
</el-form-item>
|
|
</el-col>
|
|
</el-row>
|
|
<el-row :gutter="20">
|
|
<el-col :span="12">
|
|
<el-form-item label="种子供应商" prop="gridName">
|
|
<el-input v-model="infoData.gridName" placeholder="请输入种子供应商" style="width: 240px"></el-input>
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="12">
|
|
<el-form-item label="年度计划" prop="gridName">
|
|
<el-select v-model="infoData.plan" placeholder="请选择年度计划" style="width: 240px" :clearable="true">
|
|
<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
|
|
</el-select>
|
|
</el-form-item>
|
|
</el-col>
|
|
</el-row>
|
|
</el-form>
|
|
<template #footer>
|
|
<div class="dialog-footer">
|
|
<el-button @click="infoCancel">取消</el-button>
|
|
<el-button type="primary" @click="subMitInfo(infoRef)"> 确认 </el-button>
|
|
</div>
|
|
</template>
|
|
</el-dialog>
|
|
<div>
|
|
<el-text class="mx-1" size="large">种植阶段详情</el-text>
|
|
<div style="margin-top: 16px">
|
|
<el-form ref="stageRef" :model="stageInfo">
|
|
<el-row :gutter="20">
|
|
<el-col :span="6">
|
|
<el-button type="primary" @click="addSub">新增</el-button>
|
|
</el-col>
|
|
<el-col :span="6">
|
|
<el-form-item label="所属阶段" prop="gridName">
|
|
<el-select v-model="stageInfo.stage" placeholder="请选择所属阶段" style="width: 240px" :clearable="true">
|
|
<el-option v-for="item in stageOptions" :key="item.value" :label="item.label" :value="item.value" />
|
|
</el-select>
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="6">
|
|
<el-button type="primary" @click="getStageList()">查询</el-button>
|
|
<el-button type="" @click="handleResetStage">重置</el-button>
|
|
</el-col>
|
|
</el-row>
|
|
</el-form>
|
|
<el-table :data="sublist">
|
|
<el-table-column type="selection" width="55" />
|
|
<el-table-column type="index"> </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="owner" show-overflow-tooltip />
|
|
<el-table-column fixed="right" label="操作" width="200" show-overflow-tooltip>
|
|
<el-button type="primary" @click="doSubEdit()">编辑</el-button>
|
|
<el-button type="danger" @click="doSubDel()">删除</el-button>
|
|
</el-table-column>
|
|
</el-table>
|
|
<Pagina :page-data="subPageData" />
|
|
</div>
|
|
</div>
|
|
</CustCard>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref, reactive, onMounted } from 'vue';
|
|
import Pagina from '@/components/pagina.vue';
|
|
import CustCard from '@/components/CustCard.vue';
|
|
import { getLandsList, saveLand } from '@/apis/land.js';
|
|
import { useApp } from '@/hooks';
|
|
onMounted(() => {
|
|
getList();
|
|
});
|
|
|
|
/* --------------- data --------------- */
|
|
// #region
|
|
const app = useApp();
|
|
const searchRef = ref();
|
|
|
|
const searchCondition = reactive({
|
|
landName: '',
|
|
owner: '',
|
|
crop: '',
|
|
});
|
|
|
|
const pageData = reactive({
|
|
page: 1,
|
|
size: 10,
|
|
total: 0,
|
|
});
|
|
|
|
const infoVisible = ref(false);
|
|
const infoRef = ref();
|
|
const list = ref([]);
|
|
const btns = reactive([
|
|
{
|
|
label: '新增种植规划',
|
|
method: function () {
|
|
console.log('add');
|
|
infoVisible.value = true;
|
|
let parmer = {
|
|
landId: '1892400039696359426,1892400422703423489',
|
|
planId: '1890242496744136706',
|
|
crop: '水稻',
|
|
seedSupplier: '园艺',
|
|
planDate: '2025-02-25',
|
|
};
|
|
saveLand({})
|
|
.then((res) => {
|
|
if (res.code === 200) {
|
|
app.$message.success('添加成功！');
|
|
}
|
|
})
|
|
.catch((err) => {
|
|
app.$message.error(err.msg);
|
|
})
|
|
.finally(() => {});
|
|
},
|
|
},
|
|
{
|
|
label: '导入',
|
|
disabled: false,
|
|
method: function () {
|
|
console.log('import');
|
|
},
|
|
},
|
|
{
|
|
label: '导出',
|
|
disabled: true,
|
|
method: function () {
|
|
console.log('export');
|
|
},
|
|
},
|
|
]);
|
|
|
|
const infoData = reactive({
|
|
landName: '',
|
|
gridName: '',
|
|
owner: '',
|
|
date: '',
|
|
plan: '',
|
|
});
|
|
|
|
const infoRules = reactive({
|
|
landName: [{ required: true, message: '请输入地块名', trigger: 'blur' }],
|
|
});
|
|
const options = reactive([
|
|
{
|
|
value: '年度计划1',
|
|
label: 'Option1',
|
|
},
|
|
{
|
|
value: '年度计划2',
|
|
label: 'Option2',
|
|
},
|
|
]);
|
|
|
|
const subPageData = reactive({
|
|
page: 1,
|
|
size: 10,
|
|
total: 0,
|
|
});
|
|
const sublist = ref([]);
|
|
const stageInfo = reactive({
|
|
stage: '',
|
|
});
|
|
const stageRef = ref();
|
|
const stageOptions = reactive([
|
|
{
|
|
value: '阶段1',
|
|
label: 'Option1',
|
|
},
|
|
{
|
|
value: '阶段2',
|
|
label: 'Option2',
|
|
},
|
|
]);
|
|
|
|
// #endregion
|
|
|
|
/* --------------- methods --------------- */
|
|
// #region
|
|
|
|
async function getList() {
|
|
const params = { current: pageData.page, size: pageData.size };
|
|
let { code, data, msg } = await getLandsList(params);
|
|
//console.log('res ---------', data);
|
|
list.value = data.records || [];
|
|
pageData.total = data.total;
|
|
}
|
|
|
|
function handleResetSearch() {
|
|
searchRef.value && searchRef.value.resetFields();
|
|
getLandsList();
|
|
}
|
|
|
|
function doEdit() {
|
|
console.info('编辑');
|
|
infoVisible.value = true;
|
|
}
|
|
|
|
function doDel() {
|
|
console.info('删除');
|
|
app
|
|
.$confirm(`删除后信息将不可查看，确认要删除吗？`, '确定删除', {
|
|
confirmButtonText: '确定',
|
|
cancelButtonText: '取消',
|
|
type: 'warning',
|
|
})
|
|
.then(() => {
|
|
// DeleteEntity({ ids: ids.join(',') })
|
|
// .then((res) => {
|
|
// if (res.code === 200) {
|
|
// app.$message.success('删除成功！');
|
|
// loadData();
|
|
// }
|
|
// })
|
|
// .catch((err) => {
|
|
// app.$message.error(err.msg);
|
|
// });
|
|
})
|
|
.catch(() => {});
|
|
}
|
|
|
|
const subMitInfo = (formEl) => {
|
|
if (!formEl) return;
|
|
formEl.validate((valid) => {
|
|
if (valid) {
|
|
infoHide();
|
|
console.log('submit!');
|
|
} else {
|
|
console.log('error submit!');
|
|
}
|
|
});
|
|
};
|
|
|
|
const infoCancel = () => {
|
|
infoHide();
|
|
};
|
|
|
|
const infoHide = () => {
|
|
infoVisible.value = false;
|
|
};
|
|
|
|
const addSub = () => {
|
|
console.log('新增阶段');
|
|
};
|
|
|
|
async function getStageList() {
|
|
// const params = { current: pageData.page, size: pageData.size };
|
|
// let res = await getLandsList(params);
|
|
// console.log('res ---------', res);
|
|
}
|
|
|
|
function handleResetStage() {
|
|
stageRef.value && stageRef.value.resetFields();
|
|
stageInfo.stage = '';
|
|
console.info('重置所属阶段筛选条件');
|
|
getStageList();
|
|
}
|
|
|
|
const doSubEdit = () => {
|
|
console.log('编辑sub');
|
|
};
|
|
|
|
const doSubDel = () => {
|
|
console.log('删除sub');
|
|
};
|
|
|
|
// #endregion
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.container {
|
|
border-radius: 4px;
|
|
background-color: #ffffff;
|
|
}
|
|
</style>
|