投入品管理 - 农药使用监管增删改查功能开发对接

sub-government-affairs-service/src/apis/inputSuppliesApi/material.js

@@ -17,21 +17,29 @@ export function getPesticideList(params) {
 }
 /* 新增农药 */
 export function addPesticide(data) {
-  return request('/inputGoods/pesticide/save', {
+  return request('/inputGoods/supervise/pesticide/save', {
     method: 'POST',
     data,
   });
 }
-/* 农药检测报告 */
+/* 编辑农药 */
 export function pesticideReportSave(data) {
-  return request('/inputGoods/pesticide/uploadReport', {
+  return request('/inputGoods/supervise/pesticide/edit', {
     data,
     method: 'PUT',
   });
 }
 /* 删除农药 */
 export function delPesticide(ids) {
-  return request(`/inputGoods/pesticide/delete/${ids}`);
+  return request(`/inputGoods/supervise/pesticide/delete/${ids}`);
+}
+/* 获取用药地块下拉选项 */
+export function getLandList() {
+  return request(`/inputGoods/supervise/pesticide/getLandList`);
+}
+/* 获取农药用药下拉选项 */
+export function getPesticideSelectList() {
+  return request(`/inputGoods/pesticide/getPesticideList`);
 }
 // #endregion
 

sub-government-affairs-service/src/components/FileUploader/index.vue

@@ -2,6 +2,7 @@
   <div class="file-uploader">
     <el-upload
       class="file-uploader__upload"
+      :class="{ hide: fileList.length >= limit }"
       :http-request="customUploadRequest"
       :on-success="handleUploadSuccess"
       :on-remove="handleRemove"
@@ -107,4 +108,8 @@ function handlePreview(file) {
 .file-uploader__upload {
   margin-right: 16px;
 }
+/* .el-upload--picture-card 控制加号部分 */
+:deep(.hide .el-upload--picture-card) {
+  display: none;
+}
 </style>

sub-government-affairs-service/src/styles/custom.scss

@@ -5,6 +5,11 @@
     border-radius: 10px;
     background: #fff;
 
+    .custom-h2 {
+      margin: 14px 0 0 20px;
+      font-size: 24px;
+    }
+
     .search-box {
       overflow: hidden;
       padding: 16px 8px 0 16px;
@@ -303,6 +308,7 @@
 }
 // 新增商品页面-结束
 
+// 弹性布局-左对齐-上对齐
 .flex-left-top {
   display: flex;
   flex-direction: row;
@@ -317,3 +323,26 @@
   white-space: nowrap;
   text-overflow: ellipsis;
 }
+
+// 弹窗表单样式-子元素一行2个列
+.dialog-form-container {
+  .dialog-form-title {
+    font-weight: bold;
+    margin-bottom: 20px;
+  }
+  .dialog-form-item{
+    margin-right: 20px;
+    .el-input,
+    .el-select {
+      width: 230px;
+    }
+  }
+  .dialog-form-many {
+    position: relative;
+    .dialog-form-many-delete {
+      position: absolute;
+      top: 28px;
+      right: 0;
+    }
+  }
+}

sub-government-affairs-service/src/views/inputSuppliesManage/material/pesticide/index.vue

@@ -1,6 +1,7 @@
 <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">
@@ -20,7 +21,7 @@
         </div>
       </div>
       <div class="table-toolbar">
-        <el-button type="primary" icon="plus">新增</el-button>
+        <el-button type="primary" icon="plus" @click="addItem()">新增</el-button>
       </div>
       <div class="table-cont">
         <tableComponent
@@ -43,17 +44,119 @@
         </tableComponent>
       </div>
     </div>
-
+    <el-dialog v-model="dialogFormVisible" :title="dialogTitle" width="700" :close-on-click-modal="false">
-    <el-dialog v-model="dialogFormVisible" :title="dialogTitle" width="500" :close-on-click-modal="false">
+      <el-form
-      <el-form ref="dialogRef" :model="dialogForm" :label-width="'80'" :rules="dialogFormRules">
+        ref="dialogRef"
-        <el-form-item label="姓名" prop="name">
+        :model="dialogForm"
-          <el-input v-model="dialogForm.name" autocomplete="off" placeholder="请输入姓名" />
+        :inline="true"
+        :label-width="'80'"
+        :rules="dialogFormRules"
+        :disabled="formDisabled"
+        class="dialog-form-container"
+      >
+        <div class="dialog-form-title">农药用药详情</div>
+        <el-form-item label="姓名" prop="name" class="dialog-form-item">
+          <el-input v-model="dialogForm.name" clearable placeholder="请输入姓名" />
         </el-form-item>
+        <el-form-item label="联系方式" prop="phone" class="dialog-form-item">
+          <el-input v-model="dialogForm.phone" clearable placeholder="请输入联系方式" />
+        </el-form-item>
+        <el-form-item label="用药地块" prop="landId" class="dialog-form-item">
+          <el-select v-model="dialogForm.landId" placeholder="请选择" @change="handleLandsChange">
+            <el-option v-for="item in landList" :key="item.id" :value="item.id" :label="item.landName" />
+          </el-select>
+        </el-form-item>
+
+        <div class="dialog-form-title">土地残留检测</div>
+        <div style="display: flex">
+          <div style="width: 48%; display: inline-block">
+            <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="检测结果" prop="detectionResult" class="dialog-form-item">
+              <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">
+              <el-input v-model="dialogForm.detectionUnit" clearable placeholder="请输入检测单位" />
+            </el-form-item>
+          </div>
+          <div style="width: 50%; display: inline-block">
+            <el-form-item label="检测报告" prop="detectionReport" class="dialog-form-item" style="width: 100%">
+              <FileUploader v-model="dialogForm.detectionReport" :limit="1" />
+            </el-form-item>
+          </div>
+        </div>
+
+        <div class="dialog-form-title">
+          农药用药信息
+          <el-button v-if="!formDisabled" type="primary" icon="plus" size="small" style="margin-left: 10px" @click="addMedicationInfo()"
+            >添加用药信息</el-button
+          >
+        </div>
+        <div v-for="(item, index) in dialogForm.pesticideSuperviseDetailVO" :key="index" class="dialog-form-many">
+          <el-form-item
+            label="农药名称"
+            required
+            :prop="`pesticideSuperviseDetailVO.${index}.pesticideId`"
+            :rules="dialogFormRules.pesticideSuperviseDetailVO.defaultField.pesticideId"
+            class="dialog-form-item"
+          >
+            <el-select v-model="item.pesticideId" placeholder="请选择" @change="handlePesticideChange(item, index)">
+              <el-option v-for="el in pesticideList" :key="el.id" :value="el.id" :label="el.pesticideName" />
+            </el-select>
+          </el-form-item>
+          <el-form-item
+            label="用药量"
+            required
+            :prop="`pesticideSuperviseDetailVO.${index}.useNumber`"
+            :rules="dialogFormRules.pesticideSuperviseDetailVO.defaultField.useNumber"
+            class="dialog-form-item"
+          >
+            <el-input-number v-model="item.useNumber" :min="1" :controls="false" placeholder="请输入用药量" style="width: 120px" />
+            <el-select v-model="item.useUnit" placeholder="请选择" style="width: 80px">
+              <el-option v-for="el in unitList" :key="el.unit" :value="el.unit" :label="el.unit" />
+            </el-select>
+          </el-form-item>
+          <el-form-item
+            label="使用时间"
+            required
+            :prop="`pesticideSuperviseDetailVO.${index}.useTime`"
+            :rules="dialogFormRules.pesticideSuperviseDetailVO.defaultField.useTime"
+            class="dialog-form-item"
+          >
+            <el-date-picker v-model="item.useTime" :clearable="false" type="date" value-format="YYYY-MM-DD" placeholder="请选择使用时间" />
+          </el-form-item>
+          <el-form-item
+            label="检测结果"
+            required
+            :prop="`pesticideSuperviseDetailVO.${index}.detailDetectionResult`"
+            :rules="dialogFormRules.pesticideSuperviseDetailVO.defaultField.detailDetectionResult"
+            class="dialog-form-item"
+          >
+            <el-select v-model="item.detailDetectionResult" placeholder="请选择" style="width: 200px">
+              <el-option value="合格" label="合格" />
+              <el-option value="不合格" label="不合格" />
+            </el-select>
+          </el-form-item>
+          <div v-if="!formDisabled" class="dialog-form-many-delete">
+            <el-button v-if="index !== 0" type="danger" plain size="small" @click="deleteMedicationInfo(index)">删除</el-button>
+          </div>
+        </div>
       </el-form>
       <template #footer>
         <div class="dialog-footer">
-          <el-button type="primary" @click="onSaveCategory">保存</el-button>
+          <el-button v-if="!formDisabled" type="primary" @click="onSaveCategory">保存</el-button>
-          <el-button @click="cancelDialog">取消</el-button>
+          <el-button v-if="!formDisabled" @click="cancelDialog">取消</el-button>
+          <el-button v-else @click="cancelDialog">关闭</el-button>
         </div>
       </template>
     </el-dialog>
@@ -61,11 +164,14 @@
 </template>
 
 <script setup>
-import { ref, reactive, computed, onMounted, onBeforeUnmount } from 'vue';
+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 { getPesticideList, addPesticide, pesticideReportSave, delPesticide } = inputSuppliesApi;
+import { id } from 'element-plus/es/locales.mjs';
+const { getPesticideList, addPesticide, pesticideReportSave, delPesticide, getLandList, getPesticideSelectList } = inputSuppliesApi;
+import { useApp } from '@/hooks';
+const app = useApp();
 
 // 查询条件
 const formInline = reactive({
@@ -91,7 +197,6 @@ const btnStatus = computed(() => {
 });
 const tableLoading = ref(false);
 const tableTotal = ref(0);
-let nowClickRow = ref({});
 const columns = ref([
   // { prop: "id", label: "ID" },
   { prop: 'name', label: '类别名称' },
@@ -124,59 +229,188 @@ const loadData = async () => {
   }
 };
 
-// 查看详情
+const landList = ref([]);
-const seeDetails = async (row) => {
+const getLandsList = async () => {
-  nowClickRow.value = row;
-  console.log('要查看详情的行: ', row);
-};
-// 编辑操作
-const handleEdit = async (row) => {
-  nowClickRow.value = row;
-  dialogTitle.value = '编辑';
-  dialogForm.id = row.id;
-  dialogForm.name = row.name;
-  dialogFormVisible.value = true;
-};
-// 删除操作
-const handleDelete = (row) => {
-  deleteGoods(row.id);
-};
-const deleteGoods = async (ids) => {
   try {
-    tableLoading.value = true;
+    let response = await getLandList();
-    let res = await delPesticide({ id: ids });
+    if (response.code == 200) {
-    tableLoading.value = false;
+      landList.value = response.data;
-    if (res.code == 200) {
-      onSubmit();
-      ElMessage.success('删除成功');
-    } else {
-      ElMessage.error(res.msg);
     }
   } catch (error) {
-    tableLoading.value = false;
+    console.error(error);
   }
 };
+const handleLandsChange = () => {
+  const landItem = landList.value.find((item) => item.id == dialogForm.landId);
+  dialogForm.landName = landItem.landName;
+};
+const pesticideList = ref([]);
+const getPesticidesList = async () => {
+  try {
+    let response = await getPesticideSelectList();
+    if (response.code == 200) {
+      pesticideList.value = response.data;
+    }
+  } catch (error) {
+    console.error(error);
+  }
+};
+const unitList = ref([
+  { id: '1', unit: 'kg' },
+  { id: '2', unit: 'g' },
+  { id: '3', unit: 'L' },
+  { id: '4', unit: 'ml' },
+]);
+const handlePesticideChange = (item, index) => {
+  dialogForm.pesticideSuperviseDetailVO[index].pesticideName = pesticideList.value[index].pesticideName;
+  console.log(dialogForm.pesticideSuperviseDetailVO);
+};
+const deleteMedicationInfo = (index) => {
+  dialogForm.pesticideSuperviseDetailVO.splice(index, 1);
+};
 
 const dialogFormVisible = ref(false);
 const dialogRef = ref(null);
 const dialogTitle = ref('新增');
+const formDisabled = ref(false);
 const dialogForm = reactive({
   id: '',
   name: '',
+  phone: '',
+  landId: '',
+  landName: '',
+  detectionTime: '',
+  detectionResult: '',
+  detectionUnit: '',
+  detectionReport: '',
+  pesticideSuperviseDetailVO: [{ pesticideId: '', pesticideName: '', useNumber: 1, useTime: '', useUnit: 'ml', detailDetectionResult: '' }],
 });
 const dialogFormRules = ref({
   name: [
     { required: true, message: '请输入分类名称', trigger: 'blur' },
     { min: 2, max: 10, message: '长度在 2 到 10 个字符', trigger: 'blur' },
   ],
+  phone: [
+    { required: true, message: '请输入手机号', trigger: 'blur' },
+    { pattern: /^1[3-9]\d{9}$/, message: '请输入正确的11位手机号', trigger: 'blur' },
+  ],
+  landId: [
+    {
+      required: true,
+      message: '请选择用药地块',
+      trigger: ['change', 'blur'],
+    },
+  ],
+  detectionTime: [{ required: true, message: '请选择检测时间', trigger: ['change', 'blur'] }],
+  detectionResult: [
+    {
+      required: true,
+      message: '请选择检测结果',
+      trigger: ['change', 'blur'],
+    },
+  ],
+  detectionUnit: [{ required: true, message: '请输入检测单位', trigger: 'blur' }],
+  pesticideSuperviseDetailVO: {
+    type: 'array',
+    defaultField: {
+      pesticideId: [{ required: true, message: '请选择农药名称', trigger: 'change' }],
+      useNumber: [
+        { required: true, message: '请输入用药量', trigger: 'blur' },
+        { type: 'number', min: 1, message: '用药量必须大于0', trigger: 'blur' },
+      ],
+      useUnit: [{ required: true, message: '请选择单位', trigger: 'change' }],
+      useTime: [{ required: true, message: '请选择使用时间', trigger: 'change' }],
+      detailDetectionResult: [{ required: true, message: '请选择检测结果', trigger: 'change' }],
+    },
+  },
 });
+const addMedicationInfo = () => {
+  dialogForm.pesticideSuperviseDetailVO.push({
+    pesticideSuperviseId: '',
+    detailId: '',
+    pesticideId: '',
+    pesticideName: '',
+    useNumber: 1,
+    useTime: '',
+    useUnit: 'ml',
+  });
+};
+// 新增操作
+const addItem = async () => {
+  restDialogForm();
+  dialogTitle.value = '新增';
+  formDisabled.value = false;
+  dialogFormVisible.value = true;
+};
+// 查看详情
+const seeDetails = async (row) => {
+  dialogTitle.value = '详情';
+  setDialogForm(row);
+  formDisabled.value = true;
+  dialogFormVisible.value = true;
+};
+// 编辑操作
+const handleEdit = (row) => {
+  console.log('要编辑的行: ', row);
+  dialogTitle.value = '编辑';
+  setDialogForm(row);
+  formDisabled.value = false;
+  dialogFormVisible.value = true;
+};
+const setDialogForm = (row) => {
+  dialogForm.id = row.id;
+  dialogForm.name = row.name;
+  dialogForm.phone = row.phone;
+  dialogForm.landId = row.landId;
+  dialogForm.landName = row.landName;
+  dialogForm.detectionTime = row.detectionTime;
+  dialogForm.detectionResult = row.detectionResult;
+  dialogForm.detectionUnit = row.detectionUnit;
+  dialogForm.detectionReport = row.detectionReport;
+  if (row.pesticideSuperviseDetailVO.length > 0) {
+    dialogForm.pesticideSuperviseDetailVO = row.pesticideSuperviseDetailVO.map((el) => {
+      el.useNumber = Number(el.useNumber);
+      el.pesticideId = Number(el.pesticideId);
+      return el;
+    });
+  }
+};
+// 删除操作
+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 delPesticide(ids);
+    return res;
+  } catch (error) {
+    return false;
+  }
+};
 const onSaveCategory = () => {
+  console.log(dialogForm);
   dialogRef.value.validate(async (valid, fields) => {
     if (valid) {
       try {
         let param = { ...dialogForm };
-        param.level = dialogForm.selectedNode.level ?? '';
-        param.type = dialogForm.selectedNode.type ?? '';
         let response;
         if (dialogTitle.value == '新增') {
           response = await addPesticide(param);
@@ -200,16 +434,44 @@ const onSaveCategory = () => {
     }
   });
 };
-const cancelDialog = () => {
+const cancelDialog = async () => {
-  Object.assign(dialogForm, {
+  restDialogForm();
-    // 保持响应性，手动清空字段
-    id: '',
-    name: '',
-  });
   dialogFormVisible.value = false;
 };
+const restDialogForm = () => {
+  Object.assign(dialogForm, {
+    id: '',
+    name: '',
+    phone: '',
+    landId: '',
+    landName: '',
+    detectionTime: '',
+    detectionResult: '',
+    detectionUnit: '',
+    detectionReport: '',
+    pesticideSuperviseDetailVO: [{ pesticideId: '', pesticideName: '', useNumber: 1, useTime: '', useUnit: 'ml' }],
+  });
+};
+
 onMounted(() => {
   onSubmit();
+  getLandsList();
+  getPesticidesList();
 });
 </script>
-<style lang="scss" scoped></style>
+<style lang="scss" scoped>
+.dialog-form-item {
+  :deep(.el-upload--picture-card) {
+    width: 120px;
+    height: 120px;
+  }
+  :deep(.file-uploader__upload) {
+    width: 120px;
+    height: 120px;
+  }
+  :deep(.el-upload-list__item) {
+    width: 120px;
+    height: 120px;
+  }
+}
+</style>