style: 表格组件编辑样式修改
This commit is contained in:
parent
a6139408c7
commit
b6567a8318
|
@ -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>
|
||||||
|
|
||||||
|
|
|
@ -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);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
|
@ -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>
|
||||||
|
|
|
@ -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
|
|
||||||
|
|
|
@ -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>
|
||||||
|
|
|
@ -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;
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
Loading…
Reference in New Issue