pj_admin_cloud/src/views/wallet/wallet-recharge-apply/form.vue

<template>
	<el-dialog :title="form.id ? '编辑' : '新增'" v-model="visible" width="30%" :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="importTime">
						<el-date-picker v-model="form.importTime" type="month" value-format="YYYY-MM-DD"
							placeholder="请选择充值时间" />
					</el-form-item>
				</el-col>

				<el-col :span="24" class="mb20">
					<el-form-item label="充值类型" prop="bizType">
						<!-- :hide-ids="[(roleCodes.includes('RETURN_CANTEEN') || auths(['wallet_walletRechargeApply_refund'])) ? '' : '3', auths(['wallet_walletRechargeApply_select_jz']) ? '' : '2', '1']" -->
						<dict-select v-model="form.bizType" :disabled="form.invoiceId" dict-code="wallet_biz_recharge"
							:hide-ids="[(roleCodes.includes('RETURN_CANTEEN') || auths(['wallet_walletRechargeApply_refund'])) ? '' : '3', auths(['wallet_walletRechargeApply_select_jz']) ? '' : '2', form.bizType == '1' ? '' : '1']"
							placeholder="请选择饭卡类型" />
					</el-form-item>
				</el-col>

				<el-col :span="24" class="mb20">
					<el-form-item label="钱包" prop="walletTypeId">
						<!-- <select-wallet-type v-model="form.walletTypeId" placeholder="请选择钱包" :disabled="false" /> -->
						<el-select v-model="form.walletTypeId" :disabled="walletTypeIdDisabled">
							<el-option v-for="item in walletTypeOptions" :key="item.id" :label="item.name"
								:value="item.id" />
						</el-select>
					</el-form-item>
				</el-col>

				<el-col
					v-if="(roleCodes.includes('RETURN_CANTEEN') || auths(['wallet_walletRechargeApply_refund'])) && form.bizType == 3"
					:span="24" class="mb20">
					<el-form-item prop="isAuthorization">
						<template #label>
							<span>授权</span>
							<tip content="同意将充值金额退还到各自食堂" />
						</template>
						<el-radio-group v-model="form.isAuthorization">
							<el-radio v-for="v in yes_no_type" :key="v.value" :label="v.value" border>
								{{ v.label }}
							</el-radio>
						</el-radio-group>
					</el-form-item>
				</el-col>

				<el-col :span="24" class="mb20">
					<el-form-item label="备注" prop="remark">
						<el-input v-model="form.remark" placeholder="请输入备注" type="textarea"
							:autosize="{ minRows: 6 }" />
					</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="WalletRechargeApplyDialog">
import { useDict } from "/@/hooks/dict"
import { useMessage } from "/@/hooks/message"
import { getObj, addObj, putObj } from "/@/api/wallet/wallet-recharge-apply"
const emit = defineEmits(["refresh"])
import { getWalletTypeSimple } from "/@/api/wallet/wallet-type"
import { useUserInfo } from "/@/stores/userInfo"
import { formatDate } from "/@/utils/formatTime"
import { auths } from "/@/utils/authFunction"

// 定义查询字典
const { yes_no_type } = useDict("yes_no_type")

const {
	userInfos: { roleCodes },
} = useUserInfo()
// 定义变量内容
const dataFormRef = ref()
const visible = ref(false)
const loading = ref(false)
// 定义字典

// 提交表单数据
const defaultForm = {
	id: "",
	userId: "",
	bizType: "",
	walletTypeId: "",
	deptId: "",
	importTime: formatDate(new Date(), "YYYY-mm"),
	remark: "",
	isAuthorization: "1",
}
const form = reactive<any>({ ...defaultForm })
const walletTypeOptions = ref()
const walletTypeIdDisabled = ref(true)
watch(
	() => form.bizType,
	(val) => {
		if (!val) return

		if (val == "2" && roleCodes.includes("CANTEEN_FINANCE")) {
			walletTypeIdDisabled.value = false
		} else {
			walletTypeIdDisabled.value = true
			if (roleCodes.includes("CAN_RECH_CONS_WALLET")) {
				form.walletTypeId = walletTypeOptions.value?.find((item: any) => item.uniqueCode == "2").id || ""
			} else {
				form.walletTypeId = walletTypeOptions.value?.find((item: any) => item.uniqueCode == "1").id || ""
			}
		}
	},
	{
		immediate: true,
	},
)

// 定义校验规则
const dataRules = ref({
	importTime: [{ required: true, message: "导入时间(手动选择)不能为空", trigger: "change" }],
	bizType: [{ required: true, message: "请选择充值类型", trigger: "change" }],
	walletTypeId: [{ required: true, message: "请选择钱包类型", trigger: "change" }],
	isAuthorization: [{ required: true, message: "请选择是否授权", trigger: "change" }],
})

// 打开弹窗
const openDialog = async (id: string) => {
	visible.value = true
	form.id = ""

	// 重置表单数据
	nextTick(() => {
		dataFormRef.value?.resetFields()
		form.walletTypeId = ""
	})

	const res = await getWalletTypeSimple()
	walletTypeOptions.value = res.data.records

	// 获取walletRechargeApply信息
	if (id) {
		form.id = id
		await getwalletRechargeApplyData(id)
	}
}

// 提交
const onSubmit = async () => {
	const valid = await dataFormRef.value.validate().catch(() => { })
	if (!valid) return false
	if (form.bizType == 3 && form.isAuthorization != 1) {
		useMessage().error("请同意授权协议")
		return
	}
	try {
		loading.value = true
		form.id ? await putObj(form) : await addObj(form)
		useMessage().success(form.id ? "修改成功" : "添加成功")
		visible.value = false
		emit("refresh")
	} catch (err: any) {
		useMessage().error(err.msg)
	} finally {
		loading.value = false
	}
}

// 初始化表单数据
const getwalletRechargeApplyData = async (id: string) => {
	// 获取数据
	loading.value = true
	try {
		const res = await getObj(id)
		if (res.code == 0) {
			Object.assign(form, res.data)
			if (!form.importTime) {
				form.importTime = formatDate(new Date(), "YYYY-mm-dd")
			}
			if (!form.isAuthorization) {
				form.isAuthorization = "1"
			}
		}
	} catch (err: any) {
		console.error(err);
	} finally {
		loading.value = false
	}
}

// 暴露变量
defineExpose({
	openDialog,
})
</script>