37 changed files with 2293 additions and 429 deletions
@ -1,10 +1,125 @@ |
|||||
<template> |
<template> |
||||
<div style="height: 100%"> |
<q-splitter :model-value="60" class="w-full" style="height: 100%"> |
||||
<w-color-input-palette v-model="colorRef"></w-color-input-palette> |
<template #before> |
||||
</div> |
<div class="pr-1" style="height: 100%"> |
||||
|
<w-grid |
||||
|
ref="applicationGridRef" |
||||
|
:title="$t('system.application.grid.title')" |
||||
|
:config-button="true" |
||||
|
selection="multiple" |
||||
|
:checkbox-selection="true" |
||||
|
:data-url="Environment.apiContextPath('/api/system/application')" |
||||
|
:sort-by="['order']" |
||||
|
:query-form-cols-num="3" |
||||
|
:query-form-fields="[ |
||||
|
{ name: 'code', label: $t('code'), type: 'text' }, |
||||
|
{ name: 'name', label: $t('name'), type: 'text' }, |
||||
|
{ name: 'enable', label: $t('isEnable'), type: 'select', options: Options.yesNo() }, |
||||
|
]" |
||||
|
:toolbar-configure="{ noIcon: false }" |
||||
|
:toolbar-actions="['query', 'refresh', 'separator', 'add', 'clone', 'edit', 'remove', 'separator', 'view', 'separator', 'export']" |
||||
|
:columns="[ |
||||
|
{ width: 60, name: 'order', label: $t('order') }, |
||||
|
{ width: 100, name: 'code', label: $t('code') }, |
||||
|
{ width: '100%', name: 'name', label: $t('name') }, |
||||
|
{ width: 80, name: 'enable', label: $t('status'), format: Formater.enableTag() }, |
||||
|
{ width: 120, name: 'lastModifier', label: $t('lastModifier') }, |
||||
|
{ width: 120, name: 'lastModifyDate', label: $t('lastModifyDate'), format: Formater.dateOnly() }, |
||||
|
]" |
||||
|
:editor="{ |
||||
|
dialog: { |
||||
|
width: '600px', |
||||
|
height: '300px', |
||||
|
}, |
||||
|
form: { |
||||
|
colsNum: 1, |
||||
|
fields: [ |
||||
|
{ name: 'code', label: $t('code'), type: 'text', required: true }, |
||||
|
{ name: 'name', label: $t('name'), type: 'text', required: true }, |
||||
|
{ name: 'description', label: $t('description'), type: 'textarea', rows: 1 }, |
||||
|
{ name: 'order', label: $t('order'), type: 'number' }, |
||||
|
{ name: 'enable', label: $t('enable'), type: 'checkbox', defaultValue: true }, |
||||
|
], |
||||
|
}, |
||||
|
}" |
||||
|
:viewer="{ |
||||
|
panel: { |
||||
|
columnNum: 1, |
||||
|
fields: [ |
||||
|
{ name: 'id', label: $t('id') }, |
||||
|
{ name: 'code', label: $t('code') }, |
||||
|
{ name: 'name', label: $t('name') }, |
||||
|
{ name: 'description', label: $t('description') }, |
||||
|
{ name: 'enable', label: $t('enable'), format: Formater.none() }, |
||||
|
{ name: 'order', label: $t('order') }, |
||||
|
{ name: 'dataComeFrom', label: $t('dataComeFrom') }, |
||||
|
{ name: 'creator', label: $t('creator') }, |
||||
|
{ name: 'createDate', label: $t('createDate') }, |
||||
|
{ name: 'lastModifier', label: $t('lastModifier') }, |
||||
|
{ name: 'lastModifyDate', label: $t('lastModifyDate'), format: Formater.none() }, |
||||
|
{ name: 'corporationCode', label: $t('corporationCode') }, |
||||
|
], |
||||
|
}, |
||||
|
}" |
||||
|
@row-click=" |
||||
|
(evt, row, index) => { |
||||
|
currentSelectedApplicationId = row.id; |
||||
|
menuTreeGridRef?.refresh(); |
||||
|
userGridRef?.refresh(); |
||||
|
} |
||||
|
" |
||||
|
@before-request-data=" |
||||
|
() => { |
||||
|
currentSelectedApplicationId = ''; |
||||
|
menuTreeGridRef?.refresh(); |
||||
|
userGridRef?.refresh(); |
||||
|
} |
||||
|
" |
||||
|
> |
||||
|
</w-grid> |
||||
|
</div> |
||||
|
</template> |
||||
|
<template #after> |
||||
|
<div class="pl-1" style="height: 100%"> |
||||
|
<q-tabs v-model="selectedTabRef" inline-label align="left" :breakpoint="0" no-caps> |
||||
|
<q-tab name="menu" icon="bi-menu-app" :label="$t('menu')" /> |
||||
|
</q-tabs> |
||||
|
|
||||
|
<q-tab-panels v-model="selectedTabRef" animated swipeable keep-alive style="height: calc(100% - 48px)"> |
||||
|
<q-tab-panel name="menu" class="px-0 pb-0" style="height: 100%; padding-left: 0px; padding-right: 0px; padding-bottom: 0px"> |
||||
|
<SelectMenuTreeGrid |
||||
|
ref="menuTreeGridRef" |
||||
|
:fetch-data-url="Environment.apiContextPath('/api/system/menu/listAllMenusWithSelectedStatusByApplication')" |
||||
|
foreign-key="applicationId" |
||||
|
:foreign-value="currentSelectedApplicationId" |
||||
|
@update="update" |
||||
|
></SelectMenuTreeGrid> |
||||
|
</q-tab-panel> |
||||
|
</q-tab-panels> |
||||
|
</div> |
||||
|
</template> |
||||
|
</q-splitter> |
||||
</template> |
</template> |
||||
<script setup lang="ts"> |
<script setup lang="ts"> |
||||
import { ref } from 'vue'; |
import { ref } from 'vue'; |
||||
|
import { Environment, axios, EnumTools, Options, Formater } from '@/platform'; |
||||
|
import SelectMenuTreeGrid from './shared/SelectMenuTreeGrid.vue'; |
||||
|
|
||||
|
const applicationGridRef = ref(); |
||||
|
const userGridRef = ref(); |
||||
|
const menuTreeGridRef = ref(); |
||||
|
|
||||
|
const selectedTabRef = ref('menu'); |
||||
|
const currentSelectedApplicationId = ref(''); |
||||
|
|
||||
const colorRef = ref('#EEEEEE'); |
const update = (ids, gridComponent) => { |
||||
|
axios |
||||
|
.post(Environment.apiContextPath('/api/system/application/updateMenus'), { |
||||
|
one: applicationGridRef.value.getSelectedRows()[0].id, |
||||
|
many: ids, |
||||
|
}) |
||||
|
.then(() => { |
||||
|
gridComponent.refresh(); |
||||
|
}); |
||||
|
}; |
||||
</script> |
</script> |
||||
|
@ -0,0 +1,102 @@ |
|||||
|
<template> |
||||
|
<w-dialog |
||||
|
ref="dialogRef" |
||||
|
:title="$t('system.shared.selectApplication.dialog.title')" |
||||
|
width="800px" |
||||
|
height="500px" |
||||
|
:can-maximize="false" |
||||
|
:buttons="[ |
||||
|
{ |
||||
|
label: $t('confirm'), |
||||
|
click: () => { |
||||
|
const ids = Tools.extractProperties(gridRef.getSelectedRows(), 'id'); |
||||
|
emit('afterSelected', ids, dialogRef); |
||||
|
}, |
||||
|
}, |
||||
|
]" |
||||
|
> |
||||
|
<div class="px-2" style="height: 100%"> |
||||
|
<w-grid |
||||
|
ref="gridRef" |
||||
|
:title="$t('system.shared.selectApplication.dialog.grid.title')" |
||||
|
selection="multiple" |
||||
|
:full-screen-button="false" |
||||
|
:toolbar-configure="{ noIcon: false }" |
||||
|
:toolbar-actions="['query', 'refresh']" |
||||
|
:query-form-fields="[ |
||||
|
{ name: 'code', label: $t('code'), type: 'text' }, |
||||
|
{ name: 'name', label: $t('name'), type: 'text' }, |
||||
|
{ |
||||
|
name: 'enable', |
||||
|
label: $t('enable'), |
||||
|
type: 'select', |
||||
|
options: Options.yesNo(), |
||||
|
queryOperator: 'equals', |
||||
|
}, |
||||
|
{ |
||||
|
name: 'dataComeFrom', |
||||
|
label: $t('dataComeFrom'), |
||||
|
type: 'select', |
||||
|
options: Options.enum(DataComeFromEnum), |
||||
|
queryOperator: 'equals', |
||||
|
}, |
||||
|
]" |
||||
|
:auto-fetch-data="false" |
||||
|
:fetch-data-url="fetchDataUrl + '?' + foreignKey + '=' + foreignValue" |
||||
|
:columns="[ |
||||
|
{ name: 'code', label: $t('code') }, |
||||
|
{ name: 'name', label: $t('name') }, |
||||
|
{ |
||||
|
name: 'status', |
||||
|
label: t('status'), |
||||
|
format: Formater.enableTag(), |
||||
|
}, |
||||
|
{ name: 'lastModifier', label: t('lastModifier') }, |
||||
|
{ name: 'lastModifyDate', label: t('lastModifyDate') }, |
||||
|
]" |
||||
|
></w-grid> |
||||
|
</div> |
||||
|
</w-dialog> |
||||
|
</template> |
||||
|
<script setup lang="ts"> |
||||
|
import { ref, nextTick } from 'vue'; |
||||
|
import { useI18n } from 'vue-i18n'; |
||||
|
import { Environment, Tools, EnumTools, Options, Formater } from 'platform-core'; |
||||
|
|
||||
|
const props = defineProps({ |
||||
|
opener: { type: Object, default: undefined }, |
||||
|
fetchDataUrl: { type: String, default: '' }, |
||||
|
foreignKey: { type: String, default: '' }, |
||||
|
foreignValue: { type: String, default: '' }, |
||||
|
}); |
||||
|
|
||||
|
const emit = defineEmits<{ |
||||
|
(e: 'afterSelected', ids: string[], dialogComponent: any): void; |
||||
|
}>(); |
||||
|
|
||||
|
const { t } = useI18n(); |
||||
|
|
||||
|
const dialogRef = ref(); |
||||
|
const gridRef = ref(); |
||||
|
const foreignKeyRef = ref(); |
||||
|
|
||||
|
const open = (foreignKey: string) => { |
||||
|
foreignKeyRef.value = foreignKey; |
||||
|
dialogRef.value.show(); |
||||
|
|
||||
|
nextTick(() => { |
||||
|
gridRef.value.refresh(); |
||||
|
}); |
||||
|
}; |
||||
|
|
||||
|
const close = () => { |
||||
|
dialogRef.value.hide(); |
||||
|
}; |
||||
|
|
||||
|
defineExpose({ |
||||
|
open, |
||||
|
close, |
||||
|
}); |
||||
|
|
||||
|
const DataComeFromEnum = await EnumTools.fetch('io.sc.platform.orm.api.enums.DataComeFrom'); |
||||
|
</script> |
@ -0,0 +1,141 @@ |
|||||
|
<template> |
||||
|
<w-grid |
||||
|
ref="gridRef" |
||||
|
:title="$t('system.shared.selectApplication.grid.title')" |
||||
|
:config-button="false" |
||||
|
selection="multiple" |
||||
|
:checkbox-selection="true" |
||||
|
:fetch-data-url="fetchDataUrl + '?' + foreignKey + '=' + foreignValue" |
||||
|
:auto-fetch-data="false" |
||||
|
:toolbar-configure="{ noIcon: true }" |
||||
|
:toolbar-actions="[ |
||||
|
'refresh', |
||||
|
'separator', |
||||
|
{ |
||||
|
name: 'selectIn', |
||||
|
label: $t('system.shared.selectApplication.grid.toolbar.selectIn'), |
||||
|
enableIf: () => { |
||||
|
return foreignValue ? true : false; |
||||
|
}, |
||||
|
click: () => { |
||||
|
dialogRef.open(foreignValue); |
||||
|
}, |
||||
|
}, |
||||
|
{ |
||||
|
name: 'selectOut', |
||||
|
label: $t('system.shared.selectApplication.grid.toolbar.selectOut'), |
||||
|
enableIf: () => { |
||||
|
return foreignValue && gridRef?.getSelectedRows()?.length > 0; |
||||
|
}, |
||||
|
click: (arg) => { |
||||
|
const ids = Tools.extractProperties(arg.selecteds, 'id'); |
||||
|
DialogManager.confirm($t('system.shared.selectApplication.grid.toolbar.selectOut.tip'), () => { |
||||
|
emit('selectOut', ids, gridRef); |
||||
|
}); |
||||
|
}, |
||||
|
}, |
||||
|
'separator', |
||||
|
{ |
||||
|
name: 'selectAllIn', |
||||
|
label: $t('system.shared.selectApplication.grid.toolbar.selectAllIn'), |
||||
|
enableIf: () => { |
||||
|
return foreignValue ? true : false; |
||||
|
}, |
||||
|
click: () => { |
||||
|
DialogManager.confirm($t('system.shared.selectApplication.grid.toolbar.selectAllIn.tip'), () => { |
||||
|
emit('selectAllIn', gridRef); |
||||
|
}); |
||||
|
}, |
||||
|
}, |
||||
|
{ |
||||
|
name: 'selectAllOut', |
||||
|
label: $t('system.shared.selectApplication.grid.toolbar.selectAllOut'), |
||||
|
enableIf: () => { |
||||
|
return foreignValue && gridRef?.getRows()?.length > 0; |
||||
|
}, |
||||
|
click: () => { |
||||
|
DialogManager.confirm($t('system.shared.selectApplication.grid.toolbar.selectAllOut.tip'), () => { |
||||
|
emit('selectAllOut', gridRef); |
||||
|
}); |
||||
|
}, |
||||
|
}, |
||||
|
'separator', |
||||
|
'view', |
||||
|
]" |
||||
|
:columns="[ |
||||
|
{ width: 150, name: 'code', label: $t('code') }, |
||||
|
{ width: '100%', name: 'name', label: $t('name') }, |
||||
|
{ |
||||
|
width: 80, |
||||
|
name: 'enable', |
||||
|
label: $t('status'), |
||||
|
format: Formater.enableTag(), |
||||
|
}, |
||||
|
]" |
||||
|
:viewer="{ |
||||
|
panel: { |
||||
|
columnNum: 1, |
||||
|
fields: [ |
||||
|
{ name: 'id', label: $t('id') }, |
||||
|
{ name: 'code', label: $t('code') }, |
||||
|
{ name: 'name', label: $t('name') }, |
||||
|
{ name: 'description', label: $t('description') }, |
||||
|
{ name: 'enable', label: $t('enable') }, |
||||
|
{ name: 'dataComeFrom', label: $t('dataComeFrom') }, |
||||
|
{ name: 'creator', label: $t('creator') }, |
||||
|
{ name: 'createDate', label: $t('createDate') }, |
||||
|
{ name: 'lastModifier', label: $t('lastModifier') }, |
||||
|
{ name: 'lastModifyDate', label: $t('lastModifyDate') }, |
||||
|
{ name: 'corporationCode', label: $t('corporationCode') }, |
||||
|
], |
||||
|
}, |
||||
|
}" |
||||
|
></w-grid> |
||||
|
<SelectApplicationDialog |
||||
|
ref="dialogRef" |
||||
|
:opener="gridRef" |
||||
|
:fetch-data-url="fetchOtherDataUrl" |
||||
|
:foreign-key="foreignKey" |
||||
|
:foreign-value="foreignValue" |
||||
|
@after-selected=" |
||||
|
(ids: string[]) => { |
||||
|
emit('selectIn', ids, gridRef, dialogRef); |
||||
|
} |
||||
|
" |
||||
|
></SelectApplicationDialog> |
||||
|
</template> |
||||
|
<script setup lang="ts"> |
||||
|
import { ref, onUpdated } from 'vue'; |
||||
|
|
||||
|
import { EnumTools, DialogManager, Formater, Tools } from 'platform-core'; |
||||
|
import SelectApplicationDialog from './SelectApplicationDialog.vue'; |
||||
|
|
||||
|
const props = defineProps({ |
||||
|
fetchDataUrl: { type: String, default: '' }, |
||||
|
fetchOtherDataUrl: { type: String, default: '' }, |
||||
|
foreignKey: { type: String, default: '' }, |
||||
|
foreignValue: { type: String, default: '' }, |
||||
|
}); |
||||
|
|
||||
|
const emit = defineEmits<{ |
||||
|
(e: 'selectIn', ids: string[], gridComponent: any, dialogComponent: any): void; |
||||
|
(e: 'selectOut', ids: string[], gridComponent: any): void; |
||||
|
(e: 'selectAllIn', gridComponent: any): void; |
||||
|
(e: 'selectAllOut', gridComponent: any): void; |
||||
|
}>(); |
||||
|
|
||||
|
const gridRef = ref(); |
||||
|
const dialogRef = ref(); |
||||
|
|
||||
|
const refresh = () => { |
||||
|
gridRef.value.refresh(); |
||||
|
}; |
||||
|
|
||||
|
onUpdated(() => { |
||||
|
gridRef.value.refresh(); |
||||
|
}); |
||||
|
|
||||
|
defineExpose({ |
||||
|
refresh, |
||||
|
}); |
||||
|
</script> |
@ -0,0 +1,123 @@ |
|||||
|
<template> |
||||
|
<w-grid |
||||
|
ref="treeGridRef" |
||||
|
:title="$t('system.shared.selectMenu.grid.title')" |
||||
|
hide-bottom |
||||
|
:config-button="false" |
||||
|
:tree="true" |
||||
|
selection="multiple" |
||||
|
:checkbox-selection="true" |
||||
|
tree-tick-strategy="strict" |
||||
|
:tree-icon=" |
||||
|
(row) => { |
||||
|
if (row.type === 'SEPARATOR') { |
||||
|
return { name: 'bi-dash-lg' }; |
||||
|
} else if (row.type === 'ROUTE_ACTION') { |
||||
|
return { name: 'sym_o_crop_16_9' }; |
||||
|
} else { |
||||
|
return { name: row.icon }; |
||||
|
} |
||||
|
} |
||||
|
" |
||||
|
:fetch-data-url="fetchDataUrl + '?' + foreignKey + '=' + foreignValue" |
||||
|
:pageable="false" |
||||
|
:toolbar-configure="{ noIcon: true }" |
||||
|
:toolbar-actions="[ |
||||
|
'refresh', |
||||
|
'separator', |
||||
|
{ |
||||
|
extend: 'expand', |
||||
|
enableIf: () => { |
||||
|
return foreignValue && treeGridRef?.getRows()?.length > 0; |
||||
|
}, |
||||
|
}, |
||||
|
{ |
||||
|
name: 'save', |
||||
|
label: $t('save'), |
||||
|
enableIf: () => { |
||||
|
return foreignValue && treeGridRef?.getRows()?.length > 0; |
||||
|
}, |
||||
|
click: (arg) => { |
||||
|
DialogManager.confirm($t('system.shared.selectMenu.grid.toolbar.save.tip'), () => { |
||||
|
const ids = Tools.extractProperties(arg.tickeds, 'id'); |
||||
|
emit('update', ids, treeGridRef); |
||||
|
}); |
||||
|
}, |
||||
|
}, |
||||
|
'separator', |
||||
|
'view', |
||||
|
]" |
||||
|
:columns="[ |
||||
|
{ |
||||
|
width: '100%', |
||||
|
name: 'titleI18nKey', |
||||
|
label: $t('name'), |
||||
|
sortable: false, |
||||
|
format: (value, row) => { |
||||
|
if (row.type === 'SEPARATOR') { |
||||
|
return `<hr style='width:100px'/>`; |
||||
|
} else if (row.type === 'ROUTE_ACTION') { |
||||
|
return $t(row.i18nKey); |
||||
|
} else { |
||||
|
return $t(value); |
||||
|
} |
||||
|
}, |
||||
|
}, |
||||
|
{ width: 100, name: 'enable', label: $t('status'), format: Formater.enableTag(), sortable: false }, |
||||
|
]" |
||||
|
:viewer="{ |
||||
|
panel: { |
||||
|
columnNum: 1, |
||||
|
fields: [ |
||||
|
{ name: 'id', label: $t('id') }, |
||||
|
{ name: 'type', label: $t('type') }, |
||||
|
{ name: 'name', label: $t('name') }, |
||||
|
{ name: 'titleI18nKey', label: $t('titleI18nKey') }, |
||||
|
{ name: 'icon', label: $t('icon') }, |
||||
|
{ name: 'enable', label: $t('enable') }, |
||||
|
{ name: 'order', label: $t('order') }, |
||||
|
{ name: 'javaScript', label: $t('javaScript') }, |
||||
|
{ name: 'url', label: $t('url') }, |
||||
|
{ name: 'urlOpenType', label: $t('urlOpenType') }, |
||||
|
{ name: 'routeName', label: $t('routeName') }, |
||||
|
{ name: 'routeQuery', label: $t('routeQuery') }, |
||||
|
|
||||
|
{ name: 'dataComeFrom', label: $t('dataComeFrom') }, |
||||
|
{ name: 'creator', label: $t('creator') }, |
||||
|
{ name: 'createDate', label: $t('createDate') }, |
||||
|
{ name: 'lastModifier', label: $t('lastModifier') }, |
||||
|
{ name: 'lastModifyDate', label: $t('lastModifyDate') }, |
||||
|
{ name: 'corporationCode', label: $t('corporationCode') }, |
||||
|
], |
||||
|
}, |
||||
|
}" |
||||
|
></w-grid> |
||||
|
</template> |
||||
|
<script setup lang="ts"> |
||||
|
import { ref, onUpdated } from 'vue'; |
||||
|
import { DialogManager, Formater, Tools } from '@/platform'; |
||||
|
|
||||
|
const props = defineProps({ |
||||
|
fetchDataUrl: { type: String, default: '' }, |
||||
|
foreignKey: { type: String, default: '' }, |
||||
|
foreignValue: { type: String, default: '' }, |
||||
|
}); |
||||
|
|
||||
|
const emit = defineEmits<{ |
||||
|
(e: 'update', ids: string[], gridComponent: any): void; |
||||
|
}>(); |
||||
|
|
||||
|
const treeGridRef = ref(); |
||||
|
|
||||
|
const refresh = () => { |
||||
|
treeGridRef.value.refresh(); |
||||
|
}; |
||||
|
|
||||
|
onUpdated(() => { |
||||
|
treeGridRef.value.refresh(); |
||||
|
}); |
||||
|
|
||||
|
defineExpose({ |
||||
|
refresh, |
||||
|
}); |
||||
|
</script> |
@ -0,0 +1,97 @@ |
|||||
|
<template> |
||||
|
<w-grid |
||||
|
ref="treeGridRef" |
||||
|
:title="$t('system.shared.selectOrg.grid.title')" |
||||
|
hide-bottom |
||||
|
:config-button="false" |
||||
|
:tree="true" |
||||
|
selection="multiple" |
||||
|
:checkbox-selection="true" |
||||
|
tree-tick-strategy="strict" |
||||
|
ticked-field="selected" |
||||
|
:tree-icon=" |
||||
|
(row) => { |
||||
|
return { name: 'folder', color: 'amber' }; |
||||
|
} |
||||
|
" |
||||
|
:fetch-data-url="fetchDataUrl + '?' + foreignKey + '=' + foreignValue" |
||||
|
:pageable="false" |
||||
|
:toolbar-configure="{ noIcon: true }" |
||||
|
:toolbar-actions="[ |
||||
|
'refresh', |
||||
|
'separator', |
||||
|
{ |
||||
|
extend: 'expand', |
||||
|
enableIf: () => { |
||||
|
return foreignValue && treeGridRef?.getRows()?.length > 0; |
||||
|
}, |
||||
|
}, |
||||
|
{ |
||||
|
name: 'save', |
||||
|
label: $t('save'), |
||||
|
enableIf: () => { |
||||
|
return foreignValue && treeGridRef?.getRows()?.length > 0; |
||||
|
}, |
||||
|
click: () => { |
||||
|
DialogManager.confirm($t('system.shared.selectOrg.grid.toolbar.save.tip'), () => { |
||||
|
const ids = Tools.extractProperties(treeGridRef?.getTickedRows(), 'id'); |
||||
|
emit('update', ids, treeGridRef); |
||||
|
}); |
||||
|
}, |
||||
|
}, |
||||
|
'separator', |
||||
|
'view', |
||||
|
]" |
||||
|
:columns="[ |
||||
|
{ width: '100%', name: 'name', label: $t('name') }, |
||||
|
{ width: 100, name: 'code', label: $t('code') }, |
||||
|
{ width: 80, name: 'enable', label: $t('status'), format: Formater.enableTag(), sortable: false }, |
||||
|
]" |
||||
|
:viewer="{ |
||||
|
panel: { |
||||
|
columnNum: 1, |
||||
|
fields: [ |
||||
|
{ name: 'id', label: $t('id') }, |
||||
|
{ name: 'code', label: $t('code') }, |
||||
|
{ name: 'name', label: $t('name') }, |
||||
|
{ name: 'description', label: $t('description') }, |
||||
|
{ name: 'enable', label: $t('enable') }, |
||||
|
{ name: 'dataComeFrom', label: $t('dataComeFrom') }, |
||||
|
{ name: 'creator', label: $t('creator') }, |
||||
|
{ name: 'createDate', label: $t('createDate') }, |
||||
|
{ name: 'lastModifier', label: $t('lastModifier') }, |
||||
|
{ name: 'lastModifyDate', label: $t('lastModifyDate') }, |
||||
|
{ name: 'corporationCode', label: $t('corporationCode') }, |
||||
|
], |
||||
|
}, |
||||
|
}" |
||||
|
></w-grid> |
||||
|
</template> |
||||
|
<script setup lang="ts"> |
||||
|
import { ref, onUpdated } from 'vue'; |
||||
|
import { Environment, DialogManager, Formater, Tools } from 'platform-core'; |
||||
|
|
||||
|
const props = defineProps({ |
||||
|
fetchDataUrl: { type: String, default: '' }, |
||||
|
foreignKey: { type: String, default: '' }, |
||||
|
foreignValue: { type: String, default: '' }, |
||||
|
}); |
||||
|
|
||||
|
const emit = defineEmits<{ |
||||
|
(e: 'update', ids: string[], gridComponent: any): void; |
||||
|
}>(); |
||||
|
|
||||
|
const treeGridRef = ref(); |
||||
|
|
||||
|
const refresh = () => { |
||||
|
treeGridRef.value.refresh(); |
||||
|
}; |
||||
|
|
||||
|
onUpdated(() => { |
||||
|
treeGridRef.value.refresh(); |
||||
|
}); |
||||
|
|
||||
|
defineExpose({ |
||||
|
refresh, |
||||
|
}); |
||||
|
</script> |
@ -0,0 +1,102 @@ |
|||||
|
<template> |
||||
|
<w-dialog |
||||
|
ref="dialogRef" |
||||
|
:title="$t('system.shared.selectRole.dialog.title')" |
||||
|
width="800px" |
||||
|
height="500px" |
||||
|
:can-maximize="false" |
||||
|
:buttons="[ |
||||
|
{ |
||||
|
label: $t('confirm'), |
||||
|
click: () => { |
||||
|
const ids = Tools.extractProperties(gridRef.getSelectedRows(), 'id'); |
||||
|
emit('afterSelected', ids, dialogRef); |
||||
|
}, |
||||
|
}, |
||||
|
]" |
||||
|
> |
||||
|
<div class="px-2" style="height: 100%"> |
||||
|
<w-grid |
||||
|
ref="gridRef" |
||||
|
:title="$t('system.shared.selectRole.dialog.grid.title')" |
||||
|
selection="multiple" |
||||
|
:full-screen-button="false" |
||||
|
:toolbar-configure="{ noIcon: false }" |
||||
|
:toolbar-actions="['query', 'refresh']" |
||||
|
:query-form-fields="[ |
||||
|
{ name: 'code', label: $t('code'), type: 'text' }, |
||||
|
{ name: 'name', label: $t('name'), type: 'text' }, |
||||
|
{ |
||||
|
name: 'enable', |
||||
|
label: $t('enable'), |
||||
|
type: 'select', |
||||
|
options: Options.yesNo(), |
||||
|
queryOperator: 'equals', |
||||
|
}, |
||||
|
{ |
||||
|
name: 'dataComeFrom', |
||||
|
label: $t('dataComeFrom'), |
||||
|
type: 'select', |
||||
|
options: Options.enum(DataComeFromEnum), |
||||
|
queryOperator: 'equals', |
||||
|
}, |
||||
|
]" |
||||
|
:auto-fetch-data="false" |
||||
|
:fetch-data-url="fetchDataUrl + '?' + foreignKey + '=' + foreignValue" |
||||
|
:columns="[ |
||||
|
{ name: 'code', label: $t('code') }, |
||||
|
{ name: 'name', label: $t('name') }, |
||||
|
{ |
||||
|
name: 'status', |
||||
|
label: t('status'), |
||||
|
format: Formater.enableTag(), |
||||
|
}, |
||||
|
{ name: 'lastModifier', label: t('lastModifier') }, |
||||
|
{ name: 'lastModifyDate', label: t('lastModifyDate') }, |
||||
|
]" |
||||
|
></w-grid> |
||||
|
</div> |
||||
|
</w-dialog> |
||||
|
</template> |
||||
|
<script setup lang="ts"> |
||||
|
import { ref, nextTick } from 'vue'; |
||||
|
import { useI18n } from 'vue-i18n'; |
||||
|
import { Environment, Tools, EnumTools, Options, Formater } from 'platform-core'; |
||||
|
|
||||
|
const props = defineProps({ |
||||
|
opener: { type: Object, default: undefined }, |
||||
|
fetchDataUrl: { type: String, default: '' }, |
||||
|
foreignKey: { type: String, default: '' }, |
||||
|
foreignValue: { type: String, default: '' }, |
||||
|
}); |
||||
|
|
||||
|
const emit = defineEmits<{ |
||||
|
(e: 'afterSelected', ids: string[], dialogComponent: any): void; |
||||
|
}>(); |
||||
|
|
||||
|
const { t } = useI18n(); |
||||
|
|
||||
|
const dialogRef = ref(); |
||||
|
const gridRef = ref(); |
||||
|
const foreignKeyRef = ref(); |
||||
|
|
||||
|
const open = (foreignKey: string) => { |
||||
|
foreignKeyRef.value = foreignKey; |
||||
|
dialogRef.value.show(); |
||||
|
|
||||
|
nextTick(() => { |
||||
|
gridRef.value.refresh(); |
||||
|
}); |
||||
|
}; |
||||
|
|
||||
|
const close = () => { |
||||
|
dialogRef.value.hide(); |
||||
|
}; |
||||
|
|
||||
|
defineExpose({ |
||||
|
open, |
||||
|
close, |
||||
|
}); |
||||
|
|
||||
|
const DataComeFromEnum = await EnumTools.fetch('io.sc.platform.orm.api.enums.DataComeFrom'); |
||||
|
</script> |
@ -0,0 +1,141 @@ |
|||||
|
<template> |
||||
|
<w-grid |
||||
|
ref="gridRef" |
||||
|
:title="$t('system.shared.selectRole.grid.title')" |
||||
|
:config-button="false" |
||||
|
selection="multiple" |
||||
|
:checkbox-selection="true" |
||||
|
:fetch-data-url="fetchDataUrl + '?' + foreignKey + '=' + foreignValue" |
||||
|
:auto-fetch-data="false" |
||||
|
:toolbar-configure="{ noIcon: true }" |
||||
|
:toolbar-actions="[ |
||||
|
'refresh', |
||||
|
'separator', |
||||
|
{ |
||||
|
name: 'selectIn', |
||||
|
label: $t('system.shared.selectRole.grid.toolbar.selectIn'), |
||||
|
enableIf: () => { |
||||
|
return foreignValue ? true : false; |
||||
|
}, |
||||
|
click: () => { |
||||
|
dialogRef.open(foreignValue); |
||||
|
}, |
||||
|
}, |
||||
|
{ |
||||
|
name: 'selectOut', |
||||
|
label: $t('system.shared.selectRole.grid.toolbar.selectOut'), |
||||
|
enableIf: () => { |
||||
|
return foreignValue && gridRef?.getSelectedRows()?.length > 0; |
||||
|
}, |
||||
|
click: (arg) => { |
||||
|
const ids = Tools.extractProperties(arg.selecteds, 'id'); |
||||
|
DialogManager.confirm($t('system.shared.selectRole.grid.toolbar.selectOut.tip'), () => { |
||||
|
emit('selectOut', ids, gridRef); |
||||
|
}); |
||||
|
}, |
||||
|
}, |
||||
|
'separator', |
||||
|
{ |
||||
|
name: 'selectAllIn', |
||||
|
label: $t('system.shared.selectRole.grid.toolbar.selectAllIn'), |
||||
|
enableIf: () => { |
||||
|
return foreignValue ? true : false; |
||||
|
}, |
||||
|
click: () => { |
||||
|
DialogManager.confirm($t('system.shared.selectRole.grid.toolbar.selectAllIn.tip'), () => { |
||||
|
emit('selectAllIn', gridRef); |
||||
|
}); |
||||
|
}, |
||||
|
}, |
||||
|
{ |
||||
|
name: 'selectAllOut', |
||||
|
label: $t('system.shared.selectRole.grid.toolbar.selectAllOut'), |
||||
|
enableIf: () => { |
||||
|
return foreignValue && gridRef?.getRows()?.length > 0; |
||||
|
}, |
||||
|
click: () => { |
||||
|
DialogManager.confirm($t('system.shared.selectRole.grid.toolbar.selectAllOut.tip'), () => { |
||||
|
emit('selectAllOut', gridRef); |
||||
|
}); |
||||
|
}, |
||||
|
}, |
||||
|
'separator', |
||||
|
'view', |
||||
|
]" |
||||
|
:columns="[ |
||||
|
{ width: 150, name: 'code', label: $t('code') }, |
||||
|
{ width: '100%', name: 'name', label: $t('name') }, |
||||
|
{ |
||||
|
width: 80, |
||||
|
name: 'enable', |
||||
|
label: $t('status'), |
||||
|
format: Formater.enableTag(), |
||||
|
}, |
||||
|
]" |
||||
|
:viewer="{ |
||||
|
panel: { |
||||
|
columnNum: 1, |
||||
|
fields: [ |
||||
|
{ name: 'id', label: $t('id') }, |
||||
|
{ name: 'code', label: $t('code') }, |
||||
|
{ name: 'name', label: $t('name') }, |
||||
|
{ name: 'description', label: $t('description') }, |
||||
|
{ name: 'enable', label: $t('enable') }, |
||||
|
{ name: 'dataComeFrom', label: $t('dataComeFrom') }, |
||||
|
{ name: 'creator', label: $t('creator') }, |
||||
|
{ name: 'createDate', label: $t('createDate') }, |
||||
|
{ name: 'lastModifier', label: $t('lastModifier') }, |
||||
|
{ name: 'lastModifyDate', label: $t('lastModifyDate') }, |
||||
|
{ name: 'corporationCode', label: $t('corporationCode') }, |
||||
|
], |
||||
|
}, |
||||
|
}" |
||||
|
></w-grid> |
||||
|
<SelectRoleDialog |
||||
|
ref="dialogRef" |
||||
|
:opener="gridRef" |
||||
|
:fetch-data-url="fetchOtherDataUrl" |
||||
|
:foreign-key="foreignKey" |
||||
|
:foreign-value="foreignValue" |
||||
|
@after-selected=" |
||||
|
(ids: string[]) => { |
||||
|
emit('selectIn', ids, gridRef, dialogRef); |
||||
|
} |
||||
|
" |
||||
|
></SelectRoleDialog> |
||||
|
</template> |
||||
|
<script setup lang="ts"> |
||||
|
import { ref, onUpdated } from 'vue'; |
||||
|
|
||||
|
import { EnumTools, DialogManager, Formater, Tools } from 'platform-core'; |
||||
|
import SelectRoleDialog from './SelectRoleDialog.vue'; |
||||
|
|
||||
|
const props = defineProps({ |
||||
|
fetchDataUrl: { type: String, default: '' }, |
||||
|
fetchOtherDataUrl: { type: String, default: '' }, |
||||
|
foreignKey: { type: String, default: '' }, |
||||
|
foreignValue: { type: String, default: '' }, |
||||
|
}); |
||||
|
|
||||
|
const emit = defineEmits<{ |
||||
|
(e: 'selectIn', ids: string[], gridComponent: any, dialogComponent: any): void; |
||||
|
(e: 'selectOut', ids: string[], gridComponent: any): void; |
||||
|
(e: 'selectAllIn', gridComponent: any): void; |
||||
|
(e: 'selectAllOut', gridComponent: any): void; |
||||
|
}>(); |
||||
|
|
||||
|
const gridRef = ref(); |
||||
|
const dialogRef = ref(); |
||||
|
|
||||
|
const refresh = () => { |
||||
|
gridRef.value.refresh(); |
||||
|
}; |
||||
|
|
||||
|
onUpdated(() => { |
||||
|
gridRef.value.refresh(); |
||||
|
}); |
||||
|
|
||||
|
defineExpose({ |
||||
|
refresh, |
||||
|
}); |
||||
|
</script> |
@ -0,0 +1,106 @@ |
|||||
|
<template> |
||||
|
<w-dialog |
||||
|
ref="dialogRef" |
||||
|
:title="$t('system.shared.selectUser.dialog.title')" |
||||
|
width="800px" |
||||
|
height="500px" |
||||
|
:can-maximize="false" |
||||
|
:buttons="[ |
||||
|
{ |
||||
|
label: $t('confirm'), |
||||
|
click: () => { |
||||
|
const ids = Tools.extractProperties(gridRef.getSelectedRows(), 'id'); |
||||
|
emit('afterSelected', ids, dialogRef); |
||||
|
}, |
||||
|
}, |
||||
|
]" |
||||
|
> |
||||
|
<div class="px-2" style="height: 100%"> |
||||
|
<w-grid |
||||
|
ref="gridRef" |
||||
|
:title="$t('system.shared.selectUser.dialog.grid.title')" |
||||
|
selection="multiple" |
||||
|
:full-screen-button="false" |
||||
|
:toolbar-configure="{ noIcon: false }" |
||||
|
:toolbar-actions="['query', 'refresh']" |
||||
|
:query-form-fields="[ |
||||
|
{ name: 'loginName', label: $t('loginName'), type: 'text' }, |
||||
|
{ name: 'userName', label: $t('userName'), type: 'text' }, |
||||
|
{ |
||||
|
name: 'enable', |
||||
|
label: $t('enable'), |
||||
|
type: 'select', |
||||
|
options: Options.yesNo(), |
||||
|
queryOperator: 'equals', |
||||
|
}, |
||||
|
{ |
||||
|
name: 'dataComeFrom', |
||||
|
label: $t('dataComeFrom'), |
||||
|
type: 'select', |
||||
|
options: Options.enum(DataComeFromEnum), |
||||
|
queryOperator: 'equals', |
||||
|
}, |
||||
|
]" |
||||
|
:auto-fetch-data="false" |
||||
|
:fetch-data-url="fetchDataUrl + '?' + foreignKey + '=' + foreignValue" |
||||
|
:columns="[ |
||||
|
{ width: 100, name: 'loginName', label: $t('loginName') }, |
||||
|
{ width: 100, name: 'userName', label: $t('userName') }, |
||||
|
{ |
||||
|
name: 'status', |
||||
|
label: $t('status'), |
||||
|
format: (value, row) => { |
||||
|
return { |
||||
|
componentType: UserStatusTag, |
||||
|
attrs: row, |
||||
|
}; |
||||
|
}, |
||||
|
}, |
||||
|
]" |
||||
|
></w-grid> |
||||
|
</div> |
||||
|
</w-dialog> |
||||
|
</template> |
||||
|
<script setup lang="ts"> |
||||
|
import { ref, nextTick } from 'vue'; |
||||
|
import { useI18n } from 'vue-i18n'; |
||||
|
import { Environment, Tools, EnumTools, Options, Formater } from 'platform-core'; |
||||
|
import UserStatusTag from './UserStatusTag.vue'; |
||||
|
|
||||
|
const props = defineProps({ |
||||
|
opener: { type: Object, default: undefined }, |
||||
|
fetchDataUrl: { type: String, default: '' }, |
||||
|
foreignKey: { type: String, default: '' }, |
||||
|
foreignValue: { type: String, default: '' }, |
||||
|
}); |
||||
|
|
||||
|
const emit = defineEmits<{ |
||||
|
(e: 'afterSelected', ids: string[], dialogComponent: any): void; |
||||
|
}>(); |
||||
|
|
||||
|
const { t } = useI18n(); |
||||
|
|
||||
|
const dialogRef = ref(); |
||||
|
const gridRef = ref(); |
||||
|
const foreignKeyRef = ref(); |
||||
|
|
||||
|
const open = (foreignKey: string) => { |
||||
|
foreignKeyRef.value = foreignKey; |
||||
|
dialogRef.value.show(); |
||||
|
|
||||
|
nextTick(() => { |
||||
|
gridRef.value.refresh(); |
||||
|
}); |
||||
|
}; |
||||
|
|
||||
|
const close = () => { |
||||
|
dialogRef.value.hide(); |
||||
|
}; |
||||
|
|
||||
|
defineExpose({ |
||||
|
open, |
||||
|
close, |
||||
|
}); |
||||
|
|
||||
|
const DataComeFromEnum = await EnumTools.fetch('io.sc.platform.orm.api.enums.DataComeFrom'); |
||||
|
</script> |
@ -0,0 +1,161 @@ |
|||||
|
<template> |
||||
|
<w-grid |
||||
|
ref="gridRef" |
||||
|
:title="$t('system.shared.selectUser.grid.title')" |
||||
|
:config-button="false" |
||||
|
selection="multiple" |
||||
|
:checkbox-selection="true" |
||||
|
:fetch-data-url="fetchDataUrl + '?' + foreignKey + '=' + foreignValue" |
||||
|
:auto-fetch-data="false" |
||||
|
:toolbar-configure="{ noIcon: true }" |
||||
|
:toolbar-actions="[ |
||||
|
'refresh', |
||||
|
'separator', |
||||
|
{ |
||||
|
name: 'selectIn', |
||||
|
label: $t('system.shared.selectUser.grid.toolbar.selectIn'), |
||||
|
enableIf: () => { |
||||
|
return foreignValue ? true : false; |
||||
|
}, |
||||
|
click: () => { |
||||
|
dialogRef.open(foreignValue); |
||||
|
}, |
||||
|
}, |
||||
|
{ |
||||
|
name: 'selectOut', |
||||
|
label: $t('system.shared.selectUser.grid.toolbar.selectOut'), |
||||
|
enableIf: () => { |
||||
|
return foreignValue && gridRef?.getSelectedRows()?.length > 0; |
||||
|
}, |
||||
|
click: (arg) => { |
||||
|
const ids = Tools.extractProperties(arg.selecteds, 'id'); |
||||
|
DialogManager.confirm($t('system.shared.selectUser.grid.toolbar.selectOut.tip'), () => { |
||||
|
emit('selectOut', ids, gridRef); |
||||
|
}); |
||||
|
}, |
||||
|
}, |
||||
|
'separator', |
||||
|
{ |
||||
|
name: 'selectAllIn', |
||||
|
label: $t('system.shared.selectUser.grid.toolbar.selectAllIn'), |
||||
|
enableIf: () => { |
||||
|
return foreignValue ? true : false; |
||||
|
}, |
||||
|
click: () => { |
||||
|
DialogManager.confirm($t('system.shared.selectUser.grid.toolbar.selectAllIn.tip'), () => { |
||||
|
emit('selectAllIn', gridRef); |
||||
|
}); |
||||
|
}, |
||||
|
}, |
||||
|
{ |
||||
|
name: 'selectAllOut', |
||||
|
label: $t('system.shared.selectUser.grid.toolbar.selectAllOut'), |
||||
|
enableIf: () => { |
||||
|
return foreignValue && gridRef?.getRows()?.length > 0; |
||||
|
}, |
||||
|
click: () => { |
||||
|
DialogManager.confirm($t('system.shared.selectUser.grid.toolbar.selectAllOut.tip'), () => { |
||||
|
emit('selectAllOut', gridRef); |
||||
|
}); |
||||
|
}, |
||||
|
}, |
||||
|
'separator', |
||||
|
'view', |
||||
|
]" |
||||
|
:columns="[ |
||||
|
{ width: 150, name: 'loginName', label: $t('loginName') }, |
||||
|
{ width: '100%', name: 'userName', label: $t('userName') }, |
||||
|
{ |
||||
|
width: 150, |
||||
|
name: 'enable', |
||||
|
label: $t('status'), |
||||
|
format: (value, row) => { |
||||
|
return { |
||||
|
componentType: UserStatusTag, |
||||
|
attrs: row, |
||||
|
}; |
||||
|
}, |
||||
|
}, |
||||
|
]" |
||||
|
:viewer="{ |
||||
|
panel: { |
||||
|
columnNum: 1, |
||||
|
fields: [ |
||||
|
{ name: 'id', label: $t('id') }, |
||||
|
{ name: 'loginName', label: $t('loginName') }, |
||||
|
{ name: 'userName', label: $t('userName') }, |
||||
|
{ name: 'description', label: $t('description') }, |
||||
|
{ |
||||
|
name: 'enable', |
||||
|
label: $t('enable'), |
||||
|
format: (value) => { |
||||
|
return value; |
||||
|
}, |
||||
|
}, |
||||
|
{ name: 'accountExpired', label: $t('accountExpired') }, |
||||
|
{ name: 'accountLocked', label: $t('accountLocked') }, |
||||
|
{ name: 'credentialsExpired', label: $t('credentialsExpired') }, |
||||
|
{ name: 'email', label: $t('email') }, |
||||
|
{ name: 'phone', label: $t('phone') }, |
||||
|
{ name: 'mobile', label: $t('mobile') }, |
||||
|
{ name: 'weixin', label: $t('weixin') }, |
||||
|
{ name: 'qq', label: $t('qq') }, |
||||
|
{ name: 'dataComeFrom', label: $t('dataComeFrom') }, |
||||
|
{ name: 'creator', label: $t('creator') }, |
||||
|
{ name: 'createDate', label: $t('createDate') }, |
||||
|
{ name: 'lastModifier', label: $t('lastModifier') }, |
||||
|
{ name: 'lastModifyDate', label: $t('lastModifyDate') }, |
||||
|
{ name: 'corporationCode', label: $t('corporationCode') }, |
||||
|
], |
||||
|
}, |
||||
|
}" |
||||
|
></w-grid> |
||||
|
<SelectUserDialog |
||||
|
ref="dialogRef" |
||||
|
:opener="gridRef" |
||||
|
:fetch-data-url="fetchOtherDataUrl" |
||||
|
:foreign-key="foreignKey" |
||||
|
:foreign-value="foreignValue" |
||||
|
@after-selected=" |
||||
|
(ids: string[]) => { |
||||
|
emit('selectIn', ids, gridRef, dialogRef); |
||||
|
} |
||||
|
" |
||||
|
></SelectUserDialog> |
||||
|
</template> |
||||
|
<script setup lang="ts"> |
||||
|
import { ref, onUpdated } from 'vue'; |
||||
|
import { DialogManager, Tools } from 'platform-core'; |
||||
|
import SelectUserDialog from './SelectUserDialog.vue'; |
||||
|
import UserStatusTag from './UserStatusTag.vue'; |
||||
|
|
||||
|
const props = defineProps({ |
||||
|
fetchDataUrl: { type: String, default: '' }, |
||||
|
fetchOtherDataUrl: { type: String, default: '' }, |
||||
|
foreignKey: { type: String, default: '' }, |
||||
|
foreignValue: { type: String, default: '' }, |
||||
|
}); |
||||
|
|
||||
|
const emit = defineEmits<{ |
||||
|
(e: 'selectIn', ids: string[], gridComponent: any, dialogComponent: any): void; |
||||
|
(e: 'selectOut', ids: string[], gridComponent: any): void; |
||||
|
(e: 'selectAllIn', gridComponent: any): void; |
||||
|
(e: 'selectAllOut', gridComponent: any): void; |
||||
|
}>(); |
||||
|
|
||||
|
const gridRef = ref(); |
||||
|
const dialogRef = ref(); |
||||
|
|
||||
|
const refresh = () => { |
||||
|
gridRef.value.refresh(); |
||||
|
}; |
||||
|
|
||||
|
onUpdated(() => { |
||||
|
console.log('onUpdated....'); |
||||
|
gridRef.value.refresh(); |
||||
|
}); |
||||
|
|
||||
|
defineExpose({ |
||||
|
refresh, |
||||
|
}); |
||||
|
</script> |
@ -0,0 +1,17 @@ |
|||||
|
<template> |
||||
|
<div> |
||||
|
<q-chip v-if="enable && !accountExpired && !accountLocked && !credentialsExpired" color="green" text-color="white" :label="$t('normal')" dense></q-chip> |
||||
|
<q-chip v-if="!enable" color="red" text-color="white" :label="$t('disable')" dense></q-chip> |
||||
|
<q-chip v-if="accountExpired" color="red" text-color="white" :label="$t('accountExpired')" dense></q-chip> |
||||
|
<q-chip v-if="accountLocked" color="red" text-color="white" :label="$t('accountLocked')" dense></q-chip> |
||||
|
<q-chip v-if="credentialsExpired" color="red" text-color="white" :label="$t('credentialsExpired')" dense></q-chip> |
||||
|
</div> |
||||
|
</template> |
||||
|
<script setup lang="ts"> |
||||
|
const props = defineProps({ |
||||
|
enable: { type: Boolean, default: true }, |
||||
|
accountExpired: { type: Boolean, default: false }, |
||||
|
accountLocked: { type: Boolean, default: false }, |
||||
|
credentialsExpired: { type: Boolean, default: false }, |
||||
|
}); |
||||
|
</script> |
@ -1,408 +1,125 @@ |
|||||
<template> |
<template> |
||||
<div style="height: 100%"> |
<q-splitter :model-value="60" class="w-full" style="height: 100%"> |
||||
<w-grid |
<template #before> |
||||
:title="$t('lcdp.scheduler.task.grid.title')" |
<div class="pr-1" style="height: 100%"> |
||||
:config-button="true" |
<w-grid |
||||
selection="multiple" |
ref="applicationGridRef" |
||||
:checkbox-selection="true" |
:title="$t('system.application.grid.title')" |
||||
:query-form-cols-num="12" |
:config-button="true" |
||||
:query-form-fields="[ |
selection="multiple" |
||||
{ colSpan: 4, name: 'name', label: $t('name'), type: 'text' }, |
:checkbox-selection="true" |
||||
{ |
:data-url="Environment.apiContextPath('/api/system/application')" |
||||
colSpan: 4, |
:sort-by="['order']" |
||||
name: 'executor', |
:query-form-cols-num="3" |
||||
label: $t('lcdp.scheduler.task.grid.entity.executor'), |
:query-form-fields="[ |
||||
type: 'select', |
{ name: 'code', label: $t('code'), type: 'text' }, |
||||
clearable: true, |
{ name: 'name', label: $t('name'), type: 'text' }, |
||||
queryOperator: 'equals', |
{ name: 'enable', label: $t('isEnable'), type: 'select', options: Options.yesNo() }, |
||||
options: executorOptionsRef, |
]" |
||||
}, |
:toolbar-configure="{ noIcon: false }" |
||||
{ |
:toolbar-actions="['query', 'refresh', 'separator', 'add', 'clone', 'edit', 'remove', 'separator', 'view', 'separator', 'export']" |
||||
colSpan: 2, |
:columns="[ |
||||
name: 'status', |
{ width: 60, name: 'order', label: $t('order') }, |
||||
label: $t('status'), |
{ width: 100, name: 'code', label: $t('code') }, |
||||
type: 'select', |
{ width: '100%', name: 'name', label: $t('name') }, |
||||
clearable: true, |
{ width: 80, name: 'enable', label: $t('status'), format: Formater.enableTag() }, |
||||
queryOperator: 'equals', |
{ width: 120, name: 'lastModifier', label: $t('lastModifier') }, |
||||
options: Options.enum(Enums.TaskStatus), |
{ width: 120, name: 'lastModifyDate', label: $t('lastModifyDate'), format: Formater.dateOnly() }, |
||||
}, |
]" |
||||
]" |
:editor="{ |
||||
:data-url="Environment.apiContextPath('/api/scheduler/manager/task')" |
dialog: { |
||||
:pageable="false" |
width: '600px', |
||||
:toolbar-configure="{ noIcon: false }" |
height: '300px', |
||||
:toolbar-actions="[ |
}, |
||||
'query', |
form: { |
||||
'refresh', |
colsNum: 1, |
||||
'separator', |
fields: [ |
||||
'add', |
{ name: 'code', label: $t('code'), type: 'text', required: true }, |
||||
'edit', |
{ name: 'name', label: $t('name'), type: 'text', required: true }, |
||||
'remove', |
{ name: 'description', label: $t('description'), type: 'textarea', rows: 1 }, |
||||
'separator', |
{ name: 'order', label: $t('order'), type: 'number' }, |
||||
{ |
{ name: 'enable', label: $t('enable'), type: 'checkbox', defaultValue: true }, |
||||
name: 'execute', |
], |
||||
label: $t('lcdp.scheduler.task.grid.toolbar.execute'), |
}, |
||||
icon: 'bi-caret-right-fill', |
}" |
||||
enableIf: (selecteds) => { |
:viewer="{ |
||||
return selecteds && selecteds.length > 0; |
panel: { |
||||
}, |
columnNum: 1, |
||||
click: () => {}, |
fields: [ |
||||
}, |
{ name: 'id', label: $t('id') }, |
||||
{ |
{ name: 'code', label: $t('code') }, |
||||
name: 'schedule', |
{ name: 'name', label: $t('name') }, |
||||
label: $t('lcdp.scheduler.task.grid.toolbar.schedule'), |
{ name: 'description', label: $t('description') }, |
||||
icon: 'bi-cloud-arrow-up', |
{ name: 'enable', label: $t('enable'), format: Formater.none() }, |
||||
enableIf: (selecteds) => { |
{ name: 'order', label: $t('order') }, |
||||
return selecteds && selecteds.length > 0; |
{ name: 'dataComeFrom', label: $t('dataComeFrom') }, |
||||
}, |
{ name: 'creator', label: $t('creator') }, |
||||
click: () => {}, |
{ name: 'createDate', label: $t('createDate') }, |
||||
}, |
{ name: 'lastModifier', label: $t('lastModifier') }, |
||||
{ |
{ name: 'lastModifyDate', label: $t('lastModifyDate'), format: Formater.none() }, |
||||
name: 'log', |
{ name: 'corporationCode', label: $t('corporationCode') }, |
||||
label: $t('lcdp.scheduler.task.grid.toolbar.log'), |
], |
||||
icon: 'bi-receipt', |
}, |
||||
enableIf: (selecteds) => { |
}" |
||||
return selecteds && selecteds.length > 0; |
@row-click=" |
||||
}, |
(evt, row, index) => { |
||||
click: () => {}, |
currentSelectedApplicationId = row.id; |
||||
}, |
menuTreeGridRef?.refresh(); |
||||
'separator', |
userGridRef?.refresh(); |
||||
'view', |
} |
||||
'separator', |
" |
||||
'export', |
@before-request-data=" |
||||
]" |
() => { |
||||
:columns="[ |
currentSelectedApplicationId = ''; |
||||
{ |
menuTreeGridRef?.refresh(); |
||||
width: 80, |
userGridRef?.refresh(); |
||||
name: 'status', |
} |
||||
label: $t('status'), |
" |
||||
align: 'center', |
> |
||||
format: (value) => { |
</w-grid> |
||||
return { |
</div> |
||||
componentType: 'QChip', |
</template> |
||||
attrs: { color: value == 'RUNNING' ? 'green' : 'gray', label: Formater.enum(Enums.TaskStatus)(value), dense: true }, |
<template #after> |
||||
}; |
<div class="pl-1" style="height: 100%"> |
||||
}, |
<q-tabs v-model="selectedTabRef" inline-label align="left" :breakpoint="0" no-caps> |
||||
}, |
<q-tab name="menu" icon="bi-menu-app" :label="$t('menu')" /> |
||||
{ |
</q-tabs> |
||||
width: 90, |
|
||||
name: 'type', |
|
||||
label: $t('lcdp.scheduler.task.grid.entity.type'), |
|
||||
format: Formater.enum(Enums.TaskType), |
|
||||
}, |
|
||||
{ width: 150, name: 'name', label: $t('name') }, |
|
||||
{ |
|
||||
width: 100, |
|
||||
name: 'scheduleType', |
|
||||
label: $t('lcdp.scheduler.task.grid.entity.scheduleType'), |
|
||||
format: (value, row) => { |
|
||||
console.log(row); |
|
||||
return Formater.enum(Enums.ScheduleType)(value); |
|
||||
}, |
|
||||
}, |
|
||||
{ |
|
||||
width: 140, |
|
||||
name: 'triggerLastTime', |
|
||||
label: $t('lcdp.scheduler.task.grid.entity.triggerLastTime'), |
|
||||
}, |
|
||||
{ width: 140, name: 'triggerNextTime', label: $t('lcdp.scheduler.task.grid.entity.triggerNextTime') }, |
|
||||
{ |
|
||||
width: 400, |
|
||||
name: 'executorName', |
|
||||
label: $t('lcdp.scheduler.task.grid.entity.executorName'), |
|
||||
format: (value, row) => { |
|
||||
return { |
|
||||
componentType: 'q-btn', |
|
||||
attrs: { |
|
||||
flat: true, |
|
||||
rounded: true, |
|
||||
noCaps: true, |
|
||||
label: row.executorApplicationName + ':' + row.executorName, |
|
||||
color: 'blue', |
|
||||
onClick: () => { |
|
||||
executorRegistryDialogRef.open(row); |
|
||||
}, |
|
||||
}, |
|
||||
}; |
|
||||
}, |
|
||||
}, |
|
||||
{ width: 80, name: 'author', label: $t('lcdp.scheduler.task.grid.entity.author') }, |
|
||||
{ width: 200, name: 'alarmEmail', label: $t('lcdp.scheduler.task.grid.entity.alarmEmail') }, |
|
||||
{ |
|
||||
width: 100, |
|
||||
name: 'routeStrategy', |
|
||||
label: $t('lcdp.scheduler.task.grid.entity.routeStrategy'), |
|
||||
format: (value) => { |
|
||||
return Formater.enum(Enums.RouteStrategy)(value); |
|
||||
}, |
|
||||
}, |
|
||||
{ |
|
||||
width: 100, |
|
||||
name: 'expirationPolicy', |
|
||||
label: $t('lcdp.scheduler.task.grid.entity.expirationPolicy'), |
|
||||
format: (value) => { |
|
||||
return Formater.enum(Enums.ExpirationPolicy)(value); |
|
||||
}, |
|
||||
}, |
|
||||
{ |
|
||||
width: 100, |
|
||||
name: 'blockStrategy', |
|
||||
label: $t('lcdp.scheduler.task.grid.entity.blockStrategy'), |
|
||||
format: (value) => { |
|
||||
return Formater.enum(Enums.BlockStrategy)(value); |
|
||||
}, |
|
||||
}, |
|
||||
{ width: 80, name: 'timeout', label: $t('lcdp.scheduler.task.grid.entity.timeout') }, |
|
||||
{ width: 90, name: 'failRetryCount', label: $t('lcdp.scheduler.task.grid.entity.failRetryCount') }, |
|
||||
]" |
|
||||
:editor="{ |
|
||||
dialog: { |
|
||||
width: '800px', |
|
||||
}, |
|
||||
form: { |
|
||||
colsNum: 2, |
|
||||
fields: [ |
|
||||
{ |
|
||||
name: 'type', |
|
||||
label: $t('lcdp.scheduler.task.grid.entity.type'), |
|
||||
required: true, |
|
||||
type: 'select', |
|
||||
options: Options.enum(Enums.TaskType), |
|
||||
}, |
|
||||
{ |
|
||||
name: 'executor', |
|
||||
label: $t('lcdp.scheduler.task.grid.entity.executor'), |
|
||||
required: true, |
|
||||
type: 'select', |
|
||||
clearable: true, |
|
||||
options: executorOptionsRef, |
|
||||
}, |
|
||||
{ colsFirst: true, name: 'name', label: $t('name'), type: 'text', required: true }, |
|
||||
{ name: 'description', label: $t('description'), type: 'text' }, |
|
||||
{ name: 'author', label: $t('lcdp.scheduler.task.grid.entity.author'), type: 'text' }, |
|
||||
{ name: 'alarmEmail', label: $t('lcdp.scheduler.task.grid.entity.alarmEmail'), type: 'text' }, |
|
||||
{ |
|
||||
colsFirst: true, |
|
||||
name: 'scheduleType', |
|
||||
label: $t('lcdp.scheduler.task.grid.entity.scheduleType'), |
|
||||
required: true, |
|
||||
type: 'select', |
|
||||
options: Options.enum(Enums.ScheduleType), |
|
||||
defaultValue: 'FIX_RATE', |
|
||||
}, |
|
||||
{ |
|
||||
name: 'scheduleCron', |
|
||||
label: $t('lcdp.scheduler.task.grid.entity.scheduleCron'), |
|
||||
type: 'cron', |
|
||||
showIf: (arg) => { |
|
||||
return arg.form.getFieldValue('scheduleType') === 'CRON'; |
|
||||
}, |
|
||||
}, |
|
||||
{ |
|
||||
name: 'scheduleFixRate', |
|
||||
label: $t('lcdp.scheduler.task.grid.entity.scheduleFixRate'), |
|
||||
type: 'number', |
|
||||
showIf: (arg) => { |
|
||||
return arg.form.getFieldValue('scheduleType') === 'FIX_RATE'; |
|
||||
}, |
|
||||
}, |
|
||||
{ |
|
||||
name: 'scheduleFixDelay', |
|
||||
label: $t('lcdp.scheduler.task.grid.entity.scheduleFixDelay'), |
|
||||
type: 'number', |
|
||||
showIf: (arg) => { |
|
||||
return arg.form.getFieldValue('scheduleType') === 'FIX_DELAY'; |
|
||||
}, |
|
||||
}, |
|
||||
{ |
|
||||
colsFirst: true, |
|
||||
colSpan: 2, |
|
||||
name: 'bean', |
|
||||
label: $t('lcdp.scheduler.task.grid.entity.type.bean'), |
|
||||
type: 'text', |
|
||||
showIf: (arg) => { |
|
||||
return arg.form.getFieldValue('type') === 'BEAN'; |
|
||||
}, |
|
||||
}, |
|
||||
{ |
|
||||
colsFirst: true, |
|
||||
colSpan: 2, |
|
||||
name: 'groovy', |
|
||||
label: $t('lcdp.scheduler.task.grid.entity.type.groovy'), |
|
||||
type: 'code-mirror', |
|
||||
rows: 8, |
|
||||
lang: 'groovy', |
|
||||
showIf: (arg) => { |
|
||||
return arg.form.getFieldValue('type') === 'GROOVY'; |
|
||||
}, |
|
||||
}, |
|
||||
{ |
|
||||
colsFirst: true, |
|
||||
colSpan: 2, |
|
||||
name: 'shell', |
|
||||
label: $t('lcdp.scheduler.task.grid.entity.type.shell'), |
|
||||
type: 'code-mirror', |
|
||||
rows: 8, |
|
||||
lang: 'shell', |
|
||||
showIf: (arg) => { |
|
||||
return arg.form.getFieldValue('type') === 'SHELL'; |
|
||||
}, |
|
||||
}, |
|
||||
{ |
|
||||
colsFirst: true, |
|
||||
colSpan: 2, |
|
||||
name: 'python', |
|
||||
label: $t('lcdp.scheduler.task.grid.entity.type.python'), |
|
||||
type: 'code-mirror', |
|
||||
rows: 8, |
|
||||
lang: 'python', |
|
||||
showIf: (arg) => { |
|
||||
return arg.form.getFieldValue('type') === 'PYTHON'; |
|
||||
}, |
|
||||
}, |
|
||||
{ |
|
||||
colsFirst: true, |
|
||||
colSpan: 2, |
|
||||
name: 'php', |
|
||||
label: $t('lcdp.scheduler.task.grid.entity.type.php'), |
|
||||
type: 'code-mirror', |
|
||||
rows: 8, |
|
||||
lang: 'php', |
|
||||
showIf: (arg) => { |
|
||||
return arg.form.getFieldValue('type') === 'PHP'; |
|
||||
}, |
|
||||
}, |
|
||||
{ |
|
||||
colsFirst: true, |
|
||||
colSpan: 2, |
|
||||
name: 'nodejs', |
|
||||
label: $t('lcdp.scheduler.task.grid.entity.type.nodejs'), |
|
||||
type: 'code-mirror', |
|
||||
rows: 8, |
|
||||
lang: 'nodejs', |
|
||||
showIf: (arg) => { |
|
||||
return arg.form.getFieldValue('type') === 'NODEJS'; |
|
||||
}, |
|
||||
}, |
|
||||
{ |
|
||||
colsFirst: true, |
|
||||
colSpan: 2, |
|
||||
name: 'powershell', |
|
||||
label: $t('lcdp.scheduler.task.grid.entity.type.powershell'), |
|
||||
type: 'code-mirror', |
|
||||
rows: 8, |
|
||||
lang: 'powershell', |
|
||||
showIf: (arg) => { |
|
||||
return arg.form.getFieldValue('type') === 'POWERSHELL'; |
|
||||
}, |
|
||||
}, |
|
||||
{ colSpan: 2, name: 'parameter', label: $t('lcdp.scheduler.task.grid.entity.parameter'), type: 'textarea', rows: 5 }, |
|
||||
{ |
|
||||
name: 'routeStrategy', |
|
||||
label: $t('lcdp.scheduler.task.grid.entity.routeStrategy'), |
|
||||
required: true, |
|
||||
type: 'select', |
|
||||
options: Options.enum(Enums.RouteStrategy), |
|
||||
defaultValue: 'FIRST', |
|
||||
}, |
|
||||
{ |
|
||||
name: 'expirationPolicy', |
|
||||
label: $t('lcdp.scheduler.task.grid.entity.expirationPolicy'), |
|
||||
required: true, |
|
||||
type: 'select', |
|
||||
options: Options.enum(Enums.ExpirationPolicy), |
|
||||
}, |
|
||||
{ |
|
||||
name: 'blockStrategy', |
|
||||
label: $t('lcdp.scheduler.task.grid.entity.blockStrategy'), |
|
||||
required: true, |
|
||||
type: 'select', |
|
||||
options: Options.enum(Enums.BlockStrategy), |
|
||||
}, |
|
||||
{ colsFirst: true, name: 'timeout', label: $t('lcdp.scheduler.task.grid.entity.timeout.label'), type: 'number' }, |
|
||||
{ name: 'failRetryCount', label: $t('lcdp.scheduler.task.grid.entity.failRetryCount.label'), type: 'number' }, |
|
||||
], |
|
||||
}, |
|
||||
}" |
|
||||
:viewer="{ |
|
||||
panel: { |
|
||||
columnNum: 1, |
|
||||
fields: [ |
|
||||
{ name: 'id', label: $t('id') }, |
|
||||
{ name: 'parent', label: $t('parent') }, |
|
||||
{ name: 'type', label: $t('lcdp.scheduler.task.grid.entity.type') }, |
|
||||
|
|
||||
{ name: 'executor', label: $t('lcdp.scheduler.task.grid.entity.executorId') }, |
|
||||
{ name: 'executorName', label: $t('lcdp.scheduler.task.grid.entity.executorName') }, |
|
||||
|
|
||||
{ name: 'name', label: $t('name') }, |
|
||||
{ name: 'description', label: $t('description') }, |
|
||||
{ name: 'author', label: $t('lcdp.scheduler.task.grid.entity.author') }, |
|
||||
{ name: 'alarmEmail', label: $t('lcdp.scheduler.task.grid.entity.alarmEmail') }, |
|
||||
|
|
||||
{ name: 'scheduleType', label: $t('lcdp.scheduler.task.grid.entity.scheduleType') }, |
<q-tab-panels v-model="selectedTabRef" animated swipeable keep-alive style="height: calc(100% - 48px)"> |
||||
{ name: 'scheduleConf', label: $t('lcdp.scheduler.task.grid.entity.scheduleConf') }, |
<q-tab-panel name="menu" class="px-0 pb-0" style="height: 100%; padding-left: 0px; padding-right: 0px; padding-bottom: 0px"> |
||||
|
<SelectMenuTreeGrid |
||||
{ name: 'bean', label: $t('lcdp.scheduler.task.grid.entity.type.bean') }, |
ref="menuTreeGridRef" |
||||
{ name: 'groovy', label: $t('lcdp.scheduler.task.grid.entity.type.groovy') }, |
:fetch-data-url="Environment.apiContextPath('/api/system/menu/listAllMenusWithSelectedStatusByApplication')" |
||||
{ name: 'shell', label: $t('lcdp.scheduler.task.grid.entity.type.shell') }, |
foreign-key="applicationId" |
||||
{ name: 'python', label: $t('lcdp.scheduler.task.grid.entity.type.python') }, |
:foreign-value="currentSelectedApplicationId" |
||||
{ name: 'php', label: $t('lcdp.scheduler.task.grid.entity.type.php') }, |
@update="update" |
||||
{ name: 'nodejs', label: $t('lcdp.scheduler.task.grid.entity.type.nodejs') }, |
></SelectMenuTreeGrid> |
||||
{ name: 'powershell', label: $t('lcdp.scheduler.task.grid.entity.type.powershell') }, |
</q-tab-panel> |
||||
|
</q-tab-panels> |
||||
{ name: 'parameter', label: $t('lcdp.scheduler.task.grid.entity.parameter') }, |
</div> |
||||
{ name: 'routeStrategy', label: $t('lcdp.scheduler.task.grid.entity.routeStrategy') }, |
</template> |
||||
{ name: 'expirationPolicy', label: $t('lcdp.scheduler.task.grid.entity.expirationPolicy') }, |
</q-splitter> |
||||
{ name: 'blockStrategy', label: $t('lcdp.scheduler.task.grid.entity.blockStrategy') }, |
|
||||
{ name: 'timeout', label: $t('lcdp.scheduler.task.grid.entity.timeout') }, |
|
||||
{ name: 'failRetryCount', label: $t('lcdp.scheduler.task.grid.entity.failRetryCount') }, |
|
||||
|
|
||||
{ name: 'triggerStatus', label: $t('lcdp.scheduler.task.grid.entity.triggerStatus') }, |
|
||||
{ name: 'triggerLastTime', label: $t('lcdp.scheduler.task.grid.entity.triggerLastTime') }, |
|
||||
{ name: 'triggerNextTime', label: $t('lcdp.scheduler.task.grid.entity.triggerNextTime') }, |
|
||||
|
|
||||
{ name: 'dataComeFrom', label: $t('dataComeFrom') }, |
|
||||
{ name: 'creator', label: $t('creator') }, |
|
||||
{ name: 'createDate', label: $t('createDate') }, |
|
||||
{ name: 'lastModifier', label: $t('lastModifier') }, |
|
||||
{ name: 'lastModifyDate', label: $t('lastModifyDate'), format: Formater.none() }, |
|
||||
], |
|
||||
}, |
|
||||
}" |
|
||||
></w-grid> |
|
||||
<ExecutorRegistryDialog ref="executorRegistryDialogRef"></ExecutorRegistryDialog> |
|
||||
</div> |
|
||||
</template> |
</template> |
||||
<script setup lang="ts"> |
<script setup lang="ts"> |
||||
import { ref, inject } from 'vue'; |
import { ref } from 'vue'; |
||||
import { axios, Environment, EnumTools, Formater, Options } from 'platform-core'; |
import { Environment, axios, EnumTools, Options, Formater } from '@/platform'; |
||||
import ExecutorRegistryDialog from './ExecutorRegistryDialog.vue'; |
import SelectMenuTreeGrid from './shared/SelectMenuTreeGrid.vue'; |
||||
|
|
||||
const eventBus = inject('eventBus'); |
|
||||
|
|
||||
const Enums = await EnumTools.fetch([ |
const applicationGridRef = ref(); |
||||
'io.sc.platform.scheduler.core.enums.RouteStrategy', |
const userGridRef = ref(); |
||||
'io.sc.platform.scheduler.core.enums.ExpirationPolicy', |
const menuTreeGridRef = ref(); |
||||
'io.sc.platform.scheduler.core.enums.BlockStrategy', |
|
||||
'io.sc.platform.scheduler.core.enums.TaskType', |
|
||||
'io.sc.platform.scheduler.core.enums.ScheduleType', |
|
||||
'io.sc.platform.scheduler.core.enums.TaskStatus', |
|
||||
]); |
|
||||
|
|
||||
const executorRegistryDialogRef = ref(); |
const selectedTabRef = ref('menu'); |
||||
const executorOptionsRef = ref([]); |
const currentSelectedApplicationId = ref(''); |
||||
|
|
||||
const reloadExecutor = () => { |
const update = (ids, gridComponent) => { |
||||
axios.get(Environment.apiContextPath('/api/scheduler/manager/executor?pageable=false')).then((response) => { |
axios |
||||
executorOptionsRef.value.splice(0, executorOptionsRef.value.length); |
.post(Environment.apiContextPath('/api/system/application/updateMenus'), { |
||||
const list = response?.data?.content; |
one: applicationGridRef.value.getSelectedRows()[0].id, |
||||
if (list) { |
many: ids, |
||||
for (const item of list) { |
}) |
||||
executorOptionsRef.value.push({ label: item.applicationName + ' : ' + item.name, value: item.id }); |
.then(() => { |
||||
} |
gridComponent.refresh(); |
||||
} |
}); |
||||
}); |
|
||||
}; |
}; |
||||
|
|
||||
reloadExecutor(); |
|
||||
</script> |
</script> |
||||
|
@ -0,0 +1,102 @@ |
|||||
|
<template> |
||||
|
<w-dialog |
||||
|
ref="dialogRef" |
||||
|
:title="$t('system.shared.selectApplication.dialog.title')" |
||||
|
width="800px" |
||||
|
height="500px" |
||||
|
:can-maximize="false" |
||||
|
:buttons="[ |
||||
|
{ |
||||
|
label: $t('confirm'), |
||||
|
click: () => { |
||||
|
const ids = Tools.extractProperties(gridRef.getSelectedRows(), 'id'); |
||||
|
emit('afterSelected', ids, dialogRef); |
||||
|
}, |
||||
|
}, |
||||
|
]" |
||||
|
> |
||||
|
<div class="px-2" style="height: 100%"> |
||||
|
<w-grid |
||||
|
ref="gridRef" |
||||
|
:title="$t('system.shared.selectApplication.dialog.grid.title')" |
||||
|
selection="multiple" |
||||
|
:full-screen-button="false" |
||||
|
:toolbar-configure="{ noIcon: false }" |
||||
|
:toolbar-actions="['query', 'refresh']" |
||||
|
:query-form-fields="[ |
||||
|
{ name: 'code', label: $t('code'), type: 'text' }, |
||||
|
{ name: 'name', label: $t('name'), type: 'text' }, |
||||
|
{ |
||||
|
name: 'enable', |
||||
|
label: $t('enable'), |
||||
|
type: 'select', |
||||
|
options: Options.yesNo(), |
||||
|
queryOperator: 'equals', |
||||
|
}, |
||||
|
{ |
||||
|
name: 'dataComeFrom', |
||||
|
label: $t('dataComeFrom'), |
||||
|
type: 'select', |
||||
|
options: Options.enum(DataComeFromEnum), |
||||
|
queryOperator: 'equals', |
||||
|
}, |
||||
|
]" |
||||
|
:auto-fetch-data="false" |
||||
|
:fetch-data-url="fetchDataUrl + '?' + foreignKey + '=' + foreignValue" |
||||
|
:columns="[ |
||||
|
{ name: 'code', label: $t('code') }, |
||||
|
{ name: 'name', label: $t('name') }, |
||||
|
{ |
||||
|
name: 'status', |
||||
|
label: t('status'), |
||||
|
format: Formater.enableTag(), |
||||
|
}, |
||||
|
{ name: 'lastModifier', label: t('lastModifier') }, |
||||
|
{ name: 'lastModifyDate', label: t('lastModifyDate') }, |
||||
|
]" |
||||
|
></w-grid> |
||||
|
</div> |
||||
|
</w-dialog> |
||||
|
</template> |
||||
|
<script setup lang="ts"> |
||||
|
import { ref, nextTick } from 'vue'; |
||||
|
import { useI18n } from 'vue-i18n'; |
||||
|
import { Environment, Tools, EnumTools, Options, Formater } from 'platform-core'; |
||||
|
|
||||
|
const props = defineProps({ |
||||
|
opener: { type: Object, default: undefined }, |
||||
|
fetchDataUrl: { type: String, default: '' }, |
||||
|
foreignKey: { type: String, default: '' }, |
||||
|
foreignValue: { type: String, default: '' }, |
||||
|
}); |
||||
|
|
||||
|
const emit = defineEmits<{ |
||||
|
(e: 'afterSelected', ids: string[], dialogComponent: any): void; |
||||
|
}>(); |
||||
|
|
||||
|
const { t } = useI18n(); |
||||
|
|
||||
|
const dialogRef = ref(); |
||||
|
const gridRef = ref(); |
||||
|
const foreignKeyRef = ref(); |
||||
|
|
||||
|
const open = (foreignKey: string) => { |
||||
|
foreignKeyRef.value = foreignKey; |
||||
|
dialogRef.value.show(); |
||||
|
|
||||
|
nextTick(() => { |
||||
|
gridRef.value.refresh(); |
||||
|
}); |
||||
|
}; |
||||
|
|
||||
|
const close = () => { |
||||
|
dialogRef.value.hide(); |
||||
|
}; |
||||
|
|
||||
|
defineExpose({ |
||||
|
open, |
||||
|
close, |
||||
|
}); |
||||
|
|
||||
|
const DataComeFromEnum = await EnumTools.fetch('io.sc.platform.orm.api.enums.DataComeFrom'); |
||||
|
</script> |
@ -0,0 +1,141 @@ |
|||||
|
<template> |
||||
|
<w-grid |
||||
|
ref="gridRef" |
||||
|
:title="$t('system.shared.selectApplication.grid.title')" |
||||
|
:config-button="false" |
||||
|
selection="multiple" |
||||
|
:checkbox-selection="true" |
||||
|
:fetch-data-url="fetchDataUrl + '?' + foreignKey + '=' + foreignValue" |
||||
|
:auto-fetch-data="false" |
||||
|
:toolbar-configure="{ noIcon: true }" |
||||
|
:toolbar-actions="[ |
||||
|
'refresh', |
||||
|
'separator', |
||||
|
{ |
||||
|
name: 'selectIn', |
||||
|
label: $t('system.shared.selectApplication.grid.toolbar.selectIn'), |
||||
|
enableIf: () => { |
||||
|
return foreignValue ? true : false; |
||||
|
}, |
||||
|
click: () => { |
||||
|
dialogRef.open(foreignValue); |
||||
|
}, |
||||
|
}, |
||||
|
{ |
||||
|
name: 'selectOut', |
||||
|
label: $t('system.shared.selectApplication.grid.toolbar.selectOut'), |
||||
|
enableIf: () => { |
||||
|
return foreignValue && gridRef?.getSelectedRows()?.length > 0; |
||||
|
}, |
||||
|
click: (arg) => { |
||||
|
const ids = Tools.extractProperties(arg.selecteds, 'id'); |
||||
|
DialogManager.confirm($t('system.shared.selectApplication.grid.toolbar.selectOut.tip'), () => { |
||||
|
emit('selectOut', ids, gridRef); |
||||
|
}); |
||||
|
}, |
||||
|
}, |
||||
|
'separator', |
||||
|
{ |
||||
|
name: 'selectAllIn', |
||||
|
label: $t('system.shared.selectApplication.grid.toolbar.selectAllIn'), |
||||
|
enableIf: () => { |
||||
|
return foreignValue ? true : false; |
||||
|
}, |
||||
|
click: () => { |
||||
|
DialogManager.confirm($t('system.shared.selectApplication.grid.toolbar.selectAllIn.tip'), () => { |
||||
|
emit('selectAllIn', gridRef); |
||||
|
}); |
||||
|
}, |
||||
|
}, |
||||
|
{ |
||||
|
name: 'selectAllOut', |
||||
|
label: $t('system.shared.selectApplication.grid.toolbar.selectAllOut'), |
||||
|
enableIf: () => { |
||||
|
return foreignValue && gridRef?.getRows()?.length > 0; |
||||
|
}, |
||||
|
click: () => { |
||||
|
DialogManager.confirm($t('system.shared.selectApplication.grid.toolbar.selectAllOut.tip'), () => { |
||||
|
emit('selectAllOut', gridRef); |
||||
|
}); |
||||
|
}, |
||||
|
}, |
||||
|
'separator', |
||||
|
'view', |
||||
|
]" |
||||
|
:columns="[ |
||||
|
{ width: 150, name: 'code', label: $t('code') }, |
||||
|
{ width: '100%', name: 'name', label: $t('name') }, |
||||
|
{ |
||||
|
width: 80, |
||||
|
name: 'enable', |
||||
|
label: $t('status'), |
||||
|
format: Formater.enableTag(), |
||||
|
}, |
||||
|
]" |
||||
|
:viewer="{ |
||||
|
panel: { |
||||
|
columnNum: 1, |
||||
|
fields: [ |
||||
|
{ name: 'id', label: $t('id') }, |
||||
|
{ name: 'code', label: $t('code') }, |
||||
|
{ name: 'name', label: $t('name') }, |
||||
|
{ name: 'description', label: $t('description') }, |
||||
|
{ name: 'enable', label: $t('enable') }, |
||||
|
{ name: 'dataComeFrom', label: $t('dataComeFrom') }, |
||||
|
{ name: 'creator', label: $t('creator') }, |
||||
|
{ name: 'createDate', label: $t('createDate') }, |
||||
|
{ name: 'lastModifier', label: $t('lastModifier') }, |
||||
|
{ name: 'lastModifyDate', label: $t('lastModifyDate') }, |
||||
|
{ name: 'corporationCode', label: $t('corporationCode') }, |
||||
|
], |
||||
|
}, |
||||
|
}" |
||||
|
></w-grid> |
||||
|
<SelectApplicationDialog |
||||
|
ref="dialogRef" |
||||
|
:opener="gridRef" |
||||
|
:fetch-data-url="fetchOtherDataUrl" |
||||
|
:foreign-key="foreignKey" |
||||
|
:foreign-value="foreignValue" |
||||
|
@after-selected=" |
||||
|
(ids: string[]) => { |
||||
|
emit('selectIn', ids, gridRef, dialogRef); |
||||
|
} |
||||
|
" |
||||
|
></SelectApplicationDialog> |
||||
|
</template> |
||||
|
<script setup lang="ts"> |
||||
|
import { ref, onUpdated } from 'vue'; |
||||
|
|
||||
|
import { EnumTools, DialogManager, Formater, Tools } from 'platform-core'; |
||||
|
import SelectApplicationDialog from './SelectApplicationDialog.vue'; |
||||
|
|
||||
|
const props = defineProps({ |
||||
|
fetchDataUrl: { type: String, default: '' }, |
||||
|
fetchOtherDataUrl: { type: String, default: '' }, |
||||
|
foreignKey: { type: String, default: '' }, |
||||
|
foreignValue: { type: String, default: '' }, |
||||
|
}); |
||||
|
|
||||
|
const emit = defineEmits<{ |
||||
|
(e: 'selectIn', ids: string[], gridComponent: any, dialogComponent: any): void; |
||||
|
(e: 'selectOut', ids: string[], gridComponent: any): void; |
||||
|
(e: 'selectAllIn', gridComponent: any): void; |
||||
|
(e: 'selectAllOut', gridComponent: any): void; |
||||
|
}>(); |
||||
|
|
||||
|
const gridRef = ref(); |
||||
|
const dialogRef = ref(); |
||||
|
|
||||
|
const refresh = () => { |
||||
|
gridRef.value.refresh(); |
||||
|
}; |
||||
|
|
||||
|
onUpdated(() => { |
||||
|
gridRef.value.refresh(); |
||||
|
}); |
||||
|
|
||||
|
defineExpose({ |
||||
|
refresh, |
||||
|
}); |
||||
|
</script> |
@ -0,0 +1,123 @@ |
|||||
|
<template> |
||||
|
<w-grid |
||||
|
ref="treeGridRef" |
||||
|
:title="$t('system.shared.selectMenu.grid.title')" |
||||
|
hide-bottom |
||||
|
:config-button="false" |
||||
|
:tree="true" |
||||
|
selection="multiple" |
||||
|
:checkbox-selection="true" |
||||
|
tree-tick-strategy="strict" |
||||
|
:tree-icon=" |
||||
|
(row) => { |
||||
|
if (row.type === 'SEPARATOR') { |
||||
|
return { name: 'bi-dash-lg' }; |
||||
|
} else if (row.type === 'ROUTE_ACTION') { |
||||
|
return { name: 'sym_o_crop_16_9' }; |
||||
|
} else { |
||||
|
return { name: row.icon }; |
||||
|
} |
||||
|
} |
||||
|
" |
||||
|
:fetch-data-url="fetchDataUrl + '?' + foreignKey + '=' + foreignValue" |
||||
|
:pageable="false" |
||||
|
:toolbar-configure="{ noIcon: true }" |
||||
|
:toolbar-actions="[ |
||||
|
'refresh', |
||||
|
'separator', |
||||
|
{ |
||||
|
extend: 'expand', |
||||
|
enableIf: () => { |
||||
|
return foreignValue && treeGridRef?.getRows()?.length > 0; |
||||
|
}, |
||||
|
}, |
||||
|
{ |
||||
|
name: 'save', |
||||
|
label: $t('save'), |
||||
|
enableIf: () => { |
||||
|
return foreignValue && treeGridRef?.getRows()?.length > 0; |
||||
|
}, |
||||
|
click: (arg) => { |
||||
|
DialogManager.confirm($t('system.shared.selectMenu.grid.toolbar.save.tip'), () => { |
||||
|
const ids = Tools.extractProperties(arg.tickeds, 'id'); |
||||
|
emit('update', ids, treeGridRef); |
||||
|
}); |
||||
|
}, |
||||
|
}, |
||||
|
'separator', |
||||
|
'view', |
||||
|
]" |
||||
|
:columns="[ |
||||
|
{ |
||||
|
width: '100%', |
||||
|
name: 'titleI18nKey', |
||||
|
label: $t('name'), |
||||
|
sortable: false, |
||||
|
format: (value, row) => { |
||||
|
if (row.type === 'SEPARATOR') { |
||||
|
return `<hr style='width:100px'/>`; |
||||
|
} else if (row.type === 'ROUTE_ACTION') { |
||||
|
return $t(row.i18nKey); |
||||
|
} else { |
||||
|
return $t(value); |
||||
|
} |
||||
|
}, |
||||
|
}, |
||||
|
{ width: 100, name: 'enable', label: $t('status'), format: Formater.enableTag(), sortable: false }, |
||||
|
]" |
||||
|
:viewer="{ |
||||
|
panel: { |
||||
|
columnNum: 1, |
||||
|
fields: [ |
||||
|
{ name: 'id', label: $t('id') }, |
||||
|
{ name: 'type', label: $t('type') }, |
||||
|
{ name: 'name', label: $t('name') }, |
||||
|
{ name: 'titleI18nKey', label: $t('titleI18nKey') }, |
||||
|
{ name: 'icon', label: $t('icon') }, |
||||
|
{ name: 'enable', label: $t('enable') }, |
||||
|
{ name: 'order', label: $t('order') }, |
||||
|
{ name: 'javaScript', label: $t('javaScript') }, |
||||
|
{ name: 'url', label: $t('url') }, |
||||
|
{ name: 'urlOpenType', label: $t('urlOpenType') }, |
||||
|
{ name: 'routeName', label: $t('routeName') }, |
||||
|
{ name: 'routeQuery', label: $t('routeQuery') }, |
||||
|
|
||||
|
{ name: 'dataComeFrom', label: $t('dataComeFrom') }, |
||||
|
{ name: 'creator', label: $t('creator') }, |
||||
|
{ name: 'createDate', label: $t('createDate') }, |
||||
|
{ name: 'lastModifier', label: $t('lastModifier') }, |
||||
|
{ name: 'lastModifyDate', label: $t('lastModifyDate') }, |
||||
|
{ name: 'corporationCode', label: $t('corporationCode') }, |
||||
|
], |
||||
|
}, |
||||
|
}" |
||||
|
></w-grid> |
||||
|
</template> |
||||
|
<script setup lang="ts"> |
||||
|
import { ref, onUpdated } from 'vue'; |
||||
|
import { DialogManager, Formater, Tools } from '@/platform'; |
||||
|
|
||||
|
const props = defineProps({ |
||||
|
fetchDataUrl: { type: String, default: '' }, |
||||
|
foreignKey: { type: String, default: '' }, |
||||
|
foreignValue: { type: String, default: '' }, |
||||
|
}); |
||||
|
|
||||
|
const emit = defineEmits<{ |
||||
|
(e: 'update', ids: string[], gridComponent: any): void; |
||||
|
}>(); |
||||
|
|
||||
|
const treeGridRef = ref(); |
||||
|
|
||||
|
const refresh = () => { |
||||
|
treeGridRef.value.refresh(); |
||||
|
}; |
||||
|
|
||||
|
onUpdated(() => { |
||||
|
treeGridRef.value.refresh(); |
||||
|
}); |
||||
|
|
||||
|
defineExpose({ |
||||
|
refresh, |
||||
|
}); |
||||
|
</script> |
@ -0,0 +1,97 @@ |
|||||
|
<template> |
||||
|
<w-grid |
||||
|
ref="treeGridRef" |
||||
|
:title="$t('system.shared.selectOrg.grid.title')" |
||||
|
hide-bottom |
||||
|
:config-button="false" |
||||
|
:tree="true" |
||||
|
selection="multiple" |
||||
|
:checkbox-selection="true" |
||||
|
tree-tick-strategy="strict" |
||||
|
ticked-field="selected" |
||||
|
:tree-icon=" |
||||
|
(row) => { |
||||
|
return { name: 'folder', color: 'amber' }; |
||||
|
} |
||||
|
" |
||||
|
:fetch-data-url="fetchDataUrl + '?' + foreignKey + '=' + foreignValue" |
||||
|
:pageable="false" |
||||
|
:toolbar-configure="{ noIcon: true }" |
||||
|
:toolbar-actions="[ |
||||
|
'refresh', |
||||
|
'separator', |
||||
|
{ |
||||
|
extend: 'expand', |
||||
|
enableIf: () => { |
||||
|
return foreignValue && treeGridRef?.getRows()?.length > 0; |
||||
|
}, |
||||
|
}, |
||||
|
{ |
||||
|
name: 'save', |
||||
|
label: $t('save'), |
||||
|
enableIf: () => { |
||||
|
return foreignValue && treeGridRef?.getRows()?.length > 0; |
||||
|
}, |
||||
|
click: () => { |
||||
|
DialogManager.confirm($t('system.shared.selectOrg.grid.toolbar.save.tip'), () => { |
||||
|
const ids = Tools.extractProperties(treeGridRef?.getTickedRows(), 'id'); |
||||
|
emit('update', ids, treeGridRef); |
||||
|
}); |
||||
|
}, |
||||
|
}, |
||||
|
'separator', |
||||
|
'view', |
||||
|
]" |
||||
|
:columns="[ |
||||
|
{ width: '100%', name: 'name', label: $t('name') }, |
||||
|
{ width: 100, name: 'code', label: $t('code') }, |
||||
|
{ width: 80, name: 'enable', label: $t('status'), format: Formater.enableTag(), sortable: false }, |
||||
|
]" |
||||
|
:viewer="{ |
||||
|
panel: { |
||||
|
columnNum: 1, |
||||
|
fields: [ |
||||
|
{ name: 'id', label: $t('id') }, |
||||
|
{ name: 'code', label: $t('code') }, |
||||
|
{ name: 'name', label: $t('name') }, |
||||
|
{ name: 'description', label: $t('description') }, |
||||
|
{ name: 'enable', label: $t('enable') }, |
||||
|
{ name: 'dataComeFrom', label: $t('dataComeFrom') }, |
||||
|
{ name: 'creator', label: $t('creator') }, |
||||
|
{ name: 'createDate', label: $t('createDate') }, |
||||
|
{ name: 'lastModifier', label: $t('lastModifier') }, |
||||
|
{ name: 'lastModifyDate', label: $t('lastModifyDate') }, |
||||
|
{ name: 'corporationCode', label: $t('corporationCode') }, |
||||
|
], |
||||
|
}, |
||||
|
}" |
||||
|
></w-grid> |
||||
|
</template> |
||||
|
<script setup lang="ts"> |
||||
|
import { ref, onUpdated } from 'vue'; |
||||
|
import { Environment, DialogManager, Formater, Tools } from 'platform-core'; |
||||
|
|
||||
|
const props = defineProps({ |
||||
|
fetchDataUrl: { type: String, default: '' }, |
||||
|
foreignKey: { type: String, default: '' }, |
||||
|
foreignValue: { type: String, default: '' }, |
||||
|
}); |
||||
|
|
||||
|
const emit = defineEmits<{ |
||||
|
(e: 'update', ids: string[], gridComponent: any): void; |
||||
|
}>(); |
||||
|
|
||||
|
const treeGridRef = ref(); |
||||
|
|
||||
|
const refresh = () => { |
||||
|
treeGridRef.value.refresh(); |
||||
|
}; |
||||
|
|
||||
|
onUpdated(() => { |
||||
|
treeGridRef.value.refresh(); |
||||
|
}); |
||||
|
|
||||
|
defineExpose({ |
||||
|
refresh, |
||||
|
}); |
||||
|
</script> |
@ -0,0 +1,102 @@ |
|||||
|
<template> |
||||
|
<w-dialog |
||||
|
ref="dialogRef" |
||||
|
:title="$t('system.shared.selectRole.dialog.title')" |
||||
|
width="800px" |
||||
|
height="500px" |
||||
|
:can-maximize="false" |
||||
|
:buttons="[ |
||||
|
{ |
||||
|
label: $t('confirm'), |
||||
|
click: () => { |
||||
|
const ids = Tools.extractProperties(gridRef.getSelectedRows(), 'id'); |
||||
|
emit('afterSelected', ids, dialogRef); |
||||
|
}, |
||||
|
}, |
||||
|
]" |
||||
|
> |
||||
|
<div class="px-2" style="height: 100%"> |
||||
|
<w-grid |
||||
|
ref="gridRef" |
||||
|
:title="$t('system.shared.selectRole.dialog.grid.title')" |
||||
|
selection="multiple" |
||||
|
:full-screen-button="false" |
||||
|
:toolbar-configure="{ noIcon: false }" |
||||
|
:toolbar-actions="['query', 'refresh']" |
||||
|
:query-form-fields="[ |
||||
|
{ name: 'code', label: $t('code'), type: 'text' }, |
||||
|
{ name: 'name', label: $t('name'), type: 'text' }, |
||||
|
{ |
||||
|
name: 'enable', |
||||
|
label: $t('enable'), |
||||
|
type: 'select', |
||||
|
options: Options.yesNo(), |
||||
|
queryOperator: 'equals', |
||||
|
}, |
||||
|
{ |
||||
|
name: 'dataComeFrom', |
||||
|
label: $t('dataComeFrom'), |
||||
|
type: 'select', |
||||
|
options: Options.enum(DataComeFromEnum), |
||||
|
queryOperator: 'equals', |
||||
|
}, |
||||
|
]" |
||||
|
:auto-fetch-data="false" |
||||
|
:fetch-data-url="fetchDataUrl + '?' + foreignKey + '=' + foreignValue" |
||||
|
:columns="[ |
||||
|
{ name: 'code', label: $t('code') }, |
||||
|
{ name: 'name', label: $t('name') }, |
||||
|
{ |
||||
|
name: 'status', |
||||
|
label: t('status'), |
||||
|
format: Formater.enableTag(), |
||||
|
}, |
||||
|
{ name: 'lastModifier', label: t('lastModifier') }, |
||||
|
{ name: 'lastModifyDate', label: t('lastModifyDate') }, |
||||
|
]" |
||||
|
></w-grid> |
||||
|
</div> |
||||
|
</w-dialog> |
||||
|
</template> |
||||
|
<script setup lang="ts"> |
||||
|
import { ref, nextTick } from 'vue'; |
||||
|
import { useI18n } from 'vue-i18n'; |
||||
|
import { Environment, Tools, EnumTools, Options, Formater } from 'platform-core'; |
||||
|
|
||||
|
const props = defineProps({ |
||||
|
opener: { type: Object, default: undefined }, |
||||
|
fetchDataUrl: { type: String, default: '' }, |
||||
|
foreignKey: { type: String, default: '' }, |
||||
|
foreignValue: { type: String, default: '' }, |
||||
|
}); |
||||
|
|
||||
|
const emit = defineEmits<{ |
||||
|
(e: 'afterSelected', ids: string[], dialogComponent: any): void; |
||||
|
}>(); |
||||
|
|
||||
|
const { t } = useI18n(); |
||||
|
|
||||
|
const dialogRef = ref(); |
||||
|
const gridRef = ref(); |
||||
|
const foreignKeyRef = ref(); |
||||
|
|
||||
|
const open = (foreignKey: string) => { |
||||
|
foreignKeyRef.value = foreignKey; |
||||
|
dialogRef.value.show(); |
||||
|
|
||||
|
nextTick(() => { |
||||
|
gridRef.value.refresh(); |
||||
|
}); |
||||
|
}; |
||||
|
|
||||
|
const close = () => { |
||||
|
dialogRef.value.hide(); |
||||
|
}; |
||||
|
|
||||
|
defineExpose({ |
||||
|
open, |
||||
|
close, |
||||
|
}); |
||||
|
|
||||
|
const DataComeFromEnum = await EnumTools.fetch('io.sc.platform.orm.api.enums.DataComeFrom'); |
||||
|
</script> |
@ -0,0 +1,141 @@ |
|||||
|
<template> |
||||
|
<w-grid |
||||
|
ref="gridRef" |
||||
|
:title="$t('system.shared.selectRole.grid.title')" |
||||
|
:config-button="false" |
||||
|
selection="multiple" |
||||
|
:checkbox-selection="true" |
||||
|
:fetch-data-url="fetchDataUrl + '?' + foreignKey + '=' + foreignValue" |
||||
|
:auto-fetch-data="false" |
||||
|
:toolbar-configure="{ noIcon: true }" |
||||
|
:toolbar-actions="[ |
||||
|
'refresh', |
||||
|
'separator', |
||||
|
{ |
||||
|
name: 'selectIn', |
||||
|
label: $t('system.shared.selectRole.grid.toolbar.selectIn'), |
||||
|
enableIf: () => { |
||||
|
return foreignValue ? true : false; |
||||
|
}, |
||||
|
click: () => { |
||||
|
dialogRef.open(foreignValue); |
||||
|
}, |
||||
|
}, |
||||
|
{ |
||||
|
name: 'selectOut', |
||||
|
label: $t('system.shared.selectRole.grid.toolbar.selectOut'), |
||||
|
enableIf: () => { |
||||
|
return foreignValue && gridRef?.getSelectedRows()?.length > 0; |
||||
|
}, |
||||
|
click: (arg) => { |
||||
|
const ids = Tools.extractProperties(arg.selecteds, 'id'); |
||||
|
DialogManager.confirm($t('system.shared.selectRole.grid.toolbar.selectOut.tip'), () => { |
||||
|
emit('selectOut', ids, gridRef); |
||||
|
}); |
||||
|
}, |
||||
|
}, |
||||
|
'separator', |
||||
|
{ |
||||
|
name: 'selectAllIn', |
||||
|
label: $t('system.shared.selectRole.grid.toolbar.selectAllIn'), |
||||
|
enableIf: () => { |
||||
|
return foreignValue ? true : false; |
||||
|
}, |
||||
|
click: () => { |
||||
|
DialogManager.confirm($t('system.shared.selectRole.grid.toolbar.selectAllIn.tip'), () => { |
||||
|
emit('selectAllIn', gridRef); |
||||
|
}); |
||||
|
}, |
||||
|
}, |
||||
|
{ |
||||
|
name: 'selectAllOut', |
||||
|
label: $t('system.shared.selectRole.grid.toolbar.selectAllOut'), |
||||
|
enableIf: () => { |
||||
|
return foreignValue && gridRef?.getRows()?.length > 0; |
||||
|
}, |
||||
|
click: () => { |
||||
|
DialogManager.confirm($t('system.shared.selectRole.grid.toolbar.selectAllOut.tip'), () => { |
||||
|
emit('selectAllOut', gridRef); |
||||
|
}); |
||||
|
}, |
||||
|
}, |
||||
|
'separator', |
||||
|
'view', |
||||
|
]" |
||||
|
:columns="[ |
||||
|
{ width: 150, name: 'code', label: $t('code') }, |
||||
|
{ width: '100%', name: 'name', label: $t('name') }, |
||||
|
{ |
||||
|
width: 80, |
||||
|
name: 'enable', |
||||
|
label: $t('status'), |
||||
|
format: Formater.enableTag(), |
||||
|
}, |
||||
|
]" |
||||
|
:viewer="{ |
||||
|
panel: { |
||||
|
columnNum: 1, |
||||
|
fields: [ |
||||
|
{ name: 'id', label: $t('id') }, |
||||
|
{ name: 'code', label: $t('code') }, |
||||
|
{ name: 'name', label: $t('name') }, |
||||
|
{ name: 'description', label: $t('description') }, |
||||
|
{ name: 'enable', label: $t('enable') }, |
||||
|
{ name: 'dataComeFrom', label: $t('dataComeFrom') }, |
||||
|
{ name: 'creator', label: $t('creator') }, |
||||
|
{ name: 'createDate', label: $t('createDate') }, |
||||
|
{ name: 'lastModifier', label: $t('lastModifier') }, |
||||
|
{ name: 'lastModifyDate', label: $t('lastModifyDate') }, |
||||
|
{ name: 'corporationCode', label: $t('corporationCode') }, |
||||
|
], |
||||
|
}, |
||||
|
}" |
||||
|
></w-grid> |
||||
|
<SelectRoleDialog |
||||
|
ref="dialogRef" |
||||
|
:opener="gridRef" |
||||
|
:fetch-data-url="fetchOtherDataUrl" |
||||
|
:foreign-key="foreignKey" |
||||
|
:foreign-value="foreignValue" |
||||
|
@after-selected=" |
||||
|
(ids: string[]) => { |
||||
|
emit('selectIn', ids, gridRef, dialogRef); |
||||
|
} |
||||
|
" |
||||
|
></SelectRoleDialog> |
||||
|
</template> |
||||
|
<script setup lang="ts"> |
||||
|
import { ref, onUpdated } from 'vue'; |
||||
|
|
||||
|
import { EnumTools, DialogManager, Formater, Tools } from 'platform-core'; |
||||
|
import SelectRoleDialog from './SelectRoleDialog.vue'; |
||||
|
|
||||
|
const props = defineProps({ |
||||
|
fetchDataUrl: { type: String, default: '' }, |
||||
|
fetchOtherDataUrl: { type: String, default: '' }, |
||||
|
foreignKey: { type: String, default: '' }, |
||||
|
foreignValue: { type: String, default: '' }, |
||||
|
}); |
||||
|
|
||||
|
const emit = defineEmits<{ |
||||
|
(e: 'selectIn', ids: string[], gridComponent: any, dialogComponent: any): void; |
||||
|
(e: 'selectOut', ids: string[], gridComponent: any): void; |
||||
|
(e: 'selectAllIn', gridComponent: any): void; |
||||
|
(e: 'selectAllOut', gridComponent: any): void; |
||||
|
}>(); |
||||
|
|
||||
|
const gridRef = ref(); |
||||
|
const dialogRef = ref(); |
||||
|
|
||||
|
const refresh = () => { |
||||
|
gridRef.value.refresh(); |
||||
|
}; |
||||
|
|
||||
|
onUpdated(() => { |
||||
|
gridRef.value.refresh(); |
||||
|
}); |
||||
|
|
||||
|
defineExpose({ |
||||
|
refresh, |
||||
|
}); |
||||
|
</script> |
@ -0,0 +1,106 @@ |
|||||
|
<template> |
||||
|
<w-dialog |
||||
|
ref="dialogRef" |
||||
|
:title="$t('system.shared.selectUser.dialog.title')" |
||||
|
width="800px" |
||||
|
height="500px" |
||||
|
:can-maximize="false" |
||||
|
:buttons="[ |
||||
|
{ |
||||
|
label: $t('confirm'), |
||||
|
click: () => { |
||||
|
const ids = Tools.extractProperties(gridRef.getSelectedRows(), 'id'); |
||||
|
emit('afterSelected', ids, dialogRef); |
||||
|
}, |
||||
|
}, |
||||
|
]" |
||||
|
> |
||||
|
<div class="px-2" style="height: 100%"> |
||||
|
<w-grid |
||||
|
ref="gridRef" |
||||
|
:title="$t('system.shared.selectUser.dialog.grid.title')" |
||||
|
selection="multiple" |
||||
|
:full-screen-button="false" |
||||
|
:toolbar-configure="{ noIcon: false }" |
||||
|
:toolbar-actions="['query', 'refresh']" |
||||
|
:query-form-fields="[ |
||||
|
{ name: 'loginName', label: $t('loginName'), type: 'text' }, |
||||
|
{ name: 'userName', label: $t('userName'), type: 'text' }, |
||||
|
{ |
||||
|
name: 'enable', |
||||
|
label: $t('enable'), |
||||
|
type: 'select', |
||||
|
options: Options.yesNo(), |
||||
|
queryOperator: 'equals', |
||||
|
}, |
||||
|
{ |
||||
|
name: 'dataComeFrom', |
||||
|
label: $t('dataComeFrom'), |
||||
|
type: 'select', |
||||
|
options: Options.enum(DataComeFromEnum), |
||||
|
queryOperator: 'equals', |
||||
|
}, |
||||
|
]" |
||||
|
:auto-fetch-data="false" |
||||
|
:fetch-data-url="fetchDataUrl + '?' + foreignKey + '=' + foreignValue" |
||||
|
:columns="[ |
||||
|
{ width: 100, name: 'loginName', label: $t('loginName') }, |
||||
|
{ width: 100, name: 'userName', label: $t('userName') }, |
||||
|
{ |
||||
|
name: 'status', |
||||
|
label: $t('status'), |
||||
|
format: (value, row) => { |
||||
|
return { |
||||
|
componentType: UserStatusTag, |
||||
|
attrs: row, |
||||
|
}; |
||||
|
}, |
||||
|
}, |
||||
|
]" |
||||
|
></w-grid> |
||||
|
</div> |
||||
|
</w-dialog> |
||||
|
</template> |
||||
|
<script setup lang="ts"> |
||||
|
import { ref, nextTick } from 'vue'; |
||||
|
import { useI18n } from 'vue-i18n'; |
||||
|
import { Environment, Tools, EnumTools, Options, Formater } from 'platform-core'; |
||||
|
import UserStatusTag from './UserStatusTag.vue'; |
||||
|
|
||||
|
const props = defineProps({ |
||||
|
opener: { type: Object, default: undefined }, |
||||
|
fetchDataUrl: { type: String, default: '' }, |
||||
|
foreignKey: { type: String, default: '' }, |
||||
|
foreignValue: { type: String, default: '' }, |
||||
|
}); |
||||
|
|
||||
|
const emit = defineEmits<{ |
||||
|
(e: 'afterSelected', ids: string[], dialogComponent: any): void; |
||||
|
}>(); |
||||
|
|
||||
|
const { t } = useI18n(); |
||||
|
|
||||
|
const dialogRef = ref(); |
||||
|
const gridRef = ref(); |
||||
|
const foreignKeyRef = ref(); |
||||
|
|
||||
|
const open = (foreignKey: string) => { |
||||
|
foreignKeyRef.value = foreignKey; |
||||
|
dialogRef.value.show(); |
||||
|
|
||||
|
nextTick(() => { |
||||
|
gridRef.value.refresh(); |
||||
|
}); |
||||
|
}; |
||||
|
|
||||
|
const close = () => { |
||||
|
dialogRef.value.hide(); |
||||
|
}; |
||||
|
|
||||
|
defineExpose({ |
||||
|
open, |
||||
|
close, |
||||
|
}); |
||||
|
|
||||
|
const DataComeFromEnum = await EnumTools.fetch('io.sc.platform.orm.api.enums.DataComeFrom'); |
||||
|
</script> |
@ -0,0 +1,161 @@ |
|||||
|
<template> |
||||
|
<w-grid |
||||
|
ref="gridRef" |
||||
|
:title="$t('system.shared.selectUser.grid.title')" |
||||
|
:config-button="false" |
||||
|
selection="multiple" |
||||
|
:checkbox-selection="true" |
||||
|
:fetch-data-url="fetchDataUrl + '?' + foreignKey + '=' + foreignValue" |
||||
|
:auto-fetch-data="false" |
||||
|
:toolbar-configure="{ noIcon: true }" |
||||
|
:toolbar-actions="[ |
||||
|
'refresh', |
||||
|
'separator', |
||||
|
{ |
||||
|
name: 'selectIn', |
||||
|
label: $t('system.shared.selectUser.grid.toolbar.selectIn'), |
||||
|
enableIf: () => { |
||||
|
return foreignValue ? true : false; |
||||
|
}, |
||||
|
click: () => { |
||||
|
dialogRef.open(foreignValue); |
||||
|
}, |
||||
|
}, |
||||
|
{ |
||||
|
name: 'selectOut', |
||||
|
label: $t('system.shared.selectUser.grid.toolbar.selectOut'), |
||||
|
enableIf: () => { |
||||
|
return foreignValue && gridRef?.getSelectedRows()?.length > 0; |
||||
|
}, |
||||
|
click: (arg) => { |
||||
|
const ids = Tools.extractProperties(arg.selecteds, 'id'); |
||||
|
DialogManager.confirm($t('system.shared.selectUser.grid.toolbar.selectOut.tip'), () => { |
||||
|
emit('selectOut', ids, gridRef); |
||||
|
}); |
||||
|
}, |
||||
|
}, |
||||
|
'separator', |
||||
|
{ |
||||
|
name: 'selectAllIn', |
||||
|
label: $t('system.shared.selectUser.grid.toolbar.selectAllIn'), |
||||
|
enableIf: () => { |
||||
|
return foreignValue ? true : false; |
||||
|
}, |
||||
|
click: () => { |
||||
|
DialogManager.confirm($t('system.shared.selectUser.grid.toolbar.selectAllIn.tip'), () => { |
||||
|
emit('selectAllIn', gridRef); |
||||
|
}); |
||||
|
}, |
||||
|
}, |
||||
|
{ |
||||
|
name: 'selectAllOut', |
||||
|
label: $t('system.shared.selectUser.grid.toolbar.selectAllOut'), |
||||
|
enableIf: () => { |
||||
|
return foreignValue && gridRef?.getRows()?.length > 0; |
||||
|
}, |
||||
|
click: () => { |
||||
|
DialogManager.confirm($t('system.shared.selectUser.grid.toolbar.selectAllOut.tip'), () => { |
||||
|
emit('selectAllOut', gridRef); |
||||
|
}); |
||||
|
}, |
||||
|
}, |
||||
|
'separator', |
||||
|
'view', |
||||
|
]" |
||||
|
:columns="[ |
||||
|
{ width: 150, name: 'loginName', label: $t('loginName') }, |
||||
|
{ width: '100%', name: 'userName', label: $t('userName') }, |
||||
|
{ |
||||
|
width: 150, |
||||
|
name: 'enable', |
||||
|
label: $t('status'), |
||||
|
format: (value, row) => { |
||||
|
return { |
||||
|
componentType: UserStatusTag, |
||||
|
attrs: row, |
||||
|
}; |
||||
|
}, |
||||
|
}, |
||||
|
]" |
||||
|
:viewer="{ |
||||
|
panel: { |
||||
|
columnNum: 1, |
||||
|
fields: [ |
||||
|
{ name: 'id', label: $t('id') }, |
||||
|
{ name: 'loginName', label: $t('loginName') }, |
||||
|
{ name: 'userName', label: $t('userName') }, |
||||
|
{ name: 'description', label: $t('description') }, |
||||
|
{ |
||||
|
name: 'enable', |
||||
|
label: $t('enable'), |
||||
|
format: (value) => { |
||||
|
return value; |
||||
|
}, |
||||
|
}, |
||||
|
{ name: 'accountExpired', label: $t('accountExpired') }, |
||||
|
{ name: 'accountLocked', label: $t('accountLocked') }, |
||||
|
{ name: 'credentialsExpired', label: $t('credentialsExpired') }, |
||||
|
{ name: 'email', label: $t('email') }, |
||||
|
{ name: 'phone', label: $t('phone') }, |
||||
|
{ name: 'mobile', label: $t('mobile') }, |
||||
|
{ name: 'weixin', label: $t('weixin') }, |
||||
|
{ name: 'qq', label: $t('qq') }, |
||||
|
{ name: 'dataComeFrom', label: $t('dataComeFrom') }, |
||||
|
{ name: 'creator', label: $t('creator') }, |
||||
|
{ name: 'createDate', label: $t('createDate') }, |
||||
|
{ name: 'lastModifier', label: $t('lastModifier') }, |
||||
|
{ name: 'lastModifyDate', label: $t('lastModifyDate') }, |
||||
|
{ name: 'corporationCode', label: $t('corporationCode') }, |
||||
|
], |
||||
|
}, |
||||
|
}" |
||||
|
></w-grid> |
||||
|
<SelectUserDialog |
||||
|
ref="dialogRef" |
||||
|
:opener="gridRef" |
||||
|
:fetch-data-url="fetchOtherDataUrl" |
||||
|
:foreign-key="foreignKey" |
||||
|
:foreign-value="foreignValue" |
||||
|
@after-selected=" |
||||
|
(ids: string[]) => { |
||||
|
emit('selectIn', ids, gridRef, dialogRef); |
||||
|
} |
||||
|
" |
||||
|
></SelectUserDialog> |
||||
|
</template> |
||||
|
<script setup lang="ts"> |
||||
|
import { ref, onUpdated } from 'vue'; |
||||
|
import { DialogManager, Tools } from 'platform-core'; |
||||
|
import SelectUserDialog from './SelectUserDialog.vue'; |
||||
|
import UserStatusTag from './UserStatusTag.vue'; |
||||
|
|
||||
|
const props = defineProps({ |
||||
|
fetchDataUrl: { type: String, default: '' }, |
||||
|
fetchOtherDataUrl: { type: String, default: '' }, |
||||
|
foreignKey: { type: String, default: '' }, |
||||
|
foreignValue: { type: String, default: '' }, |
||||
|
}); |
||||
|
|
||||
|
const emit = defineEmits<{ |
||||
|
(e: 'selectIn', ids: string[], gridComponent: any, dialogComponent: any): void; |
||||
|
(e: 'selectOut', ids: string[], gridComponent: any): void; |
||||
|
(e: 'selectAllIn', gridComponent: any): void; |
||||
|
(e: 'selectAllOut', gridComponent: any): void; |
||||
|
}>(); |
||||
|
|
||||
|
const gridRef = ref(); |
||||
|
const dialogRef = ref(); |
||||
|
|
||||
|
const refresh = () => { |
||||
|
gridRef.value.refresh(); |
||||
|
}; |
||||
|
|
||||
|
onUpdated(() => { |
||||
|
console.log('onUpdated....'); |
||||
|
gridRef.value.refresh(); |
||||
|
}); |
||||
|
|
||||
|
defineExpose({ |
||||
|
refresh, |
||||
|
}); |
||||
|
</script> |
@ -0,0 +1,17 @@ |
|||||
|
<template> |
||||
|
<div> |
||||
|
<q-chip v-if="enable && !accountExpired && !accountLocked && !credentialsExpired" color="green" text-color="white" :label="$t('normal')" dense></q-chip> |
||||
|
<q-chip v-if="!enable" color="red" text-color="white" :label="$t('disable')" dense></q-chip> |
||||
|
<q-chip v-if="accountExpired" color="red" text-color="white" :label="$t('accountExpired')" dense></q-chip> |
||||
|
<q-chip v-if="accountLocked" color="red" text-color="white" :label="$t('accountLocked')" dense></q-chip> |
||||
|
<q-chip v-if="credentialsExpired" color="red" text-color="white" :label="$t('credentialsExpired')" dense></q-chip> |
||||
|
</div> |
||||
|
</template> |
||||
|
<script setup lang="ts"> |
||||
|
const props = defineProps({ |
||||
|
enable: { type: Boolean, default: true }, |
||||
|
accountExpired: { type: Boolean, default: false }, |
||||
|
accountLocked: { type: Boolean, default: false }, |
||||
|
credentialsExpired: { type: Boolean, default: false }, |
||||
|
}); |
||||
|
</script> |
Loading…
Reference in new issue