|
@@ -426,24 +426,39 @@ export const createCrudOptions = function ({ crudExpose, context }: CreateCrudOp
|
|
|
},
|
|
|
type: 'dict-select',
|
|
|
column: {
|
|
|
- minWidth: 150,
|
|
|
+ minWidth: 230,
|
|
|
component: {
|
|
|
name: 'fs-component',
|
|
|
render: ({ row }: { row: any }) => {
|
|
|
if (!row.competency_tags || row.competency_tags.length === 0) return <span>-</span>;
|
|
|
|
|
|
+ const displayTags = row.competency_tags.slice(0, 2); // 只取前两个标签
|
|
|
+ const remainingCount = row.competency_tags.length - 2; // 计算剩余标签数量
|
|
|
+
|
|
|
return (
|
|
|
- <div style="display: flex; flex-wrap: wrap; gap: 4px;">
|
|
|
- {row.competency_tags.map((tag: any) => (
|
|
|
+ <div style="display: flex; gap: 4px; align-items: center;">
|
|
|
+ {displayTags.map((tag: any) => (
|
|
|
<el-tag
|
|
|
key={tag.id}
|
|
|
type="warning"
|
|
|
effect="plain"
|
|
|
size="mini"
|
|
|
+ style="overflow: hidden; text-overflow: ellipsis; white-space: nowrap;"
|
|
|
+ title={tag.name}
|
|
|
>
|
|
|
- {tag.name}
|
|
|
+ {tag.name.length > 4 ? tag.name.slice(0, 4) + '...' : tag.name}
|
|
|
</el-tag>
|
|
|
))}
|
|
|
+ {remainingCount > 0 && (
|
|
|
+ <el-tag
|
|
|
+ type="info"
|
|
|
+ effect="plain"
|
|
|
+ size="mini"
|
|
|
+ title={`还有${remainingCount}个标签`}
|
|
|
+ >
|
|
|
+ +{remainingCount}
|
|
|
+ </el-tag>
|
|
|
+ )}
|
|
|
</div>
|
|
|
);
|
|
|
}
|
|
@@ -707,7 +722,8 @@ export const createCrudOptions = function ({ crudExpose, context }: CreateCrudOp
|
|
|
},
|
|
|
type: 'dict-select',
|
|
|
column: {
|
|
|
- minWidth: 100,
|
|
|
+
|
|
|
+ minWidth: 120,
|
|
|
},
|
|
|
dict: dict({
|
|
|
// 使用API方式获取数据
|
|
@@ -761,6 +777,7 @@ export const createCrudOptions = function ({ crudExpose, context }: CreateCrudOp
|
|
|
type: 'dict-select',
|
|
|
column: {
|
|
|
minWidth: 120,
|
|
|
+ maxTagCount: 1
|
|
|
},
|
|
|
dict: dict({
|
|
|
getData: async () => {
|
|
@@ -807,8 +824,9 @@ export const createCrudOptions = function ({ crudExpose, context }: CreateCrudOp
|
|
|
type="warning"
|
|
|
effect="plain"
|
|
|
size="mini"
|
|
|
+ style="overflow: hidden; text-overflow: ellipsis; white-space: nowrap;"
|
|
|
>
|
|
|
- {row.category.name}
|
|
|
+ {row.category.name.length > 4 ? row.category.name.slice(0, 4) + '...' : row.category.name}
|
|
|
</el-tag>
|
|
|
);
|
|
|
}
|
|
@@ -851,25 +869,39 @@ export const createCrudOptions = function ({ crudExpose, context }: CreateCrudOp
|
|
|
},
|
|
|
type: 'dict-select',
|
|
|
column: {
|
|
|
- minWidth: 150,
|
|
|
+ minWidth: 220,
|
|
|
component: {
|
|
|
- // 自定义渲染组件,显示彩色标签
|
|
|
name: 'fs-component',
|
|
|
render: ({ row }: { row: any }) => {
|
|
|
if (!row.tags || row.tags.length === 0) return <span>-</span>;
|
|
|
|
|
|
+ const displayTags = row.tags.slice(0, 2); // 只取前两个标签
|
|
|
+ const remainingCount = row.tags.length - 2; // 计算剩余标签数量
|
|
|
+
|
|
|
return (
|
|
|
- <div style="display: flex; flex-wrap: wrap; gap: 4px;">
|
|
|
- {row.tags.map((tag: any) => (
|
|
|
+ <div style="display: flex; gap: 4px; align-items: center;">
|
|
|
+ {displayTags.map((tag: any) => (
|
|
|
<el-tag
|
|
|
key={tag.id}
|
|
|
type="warning"
|
|
|
effect="plain"
|
|
|
size="mini"
|
|
|
+ style="overflow: hidden; text-overflow: ellipsis; white-space: nowrap;"
|
|
|
+ title={tag.name}
|
|
|
>
|
|
|
- {tag.name}
|
|
|
+ {tag.name.length > 4 ? tag.name.slice(0, 4) + '...' : tag.name}
|
|
|
</el-tag>
|
|
|
))}
|
|
|
+ {remainingCount > 0 && (
|
|
|
+ <el-tag
|
|
|
+ type="info"
|
|
|
+ effect="plain"
|
|
|
+ size="mini"
|
|
|
+ title={`还有${remainingCount}个标签`}
|
|
|
+ >
|
|
|
+ +{remainingCount}
|
|
|
+ </el-tag>
|
|
|
+ )}
|
|
|
</div>
|
|
|
);
|
|
|
}
|