feat: bless card

src/views/spring/blessing/template/index.vue

@@ -10,12 +10,6 @@
           <el-form-item>
             <el-input v-model.trim="queryForm.keyword" clearable placeholder="请输入查询条件" />
           </el-form-item>
-          <el-form-item>
-            <el-select v-model="queryForm.fortuneLevel" clearable placeholder="请选择幸运等级" @change="queryData">
-              <el-option label="吉祥" value="1" />
-              <el-option label="大吉" value="2" />
-            </el-select>
-          </el-form-item>
           <el-form-item>
             <el-button icon="el-icon-search" type="primary" @click="queryData">查询</el-button>
           </el-form-item>
@@ -29,20 +23,27 @@
 
       <el-table-column align="center" label="模版" width="100">
         <template slot-scope="scope">
-          <el-tooltip class="item" :content="scope.row.title" effect="dark" placement="top">
+          <el-tooltip class="item" :content="scope.row.id" effect="dark" placement="top">
             <el-image fit="cover" :preview-src-list="[scope.row.imageUrl]" :src="scope.row.imageUrl" style="width: 50px; height: 50px" />
           </el-tooltip>
         </template>
       </el-table-column>
       <el-table-column align="center" label="标题" prop="name" show-overflow-tooltip />
+      <el-table-column align="center" label="使用次数" prop="useCount" show-overflow-tooltip />
       <el-table-column align="center" label="是否启用" show-overflow-tooltip>
         <template #default="{ row }">
-          {{ row.isEnabled ? '是' : '否' }}
+          <el-switch active-color="#13ce66" inactive-color="#ff4949" :value="row.isEnabled" @change="handleToggleEnable(row, $event)" />
         </template>
       </el-table-column>
       <el-table-column align="center" label="操作">
         <template slot-scope="scope">
           <el-button type="text" @click="handleEdit(scope.row)">编辑</el-button>
+          <el-button :disabled="!scope.row.isEnabled || isFirstEnabled(scope.row)" type="text" @click="handleMoveUp(scope.row)">
+            上移
+          </el-button>
+          <el-button :disabled="!scope.row.isEnabled || isLastEnabled(scope.row)" type="text" @click="handleMoveDown(scope.row)">
+            下移
+          </el-button>
           <el-button type="text" @click="handleDelete(scope.row)">删除</el-button>
         </template>
       </el-table-column>
@@ -61,7 +62,7 @@
 </template>
 
 <script>
-  import { doDelete, getList } from '@/api/spring/blessing/template'
+  import { doDelete, getList, toggleEnable, doMoveUp, doMoveDown } from '@/api/spring/blessing/template'
   import { formatTime } from '@/utils'
   import Edit from './components/AppManagementEdit'
 
@@ -86,6 +87,11 @@
       }
     },
     created() {
+      const { templateId } = this.$route.query || {}
+      if (templateId) {
+        this.queryForm.keyword = templateId
+        this.queryForm.pageNo = 1
+      }
       this.fetchData()
     },
 
@@ -145,6 +151,48 @@
           this.listLoading = false
         }, 300)
       },
+      async handleToggleEnable(row, val) {
+        const prev = row.isEnabled
+        row.isEnabled = val
+        try {
+          const { msg } = await toggleEnable(row.id, val)
+          if (msg) this.$baseMessage(msg, 'success')
+          this.fetchData()
+        } catch (e) {
+          row.isEnabled = prev
+          this.$baseMessage('更新失败', 'error')
+        }
+      },
+      async handleMoveUp(row) {
+        try {
+          const { msg } = await doMoveUp(row.id)
+          if (msg) this.$baseMessage(msg, 'success')
+          this.fetchData()
+        } catch (e) {
+          this.$baseMessage('操作失败', 'error')
+        }
+      },
+      async handleMoveDown(row) {
+        try {
+          const { msg } = await doMoveDown(row.id)
+          if (msg) this.$baseMessage(msg, 'success')
+          this.fetchData()
+        } catch (e) {
+          this.$baseMessage('操作失败', 'error')
+        }
+      },
+      isFirstEnabled(row) {
+        if (!this.list || this.list.length === 0) return false
+        const enabled = this.list.filter((item) => item.isEnabled)
+        if (enabled.length === 0) return false
+        return enabled[0].id === row.id
+      },
+      isLastEnabled(row) {
+        if (!this.list || this.list.length === 0) return false
+        const enabled = this.list.filter((item) => item.isEnabled)
+        if (enabled.length === 0) return false
+        return enabled[enabled.length - 1].id === row.id
+      },
     },
   }
 </script>