重构能力推荐管理功能，修复之前的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>

src/page/main/home-config/recommend/edit/index.vue

@@ -11,14 +11,14 @@
           @changeType="changeType"></type-form>
         <div class="ability_select">
           <div class="title">
-            <span>已选择能力（{{ selectArrNew.length }}/9）</span>
+            <span>已选择能力（{{ selectedItemList.length }}/9）</span>
             <el-tooltip class="box-item" effect="light" content="最少需选择6个能力" placement="top">
               <bg-icon icon="#bg-ic-circle-warning" style="color: #7784a6"></bg-icon>
             </el-tooltip>
           </div>
           <div class="select_arr">
             <ability-list
-              :list="selectArr"
+              :list="selectedItemList"
               :flag="true"
               @openBox="openDialog"
               @deleteItem="deleteItem"
@@ -37,7 +37,12 @@
         </div>
       </div>
     </div>
-    <el-dialog class="select_dialog" title="选择能力" v-model="selectDialog" width="1220px">
+    <el-dialog
+      class="select_dialog"
+      title="选择能力"
+      v-model="selectDialog"
+      width="1220px"
+      :before-close="cancelSelectDialog">
       <div class="select_box">
         <div class="topFilter">
           <div class="right">
@@ -97,13 +102,17 @@
             </div>
             <div>
               <span>已选择</span>
-              <span class="num">（{{ selectArrNew.length }}/9）</span>
+              <span class="num">（{{ toBeAddedItemList.length }}/9）</span>
               <span>项</span>
               <span class="can_click_text" @click="clearSelection">清空</span>
             </div>
           </div>
           <div class="user_table bg-scroll">
-            <ability-list :list="list" @changeCheck="changeCheck"></ability-list>
+            <ability-list
+              :list="list"
+              :loading="abilityLoading"
+              :flag="false"
+              @change-selected-list="changeSelectedList"></ability-list>
           </div>
         </div>
       </div>
@@ -117,8 +126,8 @@
           :pageSizes="[15, 30, 50]">
         </bg-pagination>
         <div class="apaas_button">
-          <el-button type="default" @click="selectDialog = false">取 消</el-button>
-          <el-button type="primary" @click="conform">确 定</el-button>
+          <el-button type="default" @click="cancelSelectDialog">取 消</el-button>
+          <el-button type="primary" @click="confirm">确 定</el-button>
         </div>
       </template>
     </el-dialog>
@@ -143,7 +152,7 @@ const state = reactive({
     logo: [],
     state: 1,
   },
-  selectArr: ["", "", "", "", "", "", "", "", ""],
+  selectedItemList: [],
   selectDialog: false,
   dialogFilter: {
     openness: [],
@@ -176,7 +185,8 @@ const state = reactive({
   ],
   businessList: [],
   list: [],
-  selectArrNew: [],
+  abilityLoading: false,
+  toBeAddedItemList: [],
 });
 
 const getDetail = (id) => {
@@ -185,30 +195,25 @@ const getDetail = (id) => {
     .then((res) => {
       if (res.data.code == 200) {
         const data = res.data.data;
-        console.log(data);
         typeFormRef.value.setForm({
           business_type_id: data.business_type_id,
           logo: data.logo ? [{ url: data.logo }] : [],
         });
-        state.selectArr = [];
-        state.selectArrNew = [];
+        state.selectedItemList = [];
+        state.toBeAddedItemList = [];
         state.formData.state = data.state;
         state.formData.business_type_id = data.business_type_id;
-        state.selectArrNew = data.ability_list || [];
-        state.selectArrNew.forEach((e, i) => {
+        state.selectedItemList = data.ability_list || [];
+        state.selectedItemList.forEach((e, i) => {
           e.canDown = true;
           e.canUp = true;
           if (i == 0) {
             e.canUp = false;
           }
-          if (i == state.selectArrNew.length - 1) {
+          if (i == state.selectedItemList.length - 1) {
             e.canDown = false;
           }
         });
-        state.selectArr.push(...state.selectArrNew);
-        for (var i = 0; i < 9 - state.selectArrNew.length; i++) {
-          state.selectArr.push("");
-        }
       } else {
         ElMessage.error(res.data.data);
       }
@@ -230,36 +235,33 @@ const getOrgList = () => {
 
 const changeType = (val) => {
   state.formData.business_type_id = val;
-  state.selectArr = ["", "", "", "", "", "", "", "", ""];
-  state.selectArrNew = [];
+  state.selectedItemList = [];
+  state.toBeAddedItemList = [];
 };
 const getAbilityList = () => {
+  state.abilityLoading = true;
   let params = {
     ...state.dialogFilter,
     business_type: state.formData.business_type_id,
   };
   params.organization_id =
-    params.organization_id && params.organization_id.length > 0 ? params.organization_id.join(",") : "";
+    params.organization_id && params.organization_id.length > 0
+      ? params.organization_id.join(",")
+      : "";
   params.openness = params.openness && params.openness.length > 0 ? params.openness.join(",") : "";
+
   axios.get(`/apaas/system/v5/recommend/ability/list`, { params }).then((res) => {
     if (res.data.code == 200) {
+      let selecteItemIdList = state.selectedItemList.map((e) => e.id);
       state.list = res.data.data.ability_list || [];
-      state.selectArrNew = [];
-      state.total = res.data.data.ability_total;
-      nextTick(() => {
-        state.list.forEach((e) => {
-          e.checked = false;
-          state.selectArr.forEach((k) => {
-            if (k.id) {
-              if (e.id == k.id) {
-                e.checked = true;
-                state.selectArrNew.push(e);
-              }
+      state.list.forEach((item) => {
+        if (selecteItemIdList.indexOf(item.id) > -1) {
+          item.isSelected = true;
         }
       });
-        });
-      });
+      state.total = res.data.data.ability_total;
     }
+    state.abilityLoading = false;
   });
 };
 
@@ -269,58 +271,58 @@ const openDialog = () => {
 };
 
 const deleteItem = (item) => {
-  changeCheck(item, true);
+  let selecteItemIdList = state.selectedItemList.map((e) => e.id);
+  state.selectedItemList.splice(selecteItemIdList.indexOf(item.id), 1);
+
+  moveAbleChanging();
 };
 
 const move = (temp) => {
   let id = temp.item.id;
   let index = null;
-  state.selectArr.forEach((e, i) => {
+  state.selectedItemList.forEach((e, i) => {
     if (e.id == id) {
       index = i;
     }
   });
   if (temp.type == 1) {
-    state.selectArr[index] = state.selectArr[index + 1];
-    state.selectArr[index + 1] = temp.item;
+    state.selectedItemList[index] = state.selectedItemList[index + 1];
+    state.selectedItemList[index + 1] = temp.item;
   } else {
-    state.selectArr[index] = state.selectArr[index - 1];
-    state.selectArr[index - 1] = temp.item;
+    state.selectedItemList[index] = state.selectedItemList[index - 1];
+    state.selectedItemList[index - 1] = temp.item;
   }
-  state.selectArr.forEach((e, i) => {
+  state.selectedItemList.forEach((e, i) => {
     if (e != "") {
       e.canDown = true;
       e.canUp = true;
       if (i == 0) {
         e.canUp = false;
       }
-      if (i == state.selectArrNew.length - 1) {
+      if (i == state.selectedItemList.length - 1) {
         e.canDown = false;
       }
     }
   });
-  state.selectArrNew = state.selectArr.filter((e) => e )
 };
 const changePage = (val) => {
-  state.dialogFilter.page = 1;
+  state.dialogFilter.page = val;
   getAbilityList();
 };
 
 const changeSize = (val) => {
   state.dialogFilter.limit = val;
-  changePage(1);
+  changePage(val);
 };
 
 const changeCollation = (val) => {
   state.dialogFilter.collation = val;
-  changePage(1);
+  changePage(val);
 };
 
 const clearSelection = () => {
-  state.list.forEach((e) => {
-    e.checked = false;
-  });
-  state.selectArrNew = [];
+  state.toBeAddedItemList = [];
+  state.list = [];
 };
 const searchAction = () => {
   changePage(1);
@@ -337,59 +339,73 @@ const clearAction = () => {
   changePage(1);
 };
 
-const changeCheck = (item, deleteFlag) => {
-  let arr = state.selectArrNew.map((e) => e.id) || [];
-  if (arr.indexOf(item.id) > -1) {
-    state.selectArrNew.splice(arr.indexOf(item.id), 1);
+const changeSelectedList = (item, checked) => {
+  if (checked) {
+    state.toBeAddedItemList.push(item);
   } else {
-    state.selectArrNew.push(item);
+    let _toBeAddedItemIdList = state.toBeAddedItemList.map((e) => e.id);
+    state.toBeAddedItemList.splice(_toBeAddedItemIdList.indexOf(item.id), 1);
   }
-  state.selectArrNew.forEach((e, i) => {
+  moveAbleChanging();
+};
+
+const moveAbleChanging = () => {
+  state.selectedItemList.forEach((e, i) => {
     e.canDown = true;
     e.canUp = true;
     if (i == 0) {
       e.canUp = false;
     }
-    if (i == state.selectArrNew.length - 1) {
+    if (i == state.selectedItemList.length - 1) {
       e.canDown = false;
     }
   });
-  if (deleteFlag) {
-    conform();
-  }
 };
+
 const submit = () => {
   typeFormRef.value.submitForm();
 };
 
-const conform = () => {
-  if (state.selectArrNew.length > 9) {
+const cancelSelectDialog = () => {
+  state.selectDialog = false;
+  clearSelection();
+};
+
+const confirm = () => {
+  if (
+    state.toBeAddedItemList.length > 9 ||
+    state.selectedItemList.length + state.toBeAddedItemList.length > 9
+  ) {
     ElMessage.error("最多可选择9个能力");
     return;
   }
-  state.selectArr = JSON.parse(JSON.stringify(state.selectArrNew));
-  if (state.selectArr.length < 9) {
-    let arr = [];
-    for (var i = 0; i < 9 - state.selectArr.length; i++) {
-      arr.push("");
-    }
-    state.selectArr.push(...arr);
+  const _newItemList = [];
+  state.toBeAddedItemList.forEach((toBeAddedItem) => {
+    const hasItem = state.selectedItemList.some(
+      (selectedItem) => toBeAddedItem.id === selectedItem.id
+    );
+    if (!hasItem) {
+      _newItemList.push(toBeAddedItem);
     }
+  });
+  state.selectedItemList.push(..._newItemList);
+  state.toBeAddedItemList.length = 0;
+  moveAbleChanging();
+  clearSelection();
   state.selectDialog = false;
 };
 
 const submitFormData = (data) => {
-  if (state.selectArrNew.length < 6) {
+  if (state.selectedItemList.length < 6) {
     ElMessage.error("最少选择6个能力");
     return;
   }
   if (data) {
     Object.assign(state.formData, data);
-    console.log(state.formData);
     if (route.query.id) {
       // 编辑
       let abilitys = [];
-      state.selectArrNew.forEach((e) => {
+      state.selectedItemList.forEach((e) => {
         abilitys.push(e.ability_id);
       });
       let params = {
@@ -409,7 +425,7 @@ const submitFormData = (data) => {
       });
     } else {
       let abilitys = [];
-      state.selectArrNew.forEach((e) => {
+      state.selectedItemList.forEach((e) => {
         abilitys.push(e.ability_id);
       });
       let params = {
@@ -461,16 +477,16 @@ onBeforeMount(() => {
 
 const {
   formData,
-  selectArr,
+  selectedItemList,
   selectDialog,
   dialogFilter,
   typeList,
   total,
   orgList,
   collationArr,
-  selection,
   list,
-  selectArrNew,
+  abilityLoading,
+  toBeAddedItemList,
   businessList,
 } = toRefs(state);
 </script>