fix(系统设置): 增加项目模块选择提醒及bug修改

2024-02-02 13:04:06 +08:00 · 2024-02-02 13:04:06 +08:00 · 7591efb3ca
parent 06579f0783
commit 7591efb3ca
16 changed files with 101 additions and 10 deletions
--- a/frontend/src/assets/style/arco-reset.less
+++ b/frontend/src/assets/style/arco-reset.less
@ -709,6 +709,7 @@
    }
    &:not(:last-child):not(:first-child):not(.arco-pagination-item-ellipsis) {
      border: 1px solid var(--color-text-input-border);
+      border-radius: 3px;
    }
    &-active {
      border-color: rgb(var(--primary-5)) !important;
--- a/frontend/src/components/pure/ms-table/base-table.vue
+++ b/frontend/src/components/pure/ms-table/base-table.vue
@ -140,7 +140,12 @@
                  @blur="handleEditInputBlur(record, item.dataIndex as string, true)"
                  @keydown.enter="handleEditInputBlur(record, item.dataIndex as string, false)"
                />
-                <a-tooltip v-else placement="top" :content="String(record[item.dataIndex as string])">
+                <a-tooltip
+                  v-else
+                  placement="top"
+                  content-class="max-w-[600px]"
+                  :content="String(record[item.dataIndex as string])"
+                >
                  <div class="one-line-text">
                    <slot :name="item.slotName" v-bind="{ record, rowIndex, column, columnConfig: item }">
                      {{ record[item.dataIndex as string] || (attrs.emptyDataShowLine ? '-' : '') }}
@ -318,6 +323,10 @@
    const { selectorStatus } = props;
    if (selectorStatus === SelectAllEnum.CURRENT) {
      const { pageSize, total } = attrs.msPagination as MsPaginationI;
+      if (!attrs.showPagination) {
+        // 不展示分页时直接返回total
+        return total;
+      }
      if (pageSize > total) {
        return total;
      }
--- a/frontend/src/components/pure/ms-table/columnSelector.vue
+++ b/frontend/src/components/pure/ms-table/columnSelector.vue
@ -49,7 +49,7 @@
      <a-divider />
      <div class="mb-2 flex items-center justify-between">
        <div class="text-[var(--color-text-4)]">{{ t('msTable.columnSetting.header') }}</div>
-        <MsButton :disabled="!hasChange" @click="handleReset">{{ t('msTable.columnSetting.resetDefault') }}</MsButton>
+        <MsButton v-if="hasChange" @click="handleReset">{{ t('msTable.columnSetting.resetDefault') }}</MsButton>
      </div>
      <div class="flex-col">
        <div v-for="item in nonSortColumn" :key="item.dataIndex" class="column-item">
@ -140,6 +140,7 @@

  const handleReset = () => {
    loadColumn(props.tableKey);
+    hasChange.value = false;
  };

  const handleModeChange = (value: string | number | boolean) => {
--- a/frontend/src/components/pure/ms-user-admin-div/index.vue
+++ b/frontend/src/components/pure/ms-user-admin-div/index.vue
@ -1,6 +1,8 @@
 <template>
  <div class="flex flex-row flex-nowrap">
-    <div class="flex flex-row flex-nowrap">{{ props.name }}</div>
+    <a-tooltip content-class="max-w-[600px]">
+      <div class="flex flex-row flex-nowrap">{{ characterLimit(props.name) }}</div>
+    </a-tooltip>
    <div v-if="props.isAdmin" class="ml-1 flex flex-row flex-nowrap text-[var(--color-text-4)]">{{
      `(${t('common.admin')})`
    }}</div>
@ -9,6 +11,7 @@

 <script lang="ts" setup>
  import { useI18n } from '@/hooks/useI18n';
+  import { characterLimit } from '@/utils';

  const { t } = useI18n();
  const props = withDefaults(defineProps<{ name?: string; isAdmin?: boolean }>(), { isAdmin: false });
--- a/frontend/src/views/project-management/projectAndPermission/userGroup/userDrawer.vue
+++ b/frontend/src/views/project-management/projectAndPermission/userGroup/userDrawer.vue
@ -100,7 +100,7 @@
      title: 'system.organization.phone',
      dataIndex: 'phone',
    },
-    { title: 'system.organization.operation', slotName: 'operation' },
+    { title: 'system.organization.operation', slotName: 'operation', width: 60 },
  ];

  const { propsRes, propsEvent, loadList, setLoadListParams, setKeyword } = useTable(
--- a/frontend/src/views/setting/organization/project/components/addProjectModal.vue
+++ b/frontend/src/views/setting/organization/project/components/addProjectModal.vue
@ -54,7 +54,7 @@
          />
        </a-form-item>
        <a-form-item field="module" :label="t('system.project.moduleSetting')">
-          <a-checkbox-group v-model="form.moduleIds" :options="moduleOption">
+          <a-checkbox-group v-model="form.moduleIds" :options="moduleOption" @change="handleModuleChange">
            <template #label="{ data }">
              <span>{{ t(data.label) }}</span>
            </template>
@ -71,7 +71,7 @@
          <a-textarea
            v-model="form.description"
            :max-length="1000"
-            :placeholder="t('system.organization.descriptionPlaceholder')"
+            :placeholder="t('system.project.descriptionPlaceholder')"
            allow-clear
            :auto-size="{ minRows: 1 }"
          />
@ -105,6 +105,7 @@

 <script lang="ts" setup>
  import { computed, reactive, ref, watchEffect } from 'vue';
+  import { useIntervalFn } from '@vueuse/core';
  import { Message } from '@arco-design/web-vue';

  import MsIcon from '@/components/pure/ms-icon-font/index.vue';
@ -135,6 +136,18 @@
  const appStore = useAppStore();
  const currentOrgId = computed(() => appStore.currentOrgId);
  const licenseStore = useLicenseStore();
+  const timer = ref(5); // 存储倒计时
+  const { pause, resume } = useIntervalFn(() => {
+    timer.value--;
+  }, 1000);
+  // 初始化组件时关闭
+  pause();
+  // timer 为0时关闭
+  watch(timer, () => {
+    if (timer.value === 0) {
+      pause();
+    }
+  });
  const moduleOption = [
    // { label: 'menu.workbench', value: 'workstation' },
    // { label: 'menu.testPlan', value: 'testPlan' },
@ -182,6 +195,24 @@
    form.enable = true;
    form.moduleIds = allModuleIds;
    form.resourcePoolIds = [];
+    timer.value = 5;
+    Message.clear();
+    pause();
+  };
+  const handleModuleChange = (value: (string | number | boolean)[]) => {
+    if (props.currentProject?.id && timer.value === 5 && props.currentProject.moduleIds?.length) {
+      if (props.currentProject.moduleIds.some((item) => value.includes(item))) {
+        resume();
+        Message.warning({
+          content: () =>
+            h('span', [
+              h('span', t('system.project.afterModule')),
+              h('span', { class: 'ml-[20px] text-[var(--color-text-4)]' }, `${timer.value}s`),
+            ]),
+          duration: 5000,
+        });
+      }
+    }
  };
  const handleCancel = (shouldSearch: boolean) => {
    emit('cancel', shouldSearch);
--- a/frontend/src/views/setting/organization/project/components/userDrawer.vue
+++ b/frontend/src/views/setting/organization/project/components/userDrawer.vue
@ -99,7 +99,11 @@
      title: 'system.organization.phone',
      dataIndex: 'phone',
    },
-    { title: 'system.organization.operation', slotName: 'operation' },
+    {
+      title: 'system.organization.operation',
+      slotName: 'operation',
+      width: 60,
+    },
  ];

  const { propsRes, propsEvent, loadList, setLoadListParams, setKeyword } = useTable(
--- a/frontend/src/views/setting/organization/project/locale/en-US.ts
+++ b/frontend/src/views/setting/organization/project/locale/en-US.ts
@ -77,4 +77,5 @@ export default {
  'system.project.updateProjectSuccess': 'Update project success',
  'system.project.resourcePool': 'Resource pool',
  'system.project.removeName': 'Confirm remove the {name}',
+  'system.project.descriptionPlaceholder': 'Please describe the project.',
 };
--- a/frontend/src/views/setting/organization/project/locale/zh-CN.ts
+++ b/frontend/src/views/setting/organization/project/locale/zh-CN.ts
@ -71,4 +71,5 @@ export default {
  'system.project.updateProjectSuccess': '更新项目成功',
  'system.project.resourcePool': '资源池',
  'system.project.removeName': '确认移除 {name} 这个用户吗？',
+  'system.project.descriptionPlaceholder': '请对该项目进行描述',
 };
--- a/frontend/src/views/setting/organization/project/orgProject.vue
+++ b/frontend/src/views/setting/organization/project/orgProject.vue
@ -187,6 +187,7 @@
      width: 180,
      showDrag: true,
      dataIndex: 'createUser',
+      showTooltip: true,
    },
    {
      title: 'system.organization.createTime',
--- a/frontend/src/views/setting/system/organizationAndProject/components/addProjectModal.vue
+++ b/frontend/src/views/setting/system/organizationAndProject/components/addProjectModal.vue
@ -6,6 +6,7 @@
    title-align="start"
    unmount-on-close
    :mask-closable="false"
+    :ok-loading="loading"
    @cancel="handleCancel(false)"
  >
    <template #title>
@ -57,7 +58,7 @@
          />
        </a-form-item>
        <a-form-item field="module" :label="t('system.project.moduleSetting')">
-          <a-checkbox-group v-model="form.moduleIds" :options="moduleOption">
+          <a-checkbox-group v-model="form.moduleIds" :options="moduleOption" @change="handleModuleChange">
            <template #label="{ data }">
              <span>{{ t(data.label) }}</span>
            </template>
@ -74,7 +75,7 @@
          <a-textarea
            v-model="form.description"
            :max-length="1000"
-            :placeholder="t('system.organization.descriptionPlaceholder')"
+            :placeholder="t('system.project.descriptionPlaceholder')"
            allow-clear
            :auto-size="{ minRows: 1 }"
          />
@ -108,6 +109,7 @@

 <script lang="ts" setup>
  import { computed, reactive, ref, watchEffect } from 'vue';
+  import { useIntervalFn } from '@vueuse/core';
  import { Message } from '@arco-design/web-vue';

  import MsIcon from '@/components/pure/ms-icon-font/index.vue';
@ -137,6 +139,18 @@
  const isEdit = computed(() => !!props.currentProject?.id);
  const affiliatedOrgOption = ref<SystemOrgOption[]>([]);
  const licenseStore = useLicenseStore();
+  const timer = ref(5); // 存储倒计时
+  const { pause, resume } = useIntervalFn(() => {
+    timer.value--;
+  }, 1000);
+  // 初始化组件时关闭
+  pause();
+  // timer 为0时关闭
+  watch(timer, () => {
+    if (timer.value === 0) {
+      pause();
+    }
+  });
  const moduleOption = [
    // { label: 'menu.workbench', value: 'workstation' },
    // { label: 'menu.testPlan', value: 'testPlan' },
@ -179,6 +193,10 @@
    form.description = '';
    form.enable = true;
    form.moduleIds = allModuleIds;
+    form.resourcePoolIds = [];
+    timer.value = 5;
+    Message.clear();
+    pause();
  };
  const handleCancel = (shouldSearch: boolean) => {
    emit('cancel', shouldSearch);
@ -217,6 +235,22 @@
      console.error(error);
    }
  };
+
+  const handleModuleChange = (value: (string | number | boolean)[]) => {
+    if (props.currentProject?.id && timer.value === 5 && props.currentProject.moduleIds?.length) {
+      if (props.currentProject.moduleIds.some((item) => value.includes(item))) {
+        resume();
+        Message.warning({
+          content: () =>
+            h('span', [
+              h('span', t('system.project.afterModule')),
+              h('span', { class: 'ml-[20px] text-[var(--color-text-4)]' }, `${timer.value}s`),
+            ]),
+          duration: 5000,
+        });
+      }
+    }
+  };
  watchEffect(() => {
    if (props.currentProject) {
      form.id = props.currentProject.id;
--- a/frontend/src/views/setting/system/organizationAndProject/components/systemOrganization.vue
+++ b/frontend/src/views/setting/system/organizationAndProject/components/systemOrganization.vue
@ -181,6 +181,7 @@
      title: 'system.organization.creator',
      slotName: 'creator',
      dataIndex: 'createUser',
+      showTooltip: true,
    },
    {
      title: 'system.organization.createTime',
--- a/frontend/src/views/setting/system/organizationAndProject/components/systemProject.vue
+++ b/frontend/src/views/setting/system/organizationAndProject/components/systemProject.vue
@ -176,6 +176,7 @@
      slotName: 'creator',
      dataIndex: 'createUser',
      width: 200,
+      showTooltip: true,
    },
    {
      title: 'system.organization.createTime',
--- a/frontend/src/views/setting/system/organizationAndProject/components/userDrawer.vue
+++ b/frontend/src/views/setting/system/organizationAndProject/components/userDrawer.vue
@ -105,7 +105,7 @@
      title: 'system.organization.phone',
      dataIndex: 'phone',
    },
-    { title: 'system.organization.operation', slotName: 'operation' },
+    { title: 'system.organization.operation', slotName: 'operation', width: 60 },
  ];

  const { propsRes, propsEvent, loadList, setLoadListParams, setKeyword } = useTable(
--- a/frontend/src/views/setting/system/organizationAndProject/locale/en-US.ts
+++ b/frontend/src/views/setting/system/organizationAndProject/locale/en-US.ts
@ -77,4 +77,6 @@ export default {
  'system.project.removeTip': "Remove it, and you'll lose access to the project.",
  'system.organization.projectIsDisabled': 'The project has ended and can be opened in the project list.',
  'system.project.searchPlaceholder': 'Search by name or id',
+  'system.project.afterModule':
+    'After the module is canceled, users will be unable to access the specified module, and existing data will remain intact',
 };
--- a/frontend/src/views/setting/system/organizationAndProject/locale/zh-CN.ts
+++ b/frontend/src/views/setting/system/organizationAndProject/locale/zh-CN.ts
@ -74,4 +74,5 @@ export default {
  'system.project.deleteName': '确认删除 {name} 这个项目吗？',
  'system.project.deleteTip': '删除后，系统会在 30天 后执行删除项目 (含项目下所有业务数据)，请谨慎操作！',
  'system.project.searchPlaceholder': '通过ID或项目名称搜索',
+  'system.project.afterModule': '取消模块后用户将无法进入指定模块，已存在的数据会继续保留',
 };