10 changed files with 284 additions and 38 deletions
@ -0,0 +1,75 @@ |
|||
<template> |
|||
<div> |
|||
<q-input |
|||
v-show="!hideIfComputed" |
|||
:hide-bottom-space="true" |
|||
:hide-hint="true" |
|||
:outlined="true" |
|||
:dense="true" |
|||
v-bind="attrs" |
|||
type="password" |
|||
:rules="rulesComputed" |
|||
:readonly="readonlyIfComputed" |
|||
:disable="disableIfComputed" |
|||
> |
|||
<template #label> <span v-if="requiredIfComputed" style="color: red">*</span> {{ attrs.label }}</template> |
|||
</q-input> |
|||
</div> |
|||
</template> |
|||
|
|||
<script setup lang="ts"> |
|||
import { computed, defineProps, useAttrs } from 'vue'; |
|||
import { FormValidators } from '@/platform/components'; |
|||
|
|||
const attrs = useAttrs(); |
|||
const inRules = attrs.rules; |
|||
const props = defineProps({ |
|||
hideIf: { |
|||
type: Function, |
|||
default: () => { |
|||
return false; |
|||
}, |
|||
}, |
|||
requiredIf: { |
|||
type: Function, |
|||
default: () => { |
|||
return false; |
|||
}, |
|||
}, |
|||
readonlyIf: { |
|||
type: Function, |
|||
default: () => { |
|||
return false; |
|||
}, |
|||
}, |
|||
disableIf: { |
|||
type: Function, |
|||
default: () => { |
|||
return false; |
|||
}, |
|||
}, |
|||
}); |
|||
|
|||
const rulesComputed = computed(() => { |
|||
let rules = inRules || <any>[]; |
|||
if (!hideIfComputed.value && requiredIfComputed.value) { |
|||
rules.push(FormValidators.required()); |
|||
} else { |
|||
rules.splice(rules.length - 1, 1); |
|||
} |
|||
return rules; |
|||
}); |
|||
|
|||
const hideIfComputed = computed(() => { |
|||
return props.hideIf(); |
|||
}); |
|||
const requiredIfComputed = computed(() => { |
|||
return props.requiredIf(); |
|||
}); |
|||
const readonlyIfComputed = computed(() => { |
|||
return props.readonlyIf(); |
|||
}); |
|||
const disableIfComputed = computed(() => { |
|||
return props.disableIf(); |
|||
}); |
|||
</script> |
|||
@ -0,0 +1,133 @@ |
|||
<template> |
|||
<div> |
|||
<w-grid |
|||
:title="testGrid.title" |
|||
draggable |
|||
sort-no |
|||
tree |
|||
:row-key="testGrid.rowKey" |
|||
:data-url="testGrid.dataUrl" |
|||
:columns="testGrid.tableColumns" |
|||
:toolbar-actions="testGrid.toolbar" |
|||
:query-form-fields="testGrid.queryFormFields" |
|||
:query-form-cols-num="3" |
|||
:table-pagination="testGrid.pagination" |
|||
></w-grid> |
|||
</div> |
|||
</template> |
|||
|
|||
<script setup lang="ts"> |
|||
import { ref, onMounted, nextTick } from 'vue'; |
|||
import { useI18n } from 'vue-i18n'; |
|||
import { axios, Environment } from '@/platform'; |
|||
import EnableIcon from '@/platform/components/grid/EnableIcon.vue'; |
|||
import { IconEnum } from '@/platform/enums'; |
|||
|
|||
const { t } = useI18n(); |
|||
|
|||
const testGrid = { |
|||
title: '菜单列表', |
|||
rowKey: 'id', |
|||
dataUrl: Environment.apiContextPath('api/system/menu/allMenus'), |
|||
pagination: { |
|||
sortBy: 'lastModifyDate', |
|||
descending: true, |
|||
reqPageStart: 0, |
|||
rowsPerPage: 0, |
|||
}, |
|||
toolbar: [ |
|||
['query', 'separator', 'moreQuery'], |
|||
'reset', |
|||
'refresh', |
|||
'separator', |
|||
{ |
|||
name: 'custBtn', |
|||
extend: 'add', |
|||
icon: undefined, |
|||
label: '自定义按钮', |
|||
enableIf: (selected) => { |
|||
if (selected && selected.length > 0) { |
|||
return true; |
|||
} |
|||
return false; |
|||
}, |
|||
// beforeClick: (selected, context, gridRefs) => { |
|||
// console.info('先执行before'); |
|||
// context.aaa = '111'; |
|||
// }, |
|||
click: (selected, context, _click, gridRefs) => { |
|||
_click(); |
|||
}, |
|||
afterClick: (selected, context, gridRefs) => { |
|||
gridRefs.addEditFormRef.setFieldValue('userName', '李四'); |
|||
}, |
|||
}, |
|||
[ |
|||
{ |
|||
name: 'op', |
|||
icon: 'difference', |
|||
label: '操作', |
|||
}, |
|||
'add', |
|||
'edit', |
|||
'clone', |
|||
'remove', |
|||
'separator', |
|||
'view', |
|||
'export', |
|||
], |
|||
'separator', |
|||
], |
|||
queryFormFields: [ |
|||
{ label: '菜单名称', name: 'name', type: 'password' }, |
|||
{ label: '菜单类型', name: 'userName', type: 'select' }, |
|||
{ label: '是否可用', name: 'enable', type: 'select' }, |
|||
], |
|||
tableColumns: [ |
|||
{ |
|||
name: 'name', |
|||
label: '菜单名称', |
|||
// style: 'width:100%', |
|||
format: (val, row) => { |
|||
return t(val); |
|||
}, |
|||
}, |
|||
{ |
|||
name: 'icon', |
|||
label: '图标', |
|||
format: (val, row) => { |
|||
return { |
|||
componentsType: 'q-icon', |
|||
attrs: { |
|||
name: val, |
|||
size: 'sm', |
|||
}, |
|||
}; |
|||
}, |
|||
}, |
|||
{ name: 'type', label: '菜单类型' }, |
|||
{ name: 'order', label: '排序号' }, |
|||
{ |
|||
name: 'enable', |
|||
label: '是否可用', |
|||
align: 'center', |
|||
format: (val, row) => { |
|||
return { |
|||
componentsType: 'q-icon', |
|||
attrs: { |
|||
name: val ? IconEnum.是状态 : IconEnum.否状态, |
|||
color: val ? 'green' : 'red', |
|||
size: 'sm', |
|||
}, |
|||
}; |
|||
}, |
|||
}, |
|||
{ name: 'lastModifier', label: '最后修改人' }, |
|||
{ name: 'lastModifyDate', label: '最后修改时间' }, |
|||
], |
|||
}; |
|||
|
|||
onMounted(() => { |
|||
// testGridRef.value.replaceRowsFun([{ typeName: '股权投资信息', typeDesc: '股权投资信息', lastModifier: 'admin', lastModifyDate: '2023-12-26' }]); |
|||
}); |
|||
</script> |
|||
Loading…
Reference in new issue