From 2b2c2195f9237625fd1b1a602a3cf204d7f4970e Mon Sep 17 00:00:00 2001
From: baishun <baishun@wodcloud.com>
Date: Sat, 6 May 2023 18:04:42 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BC=98=E5=8C=96=E6=94=B9=E8=BF=9B=E2=80=9C?=
 =?UTF-8?q?=E8=83=BD=E5=8A=9B=E6=8E=A8=E8=8D=90=E7=AE=A1=E7=90=86=E2=80=9D?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/ability-card.vue                |  4 ++++
 src/components/ability-list.vue                | 18 +++++++++++++++++-
 .../main/home-config/recommend/edit/index.vue  | 16 +++++++++++-----
 3 files changed, 32 insertions(+), 6 deletions(-)

diff --git a/src/components/ability-card.vue b/src/components/ability-card.vue
index a0bc312..766e557 100644
--- a/src/components/ability-card.vue
+++ b/src/components/ability-card.vue
@@ -130,6 +130,10 @@ const move = (type) => {
   };
   emit("move", temp);
 };
+
+defineExpose({
+  checked
+})
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/components/ability-list.vue b/src/components/ability-list.vue
index bd5f2d6..c7ad9a0 100644
--- a/src/components/ability-list.vue
+++ b/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>
diff --git a/src/page/main/home-config/recommend/edit/index.vue b/src/page/main/home-config/recommend/edit/index.vue
index e2a65ed..62e2471 100644
--- a/src/page/main/home-config/recommend/edit/index.vue
+++ b/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) => {
-- 
2.26.0