merchant_feedov_web/src/views/plan-management/NewFeeForm.vue

<template>
  <a-modal
    :visible="visible"
    :title="editMode ? $t('plan.editFee') : $t('plan.addFee')"
    @ok="handleSubmit"
    @cancel="handleCancel"
    :width="800"
  >
    <a-form :model="formData" :rules="rules" ref="formRef" >
      <a-divider>{{ $t('plan.basicInfo') }}</a-divider>
      <a-form-item field="feeCode" :label="$t('plan.feeCode')" required>
        <a-input v-model="formData.feeCode" :placeholder="$t('plan.enterFeeCode')" :maxLength="60" show-word-limit />
      </a-form-item>
      <a-form-item field="feeName" :label="$t('plan.feeName')" required>
        <a-input v-model="formData.feeName" :placeholder="$t('plan.enterFeeName')" :maxLength="60" show-word-limit />
      </a-form-item>
      <a-form-item field="supplier" :label="$t('plan.supplier')" required>
        <a-select v-model="formData.supplier" :placeholder="$t('plan.selectSupplier')">
          <a-option value="supplier1">{{ $t('plan.supplier1') }}</a-option>
          <a-option value="supplier2">{{ $t('plan.supplier2') }}</a-option>
        </a-select>
      </a-form-item>
      <a-form-item field="dataType" :label="$t('plan.dataType')" required>
        <a-radio-group v-model="formData.dataType">
          <a-radio value="general">{{ $t('plan.general') }}</a-radio>
          <a-radio value="specific">{{ $t('plan.specific') }}</a-radio>
        </a-radio-group>
      </a-form-item>
      <a-form-item field="billingCategory" :label="$t('plan.billingCategory')" required>
        <a-radio-group v-model="formData.billingCategory">
          <a-radio value="data">{{ $t('plan.data') }}</a-radio>
          <a-radio value="voice">{{ $t('plan.voice') }}</a-radio>
          <a-radio value="nb">{{ $t('plan.nb') }}</a-radio>
          <a-radio value="sms">{{ $t('plan.sms') }}</a-radio>
        </a-radio-group>
      </a-form-item>
      <a-form-item field="status" :label="$t('plan.status')" required>
        <a-radio-group v-model="formData.status">
          <a-radio value="normal">{{ $t('plan.status.normal') }}</a-radio>
          <a-radio value="disabled">{{ $t('plan.status.disabled') }}</a-radio>
          <a-radio value="offline">{{ $t('plan.status.offline') }}</a-radio>
        </a-radio-group>
      </a-form-item>

      <a-divider>{{ $t('plan.billingInfo') }}</a-divider>
      <a-form-item field="billingCycle" :label="$t('plan.billingCycle')" required>
        <a-radio-group v-model="formData.billingCycle">
          <a-radio value="daily">{{ $t('plan.daily') }}</a-radio>
          <a-radio value="monthly">{{ $t('plan.monthly') }}</a-radio>
        </a-radio-group>
      </a-form-item>
      <a-form-item field="packageSize" :label="$t('plan.packageSize')" required>
        <a-input-number v-model="formData.packageSize" :placeholder="$t('plan.enterPackageSize')" style="width: 200px" />
        <a-select v-model="formData.packageUnit" style="width: 80px; margin-left: 10px;">
          <a-option value="KB">KB</a-option>
          <a-option value="MB">MB</a-option>
          <a-option value="GB">GB</a-option>
        </a-select>
      </a-form-item>
      <a-form-item field="standardPrice" :label="$t('plan.standardPrice')" required>
        <a-input-number v-model="formData.standardPrice" :placeholder="$t('plan.enterPrice')" style="width: 200px" />
        <span style="margin: 0 10px;">{{ $t('plan.currency') }}/</span>
        <a-select v-model="formData.priceUnit" style="width: 120px;">
          <a-option value="day">{{ $t('plan.billingCycleType') }}</a-option>
          <a-option value="month">{{ $t('plan.month') }}</a-option>
        </a-select>
      </a-form-item>
      <a-form-item field="subscriptionPeriod" :label="$t('plan.subscriptionPeriod')" required>
        <a-input-number v-model="formData.minPeriod" :placeholder="$t('plan.minimum')" style="width: 100px" />
        <span style="margin: 0 10px;">{{ $t('plan.monthsMin') }}</span>
        <a-input-number v-model="formData.maxPeriod" :placeholder="$t('plan.maximum')" style="width: 100px" />
        <span style="margin-left: 10px;">{{ $t('plan.monthsMax') }}</span>
      </a-form-item>
      <a-form-item field="overagePrice" :label="$t('plan.overagePrice')">
        <a-input-number v-model="formData.overagePrice" :placeholder="$t('plan.enterOveragePrice')" style="width: 200px" />
        <span style="margin: 0 10px;">{{ $t('plan.currency') }}/</span>
        <a-select v-model="formData.overageUnit" style="width: 80px;">
          <a-option value="KB">KB</a-option>
          <a-option value="MB">MB</a-option>
          <a-option value="GB">GB</a-option>
        </a-select>
      </a-form-item>
      <a-form-item field="connectionTimes" :label="$t('plan.connectionTimes')">
        <a-input-number v-model="formData.connectionTimes" placeholder="0" />
        <span style="margin-left: 10px;">{{ $t('plan.times') }}</span>
      </a-form-item>
      <a-form-item field="voiceRate" :label="$t('plan.voiceRate')">
        <a-input-number v-model="formData.voiceRate" placeholder="0" />
        <span style="margin-left: 10px;">{{ $t('plan.currency') }}/{{ $t('plan.minute') }}</span>
      </a-form-item>
      <a-form-item field="billingCode" :label="$t('plan.billingCode')">
        <a-input v-model="formData.billingCode" :placeholder="$t('plan.autoGenerated')" disabled />
      </a-form-item>
    </a-form>
  </a-modal>
</template>

<script setup>
import { ref, reactive } from 'vue';
import { Message } from '@arco-design/web-vue';
import { useI18n } from 'vue-i18n';

const { t } = useI18n();

const props = defineProps({
  visible: Boolean,
  editMode: Boolean,
  editData: Object,
});

const emit = defineEmits(['update:visible', 'submit']);

const formRef = ref(null);

const formData = reactive({
  feeCode: '',
  feeName: '',
  supplier: '',
  dataType: 'general',
  billingCategory: 'data',
  status: 'normal',
  billingCycle: 'daily',
  packageSize: null,
  packageUnit: 'MB',
  standardPrice: null,
  priceUnit: 'day',
  minPeriod: 1,
  maxPeriod: 60,
  overagePrice: null,
  overageUnit: 'MB',
  connectionTimes: 0,
  voiceRate: 0,
  billingCode: t('plan.autoGenerated'),
});

const rules = {
  feeCode: [{ required: true, message: t('plan.feeCodeRequired') }],
  feeName: [{ required: true, message: t('plan.feeNameRequired') }],
  supplier: [{ required: true, message: t('plan.supplierRequired') }],
  dataType: [{ required: true, message: t('plan.dataTypeRequired') }],
  billingCategory: [{ required: true, message: t('plan.billingCategoryRequired') }],
  status: [{ required: true, message: t('plan.statusRequired') }],
  billingCycle: [{ required: true, message: t('plan.billingCycleRequired') }],
  packageSize: [{ required: true, type: 'number', message: t('plan.packageSizeRequired') }],
  standardPrice: [{ required: true, type: 'number', message: t('plan.standardPriceRequired') }],
  minPeriod: [{ required: true, type: 'number', message: t('plan.minPeriodRequired') }],
  maxPeriod: [{ required: true, type: 'number', message: t('plan.maxPeriodRequired') }],
};

const handleSubmit = () => {
  formRef.value.validate((errors) => {
    if (!errors) {
      emit('submit', { ...formData });
      emit('update:visible', false);
    } else {
      console.error('Validation failed', errors);
      Message.error(t('plan.fillRequiredFields'));
    }
  });
};

const handleCancel = () => {
  emit('update:visible', false);
};
</script>

<style scoped>
.arco-form-item {
  margin-bottom: 18px;
}
</style>