供应商管理

src/views/lotCard/trafficList/config.js

@@ -1,20 +0,0 @@
-export const columns = [
-  { title: window.$t('lotCard.created_at'), dataIndex: 'created_at', align: 'center', width: 200 },
-  { title: window.$t('lotCard.updated_at'), dataIndex: 'updated_at', align: 'center', width: 200 },
-  { title: window.$t('lotCard.orderExpireTime'), dataIndex: 'orderExpireTime', align: 'center', width: 200 },
-  { title: window.$t('lotCard.period'), dataIndex: 'period', align: 'center', width: 200 },
-  { title: window.$t('lotCard.sourcePlan'), dataIndex: 'source', align: 'center', width: 200 },
-  { title: window.$t('lotCard.statusTraffic'), dataIndex: 'status', align: 'center', width: 200 },
-  { title: window.$t('lotCard.superior_id'), dataIndex: 'superior_id', align: 'center', width: 200 },
-  { title: window.$t('lotCard.type'), dataIndex: 'type', align: 'center', width: 200 },
-  // {
-  //   title: window.$t('global.common.operations'),
-  //   dataIndex: 'id',
-  //   slotName: 'id',
-  //   align: 'center',
-  //   width: 180,
-  //   fixed: "right",
-  // }
-]
-
-

src/views/lotCard/trafficList/index.vue

@@ -1,123 +0,0 @@
-<!-- 流量列表 -->
-<template>
-  <div class="container">
-    <div class="head-title">
-      <span>{{ route.meta.title }} </span>
-    </div>
-    <!-- 搜索条件区 -->
-    <div class="search-section">
-      <a-form :model="searchForm" ref="formRef" layout="inline">
-        <a-form-item field="status" :label="$t('lotCard.statusTraffic')">
-          <a-input v-model="searchForm.status" :placeholder="$t('lotCard.please') + $t('lotCard.statusTraffic')"
-            allow-clear />
-        </a-form-item>
-        <a-form-item field="periodType" :label="$t('lotCard.periodType')">
-          <a-input v-model="searchForm.periodType" :placeholder="$t('lotCard.please') + $t('lotCard.periodType')"
-            allow-clear />
-        </a-form-item>
-        <a-form-item>
-          <a-space>
-            <a-button type="primary" @click="handleSearch">{{ $t('form.Search') }}</a-button>
-            <a-button @click="resetSearch">{{ $t('form.Reset') }}</a-button>
-          </a-space>
-        </a-form-item>
-      </a-form>
-    </div>
-
-    <a-table :data="dataSource" :columns="columns" :pagination="pagination" :scroll="{ x: 'auto' }"
-      @page-change="evChangePage">
-      <template #id="{ record }">
-
-
-      </template>
-
-    </a-table>
-  </div>
-</template>
-
-<script setup>
-import { onMounted, ref, getCurrentInstance } from "vue";
-import { useRoute } from "vue-router";
-import { columns } from "./config";
-import { Message, Notification } from '@arco-design/web-vue'
-import { dataPlanList } from "@/api/path/lotCard.api"
-
-const { proxy } = getCurrentInstance()
-const formRef = ref()
-const searchForm = ref({
-  "status": "",
-  "periodType": "",
-});
-
-const dataSource = ref([]);
-const route = useRoute();
-const pagination = ref({
-  total: 0,
-  pageSize: 10,
-  current: 1,
-})
-
-
-
-const intData = async () => {
-  const param = {
-    current: pagination.value.current,
-    size: pagination.value.pageSize,
-    ...searchForm.value,
-  }
-  const { data } = await dataPlanList(param)
-  dataSource.value = data?.records || []
-  pagination.value.total = data.total
-}
-
-
-const evChangePage = (page) => {
-  pagination.value.current = page
-}
-
-
-
-const resetSearch = () => {
-  proxy.$refs.formRef.resetFields()
-  intData()
-}
-
-const handleSearch = () => {
-  intData()
-}
-
-
-
-onMounted(() => {
-  intData()
-})
-</script>
-
-<style scoped lang="less">
-.search-section {
-  margin-top: 20px;
-  margin-bottom: 20px;
-}
-
-.container {
-  .head-title {
-    display: flex;
-    justify-content: space-between;
-  }
-
-  .form-row {
-    display: flex;
-
-    .form-row-col {
-      width: 25%;
-      display: flex;
-      align-items: center;
-
-      .form-row-label {
-        width: 120px;
-        text-align: right;
-      }
-    }
-  }
-}
-</style>

src/views/supplier/NewSupplierForm.vue

@@ -0,0 +1,235 @@
+<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>

src/views/supplier/index.vue

@@ -0,0 +1,167 @@
+<!-- 供应商管理 -->
+<template>
+    <div class="supplier-management">
+        <!-- 顶部操作区 -->
+        <div class="top-actions">
+            <a-space>
+                <a-button type="primary" @click="showNewSupplierForm">{{ $t('supplier.addSupplier') }}</a-button>
+            </a-space>
+        </div>
+
+        <!-- 搜索条件区 -->
+        <div class="search-section">
+            <a-form :model="searchForm" layout="inline">
+                <a-form-item field="supplierName" :label="$t('supplier.supplierName')">
+                    <a-input v-model="searchForm.supplierName" :placeholder="$t('supplier.enterSupplierName')"
+                        allow-clear />
+                </a-form-item>
+                <a-form-item field="operatorType" :label="$t('supplier.operatorType')">
+                    <a-select v-model="searchForm.operatorType" :placeholder="$t('supplier.selectOperatorType')"
+                        allow-clear style="width: 160px">
+                        <a-option v-for="op in operatorTypeOptions" :key="op.value" :value="op.value">
+                            {{ $t(`supplier.operatorTypes.${op.value}`) }}
+                        </a-option>
+                    </a-select>
+                </a-form-item>
+                <a-form-item>
+                    <a-button type="primary" @click="handleSearch">{{ $t('global.common.search') }}</a-button>
+                </a-form-item>
+                <a-form-item>
+                    <a-button @click="resetSearch">{{ $t('global.common.reset') }}</a-button>
+                </a-form-item>
+            </a-form>
+        </div>
+
+        <!-- 数据表格 -->
+        <a-table :columns="columns" :data="tableData" :pagination="pagination" :scroll="{ x: '100%', y: '400px' }">
+            <template #operation="{ record }">
+                <a-space>
+                    <a-button type="text" size="small" @click="handleEdit(record)">{{ $t('global.common.edit')
+                        }}</a-button>
+                    <a-button type="text" size="small" @click="handleDelete(record)">{{ $t('global.common.delete')
+                        }}</a-button>
+                </a-space>
+            </template>
+        </a-table>
+
+        <!-- 新供应商表单对话框 -->
+        <new-supplier-form v-model:visible="newSupplierFormVisible" :editMode="editMode" :editData="editData"
+            @submit="handleNewSupplierSubmit" />
+    </div>
+</template>
+
+<script setup>
+import { ref, reactive, computed } from 'vue';
+import { Message } from '@arco-design/web-vue';
+import { useI18n } from 'vue-i18n';
+import NewSupplierForm from './NewSupplierForm.vue';
+
+const { t } = useI18n();
+
+const columns = computed(() => [
+    { title: t('supplier.id'), dataIndex: 'id' },
+    { title: t('supplier.operatorCode'), dataIndex: 'operatorCode' },
+    { title: t('supplier.operatorName'), dataIndex: 'operatorName' },
+    { title: t('supplier.operatorType'), dataIndex: 'operatorType' },
+    { title: t('supplier.updateTime'), dataIndex: 'updateTime' },
+    { title: t('global.common.operations'), slotName: 'operation', width: 150 },
+]);
+
+const tableData = reactive([
+    {
+        id: 1,
+        operatorCode: '8',
+        operatorName: '香港CSL',
+        operatorType: '境外本地',
+        updateTime: '2024-09-24 08:01:33',
+    },
+    {
+        id: 2,
+        operatorCode: '9',
+        operatorName: '泰国AIS',
+        operatorType: '境外本地',
+        updateTime: '2024-09-24 07:39:07',
+    },
+    // Add more mock data as needed
+]);
+
+const pagination = reactive({
+    total: 100,
+    current: 1,
+    pageSize: 10,
+});
+
+const newSupplierFormVisible = ref(false);
+const editMode = ref(false);
+const editData = ref(null);
+
+const showNewSupplierForm = () => {
+    editMode.value = false;
+    editData.value = null;
+    newSupplierFormVisible.value = true;
+};
+
+const handleEdit = (record) => {
+    editMode.value = true;
+    editData.value = { ...record };
+    newSupplierFormVisible.value = true;
+};
+
+const handleDelete = (record) => {
+    Message.success(`已删除供应商 ${record.operatorName}`);
+    const index = tableData.findIndex(item => item.id === record.id);
+    if (index !== -1) {
+        tableData.splice(index, 1);
+    }
+};
+
+const handleNewSupplierSubmit = (formData) => {
+    if (editMode.value) {
+        console.log('Edited supplier submitted:', formData);
+        Message.success(`已更新供应商 ${formData.operatorName}`);
+    } else {
+        console.log('New supplier submitted:', formData);
+        Message.success(`已添加新供应商 ${formData.operatorName}`);
+    }
+};
+
+const searchForm = reactive({
+    supplierName: '',
+    operatorType: '',
+});
+
+const operatorTypeOptions = [
+    { label: t('supplier.operatorTypes.foreign_local'), value: 'foreign_local' },
+    { label: t('supplier.operatorTypes.international'), value: 'international' },
+];
+
+const handleSearch = () => {
+    console.log('Search form data:', searchForm);
+    Message.success(t('supplier.searchExecuted'));
+};
+
+const resetSearch = () => {
+    Object.keys(searchForm).forEach(key => {
+        searchForm[key] = '';
+    });
+    Message.success(t('supplier.searchReset'));
+};
+</script>
+
+<style scoped>
+.supplier-management {
+    padding: 20px !important;
+}
+
+.top-actions {
+    margin-bottom: 20px;
+}
+
+.search-section {
+    margin-bottom: 20px;
+}
+
+.supplier-management .arco-table-th {
+    white-space: nowrap;
+}
+</style>