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

<template>
  <CustomCard>
    <h2>农药基本信息</h2>
    <TypeMenu v-model:type="_type" :types="pesticideData" />
    <br />
    <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 { 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('');
watch(
  () => _type.value,
  () => {
    console.log(_type.value);
  },
  {
    deep: true,
  }
);

const crud = 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,
  pageSize: 10,
});
const option = ref({
  CRUD_OPTIONS,
  selection: false,
  labelWidth: 124,
  editBtn: false,
  delBtn: false,
  column: [
    {
      prop: 'id',
      label: '农药编号',
      addDisplay: false,
      editDisplay: false,
    },
    {
      prop: 'name',
      label: '名称',
      editDisplay: false,
    },
    {
      hide: true,
      prop: 'code',
      label: '产品标准证号',
      viewDisplay: false,
      editDisplay: false,
    },
    {
      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: 'format',
      label: '产品规格',
      editDisplay: false,
    },
    {
      prop: 'toxicity',
      label: '毒性',
      editDisplay: false,
    },
    {
      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>

<style lang="scss" scoped>
h2 {
  font-size: 24px;
  font-weight: bold;
  font-family: '黑体';
}
</style>