农产品种植管理 - 投入品需求管理模块开发
This commit is contained in:
parent
ef57aabc55
commit
76d744faa5
@ -0,0 +1,81 @@
|
|||||||
|
import request from '@/utils/axios';
|
||||||
|
|
||||||
|
/* 种子种苗需求-列表 */
|
||||||
|
export function getSeedDemandRecords(params) {
|
||||||
|
return request('/inputGoods/supervise/provenance/page', {
|
||||||
|
params,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
/* 种子种苗需求-新增 */
|
||||||
|
export function seedDemandSave(data) {
|
||||||
|
return request('/inputGoods/supervise/provenance/save', {
|
||||||
|
method: 'POST',
|
||||||
|
data,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
/* 种子种苗需求-编辑 */
|
||||||
|
export function editSeedDemand(data) {
|
||||||
|
return request('/inputGoods/supervise/provenance/edit', {
|
||||||
|
data,
|
||||||
|
method: 'PUT',
|
||||||
|
});
|
||||||
|
}
|
||||||
|
/* 种子种苗需求-删除 */
|
||||||
|
export function delSeedDemand(ids) {
|
||||||
|
return request(`/inputGoods/supervise/provenance/delete/${ids}`);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 获取详情-通用,传入url和参数 */
|
||||||
|
export function getRowDetails({ url, id }) {
|
||||||
|
return request(`${url}${id}`);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 肥料需求-列表 */
|
||||||
|
export function getFertilizeDemandRecords(params) {
|
||||||
|
return request('/inputGoods/supervise/fertilize/page', {
|
||||||
|
params,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
/* 肥料需求-新增 */
|
||||||
|
export function fertilizeDemandSave(data) {
|
||||||
|
return request('/inputGoods/supervise/fertilize/save', {
|
||||||
|
method: 'POST',
|
||||||
|
data,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
/* 肥料需求-编辑 */
|
||||||
|
export function editFertilizeDemand(data) {
|
||||||
|
return request('/inputGoods/supervise/fertilize/edit', {
|
||||||
|
data,
|
||||||
|
method: 'PUT',
|
||||||
|
});
|
||||||
|
}
|
||||||
|
/* 肥料需求-删除 */
|
||||||
|
export function delFertilizeDemand(ids) {
|
||||||
|
return request(`/inputGoods/supervise/fertilize/delete/${ids}`);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 农药需求-列表 */
|
||||||
|
export function getPesticideDemandRecords(params) {
|
||||||
|
return request('/inputGoods/supervise/pesticide/page', {
|
||||||
|
params,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
/* 农药需求-新增 */
|
||||||
|
export function pesticideDemandSave(data) {
|
||||||
|
return request('/inputGoods/supervise/pesticide/save', {
|
||||||
|
method: 'POST',
|
||||||
|
data,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
/* 农药需求-编辑 */
|
||||||
|
export function editPesticideDemand(data) {
|
||||||
|
return request('/inputGoods/supervise/pesticide/edit', {
|
||||||
|
data,
|
||||||
|
method: 'PUT',
|
||||||
|
});
|
||||||
|
}
|
||||||
|
/* 农药需求-删除 */
|
||||||
|
export function delPesticideDemand(ids) {
|
||||||
|
return request(`/inputGoods/supervise/pesticide/delete/${ids}`);
|
||||||
|
}
|
||||||
Binary file not shown.
|
After Width: | Height: | Size: 349 KiB |
@ -154,10 +154,16 @@ const props = defineProps({
|
|||||||
type: Function,
|
type: Function,
|
||||||
default: () => 'custom-cell',
|
default: () => 'custom-cell',
|
||||||
},
|
},
|
||||||
|
// 设置表格行的主键,获取主键集合时用,默认主键为id
|
||||||
rowkey: {
|
rowkey: {
|
||||||
type: String,
|
type: String,
|
||||||
default: '',
|
default: '',
|
||||||
},
|
},
|
||||||
|
// 动态控制表格的最低高度,无数据时的最小值
|
||||||
|
minHeight: {
|
||||||
|
type: [String, Number],
|
||||||
|
default: '300px',
|
||||||
|
},
|
||||||
});
|
});
|
||||||
|
|
||||||
const emit = defineEmits(['update:currentPage', 'update:pageSize', 'page-change', 'selection-change']);
|
const emit = defineEmits(['update:currentPage', 'update:pageSize', 'page-change', 'selection-change']);
|
||||||
@ -240,6 +246,11 @@ onBeforeUnmount(() => {
|
|||||||
height: 100%; /* 关键:继承父容器高度 */
|
height: 100%; /* 关键:继承父容器高度 */
|
||||||
overflow: hidden; /* 防止内容溢出 */
|
overflow: hidden; /* 防止内容溢出 */
|
||||||
|
|
||||||
|
// 动态控制表格的最低高度,无数据时的最小值
|
||||||
|
:deep(.el-scrollbar__wrap) {
|
||||||
|
min-height: v-bind('props.minHeight');
|
||||||
|
}
|
||||||
|
|
||||||
/* 表格弹性布局 */
|
/* 表格弹性布局 */
|
||||||
:deep(.el-table) {
|
:deep(.el-table) {
|
||||||
flex: 1;
|
flex: 1;
|
||||||
|
|||||||
@ -63,6 +63,38 @@ const inputSuppliesRoutes = [
|
|||||||
// component: () => import('@/views/inputSuppliesManage/material/others/index.vue'),
|
// component: () => import('@/views/inputSuppliesManage/material/others/index.vue'),
|
||||||
// meta: { title: '其他投入品管理', icon: 'TakeawayBox' },
|
// meta: { title: '其他投入品管理', icon: 'TakeawayBox' },
|
||||||
// },
|
// },
|
||||||
|
{
|
||||||
|
path: '/sub-government-affairs-service/demandManage ',
|
||||||
|
name: 'demandManage',
|
||||||
|
redirect: '/sub-government-affairs-service/demandManage/seedRegulation',
|
||||||
|
meta: { title: '投入品需求管理', icon: 'Connection' },
|
||||||
|
children: [
|
||||||
|
{
|
||||||
|
path: '/sub-government-affairs-service/demandManage/demandOverview',
|
||||||
|
name: 'demandOverview',
|
||||||
|
component: () => import('@/views/inputSuppliesManage/demandManage/demandOverview.vue'),
|
||||||
|
meta: { title: '投入品需求概览', icon: '' },
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: '/sub-government-affairs-service/demandManage/seedDemand',
|
||||||
|
name: 'seedDemand',
|
||||||
|
component: () => import('@/views/inputSuppliesManage/demandManage/seedDemand.vue'),
|
||||||
|
meta: { title: '种子种苗需求', icon: '' },
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: '/sub-government-affairs-service/demandManage/fertilizerDemand',
|
||||||
|
name: 'fertilizerDemand',
|
||||||
|
component: () => import('@/views/inputSuppliesManage/demandManage/fertilizerDemand.vue'),
|
||||||
|
meta: { title: '肥料需求', icon: '' },
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: '/sub-government-affairs-service/demandManage/pesticideDemand',
|
||||||
|
name: 'pesticideDemand',
|
||||||
|
component: () => import('@/views/inputSuppliesManage/demandManage/pesticideDemand.vue'),
|
||||||
|
meta: { title: '农药需求', icon: '' },
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
{
|
{
|
||||||
path: '/sub-government-affairs-service/supervisionOfInputs ',
|
path: '/sub-government-affairs-service/supervisionOfInputs ',
|
||||||
name: 'supervisionOfInputs',
|
name: 'supervisionOfInputs',
|
||||||
|
|||||||
@ -85,6 +85,17 @@
|
|||||||
padding-right: 20px;
|
padding-right: 20px;
|
||||||
background-color: #fff;
|
background-color: #fff;
|
||||||
}
|
}
|
||||||
|
.table-statistics {
|
||||||
|
padding: 10px 20px;
|
||||||
|
margin: 20px 20px 0 20px;
|
||||||
|
background-color: #e6f7ff;
|
||||||
|
border: 1px solid #bae7ff;
|
||||||
|
border-radius: 6px;
|
||||||
|
font-size: 14px;
|
||||||
|
span {
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
}
|
||||||
.table-cont {
|
.table-cont {
|
||||||
padding: 10px 20px;
|
padding: 10px 20px;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
@ -309,15 +320,22 @@
|
|||||||
}
|
}
|
||||||
// 新增商品页面-结束
|
// 新增商品页面-结束
|
||||||
|
|
||||||
// 弹性布局-左对齐-上对齐
|
// 弹性布局-左对齐-上对齐(通用)
|
||||||
.flex-left-top {
|
.flex-left-top {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: row;
|
flex-direction: row;
|
||||||
justify-content: flex-start;
|
justify-content: flex-start;
|
||||||
align-items: flex-start;
|
align-items: flex-start;
|
||||||
}
|
}
|
||||||
|
// 弹性布局-左对齐-上对齐(通用)
|
||||||
|
.flex-left-center {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
justify-content: flex-start;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
// 溢出隐藏
|
// 溢出隐藏(通用)
|
||||||
.text-ellipsis {
|
.text-ellipsis {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
@ -325,6 +343,10 @@
|
|||||||
text-overflow: ellipsis;
|
text-overflow: ellipsis;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.mr-20 {
|
||||||
|
margin-right: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
// 弹窗表单样式-子元素一行2个列
|
// 弹窗表单样式-子元素一行2个列
|
||||||
.dialog-form-container {
|
.dialog-form-container {
|
||||||
.dialog-form-title {
|
.dialog-form-title {
|
||||||
|
|||||||
@ -0,0 +1,15 @@
|
|||||||
|
<template>
|
||||||
|
<div class="custom-page" :style="`background-image: url(${getAssetsFile('images/input/demand-overview.png')})`"></div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import { getAssetsFile } from '@/utils';
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped lang="scss">
|
||||||
|
.custom-page {
|
||||||
|
height: calc(100vh - 150px);
|
||||||
|
background-size: cover;
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -0,0 +1,423 @@
|
|||||||
|
<template>
|
||||||
|
<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-cont">
|
||||||
|
<tableComponent
|
||||||
|
:table-data="tableData"
|
||||||
|
:columns="columns"
|
||||||
|
:show-selection="false"
|
||||||
|
:loading="tableLoading"
|
||||||
|
:total="tableTotal"
|
||||||
|
:current-page="formInline.current"
|
||||||
|
:page-size="formInline.size"
|
||||||
|
:show-sort="false"
|
||||||
|
@page-change="handlePaginationChange"
|
||||||
|
>
|
||||||
|
<!-- 自定义-操作 -->
|
||||||
|
<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>
|
||||||
|
<el-dialog v-model="dialogFormVisible" :title="dialogTitle" width="800" :close-on-click-modal="false">
|
||||||
|
<el-form
|
||||||
|
ref="dialogRef"
|
||||||
|
:model="dialogForm"
|
||||||
|
:inline="true"
|
||||||
|
:label-width="'120'"
|
||||||
|
:rules="dialogFormRules"
|
||||||
|
:disabled="formDisabled"
|
||||||
|
class="dialog-form-container"
|
||||||
|
>
|
||||||
|
<el-form-item label="种子种苗名称" prop="seedName" class="dialog-form-item">
|
||||||
|
<el-input v-model="dialogForm.seedName" clearable placeholder="请输入种子种苗名称" />
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="品种名称" prop="varietyName" class="dialog-form-item">
|
||||||
|
<el-input v-model="dialogForm.varietyName" clearable placeholder="请输入品种名称" />
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="品牌" prop="brand" class="dialog-form-item">
|
||||||
|
<el-input v-model="dialogForm.brand" clearable placeholder="请输入品牌" />
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="生产厂家" prop="manufacturer" class="dialog-form-item">
|
||||||
|
<el-input v-model="dialogForm.manufacturer" clearable placeholder="请输入生产厂家" />
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="蔬菜种苗" prop="classifyId" class="dialog-form-item">
|
||||||
|
<el-cascader
|
||||||
|
v-model="dialogForm.classifyId"
|
||||||
|
:options="seedTypeDialogList"
|
||||||
|
:props="cascaderProps"
|
||||||
|
placeholder="请选择"
|
||||||
|
@change="handleCascaderChange"
|
||||||
|
/>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="产品规格" prop="productUnit" class="dialog-form-item">
|
||||||
|
<el-input v-model="dialogForm.productUnit" clearable placeholder="请输入产品规格" />
|
||||||
|
</el-form-item>
|
||||||
|
|
||||||
|
<div style="display: flex">
|
||||||
|
<div style="width: 50%; display: inline-block">
|
||||||
|
<el-form-item label="种子种苗主图" prop="photoUrl" class="dialog-form-item" style="width: 100%">
|
||||||
|
<FileUploader v-model="dialogForm.photoUrl" :limit="1" />
|
||||||
|
</el-form-item>
|
||||||
|
</div>
|
||||||
|
<div style="width: 50%; display: inline-block">
|
||||||
|
<el-form-item label="种子种苗详情图" prop="photoUrlDetail" class="dialog-form-item" style="width: 100%">
|
||||||
|
<FileUploader v-model="dialogForm.photoUrlDetail" :limit="1" />
|
||||||
|
</el-form-item>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</el-form>
|
||||||
|
<template #footer>
|
||||||
|
<div class="dialog-footer">
|
||||||
|
<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>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import { ref, reactive, computed, onMounted, onBeforeUnmount, nextTick } from 'vue';
|
||||||
|
import tableComponent from '@/components/tableComponent.vue';
|
||||||
|
import { ElMessage } from 'element-plus';
|
||||||
|
import inputSuppliesApi from '@/apis/inputSuppliesApi';
|
||||||
|
const { getMaterailTypes } = inputSuppliesApi;
|
||||||
|
import {
|
||||||
|
getFertilizeDemandRecords,
|
||||||
|
fertilizeDemandSave,
|
||||||
|
editFertilizeDemand,
|
||||||
|
delFertilizeDemand,
|
||||||
|
getRowDetails,
|
||||||
|
} from '@/apis/inputSuppliesApi/demandManage';
|
||||||
|
import { useApp } from '@/hooks';
|
||||||
|
const app = useApp();
|
||||||
|
|
||||||
|
// 查询条件
|
||||||
|
const formInline = reactive({
|
||||||
|
name: '',
|
||||||
|
seedTypeId: '',
|
||||||
|
current: 1,
|
||||||
|
size: 10,
|
||||||
|
});
|
||||||
|
const searchForm = ref(null);
|
||||||
|
const onSubmit = () => {
|
||||||
|
formInline.current = 1;
|
||||||
|
loadData();
|
||||||
|
};
|
||||||
|
const resetForm = () => {
|
||||||
|
searchForm.value.resetFields();
|
||||||
|
};
|
||||||
|
|
||||||
|
// 表格数据
|
||||||
|
const tableData = ref([]);
|
||||||
|
const selectedIds = ref([]);
|
||||||
|
const tableLoading = ref(false);
|
||||||
|
const tableTotal = ref(0);
|
||||||
|
const columns = ref([
|
||||||
|
{ prop: 'regionCode', label: '行政区域编码' },
|
||||||
|
{ prop: 'regionName', label: '行政区域名称' },
|
||||||
|
{ prop: 'gridId', label: '网格编码' },
|
||||||
|
{ prop: 'gridName', label: '网格名称' },
|
||||||
|
{ prop: 'landId', label: '地块编码' },
|
||||||
|
{ prop: 'landName', label: '地块名称' },
|
||||||
|
{ prop: 'name', label: '姓名' },
|
||||||
|
{ prop: 'phone', label: '联系方式' },
|
||||||
|
{ prop: 'fertilizeId', label: '化肥编号' },
|
||||||
|
{ prop: 'fertilizeName', label: '化肥名称' },
|
||||||
|
// { prop: 'action', label: '操作', slotName: 'action', width: 230, fixed: 'right' },
|
||||||
|
]);
|
||||||
|
const handlePaginationChange = ({ page, pageSize }) => {
|
||||||
|
formInline.current = page;
|
||||||
|
formInline.size = pageSize;
|
||||||
|
loadData();
|
||||||
|
};
|
||||||
|
const loadData = async () => {
|
||||||
|
tableLoading.value = true;
|
||||||
|
try {
|
||||||
|
let response = await getFertilizeDemandRecords(formInline);
|
||||||
|
tableLoading.value = false;
|
||||||
|
if (response.code == 200) {
|
||||||
|
tableData.value = response.data.records;
|
||||||
|
tableTotal.value = response.data.total;
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
tableLoading.value = false;
|
||||||
|
console.error(error);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
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 dialogForm = reactive({
|
||||||
|
id: '',
|
||||||
|
seedName: '', //种子种苗名称
|
||||||
|
varietyName: '', //品种名称
|
||||||
|
brand: '', //品牌
|
||||||
|
manufacturer: '', //生产厂家
|
||||||
|
classifyId: '', //蔬菜种苗id
|
||||||
|
classifyName: '', //蔬菜种苗名称
|
||||||
|
productSpecification: '', //产品规格(number)
|
||||||
|
productUnit: '', //产品规格单位
|
||||||
|
productAttributes: '', //自定义商品属性
|
||||||
|
photoUrl: '', //种子种苗主图
|
||||||
|
photoUrlDetail: '', //种子种苗详情图
|
||||||
|
});
|
||||||
|
const dialogFormRules = ref({
|
||||||
|
seedName: [{ required: true, message: '请输入种子种苗名称', trigger: 'blur' }],
|
||||||
|
varietyName: [{ required: true, message: '请输入品种名称', trigger: 'blur' }],
|
||||||
|
brand: [{ required: true, message: '请输入品牌', trigger: 'blur' }],
|
||||||
|
manufacturer: [{ required: true, message: '请输入品牌', trigger: 'blur' }],
|
||||||
|
classifyId: [
|
||||||
|
{
|
||||||
|
required: true,
|
||||||
|
message: '请选择蔬菜种苗',
|
||||||
|
trigger: ['change', 'blur'],
|
||||||
|
},
|
||||||
|
],
|
||||||
|
productUnit: [{ required: true, message: '请输入产品规格', trigger: 'blur' }],
|
||||||
|
});
|
||||||
|
|
||||||
|
const addItem = async () => {
|
||||||
|
ElMessage.success('点击新增!');
|
||||||
|
// restDialogForm();
|
||||||
|
// dialogTitle.value = '新增';
|
||||||
|
// formDisabled.value = false;
|
||||||
|
// dialogFormVisible.value = true;
|
||||||
|
};
|
||||||
|
const seeDetails = async (row) => {
|
||||||
|
ElMessage.success('点击查看详情!');
|
||||||
|
// dialogTitle.value = '详情';
|
||||||
|
// setDialogForm(row);
|
||||||
|
// formDisabled.value = true;
|
||||||
|
// dialogFormVisible.value = true;
|
||||||
|
};
|
||||||
|
const handleEdit = (row) => {
|
||||||
|
ElMessage.success('点击编辑!');
|
||||||
|
// console.log('要编辑的行: ', row);
|
||||||
|
// dialogTitle.value = '编辑';
|
||||||
|
// setDialogForm(row);
|
||||||
|
// formDisabled.value = false;
|
||||||
|
// dialogFormVisible.value = true;
|
||||||
|
};
|
||||||
|
const setDialogForm = (row) => {
|
||||||
|
dialogForm.id = row.id;
|
||||||
|
dialogForm.seedName = row.seedName;
|
||||||
|
dialogForm.varietyName = row.varietyName;
|
||||||
|
dialogForm.brand = row.brand;
|
||||||
|
dialogForm.manufacturer = row.manufacturer;
|
||||||
|
dialogForm.classifyId = row.classifyId;
|
||||||
|
dialogForm.classifyName = row.classifyName;
|
||||||
|
dialogForm.productSpecification = row.productSpecification;
|
||||||
|
dialogForm.productUnit = row.productUnit;
|
||||||
|
dialogForm.productAttributes = row.productAttributes;
|
||||||
|
dialogForm.photoUrl = row.photoUrl;
|
||||||
|
dialogForm.photoUrlDetail = row.photoUrlDetail;
|
||||||
|
};
|
||||||
|
const handleDelete = (row) => {
|
||||||
|
app
|
||||||
|
.$confirm(`删除后信息将不可查看,确认要删除吗?`, '确定删除', {
|
||||||
|
confirmButtonText: '确定',
|
||||||
|
cancelButtonText: '取消',
|
||||||
|
type: 'warning',
|
||||||
|
})
|
||||||
|
.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 delFertilizeDemand(ids);
|
||||||
|
return res;
|
||||||
|
} catch (error) {
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
const onSaveCategory = () => {
|
||||||
|
console.log(dialogForm);
|
||||||
|
dialogRef.value.validate(async (valid, fields) => {
|
||||||
|
if (valid) {
|
||||||
|
try {
|
||||||
|
let param = { ...dialogForm };
|
||||||
|
param.classifyId = dialogForm.classifyId.join(',');
|
||||||
|
param.classifyName = dialogForm.classifyName.join(',');
|
||||||
|
console.log(param);
|
||||||
|
let response;
|
||||||
|
if (dialogTitle.value == '新增') {
|
||||||
|
response = await fertilizeDemandSave(param);
|
||||||
|
} else {
|
||||||
|
response = await editFertilizeDemand(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, {
|
||||||
|
id: '',
|
||||||
|
seedName: '', //种子种苗名称
|
||||||
|
varietyName: '', //品种名称
|
||||||
|
brand: '', //品牌
|
||||||
|
manufacturer: '', //生产厂家
|
||||||
|
classifyId: '', //蔬菜种苗id
|
||||||
|
classifyName: '', //蔬菜种苗名称
|
||||||
|
productSpecification: '', //产品规格(number)
|
||||||
|
productUnit: '', //产品规格单位
|
||||||
|
productAttributes: '', //自定义商品属性
|
||||||
|
photoUrl: '', //种子种苗主图
|
||||||
|
photoUrlDetail: '', //种子种苗详情图
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
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 cascaderProps = ref({
|
||||||
|
label: 'dataName', // 选项标签字段名
|
||||||
|
value: 'id', // 选项值字段名
|
||||||
|
children: 'children', // 子选项字段名
|
||||||
|
emitPath: true,
|
||||||
|
expandTrigger: 'hover',
|
||||||
|
});
|
||||||
|
const handleCascaderChange = () => {
|
||||||
|
const selectedNames = getSelectedNames(dialogForm.classifyId);
|
||||||
|
console.log('对应的名称:', selectedNames); // 例如: ['花草类种子', '具体种子名称']
|
||||||
|
// 如果需要,可以将名称也保存到表单数据中
|
||||||
|
dialogForm.classifyName = selectedNames;
|
||||||
|
};
|
||||||
|
const getSelectedNames = (ids) => {
|
||||||
|
if (!ids || !ids.length) return [];
|
||||||
|
|
||||||
|
let names = [];
|
||||||
|
let currentLevel = seedTypeDialogList.value;
|
||||||
|
|
||||||
|
for (const id of ids) {
|
||||||
|
const foundItem = currentLevel.find((item) => item.id === id);
|
||||||
|
if (!foundItem) break;
|
||||||
|
|
||||||
|
names.push(foundItem.dataName);
|
||||||
|
currentLevel = foundItem.children || [];
|
||||||
|
}
|
||||||
|
|
||||||
|
return names;
|
||||||
|
};
|
||||||
|
|
||||||
|
onMounted(() => {
|
||||||
|
onSubmit();
|
||||||
|
getSeedTypeList();
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
<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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -0,0 +1,421 @@
|
|||||||
|
<template>
|
||||||
|
<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-cont">
|
||||||
|
<tableComponent
|
||||||
|
:table-data="tableData"
|
||||||
|
:columns="columns"
|
||||||
|
:show-selection="false"
|
||||||
|
:loading="tableLoading"
|
||||||
|
:total="tableTotal"
|
||||||
|
:current-page="formInline.current"
|
||||||
|
:page-size="formInline.size"
|
||||||
|
:show-sort="false"
|
||||||
|
@page-change="handlePaginationChange"
|
||||||
|
>
|
||||||
|
<!-- 自定义-操作 -->
|
||||||
|
<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>
|
||||||
|
<el-dialog v-model="dialogFormVisible" :title="dialogTitle" width="800" :close-on-click-modal="false">
|
||||||
|
<el-form
|
||||||
|
ref="dialogRef"
|
||||||
|
:model="dialogForm"
|
||||||
|
:inline="true"
|
||||||
|
:label-width="'120'"
|
||||||
|
:rules="dialogFormRules"
|
||||||
|
:disabled="formDisabled"
|
||||||
|
class="dialog-form-container"
|
||||||
|
>
|
||||||
|
<el-form-item label="种子种苗名称" prop="seedName" class="dialog-form-item">
|
||||||
|
<el-input v-model="dialogForm.seedName" clearable placeholder="请输入种子种苗名称" />
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="品种名称" prop="varietyName" class="dialog-form-item">
|
||||||
|
<el-input v-model="dialogForm.varietyName" clearable placeholder="请输入品种名称" />
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="品牌" prop="brand" class="dialog-form-item">
|
||||||
|
<el-input v-model="dialogForm.brand" clearable placeholder="请输入品牌" />
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="生产厂家" prop="manufacturer" class="dialog-form-item">
|
||||||
|
<el-input v-model="dialogForm.manufacturer" clearable placeholder="请输入生产厂家" />
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="蔬菜种苗" prop="classifyId" class="dialog-form-item">
|
||||||
|
<el-cascader
|
||||||
|
v-model="dialogForm.classifyId"
|
||||||
|
:options="seedTypeDialogList"
|
||||||
|
:props="cascaderProps"
|
||||||
|
placeholder="请选择"
|
||||||
|
@change="handleCascaderChange"
|
||||||
|
/>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="产品规格" prop="productUnit" class="dialog-form-item">
|
||||||
|
<el-input v-model="dialogForm.productUnit" clearable placeholder="请输入产品规格" />
|
||||||
|
</el-form-item>
|
||||||
|
|
||||||
|
<div style="display: flex">
|
||||||
|
<div style="width: 50%; display: inline-block">
|
||||||
|
<el-form-item label="种子种苗主图" prop="photoUrl" class="dialog-form-item" style="width: 100%">
|
||||||
|
<FileUploader v-model="dialogForm.photoUrl" :limit="1" />
|
||||||
|
</el-form-item>
|
||||||
|
</div>
|
||||||
|
<div style="width: 50%; display: inline-block">
|
||||||
|
<el-form-item label="种子种苗详情图" prop="photoUrlDetail" class="dialog-form-item" style="width: 100%">
|
||||||
|
<FileUploader v-model="dialogForm.photoUrlDetail" :limit="1" />
|
||||||
|
</el-form-item>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</el-form>
|
||||||
|
<template #footer>
|
||||||
|
<div class="dialog-footer">
|
||||||
|
<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>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import { ref, reactive, computed, onMounted, onBeforeUnmount, nextTick } from 'vue';
|
||||||
|
import tableComponent from '@/components/tableComponent.vue';
|
||||||
|
import { ElMessage } from 'element-plus';
|
||||||
|
import inputSuppliesApi from '@/apis/inputSuppliesApi';
|
||||||
|
const { getMaterailTypes } = inputSuppliesApi;
|
||||||
|
import {
|
||||||
|
getPesticideDemandRecords,
|
||||||
|
pesticideDemandSave,
|
||||||
|
editPesticideDemand,
|
||||||
|
delPesticideDemand,
|
||||||
|
getRowDetails,
|
||||||
|
} from '@/apis/inputSuppliesApi/demandManage';
|
||||||
|
import { useApp } from '@/hooks';
|
||||||
|
const app = useApp();
|
||||||
|
|
||||||
|
// 查询条件
|
||||||
|
const formInline = reactive({
|
||||||
|
name: '',
|
||||||
|
seedTypeId: '',
|
||||||
|
current: 1,
|
||||||
|
size: 10,
|
||||||
|
});
|
||||||
|
const searchForm = ref(null);
|
||||||
|
const onSubmit = () => {
|
||||||
|
formInline.current = 1;
|
||||||
|
loadData();
|
||||||
|
};
|
||||||
|
const resetForm = () => {
|
||||||
|
searchForm.value.resetFields();
|
||||||
|
};
|
||||||
|
|
||||||
|
// 表格数据
|
||||||
|
const tableData = ref([]);
|
||||||
|
const selectedIds = ref([]);
|
||||||
|
const tableLoading = ref(false);
|
||||||
|
const tableTotal = ref(0);
|
||||||
|
const columns = ref([
|
||||||
|
{ prop: 'name', label: '姓名' },
|
||||||
|
{ prop: 'phone', label: '联系方式' },
|
||||||
|
{ prop: 'landName', label: '用药地块' },
|
||||||
|
{ prop: 'landId', label: '地块编码' },
|
||||||
|
{ prop: 'detectionTime', label: '检测时间' },
|
||||||
|
{ prop: 'detectionResult', label: '检测结果' },
|
||||||
|
{ prop: 'detectionUnit', label: '检测单位' },
|
||||||
|
{ prop: 'isUpload', label: '检测报告(是否上传)' },
|
||||||
|
// { prop: 'action', label: '操作', slotName: 'action', width: 230, fixed: 'right' },
|
||||||
|
]);
|
||||||
|
const handlePaginationChange = ({ page, pageSize }) => {
|
||||||
|
formInline.current = page;
|
||||||
|
formInline.size = pageSize;
|
||||||
|
loadData();
|
||||||
|
};
|
||||||
|
const loadData = async () => {
|
||||||
|
tableLoading.value = true;
|
||||||
|
try {
|
||||||
|
let response = await getPesticideDemandRecords(formInline);
|
||||||
|
tableLoading.value = false;
|
||||||
|
if (response.code == 200) {
|
||||||
|
tableData.value = response.data.records;
|
||||||
|
tableTotal.value = response.data.total;
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
tableLoading.value = false;
|
||||||
|
console.error(error);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
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 dialogForm = reactive({
|
||||||
|
id: '',
|
||||||
|
seedName: '', //种子种苗名称
|
||||||
|
varietyName: '', //品种名称
|
||||||
|
brand: '', //品牌
|
||||||
|
manufacturer: '', //生产厂家
|
||||||
|
classifyId: '', //蔬菜种苗id
|
||||||
|
classifyName: '', //蔬菜种苗名称
|
||||||
|
productSpecification: '', //产品规格(number)
|
||||||
|
productUnit: '', //产品规格单位
|
||||||
|
productAttributes: '', //自定义商品属性
|
||||||
|
photoUrl: '', //种子种苗主图
|
||||||
|
photoUrlDetail: '', //种子种苗详情图
|
||||||
|
});
|
||||||
|
const dialogFormRules = ref({
|
||||||
|
seedName: [{ required: true, message: '请输入种子种苗名称', trigger: 'blur' }],
|
||||||
|
varietyName: [{ required: true, message: '请输入品种名称', trigger: 'blur' }],
|
||||||
|
brand: [{ required: true, message: '请输入品牌', trigger: 'blur' }],
|
||||||
|
manufacturer: [{ required: true, message: '请输入品牌', trigger: 'blur' }],
|
||||||
|
classifyId: [
|
||||||
|
{
|
||||||
|
required: true,
|
||||||
|
message: '请选择蔬菜种苗',
|
||||||
|
trigger: ['change', 'blur'],
|
||||||
|
},
|
||||||
|
],
|
||||||
|
productUnit: [{ required: true, message: '请输入产品规格', trigger: 'blur' }],
|
||||||
|
});
|
||||||
|
|
||||||
|
const addItem = async () => {
|
||||||
|
ElMessage.success('点击新增!');
|
||||||
|
// restDialogForm();
|
||||||
|
// dialogTitle.value = '新增';
|
||||||
|
// formDisabled.value = false;
|
||||||
|
// dialogFormVisible.value = true;
|
||||||
|
};
|
||||||
|
const seeDetails = async (row) => {
|
||||||
|
ElMessage.success('点击查看详情!');
|
||||||
|
// dialogTitle.value = '详情';
|
||||||
|
// setDialogForm(row);
|
||||||
|
// formDisabled.value = true;
|
||||||
|
// dialogFormVisible.value = true;
|
||||||
|
};
|
||||||
|
const handleEdit = (row) => {
|
||||||
|
ElMessage.success('点击编辑!');
|
||||||
|
console.log('要编辑的行: ', row);
|
||||||
|
// dialogTitle.value = '编辑';
|
||||||
|
// setDialogForm(row);
|
||||||
|
// formDisabled.value = false;
|
||||||
|
// dialogFormVisible.value = true;
|
||||||
|
};
|
||||||
|
const setDialogForm = (row) => {
|
||||||
|
dialogForm.id = row.id;
|
||||||
|
dialogForm.seedName = row.seedName;
|
||||||
|
dialogForm.varietyName = row.varietyName;
|
||||||
|
dialogForm.brand = row.brand;
|
||||||
|
dialogForm.manufacturer = row.manufacturer;
|
||||||
|
dialogForm.classifyId = row.classifyId;
|
||||||
|
dialogForm.classifyName = row.classifyName;
|
||||||
|
dialogForm.productSpecification = row.productSpecification;
|
||||||
|
dialogForm.productUnit = row.productUnit;
|
||||||
|
dialogForm.productAttributes = row.productAttributes;
|
||||||
|
dialogForm.photoUrl = row.photoUrl;
|
||||||
|
dialogForm.photoUrlDetail = row.photoUrlDetail;
|
||||||
|
};
|
||||||
|
const handleDelete = (row) => {
|
||||||
|
app
|
||||||
|
.$confirm(`删除后信息将不可查看,确认要删除吗?`, '确定删除', {
|
||||||
|
confirmButtonText: '确定',
|
||||||
|
cancelButtonText: '取消',
|
||||||
|
type: 'warning',
|
||||||
|
})
|
||||||
|
.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 delPesticideDemand(ids);
|
||||||
|
return res;
|
||||||
|
} catch (error) {
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
const onSaveCategory = () => {
|
||||||
|
console.log(dialogForm);
|
||||||
|
dialogRef.value.validate(async (valid, fields) => {
|
||||||
|
if (valid) {
|
||||||
|
try {
|
||||||
|
let param = { ...dialogForm };
|
||||||
|
param.classifyId = dialogForm.classifyId.join(',');
|
||||||
|
param.classifyName = dialogForm.classifyName.join(',');
|
||||||
|
console.log(param);
|
||||||
|
let response;
|
||||||
|
if (dialogTitle.value == '新增') {
|
||||||
|
response = await pesticideDemandSave(param);
|
||||||
|
} else {
|
||||||
|
response = await editPesticideDemand(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, {
|
||||||
|
id: '',
|
||||||
|
seedName: '', //种子种苗名称
|
||||||
|
varietyName: '', //品种名称
|
||||||
|
brand: '', //品牌
|
||||||
|
manufacturer: '', //生产厂家
|
||||||
|
classifyId: '', //蔬菜种苗id
|
||||||
|
classifyName: '', //蔬菜种苗名称
|
||||||
|
productSpecification: '', //产品规格(number)
|
||||||
|
productUnit: '', //产品规格单位
|
||||||
|
productAttributes: '', //自定义商品属性
|
||||||
|
photoUrl: '', //种子种苗主图
|
||||||
|
photoUrlDetail: '', //种子种苗详情图
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
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 cascaderProps = ref({
|
||||||
|
label: 'dataName', // 选项标签字段名
|
||||||
|
value: 'id', // 选项值字段名
|
||||||
|
children: 'children', // 子选项字段名
|
||||||
|
emitPath: true,
|
||||||
|
expandTrigger: 'hover',
|
||||||
|
});
|
||||||
|
const handleCascaderChange = () => {
|
||||||
|
const selectedNames = getSelectedNames(dialogForm.classifyId);
|
||||||
|
console.log('对应的名称:', selectedNames); // 例如: ['花草类种子', '具体种子名称']
|
||||||
|
// 如果需要,可以将名称也保存到表单数据中
|
||||||
|
dialogForm.classifyName = selectedNames;
|
||||||
|
};
|
||||||
|
const getSelectedNames = (ids) => {
|
||||||
|
if (!ids || !ids.length) return [];
|
||||||
|
|
||||||
|
let names = [];
|
||||||
|
let currentLevel = seedTypeDialogList.value;
|
||||||
|
|
||||||
|
for (const id of ids) {
|
||||||
|
const foundItem = currentLevel.find((item) => item.id === id);
|
||||||
|
if (!foundItem) break;
|
||||||
|
|
||||||
|
names.push(foundItem.dataName);
|
||||||
|
currentLevel = foundItem.children || [];
|
||||||
|
}
|
||||||
|
|
||||||
|
return names;
|
||||||
|
};
|
||||||
|
|
||||||
|
onMounted(() => {
|
||||||
|
onSubmit();
|
||||||
|
getSeedTypeList();
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
<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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -0,0 +1,481 @@
|
|||||||
|
<template>
|
||||||
|
<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="" style="margin-left: -15px">
|
||||||
|
<AreaCascader
|
||||||
|
v-model:value="areaFormData"
|
||||||
|
v-model:region-code="formInline.regionCode"
|
||||||
|
v-model:grid-id="formInline.gridId"
|
||||||
|
label="行政区域-网格"
|
||||||
|
:width="500"
|
||||||
|
/>
|
||||||
|
</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.seedName" />
|
||||||
|
</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">{{ totalSeed }}</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>
|
||||||
|
<el-dialog v-model="dialogFormVisible" :title="dialogTitle" width="800" :close-on-click-modal="false">
|
||||||
|
<el-form :inline="true" :label-width="'auto'">
|
||||||
|
<el-form-item label="地块编号" prop="seedName">
|
||||||
|
<el-input v-model="dialogForm.id" placeholder="请输入地块编号" clearable />
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="">
|
||||||
|
<el-button type="primary" icon="Search" @click="getDetails">查询</el-button>
|
||||||
|
</el-form-item>
|
||||||
|
</el-form>
|
||||||
|
<el-descriptions title="地块信息" border>
|
||||||
|
<el-descriptions-item label="地块">kooriookami</el-descriptions-item>
|
||||||
|
<el-descriptions-item label="所属行政区">18100000000</el-descriptions-item>
|
||||||
|
<el-descriptions-item label="所属网格">Suzhou</el-descriptions-item>
|
||||||
|
</el-descriptions>
|
||||||
|
<el-descriptions title="经营主体信息" border>
|
||||||
|
<el-descriptions-item label="姓名">kooriookami</el-descriptions-item>
|
||||||
|
<el-descriptions-item label="联系方式">18100000000</el-descriptions-item>
|
||||||
|
</el-descriptions>
|
||||||
|
<el-form
|
||||||
|
ref="dialogRef"
|
||||||
|
:model="dialogForm"
|
||||||
|
:inline="true"
|
||||||
|
:label-width="'80'"
|
||||||
|
:rules="dialogFormRules"
|
||||||
|
:disabled="formDisabled"
|
||||||
|
class="dialog-form-container"
|
||||||
|
>
|
||||||
|
<div class="dialog-form-title">农药用药详情</div>
|
||||||
|
<el-form-item label="种子编号" prop="name" class="dialog-form-item">
|
||||||
|
<el-input v-model="dialogForm.name" clearable placeholder="请输入姓名" />
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="种子名称" prop="phone" class="dialog-form-item">
|
||||||
|
<el-input v-model="dialogForm.phone" clearable placeholder="请输入联系方式" />
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="使用量" required prop="useNumber" class="dialog-form-item">
|
||||||
|
<el-input-number v-model="dialogForm.useNumber" :min="1" :controls="false" placeholder="请输入用药量" style="width: 150px" />
|
||||||
|
<el-select v-model="dialogForm.useUnit" placeholder="请选择" style="width: 80px">
|
||||||
|
<el-option v-for="el in unitList" :key="el.unit" :value="el.unit" :label="el.unit" />
|
||||||
|
</el-select>
|
||||||
|
</el-form-item>
|
||||||
|
<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>
|
||||||
|
<template #footer>
|
||||||
|
<div class="dialog-footer">
|
||||||
|
<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>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import { ref, reactive, computed, onMounted, onBeforeUnmount, nextTick } from 'vue';
|
||||||
|
import tableComponent from '@/components/tableComponent.vue';
|
||||||
|
import { ElMessage } from 'element-plus';
|
||||||
|
import inputSuppliesApi from '@/apis/inputSuppliesApi';
|
||||||
|
const { getMaterailTypes } = inputSuppliesApi;
|
||||||
|
import { getSeedDemandRecords, seedDemandSave, editSeedDemand, delSeedDemand, getRowDetails } from '@/apis/inputSuppliesApi/demandManage';
|
||||||
|
import { useApp } from '@/hooks';
|
||||||
|
const app = useApp();
|
||||||
|
import Mock from 'mockjs';
|
||||||
|
|
||||||
|
// 查询条件
|
||||||
|
const formInline = reactive({
|
||||||
|
regionCode: '',
|
||||||
|
regionName: '',
|
||||||
|
gridId: '',
|
||||||
|
gridName: '',
|
||||||
|
seedTypeId: '',
|
||||||
|
current: 1,
|
||||||
|
size: 10,
|
||||||
|
});
|
||||||
|
const searchForm = ref(null);
|
||||||
|
const onSubmit = () => {
|
||||||
|
console.log(formInline);
|
||||||
|
formInline.current = 1;
|
||||||
|
loadData();
|
||||||
|
};
|
||||||
|
const resetForm = () => {
|
||||||
|
searchForm.value.resetFields();
|
||||||
|
};
|
||||||
|
|
||||||
|
// 表格数据
|
||||||
|
const tableData = ref([]);
|
||||||
|
const selectedIds = ref([]);
|
||||||
|
const selectedRows = ref([]);
|
||||||
|
const tableLoading = ref(false);
|
||||||
|
const tableTotal = ref(0);
|
||||||
|
const columns = ref([
|
||||||
|
{ prop: 'regionCode', label: '行政区域编码' },
|
||||||
|
{ prop: 'regionName', label: '行政区域名称' },
|
||||||
|
{ prop: 'gridId', label: '网格编码' },
|
||||||
|
{ prop: 'gridName', label: '网格名称' },
|
||||||
|
{ prop: 'landId', label: '地块编码' },
|
||||||
|
{ prop: 'landName', label: '地块名称' },
|
||||||
|
{ prop: 'extent', label: '面积(亩)' },
|
||||||
|
{ prop: 'provenanceId', label: '种子种苗编号' },
|
||||||
|
{ prop: 'provenanceName', label: '种子种苗名称' },
|
||||||
|
{ prop: 'useUnit', label: '规格' },
|
||||||
|
{ prop: 'useNumber', label: '需求量(件)' },
|
||||||
|
{ prop: 'useTime', label: '需求时间' },
|
||||||
|
{ prop: 'businessEntityCode', label: '生产经营主体编码' },
|
||||||
|
{ prop: 'businessEntityName', label: '生产经营主体名称' },
|
||||||
|
// { prop: 'action', label: '操作', slotName: 'action', width: 230, fixed: 'right' },
|
||||||
|
]);
|
||||||
|
const handlePaginationChange = ({ page, pageSize }) => {
|
||||||
|
formInline.current = page;
|
||||||
|
formInline.size = pageSize;
|
||||||
|
loadData();
|
||||||
|
};
|
||||||
|
let landNums = ref(0);
|
||||||
|
let totalArea = computed(() => {
|
||||||
|
return selectedRows.value.reduce((sum, item) => sum + item.extent, 0);
|
||||||
|
});
|
||||||
|
let totalSeed = computed(() => {
|
||||||
|
return selectedRows.value.reduce((sum, item) => sum + item.useNumber, 0);
|
||||||
|
});
|
||||||
|
const handleSelectionChange = (selection, keys) => {
|
||||||
|
// console.log(selection, keys);
|
||||||
|
selectedRows.value = selection;
|
||||||
|
landNums.value = selection.length;
|
||||||
|
};
|
||||||
|
const extentArr = Mock.mock({
|
||||||
|
'list|1-10': [{ extent: () => Mock.Random.float(100, 200, 2, 2) }],
|
||||||
|
}).list;
|
||||||
|
const loadData = async () => {
|
||||||
|
tableLoading.value = true;
|
||||||
|
try {
|
||||||
|
let response = await getSeedDemandRecords(formInline);
|
||||||
|
tableLoading.value = false;
|
||||||
|
if (response.code == 200) {
|
||||||
|
tableData.value = response.data.records;
|
||||||
|
tableTotal.value = response.data.total;
|
||||||
|
|
||||||
|
// 没有接口,添加模拟数据
|
||||||
|
tableData.value.forEach((el, index) => {
|
||||||
|
el.extent = extentArr[index].extent;
|
||||||
|
});
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
tableLoading.value = false;
|
||||||
|
console.error(error);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
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 dialogForm = reactive({
|
||||||
|
id: '',
|
||||||
|
seedName: '', //种子种苗名称
|
||||||
|
varietyName: '', //品种名称
|
||||||
|
brand: '', //品牌
|
||||||
|
manufacturer: '', //生产厂家
|
||||||
|
classifyId: '', //蔬菜种苗id
|
||||||
|
classifyName: '', //蔬菜种苗名称
|
||||||
|
productSpecification: '', //产品规格(number)
|
||||||
|
productUnit: '', //产品规格单位
|
||||||
|
productAttributes: '', //自定义商品属性
|
||||||
|
photoUrl: '', //种子种苗主图
|
||||||
|
photoUrlDetail: '', //种子种苗详情图
|
||||||
|
});
|
||||||
|
const dialogFormRules = ref({
|
||||||
|
seedName: [{ required: true, message: '请输入种子种苗名称', trigger: 'blur' }],
|
||||||
|
varietyName: [{ required: true, message: '请输入品种名称', trigger: 'blur' }],
|
||||||
|
brand: [{ required: true, message: '请输入品牌', trigger: 'blur' }],
|
||||||
|
manufacturer: [{ required: true, message: '请输入品牌', trigger: 'blur' }],
|
||||||
|
classifyId: [{ required: true, message: '请选择蔬菜种苗', trigger: ['change', 'blur'] }],
|
||||||
|
productUnit: [{ required: true, message: '请输入产品规格', trigger: 'blur' }],
|
||||||
|
});
|
||||||
|
|
||||||
|
const addItem = async () => {
|
||||||
|
ElMessage.success('点击新增!');
|
||||||
|
// restDialogForm();
|
||||||
|
// dialogTitle.value = '新增';
|
||||||
|
// formDisabled.value = false;
|
||||||
|
// dialogFormVisible.value = true;
|
||||||
|
};
|
||||||
|
const seeDetails = async (row) => {
|
||||||
|
console.log('查看详情: ', row);
|
||||||
|
ElMessage.success('点击查看详情!');
|
||||||
|
// dialogTitle.value = '详情';
|
||||||
|
// setDialogForm(row);
|
||||||
|
// formDisabled.value = true;
|
||||||
|
// dialogFormVisible.value = true;
|
||||||
|
};
|
||||||
|
const handleEdit = (row) => {
|
||||||
|
console.log('要编辑的行: ', row);
|
||||||
|
ElMessage.success('点击编辑!');
|
||||||
|
// dialogTitle.value = '编辑';
|
||||||
|
// setDialogForm(row);
|
||||||
|
// formDisabled.value = false;
|
||||||
|
// dialogFormVisible.value = true;
|
||||||
|
};
|
||||||
|
const getDetails = async () => {
|
||||||
|
let response = await getRowDetails({
|
||||||
|
url: '/inputGoods/supervise/provenance/getDetail/',
|
||||||
|
id: dialogForm.id,
|
||||||
|
});
|
||||||
|
console.log(response);
|
||||||
|
if (response.code == 200) {
|
||||||
|
setDialogForm(response.data);
|
||||||
|
} else {
|
||||||
|
ElMessage.error(response.message);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
const setDialogForm = (row) => {
|
||||||
|
dialogForm.id = row.id;
|
||||||
|
dialogForm.seedName = row.seedName;
|
||||||
|
dialogForm.varietyName = row.varietyName;
|
||||||
|
dialogForm.brand = row.brand;
|
||||||
|
dialogForm.manufacturer = row.manufacturer;
|
||||||
|
dialogForm.classifyId = row.classifyId;
|
||||||
|
dialogForm.classifyName = row.classifyName;
|
||||||
|
dialogForm.productSpecification = row.productSpecification;
|
||||||
|
dialogForm.productUnit = row.productUnit;
|
||||||
|
dialogForm.productAttributes = row.productAttributes;
|
||||||
|
dialogForm.photoUrl = row.photoUrl;
|
||||||
|
dialogForm.photoUrlDetail = row.photoUrlDetail;
|
||||||
|
};
|
||||||
|
const handleDelete = (row) => {
|
||||||
|
console.log('删除操作: ', row);
|
||||||
|
app
|
||||||
|
.$confirm(`删除后信息将不可查看,确认要删除吗?`, '确定删除', {
|
||||||
|
confirmButtonText: '确定',
|
||||||
|
cancelButtonText: '取消',
|
||||||
|
type: 'warning',
|
||||||
|
})
|
||||||
|
.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 delSeedDemand(ids);
|
||||||
|
return res;
|
||||||
|
} catch (error) {
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
const onSaveCategory = () => {
|
||||||
|
console.log(dialogForm);
|
||||||
|
dialogRef.value.validate(async (valid, fields) => {
|
||||||
|
if (valid) {
|
||||||
|
try {
|
||||||
|
let param = { ...dialogForm };
|
||||||
|
param.classifyId = dialogForm.classifyId.join(',');
|
||||||
|
param.classifyName = dialogForm.classifyName.join(',');
|
||||||
|
console.log(param);
|
||||||
|
let response;
|
||||||
|
if (dialogTitle.value == '新增') {
|
||||||
|
response = await seedDemandSave(param);
|
||||||
|
} else {
|
||||||
|
response = await editSeedDemand(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, {
|
||||||
|
id: '',
|
||||||
|
seedName: '', //种子种苗名称
|
||||||
|
varietyName: '', //品种名称
|
||||||
|
brand: '', //品牌
|
||||||
|
manufacturer: '', //生产厂家
|
||||||
|
classifyId: '', //蔬菜种苗id
|
||||||
|
classifyName: '', //蔬菜种苗名称
|
||||||
|
productSpecification: '', //产品规格(number)
|
||||||
|
productUnit: '', //产品规格单位
|
||||||
|
productAttributes: '', //自定义商品属性
|
||||||
|
photoUrl: '', //种子种苗主图
|
||||||
|
photoUrlDetail: '', //种子种苗详情图
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
const seedTypeList = ref([
|
||||||
|
{ id: '1', seedName: '番茄' },
|
||||||
|
{ id: '2', seedName: '白菜' },
|
||||||
|
{ id: '3', seedName: '辣椒' },
|
||||||
|
]);
|
||||||
|
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 cascaderProps = ref({
|
||||||
|
label: 'dataName', // 选项标签字段名
|
||||||
|
value: 'id', // 选项值字段名
|
||||||
|
children: 'children', // 子选项字段名
|
||||||
|
emitPath: true,
|
||||||
|
expandTrigger: 'hover',
|
||||||
|
});
|
||||||
|
const handleCascaderChange = () => {
|
||||||
|
const selectedNames = getSelectedNames(dialogForm.classifyId);
|
||||||
|
console.log('对应的名称:', selectedNames); // 例如: ['花草类种子', '具体种子名称']
|
||||||
|
// 如果需要,可以将名称也保存到表单数据中
|
||||||
|
dialogForm.classifyName = selectedNames;
|
||||||
|
};
|
||||||
|
const getSelectedNames = (ids) => {
|
||||||
|
if (!ids || !ids.length) return [];
|
||||||
|
|
||||||
|
let names = [];
|
||||||
|
let currentLevel = seedTypeDialogList.value;
|
||||||
|
|
||||||
|
for (const id of ids) {
|
||||||
|
const foundItem = currentLevel.find((item) => item.id === id);
|
||||||
|
if (!foundItem) break;
|
||||||
|
|
||||||
|
names.push(foundItem.dataName);
|
||||||
|
currentLevel = foundItem.children || [];
|
||||||
|
}
|
||||||
|
|
||||||
|
return names;
|
||||||
|
};
|
||||||
|
|
||||||
|
const unitList = ref([
|
||||||
|
{ id: '1', unit: 'kg' },
|
||||||
|
{ id: '2', unit: 'g' },
|
||||||
|
{ id: '3', unit: 'L' },
|
||||||
|
{ id: '4', unit: 'ml' },
|
||||||
|
]);
|
||||||
|
|
||||||
|
onMounted(() => {
|
||||||
|
onSubmit();
|
||||||
|
// getSeedTypeList();
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
<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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -6,8 +6,8 @@
|
|||||||
<div class="search-bar">
|
<div class="search-bar">
|
||||||
<div class="search-bar-left">
|
<div class="search-bar-left">
|
||||||
<el-form ref="searchForm" :inline="true" :model="formInline" class="demo-form-inline" :label-width="'auto'">
|
<el-form ref="searchForm" :inline="true" :model="formInline" class="demo-form-inline" :label-width="'auto'">
|
||||||
<el-form-item label="关键字" prop="name">
|
<el-form-item label="关键词" prop="name">
|
||||||
<el-input v-model="formInline.name" placeholder="请输入" clearable />
|
<el-input v-model="formInline.name" placeholder="请输入关键词" clearable />
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
<!-- <el-form-item label="分类" prop="seedTypeId">
|
<!-- <el-form-item label="分类" prop="seedTypeId">
|
||||||
<el-select v-model="formInline.seedTypeId" placeholder="请选择" clearable @change="seedTypeChange">
|
<el-select v-model="formInline.seedTypeId" placeholder="请选择" clearable @change="seedTypeChange">
|
||||||
@ -156,6 +156,9 @@ const columns = ref([
|
|||||||
{ prop: 'planLocation', label: '种植地点' },
|
{ prop: 'planLocation', label: '种植地点' },
|
||||||
{ prop: 'cropType', label: '种植作物种类' },
|
{ prop: 'cropType', label: '种植作物种类' },
|
||||||
{ prop: 'planArea', label: '种植面积(亩)' },
|
{ prop: 'planArea', label: '种植面积(亩)' },
|
||||||
|
{ prop: 'applyTime', label: '申请时间' },
|
||||||
|
{ prop: 'subsidyStandards', label: '补贴标准(元/亩)' },
|
||||||
|
{ prop: 'subsidyAmount', label: '补贴金额(元)' },
|
||||||
// { prop: 'action', label: '操作', slotName: 'action', width: 230, fixed: 'right' },
|
// { prop: 'action', label: '操作', slotName: 'action', width: 230, fixed: 'right' },
|
||||||
]);
|
]);
|
||||||
const handlePaginationChange = ({ page, pageSize }) => {
|
const handlePaginationChange = ({ page, pageSize }) => {
|
||||||
|
|||||||
@ -6,8 +6,8 @@
|
|||||||
<div class="search-bar">
|
<div class="search-bar">
|
||||||
<div class="search-bar-left">
|
<div class="search-bar-left">
|
||||||
<el-form ref="searchForm" :inline="true" :model="formInline" class="demo-form-inline" :label-width="'auto'">
|
<el-form ref="searchForm" :inline="true" :model="formInline" class="demo-form-inline" :label-width="'auto'">
|
||||||
<el-form-item label="关键字" prop="name">
|
<el-form-item label="关键词" prop="name">
|
||||||
<el-input v-model="formInline.name" placeholder="请输入" clearable />
|
<el-input v-model="formInline.name" placeholder="请输入关键词" clearable />
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
<!-- <el-form-item label="分类" prop="seedTypeId">
|
<!-- <el-form-item label="分类" prop="seedTypeId">
|
||||||
<el-select v-model="formInline.seedTypeId" placeholder="请选择" clearable @change="seedTypeChange">
|
<el-select v-model="formInline.seedTypeId" placeholder="请选择" clearable @change="seedTypeChange">
|
||||||
@ -156,6 +156,9 @@ const columns = ref([
|
|||||||
{ prop: 'planLocation', label: '种植地点' },
|
{ prop: 'planLocation', label: '种植地点' },
|
||||||
{ prop: 'cropType', label: '种植作物种类' },
|
{ prop: 'cropType', label: '种植作物种类' },
|
||||||
{ prop: 'planArea', label: '种植面积(亩)' },
|
{ prop: 'planArea', label: '种植面积(亩)' },
|
||||||
|
{ prop: 'applyTime', label: '申请时间' },
|
||||||
|
{ prop: 'subsidyStandards', label: '补贴标准(元/亩)' },
|
||||||
|
{ prop: 'subsidyAmount', label: '补贴金额(元)' },
|
||||||
// { prop: 'action', label: '操作', slotName: 'action', width: 230, fixed: 'right' },
|
// { prop: 'action', label: '操作', slotName: 'action', width: 230, fixed: 'right' },
|
||||||
]);
|
]);
|
||||||
const handlePaginationChange = ({ page, pageSize }) => {
|
const handlePaginationChange = ({ page, pageSize }) => {
|
||||||
|
|||||||
@ -6,8 +6,8 @@
|
|||||||
<div class="search-bar">
|
<div class="search-bar">
|
||||||
<div class="search-bar-left">
|
<div class="search-bar-left">
|
||||||
<el-form ref="searchForm" :inline="true" :model="formInline" class="demo-form-inline" :label-width="'auto'">
|
<el-form ref="searchForm" :inline="true" :model="formInline" class="demo-form-inline" :label-width="'auto'">
|
||||||
<el-form-item label="关键字" prop="name">
|
<el-form-item label="关键词" prop="name">
|
||||||
<el-input v-model="formInline.name" placeholder="请输入" clearable />
|
<el-input v-model="formInline.name" placeholder="请输入关键词" clearable />
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
<!-- <el-form-item label="分类" prop="seedTypeId">
|
<!-- <el-form-item label="分类" prop="seedTypeId">
|
||||||
<el-select v-model="formInline.seedTypeId" placeholder="请选择" clearable @change="seedTypeChange">
|
<el-select v-model="formInline.seedTypeId" placeholder="请选择" clearable @change="seedTypeChange">
|
||||||
@ -152,6 +152,9 @@ const columns = ref([
|
|||||||
{ prop: 'planLocation', label: '种植地点' },
|
{ prop: 'planLocation', label: '种植地点' },
|
||||||
{ prop: 'cropType', label: '种植作物种类' },
|
{ prop: 'cropType', label: '种植作物种类' },
|
||||||
{ prop: 'planArea', label: '种植面积(亩)' },
|
{ prop: 'planArea', label: '种植面积(亩)' },
|
||||||
|
{ prop: 'applyTime', label: '申请时间' },
|
||||||
|
{ prop: 'subsidyStandards', label: '补贴标准(元/亩)' },
|
||||||
|
{ prop: 'subsidyAmount', label: '补贴金额(元)' },
|
||||||
// { prop: 'action', label: '操作', slotName: 'action', width: 230, fixed: 'right' },
|
// { prop: 'action', label: '操作', slotName: 'action', width: 230, fixed: 'right' },
|
||||||
]);
|
]);
|
||||||
const handlePaginationChange = ({ page, pageSize }) => {
|
const handlePaginationChange = ({ page, pageSize }) => {
|
||||||
|
|||||||
@ -6,8 +6,8 @@
|
|||||||
<div class="search-bar">
|
<div class="search-bar">
|
||||||
<div class="search-bar-left">
|
<div class="search-bar-left">
|
||||||
<el-form ref="searchForm" :inline="true" :model="formInline" class="demo-form-inline" :label-width="'auto'">
|
<el-form ref="searchForm" :inline="true" :model="formInline" class="demo-form-inline" :label-width="'auto'">
|
||||||
<el-form-item label="关键字" prop="name">
|
<el-form-item label="关键词" prop="name">
|
||||||
<el-input v-model="formInline.name" placeholder="请输入" clearable />
|
<el-input v-model="formInline.name" placeholder="请输入关键词" clearable />
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
<!-- <el-form-item label="分类" prop="seedTypeId">
|
<!-- <el-form-item label="分类" prop="seedTypeId">
|
||||||
<el-select v-model="formInline.seedTypeId" placeholder="请选择" clearable @change="seedTypeChange">
|
<el-select v-model="formInline.seedTypeId" placeholder="请选择" clearable @change="seedTypeChange">
|
||||||
|
|||||||
@ -6,8 +6,8 @@
|
|||||||
<div class="search-bar">
|
<div class="search-bar">
|
||||||
<div class="search-bar-left">
|
<div class="search-bar-left">
|
||||||
<el-form ref="searchForm" :inline="true" :model="formInline" class="demo-form-inline" :label-width="'auto'">
|
<el-form ref="searchForm" :inline="true" :model="formInline" class="demo-form-inline" :label-width="'auto'">
|
||||||
<el-form-item label="关键字" prop="name">
|
<el-form-item label="关键词" prop="name">
|
||||||
<el-input v-model="formInline.name" placeholder="请输入" clearable />
|
<el-input v-model="formInline.name" placeholder="请输入关键词" clearable />
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
<!-- <el-form-item label="分类" prop="seedTypeId">
|
<!-- <el-form-item label="分类" prop="seedTypeId">
|
||||||
<el-select v-model="formInline.seedTypeId" placeholder="请选择" clearable @change="seedTypeChange">
|
<el-select v-model="formInline.seedTypeId" placeholder="请选择" clearable @change="seedTypeChange">
|
||||||
|
|||||||
@ -6,8 +6,8 @@
|
|||||||
<div class="search-bar">
|
<div class="search-bar">
|
||||||
<div class="search-bar-left">
|
<div class="search-bar-left">
|
||||||
<el-form ref="searchForm" :inline="true" :model="formInline" class="demo-form-inline" :label-width="'auto'">
|
<el-form ref="searchForm" :inline="true" :model="formInline" class="demo-form-inline" :label-width="'auto'">
|
||||||
<el-form-item label="关键字" prop="name">
|
<el-form-item label="关键词" prop="name">
|
||||||
<el-input v-model="formInline.name" placeholder="请输入" clearable />
|
<el-input v-model="formInline.name" placeholder="请输入关键词" clearable />
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
<!-- <el-form-item label="分类" prop="seedTypeId">
|
<!-- <el-form-item label="分类" prop="seedTypeId">
|
||||||
<el-select v-model="formInline.seedTypeId" placeholder="请选择" clearable @change="seedTypeChange">
|
<el-select v-model="formInline.seedTypeId" placeholder="请选择" clearable @change="seedTypeChange">
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user