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> -->
      <template #report-form="type">
        <Attrs v-model:attrs="attrs" :type="type" />
      </template>
    </avue-crud>
  </section>
</template>

<script setup>
import { reactive, ref, watch, onMounted } from 'vue';
import { CRUD_OPTIONS, pageData, customRules } from '@/config';
import { useBasicInfo } from '@/views/inputSuppliesManage/hooks/useBasicInfo';
import inputSuppliesApi from '@/apis/inputSuppliesApi';
import assistFn from '@/views/inputSuppliesManage/hooks/useAssistFn';
import Attrs from '@/views/inputSuppliesManage/common/Attrs.vue';
const { deleteFn } = new assistFn();
const { getUseSuperviseList, delUseSupdervise, addUseSupdervise, editUseSupdervise } = inputSuppliesApi;
const { loadFinish, materialTypes } = useBasicInfo();

watch(
  () => loadFinish.value,
  (bol) => {
    if (loadFinish.value) {
      console.log('material', materialTypes);
    }
  }
);
onMounted(getData);
/* --------------- 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',
      rules: customRules({ msg: '请输入名称' }),
    },
    {
      label: '联系方式',
      prop: 'phone',
      rules: customRules({ msg: '请输入联系方式' }),
    },
    {
      label: '投入品名称',
      prop: 'inputName',
      rules: customRules({ msg: '请输入投入品名称' }),
    },
    {
      label: '分类',
      prop: 'classifyId',
      type: 'cascader',
      dicData: [],
      rules: customRules({ msg: '请选择分类' }),
    },
    {
      label: '购买量',
      prop: 'buyNumber',
      rules: customRules({ msg: '请输入购买量' }),
    },
    {
      label: '购买时间',
      type: 'date',
      format: 'YYYY-MM-DD',
      valueFormat: 'YYYY-MM-DD',
      prop: 'buyTime',
      rules: customRules({ msg: '请选择购买时间' }),
    },
    {
      label: '使用量',
      prop: 'useNumber',
      rules: customRules({ msg: '请输入使用量' }),
    },
    {
      label: '使用时间',
      format: 'YYYY-MM-DD',
      valueFormat: 'YYYY-MM-DD',
      prop: 'useTime',
      rules: customRules({ msg: '请选择使用时间' }),
    },
    {
      label: '使用对象',
      prop: 'useObject',
      rules: customRules({ msg: '请输入使用对象' }),
    },
    {
      label: '关联地块',
      prop: 'landName',
      rules: customRules({ msg: '请输入地块名称' }),
    },
  ],
  group: [
    {
      label: '农药检测',
      prop: 'pesticide',
      // addDisplay: false,
      // editDisplay: false,
      column: [
        {
          label: '检测时间',
          prop: 'detectionTime',
          type: 'date',
          valueFormat: 'yyyy-MM-dd',
          format: 'yyyy-MM-dd',
        },
        {
          label: '检测结果',
          prop: 'detectionResult',
        },
        {
          label: '投入品名称',
          prop: 'detectionUnit',
        },
        {
          label: '检测报告',
          prop: 'report',
        },
      ],
    },
  ],
});
const attrs = ref([]);
// #endregion

/* --------------- methods --------------- */
// #region
async function getData(reset = 1) {
  _loading.value = true;
  reset == 1 && (pageData.value.currentPage = 1);
  console.log('get data');
  let res = await getUseSuperviseList({
    current: pageData.value.currentPage,
    size: pageData.value.pageSize,
    dataType: searchCondition.value.searchType,
    name: searchCondition.value.keywords,
  });
  _loading.value = false;
  if (res.code == 200) {
    data.value = res.data.records;
    pageData.value.total = res.data.total;
    console.log('res', res);
  }
}
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>