mirror of
https://gitee.com/fit2cloud-feizhiyun/MeterSphere.git
synced 2024-12-05 21:49:23 +08:00
refactor: 重构标签组件&系统用户标签展示
This commit is contained in:
parent
7680537fc6
commit
f8b559545a
@ -68,7 +68,7 @@
|
||||
</div>
|
||||
</template>
|
||||
<template #cell="{ column, record, rowIndex }">
|
||||
<div class="flex flex-row flex-nowrap items-center">
|
||||
<div :class="{ 'flex flex-row items-center': !item.isTag }">
|
||||
<template v-if="item.dataIndex === SpecialColumnEnum.ENABLE">
|
||||
<slot name="enable" v-bind="{ record }">
|
||||
<div v-if="record.enable" class="flex flex-row flex-nowrap items-center gap-[2px]">
|
||||
@ -84,11 +84,11 @@
|
||||
</slot>
|
||||
</template>
|
||||
<template v-else-if="item.isTag">
|
||||
<span
|
||||
<template
|
||||
v-if="!record[item.dataIndex as string] || (Array.isArray(record[item.dataIndex as string]) && record[item.dataIndex as string].length === 0)"
|
||||
>
|
||||
<slot :name="item.slotName" v-bind="{ record, rowIndex, column }"> - </slot>
|
||||
</span>
|
||||
</template>
|
||||
<MsTagGroup v-else :tag-list="record[item.dataIndex as string]" type="primary" theme="outline" />
|
||||
</template>
|
||||
<template v-else-if="item.slotName === SpecialColumnEnum.OPERATION">
|
||||
|
@ -1,14 +1,14 @@
|
||||
<template>
|
||||
<div class="flex min-h-[22px] flex-row">
|
||||
<MsTag v-for="tag of showTagList" :key="tag.id" v-bind="attrs">
|
||||
{{ props.isStringTag ? tag : tag[props.nameKey] }}
|
||||
</MsTag>
|
||||
<a-tooltip :content="tagsTooltip">
|
||||
<MsTag v-if="props.tagList.length > props.showNum" v-bind="attrs">
|
||||
<a-tooltip :content="tagsTooltip">
|
||||
<div class="flex max-w-[440px] flex-row">
|
||||
<MsTag v-for="tag of showTagList" :key="tag.id" :width="getTagWidth(tag)" v-bind="attrs">
|
||||
{{ props.isStringTag ? tag : tag[props.nameKey] }}
|
||||
</MsTag>
|
||||
<MsTag v-if="props.tagList.length > props.showNum" :width="numberTagWidth" v-bind="attrs">
|
||||
+{{ props.tagList.length - props.showNum }}</MsTag
|
||||
>
|
||||
</a-tooltip>
|
||||
</div>
|
||||
</div>
|
||||
</a-tooltip>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
@ -42,6 +42,18 @@
|
||||
const tagsTooltip = computed(() => {
|
||||
return filterTagList.value.map((e: any) => (props.isStringTag ? e : e[props.nameKey])).join(',');
|
||||
});
|
||||
|
||||
const getTagWidth = (tag: { [x: string]: any }) => {
|
||||
const tagStr = props.isStringTag ? tag : tag[props.nameKey];
|
||||
const tagWidth = tagStr.length;
|
||||
// 16个中文字符
|
||||
return tagWidth < 16 ? tagWidth : 16;
|
||||
};
|
||||
|
||||
const numberTagWidth = computed(() => {
|
||||
const numberStr = `${props.tagList.length - props.showNum}`;
|
||||
return numberStr.length + 4;
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped lang="less"></style>
|
||||
|
@ -3,9 +3,14 @@
|
||||
v-bind="attrs"
|
||||
:type="props.type"
|
||||
defer
|
||||
:style="{ ...typeStyle, 'margin-right': tagMargin, 'max-width': '144px' }"
|
||||
:style="{
|
||||
...typeStyle,
|
||||
'margin-right': tagMargin,
|
||||
'min-width': props.width && `${props.width}ch`,
|
||||
'max-width: 144px': !props.width,
|
||||
}"
|
||||
:size="props.size"
|
||||
class="one-line-text inline-block"
|
||||
class="inline-block"
|
||||
>
|
||||
<slot name="icon"></slot>
|
||||
<slot></slot>
|
||||
@ -26,6 +31,7 @@
|
||||
size?: Size; // tag尺寸
|
||||
theme?: Theme; // tag主题
|
||||
selfStyle?: any; // 自定义样式
|
||||
width?: number; // tag宽度,不传入时绑定max-width
|
||||
}>(),
|
||||
{
|
||||
type: 'default',
|
||||
|
@ -3,6 +3,7 @@
|
||||
<transition name="fade" mode="out-in" appear>
|
||||
<!-- transition内必须有且只有一个根元素,不然会导致二级路由的组件无法渲染 -->
|
||||
<div v-show="true" class="page-content">
|
||||
<!-- TODO 实验性组件,以后优化 -->
|
||||
<Suspense v-if="!route.meta.isCache">
|
||||
<component :is="Component" :key="route.fullPath" />
|
||||
</Suspense>
|
||||
|
@ -193,7 +193,6 @@
|
||||
import useTable from '@/components/pure/ms-table/useTable';
|
||||
import MsTableMoreAction from '@/components/pure/ms-table-more-action/index.vue';
|
||||
import type { ActionsItem } from '@/components/pure/ms-table-more-action/types';
|
||||
import MsTagGroup from '@/components/pure/ms-tag/ms-tag-group.vue';
|
||||
import MsUpload from '@/components/pure/ms-upload/index.vue';
|
||||
import MsBatchForm from '@/components/business/ms-batch-form/index.vue';
|
||||
import type { FormItemModel, MsBatchFormInstance } from '@/components/business/ms-batch-form/types';
|
||||
@ -245,11 +244,13 @@
|
||||
title: 'system.user.tableColumnOrg',
|
||||
dataIndex: 'organizationList',
|
||||
isTag: true,
|
||||
width: 300,
|
||||
},
|
||||
{
|
||||
title: 'system.user.tableColumnUserGroup',
|
||||
isTag: true,
|
||||
dataIndex: 'userRoleList',
|
||||
width: 300,
|
||||
},
|
||||
{
|
||||
title: 'system.user.tableColumnStatus',
|
||||
@ -265,7 +266,6 @@
|
||||
},
|
||||
];
|
||||
const tableStore = useTableStore();
|
||||
tableStore.initColumn(TableKeyEnum.SYSTEM_USER, columns, 'drawer');
|
||||
const { propsRes, propsEvent, loadList, setKeyword, resetSelector } = useTable(
|
||||
getUserList,
|
||||
{
|
||||
@ -878,6 +878,7 @@
|
||||
function downLoadUserTemplate() {
|
||||
window.open('/templates/user_import.xlsx', '_blank');
|
||||
}
|
||||
await tableStore.initColumn(TableKeyEnum.SYSTEM_USER, columns, 'drawer');
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
|
Loading…
Reference in New Issue
Block a user