11

src/views/wallet/mch-manage/setting.vue

@@ -1,14 +1,22 @@
 <template>
-	<el-dialog title="商户配置" width="40%" v-model="visible" :close-on-click-modal="false" draggable>
+	<el-dialog width="60%" v-model="visible" :close-on-click-modal="false" draggable>
-		<el-form ref="dataFormRef" :model="form" :rules="dataRules" label-width="120px" v-loading="loading">
+		<div>
-			<el-row :gutter="24">
+			<el-tabs v-model="form.activeTab" class="demo-tabs">
-				<el-col :span="18" class="mb20">
+				<div v-for="v in data.tabList" :key="v.id">
-					<el-form-item label="默认钱包类型" prop="defaultWalletTypeId">
+					<el-tab-pane :label="v.label" :name="v.id" />
-						<select-wallet-type v-model="form.defaultWalletTypeId" placeholder="请选择默认钱包类型" />
+				</div>
-					</el-form-item>
+			</el-tabs>
-				</el-col>
+			<el-form ref="dataFormRef" v-if="form.activeTab == 10" :model="form" :rules="dataRules" label-width="120px" v-loading="loading">
-			</el-row>
+				<el-row :gutter="24">
-		</el-form>
+					<el-col :span="18" class="mb20">
+						<el-form-item label="默认钱包类型" prop="defaultWalletTypeId">
+							<select-wallet-type v-model="form.defaultWalletTypeId" placeholder="请选择默认钱包类型" />
+						</el-form-item>
+					</el-col>
+				</el-row>
+			</el-form>
+			<mch-rule-config-dialog v-if="form.activeTab == 20" />
+		</div>
 		<template #footer>
 			<el-button @click="visible = false">取消</el-button>
 			<el-button type="primary" @click="onSubmit" :disabled="loading">确认</el-button>
@@ -20,14 +28,24 @@
 import { useMessage } from "/@/hooks/message"
 import { getObj, putObj } from "/@/api/wallet/mch-manage"
 
+const MchRuleConfigDialog = defineAsyncComponent(() => import("./mch-rule-config.vue"))
+
 const emit = defineEmits(["refresh"])
 
 const dataFormRef = ref()
 const visible = ref(false)
 const loading = ref(false)
 
+const data = {
+	tabList: [
+		{ id: 10, label: "钱包配置" },
+		{ id: 20, label: "钱包规则" },
+	],
+}
+
 // 提交表单数据
 const form = reactive({
+	activeTab: data.tabList[0].id,
 	id: "",
 	merchantType: "",
 	defaultWalletTypeId: "",

src/views/wallet/wallet-setting/index.vue

@@ -1,7 +1,7 @@
 <template>
 	<div class="layout-padding">
 		<div class="layout-padding-auto layout-padding-view">
-			<el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
+			<el-tabs v-model="activeName" class="demo-tabs">
 				<div v-for="v in data.tabList" :key="v.id">
 					<el-tab-pane :label="v.label" :name="v.id">
 						<div></div>
@@ -40,6 +40,4 @@ const data = {
 }
 
 const activeName = ref(data.tabList[0].id)
-
-const handleClick = (e: any) => {}
 </script>