feat:农药管理页面搭建完成

sub-government-affairs-service/src/views/inputSuppliesManage/common/Attrs.vue

@@ -0,0 +1,134 @@
+<template>
+  <section class="custom_attrs_upload_content_lx" :style="{ '--columns': props.fileNum }">
+    <el-upload
+      v-if="props.type != 'view' && props.upBtn"
+      class="custom-form__uploader"
+      action=""
+      :show-file-list="false"
+      :accept="props.accept"
+      :limit="props.limit"
+      :http-request="rowUploadPicture"
+      :disabled="attrs_.length >= props.limit"
+    >
+      <el-icon class="custom-form__uploader__icon"><Plus /></el-icon>
+    </el-upload>
+    <div v-for="(item, i) in attrs_" :key="`attr_${item.uid}`" class="attrs_content__item">
+      <img :src="item.url" :alt="item.name" @click="handlePreview(i)" />
+      <el-icon v-if="props.type != 'view'" class="clear_btn" @click.stop="handleClearAttr(item.uid)"><CircleCloseFilled /></el-icon>
+    </div>
+    <el-image-viewer v-if="previewShow" :url-list="srcList" :initial-index="index" @close="previewShow = false" />
+  </section>
+</template>
+<script setup>
+import { nextTick, ref, watch } from 'vue';
+import { CommonUpload } from '@/apis';
+
+const emit = defineEmits(['update:attrs']);
+const props = defineProps({
+  accept: {
+    type: String,
+    default: 'image/*',
+  },
+  type: {
+    type: String,
+    default: 'view',
+  },
+  attrs: {
+    type: Array,
+    default: () => [],
+  },
+  limit: {
+    type: Number,
+    default: 1,
+  },
+  fileNum: {
+    type: Number,
+    default: 4,
+  },
+  upBtn: {
+    type: Boolean,
+    default: true,
+  },
+});
+const attrs_ = ref([]);
+const srcList = ref([]);
+watch(
+  () => props.attrs,
+  (val) => {
+    attrs_.value = val;
+    srcList.value = attrs_.value.map((item) => item.url);
+  },
+  { deep: true, immediate: true }
+);
+const index = ref(0);
+const previewShow = ref(false);
+function handleClearAttr(uid) {
+  attrs_.value = attrs_.value.filter((item) => item.uid !== uid);
+  emit('update:attrs', attrs_.value);
+}
+async function rowUploadPicture({ file }) {
+  const formData = new FormData();
+  formData.append('file', file);
+  const res = await CommonUpload(formData);
+  if (res.code === 200) {
+    attrs_.value.push({
+      ...res.data,
+      uid: 'id_' + Date.now(),
+    });
+    emit('update:attrs', attrs_.value);
+  }
+}
+function handlePreview(i) {
+  previewShow.value = false;
+  nextTick(() => {
+    index.value = i;
+    previewShow.value = true;
+  });
+}
+</script>
+<style lang="scss">
+.custom_attrs_upload_content_lx {
+  display: grid;
+  flex-wrap: wrap;
+  grid-template-columns: repeat(var(--columns), 1fr);
+  box-sizing: border-box;
+  gap: 20px;
+  > div {
+    width: 100%;
+    height: 100%;
+    aspect-ratio: 1 / 1;
+    box-sizing: border-box;
+  }
+  .attrs_content__item {
+    aspect-ratio: 1 / 1;
+    box-sizing: border-box;
+    position: relative;
+    padding: 6px;
+    border: 1px solid #ccc;
+    border-radius: 4px;
+    img,
+    video {
+      vertical-align: middle;
+      width: 100%;
+      height: 100%;
+      border-radius: 2px;
+    }
+    .clear_btn {
+      position: absolute;
+      right: 0px;
+      top: 0px;
+      font-size: 18px;
+      color: #f15c5c;
+      opacity: 0;
+      cursor: pointer;
+      background-color: #fff;
+      border-radius: 50%;
+    }
+    &:hover {
+      .clear_btn {
+        opacity: 1;
+      }
+    }
+  }
+}
+</style>

sub-government-affairs-service/src/views/inputSuppliesManage/hooks/useBasicInfo.js

@@ -0,0 +1,50 @@
+import { ref } from 'vue';
+
+export function useBasicInfo() {
+  const pesticideData = ref([
+    { label: '全部', value: '0' },
+    {
+      label: '防治对象',
+      value: '1',
+      children: [
+        { label: '杀虫剂', value: '1-1' },
+        { label: '除草剂', value: '1-2' },
+        { label: '杀菌剂', value: '1-3' },
+        { label: '杀螨剂', value: '1-4' },
+        { label: '生物农药', value: '1-5' },
+        { label: '植物生长调节剂', value: '1-6' },
+      ],
+    },
+    {
+      label: '化学成分',
+      value: '2',
+      children: [
+        { label: '无机农药', value: '2-1' },
+        { label: '生物农药', value: '2-2' },
+        {
+          label: '有机农药',
+          value: '2-3',
+          children: [
+            { label: '天然有机农药', value: '2-3-1' },
+            { label: '人工合成农药', value: '2-3-2' },
+          ],
+        },
+      ],
+    },
+    {
+      label: '加工剂型',
+      value: '3',
+      children: [
+        { label: '可湿性粉剂', value: '3-1' },
+        { label: '可溶性粉剂', value: '3-2' },
+        { label: '乳剂', value: '3-3' },
+        { label: '颗粒剂', value: '4-4' },
+        { label: '缓释剂', value: '5-5' },
+        { label: '烟剂', value: '6-6' },
+      ],
+    },
+  ]);
+  return {
+    pesticideData,
+  };
+}

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

@@ -1,25 +1,60 @@
 <template>
   <CustomCard>
     <h2>农药基本信息</h2>
-    <TypeMenu v-model:type="type" />
+    <TypeMenu v-model:type="_type" :types="pesticideData" />
     <br />
-    <avue-crud ref="crud" v-model:page="pageData" :data="data" :option="option"></avue-crud>
+    <avue-crud
+      ref="crud"
+      v-model:page="pageData"
+      :table-loading="_loading"
+      :data="data"
+      :option="option"
+      :before-close="handleCloseDialog"
+      @row-save="handleRowSave"
+      @row-update="handleRowUpdate"
+    >
+      <template #menu="{ row }">
+        <el-button type="primary" @click="handleEdit(row)">上传报告</el-button>
+        <el-button @click="handleInfo(row)">详情</el-button>
+      </template>
+      <template #img-form="{ type }">
+        <Attrs v-model:attrs="img" :type="type == 'add' ? 'add' : 'view'" />
+      </template>
+      <template #checkInfo-form="{ row }">
+        <section style="text-align: center; line-height: 58px">
+          {{ row }}
+          <el-button @click="handleCheckInfo('open')">查看报告</el-button>
+        </section>
+      </template>
+      <template #checkReport-form="{ type }">
+        <Attrs v-model:attrs="reportAttrs" :type="type" :up-btn="reportAttrs.length < 1" :file-num="reportAttrs.length > 0 ? 1 : 3" />
+      </template>
+      <template #checkBtn-form>
+        <section style="text-align: center; line-height: 58px">
+          <el-button @click="handleCheckInfo('close')">关闭</el-button>
+        </section>
+      </template>
+    </avue-crud>
   </CustomCard>
 </template>
 
 <script setup>
-import { ref, watch } from 'vue';
+import { reactive, ref, watch, h } from 'vue';
 import CustomCard from '@/components/CustomCard.vue';
 import TypeMenu from '../../common/TypeMenu.vue';
 import { CRUD_OPTIONS } from '@/config';
+import { useBasicInfo } from '@/views/inputSuppliesManage/hooks/useBasicInfo';
+import Attrs from '@/views/inputSuppliesManage/common/Attrs.vue';
+
+const { pesticideData } = useBasicInfo();
 
 /* --------------- data --------------- */
 // #region
-const type = ref('');
+const _type = ref('');
 watch(
-  () => type.value,
+  () => _type.value,
   () => {
-    console.log(type.value);
+    console.log(_type.value);
   },
   {
     deep: true,
@@ -27,7 +62,37 @@ watch(
 );
 
 const crud = ref();
-const data = ref([]);
+const _loading = ref(false);
+const data = ref([
+  {
+    name: '农药1',
+    id: '1111',
+    produicer: '生产商1',
+    dealer: '经销商1',
+    img: [
+      'https://gips0.baidu.com/it/u=3602773692,1512483864&fm=3028',
+      'https://gips3.baidu.com/it/u=100751361,1567855012&fm=3028',
+      'https://gips2.baidu.com/it/u=195724436,3554684702&fm=3028',
+    ],
+    checkReport: [],
+  },
+  {
+    name: '农药2',
+    id: '2222',
+    produicer: '生产商2',
+    dealer: '经销商2',
+    img: ['https://gips3.baidu.com/it/u=100751361,1567855012&fm=3028'],
+    checkReport: ['https://gips3.baidu.com/it/u=100751361,1567855012&fm=3028'],
+  },
+  {
+    name: '农药3',
+    id: '3333',
+    produicer: '生产商3',
+    dealer: '经销商3',
+    img: [],
+    checkReport: [],
+  },
+]);
 const pageData = ref({
   total: 0,
   currentPage: 1,
@@ -36,54 +101,251 @@ const pageData = ref({
 const option = ref({
   CRUD_OPTIONS,
   selection: false,
+  labelWidth: 124,
+  editBtn: false,
+  delBtn: false,
   column: [
     {
-      prop: '',
+      prop: 'id',
       label: '农药编号',
+      addDisplay: false,
+      editDisplay: false,
     },
     {
-      prop: '',
+      prop: 'name',
       label: '名称',
+      editDisplay: false,
     },
     {
-      prop: '',
+      hide: true,
-      label: '厂家',
+      prop: 'code',
+      label: '产品标准证号',
+      viewDisplay: false,
+      editDisplay: false,
     },
     {
-      prop: '',
+      hide: true,
+      prop: 'img',
+      label: '农药图片',
+      editDisplay: false,
+    },
+    {
+      hide: true,
+      prop: 'code1',
+      label: '农药登记证号',
+      viewDisplay: false,
+      editDisplay: false,
+    },
+    {
+      prop: 'producer',
+      label: '生产厂家',
+      editDisplay: false,
+    },
+    {
+      prop: 'dealer',
       label: '经销商',
+      editDisplay: false,
     },
     {
-      prop: '',
+      prop: 'format',
-      label: '防治对象',
-    },
-    {
-      prop: '',
-      label: '化学成分',
-    },
-    {
-      prop: '',
-      label: '加工剂型',
-    },
-    {
-      prop: '',
       label: '产品规格',
+      editDisplay: false,
     },
     {
-      prop: '',
+      prop: 'toxicity',
       label: '毒性',
+      editDisplay: false,
     },
     {
-      prop: '',
+      prop: 'validity',
       label: '保质期',
+      editDisplay: false,
+    },
+    {
+      prop: 'preventTargets',
+      label: '防治对象',
+      type: 'cascader',
+      checkStrictly: true,
+      multiple: true,
+      dicData: pesticideData.value[1].children,
+      span: 24,
+      editDisplay: false,
+    },
+    {
+      prop: 'chemicalComposition',
+      label: '化学成分',
+      type: 'cascader',
+      checkStrictly: true,
+      multiple: true,
+      dicData: pesticideData.value[2].children,
+      span: 24,
+      editDisplay: false,
+    },
+    {
+      prop: 'dosageForm',
+      label: '加工剂型',
+      type: 'cascader',
+      checkStrictly: true,
+      multiple: true,
+      dicData: pesticideData.value[3].children,
+      span: 24,
+      editDisplay: false,
+    },
+    {
+      hide: true,
+      prop: 'useMethods',
+      label: '使用方法',
+      type: 'textarea',
+      span: 24,
+      viewDisplay: false,
+      editDisplay: false,
+    },
+    {
+      hide: true,
+      prop: 'tips',
+      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: 'name',
+          label: '农药名称',
+          editDisabled: true,
+        },
+        {
+          prop: 'producer',
+          label: '生产商',
+          editDisabled: true,
+        },
+        {
+          prop: 'img',
+          label: '农药图片',
+          editDisabled: true,
+        },
+        {
+          prop: 'dealer',
+          label: '经销商',
+          editDisabled: true,
+        },
+      ],
+    },
+    {
+      label: '农药检测信息',
+      prop: 'check_info',
+      addDisplay: false,
+      viewDisplay: false,
+      column: [
+        {
+          prop: 'checkDate',
+          label: '农药名称',
+        },
+        {
+          prop: 'checkResult',
+          label: '检测结果',
+        },
+        {
+          prop: 'checkUnit',
+          label: '检测单位',
+        },
+        {
+          prop: 'checkConclusion',
+          label: '检测结论',
+        },
+        {
+          prop: 'checkReport',
+          label: '质检报告',
+          span: 24,
+        },
+        {
+          labelWidth: 0,
+          prop: 'checkBtn',
+          span: 24,
+          editDisplay: false,
+        },
+      ],
     },
   ],
 });
+const img = ref([]);
+const reportAttrs = ref([]);
 // #endregion
 
 /* --------------- methods --------------- */
 // #region
+function handleCloseDialog(done) {
+  handleCheckInfoChange();
+  done();
+}
 
+function handleRowSave(form, done, loading) {
+  console.log('handleRowSave', form);
+  loading();
+}
+function handleEdit(row) {
+  console.log('handleEdit', row);
+  handleCheckInfoChange('open');
+  img.value = row.img.map((v) => {
+    return {
+      url: v,
+      uid: Date.now(),
+    };
+  });
+  reportAttrs.value = row.checkReport.map((v) => {
+    return {
+      url: v,
+      uid: Date.now(),
+    };
+  });
+  crud.value.rowEdit(row);
+}
+function handleInfo(row) {
+  console.log('row', row);
+  crud.value.rowView(row);
+}
+function handleCheckInfo(type) {
+  console.log('checkInfo', type);
+  handleCheckInfoChange(type == 'open');
+}
+/* bol && 查看检测报告关闭其他信息  !bol && 关闭检测报告打开其他信息 */
+function handleCheckInfoChange(bol = false) {
+  console.log('bol', bol);
+  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 == 'img') {
+        v.viewDisplay = true;
+      }
+    });
+  }
+}
+async function handleRowUpdate(form, done, loading) {
+  console.log('update from -- ', form);
+  loading();
+}
 // #endregion
 </script>
 

sub-government-affairs-service/src/views/landManage/common/Attrs.vue

@@ -1,5 +1,5 @@
 <template>
-  <section class="create_land_attrs_content_" :style="{ '--columns': props.fileNum }">
+  <section class="custom_attrs_upload_content_lx" :style="{ '--columns': props.fileNum }">
     <el-upload
       v-if="props.type != 'view'"
       class="custom-form__uploader"
@@ -14,13 +14,14 @@
     </el-upload>
     <div v-for="item in attrs_" :key="`attr_${item.uid}`" class="attrs_content__item">
       <video v-if="isMP4(item.url)" :src="item.url" controls />
-      <img v-else :src="item.url" :alt="item.name" />
+      <img v-else :src="item.url" :alt="item.name" @click="handlePreview(i)" />
       <el-icon v-if="props.type != 'view'" class="clear_btn" @click="handleClearAttr(item.uid)"><CircleCloseFilled /></el-icon>
     </div>
+    <el-image-viewer v-if="previewShow" :url-list="srcList" :initial-index="index" @close="previewShow = false" />
   </section>
 </template>
 <script setup>
-import { ref, watch } from 'vue';
+import { nextTick, ref, watch } from 'vue';
 import { CommonUpload } from '@/apis';
 
 const emit = defineEmits(['update:attrs']);
@@ -47,6 +48,8 @@ const props = defineProps({
   },
 });
 const attrs_ = ref([]);
+const srcList = ref([]);
+srcList.value = attrs_.value.map((item) => item.url);
 watch(
   () => props.attrs,
   (val) => {
@@ -54,6 +57,9 @@ watch(
   },
   { deep: true, immediate: true }
 );
+const index = ref(0);
+const previewShow = ref(false);
+
 function handleClearAttr(uid) {
   attrs_.value = attrs_.value.filter((item) => item.uid !== uid);
   emit('update:attrs', attrs_.value);
@@ -75,24 +81,29 @@ function isMP4(filePath) {
   const regex = /\.mp4$/i;
   return regex.test(filePath);
 }
+function handlePreview(i) {
+  previewShow.value = false;
+  nextTick(() => {
+    index.value = i;
+    previewShow.value = true;
+  });
+}
 </script>
-
 <style lang="scss">
-.create_land_attrs_content_ {
+.custom_attrs_upload_content_lx {
   display: grid;
   flex-wrap: wrap;
   grid-template-columns: repeat(var(--columns), 1fr);
   box-sizing: border-box;
   gap: 20px;
-  .custom-form__uploader {
+  > div {
     width: 100%;
     height: 100%;
+    aspect-ratio: 1 / 1;
     box-sizing: border-box;
   }
-  > div {
-    aspect-ratio: 1 / 1;
-  }
   .attrs_content__item {
+    aspect-ratio: 1 / 1;
     box-sizing: border-box;
     position: relative;
     padding: 6px;

sub-government-affairs-service/src/views/landManage/component/landsManage/common/Attrs.vue

@@ -1,7 +1,7 @@
 <template>
   <section class="create_land_attrs_content_">
     <el-upload
-      v-if="props.view != 'view'"
+      v-if="props.type != 'view'"
       class="custom-form__uploader"
       action=""
       :show-file-list="false"
@@ -13,7 +13,7 @@
     </el-upload>
     <div v-for="item in attrs_" :key="`attr_${item.uid}`" class="attrs_content__item">
       <img :src="item.url" :alt="item.name" style="" />
-      <el-icon v-if="props.view != 'view'" class="clear_btn" @click="handleClearAttr(item.uid)"><CircleCloseFilled /></el-icon>
+      <el-icon v-if="props.type != 'view'" class="clear_btn" @click="handleClearAttr(item.uid)"><CircleCloseFilled /></el-icon>
     </div>
   </section>
 </template>
@@ -27,7 +27,7 @@ const props = defineProps({
     type: String,
     default: 'image/*',
   },
-  view: {
+  type: {
     type: String,
     default: 'view',
   },

sub-government-affairs-service/src/views/landManage/component/landsManage/index.vue

@@ -39,16 +39,16 @@
         </el-popconfirm>
       </template>
       <template #propertyCertificateUrl-form="{ type }">
-        <Attrs v-model:attrs="attrs" :view="type" />
+        <Attrs v-model:attrs="attrs" :type="type" />
       </template>
       <template #landCertificateUrl-form="{ type }">
-        <Attrs v-model:attrs="landOwnerAttrs" :view="type" />
+        <Attrs v-model:attrs="landOwnerAttrs" :type="type" />
       </template>
       <template #coordinate-form>
         <avue-input-map v-model="local" :params="params" placeholder="请选择位置"></avue-input-map>
       </template>
       <template #landUrl-form="{ type }">
-        <Attrs v-model:attrs="landAttrs" :view="type" />
+        <Attrs v-model:attrs="landAttrs" :type="type" />
       </template>
     </avue-crud>
     <custom-import-excel