From 4d4ae0f58d20f92b65797d7df9983454a66cae0f Mon Sep 17 00:00:00 2001
From: Xu Zhimeng <xuzhimeng@qq.com>
Date: Fri, 10 Jan 2025 11:35:00 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=96=B0=E5=A2=9E=E5=B8=A6=E5=85=A8?=
 =?UTF-8?q?=E9=80=89=E7=9A=84=E4=B8=8B=E6=8B=89=E8=8F=9C=E5=8D=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../CustomSelectWithAllChecking.vue/index.vue | 72 +++++++++++++++++++
 src/style.less                                |  2 +
 2 files changed, 74 insertions(+)
 create mode 100644 src/components/CustomSelectWithAllChecking.vue/index.vue

diff --git a/src/components/CustomSelectWithAllChecking.vue/index.vue b/src/components/CustomSelectWithAllChecking.vue/index.vue
new file mode 100644
index 0000000..a90170e
--- /dev/null
+++ b/src/components/CustomSelectWithAllChecking.vue/index.vue
@@ -0,0 +1,72 @@
+<template>
+  <a-select v-bind="$attrs" v-model="innerValue" mode="multiple" allow-clear :options="options">
+    <img slot="suffixIcon" src="@/assets/images/global/select-down.png" alt="" />
+    <div slot="dropdownRender" slot-scope="menu">
+      <v-nodes :vnodes="menu" />
+      <a-divider style="margin: 4px 0" />
+      <div style="padding: 4px 12px; cursor: pointer" @mousedown="(e) => e.preventDefault()">
+        <a-checkbox v-model="isSelectAll" :disabled="!options.length">
+          <span @click.prevent="isSelectAll = !isSelectAll"> ALL </span>
+        </a-checkbox>
+      </div>
+    </div>
+  </a-select>
+</template>
+
+<script>
+export default {
+  props: {
+    value: {
+      type: [Array, Number],
+      default: () => [],
+    },
+    options: {
+      type: Array,
+      required: true,
+    },
+  },
+  components: {
+    VNodes: {
+      functional: true,
+      render: (h, ctx) => ctx.props.vnodes,
+    },
+  },
+  computed: {
+    innerValue: {
+      set(val) {
+        this.$emit('input', val)
+      },
+      get() {
+        return this.value
+      },
+    },
+
+    isSelectAll: {
+      set(val) {
+        if (val) {
+          this.$emit(
+            'input',
+            this.options.map((item) => item.value)
+          )
+        } else {
+          this.$emit('input', [])
+        }
+      },
+      get() {
+        return !!this.options.length && this.value.length === this.options.length
+      },
+    },
+  },
+}
+</script>
+
+<style lang="less" scoped>
+.ant-select {
+  width: 100%;
+}
+
+.ant-select-dropdown-content {
+  position: relative;
+  background: #03353f;
+}
+</style>
\ No newline at end of file
diff --git a/src/style.less b/src/style.less
index d958c2e..c7fd239 100644
--- a/src/style.less
+++ b/src/style.less
@@ -547,6 +547,8 @@ input[type='number']::-webkit-outer-spin-button {
       .ant-select-dropdown-content {
         border: 1px solid @borderColor;
         overflow: visible !important;
+        transform: translateZ(0);
+
         &::before {
           position: absolute;
           top: -6px;