Skip to content

V
vue3-quasar-ts-study02
Commit e6cbaafd authored by hcyhuchaoyue's avatar hcyhuchaoyue
Browse files
Options

fix:不重要的提交

parent b5043c05
Hide whitespace changes
Inline Side-by-side
Showing with 401 additions and 30 deletions
index.html
View file @ e6cbaafd
......@@ -3,17 +3,40 @@
<head>
<title><%= productName %></title>
<meta charset="utf-8">
<meta name="description" content="<%= productDescription %>">
<meta name="format-detection" content="telephone=no">
<meta name="msapplication-tap-highlight" content="no">
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width<% if (ctx.mode.cordova || ctx.mode.capacitor) { %>, viewport-fit=cover<% } %>">
<meta charset="utf-8" />
<meta name="description" content="<%= productDescription %>" />
<meta name="format-detection" content="telephone=no" />
<meta name="msapplication-tap-highlight" content="no" />
<meta
name="viewport"
content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width<% if (ctx.mode.cordova || ctx.mode.capacitor) { %>, viewport-fit=cover<% } %>"
/>
<link rel="icon" type="image/png" sizes="128x128" href="icons/favicon-128x128.png">
<link rel="icon" type="image/png" sizes="96x96" href="icons/favicon-96x96.png">
<link rel="icon" type="image/png" sizes="32x32" href="icons/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="icons/favicon-16x16.png">
<link rel="icon" type="image/ico" href="favicon.ico">
<link
rel="icon"
type="image/png"
sizes="128x128"
href="icons/favicon-128x128.png"
/>
<link
rel="icon"
type="image/png"
sizes="96x96"
href="icons/favicon-96x96.png"
/>
<link
rel="icon"
type="image/png"
sizes="32x32"
href="icons/favicon-32x32.png"
/>
<link
rel="icon"
type="image/png"
sizes="16x16"
href="icons/favicon-16x16.png"
/>
<link rel="icon" type="image/png" href="favicon.png" />
</head>
<body>
<!-- quasar:entry-point -->
......
package.json
View file @ e6cbaafd
{
"name": "my-quasar-app02",
"version": "0.0.1",
"description": "A Quasar Project",
"productName": "Quasar App",
"description": "送你一朵小红花",
"productName": "送你一朵小红花",
"author": "hucy <cy.hu@topibd.com>",
"private": true,
"scripts": {
......
public/icons/favicon-128x128.png
View replaced file @ b5043c05 View file @ e6cbaafd
public/icons/favicon-128x128.png

12 KB | W: | H:

public/icons/favicon-128x128.png

3.83 KB | W: | H:

public/icons/favicon-128x128.png
public/icons/favicon-128x128.png
public/icons/favicon-128x128.png
public/icons/favicon-128x128.png
  • 2-up
  • Swipe
  • Onion skin
public/icons/favicon-16x16.png
View replaced file @ b5043c05 View file @ e6cbaafd
public/icons/favicon-16x16.png

859 Bytes | W: | H:

public/icons/favicon-16x16.png

485 Bytes | W: | H:

public/icons/favicon-16x16.png
public/icons/favicon-16x16.png
public/icons/favicon-16x16.png
public/icons/favicon-16x16.png
  • 2-up
  • Swipe
  • Onion skin
public/icons/favicon-96x96.png
View replaced file @ b5043c05 View file @ e6cbaafd
public/icons/favicon-96x96.png

9.42 KB | W: | H:

public/icons/favicon-96x96.png

2.77 KB | W: | H:

public/icons/favicon-96x96.png
public/icons/favicon-96x96.png
public/icons/favicon-96x96.png
public/icons/favicon-96x96.png
  • 2-up
  • Swipe
  • Onion skin
src/css/ag-grid.scss
View file @ e6cbaafd
@import 'ag-grid-community/styles/ag-grid.css'; // Core grid CSS, always needed
@import 'ag-grid-community/styles/ag-theme-material.css'; // Optional theme CSS
.ag-unselectable {
-webkit-user-select: auto;
user-select: auto;
}
src/css/quasar.variables.scss
View file @ e6cbaafd
......@@ -60,7 +60,10 @@ $primary-light-4: mix($--color-white, $primary, 90%);
$border-color: rgba(0, 0, 0, 0.12);
$gray-text: rgba(0, 0, 0, 0.871);
$header-heigyht: 50px;
$gray-light-text: rgba(0, 0, 0, 0.596);
$text-color: #474747;
$header-heigyht: 50px;
$font-family: Roboto, -apple-system, Avenir, BlinkMacSystemFont, Segoe UI,
Helvetica, Arial, sans-serif;
src/modules/home/PageHome.vue
View file @ e6cbaafd
......@@ -4,13 +4,20 @@
* @LastEditTime: 2023-08-04
-->
<script setup lang="ts">
import { reactive, onMounted } from 'vue';
import { ref, reactive, onMounted, computed } from 'vue';
import { AgGridVue } from 'ag-grid-vue3';
import type {
GridOptions,
ValueFormatterParams,
ValueFormatterFunc,
} from 'ag-grid-community';
import type { GridOptions } from 'ag-grid-community';
import { sportEnums } from './config';
import CountryCellRender from './elements/CountryCellRender.vue';
const sportMap = computed(() => {
const obj: any = {};
for (const item of sportEnums) {
obj[item.value] = item.label;
}
return obj;
});
// Ag Grid
const gridOptions: GridOptions<any> = reactive({
......@@ -20,6 +27,7 @@ const gridOptions: GridOptions<any> = reactive({
suppressContextMenu: true, // 阻止“右键单击”上下文菜单
suppressCellFocus: true, // 阻止单元格聚焦，这意味着键盘导航将对网格单元格禁用
rowSelection: 'single',
defaultColDef: {
suppressMenu: true, // 阻止此列标头菜单显示
},
......@@ -27,34 +35,56 @@ const gridOptions: GridOptions<any> = reactive({
{
headerName: '序号',
maxWidth: 80,
valueFormatter: (params: ValueFormatterParams): ValueFormatterFunc => {
//
valueFormatter: (params: any) => {
return params.node?.rowIndex + 1;
},
},
{ headerName: '运动员', field: 'athlete', minWidth: 170 },
{ headerName: '年龄', field: 'age' },
{ headerName: '国家', field: 'country' },
{ headerName: '国家', field: 'country', cellRenderer: CountryCellRender },
{ headerName: '年份', field: 'year' },
{ headerName: '日期', field: 'date' },
{ headerName: '运动项目', field: 'sport' },
{ headerName: '金牌', field: 'gold' },
{ headerName: '银牌', field: 'silver' },
{ headerName: '铜牌', field: 'bronze' },
{
headerName: '运动项目',
field: 'sport',
valueFormatter: (params) => {
return sportMap.value[params.value] || params.value;
},
},
{
headerName: '金牌',
field: 'gold',
cellStyle: { color: '#FFA500' },
},
{ headerName: '银牌', field: 'silver', cellStyle: { color: '#717A84' } },
{ headerName: '铜牌', field: 'bronze', cellStyle: { color: '#834C24' } },
{ headerName: '总数', field: 'total' },
],
rowData: [],
onGridReady,
});
const count = ref(0);
const state = reactive({
sport: null,
});
onMounted(() => {
//
});
function onGridReady() {
onFetch();
}
function onFetch() {
fetch('https://www.ag-grid.com/example-assets/olympic-winners.json')
.then((resp) => resp.json())
.then((data) => {
.then((data: any[]) => {
if (state.sport) {
data = data.filter((item) => item.sport == state.sport);
}
updateData(data);
count.value = data.length;
});
}
function updateData(data: any) {
......@@ -97,14 +127,81 @@ function createServerSideDatasource(server: any) {
},
};
}
function onSearch() {
onFetch();
}
function onReset() {
state.sport = null;
onFetch();
}
</script>
<template>
<div class="home-page-home fit">
<div class="fit">
<div class="actions q-pa-md">
<div class="form-item">
<div class="form-label">运动项目</div>
<q-select
dense
filled
clearable
v-model="state.sport"
:options="sportEnums"
emit-value
map-options
/>
</div>
<div class="btns-box">
<div class="q-gutter-xs">
<q-btn color="primary" label="重置" outline @click="onReset" />
<q-btn color="primary" label="搜索" unelevated @click="onSearch" />
</div>
</div>
<q-space />
<div class="count-text">
共有 <q-chip square :clickable="false">{{ count }}</q-chip
>条数据
</div>
</div>
<div class="table-box">
<ag-grid-vue class="ag-theme-material fit" :grid-options="gridOptions">
</ag-grid-vue>
</div>
</div>
</template>
<style lang="scss" scoped></style>
<style lang="scss" scoped>
.home-page-home {
display: flex;
flex-direction: column;
.table-box {
flex: 1;
}
.actions {
display: flex;
flex-direction: row;
align-items: flex-end;
}
.count-text {
font-family: $font-family;
font-size: 13px;
color: $text-color;
}
.btns-box {
margin-left: $padding-lg;
padding-bottom: 2px;
}
.form-item {
width: 240px;
.form-label {
font-family: $font-family;
font-size: 13px;
color: $text-color;
}
}
}
</style>
src/modules/home/config.ts 0 → 100644
View file @ e6cbaafd
export const sportEnums = [
{
label: '游泳',
value: 'Swimming',
},
{
label: '体操',
value: 'Gymnastics',
},
{
label: '速度滑冰',
value: 'Speed Skating',
},
{
label: '高山滑雪',
value: 'Alpine Skiing',
},
{
label: '射箭',
value: 'Archery',
},
{
label: '田径',
value: 'Athletics',
},
{
label: '羽毛球',
value: 'Badminton',
},
{
label: '棒球',
value: 'Baseball',
},
{
label: '篮球',
value: 'Basketball',
},
{
label: '沙滩排球',
value: 'Beach Volleyball',
},
{
label: '冬季两项',
value: 'Biathlon',
},
{
label: '有舵雪橇',
value: 'Bobsleigh',
},
{
label: '拳击',
value: 'Boxing',
},
{
label: '划独木舟',
value: 'Canoeing',
},
{
label: '越野滑雪',
value: 'Cross Country Skiing',
},
{
label: '冰壶',
value: 'Curling',
},
{
label: '骑自行车',
value: 'Cycling',
},
{
label: '潜水',
value: 'Diving',
},
{
label: '马术',
value: 'Equestrian',
},
{
label: '击剑',
value: 'Fencing',
},
{
label: '花样滑冰',
value: 'Figure Skating',
},
{
label: '足球',
value: 'Football',
},
{
label: '自由式滑雪',
value: 'Freestyle Skiing',
},
{
label: '手球',
value: 'Handball',
},
{
label: '曲棍球',
value: 'Hockey',
},
{
label: '冰球',
value: 'Ice Hockey',
},
{
label: '柔道',
value: 'Judo',
},
{
label: '雪橇',
value: 'Luge',
},
{
label: '现代五项',
value: 'Modern Pentathlon',
},
{
label: '北欧联合',
value: 'Nordic Combined',
},
{
label: '艺术体操',
value: 'Rhythmic Gymnastics',
},
{
label: '划船',
value: 'Rowing',
},
{
label: '帆船运动',
value: 'Sailing',
},
{
label: '射击',
value: 'Shooting',
},
{
label: '短道速滑',
value: 'Short-Track Speed Skating',
},
{
label: '骨骼',
value: 'Skeleton',
},
{
label: '跳台滑雪',
value: 'Ski Jumping',
},
{
label: '单板滑雪',
value: 'Snowboarding',
},
{
label: '垒球',
value: 'Softball',
},
{
label: '花样游泳',
value: 'Synchronized Swimming',
},
{
label: '乒乓球',
value: 'Table Tennis',
},
{
label: '跆拳道',
value: 'Taekwondo',
},
{
label: '网球',
value: 'Tennis',
},
{
label: '蹦床',
value: 'Trampoline',
},
{
label: '铁人三项',
value: 'Triathlon',
},
{
label: '排球',
value: 'Volleyball',
},
{
label: '水球',
value: 'Waterpolo',
},
{
label: '举重',
value: 'Weightlifting',
},
{
label: '摔跤',
value: 'Wrestling',
},
];
src/modules/home/elements/CountryCellRender.vue 0 → 100644
View file @ e6cbaafd
<script setup lang="ts">
import { computed } from 'vue';
const props = defineProps(['params']);
const chinaIcon = new URL('../icons/country-zh-cn.svg', import.meta.url).href;
const usIcon = new URL('../icons/country-en-us.svg', import.meta.url).href;
const url = computed(() => {
switch (props.params.value) {
case 'China':
return chinaIcon;
case 'United States':
return usIcon;
default:
return '';
}
});
</script>
<template>
<div class="home-country-cellRender">
<div
v-if="url"
class="icon-box"
:style="{ backgroundImage: `url(${url})` }"
></div>
<div>{{ params.value }}</div>
</div>
</template>
<style lang="scss">
.home-country-cellRender {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
align-items: center;
.icon-box {
width: 36px;
height: 24px;
margin-right: 4px;
background-size: 100% 100%;
}
}
</style>
src/modules/home/icons/country-en-us.svg 0 → 100644
View file @ e6cbaafd
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1691165464907" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="20208" xmlns:xlink="http://www.w3.org/1999/xlink" width="96" height="96"><path d="M1006.342 847.448H17.656A17.658 17.658 0 0 1 0 829.792V194.208a17.658 17.658 0 0 1 17.656-17.656h988.688A17.658 17.658 0 0 1 1024 194.208v635.584a17.66 17.66 0 0 1-17.658 17.656z" fill="#41479B" p-id="20209"></path><path d="M1023.998 194.208a17.658 17.658 0 0 0-17.656-17.656h-78.99l-327.08 214.293V176.552h-176.55v214.293L96.643 176.552H17.656A17.658 17.658 0 0 0 0 194.208v45.662l280.617 183.853H0v176.552h280.617L0 784.13v45.662a17.658 17.658 0 0 0 17.656 17.656h78.99l327.08-214.293v214.293h176.55V633.155l327.08 214.293h78.99a17.658 17.658 0 0 0 17.656-17.656V784.13L743.385 600.277h280.613V423.725H743.381l280.617-183.855v-45.662z" fill="#F5F5F5" p-id="20210"></path><path d="M1023.998 459.035H564.965V176.552H459.033v282.483H0v105.93h459.033v282.483h105.932V564.965h459.033z" fill="#FF4B55" p-id="20211"></path><path d="M357.895 600.275L0.5 832.268c1.25 8.526 8.28 15.18 17.154 15.18h24.318l380.78-247.171h-64.857z m334.88 0h-64.856l380.225 246.807c8.862-0.944 15.856-8.18 15.856-17.292v-14.516l-331.225-215zM0 213.698l323.557 210.027h64.856L10.286 178.274C4.246 181.08 0 187.11 0 194.208v19.49z m665.13 210.027l358.254-232.553c-1.488-8.244-8.368-14.618-17.042-14.618h-25.294L600.275 423.725h64.856z" fill="#FF4B55" p-id="20212"></path></svg>
\ No newline at end of file
src/modules/home/icons/country-zh-cn.svg 0 → 100644
View file @ e6cbaafd
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1691162819781" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6062" xmlns:xlink="http://www.w3.org/1999/xlink" width="96" height="96"><path d="M1006.344 847.448H17.656A17.658 17.658 0 0 1 0 829.792V194.206a17.658 17.658 0 0 1 17.656-17.656h988.69a17.658 17.658 0 0 1 17.656 17.656v635.586a17.66 17.66 0 0 1-17.658 17.656z" fill="#FF4B55" p-id="6063"></path><path d="M170.014 281.464l16.832 50.468 53.2 0.412c6.888 0.052 9.744 8.844 4.202 12.934l-42.796 31.602 16.046 50.724c2.076 6.568-5.4 11.998-11.004 7.994l-43.28-30.938-43.28 30.936c-5.604 4.006-13.08-1.428-11.004-7.994l16.046-50.724-42.796-31.6c-5.542-4.092-2.686-12.882 4.202-12.934l53.2-0.412 16.832-50.468c2.18-6.536 11.422-6.536 13.6 0zM363.198 293.9l12.07 16.46 19.478-6.092c2.522-0.788 4.596 2.088 3.052 4.23l-11.924 16.562 11.812 16.642c1.53 2.154-0.564 5.016-3.08 4.21l-19.438-6.222-12.178 16.378c-1.576 2.12-4.946 1.012-4.956-1.628l-0.09-20.41-19.34-6.522c-2.502-0.846-2.492-4.39 0.018-5.218l19.38-6.392 0.228-20.408c0.028-2.638 3.406-3.72 4.968-1.59z m-73.484-49.06l20.29 2.204 8.656-18.482c1.122-2.392 4.642-1.982 5.182 0.604l4.172 19.976 20.252 2.52c2.622 0.326 3.32 3.802 1.026 5.116l-17.71 10.14 3.862 20.04c0.5 2.596-2.59 4.332-4.548 2.558l-15.118-13.71-17.864 9.864c-2.312 1.278-4.922-1.126-3.838-3.536l8.366-18.616-14.904-13.944c-1.928-1.796-0.45-5.018 2.176-4.734z m32.076 197.786l-12.07 16.46-19.478-6.092c-2.522-0.788-4.596 2.088-3.052 4.23l11.924 16.562-11.812 16.642c-1.53 2.154 0.564 5.016 3.08 4.21l19.438-6.222 12.178 16.378c1.576 2.12 4.946 1.012 4.956-1.628l0.09-20.41 19.34-6.522c2.504-0.846 2.492-4.39-0.018-5.218l-19.38-6.392-0.228-20.408c-0.032-2.636-3.406-3.722-4.968-1.59z m73.48-46.102l-20.29 2.204-8.656-18.482c-1.122-2.392-4.642-1.982-5.182 0.604l-4.174 19.976-20.252 2.52c-2.622 0.326-3.32 3.802-1.026 5.116l17.71 10.14-3.862 20.04c-0.5 2.596 2.59 4.332 4.548 2.558l15.118-13.71 17.864 9.864c2.312 1.278 4.922-1.126 3.838-3.536l-8.366-18.616 14.904-13.944c1.934-1.796 0.456-5.018-2.174-4.734z" fill="#FFE15A" p-id="6064"></path></svg>
\ No newline at end of file
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