产出品管理 - 产出品信息页面重构及增删查功能开发
This commit is contained in:
parent
2dcf81c155
commit
ec0a9a5591
@ -16,6 +16,6 @@ VITE_APP_UPLOAD_API = '/uploadApis'
|
||||
# VITE_APP_BASE_URL = 'http://47.109.205.240:8080'
|
||||
# VITE_APP_UPLOAD_URL = 'http://47.109.205.240:9300'
|
||||
# 内网接口地址
|
||||
VITE_APP_BASE_URL = 'http://192.168.18.99:8080'
|
||||
VITE_APP_UPLOAD_URL = 'http://192.168.18.99:8080'
|
||||
VITE_APP_BASE_URL = 'http://192.168.18.88:8080'
|
||||
VITE_APP_UPLOAD_URL = 'http://192.168.18.88:8080'
|
||||
VITE_APP_VIST_URL = 'http://192.168.18.99'
|
||||
|
||||
@ -13,8 +13,8 @@ VITE_APP_UPLOAD_API = '/uploadApis'
|
||||
# VITE_APP_UPLOAD_URL = 'http://47.109.205.240:9204'
|
||||
|
||||
# 内网测试库接口地址
|
||||
VITE_APP_BASE_URL = 'http://192.168.18.99:8080'
|
||||
VITE_APP_UPLOAD_URL = 'http://192.168.18.99:8080'
|
||||
VITE_APP_BASE_URL = 'http://192.168.18.88:8080'
|
||||
VITE_APP_UPLOAD_URL = 'http://192.168.18.88:8080'
|
||||
|
||||
# 本地开发接口地址
|
||||
# VITE_APP_BASE_URL = 'http://192.168.18.99:8080'
|
||||
|
||||
38
sub-government-affairs-service/src/apis/outputProducts.js
Normal file
38
sub-government-affairs-service/src/apis/outputProducts.js
Normal file
@ -0,0 +1,38 @@
|
||||
import request from '@/utils/axios';
|
||||
|
||||
/**
|
||||
* @Title: 列表
|
||||
*/
|
||||
export function GetOutputList(params = {}) {
|
||||
return request('/inputGoods/outPut/page', {
|
||||
method: 'GET',
|
||||
params,
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* @Title: 新增
|
||||
*/
|
||||
export function AddOutput(data = {}) {
|
||||
return request('/inputGoods/outPut/save', {
|
||||
method: 'POST',
|
||||
data,
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* @Title: 编辑
|
||||
*/
|
||||
export function UpdateOutput(data = {}) {
|
||||
return request('/inputGoods/outPut/uploadReport', {
|
||||
method: 'PUT',
|
||||
data,
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* @Title: 删除
|
||||
*/
|
||||
export function DeleteOutput(ids) {
|
||||
return request(`/inputGoods/outPut/delete/${ids}`);
|
||||
}
|
||||
@ -256,7 +256,7 @@
|
||||
// color: #fff;
|
||||
}
|
||||
.table-cell-img-box {
|
||||
width: 60px;
|
||||
width: 100%;
|
||||
height: 60px;
|
||||
text-align: center;
|
||||
overflow: hidden; /* 隐藏超出部分 */
|
||||
|
||||
@ -1,84 +1,112 @@
|
||||
<template>
|
||||
<div class="custom-page">
|
||||
<div class="custom-search">
|
||||
<AreaCascader v-model:region-code="searchForm.regionCode" v-model:grid-id="searchForm.id" :width="600" />
|
||||
<el-button type="primary" @click="handleSearch"> 搜索 </el-button>
|
||||
<el-button @click="resetSearch"> 重置 </el-button>
|
||||
<div class="app-container">
|
||||
<div class="container-custom">
|
||||
<h2 class="custom-h2">产出品信息</h2>
|
||||
<div ref="searchBarRef" class="search-box">
|
||||
<div class="search-bar">
|
||||
<div class="search-bar-left">
|
||||
<el-form ref="searchForm" :inline="true" :model="formInline" class="demo-form-inline" :label-width="'auto'">
|
||||
<el-form-item label="关键词" prop="name">
|
||||
<el-input v-model="formInline.name" placeholder="请输入关键词" clearable />
|
||||
</el-form-item>
|
||||
<!-- <el-form-item label="分类" prop="seedTypeId">
|
||||
<el-select v-model="formInline.seedTypeId" placeholder="请选择" clearable @change="seedTypeChange">
|
||||
<el-option v-for="item in seedTypeList" :key="item.id" :value="item.id" :label="item.dataName" />
|
||||
</el-select>
|
||||
</el-form-item> -->
|
||||
<el-form-item label="">
|
||||
<el-button type="primary" icon="Search" @click="onSubmit">查询</el-button>
|
||||
<el-button icon="Refresh" @click="resetForm">重置</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="table-toolbar">
|
||||
<el-button type="primary" icon="plus" @click="addItem()">新增</el-button>
|
||||
</div>
|
||||
<div class="table-statistics flex-left-center">
|
||||
<el-icon class="mr-20" color="#409eff" size="16"><InfoFilled /></el-icon>
|
||||
<div class="mr-20">
|
||||
已选择 <span class="color-blue">{{ landNums }}</span> 个地块
|
||||
</div>
|
||||
<div class="mr-20">
|
||||
面积总计（亩）：<span class="color-blue">{{ totalArea }}</span>
|
||||
</div>
|
||||
<div class="mr-20">
|
||||
产量总计（公斤）：<span class="color-blue">{{ yieldSeed }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="table-cont">
|
||||
<tableComponent
|
||||
:table-data="tableData"
|
||||
:columns="columns"
|
||||
:show-selection="true"
|
||||
:loading="tableLoading"
|
||||
:total="tableTotal"
|
||||
:current-page="formInline.current"
|
||||
:page-size="formInline.size"
|
||||
:show-sort="false"
|
||||
@page-change="handlePaginationChange"
|
||||
@selection-change="handleSelectionChange"
|
||||
>
|
||||
<!-- 自定义-操作 -->
|
||||
<template #action="slotProps">
|
||||
<!-- <el-button type="primary" @click="seeDetails(slotProps.row)">查看</el-button> -->
|
||||
<!-- <el-button type="primary" @click="handleEdit(slotProps.row)">编辑</el-button> -->
|
||||
<el-button @click="handleDelete(slotProps.row)">删除</el-button>
|
||||
</template>
|
||||
</tableComponent>
|
||||
</div>
|
||||
</div>
|
||||
<avue-crud
|
||||
ref="crudRef"
|
||||
v-model:page="pageData"
|
||||
:data="crudData"
|
||||
:option="crudOptions"
|
||||
:table-loading="loading"
|
||||
@refresh-change="handleRefresh"
|
||||
@current-change="handleCurrentChange"
|
||||
@size-change="handleSizeChange"
|
||||
>
|
||||
<template #menu="scope">
|
||||
<custom-table-operate :actions="crudOptions.actions" :data="scope" />
|
||||
</template>
|
||||
</avue-crud>
|
||||
<el-dialog :key="dialogTitle" v-model="visible" :title="dialogTitle" width="60%" align-center :draggable="true">
|
||||
<el-form ref="form" :model="formData" :rules="rules" :disabled="isReadonly" label-width="120px" class="form-item">
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="24"><p class="form-title">基础信息</p></el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="农产品名称" prop="productName">
|
||||
<el-input v-model="formData.productName" placeholder="请输入网格名称" />
|
||||
</el-form-item>
|
||||
<el-form-item label="面积（亩）" prop="area">
|
||||
<el-input v-model="formData.area" placeholder="请输入种植面积" />
|
||||
</el-form-item>
|
||||
<el-form-item label="行政区划" prop="gridAreaCode">
|
||||
<AreaSelect v-model="formData.gridAreaCode" :label="null" :emit-path="false" />
|
||||
</el-form-item>
|
||||
<el-form-item label="联系方式" prop="contactInfo">
|
||||
<el-input v-model="formData.contactInfo" placeholder="请输入联系方式" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="地块" prop="landName">
|
||||
<el-input v-model="formData.landName" placeholder="请输入地块名称" />
|
||||
</el-form-item>
|
||||
<el-form-item label="网格" prop="gridName">
|
||||
<el-input v-model="formData.gridName" placeholder="请输入网格名称" />
|
||||
</el-form-item>
|
||||
<el-form-item label="姓名" prop="name">
|
||||
<el-input v-model="formData.name" placeholder="请输入姓名" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="24"><p class="form-title">品质信息</p></el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="采收时间" prop="harvestTime">
|
||||
<el-input v-model="formData.harvestTime" placeholder="请输入采收时间" />
|
||||
</el-form-item>
|
||||
<el-form-item label="地块总产（公斤）" prop="totalYield">
|
||||
<el-input v-model="formData.totalYield" placeholder="请输入地块总产" />
|
||||
</el-form-item>
|
||||
<!-- <el-form-item label="价格（元/公斤）" prop="price">
|
||||
<el-input v-model="formData.price" placeholder="请输入价格" />
|
||||
</el-form-item> -->
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="亩产（公斤）" prop="yieldPerMu">
|
||||
<el-input v-model="formData.yieldPerMu" placeholder="请输入亩产" />
|
||||
</el-form-item>
|
||||
<!-- <el-form-item label="品质" prop="quality">
|
||||
<el-input v-model="formData.quality" placeholder="请输入品质" />
|
||||
</el-form-item>
|
||||
<el-form-item label="产值（元）" prop="outputValue">
|
||||
<el-input v-model="formData.outputValue" placeholder="请输入产值" />
|
||||
</el-form-item> -->
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-dialog v-model="dialogFormVisible" :title="dialogTitle" width="800" :close-on-click-modal="false" align-center>
|
||||
<el-form :inline="true" :label-width="'auto'">
|
||||
<LandSelect ref="landSelectRef" v-model="dialogForm.landId" :options="landSelectList" :disabled="formDisabled" @change="handleLandChange" />
|
||||
</el-form>
|
||||
<el-descriptions title="地块信息" border class="mb-20 custom-descriptions" :column="2">
|
||||
<el-descriptions-item label="农产品名称">{{ dialogForm.cropName }}</el-descriptions-item>
|
||||
<el-descriptions-item label="面积（亩）">{{ dialogForm.area }}</el-descriptions-item>
|
||||
<el-descriptions-item label="行政区域编码">{{ dialogForm.regionCode }}</el-descriptions-item>
|
||||
<el-descriptions-item label="行政区域名称">{{ dialogForm.regionName }}</el-descriptions-item>
|
||||
<el-descriptions-item label="网格编码">{{ dialogForm.gridId }}</el-descriptions-item>
|
||||
<el-descriptions-item label="网格名称">{{ dialogForm.gridName }}</el-descriptions-item>
|
||||
<el-descriptions-item label="地块编码">{{ dialogForm.landId }}</el-descriptions-item>
|
||||
<el-descriptions-item label="地块名称">{{ dialogForm.landName }}</el-descriptions-item>
|
||||
<el-descriptions-item label="姓名">{{ dialogForm.propertyName }}</el-descriptions-item>
|
||||
<el-descriptions-item label="联系方式">{{ dialogForm.propertyPhone }}</el-descriptions-item>
|
||||
</el-descriptions>
|
||||
<el-form
|
||||
ref="dialogRef"
|
||||
:model="dialogForm"
|
||||
:inline="true"
|
||||
:label-width="'120'"
|
||||
:rules="dialogFormRules"
|
||||
:disabled="formDisabled"
|
||||
class="dialog-form-container"
|
||||
>
|
||||
<div class="el-descriptions__title" style="margin-bottom: 16px">产量信息</div>
|
||||
<el-form-item label="采收时间" prop="detectionTime" class="dialog-form-item">
|
||||
<el-date-picker v-model="dialogForm.detectionTime" :clearable="false" type="date" value-format="YYYY-MM-DD" placeholder="请选择使用时间" />
|
||||
</el-form-item>
|
||||
<el-form-item label="亩产量（公斤）" required prop="yield" class="dialog-form-item">
|
||||
<el-input-number v-model="dialogForm.yield" :min="1" controls-position="right" placeholder="请输入亩产量" style="width: 230px" />
|
||||
</el-form-item>
|
||||
<el-form-item label="总产量（公斤）" prop="totalYield" class="dialog-form-item">
|
||||
<el-input-number
|
||||
v-model="dialogForm.totalYield"
|
||||
disabled
|
||||
:min="0"
|
||||
controls-position="right"
|
||||
placeholder="请输入亩产量"
|
||||
style="width: 230px"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<template #footer>
|
||||
<div class="dialog-footer">
|
||||
<el-button @click="handleCancel">取消</el-button>
|
||||
<el-button v-if="!isReadonly" type="primary" @click="handleSubmit()"> 保存 </el-button>
|
||||
<el-button v-if="!formDisabled" type="primary" @click="onSaveCategory">保存</el-button>
|
||||
<el-button v-if="!formDisabled" @click="cancelDialog">取消</el-button>
|
||||
<el-button v-else @click="cancelDialog">关闭</el-button>
|
||||
</div>
|
||||
</template>
|
||||
</el-dialog>
|
||||
@ -86,229 +114,405 @@
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
// ---------------------------------------------------------------------
|
||||
// avue-crud 通用代码
|
||||
// ---------------------------------------------------------------------
|
||||
import { ref, reactive, watch, onMounted, computed, nextTick } from 'vue';
|
||||
import { CRUD_OPTIONS } from '@/config';
|
||||
import { ElMessage, ElMessageBox } from 'element-plus';
|
||||
import { useUserStore } from '@/store/modules/user';
|
||||
import { ref, reactive, computed, onMounted, onBeforeUnmount, nextTick, watch } from 'vue';
|
||||
import tableComponent from '@/components/tableComponent.vue';
|
||||
import LandSelect from '@/components/LandSelect.vue';
|
||||
import { ElMessage } from 'element-plus';
|
||||
import inputSuppliesApi from '@/apis/inputSuppliesApi';
|
||||
const { getMaterailTypes } = inputSuppliesApi;
|
||||
import { GetOutputList, AddOutput, UpdateOutput, DeleteOutput } from '@/apis/outputProducts';
|
||||
import { getLandList } from '@/apis/inputSuppliesApi/supervisionOfInputs';
|
||||
import request from '@/utils/axios';
|
||||
import { GetDictTypeInfo } from '@/apis/system/dictType';
|
||||
import { useApp } from '@/hooks';
|
||||
const app = useApp();
|
||||
|
||||
const UserStore = useUserStore();
|
||||
const user = UserStore.getUserInfo();
|
||||
console.log('admin 属性：', user.admin);
|
||||
|
||||
const loading = ref(false);
|
||||
|
||||
const visible = ref(false);
|
||||
const isReadonly = ref(false);
|
||||
const dialogTitle = ref();
|
||||
const formData = ref({
|
||||
gridName: '',
|
||||
gridAreaCode: '',
|
||||
scope: '',
|
||||
scopeImg: '',
|
||||
note: '',
|
||||
// 查询条件
|
||||
const formInline = reactive({
|
||||
name: '',
|
||||
seedTypeId: '',
|
||||
current: 1,
|
||||
size: 10,
|
||||
});
|
||||
const initialFormData = { ...formData.value };
|
||||
const searchForm = ref(null);
|
||||
const onSubmit = () => {
|
||||
formInline.current = 1;
|
||||
loadData();
|
||||
};
|
||||
const resetForm = () => {
|
||||
formData.value = { ...initialFormData };
|
||||
searchForm.value.resetFields();
|
||||
};
|
||||
|
||||
const pageData = ref({
|
||||
currentPage: 1,
|
||||
pageSize: 10,
|
||||
total: 0,
|
||||
});
|
||||
const searchForm = ref({
|
||||
gridName: '',
|
||||
keyword: '',
|
||||
regionCode: '',
|
||||
id: '',
|
||||
status: -1,
|
||||
});
|
||||
const initialSearchForm = { ...searchForm.value };
|
||||
const resetSearch = () => {
|
||||
searchForm.value = { ...initialSearchForm };
|
||||
// 表格数据
|
||||
const tableData = ref([]);
|
||||
const selectedIds = ref([]);
|
||||
const selectedRows = ref([]);
|
||||
const tableLoading = ref(false);
|
||||
const tableTotal = ref(0);
|
||||
const columns = ref([
|
||||
{ label: '行政区划编码', prop: 'regionCode', width: 150 },
|
||||
{ label: '行政区划', prop: 'regionName', width: 150 },
|
||||
{ label: '网格编码', prop: 'gridId', width: 150 },
|
||||
{ label: '网格名称', prop: 'gridName', width: 150 },
|
||||
{ label: '地块编码', prop: 'landId', width: 150 },
|
||||
{ label: '地块名称', prop: 'landName' },
|
||||
{ label: '农产品名称', prop: 'cropName', width: 150 },
|
||||
{ label: '面积（亩）', prop: 'area' },
|
||||
{ label: '亩产（公斤）', prop: 'yield', width: 80 },
|
||||
{ label: '地块总产（公斤）', prop: 'totalYield' },
|
||||
{ label: '生产经营主体编码', prop: 'businessEntityCode', width: 150 },
|
||||
{ label: '生产经营主体类型', prop: 'businessEntityType', width: 150 },
|
||||
{ label: '生产经营主体名称', prop: 'businessEntityName' },
|
||||
{ label: '是否溯源', prop: 'isTrace' },
|
||||
{ prop: 'action', label: '操作', slotName: 'action', width: 100, fixed: 'right' },
|
||||
]);
|
||||
const handlePaginationChange = ({ page, pageSize }) => {
|
||||
formInline.current = page;
|
||||
formInline.size = pageSize;
|
||||
loadData();
|
||||
};
|
||||
// 过滤对象，只保留有值的属性
|
||||
const filterObject = (obj) => {
|
||||
const newObj = {};
|
||||
Object.keys(obj).forEach((key) => {
|
||||
const value = obj[key];
|
||||
// 检查值是否有效，排除空字符串、null 和 undefined
|
||||
if (value !== '' && value !== null && value !== undefined) {
|
||||
newObj[key] = value;
|
||||
let landNums = ref(0);
|
||||
let totalArea = computed(() => {
|
||||
const sum = selectedRows.value.reduce((sum, item) => {
|
||||
return sum + Math.round(item.area * 100);
|
||||
}, 0);
|
||||
const result = sum / 100;
|
||||
return parseFloat(result.toFixed(2));
|
||||
});
|
||||
let yieldSeed = computed(() => {
|
||||
const sum = selectedRows.value.reduce((sum, item) => {
|
||||
return sum + Math.round(item.totalYield * 100);
|
||||
}, 0);
|
||||
const result = sum / 100;
|
||||
return parseFloat(result.toFixed(2));
|
||||
});
|
||||
const handleSelectionChange = (selection, keys) => {
|
||||
// console.log(selection, keys);
|
||||
selectedRows.value = selection;
|
||||
landNums.value = selection.length;
|
||||
};
|
||||
const loadData = async () => {
|
||||
tableLoading.value = true;
|
||||
try {
|
||||
let response = await GetOutputList(formInline);
|
||||
tableLoading.value = false;
|
||||
if (response.code == 200) {
|
||||
tableData.value = response.data.records;
|
||||
tableTotal.value = response.data.total;
|
||||
}
|
||||
});
|
||||
return newObj;
|
||||
} catch (error) {
|
||||
tableLoading.value = false;
|
||||
console.error(error);
|
||||
}
|
||||
};
|
||||
|
||||
const crudData = ref([]);
|
||||
const crudOptions = reactive({
|
||||
...CRUD_OPTIONS,
|
||||
// menu: false,
|
||||
header: false,
|
||||
height: 'calc(100vh - 340px)',
|
||||
selection: true,
|
||||
column: [
|
||||
{ label: '行政区划编码', prop: 'AreaCode', width: 150 },
|
||||
{ label: '行政区划', prop: 'gridAreaName', width: 150 },
|
||||
{ label: '网格编码', prop: 'gridCode', width: 150 },
|
||||
{ label: '网格名称', prop: 'gridName', width: 150 },
|
||||
{ label: '地块编码', prop: 'landCode', width: 150 },
|
||||
{ label: '地块', prop: 'landName' },
|
||||
{ label: '农产品名称', prop: 'productName', width: 150 },
|
||||
{ label: '面积（亩）', prop: 'area', formatter: (row, cloumn, cellValue) => `${Number(cellValue).toFixed(2)} 亩` },
|
||||
{ label: '亩产（公斤）', prop: 'yieldPerMu', width: 80 },
|
||||
{ label: '地块总产（公斤）', prop: 'totalYield' },
|
||||
{ label: '生产经营主体编码', prop: 'enterCode', width: 150 },
|
||||
{ label: '生产经营主体类型', prop: 'enterType', width: 150 },
|
||||
{ label: '生产经营主体名称', prop: 'enterName' },
|
||||
{ label: '是否溯源', prop: 'isTrace' },
|
||||
],
|
||||
actions: [
|
||||
{
|
||||
name: '查看',
|
||||
icon: 'view',
|
||||
event: ({ row }) => handleView(row),
|
||||
},
|
||||
// {
|
||||
// name: '编辑',
|
||||
// icon: 'edit',
|
||||
// event: ({ row }) => handleEdit(row),
|
||||
// },
|
||||
{
|
||||
type: 'danger',
|
||||
name: '删除',
|
||||
icon: 'delete',
|
||||
event: ({ row }) => handleDelete(row),
|
||||
},
|
||||
],
|
||||
const extractThirdLevelChildren = (dataArray) => {
|
||||
let result = [];
|
||||
// 遍历第一层数组
|
||||
for (const level1 of dataArray) {
|
||||
// 检查第一层是否有children且是数组
|
||||
if (level1.children && Array.isArray(level1.children)) {
|
||||
// 遍历第二层数组
|
||||
for (const level2 of level1.children) {
|
||||
// 检查第二层是否有children且是数组
|
||||
if (level2.children && Array.isArray(level2.children)) {
|
||||
// 将第三层的所有对象添加到结果数组中
|
||||
result.push(...level2.children);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
return result;
|
||||
};
|
||||
const seedTypeChange = () => {
|
||||
console.log(formInline.seedTypeId);
|
||||
// 重新获取表格数据，需添加参数
|
||||
};
|
||||
|
||||
const dialogFormVisible = ref(false);
|
||||
const dialogRef = ref(null);
|
||||
const dialogTitle = ref('新增');
|
||||
const formDisabled = ref(false);
|
||||
const landSelectRef = ref(null);
|
||||
const nowSelectRow = ref({});
|
||||
const dialogForm = reactive({
|
||||
area: 0, //地块面积
|
||||
regionCode: '', //所属行政区域代码
|
||||
regionName: '', //所属行政区域名称
|
||||
gridId: '', //所属网格代码
|
||||
gridName: '', //所属网格名称
|
||||
landId: '', //地块id
|
||||
landName: '', //地块名称
|
||||
name: '', //姓名
|
||||
phone: '', //联系方式
|
||||
totalYield: 0, //地块总产量（公斤）
|
||||
yield: 1, //亩产量
|
||||
detectionTime: '', //使用时间
|
||||
businessEntityCode: '', //经营主体编码
|
||||
businessEntityName: '', //经营主体名称
|
||||
});
|
||||
const handleRefresh = async () => {
|
||||
searchForm.value = { ...initialSearchForm };
|
||||
getData();
|
||||
const dialogFormRules = ref({
|
||||
yield: [{ required: true, message: '请输入亩产量', trigger: ['change', 'blur'] }],
|
||||
detectionTime: [{ required: true, message: '请选择使用时间', trigger: 'blur' }],
|
||||
});
|
||||
watch(
|
||||
() => dialogForm.yield,
|
||||
(val) => {
|
||||
console.log(val);
|
||||
console.log(dialogForm.area);
|
||||
console.log(val * dialogForm.area);
|
||||
dialogForm.totalYield = val * dialogForm.area;
|
||||
}
|
||||
);
|
||||
const addItem = async () => {
|
||||
// ElMessage.success('点击新增!');
|
||||
restDialogForm();
|
||||
dialogTitle.value = '新增';
|
||||
formDisabled.value = false;
|
||||
dialogFormVisible.value = true;
|
||||
};
|
||||
const handleCurrentChange = (val) => {
|
||||
pageData.value.currentPage = val;
|
||||
};
|
||||
const handleSizeChange = (val) => {
|
||||
pageData.value.pageSize = val;
|
||||
};
|
||||
const handleView = (row) => {
|
||||
isReadonly.value = true;
|
||||
formData.value = { ...row };
|
||||
dialogTitle.value = '产出品信息';
|
||||
visible.value = true;
|
||||
const seeDetails = async (row) => {
|
||||
// ElMessage.success('查看详情!');
|
||||
dialogTitle.value = '详情';
|
||||
console.log(row);
|
||||
formDisabled.value = true;
|
||||
dialogForm.landId = row.landId;
|
||||
getDetails();
|
||||
dialogForm.totalYield = row.totalYield ?? 0;
|
||||
dialogForm.yield = row.yield;
|
||||
dialogForm.useUnit = row.useUnit;
|
||||
dialogForm.detectionTime = row.useTime;
|
||||
dialogFormVisible.value = true;
|
||||
};
|
||||
const handleEdit = (row) => {
|
||||
isReadonly.value = false;
|
||||
formData.value = { ...row };
|
||||
// ElMessage.success('点击编辑!');
|
||||
nowSelectRow.value = row;
|
||||
dialogTitle.value = '编辑';
|
||||
visible.value = true;
|
||||
console.log(row);
|
||||
formDisabled.value = false;
|
||||
dialogForm.landId = row.landId;
|
||||
getDetails();
|
||||
dialogForm.totalYield = row.totalYield ?? 0;
|
||||
dialogForm.yield = row.yield;
|
||||
dialogForm.useUnit = row.useUnit;
|
||||
dialogForm.detectionTime = row.useTime;
|
||||
dialogFormVisible.value = true;
|
||||
};
|
||||
const handleDelete = async (row) => {
|
||||
try {
|
||||
await ElMessageBox.confirm('确认删除该网格吗？', '提示', {
|
||||
// 获取地块信息
|
||||
const getDetails = async () => {
|
||||
let response = await request({
|
||||
url: `/land-resource/landManage/getLandInfo?landId=${dialogForm.landId}`,
|
||||
});
|
||||
console.log(response);
|
||||
if (response.code == 200) {
|
||||
if (response.data) {
|
||||
setDialogForm(response.data);
|
||||
} else {
|
||||
ElMessage.error('未查询到数据');
|
||||
}
|
||||
} else {
|
||||
ElMessage.error(response.message);
|
||||
}
|
||||
};
|
||||
const setDialogForm = (row) => {
|
||||
dialogForm.area = row.area;
|
||||
dialogForm.regionCode = row.gridAreaCode;
|
||||
dialogForm.regionName = row.fullRegionName;
|
||||
dialogForm.gridId = row.gridId;
|
||||
dialogForm.gridName = row.gridName;
|
||||
dialogForm.landId = row.id;
|
||||
dialogForm.landName = row.landName;
|
||||
dialogForm.name = row.propertyName;
|
||||
dialogForm.phone = row.propertyPhone;
|
||||
dialogForm.businessEntityCode = row.businessEntityCode ?? '';
|
||||
dialogForm.businessEntityName = row.businessEntityName ?? '';
|
||||
};
|
||||
const handleDelete = (row) => {
|
||||
console.log('删除操作: ', row);
|
||||
app
|
||||
.$confirm(`删除后信息将不可查看，确认要删除吗？`, '确定删除', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning',
|
||||
});
|
||||
|
||||
const response = await deleteGrid(row.id);
|
||||
|
||||
ElMessage.success('删除成功');
|
||||
getData();
|
||||
})
|
||||
.then(() => {
|
||||
deleteGoods(row.id)
|
||||
.then((res) => {
|
||||
if (res.code === 200) {
|
||||
onSubmit();
|
||||
app.$message.success('删除成功！');
|
||||
}
|
||||
})
|
||||
.catch((err) => {
|
||||
app.$message.error(err.msg);
|
||||
});
|
||||
})
|
||||
.catch(() => {});
|
||||
};
|
||||
const deleteGoods = async (ids) => {
|
||||
try {
|
||||
let res = await DeleteOutput(ids);
|
||||
return res;
|
||||
} catch (error) {
|
||||
if (error === 'cancel') {
|
||||
ElMessage.info('已取消删除');
|
||||
} else {
|
||||
ElMessage.error('删除失败');
|
||||
console.error('删除异常:', error);
|
||||
return false;
|
||||
}
|
||||
};
|
||||
const onSaveCategory = () => {
|
||||
console.log(dialogForm);
|
||||
if (dialogForm.landId == '') {
|
||||
landSelectRef.value.handleChange();
|
||||
return;
|
||||
}
|
||||
dialogRef.value.validate(async (valid, fields) => {
|
||||
if (valid) {
|
||||
try {
|
||||
let param = { ...dialogForm };
|
||||
param.useTime = dialogForm.detectionTime;
|
||||
console.log(param);
|
||||
// valid.businessEntityCode = dialogForm.businessEntityCode; //经营主体编码
|
||||
// valid.businessEntityName = dialogForm.businessEntityName; //经营主体名称
|
||||
let response;
|
||||
if (dialogTitle.value == '新增') {
|
||||
response = await AddOutput(param);
|
||||
} else {
|
||||
param.id = nowSelectRow.value.id;
|
||||
response = await UpdateOutput(param);
|
||||
}
|
||||
if (response.code == 200) {
|
||||
cancelDialog();
|
||||
onSubmit();
|
||||
if (dialogTitle.value == '新增') {
|
||||
ElMessage.success('新增成功!');
|
||||
} else {
|
||||
ElMessage.success('编辑成功!');
|
||||
}
|
||||
} else {
|
||||
ElMessage.error(response.msg);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error(error);
|
||||
}
|
||||
}
|
||||
});
|
||||
};
|
||||
const cancelDialog = async () => {
|
||||
restDialogForm();
|
||||
dialogFormVisible.value = false;
|
||||
};
|
||||
const restDialogForm = () => {
|
||||
Object.assign(dialogForm, {
|
||||
area: 0, //地块面积
|
||||
regionCode: '', //所属行政区域代码
|
||||
regionName: '', //所属行政区域名称
|
||||
gridId: '', //所属网格代码
|
||||
gridName: '', //所属网格名称
|
||||
landId: '', //地块id
|
||||
landName: '', //地块名称
|
||||
name: '', //姓名
|
||||
phone: '', //联系方式
|
||||
totalYield: 0, //地块总产量（公斤）
|
||||
yield: 1, //亩产量
|
||||
useTime: '', //使用时间
|
||||
businessEntityCode: '', //经营主体编码
|
||||
businessEntityName: '', //经营主体名称
|
||||
});
|
||||
nowSelectRow.value = ref({});
|
||||
};
|
||||
|
||||
const seedTypeList = ref([]);
|
||||
const seedTypeDialogList = ref([]);
|
||||
const getSeedTypeList = async () => {
|
||||
try {
|
||||
let response = await getMaterailTypes({ moduleType: '4' });
|
||||
console.log(response);
|
||||
if (response.code == 200) {
|
||||
if (response.data?.length > 0) {
|
||||
seedTypeDialogList.value = response.data[0].children;
|
||||
let result = extractThirdLevelChildren(response.data);
|
||||
seedTypeList.value = result;
|
||||
console.log(seedTypeDialogList.value);
|
||||
}
|
||||
}
|
||||
} catch (error) {
|
||||
console.error(error);
|
||||
}
|
||||
};
|
||||
|
||||
const handleSubmit = async () => {
|
||||
console.log('提交表单:', formData.value);
|
||||
// try {
|
||||
// if (dialogTitle.value === '新增网格') {
|
||||
// await createGrid(formData.value);
|
||||
// ElMessage.success('新增成功');
|
||||
// resetForm();
|
||||
// visible.value = false;
|
||||
// getData();
|
||||
// } else {
|
||||
// await updateGrid(formData.value);
|
||||
// ElMessage.success('更新成功');
|
||||
// resetForm();
|
||||
// visible.value = false;
|
||||
// getData();
|
||||
// }
|
||||
// } catch (error) {
|
||||
// ElMessage.error(error.message || '新增失败，请重试');
|
||||
// }
|
||||
const unitList = ref([
|
||||
{ dictCode: '52', dictValue: 'g' },
|
||||
{ dictCode: '53', dictValue: 'kg' },
|
||||
]);
|
||||
|
||||
const landSelectList = ref([]);
|
||||
const getLandsList = async () => {
|
||||
let res = await getLandList();
|
||||
if (res.code == 200) {
|
||||
landSelectList.value = res.data;
|
||||
}
|
||||
};
|
||||
const handleLandChange = (val) => {
|
||||
console.log(val);
|
||||
if (val) {
|
||||
getDetails();
|
||||
} else {
|
||||
restDialogForm();
|
||||
}
|
||||
};
|
||||
|
||||
const getEntityOptions = async () => {
|
||||
let res = await GetDictTypeInfo('sys_use_supervise_number');
|
||||
console.log(res);
|
||||
if (res.code == 200) {
|
||||
unitList.value = res.data;
|
||||
} else {
|
||||
unitList.value = [
|
||||
{ dictCode: '52', dictValue: 'g' },
|
||||
{ dictCode: '53', dictValue: 'kg' },
|
||||
];
|
||||
}
|
||||
};
|
||||
|
||||
// ---------------------------------------------------------------------
|
||||
// 业务代码
|
||||
// ---------------------------------------------------------------------
|
||||
import { createGrid, updateGrid, deleteGrid, fetchGridList, getGridDetail, exportGrid } from '@/apis/landResourceManagement/gridManagement';
|
||||
import { mockData } from './output';
|
||||
onMounted(() => {
|
||||
getData();
|
||||
onSubmit();
|
||||
getLandsList();
|
||||
getEntityOptions();
|
||||
// getSeedTypeList();
|
||||
});
|
||||
const getData = async () => {
|
||||
// const filteredParams = filterObject(searchForm.value);
|
||||
// const response = await fetchGridList(filteredParams);
|
||||
// crudData.value = Array.isArray(response.data.records) ? response.data.records : [];
|
||||
await new Promise((resolve) => setTimeout(resolve, 300));
|
||||
crudData.value = mockData;
|
||||
pageData.value.total = crudData.value.length;
|
||||
};
|
||||
|
||||
const handleAdd = () => {
|
||||
console.log('handleAdd');
|
||||
resetForm();
|
||||
isReadonly.value = false;
|
||||
dialogTitle.value = '新增网格';
|
||||
visible.value = true;
|
||||
};
|
||||
|
||||
const handleSearch = () => {
|
||||
getData();
|
||||
};
|
||||
const handleCancel = () => {
|
||||
visible.value = false;
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
:deep(.el-dialog__body) {
|
||||
padding: 20px;
|
||||
height: calc(100vh - 300px);
|
||||
overflow-y: auto;
|
||||
}
|
||||
.form-title {
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
margin: 30px 0;
|
||||
color: #333333;
|
||||
}
|
||||
.form-item {
|
||||
margin: 0 auto;
|
||||
}
|
||||
.dialog-footer {
|
||||
text-align: center;
|
||||
}
|
||||
.custom-search {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 16px;
|
||||
|
||||
.el-button {
|
||||
margin-left: 12px;
|
||||
<style lang="scss" scoped>
|
||||
.dialog-form-item {
|
||||
:deep(.el-upload--picture-card) {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
}
|
||||
|
||||
:deep(.file-uploader__upload) {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
}
|
||||
|
||||
:deep(.el-upload-list__item) {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
}
|
||||
}
|
||||
|
||||
/* 必须使用深度选择器 + 精确DOM层级 */
|
||||
.custom-descriptions :deep(.el-descriptions__body) table.el-descriptions__table {
|
||||
table-layout: fixed; /* 关键属性1：强制等宽 */
|
||||
width: 100%;
|
||||
}
|
||||
.custom-descriptions :deep(.el-descriptions__label) {
|
||||
width: 130px !important; /* 关键属性2：固定宽度 */
|
||||
min-width: 130px !important;
|
||||
max-width: 130px !important;
|
||||
background: #f5f7fa;
|
||||
font-weight: bold;
|
||||
text-align: left;
|
||||
padding-right: 20px;
|
||||
}
|
||||
.custom-descriptions :deep(.el-descriptions__content) {
|
||||
width: calc(100% - 130px) !important; /* 自动填充剩余空间 */
|
||||
word-break: break-word;
|
||||
}
|
||||
</style>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user