lanyuanxiaoyao/gringotts
1
0
Fork 0
Code Activity

refactor(web): 将权限对话框按类型拆分为独立文件- 将 dialog-permission.js拆分为 dialog-confirmation.js 和 dialog-authentication.js

Browse Source 
- 更新 resourceList 函数以支持 showMode 参数
- 调整 tab-data.js 和 tab-market.js 以适应新的对话框结构
This commit is contained in:
兰缘小妖
2024-12-18 16:26:36 +08:00
parent 39e4e03437
commit 43e9306017
5 changed files with 455 additions and 350 deletions
Download Patch File Download Diff File Expand all files Collapse all files

167
gringotts-frontend/components/permission/dialog-authentication.js Normal file
View File

@@ -0,0 +1,167 @@
import './dialog-permission.css'
import {
apiGet,
apiPost,
formCreatedUserAndModifiedUser,
formInputClearable,
formInputMultiFileStatic,
horizontalFormOptions,
information,
inputFileFormItemCommonOptions,
size100MB
} from "../constants.js";
import {resourceList} from "../../pages/index/tab-data.js";
import {resourceDetailDialog} from "../resource/dialog-resource.js";
function detailForm(showCreatedUserAndModifiedUser = false) {
return {
debug: information.debug,
id: 'permission_form',
type: 'form',
...horizontalFormOptions(),
horizontal: {
left: 2,
},
body: [
{
type: 'hidden',
name: 'id',
},
{
type: 'picker',
name: 'targetId',
label: '数据资源',
required: true,
multiple: false,
size: 'md',
valueField: 'id',
labelField: 'name',
source: apiGet('${base}/data_resource/list_no_authentication'),
pickerSchema: {
...resourceList(),
},
staticSchema: {
type: 'tpl',
tpl: "<span class='text-primary' style='cursor: pointer'>${targetName}</span>",
onEvent: {
click: {
actions: [
{
actionType: 'dialog',
...resourceDetailDialog('targetId'),
}
]
}
}
}
},
{
type: 'textarea',
placeholder: '请输入确权说明',
label: '确权说明',
name: 'description',
...formInputClearable,
},
formInputMultiFileStatic('evidenceFiles', '相关材料'),
{
visibleOn: '${!detail}',
type: 'input-file',
label: '相关材料',
name: 'evidenceFiles',
multiple: true,
required: true,
joinValues: false,
...inputFileFormItemCommonOptions(undefined, size100MB),
},
{
type: 'input-datetime-range',
name: 'activeTime',
extraName: 'expiredTime',
label: '授权时间',
required: true,
format: 'YYYY-MM-DD HH:mm:ss',
shortcuts: [
'7dayslater',
'14dayslater',
'30dayslater',
'180dayslater',
'365dayslater',
]
},
...(showCreatedUserAndModifiedUser ? formCreatedUserAndModifiedUser() : [])
]
}
}
export function authenticationAddDialog() {
let data = {add: true, authentication: true}
return {
actionType: 'dialog',
dialog: {
title: '新增授权申请',
size: 'md',
actions: [
{
type: 'reset',
label: '重置',
},
{
type: 'submit',
label: '确定',
level: 'primary',
}
],
body: {
...detailForm(),
api: apiPost(`\${base}/authentication/save`),
data: data,
}
}
}
}
export function authenticationDetailDialog(field = 'id', actions = []) {
let data = {detail: true, authentication: true}
return {
actionType: 'dialog',
dialog: {
title: '授权申请详情',
size: 'md',
actions: actions,
body: {
...detailForm(true),
initApi: apiGet(`\${base}/authentication/detail/\${${field}}`),
static: true,
data: data,
}
}
}
}
export function authenticationEditeDialog(field = 'id') {
let data = {edit: true, authentication: true}
return {
actionType: 'dialog',
dialog: {
title: '授权申请详情',
size: 'md',
actions: [
{
type: 'reset',
label: '重置',
},
{
type: 'submit',
label: '确定',
level: 'primary',
}
],
body: {
...detailForm(),
api: apiPost(`\${base}/authentication/save`),
initApi: apiGet(`\${base}/authentication/detail/\${${field}}`),
data: data,
},
}
}
}

152
gringotts-frontend/components/permission/dialog-confirmation.js Normal file
View File

@@ -0,0 +1,152 @@
import './dialog-permission.css'
import {
apiGet,
apiPost,
formCreatedUserAndModifiedUser,
formInputClearable,
formInputMultiFileStatic,
horizontalFormOptions,
information,
inputFileFormItemCommonOptions,
size100MB
} from "../constants.js";
import {resourceList} from "../../pages/index/tab-data.js";
import {resourceDetailDialog} from "../resource/dialog-resource.js";
function detailForm(showCreatedUserAndModifiedUser = false) {
return {
debug: information.debug,
id: 'permission_form',
type: 'form',
...horizontalFormOptions(),
horizontal: {
left: 2,
},
body: [
{
type: 'hidden',
name: 'id',
},
{
type: 'picker',
name: 'targetId',
label: '数据资源',
required: true,
multiple: false,
size: 'md',
valueField: 'id',
labelField: 'name',
source: apiGet('${base}/data_resource/list_no_confirmation'),
pickerSchema: {
...resourceList(true),
},
staticSchema: {
type: 'tpl',
tpl: "<span class='text-primary' style='cursor: pointer'>${targetName}</span>",
onEvent: {
click: {
actions: [
{
actionType: 'dialog',
...resourceDetailDialog('targetId'),
}
]
}
}
}
},
{
type: 'textarea',
placeholder: '请输入确权说明',
label: '确权说明',
name: 'description',
...formInputClearable,
},
formInputMultiFileStatic('evidenceFiles', '相关材料'),
{
visibleOn: '${!detail}',
type: 'input-file',
label: '相关材料',
name: 'evidenceFiles',
multiple: true,
required: true,
joinValues: false,
...inputFileFormItemCommonOptions(undefined, size100MB),
},
...(showCreatedUserAndModifiedUser ? formCreatedUserAndModifiedUser() : [])
]
}
}
export function confirmationAddDialog() {
let data = {add: true, confirmation: true}
return {
actionType: 'dialog',
dialog: {
title: '新增确权申请',
size: 'md',
actions: [
{
type: 'reset',
label: '重置',
},
{
type: 'submit',
label: '确定',
level: 'primary',
}
],
body: {
...detailForm(),
api: apiPost(`\${base}/confirmation/save`),
data: data,
}
}
}
}
export function confirmationDetailDialog(field = 'id', actions = []) {
let data = {detail: true, confirmation: true}
return {
actionType: 'dialog',
dialog: {
title: '确权申请详情',
size: 'md',
actions: actions,
body: {
...detailForm(true),
initApi: apiGet(`\${base}/confirmation/detail/\${${field}}`),
static: true,
data: data,
}
}
}
}
export function confirmationEditeDialog(field = 'id') {
let data = {edit: true, confirmation: true}
return {
actionType: 'dialog',
dialog: {
title: '确权申请详情',
size: 'md',
actions: [
{
type: 'reset',
label: '重置',
},
{
type: 'submit',
label: '确定',
level: 'primary',
}
],
body: {
...detailForm(),
api: apiPost(`\${base}/confirmation/save`),
initApi: apiGet(`\${base}/confirmation/detail/\${${field}}`),
data: data,
},
}
}
}

210
gringotts-frontend/components/permission/dialog-permission.js
View File

@@ -1,208 +1,2 @@
import './dialog-permission.css'
import {
apiGet,
apiPost,
formCreatedUserAndModifiedUser,
formInputClearable,
formInputMultiFileStatic,
horizontalFormOptions,
information,
inputFileFormItemCommonOptions,
size100MB
} from "../constants.js";
import {resourceList} from "../../pages/index/tab-data.js";
import {resourceDetailDialog} from "../resource/dialog-resource.js";
const CONFIRMATION_TYPE = 'confirmation'
const AUTHENTICATION_TYPE = 'authentication'
const CONFIRMATION = {
type: 'confirmation',
pickerApi: apiGet('${base}/data_resource/list_no_confirmation')
}
const AUTHENTICATION = {
type: 'authentication',
pickerApi: apiGet('${base}/data_resource/list_no_authentication')
}
function detailForm(pickerApi = apiGet('${base}/data_resource/list'), showCreatedUserAndModifiedUser = false) {
return {
debug: information.debug,
id: 'permission_form',
type: 'form',
...horizontalFormOptions(),
horizontal: {
left: 2,
},
body: [
{
type: 'hidden',
name: 'id',
},
{
type: 'picker',
name: 'targetId',
label: '数据资源',
required: true,
multiple: false,
size: 'md',
valueField: 'id',
labelField: 'name',
source: pickerApi,
pickerSchema: {
...resourceList(),
},
staticSchema: {
type: 'tpl',
tpl: "<span class='text-primary' style='cursor: pointer'>${targetName}</span>",
onEvent: {
click: {
actions: [
{
actionType: 'dialog',
...resourceDetailDialog('targetId'),
}
]
}
}
}
},
{
type: 'textarea',
placeholder: '请输入确权说明',
label: '确权说明',
name: 'description',
...formInputClearable,
},
formInputMultiFileStatic('evidenceFiles', '相关材料'),
{
visibleOn: '${!detail}',
type: 'input-file',
label: '相关材料',
name: 'evidenceFiles',
multiple: true,
required: true,
joinValues: false,
...inputFileFormItemCommonOptions(undefined, size100MB),
},
{
visibleOn: `\${${AUTHENTICATION_TYPE}}`,
type: 'input-datetime-range',
name: 'activeTime',
extraName: 'expiredTime',
label: '授权时间',
required: true,
format: 'YYYY-MM-DD HH:mm:ss',
shortcuts: [
'7dayslater',
'14dayslater',
'30dayslater',
'180dayslater',
'365dayslater',
]
},
...(showCreatedUserAndModifiedUser ? formCreatedUserAndModifiedUser() : [])
]
}
}
export function confirmationAddDialog() {
return permissionAddDialog(CONFIRMATION)
}
export function authenticationAddDialog() {
return permissionAddDialog(AUTHENTICATION)
}
function permissionAddDialog(config) {
let data = {add: true}
data[config.type] = true
return {
actionType: 'dialog',
dialog: {
title: '新增确权申请',
size: 'md',
actions: [
{
type: 'reset',
label: '重置',
},
{
type: 'submit',
label: '确定',
level: 'primary',
}
],
body: {
...detailForm(config.pickerApi),
api: apiPost(`\${base}/${config.type}/save`),
data: data,
}
}
}
}
export function confirmationDetailDialog(field = 'id', actions = []) {
return permissionDetailDialog(CONFIRMATION, field, actions)
}
export function authenticationDetailDialog(field = 'id', actions = []) {
return permissionDetailDialog(AUTHENTICATION, field, actions)
}
function permissionDetailDialog(config, field = 'id', actions = []) {
let data = {detail: true}
data[config.type] = true
return {
actionType: 'dialog',
dialog: {
title: '确权申请详情',
size: 'md',
actions: actions,
body: {
...detailForm(config.pickerApi, true),
initApi: apiGet(`\${base}/${config.type}/detail/\${${field}}`),
static: true,
data: data,
}
}
}
}
export function confirmationEditeDialog(field = 'id') {
return permissionEditeDialog(CONFIRMATION, field)
}
export function authenticationEditeDialog(field = 'id') {
return permissionEditeDialog(AUTHENTICATION, field)
}
function permissionEditeDialog(config, field = 'id') {
let data = {edit: true}
data[config.type] = true
return {
actionType: 'dialog',
dialog: {
title: '确权申请详情',
size: 'md',
actions: [
{
type: 'reset',
label: '重置',
},
{
type: 'submit',
label: '确定',
level: 'primary',
}
],
body: {
...detailForm(config.pickerApi),
api: apiPost(`\${base}/${config.type}/save`),
initApi: apiGet(`\${base}/${config.type}/detail/\${${field}}`),
data: data,
},
}
}
}
export * from './dialog-confirmation'
export * from './dialog-authentication'

97
gringotts-frontend/pages/index/tab-data.js
View File

@@ -15,8 +15,9 @@ import {
timeField,
userOnly
} from "../../components/constants.js";
import {wareAddDialog, wareDetailDialog, wareEditeDialog} from "../../components/ware/dialog-ware.js";
export function resourceList() {
export function resourceList(showMode = false) {
return {
type: 'crud',
api: apiGet('${base}/data_resource/list'),
@@ -50,6 +51,7 @@ export function resourceList() {
...resourceDetailDialog(),
},
{
visibleOn: !showMode,
type: 'dropdown-button',
level: 'link',
icon: 'fa fa-ellipsis-h',
@@ -89,6 +91,97 @@ export function tabData() {
title: '数据资源',
icon: 'fa fa-database',
reload: true,
body: resourceList(),
body: {
type: 'tabs',
tabs: [
{
title: '资源定义',
tab: resourceList()
},
{
title: '资源上架',
tab: {
type: 'crud',
api: apiGet('${base}/ware/list'),
...crudCommonOptions(),
headerToolbar: [
'reload',
{
type: 'action',
label: '',
icon: 'fa fa-plus',
...wareAddDialog()
},
],
columns: [
{
name: 'name',
label: '名称',
width: 200,
},
{
name: 'description',
label: '描述',
},
mappingField('state', '状态', permissionStateMapping),
timeField('createdTime', '创建时间'),
operationField('操作', undefined, [
{
type: 'action',
label: '查看',
level: 'link',
...wareDetailDialog(),
},
{
visibleOn: "${state === 'CHECKING'}",
type: 'action',
label: '撤销',
level: 'link',
confirmTitle: '确认撤销',
confirmText: '确认撤销名称为「${name}」的确权申请吗？',
actionType: 'ajax',
api: apiGet('${base}/ware/retract/${id}'),
},
{
visibleOn: "${state === 'DRAFT' || state === 'REJECT'}",
type: 'action',
label: '提交',
level: 'link',
confirmTitle: '确认提交',
confirmText: '确认提交名称为「${name}」的确权申请吗？',
actionType: 'ajax',
api: apiGet('${base}/ware/submit/${id}'),
},
{
type: 'dropdown-button',
level: 'link',
icon: 'fa fa-ellipsis-h',
hideCaret: true,
trigger: 'hover',
buttons: [
{
disabledOn: "${state !== 'DRAFT'}",
type: 'action',
label: '编辑',
level: 'link',
...wareEditeDialog(),
},
{
disabledOn: "${state === 'CHECKING'}",
type: 'action',
label: "删除",
confirmTitle: '确认删除',
confirmText: '确认删除名称为「${name}」的确权申请吗？删除后对应的数据资源处于未确权状态。',
actionType: 'ajax',
api: apiGet('${base}/ware/remove/${id}'),
},
]
},
]),
]
}
}
]
}
}
}

179
gringotts-frontend/pages/index/tab-market.js
View File

@@ -1,12 +1,5 @@
import {wareAddDialog, wareDetailDialog, wareEditeDialog} from "../../components/ware/dialog-ware.js";
import {
apiGet,
crudCommonOptions,
mappingField,
operationField,
permissionStateMapping,
timeField
} from "../../components/constants.js";
import {wareDetailDialog} from "../../components/ware/dialog-ware.js";
import {apiGet, crudCommonOptions} from "../../components/constants.js";
import {authenticationAddDialog} from "../../components/permission/dialog-permission.js";
export function tabMarket() {
@@ -14,140 +7,46 @@ export function tabMarket() {
title: '数据市场',
icon: 'fa fa-store',
reload: true,
body: [
{
type: 'tabs',
tabs: [
{
title: '公开数据',
body: {
type: 'crud',
api: {
...apiGet('${base}/ware/list_public'),
adaptor: (payload, response, api, context) => {
payload.data = payload.data.map(i => {
return {
...i,
targetId: i.resourceId,
}
})
return payload
}
},
...crudCommonOptions(),
headerToolbar: [
'reload',
],
mode: 'cards',
card: {
header: {
title: '${name}',
subTitle: '${createdTime}',
description: '${description}',
avatar: '${icon}',
avatarClassName: 'pull-left thumb-md avatar b-3x m-r'
},
actions: [
{
type: 'action',
label: '查看',
...wareDetailDialog(),
},
{
type: 'action',
label: '申请授权',
...authenticationAddDialog(),
}
]
},
body: {
type: 'crud',
api: {
...apiGet('${base}/ware/list_public'),
adaptor: (payload, response, api, context) => {
payload.data = payload.data.map(i => {
return {
...i,
targetId: i.resourceId,
}
})
return payload
}
},
...crudCommonOptions(),
headerToolbar: [
'reload',
],
mode: 'cards',
card: {
header: {
title: '${name}',
subTitle: '${createdTime}',
description: '${description}',
avatar: '${icon}',
avatarClassName: 'pull-left thumb-md avatar b-3x m-r'
},
actions: [
{
type: 'action',
label: '查看',
...wareDetailDialog(),
},
{
title: '我的数据',
body: {
type: 'crud',
api: apiGet('${base}/ware/list'),
...crudCommonOptions(),
headerToolbar: [
'reload',
{
type: 'action',
label: '',
icon: 'fa fa-plus',
...wareAddDialog()
},
],
columns: [
{
name: 'name',
label: '名称',
width: 200,
},
{
name: 'description',
label: '描述',
},
mappingField('state', '状态', permissionStateMapping),
timeField('createdTime', '创建时间'),
operationField('操作', undefined, [
{
type: 'action',
label: '查看',
level: 'link',
...wareDetailDialog(),
},
{
visibleOn: "${state === 'CHECKING'}",
type: 'action',
label: '撤销',
level: 'link',
confirmTitle: '确认撤销',
confirmText: '确认撤销名称为「${name}」的确权申请吗？',
actionType: 'ajax',
api: apiGet('${base}/ware/retract/${id}'),
},
{
visibleOn: "${state === 'DRAFT' || state === 'REJECT'}",
type: 'action',
label: '提交',
level: 'link',
confirmTitle: '确认提交',
confirmText: '确认提交名称为「${name}」的确权申请吗？',
actionType: 'ajax',
api: apiGet('${base}/ware/submit/${id}'),
},
{
visibleOn: "${!public}",
type: 'dropdown-button',
level: 'link',
icon: 'fa fa-ellipsis-h',
hideCaret: true,
trigger: 'hover',
buttons: [
{
disabledOn: "${state !== 'DRAFT'}",
type: 'action',
label: '编辑',
level: 'link',
...wareEditeDialog(),
},
{
disabledOn: "${state === 'CHECKING'}",
type: 'action',
label: "删除",
confirmTitle: '确认删除',
confirmText: '确认删除名称为「${name}」的确权申请吗？删除后对应的数据资源处于未确权状态。',
actionType: 'ajax',
api: apiGet('${base}/ware/remove/${id}'),
},
]
},
]),
]
}
},
type: 'action',
label: '申请授权',
...authenticationAddDialog(),
}
]
}
]
},
}
}
}