feat(易投诉书单): 实现前后端对接及界面优化

src/views/goods/highComplaintBooks/components/add-dialog.vue

@@ -11,6 +11,7 @@
 import { ref, computed } from 'vue';
 import { ElMessage } from 'element-plus';
 import SimpleFormModal from '@/components/CommonPage/SimpleFormModal.vue';
+import request from '@/utils/request';
 
 const emit = defineEmits(['success']);
 const editRef = ref(null);
@@ -27,62 +28,65 @@ const formItems = computed(() => [
     {
         type: 'checkbox',
         label: '易投诉平台：',
-        prop: 'platforms',
+        prop: 'platformList',
         required: true,
         options: [
-            { label: '拼多多', value: 'pdd' },
-            { label: '淘宝', value: 'taobao' },
-            { label: '小程序', value: 'miniapp' },
-            { label: '孔网', value: 'kongwang' }
+            { label: '拼多多', value: '拼多多' },
+            { label: '淘宝', value: '淘宝' },
+            { label: '小程序', value: '小程序' },
+            { label: '孔网', value: '孔网' }
         ]
     },
     {
-        type: 'select',
+        type: 'checkbox',
         label: '易投诉原因：',
-        prop: 'reason',
+        prop: 'reasonList',
         required: true,
         options: [
-            { label: '出版社投诉', value: 'publisher' },
-            { label: '价格投诉', value: 'price' },
-            { label: '质量投诉', value: 'quality' }
+            { label: '出版社投诉', value: '出版社投诉' },
+            { label: '价格投诉', value: '价格投诉' },
+            { label: '质量投诉', value: '质量投诉' }
         ]
     }
 ]);
 
 const checkIsbn = (model) => {
-    // Mock check
-    if (model.isbn === '9787563215652' && !currentId.value) {
-        ElMessage.warning('重复添加，提示此ISBN已存在');
-    }
+    // Mock check removed or implement real check if needed
 };
 
 const handleOpen = (row) => {
     if (row) {
         title.value = '编辑图书';
         currentId.value = row.id;
-        editRef.value?.handleOpen({
-            ...row,
-            platforms: row.platforms || []
+        // Fetch details if needed or use row data
+        // API doc says /shop/complaintBook/getInfo/{id} for details, but row might have enough info.
+        // Let's implement getInfo as per requirement.
+        request.get(`/shop/complaintBook/getInfo/${row.id}`).then(res => {
+            const data = res.data;
+            editRef.value?.handleOpen({
+                id: data.id,
+                isbn: data.isbn,
+                platformList: data.platformList || [],
+                reasonList: data.reasonList || []
+            });
         });
     } else {
         title.value = '添加图书';
         currentId.value = null;
         editRef.value?.handleOpen({
             isbn: '',
-            platforms: [],
-            reason: ''
+            platformList: [],
+            reasonList: []
         });
     }
 };
 
 const handleSubmit = (model) => {
-    return new Promise((resolve, reject) => {
-        // Mock save
-        // Simulate async request
-        setTimeout(() => {
-            resolve();
-            // Note: Success message is handled by SimpleFormModal if submitHandler resolves
-        }, 500);
+    return request.post('/shop/complaintBook/setComplaintBook', {
+        id: currentId.value,
+        isbn: model.isbn,
+        platformList: model.platformList,
+        reasonList: model.reasonList
     });
 };
 

src/views/goods/highComplaintBooks/components/import-dialog.vue

@@ -36,7 +36,7 @@ import { ref } from 'vue';
 import { genFileId } from 'element-plus';
 import { EleMessage } from 'ele-admin-plus/es';
 import { downloadOssLink } from '@/utils/common';
-// import request from '@/utils/request'; 
+import request from '@/utils/request'; 
 import { ElMessage } from 'element-plus';
 
 const emit = defineEmits(['done']);
@@ -57,20 +57,15 @@ function handleExceed(files) {
     uploadRef.value?.handleStart(file);
 }
 
-//导入图书 Mock
+//导入图书
 async function importBooks(file) {
-    // const formData = new FormData();
-    // formData.append('file', file);
-    // const res = await request.post('/book/bookInfo/exportByFile', formData);
-    // if (res.data.code === 200) {
-    //     return res.data;
-    // }
-    // return Promise.reject(new Error(res.data.msg));
-    return new Promise((resolve) => {
-        setTimeout(() => {
-            resolve({ data: '导入成功' });
-        }, 1000);
-    });
+    const formData = new FormData();
+    formData.append('file', file);
+    const res = await request.post('/shop/complaintBook/importData', formData);
+    if (res.data.code === 0) { // Assuming code 0 is success based on previous responses, or adjust if 200
+        return res.data;
+    }
+    return Promise.reject(new Error(res.data.msg));
 }
 
 /** 提交 */

src/views/goods/highComplaintBooks/components/page-search.vue

@@ -12,26 +12,26 @@ const emit = defineEmits(['search']);
 
 const formItems = reactive([
     { type: 'input', label: 'ISBN', prop: 'isbn' },
-    { type: 'input', label: '书名', prop: 'bookName' },
+    { type: 'input', label: '图书名称', prop: 'bookName' },
     { 
         type: 'select', 
         label: '易投诉平台', 
-        prop: 'platform',
+        prop: 'platformList',
         options: [
-            { label: '拼多多', value: 'pdd' },
-            { label: '淘宝', value: 'taobao' },
-            { label: '孔网', value: 'kongwang' },
-            { label: '小程序', value: 'miniapp' }
+            { label: '拼多多', value: '拼多多' },
+            { label: '淘宝', value: '淘宝' },
+            { label: '孔网', value: '孔网' },
+            { label: '小程序', value: '小程序' }
         ]
     },
     { 
         type: 'select', 
         label: '投诉原因', 
-        prop: 'reason',
+        prop: 'reasonList',
         options: [
-            { label: '出版社投诉', value: 'publisher' },
-            { label: '价格投诉', value: 'price' },
-            { label: '质量投诉', value: 'quality' }
+            { label: '出版社投诉', value: '出版社投诉' },
+            { label: '价格投诉', value: '价格投诉' },
+            { label: '质量投诉', value: '质量投诉' }
         ]
     }
 ]);

src/views/goods/highComplaintBooks/index.vue

@@ -2,26 +2,15 @@
     <ele-page flex-table>
         <page-search @search="reload" />
 
-        <common-table ref="pageRef" :pageConfig="pageConfig" :columns="columns" :datasource="datasource">
+        <common-table ref="pageRef" :pageConfig="pageConfig" :columns="columns">
             <template #toolbar>
                 <div class="flex gap-2">
                     <el-button type="primary" @click="handleImport">导入</el-button>
-                    <el-button type="success">导出</el-button>
+                    <el-button type="success" @click="handleExport">导出</el-button>
                     <el-button type="primary" @click="handleAdd">添加图书</el-button>
                 </div>
             </template>
 
-            <!-- 易投诉平台列 -->
-            <template #platforms="{ row }">
-                <div class="flex flex-wrap gap-1">
-                    <el-tag v-for="platform in row.platforms" :key="platform" :type="getPlatformTagType(platform)"
-                        :color="getPlatformTagColor(platform)" :style="{ color: getPlatformTagTextColor(platform) }"
-                        size="small" effect="dark">
-                        {{ getPlatformLabel(platform) }}
-                    </el-tag>
-                </div>
-            </template>
-
             <!-- 操作列 -->
             <template #action="{ row }">
                 <el-button link type="primary" @click="handleEdit(row)">[编辑]</el-button>
@@ -35,128 +24,65 @@
 </template>
 
 <script setup>
-import { ref, reactive } from 'vue';
-import { ElMessageBox, ElMessage } from 'element-plus';
-import CommonTable from '@/components/CommonPage/CommonTable.vue';
-import PageSearch from './components/page-search.vue';
-import AddDialog from './components/add-dialog.vue';
-import ImportDialog from './components/import-dialog.vue';
-
-defineOptions({ name: 'HighComplaintBooks' });
-
-const pageRef = ref(null);
-const addDialogRef = ref(null);
-const importVisible = ref(false);
-
-const pageConfig = reactive({
-    fileName: '易投诉书单',
-    cacheKey: 'highComplaintBooksTable',
-    rowKey: 'id'
-});
-
-const columns = ref([
-    { label: 'ISBN', prop: 'isbn', width: 140, align: 'center' },
-    { label: '书名', prop: 'bookName', minWidth: 150 },
-    { label: '易投诉平台', prop: 'platforms', width: 220, slot: 'platforms' },
-    { label: '投诉原因', prop: 'reasonLabel', width: 120 },
-    { label: '操作员', prop: 'operator', width: 100, align: 'center' },
-    { label: '添加日期', prop: 'createTime', width: 160, align: 'center' },
-    { label: '操作', prop: 'action', width: 120, slot: 'action', fixed: 'right', align: 'center' }
-]);
+    import { ref, reactive } from 'vue';
+    import { ElMessageBox, ElMessage } from 'element-plus';
+    import CommonTable from '@/components/CommonPage/CommonTable.vue';
+    import PageSearch from './components/page-search.vue';
+    import AddDialog from './components/add-dialog.vue';
+    import ImportDialog from './components/import-dialog.vue';
+
+    defineOptions({ name: 'HighComplaintBooks' });
+
+    const pageRef = ref(null);
+    const addDialogRef = ref(null);
+    const importVisible = ref(false);
+
+    const pageConfig = reactive({
+        fileName: '易投诉书单',
+        cacheKey: 'highComplaintBooksTable',
+        rowKey: 'id',
+        pageUrl: '/shop/complaintBook/pagelist',
+        exportUrl: '/shop/complaintBook/export'
+    });
 
-// Helper functions for tags
-const getPlatformLabel = (val) => {
-    const map = {
-        'pdd': '拼多多',
-        'taobao': '淘宝',
-        'kongwang': '孔网',
-        'miniapp': '小程序'
+    const columns = ref([
+        { label: 'ISBN', prop: 'isbn', minWidth: 100, align: 'center' },
+        { label: '书名', prop: 'bookName', minWidth: 180 },
+        { label: '易投诉平台', prop: 'platformList', minWidth: 220, slot: 'platform' },
+        { label: '投诉原因', prop: 'reason', minWidth: 120 },
+        { label: '操作员', prop: 'createName', width: 100, align: 'center' },
+        { label: '添加日期', prop: 'createTime', width: 160, align: 'center' },
+        { label: '操作', prop: 'action', width: 150, slot: 'action', fixed: 'right', align: 'center' }
+    ]);
+
+    const reload = (where) => {
+        pageRef.value?.reload(where);
     };
-    return map[val] || val;
-};
-
-const getPlatformTagType = (val) => {
-    if (val === 'pdd') return 'danger';
-    if (val === 'miniapp') return 'success';
-    return '';
-};
 
-const getPlatformTagColor = (val) => {
-    if (val === 'taobao') return '#f90'; // Orange
-    if (val === 'kongwang') return '#8B4513'; // Brown
-    return '';
-};
-
-const getPlatformTagTextColor = (val) => {
-    if (val === 'taobao' || val === 'kongwang') return '#fff';
-    return '';
-};
-
-// Mock Datasource
-const datasource = ({ page, limit, where }) => {
-    return Promise.resolve({
-        code: 0,
-        msg: 'success',
-        count: 1,
-        data: [
-            {
-                id: 1,
-                isbn: '9787563215652',
-                bookName: '人世间',
-                platforms: ['pdd', 'taobao', 'kongwang', 'miniapp'],
-                reason: 'publisher',
-                reasonLabel: '出版社投诉',
-                operator: 'zzz',
-                createTime: '2022-05-15 15:00:00'
-            },
-            {
-                id: 2,
-                isbn: '9787563215652',
-                bookName: '人世间',
-                platforms: [],
-                reason: '',
-                reasonLabel: '',
-                operator: '',
-                createTime: ''
-            },
-            {
-                id: 3,
-                isbn: '9787563215652',
-                bookName: '人世间',
-                platforms: [],
-                reason: '',
-                reasonLabel: '',
-                operator: '',
-                createTime: ''
-            }
-        ]
-    });
-};
-
-const reload = (where) => {
-    pageRef.value?.reload(where);
-};
+    const handleAdd = () => {
+        addDialogRef.value?.handleOpen();
+    };
 
-const handleAdd = () => {
-    addDialogRef.value?.handleOpen();
-};
+    const handleEdit = (row) => {
+        addDialogRef.value?.handleOpen(row);
+    };
 
-const handleEdit = (row) => {
-    addDialogRef.value?.handleOpen(row);
-};
+    const handleDelete = (row) => {
+        ElMessageBox.confirm('确定要删除该条记录吗？', '提示', {
+            type: 'warning',
+            confirmButtonText: '确定',
+            cancelButtonText: '取消'
+        }).then(() => {
+            ElMessage.success('删除成功');
+            reload();
+        }).catch(() => { });
+    };
 
-const handleDelete = (row) => {
-    ElMessageBox.confirm('确定要删除该条记录吗？', '提示', {
-        type: 'warning',
-        confirmButtonText: '确定',
-        cancelButtonText: '取消'
-    }).then(() => {
-        ElMessage.success('删除成功');
-        reload();
-    }).catch(() => { });
-};
+    const handleImport = () => {
+        importVisible.value = true;
+    };
 
-const handleImport = () => {
-    importVisible.value = true;
-};
+    const handleExport = () => {
+        pageRef.value?.exportData();
+    };
 </script>