feat:学习

src/components/ag-grid/DateComponent.vue

@@ -2,15 +2,67 @@
  * Ag Grid 自定义日期输入组件
   -->
 <script setup lang="ts">
-import { onMounted } from 'vue';
+import { ref, onMounted } from 'vue';
+import { date } from 'quasar';
+import { isEmpty } from 'src/common/utils';
 
 const props = defineProps<{
   params: any;
 }>();
 
+defineExpose({
+  getDate,
+  setDate,
+  setInputAriaLabel,
+  onClear,
+});
+
+// ref
+const eInput = ref<any>(null);
+const qDateRef = ref<any>(null);
+
+const proxyDate = ref<any>('2012/');
+
 onMounted(() => {
   console.log('props.params', props.params);
 });
+
+function proxyShow() {
+  let dateHtml = qDateRef.value.$el;
+  dateHtml.classList.add('ag-custom-component-popup');
+}
+
+function getDate() {
+  return new Date(proxyDate.value);
+}
+
+function setDate(data: any) {
+  const formattedString = date.formatDate(data, 'YYYY/MM/DD');
+  proxyDate.value = formattedString;
+}
+
+function setInputAriaLabel(label: any) {
+  eInput.value.setAttribute('aria-label', label);
+}
+
+function onClear() {
+  eInput.value.value = null;
+  proxyDate.value = null;
+  props.params.api.setFilterModel(null);
+}
+
+function onOk() {
+  if (isEmpty(proxyDate.value)) {
+    onClear();
+  } else {
+    eInput.value.value = proxyDate.value;
+    props.params.onDateChanged();
+  }
+}
+
+function inputChange(inputEvent: any) {
+  proxyDate.value = inputEvent.currentTarget.value;
+}
 </script>
 <template>
   <div class="my-ag-grid-date-component">
@@ -19,16 +71,56 @@ onMounted(() => {
       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" />
+      <input
+        type="text"
+        ref="eInput"
+        data-input
+        placeholder="YYYY/MM/DD"
+        style="width: 100%"
+        @input="inputChange"
+      />
+      <q-icon class="my-icon" name="bi-calendar4-week">
+        <q-popup-proxy
+          @show="proxyShow"
+          cover
+          transition-show="scale"
+          transition-hide="scale"
+        >
+          <q-date v-model="proxyDate" minimal ref="qDateRef">
+            <div class="row items-center justify-end q-gutter-sm">
+              <q-btn
+                label="取消"
+                color="primary"
+                size="sm"
+                outline
+                v-close-popup
+              />
+              <q-btn
+                label="确定"
+                color="primary"
+                size="sm"
+                unelevated
+                v-close-popup
+                @click="onOk"
+              />
+            </div>
+          </q-date>
+        </q-popup-proxy>
+      </q-icon>
+      <q-icon
+        class="my-icon my-icon-clear"
+        name="bi-x-lg"
+        title="清除"
+        data-clear
+        @click="onClear"
+      />
     </div>
   </div>
 </template>
 <style lang="scss">
 .my-ag-grid-date-component {
   box-sizing: border-box;
-  border: 1px solid red;
+  // border: 1px solid red;
   width: 100%;
 
   .custom-date-filter {
@@ -36,11 +128,46 @@ onMounted(() => {
     position: relative;
     > input {
       cursor: pointer;
+      overflow: visible;
+      text-transform: none;
+      outline: none;
+      flex: 1 1 auto;
+      margin: 0;
+      width: 100%;
+      background-color: var(--ag-background-color);
+      border: var(--ag-borders-input) var(--ag-input-border-color);
+      color: var(--my-ag-grid-primary);
+      // 5px + 13px + 2px + 13px + 2px
+      padding-right: 35px;
+      padding-left: var(--ag-grid-size);
+      padding-top: 1px;
+      padding-bottom: 1px;
+      min-height: calc(var(--ag-grid-size) * 4);
+      min-width: 0;
+      border-radius: var(--ag-border-radius);
+      &:focus {
+        outline: none;
+        box-shadow: var(--ag-input-focus-box-shadow);
+        border-color: var(--ag-input-focus-border-color);
+      }
+      &::-webkit-input-placeholder {
+        /* WebKit, Blink, Edge */
+        color: rgba(0, 0, 0, 0.205);
+        font-size: 12px;
+      }
     }
     .my-icon {
       position: absolute;
-      right: 0;
-      color: red;
+      right: 5px;
+      color: var(--my-ag-grid-primary);
+      cursor: pointer;
+      &:hover {
+        color: var(--my-ag-grid-active);
+      }
+    }
+    .my-icon-clear {
+      // 5px + 13px + 2px
+      right: 20px;
     }
   }
 }

src/layouts/MainLayout.vue

@@ -174,7 +174,7 @@ export default defineComponent({
         },
         {
           title: '九',
-          caption: '动画2',
+          caption: '动画2&表格',
           icon: require('./menuListIcons/page9.svg'),
           link: '/page9',
           active: false,

src/modules/page9/IndexPage.vue

@@ -68,8 +68,8 @@ const listData = [
   },
 ];
 const isShow = ref(true);
-const elementName = ref('ag-grid-custom-date-component');
-const elementTitle = ref('Ag Grid 自定义日期组件');
+const elementName = ref('ag-grid-detail-grids');
+const elementTitle = ref('Vue Data Grid: Master / Detail - Detail Grids');
 
 function onclick(data: any) {
   elementTitle.value = data.title;

src/modules/page9/element/AgGridCustomDateComponent.vue

@@ -5,8 +5,11 @@
 <script lang="ts">
 import { ref, reactive, defineComponent } from 'vue';
 import { AgGridVue } from 'ag-grid-vue3';
+// import { date } from 'quasar';
+
 import Com from 'src/components';
 import AG_GRID_LOCALE from 'src/config/ag-grid-locale';
+import { isEmpty } from 'src/common/utils';
 
 export default defineComponent({
   name: 'AgGridCustomDateComponent',
@@ -26,7 +29,7 @@ export default defineComponent({
       editable: true, // 可编辑
       sortable: true,
       filter: true,
-      floatingFilter: true,
+      // floatingFilter: true,
     });
 
     const columnDefs = reactive([
@@ -41,6 +44,17 @@ export default defineComponent({
         filter: 'agDateColumnFilter',
         filterParams: {
           comparator: (filterLocalDateAtMidnight: any, cellValue: any) => {
+            // const formattedString = date.formatDate(
+            //   filterLocalDateAtMidnight,
+            //   'YYYY/MM/DD'
+            // );
+            // console.log(
+            //   'filterLocalDateAtMidnight',
+            //   formattedString,
+            //   'cellValue',
+            //   cellValue
+            // );
+
             const dateAsString = cellValue;
             const dateParts = dateAsString.split('/');
             const cellDate = new Date(
@@ -59,6 +73,20 @@ export default defineComponent({
             }
           },
         },
+        comparator: (d1: any, d2: any) => {
+          return getComparatorDate(d1).getTime() <
+            getComparatorDate(d2).getTime()
+            ? -1
+            : 1;
+        },
+        valueFormatter: (params: any) => {
+          let resStr = '';
+          if (!isEmpty(params.value)) {
+            const dateArr = params.value.split('/');
+            resStr = dateArr[2] + '-' + dateArr[1] + '-' + dateArr[0];
+          }
+          return resStr;
+        },
       },
       { field: 'sport', headerName: '运动' },
       { field: 'gold', headerName: '金牌', filter: 'agNumberColumnFilter' },
@@ -84,10 +112,25 @@ export default defineComponent({
     };
 
     const updateData = (data: any) => {
-      state.rowData = data;
+      state.rowData = data.slice(0, 5);
       console.log('rowData[0]', state.rowData[0]);
     };
 
+    const onReset = () => {
+      gridApi.value.setFilterModel(null);
+      gridApi.value.destroyFilter('date');
+    };
+
+    const getComparatorDate = (data: string) => {
+      // 21/01/2008
+      const dateArr = data.split('/');
+      const year = Number(dateArr[2]);
+      const month = Number(dateArr[1]);
+      const day = Number(dateArr[0]);
+      const newDate = new Date(year, month, day);
+      return newDate;
+    };
+
     return {
       AG_GRID_LOCALE,
       Com,
@@ -95,21 +138,27 @@ export default defineComponent({
       columnDefs,
       state,
       onGridReady,
+      onReset,
     };
   },
 });
 </script>
 <template>
   <div>
+    <div class="btns">
+      <q-btn color="primary" label="重置" no-caps unelevated @click="onReset" />
+    </div>
     <!-- 
         rowSelection="multiple"：多选，按住control键多选；【control+shift+鼠标点击】可选中多行
         animateRows=true：启用行动画
         :masterDetail="true" 启用展开的细节网格行
         :isRowMaster="isRowMaster" 确定哪一个行该展开
+        :pagination="true"
+        :paginationPageSize="100"
      -->
-    <div>
+    <div class="ag-table">
       <ag-grid-vue
-        style="height: 550px"
+        style="height: 580px"
         class="ag-theme-alpine"
         :localeText="AG_GRID_LOCALE"
         :animateRows="true"
@@ -124,3 +173,17 @@ export default defineComponent({
     </div>
   </div>
 </template>
+
+<style lang="scss" scoped>
+.btns {
+  padding: 10px;
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-start;
+  align-items: center;
+  column-gap: 10px;
+}
+.ag-table {
+  padding: 0 10px 10px 10px;
+}
+</style>

src/modules/page9/element/AgGridDetailGrids.vue

@@ -16,6 +16,8 @@ const defaultColDef = {
 
 const gridApi = ref<any>(null);
 const gridColumnApi = ref<any>(null);
+const detailCellGridApi = ref<any>(null);
+const detailCellGridColumnApi = ref<any>(null);
 
 const detailCellRendererParams = reactive({
   // 提供要在细节网格上使用的网格选项
@@ -26,6 +28,7 @@ const detailCellRendererParams = reactive({
         field: 'callId',
         headerName: '呼叫标识',
         checkboxSelection: true, // 给该列配置复选框
+        headerCheckboxSelection: true, // 给该列标题栏设置复选框
       },
       { field: 'direction', headerName: '方向' },
       { field: 'number', headerName: '号码' },
@@ -50,6 +53,10 @@ const detailCellRendererParams = reactive({
       dense: true,
     },
     loadingOverlayComponent: Com.AgGridLoadingOverlayComponent,
+    onGridReady: (params: any) => {
+      detailCellGridApi.value = params.api;
+      detailCellGridColumnApi.value = params.columnApi;
+    },
   },
   // 获得每个细节网格的行数
   getDetailRowData: (params: any) => {
@@ -103,9 +110,22 @@ function isRowMaster(dataItem: any) {
   }
   return flag;
 }
+
+function getSelectedRows() {
+  const res = detailCellGridApi.value.getSelectedRows();
+  console.log('获取选择行 ==', res);
+}
 </script>
 <template>
   <div class="box">
+    <div class="btns">
+      <q-btn
+        color="primary"
+        label="获取选择的数据"
+        no-caps
+        @click="getSelectedRows"
+      />
+    </div>
     <!-- 
         rowSelection="multiple"：多选，按住control键多选；【control+shift+鼠标点击】可选中多行
         animateRows=true：启用行动画
@@ -113,8 +133,7 @@ function isRowMaster(dataItem: any) {
         :isRowMaster="isRowMaster" 确定哪一个行该展开
         :noRowsOverlayComponentParams="noRowsOverlayComponentParams"
      -->
-
-    <div>
+    <div class="ag-table">
       <ag-grid-vue
         style="height: 500px"
         class="ag-theme-alpine"
@@ -137,4 +156,16 @@ function isRowMaster(dataItem: any) {
   </div>
 </template>
 
-<style lang="scss" scoped></style>
+<style lang="scss" scoped>
+.btns {
+  padding: 10px;
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-start;
+  align-items: center;
+  column-gap: 10px;
+}
+.ag-table {
+  padding: 0 10px 10px 10px;
+}
+</style>

src/modules/page9/element/AgGridTreeFileBrowser.vue

@@ -15,6 +15,7 @@ const defaultColDef = {
   filter: true,
   sortable: true,
   resizable: true,
+  suppressMenu: true,
 };
 
 const { warn } = useMessage();

src/router/routes.ts

@@ -97,7 +97,7 @@ const routes: RouteRecordRaw[] = [
             name: 'PAGE9',
             component: () => import('../modules/page9/IndexPage.vue'),
             meta: {
-              title: '动画2',
+              title: '动画2&表格',
               permission: ['*'],
               keepalive: true,
             },