feat: 部分组件调整
This commit is contained in:
parent
025965b4ee
commit
aaf949113e
|
@ -1,29 +1,31 @@
|
|||
<template>
|
||||
<div class="relative h-full">
|
||||
<div class="card-header">
|
||||
<div class="back-btn" @click="back"><icon-arrow-left /></div>
|
||||
<div class="text-[var(--color-text-000)]">{{ props.title }}</div>
|
||||
</div>
|
||||
<a-divider class="my-[16px]" />
|
||||
<a-scrollbar class="mt-[16px]" style="overflow-y: auto; height: calc(100vh - 256px)">
|
||||
<slot></slot>
|
||||
</a-scrollbar>
|
||||
<div
|
||||
v-if="!hideFooter"
|
||||
class="relative z-10 m-[0_-24px_-24px] flex justify-end gap-[16px] p-[24px] shadow-[0_-1px_4px_rgba(2,2,2,0.1)]"
|
||||
>
|
||||
<div class="ml-0 mr-auto">
|
||||
<slot name="footerLeft"></slot>
|
||||
<a-spin style="display: block" :loading="props.loading">
|
||||
<div class="relative h-full">
|
||||
<div class="card-header">
|
||||
<div class="back-btn" @click="back"><icon-arrow-left /></div>
|
||||
<div class="text-[var(--color-text-000)]">{{ props.title }}</div>
|
||||
</div>
|
||||
<a-divider class="my-[16px]" />
|
||||
<a-scrollbar class="mt-[16px]" style="overflow-y: auto; height: calc(100vh - 256px)">
|
||||
<slot></slot>
|
||||
</a-scrollbar>
|
||||
<div
|
||||
v-if="!hideFooter"
|
||||
class="relative z-10 m-[0_-24px_-24px] flex justify-end gap-[16px] p-[24px] shadow-[0_-1px_4px_rgba(2,2,2,0.1)]"
|
||||
>
|
||||
<div class="ml-0 mr-auto">
|
||||
<slot name="footerLeft"></slot>
|
||||
</div>
|
||||
<slot name="footerRight">
|
||||
<a-button type="secondary" @click="back">{{ t('mscard.defaultCancelText') }}</a-button>
|
||||
<a-button v-if="!props.hideContinue" type="secondary" @click="emit('saveAndContinue')">
|
||||
{{ t('mscard.defaultSaveAndContinueText') }}
|
||||
</a-button>
|
||||
<a-button type="primary" @click="emit('save')">{{ t('mscard.defaultConfirm') }}</a-button>
|
||||
</slot>
|
||||
</div>
|
||||
<slot name="footerRight">
|
||||
<a-button type="secondary" @click="back">{{ t('mscard.defaultCancelText') }}</a-button>
|
||||
<a-button v-if="!props.hideContinue" type="secondary" @click="emit('saveAndContinue')">
|
||||
{{ t('mscard.defaultSaveAndContinueText') }}
|
||||
</a-button>
|
||||
<a-button type="primary" @click="emit('save')">{{ t('mscard.defaultConfirm') }}</a-button>
|
||||
</slot>
|
||||
</div>
|
||||
</div>
|
||||
</a-spin>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
|
@ -36,6 +38,7 @@
|
|||
hideContinue?: boolean;
|
||||
handleBack?: () => void;
|
||||
hideFooter?: boolean;
|
||||
loading?: boolean;
|
||||
}>(),
|
||||
{
|
||||
hideContinue: false,
|
||||
|
|
|
@ -1,9 +1,9 @@
|
|||
<template>
|
||||
<a-descriptions :data="props.descriptions" size="large" :column="1">
|
||||
<a-descriptions :data="(props.descriptions as unknown as DescData[])" size="large" :column="1">
|
||||
<a-descriptions-item v-for="item of props.descriptions" :key="item.label" :label="item.label">
|
||||
<template v-if="item.isTag">
|
||||
<a-tag
|
||||
v-for="tag of item.value.split(',')"
|
||||
v-for="tag of item.value"
|
||||
:key="tag"
|
||||
color="var(--color-text-n8)"
|
||||
class="mr-[8px] font-normal !text-[var(--color-text-1)]"
|
||||
|
@ -11,19 +11,32 @@
|
|||
{{ tag }}
|
||||
</a-tag>
|
||||
</template>
|
||||
<div v-else>{{ item.value }}</div>
|
||||
<a-button v-else-if="item.isButton" type="text" @click="handleItemClick(item)">{{ item.value }}</a-button>
|
||||
<div v-else>
|
||||
{{ item.value }}
|
||||
</div>
|
||||
</a-descriptions-item>
|
||||
</a-descriptions>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import type { DescData } from '@arco-design/web-vue';
|
||||
|
||||
export interface Description {
|
||||
label: string;
|
||||
value: string;
|
||||
value: (string | number) | (string | number)[];
|
||||
isTag?: boolean;
|
||||
isButton?: boolean;
|
||||
onClick?: () => void;
|
||||
}
|
||||
|
||||
const props = defineProps<{ descriptions: Description[] }>();
|
||||
|
||||
function handleItemClick(item: Description) {
|
||||
if (typeof item.onClick === 'function') {
|
||||
item.onClick();
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
|
|
|
@ -7,6 +7,7 @@
|
|||
:class="props.mask ? '' : 'ms-drawer-no-mask'"
|
||||
@ok="handleOk"
|
||||
@cancel="handleCancel"
|
||||
@close="handleCancel"
|
||||
>
|
||||
<template #title>
|
||||
<slot name="title">
|
||||
|
@ -37,11 +38,13 @@
|
|||
titleTagColor?: string;
|
||||
descriptions?: Description[];
|
||||
footer?: boolean;
|
||||
mask?: boolean;
|
||||
[key: string]: any;
|
||||
}
|
||||
|
||||
const props = withDefaults(defineProps<DrawerProps>(), {
|
||||
footer: true,
|
||||
mask: true,
|
||||
});
|
||||
const emit = defineEmits(['update:visible']);
|
||||
|
||||
|
|
|
@ -198,8 +198,12 @@
|
|||
const projectList: Ref<ProjectListItem[]> = ref([]);
|
||||
|
||||
onBeforeMount(async () => {
|
||||
const res = await getProjectList(appStore.getCurrentOrgId);
|
||||
projectList.value = res;
|
||||
try {
|
||||
const res = await getProjectList(appStore.getCurrentOrgId);
|
||||
projectList.value = res;
|
||||
} catch (error) {
|
||||
console.log(error);
|
||||
}
|
||||
});
|
||||
|
||||
const showProjectSelect = computed(() => {
|
||||
|
|
Loading…
Reference in New Issue