merchant_feedov_web/src/views/supplier/index.vue

<!-- 供应商管理 -->
<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([]);

const pagination = reactive({
    total: 0,
    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>