Browse Source
1、树拖拽会出现清除孩子的bug 2、w-grid 分组，需增加 group-by-title 属性，用于生成分组标题的函数 3、w-info 增加labelWidth与valueWidth属性main
12 changed files with 225 additions and 132 deletions
@ -1,70 +1,76 @@ |
|||
<template> |
|||
<div class="h-full"> |
|||
<w-grid |
|||
ref="gridRef" |
|||
title="示例列表" |
|||
:data-url="Environment.apiContextPath('/api/system/application')" |
|||
db-click-operation="testAdd" |
|||
selected-mode="cell" |
|||
:cell-selected="true" |
|||
:toolbar-actions="[ |
|||
'add', |
|||
:title="$t('menu.developer.springboot.bean')" |
|||
:checkbox-selection="false" |
|||
:fetch-data-url="Environment.apiContextPath('/api/developer/springboot/beans')" |
|||
:pageable="false" |
|||
:toolbar-actions="['refresh', 'separator', 'view', 'separator', 'export']" |
|||
group-mode="alone" |
|||
group-by-field="scope" |
|||
:columns="[ |
|||
{ width: 500, name: 'name', label: $t('name') }, |
|||
{ width: 400, name: 'type', label: $t('className'), format: Formater.simpleClassName() }, |
|||
{ |
|||
extend: 'add', |
|||
name: 'testAdd', |
|||
click: (args) => { |
|||
const cell = args.grid.getSelectedCell(); |
|||
console.info('cell=========', args); |
|||
width: 100, |
|||
name: 'scope', |
|||
label: $t('scope'), |
|||
sortable: false, |
|||
format: (val) => { |
|||
if (val === 'singleton') { |
|||
return '测试'; |
|||
} else if (val === 'prototype') { |
|||
return '测试2'; |
|||
} |
|||
return val; |
|||
}, |
|||
}, |
|||
[ |
|||
'remove', |
|||
]" |
|||
:viewer="{ |
|||
panel: { |
|||
columnNum: 2, |
|||
labelWidth: 200, |
|||
valueWidth: '100%', |
|||
fields: [ |
|||
{ width: 100, name: 'name', label: $t('name') }, |
|||
{ width: 100, name: 'context', label: $t('context') }, |
|||
{ |
|||
extend: 'edit', |
|||
name: 'testEdit', |
|||
click: (args) => { |
|||
console.info('testEdit======', args); |
|||
width: 100, |
|||
name: 'scope', |
|||
label: $t('scope'), |
|||
}, |
|||
{ width: 100, name: 'type', label: $t('className'), format: Formater.none() }, |
|||
{ width: 100, name: 'resource', label: $t('resource') }, |
|||
{ |
|||
width: 100, |
|||
name: 'aliases', |
|||
label: $t('aliases'), |
|||
format: (aliases) => { |
|||
aliases = aliases || []; |
|||
let result = ''; |
|||
for (const aliase of aliases) { |
|||
result += aliase + '<br/>'; |
|||
} |
|||
return result; |
|||
}, |
|||
}, |
|||
], |
|||
'query', |
|||
]" |
|||
:query-form-cols-num="12" |
|||
:query-form-fields="[{ colSpan: 3, name: 'code', label: '编码', type: 'w-text' }]" |
|||
:columns="[ |
|||
{ name: 'code', label: '编码', type: 'w-text' }, |
|||
{ name: 'name', label: '名称', type: 'w-text' }, |
|||
{ |
|||
name: 'enable', |
|||
label: '状态', |
|||
format: Formater.enableTag(), |
|||
width: 100, |
|||
name: 'dependencies', |
|||
label: $t('dependencies'), |
|||
format: (dependencies) => { |
|||
dependencies = dependencies || []; |
|||
let result = ''; |
|||
for (const dependency of dependencies) { |
|||
result += dependency + '<br/>'; |
|||
} |
|||
return result; |
|||
}, |
|||
{ name: 'lastModifier', label: '最后修改人', align: 'center' }, |
|||
{ name: 'lastModifyDate', label: '最后修改日期', align: 'center' }, |
|||
]" |
|||
:editor="{ |
|||
dialog: { |
|||
width: '80%', |
|||
height: '80%', |
|||
}, |
|||
form: { |
|||
colsNum: 2, |
|||
fields: [ |
|||
{ name: 'code', label: '编码', type: 'w-text' }, |
|||
{ name: 'name', label: '名称', type: 'w-text' }, |
|||
], |
|||
}, |
|||
}" |
|||
@row-click="rowClick" |
|||
> |
|||
</w-grid> |
|||
</div> |
|||
></w-grid> |
|||
</template> |
|||
|
|||
<script setup lang="ts"> |
|||
import { ref } from 'vue'; |
|||
import { Environment, Formater } from '@/platform'; |
|||
|
|||
const gridRef = ref(); |
|||
const rowClick = () => {}; |
|||
import { Environment, Formater, $t } from '@/platform'; |
|||
</script> |
|||
|
|||
@ -1,69 +1,50 @@ |
|||
<template> |
|||
<div class="q-pa-md"> |
|||
<q-table v-model:selected="selected" title="Treats" row-key="name" selection="multiple" :rows="rows" :columns="columns"> |
|||
<template #body="scope"> |
|||
<q-tr ref="trRef" class="selected" :props="scope"> |
|||
<q-td class="text-center" style="padding: 0; width: 50px"> |
|||
<q-checkbox v-model="scope.row['selected']" flat @update:model-value="updateTicked($event, scope.row)" /> |
|||
</q-td> |
|||
<q-td v-for="col in scope.cols" :key="col.name" :props="scope"> |
|||
<GridFormat :value="col.value"></GridFormat> |
|||
</q-td> |
|||
</q-tr> |
|||
</template> |
|||
</q-table> |
|||
<q-table |
|||
v-model:selected="selected" |
|||
title="bean" |
|||
row-key="name" |
|||
selection="multiple" |
|||
:rows="rows" |
|||
:columns="columns" |
|||
:pagination="{ |
|||
rowsPerPage: 0, |
|||
}" |
|||
></q-table> |
|||
</div> |
|||
</template> |
|||
|
|||
<script setup lang="ts"> |
|||
import { ref } from 'vue'; |
|||
import { Tools } from '@/platform'; |
|||
import GridFormat from './GridForamt.vue'; |
|||
import { ref, onMounted } from 'vue'; |
|||
import { Tools, axios, Environment } from '@/platform'; |
|||
|
|||
const selected = ref([]); |
|||
|
|||
const updateTicked = (event, row) => { |
|||
row['selected'] = !row['selected']; |
|||
}; |
|||
|
|||
const columns = [ |
|||
{ |
|||
name: 'name', |
|||
required: true, |
|||
label: 'Dessert (100g serving)', |
|||
label: '名称', |
|||
field: 'field', |
|||
align: 'left', |
|||
field: (row) => row.name, |
|||
sortable: true, |
|||
}, |
|||
{ name: 'calories', align: 'center', label: 'Calories', field: 'calories', sortable: true }, |
|||
{ |
|||
name: 'fat', |
|||
label: 'Fat (g)', |
|||
field: 'fat', |
|||
sortable: true, |
|||
format: (val, row) => { |
|||
console.info('format.val====', val); |
|||
return val; |
|||
}, |
|||
name: 'type', |
|||
label: '类型', |
|||
field: 'type', |
|||
align: 'left', |
|||
}, |
|||
{ name: 'carbs', label: 'Carbs (g)', field: 'carbs' }, |
|||
{ name: 'protein', label: 'Protein (g)', field: 'protein' }, |
|||
{ name: 'sodium', label: 'Sodium (mg)', field: 'sodium' }, |
|||
{ name: 'calcium', label: 'Calcium (%)', field: 'calcium', sortable: true, sort: (a, b) => parseInt(a, 10) - parseInt(b, 10) }, |
|||
{ name: 'iron', label: 'Iron (%)', field: 'iron', sortable: true, sort: (a, b) => parseInt(a, 10) - parseInt(b, 10) }, |
|||
]; |
|||
|
|||
const rows = [ |
|||
{ |
|||
name: 'Frozen Yogurt', |
|||
calories: 159, |
|||
fat: 6.0, |
|||
carbs: 24, |
|||
protein: 4.0, |
|||
sodium: 87, |
|||
calcium: '14%', |
|||
iron: '1%', |
|||
selected: false, |
|||
name: 'scope', |
|||
label: '作用域', |
|||
field: 'scope', |
|||
align: 'left', |
|||
}, |
|||
]; |
|||
|
|||
const rows = ref([]); |
|||
|
|||
onMounted(async () => { |
|||
const data = await axios.get(Environment.apiContextPath('/api/developer/springboot/beans')); |
|||
rows.value = data.data; |
|||
}); |
|||
</script> |
|||
|
|||
Loading…
Reference in new issue