merchant_feedov_web/src/views/admin/supplier/NewSupplierForm.vue

<template>
    <a-modal :visible="visible" :title="editMode ? $t('supplier.editSupplier') : $t('supplier.addSupplier')"
        @ok="handleSubmit" @cancel="handleCancel" :mask-closable="false" :width="800">
        <a-tabs v-model:activeKey="activeTab">
            <a-tab-pane key="1" :title="$t('supplier.basicInfo')">
                <a-form :model="formData" :rules="rules" ref="formRef">
                    <a-form-item field="supplierName" :label="$t('supplier.supplierName')" required>
                        <a-input v-model="formData.supplierName" :placeholder="$t('supplier.enterSupplierName')" />
                    </a-form-item>
                    <a-form-item field="operatorType" :label="$t('supplier.operatorType')" required>
                        <a-radio-group v-model="formData.operatorType">
                            <a-radio value="chinamobile">{{ $t('supplier.operatorTypes.chinamobile') }}</a-radio>
                            <a-radio value="chinaunicom">{{ $t('supplier.operatorTypes.chinaunicom') }}</a-radio>
                            <a-radio value="chinatelecom">{{ $t('supplier.operatorTypes.chinatelecom') }}</a-radio>
                            <a-radio value="international">{{ $t('supplier.operatorTypes.international') }}</a-radio>
                            <a-radio value="foreign_local">{{ $t('supplier.operatorTypes.foreign_local') }}</a-radio>
                        </a-radio-group>
                    </a-form-item>
                </a-form>
            </a-tab-pane>

            <a-tab-pane key="2" :title="$t('supplier.operatorApiConfig')">
                <a-form :model="formData.apiConfig" :rules="apiConfigRules" ref="apiConfigFormRef">
                    <a-form-item field="apiTemplate" :label="$t('supplier.apiTemplate')" required>
                        <a-select v-model="formData.apiConfig.apiTemplate"
                            :placeholder="$t('supplier.selectApiTemplate')">
                            <a-option value="telecom_CMP">{{ $t('supplier.apiTemplates.telecom_CMP') }}</a-option>
                            <!-- 添加其他API模板选项 -->
                        </a-select>
                    </a-form-item>
                    <a-form-item field="apiUrl" :label="$t('supplier.apiUrl')" required>
                        <a-input v-model="formData.apiConfig.apiUrl" :placeholder="$t('supplier.enterApiUrl')" />
                    </a-form-item>
                    <a-form-item field="realNameAuthUrl" :label="$t('supplier.realNameAuthUrl')">
                        <a-input v-model="formData.apiConfig.realNameAuthUrl"
                            :placeholder="$t('supplier.enterRealNameAuthUrl')" />
                    </a-form-item>
                    <a-form-item field="realNameUrlParam" :label="$t('supplier.realNameUrlParam')">
                        <a-input v-model="formData.apiConfig.realNameUrlParam"
                            :placeholder="$t('supplier.enterRealNameUrlParam')" />
                    </a-form-item>
                    <a-form-item field="appKey" :label="$t('supplier.appKey')" required>
                        <a-input v-model="formData.apiConfig.appKey" :placeholder="$t('supplier.enterAppKey')" />
                    </a-form-item>
                    <a-form-item field="apiSecret" :label="$t('supplier.apiSecret')" required>
                        <a-input v-model="formData.apiConfig.apiSecret" :placeholder="$t('supplier.enterApiSecret')" />
                    </a-form-item>
                    <a-form-item field="key" :label="$t('supplier.key')">
                        <a-input v-model="formData.apiConfig.key" :placeholder="$t('supplier.enterKey')" />
                    </a-form-item>
                    <a-form-item field="stopCardAction" :label="$t('supplier.stopCardAction')">
                        <a-select v-model="formData.apiConfig.stopCardAction"
                            :placeholder="$t('supplier.selectStopCardAction')">
                            <a-option value="suspend">{{ $t('supplier.stopCardActions.suspend') }}</a-option>
                            <!-- 添加其他停卡动作选项 -->
                        </a-select>
                    </a-form-item>
                </a-form>
            </a-tab-pane>

            <a-tab-pane key="3" :title="$t('supplier.advancedConfig')">
                <a-form :model="formData.advancedConfig" :rules="advancedConfigRules" ref="advancedConfigFormRef">
                    <a-form-item field="needManualRealName" :label="$t('supplier.needManualRealName')" required>
                        <a-radio-group type="button" v-model="formData.advancedConfig.needManualRealName">
                            <a-radio value="需要">{{ $t('supplier.need') }}</a-radio>
                            <a-radio value="无需">{{ $t('supplier.noNeed') }}</a-radio>
                        </a-radio-group>
                    </a-form-item>
                    <a-form-item field="autoSyncUsage" :label="$t('supplier.autoSyncUsage')" required>
                        <a-radio-group type="button" v-model="formData.advancedConfig.autoSyncUsage">
                            <a-radio value="启用">{{ $t('supplier.enable') }}</a-radio>
                            <a-radio value="停用">{{ $t('supplier.disable') }}</a-radio>
                        </a-radio-group>
                    </a-form-item>
                    <a-form-item field="useOperatorApi" :label="$t('supplier.useOperatorApi')" required>
                        <a-radio-group type="button" v-model="formData.advancedConfig.useOperatorApi">
                            <a-radio value="调用">{{ $t('supplier.call') }}</a-radio>
                            <a-radio value="不调用">{{ $t('supplier.noCall') }}</a-radio>
                        </a-radio-group>
                    </a-form-item>
                    <a-form-item field="setQuantityLimit" :label="$t('supplier.setQuantityLimit')">
                        <a-radio-group type="button" v-model="formData.advancedConfig.setQuantityLimit">
                            <a-radio value="达量断网">{{ $t('supplier.quantityLimit') }}</a-radio>
                            <a-radio value="不达量断网">{{ $t('supplier.noQuantityLimit') }}</a-radio>
                        </a-radio-group>
                    </a-form-item>
                    <a-form-item field="useOperatorDataPool" :label="$t('supplier.useOperatorDataPool')" required>
                        <a-radio-group type="button" v-model="formData.advancedConfig.useOperatorDataPool">
                            <a-radio value="启用">{{ $t('supplier.enable') }}</a-radio>
                            <a-radio value="不启用">{{ $t('supplier.disable') }}</a-radio>
                        </a-radio-group>
                    </a-form-item>
                    <a-form-item field="silentPeriod" :label="$t('supplier.silentPeriod')" required>
                        <a-input-number v-model="formData.advancedConfig.silentPeriod"
                            :placeholder="$t('supplier.enterSilentPeriod')" />
                    </a-form-item>
                    <a-form-item field="unusedSuspensionDays" :label="$t('supplier.unusedSuspensionDays')">
                        <a-input-number v-model="formData.advancedConfig.unusedSuspensionDays"
                            :placeholder="$t('supplier.enterDays')" />
                    </a-form-item>
                    <a-form-item field="maxWhitelistAdditions" :label="$t('supplier.maxWhitelistAdditions')">
                        <a-input-number v-model="formData.advancedConfig.maxWhitelistAdditions"
                            :placeholder="$t('supplier.enterTimes')" />
                    </a-form-item>
                    <a-form-item field="totalActiveWhitelists" :label="$t('supplier.totalActiveWhitelists')">
                        <a-input-number v-model="formData.advancedConfig.totalActiveWhitelists"
                            :placeholder="$t('supplier.enterCount')" />
                    </a-form-item>
                    <a-form-item field="dailyWhitelistRemovals" :label="$t('supplier.dailyWhitelistRemovals')">
                        <a-input-number v-model="formData.advancedConfig.dailyWhitelistRemovals"
                            :placeholder="$t('supplier.enterCount')" />
                    </a-form-item>
                    <a-form-item field="whitelistAddOrder" :label="$t('supplier.whitelistAddOrder')">
                        <a-select v-model="formData.advancedConfig.whitelistAddOrder"
                            :placeholder="$t('supplier.selectOrder')">
                            <a-option value="noWhitelist">{{ $t('supplier.noWhitelist') }}</a-option>
                            <!-- 添加其他选项 -->
                        </a-select>
                    </a-form-item>
                    <a-form-item field="numberGenerationRule" :label="$t('supplier.numberGenerationRule')">
                        <a-input v-model="formData.advancedConfig.numberGenerationRule"
                            :placeholder="$t('supplier.enterNumberGenerationRule')" />
                    </a-form-item>
                </a-form>
            </a-tab-pane>
        </a-tabs>
    </a-modal>
</template>

<script setup>
import { ref, reactive, watch } 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 activeTab = ref('1');
const formRef = ref(null);
const apiConfigFormRef = ref(null);
const advancedConfigFormRef = ref(null);

const formData = reactive({
    supplierName: '',
    operatorType: '',
    apiConfig: {
        apiTemplate: '',
        apiUrl: '',
        realNameAuthUrl: '',
        realNameUrlParam: '',
        appKey: '',
        apiSecret: '',
        key: '',
        stopCardAction: '',
    },
    advancedConfig: {
        needManualRealName: '',
        autoSyncUsage: '',
        useOperatorApi: '',
        setQuantityLimit: '',
        useOperatorDataPool: '',
        silentPeriod: null,
        unusedSuspensionDays: null,
        maxWhitelistAdditions: null,
        totalActiveWhitelists: null,
        dailyWhitelistRemovals: null,
        whitelistAddOrder: '',
        numberGenerationRule: '',
    },
});

const rules = {
    supplierName: [{ required: true, message: t('supplier.supplierNameRequired') }],
    operatorType: [{ required: true, message: t('supplier.operatorTypeRequired') }],
};

const apiConfigRules = {
    apiTemplate: [{ required: true, message: t('supplier.apiTemplateRequired') }],
    apiUrl: [{ required: true, message: t('supplier.apiUrlRequired') }],
    appKey: [{ required: true, message: t('supplier.appKeyRequired') }],
    apiSecret: [{ required: true, message: t('supplier.apiSecretRequired') }],
};

const advancedConfigRules = {
    needManualRealName: [{ required: true, message: t('supplier.needManualRealNameRequired') }],
    autoSyncUsage: [{ required: true, message: t('supplier.autoSyncUsageRequired') }],
    useOperatorApi: [{ required: true, message: t('supplier.useOperatorApiRequired') }],
    useOperatorDataPool: [{ required: true, message: t('supplier.useOperatorDataPoolRequired') }],
    silentPeriod: [{ required: true, type: 'number', message: t('supplier.silentPeriodRequired') }],
    // ... 可以根据需要添加其他字段的验证规则 ...
};

watch(() => props.editData, (newVal) => {
    if (newVal) {
        Object.assign(formData, newVal);
    }
}, { immediate: true });

const handleSubmit = () => {
    Promise.all([
        formRef.value.validate(),
        apiConfigFormRef.value.validate(),
        advancedConfigFormRef.value.validate()
    ]).then(([baseErrors, apiErrors, advancedErrors]) => {
        const errors = [...(baseErrors || []), ...(apiErrors || []), ...(advancedErrors || [])];
        if (errors.length === 0) {
            emit('submit', { ...formData });
            emit('update:visible', false);
        } else {
            console.error('Validation failed', errors);
            Message.error(t('supplier.fillRequiredFields'));
        }
    }).catch((error) => {
        console.error('Validation error', error);
        Message.error(t('supplier.fillRequiredFields'));
    });
};

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

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