Browse Source

1、增加w-echarts组件

2、修复进入表格时设置了默认查询条件不生效问题
3、修改表格内置query按钮,若存在隐藏的查询条件自动追加更多查询条件按钮,同时修改将查询按钮修改为按钮组
main
likunming 10 months ago
parent
commit
f014bebaa1
  1. 80
      io.sc.platform.core.frontend/src/platform/components/echarts/WEcharts.vue
  2. 52
      io.sc.platform.core.frontend/src/platform/components/grid/WGrid.vue
  3. 5
      io.sc.platform.core.frontend/src/platform/components/index.ts
  4. 8
      io.sc.platform.core.frontend/src/platform/components/toolbar/WToolbar.vue
  5. 1
      io.sc.platform.core.frontend/src/platform/index.ts

80
io.sc.platform.core.frontend/src/platform/components/echarts/WEcharts.vue

@ -0,0 +1,80 @@
<template>
<div :style="echartsStyleComputed">
<div ref="echartsRef" class="w-full h-full"></div>
<q-resize-observer @resize="onResize" />
</div>
</template>
<script setup lang="ts">
import { ref, computed, defineProps, nextTick } from 'vue';
import * as echarts from 'echarts';
import { eventBus } from '@/platform';
const echartsRef = ref();
let echartsObject: echarts.ECharts | null = null;
/**
* 组件接收属性
*/
const props = defineProps({
width: { type: [Number, String], default: '98%' },
height: { type: [Number, String], default: '98%' },
option: {
type: Object,
default: () => {
return {};
},
},
});
/**
* 高宽计算
*/
const echartsStyleComputed = computed(() => {
let width = props.width;
let height = props.height;
if (typeof props.width === 'number') {
width = props.width + 'px';
}
if (typeof props.height === 'number') {
height = props.height + 'px';
}
return 'width: ' + width + ';height: ' + height + ';';
});
/**
* 初始化 Echarts
*/
const initEcharts = () => {
const dom: HTMLElement | null = echartsRef.value;
echartsObject = echarts.init(dom);
echartsObject.setOption(props.option);
};
/**
* 语言改变事件
*/
eventBus.on('onLocaleChanged', (local) => {
nextTick(() => {
echartsObject?.setOption(props.option);
echartsObject?.resize();
});
});
/**
* 窗口大小发生变化
*/
const onResize = () => {
setTimeout(() => {
// echartsdom
echartsObject?.resize();
}, 100);
};
nextTick(() => {
// echartsdom
setTimeout(() => {
initEcharts();
}, 100);
});
</script>

52
io.sc.platform.core.frontend/src/platform/components/grid/WGrid.vue

@ -854,19 +854,39 @@ const expandFun = (arr, treeExpand) => {
}); });
}; };
const screenCols = { xs: 1, sm: 2, md: 3, lg: 4, xl: 6 };
const queryFormColsNumComputed = computed(() => {
if (typeof props.queryFormColsNum === 'number' && props.queryFormColsNum > 0) {
return props.queryFormColsNum;
} else if (typeof props.queryFormColsNum === 'object') {
const screen = { ...screenCols, ...props.queryFormColsNum };
return screen[$q.screen.name];
}
return screenCols[$q.screen.name];
});
// toobar // toobar
const buttons_ = ref(<any>[]); const buttons_ = ref(<any>[]);
const handleChildrenBtn = (arr) => { const handleChildrenBtn = (arr, moreQueryShow) => {
const tempArr = <any>[]; const tempArr = <any>[];
for (let i = 0; i < arr.length; i++) { for (let i = 0; i < arr.length; i++) {
const btn = arr[i]; const btn = arr[i];
if (Array.isArray(btn) && btn.length > 0) { if (Array.isArray(btn) && btn.length > 0) {
const handleResult = handleChildrenBtn(btn); const handleResult = handleChildrenBtn(btn, moreQueryShow);
if (handleResult && handleResult.length > 0) { if (handleResult && handleResult.length > 0) {
tempArr.push(handleResult); tempArr.push(handleResult);
} }
} else if (typeof btn === 'string' && buttonObj[btn]) { } else if (typeof btn === 'string' && buttonObj[btn]) {
if (btn === buttonObj.query.name && i === 0) {
// QBtnDropdown
// ['query', 'reset']
tempArr.push(buttonObj[btn]); tempArr.push(buttonObj[btn]);
tempArr.push(buttonObj[buttonObj.moreQuery.name]);
} else if (btn === buttonObj.query.name) {
tempArr.push([buttonObj[btn], buttonObj[buttonObj.moreQuery.name]]);
} else {
tempArr.push(buttonObj[btn]);
}
} else if (typeof btn === 'object' && btn.extend && buttonObj[btn.extend]) { } else if (typeof btn === 'object' && btn.extend && buttonObj[btn.extend]) {
tempArr.push({ ...buttonObj[btn.extend], ...btn, _click: buttonObj[btn.extend].click }); tempArr.push({ ...buttonObj[btn.extend], ...btn, _click: buttonObj[btn.extend].click });
} else { } else {
@ -877,11 +897,33 @@ const handleChildrenBtn = (arr) => {
}; };
const handleToolbarActions = () => { const handleToolbarActions = () => {
buttons_.value.splice(0, buttons_.value.length); buttons_.value.splice(0, buttons_.value.length);
//
let moreQueryShow = false;
const rowColsNum = queryFormColsNumComputed.value * (props.queryFormRowNum || 1);
let currRowColsNum = 0;
let showQueryFormFieldNum = 0;
props.queryFormFields.forEach((item: any) => {
if (Tools.hasOwnProperty(item, 'colSpan')) {
currRowColsNum += item.colSpan;
} else {
currRowColsNum += 1;
}
if (currRowColsNum <= rowColsNum) {
showQueryFormFieldNum += 1;
}
});
if (showQueryFormFieldNum < props.queryFormFields.length) {
moreQueryShow = true;
}
props.toolbarActions.forEach((btn: any, index) => { props.toolbarActions.forEach((btn: any, index) => {
if (typeof btn === 'string' && buttonObj[btn]) { if (typeof btn === 'string' && buttonObj[btn]) {
if (btn === buttonObj.query.name && moreQueryShow) {
buttons_.value.push([buttonObj[btn], buttonObj[buttonObj.moreQuery.name]]);
} else {
buttons_.value.push(buttonObj[btn]); buttons_.value.push(buttonObj[btn]);
}
} else if (Array.isArray(btn) && btn.length > 0) { } else if (Array.isArray(btn) && btn.length > 0) {
buttons_.value.push(handleChildrenBtn(btn)); buttons_.value.push(handleChildrenBtn(btn, moreQueryShow));
} else if (typeof btn === 'object' && btn.extend && buttonObj[btn.extend]) { } else if (typeof btn === 'object' && btn.extend && buttonObj[btn.extend]) {
// //
buttons_.value.push({ ...buttonObj[btn.extend], ...btn, _click: buttonObj[btn.extend].click }); buttons_.value.push({ ...buttonObj[btn.extend], ...btn, _click: buttonObj[btn.extend].click });
@ -1338,6 +1380,7 @@ const buildQueryCriterias = (reqParams) => {
urlSearchParams.append('criteria', JSON.stringify(queryCriteria)); urlSearchParams.append('criteria', JSON.stringify(queryCriteria));
} }
if (queryFormRef.value) { if (queryFormRef.value) {
nextTick(() => {
const queryFormData = queryFormRef.value.getData(); const queryFormData = queryFormRef.value.getData();
Object.keys(queryFormData).forEach((item) => { Object.keys(queryFormData).forEach((item) => {
if (!isEmpty(queryFormData[item])) { if (!isEmpty(queryFormData[item])) {
@ -1349,6 +1392,7 @@ const buildQueryCriterias = (reqParams) => {
urlSearchParams.append('criteria', JSON.stringify(criteria)); urlSearchParams.append('criteria', JSON.stringify(criteria));
} }
}); });
});
} }
return urlSearchParams; return urlSearchParams;
}; };
@ -2227,7 +2271,7 @@ const handlerQueryFormShowField = () => {
}); });
} else { } else {
// //
const rowColsNum = (Tools.isUndefinedOrNull(queryFormRef.value) ? 4 : queryFormRef.value.getColsNum()) * (props.queryFormRowNum || 1); const rowColsNum = queryFormColsNumComputed.value * (props.queryFormRowNum || 1);
let currRowColsNum = 0; let currRowColsNum = 0;
props.queryFormFields.forEach((item: any) => { props.queryFormFields.forEach((item: any) => {
if (Tools.hasOwnProperty(item, 'colSpan')) { if (Tools.hasOwnProperty(item, 'colSpan')) {

5
io.sc.platform.core.frontend/src/platform/components/index.ts

@ -46,6 +46,8 @@ import WTreeGrid from './tree/WTreeGrid.vue';
import WWorkflowAction from './workflow/WWorkflowAction.vue'; import WWorkflowAction from './workflow/WWorkflowAction.vue';
import WSelectAssigneeDialog from './workflow/WSelectAssigneeDialog.vue'; import WSelectAssigneeDialog from './workflow/WSelectAssigneeDialog.vue';
import WEcharts from './echarts/WEcharts.vue';
export default { export default {
install: (app: App) => { install: (app: App) => {
app.component('WPlatformPage', WPlatformPage); app.component('WPlatformPage', WPlatformPage);
@ -93,6 +95,8 @@ export default {
app.component('WWorkflowAction', WWorkflowAction); app.component('WWorkflowAction', WWorkflowAction);
app.component('WSelectAssigneeDialog', WSelectAssigneeDialog); app.component('WSelectAssigneeDialog', WSelectAssigneeDialog);
app.component('WEcharts', WEcharts);
}, },
}; };
@ -130,6 +134,7 @@ export {
WTreeGrid, WTreeGrid,
WWorkflowAction, WWorkflowAction,
WSelectAssigneeDialog, WSelectAssigneeDialog,
WEcharts,
}; };
export { PlatformIconEnum } from './utils'; export { PlatformIconEnum } from './utils';

8
io.sc.platform.core.frontend/src/platform/components/toolbar/WToolbar.vue

@ -483,6 +483,14 @@ const buttonClick = async (button) => {
</script> </script>
<style lang="css"> <style lang="css">
.w-toolbar .q-btn.disabled {
opacity: 0.7 !important;
color: #a8a8a8;
}
.w-toolbar .q-item.disabled {
opacity: 0.6 !important;
color: #a8a8a8;
}
.w-toolbar-btn-dropdown .q-btn.disabled { .w-toolbar-btn-dropdown .q-btn.disabled {
opacity: 0.7 !important; opacity: 0.7 !important;
color: #a8a8a8; color: #a8a8a8;

1
io.sc.platform.core.frontend/src/platform/index.ts

@ -149,6 +149,7 @@ export {
WTreeGrid, WTreeGrid,
WWorkflowAction, WWorkflowAction,
WSelectAssigneeDialog, WSelectAssigneeDialog,
WEcharts,
} from './components'; } from './components';
export { PlatformIconEnum } from './components'; export { PlatformIconEnum } from './components';

Loading…
Cancel
Save