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

This commit is contained in:
RubyLiu 2023-09-01 12:34:27 +08:00 committed by fit2-zhao
parent a6139408c7
commit b6567a8318
6 changed files with 73 additions and 48 deletions

View File

@ -72,6 +72,7 @@
</template> </template>
<template v-else-if="item.showTooltip"> <template v-else-if="item.showTooltip">
<a-tooltip placement="top" :content="record[item.dataIndex as string]"> <a-tooltip placement="top" :content="record[item.dataIndex as string]">
<div class="flex flex-row flex-nowrap items-center">
<a-input <a-input
v-if="editActiveKey === rowIndex && item.dataIndex === editKey" v-if="editActiveKey === rowIndex && item.dataIndex === editKey"
ref="currentInputRef" ref="currentInputRef"
@ -79,8 +80,9 @@
@blur="handleEditInputBlur()" @blur="handleEditInputBlur()"
@press-enter="handleEditInputEnter(record)" @press-enter="handleEditInputEnter(record)"
/> />
<slot v-else :name="item.slotName" v-bind="{ record, rowIndex, column }"> <template v-else>
<span>{{ record[item.dataIndex as string] }}</span> <slot :name="item.slotName" v-bind="{ record, rowIndex, column }">
<div class="one-line-text">{{ record[item.dataIndex as string] || '-' }}</div>
</slot> </slot>
<MsIcon <MsIcon
v-if="item.editable && item.dataIndex === editKey && !record.deleted" v-if="item.editable && item.dataIndex === editKey && !record.deleted"
@ -89,9 +91,12 @@
type="icon-icon_edit_outlined" type="icon-icon_edit_outlined"
@click="handleEdit(rowIndex)" @click="handleEdit(rowIndex)"
/> />
</template>
</div>
</a-tooltip> </a-tooltip>
</template> </template>
<template v-else> <template v-else>
<div class="flex flex-row flex-nowrap items-center">
<a-input <a-input
v-if="editActiveKey === rowIndex && item.dataIndex === editKey" v-if="editActiveKey === rowIndex && item.dataIndex === editKey"
ref="currentInputRef" ref="currentInputRef"
@ -99,8 +104,9 @@
@blur="handleEditInputBlur()" @blur="handleEditInputBlur()"
@press-enter="handleEditInputEnter(record)" @press-enter="handleEditInputEnter(record)"
/> />
<slot v-else :name="item.slotName" v-bind="{ record, rowIndex, column }"> <template v-else>
<span>{{ record[item.dataIndex as string] || '-' }}</span> <slot :name="item.slotName" v-bind="{ record, rowIndex, column }">
<div class="one-line-text max-w-[300px]">{{ record[item.dataIndex as string] || '-' }}</div>
</slot> </slot>
<MsIcon <MsIcon
v-if="item.editable && item.dataIndex === editKey && !record.deleted" v-if="item.editable && item.dataIndex === editKey && !record.deleted"
@ -112,6 +118,8 @@
</template> </template>
</div> </div>
</template> </template>
</div>
</template>
</a-table-column> </a-table-column>
</template> </template>

View File

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

View File

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

View File

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

View File

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

View File

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