feat: 网元分组调整和支持修改申请
This commit is contained in:
@@ -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"
|
||||
|
||||
@@ -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'),
|
||||
|
||||
@@ -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'],
|
||||
|
||||
@@ -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"
|
||||
/>
|
||||
|
||||
Reference in New Issue
Block a user