43 changed files with 1392 additions and 1265 deletions
@ -0,0 +1,2 @@ |
|||
# 所有文本文件的行结束符为: 换行符 |
|||
* text=auto |
|||
|
Before Width: | Height: | Size: 55 B |
@ -0,0 +1,13 @@ |
|||
import { Graph, GraphPlugin, ConstraintHandler, ImageBox } from '@maxgraph/core'; |
|||
|
|||
export class PlatformConstraintHandler extends ConstraintHandler implements GraphPlugin { |
|||
public static pluginId: string = 'PlatformConstraintHandler'; |
|||
|
|||
constructor(graph: Graph) { |
|||
super(graph); |
|||
const pointImage = new ImageBox('data:image/gif;base64,R0lGODlhBQAFAJECAAAA/////////wAAACH5BAEAAAIALAAAAAAFAAUAAAIIRBSml7yGQAEAOw==', 5, 5); |
|||
ConstraintHandler.prototype.getImageForConstraint = (state, constraint, point) => { |
|||
return pointImage; |
|||
}; |
|||
} |
|||
} |
|||
@ -0,0 +1,125 @@ |
|||
export { |
|||
QAjaxBar, |
|||
QAvatar, |
|||
QBadge, |
|||
QBanner, |
|||
QBar, |
|||
QBreadcrumbs, |
|||
QBreadcrumbsEl, |
|||
QBtn, |
|||
QBtnDropdown, |
|||
QBtnGroup, |
|||
QBtnToggle, |
|||
QCard, |
|||
QCardSection, |
|||
QCardActions, |
|||
QCarousel, |
|||
QCarouselSlide, |
|||
QCarouselControl, |
|||
QChatMessage, |
|||
QCheckbox, |
|||
QChip, |
|||
QCircularProgress, |
|||
QColor, |
|||
QDate, |
|||
QDialog, |
|||
QDrawer, |
|||
QEditor, |
|||
QExpansionItem, |
|||
QFab, |
|||
QFabAction, |
|||
QField, |
|||
QFile, |
|||
QFooter, |
|||
QForm, |
|||
QFormChildMixin, |
|||
QHeader, |
|||
QIcon, |
|||
QImg, |
|||
QInfiniteScroll, |
|||
QInnerLoading, |
|||
QInput, |
|||
QIntersection, |
|||
QList, |
|||
QItem, |
|||
QItemSection, |
|||
QItemLabel, |
|||
QKnob, |
|||
QLayout, |
|||
QLinearProgress, |
|||
QMarkupTable, |
|||
QMenu, |
|||
QNoSsr, |
|||
QOptionGroup, |
|||
QPage, |
|||
QPageContainer, |
|||
QPageScroller, |
|||
QPageSticky, |
|||
QPagination, |
|||
QParallax, |
|||
QPopupEdit, |
|||
QPopupProxy, |
|||
QPullToRefresh, |
|||
QRadio, |
|||
QRange, |
|||
QRating, |
|||
QResizeObserver, |
|||
QResponsive, |
|||
QScrollArea, |
|||
QScrollObserver, |
|||
QSelect, |
|||
QSeparator, |
|||
QSkeleton, |
|||
QSlideItem, |
|||
QSlideTransition, |
|||
QSlider, |
|||
QSpace, |
|||
QSpinner, |
|||
QSpinnerAudio, |
|||
QSpinnerBall, |
|||
QSpinnerBars, |
|||
QSpinnerBox, |
|||
QSpinnerClock, |
|||
QSpinnerComment, |
|||
QSpinnerCube, |
|||
QSpinnerDots, |
|||
QSpinnerFacebook, |
|||
QSpinnerGears, |
|||
QSpinnerGrid, |
|||
QSpinnerHearts, |
|||
QSpinnerHourglass, |
|||
QSpinnerInfinity, |
|||
QSpinnerIos, |
|||
QSpinnerOrbit, |
|||
QSpinnerOval, |
|||
QSpinnerPie, |
|||
QSpinnerPuff, |
|||
QSpinnerRadio, |
|||
QSpinnerRings, |
|||
QSpinnerTail, |
|||
QSplitter, |
|||
QStep, |
|||
QStepper, |
|||
QStepperNavigation, |
|||
QTabPanels, |
|||
QTabPanel, |
|||
QTable, |
|||
QTh, |
|||
QTr, |
|||
QTd, |
|||
QTabs, |
|||
QTab, |
|||
QRouteTab, |
|||
QTime, |
|||
QTimeline, |
|||
QTimelineEntry, |
|||
QToggle, |
|||
QToolbar, |
|||
QToolbarTitle, |
|||
QTooltip, |
|||
QTree, |
|||
QUploader, |
|||
QUploaderAddTrigger, |
|||
QVideo, |
|||
QVirtualScroll, |
|||
} from 'quasar'; |
|||
@ -0,0 +1 @@ |
|||
export { ClosePopup, Intersection, Morph, Mutation, Ripple, ScrollFire, Scroll, TouchHold, TouchPan, TouchRepeat, TouchSwipe } from 'quasar'; |
|||
@ -0,0 +1,14 @@ |
|||
export { |
|||
AddressbarColor, |
|||
AppFullscreen, |
|||
AppVisibility, |
|||
BottomSheet, |
|||
Cookies, |
|||
Dialog, |
|||
Loading, |
|||
LoadingBar, |
|||
LocalStorage, |
|||
SessionStorage, |
|||
Meta, |
|||
Notify, |
|||
} from 'quasar'; |
|||
@ -1,35 +1,68 @@ |
|||
module.exports = { |
|||
// https://eslint.org/docs/user-guide/configuring#configuration-cascading-and-hierarchy |
|||
// This option interrupts the configuration hierarchy at this file |
|||
// Remove this if you have an higher level ESLint config file (it usually happens into a monorepos) |
|||
root: true, |
|||
|
|||
env: { |
|||
browser: true, |
|||
es2022: true, |
|||
"vue/setup-compiler-macros": true, |
|||
node: true, |
|||
'vue/setup-compiler-macros': true, |
|||
}, |
|||
|
|||
// Rules order is important, please avoid shuffling them |
|||
extends: [ |
|||
"eslint:recommended", |
|||
"plugin:vue/vue3-recommended", |
|||
"plugin:@typescript-eslint/recommended", |
|||
"plugin:prettier/recommended", |
|||
// Base ESLint recommended rules |
|||
'eslint:recommended', |
|||
|
|||
// https://github.com/typescript-eslint/typescript-eslint/tree/master/packages/eslint-plugin#usage |
|||
// ESLint typescript rules |
|||
'plugin:@typescript-eslint/recommended', |
|||
|
|||
// Vue ESLint recommended rules |
|||
// 'plugin:vue/vue3-essential', // Priority A: Essential (Error Prevention) |
|||
// 'plugin:vue/vue3-strongly-recommended', // Priority B: Strongly Recommended (Improving Readability) |
|||
// 'plugin:vue/vue3-recommended', // Priority C: Recommended (Minimizing Arbitrary Choices and Cognitive Overhead) |
|||
'plugin:vue/vue3-recommended', |
|||
|
|||
// https://github.com/prettier/eslint-config-prettier#installation |
|||
// usage with Prettier, provided by 'eslint-config-prettier'. |
|||
'plugin:prettier/recommended', // Recommended |
|||
], |
|||
|
|||
parser: "vue-eslint-parser", |
|||
parser: 'vue-eslint-parser', |
|||
parserOptions: { |
|||
ecmaVersion: 2022, |
|||
parser: "@typescript-eslint/parser", |
|||
sourceType: "module", |
|||
parser: '@typescript-eslint/parser', |
|||
ecmaFeatures: { |
|||
jsx : false |
|||
} |
|||
jsx: false, |
|||
}, |
|||
}, |
|||
|
|||
plugins: [ |
|||
// required to apply rules which need type information |
|||
'@typescript-eslint', |
|||
|
|||
// https://eslint.vuejs.org/user-guide/#why-doesn-t-it-work-on-vue-files |
|||
// required to lint *.vue files |
|||
'vue', |
|||
|
|||
// https://github.com/typescript-eslint/typescript-eslint/issues/389#issuecomment-509292674 |
|||
// Prettier has not been included as plugin to avoid performance impact |
|||
// add it as an extension for your IDE |
|||
], |
|||
|
|||
rules: { |
|||
'semi':[1], |
|||
semi: [1], |
|||
'@typescript-eslint/no-var-requires': 'off', |
|||
'@typescript-eslint/no-empty-object-type': 'off', |
|||
'@typescript-eslint/no-explicit-any': 'off', |
|||
"@typescript-eslint/no-unused-vars": 'off', |
|||
'vue/multi-word-component-names': 'off', /* 禁用 vue 组件名称检查规则 */ |
|||
'@typescript-eslint/no-unused-expressions': 'off', |
|||
'@typescript-eslint/no-unused-vars': 'off', |
|||
'@typescript-eslint/no-this-alias': 'off', |
|||
'vue/multi-word-component-names': 'off' /* 禁用 vue 组件名称检查规则 */, |
|||
'no-prototype-builtins': 'off', |
|||
'prefer-rest-params': 'off', |
|||
}, |
|||
}; |
|||
|
|||
@ -1,34 +1,88 @@ |
|||
<template> |
|||
<div> |
|||
<q-btn label="弹出" @click="click"></q-btn> |
|||
<w-drawer |
|||
ref="drawerRef" |
|||
title="xxx" |
|||
:maximized="false" |
|||
:buttons="[ |
|||
<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: [ |
|||
{ |
|||
label: '测试', |
|||
type: 'category', |
|||
data: [ |
|||
'黄浦支行', |
|||
'徐汇支行', |
|||
'长宁支行', |
|||
'静安支行', |
|||
'普陀支行', |
|||
'虹口支行', |
|||
'杨浦支行', |
|||
'浦东支行', |
|||
'闵行支行', |
|||
'宝山支行', |
|||
'嘉定支行', |
|||
'金山支行', |
|||
'松江支行', |
|||
'青浦支行', |
|||
'奉贤支行', |
|||
'崇明支行', |
|||
], |
|||
axisTick: { |
|||
alignWithLabel: true, |
|||
}, |
|||
]" |
|||
> |
|||
1111 |
|||
<template #buttons> <q-btn label="xxx"></q-btn> </template> |
|||
</w-drawer> |
|||
}, |
|||
], |
|||
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> |
|||
</template> |
|||
<script setup lang="ts"> |
|||
import { ref, reactive, onMounted } from 'vue'; |
|||
import { IconEnum } from '@/platform/enums'; |
|||
|
|||
const drawerRef = ref(); |
|||
|
|||
const aa = ref(50); |
|||
const aaaaa = (e) => { |
|||
console.info('dddddddddddddd', e); |
|||
}; |
|||
const click = () => { |
|||
drawerRef.value.show(); |
|||
}; |
|||
|
|||
onMounted(() => {}); |
|||
</script> |
|||
<script setup lang="ts"></script> |
|||
|
|||
@ -1,570 +1,44 @@ |
|||
<template> |
|||
<div style="height: 100%"> |
|||
<!-- <q-splitter v-model="splitterModel"> |
|||
<template #before> |
|||
<q-tabs v-model="tab" vertical class="text-teal"> |
|||
<q-tab name="mails" icon="mail" label="Mails" /> |
|||
<q-tab name="alarms" icon="alarm" label="Alarms" /> |
|||
<q-tab name="movies" icon="movie" label="Movies" /> |
|||
</q-tabs> |
|||
</template> |
|||
|
|||
<template #after> |
|||
<q-tab-panels v-model="tab" animated swipeable vertical transition-prev="jump-up" transition-next="jump-up"> |
|||
<q-tab-panel name="mails"> |
|||
|
|||
</q-tab-panel> |
|||
|
|||
<q-tab-panel name="alarms"> |
|||
<div class="h-full"> |
|||
<w-grid |
|||
ref="grid2" |
|||
:title="testGrid.title" |
|||
draggable |
|||
dense |
|||
:data-url="testGrid.tableDataUrl" |
|||
:checkbox-selection="true" |
|||
selection="multiple" |
|||
:query-form-cols-num="2" |
|||
:columns="testGrid.tableColumns" |
|||
:toolbar-actions="testGrid.toolbar" |
|||
:query-form-fields="testGrid.queryForm" |
|||
:editor="{ |
|||
form: { |
|||
colsNum: 1, |
|||
fields: [ |
|||
{ label: '登录名', name: 'loginName', type: 'w-text' }, |
|||
{ label: '用户名', name: 'userName', type: 'w-text' }, |
|||
{ label: '密码', name: 'password', type: 'w-text' }, |
|||
{ label: '是否可用1111', name: 'enable', type: 'w-checkbox' }, |
|||
{ |
|||
name: 'urlOpenType', |
|||
label: 'urlOpenType', |
|||
type: 'select', |
|||
options: Options.enum(UrlOpenTypeEnum, false), |
|||
defaultValue: 'NEW_WINDOW', |
|||
}, |
|||
], |
|||
}, |
|||
}" |
|||
:viewer="testGrid.view" |
|||
></w-grid> |
|||
</q-tab-panel> |
|||
|
|||
<q-tab-panel name="movies"> |
|||
<div class="text-h4 q-mb-md">Movies</div> |
|||
<w-form ref="form" :fields="[{ name: 'a', label: 'a', type: 'text' }]"></w-form> |
|||
</q-tab-panel> |
|||
</q-tab-panels> |
|||
</template> |
|||
</q-splitter> --> |
|||
<!-- <w-grid |
|||
ref="gridRef" |
|||
:title="testGrid.title" |
|||
draggable |
|||
:dense="state.dense" |
|||
:hide-bottom="false" |
|||
:data-url="testGrid.tableDataUrl" |
|||
:auto-fetch-data="true" |
|||
:checkbox-selection="true" |
|||
selection="multiple" |
|||
:query-form-cols-num="6" |
|||
:columns="testGrid.tableColumns" |
|||
:toolbar-actions="testGrid.toolbar" |
|||
:query-form-fields="testGrid.queryForm" |
|||
:editor="{ |
|||
form: { |
|||
colsNum: 1, |
|||
fields: [ |
|||
{ label: '登录名', name: 'loginName', type: 'w-text' }, |
|||
{ label: '用户名', name: 'userName', type: 'w-text' }, |
|||
{ label: '密码', name: 'password', type: 'w-text' }, |
|||
{ label: '是否可用1111', name: 'enable', type: 'w-checkbox' }, |
|||
{ |
|||
name: 'urlOpenType', |
|||
label: 'urlOpenType', |
|||
type: 'select', |
|||
options: Options.enum(UrlOpenTypeEnum, false), |
|||
defaultValue: 'NEW_WINDOW', |
|||
}, |
|||
], |
|||
}, |
|||
}" |
|||
:viewer="testGrid.view" |
|||
@update-ticked="updateTicked" |
|||
@row-click="rowClick" |
|||
@row-db-click="rowDbClick" |
|||
@after-request-data=" |
|||
() => { |
|||
} |
|||
" |
|||
></w-grid> --> |
|||
<w-grid |
|||
ref="applicationGridRef" |
|||
:title="$t('system.application.grid.title')" |
|||
:config-button="true" |
|||
selection="multiple" |
|||
:checkbox-selection="true" |
|||
:sort-no="true" |
|||
:draggable="true" |
|||
title="示例列表" |
|||
:data-url="Environment.apiContextPath('/api/system/application')" |
|||
:sort-by="['order']" |
|||
:query-form-cols-num="3" |
|||
db-click-operation="rowEdit" |
|||
: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', |
|||
'rowEdit', |
|||
'rowsEdit', |
|||
'separator', |
|||
'add', |
|||
'clone', |
|||
'edit', |
|||
'remove', |
|||
'separator', |
|||
'view', |
|||
'separator', |
|||
'export', |
|||
]" |
|||
:toolbar-actions="['add', 'edit']" |
|||
:columns="[ |
|||
{ name: 'order', label: $t('order'), type: 'number', attrs: { required: true } }, |
|||
{ name: 'code', label: $t('code'), type: 'text', attrs: { required: true } }, |
|||
{ name: 'code', label: '编码', type: 'w-text' }, |
|||
{ name: 'name', label: '名称', type: 'w-text' }, |
|||
{ |
|||
name: 'name', |
|||
label: $t('name'), |
|||
type: 'text', |
|||
format: (val, row) => { |
|||
return val; |
|||
}, |
|||
name: 'enable', |
|||
label: '状态', |
|||
format: Formater.enableTag(), |
|||
}, |
|||
{ width: 80, name: 'enable', label: $t('status'), format: Formater.enableTag(), type: 'checkbox' }, |
|||
{ width: 120, name: 'lastModifier', label: $t('lastModifier') }, |
|||
{ width: 120, name: 'lastModifyDate', label: $t('lastModifyDate'), format: Formater.dateOnly() }, |
|||
{ name: 'lastModifier', label: '最后修改人', align: 'center' }, |
|||
{ name: 'lastModifyDate', label: '最后修改日期', align: 'center' }, |
|||
]" |
|||
:editor="{ |
|||
dialog: { |
|||
width: '600px', |
|||
height: '300px', |
|||
width: '80%', |
|||
height: '80%', |
|||
}, |
|||
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, |
|||
colsNum: 2, |
|||
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') }, |
|||
{ name: 'code', label: '编码', type: 'w-text' }, |
|||
{ name: 'name', label: '名称', type: 'w-text' }, |
|||
], |
|||
}, |
|||
}" |
|||
@row-click=" |
|||
(evt, row, index) => { |
|||
// console.info('rowclick'); |
|||
} |
|||
" |
|||
@before-request-data="() => {}" |
|||
@after-row-draggable=" |
|||
(grid, updateDatas) => { |
|||
// console.info('grid=====', grid); |
|||
// console.info('updateDatas======', updateDatas); |
|||
} |
|||
" |
|||
@after-editor-open=" |
|||
() => { |
|||
console.info('打开窗口'); |
|||
} |
|||
" |
|||
@row-click="rowClick" |
|||
> |
|||
</w-grid> |
|||
</div> |
|||
</template> |
|||
|
|||
<script setup lang="ts"> |
|||
import { ref, onMounted, nextTick, reactive, computed } from 'vue'; |
|||
import { axios, Environment, EnumTools, Options, Formater } from '@/platform'; |
|||
import EnableIcon from '@/platform/components/grid/EnableIcon.vue'; |
|||
import { IconEnum } from '@/platform/enums'; |
|||
import { ref } from 'vue'; |
|||
import { Environment, Formater } from '@/platform'; |
|||
|
|||
// :query-criteria="{ |
|||
// operator: 'equals', |
|||
// fieldName: 'code', |
|||
// value: 'A', |
|||
// }" |
|||
|
|||
const dialogRef = ref(); |
|||
const gridRef = ref(); |
|||
const grid2 = ref(); |
|||
const form = ref(); |
|||
const tab = ref('mails'); |
|||
const splitterModel = ref(10); |
|||
const UrlOpenTypeEnum = await EnumTools.fetch('io.sc.platform.system.enums.UrlOpenType'); |
|||
const updateTicked = (event, row) => { |
|||
console.info('grid.updateTicked.event====', event); |
|||
console.info('grid.updateTicked.row====', row); |
|||
}; |
|||
const state = reactive({ |
|||
dense: false, |
|||
}); |
|||
|
|||
const startY = ref(0); |
|||
const endY = ref(0); |
|||
|
|||
const rowClick = (evt, row, index) => { |
|||
// if (startY.value === 0) { |
|||
// startY.value = evt.clientY; |
|||
// } else if (evt.shiftKey && endY.value === 0) { |
|||
// endY.value = evt.clientY; |
|||
// } |
|||
// console.info('startY====', startY.value); |
|||
// console.info('endY====', endY.value); |
|||
// // 添加到选择中，同时清空 startY 与 endY |
|||
// if (startY.value > 0 && endY.value > 0) { |
|||
// console.info('添加到选择中，同时清空 startY 与 endY'); |
|||
// startY.value = 0; |
|||
// endY.value = 0; |
|||
// } |
|||
// startY.value = 0; |
|||
// endY.value = 0; |
|||
// console.info('grid.rowClick.row====', row); |
|||
|
|||
// tab.value = 'alarms'; |
|||
// nextTick(() => { |
|||
// grid2.value.getQueryForm().setFieldValue('loginName', row.id); |
|||
// }); |
|||
|
|||
// tab.value = 'movies'; |
|||
// nextTick(() => { |
|||
// form.value.setFieldValue('a', row.id); |
|||
// }); |
|||
console.info('grid.rowClick.row====', row); |
|||
}; |
|||
const rowDbClick = (evt, row, index) => { |
|||
console.info('grid.rowDbClick.row====', row); |
|||
}; |
|||
|
|||
// 获取元素的绝对位置坐标（像对于浏览器视区左上角） |
|||
const getElementViewPosition = (element) => { |
|||
//计算x坐标 |
|||
let actualLeft = element.offsetLeft; |
|||
let xcurrent = element.offsetParent; |
|||
while (xcurrent !== null) { |
|||
actualLeft += xcurrent.offsetLeft + xcurrent.clientLeft; |
|||
xcurrent = xcurrent.offsetParent; |
|||
} |
|||
let elementScrollLeft = document.documentElement.scrollLeft; |
|||
if (document.compatMode == 'BackCompat') { |
|||
elementScrollLeft = document.body.scrollLeft; |
|||
} |
|||
const left = actualLeft - elementScrollLeft; |
|||
|
|||
//计算y坐标 |
|||
let actualTop = element.offsetTop; |
|||
let ycurrent = element.offsetParent; |
|||
while (ycurrent !== null) { |
|||
actualTop += ycurrent.offsetTop + ycurrent.clientTop; |
|||
ycurrent = ycurrent.offsetParent; |
|||
} |
|||
let elementScrollTop = document.documentElement.scrollTop; |
|||
if (document.compatMode == 'BackCompat') { |
|||
elementScrollTop = document.body.scrollTop; |
|||
} |
|||
var right = actualTop - elementScrollTop; |
|||
//返回结果 |
|||
return { x: left, y: right }; |
|||
}; |
|||
|
|||
// const gridHeightComputed = computed(() => { |
|||
// // if (dialogRef?.value && gridRef?.value) { |
|||
// // const height = dialogRef.value.getContentHeight(); |
|||
// // const tableContentY = getElementViewPosition(gridRef.value.$el.getElementsByClassName('q-table__middle')[0]); |
|||
// // console.info('height==========', height); |
|||
// // console.info('gridRef==============', tableContentY); |
|||
// // if (height && tableContentY) { |
|||
// // return height.height - (tableContentY.y - height.y); |
|||
// // } |
|||
// // } |
|||
// if (dialogRef?.value && dialogRef.value.getContent()) { |
|||
// const height = dialogRef.value.getContent().clientHeight; |
|||
// console.info('dialogRef.value.getContent()====', height); |
|||
// if (height > 0) { |
|||
// return height; |
|||
// } |
|||
// } |
|||
// return 0; |
|||
// }); |
|||
const aaaaaaaaaaaaaaaa = ref(false); |
|||
const testGrid = { |
|||
hideBottom: false, |
|||
autoLoadData: false, |
|||
tableLeftColumnStickyNumber: 1, |
|||
title: '用户列表', |
|||
tableDataUrl: Environment.apiContextPath('api/system/user'), |
|||
queryCriteria: { |
|||
fieldName: 'loginName', |
|||
operator: 'contains', |
|||
value: '1', |
|||
}, |
|||
toolbar: [ |
|||
['query', 'separator', 'moreQuery'], |
|||
'reset', |
|||
{ |
|||
extend: 'refresh', |
|||
click: () => { |
|||
state.dense = !state.dense; |
|||
}, |
|||
}, |
|||
'separator', |
|||
{ |
|||
extend: 'resetDefaultValues', |
|||
icon: undefined, |
|||
label: 'aasdfFFF', |
|||
loadingIf: (selected, ticked, grid) => { |
|||
if (selected.length === 0) { |
|||
return true; |
|||
} |
|||
return false; |
|||
}, |
|||
// enableIf: (selected) => { |
|||
// if (selected && selected.length > 0) { |
|||
// return true; |
|||
// } |
|||
// return false; |
|||
// }, |
|||
// beforeClick: (selected, context, grid) => { |
|||
// console.info('先执行before'); |
|||
// context.aaa = '111'; |
|||
// }, |
|||
click: (args) => { |
|||
// grid.setQueryCriteria({ |
|||
// fieldName: 'loginName', |
|||
// operator: 'contains', |
|||
// value: 'admin', |
|||
// }); |
|||
console.info('args=====', args); |
|||
args._click(); |
|||
}, |
|||
afterClick: (selected, context, grid) => { |
|||
// grid.addEditFormRef.setFieldValue('userName', '李四'); |
|||
}, |
|||
}, |
|||
[ |
|||
{ |
|||
name: 'op', |
|||
icon: 'difference', |
|||
label: '操作', |
|||
}, |
|||
'add', |
|||
'edit', |
|||
'clone', |
|||
'remove', |
|||
'separator', |
|||
'view', |
|||
'export', |
|||
], |
|||
'separator', |
|||
], |
|||
tableShowSortNo: true, |
|||
queryForm: [ |
|||
{ label: '登录名', name: 'loginName', type: 'w-text' }, |
|||
{ label: '用户名', name: 'userName', type: 'w-text' }, |
|||
{ label: '描述', name: 'description', type: 'w-text' }, |
|||
{ label: '用户名', name: 'userName1', type: 'w-text' }, |
|||
{ label: '描述', name: 'description1', type: 'w-text' }, |
|||
{ |
|||
label: '是否可用', |
|||
name: 'enable', |
|||
type: 'select', |
|||
options: [{ label: '监管报表-G4B-1表内信用风险加权资产计算表(权重法)', value: '0a981b42-d0df-4f02-94c4-edc20620ba9f' }], |
|||
}, |
|||
// { label: '邮箱地址', name: 'email', type: 'w-text' }, |
|||
// { label: '电话', name: 'phone', type: 'w-text' }, |
|||
// { label: '手机号', name: 'mobile', type: 'w-number' }, |
|||
// { label: '最后修改人', name: 'lastModifier', type: 'w-text' }, |
|||
// { label: '最后修改时间', name: 'lastModifyDate', type: 'w-date' }, |
|||
], |
|||
tableColumns: [ |
|||
// { |
|||
// name: 'info', |
|||
// label: '用户信息', |
|||
// columns: [ |
|||
// { name: 'loginName', label: '登录名', align: 'right' }, |
|||
// { name: 'userName', label: '用户名' }, |
|||
// ], |
|||
// }, |
|||
{ name: 'loginName', label: '登录名', align: 'right' }, |
|||
{ name: 'userName', label: '用户名' }, |
|||
// { |
|||
// name: 'lxxx', |
|||
// label: '联系方式', |
|||
// columns: [ |
|||
// { |
|||
// name: 'email', |
|||
// label: '邮箱地址', |
|||
// columns: [ |
|||
// { width: 100, name: 'auc', label: 'auc' }, |
|||
// { width: 100, name: 'ar', label: 'ar' }, |
|||
// { width: 100, name: 'ks', label: 'ks' }, |
|||
// ], |
|||
// }, |
|||
// { |
|||
// name: 'tx', |
|||
// label: '通讯', |
|||
// columns: [ |
|||
// { name: 'phone', label: '电话' }, |
|||
// { name: 'mobile', label: '手机号' }, |
|||
// ], |
|||
// }, |
|||
// { |
|||
// name: 'qq', |
|||
// label: 'QQ', |
|||
// // columns: [ |
|||
// // { width: 100, name: 'aucQualitative', label: 'aucQualitative' }, |
|||
// // { width: 100, name: 'arQualitative', label: 'arQualitative' }, |
|||
// // { width: 100, name: 'ksQualitative', label: 'ksQualitative' }, |
|||
// // ], |
|||
// }, |
|||
// ], |
|||
// }, |
|||
{ name: 'email', label: '邮箱地址' }, |
|||
{ name: 'phone', label: '电话' }, |
|||
{ name: 'mobile', label: '手机号' }, |
|||
{ name: 'qq', label: 'QQ' }, |
|||
{ name: 'description', label: '描述', width: 400 }, |
|||
{ |
|||
name: 'enable', |
|||
label: '是否可用', |
|||
align: 'center', |
|||
width: 400, |
|||
format: (val, row) => { |
|||
return { |
|||
componentType: 'q-checkbox', |
|||
bindModelValue: true, |
|||
attrs: { |
|||
dense: true, |
|||
}, |
|||
}; |
|||
// return { |
|||
// componentType: 'q-icon', |
|||
// attrs: { |
|||
// name: val ? IconEnum.是状态 : IconEnum.否状态, |
|||
// color: val ? 'green' : 'red', |
|||
// size: 'xs', |
|||
// }, |
|||
// }; |
|||
}, |
|||
}, |
|||
// { name: 'loginName', label: '登录名', align: 'right' }, |
|||
// { name: 'userName', label: '用户名' }, |
|||
{ name: 'lastModifier', label: '最后修改人' }, |
|||
{ name: 'lastModifyDate', label: '最后修改时间' }, |
|||
], |
|||
addEdit: { |
|||
dialog: {}, |
|||
form: { |
|||
colsNum: 1, |
|||
fields: [ |
|||
{ label: '登录名', name: 'loginName', type: 'w-text' }, |
|||
{ label: '用户名', name: 'userName', type: 'w-text' }, |
|||
{ label: '密码', name: 'password', type: 'w-text' }, |
|||
{ label: '是否可用1111', name: 'enable', type: 'w-checkbox' }, |
|||
{ |
|||
name: 'urlOpenType', |
|||
label: 'urlOpenType', |
|||
type: 'select', |
|||
options: Options.enum(UrlOpenTypeEnum, false), |
|||
defaultValue: 'NEW_WINDOW', |
|||
}, |
|||
], |
|||
}, |
|||
}, |
|||
view: { |
|||
panel: { |
|||
columnNum: 2, |
|||
fields: [ |
|||
{ name: 'id', label: '主键' }, |
|||
{ name: 'loginName', label: '登录名' }, |
|||
{ name: 'userName', label: '用户名' }, |
|||
{ name: 'description', label: '描述' }, |
|||
{ |
|||
name: 'enable', |
|||
label: '是否可用', |
|||
}, |
|||
{ name: 'email', label: '邮箱地址' }, |
|||
{ name: 'phone', label: '电话' }, |
|||
{ name: 'mobile', label: '手机号' }, |
|||
{ name: 'lastModifier', label: '最后修改人' }, |
|||
{ name: 'lastModifyDate', label: '最后修改时间' }, |
|||
], |
|||
}, |
|||
}, |
|||
}; |
|||
|
|||
onMounted(() => { |
|||
// gridRef.value.setLocalData([ |
|||
// { |
|||
// loginName: 'admin1', |
|||
// }, |
|||
// { |
|||
// loginName: 'admin2', |
|||
// }, |
|||
// { |
|||
// loginName: 'admin3', |
|||
// }, |
|||
// { |
|||
// loginName: 'admin4', |
|||
// }, |
|||
// { |
|||
// loginName: 'admin5', |
|||
// }, |
|||
// { |
|||
// loginName: 'admin6', |
|||
// }, |
|||
// { |
|||
// loginName: 'admin7', |
|||
// }, |
|||
// { |
|||
// loginName: 'admin8', |
|||
// }, |
|||
// { |
|||
// loginName: 'admin9', |
|||
// }, |
|||
// { |
|||
// loginName: 'admin10', |
|||
// }, |
|||
// { |
|||
// loginName: 'admin11', |
|||
// }, |
|||
// { |
|||
// loginName: 'admin12', |
|||
// }, |
|||
// { |
|||
// loginName: 'admin13', |
|||
// }, |
|||
// ]); |
|||
}); |
|||
const rowClick = () => {}; |
|||
</script> |
|||
|
|||
@ -1,37 +1,199 @@ |
|||
<template> |
|||
<w-graph v-model="modelValueRef"></w-graph> |
|||
<w-graph v-model="modelValueRef" :vertex-defines="vertexDefines" :edge-defines="edgeDefines"></w-graph> |
|||
</template> |
|||
<script setup lang="ts"> |
|||
import { ref } from 'vue'; |
|||
import { $t } from '@/platform'; |
|||
|
|||
const modelValueRef = ref(` |
|||
<GraphDataModel> |
|||
<root> |
|||
<Cell id="0"> |
|||
<Object as="style" /> |
|||
</Cell> |
|||
<Cell id="1" parent="0"> |
|||
<Object as="style" /> |
|||
</Cell> |
|||
<Person firstName="Daffy" lastName="Duck" id="2" > |
|||
<Cell vertex="1" parent="1" > |
|||
<Geometry _x="40" _y="40" _width="80" _height="30" as="geometry" style="edgeStyle=orthogonalEdgeStyle;rounded=0;html=1;jettySize=auto;orthogonalLoop=1;"/> |
|||
<Object as="style" /> |
|||
</Cell> |
|||
</Person> |
|||
<Person firstName="Bugs" lastName="Bunny" id="3"> |
|||
<Cell vertex="1" parent="1"> |
|||
<Geometry _x="200" _y="150" _width="80" _height="30" as="geometry" /> |
|||
<Object as="style" /> |
|||
</Cell> |
|||
</Person> |
|||
<Knows since="1985" id="4"> |
|||
<Cell edge="1" parent="1" source="2" target="3"> |
|||
<Geometry relative="1" as="geometry" /> |
|||
<Object as="style" /> |
|||
</Cell> |
|||
</Knows> |
|||
</root> |
|||
</GraphDataModel> |
|||
`); |
|||
const edgeDefines = [ |
|||
{ |
|||
type: 'ConditionBranch', |
|||
fromVertexType: 'Condition', |
|||
toVertexType: null, |
|||
getLabel: (value) => { |
|||
return value.value; |
|||
}, |
|||
getValue: (dom) => { |
|||
if (dom) { |
|||
return { |
|||
valueType: dom.getAttribute('valueType'), |
|||
value: dom.getAttribute('value'), |
|||
commands: dom.getAttribute('commands'), |
|||
}; |
|||
} else { |
|||
return { |
|||
valueType: 'java.lang.String', |
|||
value: '', |
|||
commands: '', |
|||
}; |
|||
} |
|||
}, |
|||
getFormFields: () => { |
|||
return [ |
|||
{ |
|||
name: 'valueType', |
|||
label: 'valueType', |
|||
type: 'w-select', |
|||
}, |
|||
{ |
|||
name: 'value', |
|||
label: 'value', |
|||
type: 'w-text', |
|||
}, |
|||
{ |
|||
name: 'commands', |
|||
label: 'commands', |
|||
type: 'w-code-mirror', |
|||
lang: 'java', |
|||
rows: 10, |
|||
lineWrap: true, |
|||
lineBreak: false, |
|||
placeholder: true, |
|||
}, |
|||
]; |
|||
}, |
|||
}, |
|||
]; |
|||
|
|||
const vertexDefines = [ |
|||
{ |
|||
type: 'Start', |
|||
thumbnail: { shape: 'ellipse', label: $t('start'), rx: 8, ry: 8, strokeColor: 'black', strokeWidth: 1 }, |
|||
cell: { |
|||
shape: 'ellipse', |
|||
size: [50, 50], |
|||
}, |
|||
getLabel: (value) => { |
|||
return value.label; |
|||
}, |
|||
getValue: (dom) => { |
|||
if (dom) { |
|||
return { |
|||
label: dom.getAttribute('label'), |
|||
}; |
|||
} else { |
|||
return { label: $t('start') }; |
|||
} |
|||
}, |
|||
getFormFields: () => { |
|||
return [ |
|||
{ |
|||
name: 'label', |
|||
label: 'label', |
|||
type: 'w-text', |
|||
}, |
|||
]; |
|||
}, |
|||
}, |
|||
{ |
|||
type: 'Condition', |
|||
thumbnail: { shape: 'rhombus', label: $t('condition'), strokeColor: 'black', strokeWidth: 1 }, |
|||
cell: { |
|||
shape: 'rhombus', |
|||
size: [120, 60], |
|||
}, |
|||
getLabel: (value) => { |
|||
return value.condition ? value.condition : $t('condition'); |
|||
}, |
|||
getValue: (dom) => { |
|||
if (dom) { |
|||
return { |
|||
condition: dom.getAttribute('condition'), |
|||
}; |
|||
} else { |
|||
return { |
|||
condition: '', |
|||
}; |
|||
} |
|||
}, |
|||
getFormFields: () => { |
|||
return [ |
|||
{ |
|||
name: 'condition', |
|||
label: 'condition', |
|||
type: 'w-code-mirror', |
|||
lang: 'java', |
|||
rows: 10, |
|||
lineWrap: true, |
|||
lineBreak: false, |
|||
placeholder: true, |
|||
}, |
|||
]; |
|||
}, |
|||
}, |
|||
{ |
|||
type: 'Expression', |
|||
thumbnail: { shape: 'rectangle', label: $t('expression'), strokeColor: 'black', strokeWidth: 1 }, |
|||
cell: { |
|||
shape: 'rectangle', |
|||
size: [120, 60], |
|||
}, |
|||
getLabel: (value) => { |
|||
let html = ''; |
|||
html += '<div style="text-align:center;">' + value.expression + '</div>'; |
|||
html += '<hr size="0.5"/>'; |
|||
html += '<div style="text-align:left;">' + value.commands + '</div>'; |
|||
return html; |
|||
}, |
|||
getValue: (dom) => { |
|||
if (dom) { |
|||
return { |
|||
expression: dom.getAttribute('expression'), |
|||
commands: dom.getAttribute('commands'), |
|||
}; |
|||
} else { |
|||
return { |
|||
expression: 'xxx', |
|||
commands: 'kjsdfi=klsjdf="xxx";\na=b;', |
|||
}; |
|||
} |
|||
}, |
|||
getFormFields: () => { |
|||
return [ |
|||
{ name: 'expression', label: 'expression', type: 'w-text' }, |
|||
{ |
|||
name: 'commands', |
|||
label: 'commands', |
|||
type: 'w-code-mirror', |
|||
lang: 'java', |
|||
rows: 10, |
|||
lineWrap: true, |
|||
lineBreak: true, |
|||
placeholder: true, |
|||
}, |
|||
]; |
|||
}, |
|||
}, |
|||
{ |
|||
type: 'ResourceAbstract', |
|||
thumbnail: { shape: 'ellipse', label: '资源摘要', rx: 11, ry: 6, strokeColor: 'black', strokeWidth: 1 }, |
|||
cell: { |
|||
shape: 'ellipse', |
|||
size: [120, 60], |
|||
}, |
|||
getLabel: (value) => { |
|||
return value.code; |
|||
}, |
|||
getValue: (dom) => { |
|||
if (dom) { |
|||
return { |
|||
code: dom.getAttribute('code'), |
|||
version: dom.getAttribute('version'), |
|||
}; |
|||
} else { |
|||
return { |
|||
code: '资源摘要', |
|||
version: '', |
|||
}; |
|||
} |
|||
}, |
|||
getFormFields: () => { |
|||
return [ |
|||
{ name: 'code', label: 'code', type: 'w-select' }, |
|||
{ name: 'version', label: 'version', type: 'w-select' }, |
|||
]; |
|||
}, |
|||
}, |
|||
]; |
|||
const modelValueRef = ref(''); |
|||
</script> |
|||
|
|||
Loading…
Reference in new issue