From 3f5058897f9b4a5d2026b0c3b69cbdaf9071e4cb Mon Sep 17 00:00:00 2001
From: dataeaseShu <tong.shu@fit2cloud.com>
Date: Thu, 20 Feb 2025 16:34:39 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E6=A0=B7=E5=BC=8F=E4=BC=98=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 core/core-frontend/src/locales/en.ts          |   2 +
 core/core-frontend/src/locales/tw.ts          |   2 +
 core/core-frontend/src/locales/zh-CN.ts       |   2 +
 .../filter/auth-tree-chart/FilterFiled.vue    | 388 ++++++++++--------
 .../editor/filter/auth-tree/FilterFiled.vue   | 349 +++++++++-------
 5 files changed, 428 insertions(+), 315 deletions(-)

diff --git a/core/core-frontend/src/locales/en.ts b/core/core-frontend/src/locales/en.ts
index 6c1fc50046..23d988f050 100644
--- a/core/core-frontend/src/locales/en.ts
+++ b/core/core-frontend/src/locales/en.ts
@@ -10,6 +10,8 @@ export default {
       dateRange: 'Date Range Picker',
       add_component_hint: 'Click or drag the component on the left to add a field'
     },
+    list_selection: 'List selection',
+    date_setting: 'Date setting',
     openMobileTerminal: 'Open mobile terminal',
     watermarkManagement: 'Watermark Management',
     inputText: 'Please enter',
diff --git a/core/core-frontend/src/locales/tw.ts b/core/core-frontend/src/locales/tw.ts
index 3a954c2e41..6334b1aaf9 100644
--- a/core/core-frontend/src/locales/tw.ts
+++ b/core/core-frontend/src/locales/tw.ts
@@ -10,6 +10,8 @@ export default {
       dateRange: '時間範圍',
       add_component_hint: '點選或拖曳左側元件新增欄位'
     },
+    list_selection: '清單選擇',
+    date_setting: '日期設定',
     openMobileTerminal: '開啟行動端',
     watermarkManagement: '水印管理',
     inputText: '請輸入',
diff --git a/core/core-frontend/src/locales/zh-CN.ts b/core/core-frontend/src/locales/zh-CN.ts
index 88dd31ea40..236362c413 100644
--- a/core/core-frontend/src/locales/zh-CN.ts
+++ b/core/core-frontend/src/locales/zh-CN.ts
@@ -2,6 +2,8 @@ export default {
   common: {
     timeout_tips: '请求超时，请稍后再试',
     watermarkManagement: '水印管理',
+    list_selection: '列表选择',
+    date_setting: '日期设置',
     component: {
       input: '单行输入',
       textarea: '多行输入',
diff --git a/core/core-frontend/src/views/chart/components/editor/filter/auth-tree-chart/FilterFiled.vue b/core/core-frontend/src/views/chart/components/editor/filter/auth-tree-chart/FilterFiled.vue
index 1e02c93b52..625b410357 100644
--- a/core/core-frontend/src/views/chart/components/editor/filter/auth-tree-chart/FilterFiled.vue
+++ b/core/core-frontend/src/views/chart/components/editor/filter/auth-tree-chart/FilterFiled.vue
@@ -1,5 +1,6 @@
 <script lang="ts" setup>
 import icon_searchOutline_outlined from '@/assets/svg/icon_search-outline_outlined.svg'
+import icon_close_outlined from '@/assets/svg/icon_close_outlined.svg'
 import icon_deleteTrash_outlined from '@/assets/svg/icon_delete-trash_outlined.svg'
 import { ref, inject, computed, watch, onBeforeMount, toRefs, nextTick } from 'vue'
 import { useI18n } from '@/hooks/web/useI18n'
@@ -109,10 +110,6 @@ const computedFiledList = computed(() => {
   return Object.values(filedList.value || {})
 })
 
-watch(checkResult, () => {
-  cancelfixValue()
-})
-
 const authTargetType = ref('')
 
 watch(
@@ -132,8 +129,27 @@ onBeforeMount(() => {
 })
 
 const confirm = () => {
+  cancelfixValue()
   enumInput.value.$el.click()
 }
+
+const cancelSelect = () => {
+  const { enumValue } = item.value
+  const arr = enumValue.trim() ? enumValue.split(',') : []
+  checklist.value = arr
+  checkboxlist.value = checkListWithFilter.value.filter(ele => arr.includes(ele))
+  if (checkboxlist.value.length) {
+    checkAll.value = checkboxlist.value.length === checkListWithFilter.value.length
+    isIndeterminate.value = checkboxlist.value.length !== checkListWithFilter.value.length
+  }
+
+  if (!checkboxlist.value.length) {
+    checkAll.value = false
+    isIndeterminate.value = false
+  }
+  enumInput.value.$el.click()
+}
+
 const initNameEnumName = () => {
   const { name, enumValue, fieldId } = item.value
   const arr = enumValue.trim() ? enumValue.split(',') : []
@@ -171,6 +187,16 @@ const initEnumOptions = () => {
   if (filterType === 'enum' && [0, 5, 7].includes(deType)) {
     multFieldValuesForPermissions({ fieldIds: [fieldId] }).then(res => {
       enumList.value = optionData(res.data)
+      checkboxlist.value = enumList.value.filter(ele => checklist.value.includes(ele))
+      if (checkboxlist.value.length) {
+        checkAll.value = checkboxlist.value.length === enumList.value.length
+        isIndeterminate.value = checkboxlist.value.length !== enumList.value.length
+      }
+
+      if (!checkboxlist.value.length) {
+        checkAll.value = false
+        isIndeterminate.value = false
+      }
     })
   }
 }
@@ -185,10 +211,10 @@ const handleClick = () => {
 }
 
 const relativeToCurrentTypeMap = {
-  year: '年',
-  month: '月',
-  date: '日',
-  datetime: '日'
+  year: t('cron.year'),
+  month: t('cron.month'),
+  date: t('cron.day'),
+  datetime: t('cron.day')
 }
 function formatDate(str) {
   // 根据 - 符号拆分
@@ -225,35 +251,35 @@ const confirmTimeSelect = () => {
   if (relativeToCurrent !== 'custom') {
     item.value.timeValue = [
       {
-        label: '今年',
+        label: t('dynamic_year.current'),
         value: 'thisYear'
       },
       {
-        label: '去年',
+        label: t('dynamic_year.last'),
         value: 'lastYear'
       },
       {
-        label: '本月',
+        label: t('cron.this_month'),
         value: 'thisMonth'
       },
       {
-        label: '上月',
+        label: t('dynamic_month.last'),
         value: 'lastMonth'
       },
       {
-        label: '今天',
+        label: t('dynamic_time.today'),
         value: 'today'
       },
       {
-        label: '昨天',
+        label: t('dynamic_time.yesterday'),
         value: 'yesterday'
       },
       {
-        label: '月初',
+        label: t('dynamic_time.firstOfMonth'),
         value: 'monthBeginning'
       },
       {
-        label: '年初',
+        label: t('dynamic_time.firstOfYear'),
         value: 'yearBeginning'
       }
     ].find(ele => ele.value === relativeToCurrent).label
@@ -261,7 +287,7 @@ const confirmTimeSelect = () => {
     return
   }
   item.value.timeValue = `${timeNum}${relativeToCurrentTypeMap[relativeToCurrentType]}${
-    around === 'f' ? '前' : '后'
+    around === 'f' ? t('dynamic_time.before') : t('dynamic_time.after')
   }`
   if (timeGranularity === 'datetime') {
     item.value.timeValue += new Date(arbitraryTime).toLocaleString().split(' ')[1]
@@ -280,8 +306,10 @@ const cancel = () => {
 const cancelfixValue = () => {
   item.value.enumValue = checkResult.value || ''
 }
-const delChecks = idx => {
+const delChecks = (idx, i) => {
   checklist.value.splice(idx, 1)
+  checkboxlist.value = checkboxlist.value.filter(ele => ele !== i)
+  selectedChange()
 }
 const selectItem = ({ name, id, deType }) => {
   activeName.value = name
@@ -320,22 +348,76 @@ const filterListInit = deType => {
 const filterListTime = [
   {
     value: 'dateValue',
-    label: '固定值'
+    label: t('auth.fixed_value')
   },
   {
     value: 'dynamicDate',
-    label: '动态值'
+    label: t('chart.dynamic')
   }
 ]
 const clearAll = () => {
   checklist.value = []
+  checkboxlist.value = []
+  checkAll.value = false
+  isIndeterminate.value = false
 }
+
 const selectAll = () => {
   checkListWithFilter.value.forEach(ele => {
     if (!checklist.value.includes(ele)) {
       checklist.value.push(ele)
     }
   })
+  checkboxlist.value = [...new Set([...checkListWithFilter.value, ...checkboxlist.value])]
+}
+
+const isIndeterminate = ref(false)
+const checkAll = ref(false)
+const checkboxlist = ref([])
+let oldList = []
+watch(
+  () => checkListWithFilter.value,
+  val => {
+    if (!oldList.length && val.length !== enumList.value.length) {
+      oldList = [...checkboxlist.value]
+    }
+
+    if (oldList.length && val.length === enumList.value.length) {
+      oldList = []
+    }
+
+    const result = val.every(ele => checkboxlist.value.includes(ele))
+    isIndeterminate.value = val.length && checkboxlist.value.length && !result
+    checkAll.value = val.length && result
+  }
+)
+const selectedChange = () => {
+  const notSelectList = checkListWithFilter.value.filter(ele => !checkboxlist.value.includes(ele))
+  const newCheckboxlist = [...checkboxlist.value]
+  checklist.value = [...new Set(checklist.value.concat(checkboxlist.value))].filter(
+    ele => !notSelectList.includes(ele)
+  )
+  checkboxlist.value = [...new Set(oldList.concat(checkboxlist.value))].filter(
+    ele => !notSelectList.includes(ele)
+  )
+  if (newCheckboxlist.length) {
+    checkAll.value = newCheckboxlist.length === checkListWithFilter.value.length
+    isIndeterminate.value = newCheckboxlist.length !== checkListWithFilter.value.length
+  }
+
+  if (!newCheckboxlist.length) {
+    checkAll.value = false
+    isIndeterminate.value = false
+  }
+}
+const checkAllChange = val => {
+  if (val) {
+    selectAll()
+  } else {
+    checkboxlist.value = checkboxlist.value.filter(ele => !checkListWithFilter.value.includes(ele))
+    checklist.value = checklist.value.filter(ele => !checkListWithFilter.value.includes(ele))
+  }
+  isIndeterminate.value = false
 }
 const addFields = () => {
   const list = textareaValue.value.split('\n').reduce((pre, next) => {
@@ -349,14 +431,6 @@ const addFields = () => {
   }
   showTextArea.value = false
 }
-const checkItem = i => {
-  const index = checklist.value.findIndex(ele => ele === i)
-  if (index === -1) {
-    checklist.value.push(i)
-  } else {
-    delChecks(index)
-  }
-}
 
 const emits = defineEmits(['update:item', 'del'])
 </script>
@@ -529,39 +603,35 @@ const emits = defineEmits(['update:item', 'del'])
           :hide-on-click="false"
         >
           <template #reference>
-            <el-input
-              v-model="item.enumValue"
-              ref="enumInput"
-              size="small"
-              @input="cancelfixValue"
-              clearable
-              @clear="clearAll"
-            >
+            <el-input v-model="item.enumValue" ref="enumInput" size="small" readonly clearable>
             </el-input>
           </template>
           <div class="de-panel clearfix">
             <div class="mod-left">
               <el-input :placeholder="t('auth.enter_keywords')" v-model="filterFiled"> </el-input>
-              <ul class="infinite-list autochecker-list" style="height: 231px; overflow: auto">
-                <li
-                  :key="i"
-                  v-for="i in checkListWithFilter"
-                  class="infinite-list-item"
-                  @click="checkItem(i)"
-                  :title="i"
-                >
-                  <i class="el-icon-check" :style="{ opacity: checklist.includes(i) ? 1 : 0 }"></i>
-                  <label>{{ i }}</label>
-                  <span>+</span>
-                </li>
+              <ul class="autochecker-list" style="height: 260px">
+                <div class="select-all">
+                  <el-checkbox
+                    v-model="checkAll"
+                    :indeterminate="isIndeterminate"
+                    :label="t('component.allSelect')"
+                    @change="checkAllChange"
+                  />
+                </div>
+                <el-checkbox-group v-model="checkboxlist" @change="selectedChange">
+                  <el-scrollbar height="230px">
+                    <li :key="i" v-for="i in checkListWithFilter" :title="i">
+                      <el-checkbox :label="i">
+                        {{ i }}
+                      </el-checkbox>
+                    </li>
+                  </el-scrollbar>
+                </el-checkbox-group>
               </ul>
-              <el-button style="width: 100%" type="primary" @click="selectAll">
-                {{ t('auth.select_all') }}
-              </el-button>
             </div>
             <div class="mod-left right-de">
               <div class="right-top clearfix">
-                {{ t('auth.added') + ' ' + checklist.length }}
+                {{ t('common.list_selection') }}
                 <div class="right-btn">
                   <span @click="cancelKeyDow">
                     <i class="el-icon-edit"></i>
@@ -588,33 +658,28 @@ const emits = defineEmits(['update:item', 'del'])
                   </transition>
                 </div>
               </div>
-              <ul class="infinite-list autochecker-list" style="overflow: auto">
-                <li :key="i" v-for="(i, idx) in checklist" class="infinite-list-item">
-                  <el-tooltip
-                    class="item"
-                    effect="light"
-                    :content="i"
-                    placement="top"
-                    :open-delay="1000"
-                  >
-                    <label>{{ i }}</label>
-                  </el-tooltip>
-                  <el-icon @click="delChecks(idx)" style="color: #646a73">
-                    <Icon><icon_deleteTrash_outlined class="svg-icon" /></Icon>
-                  </el-icon>
-                </li>
-              </ul>
-              <div class="right-menu-foot">
-                <div class="footer-left">&nbsp;</div>
-                <el-button type="primary" @click="confirm">
-                  {{ t('auth.sure') }}
-                </el-button>
-                <div class="footer-right">
-                  <el-icon style="color: #646a73" @click="clearAll">
-                    <Icon><icon_deleteTrash_outlined class="svg-icon" /></Icon>
-                  </el-icon>
+              <ul class="autochecker-list">
+                <div class="clear-checkbox__label">
+                  <span>{{ t('auth.added') + ' ' + checklist.length }}</span
+                  ><span @click="clearAll">{{ t('user.clear_button') }}</span>
                 </div>
-              </div>
+                <el-scrollbar height="230px">
+                  <li :key="i" v-for="(i, idx) in checklist">
+                    <div :title="i" class="right-checkbox__label">{{ i }}</div>
+                    <el-icon @click="delChecks(idx, i)" class="remove-hover-icon">
+                      <Icon><icon_close_outlined class="svg-icon" /></Icon>
+                    </el-icon>
+                  </li>
+                </el-scrollbar>
+              </ul>
+            </div>
+            <div class="right-menu-foot">
+              <el-button secondary @click="cancelSelect">
+                {{ t('common.cancel') }}
+              </el-button>
+              <el-button type="primary" @click="confirm">
+                {{ t('auth.sure') }}
+              </el-button>
             </div>
           </div>
         </el-popover>
@@ -629,14 +694,16 @@ const emits = defineEmits(['update:item', 'del'])
       class="create-dialog"
       append-to-body
       v-model="dialogVisible"
-      title="日期设置"
+      :title="t('common.date_setting')"
       width="420"
     >
       <TimeDialog ref="timeDialog"></TimeDialog>
       <template #footer>
         <div class="dialog-footer">
-          <el-button @click="dialogVisible = false">取消</el-button>
-          <el-button type="primary" @click="confirmTimeSelect"> 确定 </el-button>
+          <el-button @click="dialogVisible = false">{{ t('dataset.cancel') }}</el-button>
+          <el-button type="primary" @click="confirmTimeSelect">
+            {{ t('dataset.confirm') }}
+          </el-button>
         </div>
       </template>
     </el-dialog>
@@ -929,6 +996,18 @@ const emits = defineEmits(['update:item', 'del'])
     background-color: #fff;
     box-shadow: none;
     border: 1px solid rgba(0, 0, 0, 0.05);
+    .right-menu-foot {
+      text-align: right;
+      padding: 5px;
+      float: right;
+      width: 100%;
+      border-top: 1px solid hsla(0, 0%, 59%, 0.1);
+      .ed-button {
+        line-height: 28px;
+        height: 28px;
+        min-width: 70px;
+      }
+    }
     .mod-left {
       font-family: var(--de-custom_font, 'PingFang');
       color: rgba(0, 0, 0, 0.65);
@@ -976,82 +1055,81 @@ const emits = defineEmits(['update:item', 'del'])
       border-left: 1px solid hsla(0, 0%, 59%, 0.1);
     }
     .autochecker-list {
-      font-family: var(--de-custom_font, 'PingFang');
-      color: rgba(0, 0, 0, 0.65);
-      box-sizing: border-box;
       width: 100%;
-      overflow: hidden;
-      overflow-y: auto;
-      height: 221px;
       position: relative;
-      padding: 0;
 
-      li {
-        direction: ltr;
+      .select-all {
         padding: 0 5px;
-        text-overflow: ellipsis;
-        overflow: hidden;
-        color: #333;
-        white-space: nowrap;
-        list-style: none;
-        line-height: 28px;
-        height: 28px;
-        width: 100%;
-        position: relative;
-        box-sizing: border-box;
+        .ed-checkbox__label {
+          font-weight: 400;
+        }
+      }
 
-        &:hover {
-          background-color: #f8f8fa;
-          color: #2153d4;
-          opacity: 1;
-          span {
-            display: block;
+      .clear-checkbox__label {
+        display: flex;
+        align-items: center;
+        line-height: 32px;
+        padding: 0 5px;
+        height: 32px;
+        font-weight: 400;
+        width: 100%;
+        justify-content: space-between;
+        :nth-child(2) {
+          height: 26px;
+          line-height: 26px;
+          border-radius: 4px;
+          padding: 0 4px;
+          color: #3370ff;
+          &:hover {
+            background-color: #3370ff1a;
           }
         }
+      }
 
-        i {
-          color: #333;
-          font-size: 12px;
-          cursor: pointer;
-          vertical-align: top;
-          line-height: 28px;
-          height: 28px;
-          display: inline-block;
-        }
+      .right-checkbox__label {
+        text-overflow: ellipsis;
+        overflow: hidden;
+        width: 140px;
+        color: #1f2329;
+        white-space: nowrap;
+        font-weight: 400;
+        font-size: 14px;
+      }
 
-        label {
-          font-family: var(--de-custom_font, 'PingFang');
-          font-size: 12px;
-          direction: ltr;
-          color: #333;
-          box-sizing: border-box;
-          touch-action: manipulation;
-          width: 87%;
-          height: 28px;
-          line-height: 14px;
-          padding: 8px 20px;
-          cursor: pointer;
-          display: inline-block;
-          position: relative;
-          white-space: nowrap;
+      li {
+        padding: 0 5px;
+        list-style: none;
+        display: flex;
+        align-items: center;
+        line-height: 32px;
+        height: 32px;
+        width: 100%;
+        position: relative;
+        .ed-checkbox__label {
           text-overflow: ellipsis;
           overflow: hidden;
+          width: 140px;
+          white-space: nowrap;
+          font-weight: 400;
         }
 
-        span {
-          display: none;
-          position: absolute;
-          width: 14px;
-          height: 14px;
-          line-height: 11px;
-          top: 6px;
-          right: 5px;
-          font-size: 15px;
+        &:hover {
+          background-color: #1f23291a;
+        }
+
+        .remove-hover-icon {
+          width: 16px;
+          height: 16px;
           cursor: pointer;
-          background: #2153d4;
-          color: #fff;
-          text-align: center;
-          border-radius: 999px;
+          color: #8f959e;
+          margin: 4px;
+          &:hover {
+            width: 24px;
+            margin: 0px;
+            height: 24px;
+            border-radius: 4px;
+            background-color: #1f23291a;
+          }
         }
       }
     }
@@ -1065,7 +1143,7 @@ const emits = defineEmits(['update:item', 'del'])
       height: 30px;
       width: 100%;
       font-size: 12px;
-      line-height: 35px;
+      line-height: 27px;
       text-overflow: ellipsis;
       white-space: nowrap;
 
@@ -1085,28 +1163,6 @@ const emits = defineEmits(['update:item', 'del'])
         width: 75px;
       }
     }
-
-    .right-menu-foot {
-      color: rgba(0, 0, 0, 0.65);
-      font-size: 12px;
-      box-sizing: border-box;
-      height: 30px;
-      text-align: right;
-      line-height: 30px;
-      margin-top: 9px;
-      border-top: 1px solid hsla(0, 0%, 59%, 0.1);
-
-      .footer-left {
-        box-sizing: border-box;
-        float: left;
-      }
-
-      .footer-right {
-        float: right;
-        padding-left: 10px;
-        cursor: pointer;
-      }
-    }
   }
 }
 
diff --git a/core/core-frontend/src/views/chart/components/editor/filter/auth-tree/FilterFiled.vue b/core/core-frontend/src/views/chart/components/editor/filter/auth-tree/FilterFiled.vue
index 241c6a3845..6a63e23396 100644
--- a/core/core-frontend/src/views/chart/components/editor/filter/auth-tree/FilterFiled.vue
+++ b/core/core-frontend/src/views/chart/components/editor/filter/auth-tree/FilterFiled.vue
@@ -1,5 +1,6 @@
 <script lang="ts" setup>
 import icon_searchOutline_outlined from '@/assets/svg/icon_search-outline_outlined.svg'
+import icon_close_outlined from '@/assets/svg/icon_close_outlined.svg'
 import icon_deleteTrash_outlined from '@/assets/svg/icon_delete-trash_outlined.svg'
 import { ref, inject, computed, watch, onBeforeMount, toRefs } from 'vue'
 import { useI18n } from '@/hooks/web/useI18n'
@@ -103,10 +104,6 @@ const computedFiledList = computed(() => {
   return Object.values(filedList.value || {})
 })
 
-watch(checkResult, () => {
-  cancelfixValue()
-})
-
 const authTargetType = ref('')
 
 watch(
@@ -126,6 +123,24 @@ onBeforeMount(() => {
 })
 
 const confirm = () => {
+  cancelfixValue()
+  enumInput.value.$el.click()
+}
+
+const cancelSelect = () => {
+  const { enumValue } = item.value
+  const arr = enumValue.trim() ? enumValue.split(',') : []
+  checklist.value = arr
+  checkboxlist.value = checkListWithFilter.value.filter(ele => arr.includes(ele))
+  if (checkboxlist.value.length) {
+    checkAll.value = checkboxlist.value.length === checkListWithFilter.value.length
+    isIndeterminate.value = checkboxlist.value.length !== checkListWithFilter.value.length
+  }
+
+  if (!checkboxlist.value.length) {
+    checkAll.value = false
+    isIndeterminate.value = false
+  }
   enumInput.value.$el.click()
 }
 const initNameEnumName = () => {
@@ -161,6 +176,16 @@ const initEnumOptions = () => {
   if (filterType === 'enum' && [0, 5, 7].includes(deType)) {
     multFieldValuesForPermissions({ fieldIds: [fieldId] }).then(res => {
       enumList.value = optionData(res.data)
+      checkboxlist.value = enumList.value.filter(ele => checklist.value.includes(ele))
+      if (checkboxlist.value.length) {
+        checkAll.value = checkboxlist.value.length === enumList.value.length
+        isIndeterminate.value = checkboxlist.value.length !== enumList.value.length
+      }
+
+      if (!checkboxlist.value.length) {
+        checkAll.value = false
+        isIndeterminate.value = false
+      }
     })
   }
 }
@@ -175,8 +200,10 @@ const cancel = () => {
 const cancelfixValue = () => {
   item.value.enumValue = checkResult.value || ''
 }
-const delChecks = idx => {
+const delChecks = (idx, i) => {
   checklist.value.splice(idx, 1)
+  checkboxlist.value = checkboxlist.value.filter(ele => ele !== i)
+  selectedChange()
 }
 const selectItem = ({ name, id, deType }) => {
   activeName.value = name
@@ -212,6 +239,9 @@ const filterListInit = deType => {
 
 const clearAll = () => {
   checklist.value = []
+  checkboxlist.value = []
+  checkAll.value = false
+  isIndeterminate.value = false
 }
 const selectAll = () => {
   checkListWithFilter.value.forEach(ele => {
@@ -219,6 +249,56 @@ const selectAll = () => {
       checklist.value.push(ele)
     }
   })
+  checkboxlist.value = [...new Set([...checkListWithFilter.value, ...checkboxlist.value])]
+}
+
+const isIndeterminate = ref(false)
+const checkAll = ref(false)
+const checkboxlist = ref([])
+let oldList = []
+watch(
+  () => checkListWithFilter.value,
+  val => {
+    if (!oldList.length && val.length !== enumList.value.length) {
+      oldList = [...checkboxlist.value]
+    }
+
+    if (oldList.length && val.length === enumList.value.length) {
+      oldList = []
+    }
+
+    const result = val.every(ele => checkboxlist.value.includes(ele))
+    isIndeterminate.value = val.length && checkboxlist.value.length && !result
+    checkAll.value = val.length && result
+  }
+)
+const selectedChange = () => {
+  const notSelectList = checkListWithFilter.value.filter(ele => !checkboxlist.value.includes(ele))
+  const newCheckboxlist = [...checkboxlist.value]
+  checklist.value = [...new Set(checklist.value.concat(checkboxlist.value))].filter(
+    ele => !notSelectList.includes(ele)
+  )
+  checkboxlist.value = [...new Set(oldList.concat(checkboxlist.value))].filter(
+    ele => !notSelectList.includes(ele)
+  )
+  if (newCheckboxlist.length) {
+    checkAll.value = newCheckboxlist.length === checkListWithFilter.value.length
+    isIndeterminate.value = newCheckboxlist.length !== checkListWithFilter.value.length
+  }
+
+  if (!newCheckboxlist.length) {
+    checkAll.value = false
+    isIndeterminate.value = false
+  }
+}
+const checkAllChange = val => {
+  if (val) {
+    selectAll()
+  } else {
+    checkboxlist.value = checkboxlist.value.filter(ele => !checkListWithFilter.value.includes(ele))
+    checklist.value = checklist.value.filter(ele => !checkListWithFilter.value.includes(ele))
+  }
+  isIndeterminate.value = false
 }
 const addFields = () => {
   const list = textareaValue.value.split('\n').reduce((pre, next) => {
@@ -232,14 +312,6 @@ const addFields = () => {
   }
   showTextArea.value = false
 }
-const checkItem = i => {
-  const index = checklist.value.findIndex(ele => ele === i)
-  if (index === -1) {
-    checklist.value.push(i)
-  } else {
-    delChecks(index)
-  }
-}
 
 const emits = defineEmits(['update:item', 'del'])
 </script>
@@ -379,39 +451,35 @@ const emits = defineEmits(['update:item', 'del'])
           :hide-on-click="false"
         >
           <template #reference>
-            <el-input
-              v-model="item.enumValue"
-              ref="enumInput"
-              size="small"
-              @input="cancelfixValue"
-              clearable
-              @clear="clearAll"
-            >
+            <el-input v-model="item.enumValue" ref="enumInput" size="small" readonly clearable>
             </el-input>
           </template>
           <div class="de-panel clearfix">
             <div class="mod-left">
               <el-input :placeholder="t('auth.enter_keywords')" v-model="filterFiled"> </el-input>
-              <ul class="infinite-list autochecker-list" style="height: 231px; overflow: auto">
-                <li
-                  :key="i"
-                  v-for="i in checkListWithFilter"
-                  class="infinite-list-item"
-                  @click="checkItem(i)"
-                  :title="i"
-                >
-                  <i class="el-icon-check" :style="{ opacity: checklist.includes(i) ? 1 : 0 }"></i>
-                  <label>{{ i }}</label>
-                  <span>+</span>
-                </li>
+              <ul class="autochecker-list" style="height: 260px">
+                <div class="select-all">
+                  <el-checkbox
+                    v-model="checkAll"
+                    :indeterminate="isIndeterminate"
+                    :label="t('component.allSelect')"
+                    @change="checkAllChange"
+                  />
+                </div>
+                <el-checkbox-group v-model="checkboxlist" @change="selectedChange">
+                  <el-scrollbar height="230px">
+                    <li :key="i" v-for="i in checkListWithFilter" :title="i">
+                      <el-checkbox :label="i">
+                        {{ i }}
+                      </el-checkbox>
+                    </li>
+                  </el-scrollbar>
+                </el-checkbox-group>
               </ul>
-              <el-button style="width: 100%" type="primary" @click="selectAll">
-                {{ t('auth.select_all') }}
-              </el-button>
             </div>
             <div class="mod-left right-de">
               <div class="right-top clearfix">
-                {{ t('auth.added') }}{{ checklist.length }}
+                {{ t('common.list_selection') }}
                 <div class="right-btn">
                   <span @click="cancelKeyDow">
                     <i class="el-icon-edit"></i>
@@ -438,33 +506,28 @@ const emits = defineEmits(['update:item', 'del'])
                   </transition>
                 </div>
               </div>
-              <ul class="infinite-list autochecker-list" style="overflow: auto">
-                <li :key="i" v-for="(i, idx) in checklist" class="infinite-list-item">
-                  <el-tooltip
-                    class="item"
-                    effect="light"
-                    :content="i"
-                    placement="top"
-                    :open-delay="1000"
-                  >
-                    <label>{{ i }}</label>
-                  </el-tooltip>
-                  <el-icon @click="delChecks(idx)" style="color: #646a73">
-                    <Icon><icon_deleteTrash_outlined class="svg-icon" /></Icon>
-                  </el-icon>
-                </li>
-              </ul>
-              <div class="right-menu-foot">
-                <div class="footer-left">&nbsp;</div>
-                <el-button type="primary" @click="confirm">
-                  {{ t('auth.sure') }}
-                </el-button>
-                <div class="footer-right">
-                  <el-icon style="color: #646a73" @click="clearAll">
-                    <Icon><icon_deleteTrash_outlined class="svg-icon" /></Icon>
-                  </el-icon>
+              <ul class="autochecker-list">
+                <div class="clear-checkbox__label">
+                  <span>{{ t('auth.added') + ' ' + checklist.length }}</span
+                  ><span @click="clearAll">{{ t('user.clear_button') }}</span>
                 </div>
-              </div>
+                <el-scrollbar height="230px">
+                  <li :key="i" v-for="(i, idx) in checklist">
+                    <div :title="i" class="right-checkbox__label">{{ i }}</div>
+                    <el-icon @click="delChecks(idx, i)" class="remove-hover-icon">
+                      <Icon><icon_close_outlined class="svg-icon" /></Icon>
+                    </el-icon>
+                  </li>
+                </el-scrollbar>
+              </ul>
+            </div>
+            <div class="right-menu-foot">
+              <el-button secondary @click="cancelSelect">
+                {{ t('common.cancel') }}
+              </el-button>
+              <el-button type="primary" @click="confirm">
+                {{ t('auth.sure') }}
+              </el-button>
             </div>
           </div>
         </el-popover>
@@ -764,6 +827,18 @@ const emits = defineEmits(['update:item', 'del'])
     background-color: #fff;
     box-shadow: none;
     border: 1px solid rgba(0, 0, 0, 0.05);
+    .right-menu-foot {
+      text-align: right;
+      padding: 5px;
+      float: right;
+      width: 100%;
+      border-top: 1px solid hsla(0, 0%, 59%, 0.1);
+      .ed-button {
+        line-height: 28px;
+        height: 28px;
+        min-width: 70px;
+      }
+    }
     .mod-left {
       font-family: var(--de-custom_font, 'PingFang');
       color: rgba(0, 0, 0, 0.65);
@@ -811,82 +886,80 @@ const emits = defineEmits(['update:item', 'del'])
       border-left: 1px solid hsla(0, 0%, 59%, 0.1);
     }
     .autochecker-list {
-      font-family: var(--de-custom_font, 'PingFang');
-      color: rgba(0, 0, 0, 0.65);
-      box-sizing: border-box;
       width: 100%;
-      overflow: hidden;
-      overflow-y: auto;
-      height: 221px;
       position: relative;
-      padding: 0;
 
-      li {
-        direction: ltr;
+      .select-all {
         padding: 0 5px;
-        text-overflow: ellipsis;
-        overflow: hidden;
-        color: #333;
-        white-space: nowrap;
-        list-style: none;
-        line-height: 28px;
-        height: 28px;
-        width: 100%;
-        position: relative;
-        box-sizing: border-box;
+        .ed-checkbox__label {
+          font-weight: 400;
+        }
+      }
 
-        &:hover {
-          background-color: #f8f8fa;
-          color: #2153d4;
-          opacity: 1;
-          span {
-            display: block;
+      .clear-checkbox__label {
+        display: flex;
+        align-items: center;
+        line-height: 32px;
+        padding: 0 5px;
+        height: 32px;
+        font-weight: 400;
+        width: 100%;
+        justify-content: space-between;
+        :nth-child(2) {
+          height: 26px;
+          line-height: 26px;
+          border-radius: 4px;
+          padding: 0 4px;
+          color: #3370ff;
+          &:hover {
+            background-color: #3370ff1a;
           }
         }
+      }
 
-        i {
-          color: #333;
-          font-size: 12px;
-          cursor: pointer;
-          vertical-align: top;
-          line-height: 28px;
-          height: 28px;
-          display: inline-block;
-        }
-
-        label {
-          font-family: var(--de-custom_font, 'PingFang');
-          font-size: 12px;
-          direction: ltr;
-          color: #333;
-          box-sizing: border-box;
-          touch-action: manipulation;
-          width: 87%;
-          height: 28px;
-          line-height: 14px;
-          padding: 8px 20px;
-          cursor: pointer;
-          display: inline-block;
-          position: relative;
-          white-space: nowrap;
+      .right-checkbox__label {
+        text-overflow: ellipsis;
+        overflow: hidden;
+        width: 140px;
+        color: #1f2329;
+        white-space: nowrap;
+        font-weight: 400;
+        font-size: 14px;
+      }
+      li {
+        padding: 0 5px;
+        list-style: none;
+        display: flex;
+        align-items: center;
+        line-height: 32px;
+        height: 32px;
+        width: 100%;
+        position: relative;
+        .ed-checkbox__label {
           text-overflow: ellipsis;
           overflow: hidden;
+          width: 140px;
+          white-space: nowrap;
+          font-weight: 400;
         }
 
-        span {
-          display: none;
-          position: absolute;
-          width: 14px;
-          height: 14px;
-          line-height: 11px;
-          top: 6px;
-          right: 5px;
-          font-size: 15px;
+        &:hover {
+          background-color: #1f23291a;
+        }
+
+        .remove-hover-icon {
+          width: 16px;
+          height: 16px;
           cursor: pointer;
-          background: #2153d4;
-          color: #fff;
-          text-align: center;
-          border-radius: 999px;
+          color: #8f959e;
+          margin: 4px;
+          &:hover {
+            width: 24px;
+            margin: 0px;
+            height: 24px;
+            border-radius: 4px;
+            background-color: #1f23291a;
+          }
         }
       }
     }
@@ -900,7 +973,7 @@ const emits = defineEmits(['update:item', 'del'])
       height: 30px;
       width: 100%;
       font-size: 12px;
-      line-height: 35px;
+      line-height: 27px;
       text-overflow: ellipsis;
       white-space: nowrap;
 
@@ -920,28 +993,6 @@ const emits = defineEmits(['update:item', 'del'])
         width: 75px;
       }
     }
-
-    .right-menu-foot {
-      color: rgba(0, 0, 0, 0.65);
-      font-size: 12px;
-      box-sizing: border-box;
-      height: 30px;
-      text-align: right;
-      line-height: 30px;
-      margin-top: 9px;
-      border-top: 1px solid hsla(0, 0%, 59%, 0.1);
-
-      .footer-left {
-        box-sizing: border-box;
-        float: left;
-      }
-
-      .footer-right {
-        float: right;
-        padding-left: 10px;
-        cursor: pointer;
-      }
-    }
   }
 }