Skip to content

V
vue3-quasar-ts-study01
Commit 1ef89bbf authored by hucy's avatar hucy ☘
Browse files
Options

feat:学习

parent 3f40ae5e
Hide whitespace changes
Inline Side-by-side
Showing with 240 additions and 18 deletions
src/components/ag-grid/DateComponent.vue
View file @ 1ef89bbf
......@@ -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
View file @ 1ef89bbf
......@@ -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
View file @ 1ef89bbf
......@@ -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
View file @ 1ef89bbf
......@@ -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
View file @ 1ef89bbf
......@@ -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
View file @ 1ef89bbf
......@@ -15,6 +15,7 @@ const defaultColDef = {
filter: true,
sortable: true,
resizable: true,
suppressMenu: true,
};
const { warn } = useMessage();
......
src/router/routes.ts
View file @ 1ef89bbf
......@@ -97,7 +97,7 @@ const routes: RouteRecordRaw[] = [
name: 'PAGE9',
component: () => import('../modules/page9/IndexPage.vue'),
meta: {
title: '动画2',
title: '动画2&表格',
permission: ['*'],
keepalive: true,
},
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment