admin模块接入数据库

pages/mall/admin/product/parameters/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="openDrawer()">添加商品参数</button>
+<button class="btn-add" @click="openDrawer(null)">添加商品参数</button>
 </view>
 
 <view class="table-header">
@@ -37,7 +37,7 @@
 <view class="td-cell flex-2 row-center">
 <text class="btn-link" @click="openDrawer(item)">编辑</text>
 <view class="divider"></view>
-<text class="btn-link delete" @click="deleteItem(index)">删除</text>
+<text class="btn-link delete" @click="deleteItem(item)">删除</text>
 </view>
 </view>
 </view>
@@ -101,107 +101,132 @@
 </template>
 
 <script setup lang="uts">
-import { ref, reactive } from 'vue'
+import { ref, reactive, onMounted } from 'vue'
+import { fetchParamTemplates, saveParamTemplate, deleteParamTemplate, ProductParamKV, ProductParamTemplate } from '@/services/admin/productSpecParamService.uts'
 
-interface ParamKV {
-label: string;
-value: string;
-}
+type ParamItem = ProductParamTemplate
 
-interface ParamItem {
-id: number;
-name: string;
-sort: number;
-params: ParamKV[];
-}
-
-const list = reactive<ParamItem[]>([
-{ id: 1, name: '手机数码', sort: 1, params: [{label: '品牌', value: '华为'}, {label: '型号', value: 'Mate 60'}] as ParamKV[] },
-{ id: 2, name: '家用电器', sort: 2, params: [{label: '能效等级', value: '一级'}, {label: '产地', value: '中国'}] as ParamKV[] }
-])
+const list = ref<ParamItem[]>([])
+const isLoading = ref(false)
+const searchName = ref('')
 
 const showDrawerMask = ref(false)
 const showDrawer = ref(false)
 const isEdit = ref(false)
-const editIndex = ref(-1)
+const editingId = ref<string | null>(null)
 
 const form = reactive({
-name: '',
-sort: 0,
-params: [] as ParamKV[]
+  name: '',
+  sort: 0,
+  params: [] as ProductParamKV[]
 })
 
-function formatParams(params: ParamKV[]): string {
-return params.map(p => p.label + ':' + p.value).join(' | ')
+onMounted(() => {
+  loadData()
+})
+
+async function loadData() {
+  isLoading.value = true
+  try {
+    const res = await fetchParamTemplates(searchName.value)
+    list.value = res
+  } catch (e) {
+    uni.showToast({ title: '加载失败', icon: 'none' })
+  } finally {
+    isLoading.value = false
+  }
+}
+
+function handleSearch() {
+  loadData()
+}
+
+function formatParams(params: ProductParamKV[]): string {
+  return params.map(p => p.label + ':' + p.value).join(' | ')
 }
 
 function openDrawer(item: ParamItem | null = null) {
-if (item != null) {
-isEdit.value = true
-form.name = item.name
-form.sort = item.sort
-form.params = JSON.parse<ParamKV[]>(JSON.stringify(item.params)) as ParamKV[]
-editIndex.value = list.indexOf(item)
-} else {
-isEdit.value = false
-form.name = ''
-form.sort = 0
-form.params = [{ label: '', value: '' }] as ParamKV[]
-}
+  if (item != null) {
+    isEdit.value = true
+    editingId.value = item.id ?? null
+    form.name = item.name
+    form.sort = item.sort_order
+    form.params = JSON.parse<ProductParamKV[]>(JSON.stringify(item.params)) as ProductParamKV[]
+  } else {
+    isEdit.value = false
+    editingId.value = null
+    form.name = ''
+    form.sort = 0
+    form.params = [{ label: '', value: '' }] as ProductParamKV[]
+  }
 
-showDrawerMask.value = true
-setTimeout(() => {
-showDrawer.value = true
-}, 50)
+  showDrawerMask.value = true
+  setTimeout(() => {
+    showDrawer.value = true
+  }, 50)
 }
 
 function closeDrawer() {
-showDrawer.value = false
-setTimeout(() => {
-showDrawerMask.value = false
-}, 300)
+  showDrawer.value = false
+  setTimeout(() => {
+    showDrawerMask.value = false
+  }, 300)
 }
 
 function addParamRow() {
-form.params.push({ label: '', value: '' } as ParamKV)
+  form.params.push({ label: '', value: '' } as ProductParamKV)
 }
 
 function removeParamRow(index: number) {
-form.params.splice(index, 1)
+  form.params.splice(index, 1)
 }
 
-function saveParam() {
-if (!form.name) {
-uni.showToast({ title: '请输入模板名称', icon: 'none' })
-return
-}
-if (isEdit.value) {
-const item = list[editIndex.value]
-item.name = form.name
-item.sort = form.sort
-item.params = JSON.parse<ParamKV[]>(JSON.stringify(form.params)) as ParamKV[]
-} else {
-list.unshift({
-id: Date.now() % 1000,
-name: form.name,
-sort: form.sort,
-params: JSON.parse<ParamKV[]>(JSON.stringify(form.params)) as ParamKV[]
-} as ParamItem)
-}
-closeDrawer()
-uni.showToast({ title: '保存成功', icon: 'success' })
+async function saveParam() {
+  if (!form.name) {
+    uni.showToast({ title: '请输入模板名称', icon: 'none' })
+    return
+  }
+
+  isLoading.value = true
+  const tpl: ProductParamTemplate = {
+    id: editingId.value ?? undefined,
+    name: form.name,
+    sort_order: form.sort,
+    params: JSON.parse<ProductParamKV[]>(JSON.stringify(form.params)) as ProductParamKV[],
+    is_active: true
+  }
+
+  try {
+    const success = await saveParamTemplate(tpl)
+    if (success) {
+      uni.showToast({ title: '保存成功', icon: 'success' })
+      closeDrawer()
+      loadData()
+    } else {
+      uni.showToast({ title: '保存失败', icon: 'none' })
+    }
+  } catch (e) {
+    uni.showToast({ title: '操作异常', icon: 'none' })
+  } finally {
+    isLoading.value = false
+  }
 }
 
-function deleteItem(index: number) {
-uni.showModal({
-title: '提示',
-content: '确定删除该参数模板吗？',
-success: (res) => {
-if (res.confirm) {
-list.splice(index, 1)
-}
-}
-})
+function deleteItem(item: ParamItem) {
+  if (item.id == null) return
+  uni.showModal({
+    title: '提示',
+    content: '确定删除该参数模板吗？',
+    success: async (res) => {
+      if (res.confirm) {
+        const success = await deleteParamTemplate(item.id!)
+        if (success) {
+          uni.showToast({ title: '删除成功', icon: 'success' })
+          loadData()
+        }
+      }
+    }
+  })
 }
 </script>