6 changed files with 467 additions and 101 deletions
@ -1,88 +1,426 @@ |
|||
<template> |
|||
<div class="w-[500px] h-[300px]"> |
|||
<w-echarts |
|||
:option="{ |
|||
title: { |
|||
left: 'center', |
|||
text: '资产余额', |
|||
}, |
|||
tooltip: { |
|||
trigger: 'axis', |
|||
axisPointer: { |
|||
type: 'shadow', |
|||
}, |
|||
}, |
|||
grid: { |
|||
left: '3%', |
|||
right: '4%', |
|||
bottom: '3%', |
|||
containLabel: true, |
|||
}, |
|||
dataZoom: [ |
|||
{ |
|||
type: 'slider', |
|||
show: true, // 是否显示滚动条 |
|||
borderColor: '#2563eb', // 边框颜色 |
|||
showDetail: false, // 是否显示detail，即拖拽时显示详细数值信息 |
|||
startValue: 0, // 开始数值 |
|||
endValue: 10, // 结束数值 |
|||
filterMode: 'empty', |
|||
width: '80%', // 滚动条宽度 |
|||
height: 8, // 滚动条高度 |
|||
left: 'center', // 居中显示 |
|||
zoomLoxk: true, // 是否锁定选择区域的大小 |
|||
handleSize: 0, // 控制手柄的尺寸 |
|||
bottom: 0, // 距离容器下侧的距离 |
|||
}, |
|||
{ |
|||
type: 'inside', |
|||
zoomOnMouseWheel: false, // 滚动不触发缩放 |
|||
moveOnMouseMove: true, // 鼠标移动触发平移 |
|||
moveOnMouseWheel: true, // 鼠标滚动触发平移 |
|||
}, |
|||
], |
|||
xAxis: [ |
|||
{ |
|||
type: 'category', |
|||
data: [ |
|||
'黄浦支行', |
|||
'徐汇支行', |
|||
'长宁支行', |
|||
'静安支行', |
|||
'普陀支行', |
|||
'虹口支行', |
|||
'杨浦支行', |
|||
'浦东支行', |
|||
'闵行支行', |
|||
'宝山支行', |
|||
'嘉定支行', |
|||
'金山支行', |
|||
'松江支行', |
|||
'青浦支行', |
|||
'奉贤支行', |
|||
'崇明支行', |
|||
], |
|||
axisTick: { |
|||
alignWithLabel: true, |
|||
}, |
|||
}, |
|||
], |
|||
yAxis: [ |
|||
{ |
|||
type: 'value', |
|||
name: '单位：万元', |
|||
}, |
|||
], |
|||
series: [ |
|||
{ |
|||
type: 'bar', |
|||
barWidth: '10%', |
|||
data: [1700, 1600, 1500, 1400, 1300, 1200, 1100, 1000, 900, 800, 600, 500, 400, 300, 200, 100], |
|||
}, |
|||
], |
|||
}" |
|||
></w-echarts> |
|||
<div class="h-full"> |
|||
<q-splitter v-model="state.splitterModel" class="h-full"> |
|||
<template #before> |
|||
<div class="h-full pr-1"> |
|||
<w-grid |
|||
ref="mainGridRef" |
|||
title="标准模型映射列表" |
|||
:data-url="Environment.apiContextPath('api/rwa/params/data/mapping/main')" |
|||
:sort-no="false" |
|||
dense |
|||
:checkbox-selection="false" |
|||
:query-form-cols-num="3" |
|||
:query-form-fields="[ |
|||
{ name: 'mappingTable', label: '目标表', type: 'w-text' }, |
|||
{ name: 'mappingFeild', label: '目标字段', type: 'w-text' }, |
|||
{ name: 'remark', label: '备注', type: 'w-text' }, |
|||
{ name: 'fromTable', label: '来源表', type: 'w-text' }, |
|||
{ name: 'fromFeild', label: '来源表字段', type: 'w-text' }, |
|||
{ name: 'mappingTp', label: '映射方式', type: 'w-select', options: optionsMappingType }, |
|||
{ |
|||
name: 'isValid', |
|||
label: '是否有效', |
|||
type: 'w-select', |
|||
options: [ |
|||
{ label: '有效', value: '1' }, |
|||
{ label: '无效', value: '0' }, |
|||
], |
|||
}, |
|||
]" |
|||
:columns="[ |
|||
// { name: 'listId', label: '标准模型映射清单表ID' }, |
|||
{ name: 'mappingTable', label: '目标表', width: 150 }, |
|||
{ name: 'mappingFeild', label: '目标字段', width: 100 }, |
|||
{ name: 'remark', label: '备注', width: 100 }, |
|||
{ name: 'fromTable', label: '来源表', width: 150 }, |
|||
{ name: 'fromFeild', label: '来源表字段', width: 100 }, |
|||
{ name: 'mappingTp', label: '映射方式', format: Formater.dictionary(dictMappingType) }, |
|||
{ name: 'expression', label: '算式运算表达式' }, |
|||
{ name: 'cacheTable', label: '缓存取值表' }, |
|||
{ name: 'cacheFeild', label: '缓存取值字段' }, |
|||
{ name: 'isValid', label: '是否有效', align: 'center', format: isValidFormat }, |
|||
{ name: 'sortNo', label: '字段排序' }, |
|||
]" |
|||
:editor="{ |
|||
dialog: { |
|||
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' }, |
|||
{ name: 'fromTable', label: '来源表名称' }, |
|||
{ name: 'toTable', label: '目标表名称' }, |
|||
{ name: 'sortNo', label: '字段排序' }, |
|||
{ name: 'toTableCacheKey', label: '缓存关键字' }, |
|||
{ name: 'csvAppendFlg', label: '是否在csv续写数据', format: csvAppendFormat }, |
|||
], |
|||
onRowClick: (args) => { |
|||
setListId(args.row); |
|||
}, |
|||
}, |
|||
onUpdateValue: (args) => { |
|||
console.info('onUpdateValue=========', args); |
|||
}, |
|||
}, |
|||
{ |
|||
name: 'isValid', |
|||
label: '是否有效', |
|||
requiredIf: true, |
|||
type: 'w-select', |
|||
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> |
|||
</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