shuhi-ui/src/views/mallLogistics/address/index.vue

<template>
    <ele-page flex-table>
        <PageSearch @search="handleSearch" />

        <common-table ref="tableRef" :pageConfig="pageConfig" :columns="columns">
            <template #toolbar>
                <div class="flex items-center space-x-2">
                    <el-button type="primary" @click="handleAdd" :icon="Plus">添加新地址</el-button>
                </div>
            </template>

            <!-- Custom Slots for Radio Buttons -->
            <template #isSend="{ row }">
                <el-radio :model-value="row.isSend" :label="1" @change="handleSetDefault(row, 'send')">默认</el-radio>
            </template>

            <template #isReturn="{ row }">
                <el-radio :model-value="row.isReturn" :label="1" @change="handleSetDefault(row, 'return')">默认</el-radio>
            </template>

            <template #action="{ row }">
                <el-button link type="primary" @click="handleEdit(row)">编辑</el-button>
                <el-button link type="danger" @click="handleDelete(row)">删除</el-button>
            </template>
        </common-table>

        <EditDialog ref="editDialogRef" @success="refreshPage" />
    </ele-page>
</template>

<script setup>
import { ref, reactive, getCurrentInstance } from 'vue';
import { Plus } from '@element-plus/icons-vue';
import CommonTable from '@/components/CommonPage/CommonTable.vue';
import PageSearch from './components/page-search.vue';
import EditDialog from './components/edit-dialog.vue';
import { ElMessage, ElMessageBox } from 'element-plus';

const { proxy } = getCurrentInstance();

const tableRef = ref(null);
const editDialogRef = ref(null);

const pageConfig = reactive({
    pageUrl: '/mallLogistics/address/page',
    rowKey: 'id',
    fileName: '地址管理',
    params: {}
});

const columns = ref([
    { prop: 'isSend', label: '发货地址', slot: 'isSend', width: 100, align: 'center' },
    { prop: 'isReturn', label: '退货地址', slot: 'isReturn', width: 100, align: 'center' },
    { prop: 'contactName', label: '联系人', minWidth: 100 },
    { prop: 'area', label: '所在地区', minWidth: 150 },
    { prop: 'detailAddress', label: '详细地址', minWidth: 200 },
    { prop: 'phone', label: '手机号码', width: 120 },
    { columnKey: 'action', label: '操作', width: 150, fixed: 'right', align: 'center', slot: 'action' }
]);

const handleSearch = (params) => {
    tableRef.value?.reload({ where: params });
};

const handleAdd = () => {
    editDialogRef.value?.handleOpen();
};

const handleEdit = (row) => {
    editDialogRef.value?.handleOpen(row);
};

const handleDelete = (row) => {
    tableRef.value.messageConfrim({
        message: "确认删除该地址?",
        fetch: () => proxy.$http.post('/mallLogistics/address/delete', { id: row.id })
    })
};

const handleSetDefault = (row, type) => {
    const url = type === 'send' ? '/mallLogistics/address/setDefaultSend' : '/mallLogistics/address/setDefaultReturn';
    proxy.$http.post(url, { id: row.id }).then(() => {
        ElMessage.success('设置成功');
        refreshPage();
    });
};

const refreshPage = () => {
    tableRef.value?.reload();
};
</script>