OMC/fe.ems.vue3
1
0
Fork 0
Code Issues Releases 3 Activity

fix: UDM用户信息编辑拖动title

Browse Source
This commit is contained in:
TsMask
2023-11-24 19:16:39 +08:00
parent 62a15150b6
commit 44ee479b32
7 changed files with 148 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
package.json
View File

@@ -32,6 +32,7 @@
"vue-codemirror": "^6.1.1",
"vue-i18n": "^9.5.0",
"vue-router": "^4.2.5",
"vue3-smooth-dnd": "^0.0.6",
"xlsx": "^0.18.5"
},
"devDependencies": {

4
src/components/DraggableModal/index.vue
View File

@@ -104,9 +104,7 @@ watch(
@cancel="e => emit('cancel', e)"
>
<template #title>
<div ref="modalTitleRef" class="draggable-title">
Draggable Modal {{ title }}
</div>
<div ref="modalTitleRef" class="draggable-title" v-text="title"></div>
</template>
<template #modalRender="{ originVNode }">
<div :style="transformStyle">

1
src/i18n/locales/en-US.ts
View File

@@ -36,6 +36,7 @@ export default {
searchBarText: 'Search bar',
tableStripedText: 'Form Zebra',
reloadText: 'Refresh',
columnSetText: 'Column Setting',
sizeText: 'Density',
size: {
default: 'Default',

1
src/i18n/locales/zh-CN.ts
View File

@@ -36,6 +36,7 @@ export default {
searchBarText: '搜索栏',
tableStripedText: '表格斑马纹',
reloadText: '刷新',
columnSetText: '列设置',
sizeText: '密度',
size: {
default: '默认',

2
src/typings/vite-env.d.ts vendored
View File

@@ -6,3 +6,5 @@ declare module '*.vue' {
const component: DefineComponent<{}, {}, any>;
export default component;
}
declare module 'vue3-smooth-dnd';

28
src/views/neUser/auth/index.vue
View File

@@ -63,6 +63,8 @@ type TabeStateType = {
loading: boolean;
/**紧凑型 */
size: SizeType;
/**斑马纹 */
striped: boolean;
/**搜索栏 */
seached: boolean;
/**记录数据 */
@@ -73,6 +75,7 @@ type TabeStateType = {
let tableState: TabeStateType = reactive({
loading: false,
size: 'middle',
striped: false,
seached: true,
data: [],
});
@@ -792,20 +795,25 @@ onMounted(() => {
/>
</a-tooltip>
<a-tooltip>
<template #title>{{ t('common.reloadText') }}</template>
<a-button type="text" @click.prevent="fnGetList()">
<template #icon>
<ReloadOutlined />
</template>
</a-button>
<template #title>{{ t('common.zebra') }}</template>
<a-switch
v-model:checked="tableState.striped"
:checked-children="t('common.switch.show')"
:un-checked-children="t('common.switch.hide')"
size="small"
/>
</a-tooltip>
<a-tooltip>
<template #title>{{ t('common.reloadText') }}</template>
<a-button type="text" @click.prevent="fnGetList()">
<template #icon><ReloadOutlined /></template>
</a-button>
</a-tooltip>
<a-tooltip placement="topRight">
<template #title>{{ t('common.sizeText') }}</template>
<a-dropdown trigger="click">
<a-dropdown placement="bottomRight" trigger="click">
<a-button type="text">
<template #icon>
<ColumnHeightOutlined />
</template>
<template #icon><ColumnHeightOutlined /></template>
</a-button>
<template #overlay>
<a-menu

141
src/views/neUser/sub/index.vue
View File

@@ -1,6 +1,7 @@
<script setup lang="ts">
import { reactive, ref, onMounted, toRaw } from 'vue';
import { PageContainer } from '@ant-design-vue/pro-layout';
// import { Container, Draggable } from 'vue3-smooth-dnd';
import { message, Modal, Form, notification } from 'ant-design-vue/lib';
import { SizeType } from 'ant-design-vue/lib/config-provider';
import { MenuInfo } from 'ant-design-vue/lib/menu/src/interface';
@@ -66,6 +67,8 @@ type TabeStateType = {
loading: boolean;
/**紧凑型 */
size: SizeType;
/**斑马纹 */
striped: boolean;
/**搜索栏 */
seached: boolean;
/**记录数据 */
@@ -76,12 +79,13 @@ type TabeStateType = {
let tableState: TabeStateType = reactive({
loading: false,
size: 'middle',
striped: false,
seached: true,
data: [],
});
/**表格字段列 */
let tableColumns: ColumnsType = [
let tableColumns = reactive<ColumnsType>([
{
title: 'IMSI',
dataIndex: 'imsi',
@@ -153,7 +157,23 @@ let tableColumns: ColumnsType = [
fixed: 'right',
width: 2,
},
];
]);
// /**表格字段列 */
// const tableColumnsState = reactive({
// indeterminate: true,
// checkAll: false,
// columnsTitleList: tableColumns.map(s => s.title),
// });
// /**表格紧凑型变更操作 */
// function fnTableColumnsCheckAllChange(e: any) {
// const checked = e.target.checked;
// console.log(checked)
// tableColumnsState.indeterminate = false
// tableColumnsState.columnsTitleList = checked ? tableColumns.map(s => s.title) : []
// }
/**表格分页器参数 */
let tablePagination = reactive({
@@ -853,6 +873,21 @@ function fnModalUploadImportUpload(file: File) {
});
}
// let items = reactive([
// { id: 1, data: 'Princess Mononoke' },
// { id: 2, data: 'Spirited Away' },
// { id: 3, data: 'My Neighbor Totoro' },
// { id: 4, data: "Howl's Moving Castle" },
// ]);
// function onDrop(dropResult: any) {
// const { removedIndex, addedIndex, payload } = dropResult;
// if (removedIndex !== null && addedIndex !== null) {
// let itemToAdd = payload;
// itemToAdd = items.splice(removedIndex, 1)[0];
// items.splice(addedIndex, 0, itemToAdd);
// }
// }
onMounted(() => {
// 获取网元网元列表
useNeInfoStore()
@@ -1024,20 +1059,67 @@ onMounted(() => {
/>
</a-tooltip>
<a-tooltip>
<template #title>{{ t('common.reloadText') }}</template>
<a-button type="text" @click.prevent="fnGetList()">
<template #icon>
<ReloadOutlined />
</template>
</a-button>
<template #title>{{ t('common.zebra') }}</template>
<a-switch
v-model:checked="tableState.striped"
:checked-children="t('common.switch.show')"
:un-checked-children="t('common.switch.hide')"
size="small"
/>
</a-tooltip>
<a-tooltip>
<template #title>{{ t('common.sizeText') }}</template>
<a-dropdown trigger="click">
<a-button type="text">
<template #icon>
<ColumnHeightOutlined />
<template #title>{{ t('common.reloadText') }}</template>
<a-button type="text" @click.prevent="fnGetList()">
<template #icon><ReloadOutlined /></template>
</a-button>
</a-tooltip>
<!-- <a-tooltip>
<template #title>
{{ t('common.columnSetText') }}
</template>
<a-popover trigger="click" placement="bottomRight">
<template #title>
<div class="table-column-setting-title">
<a-checkbox
v-model:checked="tableColumnsState.checkAll"
:indeterminate="tableColumnsState.indeterminate"
@change="fnTableColumnsCheckAllChange"
>
列展示/排序
</a-checkbox>
<a-button type="link" size="small"> 重置 </a-button>
</div>
</template>
<template #content>
<Container orientation="vertical" @drop="onDrop">
<a-checkbox-group
v-model:value="tableColumnsState.columnsTitleList"
style="width: 100%"
>
<Draggable
v-for="(item, i) in tableColumnsState.columns"
:key="item.id"
>
<div class="table-column-setting-list-item">
<HolderOutlined class="anticon" />
<a-checkbox :value="item"
>{{ i + 1 }} -> {{ item.title }}</a-checkbox
>
</div>
</Draggable>
</a-checkbox-group>
</Container>
</template>
<a-button type="text">
<template #icon><TableOutlined /></template>
</a-button>
</a-popover>
</a-tooltip> -->
<a-tooltip placement="topRight">
<template #title>{{ t('common.sizeText') }}</template>
<a-dropdown placement="bottomRight" trigger="click">
<a-button type="text">
<template #icon><ColumnHeightOutlined /></template>
</a-button>
<template #overlay>
<a-menu
@@ -1390,7 +1472,7 @@ onMounted(() => {
<a-divider orientation="left">4G</a-divider>
<a-row :gutter="16">
<a-col :lg="12" :md="12" :xs="24">
<a-col :lg="24" :md="24" :xs="24">
<a-form-item
label="4G EPS Flag"
name="epsFlag"
@@ -1406,7 +1488,7 @@ onMounted(() => {
</a-select>
</a-form-item>
</a-col>
<a-col :lg="12" :md="12" :xs="24">
<a-col :lg="24" :md="24" :xs="24">
<a-form-item
label="4G EPS User Template Name"
name="epstpl"
@@ -1818,7 +1900,7 @@ onMounted(() => {
<a-divider orientation="left">4G</a-divider>
<a-row :gutter="16">
<a-col :lg="12" :md="12" :xs="24">
<a-col :lg="24" :md="24" :xs="24">
<a-form-item
label="4G EPS Flag"
name="epsFlag"
@@ -1834,7 +1916,7 @@ onMounted(() => {
</a-select>
</a-form-item>
</a-col>
<a-col :lg="12" :md="12" :xs="24">
<a-col :lg="24" :md="24" :xs="24">
<a-form-item
label="4G EPS User Template Name"
name="epstpl"
@@ -2048,4 +2130,29 @@ onMounted(() => {
.table :deep(.ant-pagination) {
padding: 0 24px;
}
.table-column-setting-title {
display: flex;
align-items: center;
justify-content: space-between;
height: 32px;
margin-left: 4px;
}
.table-column-setting-list-item {
display: flex;
align-items: center;
width: 100%;
padding: 4px 16px 4px 0;
}
.table-column-setting-list-item > .anticon {
padding-right: 6px;
cursor: move;
}
.table-column-setting-list-item .ant-checkbox-wrapper {
flex: 1;
margin: 0;
}
</style>