car-wash-java/admin-web-new/src/views/admin/platform/rate-dialog.vue

<script setup lang="ts">
import { reactive, ref } from "vue";
import { addPlatformRate, updatePlatformRate } from "@/api/platform";
import { ElMessage } from "element-plus";

const emit = defineEmits(["refresh"]);

const formRef = ref();
const dialogVisible = ref(false);
const dialogType = ref<"add" | "edit" | "view">("add");
const loading = ref(false);

const state = reactive({
  ruleForm: {
    id: null as number | null,
    name: "",
    feeRate: null as number | null,
    withdrawalFeeRate: null as number | null
  },
  rules: {
    name: [{ required: true, message: "请输入费率名称", trigger: "blur" }]
  }
});

const resetForm = () => {
  state.ruleForm = {
    id: null,
    name: "",
    feeRate: null,
    withdrawalFeeRate: null
  };
  formRef.value?.resetFields();
};

const open = async (type: "add" | "edit" | "view", row?: any) => {
  dialogType.value = type;
  resetForm();
  
  if (row) {
    state.ruleForm = { ...row };
  }
  
  dialogVisible.value = true;
};

const handleClose = () => {
  dialogVisible.value = false;
  resetForm();
};

const handleSubmit = async () => {
  const valid = await formRef.value?.validate().catch(() => false);
  if (!valid) return;
  
  loading.value = true;
  try {
    if (dialogType.value === "add") {
      await addPlatformRate(state.ruleForm);
      ElMessage.success("新增成功");
    } else {
      await updatePlatformRate(state.ruleForm);
      ElMessage.success("修改成功");
    }
    handleClose();
    emit("refresh");
  } catch (e) {
    ElMessage.error("操作失败");
  } finally {
    loading.value = false;
  }
};

const isView = () => dialogType.value === "view";

const getTitle = () => {
  const map = { add: "新增费率", edit: "编辑费率", view: "费率详情" };
  return map[dialogType.value];
};

defineExpose({ open });
</script>

<template>
  <el-dialog
    v-model="dialogVisible"
    :title="getTitle()"
    width="600px"
    :close-on-click-modal="false"
    destroy-on-close
  >
    <el-form
      ref="formRef"
      :model="state.ruleForm"
      :rules="state.rules"
      label-position="top"
      :disabled="isView()"
    >
      <el-form-item label="费率名称" prop="name">
        <el-input v-model="state.ruleForm.name" placeholder="请输入费率名称" clearable />
      </el-form-item>
      <el-form-item label="平台费率（0.1代表10%）" prop="feeRate">
        <el-input-number
          v-model="state.ruleForm.feeRate"
          :min="0"
          :max="1"
          :step="0.1"
          :precision="2"
          placeholder="平台费率"
          class="w100"
        />
      </el-form-item>
      <el-form-item label="提现手续费率（0.006代表6‰）" prop="withdrawalFeeRate">
        <el-input-number
          v-model="state.ruleForm.withdrawalFeeRate"
          :min="0"
          :max="1"
          :step="0.001"
          :precision="3"
          placeholder="提现手续费率"
          class="w100"
        />
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="handleClose">取 消</el-button>
        <el-button v-if="!isView()" :loading="loading" type="primary" @click="handleSubmit">
          确 定
        </el-button>
      </span>
    </template>
  </el-dialog>
</template>

<style scoped lang="scss">
.w100 {
  width: 100%;
}
</style>