6 changed files with 467 additions and 101 deletions
@ -1,88 +1,426 @@ |
|||||
<template> |
<template> |
||||
<div class="w-[500px] h-[300px]"> |
<div class="h-full"> |
||||
<w-echarts |
<q-splitter v-model="state.splitterModel" class="h-full"> |
||||
:option="{ |
<template #before> |
||||
title: { |
<div class="h-full pr-1"> |
||||
left: 'center', |
<w-grid |
||||
text: '资产余额', |
ref="mainGridRef" |
||||
}, |
title="标准模型映射列表" |
||||
tooltip: { |
:data-url="Environment.apiContextPath('api/rwa/params/data/mapping/main')" |
||||
trigger: 'axis', |
:sort-no="false" |
||||
axisPointer: { |
dense |
||||
type: 'shadow', |
:checkbox-selection="false" |
||||
}, |
:query-form-cols-num="3" |
||||
}, |
:query-form-fields="[ |
||||
grid: { |
{ name: 'mappingTable', label: '目标表', type: 'w-text' }, |
||||
left: '3%', |
{ name: 'mappingFeild', label: '目标字段', type: 'w-text' }, |
||||
right: '4%', |
{ name: 'remark', label: '备注', type: 'w-text' }, |
||||
bottom: '3%', |
{ name: 'fromTable', label: '来源表', type: 'w-text' }, |
||||
containLabel: true, |
{ name: 'fromFeild', label: '来源表字段', type: 'w-text' }, |
||||
}, |
{ name: 'mappingTp', label: '映射方式', type: 'w-select', options: optionsMappingType }, |
||||
dataZoom: [ |
{ |
||||
{ |
name: 'isValid', |
||||
type: 'slider', |
label: '是否有效', |
||||
show: true, // 是否显示滚动条 |
type: 'w-select', |
||||
borderColor: '#2563eb', // 边框颜色 |
options: [ |
||||
showDetail: false, // 是否显示detail，即拖拽时显示详细数值信息 |
{ label: '有效', value: '1' }, |
||||
startValue: 0, // 开始数值 |
{ label: '无效', value: '0' }, |
||||
endValue: 10, // 结束数值 |
], |
||||
filterMode: 'empty', |
}, |
||||
width: '80%', // 滚动条宽度 |
]" |
||||
height: 8, // 滚动条高度 |
:columns="[ |
||||
left: 'center', // 居中显示 |
// { name: 'listId', label: '标准模型映射清单表ID' }, |
||||
zoomLoxk: true, // 是否锁定选择区域的大小 |
{ name: 'mappingTable', label: '目标表', width: 150 }, |
||||
handleSize: 0, // 控制手柄的尺寸 |
{ name: 'mappingFeild', label: '目标字段', width: 100 }, |
||||
bottom: 0, // 距离容器下侧的距离 |
{ name: 'remark', label: '备注', width: 100 }, |
||||
}, |
{ name: 'fromTable', label: '来源表', width: 150 }, |
||||
{ |
{ name: 'fromFeild', label: '来源表字段', width: 100 }, |
||||
type: 'inside', |
{ name: 'mappingTp', label: '映射方式', format: Formater.dictionary(dictMappingType) }, |
||||
zoomOnMouseWheel: false, // 滚动不触发缩放 |
{ name: 'expression', label: '算式运算表达式' }, |
||||
moveOnMouseMove: true, // 鼠标移动触发平移 |
{ name: 'cacheTable', label: '缓存取值表' }, |
||||
moveOnMouseWheel: true, // 鼠标滚动触发平移 |
{ name: 'cacheFeild', label: '缓存取值字段' }, |
||||
}, |
{ name: 'isValid', label: '是否有效', align: 'center', format: isValidFormat }, |
||||
], |
{ name: 'sortNo', label: '字段排序' }, |
||||
xAxis: [ |
]" |
||||
{ |
:editor="{ |
||||
type: 'category', |
dialog: { |
||||
data: [ |
width: '60%', |
||||
'黄浦支行', |
}, |
||||
'徐汇支行', |
form: { |
||||
'长宁支行', |
colsNum: 3, |
||||
'静安支行', |
fields: [ |
||||
'普陀支行', |
{ |
||||
'虹口支行', |
name: 'listId', |
||||
'杨浦支行', |
label: '所属清单ID', |
||||
'浦东支行', |
requiredIf: true, |
||||
'闵行支行', |
type: 'w-grid-select', |
||||
'宝山支行', |
displayValue: 'id', |
||||
'嘉定支行', |
grid: { |
||||
'金山支行', |
title: '标准模型映射清单', |
||||
'松江支行', |
dataUrl: Environment.apiContextPath('/api/rwa/params/data/mapping/list'), |
||||
'青浦支行', |
sortBy: ['sortNo'], |
||||
'奉贤支行', |
pageable: false, |
||||
'崇明支行', |
columns: [ |
||||
], |
{ name: 'id', label: '清单ID' }, |
||||
axisTick: { |
{ name: 'fromTable', label: '来源表名称' }, |
||||
alignWithLabel: true, |
{ name: 'toTable', label: '目标表名称' }, |
||||
}, |
{ name: 'sortNo', label: '字段排序' }, |
||||
}, |
{ name: 'toTableCacheKey', label: '缓存关键字' }, |
||||
], |
{ name: 'csvAppendFlg', label: '是否在csv续写数据', format: csvAppendFormat }, |
||||
yAxis: [ |
], |
||||
{ |
onRowClick: (args) => { |
||||
type: 'value', |
setListId(args.row); |
||||
name: '单位：万元', |
}, |
||||
}, |
}, |
||||
], |
onUpdateValue: (args) => { |
||||
series: [ |
console.info('onUpdateValue=========', args); |
||||
{ |
}, |
||||
type: 'bar', |
}, |
||||
barWidth: '10%', |
{ |
||||
data: [1700, 1600, 1500, 1400, 1300, 1200, 1100, 1000, 900, 800, 600, 500, 400, 300, 200, 100], |
name: 'isValid', |
||||
}, |
label: '是否有效', |
||||
], |
requiredIf: true, |
||||
}" |
type: 'w-select', |
||||
></w-echarts> |
defaultValue: '1', |
||||
|
options: [ |
||||
|
{ label: '有效', value: '1' }, |
||||
|
{ label: '无效', value: '0' }, |
||||
|
], |
||||
|
}, |
||||
|
{ name: 'sortNo', label: '字段排序', requiredIf: true, type: 'w-number' }, |
||||
|
{ |
||||
|
name: 'mappingTable', |
||||
|
label: '目标表', |
||||
|
requiredIf: true, |
||||
|
type: 'w-text', |
||||
|
readOnlyIf: () => { |
||||
|
return true; |
||||
|
}, |
||||
|
}, |
||||
|
{ |
||||
|
name: 'mappingFeild', |
||||
|
label: '目标字段', |
||||
|
requiredIf: true, |
||||
|
type: 'w-select', |
||||
|
colSpan: 2, |
||||
|
clearable: true, |
||||
|
options: state.mainMappingFieldOptions, |
||||
|
}, |
||||
|
{ |
||||
|
name: 'fromTable', |
||||
|
label: '来源表', |
||||
|
requiredIf: true, |
||||
|
type: 'w-text', |
||||
|
readOnlyIf: () => { |
||||
|
return true; |
||||
|
}, |
||||
|
}, |
||||
|
{ name: 'fromFeild', label: '来源表字段', type: 'w-select', colSpan: 2, clearable: true, options: state.mainFromFieldOptions }, |
||||
|
{ name: 'remark', label: '备注', type: 'w-text', colSpan: 2 }, |
||||
|
{ name: 'mappingTp', label: '映射方式', requiredIf: true, type: 'w-select', options: optionsMappingType }, |
||||
|
{ name: 'cacheTable', label: '缓存取值表', type: 'w-text' }, |
||||
|
{ name: 'cacheFeild', label: '缓存取值字段', type: 'w-text', colSpan: 2 }, |
||||
|
{ name: 'expression', label: '算式运算表达式', type: 'w-textarea', rows: 3, colSpan: 'full' }, |
||||
|
], |
||||
|
}, |
||||
|
}" |
||||
|
:toolbar-actions="[ |
||||
|
'query', |
||||
|
'reset', |
||||
|
'separator', |
||||
|
[ |
||||
|
{ name: 'operator', label: '操作', icon: 'build' }, |
||||
|
'add', |
||||
|
{ |
||||
|
extend: 'edit', |
||||
|
beforeClick: (args) => { |
||||
|
console.info('args=======', args.selected); |
||||
|
getFieldOptions(args.selected['mappingTable'], FieldFlagEnums.MAIN_MAPPING_FIELD); |
||||
|
getFieldOptions(args.selected['fromTable'], FieldFlagEnums.MAIN_FROM_FIELD); |
||||
|
return true; |
||||
|
}, |
||||
|
}, |
||||
|
'remove', |
||||
|
], |
||||
|
'separator', |
||||
|
]" |
||||
|
:sort-by="['mappingTable', 'sortNo']" |
||||
|
:pagination="{ |
||||
|
rowsPerPage: 100, |
||||
|
}" |
||||
|
@row-click=" |
||||
|
(args) => { |
||||
|
if (!Tools.isUndefinedOrNull(detailGridRef)) { |
||||
|
detailGridRef.setQueryCriteriaFieldValue('mappingId', args.row.id); |
||||
|
detailGridRef.refresh(); |
||||
|
} |
||||
|
} |
||||
|
" |
||||
|
></w-grid> |
||||
|
</div> |
||||
|
</template> |
||||
|
<template #after> |
||||
|
<div class="h-full pl-1"> |
||||
|
<w-grid |
||||
|
ref="detailGridRef" |
||||
|
title="标准模型映射明细" |
||||
|
:data-url="Environment.apiContextPath('api/rwa/params/data/mapping/detail')" |
||||
|
:auto-fetch-data="false" |
||||
|
:query-criteria="{ |
||||
|
fieldName: 'mappingId', |
||||
|
operator: 'equals', |
||||
|
value: '', |
||||
|
}" |
||||
|
:sort-no="true" |
||||
|
dense |
||||
|
:pageable="false" |
||||
|
:checkbox-selection="false" |
||||
|
:columns="[ |
||||
|
{ name: 'fromTable', label: '来源表名称', width: 150, hidden: true }, |
||||
|
{ name: 'fromFeild', label: '来源表字段', width: 200 }, |
||||
|
{ name: 'valGetType', label: '取值方式', format: Formater.dictionary(dictValueGetType) }, |
||||
|
{ name: 'cacheTable', label: '缓存取值表' }, |
||||
|
{ name: 'cacheFeild', label: '缓存取值字段' }, |
||||
|
{ name: 'fromDataTp', label: '字段值类型', format: Formater.dictionary(dictDataType) }, |
||||
|
{ name: 'matchTp', label: '值匹配方式', format: Formater.dictionary(dictMatchType) }, |
||||
|
{ name: 'matchVal', label: '字段匹配目标值' }, |
||||
|
{ name: 'startSign', label: '条件开始标识', format: Formater.dictionary(dictConditionStart) }, |
||||
|
{ name: 'endSign', label: '条件结束标识', format: Formater.dictionary(dictConditionEnd) }, |
||||
|
{ name: 'isReturn', label: '是否返回结果值', format: isReturnFormat, align: 'center' }, |
||||
|
{ name: 'returnVal', label: '返回结果值' }, |
||||
|
{ name: 'sortNo', label: '条件排序' }, |
||||
|
]" |
||||
|
:editor="{ |
||||
|
dialog: { |
||||
|
width: '60%', |
||||
|
}, |
||||
|
form: { |
||||
|
colsNum: 2, |
||||
|
fields: [ |
||||
|
{ |
||||
|
name: 'fromFeild', |
||||
|
label: '来源表字段', |
||||
|
type: 'w-select', |
||||
|
options: state.mainFromFieldOptions, |
||||
|
useInput: true, |
||||
|
clearable: true, |
||||
|
onInputValue: (value) => { |
||||
|
if ( |
||||
|
!Tools.isEmpty(value) && |
||||
|
detailGridRef |
||||
|
.getEditorForm() |
||||
|
.getFields() |
||||
|
['fromFeild'].options.findIndex((item) => { |
||||
|
return item['value'] === value; |
||||
|
}) < 0 |
||||
|
) { |
||||
|
detailGridRef.getEditorForm().getFields()['fromFeild'].options.push({ label: value, value }); |
||||
|
detailGridRef.getEditorForm().setFieldValue('fromFeild', value); |
||||
|
} |
||||
|
}, |
||||
|
}, |
||||
|
{ name: 'valGetType', label: '取值方式', type: 'w-select', options: optionsValueGetType }, |
||||
|
{ name: 'cacheTable', label: '缓存取值表', type: 'w-text' }, |
||||
|
{ name: 'cacheFeild', label: '缓存取值字段', type: 'w-text' }, |
||||
|
{ name: 'fromDataTp', label: '字段值类型', type: 'w-select', options: optionsDataType }, |
||||
|
{ name: 'matchTp', label: '值匹配方式', type: 'w-select', options: optionsMatchType }, |
||||
|
{ name: 'matchVal', label: '字段匹配目标值', type: 'w-text' }, |
||||
|
{ name: 'startSign', label: '条件开始标识', type: 'w-select', options: optionsConditionStart }, |
||||
|
{ name: 'endSign', label: '条件结束标识', type: 'w-select', options: optionsConditionEnd }, |
||||
|
{ |
||||
|
name: 'isReturn', |
||||
|
label: '是否返回结果值', |
||||
|
type: 'w-select', |
||||
|
options: [ |
||||
|
{ label: '返回', value: '1' }, |
||||
|
{ label: '不返回', value: '0' }, |
||||
|
], |
||||
|
}, |
||||
|
{ name: 'returnVal', label: '返回结果值', type: 'w-text' }, |
||||
|
{ name: 'sortNo', label: '条件排序', type: 'w-number' }, |
||||
|
], |
||||
|
}, |
||||
|
}" |
||||
|
:toolbar-actions="[ |
||||
|
{ |
||||
|
extend: 'add', |
||||
|
enableIf: () => { |
||||
|
if (!Tools.isUndefinedOrNull(mainGridRef) && !Tools.isUndefinedOrNull(mainGridRef.getSelectedRow())) { |
||||
|
return true; |
||||
|
} |
||||
|
return false; |
||||
|
}, |
||||
|
beforeClick: () => { |
||||
|
if (!Tools.isUndefinedOrNull(mainGridRef) && !Tools.isUndefinedOrNull(mainGridRef.getSelectedRow())) { |
||||
|
getFieldOptions(mainGridRef.getSelectedRow()['fromTable'], FieldFlagEnums.MAIN_FROM_FIELD); |
||||
|
} |
||||
|
return true; |
||||
|
}, |
||||
|
}, |
||||
|
'edit', |
||||
|
'remove', |
||||
|
'separator', |
||||
|
]" |
||||
|
:pagination="{ |
||||
|
rowsPerPage: 100, |
||||
|
}" |
||||
|
:sort-by="['sortNo']" |
||||
|
@before-editor-data-submit=" |
||||
|
(args) => { |
||||
|
args['data'] = mainGridRef.getSelectedRow()['id']; |
||||
|
args.callback(args['data']); |
||||
|
} |
||||
|
" |
||||
|
></w-grid> |
||||
|
</div> |
||||
|
</template> |
||||
|
</q-splitter> |
||||
</div> |
</div> |
||||
</template> |
</template> |
||||
|
|
||||
<script setup lang="ts"></script> |
<script setup lang="ts"> |
||||
|
import { ref, reactive } from 'vue'; |
||||
|
import { Environment, DictionaryTools, Options, Tools, Formater, axios } from '@/platform'; |
||||
|
|
||||
|
const dictMappingType = await DictionaryTools.fetch('RWA_P_DP_MAPPING_TYPE'); |
||||
|
const dictValueGetType = await DictionaryTools.fetch('RWA_P_DP_VAL_GET_TYPE'); |
||||
|
const dictDataType = await DictionaryTools.fetch('RWA_P_DP_DATA_TYPE'); |
||||
|
const dictMatchType = await DictionaryTools.fetch('RWA_P_DP_MATCH_TYPE'); |
||||
|
const dictConditionStart = await DictionaryTools.fetch('RWA_P_DP_CONDITION_S'); |
||||
|
const dictConditionEnd = await DictionaryTools.fetch('RWA_P_DP_CONDITION_E'); |
||||
|
const optionsMappingType = Options.dictionary(dictMappingType); |
||||
|
const optionsValueGetType = Options.dictionary(dictValueGetType); |
||||
|
const optionsDataType = Options.dictionary(dictDataType); |
||||
|
const optionsMatchType = Options.dictionary(dictMatchType); |
||||
|
const optionsConditionStart = Options.dictionary(dictConditionStart); |
||||
|
const optionsConditionEnd = Options.dictionary(dictConditionEnd); |
||||
|
|
||||
|
const mainGridRef = ref(); |
||||
|
const detailGridRef = ref(); |
||||
|
|
||||
|
/** |
||||
|
* 字段标识 |
||||
|
*/ |
||||
|
enum FieldFlagEnums { |
||||
|
MAIN_MAPPING_FIELD, // 主表目标字段标识 |
||||
|
MAIN_FROM_FIELD, // 主表来源字段标识 |
||||
|
} |
||||
|
|
||||
|
const state = reactive({ |
||||
|
baseTableListOptions: <any>[], |
||||
|
mainMappingFieldOptions: <any>[], |
||||
|
mainFromFieldOptions: <any>[], |
||||
|
splitterModel: 60, |
||||
|
}); |
||||
|
|
||||
|
const csvAppendFormat = (val, row) => { |
||||
|
if (!Tools.isEmpty(val) && val === '1') { |
||||
|
return { |
||||
|
componentType: 'q-chip', |
||||
|
attrs: { |
||||
|
square: true, |
||||
|
outline: true, |
||||
|
label: '续写', |
||||
|
color: 'green', |
||||
|
size: 'sm', |
||||
|
}, |
||||
|
}; |
||||
|
} else if (!Tools.isEmpty(val) && val === '0') { |
||||
|
return { |
||||
|
componentType: 'q-chip', |
||||
|
attrs: { |
||||
|
square: true, |
||||
|
outline: true, |
||||
|
label: '覆盖', |
||||
|
color: 'red', |
||||
|
size: 'sm', |
||||
|
}, |
||||
|
}; |
||||
|
} |
||||
|
return ''; |
||||
|
}; |
||||
|
|
||||
|
const setListId = (listData) => { |
||||
|
mainGridRef.value.getEditorForm().setFieldValue('listId', listData['id']); |
||||
|
mainGridRef.value.getEditorForm().setFieldValue('mappingTable', listData['toTable']); |
||||
|
mainGridRef.value.getEditorForm().setFieldValue('fromTable', listData['fromTable']); |
||||
|
getFieldOptions(listData['toTable'], FieldFlagEnums.MAIN_MAPPING_FIELD); |
||||
|
getFieldOptions(listData['fromTable'], FieldFlagEnums.MAIN_FROM_FIELD); |
||||
|
mainGridRef.value.getEditorForm().setFieldValue('mappingFeild', null); |
||||
|
mainGridRef.value.getEditorForm().setFieldValue('fromFeild', null); |
||||
|
}; |
||||
|
|
||||
|
const getFieldOptions = (table: string, fieldFlag: FieldFlagEnums) => { |
||||
|
if (Tools.isEmpty(table)) { |
||||
|
return; |
||||
|
} |
||||
|
axios |
||||
|
.get(Environment.apiContextPath('api/template/config/columns/' + table)) |
||||
|
.then((resp) => { |
||||
|
if (fieldFlag === FieldFlagEnums.MAIN_MAPPING_FIELD) { |
||||
|
state.mainMappingFieldOptions = []; |
||||
|
if (resp.data && resp.data.length > 0) { |
||||
|
resp.data.forEach((field) => { |
||||
|
state.mainMappingFieldOptions.push({ |
||||
|
label: field['name'] + (!Tools.isEmpty(field['remarks']) ? '(' + field['remarks'] + ')' : ''), |
||||
|
value: field['name'], |
||||
|
}); |
||||
|
}); |
||||
|
} |
||||
|
} else if (fieldFlag === FieldFlagEnums.MAIN_FROM_FIELD) { |
||||
|
state.mainFromFieldOptions = []; |
||||
|
if (resp.data && resp.data.length > 0) { |
||||
|
resp.data.forEach((field) => { |
||||
|
state.mainFromFieldOptions.push({ |
||||
|
label: field['name'] + (!Tools.isEmpty(field['remarks']) ? '(' + field['remarks'] + ')' : ''), |
||||
|
value: field['name'], |
||||
|
}); |
||||
|
}); |
||||
|
} |
||||
|
} |
||||
|
}) |
||||
|
.catch((error) => { |
||||
|
console.info('error==========', error); |
||||
|
}); |
||||
|
}; |
||||
|
|
||||
|
const isValidFormat = (val, row) => { |
||||
|
if (!Tools.isEmpty(val)) { |
||||
|
if (val === '1') { |
||||
|
return { |
||||
|
componentType: 'q-icon', |
||||
|
attrs: { |
||||
|
name: 'check_circle', |
||||
|
color: 'green', |
||||
|
size: 'xs', |
||||
|
}, |
||||
|
}; |
||||
|
} else if (val === '0') { |
||||
|
return { |
||||
|
componentType: 'q-icon', |
||||
|
attrs: { |
||||
|
name: 'cancel', |
||||
|
color: 'red', |
||||
|
size: 'xs', |
||||
|
}, |
||||
|
}; |
||||
|
} else { |
||||
|
return val; |
||||
|
} |
||||
|
} |
||||
|
return ''; |
||||
|
}; |
||||
|
const isReturnFormat = (val, row) => { |
||||
|
if (!Tools.isEmpty(val) && val === '1') { |
||||
|
return { |
||||
|
componentType: 'q-icon', |
||||
|
attrs: { |
||||
|
name: 'check_circle', |
||||
|
color: 'green', |
||||
|
size: 'xs', |
||||
|
}, |
||||
|
}; |
||||
|
} |
||||
|
return ''; |
||||
|
}; |
||||
|
</script> |
||||
|
|||||
Loading…
Reference in new issue