feat:提交

src/components/ag-grid/DateComponent.vue

+<!--
+ * Ag Grid 自定义日期输入组件
+  -->
+<script setup lang="ts">
+import { onMounted } from 'vue';
+
+const props = defineProps<{
+  params: any;
+}>();
+
+onMounted(() => {
+  console.log('props.params', props.params);
+});
+</script>
+<template>
+  <div class="my-ag-grid-date-component">
+    <div
+      class="ag-input-wrapper custom-date-filter"
+      role="presentation"
+      ref="flatpickr"
+    >
+      <input type="text" ref="eInput" data-input style="width: 100%" />
+      <q-icon class="my-icon" name="font_download" />
+      <q-icon class="my-icon" name="font_download" />
+    </div>
+  </div>
+</template>
+<style lang="scss">
+.my-ag-grid-date-component {
+  box-sizing: border-box;
+  border: 1px solid red;
+  width: 100%;
+
+  .custom-date-filter {
+    width: 100%;
+    position: relative;
+    > input {
+      cursor: pointer;
+    }
+    .my-icon {
+      position: absolute;
+      right: 0;
+      color: red;
+    }
+  }
+}
+</style>

src/components/index.ts

@@ -8,6 +8,7 @@ import TitlePage from './title-page/TitlePage.vue';
 import UpLoader from './uploader-page/UpLoader.vue';
 import AgGridNoRowsComponent from './ag-grid/NoRowsOverlayComponent.vue';
 import AgGridLoadingOverlayComponent from './ag-grid/LoadingOverlayComponent.vue';
+import AgGridDateComponent from './ag-grid/DateComponent.vue';
 
 export {
   DateTimePick as ComDateTimePick,
@@ -20,6 +21,7 @@ export {
   UpLoader as ComUpLoader,
   AgGridNoRowsComponent as ComAgGridNoRowsComponent,
   AgGridLoadingOverlayComponent as ComAgGridLoadingOverlayComponent,
+  AgGridDateComponent as ComAgGridDateComponent,
 };
 
 export default {
@@ -33,4 +35,5 @@ export default {
   UpLoader,
   AgGridNoRowsComponent,
   AgGridLoadingOverlayComponent,
+  AgGridDateComponent,
 };

src/modules/page9/IndexPage.vue

@@ -19,6 +19,7 @@ import AgGridMaster from './element/AgGridMaster.vue';
 import AgGridDetailGrids from './element/AgGridDetailGrids.vue';
 import AgGridTreeData from './element/AgGridTreeData.vue';
 import AgGridTreeFileBrowser from './element/AgGridTreeFileBrowser.vue';
+import AgGridCustomDateComponent from './element/AgGridCustomDateComponent.vue';
 
 const listData = [
   {
@@ -61,10 +62,14 @@ const listData = [
     title: 'Ag Grid 表格树 文件浏览器例子',
     name: 'ag-grid-tree-file-browser',
   },
+  {
+    title: 'Ag Grid 自定义日期组件',
+    name: 'ag-grid-custom-date-component',
+  },
 ];
 const isShow = ref(true);
-const elementName = ref('ag-grid-tree-file-browser');
-const elementTitle = ref('Ag Grid 表格树 文件浏览器例子');
+const elementName = ref('ag-grid-custom-date-component');
+const elementTitle = ref('Ag Grid 自定义日期组件');
 
 function onclick(data: any) {
   elementTitle.value = data.title;
@@ -109,6 +114,9 @@ function goBack() {
         <ag-grid-tree-file-browser
           v-if="elementName === 'ag-grid-tree-file-browser'"
         />
+        <ag-grid-custom-date-component
+          v-if="elementName === 'ag-grid-custom-date-component'"
+        />
       </div>
     </div>
     <div v-else>

src/modules/page9/element/AgGridCustomDateComponent.vue

+<!--
+ * Ag Grid 自定义日期组件
+ * https://www.ag-grid.com/vue-data-grid/component-date/
+ -->
+<script lang="ts">
+import { ref, reactive, defineComponent } from 'vue';
+import { AgGridVue } from 'ag-grid-vue3';
+import Com from 'src/components';
+import AG_GRID_LOCALE from 'src/config/ag-grid-locale';
+
+export default defineComponent({
+  name: 'AgGridCustomDateComponent',
+  components: {
+    'ag-grid-vue': AgGridVue,
+    // eslint-disable-next-line vue/no-unused-components
+    agDateInput: Com.AgGridDateComponent,
+  },
+  setup() {
+    const gridApi = ref<any>(null);
+    const gridColumnApi = ref<any>(null);
+
+    const defaultColDef = reactive({
+      flex: 1,
+      minWidth: 100,
+      resizable: true,
+      editable: true, // 可编辑
+      sortable: true,
+      filter: true,
+      floatingFilter: true,
+    });
+
+    const columnDefs = reactive([
+      { field: 'athlete', headerName: '运动员' },
+      { field: 'age', headerName: '年龄', filter: 'agNumberColumnFilter' },
+      { field: 'country', headerName: '国家' },
+      { field: 'year', headerName: '年份' },
+      {
+        field: 'date',
+        minWidth: 190,
+        headerName: '日期',
+        filter: 'agDateColumnFilter',
+        filterParams: {
+          comparator: (filterLocalDateAtMidnight: any, cellValue: any) => {
+            const dateAsString = cellValue;
+            const dateParts = dateAsString.split('/');
+            const cellDate = new Date(
+              Number(dateParts[2]),
+              Number(dateParts[1]) - 1,
+              Number(dateParts[0])
+            );
+            if (filterLocalDateAtMidnight.getTime() === cellDate.getTime()) {
+              return 0;
+            }
+            if (cellDate < filterLocalDateAtMidnight) {
+              return -1;
+            }
+            if (cellDate > filterLocalDateAtMidnight) {
+              return 1;
+            }
+          },
+        },
+      },
+      { field: 'sport', headerName: '运动' },
+      { field: 'gold', headerName: '金牌', filter: 'agNumberColumnFilter' },
+      { field: 'silver', headerName: '银牌', filter: 'agNumberColumnFilter' },
+      { field: 'bronze', headerName: '铜牌', filter: 'agNumberColumnFilter' },
+      { field: 'total', headerName: '共计', filter: false },
+    ]);
+
+    const state = reactive({
+      rowData: [] as any[],
+    });
+
+    const onGridReady = (params: any) => {
+      gridApi.value = params.api;
+      gridColumnApi.value = params.columnApi;
+      getData();
+    };
+
+    const getData = () => {
+      fetch('https://www.ag-grid.com/example-assets/olympic-winners.json')
+        .then((resp) => resp.json())
+        .then((data) => updateData(data));
+    };
+
+    const updateData = (data: any) => {
+      state.rowData = data;
+      console.log('rowData[0]', state.rowData[0]);
+    };
+
+    return {
+      AG_GRID_LOCALE,
+      Com,
+      defaultColDef,
+      columnDefs,
+      state,
+      onGridReady,
+    };
+  },
+});
+</script>
+<template>
+  <div>
+    <!-- 
+        rowSelection="multiple"：多选，按住control键多选；【control+shift+鼠标点击】可选中多行
+        animateRows=true：启用行动画
+        :masterDetail="true" 启用展开的细节网格行
+        :isRowMaster="isRowMaster" 确定哪一个行该展开
+     -->
+    <div>
+      <ag-grid-vue
+        style="height: 550px"
+        class="ag-theme-alpine"
+        :localeText="AG_GRID_LOCALE"
+        :animateRows="true"
+        :pagination="true"
+        :paginationPageSize="10"
+        :defaultColDef="defaultColDef"
+        :columnDefs="columnDefs"
+        :rowData="state.rowData"
+        @grid-ready="onGridReady"
+      >
+      </ag-grid-vue>
+    </div>
+  </div>
+</template>