feat: 部分组件调整

This commit is contained in:
baiqi 2023-07-19 11:32:39 +08:00 committed by 刘瑞斌
parent 025965b4ee
commit aaf949113e
4 changed files with 52 additions and 29 deletions

View File

@ -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,

View File

@ -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>

View File

@ -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']);

View File

@ -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(() => {