<template>
|
<el-container>
|
<el-header style="background: #fff; padding:0; height:50px;">
|
<div>
|
<div class="nav-api-header">
|
<div
|
style="display: flex; padding-top: 10px; margin-left: 10px;"
|
>
|
<el-button
|
type="primary"
|
size="small"
|
icon="el-icon-circle-plus-outline"
|
@click="
|
openFormModal('variablesForm', 'dialogVisible')
|
"
|
>新增变量</el-button
|
>
|
<el-button
|
type="info"
|
size="small"
|
icon="el-icon-view"
|
@click="showOtherProjectDialog = true"
|
>导入项目变量</el-button
|
>
|
<el-button
|
type="danger"
|
icon="el-icon-delete"
|
size="small"
|
@click="delSelectionVariables"
|
:disabled="!isSelectVariables"
|
>批量删除</el-button
|
>
|
</div>
|
</div>
|
|
<!-- 导入其他项目变量弹窗 -->
|
<el-dialog
|
title="导入项目全局变量"
|
:visible.sync="showOtherProjectDialog"
|
width="70%"
|
>
|
<el-select
|
v-model="otherProjectId"
|
filterable
|
clearable
|
placeholder="请选择项目"
|
style="width: 300px; margin-bottom: 15px"
|
:loading="loadingProjects"
|
>
|
<el-option
|
v-for="project in projectList"
|
:key="project.id"
|
:label="project.name"
|
:value="project.id"
|
></el-option>
|
</el-select>
|
<el-button
|
type="primary"
|
size="small"
|
@click="getOtherProjectVariables"
|
>查询</el-button
|
>
|
<el-button
|
type="success"
|
size="small"
|
@click="importSelectedVariables"
|
:disabled="!selectedOtherVariables.length"
|
style="margin-left: 10px"
|
>导入选中变量</el-button
|
>
|
<el-table
|
:data="otherProjectVariables"
|
height="400px"
|
border
|
style="width: 100%"
|
@selection-change="handleOtherVariablesSelection"
|
>
|
<el-table-column
|
type="selection"
|
width="55"
|
></el-table-column>
|
<el-table-column prop="key" label="变量名" width="180">
|
</el-table-column>
|
<el-table-column prop="value" label="变量值">
|
</el-table-column>
|
<el-table-column prop="description" label="变量描述">
|
</el-table-column>
|
</el-table>
|
</el-dialog>
|
|
<el-dialog
|
title="添加变量"
|
width="30%"
|
:visible.sync="dialogVisible"
|
:close-on-click-modal="false"
|
:style="{ 'text-align': 'center' }"
|
>
|
<el-form
|
:model="variablesForm"
|
:rules="rules"
|
ref="variablesForm"
|
label-width="100px"
|
class="project"
|
>
|
<el-form-item label="变量名" prop="key">
|
<el-input
|
v-model.trim="variablesForm.key"
|
clearable
|
placeholder="请输入变量名"
|
></el-input>
|
</el-form-item>
|
<el-form-item label="变量值" prop="value">
|
<el-input
|
v-model.trim="variablesForm.value"
|
clearable
|
placeholder="请输入变量值"
|
>
|
<template slot="prepend">
|
<el-tooltip
|
content="引用函数方式为:${函数名称(a,b,c)}，例如：${get_random_date(2025-01-01, 2025-04-01)}，请注意格式！"
|
placement="top"
|
>
|
<i class="el-icon-info"></i>
|
</el-tooltip>
|
</template>
|
</el-input>
|
</el-form-item>
|
<el-form-item label="变量描述" prop="description">
|
<el-input
|
v-model.trim="variablesForm.description"
|
clearable
|
placeholder="请输入变量描述"
|
></el-input>
|
</el-form-item>
|
</el-form>
|
<span
|
slot="footer"
|
class="dialog-footer"
|
style="display: flex; justify-content: flex-end;"
|
>
|
<el-button
|
@click="resetForm('variablesForm', 'dialogVisible')"
|
>取 消</el-button
|
>
|
<el-button
|
type="primary"
|
@click="handleConfirm('variablesForm')"
|
>确 定</el-button
|
>
|
</span>
|
</el-dialog>
|
|
<el-dialog
|
title="编辑变量"
|
:visible.sync="editDialogVisible"
|
:close-on-click-modal="false"
|
width="30%"
|
:style="{ 'text-align': 'center' }"
|
>
|
<el-form
|
:model="editVariablesForm"
|
:rules="rules"
|
ref="editVariablesForm"
|
label-width="100px"
|
class="project"
|
>
|
<el-form-item label="变量名" prop="key">
|
<el-input
|
v-model.trim="editVariablesForm.key"
|
clearable
|
placeholder="请输入变量名"
|
></el-input>
|
</el-form-item>
|
<el-form-item label="变量值" prop="value">
|
<el-input
|
v-model.trim="editVariablesForm.value"
|
clearable
|
placeholder="请输入变量值"
|
></el-input>
|
</el-form-item>
|
<el-form-item label="变量描述" prop="description">
|
<el-input
|
v-model.trim="editVariablesForm.description"
|
clearable
|
placeholder="请输入变量描述"
|
></el-input>
|
</el-form-item>
|
</el-form>
|
<span
|
slot="footer"
|
class="dialog-footer"
|
style="display: flex; justify-content: flex-end;"
|
>
|
<el-button
|
@click="
|
resetForm(
|
'editVariablesForm',
|
'editDialogVisible'
|
)
|
"
|
>取 消</el-button
|
>
|
<el-button
|
type="primary"
|
@click="handleEditConfirm('editVariablesForm')"
|
>确 定</el-button
|
>
|
</span>
|
</el-dialog>
|
</div>
|
</el-header>
|
|
<el-container>
|
<el-header
|
style="padding-top: 10px; margin-left: 10px; height: 50px"
|
>
|
<div class="env__header">
|
<div class="env__header--item">
|
<el-input
|
style="width: 300px"
|
size="small"
|
placeholder="请输入变量名称"
|
v-model="search"
|
clearable
|
>
|
</el-input>
|
</div>
|
|
<div class="env__header--item">
|
<el-button
|
plain
|
size="small"
|
icon="el-icon-refresh"
|
@click="resetSearch"
|
>重置</el-button
|
>
|
</div>
|
</div>
|
</el-header>
|
|
<el-container>
|
<el-main
|
style="padding: 0; margin-left: 10px; margin-top: 10px"
|
>
|
<div class="env-body-table">
|
<el-table
|
highlight-current-row
|
stripe
|
:data="variablesData.results"
|
v-loading="loading"
|
height="calc(100%)"
|
@cell-mouse-enter="cellMouseEnter"
|
@cell-mouse-leave="cellMouseLeave"
|
@selection-change="handleSelectionChange"
|
>
|
<el-table-column
|
type="selection"
|
width="55"
|
></el-table-column>
|
|
<el-table-column label="变量名" width="300">
|
<template slot-scope="scope">
|
<div
|
:title="scope.row.key"
|
style="overflow: hidden; text-overflow: ellipsis; white-space: nowrap;"
|
>
|
{{ scope.row.key }}
|
</div>
|
</template>
|
</el-table-column>
|
<el-table-column label="变量值">
|
<template slot-scope="scope">
|
<div
|
:title="scope.row.value"
|
style="overflow: hidden; text-overflow: ellipsis; white-space: nowrap;"
|
>
|
{{ scope.row.value }}
|
</div>
|
</template>
|
</el-table-column>
|
<el-table-column label="变量描述">
|
<template slot-scope="scope">
|
<div
|
:title="scope.row.description"
|
style="overflow: hidden; text-overflow: ellipsis; white-space: nowrap;"
|
>
|
{{ scope.row.description }}
|
</div>
|
</template>
|
</el-table-column>
|
<el-table-column label="更新时间">
|
<template slot-scope="scope">
|
<div>
|
{{
|
scope.row.update_time
|
| datetimeFormat
|
}}
|
</div>
|
</template>
|
</el-table-column>
|
<el-table-column label="变量操作">
|
<template slot-scope="scope">
|
<el-row v-show="currentRow === scope.row">
|
<el-button
|
type="info"
|
icon="el-icon-edit"
|
title="编辑"
|
circle
|
size="mini"
|
@click="
|
handleEditVariables(scope.row)
|
"
|
></el-button>
|
|
<el-button
|
type="success"
|
icon="el-icon-document-copy"
|
title="复制"
|
circle
|
size="mini"
|
@click="
|
handleCopyVariables(scope.row)
|
"
|
></el-button>
|
|
<el-button
|
v-show="variablesData.count !== 0"
|
type="danger"
|
icon="el-icon-delete"
|
title="删除"
|
circle
|
size="mini"
|
@click="
|
handleDelVariables(scope.row.id)
|
"
|
></el-button>
|
</el-row>
|
</template>
|
</el-table-column>
|
</el-table>
|
<div class="pagination-container">
|
<el-pagination
|
v-show="variablesData.count !== 0"
|
background
|
@current-change="handleCurrentChange"
|
@size-change="handleSizeChange"
|
:current-page.sync="currentPage"
|
:page-sizes="[10, 20, 30, 40]"
|
:page-size="pageSize"
|
:pager-count="5"
|
layout="total, sizes, prev, pager, next, jumper"
|
:total="variablesData.count"
|
></el-pagination>
|
</div>
|
</div>
|
</el-main>
|
</el-container>
|
</el-container>
|
</el-container>
|
</template>
|
|
<script>
|
export default {
|
name: "GlobalEnv",
|
data() {
|
return {
|
search: "",
|
selectVariables: [],
|
currentRow: "",
|
currentPage: 1,
|
pageSize: 10,
|
variablesData: {
|
count: 0,
|
results: []
|
},
|
editDialogVisible: false,
|
dialogVisible: false,
|
searchDebounce: null,
|
variablesForm: {
|
key: "",
|
value: "",
|
project: this.$route.params.id
|
},
|
editVariablesForm: {
|
id: "",
|
key: "",
|
value: "",
|
description: ""
|
},
|
rules: {
|
key: [
|
{
|
required: true,
|
message: "请输入变量名",
|
trigger: "blur"
|
},
|
{
|
min: 1,
|
max: 100,
|
message: "最多不超过100个字符",
|
trigger: "blur"
|
}
|
],
|
value: [
|
{
|
required: true,
|
message: "请输入变量值",
|
trigger: "blur"
|
},
|
{
|
min: 1,
|
max: 1024,
|
message: "最多不超过1024个字符",
|
trigger: "blur"
|
}
|
],
|
description: [
|
{
|
required: false,
|
message: "请输入变量描述",
|
trigger: "blur"
|
},
|
{
|
min: 0,
|
max: 100,
|
message: "最多不超过100个字符",
|
trigger: "blur"
|
}
|
]
|
},
|
loading: true,
|
isSelectVariables: false,
|
showOtherProjectDialog: false,
|
otherProjectId: "",
|
otherProjectVariables: [],
|
projectList: [], // 添加项目列表数据
|
loadingProjects: false, // 添加项目加载状态
|
selectedOtherVariables: [] // 新增的变量
|
};
|
},
|
methods: {
|
debouncedGetVariablesList() {
|
clearTimeout(this.searchDebounce);
|
this.searchDebounce = setTimeout(() => {
|
this.currentPage = 1;
|
this.getVariablesList();
|
}, 300);
|
},
|
cellMouseEnter(row) {
|
this.currentRow = row;
|
},
|
cellMouseLeave() {
|
this.currentRow = "";
|
},
|
handleEditVariables(row) {
|
this.editVariablesForm = {
|
key: row.key,
|
value: row.value,
|
id: row.id,
|
description: row.description
|
};
|
this.editDialogVisible = true;
|
},
|
handleCopyVariables(row) {
|
this.dialogVisible = true;
|
this.variablesForm.key = row.key;
|
this.variablesForm.value = row.value;
|
this.variablesForm.description = row.description;
|
},
|
handleDelVariables(variableId) {
|
this.$confirm("此操作将永久删除全局变量，是否继续?", "提示", {
|
confirmButtonText: "确定",
|
cancelButtonText: "取消",
|
type: "warning"
|
}).then(() => {
|
this.$api.deleteVariables(variableId).then(resp => {
|
if (resp.success) {
|
this.$message.success(resp.msg);
|
this.getVariablesList();
|
} else {
|
this.$message.error(resp.msg);
|
}
|
});
|
});
|
},
|
handleSelectionChange(val) {
|
this.selectVariables = val;
|
// 更新是否已经选择Variables, 依赖这个属性来判断是否禁用批量删除按钮
|
this.isSelectVariables = this.selectVariables.length > 0;
|
},
|
handleCurrentChange() {
|
this.$api
|
.getVariablesPaginationByPage({
|
params: {
|
page: this.currentPage,
|
size: this.pageSize,
|
project: this.variablesForm.project,
|
search: this.search
|
}
|
})
|
.then(resp => {
|
this.variablesData = resp;
|
});
|
},
|
handleSizeChange(newSize) {
|
this.pageSize = newSize;
|
// 计算新的最大页码
|
let maxPage = Math.ceil(this.variablesData.count / newSize);
|
if (this.currentPage > maxPage) {
|
// 如果当前页码超出了范围，请将其设置为最大页面
|
this.currentPage = maxPage;
|
}
|
this.$api
|
.getVariablesPaginationByPage({
|
params: {
|
page: this.currentPage,
|
size: newSize,
|
project: this.variablesForm.project,
|
search: this.search
|
}
|
})
|
.then(resp => {
|
this.variablesData = resp;
|
});
|
},
|
delSelectionVariables() {
|
if (this.selectVariables.length !== 0) {
|
this.$confirm(
|
"此操作将永久删除勾选的全局变量，是否继续？",
|
"提示",
|
{
|
confirmButtonText: "确定",
|
cancelButtonText: "取消",
|
type: "warning"
|
}
|
).then(() => {
|
this.$api
|
.delAllVariables({ data: this.selectVariables })
|
.then(resp => {
|
if (resp.success) {
|
this.$message.success(resp.msg);
|
this.getVariablesList();
|
} else {
|
this.$message.error(resp.msg);
|
}
|
});
|
});
|
} else {
|
this.$notify.warning({
|
title: "提示",
|
message: "请至少勾选一个全局变量",
|
duration: this.$store.state.duration
|
});
|
}
|
},
|
handleConfirm(formName) {
|
this.$refs[formName].validate(valid => {
|
if (valid) {
|
this.dialogVisible = false;
|
this.$api.addVariables(this.variablesForm).then(resp => {
|
if (resp.success) {
|
this.variablesForm.key = "";
|
this.variablesForm.value = "";
|
this.$message.success(resp.msg);
|
this.getVariablesList();
|
} else {
|
this.$message.error(resp.msg);
|
}
|
});
|
}
|
});
|
},
|
// 重置表单
|
resetForm(formName, showFlag) {
|
this[showFlag] = false;
|
this.$refs[formName].resetFields();
|
for (const key in this[formName]) {
|
if (this[formName].hasOwnProperty(key) && key !== "project") {
|
this[formName][key] = "";
|
}
|
}
|
},
|
// 唤起表单弹窗
|
openFormModal(formName, showFlag) {
|
for (const key in this[formName]) {
|
if (this[formName].hasOwnProperty(key) && key !== "project") {
|
this[formName][key] = "";
|
}
|
}
|
this[showFlag] = true;
|
},
|
handleEditConfirm(formName) {
|
this.$refs[formName].validate(valid => {
|
if (valid) {
|
this.editDialogVisible = false;
|
this.$api
|
.updateVariables(
|
this.$route.params.id,
|
this.editVariablesForm
|
)
|
.then(resp => {
|
if (resp.success) {
|
this.$message.success(resp.msg);
|
this.getVariablesList();
|
} else {
|
this.$message.error({
|
message: resp.msg,
|
duration: this.$store.state.duration
|
});
|
}
|
});
|
}
|
});
|
},
|
getVariablesList() {
|
this.$api
|
.variablesList({
|
params: {
|
page: this.currentPage,
|
size: this.pageSize,
|
project: this.variablesForm.project,
|
search: this.search
|
}
|
})
|
.then(resp => {
|
this.variablesData = resp;
|
this.loading = false;
|
});
|
},
|
resetSearch() {
|
this.currentPage = 1;
|
this.pageSize = 10;
|
this.search = "";
|
this.getVariablesList();
|
},
|
getProjectList() {
|
this.loadingProjects = true;
|
this.$api.getProjectList()
|
.then(resp => {
|
this.projectList = resp.results || []; // 修改这里，使用resp.results而不是resp.data
|
this.loadingProjects = false;
|
})
|
.catch(() => {
|
this.loadingProjects = false;
|
this.$message.error("获取项目列表失败，超时请重新登录");
|
});
|
},
|
getOtherProjectVariables() {
|
if (!this.otherProjectId) {
|
this.$message.warning("请选择项目");
|
return;
|
}
|
this.loading = true;
|
this.$api
|
.variablesList({
|
params: {
|
project: this.otherProjectId,
|
page: 1,
|
size: 1000
|
}
|
})
|
.then(resp => {
|
this.otherProjectVariables = resp.results;
|
this.loading = false;
|
})
|
.catch(() => {
|
this.loading = false;
|
this.$message.error("获取项目变量失败");
|
});
|
}, // 这里添加逗号
|
|
// 新增：处理其他项目变量的选择
|
handleOtherVariablesSelection(val) {
|
this.selectedOtherVariables = val;
|
},
|
|
// 新增：导入选中的变量
|
importSelectedVariables() {
|
if (!this.selectedOtherVariables.length) {
|
this.$message.warning('请至少选择一个变量');
|
return;
|
}
|
|
this.$confirm('确定导入选中的变量到当前项目吗?', '提示', {
|
confirmButtonText: '确定',
|
cancelButtonText: '取消',
|
type: 'warning'
|
}).then(() => {
|
const promises = this.selectedOtherVariables.map(variable => {
|
return this.$api.addVariables({
|
key: variable.key,
|
value: variable.value,
|
description: variable.description,
|
project: this.$route.params.id
|
});
|
});
|
|
Promise.all(promises).then(results => {
|
const successCount = results.filter(r => r.success).length;
|
this.$message.success(`成功导入 ${successCount} 个变量`);
|
this.getVariablesList(); // 刷新当前项目变量列表
|
}).catch(() => {
|
this.$message.error('导入变量时出错');
|
});
|
});
|
}
|
},
|
mounted() {
|
this.getVariablesList();
|
this.getProjectList(); // 确保这个方法在组件加载时被调用
|
}
|
};
|
</script>
|
|
<style scoped>
|
.env__header {
|
display: flex;
|
align-items: center;
|
margin-left: -30px;
|
}
|
|
.env__header--item {
|
display: flex;
|
margin-left: 10px;
|
}
|
|
.env-body-table {
|
position: fixed;
|
bottom: 0;
|
right: 0;
|
left: 220px;
|
top: 150px;
|
margin-left: -10px;
|
padding-bottom: 60px;
|
}
|
</style>
|
