feat: 账号管理 - 关联账号"清空"逻辑

project/src/components/manage/roleManage.vue

@@ -105,13 +105,13 @@
         <div class="itemBox">
           <div class="name">关联ADQ账号:</div>
           <div class="ipt">
-            <adqAccountOptions style="margin: 0;" width="330px" :accountListResult="adq_account" @change="onChangeAdqAccount" />
+            <adqAccountOptions style="margin: 0;" width="330px" clearable :accountListResult="adq_account" @change="onChangeAdqAccount" />
           </div>
         </div>
         <div class="itemBox">
           <div class="name">关联MP账号:</div>
           <div class="ipt">
-            <mpAccountOptions style="margin: 0;" width="330px" :accountListResult="mp_account" @change="onChangeMpAccount" />
+            <mpAccountOptions style="margin: 0;" width="330px" clearable :accountListResult="mp_account" @change="onChangeMpAccount" />
           </div>
         </div>
         <div class="itemBox">

project/src/components/manage/roleManageComp/adqAccountOptions.vue

@@ -4,7 +4,11 @@
       <div
         slot="reference"
         :style="width ? 'width:' + width : ''"
-        :class="['common-screen-self-box', 'common-input-select', accountListResult.length ? 'common-input-select-hover' : '']"
+        :class="[
+          'common-screen-self-box',
+          'common-input-select',
+          accountListResult.length && clearable ? 'common-input-select-hover' : ''
+        ]"
         @click="dialogVisible = true"
       >
         <div :class="['common-screen-self-con', accountListResult.length ? '' : 'common-screen-self-placeholder']">
@@ -12,6 +16,7 @@
             <span v-if="accountListResult.length">{{ accountListResultName }}</span>
             <span v-else>请选择</span>
           </div>
+          <i class="el-icon-circle-close other-icon" @click.stop="onClickClearBtn"></i>
         </div>
         <div class="common-screen-self-icon"><i class="el-icon-arrow-down" /></div>
       </div>
@@ -92,6 +97,10 @@ export default {
       type: String,
       default: () => ''
     },
+    clearable: {
+      type: Boolean,
+      default: () => false
+    },
     accountListResult: { // 最终确认选择的账号列表
       type: Array,
       default: () => []
@@ -165,22 +174,9 @@ export default {
         this.loading = false
       }
     },
-
-    // 根据关键字过滤"可选择的账号列表"
-    handleFilterAccountList() {
-      this.accountListFilter = this.accountList.filter(account => {
-        const currentName = account.name.toLowerCase()
-        const keyword = this.keyword.toLowerCase()
-        return currentName.includes(keyword)
-      })
-    },
+    // 监听关键字变化
     onChangeKeyword(val) {
-      console.log('val => ', val)
       this.keyword = val
-      // this.handleGetAccountList()
-      // if (this.keyword) {
-      //   this.handleFilterAccountList()
-      // }
     },
     // 取消可选列表中所有的已选状态
     handleCloseAllChatList() {
@@ -279,12 +275,17 @@ export default {
     // 根据已选列表 判断当前是否全选
     handleGetIsSelectAll() {
       const currentSelectedLength = this.accountListSelected.length
-      if (currentSelectedLength === this.accountList.length) {
+      if (this.accountList.length && (currentSelectedLength === this.accountList.length)) {
         this.isSelectAll = true
       } else {
         this.isSelectAll = false
       }
     },
+    // 监听点击输入框“清空”按钮
+    onClickClearBtn() {
+      this.handleDelAllSelectedAccount()
+      this.onClickConfirm()
+    },
   },
 };
 </script>

project/src/components/manage/roleManageComp/mpAccountOptions.vue

@@ -4,7 +4,11 @@
       <div
         slot="reference"
         :style="width ? 'width:' + width : ''"
-        :class="['common-screen-self-box', 'common-input-select', accountListResult.length ? 'common-input-select-hover' : '']"
+        :class="[
+          'common-screen-self-box',
+          'common-input-select',
+          accountListResult.length && clearable ? 'common-input-select-hover' : ''
+        ]"
         @click="dialogVisible = true"
       >
         <div :class="['common-screen-self-con', accountListResult.length ? '' : 'common-screen-self-placeholder']">
@@ -12,6 +16,7 @@
             <span v-if="accountListResult.length">{{ accountListResultName }}</span>
             <span v-else>请选择</span>
           </div>
+          <i class="el-icon-circle-close other-icon" @click.stop="onClickClearBtn"></i>
         </div>
         <div class="common-screen-self-icon"><i class="el-icon-arrow-down" /></div>
       </div>
@@ -92,6 +97,10 @@ export default {
       type: String,
       default: () => ''
     },
+    clearable: {
+      type: Boolean,
+      default: () => false
+    },
     accountListResult: { // 最终确认选择的账号列表
       type: Array,
       default: () => []
@@ -165,22 +174,9 @@ export default {
         this.loading = false
       }
     },
-
-    // 根据关键字过滤"可选择的账号列表"
-    handleFilterAccountList() {
-      this.accountListFilter = this.accountList.filter(account => {
-        const currentName = account.name.toLowerCase()
-        const keyword = this.keyword.toLowerCase()
-        return currentName.includes(keyword)
-      })
-    },
+    // 监听关键字变化
     onChangeKeyword(val) {
-      console.log('val => ', val)
       this.keyword = val
-      // this.handleGetAccountList()
-      // if (this.keyword) {
-      //   this.handleFilterAccountList()
-      // }
     },
     // 取消可选列表中所有的已选状态
     handleCloseAllChatList() {
@@ -279,12 +275,17 @@ export default {
     // 根据已选列表 判断当前是否全选
     handleGetIsSelectAll() {
       const currentSelectedLength = this.accountListSelected.length
-      if (currentSelectedLength === this.accountList.length) {
+      if (this.accountList.length && (currentSelectedLength === this.accountList.length)) {
         this.isSelectAll = true
       } else {
         this.isSelectAll = false
       }
     },
+    // 监听点击输入框“清空”按钮
+    onClickClearBtn() {
+      this.handleDelAllSelectedAccount()
+      this.onClickConfirm()
+    },
   },
 };
 </script>