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

2023-11-24 19:16:39 +08:00
parent 62a15150b6
commit 44ee479b32
7 changed files with 148 additions and 30 deletions
--- a/package.json
+++ b/package.json
@@ -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": {
--- a/src/components/DraggableModal/index.vue
+++ b/src/components/DraggableModal/index.vue
@@ -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">
--- a/src/i18n/locales/en-US.ts
+++ b/src/i18n/locales/en-US.ts
@@ -36,6 +36,7 @@ export default {
    searchBarText: 'Search bar',
    tableStripedText: 'Form Zebra',
    reloadText: 'Refresh',
+    columnSetText: 'Column Setting',
    sizeText: 'Density',
    size: {
      default: 'Default',
--- a/src/i18n/locales/zh-CN.ts
+++ b/src/i18n/locales/zh-CN.ts
@@ -36,6 +36,7 @@ export default {
    searchBarText: '搜索栏',
    tableStripedText: '表格斑马纹',
    reloadText: '刷新',
+    columnSetText: '列设置',
    sizeText: '密度',
    size: {
      default: '默认',
--- a/src/typings/vite-env.d.ts
+++ b/src/typings/vite-env.d.ts
@@ -6,3 +6,5 @@ declare module '*.vue' {
  const component: DefineComponent<{}, {}, any>;
  export default component;
 }
+
+declare module 'vue3-smooth-dnd';
--- a/src/views/neUser/auth/index.vue
+++ b/src/views/neUser/auth/index.vue
@@ -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
--- a/src/views/neUser/sub/index.vue
+++ b/src/views/neUser/sub/index.vue
@@ -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">
+            <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>
-                  <ColumnHeightOutlined />
-                </template>
+                <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>