CHANGELOG.md

+## [0.1.32](http://git.leadwaycloud.com/package/lwc-ui-components/compare/v0.1.31...v0.1.32) (2021-06-26)
+
+
+### Bug Fixes
+
+* 修复 lwc-table-basic 组件不配置分页时， padding 样式问题 ([5fcef5e](http://git.leadwaycloud.com/package/lwc-ui-components/commits/5fcef5e35bd50dc6052461b85dec012bf0f34e79)), closes [#38](http://git.leadwaycloud.com/package/lwc-ui-components/issues/38)
+
+
+### Features
+
+* 新增 lwc-data-display-badge-text 组件 ([60aa741](http://git.leadwaycloud.com/package/lwc-ui-components/commits/60aa741c8af979bdb951405d22030e449f5e7f6a)), closes [#39](http://git.leadwaycloud.com/package/lwc-ui-components/issues/39)
+* 新增 lwc-select-group 组件 ([05e3bf1](http://git.leadwaycloud.com/package/lwc-ui-components/commits/05e3bf1a6d05b090bcf89c6ae3e1d82aeb88f9fd)), closes [#33](http://git.leadwaycloud.com/package/lwc-ui-components/issues/33)
+* 新增 lwc-table-basic footer left button 配置示例 ([057b260](http://git.leadwaycloud.com/package/lwc-ui-components/commits/057b260b84eeb84ee1870b3bb71d1ac04101829a))
+
+
+
 ## [0.1.31](http://git.leadwaycloud.com/package/lwc-ui-components/compare/v0.1.30...v0.1.31) (2021-06-21)
 
 

package-lock.json

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

package.json

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

src/index.js

@@ -20,6 +20,7 @@ import LwcChartGauge from './stories/chart/gauge/index.js';
 import LwcChartLine from './stories/chart/line/index.js';
 import LwcChartPie from './stories/chart/pie/index.js';
 import LwcChartScatter from './stories/chart/scatter/index.js';
+import LwcCheckboxGroup from './stories/checkbox/group/index.js';
 import LwcClipIcon from './stories/clip/icon/index.js';
 import LwcClipShell from './stories/clip/shell/index.js';
 import LwcCurrencyMoney from './stories/currency/money/index.js';
@@ -106,6 +107,7 @@ const components = [
   LwcChartLine,
   LwcChartPie,
   LwcChartScatter,
+  LwcCheckboxGroup,
   LwcClipIcon,
   LwcClipShell,
   LwcCurrencyMoney,
@@ -197,7 +199,7 @@ if (typeof window !== 'undefined' && window.Vue) {
 }
 
 export default {
-  version: '0.1.31',
+  version: '0.1.32',
   install,
   LwcBasicButton,
   LwcBasicButtonIcon,
@@ -219,6 +221,7 @@ export default {
   LwcChartLine,
   LwcChartPie,
   LwcChartScatter,
+  LwcCheckboxGroup,
   LwcClipIcon,
   LwcClipShell,
   LwcCurrencyMoney,

src/stories/card/cashier/Index.vue

@@ -2,6 +2,7 @@
 	<el-card
 		class="cursor-pointer bg-white lwc-card-cashier-container"
 		shadow="hover"
+		:body-style="{ padding: '1rem' }"
 		:style="{ backgroundColor: backgroundColor }"
 	>
 		<el-row>

src/stories/card/client/Index.vue

@@ -2,6 +2,7 @@
 	<el-card
 		shadow="hover"
 		class="cursor-pointer lwc-card-client-container bg-white"
+		:body-style="{ padding: '1rem' }"
 		:span="24"
 	>
 		<el-row class="px-2" @click.native="onClick(user)">

src/stories/card/contact/Index.vue

@@ -2,6 +2,7 @@
 	<el-card
 		class="cursor-pointer lwc-card-contact-container bg-white"
 		shadow="hover"
+		:body-style="{ padding: '1rem' }"
 		:span="24"
 	>
 		<el-row>

src/stories/card/contract/Index.vue

 <template>
-	<el-card class="cursor-pointer bg-white lwc-card-contract-container" shadow="hover">
+	<el-card class="cursor-pointer bg-white lwc-card-contract-container"
+	:body-style="{ padding: '1rem' }"
+	shadow="hover">
 		<el-row @click.native="onClick(value)">
 			<el-col :span="24" class="text-base mb-2 flex justify-between items-center">
 				<span class="over-ellipsis inline-block font-bold">

src/stories/card/employee/Index.vue

@@ -3,6 +3,7 @@
 		class="cursor-pointer lwc-card-employee-container bg-white"
 		shadow="hover"
 		:span="24"
+		:body-style="{ padding: '1rem' }"
 	>
 		<el-row class="px-2" @click.native="onClick(user)">
 			<el-row :gutter="32" class="text-center py-1">

src/stories/card/goods/Index.vue

@@ -3,6 +3,7 @@
 		class="cursor-pointer lwc-card-goods-container bg-white"
 		shadow="hover"
 		:span="24"
+		:body-style="{ padding: '1rem' }"
 	>
 		<el-row class="flex flex-row overflow-hidden" @click.native="onClick(value)">
 			<el-row class="mr-4">

src/stories/card/order/Index.vue

@@ -2,10 +2,11 @@
 	<el-card
 		class="cursor-pointer lwc-card-order-container bg-white"
 		shadow="hover"
+		:body-style="{ padding: '1rem' }"
 	>
 		<el-row @click.native="onClick(value)">
 			<el-col :span="24" class="text-base mb-2 flex justify-between items-center">
-				<span class="over-ellipsis inline-block font-bold">
+				<span class="over-ellipsis inline-block font-bold truncate">
 					{{ value.name || '暂无名称' }}
 				</span>
 				<span class="inline-block">
@@ -13,7 +14,7 @@
 				</span>
 			</el-col>
 			<el-col :span="24" class="flex justify-between items-center">
-				<el-col class="text-gray-600 text-sm">
+				<el-col class="text-gray-600 text-sm" :span="17">
 					<el-col class="truncate">
 						<i class="el-icon-time"></i>&nbsp;
 						<span>{{

src/stories/card/order/index.stories.js

@@ -49,10 +49,10 @@ export const Default = Template.bind({});
 Default.args = {
 	value: {
 		name: "1021采购单",
-		code: "PO2020011022011112",
+		code: "PO2020011022011112PO2020011022011112PO2020011022011112",
 		symbol: null,
 		orderDate: "2020-08-10",
-		amountTotal: 3000.5,
+		amountTotal: 3000000.5,
 	},
 };
 

src/stories/card/payment-order/Index.vue

 <template>
-	<el-card class="cursor-pointer bg-white lwc-card-payment-order-container" shadow="hover">
+	<el-card class="cursor-pointer bg-white lwc-card-payment-order-container"
+	    :body-style="{ padding: '1rem' }"
+		shadow="hover">
 		<el-row @click.native="onClick(value)">
 			<el-row>
 				<el-col :span="24" class="text-base mb-2 flex justify-between items-center">
-					<span class="over-ellipsis inline-block font-bold">
-						{{ value.code || "暂无编号" }}
+					<span class="over-ellipsis inline-block font-bold truncate">
+						{{ value.code || "NO CODE" }}
 					</span>
 					<span class="inline-block">
-						<slot name="stage" :state="value.state"></slot>
+						<slot name="stage"></slot>
 					</span>
 				</el-col>
 			</el-row>
@@ -16,18 +18,18 @@
 					<el-col class="text-gray-600 text-sm">
 						<el-col class="truncate">
 							<i class="el-icon-time"></i>&nbsp;
-							<span> {{ value.date || '暂无时间' }} </span>
+							<span> {{ value.date || 'NO DATE' }} </span>
 						</el-col>
 						<el-col class="truncate">
 							<i class="el-icon-user"></i>&nbsp;
 							<span>
-								{{ value.partner || "暂无信息" }}
+								{{ value.partner || "NO USER" }}
 							</span>
 						</el-col>
 						<el-col class="truncate">
 							<i class="el-icon-notebook-1"></i>&nbsp;
 							<span>
-								{{ value.subject || "暂无会计科目" }}
+								{{ value.subject || "NO ACCOUNT" }}
 							</span>
 						</el-col>
 					</el-col>

src/stories/changelog.stories.mdx

@@ -8,6 +8,20 @@
 `新特性`
 `非兼容性更新`
 
+---
+### **v0.1.33 20210630**
+
+#### 新增
+
+- 新增 `lwc-table-basic` 新增 `className` 属性用于控制更精细组件样式
+
+#### 优化
+
+- 优化`select`初始化配置,优化`dialog`按钮配置
+- 优化 `card` 组件样式
+
+---
+
 ---
 ### **v0.1.32 20210626**
 

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

@@ -7,13 +7,15 @@ function renderButtons(h, _vm, event) {
 		$dialog: _vm
 	}
 	const { events = {} } = _vm.$props;
-	const { beforeSubmit = () => {}, submit = () => {}, afterSubmit, beforeCancel = () => {}, cancel } = events
+	const { beforeSubmit = () => {}, submit = () => {}, afterSubmit = () => {
+		_vm.$refs[_vm.dialogRef].close();
+	}, beforeCancel = () => {}, cancel } = events
 	return [
 		h('el-row', {
 			class: [
 			]
 		}, [
-			h('el-button', {
+			_vm.showSubmitBtn ? h('el-button', {
 				props: { type: "primary" },
 				on: {
 					click: async () => {
@@ -25,7 +27,6 @@ function renderButtons(h, _vm, event) {
 									Object.assign(applyArgs, { result: rest || null })
 									_vm.loading = false
 									if(afterSubmit) afterSubmit(applyArgs)
-									_vm.$refs[_vm.dialogRef].close();
 								}).catch(() => _vm.loading = false)
 							} else {
 								_vm.loading = false
@@ -33,7 +34,7 @@ function renderButtons(h, _vm, event) {
 						}).catch(() => { _vm.loading = false })
 					}
 				}
-			}, '确认'),
+			}, _vm.submitText) : null,
 			h('el-button', {
 				props: {},
 				on: {
@@ -47,7 +48,7 @@ function renderButtons(h, _vm, event) {
 						})
 					}
 				}
-			}, '取消')
+			}, _vm.cancelText)
 		])
 	];
 }
@@ -89,7 +90,22 @@ export default {
 			type: Boolean,
 			default: true,
 			require: false
-		}
+		},
+		submitText: {
+			type: String,
+			require: true,
+			default: "确认"
+		},
+		cancelText: {
+			type: String,
+			require: true,
+			default: "取消"
+		},
+		showSubmitBtn: {
+			type: Boolean,
+			default: true,
+			require: false
+		},
 	},
 	data() {
 		return {

src/stories/select/dialog/src/index.js

@@ -129,8 +129,8 @@ function buildGridConfig(vm, $modal) {
 		vm.$set(gridConfig.proxyConfig, "afterQuery", ({ $grid }) => {
 			if(vm.type === "int" && !vm.initStatus) vm.initData($grid.tableData.map(row => {
 				return {
-					[vm.optionProps.id]: row[vm.columnsProps.id],
-					[vm.optionProps.name]: row[vm.columnsProps.name],
+					[vm.optionProps.id]: XEUtils.get(row, vm.columnsProps["id"]),
+					[vm.optionProps.name]: XEUtils.get(row, vm.columnsProps["name"]),
 				}
 			}))
 			setTableCheckRow(vm, $grid)
@@ -244,13 +244,13 @@ function setTableCheckRow(vm, $grid) {
 	if(vm.multiple) {
 		vm.multipleValue.forEach(element => {
 			const row = tableGridData.find(v => {
-				return v[vm.columnsProps["id"]] === element
+				return XEUtils.get(v, vm.columnsProps["id"]) === element
 			})
 			if(row) tableGrid.setCheckboxRow(row, true)
 		});
 	} else {
 		const row = tableGridData.find(v => {
-			return v[vm.columnsProps["id"]] === vm.selectValue
+			return XEUtils.get(v, vm.columnsProps["id"]) === vm.selectValue
 		})
 		tableGrid.setCurrentRow(row)
 		if(row) tableGrid.setCheckboxRow(row, true)
@@ -389,6 +389,7 @@ export default {
 				}
 			} else {
 				this.selectValue = this.multiple ? [] : null
+				this.initStatus = true
 			}
 		}, { immediate: true })
 	},

src/stories/select/down-table/src/index.js

@@ -21,8 +21,12 @@ function renderSelect({ h, $pulldown, vm }) {
 				if(state) {
 					vm.$refs[vm.selectInput].blur();
 					$pulldown.showPanel().then(() => {
-						if(!vm.initStatus){
+						if(!vm.needInit && !vm.initStatus) {
+							vm.initStatus = true
+						}
+						if(vm.needInit && !vm.initStatus){
 							$pulldown.hidePanel().then(() => {
+								vm.needInit = false
 								vm.initStatus = true
 							})
 						}
@@ -50,7 +54,7 @@ function renderSelect({ h, $pulldown, vm }) {
 				if(tableGrid) {
 					let { tableData:dataList } = tableGrid.getTableGrid().getTableData()
 					dataList.forEach(row => {
-						if(row[vm.columnsProps["id"]] === val) {
+						if(XEUtils.get(row, vm.columnsProps["id"]) === val) {
 							tableGrid.getTableGrid().setCheckboxRow(row, false)
 						}
 					})
@@ -95,10 +99,10 @@ function buildGridConfig(vm, $pulldown) {
 	if(gridConfig.proxyConfig) {
 		// 默认加载数据后加载选中checkbox
 		vm.$set(gridConfig.proxyConfig, "afterQuery", ({ $grid }) => {
-			if(vm.type === "int" && !vm.initStatus) vm.initData($grid.tableData.map(row => {
+			if(vm.type === "int" && vm.needInit && !vm.initStatus) vm.initData($grid.tableData.map(row => {
 				return {
-					[vm.optionProps.id]: row[vm.columnsProps.id],
-					[vm.optionProps.name]: row[vm.columnsProps.name],
+					[vm.optionProps.id]: XEUtils.get(row, vm.columnsProps["id"]),
+					[vm.optionProps.name]: XEUtils.get(row, vm.columnsProps["name"]),
 				}
 			}))
 			setTableCheckRow(vm, $grid)
@@ -215,13 +219,13 @@ function setTableCheckRow(vm, $grid) {
 	if(vm.multiple) {
 		vm.selectValue.forEach(element => {
 			const row = tableGridData.find(v => {
-				return v[vm.columnsProps["id"]] === element
+				return XEUtils.get(v, vm.columnsProps["id"]) === element
 			})
 			if(row) tableGrid.setCheckboxRow(row, true)
 		});
 	} else {
 		const row = tableGridData.find(v => {
-			return v[vm.columnsProps["id"]] === vm.selectValue
+			return XEUtils.get(v, vm.columnsProps["id"]) === vm.selectValue
 		})
 		tableGrid.setCurrentRow(row)
 		if(row) tableGrid.setCheckboxRow(row, true)
@@ -305,6 +309,7 @@ export default {
 			selectValue: null,
 			selectList: [],
 			initStatus: false,
+			needInit: true
 		}
 	},
 	methods: {
@@ -340,12 +345,13 @@ export default {
 					this.selectList = this.multiple ? val : [val]
 				} else {
 					this.selectValue = val
-					// 判断是否初始化
+					// 判断是否需要初始化并且是否初始化完成
 					if(!this.initStatus) {
 						// 默认初始化代理请求为true
 						let { initQuery = true, data } = this.initConfig
 						// 初始化代理请求
 						if(initQuery && !this.renderCell) {
+							this.needInit = true
 							this.$refs[this.selectInput].toggleMenu()
 						}
 						if(data) {
@@ -357,6 +363,7 @@ export default {
 				}
 			} else {
 				this.selectValue = this.multiple ? [] : null
+				this.needInit = false
 			}
 		}, { immediate: true })
 	},
@@ -379,7 +386,7 @@ export default {
 					},
 					dropdown: ({ $pulldown }) => {
 						return h("el-card", {
-							class: { "hidden": !this.initStatus },
+							class: { "hidden": this.needInit && !this.initStatus },
 							props: {
 								"body-style": {
 									padding: "15px 15px 5px 15px",

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

@@ -4,7 +4,7 @@ export default {
 	component: LwcTableBasic,
 	argTypes: {
 		value: { type: "string/number/object/array", description: "绑定值" },
-		className: { type: "number", description: "vxe-table 内容布局样式" },
+		className: { type: "number", description: "组件各部件样式，默认 { grid: [], table: ['px-4'], form: ['px-4'], toolbar: ['px-4'] }" },
 		gridConfig: { type: "object", description: "参考vxe-grid props" },
 		gridType: {
 			type: "string",
@@ -152,34 +152,34 @@ const getData = (data) => {
 
 export const DefaultList = Template.bind({});
 DefaultList.args = {
-	className: [],
+	className: { grid: [], table: ['px-4'], form: ['px-4'], toolbar: ['px-4'] },
 	gridConfig: {
 		// data: data,
-		border: "inner",
+		border: "full",
 		resizable: true,
 		keepSource: true,
 		printConfig: {},
 		importConfig: {},
 		exportConfig: {},
-		pagerConfig: {
-			currentPage: 1,
-			pageSize: 5,
-			className: 'relative',
-			slots: {
-				left: ({ $grid }, h) => {
-					const { $createElement } = $grid
-					return $createElement('div', {
-						class: ['left-4', 'absolute', 'top-2/4', '-translate-y-1/2'],
-						style: { left: '12px' }
-					}, [
-						$createElement('el-button', {
-						}, '设为已读'),
-						$createElement('el-button', {
-						}, '全部已读'),
-					])
-				}
-			}
-		},
+		// pagerConfig: {
+		// 	currentPage: 1,
+		// 	pageSize: 5,
+		// 	className: 'relative',
+		// 	slots: {
+		// 		left: ({ $grid }, h) => {
+		// 			const { $createElement } = $grid
+		// 			return $createElement('div', {
+		// 				class: ['left-4', 'absolute', 'top-2/4', '-translate-y-1/2'],
+		// 				style: { left: '12px' }
+		// 			}, [
+		// 				$createElement('el-button', {
+		// 				}, '设为已读'),
+		// 				$createElement('el-button', {
+		// 				}, '全部已读'),
+		// 			])
+		// 		}
+		// 	}
+		// },
 		editConfig: {
 			trigger: "click",
 			mode: "row",
@@ -318,10 +318,10 @@ DefaultList.args = {
 			},
 		},
 		proxyConfig: {
-			props: {
-				result: "pageList", // 配置响应结果列表字段
-				total: "totalRowCount", // 配置响应结果总页数字段
-			},
+			// props: {
+			// 	result: "pageList", // 配置响应结果列表字段
+			// 	total: "totalRowCount", // 配置响应结果总页数字段
+			// },
 			ajax: {
 				// 接收 Promise 对象
 				query: async ({ page, sorts, filters, $grid }) => {
@@ -337,6 +337,7 @@ DefaultList.args = {
 						}),
 						totalRowCount: filterData.length,
 					};
+					return obj.pageList;
 					return await getData(obj);
 				},
 			},

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

@@ -50,14 +50,14 @@ const renderToolbar = (h, toolbarConfig, contentConfig, _vm) => {
 	const { toolbar } = toolbarConfig
 	const { border } = contentConfig
 	return h("vxe-toolbar", {
-		class: [{
-			"border-b" : border === 'inner'
-		}],
+		class: [
+			border === 'inner' ? "border-b" : '',
+			..._vm.widgetClass.toolbar
+		],
 		style: border === 'inner' ? {
 			"border-bottom": "1px solid #e8eaec"
 		} : {},
 		props: {
-			className: _vm.paddingX,
 			...toolbarConfig
 		},
 		scopedSlots: toolbar ? {
@@ -263,15 +263,8 @@ const renderTable = (h, contentConfig, formConfig, _vm) => {
 	// 关闭自动加载
 	if (tableConfig.proxyConfig) tableConfig.proxyConfig.autoLoad = false
 
-	// 布局容器，默认 px-4
-	let boxClass = []
-	if (_vm.className.length === 0) {
-		boxClass = ['w-full', 'h-full', _vm.paddingX, 'bg-white']
-	} else {
-		boxClass = ['w-full', 'h-full', 'bg-white'].concat(_vm.className)
-	}
 	return h('div', {
-		class: boxClass
+		class: ['w-full', 'h-full', 'bg-white']
 	}, [
 		h("vxe-grid", {
 			props: {
@@ -279,11 +272,12 @@ const renderTable = (h, contentConfig, formConfig, _vm) => {
 				...tableConfig,
 				formConfig: { data: _vm.getFormData(_vm.btnType) }
 			},
-			class: [{
-				'lwc-table-basic': true,
-				hidden: _vm.currentGridType !== "list",
-				'pb-4': !_vm.showPager // 如果未启用footer 分页
-			}],
+			class: [
+				'lwc-table-basic',
+				'pb-4',
+				_vm.currentGridType !== "list" ? 'hidden' : '',
+				..._vm.widgetClass.table
+			],
 			ref: _vm.gridTable,
 			on: {
 				"page-change": ({ currentPage, pageSize, $grid }) => {
@@ -309,8 +303,8 @@ export default {
 	props: {
 		gridConfig: Object,
 		className: {
-			type: Array,
-			default: () => []
+			type: Object,
+			default: () => { return {} }
 		},
 		page: {
 			type: String,
@@ -339,11 +333,7 @@ export default {
 			default() {
 				return ['checkbox', "seq", "expand"]
 			}
-		},
-		paddingX: {
-			type: String,
-			default: "px-4"
-		},
+		}
 	},
 	data() {
 		return {
@@ -371,7 +361,7 @@ export default {
 		 * @Date: 2021-01-28 17:50:43
 		 * @Desc: 检查是否全选
 		 */
-		 isAllColumns() {
+		isAllColumns() {
 			let isAll = true;
 			for (let col of this.tableColumns) {
 				if (!col.visible) {
@@ -380,6 +370,9 @@ export default {
 				}
 			}
 			return isAll
+		},
+		widgetClass() {
+			return { ...{ grid: [], table: ['px-4'], form: ['px-4'], toolbar: ['px-4'] }, ...this.className };
 		}
 	},
 	methods: {
@@ -523,15 +516,20 @@ export default {
 		const _this = this;
 		const { formConfig, toolbarConfig, cardConfig, ...contentConfig } = this.gridConfig
 		return h("div", {
-			class: {
-				"vxe-grid is--maximize ": this.fullScreen
-			},
+			class: [
+				this.fullScreen ? "vxe-grid is--maximize": '',
+				...this.widgetClass.grid
+			],
 			style: {
 				...(this.fullScreen ? { "z-index": 9999 } : {})
 			}
 		}, [
 			formConfig ? h("vxe-form", {
-				class: "mb-4 py-4 " + this.paddingX,
+				class: [
+					'mb-4',
+					'py-4',
+					...this.widgetClass.form
+				],
 				props: {
 					...formConfig
 				},