上传

src/views/MiniMall/MallSet/Comp/BrandSet.vue

@@ -15,22 +15,31 @@
         <el-button type="primary" @click="openForm('create', null)">新增</el-button>
       </el-form-item>
     </el-form>
-    <el-table v-loading="loading" :data="tableList">
-      <el-table-column prop="brandName" label="品牌名称" />
-      <el-table-column prop="orderNum" label="排序" width="100px" />
-      <el-table-column prop="remark" label="备注" />
-      <el-table-column label="创建时间" prop="createTime" width="180px" />
-      <el-table-column label="创建人" prop="createUser" width="150px" />
+    <el-table v-loading="loading" :data="list">
+      <el-table-column prop="name" label="品牌名称" />
+      <el-table-column prop="sort" label="排序" width="100px" />
+      <el-table-column prop="description" label="备注" />
+      <el-table-column label="开启状态" prop="status">
+        <template #default="scope">
+          <dict-tag :type="DICT_TYPE.COMMON_STATUS" :value="scope.row.status" />
+        </template>
+      </el-table-column>
+      <el-table-column
+        label="创建时间"
+        prop="createTime"
+        width="180px"
+        :formatter="dateFormatter"
+      />
       <el-table-column label="操作">
         <template #default="scope">
-          <el-button type="primary" text @click="openForm('update', scope.row)">修改</el-button>
-          <el-button type="danger" text @click="handleDelete(scope.row)">删除</el-button>
+          <el-button type="primary" text @click="openForm('update', scope.row.id)">修改</el-button>
+          <el-button type="danger" text @click="handleDelete(scope.row.id)">删除</el-button>
         </template>
       </el-table-column>
     </el-table>
     <Pagination
       v-model:limit="searchForm.pageSize"
-      v-model:page="searchForm.pageNum"
+      v-model:page="searchForm.pageNo"
       :total="total"
       @pagination="handleQuery"
     />
@@ -40,51 +49,56 @@
 </template>
 
 <script setup name="BrandSet">
+import { DICT_TYPE } from '@/utils/dict'
+import { dateFormatter } from '@/utils/formatTime'
+import * as ProductBrandApi from '@/api/mall/product/brand'
 import DialogBrand from './DialogBrand.vue'
 
 const searchForm = ref({
-  pageNum: 1,
+  name: undefined,
+  pageNo: 1,
   pageSize: 20
 })
 
 const total = ref(0)
 const brandDialog = ref()
-const tableList = ref([])
+const list = ref([])
 const loading = ref(false)
 
 function handleQuery() {
-  searchForm.value.pageNum = 1
+  searchForm.value.pageNo = 1
   getList()
 }
 function resetQuery() {
   searchForm.value = {
     name: '',
     pageSize: 20,
-    pageNum: 1
+    pageNo: 1
   }
   getList()
 }
 
-function getList() {
-  tableList.value = [
-    {
-      brandId: 1,
-      brandName: '测试'
-    }
-  ]
-}
-
-function openForm(type, info) {
-  brandDialog.value.open(type, info)
-}
-
-async function handleDelete(row) {
+async function getList() {
+  loading.value = true
+  try {
+    const data = await ProductBrandApi.getBrandParam(searchForm.value)
+    list.value = data.list
+    total.value = data.total
+  } finally {
+    loading.value = false
+  }
+}
+
+function openForm(type, id) {
+  brandDialog.value.open(type, id)
+}
+
+async function handleDelete(id) {
   try {
-    console.log(row)
     // 删除的二次确认
     await message.delConfirm()
     // 发起删除
-    // await UserApi.deleteUser(row.id)
+    await ProductBrandApi.deleteBrand(id)
     message.success(t('common.delSuccess'))
     // 刷新列表
     await getList()