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

<template>
  <section class="custom-page">
    <avue-crud
      ref="crudRef"
      v-model:search="searchCondition"
      v-model:page="pageData"
      :table-loading="_loading"
      :option="option"
      :data="data"
      @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 #land-form="{ type }">
        <section if="type == 'add'">地块</section>
      </template>
    </avue-crud>
  </section>
</template>

<script setup>
import { reactive, ref, watch } from 'vue';
import { CRUD_OPTIONS, pageData } from '@/config';
import { useBasicInfo } from '@/views/inputSuppliesManage/hooks/useBasicInfo';

const { loadFinish, materialTwoLevel, materialTypes } = useBasicInfo();

watch(
  () => loadFinish.value,
  (bol) => {
    if (loadFinish.value) {
      console.log('material', materialTypes);
    }
  }
);
/* --------------- data --------------- */
// #region
const crudRef = ref(null);
const _loading = ref(true);
const searchCondition = ref({
  searchType: '',
  keywords: '',
});
const types = reactive([
  { label: '农药监管', value: '1' },
  { label: '肥料监管', value: '2' },
  { label: '兽药监管', value: '3' },
]);
const data = ref([{}]);
const option = ref({
  ...CRUD_OPTIONS,
  selection: false,
  dialogWidth: '50%',
  column: [
    {
      hide: true,
      search: true,
      addDisplay: false,
      editDisplay: false,
      label: '物资类型',
      prop: 'searchType',
      type: 'select',
      dicData: types,
    },
    {
      hide: true,
      search: true,
      addDisplay: false,
      editDisplay: false,
      label: '关键字',
      prop: 'keywords',
    },
    {
      editDisabled: true,
      label: '物资类型',
      prop: 'dataType',
      type: 'select',
      dicData: types,
      clearable: false,
      value: '1',
      change: handleTypeChange,
    },
    {
      label: '姓名',
      prop: 'name',
    },
    {
      label: '联系方式',
      prop: 'phone',
    },
    {
      label: '投入品名称',
      prop: 'materialName',
    },
    {
      label: '分类',
      prop: 'type',
      type: 'cascader',
      dicData: [],
    },
    {
      label: '购买量',
      prop: 't1',
    },
    {
      label: '购买时间',
      prop: 't2',
    },
    {
      label: '使用量',
      prop: 't3',
    },
    {
      label: '使用时间',
      prop: 't4',
    },
    {
      label: '使用对象',
      prop: 't5',
    },
    {
      label: '关联地块',
      prop: 'land',
    },
  ],
  group: [
    {
      label: '农药检测',
      prop: 'pesticide',
      // addDisplay: false,
      // editDisplay: false,
      column: [
        {
          label: '检测时间',
          prop: 'checkTime',
          span: 24,
          type: 'date',
          valueFormat: 'yyyy-MM-dd',
          format: 'yyyy-MM-dd',
        },
        {
          label: '检测结果',
          prop: 'result',
          span: 24,
        },
        {
          label: '投入品名称',
          prop: 'unit',
          span: 24,
        },
        {
          label: '检测报告',
          prop: 'report',
          span: 24,
        },
      ],
    },
  ],
});
// #endregion

/* --------------- methods --------------- */
// #region
function getData(reset = 1) {
  reset == 1 && (pageData.value.currentPage = 1);
  console.log('get data');
}
function handleTypeChange(val) {
  console.log(
    'dicData',
    materialTypes[val.value].filter((v) => v.value != '0')
  );
  option.value.column[6].dicData = materialTypes[val.value].filter((v) => v.value != '0');
}
function handleData(val) {
  console.log('handleData', val);
}
function handleRowSave(row, done, laoding) {
  handleData(row);
  laoding();
}

function handleRowUpdate(row, index, done, loading) {
  handleData(row);
  loading();
}
// #endregion
</script>

<style lang="scss" scoped></style>