feat(goods/spec): 连接规格管理接口并调整表单字段

src/views/goods/spec/components/spec-edit-dialog.vue

@@ -1,66 +1,65 @@
 <template>
-    <SimpleFormModal ref="modalRef" :items="formItems" :baseUrl="baseUrl" :submitHandler="handleSubmit"
-        @success="handleSuccess" title="规格" width="520px" labelWidth="100px" />
+    <SimpleFormModal ref="modalRef" :items="formItems" :submitHandler="handleSubmit" @success="handleSuccess" title="规格"
+        width="520px" labelWidth="100px" />
 </template>
 
 <script setup>
-import { ref, computed } from 'vue';
-import SimpleFormModal from '@/components/CommonPage/SimpleFormModal.vue';
+    import { ref, computed } from 'vue';
+    import SimpleFormModal from '@/components/CommonPage/SimpleFormModal.vue';
+    import request from '@/utils/request';
 
-const emit = defineEmits(['success']);
-const modalRef = ref(null);
+    const emit = defineEmits(['success']);
+    const modalRef = ref(null);
 
-const baseUrl = {
-    add: '/goods/spec/add',
-    update: '/goods/spec/update'
-};
-
-const formItems = computed(() => [
-    {
-        label: '规格名称',
-        prop: 'name',
-        type: 'input',
-        required: true,
-        attrs: {
-            placeholder: '请输入规格名称'
-        }
-    },
-    {
-        label: '规格值',
-        prop: 'value',
-        type: 'input',
-        required: true,
-        attrs: {
-            placeholder: '请输入规格值'
+    const formItems = computed(() => [
+        {
+            label: '规格名称',
+            prop: 'conditionName',
+            type: 'input',
+            required: true,
+            attrs: {
+                placeholder: '请输入规格名称'
+            }
+        },
+        {
+            label: '规格值',
+            prop: 'conditionValue',
+            type: 'input',
+            required: true,
+            attrs: {
+                placeholder: '请输入规格值'
+            }
+        },
+        {
+            label: '是否启用',
+            prop: 'status',
+            type: 'select',
+            options: [
+                { label: '关闭', value: '0' },
+                { label: '启用', value: '1' },
+            ]
         }
-    },
-    {
-        label: '是否启用',
-        prop: 'status',
-        type: 'switch',
-        defaultValue: true
-    }
-]);
+    ]);
 
-const handleOpen = (data) => {
-    modalRef.value.handleOpen(data);
-};
+    const handleOpen = (data) => {
+        modalRef.value.handleOpen(data);
+    };
 
-const handleSuccess = (data) => {
-    emit('success', data);
-};
+    const handleSuccess = (data) => {
+        emit('success', data);
+    };
 
-// Mock submit handler to simulate API request
-const handleSubmit = (data, type) => {
-    return new Promise((resolve) => {
-        setTimeout(() => {
-            console.log(`Mock ${type} success:`, data);
-            resolve();
-        }, 500);
-    });
-};
+    const handleSubmit = (data) => {
+        const payload = {
+            ...data,
+            id: data.id || 0,
+            status: String(data.status)
+        };
 
-defineExpose({
-    handleOpen
-});
+        return request.post('/shop/shopbook/updateConditionType', payload);
+    };
+
+    defineExpose({
+        handleOpen
+    });
 </script>

src/views/goods/spec/index.vue

@@ -1,11 +1,6 @@
 <template>
     <ele-page flex-table>
-        <common-table ref="tableRef" :pageConfig="pageConfig" :columns="columns" :tools="false"
-            :datasource="mockDatasource">
-            <template #toolbar>
-                <el-button type="primary" @click="handleAdd">新建规格</el-button>
-            </template>
-
+        <common-table ref="tableRef" :columns="columns" :tools="false" :datasource="datasource" :pagination="false">
             <!-- 序号 -->
             <template #index="{ $index }">
                 {{ $index + 1 }}
@@ -18,8 +13,7 @@
 
             <!-- 是否启用 -->
             <template #status="{ row }">
-                <el-switch v-model="row.status" :active-value="1" :inactive-value="0"
-                    @change="handleStatusChange(row)" />
+                <el-switch v-model="row.status" active-value="1" inactive-value="0" @change="handleStatusChange(row)" />
             </template>
         </common-table>
 
@@ -28,80 +22,66 @@
 </template>
 
 <script setup>
-import { ref, reactive } from 'vue';
-import CommonTable from '@/components/CommonPage/CommonTable.vue';
-import SpecEditDialog from './components/spec-edit-dialog.vue';
-import { ElMessage } from 'element-plus';
-
-defineOptions({ name: 'GoodsSpec' });
-
-const tableRef = ref(null);
-const editDialogRef = ref(null);
-
-const pageConfig = reactive({
-    pageUrl: '', // Local mock data
-    fileName: '规格列表',
-    cacheKey: 'goods-spec-list',
-    params: {}
-});
-
-const columns = ref([
-    { label: '序号', type: 'index', width: 100, align: 'center' },
-    { label: '规格名称', prop: 'name', align: 'center' },
-    { label: '规格值', prop: 'value', align: 'center' },
-    { label: '操作', prop: 'action', slot: 'action', align: 'center' },
-    { label: '是否启用', prop: 'status', slot: 'status', align: 'center' }
-]);
-
-// Mock Data
-const mockList = ref([
-    { id: 1, name: '一般', value: '1', status: 1 },
-    { id: 2, name: '良好', value: '1.2', status: 1 },
-    { id: 3, name: '次品', value: '0.7', status: 1 },
-    { id: 4, name: '全新', value: '1.2', status: 1 }
-]);
-
-const mockDatasource = ({ page, limit }) => {
-    return new Promise((resolve) => {
-        setTimeout(() => {
-            resolve({
-                code: 0,
-                msg: 'success',
-                count: mockList.value.length,
-                data: mockList.value
-            });
-        }, 300);
+    import { ref, reactive } from 'vue';
+    import CommonTable from '@/components/CommonPage/CommonTable.vue';
+    import SpecEditDialog from './components/spec-edit-dialog.vue';
+    import { ElMessage } from 'element-plus';
+    import request from '@/utils/request';
+
+    defineOptions({ name: 'GoodsSpec' });
+
+    const tableRef = ref(null);
+    const editDialogRef = ref(null);
+
+    const pageConfig = reactive({
+        pageUrl: '',
+        fileName: '规格列表',
+        cacheKey: 'goods-spec-list',
+        params: {}
     });
-};
-
-const reload = () => {
-    tableRef.value?.reload();
-};
-
-const handleAdd = () => {
-    editDialogRef.value?.handleOpen();
-};
-
-const handleEdit = (row) => {
-    editDialogRef.value?.handleOpen(row);
-};
-
-const handleSuccess = (data) => {
-    if (data.id) {
-        const index = mockList.value.findIndex(item => item.id === data.id);
-        if (index !== -1) {
-            mockList.value[index] = { ...mockList.value[index], ...data };
-        }
-    } else {
-        data.id = Date.now(); // Generate unique ID
-        mockList.value.push(data);
-    }
-    reload();
-};
 
-const handleStatusChange = (row) => {
-    ElMessage.success(`${row.name} ${row.status === 1 ? '已启用' : '已禁用'}`);
-};
+    const datasource = ({ page, limit, where, orders }) => {
+        return request.get('/shop/shopbook/getConditionTypeList').then(res => {
+            return res.data?.data || [];
+        });
+    };
+
+    const columns = ref([
+        { label: '序号', type: 'index', width: 100, align: 'center' },
+        { label: '规格名称', prop: 'conditionName', align: 'center' },
+        { label: '规格值', prop: 'conditionValue', align: 'center' },
+        { label: '操作', prop: 'action', slot: 'action', align: 'center' },
+        { label: '是否启用', prop: 'status', slot: 'status', align: 'center' }
+    ]);
+
+    const reload = () => {
+        tableRef.value?.reload();
+    };
+
+    const handleAdd = () => {
+        editDialogRef.value?.handleOpen();
+    };
+
+    const handleEdit = (row) => {
+        editDialogRef.value?.handleOpen(row);
+    };
+
+    const handleSuccess = () => {
+        reload();
+    };
+
+    const handleStatusChange = (row) => {
+        const payload = {
+            ...row,
+            status: String(row.status)
+        };
+        request.post('/shop/shopbook/updateConditionType', payload).then(() => {
+            ElMessage.success(`${row.conditionName} ${row.status === '1' ? '已启用' : '已禁用'}`);
+        }).catch(() => {
+            // Revert status on error
+            row.status = row.status === '1' ? '0' : '1';
+        });
+    };
 </script>
 
 <style scoped></style>