让企业管理更智慧、更快捷

Skip to content
源代码提交(4)
## [1.0.10](http://git.leadwaycloud.com/package/lwc-ui-components/compare/v1.0.9...v1.0.10) (2022-11-03)
### Bug Fixes
* 修复table筛选组件功能逻辑错误问题 ([d1ff3c0](http://git.leadwaycloud.com/package/lwc-ui-components/commits/d1ff3c0f01f3d7ba120b10207dfd1d7a200651df))
## [1.0.9](http://git.leadwaycloud.com/package/lwc-ui-components/compare/v1.0.8...v1.0.9) (2022-10-31)
......
{
"name": "@package/lwc-ui-components",
"version": "1.0.10",
"version": "1.0.11",
"private": false,
"description": "立威云UI组件库",
"author": "",
......
......@@ -209,7 +209,7 @@ if (typeof window !== 'undefined' && window.Vue) {
}
export default {
version: '1.0.8',
version: '1.0.10',
install,
LwcBasicButton,
LwcBasicButtonIcon,
......
......@@ -8,6 +8,14 @@
`新特性`
`非兼容性更新`
---
### **v1.0.10 20221103**
#### Bug修复
- 修复 lwc-table-basic 组件 自定义筛选器功能错误问题
- 修复 lwc-select-down-table 组件 误操作错误引用导致依赖安装不成功问题
---
### **v1.0.9 20221031**
......
......@@ -26,10 +26,11 @@ export default {
const Template = (args, { argTypes }) => ({
props: Object.keys(argTypes),
components: { LwcSelectDialog },
template: '<lwc-select-dialog v-bind.sync="syncProps"/>',
template: '<div><lwc-select-dialog v-bind.sync="syncProps"/><vxe-button @click="value1 = true">默认尺寸</vxe-button><lwc-dialog-form :status.sync="value1"></lwc-dialog-form></div>',
setup(props) {
return {
syncProps: ref({ ...props }),
value1: ref(false),
};
},
});
......@@ -53,10 +54,11 @@ let data = [
export const Default = Template.bind({});
Default.storyName = "Object单选";
Default.args = {
value: {
value: [{
id: 5,
username: "555"
},
}],
multiple: true,
optionProps: {
id: "id",
name: "username",
......@@ -68,11 +70,16 @@ Default.args = {
selectProps: {
clearable: true,
},
modelProps: {
height: "80%"
},
gridProps: {
gridConfig: {
border: "inner",
resizable: true,
keepSource: true,
autoResize: true,
"show-overflow": true,
pagerConfig: {
enabled: false,
},
......@@ -84,6 +91,17 @@ Default.args = {
{ field: "role", title: "Role" },
{ field: "address", title: "Address", showOverflow: true },
],
formConfig: {
data: { date: "day", companyId: null, startTime: null, endTime: null, planDate: [] },
items: [{ field: "date", itemRender: {
name: "ElHoc",
updateValue: true,
hocName: "lwc-radio-button",
props: {
options: [{ label: "近一月", value: "month" }, { label: "近一周", value: "week" }, { label: "近24小时", value: "day" }]
} }
}]
},
checkboxConfig: {
checkMethod: (({ row }) => { // 默认检查是否可选
return true
......@@ -93,6 +111,10 @@ Default.args = {
ajax: {
// 接收 Promise 对象
query: ({ page, sorts, filters, $grid }) => {
let data = []
for(let i = 0 ; i < 280; i ++) {
data.push({ id: i, label: "用户1", nickname: "12121", value: i + "", disabled: false },)
}
return data;
},
},
......@@ -237,6 +259,9 @@ mutilSelect.args = {
id: "id",
name: "label",
},
modelProps: {
height: "80%"
},
initConfig: {
initQuery: false,
data: () => {
......
......@@ -108,6 +108,21 @@ function renderModel(h, vm) {
if(!vm.initStatus) {
$modal.close()
}
const tableGrid = vm.$refs[vm.selectTable].getTableGrid()
if(tableGrid) {
setTimeout(async() => {
const scroll = await tableGrid.getScroll()
if(scroll.scrollTop > 0) {
tableGrid.scrollTo(scroll.scrollLeft, 0).then(() => {
tableGrid.scrollTo(scroll.scrollLeft, scroll.scrollTop)
})
} else {
tableGrid.scrollTo(scroll.scrollLeft, scroll.scrollLeft + 1).then(() => {
tableGrid.scrollTo(scroll.scrollLeft, 0)
})
}
}, 0)
}
},
hide: () => {
if(!vm.initStatus) vm.initStatus = true
......@@ -139,13 +154,16 @@ function buildGridConfig(vm, $modal) {
return {
...otherConfig,
gridConfig: {
"max-height": "400px",
"max-height": "500px",
"autoResize": true,
"highlight-hover-row": true,
"highlight-current-row": !vm.multiple,
events: {
"cell-click": (even) => {
const { row, $grid } = even
const { row, $grid, triggerTreeNode, triggerExpandNode } = even
if(triggerTreeNode || triggerExpandNode) {
return false
}
const { checkboxConfig } = $grid
if(checkboxConfig && checkboxConfig.checkMethod) {
let checkDisabled = checkboxConfig.checkMethod({ row })
......@@ -203,7 +221,6 @@ function buildGridConfig(vm, $modal) {
},
...otherEvents
},
height: "auto",
...otherGridConfig
}
}
......@@ -357,8 +374,10 @@ export default {
} else {
let selectIdList = _.pluck(this.selectList, this.optionProps.id)
data.forEach(item => {
if(selectIdList.indexOf(item[this.optionProps.id]) < 0) {
this.selectList.push(item)
if(item && item[this.optionProps.id]) {
if(selectIdList.indexOf(item[this.optionProps.id]) < 0) {
this.selectList.push(item)
}
}
})
}
......@@ -386,7 +405,8 @@ export default {
}
if(data) {
return Promise.resolve(data()).catch(e => e).then(res => {
if(!_.isEmpty(res)) this.initData(res)
let activeRes = _.compact(res)
if(!_.isEmpty(activeRes)) this.initData(activeRes)
})
}
}
......
......@@ -30,7 +30,8 @@ const Template = (args, { argTypes }) => ({
// }
// },
template:
'<div class="px-0" style="width: 100%; height: 100%;"><lwc-table-basic v-bind="$props"/></div>',
// '<div><div>3232323</div><div>3232323</div><div>3232323</div><div class="px-0" style="width: 100%; height: 500px;"><div>212322</div><div>212322</div><div>212322</div><lwc-table-basic v-bind="$props"/></div></div>',
'<div class="px-0" style="width: 100%; height: 500px;"><lwc-table-basic v-bind="$props"/></div>',
});
const data = [
......@@ -1187,6 +1188,7 @@ TreeTable1.args = {
exportConfig: {},
autoResize: true,
showFilterFooter: true,
autoHeight: true,
treeConfig: {
expandAll: true,
transform: true,
......
......@@ -292,8 +292,33 @@ const renderTable = (h, contentConfig, formConfig, _vm) => {
_vm.calcQueryLoading = true
}
}
let mainHeight = "100%"
if(tableConfig.autoHeight || _.isUndefined(tableConfig.autoHeight)) {
let gridBox = _vm.$refs[_vm.gridBox]?.getBoundingClientRect()
let gridTableBox = _vm.$refs[_vm.gridTableBox]?.getBoundingClientRect()
if(gridBox && gridTableBox) {
let mainHeightNum = gridBox.height - (gridTableBox.top - gridBox.top)
mainHeight = mainHeightNum > 200 ? `${mainHeightNum}px` : '100%'
let tableMainHeight = mainHeightNum
if(tableConfig.showFooter) {
tableMainHeight = `${mainHeightNum - 70}px`
}
if(mainHeightNum > 200) {
tableConfig["max-height"] = tableMainHeight
}
}
}
// 默认添加溢出隐藏
if(_.isUndefined(tableConfig['show-overflow'] && _.isUndefined(tableConfig.showOverflow))) {
tableConfig['show-overflow'] = 'tooltip'
}
return h('div', {
class: ['w-full', 'h-full', 'bg-white']
class: ['w-full', 'bg-white'],
style: {
'max-height': mainHeight
},
ref: _vm.gridTableBox
}, [
h("vxe-grid", {
props: {
......@@ -567,11 +592,11 @@ export default {
this.pagerConfig.currentPage = 1
}
let pageData = this.handlePage(this.pagerConfig)
this.$refs[this.gridTable].reloadData(pageData).then(() => {
this.$refs[this.gridTable]?.reloadData(pageData).then(() => {
this.loading = false;
})
} else {
this.$refs[this.gridTable].reloadData(this.defaultData).then(() => {
this.$refs[this.gridTable]?.reloadData(this.defaultData).then(() => {
this.loading = false;
})
}
......@@ -601,14 +626,21 @@ export default {
const _this = this;
const { formConfig = {}, toolbarConfig, cardConfig, ...contentConfig } = this.gridConfig
const { items = [] } = formConfig || {}
let gridBox = _this.$refs[_this.gridBox]
let gridParentBox = gridBox?.parentElement
let top = gridBox?.offsetTop - gridParentBox?.offsetTop
return h("div", {
class: [
this.fullScreen ? "vxe-grid is--maximize": '',
...this.widgetClass.grid
],
style: {
...(this.fullScreen ? { "z-index": 9999 } : {})
}
...(this.fullScreen ? { "z-index": 9999 } : {}),
get height() {
return gridBox ? `calc(100% - ${top}px)` : "100%"
}
},
ref: this.gridBox
}, [
items?.length > 0 ? h("vxe-form", {
class: [
......@@ -644,6 +676,24 @@ export default {
mounted() {
if(this.$refs[this.gridTable] && this.$refs[this.gridToolbar]) this.$refs[this.gridTable].connect(this.$refs[this.gridToolbar])
},
activated() {
// 暂时修复(后续查看是否有更好的解决方法) 开启虚拟滚动后 列表keep-alive缓存后再次打开会空白的问题
if(this.$refs[this.gridTable]) {
const tableGrid = this.$refs[this.gridTable]
setTimeout(async() => {
const scroll = await tableGrid.getScroll()
if(scroll.scrollTop > 0) {
tableGrid.scrollTo(scroll.scrollLeft, 0).then(() => {
tableGrid.scrollTo(scroll.scrollLeft, scroll.scrollTop)
})
} else {
tableGrid.scrollTo(scroll.scrollLeft, scroll.scrollLeft + 1).then(() => {
tableGrid.scrollTo(scroll.scrollLeft, 0)
})
}
}, 0)
}
},
async created() {
this.defaultGridConfig = JSON.parse(JSON.stringify(this.gridConfig))
let { pagerConfig, data, proxyConfig } = this.gridConfig
......@@ -670,8 +720,11 @@ export default {
this.showPager = false
this.handPage = false
}
this.gridBox = `basic_grid_box_${uuidv4()}`
this.gridTableBox = `basic_grid_table_box_${uuidv4()}`
this.gridTable = `basic_grid_${uuidv4()}`
this.gridToolbar = `basic_grid_toolbar_${uuidv4()}`
this.$nextTick(() => {
// this.$emit('onRequestParams', Object.assign(this.requestParams, this.showPager ? { [this.page]: (currentPage || 0) - 1, [this.size]: pageSize || 10 } : {}))
this.loadTableData();
......
......@@ -26,7 +26,7 @@ function renderTimeLineItem(h, _vm) {
class: "h-8 leading-8 overflow-hidden relative"
}, [
h("span", {
class: "relative align-middle border-theme-primary",
class: "relative align-middle border-theme-success",
style: {
"margin-left": "-1rem",
"font-size": 0,
......@@ -37,7 +37,7 @@ function renderTimeLineItem(h, _vm) {
}
}),
h("span", {
class: "inline-block leading-8 bg-theme-primary text-theme-basic text-sm h-full pl-2 pr-3"
class: "inline-block leading-8 bg-theme-success text-theme-basic text-sm h-full pl-2 pr-3"
}, dayjsTime.format('YYYY') === dayjs().format('YYYY') ? dayjsTime.format('MM-DD') : dayjsTime.format('YYYY-MM-DD'))
])
}
......@@ -52,7 +52,7 @@ function renderTimeLineItem(h, _vm) {
scopedSlots: {
default: () => {
return h("div", {
class: `border ${getFormData(_vm.itemProps.pass || "pass", day) ? "bg-theme-primary border-theme-primary" : "bg-theme-danger border-theme-danger"} px-4 py-2 bg-opacity-5 border-opacity-10`,
class: `border ${getFormData(_vm.itemProps.pass || "pass", day) ? "bg-theme-success border-theme-success" : "bg-theme-danger border-theme-danger"} px-4 py-2 bg-opacity-5 border-opacity-10`,
style: {
"--bg-opacity": 0.05,
"--border-opacity": 0.10,
......@@ -63,14 +63,14 @@ function renderTimeLineItem(h, _vm) {
Array.isArray(_vm.itemProps && _vm.itemProps.title) ? _vm.itemProps.title.map(v => {
return [
v.title ? h("span", {
class: "text-color-primary"
class: "text-color-success"
}, `${v.title}:`) : null,
h("span", {
class: "text-color-primary mr-4"
class: "text-color-success mr-4"
}, getFormData(v.field, day)),
]
}) : h("span", {
class: "text-color-primary mr-4"
class: "text-color-success mr-4"
}, getFormData(_vm.itemProps.title || "title", day)),
h("span", {
class: "float-right text-xs text-color-secondary"
......