Merge branch 'dev' of http://47.109.205.240:3000/Web/daimp-front into dev
This commit is contained in:
commit
575e5d32c6
@ -0,0 +1,487 @@
|
||||
<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:region-code="formInline.regionCode" v-model:grid-id="formInline.gridId" label="行政区域-网格" :width="500" />
|
||||
</el-form-item>
|
||||
<el-form-item label="农产品" prop="cropId">
|
||||
<el-select v-model="formInline.cropId" placeholder="请选择" clearable @change="seedTypeChange">
|
||||
<el-option v-for="item in cropypeList" :key="item.id" :value="item.id" :label="item.cropsName" />
|
||||
</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>
|
||||
<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 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, 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 { getCropsList, getLandInfo } from '@/apis/land';
|
||||
import { GetDictTypeInfo } from '@/apis/system/dictType';
|
||||
import { useApp } from '@/hooks';
|
||||
const app = useApp();
|
||||
|
||||
// 查询条件
|
||||
const formInline = reactive({
|
||||
regionCode: '',
|
||||
regionName: '',
|
||||
gridId: '',
|
||||
gridName: '',
|
||||
cropId: '',
|
||||
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 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: 150, fixed: 'right' },
|
||||
]);
|
||||
const handlePaginationChange = ({ page, pageSize }) => {
|
||||
formInline.current = page;
|
||||
formInline.size = pageSize;
|
||||
loadData();
|
||||
};
|
||||
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;
|
||||
}
|
||||
} catch (error) {
|
||||
tableLoading.value = false;
|
||||
console.error(error);
|
||||
}
|
||||
};
|
||||
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 dialogFormRules = ref({
|
||||
yield: [{ required: true, message: '请输入亩产量', trigger: ['change', 'blur'] }],
|
||||
detectionTime: [{ required: true, message: '请选择使用时间', trigger: 'blur' }],
|
||||
});
|
||||
watch([() => dialogForm.yield, () => dialogForm.area], ([newYield, newArea], [oldYield, oldArea]) => {
|
||||
dialogForm.totalYield = (newYield * newArea).toFixed(2);
|
||||
});
|
||||
const addItem = async () => {
|
||||
// ElMessage.success('点击新增!');
|
||||
restDialogForm();
|
||||
dialogTitle.value = '新增';
|
||||
formDisabled.value = false;
|
||||
dialogFormVisible.value = true;
|
||||
};
|
||||
const seeDetails = async (row) => {
|
||||
// ElMessage.success('查看详情!');
|
||||
dialogTitle.value = '详情';
|
||||
console.log(row);
|
||||
formDisabled.value = true;
|
||||
dialogForm.landId = row.landId;
|
||||
await getDetails();
|
||||
dialogForm.yield = row.yield;
|
||||
// dialogForm.totalYield = row.totalYield ?? 0;
|
||||
dialogForm.detectionTime = row.harvestDate;
|
||||
dialogFormVisible.value = true;
|
||||
};
|
||||
const handleEdit = async (row) => {
|
||||
// ElMessage.success('点击编辑!');
|
||||
nowSelectRow.value = row;
|
||||
dialogTitle.value = '编辑';
|
||||
console.log(row);
|
||||
formDisabled.value = false;
|
||||
dialogForm.landId = row.landId;
|
||||
await getDetails();
|
||||
dialogForm.yield = row.yield;
|
||||
// dialogForm.totalYield = row.totalYield ?? 0;
|
||||
dialogForm.detectionTime = row.harvestDate;
|
||||
dialogFormVisible.value = true;
|
||||
};
|
||||
// 获取地块信息
|
||||
const getDetails = async () => {
|
||||
let response = await getLandInfo(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.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',
|
||||
})
|
||||
.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) {
|
||||
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 cropypeList = ref([]);
|
||||
const getCropypeList = async () => {
|
||||
try {
|
||||
let response = await getCropsList();
|
||||
console.log(response);
|
||||
if (response.code == 200) {
|
||||
if (response.data?.length > 0) {
|
||||
cropypeList.value = response.data;
|
||||
}
|
||||
}
|
||||
} catch (error) {
|
||||
console.error(error);
|
||||
}
|
||||
};
|
||||
|
||||
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' },
|
||||
];
|
||||
}
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
onSubmit();
|
||||
getLandsList();
|
||||
getEntityOptions();
|
||||
getCropypeList();
|
||||
});
|
||||
</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;
|
||||
}
|
||||
}
|
||||
|
||||
/* 必须使用深度选择器 + 精确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>
|
||||
@ -1,112 +1,84 @@
|
||||
<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:region-code="formInline.regionCode" v-model:grid-id="formInline.gridId" label="行政区域-网格" :width="500" />
|
||||
</el-form-item>
|
||||
<el-form-item label="农产品" prop="cropId">
|
||||
<el-select v-model="formInline.cropId" placeholder="请选择" clearable @change="seedTypeChange">
|
||||
<el-option v-for="item in cropypeList" :key="item.id" :value="item.id" :label="item.cropsName" />
|
||||
</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 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>
|
||||
<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>
|
||||
<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-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>
|
||||
<el-button @click="handleCancel">取消</el-button>
|
||||
<el-button v-if="!isReadonly" type="primary" @click="handleSubmit()"> 保存 </el-button>
|
||||
</div>
|
||||
</template>
|
||||
</el-dialog>
|
||||
@ -114,374 +86,229 @@
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
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 { getCropsList, getLandInfo } from '@/apis/land';
|
||||
import { GetDictTypeInfo } from '@/apis/system/dictType';
|
||||
import { useApp } from '@/hooks';
|
||||
const app = useApp();
|
||||
// ---------------------------------------------------------------------
|
||||
// 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';
|
||||
|
||||
// 查询条件
|
||||
const formInline = reactive({
|
||||
regionCode: '',
|
||||
regionName: '',
|
||||
gridId: '',
|
||||
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: '',
|
||||
cropId: '',
|
||||
current: 1,
|
||||
size: 10,
|
||||
gridAreaCode: '',
|
||||
scope: '',
|
||||
scopeImg: '',
|
||||
note: '',
|
||||
});
|
||||
const searchForm = ref(null);
|
||||
const onSubmit = () => {
|
||||
formInline.current = 1;
|
||||
loadData();
|
||||
};
|
||||
const initialFormData = { ...formData.value };
|
||||
const resetForm = () => {
|
||||
searchForm.value.resetFields();
|
||||
formData.value = { ...initialFormData };
|
||||
};
|
||||
|
||||
// 表格数据
|
||||
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: 150, fixed: 'right' },
|
||||
]);
|
||||
const handlePaginationChange = ({ page, pageSize }) => {
|
||||
formInline.current = page;
|
||||
formInline.size = pageSize;
|
||||
loadData();
|
||||
};
|
||||
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));
|
||||
const pageData = ref({
|
||||
currentPage: 1,
|
||||
pageSize: 10,
|
||||
total: 0,
|
||||
});
|
||||
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 searchForm = ref({
|
||||
gridName: '',
|
||||
keyword: '',
|
||||
regionCode: '',
|
||||
id: '',
|
||||
status: -1,
|
||||
});
|
||||
const handleSelectionChange = (selection, keys) => {
|
||||
// console.log(selection, keys);
|
||||
selectedRows.value = selection;
|
||||
landNums.value = selection.length;
|
||||
const initialSearchForm = { ...searchForm.value };
|
||||
const resetSearch = () => {
|
||||
searchForm.value = { ...initialSearchForm };
|
||||
};
|
||||
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;
|
||||
// 过滤对象，只保留有值的属性
|
||||
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;
|
||||
}
|
||||
} catch (error) {
|
||||
tableLoading.value = false;
|
||||
console.error(error);
|
||||
}
|
||||
};
|
||||
const seedTypeChange = () => {
|
||||
console.log(formInline.seedTypeId);
|
||||
// 重新获取表格数据，需添加参数
|
||||
});
|
||||
return newObj;
|
||||
};
|
||||
|
||||
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 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 dialogFormRules = ref({
|
||||
yield: [{ required: true, message: '请输入亩产量', trigger: ['change', 'blur'] }],
|
||||
detectionTime: [{ required: true, message: '请选择使用时间', trigger: 'blur' }],
|
||||
});
|
||||
watch([() => dialogForm.yield, () => dialogForm.area], ([newYield, newArea], [oldYield, oldArea]) => {
|
||||
dialogForm.totalYield = (newYield * newArea).toFixed(2);
|
||||
});
|
||||
const addItem = async () => {
|
||||
// ElMessage.success('点击新增!');
|
||||
restDialogForm();
|
||||
dialogTitle.value = '新增';
|
||||
formDisabled.value = false;
|
||||
dialogFormVisible.value = true;
|
||||
const handleRefresh = async () => {
|
||||
searchForm.value = { ...initialSearchForm };
|
||||
getData();
|
||||
};
|
||||
const seeDetails = async (row) => {
|
||||
// ElMessage.success('查看详情!');
|
||||
dialogTitle.value = '详情';
|
||||
console.log(row);
|
||||
formDisabled.value = true;
|
||||
dialogForm.landId = row.landId;
|
||||
await getDetails();
|
||||
dialogForm.yield = row.yield;
|
||||
// dialogForm.totalYield = row.totalYield ?? 0;
|
||||
dialogForm.detectionTime = row.harvestDate;
|
||||
dialogFormVisible.value = true;
|
||||
const handleCurrentChange = (val) => {
|
||||
pageData.value.currentPage = val;
|
||||
};
|
||||
const handleEdit = async (row) => {
|
||||
// ElMessage.success('点击编辑!');
|
||||
nowSelectRow.value = row;
|
||||
const handleSizeChange = (val) => {
|
||||
pageData.value.pageSize = val;
|
||||
};
|
||||
const handleView = (row) => {
|
||||
isReadonly.value = true;
|
||||
formData.value = { ...row };
|
||||
dialogTitle.value = '产出品信息';
|
||||
visible.value = true;
|
||||
};
|
||||
const handleEdit = (row) => {
|
||||
isReadonly.value = false;
|
||||
formData.value = { ...row };
|
||||
dialogTitle.value = '编辑';
|
||||
console.log(row);
|
||||
formDisabled.value = false;
|
||||
dialogForm.landId = row.landId;
|
||||
await getDetails();
|
||||
dialogForm.yield = row.yield;
|
||||
// dialogForm.totalYield = row.totalYield ?? 0;
|
||||
dialogForm.detectionTime = row.harvestDate;
|
||||
dialogFormVisible.value = true;
|
||||
visible.value = true;
|
||||
};
|
||||
// 获取地块信息
|
||||
const getDetails = async () => {
|
||||
let response = await getLandInfo(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.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(`删除后信息将不可查看，确认要删除吗？`, '确定删除', {
|
||||
const handleDelete = async (row) => {
|
||||
try {
|
||||
await ElMessageBox.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 DeleteOutput(ids);
|
||||
return res;
|
||||
});
|
||||
|
||||
const response = await deleteGrid(row.id);
|
||||
|
||||
ElMessage.success('删除成功');
|
||||
getData();
|
||||
} catch (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);
|
||||
}
|
||||
if (error === 'cancel') {
|
||||
ElMessage.info('已取消删除');
|
||||
} else {
|
||||
ElMessage.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 cropypeList = ref([]);
|
||||
const getCropypeList = async () => {
|
||||
const handleSubmit = async () => {
|
||||
console.log('提交表单:', formData.value);
|
||||
try {
|
||||
let response = await getCropsList();
|
||||
console.log(response);
|
||||
if (response.code == 200) {
|
||||
if (response.data?.length > 0) {
|
||||
cropypeList.value = response.data;
|
||||
}
|
||||
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) {
|
||||
console.error(error);
|
||||
}
|
||||
};
|
||||
|
||||
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' },
|
||||
];
|
||||
ElMessage.error(error.message || '新增失败，请重试');
|
||||
}
|
||||
};
|
||||
|
||||
// ---------------------------------------------------------------------
|
||||
// 业务代码
|
||||
// ---------------------------------------------------------------------
|
||||
import { createGrid, updateGrid, deleteGrid, fetchGridList, getGridDetail, exportGrid } from '@/apis/landResourceManagement/gridManagement';
|
||||
import { mockData } from './output';
|
||||
onMounted(() => {
|
||||
onSubmit();
|
||||
getLandsList();
|
||||
getEntityOptions();
|
||||
getCropypeList();
|
||||
getData();
|
||||
});
|
||||
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 lang="scss" scoped>
|
||||
.dialog-form-item {
|
||||
:deep(.el-upload--picture-card) {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
}
|
||||
|
||||
:deep(.file-uploader__upload) {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
}
|
||||
<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;
|
||||
|
||||
:deep(.el-upload-list__item) {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
.el-button {
|
||||
margin-left: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
/* 必须使用深度选择器 + 精确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>
|
||||
|
||||
@ -0,0 +1,428 @@
|
||||
<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="keyword">
|
||||
<el-input v-model="formInline.keyword" placeholder="请输入关键字" clearable />
|
||||
</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="900" :close-on-click-modal="false" align-center>
|
||||
<el-form
|
||||
ref="dialogRef"
|
||||
:model="dialogForm"
|
||||
:inline="true"
|
||||
:label-width="'150'"
|
||||
:rules="dialogFormRules"
|
||||
:disabled="formDisabled"
|
||||
class="dialog-form-container"
|
||||
>
|
||||
<el-form-item label="企业名称" prop="comName" class="dialog-form-item" style="width: 100%">
|
||||
<el-input v-model="dialogForm.comName" clearable placeholder="请输入" style="width: 80%" />
|
||||
</el-form-item>
|
||||
<el-form-item label="企业类型" prop="comType" class="dialog-form-item">
|
||||
<el-select v-model="dialogForm.comType" placeholder="请选择">
|
||||
<el-option value="合作社" label="合作社" />
|
||||
<el-option value="有限责任公司" label="有限责任公司" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="统一社会信用代码" prop="uscc" class="dialog-form-item">
|
||||
<el-input v-model="dialogForm.uscc" clearable placeholder="请输入" />
|
||||
</el-form-item>
|
||||
<el-form-item label="法人信息" prop="legalName" class="dialog-form-item">
|
||||
<el-input v-model="dialogForm.legalName" clearable placeholder="请输入" />
|
||||
</el-form-item>
|
||||
<el-form-item label="厂址" prop="address" class="dialog-form-item">
|
||||
<el-input v-model="dialogForm.address" clearable placeholder="请输入" />
|
||||
</el-form-item>
|
||||
<el-form-item label="联系人" prop="contactName" class="dialog-form-item">
|
||||
<el-input v-model="dialogForm.contactName" 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="入驻时间" prop="tenancyTime" class="dialog-form-item">
|
||||
<el-date-picker
|
||||
v-model="dialogForm.tenancyTime"
|
||||
:clearable="false"
|
||||
type="datetime"
|
||||
format="YYYY/MM/DD HH:mm:ss"
|
||||
value-format="YYYY/MM/DD HH:mm:ss"
|
||||
placeholder="请选择使用时间"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="申请时间" prop="applyTime" class="dialog-form-item">
|
||||
<el-date-picker
|
||||
v-model="dialogForm.applyTime"
|
||||
:clearable="false"
|
||||
type="datetime"
|
||||
format="YYYY/MM/DD HH:mm:ss"
|
||||
value-format="YYYY/MM/DD HH:mm:ss"
|
||||
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 { getLandList } from '@/apis/inputSuppliesApi/supervisionOfInputs';
|
||||
import { getTraceCompanyList, addTraceCompany, editTraceCompany, deleteTraceCompany } from '@/apis/trace/products';
|
||||
import { getLandInfo } from '@/apis/land';
|
||||
import { GetDictTypeInfo } from '@/apis/system/dictType';
|
||||
import { useApp } from '@/hooks';
|
||||
const app = useApp();
|
||||
|
||||
// 查询条件
|
||||
const formInline = reactive({
|
||||
keyword: '',
|
||||
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: 'comCode', label: '企业编码' },
|
||||
{ prop: 'comName', label: '企业名称' },
|
||||
{ prop: 'comType', label: '企业类型' },
|
||||
{ prop: 'uscc', label: '统一社会信用代码' },
|
||||
{ prop: 'legalName', label: '法人信息' },
|
||||
{ prop: 'contactName', label: '联系人' },
|
||||
{ prop: 'phone', label: '电话' },
|
||||
{ prop: 'address', label: '厂址' },
|
||||
{ prop: 'tenancyTime', label: '入驻时间' },
|
||||
{ prop: 'applyTime', label: '申请时间' },
|
||||
{ prop: 'action', label: '操作', slotName: 'action', width: 100, fixed: 'right' },
|
||||
]);
|
||||
const handlePaginationChange = ({ page, pageSize }) => {
|
||||
formInline.current = page;
|
||||
formInline.size = pageSize;
|
||||
loadData();
|
||||
};
|
||||
const loadData = async () => {
|
||||
tableLoading.value = true;
|
||||
try {
|
||||
let response = await getTraceCompanyList(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 seedTypeChange = () => {
|
||||
console.log(formInline.seedTypeId);
|
||||
// 重新获取表格数据，需添加参数
|
||||
};
|
||||
|
||||
const dialogFormVisible = ref(false);
|
||||
const dialogRef = ref(null);
|
||||
const dialogTitle = ref('新增');
|
||||
const formDisabled = ref(false);
|
||||
const nowSelectRow = ref({});
|
||||
const dialogForm = reactive({
|
||||
comCode: '', //企业编码
|
||||
comName: '', //企业名称
|
||||
comType: '', //企业类型
|
||||
uscc: '', //统一社会信用代码
|
||||
legalName: '', //法人信息
|
||||
contactName: '', //联系人
|
||||
phone: '', //联系方式
|
||||
address: '', //厂址
|
||||
tenancyTime: '', //入驻时间
|
||||
applyTime: '', //申请时间
|
||||
});
|
||||
const initDialogForm = { ...dialogForm };
|
||||
console.log(initDialogForm);
|
||||
const dialogFormRules = ref({
|
||||
comName: [{ required: true, message: '请输入', trigger: 'blur' }],
|
||||
uscc: [
|
||||
{ required: true, message: '请输入', trigger: 'blur' },
|
||||
{
|
||||
validator: (rule, value, callback) => {
|
||||
if (!/^[0-9A-Za-z]+$/.test(value)) {
|
||||
callback(new Error('企业信用代码只能包含数字和字母'));
|
||||
} else if (value.length !== 18) {
|
||||
// 可选：限制18位长度
|
||||
callback(new Error('企业信用代码必须为18位'));
|
||||
} else {
|
||||
callback();
|
||||
}
|
||||
},
|
||||
trigger: 'blur',
|
||||
},
|
||||
],
|
||||
legalName: [{ required: true, message: '请输入', trigger: 'blur' }],
|
||||
contactName: [{ required: true, message: '请输入', trigger: 'blur' }],
|
||||
phone: [
|
||||
{ required: true, message: '请输入', trigger: 'blur' },
|
||||
{
|
||||
pattern: /^1[3-9]\d{9}$/,
|
||||
message: '请输入正确的11位手机号',
|
||||
trigger: 'blur',
|
||||
},
|
||||
],
|
||||
address: [{ required: true, message: '请输入', trigger: 'blur' }],
|
||||
tenancyTime: [{ required: true, message: '请选择入驻时间', trigger: 'blur' }],
|
||||
applyTime: [{ required: true, message: '请选择申请时间', trigger: 'blur' }],
|
||||
comType: [
|
||||
{
|
||||
required: true,
|
||||
message: '请选择',
|
||||
trigger: 'blur',
|
||||
},
|
||||
],
|
||||
});
|
||||
|
||||
const addItem = async () => {
|
||||
restDialogForm();
|
||||
dialogTitle.value = '新增';
|
||||
formDisabled.value = false;
|
||||
dialogFormVisible.value = true;
|
||||
};
|
||||
const seeDetails = async (row) => {
|
||||
// ElMessage.success('查看详情!');
|
||||
console.log('查看详情的行: ', row);
|
||||
dialogTitle.value = '详情';
|
||||
formDisabled.value = true;
|
||||
Object.assign(dialogForm, row);
|
||||
dialogFormVisible.value = true;
|
||||
};
|
||||
const handleEdit = (row) => {
|
||||
// ElMessage.success('点击编辑!');
|
||||
console.log('要编辑的行: ', row);
|
||||
nowSelectRow.value = row;
|
||||
dialogTitle.value = '编辑';
|
||||
formDisabled.value = false;
|
||||
Object.assign(dialogForm, row);
|
||||
dialogFormVisible.value = true;
|
||||
};
|
||||
const setDialogForm = (row) => {
|
||||
Object.assign(dialogForm, row);
|
||||
};
|
||||
// 获取地块信息
|
||||
const getDetails = async () => {
|
||||
let response = await getLandInfo(dialogForm.landId);
|
||||
console.log(response);
|
||||
if (response.code == 200) {
|
||||
if (response.data) {
|
||||
setDialogForm(response.data);
|
||||
} else {
|
||||
ElMessage.error('未查询到数据');
|
||||
}
|
||||
} else {
|
||||
ElMessage.error(response.message);
|
||||
}
|
||||
};
|
||||
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 deleteTraceCompany(ids);
|
||||
return res;
|
||||
} catch (error) {
|
||||
return false;
|
||||
}
|
||||
};
|
||||
const onSaveCategory = () => {
|
||||
console.log(dialogForm);
|
||||
dialogRef.value.validate(async (valid, fields) => {
|
||||
if (valid) {
|
||||
try {
|
||||
let param = { ...dialogForm };
|
||||
console.log(param);
|
||||
let response;
|
||||
if (dialogTitle.value == '新增') {
|
||||
response = await addTraceCompany(param);
|
||||
} else {
|
||||
param.id = nowSelectRow.value.id;
|
||||
response = await editTraceCompany(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, initDialogForm);
|
||||
nowSelectRow.value = ref({});
|
||||
};
|
||||
|
||||
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' },
|
||||
];
|
||||
}
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
onSubmit();
|
||||
// getLandsList();
|
||||
// getEntityOptions();
|
||||
});
|
||||
</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;
|
||||
}
|
||||
}
|
||||
|
||||
/* 必须使用深度选择器 + 精确DOM层级 */
|
||||
.custom-descriptions :deep(.el-descriptions__body) table.el-descriptions__table {
|
||||
table-layout: fixed;
|
||||
/* 关键属性1：强制等宽 */
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.custom-descriptions :deep(.el-descriptions__label) {
|
||||
padding-right: 20px;
|
||||
width: 130px !important;
|
||||
/* 关键属性2：固定宽度 */
|
||||
min-width: 130px !important;
|
||||
max-width: 130px !important;
|
||||
font-weight: bold;
|
||||
text-align: left;
|
||||
background: #f5f7fa;
|
||||
}
|
||||
|
||||
.custom-descriptions :deep(.el-descriptions__content) {
|
||||
width: calc(100% - 130px) !important;
|
||||
/* 自动填充剩余空间 */
|
||||
word-break: break-word;
|
||||
}
|
||||
</style>
|
||||
@ -6,8 +6,8 @@
|
||||
<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="keyword">
|
||||
<el-input v-model="formInline.keyword" placeholder="请输入关键字" clearable />
|
||||
<el-form-item label="关键字" prop="name">
|
||||
<el-input v-model="formInline.name" placeholder="请输入关键字" clearable />
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="">
|
||||
@ -42,60 +42,75 @@
|
||||
</tableComponent>
|
||||
</div>
|
||||
</div>
|
||||
<el-dialog v-model="dialogFormVisible" :title="dialogTitle" width="900" :close-on-click-modal="false" align-center>
|
||||
<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.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>
|
||||
<el-descriptions title="经营主体信息" border class="mb-20 custom-descriptions" :column="2">
|
||||
<el-descriptions-item label="经营主体编码">{{ dialogForm.businessEntityCode }}</el-descriptions-item>
|
||||
<el-descriptions-item label="经营主体名称">{{ dialogForm.businessEntityName }}</el-descriptions-item>
|
||||
</el-descriptions>
|
||||
<el-form
|
||||
ref="dialogRef"
|
||||
:model="dialogForm"
|
||||
:inline="true"
|
||||
:label-width="'150'"
|
||||
:label-width="'100'"
|
||||
:rules="dialogFormRules"
|
||||
:disabled="formDisabled"
|
||||
class="dialog-form-container"
|
||||
>
|
||||
<el-form-item label="企业名称" prop="comName" class="dialog-form-item" style="width: 100%">
|
||||
<el-input v-model="dialogForm.comName" clearable placeholder="请输入" style="width: 80%" />
|
||||
<div class="el-descriptions__title" style="margin-bottom: 16px">农药用药详情</div>
|
||||
<el-form-item label="肥料编号" prop="fertilizeId" class="dialog-form-item">
|
||||
<el-input v-model="dialogForm.fertilizeId" clearable placeholder="请输入肥料编号" />
|
||||
</el-form-item>
|
||||
<el-form-item label="企业类型" prop="comType" class="dialog-form-item">
|
||||
<el-select v-model="dialogForm.comType" placeholder="请选择">
|
||||
<el-option value="合作社" label="合作社" />
|
||||
<el-option value="有限责任公司" label="有限责任公司" />
|
||||
<el-form-item label="肥料名称" prop="fertilizeName" class="dialog-form-item">
|
||||
<el-input v-model="dialogForm.fertilizeName" 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-position="right" placeholder="请输入使用量" style="width: 150px" />
|
||||
<el-select v-model="dialogForm.useUnit" placeholder="请选择" style="width: 80px">
|
||||
<el-option v-for="el in unitList" :key="el.dictValue" :value="el.dictValue" :label="el.dictValue" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="统一社会信用代码" prop="uscc" class="dialog-form-item">
|
||||
<el-input v-model="dialogForm.uscc" clearable placeholder="请输入" />
|
||||
</el-form-item>
|
||||
<el-form-item label="法人信息" prop="legalName" class="dialog-form-item">
|
||||
<el-input v-model="dialogForm.legalName" clearable placeholder="请输入" />
|
||||
</el-form-item>
|
||||
<el-form-item label="厂址" prop="address" class="dialog-form-item">
|
||||
<el-input v-model="dialogForm.address" clearable placeholder="请输入" />
|
||||
</el-form-item>
|
||||
<el-form-item label="联系人" prop="contactName" class="dialog-form-item">
|
||||
<el-input v-model="dialogForm.contactName" 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="入驻时间" prop="tenancyTime" class="dialog-form-item">
|
||||
<el-date-picker
|
||||
v-model="dialogForm.tenancyTime"
|
||||
:clearable="false"
|
||||
type="datetime"
|
||||
format="YYYY/MM/DD HH:mm:ss"
|
||||
value-format="YYYY/MM/DD HH:mm:ss"
|
||||
placeholder="请选择使用时间"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="申请时间" prop="applyTime" class="dialog-form-item">
|
||||
<el-date-picker
|
||||
v-model="dialogForm.applyTime"
|
||||
:clearable="false"
|
||||
type="datetime"
|
||||
format="YYYY/MM/DD HH:mm:ss"
|
||||
value-format="YYYY/MM/DD HH:mm:ss"
|
||||
placeholder="请选择使用时间"
|
||||
/>
|
||||
<el-form-item label="使用时间" prop="useTime" class="dialog-form-item">
|
||||
<el-date-picker v-model="dialogForm.useTime" :clearable="false" type="date" value-format="YYYY-MM-DD" placeholder="请选择使用时间" />
|
||||
</el-form-item>
|
||||
<div class="el-descriptions__title" style="margin-bottom: 16px">检测信息</div>
|
||||
<div style="display: flex">
|
||||
<div style="display: inline-block; width: 48%">
|
||||
<el-form-item label="检测时间" prop="detectionTime" class="dialog-form-item" :label-width="'100'">
|
||||
<el-date-picker
|
||||
v-model="dialogForm.detectionTime"
|
||||
:clearable="false"
|
||||
type="date"
|
||||
value-format="YYYY-MM-DD"
|
||||
placeholder="请选择检测时间"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="检测结果" prop="detectionResult" class="dialog-form-item" :label-width="'100'">
|
||||
<el-select v-model="dialogForm.detectionResult" placeholder="请选择">
|
||||
<el-option value="合格" label="合格" />
|
||||
<el-option value="不合格" label="不合格" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="检测单位" prop="detectionUnit" class="dialog-form-item" :label-width="'100'">
|
||||
<el-input v-model="dialogForm.detectionUnit" clearable placeholder="请输入检测单位" />
|
||||
</el-form-item>
|
||||
</div>
|
||||
<div style="display: inline-block; width: 50%">
|
||||
<el-form-item label="检测报告" prop="detectionReport" class="dialog-form-item" :label-width="'80'">
|
||||
<FileUploader v-model="dialogForm.detectionReport" :limit="1" />
|
||||
</el-form-item>
|
||||
</div>
|
||||
</div>
|
||||
</el-form>
|
||||
<template #footer>
|
||||
<div class="dialog-footer">
|
||||
@ -112,16 +127,23 @@
|
||||
import { ref, reactive, computed, onMounted, onBeforeUnmount, nextTick } from 'vue';
|
||||
import tableComponent from '@/components/tableComponent.vue';
|
||||
import { ElMessage } from 'element-plus';
|
||||
import { getLandList } from '@/apis/inputSuppliesApi/supervisionOfInputs';
|
||||
import { getTraceCompanyList, addTraceCompany, editTraceCompany, deleteTraceCompany } from '@/apis/trace/products';
|
||||
import { getLandInfo } from '@/apis/land';
|
||||
import inputSuppliesApi from '@/apis/inputSuppliesApi';
|
||||
const { getMaterailTypes } = inputSuppliesApi;
|
||||
import {
|
||||
getFertilizeUseRegulatoryRecords,
|
||||
fertilizeUseRegulatorySave,
|
||||
editFertilizeUseRegulatory,
|
||||
delFertilizeUseRegulatory,
|
||||
getLandList,
|
||||
} from '@/apis/inputSuppliesApi/supervisionOfInputs';
|
||||
import request from '@/utils/axios';
|
||||
import { GetDictTypeInfo } from '@/apis/system/dictType';
|
||||
import { useApp } from '@/hooks';
|
||||
const app = useApp();
|
||||
|
||||
// 查询条件
|
||||
const formInline = reactive({
|
||||
keyword: '',
|
||||
name: '',
|
||||
current: 1,
|
||||
size: 10,
|
||||
});
|
||||
@ -135,21 +157,79 @@ const resetForm = () => {
|
||||
};
|
||||
|
||||
// 表格数据
|
||||
const tableData = ref([]);
|
||||
const tableData = ref([
|
||||
{
|
||||
batchCode: 'QY-GM-001',
|
||||
productTypes: '耿马蔗香食品有限公司',
|
||||
name: '有限责任公司',
|
||||
purchaseDate: '91530925MA6P8E1234',
|
||||
number: '杨志明',
|
||||
Unit: '刀玉兰',
|
||||
baseCode: '188-8786-1234',
|
||||
厂址: '云南省临沧市耿马县勐永镇工业园区',
|
||||
入驻时间: '2023-05-10 00:00:00',
|
||||
申请时间: '2023-04-25 00:00:00',
|
||||
},
|
||||
{
|
||||
batchCode: 'QY-GM-002',
|
||||
productTypes: '耿马绿丰食品加工厂',
|
||||
name: '个体工商户',
|
||||
purchaseDate: '92530925L3D5F9876',
|
||||
number: '李红梅',
|
||||
Unit: '岩温罕',
|
||||
baseCode: '159-8723-4567',
|
||||
厂址: '云南省临沧市耿马县孟定镇',
|
||||
入驻时间: '2022-11-15 00:00:00',
|
||||
申请时间: '2022-10-30 00:00:00',
|
||||
},
|
||||
{
|
||||
batchCode: 'QY-GM-003',
|
||||
productTypes: '耿马辣味坊食品厂',
|
||||
name: '个人独资企业',
|
||||
purchaseDate: '91530925G7H2K6543',
|
||||
number: '张丽华',
|
||||
Unit: '罕香',
|
||||
baseCode: '137-8765-3210',
|
||||
厂址: '云南省临沧市耿马县四排山乡',
|
||||
入驻时间: '2024-02-20 00:00:00',
|
||||
申请时间: '2024-01-18 00:00:00',
|
||||
},
|
||||
{
|
||||
batchCode: 'QY-GM-004',
|
||||
productTypes: '耿马山野农产加工厂',
|
||||
name: '有限责任公司',
|
||||
purchaseDate: '91530925N9J4R7890',
|
||||
number: '周建国',
|
||||
Unit: '俸春燕',
|
||||
baseCode: '182-8834-5678',
|
||||
厂址: '云南省临沧市耿马县贺派乡',
|
||||
入驻时间: '2023-08-05 00:00:00',
|
||||
申请时间: '2023-07-22 00:00:00',
|
||||
},
|
||||
{
|
||||
batchCode: 'QY-GM-005',
|
||||
productTypes: '耿马原生茶业',
|
||||
name: '农民专业合作社',
|
||||
purchaseDate: '93530925P5K6T2345',
|
||||
number: '赵志强',
|
||||
Unit: '艾叶',
|
||||
baseCode: '151-8790-4321',
|
||||
厂址: '云南省临沧市耿马县大兴乡',
|
||||
入驻时间: '2022-09-12 00:00:00',
|
||||
申请时间: '2022-08-28 00:00:00',
|
||||
},
|
||||
]);
|
||||
const selectedIds = ref([]);
|
||||
const tableLoading = ref(false);
|
||||
const tableTotal = ref(0);
|
||||
const columns = ref([
|
||||
{ prop: 'comCode', label: '企业编码' },
|
||||
{ prop: 'comName', label: '企业名称' },
|
||||
{ prop: 'comType', label: '企业类型' },
|
||||
{ prop: 'uscc', label: '统一社会信用代码' },
|
||||
{ prop: 'legalName', label: '法人信息' },
|
||||
{ prop: 'contactName', label: '联系人' },
|
||||
{ prop: 'phone', label: '电话' },
|
||||
{ prop: 'address', label: '厂址' },
|
||||
{ prop: 'tenancyTime', label: '入驻时间' },
|
||||
{ prop: 'applyTime', label: '申请时间' },
|
||||
{ prop: 'batchCode', label: '企业编码' },
|
||||
{ prop: 'productTypes', label: '生产商' },
|
||||
{ prop: 'name', label: '企业类型' },
|
||||
{ prop: 'purchaseDate', label: '统一社会信用代码' },
|
||||
{ prop: 'number', label: '法人信息' },
|
||||
{ prop: 'Unit', label: '联系人' },
|
||||
{ prop: 'baseCode', label: '电话' },
|
||||
{ prop: 'action', label: '操作', slotName: 'action', width: 100, fixed: 'right' },
|
||||
]);
|
||||
const handlePaginationChange = ({ page, pageSize }) => {
|
||||
@ -158,18 +238,37 @@ const handlePaginationChange = ({ page, pageSize }) => {
|
||||
loadData();
|
||||
};
|
||||
const loadData = async () => {
|
||||
tableLoading.value = true;
|
||||
try {
|
||||
let response = await getTraceCompanyList(formInline);
|
||||
tableLoading.value = false;
|
||||
if (response.code == 200) {
|
||||
tableData.value = response.data.records;
|
||||
tableTotal.value = response.data.total;
|
||||
// tableLoading.value = true;
|
||||
// try {
|
||||
// let response = await getFertilizeUseRegulatoryRecords(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);
|
||||
}
|
||||
}
|
||||
}
|
||||
} catch (error) {
|
||||
tableLoading.value = false;
|
||||
console.error(error);
|
||||
}
|
||||
return result;
|
||||
};
|
||||
const seedTypeChange = () => {
|
||||
console.log(formInline.seedTypeId);
|
||||
@ -180,90 +279,100 @@ 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({
|
||||
comCode: '', //企业编码
|
||||
comName: '', //企业名称
|
||||
comType: '', //企业类型
|
||||
uscc: '', //统一社会信用代码
|
||||
legalName: '', //法人信息
|
||||
contactName: '', //联系人
|
||||
regionCode: '', //所属行政区域代码
|
||||
regionName: '', //所属行政区域名称
|
||||
gridId: '', //所属网格代码
|
||||
gridName: '', //所属网格名称
|
||||
landId: '', //地块id
|
||||
landName: '', //地块名称
|
||||
name: '', //姓名
|
||||
phone: '', //联系方式
|
||||
address: '', //厂址
|
||||
tenancyTime: '', //入驻时间
|
||||
applyTime: '', //申请时间
|
||||
fertilizeId: '', //肥料名称id
|
||||
fertilizeName: '', //肥料名称
|
||||
useNumber: 1, //使用量
|
||||
useUnit: 'g', //使用量单位
|
||||
useTime: '', //使用时间
|
||||
businessEntityCode: '', //经营主体编码
|
||||
businessEntityName: '', //经营主体名称
|
||||
detectionTime: '', //检测时间
|
||||
detectionResult: '', //检测结果'
|
||||
detectionUnit: '', //检测单位
|
||||
detectionReport: '', //检测报告
|
||||
});
|
||||
const initDialogForm = { ...dialogForm };
|
||||
console.log(initDialogForm);
|
||||
const dialogFormRules = ref({
|
||||
comName: [{ required: true, message: '请输入', trigger: 'blur' }],
|
||||
uscc: [
|
||||
{ required: true, message: '请输入', trigger: 'blur' },
|
||||
{
|
||||
validator: (rule, value, callback) => {
|
||||
if (!/^[0-9A-Za-z]+$/.test(value)) {
|
||||
callback(new Error('企业信用代码只能包含数字和字母'));
|
||||
} else if (value.length !== 18) {
|
||||
// 可选：限制18位长度
|
||||
callback(new Error('企业信用代码必须为18位'));
|
||||
} else {
|
||||
callback();
|
||||
}
|
||||
},
|
||||
trigger: 'blur',
|
||||
},
|
||||
],
|
||||
legalName: [{ required: true, message: '请输入', trigger: 'blur' }],
|
||||
contactName: [{ required: true, message: '请输入', trigger: 'blur' }],
|
||||
phone: [
|
||||
{ required: true, message: '请输入', trigger: 'blur' },
|
||||
{
|
||||
pattern: /^1[3-9]\d{9}$/,
|
||||
message: '请输入正确的11位手机号',
|
||||
trigger: 'blur',
|
||||
},
|
||||
],
|
||||
address: [{ required: true, message: '请输入', trigger: 'blur' }],
|
||||
tenancyTime: [{ required: true, message: '请选择入驻时间', trigger: 'blur' }],
|
||||
applyTime: [{ required: true, message: '请选择申请时间', trigger: 'blur' }],
|
||||
comType: [
|
||||
fertilizeId: [{ required: true, message: '请输入肥料编号', trigger: 'blur' }],
|
||||
fertilizeName: [{ required: true, message: '请输入肥料名称', trigger: 'blur' }],
|
||||
useNumber: [{ required: true, message: '请输入使用量', trigger: ['change', 'blur'] }],
|
||||
useTime: [{ required: true, message: '请选择使用时间', trigger: 'blur' }],
|
||||
detectionTime: [{ required: true, message: '请选择检测时间', trigger: ['change', 'blur'] }],
|
||||
detectionResult: [
|
||||
{
|
||||
required: true,
|
||||
message: '请选择',
|
||||
message: '请选择检测结果',
|
||||
trigger: 'blur',
|
||||
},
|
||||
],
|
||||
detectionUnit: [{ required: true, message: '请输入检测单位', trigger: 'blur' }],
|
||||
});
|
||||
|
||||
const addItem = async () => {
|
||||
restDialogForm();
|
||||
dialogTitle.value = '新增';
|
||||
formDisabled.value = false;
|
||||
dialogFormVisible.value = true;
|
||||
ElMessage.success('点击新增!');
|
||||
// restDialogForm();
|
||||
// dialogTitle.value = '新增';
|
||||
// formDisabled.value = false;
|
||||
// dialogFormVisible.value = true;
|
||||
};
|
||||
const seeDetails = async (row) => {
|
||||
// ElMessage.success('查看详情!');
|
||||
console.log('查看详情的行: ', row);
|
||||
dialogTitle.value = '详情';
|
||||
formDisabled.value = true;
|
||||
Object.assign(dialogForm, row);
|
||||
dialogFormVisible.value = true;
|
||||
ElMessage.success('查看详情!');
|
||||
// dialogTitle.value = '详情';
|
||||
// formDisabled.value = true;
|
||||
// dialogForm.landId = row.landId;
|
||||
// getDetails();
|
||||
// setDialogForm2();
|
||||
// dialogFormVisible.value = true;
|
||||
};
|
||||
const handleEdit = (row) => {
|
||||
// ElMessage.success('点击编辑!');
|
||||
ElMessage.success('点击编辑!');
|
||||
console.log('要编辑的行: ', row);
|
||||
nowSelectRow.value = row;
|
||||
dialogTitle.value = '编辑';
|
||||
formDisabled.value = false;
|
||||
Object.assign(dialogForm, row);
|
||||
dialogFormVisible.value = true;
|
||||
// nowSelectRow.value = row;
|
||||
// dialogTitle.value = '编辑';
|
||||
// formDisabled.value = false;
|
||||
// dialogForm.landId = row.landId;
|
||||
// getDetails();
|
||||
// setDialogForm2();
|
||||
// dialogFormVisible.value = true;
|
||||
};
|
||||
const setDialogForm = (row) => {
|
||||
Object.assign(dialogForm, row);
|
||||
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 setDialogForm2 = (row) => {
|
||||
dialogForm.fertilizeId = row.fertilizeId;
|
||||
dialogForm.fertilizeName = row.fertilizeName;
|
||||
dialogForm.useNumber = row.useNumber;
|
||||
dialogForm.useUnit = row.useUnit;
|
||||
dialogForm.useTime = row.useTime;
|
||||
dialogForm.detectionTime = row.detectionTime;
|
||||
dialogForm.detectionResult = row.detectionResult;
|
||||
dialogForm.detectionUnit = row.detectionUnit;
|
||||
dialogForm.detectionReport = row.detectionReport ?? '';
|
||||
};
|
||||
// 获取地块信息
|
||||
const getDetails = async () => {
|
||||
let response = await getLandInfo(dialogForm.landId);
|
||||
let response = await request({
|
||||
url: `/land-resource/landManage/getLandInfo?landId=${dialogForm.landId}`,
|
||||
});
|
||||
console.log(response);
|
||||
if (response.code == 200) {
|
||||
if (response.data) {
|
||||
@ -298,7 +407,7 @@ const handleDelete = (row) => {
|
||||
};
|
||||
const deleteGoods = async (ids) => {
|
||||
try {
|
||||
let res = await deleteTraceCompany(ids);
|
||||
let res = await delFertilizeUseRegulatory(ids);
|
||||
return res;
|
||||
} catch (error) {
|
||||
return false;
|
||||
@ -306,6 +415,10 @@ const deleteGoods = async (ids) => {
|
||||
};
|
||||
const onSaveCategory = () => {
|
||||
console.log(dialogForm);
|
||||
if (dialogForm.landId == '') {
|
||||
landSelectRef.value.handleChange();
|
||||
return;
|
||||
}
|
||||
dialogRef.value.validate(async (valid, fields) => {
|
||||
if (valid) {
|
||||
try {
|
||||
@ -313,10 +426,10 @@ const onSaveCategory = () => {
|
||||
console.log(param);
|
||||
let response;
|
||||
if (dialogTitle.value == '新增') {
|
||||
response = await addTraceCompany(param);
|
||||
response = await fertilizeUseRegulatorySave(param);
|
||||
} else {
|
||||
param.id = nowSelectRow.value.id;
|
||||
response = await editTraceCompany(param);
|
||||
response = await editFertilizeUseRegulatory(param);
|
||||
}
|
||||
if (response?.code == 200) {
|
||||
cancelDialog();
|
||||
@ -340,10 +453,49 @@ const cancelDialog = async () => {
|
||||
dialogFormVisible.value = false;
|
||||
};
|
||||
const restDialogForm = () => {
|
||||
Object.assign(dialogForm, initDialogForm);
|
||||
Object.assign(dialogForm, {
|
||||
regionCode: '', //所属行政区域代码
|
||||
regionName: '', //所属行政区域名称
|
||||
gridId: '', //所属网格代码
|
||||
gridName: '', //所属网格名称
|
||||
landId: '', //地块id
|
||||
landName: '', //地块名称
|
||||
name: '', //姓名
|
||||
phone: '', //联系方式
|
||||
fertilizeId: '', //肥料名称id
|
||||
fertilizeName: '', //肥料名称
|
||||
useNumber: 1, //使用量
|
||||
useUnit: 'g', //使用量单位
|
||||
useTime: '', //使用时间
|
||||
businessEntityCode: '', //经营主体编码
|
||||
businessEntityName: '', //经营主体名称
|
||||
detectionTime: '', //检测时间
|
||||
detectionResult: '', //检测结果'
|
||||
detectionUnit: '', //检测单位
|
||||
detectionReport: '', //检测报告
|
||||
});
|
||||
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 unitList = ref([
|
||||
{ dictCode: '52', dictValue: 'g' },
|
||||
{ dictCode: '53', dictValue: 'kg' },
|
||||
@ -380,8 +532,9 @@ const getEntityOptions = async () => {
|
||||
|
||||
onMounted(() => {
|
||||
onSubmit();
|
||||
// getLandsList();
|
||||
// getEntityOptions();
|
||||
getLandsList();
|
||||
getEntityOptions();
|
||||
// getSeedTypeList();
|
||||
});
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
|
||||
@ -0,0 +1,691 @@
|
||||
<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="harvestBatch">
|
||||
<el-input v-model="formInline.harvestBatch" 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="产品名称" prop="name">
|
||||
<el-input v-model="formInline.name" placeholder="请输入产品名称" clearable />
|
||||
</el-form-item>
|
||||
<el-form-item label="采收日期" prop="date1">
|
||||
<el-date-picker v-model="formInline.date1" type="date" placeholder="请选择采收时间" style="width: 100%" />
|
||||
</el-form-item>
|
||||
<el-form-item label="原场地" prop="name">
|
||||
<el-input v-model="formInline.name" placeholder="请输入原场地" clearable />
|
||||
</el-form-item>
|
||||
<el-form-item label="经营主体" prop="name">
|
||||
<el-input v-model="formInline.name" placeholder="请输入经营主体" clearable />
|
||||
</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" 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.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>
|
||||
<el-descriptions title="经营主体信息" border class="mb-20 custom-descriptions" :column="2">
|
||||
<el-descriptions-item label="经营主体编码">{{ dialogForm.businessEntityCode }}</el-descriptions-item>
|
||||
<el-descriptions-item label="经营主体名称">{{ dialogForm.businessEntityName }}</el-descriptions-item>
|
||||
</el-descriptions>
|
||||
<el-form
|
||||
ref="dialogRef"
|
||||
:model="dialogForm"
|
||||
:inline="true"
|
||||
:label-width="'100'"
|
||||
:rules="dialogFormRules"
|
||||
:disabled="formDisabled"
|
||||
class="dialog-form-container"
|
||||
>
|
||||
<div class="el-descriptions__title" style="margin-bottom: 16px">农药用药详情</div>
|
||||
<el-form-item label="肥料编号" prop="fertilizeId" class="dialog-form-item">
|
||||
<el-input v-model="dialogForm.fertilizeId" clearable placeholder="请输入肥料编号" />
|
||||
</el-form-item>
|
||||
<el-form-item label="肥料名称" prop="fertilizeName" class="dialog-form-item">
|
||||
<el-input v-model="dialogForm.fertilizeName" 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-position="right" placeholder="请输入使用量" style="width: 150px" />
|
||||
<el-select v-model="dialogForm.useUnit" placeholder="请选择" style="width: 80px">
|
||||
<el-option v-for="el in unitList" :key="el.dictValue" :value="el.dictValue" :label="el.dictValue" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="使用时间" prop="useTime" class="dialog-form-item">
|
||||
<el-date-picker v-model="dialogForm.useTime" :clearable="false" type="date" value-format="YYYY-MM-DD" placeholder="请选择使用时间" />
|
||||
</el-form-item>
|
||||
<div class="el-descriptions__title" style="margin-bottom: 16px">检测信息</div>
|
||||
<div style="display: flex">
|
||||
<div style="display: inline-block; width: 48%">
|
||||
<el-form-item label="检测时间" prop="detectionTime" class="dialog-form-item" :label-width="'100'">
|
||||
<el-date-picker
|
||||
v-model="dialogForm.detectionTime"
|
||||
:clearable="false"
|
||||
type="date"
|
||||
value-format="YYYY-MM-DD"
|
||||
placeholder="请选择检测时间"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="检测结果" prop="detectionResult" class="dialog-form-item" :label-width="'100'">
|
||||
<el-select v-model="dialogForm.detectionResult" placeholder="请选择">
|
||||
<el-option value="合格" label="合格" />
|
||||
<el-option value="不合格" label="不合格" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="检测单位" prop="detectionUnit" class="dialog-form-item" :label-width="'100'">
|
||||
<el-input v-model="dialogForm.detectionUnit" clearable placeholder="请输入检测单位" />
|
||||
</el-form-item>
|
||||
</div>
|
||||
<div style="display: inline-block; width: 50%">
|
||||
<el-form-item label="检测报告" prop="detectionReport" class="dialog-form-item" :label-width="'80'">
|
||||
<FileUploader v-model="dialogForm.detectionReport" :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 {
|
||||
getFertilizeUseRegulatoryRecords,
|
||||
fertilizeUseRegulatorySave,
|
||||
editFertilizeUseRegulatory,
|
||||
delFertilizeUseRegulatory,
|
||||
getLandList,
|
||||
} from '@/apis/inputSuppliesApi/supervisionOfInputs';
|
||||
import request from '@/utils/axios';
|
||||
import { GetDictTypeInfo } from '@/apis/system/dictType';
|
||||
import { useApp } from '@/hooks';
|
||||
const app = useApp();
|
||||
|
||||
// 查询条件
|
||||
const formInline = reactive({
|
||||
harvestBatch: '',
|
||||
name: '',
|
||||
seedTypeId: '',
|
||||
date1: '',
|
||||
current: 1,
|
||||
size: 10,
|
||||
});
|
||||
const searchForm = ref(null);
|
||||
const onSubmit = () => {
|
||||
formInline.current = 1;
|
||||
loadData();
|
||||
};
|
||||
const resetForm = () => {
|
||||
searchForm.value.resetFields();
|
||||
};
|
||||
|
||||
// 表格数据
|
||||
const tableData = ref([
|
||||
{
|
||||
batchCode: 'GM2025041201',
|
||||
productTypes: '黄皮甘蔗',
|
||||
name: '黄皮甘蔗',
|
||||
purchaseDate: '2025-04-12 00:00:00',
|
||||
number: 50,
|
||||
Unit: '吨',
|
||||
baseCode: 'GMZJ017',
|
||||
baseName: '耿马镇甘蔗基地',
|
||||
baseAddress: '耿马镇南华村',
|
||||
plotCode: 'GMDK034',
|
||||
plotName: '甘蔗地块七',
|
||||
businessEntity: '耿马镇甘蔗种植合作社',
|
||||
record: '张浩于2025-01-15播种，2025-03-20施肥，2025-04-05灌溉，2025-04-10病虫害防治',
|
||||
createDate: '2025-04-12 08:30:15',
|
||||
},
|
||||
{
|
||||
batchCode: 'GM2025041802',
|
||||
productTypes: '圆茄',
|
||||
name: '圆茄',
|
||||
purchaseDate: '2025-04-18 00:00:00',
|
||||
number: 150,
|
||||
Unit: '箱',
|
||||
baseCode: 'GMZJ009',
|
||||
baseName: '勐永镇蔬菜基地',
|
||||
baseAddress: '勐永镇红星村',
|
||||
plotCode: 'GMDK021',
|
||||
plotName: '圆茄地块三',
|
||||
businessEntity: '勐永镇蔬菜种植合作社',
|
||||
record: '李明2025-01-20播种，2025-03-25施肥，2025-04-10灌溉',
|
||||
createDate: '2025-04-18 09:45:30',
|
||||
},
|
||||
{
|
||||
batchCode: 'GM2025041503',
|
||||
productTypes: '小米辣',
|
||||
name: '小米辣',
|
||||
purchaseDate: '2025-04-15 00:00:00',
|
||||
number: 80,
|
||||
Unit: '箱',
|
||||
baseCode: 'GMZJ012',
|
||||
baseName: '四排山乡辣椒基地',
|
||||
baseAddress: '四排山乡光明村',
|
||||
plotCode: 'GMDK042',
|
||||
plotName: '小米辣地块五',
|
||||
businessEntity: '四排山乡辣椒种植户',
|
||||
record: '赵强东2025-01-10播种，2025-03-15施肥，2025-04-01灌溉',
|
||||
createDate: '2025-04-15 10:20:45',
|
||||
},
|
||||
{
|
||||
batchCode: 'GM2025042004',
|
||||
productTypes: '丝瓜',
|
||||
name: '丝瓜',
|
||||
purchaseDate: '2025-04-20 00:00:00',
|
||||
number: 100,
|
||||
Unit: '箱',
|
||||
baseCode: 'GMZJ005',
|
||||
baseName: '勐撒镇蔬菜园',
|
||||
baseAddress: '勐撒镇建设村',
|
||||
plotCode: 'GMDK018',
|
||||
plotName: '丝瓜地块一',
|
||||
businessEntity: '勐撒镇蔬菜种植协会',
|
||||
record: '刘洋2025-01-25播种，2025-03-30施肥，2025-04-12灌溉',
|
||||
createDate: '2025-04-20 11:55:20',
|
||||
},
|
||||
{
|
||||
batchCode: 'GM2025041705',
|
||||
productTypes: '苦瓜',
|
||||
name: '苦瓜',
|
||||
purchaseDate: '2025-04-17 00:00:00',
|
||||
number: 90,
|
||||
Unit: '箱',
|
||||
baseCode: 'GMZJ014',
|
||||
baseName: '耿马镇苦瓜基地',
|
||||
baseAddress: '耿马镇民主村',
|
||||
plotCode: 'GMDK038',
|
||||
plotName: '苦瓜地块二',
|
||||
businessEntity: '耿马镇苦瓜种植户',
|
||||
record: '陈宇2025-01-18播种，2025-03-22施肥，2025-04-08灌溉',
|
||||
createDate: '2025-04-17 12:30:35',
|
||||
},
|
||||
{
|
||||
batchCode: 'GM2025042206',
|
||||
productTypes: '香蕉',
|
||||
name: '香蕉',
|
||||
purchaseDate: '2025-04-22 00:00:00',
|
||||
number: 200,
|
||||
Unit: '箱',
|
||||
baseCode: 'GMZJ007',
|
||||
baseName: '勐永镇香蕉园',
|
||||
baseAddress: '勐永镇幸福村',
|
||||
plotCode: 'GMDK027',
|
||||
plotName: '香蕉地块四',
|
||||
businessEntity: '勐永镇香蕉种植合作社',
|
||||
record: '赵莉菊2024-08-10种植，2025-02-15施肥，2025-04-15灌溉',
|
||||
createDate: '2025-04-22 13:05:40',
|
||||
},
|
||||
{
|
||||
batchCode: 'GM2025041907',
|
||||
productTypes: '榴莲',
|
||||
name: '榴莲',
|
||||
purchaseDate: '2025-04-19 00:00:00',
|
||||
number: 60,
|
||||
Unit: '箱',
|
||||
baseCode: 'GMZJ019',
|
||||
baseName: '勐撒镇榴莲园',
|
||||
baseAddress: '勐撒镇团结村',
|
||||
plotCode: 'GMDK051',
|
||||
plotName: '榴莲地块六',
|
||||
businessEntity: '勐撒镇榴莲种植户',
|
||||
record: '周同于2024-07-15种植，2025-02-20施肥，2025-04-10灌溉',
|
||||
createDate: '2025-04-19 14:40:45',
|
||||
},
|
||||
{
|
||||
batchCode: 'GM2025042108',
|
||||
productTypes: '芒果',
|
||||
name: '芒果',
|
||||
purchaseDate: '2025-04-21 00:00:00',
|
||||
number: 180,
|
||||
Unit: '箱',
|
||||
baseCode: 'GMZJ011',
|
||||
baseName: '耿马镇芒果园',
|
||||
baseAddress: '耿马镇和平村',
|
||||
plotCode: 'GMDK047',
|
||||
plotName: '芒果地块八',
|
||||
businessEntity: '耿马镇芒果种植合作社',
|
||||
record: '吴强浩2024-09-20种植，2025-02-25施肥，2025-04-13灌溉',
|
||||
createDate: '2025-04-21 15:15:50',
|
||||
},
|
||||
{
|
||||
batchCode: 'GM2025041609',
|
||||
productTypes: '铁皮石斛',
|
||||
name: '铁皮石斛',
|
||||
purchaseDate: '2025-04-16 00:00:00',
|
||||
number: 40,
|
||||
Unit: '千克',
|
||||
baseCode: 'GMZJ021',
|
||||
baseName: '四排山乡石斛基地',
|
||||
baseAddress: '四排山乡繁荣村',
|
||||
plotCode: 'GMDK053',
|
||||
plotName: '石斛地块九',
|
||||
businessEntity: '四排山乡石斛种植合作社',
|
||||
record: '吴迪于2024-10-10种植，2025-01-15施肥，2025-04-05灌溉',
|
||||
createDate: '2025-04-16 09:50:55',
|
||||
},
|
||||
]);
|
||||
const selectedIds = ref([]);
|
||||
const tableLoading = ref(false);
|
||||
const tableTotal = ref(0);
|
||||
const columns = ref([
|
||||
{ prop: 'batchCode', label: '采收批次编码' },
|
||||
{ prop: 'productTypes', label: '产品种类' },
|
||||
{ prop: 'name', label: '农产品名称' },
|
||||
{ prop: 'purchaseDate', label: '采购日期' },
|
||||
{ prop: 'number', label: '数量' },
|
||||
{ prop: 'Unit', label: '单位' },
|
||||
{ prop: 'baseCode', label: '种植基地编码' },
|
||||
{ prop: 'baseName', label: '种植基地名称' },
|
||||
{ prop: 'baseAddress', label: '基地地址' },
|
||||
{ prop: 'plotCode', label: '地块编码' },
|
||||
{ prop: 'plotName', label: '地块名称' },
|
||||
{ prop: 'businessEntity', label: '经营主体' },
|
||||
{ prop: 'record', label: '农事活动记录', width: 200 },
|
||||
{ prop: 'createDate', label: '创建日期' },
|
||||
{ prop: 'action', label: '操作', slotName: 'action', width: 100, fixed: 'right' },
|
||||
]);
|
||||
const handlePaginationChange = ({ page, pageSize }) => {
|
||||
formInline.current = page;
|
||||
formInline.size = pageSize;
|
||||
loadData();
|
||||
};
|
||||
const loadData = async () => {
|
||||
// tableLoading.value = true;
|
||||
// try {
|
||||
// let response = await getFertilizeUseRegulatoryRecords(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 landSelectRef = ref(null);
|
||||
const nowSelectRow = ref({});
|
||||
const dialogForm = reactive({
|
||||
regionCode: '', //所属行政区域代码
|
||||
regionName: '', //所属行政区域名称
|
||||
gridId: '', //所属网格代码
|
||||
gridName: '', //所属网格名称
|
||||
landId: '', //地块id
|
||||
landName: '', //地块名称
|
||||
name: '', //姓名
|
||||
phone: '', //联系方式
|
||||
fertilizeId: '', //肥料名称id
|
||||
fertilizeName: '', //肥料名称
|
||||
useNumber: 1, //使用量
|
||||
useUnit: 'g', //使用量单位
|
||||
useTime: '', //使用时间
|
||||
businessEntityCode: '', //经营主体编码
|
||||
businessEntityName: '', //经营主体名称
|
||||
detectionTime: '', //检测时间
|
||||
detectionResult: '', //检测结果'
|
||||
detectionUnit: '', //检测单位
|
||||
detectionReport: '', //检测报告
|
||||
});
|
||||
const dialogFormRules = ref({
|
||||
fertilizeId: [{ required: true, message: '请输入肥料编号', trigger: 'blur' }],
|
||||
fertilizeName: [{ required: true, message: '请输入肥料名称', trigger: 'blur' }],
|
||||
useNumber: [{ required: true, message: '请输入使用量', trigger: ['change', 'blur'] }],
|
||||
useTime: [{ required: true, message: '请选择使用时间', trigger: 'blur' }],
|
||||
detectionTime: [{ required: true, message: '请选择检测时间', trigger: ['change', 'blur'] }],
|
||||
detectionResult: [
|
||||
{
|
||||
required: true,
|
||||
message: '请选择检测结果',
|
||||
trigger: 'blur',
|
||||
},
|
||||
],
|
||||
detectionUnit: [{ 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 = '详情';
|
||||
// formDisabled.value = true;
|
||||
// dialogForm.landId = row.landId;
|
||||
// getDetails();
|
||||
// setDialogForm2();
|
||||
// dialogFormVisible.value = true;
|
||||
};
|
||||
const handleEdit = (row) => {
|
||||
ElMessage.success('点击编辑!');
|
||||
console.log('要编辑的行: ', row);
|
||||
// nowSelectRow.value = row;
|
||||
// dialogTitle.value = '编辑';
|
||||
// formDisabled.value = false;
|
||||
// dialogForm.landId = row.landId;
|
||||
// getDetails();
|
||||
// setDialogForm2();
|
||||
// dialogFormVisible.value = true;
|
||||
};
|
||||
const setDialogForm = (row) => {
|
||||
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 setDialogForm2 = (row) => {
|
||||
dialogForm.fertilizeId = row.fertilizeId;
|
||||
dialogForm.fertilizeName = row.fertilizeName;
|
||||
dialogForm.useNumber = row.useNumber;
|
||||
dialogForm.useUnit = row.useUnit;
|
||||
dialogForm.useTime = row.useTime;
|
||||
dialogForm.detectionTime = row.detectionTime;
|
||||
dialogForm.detectionResult = row.detectionResult;
|
||||
dialogForm.detectionUnit = row.detectionUnit;
|
||||
dialogForm.detectionReport = row.detectionReport ?? '';
|
||||
};
|
||||
// 获取地块信息
|
||||
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 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 delFertilizeUseRegulatory(ids);
|
||||
return res;
|
||||
} catch (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 };
|
||||
console.log(param);
|
||||
let response;
|
||||
if (dialogTitle.value == '新增') {
|
||||
response = await fertilizeUseRegulatorySave(param);
|
||||
} else {
|
||||
param.id = nowSelectRow.value.id;
|
||||
response = await editFertilizeUseRegulatory(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, {
|
||||
regionCode: '', //所属行政区域代码
|
||||
regionName: '', //所属行政区域名称
|
||||
gridId: '', //所属网格代码
|
||||
gridName: '', //所属网格名称
|
||||
landId: '', //地块id
|
||||
landName: '', //地块名称
|
||||
name: '', //姓名
|
||||
phone: '', //联系方式
|
||||
fertilizeId: '', //肥料名称id
|
||||
fertilizeName: '', //肥料名称
|
||||
useNumber: 1, //使用量
|
||||
useUnit: 'g', //使用量单位
|
||||
useTime: '', //使用时间
|
||||
businessEntityCode: '', //经营主体编码
|
||||
businessEntityName: '', //经营主体名称
|
||||
detectionTime: '', //检测时间
|
||||
detectionResult: '', //检测结果'
|
||||
detectionUnit: '', //检测单位
|
||||
detectionReport: '', //检测报告
|
||||
});
|
||||
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 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' },
|
||||
];
|
||||
}
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
onSubmit();
|
||||
getLandsList();
|
||||
getEntityOptions();
|
||||
// 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;
|
||||
}
|
||||
}
|
||||
|
||||
/* 必须使用深度选择器 + 精确DOM层级 */
|
||||
.custom-descriptions :deep(.el-descriptions__body) table.el-descriptions__table {
|
||||
table-layout: fixed;
|
||||
/* 关键属性1：强制等宽 */
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.custom-descriptions :deep(.el-descriptions__label) {
|
||||
padding-right: 20px;
|
||||
width: 130px !important;
|
||||
/* 关键属性2：固定宽度 */
|
||||
min-width: 130px !important;
|
||||
max-width: 130px !important;
|
||||
font-weight: bold;
|
||||
text-align: left;
|
||||
background: #f5f7fa;
|
||||
}
|
||||
|
||||
.custom-descriptions :deep(.el-descriptions__content) {
|
||||
width: calc(100% - 130px) !important;
|
||||
/* 自动填充剩余空间 */
|
||||
word-break: break-word;
|
||||
}
|
||||
</style>
|
||||
@ -1,30 +1,30 @@
|
||||
<template>
|
||||
<div class="app-container">
|
||||
<div class="container-custom">
|
||||
<h2 class="custom-h2">采收批次管理</h2>
|
||||
<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="batchCode">
|
||||
<el-input v-model="formInline.batchCode" placeholder="请输入采收批次编码" clearable />
|
||||
<el-form-item label="采收批次" prop="harvestBatch">
|
||||
<el-input v-model="formInline.harvestBatch" placeholder="请输入采收批次" clearable />
|
||||
</el-form-item>
|
||||
<el-form-item label="产品种类" prop="productType">
|
||||
<el-select v-model="formInline.productType" placeholder="请选择" clearable @change="seedTypeChange">
|
||||
<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="农产品名称" prop="cropName">
|
||||
<el-input v-model="formInline.cropName" placeholder="请输入农产品名称" clearable />
|
||||
<el-form-item label="产品名称" prop="name">
|
||||
<el-input v-model="formInline.name" placeholder="请输入产品名称" clearable />
|
||||
</el-form-item>
|
||||
<el-form-item label="采收日期" prop="harvestDate">
|
||||
<el-date-picker v-model="formInline.harvestDate" type="date" placeholder="请选择采收时间" style="width: 100%" />
|
||||
<el-form-item label="采收日期" prop="date1">
|
||||
<el-date-picker v-model="formInline.date1" type="date" placeholder="请选择采收时间" style="width: 100%" />
|
||||
</el-form-item>
|
||||
<el-form-item label="原产地" prop="traceArea">
|
||||
<el-input v-model="formInline.traceArea" placeholder="请输入原产地" clearable />
|
||||
<el-form-item label="原场地" prop="name">
|
||||
<el-input v-model="formInline.name" placeholder="请输入原场地" clearable />
|
||||
</el-form-item>
|
||||
<el-form-item label="经营主体" prop="businessEntityName">
|
||||
<el-input v-model="formInline.businessEntityName" placeholder="请输入经营主体" clearable />
|
||||
<el-form-item label="经营主体" prop="name">
|
||||
<el-input v-model="formInline.name" placeholder="请输入经营主体" clearable />
|
||||
</el-form-item>
|
||||
<el-form-item label="">
|
||||
<el-button type="primary" icon="Search" @click="onSubmit">查询</el-button>
|
||||
@ -51,9 +51,9 @@
|
||||
>
|
||||
<!-- 自定义-操作 -->
|
||||
<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>
|
||||
<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>
|
||||
@ -145,8 +145,13 @@ import tableComponent from '@/components/tableComponent.vue';
|
||||
import { ElMessage } from 'element-plus';
|
||||
import inputSuppliesApi from '@/apis/inputSuppliesApi';
|
||||
const { getMaterailTypes } = inputSuppliesApi;
|
||||
import { getHarvestBatchList, addHarvestBatch, editHarvestBatch, deleteHarvestBatch } from '@/apis/trace/products';
|
||||
import { getLandList } from '@/apis/inputSuppliesApi/supervisionOfInputs';
|
||||
import {
|
||||
getFertilizeUseRegulatoryRecords,
|
||||
fertilizeUseRegulatorySave,
|
||||
editFertilizeUseRegulatory,
|
||||
delFertilizeUseRegulatory,
|
||||
getLandList,
|
||||
} from '@/apis/inputSuppliesApi/supervisionOfInputs';
|
||||
import request from '@/utils/axios';
|
||||
import { GetDictTypeInfo } from '@/apis/system/dictType';
|
||||
import { useApp } from '@/hooks';
|
||||
@ -154,12 +159,10 @@ const app = useApp();
|
||||
|
||||
// 查询条件
|
||||
const formInline = reactive({
|
||||
batchCode: '',
|
||||
cropName: '',
|
||||
productType: '',
|
||||
harvestDate: '',
|
||||
traceArea: '',
|
||||
businessEntityName: '',
|
||||
harvestBatch: '',
|
||||
name: '',
|
||||
seedTypeId: '',
|
||||
date1: '',
|
||||
current: 1,
|
||||
size: 10,
|
||||
});
|
||||
@ -174,41 +177,169 @@ const resetForm = () => {
|
||||
|
||||
// 表格数据
|
||||
const tableData = ref([
|
||||
// {
|
||||
// batchCode: 'GM2025041201',
|
||||
// productTypes: '黄皮甘蔗',
|
||||
// name: '黄皮甘蔗',
|
||||
// purchaseDate: '2025-04-12 00:00:00',
|
||||
// number: 50,
|
||||
// Unit: '吨',
|
||||
// baseCode: 'GMZJ017',
|
||||
// baseName: '耿马镇甘蔗基地',
|
||||
// baseAddress: '耿马镇南华村',
|
||||
// plotCode: 'GMDK034',
|
||||
// plotName: '甘蔗地块七',
|
||||
// businessEntity: '耿马镇甘蔗种植合作社',
|
||||
// record: '张浩于2025-01-15播种，2025-03-20施肥，2025-04-05灌溉，2025-04-10病虫害防治',
|
||||
// createDate: '2025-04-12 08:30:15',
|
||||
// },
|
||||
{
|
||||
batchCode: 'GM2025041201',
|
||||
productTypes: '黄皮甘蔗',
|
||||
name: '黄皮甘蔗',
|
||||
purchaseDate: '2025-04-12 00:00:00',
|
||||
number: 50,
|
||||
Unit: '吨',
|
||||
baseCode: 'GMZJ017',
|
||||
baseName: '耿马镇甘蔗基地',
|
||||
baseAddress: '耿马镇南华村',
|
||||
plotCode: 'GMDK034',
|
||||
plotName: '甘蔗地块七',
|
||||
businessEntity: '耿马镇甘蔗种植合作社',
|
||||
record: '张浩于2025-01-15播种，2025-03-20施肥，2025-04-05灌溉，2025-04-10病虫害防治',
|
||||
createDate: '2025-04-12 08:30:15',
|
||||
},
|
||||
{
|
||||
batchCode: 'GM2025041802',
|
||||
productTypes: '圆茄',
|
||||
name: '圆茄',
|
||||
purchaseDate: '2025-04-18 00:00:00',
|
||||
number: 150,
|
||||
Unit: '箱',
|
||||
baseCode: 'GMZJ009',
|
||||
baseName: '勐永镇蔬菜基地',
|
||||
baseAddress: '勐永镇红星村',
|
||||
plotCode: 'GMDK021',
|
||||
plotName: '圆茄地块三',
|
||||
businessEntity: '勐永镇蔬菜种植合作社',
|
||||
record: '李明2025-01-20播种，2025-03-25施肥，2025-04-10灌溉',
|
||||
createDate: '2025-04-18 09:45:30',
|
||||
},
|
||||
{
|
||||
batchCode: 'GM2025041503',
|
||||
productTypes: '小米辣',
|
||||
name: '小米辣',
|
||||
purchaseDate: '2025-04-15 00:00:00',
|
||||
number: 80,
|
||||
Unit: '箱',
|
||||
baseCode: 'GMZJ012',
|
||||
baseName: '四排山乡辣椒基地',
|
||||
baseAddress: '四排山乡光明村',
|
||||
plotCode: 'GMDK042',
|
||||
plotName: '小米辣地块五',
|
||||
businessEntity: '四排山乡辣椒种植户',
|
||||
record: '赵强东2025-01-10播种，2025-03-15施肥，2025-04-01灌溉',
|
||||
createDate: '2025-04-15 10:20:45',
|
||||
},
|
||||
{
|
||||
batchCode: 'GM2025042004',
|
||||
productTypes: '丝瓜',
|
||||
name: '丝瓜',
|
||||
purchaseDate: '2025-04-20 00:00:00',
|
||||
number: 100,
|
||||
Unit: '箱',
|
||||
baseCode: 'GMZJ005',
|
||||
baseName: '勐撒镇蔬菜园',
|
||||
baseAddress: '勐撒镇建设村',
|
||||
plotCode: 'GMDK018',
|
||||
plotName: '丝瓜地块一',
|
||||
businessEntity: '勐撒镇蔬菜种植协会',
|
||||
record: '刘洋2025-01-25播种，2025-03-30施肥，2025-04-12灌溉',
|
||||
createDate: '2025-04-20 11:55:20',
|
||||
},
|
||||
{
|
||||
batchCode: 'GM2025041705',
|
||||
productTypes: '苦瓜',
|
||||
name: '苦瓜',
|
||||
purchaseDate: '2025-04-17 00:00:00',
|
||||
number: 90,
|
||||
Unit: '箱',
|
||||
baseCode: 'GMZJ014',
|
||||
baseName: '耿马镇苦瓜基地',
|
||||
baseAddress: '耿马镇民主村',
|
||||
plotCode: 'GMDK038',
|
||||
plotName: '苦瓜地块二',
|
||||
businessEntity: '耿马镇苦瓜种植户',
|
||||
record: '陈宇2025-01-18播种，2025-03-22施肥，2025-04-08灌溉',
|
||||
createDate: '2025-04-17 12:30:35',
|
||||
},
|
||||
{
|
||||
batchCode: 'GM2025042206',
|
||||
productTypes: '香蕉',
|
||||
name: '香蕉',
|
||||
purchaseDate: '2025-04-22 00:00:00',
|
||||
number: 200,
|
||||
Unit: '箱',
|
||||
baseCode: 'GMZJ007',
|
||||
baseName: '勐永镇香蕉园',
|
||||
baseAddress: '勐永镇幸福村',
|
||||
plotCode: 'GMDK027',
|
||||
plotName: '香蕉地块四',
|
||||
businessEntity: '勐永镇香蕉种植合作社',
|
||||
record: '赵莉菊2024-08-10种植，2025-02-15施肥，2025-04-15灌溉',
|
||||
createDate: '2025-04-22 13:05:40',
|
||||
},
|
||||
{
|
||||
batchCode: 'GM2025041907',
|
||||
productTypes: '榴莲',
|
||||
name: '榴莲',
|
||||
purchaseDate: '2025-04-19 00:00:00',
|
||||
number: 60,
|
||||
Unit: '箱',
|
||||
baseCode: 'GMZJ019',
|
||||
baseName: '勐撒镇榴莲园',
|
||||
baseAddress: '勐撒镇团结村',
|
||||
plotCode: 'GMDK051',
|
||||
plotName: '榴莲地块六',
|
||||
businessEntity: '勐撒镇榴莲种植户',
|
||||
record: '周同于2024-07-15种植，2025-02-20施肥，2025-04-10灌溉',
|
||||
createDate: '2025-04-19 14:40:45',
|
||||
},
|
||||
{
|
||||
batchCode: 'GM2025042108',
|
||||
productTypes: '芒果',
|
||||
name: '芒果',
|
||||
purchaseDate: '2025-04-21 00:00:00',
|
||||
number: 180,
|
||||
Unit: '箱',
|
||||
baseCode: 'GMZJ011',
|
||||
baseName: '耿马镇芒果园',
|
||||
baseAddress: '耿马镇和平村',
|
||||
plotCode: 'GMDK047',
|
||||
plotName: '芒果地块八',
|
||||
businessEntity: '耿马镇芒果种植合作社',
|
||||
record: '吴强浩2024-09-20种植，2025-02-25施肥，2025-04-13灌溉',
|
||||
createDate: '2025-04-21 15:15:50',
|
||||
},
|
||||
{
|
||||
batchCode: 'GM2025041609',
|
||||
productTypes: '铁皮石斛',
|
||||
name: '铁皮石斛',
|
||||
purchaseDate: '2025-04-16 00:00:00',
|
||||
number: 40,
|
||||
Unit: '千克',
|
||||
baseCode: 'GMZJ021',
|
||||
baseName: '四排山乡石斛基地',
|
||||
baseAddress: '四排山乡繁荣村',
|
||||
plotCode: 'GMDK053',
|
||||
plotName: '石斛地块九',
|
||||
businessEntity: '四排山乡石斛种植合作社',
|
||||
record: '吴迪于2024-10-10种植，2025-01-15施肥，2025-04-05灌溉',
|
||||
createDate: '2025-04-16 09:50:55',
|
||||
},
|
||||
]);
|
||||
const selectedIds = ref([]);
|
||||
const tableLoading = ref(false);
|
||||
const tableTotal = ref(0);
|
||||
const columns = ref([
|
||||
{ prop: 'batchCode', label: '采收批次编码' },
|
||||
{ prop: 'productType', label: '产品种类' },
|
||||
{ prop: 'cropName', label: '农产品名称' },
|
||||
{ prop: 'harvestDate', label: '采收日期' },
|
||||
{ prop: 'count', label: '数量' },
|
||||
{ prop: 'unit', label: '单位' },
|
||||
{ prop: 'productTypes', label: '产品种类' },
|
||||
{ prop: 'name', label: '农产品名称' },
|
||||
{ prop: 'purchaseDate', label: '采购日期' },
|
||||
{ prop: 'number', label: '数量' },
|
||||
{ prop: 'Unit', label: '单位' },
|
||||
{ prop: 'baseCode', label: '种植基地编码' },
|
||||
{ prop: 'baseName', label: '种植基地名称' },
|
||||
{ prop: 'baseAddress', label: '基地地址' },
|
||||
{ prop: 'landCode', label: '地块编码' },
|
||||
{ prop: 'landName', label: '地块名称' },
|
||||
{ prop: 'businessEntityName', label: '经营主体' },
|
||||
{ prop: 'farmActivityRecords', label: '农事活动记录', width: 200 },
|
||||
{ prop: 'createTime', label: '创建时间' },
|
||||
{ prop: 'plotCode', label: '地块编码' },
|
||||
{ prop: 'plotName', label: '地块名称' },
|
||||
{ prop: 'businessEntity', label: '经营主体' },
|
||||
{ prop: 'record', label: '农事活动记录', width: 200 },
|
||||
{ prop: 'createDate', label: '创建日期' },
|
||||
{ prop: 'action', label: '操作', slotName: 'action', width: 100, fixed: 'right' },
|
||||
]);
|
||||
const handlePaginationChange = ({ page, pageSize }) => {
|
||||
@ -217,18 +348,18 @@ const handlePaginationChange = ({ page, pageSize }) => {
|
||||
loadData();
|
||||
};
|
||||
const loadData = async () => {
|
||||
tableLoading.value = true;
|
||||
try {
|
||||
let response = await getHarvestBatchList(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);
|
||||
}
|
||||
// tableLoading.value = true;
|
||||
// try {
|
||||
// let response = await getFertilizeUseRegulatoryRecords(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) => {
|
||||
@ -386,7 +517,7 @@ const handleDelete = (row) => {
|
||||
};
|
||||
const deleteGoods = async (ids) => {
|
||||
try {
|
||||
let res = await deleteHarvestBatch(ids);
|
||||
let res = await delFertilizeUseRegulatory(ids);
|
||||
return res;
|
||||
} catch (error) {
|
||||
return false;
|
||||
@ -405,10 +536,10 @@ const onSaveCategory = () => {
|
||||
console.log(param);
|
||||
let response;
|
||||
if (dialogTitle.value == '新增') {
|
||||
response = await addHarvestBatch(param);
|
||||
response = await fertilizeUseRegulatorySave(param);
|
||||
} else {
|
||||
param.id = nowSelectRow.value.id;
|
||||
response = await editHarvestBatch(param);
|
||||
response = await editFertilizeUseRegulatory(param);
|
||||
}
|
||||
if (response?.code == 200) {
|
||||
cancelDialog();
|
||||
|
||||
@ -0,0 +1,556 @@
|
||||
<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="harvestBatch">
|
||||
<el-input v-model="formInline.harvestBatch" 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="产品名称" prop="productName">
|
||||
<el-input v-model="formInline.productName" placeholder="请输入产品名称" clearable />
|
||||
</el-form-item>
|
||||
<el-form-item label="质检时间" prop="qualityTime">
|
||||
<el-date-picker v-model="formInline.qualityTime" type="date" placeholder="请选择质检时间" style="width: 100%" />
|
||||
</el-form-item>
|
||||
<el-form-item label="原产地" prop="countryOfOrigin">
|
||||
<el-input v-model="formInline.countryOfOrigin" placeholder="请输入原产地" clearable />
|
||||
</el-form-item>
|
||||
<el-form-item label="经营主体" prop="businessEntity">
|
||||
<el-input v-model="formInline.businessEntity" placeholder="请输入经营主体" clearable />
|
||||
</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 #qualityReportUrl="slotProps">
|
||||
<el-icon style="font-size: 20px; cursor: pointer" color="#3685fe" @click="seeImg(slotProps.row)"><MessageBox /></el-icon>
|
||||
</template>
|
||||
<!-- 自定义-操作 -->
|
||||
<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" 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.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>
|
||||
<el-descriptions title="经营主体信息" border class="mb-20 custom-descriptions" :column="2">
|
||||
<el-descriptions-item label="经营主体编码">{{ dialogForm.businessEntityCode }}</el-descriptions-item>
|
||||
<el-descriptions-item label="经营主体名称">{{ dialogForm.businessEntityName }}</el-descriptions-item>
|
||||
</el-descriptions>
|
||||
<el-form
|
||||
ref="dialogRef"
|
||||
:model="dialogForm"
|
||||
:inline="true"
|
||||
:label-width="'100'"
|
||||
:rules="dialogFormRules"
|
||||
:disabled="formDisabled"
|
||||
class="dialog-form-container"
|
||||
>
|
||||
<div class="el-descriptions__title" style="margin-bottom: 16px">农药用药详情</div>
|
||||
<el-form-item label="肥料编号" prop="fertilizeId" class="dialog-form-item">
|
||||
<el-input v-model="dialogForm.fertilizeId" clearable placeholder="请输入肥料编号" />
|
||||
</el-form-item>
|
||||
<el-form-item label="肥料名称" prop="fertilizeName" class="dialog-form-item">
|
||||
<el-input v-model="dialogForm.fertilizeName" 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-position="right" placeholder="请输入使用量" style="width: 150px" />
|
||||
<el-select v-model="dialogForm.useUnit" placeholder="请选择" style="width: 80px">
|
||||
<el-option v-for="el in unitList" :key="el.dictValue" :value="el.dictValue" :label="el.dictValue" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="使用时间" prop="useTime" class="dialog-form-item">
|
||||
<el-date-picker v-model="dialogForm.useTime" :clearable="false" type="date" value-format="YYYY-MM-DD" placeholder="请选择使用时间" />
|
||||
</el-form-item>
|
||||
<div class="el-descriptions__title" style="margin-bottom: 16px">检测信息</div>
|
||||
<div style="display: flex">
|
||||
<div style="display: inline-block; width: 48%">
|
||||
<el-form-item label="检测时间" prop="detectionTime" class="dialog-form-item" :label-width="'100'">
|
||||
<el-date-picker
|
||||
v-model="dialogForm.detectionTime"
|
||||
:clearable="false"
|
||||
type="date"
|
||||
value-format="YYYY-MM-DD"
|
||||
placeholder="请选择检测时间"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="检测结果" prop="detectionResult" class="dialog-form-item" :label-width="'100'">
|
||||
<el-select v-model="dialogForm.detectionResult" placeholder="请选择">
|
||||
<el-option value="合格" label="合格" />
|
||||
<el-option value="不合格" label="不合格" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="检测单位" prop="detectionUnit" class="dialog-form-item" :label-width="'100'">
|
||||
<el-input v-model="dialogForm.detectionUnit" clearable placeholder="请输入检测单位" />
|
||||
</el-form-item>
|
||||
</div>
|
||||
<div style="display: inline-block; width: 50%">
|
||||
<el-form-item label="检测报告" prop="detectionReport" class="dialog-form-item" :label-width="'80'">
|
||||
<FileUploader v-model="dialogForm.detectionReport" :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>
|
||||
|
||||
<el-image-viewer v-if="showPreview" :url-list="srcList" show-progress :initial-index="0" @close="showPreview = false" />
|
||||
</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 {
|
||||
fertilizeUseRegulatorySave,
|
||||
editFertilizeUseRegulatory,
|
||||
delFertilizeUseRegulatory,
|
||||
getLandList,
|
||||
} from '@/apis/inputSuppliesApi/supervisionOfInputs';
|
||||
import { getQualityManageList, getQualityInfo } from '@/apis/trace/products';
|
||||
import { GetDictTypeInfo } from '@/apis/system/dictType';
|
||||
import { useApp } from '@/hooks';
|
||||
const app = useApp();
|
||||
import imgUrl from '@/assets/images/trace/testReport.png';
|
||||
|
||||
// 查询条件
|
||||
const formInline = reactive({
|
||||
harvestBatch: '',
|
||||
productName: '',
|
||||
seedTypeId: '',
|
||||
qualityTime: '',
|
||||
countryOfOrigin: '',
|
||||
businessEntity: '',
|
||||
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: 'harvestBatch', label: '采收批次编码' },
|
||||
{ prop: 'productName', label: '原材料名称' },
|
||||
{ prop: 'qualityReportUrl', label: '质检报告', slotName: 'qualityReportUrl' },
|
||||
{ prop: 'qualityTypeName', label: '质检类型' },
|
||||
{ prop: 'qualityUnit', label: '质检机构' },
|
||||
{ prop: 'qualityProject', label: '质检项目' },
|
||||
{ prop: 'qualityPerson', label: '质检人' },
|
||||
{ prop: 'qualityTime', label: '质检时间' },
|
||||
{ prop: 'qualityDescribe', label: '质检说明', width: 200 },
|
||||
// { prop: 'action', label: '操作', slotName: 'action', width: 100, fixed: 'right' },
|
||||
]);
|
||||
const handlePaginationChange = ({ page, pageSize }) => {
|
||||
formInline.current = page;
|
||||
formInline.size = pageSize;
|
||||
loadData();
|
||||
};
|
||||
const loadData = async () => {
|
||||
tableLoading.value = true;
|
||||
try {
|
||||
let response = await getQualityManageList(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 landSelectRef = ref(null);
|
||||
const nowSelectRow = ref({});
|
||||
const dialogForm = reactive({
|
||||
regionCode: '', //所属行政区域代码
|
||||
regionName: '', //所属行政区域名称
|
||||
gridId: '', //所属网格代码
|
||||
gridName: '', //所属网格名称
|
||||
landId: '', //地块id
|
||||
landName: '', //地块名称
|
||||
name: '', //姓名
|
||||
phone: '', //联系方式
|
||||
fertilizeId: '', //肥料名称id
|
||||
fertilizeName: '', //肥料名称
|
||||
useNumber: 1, //使用量
|
||||
useUnit: 'g', //使用量单位
|
||||
useTime: '', //使用时间
|
||||
businessEntityCode: '', //经营主体编码
|
||||
businessEntityName: '', //经营主体名称
|
||||
detectionTime: '', //检测时间
|
||||
detectionResult: '', //检测结果'
|
||||
detectionUnit: '', //检测单位
|
||||
detectionReport: '', //检测报告
|
||||
});
|
||||
const dialogFormRules = ref({
|
||||
fertilizeId: [{ required: true, message: '请输入肥料编号', trigger: 'blur' }],
|
||||
fertilizeName: [{ required: true, message: '请输入肥料名称', trigger: 'blur' }],
|
||||
useNumber: [{ required: true, message: '请输入使用量', trigger: ['change', 'blur'] }],
|
||||
useTime: [{ required: true, message: '请选择使用时间', trigger: 'blur' }],
|
||||
detectionTime: [{ required: true, message: '请选择检测时间', trigger: ['change', 'blur'] }],
|
||||
detectionResult: [
|
||||
{
|
||||
required: true,
|
||||
message: '请选择检测结果',
|
||||
trigger: 'blur',
|
||||
},
|
||||
],
|
||||
detectionUnit: [{ required: true, message: '请输入检测单位', trigger: 'blur' }],
|
||||
});
|
||||
|
||||
const srcList = ref([]);
|
||||
const showPreview = ref(false);
|
||||
|
||||
const seeImg = (row) => {
|
||||
console.log(row);
|
||||
srcList.value = [row.qualityReportUrl ?? imgUrl];
|
||||
showPreview.value = true;
|
||||
};
|
||||
|
||||
const addItem = async () => {
|
||||
ElMessage.success('点击新增!');
|
||||
// restDialogForm();
|
||||
// dialogTitle.value = '新增';
|
||||
// formDisabled.value = false;
|
||||
// dialogFormVisible.value = true;
|
||||
};
|
||||
const seeDetails = async (row) => {
|
||||
ElMessage.success('查看详情!');
|
||||
// dialogTitle.value = '详情';
|
||||
// formDisabled.value = true;
|
||||
// dialogForm.landId = row.landId;
|
||||
// getDetails();
|
||||
// setDialogForm2();
|
||||
// dialogFormVisible.value = true;
|
||||
};
|
||||
const handleEdit = (row) => {
|
||||
ElMessage.success('点击编辑!');
|
||||
console.log('要编辑的行: ', row);
|
||||
// nowSelectRow.value = row;
|
||||
// dialogTitle.value = '编辑';
|
||||
// formDisabled.value = false;
|
||||
// dialogForm.landId = row.landId;
|
||||
// getDetails();
|
||||
// setDialogForm2();
|
||||
// dialogFormVisible.value = true;
|
||||
};
|
||||
const setDialogForm = (row) => {
|
||||
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 setDialogForm2 = (row) => {
|
||||
dialogForm.fertilizeId = row.fertilizeId;
|
||||
dialogForm.fertilizeName = row.fertilizeName;
|
||||
dialogForm.useNumber = row.useNumber;
|
||||
dialogForm.useUnit = row.useUnit;
|
||||
dialogForm.useTime = row.useTime;
|
||||
dialogForm.detectionTime = row.detectionTime;
|
||||
dialogForm.detectionResult = row.detectionResult;
|
||||
dialogForm.detectionUnit = row.detectionUnit;
|
||||
dialogForm.detectionReport = row.detectionReport ?? '';
|
||||
};
|
||||
// 获取地块信息
|
||||
const getDetails = async () => {
|
||||
let response = await getQualityInfo(dialogForm.landId);
|
||||
console.log(response);
|
||||
if (response.code == 200) {
|
||||
if (response.data) {
|
||||
setDialogForm(response.data);
|
||||
} else {
|
||||
ElMessage.error('未查询到数据');
|
||||
}
|
||||
} else {
|
||||
ElMessage.error(response.message);
|
||||
}
|
||||
};
|
||||
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 delFertilizeUseRegulatory(ids);
|
||||
return res;
|
||||
} catch (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 };
|
||||
console.log(param);
|
||||
let response;
|
||||
if (dialogTitle.value == '新增') {
|
||||
response = await fertilizeUseRegulatorySave(param);
|
||||
} else {
|
||||
param.id = nowSelectRow.value.id;
|
||||
response = await editFertilizeUseRegulatory(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, {
|
||||
regionCode: '', //所属行政区域代码
|
||||
regionName: '', //所属行政区域名称
|
||||
gridId: '', //所属网格代码
|
||||
gridName: '', //所属网格名称
|
||||
landId: '', //地块id
|
||||
landName: '', //地块名称
|
||||
name: '', //姓名
|
||||
phone: '', //联系方式
|
||||
fertilizeId: '', //肥料名称id
|
||||
fertilizeName: '', //肥料名称
|
||||
useNumber: 1, //使用量
|
||||
useUnit: 'g', //使用量单位
|
||||
useTime: '', //使用时间
|
||||
businessEntityCode: '', //经营主体编码
|
||||
businessEntityName: '', //经营主体名称
|
||||
detectionTime: '', //检测时间
|
||||
detectionResult: '', //检测结果'
|
||||
detectionUnit: '', //检测单位
|
||||
detectionReport: '', //检测报告
|
||||
});
|
||||
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 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' },
|
||||
];
|
||||
}
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
onSubmit();
|
||||
getLandsList();
|
||||
getEntityOptions();
|
||||
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;
|
||||
}
|
||||
}
|
||||
|
||||
/* 必须使用深度选择器 + 精确DOM层级 */
|
||||
.custom-descriptions :deep(.el-descriptions__body) table.el-descriptions__table {
|
||||
table-layout: fixed;
|
||||
/* 关键属性1：强制等宽 */
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.custom-descriptions :deep(.el-descriptions__label) {
|
||||
padding-right: 20px;
|
||||
width: 130px !important;
|
||||
/* 关键属性2：固定宽度 */
|
||||
min-width: 130px !important;
|
||||
max-width: 130px !important;
|
||||
font-weight: bold;
|
||||
text-align: left;
|
||||
background: #f5f7fa;
|
||||
}
|
||||
|
||||
.custom-descriptions :deep(.el-descriptions__content) {
|
||||
width: calc(100% - 130px) !important;
|
||||
/* 自动填充剩余空间 */
|
||||
word-break: break-word;
|
||||
}
|
||||
</style>
|
||||
@ -14,17 +14,17 @@
|
||||
<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="产品名称" prop="productName">
|
||||
<el-input v-model="formInline.productName" placeholder="请输入产品名称" clearable />
|
||||
<el-form-item label="产品名称" prop="name">
|
||||
<el-input v-model="formInline.name" placeholder="请输入产品名称" clearable />
|
||||
</el-form-item>
|
||||
<el-form-item label="质检时间" prop="qualityTime">
|
||||
<el-date-picker v-model="formInline.qualityTime" type="date" placeholder="请选择质检时间" style="width: 100%" />
|
||||
<el-form-item label="采收日期" prop="date1">
|
||||
<el-date-picker v-model="formInline.date1" type="date" placeholder="请选择采收时间" style="width: 100%" />
|
||||
</el-form-item>
|
||||
<el-form-item label="原产地" prop="countryOfOrigin">
|
||||
<el-input v-model="formInline.countryOfOrigin" placeholder="请输入原产地" clearable />
|
||||
<el-form-item label="原场地" prop="name">
|
||||
<el-input v-model="formInline.name" placeholder="请输入原场地" clearable />
|
||||
</el-form-item>
|
||||
<el-form-item label="经营主体" prop="businessEntity">
|
||||
<el-input v-model="formInline.businessEntity" placeholder="请输入经营主体" clearable />
|
||||
<el-form-item label="经营主体" prop="name">
|
||||
<el-input v-model="formInline.name" placeholder="请输入经营主体" clearable />
|
||||
</el-form-item>
|
||||
<el-form-item label="">
|
||||
<el-button type="primary" icon="Search" @click="onSubmit">查询</el-button>
|
||||
@ -50,8 +50,10 @@
|
||||
@page-change="handlePaginationChange"
|
||||
>
|
||||
<!-- 自定义-质检报告 -->
|
||||
<template #qualityReportUrl="slotProps">
|
||||
<el-icon style="font-size: 20px; cursor: pointer" color="#3685fe" @click="seeImg(slotProps.row)"><MessageBox /></el-icon>
|
||||
<template #purchaseDate="slotProps">
|
||||
<el-button text type="primary"
|
||||
><el-icon style="font-size: 20px"><MessageBox /></el-icon>
|
||||
</el-button>
|
||||
</template>
|
||||
<!-- 自定义-操作 -->
|
||||
<template #action="slotProps">
|
||||
@ -140,8 +142,6 @@
|
||||
</div>
|
||||
</template>
|
||||
</el-dialog>
|
||||
|
||||
<el-image-viewer v-if="showPreview" :url-list="srcList" show-progress :initial-index="0" @close="showPreview = false" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@ -152,25 +152,23 @@ import { ElMessage } from 'element-plus';
|
||||
import inputSuppliesApi from '@/apis/inputSuppliesApi';
|
||||
const { getMaterailTypes } = inputSuppliesApi;
|
||||
import {
|
||||
getFertilizeUseRegulatoryRecords,
|
||||
fertilizeUseRegulatorySave,
|
||||
editFertilizeUseRegulatory,
|
||||
delFertilizeUseRegulatory,
|
||||
getLandList,
|
||||
} from '@/apis/inputSuppliesApi/supervisionOfInputs';
|
||||
import { getQualityManageList, getQualityInfo } from '@/apis/trace/products';
|
||||
import request from '@/utils/axios';
|
||||
import { GetDictTypeInfo } from '@/apis/system/dictType';
|
||||
import { useApp } from '@/hooks';
|
||||
const app = useApp();
|
||||
import imgUrl from '@/assets/images/trace/testReport.png';
|
||||
|
||||
// 查询条件
|
||||
const formInline = reactive({
|
||||
harvestBatch: '',
|
||||
productName: '',
|
||||
name: '',
|
||||
seedTypeId: '',
|
||||
qualityTime: '',
|
||||
countryOfOrigin: '',
|
||||
businessEntity: '',
|
||||
date1: '',
|
||||
current: 1,
|
||||
size: 10,
|
||||
});
|
||||
@ -184,21 +182,120 @@ const resetForm = () => {
|
||||
};
|
||||
|
||||
// 表格数据
|
||||
const tableData = ref();
|
||||
const tableData = ref([
|
||||
{
|
||||
batchCode: 'GM2025041201',
|
||||
productTypes: '黄皮甘蔗',
|
||||
name: '合格',
|
||||
purchaseDate: '质检报告1',
|
||||
number: '农残检测',
|
||||
Unit: '耿马县农产品质检中心',
|
||||
baseCode: '农药残留量',
|
||||
baseName: '李红梅',
|
||||
plotCode: '2025-04-13 00:00:00',
|
||||
plotName: '未检出农药残留，符合国家标准',
|
||||
},
|
||||
{
|
||||
batchCode: 'GM2025041802',
|
||||
productTypes: '圆茄',
|
||||
name: '合格',
|
||||
purchaseDate: '质检报告2',
|
||||
number: '微生物检测',
|
||||
Unit: '耿马县农产品质检中心',
|
||||
baseCode: '大肠杆菌、沙门氏菌',
|
||||
baseName: '刀玉兰',
|
||||
plotCode: '2025-04-19 00:00:00',
|
||||
plotName: '未检出有害微生物，符合国家标准',
|
||||
},
|
||||
{
|
||||
batchCode: 'GM2025041503',
|
||||
productTypes: '小米辣',
|
||||
name: '合格',
|
||||
purchaseDate: '质检报告3',
|
||||
number: '农残检测',
|
||||
Unit: '耿马县农产品质检中心',
|
||||
baseCode: '农药残留量',
|
||||
baseName: '马晓芳',
|
||||
plotCode: '2025-04-16 00:00:00',
|
||||
plotName: '农药残留量低于国家标准',
|
||||
},
|
||||
{
|
||||
batchCode: 'GM2025042004',
|
||||
productTypes: '丝瓜',
|
||||
name: '合格',
|
||||
purchaseDate: '质检报告4',
|
||||
number: '农残检测',
|
||||
Unit: '耿马县农产品质检中心',
|
||||
baseCode: '农药残留量',
|
||||
baseName: '黄文斌',
|
||||
plotCode: '2025-04-21 00:00:00',
|
||||
plotName: '未检出农药残留，符合国家标准',
|
||||
},
|
||||
{
|
||||
batchCode: 'GM2025041705',
|
||||
productTypes: '苦瓜',
|
||||
name: '合格',
|
||||
purchaseDate: '质检报告5',
|
||||
number: '农残检测',
|
||||
Unit: '耿马县农产品质检中心',
|
||||
baseCode: '农药残留量',
|
||||
baseName: '李四',
|
||||
plotCode: '2025-04-18 00:00:00',
|
||||
plotName: '农药残留量低于国家标准',
|
||||
},
|
||||
{
|
||||
batchCode: 'GM2025042206',
|
||||
productTypes: '香蕉',
|
||||
name: '合格',
|
||||
purchaseDate: '质检报告6',
|
||||
number: '微生物检测',
|
||||
Unit: '耿马县农产品质检中心',
|
||||
baseCode: '大肠杆菌、沙门氏菌',
|
||||
baseName: '杨志明',
|
||||
plotCode: '2025-04-23 00:00:00',
|
||||
plotName: '未检出有害微生物，符合国家标准',
|
||||
},
|
||||
{
|
||||
batchCode: 'GM2025041907',
|
||||
productTypes: '榴莲',
|
||||
name: '合格',
|
||||
purchaseDate: '质检报告7',
|
||||
number: '农残检测',
|
||||
Unit: '耿马县农产品质检中心',
|
||||
baseCode: '农药残留量',
|
||||
baseName: '张丽华',
|
||||
plotCode: '2025-04-20 00:00:00',
|
||||
plotName: '农药残留量低于国家标准',
|
||||
},
|
||||
{
|
||||
batchCode: 'GM2025042108',
|
||||
productTypes: '芒果',
|
||||
name: '合格',
|
||||
purchaseDate: '质检报告8',
|
||||
number: '农残检测',
|
||||
Unit: '耿马县农产品质检中心',
|
||||
baseCode: '农药残留量',
|
||||
baseName: '周建国',
|
||||
plotCode: '2025-04-22 00:00:00',
|
||||
plotName: '未检出农药残留，符合国家标准',
|
||||
},
|
||||
]);
|
||||
const selectedIds = ref([]);
|
||||
const tableLoading = ref(false);
|
||||
const tableTotal = ref(0);
|
||||
const columns = ref([
|
||||
{ prop: 'harvestBatch', label: '采收批次编码' },
|
||||
{ prop: 'productName', label: '原材料名称' },
|
||||
{ prop: 'qualityReportUrl', label: '质检报告', slotName: 'qualityReportUrl' },
|
||||
{ prop: 'qualityTypeName', label: '质检类型' },
|
||||
{ prop: 'qualityUnit', label: '质检机构' },
|
||||
{ prop: 'qualityProject', label: '质检项目' },
|
||||
{ prop: 'qualityPerson', label: '质检人' },
|
||||
{ prop: 'qualityTime', label: '质检时间' },
|
||||
{ prop: 'qualityDescribe', label: '质检说明', width: 200 },
|
||||
// { prop: 'action', label: '操作', slotName: 'action', width: 100, fixed: 'right' },
|
||||
{ prop: 'batchCode', label: '采收批次编码' },
|
||||
{ prop: 'productTypes', label: '原材料名称' },
|
||||
{ prop: 'name', label: '质检结果' },
|
||||
{ prop: 'purchaseDate', label: '质检报告', slotName: 'purchaseDate' },
|
||||
{ prop: 'number', label: '质检类型' },
|
||||
{ prop: 'Unit', label: '质检机构' },
|
||||
{ prop: 'baseCode', label: '质检项目' },
|
||||
{ prop: 'baseName', label: '质检人' },
|
||||
// { prop: 'baseAddress', label: '基地地址' },
|
||||
{ prop: 'plotCode', label: '质检时间' },
|
||||
{ prop: 'plotName', label: '质检说明', width: 200 },
|
||||
{ prop: 'action', label: '操作', slotName: 'action', width: 100, fixed: 'right' },
|
||||
]);
|
||||
const handlePaginationChange = ({ page, pageSize }) => {
|
||||
formInline.current = page;
|
||||
@ -206,18 +303,18 @@ const handlePaginationChange = ({ page, pageSize }) => {
|
||||
loadData();
|
||||
};
|
||||
const loadData = async () => {
|
||||
tableLoading.value = true;
|
||||
try {
|
||||
let response = await getQualityManageList(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);
|
||||
}
|
||||
// tableLoading.value = true;
|
||||
// try {
|
||||
// let response = await getFertilizeUseRegulatoryRecords(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) => {
|
||||
@ -286,15 +383,6 @@ const dialogFormRules = ref({
|
||||
detectionUnit: [{ required: true, message: '请输入检测单位', trigger: 'blur' }],
|
||||
});
|
||||
|
||||
const srcList = ref([]);
|
||||
const showPreview = ref(false);
|
||||
|
||||
const seeImg = (row) => {
|
||||
console.log(row);
|
||||
srcList.value = [row.qualityReportUrl ?? imgUrl];
|
||||
showPreview.value = true;
|
||||
};
|
||||
|
||||
const addItem = async () => {
|
||||
ElMessage.success('点击新增!');
|
||||
// restDialogForm();
|
||||
@ -347,7 +435,9 @@ const setDialogForm2 = (row) => {
|
||||
};
|
||||
// 获取地块信息
|
||||
const getDetails = async () => {
|
||||
let response = await getQualityInfo(dialogForm.landId);
|
||||
let response = await request({
|
||||
url: `/land-resource/landManage/getLandInfo?landId=${dialogForm.landId}`,
|
||||
});
|
||||
console.log(response);
|
||||
if (response.code == 200) {
|
||||
if (response.data) {
|
||||
@ -509,7 +599,7 @@ onMounted(() => {
|
||||
onSubmit();
|
||||
getLandsList();
|
||||
getEntityOptions();
|
||||
getSeedTypeList();
|
||||
// getSeedTypeList();
|
||||
});
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
|
||||
@ -0,0 +1,558 @@
|
||||
<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="harvestBatch">
|
||||
<el-input v-model="formInline.harvestBatch" placeholder="请输入产品溯源码" clearable />
|
||||
</el-form-item>
|
||||
<el-form-item label="产品名称" prop="productName">
|
||||
<el-input v-model="formInline.productName" placeholder="请输入产品名称" clearable />
|
||||
</el-form-item>
|
||||
<el-form-item label="原产地" prop="traceArea">
|
||||
<el-input v-model="formInline.traceArea" placeholder="请输入原产地" clearable />
|
||||
</el-form-item>
|
||||
<el-form-item label="经营主体" prop="businessEntityName">
|
||||
<el-input v-model="formInline.businessEntityName" 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="采收时间" prop="startTime" style="margin-right: 0">
|
||||
<el-date-picker
|
||||
v-model="formInline.startTime"
|
||||
type="date"
|
||||
value-format="YYYY-MM-DD"
|
||||
placeholder="请选择起始日期"
|
||||
clearable
|
||||
:disabled-date="disableStartDate"
|
||||
style="width: 160px"
|
||||
/>
|
||||
<span style="width: 30px; text-align: center; display: inline-block"> - </span>
|
||||
<el-date-picker
|
||||
v-model="formInline.endTime"
|
||||
type="date"
|
||||
value-format="YYYY-MM-DD"
|
||||
placeholder="请选择截止日期"
|
||||
clearable
|
||||
:disabled-date="disableEndDate"
|
||||
style="width: 160px"
|
||||
/>
|
||||
</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 #traceCode="slotProps">
|
||||
<el-link :underline="true" type="primary" @click="seeImg(slotProps.row)">{{ slotProps.row.traceCode }}</el-link>
|
||||
</template>
|
||||
<!-- 自定义-操作 -->
|
||||
<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" align-center>
|
||||
<div style="margin-bottom: 20px; text-align: center">
|
||||
<el-radio-group v-model="tabsRadio">
|
||||
<el-radio-button label="产品信息" :value="1" />
|
||||
<el-radio-button label="溯源信息" :value="2" />
|
||||
</el-radio-group>
|
||||
</div>
|
||||
<el-descriptions v-if="tabsRadio == 1" title="" border class="mb-20 custom-descriptions" :column="2">
|
||||
<el-descriptions-item label="产品编码">{{ dialogForm.traceCode }}</el-descriptions-item>
|
||||
<el-descriptions-item label="产品名称">{{ dialogForm.productName }}</el-descriptions-item>
|
||||
<el-descriptions-item label="产品规格">{{ dialogForm.specs }}</el-descriptions-item>
|
||||
<el-descriptions-item label="生产日期">{{ dialogForm.produceDate }}</el-descriptions-item>
|
||||
<el-descriptions-item label="保质期">{{ dialogForm.expiryDateTime }}</el-descriptions-item>
|
||||
<el-descriptions-item label="生产商编码">{{ dialogForm.manufacturerCode }}</el-descriptions-item>
|
||||
<el-descriptions-item label="生产商">{{ dialogForm.manufacturer }}</el-descriptions-item>
|
||||
<el-descriptions-item label="厂址">{{ dialogForm.factoryAddress }}</el-descriptions-item>
|
||||
</el-descriptions>
|
||||
<div v-else>
|
||||
<el-descriptions title="种植基地信息" border class="mb-20 custom-descriptions" :column="2">
|
||||
<el-descriptions-item label="基地编码">{{ dialogForm.plantationInfoVO?.id ?? '' }}</el-descriptions-item>
|
||||
<el-descriptions-item label="基地名称">{{ dialogForm.plantationInfoVO?.name ?? '' }}</el-descriptions-item>
|
||||
<el-descriptions-item label="所属行政区域">{{ dialogForm.plantationInfoVO?.regionName ?? '' }}</el-descriptions-item>
|
||||
<el-descriptions-item label="所属网格">{{ dialogForm.plantationInfoVO?.gridName ?? '' }}</el-descriptions-item>
|
||||
<el-descriptions-item label="具体位置">{{ dialogForm.plantationInfoVO?.location ?? '' }}</el-descriptions-item>
|
||||
<el-descriptions-item label="经纬度">{{ dialogForm.plantationInfoVO?.coordinate ?? '' }}</el-descriptions-item>
|
||||
<el-descriptions-item label="气候条件">{{ dialogForm.plantationInfoVO?.climate ?? '' }}</el-descriptions-item>
|
||||
<el-descriptions-item label="海拔">{{ dialogForm.plantationInfoVO?.altitude ?? '' }}</el-descriptions-item>
|
||||
<el-descriptions-item label="面积（亩）">{{ dialogForm.plantationInfoVO?.area ?? '' }}</el-descriptions-item>
|
||||
<el-descriptions-item label="地块名称">{{ dialogForm.plantationInfoVO?.landName ?? '' }}</el-descriptions-item>
|
||||
<el-descriptions-item label="基地照片">{{ dialogForm.plantationInfoVO?.url ?? '' }}</el-descriptions-item>
|
||||
</el-descriptions>
|
||||
<el-descriptions title="经营主体信息" border class="mb-20 custom-descriptions" :column="2">
|
||||
<el-descriptions-item label="经营主体代码">{{ dialogForm.enterpriseCooperativeVO?.id ?? '' }}</el-descriptions-item>
|
||||
<el-descriptions-item label="经营主体类型">{{ dialogForm.enterpriseCooperativeVO?.comType ?? '' }}</el-descriptions-item>
|
||||
<el-descriptions-item label="经营主体名称">{{ dialogForm.enterpriseCooperativeVO?.businessName ?? '' }}</el-descriptions-item>
|
||||
<el-descriptions-item label="联系人">{{ dialogForm.enterpriseCooperativeVO?.contactPerson ?? '' }}</el-descriptions-item>
|
||||
<el-descriptions-item label="联系电话">{{ dialogForm.enterpriseCooperativeVO?.phone ?? '' }}</el-descriptions-item>
|
||||
</el-descriptions>
|
||||
<!-- <el-descriptions title="种植批次" border class="mb-20 custom-descriptions" :column="2">
|
||||
<el-descriptions-item label="种植批次编码">{{ dialogForm.enterpriseCooperativeVO?.id ?? '' }}</el-descriptions-item>
|
||||
<el-descriptions-item label="种植批次名称">{{ dialogForm.enterpriseCooperativeVO?.comType ?? '' }}</el-descriptions-item>
|
||||
<el-descriptions-item label="种植作物">{{ dialogForm.enterpriseCooperativeVO?.businessName ?? '' }}</el-descriptions-item>
|
||||
</el-descriptions> -->
|
||||
<el-descriptions title="采收信息" border class="mb-20 custom-descriptions" :column="2">
|
||||
<el-descriptions-item label="采收批次编码">{{ dialogForm.enterpriseCooperativeVO?.id ?? '' }}</el-descriptions-item>
|
||||
<el-descriptions-item label="采收时间">{{ dialogForm.enterpriseCooperativeVO?.comType ?? '' }}</el-descriptions-item>
|
||||
</el-descriptions>
|
||||
<el-descriptions title="质检信息" border class="mb-20 custom-descriptions" :column="1">
|
||||
<el-descriptions-item label="质检结果">{{ dialogForm.enterpriseCooperativeVO?.id ?? '' }}</el-descriptions-item>
|
||||
<el-descriptions-item label="质检说明">{{ dialogForm.enterpriseCooperativeVO?.comType ?? '' }}</el-descriptions-item>
|
||||
<el-descriptions-item label="质检报告">
|
||||
<img :src="dialogForm?.traceUrl ?? ''" alt="" />
|
||||
</el-descriptions-item>
|
||||
</el-descriptions>
|
||||
<el-descriptions title="区块链认证信息" border class="mb-20 custom-descriptions" :column="1">
|
||||
<el-descriptions-item label="认证信息">
|
||||
<img :src="dialogForm?.traceUrl ?? ''" alt="" />
|
||||
</el-descriptions-item>
|
||||
</el-descriptions>
|
||||
</div>
|
||||
<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>
|
||||
|
||||
<el-image-viewer v-if="showPreview" :url-list="srcList" show-progress :initial-index="0" @close="showPreview = false" />
|
||||
</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 {
|
||||
fertilizeUseRegulatorySave,
|
||||
editFertilizeUseRegulatory,
|
||||
delFertilizeUseRegulatory,
|
||||
getLandList,
|
||||
} from '@/apis/inputSuppliesApi/supervisionOfInputs';
|
||||
import { getTraceMangePageList, getTraceProductInfo } from '@/apis/trace/products';
|
||||
import request from '@/utils/axios';
|
||||
import { GetDictTypeInfo } from '@/apis/system/dictType';
|
||||
import { useApp } from '@/hooks';
|
||||
const app = useApp();
|
||||
|
||||
// 查询条件
|
||||
const formInline = reactive({
|
||||
harvestBatch: '',
|
||||
productName: '',
|
||||
traceArea: '',
|
||||
businessEntityName: '',
|
||||
seedTypeId: '',
|
||||
startTime: '',
|
||||
endTime: '',
|
||||
current: 1,
|
||||
size: 10,
|
||||
});
|
||||
const searchForm = ref(null);
|
||||
const onSubmit = () => {
|
||||
formInline.current = 1;
|
||||
loadData();
|
||||
};
|
||||
const resetForm = () => {
|
||||
searchForm.value.resetFields();
|
||||
formInline.endTime = '';
|
||||
};
|
||||
// 禁用开始日期的逻辑（不能晚于已选的结束日期）
|
||||
const disableStartDate = (time) => {
|
||||
if (!formInline.endTime) return false;
|
||||
const endDate = new Date(formInline.endTime);
|
||||
return time.getTime() > endDate.getTime();
|
||||
};
|
||||
|
||||
// 禁用结束日期的逻辑（不能早于已选的开始日期）
|
||||
const disableEndDate = (time) => {
|
||||
if (!formInline.startTime) return false;
|
||||
const startDate = new Date(formInline.startTime).setHours(0, 0, 0, 0);
|
||||
const currentDate = new Date(time).setHours(0, 0, 0, 0);
|
||||
return currentDate < startDate;
|
||||
};
|
||||
|
||||
// 表格数据
|
||||
const tableData = ref([]);
|
||||
const selectedIds = ref([]);
|
||||
const tableLoading = ref(false);
|
||||
const tableTotal = ref(0);
|
||||
const columns = ref([
|
||||
{ prop: 'traceCode', label: '产品溯源码', slotName: 'traceCode', width: 150 },
|
||||
{ prop: 'productName', label: '产品名称' },
|
||||
{ prop: 'specs', label: '包装规格' },
|
||||
{ prop: 'produceDate', label: '生产日期', width: 150 },
|
||||
{ prop: 'expiryDateTime', label: '保质期' },
|
||||
{ prop: 'manufacturer', label: '生产商', width: 200 },
|
||||
{ prop: 'factoryAddress', label: '厂址' },
|
||||
{ prop: 'rawMaterial', label: '原材料' },
|
||||
{ prop: 'traceArea', label: '原产地' },
|
||||
{ prop: 'name', label: '种植基地' },
|
||||
{ prop: 'location', label: '种植基地地址' },
|
||||
{ prop: 'comType', label: '生产经营主体类型' },
|
||||
{ prop: 'businessName', label: '生产经营主体名称' },
|
||||
{ prop: 'createDate', label: '创建日期', width: 150 },
|
||||
{ prop: 'action', label: '操作', slotName: 'action', width: 100, fixed: 'right' },
|
||||
]);
|
||||
const handlePaginationChange = ({ page, pageSize }) => {
|
||||
formInline.current = page;
|
||||
formInline.size = pageSize;
|
||||
loadData();
|
||||
};
|
||||
const loadData = async () => {
|
||||
tableLoading.value = true;
|
||||
try {
|
||||
let response = await getTraceMangePageList(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 tabsRadio = ref(1);
|
||||
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({
|
||||
traceCode: '',
|
||||
productName: '',
|
||||
specs: '',
|
||||
produceDate: '',
|
||||
expiryDateTime: '',
|
||||
manufacturerCode: '',
|
||||
manufacturer: '',
|
||||
factoryAddress: '',
|
||||
plantationInfoVO: {}, //种植基地信息
|
||||
enterpriseCooperativeVO: {}, //经营主体信息
|
||||
});
|
||||
const dialogFormRules = ref({
|
||||
fertilizeId: [{ required: true, message: '请输入肥料编号', trigger: 'blur' }],
|
||||
fertilizeName: [{ required: true, message: '请输入肥料名称', trigger: 'blur' }],
|
||||
useNumber: [{ required: true, message: '请输入使用量', trigger: ['change', 'blur'] }],
|
||||
useTime: [{ required: true, message: '请选择使用时间', trigger: 'blur' }],
|
||||
detectionTime: [{ required: true, message: '请选择检测时间', trigger: ['change', 'blur'] }],
|
||||
detectionResult: [
|
||||
{
|
||||
required: true,
|
||||
message: '请选择检测结果',
|
||||
trigger: 'blur',
|
||||
},
|
||||
],
|
||||
detectionUnit: [{ required: true, message: '请输入检测单位', trigger: 'blur' }],
|
||||
});
|
||||
|
||||
const srcList = ref([]);
|
||||
const showPreview = ref(false);
|
||||
const seeImg = (row) => {
|
||||
console.log(row);
|
||||
let imgUrl = row.traceUrl ?? 'http://gov-cloud.oss-cn-chengdu.aliyuncs.com/backend/4363f93aa6f64e77b604e90906d03db6.jpg';
|
||||
srcList.value = [imgUrl];
|
||||
showPreview.value = true;
|
||||
};
|
||||
const addItem = async () => {
|
||||
ElMessage.success('点击新增!');
|
||||
// restDialogForm();
|
||||
// dialogTitle.value = '新增';
|
||||
// formDisabled.value = false;
|
||||
// dialogFormVisible.value = true;
|
||||
};
|
||||
const seeDetails = async (row) => {
|
||||
// ElMessage.success('查看详情!');
|
||||
console.log('查看详情的行: ', row);
|
||||
dialogTitle.value = '溯源产品详情';
|
||||
formDisabled.value = true;
|
||||
dialogForm.id = row.id;
|
||||
await getDetails();
|
||||
dialogFormVisible.value = true;
|
||||
};
|
||||
const handleEdit = (row) => {
|
||||
ElMessage.success('点击编辑!');
|
||||
console.log('要编辑的行: ', row);
|
||||
// nowSelectRow.value = row;
|
||||
// dialogTitle.value = '编辑';
|
||||
// formDisabled.value = false;
|
||||
// dialogForm.id = row.id;
|
||||
// getDetails();
|
||||
// dialogFormVisible.value = true;
|
||||
};
|
||||
const setDialogForm = (row) => {
|
||||
Object.assign(dialogForm, row);
|
||||
};
|
||||
// 获取地块信息
|
||||
const getDetails = async () => {
|
||||
let response = await getTraceProductInfo(dialogForm.id);
|
||||
console.log(response);
|
||||
if (response.code == 200) {
|
||||
if (response.data) {
|
||||
setDialogForm(response.data);
|
||||
} else {
|
||||
ElMessage.error('未查询到数据');
|
||||
}
|
||||
} else {
|
||||
ElMessage.error(response.message);
|
||||
}
|
||||
};
|
||||
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 delFertilizeUseRegulatory(ids);
|
||||
return res;
|
||||
} catch (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 };
|
||||
console.log(param);
|
||||
let response;
|
||||
if (dialogTitle.value == '新增') {
|
||||
response = await fertilizeUseRegulatorySave(param);
|
||||
} else {
|
||||
param.id = nowSelectRow.value.id;
|
||||
response = await editFertilizeUseRegulatory(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, {
|
||||
regionCode: '', //所属行政区域代码
|
||||
regionName: '', //所属行政区域名称
|
||||
gridId: '', //所属网格代码
|
||||
gridName: '', //所属网格名称
|
||||
landId: '', //地块id
|
||||
landName: '', //地块名称
|
||||
name: '', //姓名
|
||||
phone: '', //联系方式
|
||||
fertilizeId: '', //肥料名称id
|
||||
fertilizeName: '', //肥料名称
|
||||
useNumber: 1, //使用量
|
||||
useUnit: 'g', //使用量单位
|
||||
useTime: '', //使用时间
|
||||
businessEntityCode: '', //经营主体编码
|
||||
businessEntityName: '', //经营主体名称
|
||||
detectionTime: '', //检测时间
|
||||
detectionResult: '', //检测结果'
|
||||
detectionUnit: '', //检测单位
|
||||
detectionReport: '', //检测报告
|
||||
});
|
||||
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 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' },
|
||||
];
|
||||
}
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
onSubmit();
|
||||
getLandsList();
|
||||
getEntityOptions();
|
||||
// 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;
|
||||
}
|
||||
}
|
||||
|
||||
/* 必须使用深度选择器 + 精确DOM层级 */
|
||||
.custom-descriptions :deep(.el-descriptions__body) table.el-descriptions__table {
|
||||
table-layout: fixed;
|
||||
/* 关键属性1：强制等宽 */
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.custom-descriptions :deep(.el-descriptions__label) {
|
||||
padding-right: 20px;
|
||||
width: 130px !important;
|
||||
/* 关键属性2：固定宽度 */
|
||||
min-width: 130px !important;
|
||||
max-width: 130px !important;
|
||||
font-weight: bold;
|
||||
text-align: left;
|
||||
background: #f5f7fa;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.custom-descriptions :deep(.el-descriptions__content) {
|
||||
width: calc(100% - 130px) !important;
|
||||
/* 自动填充剩余空间 */
|
||||
word-break: break-word;
|
||||
}
|
||||
</style>
|
||||
@ -7,43 +7,25 @@
|
||||
<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="harvestBatch">
|
||||
<el-input v-model="formInline.harvestBatch" placeholder="请输入产品溯源码" clearable />
|
||||
<el-input v-model="formInline.harvestBatch" placeholder="请输入采收批次" clearable />
|
||||
</el-form-item>
|
||||
<el-form-item label="产品名称" prop="productName">
|
||||
<el-input v-model="formInline.productName" placeholder="请输入产品名称" clearable />
|
||||
<el-form-item label="产品名称" prop="name">
|
||||
<el-input v-model="formInline.name" placeholder="请输入产品名称" clearable />
|
||||
</el-form-item>
|
||||
<el-form-item label="原产地" prop="traceArea">
|
||||
<el-input v-model="formInline.traceArea" placeholder="请输入原产地" clearable />
|
||||
<el-form-item label="原场地" prop="name">
|
||||
<el-input v-model="formInline.name" placeholder="请输入原场地" clearable />
|
||||
</el-form-item>
|
||||
<el-form-item label="经营主体" prop="businessEntityName">
|
||||
<el-input v-model="formInline.businessEntityName" placeholder="请输入经营主体" clearable />
|
||||
<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-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="采收时间" prop="startTime" style="margin-right: 0">
|
||||
<el-date-picker
|
||||
v-model="formInline.startTime"
|
||||
type="date"
|
||||
value-format="YYYY-MM-DD"
|
||||
placeholder="请选择起始日期"
|
||||
clearable
|
||||
:disabled-date="disableStartDate"
|
||||
style="width: 160px"
|
||||
/>
|
||||
<span style="width: 30px; text-align: center; display: inline-block"> - </span>
|
||||
<el-date-picker
|
||||
v-model="formInline.endTime"
|
||||
type="date"
|
||||
value-format="YYYY-MM-DD"
|
||||
placeholder="请选择截止日期"
|
||||
clearable
|
||||
:disabled-date="disableEndDate"
|
||||
style="width: 160px"
|
||||
/>
|
||||
<el-form-item label="采收日期" prop="date1">
|
||||
<el-date-picker v-model="formInline.date1" type="date" placeholder="请选择采收时间" style="width: 100%" />
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="">
|
||||
@ -70,8 +52,8 @@
|
||||
@page-change="handlePaginationChange"
|
||||
>
|
||||
<!-- 自定义-产品溯源码 -->
|
||||
<template #traceCode="slotProps">
|
||||
<el-link :underline="true" type="primary" @click="seeImg(slotProps.row)">{{ slotProps.row.traceCode }}</el-link>
|
||||
<template #batchCode="slotProps">
|
||||
<el-link underline="always" type="primary">{{ slotProps.row.batchCode }}</el-link>
|
||||
</template>
|
||||
<!-- 自定义-操作 -->
|
||||
<template #action="slotProps">
|
||||
@ -83,65 +65,75 @@
|
||||
</div>
|
||||
</div>
|
||||
<el-dialog v-model="dialogFormVisible" :title="dialogTitle" width="800" :close-on-click-modal="false" align-center>
|
||||
<div style="margin-bottom: 20px; text-align: center">
|
||||
<el-radio-group v-model="tabsRadio">
|
||||
<el-radio-button label="产品信息" :value="1" />
|
||||
<el-radio-button label="溯源信息" :value="2" />
|
||||
</el-radio-group>
|
||||
</div>
|
||||
<el-descriptions v-if="tabsRadio == 1" title="" border class="mb-20 custom-descriptions" :column="2">
|
||||
<el-descriptions-item label="产品编码">{{ dialogForm.traceCode }}</el-descriptions-item>
|
||||
<el-descriptions-item label="产品名称">{{ dialogForm.productName }}</el-descriptions-item>
|
||||
<el-descriptions-item label="产品规格">{{ dialogForm.specs }}</el-descriptions-item>
|
||||
<el-descriptions-item label="生产日期">{{ dialogForm.produceDate }}</el-descriptions-item>
|
||||
<el-descriptions-item label="保质期">{{ dialogForm.expiryDateTime }}</el-descriptions-item>
|
||||
<el-descriptions-item label="生产商编码">{{ dialogForm.manufacturerCode }}</el-descriptions-item>
|
||||
<el-descriptions-item label="生产商">{{ dialogForm.manufacturer }}</el-descriptions-item>
|
||||
<el-descriptions-item label="厂址">{{ dialogForm.factoryAddress }}</el-descriptions-item>
|
||||
<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.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>
|
||||
<div v-else>
|
||||
<el-descriptions title="种植基地信息" border class="mb-20 custom-descriptions" :column="2">
|
||||
<el-descriptions-item label="基地编码">{{ dialogForm.plantationInfoVO?.id ?? '' }}</el-descriptions-item>
|
||||
<el-descriptions-item label="基地名称">{{ dialogForm.plantationInfoVO?.name ?? '' }}</el-descriptions-item>
|
||||
<el-descriptions-item label="所属行政区域">{{ dialogForm.plantationInfoVO?.regionName ?? '' }}</el-descriptions-item>
|
||||
<el-descriptions-item label="所属网格">{{ dialogForm.plantationInfoVO?.gridName ?? '' }}</el-descriptions-item>
|
||||
<el-descriptions-item label="具体位置">{{ dialogForm.plantationInfoVO?.location ?? '' }}</el-descriptions-item>
|
||||
<el-descriptions-item label="经纬度">{{ dialogForm.plantationInfoVO?.coordinate ?? '' }}</el-descriptions-item>
|
||||
<el-descriptions-item label="气候条件">{{ dialogForm.plantationInfoVO?.climate ?? '' }}</el-descriptions-item>
|
||||
<el-descriptions-item label="海拔">{{ dialogForm.plantationInfoVO?.altitude ?? '' }}</el-descriptions-item>
|
||||
<el-descriptions-item label="面积（亩）">{{ dialogForm.plantationInfoVO?.area ?? '' }}</el-descriptions-item>
|
||||
<el-descriptions-item label="地块名称">{{ dialogForm.plantationInfoVO?.landName ?? '' }}</el-descriptions-item>
|
||||
<el-descriptions-item label="基地照片">{{ dialogForm.plantationInfoVO?.url ?? '' }}</el-descriptions-item>
|
||||
</el-descriptions>
|
||||
<el-descriptions title="经营主体信息" border class="mb-20 custom-descriptions" :column="2">
|
||||
<el-descriptions-item label="经营主体代码">{{ dialogForm.enterpriseCooperativeVO?.id ?? '' }}</el-descriptions-item>
|
||||
<el-descriptions-item label="经营主体类型">{{ dialogForm.enterpriseCooperativeVO?.comType ?? '' }}</el-descriptions-item>
|
||||
<el-descriptions-item label="经营主体名称">{{ dialogForm.enterpriseCooperativeVO?.businessName ?? '' }}</el-descriptions-item>
|
||||
<el-descriptions-item label="联系人">{{ dialogForm.enterpriseCooperativeVO?.contactPerson ?? '' }}</el-descriptions-item>
|
||||
<el-descriptions-item label="联系电话">{{ dialogForm.enterpriseCooperativeVO?.phone ?? '' }}</el-descriptions-item>
|
||||
</el-descriptions>
|
||||
<!-- <el-descriptions title="种植批次" border class="mb-20 custom-descriptions" :column="2">
|
||||
<el-descriptions-item label="种植批次编码">{{ dialogForm.enterpriseCooperativeVO?.id ?? '' }}</el-descriptions-item>
|
||||
<el-descriptions-item label="种植批次名称">{{ dialogForm.enterpriseCooperativeVO?.comType ?? '' }}</el-descriptions-item>
|
||||
<el-descriptions-item label="种植作物">{{ dialogForm.enterpriseCooperativeVO?.businessName ?? '' }}</el-descriptions-item>
|
||||
</el-descriptions> -->
|
||||
<el-descriptions title="采收信息" border class="mb-20 custom-descriptions" :column="2">
|
||||
<el-descriptions-item label="采收批次编码">{{ dialogForm.enterpriseCooperativeVO?.id ?? '' }}</el-descriptions-item>
|
||||
<el-descriptions-item label="采收时间">{{ dialogForm.enterpriseCooperativeVO?.comType ?? '' }}</el-descriptions-item>
|
||||
</el-descriptions>
|
||||
<el-descriptions title="质检信息" border class="mb-20 custom-descriptions" :column="1">
|
||||
<el-descriptions-item label="质检结果">{{ dialogForm.enterpriseCooperativeVO?.id ?? '' }}</el-descriptions-item>
|
||||
<el-descriptions-item label="质检说明">{{ dialogForm.enterpriseCooperativeVO?.comType ?? '' }}</el-descriptions-item>
|
||||
<el-descriptions-item label="质检报告">
|
||||
<img :src="dialogForm?.traceUrl ?? ''" alt="" />
|
||||
</el-descriptions-item>
|
||||
</el-descriptions>
|
||||
<el-descriptions title="区块链认证信息" border class="mb-20 custom-descriptions" :column="1">
|
||||
<el-descriptions-item label="认证信息">
|
||||
<img :src="dialogForm?.traceUrl ?? ''" alt="" />
|
||||
</el-descriptions-item>
|
||||
</el-descriptions>
|
||||
</div>
|
||||
<el-descriptions title="经营主体信息" border class="mb-20 custom-descriptions" :column="2">
|
||||
<el-descriptions-item label="经营主体编码">{{ dialogForm.businessEntityCode }}</el-descriptions-item>
|
||||
<el-descriptions-item label="经营主体名称">{{ dialogForm.businessEntityName }}</el-descriptions-item>
|
||||
</el-descriptions>
|
||||
<el-form
|
||||
ref="dialogRef"
|
||||
:model="dialogForm"
|
||||
:inline="true"
|
||||
:label-width="'100'"
|
||||
:rules="dialogFormRules"
|
||||
:disabled="formDisabled"
|
||||
class="dialog-form-container"
|
||||
>
|
||||
<div class="el-descriptions__title" style="margin-bottom: 16px">农药用药详情</div>
|
||||
<el-form-item label="肥料编号" prop="fertilizeId" class="dialog-form-item">
|
||||
<el-input v-model="dialogForm.fertilizeId" clearable placeholder="请输入肥料编号" />
|
||||
</el-form-item>
|
||||
<el-form-item label="肥料名称" prop="fertilizeName" class="dialog-form-item">
|
||||
<el-input v-model="dialogForm.fertilizeName" 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-position="right" placeholder="请输入使用量" style="width: 150px" />
|
||||
<el-select v-model="dialogForm.useUnit" placeholder="请选择" style="width: 80px">
|
||||
<el-option v-for="el in unitList" :key="el.dictValue" :value="el.dictValue" :label="el.dictValue" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="使用时间" prop="useTime" class="dialog-form-item">
|
||||
<el-date-picker v-model="dialogForm.useTime" :clearable="false" type="date" value-format="YYYY-MM-DD" placeholder="请选择使用时间" />
|
||||
</el-form-item>
|
||||
<div class="el-descriptions__title" style="margin-bottom: 16px">检测信息</div>
|
||||
<div style="display: flex">
|
||||
<div style="display: inline-block; width: 48%">
|
||||
<el-form-item label="检测时间" prop="detectionTime" class="dialog-form-item" :label-width="'100'">
|
||||
<el-date-picker
|
||||
v-model="dialogForm.detectionTime"
|
||||
:clearable="false"
|
||||
type="date"
|
||||
value-format="YYYY-MM-DD"
|
||||
placeholder="请选择检测时间"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="检测结果" prop="detectionResult" class="dialog-form-item" :label-width="'100'">
|
||||
<el-select v-model="dialogForm.detectionResult" placeholder="请选择">
|
||||
<el-option value="合格" label="合格" />
|
||||
<el-option value="不合格" label="不合格" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="检测单位" prop="detectionUnit" class="dialog-form-item" :label-width="'100'">
|
||||
<el-input v-model="dialogForm.detectionUnit" clearable placeholder="请输入检测单位" />
|
||||
</el-form-item>
|
||||
</div>
|
||||
<div style="display: inline-block; width: 50%">
|
||||
<el-form-item label="检测报告" prop="detectionReport" class="dialog-form-item" :label-width="'80'">
|
||||
<FileUploader v-model="dialogForm.detectionReport" :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>
|
||||
@ -150,8 +142,6 @@
|
||||
</div>
|
||||
</template>
|
||||
</el-dialog>
|
||||
|
||||
<el-image-viewer v-if="showPreview" :url-list="srcList" show-progress :initial-index="0" @close="showPreview = false" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@ -162,12 +152,12 @@ import { ElMessage } from 'element-plus';
|
||||
import inputSuppliesApi from '@/apis/inputSuppliesApi';
|
||||
const { getMaterailTypes } = inputSuppliesApi;
|
||||
import {
|
||||
getFertilizeUseRegulatoryRecords,
|
||||
fertilizeUseRegulatorySave,
|
||||
editFertilizeUseRegulatory,
|
||||
delFertilizeUseRegulatory,
|
||||
getLandList,
|
||||
} from '@/apis/inputSuppliesApi/supervisionOfInputs';
|
||||
import { getTraceMangePageList, getTraceProductInfo } from '@/apis/trace/products';
|
||||
import request from '@/utils/axios';
|
||||
import { GetDictTypeInfo } from '@/apis/system/dictType';
|
||||
import { useApp } from '@/hooks';
|
||||
@ -176,12 +166,9 @@ const app = useApp();
|
||||
// 查询条件
|
||||
const formInline = reactive({
|
||||
harvestBatch: '',
|
||||
productName: '',
|
||||
traceArea: '',
|
||||
businessEntityName: '',
|
||||
name: '',
|
||||
seedTypeId: '',
|
||||
startTime: '',
|
||||
endTime: '',
|
||||
date1: '',
|
||||
current: 1,
|
||||
size: 10,
|
||||
});
|
||||
@ -192,43 +179,143 @@ const onSubmit = () => {
|
||||
};
|
||||
const resetForm = () => {
|
||||
searchForm.value.resetFields();
|
||||
formInline.endTime = '';
|
||||
};
|
||||
// 禁用开始日期的逻辑（不能晚于已选的结束日期）
|
||||
const disableStartDate = (time) => {
|
||||
if (!formInline.endTime) return false;
|
||||
const endDate = new Date(formInline.endTime);
|
||||
return time.getTime() > endDate.getTime();
|
||||
};
|
||||
|
||||
// 禁用结束日期的逻辑（不能早于已选的开始日期）
|
||||
const disableEndDate = (time) => {
|
||||
if (!formInline.startTime) return false;
|
||||
const startDate = new Date(formInline.startTime).setHours(0, 0, 0, 0);
|
||||
const currentDate = new Date(time).setHours(0, 0, 0, 0);
|
||||
return currentDate < startDate;
|
||||
};
|
||||
|
||||
// 表格数据
|
||||
const tableData = ref([]);
|
||||
const tableData = ref([
|
||||
{
|
||||
batchCode: 'GM202504120101',
|
||||
productTypes: '黄皮甘蔗',
|
||||
name: '5kg/袋',
|
||||
purchaseDate: '2024-04-12 00:00:00',
|
||||
number: '6个月',
|
||||
Unit: '云南农业发展有限公司',
|
||||
plotName: '云南省耿马县南华村工业区',
|
||||
baseName: '黄皮甘蔗',
|
||||
baseAddress: '耿马县',
|
||||
plotCode: '耿马镇甘蔗基地',
|
||||
businessEntity: '耿马镇南华村',
|
||||
record: '合作社',
|
||||
type: '耿马县农业合作社',
|
||||
createDate: '2024-04-12 08:30:00',
|
||||
},
|
||||
{
|
||||
batchCode: 'GM202504180202',
|
||||
productTypes: '圆茄',
|
||||
name: '1kg/盒',
|
||||
purchaseDate: '2024-04-18 00:00:00',
|
||||
number: '15天',
|
||||
Unit: '云南绿色蔬菜有限公司',
|
||||
plotName: '云南省耿马县红星村蔬菜加工园',
|
||||
baseName: '圆茄',
|
||||
baseAddress: '耿马县',
|
||||
plotCode: '勐永镇蔬菜基地',
|
||||
businessEntity: '勐永镇红星村',
|
||||
record: '合作社',
|
||||
type: '勐永镇蔬菜种植合作社',
|
||||
createDate: '2024-04-18 09:45:00',
|
||||
},
|
||||
{
|
||||
batchCode: 'GM202504150303',
|
||||
productTypes: '小米辣',
|
||||
name: '500g/袋',
|
||||
purchaseDate: '2024-04-15 00:00:00',
|
||||
number: '30天',
|
||||
Unit: '云南辣味食品有限公司',
|
||||
plotName: '云南省耿马县光明村辣椒加工区',
|
||||
baseName: '小米辣',
|
||||
baseAddress: '耿马县',
|
||||
plotCode: '四排山乡辣椒基地',
|
||||
businessEntity: '四排山乡光明村',
|
||||
record: '个体户',
|
||||
type: '王五辣椒种植场',
|
||||
createDate: '2024-04-15 10:20:00',
|
||||
},
|
||||
{
|
||||
batchCode: 'GM202504200404',
|
||||
productTypes: '丝瓜',
|
||||
name: '2kg/箱',
|
||||
purchaseDate: '2024-04-20 00:00:00',
|
||||
number: '10天',
|
||||
Unit: '云南鲜蔬有限公司',
|
||||
plotName: '云南省耿马县建设村蔬菜基地',
|
||||
baseName: '丝瓜',
|
||||
baseAddress: '耿马县',
|
||||
plotCode: '勐撒镇蔬菜园',
|
||||
businessEntity: '勐撒镇建设村',
|
||||
record: '合作社',
|
||||
type: '勐撒镇蔬菜种植合作社',
|
||||
createDate: '2024-04-20 11:55:00',
|
||||
},
|
||||
{
|
||||
batchCode: 'GM202504170501',
|
||||
productTypes: '苦瓜',
|
||||
name: '1kg/袋',
|
||||
purchaseDate: '2024-04-17 00:00:00',
|
||||
number: '20天',
|
||||
Unit: '云南苦瓜加工有限公司',
|
||||
plotName: '云南省耿马县民主村苦瓜加工区',
|
||||
baseName: '苦瓜',
|
||||
baseAddress: '耿马县',
|
||||
plotCode: '耿马镇苦瓜基地',
|
||||
businessEntity: '耿马镇民主村',
|
||||
record: '合作社',
|
||||
type: '耿马苦瓜种植合作社',
|
||||
createDate: '2024-04-17 12:30:00',
|
||||
},
|
||||
{
|
||||
batchCode: 'GM202504220601',
|
||||
productTypes: '香蕉',
|
||||
name: '2kg/箱',
|
||||
purchaseDate: '2024-04-22 00:00:00',
|
||||
number: '7天',
|
||||
Unit: '云南香蕉集团有限公司',
|
||||
plotName: '云南省耿马县幸福村香蕉加工园',
|
||||
baseName: '香蕉',
|
||||
baseAddress: '耿马县',
|
||||
plotCode: '勐永镇香蕉园',
|
||||
businessEntity: '勐永镇幸福村',
|
||||
record: '合作社',
|
||||
type: '勐永香蕉种植合作社',
|
||||
createDate: '2024-04-22 13:05:00',
|
||||
},
|
||||
{
|
||||
batchCode: 'GM202504190701',
|
||||
productTypes: '榴莲',
|
||||
name: '1kg/盒',
|
||||
purchaseDate: '2024-04-19 00:00:00',
|
||||
number: '5天',
|
||||
Unit: '云南热带水果有限公司',
|
||||
plotName: '云南省耿马县团结村榴莲加工基地',
|
||||
baseName: '榴莲',
|
||||
baseAddress: '耿马县',
|
||||
plotCode: '勐撒镇榴莲园',
|
||||
businessEntity: '勐撒镇团结村',
|
||||
record: '合作社',
|
||||
type: '勐撒榴莲种植合作社',
|
||||
createDate: '2024-04-19 14:40:00',
|
||||
},
|
||||
]);
|
||||
const selectedIds = ref([]);
|
||||
const tableLoading = ref(false);
|
||||
const tableTotal = ref(0);
|
||||
const columns = ref([
|
||||
{ prop: 'traceCode', label: '产品溯源码', slotName: 'traceCode', width: 150 },
|
||||
{ prop: 'productName', label: '产品名称' },
|
||||
{ prop: 'specs', label: '包装规格' },
|
||||
{ prop: 'produceDate', label: '生产日期', width: 150 },
|
||||
{ prop: 'expiryDateTime', label: '保质期' },
|
||||
{ prop: 'manufacturer', label: '生产商', width: 200 },
|
||||
{ prop: 'factoryAddress', label: '厂址' },
|
||||
{ prop: 'rawMaterial', label: '原材料' },
|
||||
{ prop: 'traceArea', label: '原产地' },
|
||||
{ prop: 'name', label: '种植基地' },
|
||||
{ prop: 'location', label: '种植基地地址' },
|
||||
{ prop: 'comType', label: '生产经营主体类型' },
|
||||
{ prop: 'businessName', label: '生产经营主体名称' },
|
||||
{ prop: 'createDate', label: '创建日期', width: 150 },
|
||||
{ prop: 'batchCode', label: '产品溯源码', slotName: 'batchCode', width: 150 },
|
||||
|
||||
{ prop: 'name', label: '产品名称' },
|
||||
{ prop: 'Unit', label: '规格' },
|
||||
{ prop: 'purchaseDate', label: '生产日期' },
|
||||
{ prop: 'number', label: '保质期' },
|
||||
// { prop: 'baseCode', label: '生产商', width: 200 },
|
||||
{ prop: 'plotName', label: '厂址' },
|
||||
{ prop: 'baseName', label: '原材料' },
|
||||
{ prop: 'baseAddress', label: '原产地' },
|
||||
{ prop: 'plotCode', label: '种植基地' },
|
||||
|
||||
{ prop: 'businessEntity', label: '种植基地地址' },
|
||||
{ prop: 'record', label: '生产经营主体类型' },
|
||||
{ prop: 'type', label: '生产经营主体名称' },
|
||||
{ prop: 'createDate', label: '创建日期' },
|
||||
{ prop: 'action', label: '操作', slotName: 'action', width: 100, fixed: 'right' },
|
||||
]);
|
||||
const handlePaginationChange = ({ page, pageSize }) => {
|
||||
@ -237,18 +324,18 @@ const handlePaginationChange = ({ page, pageSize }) => {
|
||||
loadData();
|
||||
};
|
||||
const loadData = async () => {
|
||||
tableLoading.value = true;
|
||||
try {
|
||||
let response = await getTraceMangePageList(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);
|
||||
}
|
||||
// tableLoading.value = true;
|
||||
// try {
|
||||
// let response = await getFertilizeUseRegulatoryRecords(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) => {
|
||||
@ -274,24 +361,32 @@ const seedTypeChange = () => {
|
||||
// 重新获取表格数据，需添加参数
|
||||
};
|
||||
|
||||
const tabsRadio = ref(1);
|
||||
const dialogFormVisible = ref(false);
|
||||
const dialogRef = ref(null);
|
||||
const dialogTitle = ref('溯源产品详情');
|
||||
const dialogTitle = ref('新增');
|
||||
const formDisabled = ref(false);
|
||||
const landSelectRef = ref(null);
|
||||
const nowSelectRow = ref({});
|
||||
const dialogForm = reactive({
|
||||
traceCode: '',
|
||||
productName: '',
|
||||
specs: '',
|
||||
produceDate: '',
|
||||
expiryDateTime: '',
|
||||
manufacturerCode: '',
|
||||
manufacturer: '',
|
||||
factoryAddress: '',
|
||||
plantationInfoVO: {}, //种植基地信息
|
||||
enterpriseCooperativeVO: {}, //经营主体信息
|
||||
regionCode: '', //所属行政区域代码
|
||||
regionName: '', //所属行政区域名称
|
||||
gridId: '', //所属网格代码
|
||||
gridName: '', //所属网格名称
|
||||
landId: '', //地块id
|
||||
landName: '', //地块名称
|
||||
name: '', //姓名
|
||||
phone: '', //联系方式
|
||||
fertilizeId: '', //肥料名称id
|
||||
fertilizeName: '', //肥料名称
|
||||
useNumber: 1, //使用量
|
||||
useUnit: 'g', //使用量单位
|
||||
useTime: '', //使用时间
|
||||
businessEntityCode: '', //经营主体编码
|
||||
businessEntityName: '', //经营主体名称
|
||||
detectionTime: '', //检测时间
|
||||
detectionResult: '', //检测结果'
|
||||
detectionUnit: '', //检测单位
|
||||
detectionReport: '', //检测报告
|
||||
});
|
||||
const dialogFormRules = ref({
|
||||
fertilizeId: [{ required: true, message: '请输入肥料编号', trigger: 'blur' }],
|
||||
@ -309,14 +404,6 @@ const dialogFormRules = ref({
|
||||
detectionUnit: [{ required: true, message: '请输入检测单位', trigger: 'blur' }],
|
||||
});
|
||||
|
||||
const srcList = ref([]);
|
||||
const showPreview = ref(false);
|
||||
const seeImg = (row) => {
|
||||
console.log(row);
|
||||
let imgUrl = row.traceUrl ?? 'http://gov-cloud.oss-cn-chengdu.aliyuncs.com/backend/4363f93aa6f64e77b604e90906d03db6.jpg';
|
||||
srcList.value = [imgUrl];
|
||||
showPreview.value = true;
|
||||
};
|
||||
const addItem = async () => {
|
||||
ElMessage.success('点击新增!');
|
||||
// restDialogForm();
|
||||
@ -325,13 +412,13 @@ const addItem = async () => {
|
||||
// dialogFormVisible.value = true;
|
||||
};
|
||||
const seeDetails = async (row) => {
|
||||
// ElMessage.success('查看详情!');
|
||||
console.log('查看详情的行: ', row);
|
||||
dialogTitle.value = '溯源产品详情';
|
||||
formDisabled.value = true;
|
||||
dialogForm.id = row.id;
|
||||
await getDetails();
|
||||
dialogFormVisible.value = true;
|
||||
ElMessage.success('查看详情!');
|
||||
// dialogTitle.value = '详情';
|
||||
// formDisabled.value = true;
|
||||
// dialogForm.landId = row.landId;
|
||||
// getDetails();
|
||||
// setDialogForm2();
|
||||
// dialogFormVisible.value = true;
|
||||
};
|
||||
const handleEdit = (row) => {
|
||||
ElMessage.success('点击编辑!');
|
||||
@ -339,16 +426,39 @@ const handleEdit = (row) => {
|
||||
// nowSelectRow.value = row;
|
||||
// dialogTitle.value = '编辑';
|
||||
// formDisabled.value = false;
|
||||
// dialogForm.id = row.id;
|
||||
// dialogForm.landId = row.landId;
|
||||
// getDetails();
|
||||
// setDialogForm2();
|
||||
// dialogFormVisible.value = true;
|
||||
};
|
||||
const setDialogForm = (row) => {
|
||||
Object.assign(dialogForm, row);
|
||||
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 setDialogForm2 = (row) => {
|
||||
dialogForm.fertilizeId = row.fertilizeId;
|
||||
dialogForm.fertilizeName = row.fertilizeName;
|
||||
dialogForm.useNumber = row.useNumber;
|
||||
dialogForm.useUnit = row.useUnit;
|
||||
dialogForm.useTime = row.useTime;
|
||||
dialogForm.detectionTime = row.detectionTime;
|
||||
dialogForm.detectionResult = row.detectionResult;
|
||||
dialogForm.detectionUnit = row.detectionUnit;
|
||||
dialogForm.detectionReport = row.detectionReport ?? '';
|
||||
};
|
||||
// 获取地块信息
|
||||
const getDetails = async () => {
|
||||
let response = await getTraceProductInfo(dialogForm.id);
|
||||
let response = await request({
|
||||
url: `/land-resource/landManage/getLandInfo?landId=${dialogForm.landId}`,
|
||||
});
|
||||
console.log(response);
|
||||
if (response.code == 200) {
|
||||
if (response.data) {
|
||||
@ -547,7 +657,6 @@ onMounted(() => {
|
||||
font-weight: bold;
|
||||
text-align: left;
|
||||
background: #f5f7fa;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.custom-descriptions :deep(.el-descriptions__content) {
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user