feat: 网元分组调整和支持修改申请

This commit is contained in:
caiyuchao
2025-07-26 17:53:27 +08:00
parent a89409e640
commit 562e4a4630
4 changed files with 133 additions and 134 deletions

View File

@@ -1,91 +1,40 @@
<script lang="ts" setup>
import type { FormInstance, SelectProps } from 'ant-design-vue';
import type { FormInstance } from 'ant-design-vue';
import type { LicenseApi } from '#/api/license/license';
import { reactive, ref } from 'vue';
import { ref } from 'vue';
import { MinusCircleOutlined, PlusOutlined } from '@vben/icons';
import { Textarea } from 'ant-design-vue';
import { $t } from '#/locales';
import { DICT_TYPE, getDictOptions } from '#/utils';
const emit = defineEmits(['neCodeList']);
const props = withDefaults(
defineProps<{
availableOptions: Function;
neCodeList?: LicenseApi.NeCode[];
}>(),
{
neCodeList: () => [{ neList: [], activationCode: '', id: 1 }],
},
);
const neAllOptions = getDictOptions(DICT_TYPE.LIC_NE_ALL, 'number');
const ne5GOptions = getDictOptions(DICT_TYPE.LIC_NE_5G, 'number');
const ne4GOptions = getDictOptions(DICT_TYPE.LIC_NE_4G, 'number');
const ne23GOptions = getDictOptions(DICT_TYPE.LIC_NE_23G, 'number');
const neAddOptions = getDictOptions(DICT_TYPE.LIC_NE_ADD, 'number');
const emit = defineEmits(['addNeCode', 'removeNeCode']);
const options = ref<SelectProps['options']>([
{
label: '一体化',
options: neAllOptions,
},
{
label: '5G',
options: ne5GOptions,
},
{
label: '4G',
options: ne4GOptions,
},
{
label: '2/3G',
options: ne23GOptions,
},
{
label: '增值业务',
options: neAddOptions,
},
]);
let nextId = 2;
const formRef = ref<FormInstance>();
const dynamicValidateForm = reactive<{ neCodeList: LicenseApi.NeCode[] }>({
neCodeList: [{ neList: [], activationCode: '', id: 1 }],
});
const removeNeCode = (item: LicenseApi.NeCode) => {
const index = dynamicValidateForm.neCodeList.indexOf(item);
if (index !== -1) {
dynamicValidateForm.neCodeList.splice(index, 1);
}
emit('removeNeCode', item);
};
const addNeCode = () => {
dynamicValidateForm.neCodeList.push({
neList: [],
activationCode: '',
id: nextId++,
});
emit('addNeCode');
};
const filterOption = (input: string, option: any) => {
return option.label.toLowerCase().includes(input.toLowerCase());
};
const handleChange = () => {
emit('neCodeList', dynamicValidateForm.neCodeList);
};
const availableOptions = (groupIdx: number) => {
// 其他分组已选标签
const otherSelected = new Set(
dynamicValidateForm.neCodeList
.filter((_, idx) => idx !== groupIdx)
.flatMap((g) => g.neList),
);
// return ne5GOptions.filter((tag) => !otherSelected.has(tag.value));
return options.value?.map((item) => ({
...item,
options: item.options.filter(
(option: any) => !otherSelected.has(option.value),
),
}));
};
const validate = () => formRef.value?.validate();
defineExpose({
@@ -93,13 +42,9 @@ defineExpose({
});
</script>
<template>
<a-form
ref="formRef"
name="dynamic_form_nest_item"
:model="dynamicValidateForm"
>
<a-form ref="formRef" name="dynamic_form_nest_item" :model="props">
<div
v-for="(neCode, index) in dynamicValidateForm.neCodeList"
v-for="(neCode, index) in props.neCodeList"
:key="neCode.id"
class="flex w-full gap-1"
>
@@ -116,10 +61,9 @@ defineExpose({
allow-clear
show-search
style="width: 220px"
:options="availableOptions(index)"
:options="props.availableOptions(index)"
:filter-option="filterOption"
:placeholder="$t('license.selectNe')"
@change="handleChange"
/>
</a-form-item>
<a-form-item
@@ -135,10 +79,9 @@ defineExpose({
allow-clear
v-model:value="neCode.activationCode"
:rows="1"
@change="handleChange"
/>
</a-form-item>
<a-form-item v-if="dynamicValidateForm.neCodeList.length > 1">
<a-form-item v-if="props.neCodeList.length > 1">
<MinusCircleOutlined
@click="removeNeCode(neCode)"
class="mt-1 cursor-pointer"

View File

@@ -145,7 +145,7 @@ export function useFormSchema(): VbenFormSchema[] {
component: '',
formItemClass: 'col-span-2',
modelPropName: 'modelValue',
rules: z.string(),
rules: z.array(z.object({})),
},
// {
// fieldName: 'licenseContent',
@@ -308,19 +308,19 @@ export function useGridFormSchema(): VbenFormSchema[] {
allowClear: true,
},
},
{
fieldName: 'neList',
label: $t('license.neList'),
component: 'Select',
componentProps: {
allowClear: true,
mode: 'multiple',
options: getDictOptions(DICT_TYPE.LIC_NE_LIST, 'number'),
showSearch: true,
filterOption: (input: string, option: any) =>
option.label.toLowerCase().includes(input.toLowerCase()),
},
},
// {
// fieldName: 'neList',
// label: $t('license.neList'),
// component: 'Select',
// componentProps: {
// allowClear: true,
// mode: 'multiple',
// options: getDictOptions(DICT_TYPE.LIC_NE_LIST, 'number'),
// showSearch: true,
// filterOption: (input: string, option: any) =>
// option.label.toLowerCase().includes(input.toLowerCase()),
// },
// },
// {
// fieldName: 'userNumber',
// label: $t('license.userNumber'),
@@ -353,15 +353,15 @@ export function useGridFormSchema(): VbenFormSchema[] {
// allowClear: true,
// },
// },
{
fieldName: 'applicationTime',
label: $t('license.applicationTime'),
component: 'RangePicker',
componentProps: {
...getRangePickerDefaultProps(),
allowClear: true,
},
},
// {
// fieldName: 'applicationTime',
// label: $t('license.applicationTime'),
// component: 'RangePicker',
// componentProps: {
// ...getRangePickerDefaultProps(),
// allowClear: true,
// },
// },
// {
// fieldName: 'remark',
// label: $t('license.remark'),
@@ -408,23 +408,23 @@ export function useGridColumns(
minWidth: 120,
formatter: 'formatDateTime',
},
{
field: 'neList',
title: $t('license.neList'),
minWidth: 120,
cellRender: {
name: 'CellDictGroup',
props: {
type: [
DICT_TYPE.LIC_NE_ALL,
DICT_TYPE.LIC_NE_5G,
DICT_TYPE.LIC_NE_4G,
DICT_TYPE.LIC_NE_23G,
DICT_TYPE.LIC_NE_ADD,
],
},
},
},
// {
// field: 'neList',
// title: $t('license.neList'),
// minWidth: 120,
// cellRender: {
// name: 'CellDictGroup',
// props: {
// type: [
// DICT_TYPE.LIC_NE_ALL,
// DICT_TYPE.LIC_NE_5G,
// DICT_TYPE.LIC_NE_4G,
// DICT_TYPE.LIC_NE_23G,
// DICT_TYPE.LIC_NE_ADD,
// ],
// },
// },
// },
{
field: 'userNumber',
title: $t('license.userNumber'),
@@ -435,12 +435,12 @@ export function useGridColumns(
title: $t('license.ranNumber'),
minWidth: 120,
},
{
field: 'activationCode',
title: $t('license.activationCode'),
visible: false,
minWidth: 120,
},
// {
// field: 'activationCode',
// title: $t('license.activationCode'),
// visible: false,
// minWidth: 120,
// },
// {
// field: 'licenseContent',
// visible: false,
@@ -505,10 +505,10 @@ export function useGridColumns(
code: 'detail',
text: $t('license.detail'),
},
{
code: 'edit',
show: hasAccessByCodes(['license:license:update']),
},
// {
// code: 'edit',
// show: hasAccessByCodes(['license:license:update']),
// },
{
code: 'apply',
text: $t('license.apply'),

View File

@@ -183,7 +183,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
<TableAction
:actions="[
{
label: $t('ui.actionTitle.create', ['License']),
label: $t('license.applyAction', ['License']),
type: 'primary',
icon: ACTION_ICON.ADD,
auth: ['license:license:create'],

View File

@@ -1,4 +1,6 @@
<script lang="ts" setup>
import type { SelectProps } from 'ant-design-vue';
import type { LicenseApi } from '#/api/license/license';
import { computed, reactive, ref, watch } from 'vue';
@@ -21,7 +23,7 @@ import NeCode from '../components/ne-code.vue';
import { formData, useFormSchema } from '../data';
const emit = defineEmits(['success']);
const neListOptions = getDictOptions(DICT_TYPE.LIC_NE_LIST, 'number');
const neListOptions = getDictOptions(DICT_TYPE.LIC_NE_ALL, 'number');
const state = reactive({
indeterminate: false,
@@ -29,6 +31,7 @@ const state = reactive({
checkedList: [] as number[],
neCodeList: [] as LicenseApi.NeCode[],
});
const neCodeRef = ref();
const getTitle = computed(() => {
@@ -38,7 +41,7 @@ const getTitle = computed(() => {
}
return $t('ui.actionTitle.edit', ['License']);
} else {
return $t('ui.actionTitle.create', ['License']);
return $t('license.applyAction', ['License']);
}
});
@@ -136,20 +139,70 @@ const [Modal, modalApi] = useVbenModal({
modalApi.unlock();
}
}
// const neCodeList = data.neCodeList || [{ neList: [], activationCode: '' }];
// data = { ...data, neCodeList };
// 处理数据
data.expiryDate = data.expiryDate ? data.expiryDate.toString() : '';
// 设置到 values
formData.value = data;
state.checkedList = data.neList || [];
state.neCodeList = data.neCodeList || [];
state.neCodeList = data.neCodeList || [
{ neList: [], activationCode: '', id: 1 },
];
await formApi.setValues(formData.value);
},
});
const getNeCodeList = (neCodeList: LicenseApi.NeCode[]) => {
state.neCodeList = neCodeList;
const options = ref<SelectProps['options']>([
{
label: '一体化',
options: getDictOptions(DICT_TYPE.LIC_NE_ALL, 'number'),
},
{
label: '5G',
options: getDictOptions(DICT_TYPE.LIC_NE_5G, 'number'),
},
{
label: '4G',
options: getDictOptions(DICT_TYPE.LIC_NE_4G, 'number'),
},
{
label: '2/3G',
options: getDictOptions(DICT_TYPE.LIC_NE_23G, 'number'),
},
{
label: '增值业务',
options: getDictOptions(DICT_TYPE.LIC_NE_ADD, 'number'),
},
]);
let nextId = 2;
const removeNeCode = (item: LicenseApi.NeCode) => {
const index = state.neCodeList.indexOf(item);
if (index !== -1) {
state.neCodeList.splice(index, 1);
}
};
const addNeCode = () => {
state.neCodeList.push({
neList: [],
activationCode: '',
id: nextId++,
});
};
const availableOptions = (groupIdx: number) => {
// 其他分组已选标签
const otherSelected = new Set(
state.neCodeList
.filter((_, idx) => idx !== groupIdx)
.flatMap((g) => g.neList),
);
const aaaa = options.value?.map((item) => ({
...item,
options: item.options.filter(
(option: any) => !otherSelected.has(option.value),
),
}));
return aaaa;
};
</script>
@@ -178,7 +231,10 @@ const getNeCodeList = (neCodeList: LicenseApi.NeCode[]) => {
<template #neCodeList="slotProps">
<NeCode
v-bind="slotProps"
@ne-code-list="getNeCodeList"
@add-ne-code="addNeCode"
@remove-ne-code="removeNeCode"
:ne-code-list="state.neCodeList"
:available-options="availableOptions"
ref="neCodeRef"
v-model:value="state.neCodeList"
/>