avue_crud dateBtn 如和获得一年的日期并赋值给dateBtn做范围查询 的详细过程

可以通过以下步骤来设置 `avue_crud` 组件的 `dateBtn` 属性，使其可以进行一年范围的日期查询：

1. 在 `avue_crud` 组件中，为 `dateBtn` 属性设置一个数组，其中包含需要显示的日期按钮的内容和对应的值。例如，可以设置一个包含“最近一年”按钮的数组：

<avue-crud
  :dateBtn="[
    { text: '最近一年', value: '1' },
    { text: '最近三年', value: '3' }
  ]"
></avue-crud>

2. 在 `avue_crud` 组件的 `search` 方法中获取 `dateBtn` 的值，并根据值设置查询的日期范围。例如，可以使用 `moment.js` 库获取当前日期，并根据 `dateBtn` 的值计算出起始日期和结束日期：

import moment from 'moment';

export default {
  data() {
    return {
      tableData: [], // 表格数据
      searchForm: {}, // 查询表单
      pagination: {}, // 分页信息
    };
  },
  methods: {
    search() {
      // 获取 dateBtn 的值
      const range = Number(this.searchForm.dateBtn);
      // 计算起始日期和结束日期
      const startDate = moment().subtract(range, 'years').format('YYYY-MM-DD');
      const endDate = moment().format('YYYY-MM-DD');
      // 设置查询参数
      const params = {
        startDate,
        endDate,
        // 其他查询条件
      };
      // 调用查询接口
      this.getTableData(params);
    },
    getTableData(params) {
      // 根据查询参数调用接口查询数据
      // 将查询结果赋值给 tableData 和 pagination
    },
  },
};

3. 在 `avue_crud` 组件的 `formConfig` 属性中添加一个日期选择器，用于选择查询的日期范围。例如，可以添加一个名为 `dateBtn` 的日期选择器：

export default {
  data() {
    return {
      formConfig: {
        // 其他表单项
        dateBtn: {
          type: 'radio',
          label: '时间范围',
          span: 12,
          dicData: [
            { label: '最近一年', value: '1' },
            { label: '最近三年', value: '3' },
          ],
        },
      },
    };
  },
};

4. 在 `avue_crud` 组件的 `searchForm` 中添加一个名为 `dateBtn` 的属性，用于存储选择的日期范围。例如，可以将 `dateBtn` 的默认值设置为 `1`，表示默认查询最近一年的数据：

export default {
  data() {
    return {
      searchForm: {
        dateBtn: '1',
        // 其他查询条件
      },
    };
  },
};

通过上述步骤，就可以实现在 `avue_crud` 组件中进行一年范围的日期查询，并且可以通过 `dateBtn` 属性自定义日期选择器的内容和查询范围。