test-version22
/
MeterSphere
mirror of https://gitee.com/fit2cloud-feizhiyun/MeterSphere.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

refactor(通用功能): 统一使用sdk中的标签组件

This commit is contained in:
shiziyuan9527 2023-01-03 15:37:24 +08:00 committed by f2c-ci-robot[bot]
parent ab142b85c8
commit 0f64b74e7b
15 changed files with 18 additions and 437 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
api-test/frontend/src/business/automation/scenario/EditApiScenario.vue
View File

@ -606,7 +606,7 @@ export default {
ScenarioApiRelevance: () => import('./api/ApiRelevance'),
ApiEnvironmentConfig: () => import('metersphere-frontend/src/components/environment/ApiEnvironmentConfig'),
MsApiReportDetail: () => import('../report/SyncApiReportDetail'),
MsInputTag: () => import('./MsInputTag'),
MsInputTag: () => import('metersphere-frontend/src/components/MsInputTag'),
MsRun: () => import('./DebugRun'),
MsApiCustomize: () => import('./ApiCustomize'),
ApiImport: () => import('../../definition/components/import/ApiImport'),

210
api-test/frontend/src/business/automation/scenario/MsInputTag.vue
View File

@ -1,210 +0,0 @@
<template>
<div
class="el-input-tag input-tag-wrapper"
:class="[size ? 'el-input-tag--' + size : '']"
style="height: auto"
@click="foucusTagInput">
<el-tag
class="ms-top"
v-for="(tag, idx) in innerTags"
v-bind="$attrs"
type="info"
:key="tag"
:size="size"
:closable="!readOnly"
:disable-transitions="false"
@close="remove(idx)">
<span v-if="tag && tag.length > 10">
<el-tooltip class="item" effect="light" :content="tag" placement="top" :enterable="false">
<span>{{ tag && tag.length > 10 ? tag.substring(0, 10) + "..." : tag }}</span>
</el-tooltip>
</span>
<span v-else>
{{ tag }}
</span>
</el-tag>
<input
:disabled="readOnly"
class="tag-input el-input"
v-model="newTag"
:placeholder="defaultPlaceHolder"
@keydown.delete.stop="removeLastTag"
@keydown="addNew"
@blur="addNew"/>
</div>
</template>
<script>
export default {
name: 'MsInputTag',
props: {
currentScenario: {},
placeholder: {
type: String,
},
errorInfo: String,
addTagOnKeys: {
type: Array,
default: () => [13, 188, 9],
},
readOnly: {
type: Boolean,
default: false,
},
size: {type: String, default: 'small'},
prop: {
type: String,
default: 'tags',
},
},
created() {
if (!this.currentScenario[this.prop]) {
this.currentScenario[this.prop] = [];
}
if (this.placeholder) {
this.defaultPlaceHolder = this.placeholder;
}
},
data() {
return {
defaultPlaceHolder: this.$t('commons.tag_tip'),
newTag: '',
innerTags: this.currentScenario[this.prop] ? [...this.currentScenario[this.prop]] : [],
};
},
watch: {
innerTags() {
this.currentScenario[this.prop] = this.innerTags;
},
'currentScenario.tags'() {
if (this.prop === 'tags') {
if (
!this.currentScenario[this.prop] ||
this.currentScenario[this.prop] === '' ||
this.currentScenario[this.prop].length === 0
) {
if (this.innerTags.length !== 0) {
this.innerTags = [];
}
}
}
},
},
methods: {
foucusTagInput() {
if (!this.readOnly && this.$el.querySelector('.tag-input')) {
this.$el.querySelector('.tag-input').focus();
}
},
addNew(e) {
if (e && !this.addTagOnKeys.includes(e.keyCode) && e.type !== 'blur') {
return;
}
if (e) {
e.stopPropagation();
e.preventDefault();
}
let addSuucess = false;
if (this.newTag.includes(',')) {
this.newTag.split(',').forEach((item) => {
if (this.addTag(item.trim())) {
addSuucess = true;
}
});
} else {
if (this.addTag(this.newTag.trim())) {
addSuucess = true;
}
}
if (addSuucess) {
this.tagChange();
this.newTag = '';
}
this.$emit('onblur');
},
addTag(tag) {
tag = tag.trim();
if (tag && !this.innerTags.includes(tag)) {
this.innerTags.push(tag);
return true;
} else {
if (tag !== '' && this.errorInfo) {
this.$error(this.errorInfo);
}
}
return false;
},
remove(index) {
this.innerTags.splice(index, 1);
this.tagChange();
this.$nextTick(() => {
//删除tag元素操作是在输入框中去掉元素，也应当触发onblur操作
this.$emit('onblur');
});
},
removeLastTag() {
if (this.newTag) {
return;
}
this.innerTags.pop();
this.tagChange();
},
tagChange() {
this.$emit('input', this.innerTags);
},
},
};
</script>
<style scoped>
.input-tag-wrapper {
position: relative;
font-size: 14px;
background-color: #fff;
background-image: none;
border-radius: 4px;
border: 1px solid #dcdfe6;
box-sizing: border-box;
color: #606266;
display: inline-block;
outline: none;
padding: 0 10px 0 5px;
transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
width: 100%;
}
.el-tag {
margin-right: 4px;
}
.tag-input {
background: transparent;
border: 0;
color: #303133;
font-size: 12px;
font-family: 'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB', Arial, sans-serif;
outline: none;
padding-left: 0;
width: 100px;
}
.el-input-tag {
height: 40px;
line-height: 40px;
}
.el-input-tag--mini {
height: 28px;
line-height: 28px;
font-size: 12px;
}
.el-input-tag--small {
line-height: 30px;
}
.el-input-tag--medium {
height: 36px;
line-height: 36px;
}
</style>

2
api-test/frontend/src/business/automation/scenario/maximize/MaximizeScenario.vue
View File

@ -363,7 +363,7 @@ export default {
ScenarioApiRelevance: () => import('../api/ApiRelevance'),
ApiEnvironmentConfig: () => import('metersphere-frontend/src/components/environment/ApiEnvironmentConfig'),
MsApiReportDetail: () => import('../../report/ApiReportDetail'),
MsInputTag: () => import('../MsInputTag'),
MsInputTag: () => import('metersphere-frontend/src/components/MsInputTag'),
MsRun: () => import('../DebugRun'),
MsApiCustomize: () => import('../ApiCustomize'),
ApiImport: () => import('../../../definition/components/import/ApiImport'),

2
api-test/frontend/src/business/automation/version/ScenarioDiff.vue
View File

@ -440,7 +440,7 @@ export default {
ScenarioChildDiff,
MsComponentConfig,
MsSelectTree: () => import('metersphere-frontend/src/components/select-tree/SelectTree'),
MsInputTag: () => import('@/business/automation/scenario/MsInputTag'),
MsInputTag: () => import('metersphere-frontend/src/components/MsInputTag'),
EnvPopover: () => import('@/business/automation/scenario/EnvPopover'),
},
watch: {

2
api-test/frontend/src/business/commons/BatchEdit.vue
View File

@ -73,7 +73,7 @@ import { listenGoBack, removeGoBackListener } from 'metersphere-frontend/src/uti
import EnvPopover from '@/business/automation/scenario/EnvPopover';
import { ENV_TYPE } from 'metersphere-frontend/src/utils/constants';
import CustomFiledComponent from 'metersphere-frontend/src/components/template/CustomFiledComponent';
import MsInputTag from '@/business/automation/scenario/MsInputTag';
import MsInputTag from 'metersphere-frontend/src/components/MsInputTag';
import { getScenarioByProjectId } from '../../api/scenario';
import { getOwnerProjects } from '../../api/project';

2
api-test/frontend/src/business/definition/components/basis/BatchEdit.vue
View File

@ -45,7 +45,7 @@
<script>
import MsDialogFooter from 'metersphere-frontend/src/components/MsDialogFooter';
import { listenGoBack, removeGoBackListener } from 'metersphere-frontend/src/utils';
import MsInputTag from '@/business/automation/scenario/MsInputTag';
import MsInputTag from 'metersphere-frontend/src/components/MsInputTag';
export default {
name: 'BatchEdit',

2
api-test/frontend/src/business/definition/components/case/ApiCaseItem.vue
View File

@ -272,7 +272,7 @@ import MsSqlBasisParameters from '../request/database/BasisParameters';
import TcpFormatParameters from '@/business/definition/components/request/tcp/TcpFormatParameters';
import MsDubboBasisParameters from '../request/dubbo/BasisParameters';
import MsApiExtendBtns from '../reference/ApiExtendBtns';
import MsInputTag from '@/business/automation/scenario/MsInputTag';
import MsInputTag from 'metersphere-frontend/src/components/MsInputTag';
import MsRequestResultTail from '../response/RequestResultTail';
import ApiResponseComponent from '../../../automation/scenario/component/ApiResponseComponent';
import ShowMoreBtn from '@/business/commons/ShowMoreBtn';

2
api-test/frontend/src/business/definition/components/complete/BasisApi.vue
View File

@ -79,7 +79,7 @@
<script>
import { definitionFollow } from '@/api/definition';
import { API_STATUS } from '../../model/JsonData';
import MsInputTag from '@/business/automation/scenario/MsInputTag';
import MsInputTag from 'metersphere-frontend/src/components/MsInputTag';
import MsSelectTree from 'metersphere-frontend/src/components/select-tree/SelectTree';
import { getProjectMemberOption } from '@/api/project';
import { useApiStore } from '@/store';

2
api-test/frontend/src/business/definition/components/complete/EditCompleteHTTPApi.vue
View File

@ -179,7 +179,7 @@ import MsApiRequestForm from '../request/http/ApiHttpRequestForm';
import MsResponseText from '../response/ResponseText';
import { API_STATUS, REQ_METHOD } from '../../model/JsonData';
import { KeyValue } from '../../model/ApiTestModel';
import MsInputTag from '@/business/automation/scenario/MsInputTag';
import MsInputTag from 'metersphere-frontend/src/components/MsInputTag';
import MsJsr233Processor from '../../../automation/scenario/component/Jsr233Processor';
import MsSelectTree from 'metersphere-frontend/src/components/select-tree/SelectTree';
import MsChangeHistory from '@/business/history/ApiHistory';

2
api-test/frontend/src/business/definition/components/complete/TCPBasicApi.vue
View File

@ -89,7 +89,7 @@
<script>
import { definitionFollow } from '@/api/definition';
import { API_STATUS } from '../../model/JsonData';
import MsInputTag from '@/business/automation/scenario/MsInputTag';
import MsInputTag from 'metersphere-frontend/src/components/MsInputTag';
import MsSelectTree from 'metersphere-frontend/src/components/select-tree/SelectTree';
import { getProjectMemberOption } from '@/api/project';
import { useApiStore } from '@/store';

2
api-test/frontend/src/business/definition/components/complete/version/HttpApiVersionDiff.vue
View File

@ -322,7 +322,7 @@ import MsFormDivider from 'metersphere-frontend/src/components/MsFormDivider';
import MsResponseText from '../../response/ResponseText';
import MsApiRequestForm from '../../request/http/ApiHttpRequestForm';
import MsSelectTree from 'metersphere-frontend/src/components/select-tree/SelectTree';
import MsInputTag from '@/business/automation/scenario/MsInputTag';
import MsInputTag from 'metersphere-frontend/src/components/MsInputTag';
import ApiInfoContainer from '@/business/definition/components/complete/ApiInfoContainer';
import DependenciesList from '@/business/commons/DependenciesList';
import FormRichTextItem from '@/business/commons/FormRichTextItem';

2
api-test/frontend/src/business/definition/components/mock/MockConfigHeader.vue
View File

@ -36,7 +36,7 @@
</template>
<script>
import MsInputTag from '@/business/automation/scenario/MsInputTag';
import MsInputTag from 'metersphere-frontend/src/components/MsInputTag';
export default {
name: 'MockConfigHeader',

12
framework/sdk-parent/frontend/src/components/MsInputTag.vue
View File

@ -3,7 +3,7 @@
class="el-input-tag input-tag-wrapper"
:class="[size ? 'el-input-tag--' + size : '']"
style="height: auto"
@click="foucusTagInput">
@click="focusTagInput">
<el-tag
class="ms-top"
@ -89,7 +89,7 @@ export default {
},
},
methods: {
foucusTagInput() {
focusTagInput() {
if (!this.readOnly && this.$el.querySelector('.tag-input')) {
this.$el.querySelector('.tag-input').focus()
}
@ -102,19 +102,19 @@ export default {
e.stopPropagation()
e.preventDefault()
}
let addSuucess = false
let addSuccess = false
if (this.newTag.includes(',')) {
this.newTag.split(',').forEach(item => {
if (this.addTag(item.trim())) {
addSuucess = true
addSuccess = true
}
})
} else {
if (this.addTag(this.newTag.trim())) {
addSuucess = true
addSuccess = true
}
}
if (addSuucess) {
if (addSuccess) {
this.tagChange()
this.newTag = ''
}

209
report-stat/frontend/src/business/compnent/form/MsInputTag.vue
View File

@ -1,209 +0,0 @@
<template>
<div
class="el-input-tag input-tag-wrapper"
:class="[size ? 'el-input-tag--' + size : '']"
style="height: auto"
@click="foucusTagInput">
<el-tag
class="ms-top"
v-for="(tag, idx) in innerTags"
v-bind="$attrs"
type="info"
:key="tag"
:size="size"
:closable="!readOnly"
:disable-transitions="false"
@close="remove(idx)">
<span v-if="tag && tag.length > 10">
<el-tooltip class="item" effect="light" :content="tag" placement="top" :enterable="false">
<span>{{ tag && tag.length > 10 ? tag.substring(0, 10) + "..." : tag }}</span>
</el-tooltip>
</span>
<span v-else>
{{ tag }}
</span>
</el-tag>
<input
:disabled="readOnly"
class="tag-input el-input"
v-model="newTag"
:placeholder=defaultPlaceHolder
@keydown.delete.stop="removeLastTag"
@keydown="addNew"
@blur="addNew"/>
</div>
</template>
<script>
export default {
name: 'MsInputTag',
props: {
currentScenario: {},
placeholder: {
type: String,
},
errorInfo: String,
addTagOnKeys: {
type: Array,
default: () => [13, 188, 9]
},
readOnly: {
type: Boolean,
default: false
},
size: {type: String, default: "small"},
prop: {
type: String,
default: "tags"
}
},
created() {
if (!this.currentScenario[this.prop]) {
this.currentScenario[this.prop] = [];
}
if (this.placeholder) {
this.defaultPlaceHolder = this.placeholder;
}
},
data() {
return {
defaultPlaceHolder: this.$t('commons.tag_tip'),
newTag: '',
innerTags: this.currentScenario[this.prop] ? [...this.currentScenario[this.prop]] : []
}
},
watch: {
innerTags() {
this.currentScenario[this.prop] = this.innerTags;
},
'currentScenario.tags'() {
if (this.prop === 'tags') {
if (!this.currentScenario[this.prop] || this.currentScenario[this.prop] === '' || this.currentScenario[this.prop].length === 0) {
if (this.innerTags.length !== 0) {
this.innerTags = [];
}
}
}
},
},
methods: {
foucusTagInput() {
if (!this.readOnly && this.$el.querySelector('.tag-input')) {
this.$el.querySelector('.tag-input').focus()
}
},
addNew(e) {
if (e && (!this.addTagOnKeys.includes(e.keyCode)) && (e.type !== 'blur')) {
return
}
if (e) {
e.stopPropagation()
e.preventDefault()
}
let addSuucess = false
if (this.newTag.includes(',')) {
this.newTag.split(',').forEach(item => {
if (this.addTag(item.trim())) {
addSuucess = true
}
})
} else {
if (this.addTag(this.newTag.trim())) {
addSuucess = true
}
}
if (addSuucess) {
this.tagChange()
this.newTag = ''
}
this.$emit("onblur");
},
addTag(tag) {
tag = tag.trim()
if (tag && !this.innerTags.includes(tag)) {
this.innerTags.push(tag)
return true
} else {
if (tag !== "" && this.errorInfo) {
this.$error(this.errorInfo);
}
}
return false
},
remove(index) {
this.innerTags.splice(index, 1);
this.tagChange();
this.$nextTick(() => {
//删除tag元素操作是在输入框中去掉元素，也应当触发onblur操作
this.$emit("onblur");
});
},
removeLastTag() {
if (this.newTag) {
return
}
this.innerTags.pop()
this.tagChange()
},
tagChange() {
this.$emit('input', this.innerTags)
}
}
}
</script>
<style scoped>
.input-tag-wrapper {
position: relative;
font-size: 14px;
background-color: #fff;
background-image: none;
border-radius: 4px;
border: 1px solid #dcdfe6;
box-sizing: border-box;
color: #606266;
display: inline-block;
outline: none;
padding: 0 10px 0 5px;
transition: border-color .2s cubic-bezier(.645, .045, .355, 1);
width: 100%;
}
.el-tag {
margin-right: 4px;
}
.tag-input {
background: transparent;
border: 0;
color: #303133;
font-size: 12px;
font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", Arial, sans-serif;
outline: none;
padding-left: 0;
width: 100px;
}
.el-input-tag {
height: 40px;
line-height: 40px;
}
.el-input-tag--mini {
height: 28px;
line-height: 28px;
font-size: 12px;
}
.el-input-tag--small {
line-height: 30px;
}
.el-input-tag--medium {
height: 36px;
line-height: 36px;
}
</style>

2
report-stat/frontend/src/business/enterprisereport/components/dialog/ProjectReportEditDialog.vue
View File

@ -166,7 +166,7 @@
import {getUUID, listenGoBack, removeGoBackListener} from "metersphere-frontend/src/utils"
import {getCurrentProjectID, getCurrentUserId} from "metersphere-frontend/src/utils/token";
import MsInputTag from "@/business/compnent/form/MsInputTag";
import MsInputTag from 'metersphere-frontend/src/components/MsInputTag';
import MsFormDivider from "metersphere-frontend/src/components/MsFormDivider";
import EmailComponent from "@/business/enterprisereport/components/container/EmailComponent";
import ReportStatisticsDialog from "@/business/enterprisereport/components/dialog/SelectReportStatisticsDialog";