CHANGELOG.md

+## [0.1.29](http://git.leadwaycloud.com/package/lwc-ui-components/compare/v0.1.28...v0.1.29) (2021-06-07)
+
+
+### Bug Fixes
+
+* 修复下拉弹窗未更新value,搜索组件布尔值默认值问题 ([3af53ea](http://git.leadwaycloud.com/package/lwc-ui-components/commits/3af53ea0a70cfffb74e7734d26f03d209d06ba33))
+* 修复lwc-select-dialog lwc-select-down-table 多选状态被删除后弹窗选中列表为重置错误 ([9bf362b](http://git.leadwaycloud.com/package/lwc-ui-components/commits/9bf362b6d579dde3bc699b4866ea75ff3b5294f9))
+
+
+### Features
+
+* 新增lwc-select-dialog lwc-select-down-table组件表格默认显示 ([1b0312f](http://git.leadwaycloud.com/package/lwc-ui-components/commits/1b0312f3b71bef5527ee2e4a83061749865f50ad))
+* lwc-data-display-detail-header 组件支持标题行自定义itemRender ([0dc16e3](http://git.leadwaycloud.com/package/lwc-ui-components/commits/0dc16e38009c57ba450bab3497f6494f779cdd4e))
+
+
+### Performance Improvements
+
+* 优化lwc-dialog-basic按钮点击,增加beforeSubmit,sunmit,afterSubmit,beforeCancel方法 ([f987f0e](http://git.leadwaycloud.com/package/lwc-ui-components/commits/f987f0e36906920ef676ee4b372d60124dae49fe))
+
+
+
 ## [0.1.28](http://git.leadwaycloud.com/package/lwc-ui-components/compare/v0.1.27...v0.1.28) (2021-06-01)
 
 

package-lock.json

 {
 	"name": "@package/lwc-ui-components",
-	"version": "0.1.29",
+	"version": "0.1.30",
 	"lockfileVersion": 1,
 	"requires": true,
 	"dependencies": {

package.json

 {
   "name": "@package/lwc-ui-components",
-  "version": "0.1.29",
+  "version": "0.1.30",
   "private": false,
   "license": "UNLICENSED",
   "scripts": {

src/index.js

@@ -191,7 +191,7 @@ if (typeof window !== 'undefined' && window.Vue) {
 }
 
 export default {
-  version: '0.1.28',
+  version: '0.1.29',
   install,
   LwcBasicButton,
   LwcBasicButtonIcon,

src/plugins/vxe-table/renderer/el-hoc.js

@@ -52,14 +52,23 @@ function renderHocTemplate (h, renderOpts, params, data, property, renderName) {
 			Object.assign(deaultRenderOpts, { renderCell: true })
 		}
 	}
-	const { hocName, updateValue, props, attrs, className, events, scopedSlots, slot, slots, ref } = deaultRenderOpts
+	const { hocName, updateValue, props, attrs, className, events = {}, scopedSlots, slot, slots, ref } = deaultRenderOpts
+	const { changeCb } = events
 	const hocValueEvents = updateValue ? {
 		"update:value": (val) => {
 			XEUtils.set(data, property, val)
+			if(changeCb) changeCb({
+				data: data,
+				value: val
+			})
 		},
 	} : {
 		"input": (val) => {
 			XEUtils.set(data, property, val)
+			if(changeCb) changeCb({
+				data: data,
+				value: val
+			})
 		},
 	}
 

src/stories/changelog.stories.mdx

@@ -8,6 +8,24 @@
 `新特性`
 `非兼容性更新`
 
+---
+### **v0.1.30 20210609**
+
+#### 新增
+
+- `el-hoc` 新增 `events.changeCb` 返回回调函数
+
+#### Bug修复
+
+- `lwc-table-basic` 组件 loading 逻辑，隐藏原生loading，默认加载数据逻辑，调整为手动触发
+- `lwc-data-display-detail-header` title render 传值问题并优化样式
+
+#### 优化
+
+- `lwc-table-basic` 样式，table 默认内边距 `px-4`
+
+---
+
 ---
 ### **v0.1.29 20210607**
 

src/stories/data-display/detail-header/src/index.js

@@ -40,7 +40,7 @@ function renderButtonList (h, _vm, buttons = []) {
 	}
 }
 
-function renderFormItem (h, _vm, items = [], className = "ml-8", title) {
+function renderFormItem (h, _vm, items = [], className = "ml-6", title) {
 	const { titleColon, data: itemsData, itemSize } = _vm
 	// 显示表单项
 	if(items && items.length > 0) {
@@ -63,7 +63,10 @@ function renderFormItem (h, _vm, items = [], className = "ml-8", title) {
 				}
 
 				if(itemR && itemR.name) {
-					itemR.class = [itemSize === "mini" ? "text-sm" : "text-base", itemR.class]
+					// itemR.class = [itemSize === "mini" ? "text-sm" : "text-base", itemR.class]
+					// 默认组装组件 props，传入 value 属性
+					if (itemR.props) itemR.props.value = renderValue;
+
 					contentVNs = [h(itemR.name, itemR, renderValue)]
 				} else {
 					contentVNs = [h('span', renderValue)]
@@ -146,7 +149,7 @@ export default {
 				}
 			},[
 				h('div', {
-					class: "overflow-hidden",
+					class: "overflow-hidden flex items-center",
 					style: {
 						"line-height": "32px"
 					}
@@ -154,7 +157,7 @@ export default {
 					h('div', {
 						class: "text-2xl text-color-main float-left"
 					}, titleName),
-					renderFormItem(h, this, titleItem, "ml-6", titleName),
+					renderFormItem(h, this, titleItem, "ml-4", titleName),
 					showHeaderBtn ? h('el-button-group', {
 						class: "float-right"
 					}, [

src/stories/dialog/basic/index.stories.js

@@ -210,7 +210,8 @@ const Template = (args, { argTypes }) => ({
 					contentConfig: this.contentConfig,
 					height: "80%",
 					events: {
-						beforeSubmit() {
+						beforeSubmit() { // 若为false，截止后续请求
+							return true
 							return false
 						},
 						submit(event) {
@@ -219,13 +220,7 @@ const Template = (args, { argTypes }) => ({
 					}
 				},
 				on: {
-					'update:status': (val) => _this.status = val,
-					onComfirm: () => {
-						console.log('点击确认')
-					},
-					onCancel: () => {
-						console.log('点击取消')
-					}
+					'update:status': (val) => _this.status = val
 				}
 			})
 		]);

src/stories/table/basic/index.stories.js

@@ -4,6 +4,7 @@ export default {
 	component: LwcTableBasic,
 	argTypes: {
 		value: { type: "string/number/object/array", description: "绑定值" },
+		className: { type: "number", description: "vxe-table 内容布局样式" },
 		gridConfig: { type: "object", description: "参考vxe-grid props" },
 		gridType: {
 			type: "string",
@@ -141,11 +142,19 @@ const data = [
 	},
 ];
 
+const getData = (data) => {
+	return new Promise((resolve, reject) => {
+		setTimeout(() => {
+			resolve(data);
+		}, 3000)
+	})
+}
+
 export const DefaultList = Template.bind({});
 DefaultList.args = {
+	className: [],
 	gridConfig: {
 		// data: data,
-		// loading: true,
 		border: "inner",
 		resizable: true,
 		keepSource: true,
@@ -300,8 +309,7 @@ DefaultList.args = {
 			},
 			ajax: {
 				// 接收 Promise 对象
-				query: ({ page, sorts, filters, $grid }) => {
-					return [];
+				query: async ({ page, sorts, filters, $grid }) => {
 					let filterData = data.filter((v) => {
 						return v.name.indexOf($grid.formConfig.data.name || "") >= 0;
 					});
@@ -314,7 +322,7 @@ DefaultList.args = {
 						}),
 						totalRowCount: filterData.length,
 					};
-					return obj;
+					return await getData(obj);
 				},
 			},
 		},

src/stories/table/basic/src/index.js

@@ -37,8 +37,8 @@ const renderCard = (h, cardConfig, contentConfig, _vm) => {
 						}
 						_vm.pageChange($grid.tablePage.currentPage, $grid.tablePage.pageSize)
 						if(proxyConfig) {
-							_vm.showLoading();
-							_vm.$refs[_vm.gridTable].commitProxy("query")
+							_vm.loadTableData();
+							// _vm.$refs[_vm.gridTable].commitProxy("query")
 						}
 					}
 				}
@@ -259,38 +259,58 @@ const renderTable = (h, contentConfig, formConfig, _vm) => {
 	// 		tableConfigData = Object.assign({}, tableConfig)
 	// 	}
 	// }
-	return h("vxe-grid", {
-		props: {
-			loading: false,
-			...tableConfig,
-			formConfig: { data: _vm.getFormData(_vm.btnType) }
-		},
-		class: [{
-			hidden: _vm.currentGridType !== "list"
-		}],
-		ref: _vm.gridTable,
-		on: {
-			"page-change": ({ currentPage, pageSize, $grid }) => {
-				// 若搜索参数有修改 修改表单页码到第一页
-				if(JSON.stringify(_vm.lastFormData) !== JSON.stringify($grid.formConfig.data)) {
-					$grid.tablePage.currentPage = 1
-					_vm.lastFormData = $grid.formConfig.data
-				}
-				_vm.pageChange($grid.tablePage.currentPage, $grid.tablePage.pageSize)
+
+	// 关闭自动加载
+	if (tableConfig.proxyConfig) tableConfig.proxyConfig.autoLoad = false
+
+	// 布局容器，默认 px-4
+	let boxClass = []
+	if (_vm.className.length === 0) {
+		boxClass = ['w-full', 'h-full', 'px-4', 'bg-white']
+	} else {
+		boxClass = ['w-full', 'h-full', 'bg-white'].concat(_vm.className)
+	}
+	return h('div', {
+		class: boxClass
+	}, [
+		h("vxe-grid", {
+			props: {
+				loading: false,
+				...tableConfig,
+				formConfig: { data: _vm.getFormData(_vm.btnType) }
 			},
-			...events
-		},
-		directives: [{
-			name: 'loading',
-			value: _vm.loading
-		}]
-	})
+			class: [{
+				'lwc-table-basic': true,
+				hidden: _vm.currentGridType !== "list"
+			}],
+			ref: _vm.gridTable,
+			on: {
+				"page-change": ({ currentPage, pageSize, $grid }) => {
+					// 若搜索参数有修改 修改表单页码到第一页
+					if(JSON.stringify(_vm.lastFormData) !== JSON.stringify($grid.formConfig.data)) {
+						$grid.tablePage.currentPage = 1
+						_vm.lastFormData = $grid.formConfig.data
+					}
+					_vm.pageChange($grid.tablePage.currentPage, $grid.tablePage.pageSize)
+				},
+				...events
+			},
+			directives: [{
+				name: 'loading',
+				value: _vm.loading
+			}]
+		})
+	])
 }
 export default {
 	name: 'lwc-table-basic',
 	components: { LwcBasicButtonIcon },
 	props: {
 		gridConfig: Object,
+		className: {
+			type: Array,
+			default: () => []
+		},
 		page: {
 			type: String,
 			default: "page"
@@ -457,8 +477,8 @@ export default {
 		 * @Desc: 重新查询数据
 		 */
 		reQuery() {
-			this.showLoading();
-			this.getTableGrid().commitProxy("query");
+			this.loadTableData();
+			// this.getTableGrid().commitProxy("query");
 		},
 		/**
 		 * @Author: TangLiangcheng
@@ -482,12 +502,16 @@ export default {
 			const $table = this.getTableGrid();
 			await $table.remove(row);
 		},
-		async showLoading() {
+		/**
+		 * @Author: TangLiangcheng
+		 * @Date: 2021-06-08 10:40:36
+		 * @Desc: 加载表格数据
+		 */
+		async loadTableData() {
 			this.loading = true;
-			const _this = this;
-			setTimeout(() => {
-				_this.loading = false
-			}, 3000)
+			this.$refs[this.gridTable].commitProxy("query").then((res) => {
+				this.loading = false;
+			})
 		}
 	},
 	render(h) {
@@ -511,16 +535,16 @@ export default {
 						_this.btnType = "submit"
 						_this.setFormData = true
 						_this.$nextTick(() => {
-							_this.showLoading();
-							_this.$refs[_this.gridTable].commitProxy("reload")
+							_this.loadTableData();
+							// _this.$refs[_this.gridTable].commitProxy("reload")
 						})
 					},
 					reset: () => {
 						_this.btnType = "reset"
 						_this.setFormData = true
 						_this.$nextTick(() => {
-							_this.showLoading();
-							_this.$refs[_this.gridTable].commitProxy("reload")
+							_this.loadTableData();
+							// _this.$refs[_this.gridTable].commitProxy("reload")
 						})
 					},
 				}
@@ -557,7 +581,7 @@ export default {
 		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.showLoading();
+			this.loadTableData();
 		})
 	}
 }

src/theme-chalk/lib/index.css

-@charset "UTF-8";
-
-.lwc-table-border-none .el-table::before,
-.lwc-table-outline-border-none .el-table::before,
-body,
-html {
-    background-color: unset
-}
-
-body,
-html {
-    font-size: 14px !important
-}
-
-.el-avatar>img {
-    width: 100%
-}
-
-.lwc-table-border-none .el-table td,
-.lwc-table-border-none th.is-leaf {
-    border-bottom: none !important
-}
-
-.lwc-table-header-pt-0 .el-table th {
-    padding-top: 0
-}
-
-.ant-descriptions .ant-descriptions-title {
-    margin-bottom: 1rem !important
-}
-
-.el-card.dashboard-card .el-card__header {
-    padding-top: 0;
-    padding-bottom: 0;
-    height: 58px;
-    display: -webkit-box;
-    display: -ms-flexbox;
-    display: flex;
-    -webkit-box-pack: center;
-    -ms-flex-pack: center;
-    justify-content: center;
-    -webkit-box-align: center;
-    -ms-flex-align: center;
-    align-items: center
-}
-
-.el-card.dashboard-card .el-card__header>div {
-    width: 100%
-}
-
-.el-card.is-auto-size {
-    height: 100%
-}
-
-.el-card.is-auto-size .el-card__body {
-    height: calc(100% - 58px);
-    display: -webkit-box;
-    display: -ms-flexbox;
-    display: flex;
-    -webkit-box-pack: center;
-    -ms-flex-pack: center;
-    justify-content: center;
-    -webkit-box-align: center;
-    -ms-flex-align: center;
-    align-items: center;
-    -webkit-box-orient: vertical;
-    -webkit-box-direction: normal;
-    -ms-flex-direction: column;
-    flex-direction: column
-}
-
-.el-card.is-auto-size .el-card__body>div {
-    width: 100%;
-    height: 100%
-}
-
-.el-card.is-auto-size_no_header {
-    height: 100%
-}
-
-.el-card.is-auto-size_no_header .el-card__body {
-    height: 100%;
-    display: -webkit-box;
-    display: -ms-flexbox;
-    display: flex;
-    -webkit-box-pack: center;
-    -ms-flex-pack: center;
-    justify-content: center;
-    -webkit-box-align: center;
-    -ms-flex-align: center;
-    align-items: center;
-    -webkit-box-orient: vertical;
-    -webkit-box-direction: normal;
-    -ms-flex-direction: column;
-    flex-direction: column
-}
-
-.el-card.is-auto-size_no_header .el-card__body>div {
-    width: 100%;
-    height: 100%
-}
-
-.lwc-layout-card .el-card__header {
-    padding: 0
-}
-
-.lwc-layout-card .el-card__header>div {
-    height: 50px;
-    padding-left: 18px
-}
-
-.lwc-layout-vertical-tab .el-tabs__item {
-    padding: 0 !important;
-}
-
+@charset "UTF-8";.lwc-table-border-none .el-table::before,.lwc-table-outline-border-none .el-table::before,body,html{background-color:unset}body,html{font-size:14px!important}.el-avatar>img{width:100%}.lwc-table-border-none .el-table td,.lwc-table-border-none th.is-leaf{border-bottom:none!important}.lwc-table-header-pt-0 .el-table th{padding-top:0}.ant-descriptions .ant-descriptions-title{margin-bottom:1rem!important}.lwc-table-basic.vxe-grid.is--loading:before{background-color:unset!important}.lwc-table-basic.vxe-grid .vxe-table .vxe-loading{display:none!important}.el-card.dashboard-card .el-card__header{padding-top:0;padding-bottom:0;height:58px;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.el-card.dashboard-card .el-card__header>div{width:100%}.el-card.is-auto-size{height:100%}.el-card.is-auto-size .el-card__body{height:calc(100% - 58px);display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}.el-card.is-auto-size .el-card__body>div{width:100%;height:100%}.el-card.is-auto-size_no_header{height:100%}.el-card.is-auto-size_no_header .el-card__body{height:100%;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}.el-card.is-auto-size_no_header .el-card__body>div{width:100%;height:100%}.lwc-layout-card .el-card__header{padding:0}.lwc-layout-card .el-card__header>div{height:50px;padding-left:18px}
\ No newline at end of file

src/theme-chalk/src/default.scss

@@ -41,3 +41,11 @@ html {
 .ant-descriptions .ant-descriptions-title {
 	margin-bottom: 1rem !important;
 }
+
+.lwc-table-basic.vxe-grid.is--loading:before {
+	background-color: unset !important;
+}
+
+.lwc-table-basic.vxe-grid .vxe-table .vxe-loading {
+	display: none !important;
+}
\ No newline at end of file