admin模块接入数据库

pages/mall/admin/product/specifications/index.uvue

@@ -5,16 +5,16 @@
 			<view class="search-row">
 				<view class="search-item">
 					<text class="search-label">规格搜索:</text>
-					<input class="search-input" placeholder="请输入规格名称" />
+					<input class="search-input" v-model="searchName" placeholder="请输入规格名称" @confirm="handleSearch" />
 				</view>
-				<button class="btn-query">查询</button>
+				<button class="btn-query" @click="handleSearch">查询</button>
 			</view>
 		</view>
 
 		<!-- 数据表格区域 -->
 		<view class="table-card">
 			<view class="table-toolbar">
-				<button class="btn-add" @click="showModal = true">添加商品规格</button>
+				<button class="btn-add" @click="openAddModal">添加商品规格</button>
 				<button class="btn-batch-del">批量删除</button>
 			</view>
 
@@ -44,9 +44,9 @@
 					<text class="td-cell flex-4">{{ item.specs }}</text>
 					<text class="td-cell flex-4">{{ item.attrs }}</text>
 					<view class="td-cell flex-2 row-center">
-						<text class="btn-link">编辑</text>
+						<text class="btn-link" @click="openEditModal(item)">编辑</text>
 						<view class="divider"></view>
-						<text class="btn-link delete" @click="deleteItem(index)">删除</text>
+						<text class="btn-link delete" @click="deleteItem(item.id)">删除</text>
 					</view>
 				</view>
 			</view>
@@ -91,57 +91,112 @@
 </template>
 
 <script setup lang="uts">
-import { ref, reactive } from 'vue'
+import { ref, reactive, onMounted } from 'vue'
+import { fetchSpecTemplates, saveSpecTemplate, deleteSpecTemplate, ProductSpecTemplate } from '@/services/admin/productSpecParamService.uts'
 
-interface AttrItem {
-	id: number;
-	name: string;
-	specs: string;
-	attrs: string;
+interface AttrItem extends ProductSpecTemplate {
 	selected: boolean;
 }
 
-const list = reactive<AttrItem[]>([
-	{ id: 104, name: '颜色', specs: '红色,蓝色,黑色,白色', attrs: '颜色属性', selected: false },
-	{ id: 105, name: '尺寸', specs: 'S,M,L,XL,XXL', attrs: '服装尺寸', selected: false },
-	{ id: 106, name: '材质', specs: '纯棉,涤纶,真丝', attrs: '面料材质', selected: false },
-	{ id: 107, name: '内存', specs: '8G,16G,32G', attrs: '硬件参数', selected: false },
-	{ id: 108, name: '存储', specs: '128G,256G,512G', attrs: '容量', selected: false }
-])
+const list = ref<AttrItem[]>([])
+const isLoading = ref(false)
+const searchName = ref('')
 
 const showModal = ref(false)
+const isEdit = ref(false)
+const editingId = ref<string | null>(null)
+
 const form = reactive({
 	name: '',
 	specs: '',
 	attrs: ''
 })
 
-function saveAttr() {
+onMounted(() => {
+	loadData()
+})
+
+async function loadData() {
+	isLoading.value = true
+	try {
+		const res = await fetchSpecTemplates(searchName.value)
+		list.value = res.map(item => ({
+			...item,
+			selected: false
+		} as AttrItem))
+	} catch (e) {
+		uni.showToast({ title: '加载失败', icon: 'none' })
+	} finally {
+		isLoading.value = false
+	}
+}
+
+function handleSearch() {
+	loadData()
+}
+
+function openAddModal() {
+	isEdit.value = false
+	editingId.value = null
+	form.name = ''
+	form.specs = ''
+	form.attrs = ''
+	showModal.value = true
+}
+
+function openEditModal(item : AttrItem) {
+	isEdit.value = true
+	editingId.value = item.id ?? null
+	form.name = item.name
+	form.specs = item.specs
+	form.attrs = item.attrs
+	showModal.value = true
+}
+
+async function saveAttr() {
 	if (!form.name) {
 		uni.showToast({ title: '请输入规格名称', icon: 'none' })
 		return
 	}
-	list.push({
-		id: Math.floor(Math.random() * 1000),
+	
+	isLoading.value = true
+	const tpl : ProductSpecTemplate = {
+		id: editingId.value ?? undefined,
 		name: form.name,
 		specs: form.specs,
 		attrs: form.attrs,
-		selected: false
-	})
-	showModal.value = false
-	form.name = ''
-	form.specs = ''
-	form.attrs = ''
-	uni.showToast({ title: '添加成功', icon: 'success' })
+		sort_order: 0,
+		is_active: true
+	}
+
+	try {
+		const success = await saveSpecTemplate(tpl)
+		if (success) {
+			uni.showToast({ title: isEdit.value ? '修改成功' : '添加成功', icon: 'success' })
+			showModal.value = false
+			loadData()
+		} else {
+			uni.showToast({ title: '保存失败', icon: 'none' })
+		}
+	} catch (e) {
+		uni.showToast({ title: '操作异常', icon: 'none' })
+	} finally {
+		isLoading.value = false
+	}
 }
 
-function deleteItem(index: number) {
+async function deleteItem(id : string | undefined) {
+	if (id == null) return
 	uni.showModal({
 		title: '提示',
 		content: '确定删除该规格吗？',
-		success: (res) => {
+		success: async (res) => {
 			if (res.confirm) {
-				list.splice(index, 1)
+				const success = await deleteSpecTemplate(id)
+				if (success) {
+					uni.showToast({ title: '删除成功' })
+					loadData()
+				}
 			}
 		}
 	})