wangshaoping
/
platform
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

提交树表格支持代码

main
likunming 1 year ago
parent
950f715724
commit
f6998ca535
17 changed files with 452 additions and 198 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 20
      io.sc.platform.core.frontend/src/platform/components/form/WForm.vue
  2. 8
      io.sc.platform.core.frontend/src/platform/components/form/elements/WCheckbox.vue
  3. 12
      io.sc.platform.core.frontend/src/platform/components/form/elements/WDate.vue
  4. 12
      io.sc.platform.core.frontend/src/platform/components/form/elements/WNumber.vue
  5. 12
      io.sc.platform.core.frontend/src/platform/components/form/elements/WPassword.vue
  6. 12
      io.sc.platform.core.frontend/src/platform/components/form/elements/WSelect.vue
  7. 12
      io.sc.platform.core.frontend/src/platform/components/form/elements/WText.vue
  8. 12
      io.sc.platform.core.frontend/src/platform/components/form/elements/WTextBtn.vue
  9. 12
      io.sc.platform.core.frontend/src/platform/components/form/elements/WTextarea.vue
  10. 227
      io.sc.platform.core.frontend/src/platform/components/grid/TreeGridRow.vue
  11. 197
      io.sc.platform.core.frontend/src/platform/components/grid/WGrid.vue
  12. 10
      io.sc.platform.core.frontend/src/platform/components/toolbar/ChildrenBtn.vue
  13. 24
      io.sc.platform.core.frontend/src/platform/components/toolbar/WToolbar.vue
  14. 5
      io.sc.platform.core.frontend/src/views/likm/Dialog.vue
  15. 13
      io.sc.platform.core.frontend/src/views/likm/Form.vue
  16. 38
      io.sc.platform.core.frontend/src/views/likm/Grid.vue
  17. 24
      io.sc.platform.core.frontend/src/views/likm/TreeGrid.vue

20
io.sc.platform.core.frontend/src/platform/components/form/WForm.vue
View File

@ -19,9 +19,10 @@
v-model="formData[field.name]" v-model="formData[field.name]"
v-bind="field" v-bind="field"
:form-data="formData" :form-data="formData"
:form="instance"
@update:model-value="updateModelValue(field.name, formData[field.name])" @update:model-value="updateModelValue(field.name, formData[field.name])"
></component> ></component>
<component :is="fiedType[field.type] || field.type" v-else :form-ref="formRef" v-bind="field" :form-data="formData"></component> <component :is="fiedType[field.type] || field.type" v-else :form-ref="formRef" v-bind="field" :form-data="formData" :form="instance"></component>
</div> </div>
</template> </template>
</div> </div>
@ -31,8 +32,9 @@
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { ref, reactive, watch, computed, toRaw, defineProps, useAttrs } from 'vue'; import { ref, reactive, watch, computed, toRaw, defineProps, useAttrs, getCurrentInstance } from 'vue';
import { useQuasar } from 'quasar'; import { useQuasar } from 'quasar';
import { VueTools } from '@/platform';
import { PageStatusEnum } from '@/platform/components/utils'; import { PageStatusEnum } from '@/platform/components/utils';
const $q = useQuasar(); const $q = useQuasar();
@ -199,7 +201,7 @@ const getStatus = () => {
/** /**
* 对外暴露方法-获取当前一行应该显示的元素个数 * 对外暴露方法-获取当前一行应该显示的元素个数
*/ */
const getRowColsNum = () => { const getColsNum = () => {
return screenColsNumComputed.value; return screenColsNumComputed.value;
}; };
@ -238,9 +240,12 @@ const setValidationErrors = (errors: errorType[]) => {
} }
}; };
const getFields = () => {
return formFields;
};
defineExpose({ defineExpose({
data: formData, getFields,
fields: formFields,
getData, getData,
setData, setData,
reset, reset,
@ -249,7 +254,10 @@ defineExpose({
setFieldValue, setFieldValue,
setStatus, setStatus,
getStatus, getStatus,
getRowColsNum, getColsNum,
setValidationErrors, setValidationErrors,
}); });
const instance = getCurrentInstance();
VueTools.expose2Instance(instance);
</script> </script>

8
io.sc.platform.core.frontend/src/platform/components/form/elements/WCheckbox.vue
View File

@ -23,6 +23,10 @@ const props = defineProps({
return false; return false;
}, },
}, },
form: {
type: Object,
default: undefined,
},
}); });
const rulesComputed = computed(() => { const rulesComputed = computed(() => {
@ -34,9 +38,9 @@ const rulesComputed = computed(() => {
}); });
const hideIfComputed = computed(() => { const hideIfComputed = computed(() => {
return props.hideIf(); return props.hideIf(props.form);
}); });
const disableIfComputed = computed(() => { const disableIfComputed = computed(() => {
return props.disableIf(); return props.disableIf(props.form);
}); });
</script> </script>

12
io.sc.platform.core.frontend/src/platform/components/form/elements/WDate.vue
View File

@ -64,6 +64,10 @@ const props = defineProps({
return false; return false;
}, },
}, },
form: {
type: Object,
default: undefined,
},
}); });
watch( watch(
@ -87,20 +91,20 @@ const rulesComputed = computed(() => {
}); });
const hideIfComputed = computed(() => { const hideIfComputed = computed(() => {
return props.hideIf(); return props.hideIf(props.form);
}); });
const requiredIfComputed = computed(() => { const requiredIfComputed = computed(() => {
if (props.requiredIf) { if (props.requiredIf) {
return props.requiredIf() || false; return props.requiredIf(props.form) || false;
} else if (props.required) { } else if (props.required) {
return true; return true;
} }
return false; return false;
}); });
const readonlyIfComputed = computed(() => { const readonlyIfComputed = computed(() => {
return props.readonlyIf(); return props.readonlyIf(props.form);
}); });
const disableIfComputed = computed(() => { const disableIfComputed = computed(() => {
return props.disableIf(); return props.disableIf(props.form);
}); });
</script> </script>

12
io.sc.platform.core.frontend/src/platform/components/form/elements/WNumber.vue
View File

@ -54,6 +54,10 @@ const props = defineProps({
return false; return false;
}, },
}, },
form: {
type: Object,
default: undefined,
},
}); });
const rulesComputed = computed(() => { const rulesComputed = computed(() => {
@ -71,20 +75,20 @@ const rulesComputed = computed(() => {
}); });
const hideIfComputed = computed(() => { const hideIfComputed = computed(() => {
return props.hideIf(); return props.hideIf(props.form);
}); });
const requiredIfComputed = computed(() => { const requiredIfComputed = computed(() => {
if (props.requiredIf) { if (props.requiredIf) {
return props.requiredIf() || false; return props.requiredIf(props.form) || false;
} else if (props.required) { } else if (props.required) {
return true; return true;
} }
return false; return false;
}); });
const readonlyIfComputed = computed(() => { const readonlyIfComputed = computed(() => {
return props.readonlyIf(); return props.readonlyIf(props.form);
}); });
const disableIfComputed = computed(() => { const disableIfComputed = computed(() => {
return props.disableIf(); return props.disableIf(props.form);
}); });
</script> </script>

12
io.sc.platform.core.frontend/src/platform/components/form/elements/WPassword.vue
View File

@ -53,6 +53,10 @@ const props = defineProps({
return false; return false;
}, },
}, },
form: {
type: Object,
default: undefined,
},
}); });
const rulesComputed = computed(() => { const rulesComputed = computed(() => {
@ -69,20 +73,20 @@ const rulesComputed = computed(() => {
}); });
const hideIfComputed = computed(() => { const hideIfComputed = computed(() => {
return props.hideIf(); return props.hideIf(props.form);
}); });
const requiredIfComputed = computed(() => { const requiredIfComputed = computed(() => {
if (props.requiredIf) { if (props.requiredIf) {
return props.requiredIf() || false; return props.requiredIf(props.form) || false;
} else if (props.required) { } else if (props.required) {
return true; return true;
} }
return false; return false;
}); });
const readonlyIfComputed = computed(() => { const readonlyIfComputed = computed(() => {
return props.readonlyIf(); return props.readonlyIf(props.form);
}); });
const disableIfComputed = computed(() => { const disableIfComputed = computed(() => {
return props.disableIf(); return props.disableIf(props.form);
}); });
</script> </script>

12
io.sc.platform.core.frontend/src/platform/components/form/elements/WSelect.vue
View File

@ -53,6 +53,10 @@ const props = defineProps({
return false; return false;
}, },
}, },
form: {
type: Object,
default: undefined,
},
}); });
const rulesComputed = computed(() => { const rulesComputed = computed(() => {
@ -69,20 +73,20 @@ const rulesComputed = computed(() => {
}); });
const hideIfComputed = computed(() => { const hideIfComputed = computed(() => {
return props.hideIf(); return props.hideIf(props.form);
}); });
const requiredIfComputed = computed(() => { const requiredIfComputed = computed(() => {
if (props.requiredIf) { if (props.requiredIf) {
return props.requiredIf() || false; return props.requiredIf(props.form) || false;
} else if (props.required) { } else if (props.required) {
return true; return true;
} }
return false; return false;
}); });
const readonlyIfComputed = computed(() => { const readonlyIfComputed = computed(() => {
return props.readonlyIf(); return props.readonlyIf(props.form);
}); });
const disableIfComputed = computed(() => { const disableIfComputed = computed(() => {
return props.disableIf(); return props.disableIf(props.form);
}); });
</script> </script>

12
io.sc.platform.core.frontend/src/platform/components/form/elements/WText.vue
View File

@ -52,6 +52,10 @@ const props = defineProps({
return false; return false;
}, },
}, },
form: {
type: Object,
default: undefined,
},
}); });
const rulesComputed = computed(() => { const rulesComputed = computed(() => {
@ -68,20 +72,20 @@ const rulesComputed = computed(() => {
}); });
const hideIfComputed = computed(() => { const hideIfComputed = computed(() => {
return props.hideIf(); return props.hideIf(props.form);
}); });
const requiredIfComputed = computed(() => { const requiredIfComputed = computed(() => {
if (props.requiredIf) { if (props.requiredIf) {
return props.requiredIf() || false; return props.requiredIf(props.form) || false;
} else if (props.required) { } else if (props.required) {
return true; return true;
} }
return false; return false;
}); });
const readonlyIfComputed = computed(() => { const readonlyIfComputed = computed(() => {
return props.readonlyIf(); return props.readonlyIf(props.form);
}); });
const disableIfComputed = computed(() => { const disableIfComputed = computed(() => {
return props.disableIf(); return props.disableIf(props.form);
}); });
</script> </script>

12
io.sc.platform.core.frontend/src/platform/components/form/elements/WTextBtn.vue
View File

@ -64,6 +64,10 @@ const props = defineProps({
return false; return false;
}, },
}, },
form: {
type: Object,
default: undefined,
},
}); });
const rulesComputed = computed(() => { const rulesComputed = computed(() => {
@ -80,20 +84,20 @@ const rulesComputed = computed(() => {
}); });
const hideIfComputed = computed(() => { const hideIfComputed = computed(() => {
return props.hideIf(); return props.hideIf(props.form);
}); });
const requiredIfComputed = computed(() => { const requiredIfComputed = computed(() => {
if (props.requiredIf) { if (props.requiredIf) {
return props.requiredIf() || false; return props.requiredIf(props.form) || false;
} else if (props.required) { } else if (props.required) {
return true; return true;
} }
return false; return false;
}); });
const readonlyIfComputed = computed(() => { const readonlyIfComputed = computed(() => {
return props.readonlyIf(); return props.readonlyIf(props.form);
}); });
const disableIfComputed = computed(() => { const disableIfComputed = computed(() => {
return props.disableIf(); return props.disableIf(props.form);
}); });
</script> </script>

12
io.sc.platform.core.frontend/src/platform/components/form/elements/WTextarea.vue
View File

@ -52,6 +52,10 @@ const props = defineProps({
return false; return false;
}, },
}, },
form: {
type: Object,
default: undefined,
},
}); });
const rulesComputed = computed(() => { const rulesComputed = computed(() => {
@ -68,20 +72,20 @@ const rulesComputed = computed(() => {
}); });
const hideIfComputed = computed(() => { const hideIfComputed = computed(() => {
return props.hideIf(); return props.hideIf(props.form);
}); });
const requiredIfComputed = computed(() => { const requiredIfComputed = computed(() => {
if (props.requiredIf) { if (props.requiredIf) {
return props.requiredIf() || false; return props.requiredIf(props.form) || false;
} else if (props.required) { } else if (props.required) {
return true; return true;
} }
return false; return false;
}); });
const readonlyIfComputed = computed(() => { const readonlyIfComputed = computed(() => {
return props.readonlyIf(); return props.readonlyIf(props.form);
}); });
const disableIfComputed = computed(() => { const disableIfComputed = computed(() => {
return props.disableIf(); return props.disableIf(props.form);
}); });
</script> </script>

227
io.sc.platform.core.frontend/src/platform/components/grid/TreeGridRow.vue
View File

@ -1,35 +1,39 @@
<template> <template>
<q-tr :props="scope"> <q-tr :class="row.selected ? 'selected' : ''">
<q-td :style="{ 'padding-left': '2px' }"> <q-td :style="{ 'padding-left': '2px' }" class="nowrap text-nowrap">
<div class="flex flex-nowrap items-center"> <div class="flex flex-nowrap items-center">
<!--层级占位符--> <!--层级占位符-->
<span :style="`width:${27 * props.level}px;`"></span> <span :style="`width:${27 * props.level}px;`"></span>
<!--展开按钮--> <!--展开按钮-->
<q-btn <q-btn
v-if="scope.row.children && scope.row.children.length > 0" v-if="row.children && row.children.length > 0"
flat flat
size="16px" size="16px"
dense dense
padding="0px 0px" padding="0px 0px"
:icon="scope.row.expand ? 'bi-dash' : 'bi-plus'" :icon="state.currRow.expand ? 'bi-dash' : 'bi-plus'"
@click="scope.row.expand = !scope.row.expand" @click="expandFun"
/> />
<!--展开按钮占位符--> <!--展开按钮占位符-->
<span v-else style="width: 27px"></span> <span v-else style="width: 27px"></span>
<!--选择框--> <!--选择框-->
<q-checkbox v-model="scope.row.selected" flat size="40px" dense /> <q-checkbox
v-if="checkboxSelection"
v-model="state.currRow.selected"
flat
size="40px"
dense
@update:model-value="selectedFun(state.currRow.selected, state.currRow)"
/>
<!--文件夹图标--> <!--文件夹图标-->
<q-icon v-if="scope.row.children && scope.row.children.length > 0" :name="'folder'" color="amber" size="20px" class="px-1"></q-icon> <q-icon v-if="row.children && row.children.length > 0" :name="'folder'" color="amber" size="20px" class="px-1"></q-icon>
<!--文件图标--> <!--文件图标-->
<q-icon v-else name="note" size="20px" class="px-1"></q-icon> <q-icon v-else name="note" size="20px" class="px-1"></q-icon>
</div> </div>
</q-td> </q-td>
<q-td v-for="(col, index) in scope.cols" :key="col.name" :style="{ 'padding-left': '7px' }"> <q-td v-for="col in cols" :key="col.name" :title="col.classes?.indexOf('truncate') > -1 ? col.value : ''" @click="click($el, row, row.rowIndex)">
<div class="flex flex-nowrap items-center"> <div class="flex flex-nowrap items-center">
<template v-if="col.name === '_sortNo_'"> <template v-if="col.value && typeof col.value === 'object' && col.value.componentType">
{{ index + 1 }}
</template>
<template v-else-if="col.value && typeof col.value === 'object' && col.value.componentType">
<component :is="col.value.componentType" v-bind="col.value.attrs"></component> <component :is="col.value.componentType" v-bind="col.value.attrs"></component>
</template> </template>
<template v-else> <template v-else>
@ -38,49 +42,202 @@
</div> </div>
</q-td> </q-td>
</q-tr> </q-tr>
<template v-for="child in scope.row.children" :key="child.id"> <template v-for="child in row.children" :key="child[props.rowKey]">
<TreeGridRow v-if="scope.row.expand" :props="propsHandler(child)" :columns-map="columnsMap" :level="props.level + 1"></TreeGridRow> <TreeGridRow
v-if="state.currRow.expand"
:columns-map="props.columnsMap"
:row="child"
:cols="childColsHandler(child)"
:level="props.level + 1"
:checkbox-selection="checkboxSelection"
:row-key="props.rowKey"
></TreeGridRow>
</template> </template>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { ref, reactive, computed, watch, inject } from 'vue';
const props = defineProps({ const props = defineProps({
level: { type: Number, default: 0 }, level: { type: Number, default: 0 },
props: { columnsMap: {
type: Map,
default: () => {
return new Map();
},
},
row: {
type: Object, type: Object,
default: () => { default: () => {
return {}; return {};
}, },
}, },
columnsMap: { cols: {
type: Map, type: Array,
default: () => { default: () => {
return new Map(); return [];
}, },
}, },
checkboxSelection: { type: Boolean, default: true },
rowKey: { type: String, default: 'id' },
});
const table = inject('table');
const state = reactive({
currRow: {},
}); });
const scope = { ...props.props };
const propsHandler = (child) => { watch(
() => props.row.selected,
(newVal, oldVal) => {
state.currRow.selected = newVal;
},
);
// 根据传入的行获取表格记录中当前行对象
const getCurrRow = (arr) => {
for (let i = 0; i < arr.length; i++) {
let item = arr[i];
if (item[props.rowKey] === props.row[props.rowKey]) {
state.currRow = { expand: false, selected: false, ...item };
break;
} else if (item.children && item.children.length > 0) {
getCurrRow(item.children);
}
}
};
getCurrRow(table.rows);
// 根据数组记录获取传入的key对应的行对象
const getRow = (arr, key) => {
let result = undefined;
for (let i = 0; i < arr.length; i++) {
let item = arr[i];
if (item[props.rowKey] === key) {
result = item;
break;
} else if (item.children && item.children.length > 0) {
const temp = getRow(item.children, key);
if (temp) {
result = temp;
}
}
}
return result;
};
// 展开/收缩按钮触发事件
const expandFun = () => {
if (state.currRow) {
state.currRow.expand = !state.currRow.expand;
}
};
// checkbox触发事件
const selectedFun = (value, row) => {
if (value) {
selectedPush(row);
getRow(table.rows, row[props.rowKey]).selected = true;
} else {
selectedRemove(row);
getRow(table.rows, row[props.rowKey]).selected = false;
}
selectedChildren(row, value);
selectedParent(row, value);
};
// 设置子节点选中状态
const selectedChildren = (row, selected) => {
if (row.children && row.children.length > 0) {
for (let child of row.children) {
child['selected'] = selected;
if (selected) {
selectedPush(child);
} else {
selectedRemove(child);
}
selectedChildren(child, selected);
}
}
};
// 设置父节点选中状态
const selectedParent = (row, selected) => {
if (row.parent) {
const parent = getRow(table.rows, row.parent);
if (parent) {
if (selected && childrenSelectedStatus(parent).allSelected) {
parent.selected = true;
selectedPush(parent);
} else if (selected) {
parent.selected = null;
} else {
selectedRemove(parent);
if (childrenSelectedStatus(parent).partSelected) {
parent.selected = null;
} else {
parent.selected = false;
}
}
}
selectedParent(parent, selected);
}
};
// 子节点选中状态
const childrenSelectedStatus = (row) => {
let result = {
allSelected: true,
partSelected: false,
};
if (row.children && row.children.length > 0) {
for (let i = 0; i < row.children.length; i++) {
if (!row.children[i].selected) {
result.allSelected = false;
} else {
result.partSelected = true;
}
const temp = childrenSelectedStatus(row.children[i]);
if (!temp.allSelected) {
result.allSelected = false;
}
if (temp.partSelected) {
result.partSelected = true;
}
}
}
return result;
};
// 选中记录增加
const selectedPush = (row) => {
// 判断当前数组中是否已经存在，不存在才push
if (table.selected.findIndex((item) => item[props.rowKey] === row[props.rowKey]) < 0) {
table.selected.push(row);
}
};
const selectedRemove = (row) => {
// 判断当前数组中是否已经存在，存在才remove
if (table.selected.findIndex((item) => item[props.rowKey] === row[props.rowKey]) > -1) {
table.selected.splice(
table.selected.findIndex((item) => item[props.rowKey] === row[props.rowKey]),
1,
);
}
};
// 子节点cols属性处理
const childColsHandler = (child) => {
const cols = <any>[]; const cols = <any>[];
scope.cols.forEach((col) => { props.cols.forEach((col) => {
if (props.columnsMap.get(col.name) && props.columnsMap.get(col.name).format) { if (props.columnsMap.get(col.name) && props.columnsMap.get(col.name).format) {
cols.push({ ...col, value: props.columnsMap.get(col.name).format(child[col.name]) }); cols.push({ ...col, value: props.columnsMap.get(col.name).format(child[col.name]) });
} else { } else {
cols.push({ ...col, value: child[col.name] }); cols.push({ ...col, value: child[col.name] });
} }
}); });
return { return cols;
key: child.id, };
row: child,
pageIndex: props.props.pageIndex, const click = (el, row, rowIndex) => {
__trClass: props.props.__trClass, selectedFun(!row.selected, row);
cols: cols,
colsMap: props.props.colsMap,
rowIndex: props.props.rowIndex,
color: props.props.color,
dark: props.props.dark,
dense: props.props.dense,
selected: props.props.selected,
expand: props.props.expand,
};
}; };
</script> </script>

197
io.sc.platform.core.frontend/src/platform/components/grid/WGrid.vue
View File

@ -6,11 +6,11 @@
v-model:selected="table.selected" v-model:selected="table.selected"
flat flat
binary-state-sort binary-state-sort
selection="single"
separator="cell"
:no-data-label="table.noDataLabel" :no-data-label="table.noDataLabel"
:loading-label="table.loadingLabel" :loading-label="table.loadingLabel"
v-bind="attrs" v-bind="attrs"
:selection="selectionComputed"
separator="cell"
:rows="table.rows" :rows="table.rows"
:columns="extractTableColumns" :columns="extractTableColumns"
:rows-per-page-options="pagination.rowsPerPage && table.refHeightWidth.middleWidth > 600 ? table.pagination.rowsPerPageOptions : []" :rows-per-page-options="pagination.rowsPerPage && table.refHeightWidth.middleWidth > 600 ? table.pagination.rowsPerPageOptions : []"
@ -30,15 +30,9 @@
<w-toolbar <w-toolbar
v-bind="toolbarConfigure" v-bind="toolbarConfigure"
:buttons="buttons_" :buttons="buttons_"
:grid-prop="{ :grid-props="{
gridSelected: table.selected, selected: getSelectedRowsComputed,
gridRefs: { grid: instance,
gridRef: tableRef,
queryFormRef: queryFormRef,
addEditDialogRef: dialogRef,
addEditFormRef: dialogFormRef,
viewDrawerRef: drawerRef,
},
}" }"
></w-toolbar> ></w-toolbar>
</div> </div>
@ -57,7 +51,7 @@
<template v-if="columnTitleState.columnTitleRowNum > 1"> <template v-if="columnTitleState.columnTitleRowNum > 1">
<q-tr v-for="(r, rIndex) in columnTitleState.columnTitleArr" :key="rIndex"> <q-tr v-for="(r, rIndex) in columnTitleState.columnTitleArr" :key="rIndex">
<q-th <q-th
v-if="rIndex === 0 && (!attrs.selection || attrs.selection === 'multiple')" v-if="rIndex === 0 && selectionComputed === 'multiple' && props.checkboxSelection && !props.tree"
:rowspan="columnTitleState.columnTitleRowNum" :rowspan="columnTitleState.columnTitleRowNum"
:style="moreColumnTitleTableSelectionStyle" :style="moreColumnTitleTableSelectionStyle"
> >
@ -79,8 +73,10 @@
</template> </template>
<template v-else> <template v-else>
<q-tr :props="scope"> <q-tr :props="scope">
<q-th v-if="attrs.selection || attrs.selection === 'multiple'" style="padding: 0; width: 50px"> <q-checkbox v-model="scope.selected" flat /></q-th> <q-th v-if="selectionComputed === 'multiple' && props.checkboxSelection && !props.tree" :style="props.tree ? '' : 'padding: 0; width: 50px'">
<q-th v-else-if="!attrs.selection || attrs.selection !== 'none'"></q-th> <q-checkbox v-model="scope.selected" flat
/></q-th>
<q-th v-else></q-th>
<q-th v-for="col in scope.cols" :key="col.name" :props="scope" :style="col.style" :class="col.classes"> <q-th v-for="col in scope.cols" :key="col.name" :props="scope" :style="col.style" :class="col.classes">
{{ col.label }} {{ col.label }}
</q-th> </q-th>
@ -89,10 +85,16 @@
</template> </template>
<template #body="scope"> <template #body="scope">
<template v-if="tree"> <template v-if="tree">
<TreeGridRow :props="scope" :columns-map="tableColumnsMap" @row-click="rowClick($el, scope.row, scope.rowIndex)"></TreeGridRow> <TreeGridRow
:columns-map="tableColumnsMap"
:row="scope.row"
:cols="scope.cols"
:checkbox-selection="props.checkboxSelection"
:row-key="props.rowKey"
></TreeGridRow>
</template> </template>
<q-tr v-else :props="scope" @click="rowClick($el, scope.row, scope.rowIndex)" @dblclick="rowDbClick($el, scope.row, scope.rowIndex)"> <q-tr v-else :props="scope" @click="rowClick($el, scope.row, scope.rowIndex)" @dblclick="rowDbClick($el, scope.row, scope.rowIndex)">
<q-td v-if="!attrs.selection || attrs.selection !== 'none'" class="text-center" style="padding: 0; width: 50px"> <q-td v-if="props.checkboxSelection" class="text-center" style="padding: 0; width: 50px">
<q-checkbox v-model="scope.selected" flat /> <q-checkbox v-model="scope.selected" flat />
</q-td> </q-td>
<template v-if="draggable"> <template v-if="draggable">
@ -115,7 +117,7 @@
<component :is="col.value.componentType" v-bind="col.value.attrs"></component> <component :is="col.value.componentType" v-bind="col.value.attrs"></component>
</template> </template>
<template v-else> <template v-else>
{{ col.value }} <span v-dompurify-html="col.value || ''"></span>
</template> </template>
</q-td> </q-td>
</template> </template>
@ -128,7 +130,7 @@
<component :is="col.value.componentType" v-bind="col.value.attrs"></component> <component :is="col.value.componentType" v-bind="col.value.attrs"></component>
</template> </template>
<template v-else> <template v-else>
{{ col.value }} <span v-dompurify-html="col.value || ''"></span>
</template> </template>
</q-td> </q-td>
</template> </template>
@ -185,15 +187,15 @@
</w-dialog> </w-dialog>
<w-drawer ref="drawerRef" title="查看" v-bind="viewer.drawer"> <w-drawer ref="drawerRef" title="查看" v-bind="viewer.drawer">
<div class="p-2.5"> <div class="p-2.5">
<w-info-panel v-bind="viewer.panel" :info="viewInfo.infoArray"></w-info-panel> <w-info-panel ref="infoRef" v-bind="viewer.panel" :info="viewInfo.infoArray"></w-info-panel>
</div> </div>
</w-drawer> </w-drawer>
</div> </div>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { ref, reactive, computed, onMounted, nextTick, toRaw, useAttrs } from 'vue'; import { ref, reactive, computed, onMounted, nextTick, toRaw, useAttrs, getCurrentInstance, provide } from 'vue';
import { axios, Environment, NotifyManager, TreeBuilder } from '@/platform'; import { axios, Environment, NotifyManager, TreeBuilder, VueTools } from '@/platform';
import { useQuasar, getCssVar, exportFile } from 'quasar'; import { useQuasar, getCssVar, exportFile } from 'quasar';
import { IconEnum } from '@/platform/enums'; import { IconEnum } from '@/platform/enums';
import { extractTableColumnsProps, arrayToMap, OperatorTypeEnum, isEmpty, PageStatusEnum } from '@/platform/components/utils'; import { extractTableColumnsProps, arrayToMap, OperatorTypeEnum, isEmpty, PageStatusEnum } from '@/platform/components/utils';
@ -223,8 +225,10 @@ const props = defineProps({
denseBody: { type: Boolean, default: false }, // 表格行紧凑模式 denseBody: { type: Boolean, default: false }, // 表格行紧凑模式
sortNo: { type: Boolean, default: false }, // 是否显示排序号 sortNo: { type: Boolean, default: false }, // 是否显示排序号
leftColumnStickyNumber: { type: Number, default: 0 }, // 从左侧开始冻结列数，复选框与排序列不计算在内，目前支持1-10列。，暂时不提供了以后放到列属性中，参考el leftColumnStickyNumber: { type: Number, default: 0 }, // 从左侧开始冻结列数，复选框与排序列不计算在内，目前支持1-10列。，暂时不提供了以后放到列属性中，参考el
clickSelectedRow: { type: Boolean, default: true }, // 单击选中行，selection为'none'时无效。 checkboxSelection: { type: Boolean, default: true }, // checkbox选择模式，默认启用
tree: { type: Boolean, default: false }, // 树形表格模式，按照层级关系构建数据并以树形展现 tree: { type: Boolean, default: false }, // 树形表格模式，按照层级关系构建数据并以树形展现
treeExpand: { type: Boolean, default: false }, // 树形表格数据加载后是否全部展开
treeExpandChildren: { type: Boolean, default: false }, // 树形表格父节点被选中时是否展开所有的子节点
columns: { columns: {
type: Array, type: Array,
default: () => { default: () => {
@ -356,6 +360,7 @@ const tableRef = ref();
const dialogRef = ref(); const dialogRef = ref();
const drawerRef = ref(); const drawerRef = ref();
const dialogFormRef = ref(); const dialogFormRef = ref();
const infoRef = ref();
const tableColumnsMap = arrayToMap('name', props.columns); const tableColumnsMap = arrayToMap('name', props.columns);
const queryFormFieldsMap = arrayToMap('name', props.queryFormFields); const queryFormFieldsMap = arrayToMap('name', props.queryFormFields);
@ -444,15 +449,15 @@ const buttonObj = {
return false; return false;
}, },
click: (selected, context) => { click: (selected, context) => {
if (!table.selected || table.selected.length <= 0) { if (!selected || selected.length <= 0) {
NotifyManager.warn('请选择要编辑的记录'); NotifyManager.warn('请选择要编辑的记录');
} else { } else {
dialogRef.value.show(); dialogRef.value.show();
dialog.dialogTitle = '编辑'; dialog.dialogTitle = '编辑';
nextTick(() => { nextTick(() => {
dialogFormRef.value.setStatus(PageStatusEnum.编辑); dialogFormRef.value.setStatus(PageStatusEnum.编辑);
dialogFormRef.value.setData(table.selected[0]); dialogFormRef.value.setData(selected[0]);
emit('editDialogOpenAfter', table.selected[0]); emit('editDialogOpenAfter', selected[0]);
}); });
} }
}, },
@ -468,14 +473,14 @@ const buttonObj = {
return false; return false;
}, },
click: (selected, context) => { click: (selected, context) => {
if (!table.selected || table.selected.length <= 0) { if (!selected || selected.length <= 0) {
NotifyManager.warn('请选择要复制的记录'); NotifyManager.warn('请选择要复制的记录');
} else { } else {
dialogRef.value.show(); dialogRef.value.show();
dialog.dialogTitle = '复制'; dialog.dialogTitle = '复制';
nextTick(() => { nextTick(() => {
dialogFormRef.value.setStatus(PageStatusEnum.新增); dialogFormRef.value.setStatus(PageStatusEnum.新增);
dialogFormRef.value.setData(table.selected[0]); dialogFormRef.value.setData(selected[0]);
}); });
} }
}, },
@ -491,7 +496,7 @@ const buttonObj = {
return false; return false;
}, },
click: (selected, context) => { click: (selected, context) => {
if (!table.selected || table.selected.length <= 0) { if (!selected || selected.length <= 0) {
NotifyManager.warn('请选择要删除的记录'); NotifyManager.warn('请选择要删除的记录');
} else { } else {
$q.dialog({ $q.dialog({
@ -502,11 +507,11 @@ const buttonObj = {
}).onOk(() => { }).onOk(() => {
let requestParams: any = { let requestParams: any = {
method: 'DELETE', method: 'DELETE',
url: (props.removeDataUrl ? props.removeDataUrl : props.dataUrl) + '/' + table.selected[0][props.rowKey], url: (props.removeDataUrl ? props.removeDataUrl : props.dataUrl) + '/' + selected[0][props.rowKey],
}; };
if (props.templateGridId) { if (props.templateGridId) {
const data = <any>[]; const data = <any>[];
table.selected.forEach((item) => { selected.forEach((item) => {
data.push(item[props.rowKey]); data.push(item[props.rowKey]);
}); });
requestParams = { requestParams = {
@ -658,6 +663,7 @@ const table = reactive({
}, },
inFullscreen: false, // 表格当前是否为全屏模式 inFullscreen: false, // 表格当前是否为全屏模式
}); });
provide('table', table);
const dialog = reactive({ const dialog = reactive({
dialogTitle: '新增', dialogTitle: '新增',
@ -822,6 +828,14 @@ const handlerMoreRowColumnTitle = () => {
}); });
}; };
const selectionComputed = computed(() => {
if (attrs.selection && attrs.selection === 'multiple') {
return 'multiple';
} else {
return 'single';
}
});
const tableHeightComputed = computed(() => { const tableHeightComputed = computed(() => {
// 浏览器可视区域高度 // 浏览器可视区域高度
const screenHeight = $q.screen.height; const screenHeight = $q.screen.height;
@ -893,25 +907,24 @@ const tableFullscreenFun = (value) => {
}; };
const rowClick = (evt: any, row: any, index: any) => { const rowClick = (evt: any, row: any, index: any) => {
if (props.onRowClick) { if (selectionComputed.value === 'multiple') {
if (props.clickSelectedRow && (!attrs.selection || attrs.selection !== 'none')) { if (table.selected.findIndex((item) => item[props.rowKey] === row[props.rowKey]) < 0) {
rowClickFun(row); table.selected.push(row);
} else {
table.selected.splice(
table.selected.findIndex((item) => item[props.rowKey] === row[props.rowKey]),
1,
);
} }
emit('rowClick', evt, row, index);
} else { } else {
rowClickFun(row);
}
};
const rowClickFun = (row: any) => {
// 设置单击表格行选中记录
if (!attrs.selection || attrs.selection === 'single') {
table.selected = [];
table.selected.push(row);
} else if (attrs.selection && attrs.selection === 'multiple') {
table.selected = []; table.selected = [];
table.selected.push(row); table.selected.push(row);
} }
if (props.onRowClick) {
emit('rowClick', evt, row, index);
}
}; };
const rowDbClick = (evt, row, index) => { const rowDbClick = (evt, row, index) => {
if (props.onRowDbClick) { if (props.onRowDbClick) {
emit('rowDbClick', evt, row, index); emit('rowDbClick', evt, row, index);
@ -957,7 +970,7 @@ const buildQueryCriterias = (reqParams) => {
if (!isEmpty(queryFormData[item])) { if (!isEmpty(queryFormData[item])) {
const criteria = <CriteriaType>{ const criteria = <CriteriaType>{
fieldName: item, fieldName: item,
operator: queryFormFieldsMap.get(item)?.hasOwnProperty.call('queryOperator') ? queryFormFieldsMap.get(item).queryOperator : OperatorTypeEnum.contains, operator: queryFormFieldsMap.get(item).queryOperator || OperatorTypeEnum.contains,
value: queryFormData[item], value: queryFormData[item],
}; };
urlSearchParams.append('criteria', JSON.stringify(criteria)); urlSearchParams.append('criteria', JSON.stringify(criteria));
@ -1050,10 +1063,10 @@ const onRequest = async (ops: any) => {
table.pagination.descending = ops.pagination.descending; table.pagination.descending = ops.pagination.descending;
table.rows = responseData.content; table.rows = responseData.content;
} else if (resp && resp.data && props.tree) { } else if (resp && resp.data && props.tree) {
const treeData = TreeBuilder.build(resp.data); const treeRows = TreeBuilder.build(resp.data);
table.pagination.rowsNumber = resp.data.length; table.pagination.rowsNumber = resp.data.length;
console.info('treeData============', treeData); table.pagination.rowsPerPage = 0;
table.rows = treeData; table.rows = treeRows;
} }
stickyHeaderColumn(); stickyHeaderColumn();
}; };
@ -1064,8 +1077,8 @@ const save = async () => {
const validate = await dialogFormRef.value.validate(); const validate = await dialogFormRef.value.validate();
if (validate) { if (validate) {
let dialogFormData = dialogFormRef.value.getData(); let dialogFormData = dialogFormRef.value.getData();
if (table.selected && table.selected.length > 0) { if (getSelectedRowsComputed.value && getSelectedRowsComputed.value.length > 0) {
dialogFormData[props.rowKey] = table.selected[0][props.rowKey]; dialogFormData[props.rowKey] = getSelectedRowsComputed.value[0][props.rowKey];
} }
let submitFlag = true; let submitFlag = true;
emit('addEditDataSubmitBefore', dialogFormData, (handlerRequestParams: any | boolean) => { emit('addEditDataSubmitBefore', dialogFormData, (handlerRequestParams: any | boolean) => {
@ -1085,7 +1098,7 @@ const save = async () => {
? props.addDataUrl ? props.addDataUrl
? props.addDataUrl ? props.addDataUrl
: props.dataUrl : props.dataUrl
: (props.editDataUrl ? props.editDataUrl : props.dataUrl) + '/' + table.selected[0][props.rowKey], : (props.editDataUrl ? props.editDataUrl : props.dataUrl) + '/' + getSelectedRowsComputed.value[0][props.rowKey],
}; };
if (props.templateGridId) { if (props.templateGridId) {
requestParams = { requestParams = {
@ -1101,7 +1114,7 @@ const save = async () => {
'/' + '/' +
props.rowKey + props.rowKey +
'/' + '/' +
table.selected[0][props.rowKey], getSelectedRowsComputed.value[0][props.rowKey],
}; };
} }
dialog.dialogButtons[0].loading = false; dialog.dialogButtons[0].loading = false;
@ -1127,20 +1140,20 @@ const save = async () => {
} }
}; };
const onView = () => { const onView = () => {
if (!table.selected || table.selected.length <= 0) { if (!getSelectedRowsComputed.value || getSelectedRowsComputed.value.length <= 0) {
NotifyManager.warn('请选择要查看的记录'); NotifyManager.warn('请选择要查看的记录');
} else { } else {
viewInfo.infoArray = <any>[]; viewInfo.infoArray = <any>[];
if (props.viewer.panel.fields && props.viewer.panel.fields.length > 0) { if (props.viewer.panel.fields && props.viewer.panel.fields.length > 0) {
for (let item of props.viewer.panel.fields) { for (let item of props.viewer.panel.fields) {
if (item.format) { if (item.format) {
viewInfo.infoArray.push({ label: item.label, value: item.format(table.selected[0][item.name]) }); viewInfo.infoArray.push({ label: item.label, value: item.format(getSelectedRowsComputed.value[0][item.name]) });
} else { } else {
let value = null; let value = null;
if (tableColumnsMap.get(item.name) && tableColumnsMap.get(item.name).format) { if (tableColumnsMap.get(item.name) && tableColumnsMap.get(item.name).format) {
value = tableColumnsMap.get(item.name).format(table.selected[0][item.name]); value = tableColumnsMap.get(item.name).format(getSelectedRowsComputed.value[0][item.name]);
} else { } else {
value = table.selected[0][item.name]; value = getSelectedRowsComputed.value[0][item.name];
} }
viewInfo.infoArray.push({ label: item.label, value: value }); viewInfo.infoArray.push({ label: item.label, value: value });
} }
@ -1148,9 +1161,9 @@ const onView = () => {
} else { } else {
for (let item of tableColumnsMap) { for (let item of tableColumnsMap) {
if (item[1].format) { if (item[1].format) {
viewInfo.infoArray.push({ label: item[1].label, value: item[1].format(table.selected[0][item[0]]) }); viewInfo.infoArray.push({ label: item[1].label, value: item[1].format(getSelectedRowsComputed.value[0][item[0]]) });
} else { } else {
viewInfo.infoArray.push({ label: item[1].label, value: table.selected[0][item[0]] }); viewInfo.infoArray.push({ label: item[1].label, value: getSelectedRowsComputed.value[0][item[0]] });
} }
} }
} }
@ -1186,7 +1199,7 @@ const replaceRow = (row) => {
} }
}; };
// 删除选中数据 // 删除选中数据
const deleteRows = (rows) => { const removeRows = (rows) => {
rows.forEach((item) => { rows.forEach((item) => {
table.rows.splice( table.rows.splice(
table.rows.findIndex((v) => { table.rows.findIndex((v) => {
@ -1208,15 +1221,26 @@ const addRow = (row, index) => {
stickyHeaderColumn(); stickyHeaderColumn();
}; };
const getSelectedRows = () => { const getSelectedRowsHandler = (arr, selectedRows) => {
return table.selected; arr.forEach((item) => {
if (table.selected.findIndex((tmp) => tmp[props.rowKey] === item[props.rowKey]) > -1) {
selectedRows.push(item);
}
if (props.tree && item.children && item.children.length > 0) {
getSelectedRowsHandler(item.children, selectedRows);
}
});
}; };
const getQueryFormRef = () => { const getSelectedRowsComputed = computed(() => {
return queryFormRef; const selectedRows = <any>[];
}; getSelectedRowsHandler(table.rows, selectedRows);
const getAddEditFormRef = () => { return selectedRows;
return dialogFormRef; });
// 获得选择的所有记录
const getSelectedRows = () => {
return getSelectedRowsComputed.value;
}; };
const getRows = () => { const getRows = () => {
@ -1326,10 +1350,7 @@ const stickyHeaderColumn = () => {
}; };
const excludeColumnNum = computed(() => { const excludeColumnNum = computed(() => {
let num = 0; let num = 1;
if (!attrs.selection || attrs.selection !== 'none') {
num += 1;
}
if (props.sortNo) { if (props.sortNo) {
num += 1; num += 1;
} }
@ -1379,8 +1400,12 @@ const getStickyColumn = () => {
const stickyColumnArr = getStickyColumn(); const stickyColumnArr = getStickyColumn();
const moreColumnTitleTableSelectionStyle = computed(() => { const moreColumnTitleTableSelectionStyle = computed(() => {
if ((!attrs.selection || attrs.selection !== 'none') && props.leftColumnStickyNumber > 0) { if (props.leftColumnStickyNumber > 0) {
return 'z-index: 3;position: sticky;left: 0px;'; if (props.tree) {
return 'z-index: 3;position: sticky;left: 0px;';
} else {
return 'z-index: 3;position: sticky;left: 0px;padding: 0; width: 50px;';
}
} }
return ''; return '';
}); });
@ -1663,7 +1688,7 @@ const handlerQueryFormShowField = () => {
table.queryFormFields.push(item); table.queryFormFields.push(item);
}); });
} else { } else {
const rowColsNum = queryFormRef.value.getRowColsNum() * (props.queryFormRowNum || 1); const rowColsNum = queryFormRef.value.getColsNum() * (props.queryFormRowNum || 1);
let currRowColsNum = 0; let currRowColsNum = 0;
props.queryFormFields.forEach((item) => { props.queryFormFields.forEach((item) => {
if (item.hasOwnProperty('colspan')) { if (item.hasOwnProperty('colspan')) {
@ -1692,17 +1717,39 @@ onMounted(() => {
} }
}); });
const getQueryForm = () => {
return queryFormRef.value;
};
const getEditorDialog = () => {
return dialogRef.value;
};
const getEditorForm = () => {
return dialogFormRef.value;
};
const getViewerDrawer = () => {
return drawerRef.value;
};
const getViewerPanel = () => {
return infoRef.value;
};
defineExpose({ defineExpose({
getSelectedRows, getSelectedRows,
getRows, getRows,
refresh, refresh,
replaceRows, replaceRows,
replaceRow, replaceRow,
deleteRows, removeRows,
addRow, addRow,
getQueryFormRef, getQueryForm,
getAddEditFormRef, getEditorDialog,
getEditorForm,
getViewerDrawer,
getViewerPanel,
}); });
const instance = getCurrentInstance();
VueTools.expose2Instance(instance);
</script> </script>
<style scoped lang="css"> <style scoped lang="css">

10
io.sc.platform.core.frontend/src/platform/components/toolbar/ChildrenBtn.vue
View File

@ -1,5 +1,5 @@
<template> <template>
<q-item clickable :disable="button[0].enableIf ? !button[0].enableIf(gridProp.gridSelected) : false"> <q-item clickable :disable="button[0].enableIf ? !button[0].enableIf(gridProps.selected, gridProps.grid) : false">
<q-item-section> <q-item-section>
<q-item-label><q-icon v-if="button[0].icon" :name="button[0].icon" left size="20px"></q-icon> {{ button[0].label }}</q-item-label> <q-item-label><q-icon v-if="button[0].icon" :name="button[0].icon" left size="20px"></q-icon> {{ button[0].label }}</q-item-label>
</q-item-section> </q-item-section>
@ -17,7 +17,7 @@
<q-item <q-item
v-close-popup v-close-popup
clickable clickable
:disable="childrenBtn.enableIf ? !childrenBtn.enableIf(gridProp.gridSelected) : false" :disable="childrenBtn.enableIf ? !childrenBtn.enableIf(gridProps.selected, gridProps.grid) : false"
@click="buttonClick(childrenBtn)" @click="buttonClick(childrenBtn)"
> >
<q-item-section> <q-item-section>
@ -38,12 +38,12 @@ const props = defineProps({
return []; return [];
}, },
}, },
gridProp: { gridProps: {
type: Object, type: Object,
default: () => { default: () => {
return { return {
gridSelected: [], selected: [],
gridRefs: {}, grid: undefined,
}; };
}, },
}, },

24
io.sc.platform.core.frontend/src/platform/components/toolbar/WToolbar.vue
View File

@ -13,7 +13,7 @@
outline outline
v-bind="btn.data[0]" v-bind="btn.data[0]"
:split="btn.data[0].click ? true : false" :split="btn.data[0].click ? true : false"
:disable="btn.data[0].enableIf ? !btn.data[0].enableIf(gridProp.gridSelected) : false" :disable="btn.data[0].enableIf ? !btn.data[0].enableIf(gridProps.selected, gridProps.grid) : false"
class="class-action-item" class="class-action-item"
@click="buttonClick(btn.data[0])" @click="buttonClick(btn.data[0])"
> >
@ -25,14 +25,14 @@
<ChildrenBtn <ChildrenBtn
v-else-if="Array.isArray(childrenBtn) && childrenBtn.length > 0" v-else-if="Array.isArray(childrenBtn) && childrenBtn.length > 0"
:button="childrenBtn" :button="childrenBtn"
:grid-prop="gridProp" :grid-props="gridProps"
:button-click="buttonClick" :button-click="buttonClick"
></ChildrenBtn> ></ChildrenBtn>
<q-item <q-item
v-else v-else
v-close-popup v-close-popup
clickable clickable
:disable="childrenBtn.enableIf ? !childrenBtn.enableIf(gridProp.gridSelected) : false" :disable="childrenBtn.enableIf ? !childrenBtn.enableIf(gridProps.selected) : false"
@click="buttonClick(childrenBtn)" @click="buttonClick(childrenBtn)"
> >
<q-item-section> <q-item-section>
@ -45,7 +45,7 @@
</q-btn-dropdown> </q-btn-dropdown>
<q-btn <q-btn
v-else v-else
:disable="btn.data.enableIf ? !btn.data.enableIf(gridProp.gridSelected) : false" :disable="btn.data.enableIf ? !btn.data.enableIf(gridProps.selected, gridProps.grid) : false"
no-wrap no-wrap
outline outline
v-bind="btn.data" v-bind="btn.data"
@ -62,14 +62,14 @@
<ChildrenBtn <ChildrenBtn
v-else-if="Array.isArray(childrenBtn.data) && childrenBtn.data.length > 0" v-else-if="Array.isArray(childrenBtn.data) && childrenBtn.data.length > 0"
:button="childrenBtn.data" :button="childrenBtn.data"
:grid-prop="gridProp" :grid-props="gridProps"
:button-click="buttonClick" :button-click="buttonClick"
></ChildrenBtn> ></ChildrenBtn>
<q-item <q-item
v-else v-else
v-close-popup v-close-popup
clickable clickable
:disable="childrenBtn.data.enableIf ? !childrenBtn.data.enableIf(gridProp.gridSelected) : false" :disable="childrenBtn.data.enableIf ? !childrenBtn.data.enableIf(gridProps.selected, gridProps.grid) : false"
@click="buttonClick(childrenBtn.data)" @click="buttonClick(childrenBtn.data)"
> >
<q-item-section> <q-item-section>
@ -100,12 +100,12 @@ const props = defineProps({
return []; return [];
}, },
}, },
gridProp: { gridProps: {
type: Object, type: Object,
default: () => { default: () => {
return { return {
gridSelected: [], selected: [],
gridRefs: {}, grid: undefined,
}; };
}, },
}, },
@ -259,13 +259,13 @@ const buttonClick = async (button) => {
let beforeResult = true; let beforeResult = true;
const context = {}; const context = {};
if (button.beforeClick) { if (button.beforeClick) {
beforeResult = await button.beforeClick(props.gridProp.gridSelected, context, props.gridProp.gridRefs); beforeResult = await button.beforeClick(props.gridProps.selected, context, props.gridProps.grid);
} }
if (beforeResult && button.click) { if (beforeResult && button.click) {
await button.click(props.gridProp.gridSelected, context, button._click, props.gridProp.gridRefs); await button.click(props.gridProps.selected, context, button._click, props.gridProps.grid);
if (button.afterClick) { if (button.afterClick) {
nextTick(() => { nextTick(() => {
button.afterClick(props.gridProp.gridSelected, context, props.gridProp.gridRefs); button.afterClick(props.gridProps.selected, context, props.gridProps.grid);
}); });
} }
} }

5
io.sc.platform.core.frontend/src/views/likm/Dialog.vue
View File

@ -11,7 +11,10 @@
@hide="aaaaa" @hide="aaaaa"
> >
<q-splitter v-model="aa" style="height: 100%"> <q-splitter v-model="aa" style="height: 100%">
<template #before> 11111 </template> <template #before>
<q-input></q-input><q-input></q-input><q-input></q-input><q-input></q-input><q-input></q-input><q-input></q-input><q-input></q-input
><q-input></q-input><q-input></q-input><q-input></q-input><q-input></q-input>
</template>
<template #after> 22222 </template> <template #after> 22222 </template>
</q-splitter> </q-splitter>
<template #buttons> <q-btn label="xxx"></q-btn> </template <template #buttons> <q-btn label="xxx"></q-btn> </template

13
io.sc.platform.core.frontend/src/views/likm/Form.vue
View File

@ -18,10 +18,15 @@ const aaaa = {
name: 'name', name: 'name',
type: 'password', type: 'password',
// maxlength: 10, // maxlength: 10,
required: true, requiredIf: (form) => {
// requiredIf: () => { console.info('form====', form.getData().age);
// return false; return false;
// }, },
rules: [
() => {
return true;
},
],
colspan: 2, colspan: 2,
// requiredIf: () => false, // requiredIf: () => false,
// 'onUpdate:modelValue': (value) => { // 'onUpdate:modelValue': (value) => {

38
io.sc.platform.core.frontend/src/views/likm/Grid.vue
View File

@ -1,12 +1,13 @@
<template> <template>
<div> <div>
<component :is="aaa"></component>
<w-grid <w-grid
:title="testGrid.title" :title="testGrid.title"
draggable draggable
:row-key="testGrid.rowKey" :row-key="testGrid.rowKey"
:data-url="testGrid.tableDataUrl" :data-url="testGrid.tableDataUrl"
sort-no sort-no
selection="multiple"
:checkbox-selection="false"
:columns="testGrid.tableColumns" :columns="testGrid.tableColumns"
:toolbar-actions="testGrid.toolbar" :toolbar-actions="testGrid.toolbar"
:query-form-fields="testGrid.queryForm" :query-form-fields="testGrid.queryForm"
@ -20,17 +21,16 @@
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { ref, onMounted, nextTick, h } from 'vue'; import { ref, onMounted, nextTick } from 'vue';
import { QBtn } from 'quasar';
import { axios, Environment } from '@/platform'; import { axios, Environment } from '@/platform';
import EnableIcon from '@/platform/components/grid/EnableIcon.vue'; import EnableIcon from '@/platform/components/grid/EnableIcon.vue';
import { IconEnum } from '@/platform/enums'; import { IconEnum } from '@/platform/enums';
const selection = (details) => { const selection = (details) => {
console.info('details====', details); // console.info('details====', details);
}; };
const rowClick = (evt, row, index) => { const rowClick = (evt, row, index) => {
console.info('row====', row); // console.info('row====', row);
}; };
const rowDbClick = (evt, row, index) => { const rowDbClick = (evt, row, index) => {
console.info('row1====', row); console.info('row1====', row);
@ -63,7 +63,7 @@ const testGrid = {
// context.aaa = '111'; // context.aaa = '111';
// }, // },
click: (selected, context, _click, gridRefs) => { click: (selected, context, _click, gridRefs) => {
_click(); // _click();
}, },
afterClick: (selected, context, gridRefs) => { afterClick: (selected, context, gridRefs) => {
gridRefs.addEditFormRef.setFieldValue('userName', '李四'); gridRefs.addEditFormRef.setFieldValue('userName', '李四');
@ -103,14 +103,7 @@ const testGrid = {
label: '用户信息', label: '用户信息',
childrenColumns: [ childrenColumns: [
{ name: 'loginName', label: '登录名', align: 'right' }, { name: 'loginName', label: '登录名', align: 'right' },
{ { name: 'userName', label: '用户名' },
name: 'userName',
label: '用户名',
format: () => {
const a = h(QBtn, { label: 'ok' }, 'OK');
console.log(a);
},
},
], ],
}, },
{ {
@ -135,6 +128,7 @@ const testGrid = {
label: '是否可用', label: '是否可用',
align: 'center', align: 'center',
format: (val, row) => { format: (val, row) => {
return '1<br/>2';
// return { // return {
// _vuecomp_: true, // _vuecomp_: true,
// type: EnableIcon, // type: EnableIcon,
@ -152,14 +146,14 @@ const testGrid = {
// color: val ? 'green' : 'red', // color: val ? 'green' : 'red',
// }, // },
// }; // };
return { // return {
componentsType: 'q-icon', // componentsType: 'q-icon',
attrs: { // attrs: {
name: val ? IconEnum.是状态 : IconEnum.否状态, // name: val ? IconEnum.是状态 : IconEnum.否状态,
color: val ? 'green' : 'red', // color: val ? 'green' : 'red',
size: 'sm', // size: 'sm',
}, // },
}; // };
// return { // return {
// _vuecomp_: true, // _vuecomp_: true,
// type: 'w-text', // type: 'w-text',

24
io.sc.platform.core.frontend/src/views/likm/TreeGrid.vue
View File

@ -1,17 +1,20 @@
<template> <template>
<div> <div>
<w-grid <w-grid
ref="gridRef"
:title="testGrid.title" :title="testGrid.title"
draggable draggable
sort-no sort-no
tree tree
selection="multiple"
:row-key="testGrid.rowKey" :row-key="testGrid.rowKey"
:data-url="testGrid.dataUrl" :data-url="testGrid.dataUrl"
:columns="testGrid.tableColumns" :columns="testGrid.tableColumns"
:toolbar-actions="testGrid.toolbar" :toolbar-actions="testGrid.toolbar"
:query-form-fields="testGrid.queryFormFields" :query-form-fields="testGrid.queryFormFields"
:query-form-cols-num="3" :query-form-cols-num="3"
:table-pagination="testGrid.pagination" :pagination="testGrid.pagination"
@selection="selection"
></w-grid> ></w-grid>
</div> </div>
</template> </template>
@ -25,6 +28,10 @@ import { IconEnum } from '@/platform/enums';
const { t } = useI18n(); const { t } = useI18n();
const gridRef = ref();
const selection = (details) => {
console.info('details====', details);
};
const testGrid = { const testGrid = {
title: '菜单列表', title: '菜单列表',
rowKey: 'id', rowKey: 'id',
@ -45,21 +52,22 @@ const testGrid = {
extend: 'add', extend: 'add',
icon: undefined, icon: undefined,
label: '自定义按钮', label: '自定义按钮',
enableIf: (selected) => { enableIf: (selected, grid) => {
if (selected && selected.length > 0) { if (selected && selected.length > 0) {
return true; return true;
} }
return false; return false;
}, },
// beforeClick: (selected, context, gridRefs) => { // beforeClick: (selected, context, grid) => {
// console.info('先执行before'); // console.info('先执行before');
// context.aaa = '111'; // context.aaa = '111';
// }, // },
click: (selected, context, _click, gridRefs) => { click: (selected, context, _click, grid) => {
_click(); _click(selected);
}, },
afterClick: (selected, context, gridRefs) => { afterClick: (selected, context, grid) => {
gridRefs.addEditFormRef.setFieldValue('userName', '李四'); console.info('=grid==', grid.getEditorForm());
// gridRefs.addEditFormRef.setFieldValue('userName', '李四');
}, },
}, },
[ [
@ -79,7 +87,7 @@ const testGrid = {
'separator', 'separator',
], ],
queryFormFields: [ queryFormFields: [
{ label: '菜单名称', name: 'name', type: 'password' }, { label: '菜单名称', name: 'name', type: 'w-password' },
{ label: '菜单类型', name: 'userName', type: 'select' }, { label: '菜单类型', name: 'userName', type: 'select' },
{ label: '是否可用', name: 'enable', type: 'select' }, { label: '是否可用', name: 'enable', type: 'select' },
], ],

Write Preview
Loading…
Cancel
Save