feat(custom): update

src/views/commodity/hot_list/index.vue

@@ -1,13 +1,48 @@
 <!-- eslint-disable vue/no-v-html -->
 <template>
   <CommonPage show-footer :title="$route.title">
+    <n-grid class="mb-10" x-gap="12">
+      <n-gi span="12" mt-10 flex items-center>
+        <span w-100>筛选条件:</span>
+        <n-input-group>
+          <n-select
+            v-model:value="queryParams.selectKey"
+            :style="{ width: '20%' }"
+            :options="selectOptions"
+            placeholder="请选择"
+          />
+          <n-input v-model:value="queryParams.word" :style="{ width: '30%' }" />
+        </n-input-group>
+      </n-gi>
+      <n-gi span="24" mt-10 flex items-center>
+        <n-button type="primary" @click="getList">查询</n-button>
+        <n-button ml-10 @click="clear">重置</n-button>
+      </n-gi>
+      <n-gi span="24" mt-10 flex items-center>
+        <n-button strong secondary type="primary" @click="changeGoodsType(0)">
+          设为普通商品
+        </n-button>
+        <n-button strong secondary ml-10 type="warning" @click="changeGoodsType(1)">
+          设为活动商品
+        </n-button>
+        <n-button strong secondary ml-10 type="info" @click="changeGoodsType(2)">
+          设为兑换商品
+        </n-button>
+        <n-button strong secondary ml-10 type="error" @click="changeGoodsType(3)">
+          设为摇球机活动商品
+        </n-button>
+      </n-gi>
+    </n-grid>
+
     <n-data-table
       :loading="loading"
       :columns="columns"
       :data="data"
       :pagination="pagination"
       :bordered="false"
+      :row-key="(row) => row.gid"
       remote
+      @update:checked-row-keys="handleCheck"
     />
     <!-- 拒绝 -->
     <n-modal v-model:show="isNoteModel">
@@ -152,7 +187,7 @@
 
 <script setup>
 import api from './api'
-import { NButton, NImage, NSpace, NEllipsis } from 'naive-ui'
+import { NButton, NImage, NSpace, NEllipsis, NTag } from 'naive-ui'
 import { h, withDirectives, resolveDirective } from 'vue'
 
 const vPerms = resolveDirective('perms')
@@ -171,6 +206,33 @@ const notesVal = ref('')
 
 const formRef = ref(null)
 
+const selectOptions = ref([
+  {
+    label: '商品名称',
+    value: 0,
+  },
+])
+
+const queryParams = ref({
+  selectKey: 0,
+  word: '',
+  checkedRowKeysRef: [],
+})
+
+const handleCheck = (row) => {
+  queryParams.value.checkedRowKeysRef = row
+}
+
+const changeGoodsType = async (type) => {
+  if (queryParams.value.checkedRowKeysRef.length === 0) return $message.info('没有选中商品')
+  await api.updateType({
+    type: type,
+    gid: queryParams.value.checkedRowKeysRef,
+  })
+  getList()
+  queryParams.value.checkedRowKeysRef = []
+}
+
 const rules = {
   pulse: {
     required: true,
@@ -202,6 +264,9 @@ const nowRow = ref({})
 const nowKey = ref(null)
 
 const columns = ref([
+  {
+    type: 'selection',
+  },
   {
     title: '商品名称',
     slot: 'name',
@@ -243,6 +308,40 @@ const columns = ref([
       )
     },
   },
+  {
+    title: '商品类型',
+    slot: 'type',
+    align: 'center',
+    render(row) {
+      const obj = {
+        0: {
+          type: 'success',
+          text: '普通商品',
+        },
+        1: {
+          type: 'warning',
+          text: '活动商品',
+        },
+        2: {
+          type: 'info',
+          text: '兑换商品',
+        },
+        3: {
+          type: 'error',
+          text: '摇球机活动商品',
+        },
+      }
+      return h(
+        NTag,
+        {
+          type: obj[row.type].type,
+        },
+        {
+          default: () => obj[row.type].text,
+        }
+      )
+    },
+  },
   {
     title: '商品价格(元)',
     key: 'number',
@@ -411,6 +510,7 @@ const getList = async () => {
     const res = await api.getHotlist({
       pageNum: pagination.value.page,
       pageSize: pagination.value.pageSize,
+      name: queryParams.value.word,
     })
     data.value = res.data.data || []
     pagination.value.itemCount = res.data.total