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, RadioGroup, Radio, Drawer, Switch } from 'ant-design-vue';
import { ref, reactive, computed, onMounted, onUnmounted, watch } from 'vue';

const initialFormState = {
  innerDefaultAmount: 10000,
  // minProfitAmount: 0,
  minShowAmount: 0,
  innerRebateRatio: 0,
  obRebateRatio: 0,
  obRebateType: 0,
  obMaxDiff: 0,
  imRebateRatio: 0,
  imRebateType: 0,
  imMaxDiff: 0,
  hgRebateRatio: 0,
  hgRebateType: 0,
  hgRebateLower: 0,
  hgMaxDiff: 0,
  pcRebateRatio: 0,
  pcRebateType: 0,
  subsidyTime: 0,
  subsidyAmount: 0,
  subsidyRbWmAmount: 0,
  subsidyRbOtAmount: 0,
  halfTimeActiveTime: 0,
  expireTimeEvents: 0,
  expireTimeSpecial: 0,
  syncSettingEnabled: false,
  runWorkerEnabled: false,
};

const formState = reactive({ ...initialFormState });

const formChangeTimer = ref(null);

const formChanged = computed(() => {
  const changed = {};
  Object.keys(formState).forEach(key => {
    if (formState[key] !== initialFormState[key]) {
      changed[key] = formState[key];
    }
  });
  return changed;
});

watch(formState, () => {
  if (formChangeTimer.value) {
    clearTimeout(formChangeTimer.value);
  }
  formChangeTimer.value = setTimeout(() => {
    if (Object.keys(formChanged.value).length > 0) {
      saveSetting(formChanged.value);
    }
  }, 1000);
}, { 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 (changed) => {
  try {
    await requestClient.post('/system/update_setting', changed);
    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);
    }
  });
}

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

onUnmounted(() => {
  clearTimeout(formChangeTimer.value);
});
</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="minShowAmount"
      >
        <InputNumber
          v-model:value="formState.minShowAmount"
          :min="-99999"
          :step="1"
          style="width: 200px"
        />
      </Form.Item>

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

      <Form.Item
        label="OB返点比例(%)"
        name="obRebateRatio"
      >
        <InputNumber
          :disabled="formState.syncSettingEnabled"
          v-model:value="formState.obRebateRatio"
          :min="0"
          :max="100"
          :step="0.1"
          style="width: 200px; vertical-align: middle;"
        />
        <RadioGroup :disabled="formState.syncSettingEnabled" style="margin-left: 10px; vertical-align: middle;" v-model:value="formState.obRebateType">
          <Radio :value="0">结算</Radio>
          <Radio :value="1">本金</Radio>
        </RadioGroup>
      </Form.Item>

      <Form.Item
        label="OB赔率差值阈值"
        name="obMaxDiff"
      >
        <InputNumber :disabled="formState.syncSettingEnabled" v-model:value="formState.obMaxDiff" :step="0.01" style="width: 200px" />
      </Form.Item>

      <Form.Item
        label="IM返点比例(%)"
        name="imRebateRatio"
      >
        <InputNumber :disabled="formState.syncSettingEnabled" v-model:value="formState.imRebateRatio" :min="0" :step="0.1" style="width: 200px" />
        <RadioGroup :disabled="formState.syncSettingEnabled" style="margin-left: 10px; vertical-align: middle;" v-model:value="formState.imRebateType">
          <Radio :value="0">结算</Radio>
          <Radio :value="1">本金</Radio>
        </RadioGroup>
      </Form.Item>

      <Form.Item
        label="IM赔率差值阈值"
        name="imMaxDiff"
      >
        <InputNumber :disabled="formState.syncSettingEnabled" v-model:value="formState.imMaxDiff" :step="0.01" style="width: 200px" />
      </Form.Item>

      <Form.Item
        label="HG返点比例(%)"
        name="hgRebateRatio"
      >
        <InputNumber
          :disabled="formState.syncSettingEnabled"
          v-model:value="formState.hgRebateRatio"
          :min="0"
          :max="100"
          :step="0.1"
          style="width: 200px; vertical-align: middle;"
        />
        <RadioGroup :disabled="formState.syncSettingEnabled" style="margin-left: 10px; vertical-align: middle;" v-model:value="formState.hgRebateType">
          <Radio :value="0">结算</Radio>
          <Radio :value="1">本金</Radio>
        </RadioGroup>
      </Form.Item>

      <Form.Item
        label="HG低返点比例(%)"
        name="hgRebateLower"
      >
        <InputNumber :disabled="formState.syncSettingEnabled" v-model:value="formState.hgRebateLower" :min="0" :step="0.01" style="width: 200px" />
      </Form.Item>

      <Form.Item
        label="HG赔率差值阈值"
        name="hgMaxDiff"
      >
        <InputNumber :disabled="formState.syncSettingEnabled" v-model:value="formState.hgMaxDiff" :step="0.01" style="width: 200px" />
      </Form.Item>

      <Form.Item
        label="PC返点比例(%)"
        name="pcRebateRatio"
      >
        <InputNumber :disabled="formState.syncSettingEnabled"
          v-model:value="formState.pcRebateRatio"
          :min="0"
          :step="0.1"
          style="width: 200px; vertical-align: middle;"
        />
        <RadioGroup :disabled="formState.syncSettingEnabled" style="margin-left: 10px; vertical-align: middle;" v-model:value="formState.pcRebateType">
          <Radio :value="0">结算</Radio>
          <Radio :value="1">本金</Radio>
        </RadioGroup>
      </Form.Item>

      <Form.Item
        label="赛前补水时间(-h)"
        name="subsidyTime"
      >
        <InputNumber :disabled="formState.syncSettingEnabled" v-model:value="formState.subsidyTime" :min="0" :step="48" style="width: 200px" />
      </Form.Item>

      <Form.Item
        label="赛前补水比例"
        name="subsidyAmount"
      >
        <InputNumber :disabled="formState.syncSettingEnabled" v-model:value="formState.subsidyAmount" :min="0" :step="0.01" style="width: 200px" />
      </Form.Item>

      <Form.Item
        label="滚球补水(净胜)"
        name="subsidyRbWmAmount"
      >
        <InputNumber :disabled="formState.syncSettingEnabled" v-model:value="formState.subsidyRbWmAmount" :min="0" :step="0.01" style="width: 200px" />
      </Form.Item>

      <Form.Item
        label="滚球补水(进球)"
        name="subsidyRbOtAmount"
      >
        <InputNumber :disabled="formState.syncSettingEnabled" v-model:value="formState.subsidyRbOtAmount" :min="0" :step="0.01" style="width: 200px" />
      </Form.Item>

      <Form.Item
        label="上半场激活时间(-h)"
        name="halfTimeActiveTime"
      >
        <InputNumber :disabled="formState.syncSettingEnabled" v-model:value="formState.halfTimeActiveTime" :min="0" :max="24" :step="0.5" style="width: 200px" />
      </Form.Item>

      <Form.Item
        label="普通盘过期(ms)"
        name="expireTimeEvents"
      >
        <InputNumber v-model:value="formState.expireTimeEvents" :min="0" :step="1000" style="width: 200px" />
      </Form.Item>

      <Form.Item
        label="特殊盘过期(ms)"
        name="expireTimeSpecial"
      >
        <InputNumber v-model:value="formState.expireTimeSpecial" :min="0" :step="1000" style="width: 200px" />
      </Form.Item>

      <Form.Item
        label="同步 Qboss 配置"
        name="syncSettingEnabled"
      >
        <Switch v-model:checked="formState.syncSettingEnabled" />
      </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>