feat: 多选框支持全选

apps/web-antd/src/api/license/license/index.ts

@@ -12,7 +12,7 @@ export namespace LicenseApi {
     projectId?: number; // 项目ID
     sn?: string; // sn
     expirationTime: Dayjs | string; // 到期时间
-    neSwitch: string; // 网元开关
+    neSwitch: number[]; // 网元开关
     userNum: number; // 用户数
     baseStationNum: number; // 基站数
     activationCode: string; // 激活码

apps/web-antd/src/locales/langs/en-US/license.json

@@ -13,5 +13,6 @@
   "remark": "Remark",
   "creationTime": "Creation Time",
   "operation": "Operation",
-  "list": "License List"
+  "list": "License List",
+  "checkAll": "Check All"
 }

apps/web-antd/src/locales/langs/zh-CN/license.json

@@ -13,5 +13,6 @@
   "remark": "备注",
   "creationTime": "创建时间",
   "operation": "操作",
-  "list": "License列表"
+  "list": "License列表",
+  "checkAll": "全选"
 }

apps/web-antd/src/views/license/license/data.ts

@@ -102,19 +102,23 @@ export function useFormSchema(): VbenFormSchema[] {
       fieldName: 'neSwitch',
       label: $t('license.neSwitch'),
       component: 'CheckboxGroup',
-      componentProps: {
+      modelPropName: 'modelValue',
-        options: getDictOptions(DICT_TYPE.LIC_NE_SWITCH, 'number'),
-      },
     },
     {
       fieldName: 'userNum',
       label: $t('license.userNum'),
-      component: 'Input',
+      component: 'InputNumber',
+      componentProps: {
+        min: 0,
+      },
     },
     {
       fieldName: 'baseStationNum',
       label: $t('license.baseStationNum'),
-      component: 'Input',
+      component: 'InputNumber',
+      componentProps: {
+        min: 0,
+      },
     },
     {
       fieldName: 'activationCode',
@@ -196,10 +200,19 @@ export function useGridFormSchema(): VbenFormSchema[] {
         allowClear: true,
       },
     },
-    // {
+    {
-    //   fieldName: 'neSwitch',
+      fieldName: 'neSwitch',
-    //   label: $t('license.neSwitch'),
+      label: $t('license.neSwitch'),
-    // },
+      component: 'Select',
+      componentProps: {
+        allowClear: true,
+        mode: 'multiple',
+        options: getDictOptions(DICT_TYPE.LIC_NE_SWITCH, 'number'),
+        showSearch: true,
+        filterOption: (input: string, option: any) =>
+          option.label.toLowerCase().includes(input.toLowerCase()),
+      },
+    },
     {
       fieldName: 'userNum',
       label: $t('license.userNum'),
@@ -310,7 +323,7 @@ export function useGridColumns(
       title: $t('license.neSwitch'),
       minWidth: 120,
       cellRender: {
-        name: 'CellDict',
+        name: 'CellDictGroup',
         props: { type: DICT_TYPE.LIC_NE_SWITCH },
       },
     },

apps/web-antd/src/views/license/license/modules/form.vue

@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import type { LicenseApi } from '#/api/license/license';
 
-import { computed, ref } from 'vue';
+import { computed, reactive, ref, watch } from 'vue';
 
 import { useVbenModal } from '@vben/common-ui';
 
@@ -14,11 +14,20 @@ import {
   updateLicense,
 } from '#/api/license/license';
 import { $t } from '#/locales';
+import { DICT_TYPE, getDictOptions } from '#/utils';
 
 import { useFormSchema } from '../data';
 
 const emit = defineEmits(['success']);
+const neSwitchOptions = getDictOptions(DICT_TYPE.LIC_NE_SWITCH, 'number');
 const formData = ref<LicenseApi.License>();
+
+const state = reactive({
+  indeterminate: false,
+  checkAll: false,
+  checkedList: [] as number[],
+});
+
 const getTitle = computed(() => {
   return formData.value?.id
     ? $t('ui.actionTitle.edit', ['License'])
@@ -38,6 +47,23 @@ const [Form, formApi] = useVbenForm({
   showDefaultActions: false,
 });
 
+const onCheckAllChange = (e: any) => {
+  Object.assign(state, {
+    checkedList: e.target.checked
+      ? neSwitchOptions.map((option) => option.value)
+      : [],
+    indeterminate: false,
+  });
+};
+
+watch(
+  () => state.checkedList,
+  (val) => {
+    state.indeterminate = val.length > 0 && val.length < neSwitchOptions.length;
+    state.checkAll = val.length === neSwitchOptions.length;
+  },
+);
+
 const [Modal, modalApi] = useVbenModal({
   async onConfirm() {
     const { valid } = await formApi.validate();
@@ -47,6 +73,7 @@ const [Modal, modalApi] = useVbenModal({
     modalApi.lock();
     // 提交表单
     const data = (await formApi.getValues()) as LicenseApi.License;
+    data.neSwitch = state.checkedList;
     try {
       await (formData.value?.id ? updateLicense(data) : createLicense(data));
       // 关闭并提示
@@ -77,6 +104,7 @@ const [Modal, modalApi] = useVbenModal({
     }
     // 设置到 values
     formData.value = data;
+    state.checkedList = data.neSwitch || [];
     await formApi.setValues(formData.value);
   },
 });
@@ -84,6 +112,26 @@ const [Modal, modalApi] = useVbenModal({
 
 <template>
   <Modal :title="getTitle">
-    <Form class="mx-4" />
+    <Form class="mx-4">
+      <template #neSwitch="slotProps">
+        <a-row>
+          <div>
+            <a-checkbox
+              v-model:checked="state.checkAll"
+              :indeterminate="state.indeterminate"
+              @change="onCheckAllChange"
+            >
+              {{ $t('license.checkAll') }}
+            </a-checkbox>
+          </div>
+          <a-divider style="margin: 10px 0" />
+          <a-checkbox-group
+            v-bind="slotProps"
+            v-model:value="state.checkedList"
+            :options="neSwitchOptions"
+          />
+        </a-row>
+      </template>
+    </Form>
   </Modal>
 </template>