style: table 样式修改&项目前端问题修改

2023-09-05 15:38:57 +08:00 · 2023-09-05 15:38:57 +08:00 · 52093c562f
parent 43394a1b28
commit 52093c562f
12 changed files with 75 additions and 33 deletions
--- a/frontend/package.json
+++ b/frontend/package.json
@ -38,7 +38,7 @@
    "@7polo/kity": "2.0.8",
    "@7polo/kityminder-core": "1.4.53",
    "@arco-design/web-vue": "^2.51.0",
-    "@arco-themes/vue-ms-theme-default": "^0.0.28",
+    "@arco-themes/vue-ms-theme-default": "^0.0.29",
    "@form-create/arco-design": "^3.1.22",
    "@types/color": "^3.0.3",
    "@vueuse/core": "^10.2.1",
--- a/frontend/src/components/pure/ms-table/base-table.vue
+++ b/frontend/src/components/pure/ms-table/base-table.vue
@ -77,8 +77,14 @@
                  </slot>
                </div>
              </template>
+              <template v-else-if="item.slotName === SpecialColumnEnum.OPERATION">
+                <slot name="operation" v-bind="{ record, rowIndex }" />
+              </template>
+              <template v-else-if="item.slotName === SpecialColumnEnum.ACTION">
+                <slot name="action" v-bind="{ record, rowIndex }" />
+              </template>
              <template v-else-if="item.showTooltip">
-                <a-tooltip placement="top" :content="record[item.dataIndex as string]">
+                <a-tooltip placement="top" :content="String(record[item.dataIndex as string])">
                  <a-input
                    v-if="editActiveKey === rowIndex && item.dataIndex === editKey"
                    ref="currentInputRef"
--- a/frontend/src/components/pure/ms-table/columnSelector.vue
+++ b/frontend/src/components/pure/ms-table/columnSelector.vue
@ -139,13 +139,17 @@
    margin-left: 16px;
    color: var(--color-text-4);
    background-color: var(--color-text-10);
+    cursor: pointer;
+    &:hover {
+      color: rgba(var(--primary-5));
+    }
  }
  .mode-button {
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    .active-color {
-      color: var(--color-primary-5);
+      color: rgba(var(--primary-5));
    }
    .mode-button-title {
      margin-left: 4px;
--- a/frontend/src/components/pure/ms-table/select-all.vue
+++ b/frontend/src/components/pure/ms-table/select-all.vue
@ -69,13 +69,15 @@
    flex-flow: row nowrap;
    align-items: center;
    .dropdown-icon {
-      margin-left: 2px;
+      margin-left: 4px;
      font-size: 12px;
-      color: rgb(var(--primary-6));
+      border-radius: 50%;
+      color: var(--color-text-4);
+      background-color: rgb(var(--primary-3));
    }
    .dropdown-icon:hover {
-      border-radius: 50%;
-      background-color: rgb(var(--primary-3));
+      color: rgb(var(--primary-5));
+      background-color: transparent;
    }
  }
 </style>
--- a/frontend/src/views/setting/organization/project/components/addProjectModal.vue
+++ b/frontend/src/views/setting/organization/project/components/addProjectModal.vue
@ -17,7 +17,7 @@
      </span>
    </template>
    <div class="form">
-      <a-form ref="formRef" :model="form" size="large" :style="{ width: '600px' }" layout="vertical">
+      <a-form ref="formRef" :model="form" size="large" :style="{ width: '632px' }" layout="vertical">
        <a-form-item
          field="name"
          required
@ -48,9 +48,6 @@
            }"
          />
        </a-form-item>
-        <a-form-item field="description" :label="t('system.organization.description')">
-          <a-input v-model="form.description" :placeholder="t('system.organization.descriptionPlaceholder')" />
-        </a-form-item>
        <a-form-item field="module" :label="t('system.project.moduleSetting')">
          <a-checkbox-group v-model="form.moduleIds" :options="moduleOption">
            <template #label="{ data }">
@ -58,12 +55,15 @@
            </template>
          </a-checkbox-group>
        </a-form-item>
+        <a-form-item field="description" :label="t('system.organization.description')">
+          <a-input v-model="form.description" :placeholder="t('system.organization.descriptionPlaceholder')" />
+        </a-form-item>
      </a-form>
    </div>
    <template #footer>
      <div class="flex flex-row justify-between">
        <div class="flex flex-row items-center gap-[4px]">
-          <a-switch v-model="form.enable" />
+          <a-switch v-model="form.enable" size="small" />
          <span>{{ t('system.organization.status') }}</span>
          <a-tooltip :content="t('system.project.createTip')" position="top">
            <MsIcon type="icon-icon-maybe_outlined" class="text-[var(--color-text-4)]" />
@ -104,7 +104,7 @@
  const formRef = ref<FormInstance>();

  const loading = ref(false);
-  const isEdit = computed(() => !!props.currentProject?.id);
+  const isEdit = computed(() => !!props.currentProject);
  const affiliatedOrgOption = ref<SystemOrgOption[]>([]);
  const appStore = useAppStore();
  const currentOrgId = computed(() => appStore.currentOrgId);
@ -188,7 +188,7 @@
  };
  watchEffect(() => {
    initAffiliatedOrgOption();
-    if (props.currentProject) {
+    if (isEdit.value && props.currentProject) {
      form.id = props.currentProject.id;
      form.name = props.currentProject.name;
      form.description = props.currentProject.description;
--- a/frontend/src/views/setting/organization/project/components/userDrawer.vue
+++ b/frontend/src/views/setting/organization/project/components/userDrawer.vue
@ -68,6 +68,7 @@
  const props = defineProps<projectDrawerProps>();
  const emit = defineEmits<{
    (e: 'cancel'): void;
+    (e: 'requestFetchData'): void;
  }>();

  const currentVisible = ref(props.visible);
@ -80,10 +81,13 @@
    {
      title: 'system.organization.userName',
      slotName: 'name',
+      showTooltip: true,
+      width: 200,
    },
    {
      title: 'system.organization.email',
      dataIndex: 'email',
+      showTooltip: true,
      width: 200,
    },
    {
@ -123,6 +127,7 @@
    userVisible.value = false;
    if (shouldSearch) {
      fetchData();
+      emit('requestFetchData');
    }
  };

--- a/frontend/src/views/setting/organization/project/locale/zh-CN.ts
+++ b/frontend/src/views/setting/organization/project/locale/zh-CN.ts
@ -62,7 +62,7 @@ export default {
  'system.project.affiliatedOrgPlaceholder': '请选择所属组织',
  'system.project.projectAdmin': '项目管理员',
  'system.project.projectAdminPlaceholder': '默认选择创建项目人为项目管理员',
-  'system.project.moduleSetting': '模块设置',
+  'system.project.moduleSetting': '启用模块',
  'system.project.projectNameRequired': '项目名称不能为空',
  'system.project.createTip': '项目启用后，将展示在项目切换列表',
  'system.project.affiliatedOrgRequired': '所属组织不能为空',
--- a/frontend/src/views/setting/organization/project/orgProject.vue
+++ b/frontend/src/views/setting/organization/project/orgProject.vue
@ -44,9 +44,13 @@
        </template>
      </template>
    </MsBaseTable>
-    <AddProjectModal :visible="addProjectVisible" @cancel="handleAddProjectModalCancel" />
+    <AddProjectModal
+      :visible="addProjectVisible"
+      :current-project="currentUpdateProject"
+      @cancel="handleAddProjectModalCancel"
+    />
    <AddUserModal :project-id="currentProjectId" :visible="userVisible" @cancel="handleAddUserModalCancel" />
-    <UserDrawer v-bind="currentUserDrawer" @cancel="handleUserDrawerCancel" />
+    <UserDrawer v-bind="currentUserDrawer" @request-fetch-data="fetchData" @cancel="handleUserDrawerCancel" />
  </MsCard>
 </template>

@ -185,6 +189,7 @@
  ];

  const showAddProject = () => {
+    currentUpdateProject.value = undefined;
    addProjectVisible.value = true;
  };

@ -261,7 +266,6 @@

  const handleUserDrawerCancel = () => {
    currentUserDrawer.visible = false;
-    fetchData();
  };

  const handleAddUserModalCancel = (shouldSearch: boolean) => {
--- a/frontend/src/views/setting/system/organizationAndProject/components/systemOrganization.vue
+++ b/frontend/src/views/setting/system/organizationAndProject/components/systemOrganization.vue
@ -48,7 +48,7 @@
    @submit="fetchData"
  />
  <ProjectDrawer v-bind="currentProjectDrawer" @cancel="handleProjectDrawerCancel" />
-  <UserDrawer v-bind="currentUserDrawer" @cancel="handleUserDrawerCancel" />
+  <UserDrawer v-bind="currentUserDrawer" @request-fetch-data="fetchData" @cancel="handleUserDrawerCancel" />
 </template>

 <script lang="ts" setup>
@ -255,23 +255,23 @@

  const handleProjectDrawerCancel = () => {
    currentProjectDrawer.visible = false;
-    fetchData();
  };

  const showProjectDrawer = (record: TableData) => {
+    currentUserDrawer.visible = false;
    currentProjectDrawer.visible = true;
    currentProjectDrawer.organizationId = record.id;
    currentProjectDrawer.currentName = record.name;
  };

  const showUserDrawer = (record: TableData) => {
+    currentProjectDrawer.visible = false;
    currentUserDrawer.visible = true;
    currentUserDrawer.organizationId = record.id;
  };

  const handleUserDrawerCancel = () => {
    currentUserDrawer.visible = false;
-    fetchData();
  };

  const handleAddUserModalCancel = () => {
--- a/frontend/src/views/setting/system/organizationAndProject/components/systemProject.vue
+++ b/frontend/src/views/setting/system/organizationAndProject/components/systemProject.vue
@ -43,7 +43,12 @@
    @submit="fetchData"
    @cancel="handleAddUserModalCancel"
  />
-  <UserDrawer :project-id="currentProjectId" v-bind="currentUserDrawer" @cancel="handleUserDrawerCancel" />
+  <UserDrawer
+    :project-id="currentProjectId"
+    v-bind="currentUserDrawer"
+    @request-fetch-data="fetchData"
+    @cancel="handleUserDrawerCancel"
+  />
 </template>

 <script lang="ts" setup>
--- a/frontend/src/views/setting/system/organizationAndProject/components/userDrawer.vue
+++ b/frontend/src/views/setting/system/organizationAndProject/components/userDrawer.vue
@ -44,7 +44,7 @@
    :organization-id="props.organizationId"
    :visible="userVisible"
    @cancel="handleHideUserModal"
-    @submit="fetchData"
+    @submit="handleAddMembeSubmit"
  />
 </template>

@ -72,6 +72,7 @@
  const props = defineProps<projectDrawerProps>();
  const emit = defineEmits<{
    (e: 'cancel'): void;
+    (e: 'requestFetchData'): void;
  }>();

  const currentVisible = ref(props.visible);
@ -84,11 +85,15 @@
    {
      title: 'system.organization.userName',
      slotName: 'name',
+      dataIndex: 'nameTooltip',
+      showTooltip: true,
+      width: 200,
    },
    {
      title: 'system.organization.email',
      dataIndex: 'email',
      width: 200,
+      showTooltip: true,
    },
    {
      title: 'system.organization.phone',
@ -97,14 +102,21 @@
    { title: 'system.organization.operation', slotName: 'operation' },
  ];

-  const { propsRes, propsEvent, loadList, setLoadListParams, setKeyword } = useTable(postUserTableByOrgIdOrProjectId, {
+  const { propsRes, propsEvent, loadList, setLoadListParams, setKeyword } = useTable(
+    postUserTableByOrgIdOrProjectId,
+    {
      columns: projectColumn,
      showSetting: false,
      scroll: { y: 'auto', x: '600px' },
      selectable: false,
      size: 'small',
      noDisable: false,
-  });
+    },
+    (record: any) => ({
+      ...record,
+      nameTooltip: record.name + (record.adminFlag ? `(${t('common.admin')})` : ''),
+    })
+  );

  async function searchUser() {
    setKeyword(keyword.value);
@ -128,6 +140,10 @@
  const handleAddMember = () => {
    userVisible.value = true;
  };
+  const handleAddMembeSubmit = () => {
+    fetchData();
+    emit('requestFetchData');
+  };

  const handleHideUserModal = () => {
    userVisible.value = false;
--- a/frontend/src/views/setting/system/user/index.vue
+++ b/frontend/src/views/setting/system/user/index.vue
@ -27,7 +27,7 @@
      @batch-action="handleTableBatch"
    >
      <template #organization="{ record }">
-        <MsTagGroup :tag-list="record.organizationList"> </MsTagGroup>
+        <MsTagGroup theme="outline" :tag-list="record.organizationList"> </MsTagGroup>
      </template>
      <template #userRole="{ record }">
        <MsTagGroup :tag-list="record.userRoleList" type="primary" theme="outline"> </MsTagGroup>
@ -261,7 +261,7 @@
    {
      tableKey: TableKeyEnum.SYSTEM_USER,
      columns,
-      scroll: { x: 1200 },
+      size: 'default',
      selectable: true,
    },
    (record) => ({