feat:后台开卡绑定用户

src/views/wallet/wallet-active/bind-user-form.vue

@@ -0,0 +1,97 @@
+<template>
+	<el-dialog title="绑定用户" width="30%" v-model="visible" :close-on-click-modal="false" draggable>
+		<el-form ref="dataFormRef" :model="form" :rules="dataRules" formDialogRef label-width="90px" v-loading="loading">
+			<el-row :gutter="24">
+				<el-col :span="24" class="mb20">
+					<el-form-item label="用户" prop="userId">
+						<select-user v-model="form.userId" />
+					</el-form-item>
+				</el-col>
+			</el-row>
+		</el-form>
+		<template #footer>
+			<span class="dialog-footer">
+				<el-button @click="visible = false">取消</el-button>
+				<el-button type="primary" @click="onSubmit" :disabled="loading">确认</el-button>
+			</span>
+		</template>
+	</el-dialog>
+</template>
+
+<script setup lang="ts" name="WalletActiveDialog">
+import { useDict } from "/@/hooks/dict"
+import { useMessage } from "/@/hooks/message"
+import * as walletActiveApi from "/@/api/wallet/wallet-active"
+import { rule } from "/@/utils/validate"
+const emit = defineEmits(["refresh"])
+
+// 定义变量内容
+const dataFormRef = ref()
+const visible = ref(false)
+const loading = ref(false)
+// 定义字典
+
+// 提交表单数据
+const form = reactive({
+	id: "",
+	userId: "",
+})
+
+// 定义校验规则
+const dataRules = ref({
+	userId: [{ required: true, message: "请选择用户", trigger: "change" }],
+})
+
+// 打开弹窗
+const openDialog = (id: string) => {
+	visible.value = true
+	form.id = ""
+
+	// 重置表单数据
+	nextTick(() => {
+		dataFormRef.value?.resetFields()
+	})
+
+	// 获取walletActive信息
+	if (id) {
+		form.id = id
+		getwalletActiveData(id)
+	}
+}
+
+// 提交
+const onSubmit = async () => {
+	const valid = await dataFormRef.value.validate().catch(() => {})
+	if (!valid) return false
+	try {
+		loading.value = true
+		// fastCreateCard(form)
+		useMessage().success("绑定成功")
+		visible.value = false
+		emit("refresh")
+	} catch (err: any) {
+		useMessage().error(err.msg)
+	} finally {
+		loading.value = false
+	}
+}
+
+// 初始化表单数据
+const getwalletActiveData = (id: string) => {
+	// 获取数据
+	loading.value = true
+	walletActiveApi
+		.getObj(id)
+		.then((res: any) => {
+			Object.assign(form, res.data)
+		})
+		.finally(() => {
+			loading.value = false
+		})
+}
+
+// 暴露变量
+defineExpose({
+	openDialog,
+})
+</script>