投入品管理 - 种子种苗管理页面展示列表开发

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

@@ -1,9 +1,9 @@
 <template>
   <div class="custom-table-container">
     <el-table
+      v-loading="loading"
       style="flex: 1; display: flex; flex-direction: column; text-align: center"
       :max-height="tableMaxHeight"
-      v-loading="loading"
       :data="tableData"
       :stripe="showStripe"
       :fit="true"
@@ -13,15 +13,15 @@
       @selection-change="handleSelectionChange"
     >
       <!-- 树形展开 -->
-      <el-table-column v-if="tree" type="expand">
+      <el-table-column v-if="tree" type="expand" :header-class-name="headerCellClassName">
-        <template #default="props">
+        <template #default="scope">
-          <slot name="tree" :row="props.row"></slot>
+          <slot name="tree" :row="scope.row"></slot>
         </template>
       </el-table-column>
 
       <!-- 首列多选框 -->
-      <el-table-column v-if="showSelection" type="selection" width="30" align="center" fixed />
+      <el-table-column v-if="showSelection" type="selection" width="30" align="center" fixed :header-class-name="headerCellClassName" />
-      <el-table-column label="序号" width="70" v-if="showSort" fixed align="center">
+      <el-table-column v-if="showSort" label="序号" width="70" fixed align="center" :header-class-name="headerCellClassName">
         <template #default="{ $index }">
           {{ (currentPage - 1) * pageSize + $index + 1 }}
         </template>
@@ -299,8 +299,9 @@ onBeforeUnmount(() => {
   /* 自定义表头样式 */
   :deep(.custom-header) {
     color: #333;
+    background-color: #fafafa !important;
   }
-  /* 自定义表头样式 */
+  /* 自定义单元格样式 */
   :deep(.custom-cell) {
     color: #606266;
   }

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

@@ -1,263 +1,413 @@
 <template>
-  <section class="custom-page">
+  <div class="app-container">
-    <h2>种子基本信息</h2>
+    <div class="container-custom">
-    <TypeMenu v-if="materialTypes['4'].length > 1" v-model:type="_type" :types="materialTypes['4']" />
+      <h2 class="custom-h2">种子种苗管理</h2>
-    <br />
+      <div ref="searchBarRef" class="search-box">
-    <avue-crud
+        <div class="search-bar">
-      ref="crudRef"
+          <div class="search-bar-left">
-      v-model:page="pageData"
+            <el-form ref="searchForm" :inline="true" :model="formInline" class="demo-form-inline" :label-width="'auto'">
-      v-model:search="searchCondition"
+              <el-form-item label="关键字" prop="seedName">
-      :table-loading="_loading"
+                <el-input v-model="formInline.seedName" placeholder="请输入姓名" clearable />
-      :before-close="handleCloseDialog"
+              </el-form-item>
-      :data="data"
+              <el-form-item label="分类" prop="seedTypeId">
-      :option="option"
+                <el-select v-model="formInline.seedTypeId" placeholder="请选择" clearable @change="seedTypeChange">
-      @search-change="
+                  <el-option v-for="item in seedTypeList" :key="item.id" :value="item.id" :label="item.dataName" />
-        (form, done) => {
+                </el-select>
-          getData(1);
+              </el-form-item>
-          done();
+              <el-form-item label="">
-        }
+                <el-button type="primary" icon="Search" @click="onSubmit">查询</el-button>
-      "
+                <el-button icon="Refresh" @click="resetForm">重置</el-button>
-      @search-reset="getData(1)"
+              </el-form-item>
-      @refresh-change="getData"
+            </el-form>
-      @current-change="getData"
+          </div>
-      @size-change="getData(1)"
+        </div>
-      @row-save="handleRowSave"
+      </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="true"
+          @page-change="handlePaginationChange"
         >
-      <template #menu="{ row }">
+          <!-- 自定义-操作 -->
-        <el-button type="primary" @click="handleInfo(row)">详情</el-button>
+          <template #action="slotProps">
-        <el-button @click="deleteFn(row.id, delSeed, getData)">删除</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>
-      <template #photoUrl-form="{ type }"> <Attrs v-model:attrs="attrs" :type="type == 'add' ? 'add' : 'view'" :limit="2" /> </template>
+        </tableComponent>
-    </avue-crud>
+      </div>
-  </section>
+    </div>
+    <el-dialog v-model="dialogFormVisible" :title="dialogTitle" width="800" :close-on-click-modal="false">
+      <el-form
+        ref="dialogRef"
+        :model="dialogForm"
+        :inline="true"
+        :label-width="'120'"
+        :rules="dialogFormRules"
+        :disabled="formDisabled"
+        class="dialog-form-container"
+      >
+        <el-form-item label="种子种苗名称" prop="seedName" class="dialog-form-item">
+          <el-input v-model="dialogForm.seedName" clearable placeholder="请输入种子种苗名称" />
+        </el-form-item>
+        <el-form-item label="品种名称" prop="varietyName" class="dialog-form-item">
+          <el-input v-model="dialogForm.varietyName" clearable placeholder="请输入品种名称" />
+        </el-form-item>
+        <el-form-item label="品牌" prop="brand" class="dialog-form-item">
+          <el-input v-model="dialogForm.brand" clearable placeholder="请输入品牌" />
+        </el-form-item>
+        <el-form-item label="生产厂家" prop="manufacturer" class="dialog-form-item">
+          <el-input v-model="dialogForm.manufacturer" clearable placeholder="请输入生产厂家" />
+        </el-form-item>
+        <el-form-item label="蔬菜种苗" prop="classifyId" class="dialog-form-item">
+          <el-cascader
+            v-model="dialogForm.classifyId"
+            :options="seedTypeDialogList"
+            :props="cascaderProps"
+            placeholder="请选择"
+            @change="handleCascaderChange"
+          />
+        </el-form-item>
+        <el-form-item label="产品规格" prop="productUnit" class="dialog-form-item">
+          <el-input v-model="dialogForm.productUnit" clearable placeholder="请输入产品规格" />
+        </el-form-item>
+
+        <div style="display: flex">
+          <div style="width: 50%; display: inline-block">
+            <el-form-item label="种子种苗主图" prop="photoUrl" class="dialog-form-item" style="width: 100%">
+              <FileUploader v-model="dialogForm.photoUrl" :limit="1" />
+            </el-form-item>
+          </div>
+          <div style="width: 50%; display: inline-block">
+            <el-form-item label="种子种苗详情图" prop="photoUrlDetail" class="dialog-form-item" style="width: 100%">
+              <FileUploader v-model="dialogForm.photoUrlDetail" :limit="1" />
+            </el-form-item>
+          </div>
+        </div>
+      </el-form>
+      <template #footer>
+        <div class="dialog-footer">
+          <el-button v-if="!formDisabled" type="primary" @click="onSaveCategory">保存</el-button>
+          <el-button v-if="!formDisabled" @click="cancelDialog">取消</el-button>
+          <el-button v-else @click="cancelDialog">关闭</el-button>
+        </div>
+      </template>
+    </el-dialog>
+  </div>
 </template>
 
 <script setup>
-import { ref, onMounted, watch, pushScopeId } from 'vue';
+import { ref, reactive, computed, onMounted, onBeforeUnmount, nextTick } from 'vue';
-import TypeMenu from '../../common/TypeMenu.vue';
+import tableComponent from '@/components/tableComponent.vue';
-import { CRUD_OPTIONS, pageData, customRules } from '@/config';
-import { useBasicInfo } from '@/views/inputSuppliesManage/hooks/useBasicInfo';
-import Attrs from '@/views/inputSuppliesManage/common/Attrs.vue';
-import inputSuppliesapi from '@/apis/inputSuppliesApi';
 import { ElMessage } from 'element-plus';
-import assistFn from '@/views/inputSuppliesManage/hooks/useAssistFn';
+import inputSuppliesApi from '@/apis/inputSuppliesApi';
-const { deleteFn } = new assistFn();
+const { getSeedList, seedSave, delSeed, getMaterailTypes } = inputSuppliesApi;
-const { getSeedList, seedSave, delSeed } = inputSuppliesapi;
+import { useApp } from '@/hooks';
-const { loadFinish, materialTypes, targetName } = useBasicInfo({
+const app = useApp();
-  moduleType: '4',
-});
-const _allTypes = ref([]);
-watch(
-  () => loadFinish.value,
-  (bol) => {
-    if (bol) {
-      option.value.column.forEach((v) => {
-        if (v.prop === '_classifyId') {
-          _allTypes.value = materialTypes['4'].filter((v, i) => i > 0) ?? [];
-          v.dicData = _allTypes.value;
-        }
-      });
-    }
-  }
-);
 
-onMounted(getData);
+// 查询条件
-/* --------------- data --------------- */
+const formInline = reactive({
-// #region
+  seedName: '',
-const _type = ref('0');
+  seedTypeId: '',
-const crudRef = ref();
+  current: 1,
-const _loading = ref(true);
+  size: 10,
-const searchCondition = ref({
-  keywords: '',
 });
-const data = ref([]);
+const searchForm = ref(null);
-const option = ref({
+const onSubmit = () => {
-  ...CRUD_OPTIONS,
+  formInline.current = 1;
-  selection: false,
+  loadData();
-  menuWidth: 160,
+};
-  column: [
+const resetForm = () => {
+  searchForm.value.resetFields();
+};
+
+// 表格数据
+const tableData = ref([]);
+const selectedIds = ref([]);
+const tableLoading = ref(false);
+const tableTotal = ref(0);
+const columns = ref([
+  { prop: 'seedName', label: '种子种苗名称' },
+  { prop: 'varietyName', label: '品种名称' },
+  { prop: 'brand', label: '品牌' },
+  { prop: 'manufacturer', label: '生产厂家' },
+  { prop: 'classifyName', label: '分类' },
+  { prop: 'productUnit', label: '产品规格' },
+  { prop: 'action', label: '操作', slotName: 'action', width: 230, fixed: 'right' },
+]);
+const handlePaginationChange = ({ page, pageSize }) => {
+  formInline.current = page;
+  formInline.size = pageSize;
+  loadData();
+};
+const loadData = async () => {
+  tableLoading.value = true;
+  try {
+    let response = await getSeedList(formInline);
+    tableLoading.value = false;
+    if (response.code == 200) {
+      tableData.value = response.data.records;
+      tableTotal.value = response.data.total;
+    }
+  } catch (error) {
+    tableLoading.value = false;
+    console.error(error);
+  }
+};
+
+const extractThirdLevelChildren = (dataArray) => {
+  let result = [];
+  // 遍历第一层数组
+  for (const level1 of dataArray) {
+    // 检查第一层是否有children且是数组
+    if (level1.children && Array.isArray(level1.children)) {
+      // 遍历第二层数组
+      for (const level2 of level1.children) {
+        // 检查第二层是否有children且是数组
+        if (level2.children && Array.isArray(level2.children)) {
+          // 将第三层的所有对象添加到结果数组中
+          result.push(...level2.children);
+        }
+      }
+    }
+  }
+  return result;
+};
+const seedTypeChange = () => {
+  console.log(formInline.seedTypeId);
+  // 重新获取表格数据，需添加参数
+};
+
+const dialogFormVisible = ref(false);
+const dialogRef = ref(null);
+const dialogTitle = ref('新增');
+const formDisabled = ref(false);
+const dialogForm = reactive({
+  id: '',
+  seedName: '', //种子种苗名称
+  varietyName: '', //品种名称
+  brand: '', //品牌
+  manufacturer: '', //生产厂家
+  classifyId: '', //蔬菜种苗id
+  classifyName: '', //蔬菜种苗名称
+  productSpecification: '', //产品规格（number）
+  productUnit: '', //产品规格单位
+  productAttributes: '', //自定义商品属性
+  photoUrl: '', //种子种苗主图
+  photoUrlDetail: '', //种子种苗详情图
+});
+const dialogFormRules = ref({
+  seedName: [{ required: true, message: '请输入种子种苗名称', trigger: 'blur' }],
+  varietyName: [{ required: true, message: '请输入品种名称', trigger: 'blur' }],
+  brand: [{ required: true, message: '请输入品牌', trigger: 'blur' }],
+  manufacturer: [{ required: true, message: '请输入品牌', trigger: 'blur' }],
+  classifyId: [
     {
-      label: '种子名称',
+      required: true,
-      prop: 'keywords',
+      message: '请选择蔬菜种苗',
-      hide: true,
+      trigger: ['change', 'blur'],
-      search: true,
-      addDisplay: false,
-      viewDisplay: false,
-      editDisplay: false,
-    },
-    {
-      label: '种子名称',
-      prop: 'seedName',
-      rules: customRules({ msg: '请输入种子名称' }),
-    },
-    {
-      prop: 'manufacturer',
-      label: '厂家',
-      rules: customRules({ msg: '请输入厂家名称' }),
-    },
-    {
-      label: '品牌名称',
-      prop: 'brand',
-      rules: customRules({ msg: '请输入品牌名称' }),
-    },
-    {
-      label: '品种名称',
-      prop: 'varietyName',
-      rules: customRules({ msg: '请输入品种名称' }),
-    },
-    {
-      hide: true,
-      label: '图片',
-      prop: 'photoUrl',
-    },
-    {
-      label: '分类',
-      prop: '_classifyId',
-      type: 'cascader',
-      expandTrigger: 'click',
-      dicData: [],
-      rules: customRules({ msg: '请选择分类' }),
-      render: ({ row }) => row.classifyName ?? '',
-    },
-    // {
-    //   prop: 'distributor',
-    //   label: '经销商',
-    // },
-    {
-      prop: 'productUnit',
-      width: '100',
-      label: '产品规格',
-      // editDisplay: false,
-    },
-    {
-      label: '种植时间',
-      prop: 'sowingTime',
-      span: 24,
-      type: 'textarea',
-    },
-    {
-      hide: true,
-      label: '种植密度',
-      prop: 'plantDensity',
-      span: 24,
-      type: 'textarea',
-    },
-    {
-      hide: true,
-      label: '施肥管理',
-      prop: 'fertilizeManage',
-      span: 24,
-      type: 'textarea',
-    },
-    {
-      hide: true,
-      label: '水分管理',
-      prop: 'waterManage',
-      span: 24,
-      type: 'textarea',
-    },
-    {
-      hide: true,
-      label: '病虫害防治',
-      prop: 'pestControl',
-      span: 24,
-      type: 'textarea',
-    },
-    {
-      hide: true,
-      label: '注意事项',
-      prop: 'precautions',
-      span: 24,
-      type: 'textarea',
     },
   ],
+  productUnit: [{ required: true, message: '请输入产品规格', trigger: 'blur' }],
 });
-const attrs = ref([]);
-// #endregion
 
-/* --------------- methods --------------- */
+// 新增操作
-// #region
+const addItem = async () => {
-
+  restDialogForm();
-async function getData(reset) {
+  dialogTitle.value = '新增';
-  _loading.value = true;
+  formDisabled.value = false;
-  reset == 1 && (pageData.value.currentPage = 1);
+  dialogFormVisible.value = true;
-  let params = {
+};
-    current: pageData.value.currentPage,
+// 查看详情
-    size: pageData.value.size,
+const seeDetails = async (row) => {
-    seedName: searchCondition.value.keywords,
+  dialogTitle.value = '详情';
-  };
+  setDialogForm(row);
-  if (_type.value != '0') params['classifyId'] = _type.value;
+  formDisabled.value = true;
-  let res = await getSeedList(params);
+  dialogFormVisible.value = true;
-  if (res.code == 200) {
+};
-    data.value = res.data.records ?? [];
+// 编辑操作
-    pageData.value.total = res.data.total;
+const handleEdit = (row) => {
+  console.log('要编辑的行: ', row);
+  dialogTitle.value = '编辑';
+  setDialogForm(row);
+  formDisabled.value = false;
+  dialogFormVisible.value = true;
+};
+const setDialogForm = (row) => {
+  dialogForm.id = row.id;
+  dialogForm.seedName = row.seedName;
+  dialogForm.varietyName = row.varietyName;
+  dialogForm.brand = row.brand;
+  dialogForm.manufacturer = row.manufacturer;
+  dialogForm.classifyId = row.classifyId;
+  dialogForm.classifyName = row.classifyName;
+  dialogForm.productSpecification = row.productSpecification;
+  dialogForm.productUnit = row.productUnit;
+  dialogForm.productAttributes = row.productAttributes;
+  dialogForm.photoUrl = row.photoUrl;
+  dialogForm.photoUrlDetail = row.photoUrlDetail;
+};
+// 删除操作
+const handleDelete = (row) => {
+  app
+    .$confirm(`删除后信息将不可查看，确认要删除吗？`, '确定删除', {
+      confirmButtonText: '确定',
+      cancelButtonText: '取消',
+      type: 'warning',
+    })
+    .then(() => {
+      deleteGoods(row.id)
+        .then((res) => {
+          if (res.code === 200) {
+            onSubmit();
+            app.$message.success('删除成功！');
           }
-  _loading.value = false;
+        })
-}
+        .catch((err) => {
-
+          app.$message.error(err.msg);
-function handleInfo(row) {
-  columnSpanChange(true);
-  handleAttrs(row);
-  crudRef.value.rowView(row);
-}
-async function handleRowSave(form, done, loading) {
-  const data = Object.assign({}, form);
-  delete data.keywords;
-  if (attrs.value.length) {
-    data.photoUrl = attrs.value.map((v) => v.url).join();
-  }
-  if (data._classifyId.length) {
-    data.photoUrl = attrs.value.map((v) => v.url).join();
-  }
-  data.classifyId = JSON.stringify(data._classifyId);
-  delete data._classifyId;
-  data.classifyName = targetName(_allTypes.value, form._classifyId, '');
-  let res = await seedSave(data);
-  if (res.code == 200) {
-    ElMessage.success('新增成功');
-    getData();
-    done();
-  }
-  loading();
-}
-/* 处理展示附件 */
-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()}`,
-      };
         });
+    })
+    .catch(() => {});
+};
+const deleteGoods = async (ids) => {
+  try {
+    let res = await delSeed(ids);
+    return res;
+  } catch (error) {
+    return false;
   }
-}
+};
-function handleCloseDialog(done) {
+const onSaveCategory = () => {
-  columnSpanChange();
+  console.log(dialogForm);
-  attrs.value = [];
+  dialogRef.value.validate(async (valid, fields) => {
-  done();
+    if (valid) {
-}
+      try {
-function columnSpanChange(row = false) {
+        let param = { ...dialogForm };
-  let arr = ['photoUrl'];
+        param.classifyId = dialogForm.classifyId.join(',');
-  option.value.column.forEach((v) => {
+        param.classifyName = dialogForm.classifyName.join(',');
-    if (arr.includes(v.prop)) {
+        console.log(param);
-      if (row) {
+        let response;
-        v.span = 24;
+        if (dialogTitle.value == '新增') {
+          response = await seedSave(param);
         } else {
-        delete v.span;
+          response = await seedSave(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);
       }
     }
   });
-}
+};
-// #endregion
+const cancelDialog = async () => {
-</script>
+  restDialogForm();
+  dialogFormVisible.value = false;
+};
+const restDialogForm = () => {
+  Object.assign(dialogForm, {
+    id: '',
+    seedName: '', //种子种苗名称
+    varietyName: '', //品种名称
+    brand: '', //品牌
+    manufacturer: '', //生产厂家
+    classifyId: '', //蔬菜种苗id
+    classifyName: '', //蔬菜种苗名称
+    productSpecification: '', //产品规格（number）
+    productUnit: '', //产品规格单位
+    productAttributes: '', //自定义商品属性
+    photoUrl: '', //种子种苗主图
+    photoUrlDetail: '', //种子种苗详情图
+  });
+};
 
+const seedTypeList = ref([]);
+const seedTypeDialogList = ref([]);
+const getSeedTypeList = async () => {
+  try {
+    let response = await getMaterailTypes({ moduleType: '4' });
+    console.log(response);
+    if (response.code == 200) {
+      if (response.data?.length > 0) {
+        seedTypeDialogList.value = response.data[0].children;
+        let result = extractThirdLevelChildren(response.data);
+        seedTypeList.value = result;
+        console.log(seedTypeDialogList.value);
+      }
+    }
+  } catch (error) {
+    console.error(error);
+  }
+};
+// 级联选择器配置
+const cascaderProps = ref({
+  label: 'dataName', // 选项标签字段名
+  value: 'id', // 选项值字段名
+  children: 'children', // 子选项字段名
+  emitPath: true,
+  expandTrigger: 'hover',
+});
+const handleCascaderChange = () => {
+  const selectedNames = getSelectedNames(dialogForm.classifyId);
+  console.log('对应的名称:', selectedNames); // 例如: ['花草类种子', '具体种子名称']
+  // 如果需要，可以将名称也保存到表单数据中
+  dialogForm.classifyName = selectedNames;
+};
+const getSelectedNames = (ids) => {
+  if (!ids || !ids.length) return [];
+
+  let names = [];
+  let currentLevel = seedTypeDialogList.value;
+
+  for (const id of ids) {
+    const foundItem = currentLevel.find((item) => item.id === id);
+    if (!foundItem) break;
+
+    names.push(foundItem.dataName);
+    currentLevel = foundItem.children || [];
+  }
+
+  return names;
+};
+
+onMounted(() => {
+  onSubmit();
+  getSeedTypeList();
+});
+</script>
 <style lang="scss" scoped>
-h2 {
+.dialog-form-item {
-  font-size: 24px;
+  :deep(.el-upload--picture-card) {
-  font-weight: bold;
+    width: 100px;
-  font-family: '黑体';
+    height: 100px;
+  }
+
+  :deep(.file-uploader__upload) {
+    width: 100px;
+    height: 100px;
+  }
+
+  :deep(.el-upload-list__item) {
+    width: 100px;
+    height: 100px;
+  }
 }
 </style>

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

@@ -0,0 +1,263 @@
+<template>
+  <section class="custom-page">
+    <h2>种子基本信息</h2>
+    <TypeMenu v-if="materialTypes['4'].length > 1" v-model:type="_type" :types="materialTypes['4']" />
+    <br />
+    <avue-crud
+      ref="crudRef"
+      v-model:page="pageData"
+      v-model:search="searchCondition"
+      :table-loading="_loading"
+      :before-close="handleCloseDialog"
+      :data="data"
+      :option="option"
+      @search-change="
+        (form, done) => {
+          getData(1);
+          done();
+        }
+      "
+      @search-reset="getData(1)"
+      @refresh-change="getData"
+      @current-change="getData"
+      @size-change="getData(1)"
+      @row-save="handleRowSave"
+    >
+      <template #menu="{ row }">
+        <el-button type="primary" @click="handleInfo(row)">详情</el-button>
+        <el-button @click="deleteFn(row.id, delSeed, getData)">删除</el-button>
+      </template>
+      <template #photoUrl-form="{ type }"> <Attrs v-model:attrs="attrs" :type="type == 'add' ? 'add' : 'view'" :limit="2" /> </template>
+    </avue-crud>
+  </section>
+</template>
+
+<script setup>
+import { ref, onMounted, watch, pushScopeId } from 'vue';
+import TypeMenu from '../../common/TypeMenu.vue';
+import { CRUD_OPTIONS, pageData, customRules } from '@/config';
+import { useBasicInfo } from '@/views/inputSuppliesManage/hooks/useBasicInfo';
+import Attrs from '@/views/inputSuppliesManage/common/Attrs.vue';
+import inputSuppliesapi from '@/apis/inputSuppliesApi';
+import { ElMessage } from 'element-plus';
+import assistFn from '@/views/inputSuppliesManage/hooks/useAssistFn';
+const { deleteFn } = new assistFn();
+const { getSeedList, seedSave, delSeed } = inputSuppliesapi;
+const { loadFinish, materialTypes, targetName } = useBasicInfo({
+  moduleType: '4',
+});
+const _allTypes = ref([]);
+watch(
+  () => loadFinish.value,
+  (bol) => {
+    if (bol) {
+      option.value.column.forEach((v) => {
+        if (v.prop === '_classifyId') {
+          _allTypes.value = materialTypes['4'].filter((v, i) => i > 0) ?? [];
+          v.dicData = _allTypes.value;
+        }
+      });
+    }
+  }
+);
+
+onMounted(getData);
+/* --------------- data --------------- */
+// #region
+const _type = ref('0');
+const crudRef = ref();
+const _loading = ref(true);
+const searchCondition = ref({
+  keywords: '',
+});
+const data = ref([]);
+const option = ref({
+  ...CRUD_OPTIONS,
+  selection: false,
+  menuWidth: 160,
+  column: [
+    {
+      label: '种子名称',
+      prop: 'keywords',
+      hide: true,
+      search: true,
+      addDisplay: false,
+      viewDisplay: false,
+      editDisplay: false,
+    },
+    {
+      label: '种子名称',
+      prop: 'seedName',
+      rules: customRules({ msg: '请输入种子名称' }),
+    },
+    {
+      prop: 'manufacturer',
+      label: '厂家',
+      rules: customRules({ msg: '请输入厂家名称' }),
+    },
+    {
+      label: '品牌名称',
+      prop: 'brand',
+      rules: customRules({ msg: '请输入品牌名称' }),
+    },
+    {
+      label: '品种名称',
+      prop: 'varietyName',
+      rules: customRules({ msg: '请输入品种名称' }),
+    },
+    {
+      hide: true,
+      label: '图片',
+      prop: 'photoUrl',
+    },
+    {
+      label: '分类',
+      prop: '_classifyId',
+      type: 'cascader',
+      expandTrigger: 'click',
+      dicData: [],
+      rules: customRules({ msg: '请选择分类' }),
+      render: ({ row }) => row.classifyName ?? '',
+    },
+    // {
+    //   prop: 'distributor',
+    //   label: '经销商',
+    // },
+    {
+      prop: 'productUnit',
+      width: '100',
+      label: '产品规格',
+      // editDisplay: false,
+    },
+    {
+      label: '种植时间',
+      prop: 'sowingTime',
+      span: 24,
+      type: 'textarea',
+    },
+    {
+      hide: true,
+      label: '种植密度',
+      prop: 'plantDensity',
+      span: 24,
+      type: 'textarea',
+    },
+    {
+      hide: true,
+      label: '施肥管理',
+      prop: 'fertilizeManage',
+      span: 24,
+      type: 'textarea',
+    },
+    {
+      hide: true,
+      label: '水分管理',
+      prop: 'waterManage',
+      span: 24,
+      type: 'textarea',
+    },
+    {
+      hide: true,
+      label: '病虫害防治',
+      prop: 'pestControl',
+      span: 24,
+      type: 'textarea',
+    },
+    {
+      hide: true,
+      label: '注意事项',
+      prop: 'precautions',
+      span: 24,
+      type: 'textarea',
+    },
+  ],
+});
+const attrs = ref([]);
+// #endregion
+
+/* --------------- methods --------------- */
+// #region
+
+async function getData(reset) {
+  _loading.value = true;
+  reset == 1 && (pageData.value.currentPage = 1);
+  let params = {
+    current: pageData.value.currentPage,
+    size: pageData.value.size,
+    seedName: searchCondition.value.keywords,
+  };
+  if (_type.value != '0') params['classifyId'] = _type.value;
+  let res = await getSeedList(params);
+  if (res.code == 200) {
+    data.value = res.data.records ?? [];
+    pageData.value.total = res.data.total;
+  }
+  _loading.value = false;
+}
+
+function handleInfo(row) {
+  columnSpanChange(true);
+  handleAttrs(row);
+  crudRef.value.rowView(row);
+}
+async function handleRowSave(form, done, loading) {
+  const data = Object.assign({}, form);
+  delete data.keywords;
+  if (attrs.value.length) {
+    data.photoUrl = attrs.value.map((v) => v.url).join();
+  }
+  if (data._classifyId.length) {
+    data.photoUrl = attrs.value.map((v) => v.url).join();
+  }
+  data.classifyId = JSON.stringify(data._classifyId);
+  delete data._classifyId;
+  data.classifyName = targetName(_allTypes.value, form._classifyId, '');
+  let res = await seedSave(data);
+  if (res.code == 200) {
+    ElMessage.success('新增成功');
+    getData();
+    done();
+  }
+  loading();
+}
+/* 处理展示附件 */
+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()}`,
+      };
+    });
+  }
+}
+function handleCloseDialog(done) {
+  columnSpanChange();
+  attrs.value = [];
+  done();
+}
+function columnSpanChange(row = false) {
+  let arr = ['photoUrl'];
+  option.value.column.forEach((v) => {
+    if (arr.includes(v.prop)) {
+      if (row) {
+        v.span = 24;
+      } else {
+        delete v.span;
+      }
+    }
+  });
+}
+// #endregion
+</script>
+
+<style lang="scss" scoped>
+h2 {
+  font-size: 24px;
+  font-weight: bold;
+  font-family: '黑体';
+}
+</style>