重构能力推荐管理功能，修复之前的bug

src/components/ability-card.vue

@@ -2,25 +2,46 @@
   <div class="item_card" :style="{ height: props.flag ? '242px' : '206px' }">
     <div class="action_box" v-if="props.flag">
       <div class="can_click_text" @click="deleteItem(props.item)">删除</div>
-      <div class="can_click_text" @click="move(1)" :class="props.item.canDown ? '' : 'disabled'">下移</div>
-      <div class="can_click_text" @click="move(2)" :class="props.item.canUp ? '' : 'disabled'">上移</div>
+      <div class="can_click_text" @click="move(1)" :class="props.item.canDown ? '' : 'disabled'">
+        下移
+      </div>
+      <div class="can_click_text" @click="move(2)" :class="props.item.canUp ? '' : 'disabled'">
+        上移
+      </div>
     </div>
     <div class="top_info" :style="{ 'padding-left': !props.flag ? '8px' : '24px' }">
+      <template v-if="props.item.isSelected">
         <el-checkbox
           v-if="!props.flag"
           class="select_box"
-        v-model="props.item.checked"
-        @change="change_check"></el-checkbox>
+          v-model="props.item.isSelected"
+          :disabled="props.item.isSelected"
+          @change="changeSelectedList"></el-checkbox>
+      </template>
+      <el-checkbox
+        v-else-if="!props.flag"
+        class="select_box"
+        v-model="checked"
+        @change="changeSelectedList"></el-checkbox>
       <div class="logo">
-        <img v-if="props.item.ability_logo" :src="JSON.parse(props.item.ability_logo)[0].url" alt="" />
+        <img
+          v-if="props.item.ability_logo !== '[]'"
+          :src="JSON.parse(props.item.ability_logo)[0].url"
+          alt="" />
         <img v-else src="../assets/imgs/img_cover_ability.png" alt="" />
       </div>
       <div class="info">
         <div class="name">
-          <el-tooltip class="box-item" effect="light" :content="props.item.ability_name" placement="top">
+          <el-tooltip
+            class="box-item"
+            effect="light"
+            :content="props.item.ability_name"
+            placement="top">
             <span class="ability_name">{{ props.item.ability_name }}</span>
           </el-tooltip>
-          <span class="icon_box openness" :class="openClassObj[props.item.openness_id]">{{ props.item.openness }}</span>
+          <span class="icon_box openness" :class="openClassObj[props.item.openness_id]">{{
+            props.item.openness
+          }}</span>
           <span class="icon_box mock" v-if="props.item.include_mock_service">mock</span>
         </div>
         <div class="count">
@@ -33,7 +54,8 @@
           <div class="line"></div>
           <div class="box2">
             阅读{{
-              props.item.browse_count == 0 || (props.item.browse_count && props.item.browse_count < 10000)
+              props.item.browse_count == 0 ||
+              (props.item.browse_count && props.item.browse_count < 10000)
                 ? props.item.browse_count
                 : props.item.browse_count < 10000000
                 ? Math.floor(props.item.browse_count / 10000) + "万+"
@@ -53,7 +75,9 @@
         </div>
       </div>
     </div>
-    <div class="bottom_info" :style="{ height: props.flag ? 'calc(100% - 128px)' : 'calc(100% - 92px)' }">
+    <div
+      class="bottom_info"
+      :style="{ height: props.flag ? 'calc(100% - 128px)' : 'calc(100% - 92px)' }">
       <div class="desc" :title="props.item.synopsis">
         {{ props.item.synopsis }}
       </div>
@@ -68,8 +92,9 @@
 </template>
 
 <script setup>
+import { ref } from "vue";
 import { useRouter } from "vue-router";
-
+const checked = ref(false);
 const router = useRouter();
 const props = defineProps({
   item: {
@@ -81,7 +106,7 @@ const props = defineProps({
     default: false,
   },
 });
-const emit = defineEmits(["change_check", "deleteItem", "move"]);
+const emit = defineEmits(["changeSelectedList", "deleteItem", "move"]);
 const openClassObj = {
   "9de06ba6-6ee2-4449-91d9-31a1c7554311": "open",
   "4e8b4c37-e565-4195-8303-3b1ccd48dd13": "share",
@@ -89,9 +114,8 @@ const openClassObj = {
   "4e8b4c37-e565-4195-8303-3b1ccd48dd16": "sensitive",
 };
 
-const change_check = () => {
-  console.log(props.item);
-  emit("change_check", props.item);
+const changeSelectedList = () => {
+  emit("changeSelectedList", props.item, checked.value);
 };
 const deleteItem = (item) => {
   emit("deleteItem", item);

src/components/ability-list.vue

 <template>
+  <div v-if="!props.flag && props.loading === true">
+    <div class="empty-tips">数据加载中...</div>
+  </div>
   <div class="card_list">
-    <div v-for="(e, i) in props.list" :key="'card' + i" class="item">
+    <template v-if="props.list.length > 0">
+      <div v-for="(item, i) in props.list" :key="'card' + i" class="item">
         <ability-card
-        v-if="e.id"
-        :item="e"
-        @change_check="changeCheck"
+          :item="item"
+          @change-selected-list="changeSelectedList"
           :flag="props.flag"
           @deleteItem="deleteItem"
           @move="move" />
-      <div v-else class="empty_card" @click="open">
+      </div>
+    </template>
+    <div class="item" v-if="props.flag">
+      <div v-if="props.list.length < 9" class="empty_card" @click="open">
         <span>+</span>
       </div>
     </div>
@@ -26,13 +32,16 @@ const props = defineProps({
     type: Boolean,
     default: false,
   },
+  loading: {
+    type: Boolean,
+    default: false,
+  }
 });
-const emit = defineEmits(["changeCheck", "openBox", "deleteItem", "move"]);
-const changeCheck = (item) => {
-  emit("changeCheck", item);
+const emit = defineEmits(["changeSelectedList", "openBox", "deleteItem", "move"]);
+const changeSelectedList = (item, checked) => {
+  emit("changeSelectedList", item, checked);
 };
 const open = () => {
-  console.log(3333);
   emit("openBox");
 };
 const deleteItem = (item) => {
@@ -67,5 +76,9 @@ const move = (temp) => {
     font-size: 48px;
     font-weight: 100;
   }
+
+  .empty-tips {
+    text-align: center;
+  }
 }
 </style>