|
|
@@ -1,12 +1,23 @@
|
|
|
<template>
|
|
|
<div class="app-container">
|
|
|
<el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
|
|
|
+ <el-form-item label="项目来源" prop="sourceFrom">
|
|
|
+ <el-select v-model="queryParams.sourceFrom" placeholder="请选择项目来源" clearable filterable @change="handleQuery">
|
|
|
+ <el-option
|
|
|
+ v-for="item in projectSourceList"
|
|
|
+ :key="item.dictCode || item.dictValue || item.value"
|
|
|
+ :label="item.dictLabel || item.label"
|
|
|
+ :value="item.dictValue || item.value"
|
|
|
+ />
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
<el-form-item label="项目编号" prop="projectPid">
|
|
|
<el-input v-model="queryParams.projectPid" placeholder="请输入项目编号" clearable @keyup.enter.native="handleQuery" />
|
|
|
</el-form-item>
|
|
|
<el-form-item label="项目名称" prop="projectName">
|
|
|
<el-input v-model="queryParams.projectName" placeholder="请输入项目名称" clearable @keyup.enter.native="handleQuery" />
|
|
|
</el-form-item>
|
|
|
+
|
|
|
<!-- <el-form-item label="应用名称" prop="appId">
|
|
|
<el-select v-model="queryParams.appId">
|
|
|
<el-option
|
|
|
@@ -52,17 +63,40 @@
|
|
|
|
|
|
<el-table v-loading="loading" :data="projectList" @selection-change="handleSelectionChange">
|
|
|
<el-table-column type="selection" width="55" align="center" />
|
|
|
- <el-table-column label="来源" align="center" prop="sourceFromName" />
|
|
|
- <el-table-column label="项目编号" align="center" prop="projectPid" />
|
|
|
- <el-table-column label="项目名称" align="center" prop="projectName" />
|
|
|
+ <el-table-column label="项目来源" width="90" align="center" prop="sourceFromName" />
|
|
|
+ <el-table-column label="项目编号" align="center" prop="projectPid" min-width="90">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <el-tooltip placement="top" popper-class="pid-tooltip">
|
|
|
+ <div slot="content" class="pid-tooltip-content">{{ scope.row.projectPid }}</div>
|
|
|
+ <span class="pid-ellipsis">{{ scope.row.projectPid }}</span>
|
|
|
+ </el-tooltip>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="项目名称" align="center" prop="projectName" min-width="320">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <el-tooltip placement="top" popper-class="pid-tooltip">
|
|
|
+ <div slot="content" class="pid-tooltip-content">{{ scope.row.projectName }}</div>
|
|
|
+ <span class="name-ellipsis">{{ scope.row.projectName }}</span>
|
|
|
+ </el-tooltip>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
<!-- <el-table-column label="应用名称" align="center" prop="name" /> -->
|
|
|
- <el-table-column label="应用名称" align="center">
|
|
|
+ <el-table-column label="应用名称" align="center" min-width="360">
|
|
|
<template slot-scope="scope">
|
|
|
- <div v-for="item in scope.row.name" :key="item">{{ item }}</div>
|
|
|
+ <div class="app-tags">
|
|
|
+ <el-tag
|
|
|
+ v-for="item in (scope.row.name || [])"
|
|
|
+ :key="item"
|
|
|
+ size="mini"
|
|
|
+ effect="plain"
|
|
|
+ :class="['app-tag', getTagColorClass(item)]"
|
|
|
+ disable-transitions
|
|
|
+ >{{ item }}</el-tag>
|
|
|
+ </div>
|
|
|
</template>
|
|
|
</el-table-column>
|
|
|
- <el-table-column label="创建时间" align="center" prop="createTime" />
|
|
|
- <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
|
|
|
+ <el-table-column label="项目创建时间" width="160" align="center" prop="createTime" />
|
|
|
+ <el-table-column label="操作" width="180" align="center" class-name="small-padding fixed-width">
|
|
|
<template slot-scope="scope">
|
|
|
<el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)"
|
|
|
v-hasPermi="['system:project:edit']">修改</el-button>
|
|
|
@@ -138,9 +172,11 @@ export default {
|
|
|
projectPid: null,
|
|
|
projectName: null,
|
|
|
appId: null,
|
|
|
+ sourceFrom: null,
|
|
|
},
|
|
|
appList: [],
|
|
|
projectTypeList: [],
|
|
|
+ projectSourceList: [],
|
|
|
// 表单参数
|
|
|
form: {},
|
|
|
// 表单校验
|
|
|
@@ -158,6 +194,7 @@ export default {
|
|
|
this.getList();
|
|
|
this.getAppList();
|
|
|
this.getProjectTypeList();
|
|
|
+ this.getProjectSourceList();
|
|
|
},
|
|
|
methods: {
|
|
|
/** 查询项目列表 */
|
|
|
@@ -175,6 +212,14 @@ export default {
|
|
|
this.projectTypeList = response.data;
|
|
|
});
|
|
|
},
|
|
|
+ getProjectSourceList() {
|
|
|
+ // 假设后端提供字典类型 project_source
|
|
|
+ getDicts('project_source').then(response => {
|
|
|
+ this.projectSourceList = response.data || [];
|
|
|
+ }).catch(() => {
|
|
|
+ this.projectSourceList = [];
|
|
|
+ });
|
|
|
+ },
|
|
|
// 取消按钮
|
|
|
cancel() {
|
|
|
this.open = false;
|
|
|
@@ -276,6 +321,99 @@ export default {
|
|
|
reject(error)
|
|
|
})
|
|
|
},
|
|
|
+ // 根据名称生成稳定的颜色 class
|
|
|
+ getTagColorClass(name) {
|
|
|
+ if (!name) return 'tag-color-0'
|
|
|
+ let hash = 0
|
|
|
+ for (let i = 0; i < name.length; i++) {
|
|
|
+ hash = ((hash << 5) - hash) + name.charCodeAt(i)
|
|
|
+ hash |= 0
|
|
|
+ }
|
|
|
+ const idx = Math.abs(hash) % 6
|
|
|
+ return `tag-color-${idx}`
|
|
|
+ },
|
|
|
}
|
|
|
};
|
|
|
</script>
|
|
|
+
|
|
|
+<style>
|
|
|
+.pid-ellipsis {
|
|
|
+ display: inline-block;
|
|
|
+ max-width: 100%;
|
|
|
+ overflow: hidden;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ white-space: nowrap;
|
|
|
+ vertical-align: middle;
|
|
|
+}
|
|
|
+/* Project name ellipsis behavior consistent with pid */
|
|
|
+.name-ellipsis {
|
|
|
+ display: inline-block;
|
|
|
+ max-width: 100%;
|
|
|
+ overflow: hidden;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ white-space: nowrap;
|
|
|
+ vertical-align: middle;
|
|
|
+}
|
|
|
+/* App names single-line ellipsis inside flexible column */
|
|
|
+.app-ellipsis {
|
|
|
+ display: inline;
|
|
|
+ max-width: 100%;
|
|
|
+ white-space: normal;
|
|
|
+ word-break: break-all;
|
|
|
+ overflow: visible;
|
|
|
+ text-overflow: clip;
|
|
|
+ vertical-align: middle;
|
|
|
+}
|
|
|
+/* App name tags container: wrap to next line automatically */
|
|
|
+.app-tags {
|
|
|
+ display: flex;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ gap: 4px 6px;
|
|
|
+ justify-content: center;
|
|
|
+}
|
|
|
+.app-tag {
|
|
|
+ margin: 0; /* use gap instead */
|
|
|
+}
|
|
|
+/* Tag color variants */
|
|
|
+.app-tag.tag-color-0 {
|
|
|
+ color: #409EFF;
|
|
|
+ background-color: rgba(64, 158, 255, 0.08);
|
|
|
+ border-color: rgba(64, 158, 255, 0.35);
|
|
|
+}
|
|
|
+.app-tag.tag-color-1 {
|
|
|
+ color: #67C23A;
|
|
|
+ background-color: rgba(103, 194, 58, 0.08);
|
|
|
+ border-color: rgba(103, 194, 58, 0.35);
|
|
|
+}
|
|
|
+.app-tag.tag-color-2 {
|
|
|
+ color: #E6A23C;
|
|
|
+ background-color: rgba(230, 162, 60, 0.08);
|
|
|
+ border-color: rgba(230, 162, 60, 0.35);
|
|
|
+}
|
|
|
+.app-tag.tag-color-3 {
|
|
|
+ color: #F56C6C;
|
|
|
+ background-color: rgba(245, 108, 108, 0.08);
|
|
|
+ border-color: rgba(245, 108, 108, 0.35);
|
|
|
+}
|
|
|
+.app-tag.tag-color-4 {
|
|
|
+ color: #8A5CF6;
|
|
|
+ background-color: rgba(138, 92, 246, 0.08);
|
|
|
+ border-color: rgba(138, 92, 246, 0.35);
|
|
|
+}
|
|
|
+.app-tag.tag-color-5 {
|
|
|
+ color: #13C2C2;
|
|
|
+ background-color: rgba(19, 194, 194, 0.08);
|
|
|
+ border-color: rgba(19, 194, 194, 0.35);
|
|
|
+}
|
|
|
+/* Tooltip content selectable and readable */
|
|
|
+.pid-tooltip {
|
|
|
+ max-width: 640px;
|
|
|
+ user-select: text;
|
|
|
+ word-break: break-all;
|
|
|
+}
|
|
|
+.pid-tooltip .pid-tooltip-content {
|
|
|
+ font-family: Menlo, Monaco, Consolas, 'Courier New', monospace;
|
|
|
+ font-size: 12px;
|
|
|
+ line-height: 1.5;
|
|
|
+}
|
|
|
+</style>
|
