优化改进“能力推荐管理”

src/components/ability-card.vue

@@ -130,6 +130,10 @@ const move = (type) => {
   };
   emit("move", temp);
 };
+
+defineExpose({
+  checked
+})
 </script>
 
 <style lang="scss" scoped>

src/components/ability-list.vue

@@ -6,6 +6,7 @@
     <template v-if="props.list.length > 0">
       <div v-for="(item, i) in props.list" :key="'card' + i" class="item">
         <ability-card
+          ref="itemRefs"
           :item="item"
           @change-selected-list="changeSelectedList"
           :flag="props.flag"
@@ -22,7 +23,9 @@
 </template>
 
 <script setup>
+import { onMounted, ref } from "vue";
 import abilityCard from "./ability-card.vue";
+const itemRefs = ref([]);
 const props = defineProps({
   list: {
     type: Array,
@@ -35,7 +38,7 @@ const props = defineProps({
   loading: {
     type: Boolean,
     default: false,
-  }
+  },
 });
 const emit = defineEmits(["changeSelectedList", "openBox", "deleteItem", "move"]);
 const changeSelectedList = (item, checked) => {
@@ -50,6 +53,19 @@ const deleteItem = (item) => {
 const move = (temp) => {
   emit("move", temp);
 };
+
+// const setRef = (el, index) => {
+//   itemRefs.value.push(el)
+// }
+
+onMounted(() => {
+  console.log(itemRefs);
+})
+
+defineExpose({
+  list: props.list,
+  itemRefs
+});
 </script>
 
 <style lang="scss" scoped>

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

@@ -102,13 +102,16 @@
             </div>
             <div>
               <span>已选择</span>
-              <span class="num">（{{ toBeAddedItemList.length }}/9）</span>
+              <span class="num"
+                >（{{ selectedItemList.length + toBeAddedItemList.length }}/9）</span
+              >
               <span>项</span>
               <span class="can_click_text" @click="clearSelection">清空</span>
             </div>
           </div>
           <div class="user_table bg-scroll">
             <ability-list
+              ref="abilityListRef"
               :list="list"
               :loading="abilityLoading"
               :flag="false"
@@ -146,6 +149,7 @@ import abilityList from "@/components/ability-list.vue";
 const router = useRouter();
 const route = useRoute();
 const typeFormRef = ref(null);
+const abilityListRef = ref(null);
 const state = reactive({
   formData: {
     business_type_id: "",
@@ -322,7 +326,9 @@ const changeCollation = (val) => {
 
 const clearSelection = () => {
   state.toBeAddedItemList = [];
-  state.list = [];
+  abilityListRef.value.itemRefs.forEach((item) => {
+    item.checked = false;
+  });
 };
 const searchAction = () => {
   changePage(1);
@@ -368,7 +374,8 @@ const submit = () => {
 
 const cancelSelectDialog = () => {
   state.selectDialog = false;
-  clearSelection();
+  state.toBeAddedItemList = [];
+  state.list = [];
 };
 
 const confirm = () => {
@@ -391,8 +398,7 @@ const confirm = () => {
   state.selectedItemList.push(..._newItemList);
   state.toBeAddedItemList.length = 0;
   moveAbleChanging();
-  clearSelection();
-  state.selectDialog = false;
+  cancelSelectDialog();
 };
 
 const submitFormData = (data) => {