89 lines
2.5 KiB
Vue
Raw Normal View History

<template>
<ContentWrap>
<el-form
ref="formRef"
:model="formData"
:rules="formRules"
label-width="120px"
v-loading="formLoading"
>
<el-form-item label="hideId" v-show="false">
<el-input v-model="formData.id" />
</el-form-item>
<el-form-item label="积分抵扣" prop="tradeDeductEnable">
<el-switch v-model="formData.tradeDeductEnable" />
</el-form-item>
<el-form-item label="抵扣单位(分)" prop="tradeDeductUnitPrice">
<el-input-number
v-model="formData.tradeDeductUnitPrice"
placeholder="请输入抵扣单位(分)"
style="width: 300px"
/>
</el-form-item>
<el-form-item label="积分抵扣最大值" prop="tradeDeductMaxPrice">
<el-input-number
v-model="formData.tradeDeductMaxPrice"
placeholder="请输入积分抵扣最大值"
style="width: 300px"
/>
</el-form-item>
<el-form-item label="1元赠送多少分" prop="tradeGivePoint">
<el-input-number
v-model="formData.tradeGivePoint"
placeholder="请输入1元赠送多少积分"
style="width: 300px"
/>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="onSubmit">提交</el-button>
</el-form-item>
</el-form>
</ContentWrap>
</template>
<script lang="ts" setup>
import * as ConfigApi from '@/api/point/config'
const { t } = useI18n() // 国际化
const message = useMessage() // 消息弹窗
const dialogVisible = ref(false) // 弹窗的是否展示
const formLoading = ref(false) // 表单的加载中1修改时的数据加载2提交的按钮禁用
const formData = ref({
id: undefined,
tradeDeductEnable: undefined,
tradeDeductUnitPrice: undefined,
tradeDeductMaxPrice: undefined,
tradeGivePoint: undefined
})
const formRules = reactive({})
const formRef = ref() // 表单 Ref
const onSubmit = async () => {
// 校验表单
if (!formRef) return
const valid = await formRef.value.validate()
if (!valid) return
// 提交请求
formLoading.value = true
try {
const data = formData.value as unknown as ConfigApi.ConfigVO
await ConfigApi.saveConfig(data)
message.success(t('common.updateSuccess'))
dialogVisible.value = false
} finally {
formLoading.value = false
}
}
const getConfig = async () => {
try {
const data = await ConfigApi.getConfig()
formData.value = data
} finally {
}
}
onMounted(() => {
getConfig()
})
</script>