Ver código fonte

Update 优化Table组件自定义按钮的配置

Yue 8 meses atrás
pai
commit
2df5dc7b15

+ 23 - 2
UI/VAP_V3.VUE/src/components/table/VbDataTable.vue

@@ -591,12 +591,33 @@ const loadHandleBtns = () => {
 					}
 				})
 			}
-			toolbarHandleBtns.value.push(...(props.customBtns ?? []))
+
+			toolbarHandleBtns.value.push(
+				...(props.customBtns ? _formatterCustomBtns(props.customBtns) : [])
+			)
+			console.log("toolbarHandleBtns", toolbarHandleBtns.value)
 		})
 	} else {
-		toolbarHandleBtns.value = props.customBtns ?? []
+		toolbarHandleBtns.value = props.customBtns ? _formatterCustomBtns(props.customBtns) : []
 	}
 }
+const _formatterCustomBtns = (btns: ToolBtn[]) => {
+	return btns.map((v) => {
+		return {
+			...{
+				key: "",
+				show: true,
+				btnClass: "btn btn-light-primary",
+				permission: "",
+				iconType: "class",
+				disabledFun: (r) => {
+					return r != 1
+				}
+			},
+			...v
+		} as ToolBtn
+	})
+}
 const customSearch = () => {
 	if (props.customSearchFun) {
 		props.customSearchFun(innerQueryParams.value)

+ 15 - 1
UI/VAP_V3.VUE/src/components/table/partials/toolbar/TableLeftToolbar.vue

@@ -26,7 +26,7 @@ const btns = computed(() => {
 		<el-col v-if="v.show" :span="v.span">
 			<slot v-if="v.key && $slots['tool-btn_' + v.key]" :name="`tool-btn_${v.key}`"></slot>
 			<button
-				v-else
+				v-else-if="v.permission"
 				v-hasPermission="v.permission"
 				class="btn btn-sm"
 				:class="v.btnClass ?? 'btn btn-primary'"
@@ -40,6 +40,20 @@ const btns = computed(() => {
 				<span v-else-if="v.iconType == 'class'" :class="v.icon"></span>
 				{{ v.name }}
 			</button>
+			<button
+				v-else
+				class="btn btn-sm"
+				:class="v.btnClass ?? 'btn btn-primary'"
+				@click="v.clickFun"
+				:disabled="v.disabledFun && v.disabledFun(selectedRowCount)"
+				:data-type="v.key">
+				<component
+					v-if="v.iconType == 'component'"
+					:is="(v.icon as any)?.name"
+					v-bind="(v.icon as any)?.attr"></component>
+				<span v-else-if="v.iconType == 'class'" :class="v.icon"></span>
+				{{ v.name }}
+			</button>
 		</el-col>
 	</template>
 	<slot name="custom-tool-btn" />