style: 表格组件编辑样式修改

frontend/src/components/pure/ms-table/base-table.vue

@@ -72,6 +72,31 @@
               </template>
               <template v-else-if="item.showTooltip">
                 <a-tooltip placement="top" :content="record[item.dataIndex as string]">
+                  <div class="flex flex-row flex-nowrap items-center">
+                    <a-input
+                      v-if="editActiveKey === rowIndex && item.dataIndex === editKey"
+                      ref="currentInputRef"
+                      v-model="record[item.dataIndex as string]"
+                      @blur="handleEditInputBlur()"
+                      @press-enter="handleEditInputEnter(record)"
+                    />
+                    <template v-else>
+                      <slot :name="item.slotName" v-bind="{ record, rowIndex, column }">
+                        <div class="one-line-text">{{ record[item.dataIndex as string] || '-' }}</div>
+                      </slot>
+                      <MsIcon
+                        v-if="item.editable && item.dataIndex === editKey && !record.deleted"
+                        class="ml-2 cursor-pointer"
+                        :class="{ 'ms-table-edit-active': editActiveKey === rowIndex }"
+                        type="icon-icon_edit_outlined"
+                        @click="handleEdit(rowIndex)"
+                      />
+                    </template>
+                  </div>
+                </a-tooltip>
+              </template>
+              <template v-else>
+                <div class="flex flex-row flex-nowrap items-center">
                   <a-input
                     v-if="editActiveKey === rowIndex && item.dataIndex === editKey"
                     ref="currentInputRef"
@@ -79,36 +104,19 @@
                     @blur="handleEditInputBlur()"
                     @press-enter="handleEditInputEnter(record)"
                   />
-                  <slot v-else :name="item.slotName" v-bind="{ record, rowIndex, column }">
-                    <span>{{ record[item.dataIndex as string] }}</span>
-                  </slot>
-                  <MsIcon
-                    v-if="item.editable && item.dataIndex === editKey && !record.deleted"
-                    class="ml-2 cursor-pointer"
-                    :class="{ 'ms-table-edit-active': editActiveKey === rowIndex }"
-                    type="icon-icon_edit_outlined"
-                    @click="handleEdit(rowIndex)"
-                  />
-                </a-tooltip>
-              </template>
-              <template v-else>
-                <a-input
-                  v-if="editActiveKey === rowIndex && item.dataIndex === editKey"
-                  ref="currentInputRef"
-                  v-model="record[item.dataIndex as string]"
-                  @blur="handleEditInputBlur()"
-                  @press-enter="handleEditInputEnter(record)"
-                />
-                <slot v-else :name="item.slotName" v-bind="{ record, rowIndex, column }">
-                  <span>{{ record[item.dataIndex as string] || '-' }}</span>
-                </slot>
-                <MsIcon
-                  v-if="item.editable && item.dataIndex === editKey && !record.deleted"
-                  class="ml-2 cursor-pointer"
-                  :class="{ 'ms-table-edit-active': editActiveKey === rowIndex }"
-                  type="icon-icon_edit_outlined"
-                  @click="handleEdit(rowIndex)"
-                />
+                  <template v-else>
+                    <slot :name="item.slotName" v-bind="{ record, rowIndex, column }">
+                      <div class="one-line-text max-w-[300px]">{{ record[item.dataIndex as string] || '-' }}</div>
+                    </slot>
+                    <MsIcon
+                      v-if="item.editable && item.dataIndex === editKey && !record.deleted"
+                      class="ml-2 cursor-pointer"
+                      :class="{ 'ms-table-edit-active': editActiveKey === rowIndex }"
+                      type="icon-icon_edit_outlined"
+                      @click="handleEdit(rowIndex)"
+                    />
+                  </template>
+                </div>
               </template>
             </div>
           </template>

frontend/src/views/setting/organization/project/components/addProjectModal.vue

@@ -51,7 +51,7 @@
         <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.organization.description')">
+        <a-form-item field="module" :label="t('system.project.moduleSetting')">
           <a-checkbox-group v-model="form.moduleIds" :options="moduleOption">
             <template #label="{ data }">
               <span>{{ t(data.label) }}</span>
@@ -141,8 +141,17 @@
   watchEffect(() => {
     currentVisible.value = props.visible;
   });
+
+  const formReset = () => {
+    form.name = '';
+    form.userIds = [];
+    form.organizationId = currentOrgId.value;
+    form.description = '';
+    form.enable = true;
+    form.moduleIds = [];
+  };
   const handleCancel = (shouldSearch: boolean) => {
-    formRef.value?.resetFields();
+    formReset();
     emit('cancel', shouldSearch);
   };
 

frontend/src/views/setting/organization/project/orgProject.vue

@@ -13,7 +13,7 @@
     </div>
     <MsBaseTable v-bind="propsRes" v-on="propsEvent">
       <template #name="{ record }">
-        <span class="one-text-line">{{ record.name }}</span>
+        <span class="one-line-text">{{ record.name }}</span>
         <a-tooltip background-color="#FFFFFF">
           <template #content>
             <span class="text-[var(--color-text-1)]">{{ t('system.project.revokeDeleteToolTip') }}</span>

frontend/src/views/setting/system/organizationAndProject/components/addProjectModal.vue

@@ -5,7 +5,7 @@
     class="ms-modal-form ms-modal-medium"
     :ok-text="isEdit ? t('common.update') : t('common.create')"
     unmount-on-close
-    @cancel="handleCancel"
+    @cancel="handleCancel(false)"
   >
     <template #title>
       <span v-if="isEdit">
@@ -53,7 +53,7 @@
         <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.organization.description')">
+        <a-form-item field="module" :label="t('system.project.moduleSetting')">
           <a-checkbox-group v-model="form.moduleIds" :options="moduleOption">
             <template #label="{ data }">
               <span>{{ t(data.label) }}</span>
@@ -72,7 +72,7 @@
           </a-tooltip>
         </div>
         <div class="flex flex-row gap-[14px]">
-          <a-button type="secondary" :loading="loading" @click="handleCancel">
+          <a-button type="secondary" :loading="loading" @click="handleCancel(false)">
             {{ t('common.cancel') }}
           </a-button>
           <a-button type="primary" :loading="loading" @click="handleBeforeOk">
@@ -119,8 +119,7 @@
   ];
 
   const emit = defineEmits<{
-    (e: 'cancel'): void;
-    (e: 'submit'): void;
+    (e: 'cancel', shouldSearch: boolean): void;
   }>();
 
   const form = reactive<CreateOrUpdateSystemProjectParams>({
@@ -141,9 +140,18 @@
   watchEffect(() => {
     currentVisible.value = props.visible;
   });
-  const handleCancel = () => {
-    formRef.value?.resetFields();
-    emit('cancel');
+
+  const formReset = () => {
+    form.name = '';
+    form.userIds = [];
+    form.organizationId = '';
+    form.description = '';
+    form.enable = true;
+    form.moduleIds = [];
+  };
+  const handleCancel = (shouldSearch: boolean) => {
+    formReset();
+    emit('cancel', shouldSearch);
   };
 
   const handleBeforeOk = async () => {
@@ -160,8 +168,7 @@
             : t('system.organization.createOrganizationSuccess')
         );
 
-        handleCancel();
-        emit('submit');
+        handleCancel(true);
       } catch (error) {
         // eslint-disable-next-line no-console
         console.error(error);
@@ -192,4 +199,3 @@
     }
   });
 </script>
-@/api/modules/setting/organizationAndProject

frontend/src/views/setting/system/organizationAndProject/components/systemOrganization.vue

@@ -1,7 +1,7 @@
 <template>
   <MsBaseTable v-bind="propsRes" v-on="propsEvent">
     <template #name="{ record }">
-      <span class="one-text-line">{{ record.name }}</span>
+      <div class="one-line-text max-w-[156px]">{{ record.name }}</div>
       <a-tooltip background-color="#FFFFFF">
         <template #content>
           <span class="text-[var(--color-text-1)]">{{ t('system.organization.revokeDeleteToolTip') }}</span>

frontend/src/views/setting/system/organizationAndProject/components/systemProject.vue

@@ -1,7 +1,7 @@
 <template>
   <MsBaseTable v-bind="propsRes" v-on="propsEvent">
     <template #name="{ record }">
-      <span class="one-text-line">{{ record.name }}</span>
+      <span class="one-line-text">{{ record.name }}</span>
       <a-tooltip background-color="#FFFFFF">
         <template #content>
           <span class="text-[var(--color-text-1)]">{{ t('system.project.revokeDeleteToolTip') }}</span>
@@ -36,7 +36,6 @@
     :current-project="currentUpdateProject"
     :visible="addProjectVisible"
     @cancel="handleAddProjectModalCancel"
-    @submit="fetchData"
   />
   <AddUserModal
     :project-id="currentProjectId"
@@ -266,7 +265,10 @@
   const handleAddUserModalCancel = () => {
     userVisible.value = false;
   };
-  const handleAddProjectModalCancel = () => {
+  const handleAddProjectModalCancel = (shouldSearch: boolean) => {
+    if (shouldSearch) {
+      fetchData();
+    }
     addProjectVisible.value = false;
   };