投入品管理 - 农药使用监管页面展示列表开发，表格组件调整

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

@@ -11,7 +11,7 @@ export function getMaterailTypes(params) {
 
 /* 获取农药列表 */
 export function getPesticideList(params) {
-  return request('/inputGoods/pesticide/page', {
+  return request('/inputGoods/supervise/pesticide/page', {
     params,
   });
 }

sub-government-affairs-service/src/components/tableComponent.vue

@@ -0,0 +1,330 @@
+<template>
+  <div class="custom-table-container">
+    <el-table
+      style="flex: 1; display: flex; flex-direction: column; text-align: center"
+      :max-height="tableMaxHeight"
+      v-loading="loading"
+      :data="tableData"
+      :stripe="showStripe"
+      :fit="true"
+      v-bind="$attrs"
+      :header-cell-class-name="headerCellClassName"
+      :cell-class-name="cellClassName"
+      @selection-change="handleSelectionChange"
+    >
+      <!-- 树形展开 -->
+      <el-table-column v-if="tree" type="expand">
+        <template #default="props">
+          <slot name="tree" :row="props.row"></slot>
+        </template>
+      </el-table-column>
+
+      <!-- 首列多选框 -->
+      <el-table-column v-if="showSelection" type="selection" width="30" align="center" fixed />
+      <el-table-column label="序号" width="70" v-if="showSort" fixed align="center">
+        <template #default="{ $index }">
+          {{ (currentPage - 1) * pageSize + $index + 1 }}
+        </template>
+      </el-table-column>
+
+      <template v-for="column in columns" :key="column.prop">
+        <el-table-column
+          :prop="column.prop"
+          :label="column.label"
+          :width="column.width"
+          :align="column.align || 'center'"
+          :fixed="column.fixed ?? false"
+          :sortable="column.sortable"
+          :header-class-name="column.headerClassName"
+        >
+          <!-- 支持插槽 -->
+          <template v-if="column.slotName" #default="scope">
+            <slot :name="column.slotName" :row="scope.row"></slot>
+          </template>
+        </el-table-column>
+      </template>
+    </el-table>
+
+    <div v-if="showPagination" class="pagination-container">
+      <el-pagination
+        v-model:current-page="computedCurrentPage"
+        v-model:page-size="computedPageSize"
+        :page-sizes="pageSizes"
+        :small="small"
+        :disabled="disabled"
+        :background="background"
+        layout="total, sizes, prev, pager, next, jumper"
+        :total="total"
+        @current-change="handleCurrentChange"
+        @size-change="pageSizeChange"
+      />
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, watch, computed, onMounted, onBeforeUnmount } from 'vue';
+
+const props = defineProps({
+  loading: {
+    type: Boolean,
+    default: false,
+  },
+  // 表格数据
+  tableData: {
+    type: Array,
+    default: () => [],
+  },
+  // 列配置
+  columns: {
+    type: Array,
+    default: () => [],
+  },
+  tree: {
+    type: Boolean,
+    default: false,
+  },
+  // 当前页码（由外部传入）
+  currentPage: {
+    type: Number,
+    default: 1,
+  },
+  // 每页数量（由外部传入）
+  pageSize: {
+    type: Number,
+    default: 10,
+  },
+  // 总条数
+  total: {
+    type: Number,
+    default: 0,
+  },
+  // 是否显示分页
+  showPagination: {
+    type: Boolean,
+    default: true,
+  },
+  // 是否显示边框:border="showBorder"添加到组件会显示横竖边框，不添加只显示横边框
+  showBorder: {
+    type: Boolean,
+    default: true,
+  },
+  // 是否显示斑马纹
+  showStripe: {
+    type: Boolean,
+    default: false,
+  },
+  // 是否显示首列多选框
+  showSelection: {
+    type: Boolean,
+    default: false,
+  },
+  // 是否展示序号
+  showSort: {
+    type: Boolean,
+    default: false,
+  },
+  // 每页显示条数选项
+  pageSizes: {
+    type: Array,
+    default: () => [10, 20, 30, 50],
+  },
+  // 是否使用小型分页样式
+  small: {
+    type: Boolean,
+    default: false,
+  },
+  // 是否禁用
+  disabled: {
+    type: Boolean,
+    default: false,
+  },
+  // 是否为分页按钮添加背景色
+  background: {
+    type: Boolean,
+    default: true,
+  },
+  // 自定义表头类名函数
+  headerCellClassName: {
+    type: Function,
+    default: () => 'custom-header',
+  },
+  // 自定义单元格类名函数
+  cellClassName: {
+    type: Function,
+    default: () => 'custom-cell',
+  },
+  rowkey: {
+    type: String,
+    default: '',
+  },
+});
+
+const emit = defineEmits(['update:currentPage', 'update:pageSize', 'page-change', 'selection-change']);
+
+// 每页数量（双向绑定）
+const computedPageSize = computed({
+  get: () => props.pageSize,
+  set: (val) => emit('update:pageSize', val),
+});
+// 当前页码（双向绑定）
+const computedCurrentPage = computed({
+  get: () => props.currentPage,
+  set: (val) => emit('update:currentPage', val),
+});
+
+// 分页大小改变
+const pageSizeChange = (val) => {
+  // console.log(`每页 ${val} 条`);
+  // console.log(props.currentPage);
+  emit('update:pageSize', val);
+  emit('page-change', {
+    page: props.currentPage,
+    pageSize: val,
+  });
+};
+
+// 当前页改变
+const handleCurrentChange = (val) => {
+  // console.log(`当前页改变 ${val} 页`);
+  emit('page-change', {
+    page: val,
+    pageSize: props.pageSize,
+  });
+};
+
+// 多选框变化
+const handleSelectionChange = (selection) => {
+  const selectedIds = selection.map((row) => (props.rowkey == '' ? row.id : row[props.rowkey]));
+  emit('selection-change', selection, selectedIds);
+};
+
+const tableRef = ref(null);
+const tableMaxHeight = ref(null); // 使用max-height而不是height
+
+// 自动计算最大高度（预留分页器空间）
+const calculateMaxHeight = () => {
+  const paginationHeight = 60; // 分页器固定高度
+  const container = tableRef.value?.$el?.parentElement;
+  if (container) {
+    const containerHeight = container.clientHeight;
+    tableMaxHeight.value = containerHeight - paginationHeight;
+  }
+};
+
+onMounted(() => {
+  calculateMaxHeight();
+  window.addEventListener('resize', calculateMaxHeight);
+
+  // 添加MutationObserver监听父容器尺寸变化
+  const observer = new MutationObserver(calculateMaxHeight);
+  if (tableRef.value?.$el?.parentElement) {
+    observer.observe(tableRef.value.$el.parentElement, {
+      attributes: true,
+      attributeFilter: ['style', 'class'],
+    });
+  }
+});
+
+onBeforeUnmount(() => {
+  window.removeEventListener('resize', calculateMaxHeight);
+});
+</script>
+
+<style lang="scss" scoped>
+.custom-table-container {
+  // position: relative;
+  padding: 10px 0;
+  display: flex;
+  flex-direction: column;
+  height: 100%; /* 关键：继承父容器高度 */
+  overflow: hidden; /* 防止内容溢出 */
+
+  /* 表格弹性布局 */
+  :deep(.el-table) {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+
+    /* 表头固定 */
+    .el-table__header-wrapper {
+      flex-shrink: 0;
+    }
+
+    /* 表体可滚动 */
+    .el-table__body-wrapper {
+      flex: 1;
+      overflow: auto;
+    }
+  }
+
+  .demo-form-inline {
+    text-align: left;
+    padding-left: 20px;
+    padding-top: 4px;
+  }
+
+  .pagination-container {
+    margin-top: 20px;
+    padding: 0 30px 0 20px;
+    display: flex;
+    justify-content: right;
+    color: #999;
+    font-weight: 400;
+  }
+  .custom-pagination-text {
+    flex: 1;
+    text-align: left;
+    line-height: 32px;
+    font-size: 14px;
+  }
+
+  .custom-pagination-size {
+    text-align: right;
+    line-height: 32px;
+    margin-left: 20px;
+    font-size: 14px;
+  }
+
+  /* 去除表格边框 */
+  // :deep(.el-table) {
+  //   --el-table-border-color: transparent;
+  // }
+
+  /* 自定义鼠标悬停颜色 */
+  // :deep(.el-table__body tr:hover > td) {
+  //   background-color: rgba(237 255 248) !important;
+  // }
+
+  /* 自定义表头样式 */
+  :deep(.custom-header) {
+    color: #333;
+  }
+  /* 自定义表头样式 */
+  :deep(.custom-cell) {
+    color: #606266;
+  }
+
+  :deep(.el-pagination) {
+    /* 整体分页样式 */
+    font-size: 14px;
+    font-weight: normal;
+
+    /* 每页条数选择器 */
+    .el-pagination__sizes {
+      .el-input__inner {
+        font-weight: 400;
+      }
+    }
+
+    /* 跳页输入框 */
+    .el-pagination__jump {
+      font-weight: 400;
+      // position: absolute;
+      // right: 16px;
+      // bottom: 12px;
+      color: #999;
+    }
+  }
+}
+</style>

sub-government-affairs-service/src/main.js

@@ -8,6 +8,7 @@ import 'element-plus/dist/index.css';
 import Avue from '@smallwei/avue';
 import '@smallwei/avue/lib/index.css';
 import './utils/permission';
+import './styles/custom.scss';
 import { registerDirective } from './directives';
 import { registerGlobalComponents } from './plugins/globalComponents';
 import { registerElIcons } from './plugins/icon';

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

@@ -0,0 +1,319 @@
+.app-container {
+  .container-custom {
+    width: 100%;
+    overflow: hidden; /* 防止全局滚动条 */
+    border-radius: 10px;
+    background: #fff;
+
+    .search-box {
+      overflow: hidden;
+      padding: 16px 8px 0 16px;
+      background: #fff;
+      .order-tab {
+        width: 100%;
+        .el-tabs__nav-wrap::after {
+          background: transparent !important;
+        }
+        .el-tabs__active-bar {
+          height: 3px !important;
+          border-radius: 4px;
+        }
+        .el-descriptions__label,
+        .el-descriptions__content {
+          font-size: 16px !important;
+        }
+        .cell-item {
+          display: inline-flex;
+        }
+        .el-descriptions__label {
+          color: #999;
+        }
+        .el-descriptions__content {
+          color: #333;
+        }
+      }
+    }
+    .search-bar {
+      display: flex;
+      flex-shrink: 0; /* 禁止收缩 */
+
+      .search-bar-left {
+        flex: 1;
+      }
+
+      .search-bar-right {
+        width: 100px;
+        text-align: right;
+        padding-right: 8px;
+      }
+
+      .demo-form-inline {
+        text-align: left;
+      }
+
+      .el-form--inline .el-form-item {
+        margin-right: 30px;
+      }
+
+      .demo-form-inline .el-input {
+        --el-input-width: 160px;
+      }
+
+      .demo-form-inline .el-select {
+        --el-select-width: 160px;
+      }
+
+      .demo-form-inline .el-date-picker {
+        --el-select-width: 160px;
+      }
+      .el-form .el-form-item__label {
+        font-weight: 400;
+      }
+      .custom-form-inline .el-input {
+        width: 260px;
+      }
+    }
+    .table-toolbar {
+      text-align: left;
+      padding-left: 20px;
+      padding-top: 20px;
+      background-color: #fff;
+    }
+    .table-cont {
+      padding: 10px 20px;
+      overflow: hidden;
+      background-color: #fff;
+      position: relative;
+      .el-table__empty-text {
+        width: 200px;
+      }
+      .el-button-custom{
+        font-size: 14px !important;
+        color: #25bf82;
+        padding: 0;
+      }
+      .el-button-delete{
+        font-size: 14px !important;
+        color: #ff4d4f;
+        padding: 0;
+      }
+    }
+
+    /* 自定义弹窗样式 */
+    .traceability-dialog {
+      background: transparent;
+      box-shadow: none;
+      border-radius: 16px !important;
+    }
+
+    /* 主要内容区域 */
+    .dialog-content {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      background: white;
+      border-radius: 8px;
+      padding: 0 0 20px 0;
+      box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+    }
+
+    /* 产品信息 */
+    .product-info {
+      width: 100%;
+      display: flex;
+      justify-content: space-between;
+      margin-bottom: 20px;
+      font-size: 14px;
+      color: #666;
+    }
+
+    .product-name {
+      font-weight: bold;
+      color: #333;
+    }
+
+    /* 二维码图片 */
+    .qrcode-image {
+      width: 200px;
+      height: 200px;
+      margin: 0 auto;
+    }
+
+    /* 下载区域 */
+    .download-section {
+      display: flex;
+      align-items: center;
+      margin: 0 0 10px 0;
+      color: #25bf82;
+      cursor: pointer;
+      font-size: 12px;
+      line-height: 18px;
+    }
+
+    .download-icon {
+      margin-left: 8px;
+      font-size: 16px;
+    }
+
+    /* 遗传编码区域 */
+    .code-section {
+      display: flex;
+      align-items: center;
+      margin: 10px 0;
+      background: rgba(37, 191, 130, 0.1);
+      border-radius: 4px;
+    }
+
+    .genetic-code {
+      font-family: monospace;
+      font-size: 14px;
+      color: #25bf82;
+      display: inline-block;
+      max-width: 250px;
+      padding: 0 10px;
+    }
+
+    .copy-icon {
+      margin-left: 10px;
+      color: #409eff;
+      cursor: pointer;
+      font-size: 16px;
+    }
+
+    /* 关闭按钮 */
+    .close-button {
+      position: absolute;
+      left: 50%;
+      transform: translateX(-50%);
+      bottom: -60px;
+      color: white;
+      font-size: 30px;
+      cursor: pointer;
+      transition: all 0.3s;
+    }
+  }
+  // 表格中文本的颜色
+  .color-blue {
+    color: #3685fe;
+  }
+  .color-black {
+    color: #000000;
+  }
+  .color-gray {
+    color: #5a5a5a;
+  }
+  .color-orange {
+    color: #ffb345;
+  }
+  .color-green {
+    color: #25bf82;
+  }
+  .color-red {
+    color: #ff4348;
+  }
+}
+.el-button {
+  font-size: 12px !important;
+  font-weight: 400;
+}
+// 页面添加的自定义容器，上下撑满
+.customer-control {
+  position: absolute;
+  height: 100%;
+  left: 0;
+  right: 0;
+  min-width: 1000px;
+}
+// 表格组件中的各插槽元素自定义样式
+.custom-tooltip-content {
+  display: flex;
+  justify-content: space-between;
+  gap: 10px;
+  padding: 3px 0;
+  
+}
+.el-icon-custom {
+  vertical-align: middle;
+  cursor: pointer;
+  font-size: 16px;
+  // color: #fff;
+}
+.table-cell-img-box {
+  width: 60px;
+  height: 60px;
+  text-align: center;
+  overflow: hidden; /* 隐藏超出部分 */
+  display: flex; /* 使用 Flex 布局居中 */
+  justify-content: center;
+  align-items: center;
+  .table-cell-img {
+    min-width: 100%; /* 至少撑满宽度 */
+    min-height: 100%; /* 至少撑满高度 */
+    object-fit: cover; /* 保持比例并覆盖容器 */
+  }
+}
+
+// 新增商品页面-开始
+.customer-box {
+  height: 100%;
+  border-radius: 16px;
+  padding: 20px 16px;
+  overflow-y: auto;
+  background-color: #fff;
+  .my-el-select {
+    width: 200px;
+  }
+  .el-input-number .el-input__inner {
+    text-align: left;
+  }
+  // 商品属性
+  .attr-item {
+    display: inline-block;
+    margin-right: 10px;
+    .el-icon {
+      vertical-align: middle;
+      margin: 5px;
+    }
+  }
+  .attr-row {
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-start;
+    flex-wrap: nowrap;
+    gap: 10px;
+    margin-bottom: 10px;
+  }
+  .attr-input {
+    width: 120px;
+  }
+  .attr-clomn {
+    width: 160px;
+  }
+  .attr-clomn200 {
+    width: 160px;
+  }
+  .attr-clomn220 {
+    width: 220px;
+  }
+  .attr-box {
+    padding: 16px 16px 6px 16px;
+    border-radius: 6px;
+    border: 1px solid #999;
+  }
+}
+// 新增商品页面-结束
+
+.flex-left-top {
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-start;
+  align-items: flex-start;
+}
+
+// 溢出隐藏
+.text-ellipsis {
+  width: 100%;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}

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

@@ -1,617 +1,215 @@
 <template>
-  <section class="custom-page">
+  <div class="app-container">
-    <h2>农药基本信息</h2>
+    <div class="container-custom">
-    <TypeMenu v-if="materialTypes[1].length > 1" v-model:type="_type" :types="materialTypes['1']" />
+      <div ref="searchBarRef" class="search-box">
-    <br />
+        <div class="search-bar">
-    <avue-crud
+          <div class="search-bar-left">
-      ref="crud"
+            <el-form ref="searchForm" :inline="true" :model="formInline" class="demo-form-inline" :label-width="'auto'">
-      v-model:page="pageData"
+              <el-form-item label="姓名" prop="name">
-      v-model:search="searchCondition"
+                <el-input v-model="formInline.name" placeholder="请输入姓名" clearable />
-      :table-loading="_loading"
+              </el-form-item>
-      :data="data"
+              <el-form-item label="联系方式" prop="phone">
-      :option="option"
+                <el-input v-model="formInline.phone" placeholder="请输入联系方式" clearable />
-      :before-close="handleCloseDialog"
+              </el-form-item>
-      @search-change="
+              <el-form-item label="">
-        (form, done) => {
+                <el-button type="primary" icon="Search" @click="onSubmit">查询</el-button>
-          getData(1);
+                <el-button icon="Refresh" @click="resetForm">重置</el-button>
-          done();
+              </el-form-item>
-        }
+            </el-form>
-      "
+          </div>
-      @search-reset="getData(1)"
+        </div>
-      @refresh-change="getData"
+      </div>
-      @current-change="getData"
+      <div class="table-toolbar">
-      @size-change="getData(1)"
+        <el-button type="primary" icon="plus">新增</el-button>
-      @row-save="handleRowSave"
+      </div>
-      @row-update="handleRowUpdate"
+      <div class="table-cont">
-    >
+        <tableComponent
-      <template #menu="scope">
+          :table-data="tableData"
-        <custom-table-operate :actions="actions" :data="scope" />
+          :columns="columns"
+          :show-selection="false"
+          :loading="tableLoading"
+          :total="tableTotal"
+          :current-page="formInline.current"
+          :page-size="formInline.size"
+          :show-sort="true"
+          @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="500" :close-on-click-modal="false">
+      <el-form ref="dialogRef" :model="dialogForm" :label-width="'80'" :rules="dialogFormRules">
+        <el-form-item label="姓名" prop="name">
+          <el-input v-model="dialogForm.name" autocomplete="off" placeholder="请输入姓名" />
+        </el-form-item>
+      </el-form>
+      <template #footer>
+        <div class="dialog-footer">
+          <el-button type="primary" @click="onSaveCategory">保存</el-button>
+          <el-button @click="cancelDialog">取消</el-button>
+        </div>
       </template>
-      <template #photoUrl-form="{ type }">
+    </el-dialog>
-        <Attrs v-model:attrs="attrs" :type="type == 'add' ? 'add' : 'view'" :limit="2" />
+  </div>
-      </template>
-      <template #checkInfo-form="{ row }">
-        <section style="text-align: center; line-height: 58px">
-          <el-button @click="handleCheckInfo('open')">查看报告</el-button>
-        </section>
-      </template>
-      <template #detectionReport-form="{ type }">
-        <Attrs v-model:attrs="reportAttrs" :type="type" :up-btn="reportAttrs.length < 1" :file-num="reportAttrs.length > 0 ? 1 : 3" :limit="2" />
-      </template>
-      <template #productSpecification-form="{ value, type }">
-        <NumberSelect v-if="type == 'add'" v-model:value="productSpecification" :options="goodsUnitOptions" />
-        <span v-if="type == 'view'">{{ value }}</span>
-      </template>
-      <template #dosage-form="{ value, type }">
-        <NumberSelect v-if="type == 'add'" v-model:value="useDosage" :options="useDosageUnit" />
-        <span v-if="type == 'view'">{{ value }}</span>
-      </template>
-      <template #checkBtn-form>
-        <section style="text-align: center; line-height: 58px">
-          <el-button @click="handleCheckInfo('close')">关闭</el-button>
-        </section>
-      </template>
-    </avue-crud>
-  </section>
 </template>
 
 <script setup>
-import { ref, watch } from 'vue';
+import { ref, reactive, computed, onMounted, onBeforeUnmount } from 'vue';
-import TypeMenu from '../../common/TypeMenu.vue';
+import tableComponent from '@/components/tableComponent.vue';
-import { CRUD_OPTIONS, customRules } from '@/config';
+import { ElMessage } from 'element-plus';
-import { useBasicInfo } from '@/views/inputSuppliesManage/hooks/useBasicInfo';
-import Attrs from '@/views/inputSuppliesManage/common/Attrs.vue';
-import NumberSelect from '@/views/inputSuppliesManage/common/NumberSelect.vue';
 import inputSuppliesApi from '@/apis/inputSuppliesApi';
-import { ElMessage, ElMessageBox } from 'element-plus';
-import assistFn from '@/views/inputSuppliesManage/hooks/useAssistFn';
-const { deleteFn } = new assistFn();
-
-const { defaultGet, loadFinish, materialTypes, materialTwoLevel, goodsUnitOptions, useDosageUnit, handleNumUnit, handleShowName, targetName } =
-  useBasicInfo({
-    moduleType: '1',
-  });
 const { getPesticideList, addPesticide, pesticideReportSave, delPesticide } = inputSuppliesApi;
 
-/* --------------- data --------------- */
+// 查询条件
-// #region
+const formInline = reactive({
-const _type = ref('0');
+  name: '',
-watch(
+  phone: '',
-  () => _type.value,
+  current: 1,
-  () => getData(1),
-  {
-    deep: true,
-  }
-);
-const searchCondition = ref({
-  keywords: '',
-});
-const crud = ref();
-const _loading = ref(true);
-const data = ref([]);
-const pageData = ref({
-  total: 0,
-  currentPage: 1,
   size: 10,
 });
+const searchForm = ref(null);
+const onSubmit = () => {
+  formInline.current = 1;
+  loadData();
+};
+const resetForm = () => {
+  searchForm.value.resetFields();
+};
 
-const dicDatas = ref({
+// 表格数据
-  _targetPests: {
+const tableData = ref([]);
-    one: '1',
+const selectedIds = ref([]);
-    two: '1',
+const btnStatus = computed(() => {
-    dic: [],
+  return selectedIds.value.length <= 0;
-  },
-  _mainComponent: {
-    one: '1',
-    two: '2',
-    dic: [],
-  },
-  _produceDosage: {
-    one: '1',
-    two: '3',
-    dic: [],
-  },
 });
-const option = ref({
+const tableLoading = ref(false);
-  ...CRUD_OPTIONS,
+const tableTotal = ref(0);
-  selection: false,
+let nowClickRow = ref({});
-  labelWidth: 124,
+const columns = ref([
-  editBtn: false,
+  // { prop: "id", label: "ID" },
-  delBtn: false,
+  { prop: 'name', label: '类别名称' },
-  dialogWidth: '60%',
+  { prop: 'phone', label: '联系方式' },
-  updateBtnText: '上传报告',
+  { prop: 'landName', label: '用药地块' },
-  column: [
+  { prop: 'detectionTime', label: '检测时间' },
-    {
+  { prop: 'detectionResult', label: '检测结果' },
-      hide: true,
+  { prop: 'detectionUnit', label: '检测单位' },
-      label: '关键字',
+  // { prop: 'status', label: '检测报告(是否上传)' },
-      prop: 'keywords',
+  { prop: 'action', label: '操作', slotName: 'action', width: 230, fixed: 'right' },
-      search: true,
+]);
-      addDisplay: false,
+const handlePaginationChange = ({ page, pageSize }) => {
-      editDisplay: false,
+  formInline.current = page;
-      searchPlaceholder: '输入肥料名称',
+  formInline.size = pageSize;
-      viewDisplay: false,
+  // 这里可以调用API获取新数据
-    },
+  loadData();
-    // {
+};
-    //   prop: 'id',
+const loadData = async () => {
-    //   label: '农药编号',
+  tableLoading.value = true;
-    //   addDisplay: false,
+  try {
-    //   editDisplay: false,
+    let response = await getPesticideList(formInline);
-    // },
+    tableLoading.value = false;
-    {
+    if (response.code == 200) {
-      prop: 'pesticideName',
+      tableData.value = response.data.records;
-      label: '名称',
+      tableTotal.value = response.data.total;
-      width: '120',
+    }
-      editDisplay: false,
+  } catch (error) {
-      rules: customRules({ msg: '请输入农药名称' }),
+    tableLoading.value = false;
-    },
+    console.error(error);
-    {
+  }
-      hide: true,
+};
-      prop: 'productStandCode',
+
-      label: '产品标准证号',
+// 查看详情
-      width: '120',
+const seeDetails = async (row) => {
-      viewDisplay: false,
+  nowClickRow.value = row;
-      editDisplay: false,
+  console.log('要查看详情的行: ', row);
-      rules: customRules({ msg: '请输入产品标准证号' }),
+};
-    },
+// 编辑操作
-    {
+const handleEdit = async (row) => {
-      hide: true,
+  nowClickRow.value = row;
-      prop: 'photoUrl',
+  dialogTitle.value = '编辑';
-      label: '农药图片',
+  dialogForm.id = row.id;
-      span: 24,
+  dialogForm.name = row.name;
-      editDisplay: false,
+  dialogFormVisible.value = true;
-    },
+};
-    {
+// 删除操作
-      hide: true,
+const handleDelete = (row) => {
-      prop: 'pesticideRegistCode',
+  deleteGoods(row.id);
-      label: '农药登记证号',
+};
-      width: '120',
+const deleteGoods = async (ids) => {
-      viewDisplay: false,
+  try {
-      editDisplay: false,
+    tableLoading.value = true;
-      rules: customRules({ msg: '请输登记证号' }),
+    let res = await delPesticide({ id: ids });
-    },
+    tableLoading.value = false;
-    {
+    if (res.code == 200) {
-      prop: 'manufacturer',
+      onSubmit();
-      label: '生产厂家',
+      ElMessage.success('删除成功');
-      width: '220',
+    } else {
-      editDisplay: false,
+      ElMessage.error(res.msg);
-      rules: customRules({ msg: '请输入生产厂家' }),
+    }
-    },
+  } catch (error) {
-    // {
+    tableLoading.value = false;
-    //   prop: 'distributor',
+  }
-    //   width: '220',
+};
-    //   label: '经销商',
+
-    //   editDisplay: false,
+const dialogFormVisible = ref(false);
-    // },
+const dialogRef = ref(null);
-    {
+const dialogTitle = ref('新增');
-      prop: 'productSpecification',
+const dialogForm = reactive({
-      width: '100',
+  id: '',
-      label: '产品规格',
+  name: '',
-      editDisplay: false,
+});
-    },
+const dialogFormRules = ref({
-    {
+  name: [
-      prop: 'toxicityLevel',
+    { required: true, message: '请输入分类名称', trigger: 'blur' },
-      width: '140',
+    { min: 2, max: 10, message: '长度在 2 到 10 个字符', trigger: 'blur' },
-      label: '毒性',
-      editDisplay: false,
-      value: '无毒',
-    },
-    {
-      prop: 'dosage',
-      width: '140',
-      label: '建议用量',
-      editDisplay: false,
-    },
-    {
-      prop: 'expiryDate',
-      label: '保质期',
-      addDisplay: false,
-      editDisplay: false,
-    },
-    {
-      prop: 'targetPests',
-      width: '200',
-      label: '防治对象',
-      addDisplay: false,
-      editDisplay: false,
-    },
-    {
-      prop: 'mainComponent',
-      width: '200',
-      label: '化学成分',
-      addDisplay: false,
-      editDisplay: false,
-    },
-    {
-      prop: 'produceDosage',
-      width: '200',
-      label: '加工剂型',
-      addDisplay: false,
-      editDisplay: false,
-    },
-    {
-      hide: true,
-      prop: '_targetPests',
-      label: '防治对象',
-      type: 'cascader',
-      multiple: true,
-      dicData: [],
-      value: [],
-      span: 24,
-      viewDisplay: false,
-      editDisplay: false,
-      rules: customRules({ msg: '请选择防治对象' }),
-      expandTrigger: 'click',
-    },
-    {
-      hide: true,
-      prop: '_mainComponent',
-      label: '化学成分',
-      type: 'cascader',
-      multiple: true,
-      dicData: [],
-      value: [],
-      span: 24,
-      viewDisplay: false,
-      editDisplay: false,
-      rules: customRules({ msg: '请选择主要成分' }),
-      expandTrigger: 'click',
-    },
-    {
-      hide: true,
-      prop: '_produceDosage',
-      label: '加工剂型',
-      type: 'cascader',
-      multiple: true,
-      dicData: [],
-      value: [],
-      span: 24,
-      viewDisplay: false,
-      editDisplay: false,
-      rules: customRules({ msg: '加工剂型' }),
-      expandTrigger: 'click',
-    },
-    {
-      hide: true,
-      prop: 'usageMethod',
-      label: '使用方法',
-      type: 'textarea',
-      span: 24,
-      viewDisplay: false,
-      editDisplay: false,
-    },
-    {
-      hide: true,
-      prop: 'precautions',
-      label: '注意事项',
-      type: 'textarea',
-      span: 24,
-      viewDisplay: false,
-      editDisplay: false,
-    },
-    {
-      labelWidth: 0,
-      border: false,
-      prop: 'checkInfo',
-      span: 24,
-      addDisplay: false,
-      editDisplay: false,
-    },
-  ],
-  group: [
-    {
-      label: '农药基本信息',
-      prop: 'basic_info',
-      addDisplay: false,
-      viewDisplay: false,
-      column: [
-        {
-          prop: 'pesticideName',
-          label: '农药名称',
-          editDisabled: true,
-          span: 24,
-        },
-        {
-          prop: 'manufacturer',
-          label: '生产商',
-          editDisabled: true,
-          span: 24,
-        },
-        {
-          prop: 'distributor',
-          label: '经销商',
-          editDisabled: true,
-          span: 24,
-        },
-        {
-          prop: 'photoUrl',
-          label: '农药图片',
-          editDisabled: true,
-          span: 24,
-        },
-      ],
-    },
-    {
-      label: '农药检测信息',
-      prop: 'check_info',
-      addDisplay: false,
-      viewDisplay: false,
-      column: [
-        {
-          prop: 'detectionTime',
-          label: '检测时间',
-          type: 'date',
-          valueFormat: 'YYYY-MM-DD',
-          rules: customRules({ msg: '请选择检测时间' }),
-        },
-        {
-          prop: 'detectionResult',
-          label: '检测结果',
-          type: 'select',
-          clearable: false,
-          rules: customRules({ msg: '请选择检测结果' }),
-          dicData: [
-            { value: '0', label: '合格' },
-            { value: '1', label: '不合格' },
-          ],
-          value: '0',
-        },
-        {
-          prop: 'detectionUnit',
-          label: '检测单位',
-          rules: customRules({ msg: '请输入检测单位' }),
-        },
-        {
-          prop: 'detectionConclusion',
-          label: '检测结论',
-          rules: customRules({ msg: '请输入检测结论' }),
-        },
-        {
-          prop: 'detectionReport',
-          label: '质检报告',
-          span: 24,
-          rules: [
-            {
-              required: true,
-              trigger: ['blur', 'change'],
-              validator: (rule, value, callback) => {
-                if (!reportAttrs.value.length) {
-                  callback(new Error('请上传检测报告'));
-                } else {
-                  callback();
-                }
-              },
-            },
-          ],
-        },
-        {
-          labelWidth: 0,
-          prop: 'checkBtn',
-          span: 24,
-          editDisplay: false,
-        },
-      ],
-    },
   ],
 });
-watch(
+const onSaveCategory = () => {
-  () => loadFinish.value,
+  dialogRef.value.validate(async (valid, fields) => {
-  () => {
+    if (valid) {
-    if (loadFinish.value) {
+      try {
-      for (let key in dicDatas.value) {
+        let param = { ...dialogForm };
-        option.value.column.forEach((item) => {
+        param.level = dialogForm.selectedNode.level ?? '';
-          if (item.prop === key) {
+        param.type = dialogForm.selectedNode.type ?? '';
-            let dic = materialTwoLevel?.[dicDatas.value[key].one]?.[dicDatas.value[key].two] ?? [];
+        let response;
-            dicDatas.value[key].dic = dic;
+        if (dialogTitle.value == '新增') {
-            item.dicData = dic;
+          response = await addPesticide(param);
+        } else {
+          response = await pesticideReportSave(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 attrs = ref([]);
-const reportAttrs = ref([]);
-const productSpecification = ref({
-  num: 1,
-  type: '1',
-});
-const useDosage = ref({
-  num: 1,
-  type: '1',
-});
-const actions = ref([
-  {
-    name: '上传报告',
-    icon: 'view',
-    event: ({ row }) => handleEdit(row),
-  },
-  {
-    name: '详情',
-    icon: 'view',
-    event: ({ row }) => handleInfo(row),
-  },
-  {
-    type: 'danger',
-    name: '删除',
-    icon: 'delete',
-    event: ({ row }) => deleteFn(row.id, delPesticide, getData),
-  },
-]);
-// #endregion
-
-/* --------------- methods --------------- */
-// #region
-
-defaultGet(getData);
-async function getData(reset) {
-  _loading.value = true;
-  reset == 1 && (pageData.value.currentPage = 1);
-  let params = {
-    current: pageData.value.currentPage,
-    size: pageData.value.size,
-    pesticideName: searchCondition.value.keywords,
-  };
-  _type.value != '0' && (params.classifyId = _type.value);
-  let res = await getPesticideList(params);
-  console.log('res --- ', res);
-  _loading.value = false;
-  if (res && res.code === 200) {
-    data.value = res.data.records;
-    data.value.forEach((v) => {
-      v.productSpecification = handleNumUnit({ num1: v.productSpecification, unit1: v.productUnit, type: 1 });
-      v.dosage = handleNumUnit({ unit1: v.productUnit, num2: v.suggestDosage, unit2: v.suggestUnit, type: -1 });
-      v.targetPests = handleShowName(v.targetPests);
-      v.mainComponent = handleShowName(v.mainComponent);
-      v.produceDosage = handleShowName(v.produceDosage);
-    });
-    pageData.value.total = res.data.total;
-  }
-}
-function handleCloseDialog(done) {
-  delete option.value.column[1].span;
-  resetOtherInfo();
-  handleCheckInfoChange();
-  done();
-}
-
-async function handleRowSave(form, done, loading) {
-  let data = {
-    pesticideName: form.pesticideName,
-    productStandCode: form.productStandCode,
-    pesticideRegistCode: form.pesticideRegistCode,
-    manufacturer: form.manufacturer,
-    distributor: form.distributor,
-    toxicityLevel: form.toxicityLevel,
-    usageMethod: form.usageMethod,
-    precautions: form.precautions,
-    expiryDate: form.expiryDate,
-    productSpecification: productSpecification.value.num,
-    productUnit: productSpecification.value.type,
-    suggestDosage: useDosage.value.num,
-    suggestUnit: useDosage.value.type,
-  };
-  if (attrs.value.length) {
-    data.photoUrl = attrs.value.map((v) => v.url).join();
-  }
-  if (form._targetPests.length) {
-    let names = [];
-    form._targetPests.forEach((item) => {
-      names.push(targetName(dicDatas.value._targetPests.dic, item, ''));
-    });
-    data.targetPests = JSON.stringify(form._targetPests) + '|' + JSON.stringify(names);
-  }
-  if (form._mainComponent.length) {
-    let names = [];
-    form._mainComponent.forEach((item) => {
-      names.push(targetName(dicDatas.value._mainComponent.dic, item, ''));
-    });
-    data.mainComponent = JSON.stringify(form._mainComponent) + '|' + JSON.stringify(names);
-  }
-  if (form._produceDosage.length) {
-    let names = [];
-    form._produceDosage.forEach((item) => {
-      names.push(targetName(dicDatas.value._produceDosage.dic, item, ''));
-    });
-    data.produceDosage = JSON.stringify(form._produceDosage) + '|' + JSON.stringify(names);
-  }
-  let res = await addPesticide(data);
-  loading();
-  if (res.code == 200) {
-    ElMessage.success('保存成功');
-    getData();
-    resetOtherInfo();
-    done();
-  }
-}
-function resetOtherInfo() {
-  let obj = { num: 1, type: '1' };
-  attrs.value = [];
-  reportAttrs.value = [];
-  productSpecification.value = obj;
-  useDosage.value = obj;
-}
-
-function handleEdit(row) {
-  handleAttrs(row);
-  option.value.group[1].column[0].value = row.detectionTime;
-  option.value.group[1].column[1].value = row.detectionResult;
-  option.value.group[1].column[2].value = row.detectionUnit;
-  option.value.group[1].column[3].value = row.detectionConclusion;
-  handleCheckInfoChange('open');
-  crud.value.rowEdit(row);
-}
-function handleInfo(row) {
-  handleAttrs(row);
-  option.value.column[1].span = 24;
-  crud.value.rowView(row);
-}
-/* 处理展示附件 */
-function handleAttrs(row = {}) {
-  if (!row) {
-    return;
-  }
-  if (row.photoUrl) {
-    attrs.value = row.photoUrl.split(',').map((v, i) => {
-      return {
-        url: v,
-        uid: `photo_${i}_${Date.now()}`,
-      };
-    });
-  }
-  if (row.detectionReport) {
-    reportAttrs.value = row.detectionReport.split(',').map((v, i) => {
-      return {
-        url: v,
-        uid: `report_${i}_${Date.now()}`,
-      };
-    });
-  }
-}
-function handleCheckInfo(type) {
-  handleCheckInfoChange(type == 'open');
-}
-/* bol && 查看检测报告关闭其他信息  !bol && 关闭检测报告打开其他信息 */
-function handleCheckInfoChange(bol = false) {
-  option.value.group.forEach((v) => {
-    v.viewDisplay = bol;
   });
-  if (bol) {
+};
-    option.value.column.forEach((v) => {
+const cancelDialog = () => {
-      v.viewDisplay = false;
+  Object.assign(dialogForm, {
-    });
+    // 保持响应性，手动清空字段
-  } else {
+    id: '',
-    option.value.column.forEach((v) => {
+    name: '',
-      if (!v.hide || v.prop == 'photoUrl') {
+  });
-        v.viewDisplay = true;
+  dialogFormVisible.value = false;
-      }
+};
-    });
+onMounted(() => {
-  }
+  onSubmit();
-}
+});
-async function handleRowUpdate(form, index, done, loading) {
-  console.log('update from -- ', form);
-  let data = {
-    id: form.id,
-    detectionTime: form.detectionTime,
-    detectionResult: form.detectionResult,
-    detectionUnit: form.detectionUnit,
-    detectionConclusion: form.detectionConclusion,
-    detectionReport: reportAttrs.value.map((v) => v.url).join(),
-  };
-  let res = await pesticideReportSave(data);
-  loading();
-  if (res.code == 200) {
-    ElMessage.success('检测报告保存成功');
-    getData();
-    done();
-  }
-}
-// #endregion
 </script>
-
+<style lang="scss" scoped></style>
-<style lang="scss" scoped>
-h2 {
-  font-size: 24px;
-  font-weight: bold;
-  font-family: '黑体';
-}
-</style>

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

@@ -0,0 +1,624 @@
+<template>
+  <section class="custom-page">
+    <h2>农药使用监管</h2>
+    <!-- <TypeMenu v-if="materialTypes[1].length > 1" v-model:type="_type" :types="materialTypes['1']" /> -->
+    <br />
+    <avue-crud
+      ref="crud"
+      v-model:page="pageData"
+      v-model:search="searchCondition"
+      :table-loading="_loading"
+      :data="data"
+      :option="option"
+      :before-close="handleCloseDialog"
+      @search-change="
+        (form, done) => {
+          getData(1);
+          done();
+        }
+      "
+      @search-reset="getData(1)"
+      @refresh-change="getData"
+      @current-change="getData"
+      @size-change="getData(1)"
+      @row-save="handleRowSave"
+      @row-update="handleRowUpdate"
+    >
+      <template #menu="scope">
+        <custom-table-operate :actions="actions" :data="scope" />
+      </template>
+      <template #photoUrl-form="{ type }">
+        <Attrs v-model:attrs="attrs" :type="type == 'add' ? 'add' : 'view'" :limit="2" />
+      </template>
+      <template #checkInfo-form="{ row }">
+        <section style="text-align: center; line-height: 58px">
+          <el-button @click="handleCheckInfo('open')">查看报告</el-button>
+        </section>
+      </template>
+      <template #detectionReport-form="{ type }">
+        <Attrs v-model:attrs="reportAttrs" :type="type" :up-btn="reportAttrs.length < 1" :file-num="reportAttrs.length > 0 ? 1 : 3" :limit="2" />
+      </template>
+      <template #productSpecification-form="{ value, type }">
+        <NumberSelect v-if="type == 'add'" v-model:value="productSpecification" :options="goodsUnitOptions" />
+        <span v-if="type == 'view'">{{ value }}</span>
+      </template>
+      <template #dosage-form="{ value, type }">
+        <NumberSelect v-if="type == 'add'" v-model:value="useDosage" :options="useDosageUnit" />
+        <span v-if="type == 'view'">{{ value }}</span>
+      </template>
+      <template #checkBtn-form>
+        <section style="text-align: center; line-height: 58px">
+          <el-button @click="handleCheckInfo('close')">关闭</el-button>
+        </section>
+      </template>
+    </avue-crud>
+  </section>
+</template>
+
+<script setup>
+import { ref, watch } from 'vue';
+import TypeMenu from '../../common/TypeMenu.vue';
+import { CRUD_OPTIONS, customRules } from '@/config';
+import { useBasicInfo } from '@/views/inputSuppliesManage/hooks/useBasicInfo';
+import Attrs from '@/views/inputSuppliesManage/common/Attrs.vue';
+import NumberSelect from '@/views/inputSuppliesManage/common/NumberSelect.vue';
+import inputSuppliesApi from '@/apis/inputSuppliesApi';
+import { ElMessage, ElMessageBox } from 'element-plus';
+import assistFn from '@/views/inputSuppliesManage/hooks/useAssistFn';
+const { deleteFn } = new assistFn();
+
+const { defaultGet, loadFinish, materialTypes, materialTwoLevel, goodsUnitOptions, useDosageUnit, handleNumUnit, handleShowName, targetName } =
+  useBasicInfo({
+    moduleType: '1',
+  });
+const { getPesticideList, addPesticide, pesticideReportSave, delPesticide } = inputSuppliesApi;
+
+/* --------------- data --------------- */
+// #region
+const _type = ref('0');
+watch(
+  () => _type.value,
+  () => getData(1),
+  {
+    deep: true,
+  }
+);
+const searchCondition = ref({
+  name: '',
+  phone: '',
+});
+const crud = ref();
+const _loading = ref(true);
+const data = ref([]);
+const pageData = ref({
+  total: 0,
+  currentPage: 1,
+  size: 10,
+});
+
+const dicDatas = ref({
+  _targetPests: {
+    one: '1',
+    two: '1',
+    dic: [],
+  },
+  _mainComponent: {
+    one: '1',
+    two: '2',
+    dic: [],
+  },
+  _produceDosage: {
+    one: '1',
+    two: '3',
+    dic: [],
+  },
+});
+const option = ref({
+  ...CRUD_OPTIONS,
+  selection: false,
+  labelWidth: 124,
+  editBtn: false,
+  delBtn: false,
+  dialogWidth: '60%',
+  updateBtnText: '上传报告',
+  column: [
+    // 查询条件
+    {
+      hide: true,
+      label: '姓名',
+      prop: 'name',
+      search: true,
+      addDisplay: false,
+      editDisplay: false,
+      searchPlaceholder: '请输入姓名',
+      viewDisplay: false,
+    },
+    {
+      hide: true,
+      label: '手机号',
+      prop: 'phone',
+      search: true,
+      addDisplay: false,
+      editDisplay: false,
+      searchPlaceholder: '请输入手机号',
+      viewDisplay: false,
+    },
+    // 弹窗字段
+    {
+      prop: 'name',
+      label: '姓名',
+      width: '120',
+      editDisplay: false,
+      rules: customRules({ msg: '请输入姓名' }),
+    },
+    {
+      prop: 'phone',
+      label: '联系方式',
+      width: '220',
+      editDisplay: false,
+      rules: customRules({ msg: '请输入联系方式' }),
+    },
+    {
+      prop: 'landName',
+      width: '200',
+      label: '用药地块',
+      addDisplay: false,
+      editDisplay: false,
+    },
+    {
+      hide: true,
+      prop: 'photoUrl',
+      label: '检测报告',
+      span: 24,
+      editDisplay: false,
+    },
+    {
+      hide: true,
+      prop: 'pesticideRegistCode',
+      label: '农药登记证号',
+      width: '120',
+      viewDisplay: false,
+      editDisplay: false,
+      rules: customRules({ msg: '请输登记证号' }),
+    },
+    {
+      prop: 'manufacturer',
+      label: '生产厂家',
+      width: '220',
+      editDisplay: false,
+      rules: customRules({ msg: '请输入生产厂家' }),
+    },
+    {
+      prop: 'productSpecification',
+      width: '100',
+      label: '产品规格',
+      editDisplay: false,
+    },
+    {
+      prop: 'toxicityLevel',
+      width: '140',
+      label: '毒性',
+      editDisplay: false,
+      value: '无毒',
+    },
+    {
+      prop: 'dosage',
+      width: '140',
+      label: '建议用量',
+      editDisplay: false,
+    },
+    {
+      prop: 'expiryDate',
+      label: '保质期',
+      addDisplay: false,
+      editDisplay: false,
+    },
+    {
+      prop: 'targetPests',
+      width: '200',
+      label: '防治对象',
+      addDisplay: false,
+      editDisplay: false,
+    },
+    {
+      prop: 'mainComponent',
+      width: '200',
+      label: '化学成分',
+      addDisplay: false,
+      editDisplay: false,
+    },
+    {
+      prop: 'produceDosage',
+      width: '200',
+      label: '加工剂型',
+      addDisplay: false,
+      editDisplay: false,
+    },
+    {
+      hide: true,
+      prop: '_targetPests',
+      label: '防治对象',
+      type: 'cascader',
+      multiple: true,
+      dicData: [],
+      value: [],
+      span: 24,
+      viewDisplay: false,
+      editDisplay: false,
+      rules: customRules({ msg: '请选择防治对象' }),
+      expandTrigger: 'click',
+    },
+    {
+      hide: true,
+      prop: '_mainComponent',
+      label: '化学成分',
+      type: 'cascader',
+      multiple: true,
+      dicData: [],
+      value: [],
+      span: 24,
+      viewDisplay: false,
+      editDisplay: false,
+      rules: customRules({ msg: '请选择主要成分' }),
+      expandTrigger: 'click',
+    },
+    {
+      hide: true,
+      prop: '_produceDosage',
+      label: '加工剂型',
+      type: 'cascader',
+      multiple: true,
+      dicData: [],
+      value: [],
+      span: 24,
+      viewDisplay: false,
+      editDisplay: false,
+      rules: customRules({ msg: '加工剂型' }),
+      expandTrigger: 'click',
+    },
+    {
+      hide: true,
+      prop: 'usageMethod',
+      label: '使用方法',
+      type: 'textarea',
+      span: 24,
+      viewDisplay: false,
+      editDisplay: false,
+    },
+    {
+      hide: true,
+      prop: 'precautions',
+      label: '注意事项',
+      type: 'textarea',
+      span: 24,
+      viewDisplay: false,
+      editDisplay: false,
+    },
+    {
+      labelWidth: 0,
+      border: false,
+      prop: 'checkInfo',
+      span: 24,
+      addDisplay: false,
+      editDisplay: false,
+    },
+  ],
+  group: [
+    {
+      label: '农药基本信息',
+      prop: 'basic_info',
+      addDisplay: false,
+      viewDisplay: false,
+      column: [
+        {
+          prop: 'pesticideName',
+          label: '农药名称',
+          editDisabled: true,
+          span: 24,
+        },
+        {
+          prop: 'manufacturer',
+          label: '生产商',
+          editDisabled: true,
+          span: 24,
+        },
+        {
+          prop: 'distributor',
+          label: '经销商',
+          editDisabled: true,
+          span: 24,
+        },
+        {
+          prop: 'photoUrl',
+          label: '农药图片',
+          editDisabled: true,
+          span: 24,
+        },
+      ],
+    },
+    {
+      label: '农药检测信息',
+      prop: 'check_info',
+      addDisplay: false,
+      viewDisplay: false,
+      column: [
+        {
+          prop: 'detectionTime',
+          label: '检测时间',
+          type: 'date',
+          valueFormat: 'YYYY-MM-DD',
+          rules: customRules({ msg: '请选择检测时间' }),
+        },
+        {
+          prop: 'detectionResult',
+          label: '检测结果',
+          type: 'select',
+          clearable: false,
+          rules: customRules({ msg: '请选择检测结果' }),
+          dicData: [
+            { value: '0', label: '合格' },
+            { value: '1', label: '不合格' },
+          ],
+          value: '0',
+        },
+        {
+          prop: 'detectionUnit',
+          label: '检测单位',
+          rules: customRules({ msg: '请输入检测单位' }),
+        },
+        {
+          prop: 'detectionConclusion',
+          label: '检测结论',
+          rules: customRules({ msg: '请输入检测结论' }),
+        },
+        {
+          prop: 'detectionReport',
+          label: '质检报告',
+          span: 24,
+          rules: [
+            {
+              required: true,
+              trigger: ['blur', 'change'],
+              validator: (rule, value, callback) => {
+                if (!reportAttrs.value.length) {
+                  callback(new Error('请上传检测报告'));
+                } else {
+                  callback();
+                }
+              },
+            },
+          ],
+        },
+        {
+          labelWidth: 0,
+          prop: 'checkBtn',
+          span: 24,
+          editDisplay: false,
+        },
+      ],
+    },
+  ],
+});
+watch(
+  () => loadFinish.value,
+  () => {
+    if (loadFinish.value) {
+      for (let key in dicDatas.value) {
+        option.value.column.forEach((item) => {
+          if (item.prop === key) {
+            let dic = materialTwoLevel?.[dicDatas.value[key].one]?.[dicDatas.value[key].two] ?? [];
+            dicDatas.value[key].dic = dic;
+            item.dicData = dic;
+          }
+        });
+      }
+    }
+  }
+);
+const attrs = ref([]);
+const reportAttrs = ref([]);
+const productSpecification = ref({
+  num: 1,
+  type: '1',
+});
+const useDosage = ref({
+  num: 1,
+  type: '1',
+});
+const actions = ref([
+  {
+    name: '编辑',
+    icon: 'view',
+    event: ({ row }) => handleEdit(row),
+  },
+  {
+    name: '详情',
+    icon: 'view',
+    event: ({ row }) => handleInfo(row),
+  },
+  {
+    type: 'danger',
+    name: '删除',
+    icon: 'delete',
+    event: ({ row }) => deleteFn(row.id, delPesticide, getData),
+  },
+]);
+// #endregion
+
+/* --------------- methods --------------- */
+// #region
+
+defaultGet(getData);
+async function getData(reset) {
+  _loading.value = true;
+  reset == 1 && (pageData.value.currentPage = 1);
+  let params = {
+    current: pageData.value.currentPage,
+    size: pageData.value.size,
+    name: searchCondition.value.name,
+    phone: searchCondition.value.phone,
+  };
+  _type.value != '0' && (params.classifyId = _type.value);
+  let res = await getPesticideList(params);
+  console.log('res --- ', res);
+  _loading.value = false;
+  if (res && res.code === 200) {
+    data.value = res.data.records;
+    // data.value.forEach((v) => {
+    //   v.productSpecification = handleNumUnit({ num1: v.productSpecification, unit1: v.productUnit, type: 1 });
+    //   v.dosage = handleNumUnit({ unit1: v.productUnit, num2: v.suggestDosage, unit2: v.suggestUnit, type: -1 });
+    //   v.targetPests = handleShowName(v.targetPests);
+    //   v.mainComponent = handleShowName(v.mainComponent);
+    //   v.produceDosage = handleShowName(v.produceDosage);
+    // });
+    pageData.value.total = res.data.total;
+  }
+}
+function handleCloseDialog(done) {
+  delete option.value.column[1].span;
+  resetOtherInfo();
+  handleCheckInfoChange();
+  done();
+}
+
+async function handleRowSave(form, done, loading) {
+  let data = {
+    pesticideName: form.pesticideName,
+    productStandCode: form.productStandCode,
+    pesticideRegistCode: form.pesticideRegistCode,
+    manufacturer: form.manufacturer,
+    distributor: form.distributor,
+    toxicityLevel: form.toxicityLevel,
+    usageMethod: form.usageMethod,
+    precautions: form.precautions,
+    expiryDate: form.expiryDate,
+    productSpecification: productSpecification.value.num,
+    productUnit: productSpecification.value.type,
+    suggestDosage: useDosage.value.num,
+    suggestUnit: useDosage.value.type,
+  };
+  if (attrs.value.length) {
+    data.photoUrl = attrs.value.map((v) => v.url).join();
+  }
+  if (form._targetPests.length) {
+    let names = [];
+    form._targetPests.forEach((item) => {
+      names.push(targetName(dicDatas.value._targetPests.dic, item, ''));
+    });
+    data.targetPests = JSON.stringify(form._targetPests) + '|' + JSON.stringify(names);
+  }
+  if (form._mainComponent.length) {
+    let names = [];
+    form._mainComponent.forEach((item) => {
+      names.push(targetName(dicDatas.value._mainComponent.dic, item, ''));
+    });
+    data.mainComponent = JSON.stringify(form._mainComponent) + '|' + JSON.stringify(names);
+  }
+  if (form._produceDosage.length) {
+    let names = [];
+    form._produceDosage.forEach((item) => {
+      names.push(targetName(dicDatas.value._produceDosage.dic, item, ''));
+    });
+    data.produceDosage = JSON.stringify(form._produceDosage) + '|' + JSON.stringify(names);
+  }
+  let res = await addPesticide(data);
+  loading();
+  if (res.code == 200) {
+    ElMessage.success('保存成功');
+    getData();
+    resetOtherInfo();
+    done();
+  }
+}
+function resetOtherInfo() {
+  let obj = { num: 1, type: '1' };
+  attrs.value = [];
+  reportAttrs.value = [];
+  productSpecification.value = obj;
+  useDosage.value = obj;
+}
+
+function handleEdit(row) {
+  handleAttrs(row);
+  option.value.group[1].column[0].value = row.detectionTime;
+  option.value.group[1].column[1].value = row.detectionResult;
+  option.value.group[1].column[2].value = row.detectionUnit;
+  option.value.group[1].column[3].value = row.detectionConclusion;
+  handleCheckInfoChange('open');
+  crud.value.rowEdit(row);
+}
+function handleInfo(row) {
+  handleAttrs(row);
+  option.value.column[1].span = 24;
+  crud.value.rowView(row);
+}
+/* 处理展示附件 */
+function handleAttrs(row = {}) {
+  if (!row) {
+    return;
+  }
+  if (row.photoUrl) {
+    attrs.value = row.photoUrl.split(',').map((v, i) => {
+      return {
+        url: v,
+        uid: `photo_${i}_${Date.now()}`,
+      };
+    });
+  }
+  if (row.detectionReport) {
+    reportAttrs.value = row.detectionReport.split(',').map((v, i) => {
+      return {
+        url: v,
+        uid: `report_${i}_${Date.now()}`,
+      };
+    });
+  }
+}
+function handleCheckInfo(type) {
+  handleCheckInfoChange(type == 'open');
+}
+/* bol && 查看检测报告关闭其他信息  !bol && 关闭检测报告打开其他信息 */
+function handleCheckInfoChange(bol = false) {
+  option.value.group.forEach((v) => {
+    v.viewDisplay = bol;
+  });
+  if (bol) {
+    option.value.column.forEach((v) => {
+      v.viewDisplay = false;
+    });
+  } else {
+    option.value.column.forEach((v) => {
+      if (!v.hide || v.prop == 'photoUrl') {
+        v.viewDisplay = true;
+      }
+    });
+  }
+}
+async function handleRowUpdate(form, index, done, loading) {
+  console.log('update from -- ', form);
+  let data = {
+    id: form.id,
+    detectionTime: form.detectionTime,
+    detectionResult: form.detectionResult,
+    detectionUnit: form.detectionUnit,
+    detectionConclusion: form.detectionConclusion,
+    detectionReport: reportAttrs.value.map((v) => v.url).join(),
+  };
+  let res = await pesticideReportSave(data);
+  loading();
+  if (res.code == 200) {
+    ElMessage.success('检测报告保存成功');
+    getData();
+    done();
+  }
+}
+// #endregion
+</script>
+
+<style lang="scss" scoped>
+h2 {
+  font-size: 24px;
+  font-weight: bold;
+  font-family: '黑体';
+}
+</style>