Compare commits
2 Commits
006b5871f7
...
43a81b26e9
| Author | SHA1 | Date | |
|---|---|---|---|
| 43a81b26e9 | |||
| 8b332ec22e |
@ -3,291 +3,111 @@
|
||||
<avue-crud
|
||||
ref="crudRef"
|
||||
v-model="state.form"
|
||||
v-model:search="state.query"
|
||||
v-model:page="state.pageData"
|
||||
:table-loading="state.loading"
|
||||
:data="state.data"
|
||||
:option="state.options"
|
||||
@refresh-change="refreshChange"
|
||||
@search-reset="searchChange"
|
||||
@search-change="searchChange"
|
||||
@selection-change="selectionChange"
|
||||
@current-change="currentChange"
|
||||
@size-change="sizeChange"
|
||||
@row-save="rowSave"
|
||||
@row-update="rowUpdate"
|
||||
@row-del="rowDel"
|
||||
>
|
||||
<template #menu-left>
|
||||
<el-button type="primary" icon="Plus" @click="onAdd">新增</el-button>
|
||||
<el-button type="success" icon="download" @click="onExport">导出</el-button>
|
||||
</template>
|
||||
<template #menu="{ row }">
|
||||
<custom-table-operate :actions="state.options.actions" :data="{ row }" />
|
||||
|
||||
<template #planStatus="{ row }">
|
||||
<el-tag v-if="row.planStatus == '1'" type="warning" size="small">待提交</el-tag>
|
||||
<el-tag v-if="row.planStatus == '2'" type="primary" size="small">审核中</el-tag>
|
||||
<el-tag v-if="row.planStatus == '3'" type="success" size="small">通过</el-tag>
|
||||
<el-tag v-if="row.planStatus == '4'" type="danger" size="small">拒绝</el-tag>
|
||||
</template>
|
||||
|
||||
<template #search>
|
||||
<div class="custom-search">
|
||||
<div class="search-fields">
|
||||
<div class="search-item">
|
||||
<AreaCascader
|
||||
v-model:region-code="areaQuery.regionCode"
|
||||
v-model:grid-id="areaQuery.gridId"
|
||||
placeholder="选择行政区域与网格"
|
||||
:show-separator="true"
|
||||
:width="500"
|
||||
/>
|
||||
</div>
|
||||
<div class="search-item">
|
||||
<span>种植作物：</span>
|
||||
<el-select v-model="state.query.cropsId" placeholder="种植作物" :clearable="true">
|
||||
<el-option v-for="item in cropsOptions" :key="item.id" :label="item.cropsName" :value="item.id" />
|
||||
</el-select>
|
||||
</div>
|
||||
<div class="search-item">
|
||||
<span>计划编号：</span>
|
||||
<el-input v-model="state.query.id" placeholder="计划编号" :clearable="true" />
|
||||
</div>
|
||||
<div class="search-item">
|
||||
<span>计划名称：</span>
|
||||
<el-input v-model="state.query.planName" placeholder="计划名称" :clearable="true" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="search-buttons">
|
||||
<el-button type="primary" @click="searchChange"> 查询 </el-button>
|
||||
<el-button @click="resetSearch"> 重置 </el-button>
|
||||
</div>
|
||||
</div>
|
||||
<template #growthCycle-form="{ row, column, value, type }">
|
||||
<el-input-number v-model="growthCycleVal[0]" :disabled="type == 'view' ? true : false" :min="1" :max="30" style="width: 130px">
|
||||
<template #suffix>
|
||||
<span>天</span>
|
||||
</template>
|
||||
</el-input-number>
|
||||
-
|
||||
<el-input-number v-model="growthCycleVal[1]" :min="1" :disabled="type == 'view' ? true : false" :max="30" style="width: 130px">
|
||||
<template #suffix>
|
||||
<span>天</span>
|
||||
</template>
|
||||
</el-input-number>
|
||||
</template>
|
||||
|
||||
<template #plantingMonths-form="{ row, column, value, type }">
|
||||
<el-select
|
||||
v-model="plantingMonths"
|
||||
placeholder="请选择月份"
|
||||
:disabled="type == 'view' ? true : false"
|
||||
style="width: 200px"
|
||||
:clearable="true"
|
||||
:multiple="true"
|
||||
>
|
||||
<el-option v-for="item in monthsOptions" :key="item.value" :label="item.label" :value="item.value" />
|
||||
</el-select>
|
||||
</template>
|
||||
|
||||
<template #menu="scope">
|
||||
<custom-table-operate :actions="state.options.actions" :data="scope" />
|
||||
</template>
|
||||
</avue-crud>
|
||||
|
||||
<el-dialog v-model="detailDialogVisible" title="年度种植计划详情页" width="800" class="detail-dialog">
|
||||
<el-tabs v-model="activeTab">
|
||||
<el-tab-pane label="年度种植计划" name="basic">
|
||||
<h3>{{ currentDetailRow.planName }}</h3>
|
||||
<div>所属行政区域：{{ currentDetailRow.regionName }}</div>
|
||||
<div>所属网格：{{ currentDetailRow.gridName }}</div>
|
||||
<div>计划编号：{{ currentDetailRow.id }}</div>
|
||||
<div>计划名称：{{ currentDetailRow.planName }}</div>
|
||||
<div>种植作物：{{ currentDetailRow.cropsName }}</div>
|
||||
<div>种植面积：{{ currentDetailRow.planParameters?.plantingArea }}</div>
|
||||
<div>种植月份：{{ currentDetailRow.planParameters?.plantingMonths }}</div>
|
||||
<div>
|
||||
生长周期：{{ currentDetailRow.planParameters?.growthCycle }}
|
||||
{{ getGrowthCycleUnitName(currentDetailRow.planParameters?.growthCycleUnit) }}
|
||||
</div>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="实际种植情况" name="planting">
|
||||
<h3>{{ currentDetailRow.planName }}</h3>
|
||||
<div>所属行政区域：{{ currentDetailRow.regionName }}</div>
|
||||
<div>所属网格：{{ currentDetailRow.gridName }}</div>
|
||||
<div>计划编号：{{ currentDetailRow.id }}</div>
|
||||
<div>计划名称：{{ currentDetailRow.planName }}</div>
|
||||
<div>种植作物：{{ currentDetailRow.cropsName }}</div>
|
||||
<div>种植面积：{{ currentDetailRow.actualParameters?.plantingArea }}</div>
|
||||
<div>种植月份：{{ currentDetailRow.actualParameters?.plantingMonths }}</div>
|
||||
<div>
|
||||
生长周期：{{ currentDetailRow.actualParameters?.growthCycle }}
|
||||
{{ getGrowthCycleUnitName(currentDetailRow.actualParameters?.growthCycleUnit) }}
|
||||
</div>
|
||||
<div>当前进度：{{ currentDetailRow.currentProgress }}%</div>
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
<el-dialog v-model="examVisible" title="审核计划" width="500" center>
|
||||
<template #footer>
|
||||
<span class="dialog-footer">
|
||||
<el-button @click="detailDialogVisible = false">关闭</el-button>
|
||||
</span>
|
||||
</template>
|
||||
</el-dialog>
|
||||
|
||||
<!-- 新增、重新制定计划和填写实际种植信息操作的共用弹窗 -->
|
||||
<el-dialog v-model="commonDialogVisible" :title="dialogTitle">
|
||||
<template #default>
|
||||
<el-form ref="planForm" :model="formData" :rules="formRules" label-width="120px" class="common-dialog">
|
||||
<el-form-item label="" label-width="0px">
|
||||
<AreaCascader v-model:value="areaFormData" split-rows label="所属行政区域-网格" :width="500" />
|
||||
</el-form-item>
|
||||
<!-- <AreaCascader v-model:value="areaFormData" split-rows label="所属行政区域-网格" :width="500" /> -->
|
||||
<el-form-item label="计划名称">
|
||||
<el-input v-model="formData.planName" style="width: 380px" />
|
||||
</el-form-item>
|
||||
<el-form-item label="种植作物" prop="cropsName">
|
||||
<el-select v-model="formData.cropsId" placeholder="种植作物" style="width: 380px" :clearable="true">
|
||||
<el-option v-for="item in cropsOptions" :key="item.id" :label="item.cropsName" :value="item.id" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="种植面积" prop="plantingArea">
|
||||
<el-input v-model="formData.plantingArea" style="width: 380px" />
|
||||
</el-form-item>
|
||||
<el-form-item label="种植月份" prop="plantingMonths">
|
||||
<el-select v-model="formData.plantingMonths" placeholder="请选择月份" style="width: 380px" :clearable="true">
|
||||
<el-option v-for="item in monthsOptions" :key="item.value" :label="item.label" :value="item.value" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="生长周期" prop="growthCycle">
|
||||
<el-input-number v-model="formData.growthCycle" :min="1" style="width: 300px" />
|
||||
<el-select v-model="formData.growthCycleUnit" disabled style="width: 68px; margin: 0; padding: 0">
|
||||
<el-option label="天" value="1" />
|
||||
<el-option label="周" value="2" />
|
||||
<el-option label="月" value="3" />
|
||||
<el-option label="年" value="4" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</template>
|
||||
<template #footer>
|
||||
<span class="dialog-footer">
|
||||
<el-button @click="commonDialogVisible = false">取消</el-button>
|
||||
<el-button type="primary" @click="submitForm">确定</el-button>
|
||||
</span>
|
||||
<div class="dialog-footer">
|
||||
<el-button type="danger" @click="examCancel">审核拒绝</el-button>
|
||||
<el-button type="primary" @click="examPast"> 审核通过 </el-button>
|
||||
</div>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
<script setup>
|
||||
import { reactive, ref, computed, onMounted, watch } from 'vue';
|
||||
import { reactive, ref } from 'vue';
|
||||
import { useApp } from '@/hooks';
|
||||
import { CRUD_OPTIONS } from '@/config';
|
||||
import { isEmpty, downloadFile } from '@/utils';
|
||||
import { useUserStore } from '@/store/modules/user';
|
||||
import { getAnnualList, examineAnnual, delAnnual, exportAnnua } from '@/apis/land.js';
|
||||
import { pageCropsList } from '@/apis/landResourceManagement/cropsManagement/index.js';
|
||||
import { saveAnnual, editAnnual, saveActualProgress, getAnnualDetail } from '@/apis/landResourceManagement/plantingPlan/index.js';
|
||||
import { getAnnualList, saveAnnual, editAnnual, examineAnnual, delAnnual, exportAnnua } from '@/apis/land.js';
|
||||
|
||||
const app = useApp();
|
||||
const crudRef = ref(null);
|
||||
const userStore = useUserStore();
|
||||
// 用于 AreaCascader 绑定的对象
|
||||
const areaFormData = ref({
|
||||
regionCode: '',
|
||||
gridName: '',
|
||||
gridId: '',
|
||||
});
|
||||
watch(
|
||||
areaFormData,
|
||||
(newVal) => {
|
||||
formData.value.regionCode = newVal.regionCode;
|
||||
formData.value.gridName = newVal.gridName;
|
||||
formData.value.gridId = newVal.gridId;
|
||||
},
|
||||
{ deep: true }
|
||||
);
|
||||
const formRules = reactive({
|
||||
// planName: [{ required: true, message: '请输入计划名称', trigger: 'blur' }],
|
||||
// cropsId: [{ required: true, message: '请选择种植作物', trigger: 'change' }],
|
||||
// plantingArea: [
|
||||
// { required: true, message: '请输入种植面积', trigger: 'blur' },
|
||||
// { type: 'number', message: '种植面积必须为数字', trigger: 'blur' },
|
||||
// ],
|
||||
// plantingMonths: [{ required: true, message: '请选择种植月份', trigger: 'change' }],
|
||||
// growthCycle: [
|
||||
// { required: true, message: '请输入生长周期', trigger: 'blur' },
|
||||
// { type: 'number', message: '生长周期必须为数字', trigger: 'blur' },
|
||||
// ],
|
||||
});
|
||||
// 存储种植作物列表
|
||||
const cropsOptions = ref([]);
|
||||
// 初始化种植作物列表
|
||||
const fetchCropsList = async () => {
|
||||
try {
|
||||
// 调用 pageCropsList 获取种植作物分页列表
|
||||
const res = await pageCropsList({ status: '0' });
|
||||
if (res.code === 200) {
|
||||
console.log('res :>> ', res.data.records);
|
||||
cropsOptions.value = res.data.records;
|
||||
console.log('object :>> ', cropsOptions.value);
|
||||
}
|
||||
} catch (error) {
|
||||
app.$message.error('获取种植作物列表失败');
|
||||
}
|
||||
};
|
||||
onMounted(() => {
|
||||
fetchCropsList();
|
||||
});
|
||||
|
||||
// 根据单位值获取单位名称
|
||||
const getGrowthCycleUnitName = (unit) => {
|
||||
const unitMap = {
|
||||
1: '天',
|
||||
2: '周',
|
||||
3: '月',
|
||||
4: '年',
|
||||
};
|
||||
return unitMap[unit] || '';
|
||||
};
|
||||
// 获取详情数据
|
||||
const fetchDetailData = async (id) => {
|
||||
try {
|
||||
const res = await getAnnualDetail(id);
|
||||
if (res.code === 200) {
|
||||
currentDetailRow.value = res.data;
|
||||
} else {
|
||||
app.$message.error(res.msg || '获取详情数据失败');
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('获取详情数据出错:', error);
|
||||
app.$message.error('获取详情数据失败，请稍后重试');
|
||||
}
|
||||
};
|
||||
const openDetailDialog = async (row) => {
|
||||
detailDialogVisible.value = true;
|
||||
await fetchDetailData(row.id);
|
||||
};
|
||||
// 详情弹窗
|
||||
const detailDialogVisible = ref(false);
|
||||
// 详情弹窗当前激活的标签页
|
||||
const activeTab = ref('basic');
|
||||
const currentDetailRow = ref({});
|
||||
// 共用弹窗
|
||||
const commonDialogVisible = ref(false);
|
||||
// 当前操作类型，跟弹窗标题一致
|
||||
const currentAction = ref('');
|
||||
// 弹窗标题
|
||||
const dialogTitle = computed(() => {
|
||||
if (currentAction.value === 'reCreate') {
|
||||
return '重新制定计划';
|
||||
} else if (currentAction.value === 'fillActual') {
|
||||
return '填写实际种植信息';
|
||||
} else if (currentAction.value === 'add') {
|
||||
return '新增年度种植计划';
|
||||
}
|
||||
return '';
|
||||
});
|
||||
|
||||
const monthsOptions = ref([
|
||||
{ value: 1, label: '1月' },
|
||||
{ value: 2, label: '2月' },
|
||||
{ value: 3, label: '3月' },
|
||||
{ value: 4, label: '4月' },
|
||||
{ value: 5, label: '5月' },
|
||||
{ value: 6, label: '6月' },
|
||||
{ value: 7, label: '7月' },
|
||||
{ value: 8, label: '8月' },
|
||||
{ value: 9, label: '9月' },
|
||||
{ value: 10, label: '10月' },
|
||||
{ value: 11, label: '11月' },
|
||||
{ value: 12, label: '12月' },
|
||||
const monthsOptions = reactive([
|
||||
{ label: '1月份', value: '1月' },
|
||||
{ label: '2月份', value: '2月' },
|
||||
{ label: '3月份', value: '3月' },
|
||||
{ label: '4月份', value: '4月' },
|
||||
{ label: '5月份', value: '5月' },
|
||||
{ label: '6月份', value: '6月' },
|
||||
{ label: '7月份', value: '7月' },
|
||||
{ label: '8月份', value: '8月' },
|
||||
{ label: '9月份', value: '9月' },
|
||||
{ label: '10月份', value: '10月' },
|
||||
{ label: '11月份', value: '11月' },
|
||||
{ label: '12月份', value: '12月' },
|
||||
]);
|
||||
// 表单引用
|
||||
const planForm = ref(null);
|
||||
// 判断当前用户是否是网格员
|
||||
const isGridMember = computed(() => {
|
||||
const userRoles = userStore.getUserInfo().roles;
|
||||
console.log('当前用户角色:', userRoles);
|
||||
return userRoles.some((role) => role.roleKey === 'gridMember');
|
||||
// return true;
|
||||
});
|
||||
|
||||
// 级联选择器查询参数，必须使用 ref ，否则无法使用 v-model:value 更新
|
||||
const areaQuery = ref({
|
||||
regionCode: '',
|
||||
gridName: '',
|
||||
gridId: '',
|
||||
});
|
||||
let infoData = reactive({ id: '' });
|
||||
|
||||
const examVisible = ref(false);
|
||||
let growthCycleVal = reactive([0, 0]);
|
||||
let plantingMonths = ref([]);
|
||||
|
||||
const state = reactive({
|
||||
loading: false,
|
||||
query: {
|
||||
current: 1,
|
||||
size: 10,
|
||||
id: '',
|
||||
planName: '',
|
||||
cropsName: '',
|
||||
cropsId: '',
|
||||
},
|
||||
form: {},
|
||||
selection: [],
|
||||
@ -295,63 +115,102 @@ const state = reactive({
|
||||
...CRUD_OPTIONS,
|
||||
addBtnText: '',
|
||||
addBtn: false,
|
||||
searchBtn: false,
|
||||
emptyBtn: false,
|
||||
fit: true,
|
||||
column: [
|
||||
{ label: '计划编号', prop: 'id', minWidth: 100 },
|
||||
{ label: '计划名称', prop: 'planName' },
|
||||
{ label: '种植作物', prop: 'cropsName' },
|
||||
{ label: '种植面积', prop: 'plantingArea', formatter: (row, column, cellValue) => `${cellValue} 亩` },
|
||||
{ label: '种植月份', prop: 'plantingMonths', formatter: (row, column, cellValue) => `${cellValue} 月` },
|
||||
{ label: '计划编号', prop: 'id', width: '200px', showOverflowTooltip: true, addDisplay: false, editDisplay: false },
|
||||
{
|
||||
label: '计划名称',
|
||||
prop: 'planName',
|
||||
width: '200px',
|
||||
showOverflowTooltip: true,
|
||||
search: true,
|
||||
rules: {
|
||||
required: true,
|
||||
message: '请选择',
|
||||
trigger: 'blur',
|
||||
},
|
||||
},
|
||||
{
|
||||
label: '种植面积',
|
||||
prop: 'plantingArea',
|
||||
rules: {
|
||||
required: true,
|
||||
message: '请输入',
|
||||
trigger: 'blur',
|
||||
},
|
||||
formatter: (row, column, cellValue) => {
|
||||
return cellValue ? cellValue + '亩' : '';
|
||||
},
|
||||
},
|
||||
{
|
||||
label: '种植月份',
|
||||
prop: 'plantingMonths',
|
||||
width: '120px',
|
||||
rules: {
|
||||
required: true,
|
||||
message: '请选择',
|
||||
trigger: 'blur',
|
||||
validator: (rule, value, callback) => {
|
||||
if (!plantingMonths.value.length) {
|
||||
callback(new Error('请输入'));
|
||||
} else {
|
||||
callback();
|
||||
}
|
||||
},
|
||||
},
|
||||
formatter: (row, column, cellValue) => {
|
||||
return cellValue ? cellValue + '月' : '';
|
||||
},
|
||||
},
|
||||
{
|
||||
label: '生长周期',
|
||||
prop: 'growthCycle',
|
||||
width: '120px',
|
||||
viewDisabled: true,
|
||||
rules: {
|
||||
required: true,
|
||||
message: '请输入',
|
||||
trigger: 'blur',
|
||||
validator: (rule, value, callback) => {
|
||||
if (growthCycleVal[0] < 1 || growthCycleVal[1] < 1) {
|
||||
callback(new Error('请输入'));
|
||||
} else {
|
||||
callback();
|
||||
}
|
||||
},
|
||||
},
|
||||
formatter: (row, column, cellValue) => {
|
||||
const unitMap = { 1: '天', 2: '周', 3: '月', 4: '年' };
|
||||
const unit = unitMap[row.growthCycleUnit] || '';
|
||||
return `${cellValue} ${unit}`;
|
||||
return cellValue ? cellValue + '天' : '';
|
||||
},
|
||||
},
|
||||
{ label: '所属行政区域', prop: 'regionName' },
|
||||
{ label: '所属网格', prop: 'gridName' },
|
||||
{ label: '当前进度', prop: 'currentProgress' },
|
||||
{
|
||||
label: '备注',
|
||||
prop: 'note',
|
||||
width: '180px',
|
||||
showOverflowTooltip: true,
|
||||
rules: {
|
||||
required: true,
|
||||
message: '请输入',
|
||||
trigger: 'blur',
|
||||
},
|
||||
},
|
||||
{ label: '计划进度', prop: 'planProgress', addDisplay: false, editDisplay: false },
|
||||
{ label: '状态', prop: 'planStatus', addDisplay: false, editDisplay: false },
|
||||
],
|
||||
actions: [
|
||||
{
|
||||
name: '查看',
|
||||
icon: 'view',
|
||||
event: ({ row }) => {
|
||||
openDetailDialog(row);
|
||||
},
|
||||
name: '审核',
|
||||
icon: 'Stamp',
|
||||
event: ({ row }) => doExam(row),
|
||||
},
|
||||
{
|
||||
name: '重新制定计划',
|
||||
name: '编辑',
|
||||
icon: 'edit',
|
||||
event: ({ row }) => {
|
||||
currentAction.value = 'reCreate';
|
||||
formData.value = { ...row };
|
||||
if (isGridMember.value) {
|
||||
formData.value.regionName = row.regionName;
|
||||
formData.value.gridName = row.gridName;
|
||||
}
|
||||
formData.value.growthCycleUnit = row.growthCycleUnit || '1';
|
||||
commonDialogVisible.value = true;
|
||||
},
|
||||
event: ({ row }) => rowEdit(row),
|
||||
},
|
||||
{
|
||||
name: '填写实际种植信息',
|
||||
icon: 'edit',
|
||||
event: ({ row }) => {
|
||||
currentAction.value = 'fillActual';
|
||||
formData.value = { ...row };
|
||||
if (isGridMember.value) {
|
||||
formData.value.regionName = row.regionName;
|
||||
formData.value.gridName = row.gridName;
|
||||
}
|
||||
formData.value.growthCycleUnit = row.growthCycleUnit || '1';
|
||||
commonDialogVisible.value = true;
|
||||
},
|
||||
name: '详情',
|
||||
icon: 'List',
|
||||
event: ({ row }) => doDetail(row),
|
||||
},
|
||||
{
|
||||
type: 'danger',
|
||||
@ -370,72 +229,6 @@ const state = reactive({
|
||||
currentRow: {},
|
||||
});
|
||||
|
||||
const formData = ref({
|
||||
year: '',
|
||||
regionCode: '',
|
||||
gridId: '',
|
||||
regionName: '',
|
||||
gridName: '',
|
||||
planName: '', // 必填
|
||||
cropsId: null,
|
||||
cropsName: '',
|
||||
plantingArea: null,
|
||||
plantingMonths: '',
|
||||
growthCycle: '',
|
||||
growthCycleUnit: '1', // 默认单位为周
|
||||
note: '',
|
||||
});
|
||||
// 提交计划表单
|
||||
const submitForm = async () => {
|
||||
try {
|
||||
// 表单验证
|
||||
await planForm.value.validate();
|
||||
// 验证通过，提交表单
|
||||
console.log('表单数据:', formData.value);
|
||||
|
||||
if (currentAction.value === 'reCreate') {
|
||||
// 重新制定计划的提交逻辑
|
||||
await editAnnual(formData.value);
|
||||
app.$message.success('重新制定计划成功');
|
||||
} else if (currentAction.value === 'fillActual') {
|
||||
// 填写实际种植信息的提交逻辑
|
||||
await saveActualProgress(formData.value);
|
||||
app.$message.success('填写实际种植信息成功');
|
||||
} else if (currentAction.value === 'add') {
|
||||
// 新增计划的提交逻辑
|
||||
await saveAnnual(formData.value);
|
||||
app.$message.success('新增年度种植计划成功');
|
||||
}
|
||||
|
||||
commonDialogVisible.value = false;
|
||||
loadData();
|
||||
} catch (error) {
|
||||
console.error('表单提交失败:', error);
|
||||
if (error.errors) {
|
||||
// 表单验证失败
|
||||
app.$message.error('请填写完整且正确的表单信息');
|
||||
} else {
|
||||
// API 调用失败
|
||||
app.$message.error('操作失败，请稍后重试');
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const onAdd = () => {
|
||||
currentAction.value = 'add';
|
||||
formData.value = {
|
||||
regionName: '',
|
||||
gridName: '',
|
||||
planName: '',
|
||||
cropsName: '',
|
||||
plantingArea: '',
|
||||
plantingMonths: '',
|
||||
growthCycle: '',
|
||||
growthCycleUnit: '1',
|
||||
};
|
||||
commonDialogVisible.value = true;
|
||||
};
|
||||
|
||||
// 加载
|
||||
const loadData = () => {
|
||||
state.loading = true;
|
||||
@ -475,29 +268,10 @@ const sizeChange = (size) => {
|
||||
};
|
||||
|
||||
// 搜索
|
||||
const searchChange = () => {
|
||||
state.query = {
|
||||
...state.query,
|
||||
...areaQuery.value,
|
||||
current: 1,
|
||||
};
|
||||
console.log('搜索参数', state.query);
|
||||
loadData();
|
||||
};
|
||||
|
||||
// 重置搜索
|
||||
const resetSearch = () => {
|
||||
state.query = {
|
||||
current: 1,
|
||||
size: 10,
|
||||
id: '',
|
||||
planName: '',
|
||||
cropsName: '',
|
||||
cropsId: '',
|
||||
};
|
||||
areaQuery.value.regionCode = '';
|
||||
areaQuery.value.gridName = '';
|
||||
areaQuery.value.gridId = '';
|
||||
const searchChange = (params, done) => {
|
||||
if (done) done();
|
||||
state.query = params;
|
||||
state.query.current = 1;
|
||||
loadData();
|
||||
};
|
||||
|
||||
@ -512,6 +286,65 @@ const selectionChange = (rows) => {
|
||||
state.selection = rows;
|
||||
};
|
||||
|
||||
const onAdd = () => {
|
||||
afterSub();
|
||||
crudRef.value.rowAdd();
|
||||
};
|
||||
|
||||
// 新增
|
||||
const rowSave = (row, done, loading) => {
|
||||
row.growthCycle = growthCycleVal[0] + '周' + ',' + growthCycleVal[1] + '周';
|
||||
row.plantingMonths = plantingMonths.value.length ? plantingMonths.value.toString() : '';
|
||||
saveAnnual(row)
|
||||
.then((res) => {
|
||||
if (res.code === 200) {
|
||||
app.$message.success('添加成功！');
|
||||
done();
|
||||
loadData();
|
||||
}
|
||||
})
|
||||
.catch((err) => {
|
||||
app.$message.error(err.msg);
|
||||
})
|
||||
.finally(() => {});
|
||||
};
|
||||
const beforeMsg = (row) => {
|
||||
growthCycleVal = row.growthCycle.split(',').map((m) => {
|
||||
return Number(m.replace(/[^0-9]/gi, ''));
|
||||
});
|
||||
plantingMonths.value = row.plantingMonths.split(',');
|
||||
};
|
||||
|
||||
const afterSub = () => {
|
||||
growthCycleVal = [0, 0];
|
||||
plantingMonths.value = [];
|
||||
};
|
||||
|
||||
// 编辑
|
||||
const rowEdit = (row) => {
|
||||
console.info('编辑');
|
||||
beforeMsg(row);
|
||||
crudRef.value.rowEdit(row);
|
||||
};
|
||||
|
||||
const rowUpdate = (row, index, done, loading) => {
|
||||
console.info('更新');
|
||||
editAnnual(row)
|
||||
.then((res) => {
|
||||
if (res.code === 200) {
|
||||
app.$message.success('更新成功！');
|
||||
done();
|
||||
loadData();
|
||||
}
|
||||
})
|
||||
.catch((err) => {
|
||||
app.$message.error(err.msg);
|
||||
})
|
||||
.finally(() => {
|
||||
loading();
|
||||
});
|
||||
};
|
||||
|
||||
// 删除
|
||||
const rowDel = (row, index, done) => {
|
||||
if (isEmpty(row)) return;
|
||||
@ -559,101 +392,53 @@ const onExport = () => {
|
||||
state.loading = false;
|
||||
});
|
||||
};
|
||||
</script>
|
||||
<style scoped lang="scss">
|
||||
.custom-page {
|
||||
/* 详情弹窗样式 */
|
||||
|
||||
/* 表单弹窗样式 */
|
||||
.el-dialog {
|
||||
.el-form {
|
||||
padding: 0 20px;
|
||||
width: 100%;
|
||||
// background-color: aqua;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
const doExam = (row) => {
|
||||
examVisible.value = true;
|
||||
infoData.id = row.id || '';
|
||||
};
|
||||
|
||||
&-item {
|
||||
margin-bottom: 18px;
|
||||
width: 60%;
|
||||
// background-color: #606266;
|
||||
const doDetail = (row) => {
|
||||
beforeMsg(row);
|
||||
crudRef.value.rowView(row);
|
||||
};
|
||||
|
||||
&__label {
|
||||
font-weight: 500;
|
||||
color: #606266;
|
||||
}
|
||||
const examCancel = () => {
|
||||
console.log('审核不通过');
|
||||
examVisible.value = true;
|
||||
toDoexam(infoData.id, '4', '审核不通过');
|
||||
};
|
||||
|
||||
/* 输入框和选择器统一宽度 */
|
||||
.el-input,
|
||||
.el-select,
|
||||
.el-cascader {
|
||||
width: 100%;
|
||||
max-width: 400px;
|
||||
}
|
||||
const examPast = (row) => {
|
||||
console.log('审核通过');
|
||||
toDoexam(infoData.id, '3', '审核通过');
|
||||
};
|
||||
|
||||
/* 数字输入框和单位选择器组合 */
|
||||
.el-input-number {
|
||||
margin-right: 10px;
|
||||
|
||||
& + .el-select {
|
||||
width: 100px;
|
||||
const toDoexam = (id, status, tips) => {
|
||||
app
|
||||
.$confirm(`确定` + tips + `吗？`, '温馨提示', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning',
|
||||
})
|
||||
.then(() => {
|
||||
examineAnnual({ id: id, planStatus: status })
|
||||
.then((res) => {
|
||||
if (res.code === 200) {
|
||||
app.$message.success('审核提交成功！');
|
||||
loadData();
|
||||
examHide();
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
.catch((err) => {
|
||||
app.$message.error(err.msg);
|
||||
})
|
||||
.finally(() => {});
|
||||
})
|
||||
.catch(() => {});
|
||||
};
|
||||
|
||||
/* 按钮样式微调 */
|
||||
.el-button {
|
||||
padding: 8px 16px;
|
||||
border-radius: 4px;
|
||||
|
||||
& + .el-button {
|
||||
margin-left: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
/* 搜索区域样式 */
|
||||
.custom-search {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
padding: 16px;
|
||||
border-radius: 8px;
|
||||
// background-color: #f5f7fa;
|
||||
|
||||
.search-fields {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 16px;
|
||||
width: 100%;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.search-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
|
||||
.el-input,
|
||||
.el-select,
|
||||
.el-cascader {
|
||||
width: 200px;
|
||||
}
|
||||
span {
|
||||
font-size: 14px;
|
||||
color: #606266;
|
||||
align-self: center;
|
||||
}
|
||||
}
|
||||
|
||||
.search-buttons {
|
||||
display: flex;
|
||||
align-self: center;
|
||||
gap: 12px;
|
||||
margin-left: 8px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
const examHide = () => {
|
||||
examVisible.value = false;
|
||||
};
|
||||
</script>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user