sporttery/web/apps/web-antd/src/views/system/parameter/index.vue

<script setup>
import { Page } from '@vben/common-ui';
import { requestClient } from '#/api/request';
import { Button, message, Form, InputNumber, Drawer, Switch } from 'ant-design-vue';
import { ref, reactive, computed, onMounted, onUnmounted, watch } from 'vue';

const initialFormState = {
  innerDefaultAmount: 10000,
  minProfitAmount: 0,
  innerRebateRatio: 0,
  obRebateRatio: 0,
  hgRebateRatio: 0,
  runWorkerEnabled: false
};

const formState = reactive({ ...initialFormState });
const isFormChanged = ref(false);

const checkFormChanged = () => {
  isFormChanged.value = Object.keys(initialFormState).some(key =>
    formState[key] !== initialFormState[key]
  );
};

watch(formState, () => {
  checkFormChanged();
}, { deep: true });

const getSetting = async () => {
  try {
    const data = await requestClient.get('/system/get_setting');
    return data;
  }
  catch (error) {
    console.error('Failed to fetch setting:', error);
    message.error('获取参数设置失败');
    return {};
  }
}

const saveSetting = async () => {
  try {
    await requestClient.post('/system/update_setting', formState);
    message.success('保存成功');
    syncSetting();
  }
  catch (error) {
    console.error('Failed to save setting:', error);
    message.error('保存失败');
  }
}

const syncSetting = () => {
  getSetting().then(data => {
    if (data) {
      Object.assign(formState, data);
      Object.assign(initialFormState, data);
      isFormChanged.value = false;
    }
  });
}

onMounted(() => {
  syncSetting();
});

onUnmounted(() => {

});
</script>

<template>
 <Page title="参数设置">
    <Form
      :model="formState"
      layout="horizontal"
      :label-col="{ span: 6 }"
      :wrapper-col="{ span: 18 }"
      class="parameter-form"
    >
      <Form.Item
        label="内盘默认注额"
        name="innerDefaultAmount"
      >
        <InputNumber
          v-model:value="formState.innerDefaultAmount"
          :min="0"
          :step="1000"
          style="width: 200px"
        />
      </Form.Item>

      <Form.Item
        label="最小利润额"
        name="minProfitAmount"
      >
        <InputNumber
          v-model:value="formState.minProfitAmount"
          :min="-99999"
          :step="1"
          style="width: 200px"
        />
      </Form.Item>

      <Form.Item
        label="内盘返点比例(%)"
        name="innerRebateRatio"
      >
        <InputNumber
          v-model:value="formState.innerRebateRatio"
          :min="0"
          :max="100"
          :step="0.1"
          style="width: 200px"
        />
      </Form.Item>

      <Form.Item
        label="OB返点比例(%)"
        name="obRebateRatio"
      >
        <InputNumber
          v-model:value="formState.obRebateRatio"
          :min="0"
          :max="100"
          :step="0.1"
          style="width: 200px"
        />
      </Form.Item>

      <Form.Item
        label="HG返点比例(%)"
        name="hgRebateRatio"
      >
        <InputNumber
          v-model:value="formState.hgRebateRatio"
          :min="0"
          :max="100"
          :step="0.1"
          style="width: 200px"
        />
      </Form.Item>

      <Form.Item
        label="后台 Worker 开关"
        name="runWorkerEnabled"
      >
        <Switch v-model:checked="formState.runWorkerEnabled" />
      </Form.Item>

      <Form.Item :wrapper-col="{ offset: 6, span: 18 }">
        <Button type="primary" @click="saveSetting" :disabled="!isFormChanged">保存设置</Button>
      </Form.Item>
    </Form>
  </Page>
</template>

<style scoped>

.parameter-form {
  max-width: 600px;
}

</style>