refactor: 修改样式

This commit is contained in:
shiziyuan9527 2020-08-18 18:47:24 +08:00
parent 26895e0c57
commit ae151e4535
6 changed files with 97 additions and 66 deletions

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.0 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 5.1 KiB

View File

@ -1,49 +1,52 @@
<template>
<el-card class="header-title" v-loading="result.loading">
<div>
<div>{{$t('organization.select_defect_platform')}}</div>
<div>{{$t('organization.integration.select_defect_platform')}}</div>
<el-radio-group v-model="platform" style="margin-top: 10px" @change="change">
<el-radio v-for="(item, index) in platforms" :key="index" :label="item.value" size="small">
{{item.name}}
<el-radio label="Tapd">
<img class="platform" src="../../../../assets/tapd.png" alt="Tapd"/>
</el-radio>
<el-radio label="Jira">
<img class="platform" src="../../../../assets/jira.png" alt="Jira"/>
</el-radio>
</el-radio-group>
</div>
<div style="width: 500px">
<div style="margin-top: 20px;margin-bottom: 10px">{{$t('organization.basic_auth_info')}}</div>
<el-form :model="form" ref="form" label-width="100px" size="small" :disabled="show" :rules="rules">
<el-form-item :label="$t('organization.api_account')" prop="account">
<el-input v-model="form.account" :placeholder="$t('organization.input_api_account')"/>
<div style="margin-top: 20px;margin-bottom: 10px">{{$t('organization.integration.basic_auth_info')}}</div>
<el-form :model="form" ref="form" label-width="120px" size="small" :disabled="show" :rules="rules">
<el-form-item :label="$t('organization.integration.api_account')" prop="account">
<el-input v-model="form.account" :placeholder="$t('organization.integration.input_api_account')"/>
</el-form-item>
<el-form-item :label="$t('organization.api_password')" prop="password">
<el-form-item :label="$t('organization.integration.api_password')" prop="password">
<el-input v-model="form.password" auto-complete="new-password"
:placeholder="$t('organization.input_api_password')" show-password/>
:placeholder="$t('organization.integration.input_api_password')" show-password/>
</el-form-item>
<el-form-item label="JIRA 地址" prop="url" v-if="platform === 'Jira'">
<el-input v-model="form.url" placeholder="请输入Jira地址"/>
<el-form-item :label="$t('organization.integration.jira_url')" prop="url" v-if="platform === 'Jira'">
<el-input v-model="form.url" :placeholder="$t('organization.integration.input_jira_url')"/>
</el-form-item>
</el-form>
</div>
<div style="margin-left: 100px">
<div style="margin-left: 120px">
<el-button type="primary" size="mini" :disabled="!show" @click="testConnection">{{$t('ldap.test_connect')}}
</el-button>
<el-button v-if="showEdit" size="mini" @click="edit">{{$t('commons.edit')}}</el-button>
<el-button type="primary" v-if="showSave" size="mini" @click="save('form')">{{$t('commons.save')}}</el-button>
<el-button v-if="showCancel" size="mini" @click="cancelEdit">取消编辑</el-button>
<el-button v-if="showCancel" size="mini" @click="cancelEdit">{{$t('organization.integration.cancel_edit')}}</el-button>
<el-button type="info" size="mini" @click="cancelIntegration('form')" :disabled="!show">
取消集成
{{$t('organization.integration.cancel_integration')}}
</el-button>
</div>
<div class="defect-tip">
<div>{{$t('organization.use_tip')}}</div>
<div>{{$t('organization.integration.use_tip')}}</div>
<div>
1. {{$t('organization.use_tip_one')}}
1. {{$t('organization.integration.use_tip_one')}}
</div>
<div>
2. {{$t('organization.use_tip_two')}}
<router-link to="/track/project/all" style="margin-left: 5px">{{$t('organization.link_the_project_now')}}
2. {{$t('organization.integration.use_tip_two')}}
<router-link to="/track/project/all" style="margin-left: 5px">{{$t('organization.integration.link_the_project_now')}}
</router-link>
</div>
</div>
@ -65,20 +68,10 @@
showEdit: true,
showSave: false,
showCancel: false,
platforms: [
{
name: 'TAPD',
value: 'Tapd',
},
{
name: 'JIRA',
value: 'Jira',
}
],
rules: {
account: {required: true, message: this.$t('organization.input_api_account'), trigger: ['change', 'blur']},
password: {required: true, message: this.$t('organization.input_api_password'), trigger: ['change', 'blur']},
url: {required: true, message: '请输入url', trigger: ['change', 'blur']}
account: {required: true, message: this.$t('organization.integration.input_api_account'), trigger: ['change', 'blur']},
password: {required: true, message: this.$t('organization.integration.input_api_password'), trigger: ['change', 'blur']},
url: {required: true, message: this.$t('organization.integration.input_jira_url'), trigger: ['change', 'blur']}
},
}
},
@ -119,7 +112,7 @@
cancelIntegration() {
if (this.form.account && this.form.password && this.platform) {
this.$alert("确认取消集成 " + this.platform + "", '', {
this.$alert(this.$t('organization.integration.cancel_confirm') + this.platform + "", '', {
confirmButtonText: this.$t('commons.confirm'),
callback: (action) => {
if (action === 'confirm') {
@ -127,19 +120,19 @@
param.orgId = getCurrentUser().lastOrganizationId;
param.platform = this.platform;
this.result = this.$post("service/integration/delete", param, () => {
this.$success("操作成功");
this.$success(this.$t('organization.integration.successful_operation'));
this.init('');
});
}
}
});
} else {
this.$warning("未集成该平台!");
this.$warning(this.$t('organization.integration.not_integrated'));
}
},
save(form) {
if (!this.platform) {
this.$warning("请选择集成的平台!");
this.$warning(this.$t('organization.integration.choose_platform'));
return;
}
let param = {};
@ -196,7 +189,7 @@
},
testConnection() {
this.result = this.$get("issues/auth/" + this.platform, () => {
this.$success("验证通过!");
this.$success(this.$t('organization.integration.verified'));
});
}
}
@ -215,4 +208,9 @@
padding: 10px;
border-radius: 3px;
}
.platform {
height: 90px;
vertical-align: middle
}
</style>

View File

@ -177,16 +177,27 @@ export default {
select: 'Select Organization',
service_integration: 'Service integration',
defect_manage: 'Defect management platform',
select_defect_platform: 'Please select the defect management platform to be integrated:',
basic_auth_info: 'Basic Auth account information:',
api_account: 'API account',
api_password: 'API password',
input_api_account: 'please enter account',
input_api_password: 'Please enter password',
use_tip: 'Usage guidelines:',
use_tip_one: 'Basic Auth account information is queried in "Company Management-Security and Integration-Open Platform"',
use_tip_two: 'After saving the Basic Auth account information, you need to manually associate the ID/key in the Metersphere project',
link_the_project_now: 'Link the project now',
integration: {
select_defect_platform: 'Please select the defect management platform to be integrated:',
basic_auth_info: 'Basic Auth account information:',
api_account: 'API account',
api_password: 'API password',
jira_url: 'JIRA url',
input_api_account: 'please enter account',
input_api_password: 'Please enter password',
input_jira_url: 'Please enter Jira address, for example: https://metersphere.atlassian.net/',
use_tip: 'Usage guidelines:',
use_tip_one: 'Basic Auth account information is queried in "Company Management-Security and Integration-Open Platform"',
use_tip_two: 'After saving the Basic Auth account information, you need to manually associate the ID/key in the Metersphere project',
link_the_project_now: 'Link the project now',
cancel_edit: 'Cancel edit',
cancel_integration: 'Cancel integration',
cancel_confirm: 'Confirm cancellation of integration ',
successful_operation: 'Successful operation',
not_integrated: 'The platform is not integrated',
choose_platform: 'Please choose an integrated platform',
verified: 'Verified'
}
},
project: {
name: 'Project name',

View File

@ -178,16 +178,27 @@ export default {
delete_warning: '删除该组织将同步删除该组织下所有相关工作空间和相关工作空间下的所有项目,以及项目中的所有用例、接口测试、性能测试等,确定要删除吗?',
service_integration: '服务集成',
defect_manage: '缺陷管理平台',
select_defect_platform: '请选择要集成的缺陷管理平台:',
basic_auth_info: 'Basic Auth 账号信息:',
api_account: 'API 账号',
api_password: 'API 口令',
input_api_account: '请输入账号',
input_api_password: '请输入口令',
use_tip: '使用指引:',
use_tip_one: 'Basic Auth 账号信息在"公司管理-安全与集成-开放平台"中查询',
use_tip_two: '保存 Basic Auth 账号信息后,需要在 Metersphere 项目中手动关联 ID/key',
link_the_project_now: '马上关联项目',
integration: {
select_defect_platform: '请选择要集成的缺陷管理平台:',
basic_auth_info: 'Basic Auth 账号信息:',
api_account: 'API 账号',
api_password: 'API 口令',
jira_url: 'JIRA 地址',
input_api_account: '请输入账号',
input_api_password: '请输入口令',
input_jira_url: '请输入Jira地址https://metersphere.atlassian.net/',
use_tip: '使用指引:',
use_tip_one: 'Basic Auth 账号信息在"公司管理-安全与集成-开放平台"中查询',
use_tip_two: '保存 Basic Auth 账号信息后,需要在 Metersphere 项目中手动关联 ID/key',
link_the_project_now: '马上关联项目',
cancel_edit: '取消编辑',
cancel_integration: '取消集成',
cancel_confirm: '确认取消集成 ',
successful_operation: '操作成功',
not_integrated: '未集成该平台',
choose_platform: '请选择集成的平台',
verified: '验证通过'
}
},
project: {
recent: '最近的项目',

View File

@ -176,16 +176,27 @@ export default {
delete_warning: '删除该组织将同步删除该组织下所有相关工作空间和相关工作空间下的所有项目,以及项目中的所有用例、接口测试、性能测试等,确定要删除吗?',
service_integration: '服務集成',
defect_manage: '缺陷管理平台',
select_defect_platform: '請選擇要集成的缺陷管理平台:',
basic_auth_info: 'Basic Auth 賬號信息:',
api_account: 'API 賬號',
api_password: 'API 口令',
input_api_account: '請輸入賬號',
input_api_password: '請輸入口令',
use_tip: '使用指引:',
use_tip_one: 'Basic Auth 賬號信息在"公司管理-安全與集成-開放平台"中查詢',
use_tip_two: '保存 Basic Auth 賬號信息後,需要在 Metersphere 項目中手動關聯 ID/key',
link_the_project_now: '馬上關聯項目',
integration: {
select_defect_platform: '請選擇要集成的缺陷管理平台:',
basic_auth_info: 'Basic Auth 賬號信息:',
api_account: 'API 賬號',
api_password: 'API 口令',
jira_url: 'JIRA 地址',
input_api_account: '請輸入賬號',
input_api_password: '請輸入口令',
input_jira_url: '請輸入Jira地址https://metersphere.atlassian.net/',
use_tip: '使用指引:',
use_tip_one: 'Basic Auth 賬號信息在"公司管理-安全與集成-開放平台"中查詢',
use_tip_two: '保存 Basic Auth 賬號信息後,需要在 Metersphere 項目中手動關聯 ID/key',
link_the_project_now: '馬上關聯項目',
cancel_edit: '取消編輯',
cancel_integration: '取消集成',
cancel_confirm: '確認取消集成 ',
successful_operation: '操作成功',
not_integrated: '未集成該平台',
choose_platform: '請選擇集成的平台',
verified: '驗證通過'
}
},
project: {
recent: '最近的項目',