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

refactor: 自定义字段表单项对齐

This commit is contained in:
chenjianxing 2021-12-14 20:11:42 +08:00 committed by jianxing
parent 81b651afc3
commit 6340b78658
3 changed files with 68 additions and 40 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

58
frontend/src/business/components/common/components/form/CustomFiledFormItem.vue Normal file
View File

@ -0,0 +1,58 @@
<template>
<div>
<el-row v-for="(i) in (customFieldRowNums)" :key="i">
<span class="custom-item" v-for="(item, j) in issueTemplate.customFields" :key="j">
<span v-if="j >= i*3 && j < i*3+3">
<el-col :span="8" v-if="item.type !== 'richText'">
<el-form-item :label="item.system ? $t(systemNameMap[item.name]) : item.name" :prop="item.name"
:label-width="formLabelWidth">
<custom-filed-component :data="item" :form="form" prop="defaultValue"/>
</el-form-item>
</el-col>
<div v-else>
<el-col :span="24">
<el-form-item :label="item.system ? $t(systemNameMap[item.name]) : item.name" :prop="item.name"
:label-width="formLabelWidth">
<custom-filed-component :data="item" :form="form" prop="defaultValue"/>
</el-form-item>
</el-col>
</div>
</span>
</span>
</el-row>
</div>
</template>
<script>
import {SYSTEM_FIELD_NAME_MAP} from "@/common/js/table-constants";
import CustomFiledComponent from "@/business/components/settings/workspace/template/CustomFiledComponent";
export default {
name: "CustomFiledFormItem",
components: {CustomFiledComponent},
props: {
issueTemplate: {
type: Object,
default() {
return {}
}
},
formLabelWidth: String,
form: Object
},
computed: {
customFieldRowNums() {
let size = this.issueTemplate.customFields ? this.issueTemplate.customFields.length : 0
let val = parseInt(size / 3);
return size % 3 == 0 ? val : (val + 1);
},
systemNameMap() {
return SYSTEM_FIELD_NAME_MAP;
},
}
}
</script>
<style scoped>
</style>

22
frontend/src/business/components/track/case/components/TestCaseEdit.vue
View File

@ -40,7 +40,7 @@
<el-form :model="form" :rules="rules" ref="caseFrom" v-loading="result.loading" class="case-form">
<ms-form-divider :title="$t('test_track.plan_view.base_info')"/>
<el-row>
<el-col :span="6">
<el-col :span="8">
<el-form-item
:placeholder="$t('test_track.case.input_name')"
:label="$t('test_track.case.name')"
@ -50,14 +50,14 @@
</el-form-item>
</el-col>
<el-col :span="6">
<el-col :span="8">
<el-form-item :label="$t('test_track.case.module')" :label-width="formLabelWidth" prop="module">
<ms-select-tree :disabled="readOnly" :data="treeNodes" :defaultKey="form.module" :obj="moduleObj"
@getValue="setModule" clearable checkStrictly size="small"/>
</el-form-item>
</el-col>
<el-col :span="6">
<el-col :span="8">
<el-form-item :label="$t('commons.tag')" :label-width="formLabelWidth" prop="tag">
<ms-input-tag :read-only="readOnly" :currentScenario="form" v-if="showInputTag" ref="tag"
class="ms-case-input"/>
@ -68,15 +68,7 @@
<!-- 自定义字段 -->
<el-form v-if="isFormAlive" :model="customFieldForm" :rules="customFieldRules" ref="customFieldForm"
class="case-form">
<el-row>
<el-col :span="7" v-for="(item, index) in testCaseTemplate.customFields" :key="index">
<el-form-item :label="item.system ? $t(systemNameMap[item.name]) : item.name" :prop="item.name"
:label-width="formLabelWidth">
<custom-filed-component :disabled="readOnly" @reload="reloadForm" :data="item" :form="customFieldForm"
prop="defaultValue"/>
</el-form-item>
</el-col>
</el-row>
<custom-filed-form-item :form="customFieldForm" :form-label-width="formLabelWidth" :issue-template="testCaseTemplate"/>
</el-form>
<el-row v-if="isCustomNum">
@ -172,7 +164,6 @@ import {
getTemplate,
parseCustomField
} from "@/common/js/custom_field";
import {SYSTEM_FIELD_NAME_MAP} from "@/common/js/table-constants";
import MsFormDivider from "@/business/components/common/components/MsFormDivider";
import TestCaseEditOtherInfo from "@/business/components/track/case/components/TestCaseEditOtherInfo";
import FormRichTextItem from "@/business/components/track/case/components/FormRichTextItem";
@ -180,10 +171,12 @@ import TestCaseStepItem from "@/business/components/track/case/components/TestCa
import StepChangeItem from "@/business/components/track/case/components/StepChangeItem";
import MsChangeHistory from "../../../history/ChangeHistory";
import {getTestTemplate} from "@/network/custom-field-template";
import CustomFiledFormItem from "@/business/components/common/components/form/CustomFiledFormItem";
export default {
name: "TestCaseEdit",
components: {
CustomFiledFormItem,
StepChangeItem,
TestCaseStepItem,
FormRichTextItem,
@ -303,9 +296,6 @@ export default {
moduleOptions() {
return this.$store.state.testCaseModuleOptions;
},
systemNameMap() {
return SYSTEM_FIELD_NAME_MAP;
},
isCustomNum() {
return this.$store.state.currentProjectIsCustomNum;
},

28
frontend/src/business/components/track/issue/IssueEditDetail.vue
View File

@ -14,26 +14,8 @@
</el-form-item>
<!-- 自定义字段 -->
<el-form :model="customFieldForm" :rules="customFieldRules" ref="customFieldForm"
class="case-form">
<el-row class="custom-field-row">
<span class="custom-item" v-for="(item, index) in issueTemplate.customFields" :key="index">
<el-col :span="8" v-if="item.type !== 'richText'">
<el-form-item :label="item.system ? $t(systemNameMap[item.name]) : item.name" :prop="item.name"
:label-width="formLabelWidth">
<custom-filed-component :data="item" :form="customFieldForm" prop="defaultValue"/>
</el-form-item>
</el-col>
<div v-else>
<el-col :span="24">
<el-form-item :label="item.system ? $t(systemNameMap[item.name]) : item.name" :prop="item.name"
:label-width="formLabelWidth">
<custom-filed-component :data="item" :form="customFieldForm" prop="defaultValue"/>
</el-form-item>
</el-col>
</div>
</span>
</el-row>
<el-form :model="customFieldForm" :rules="customFieldRules" ref="customFieldForm" class="case-form">
<custom-filed-form-item :form="customFieldForm" :form-label-width="formLabelWidth" :issue-template="issueTemplate"/>
</el-form>
<form-rich-text-item v-if="!enableThirdPartTemplate" :title="$t('custom_field.issue_content')" :data="form" prop="description"/>
@ -90,7 +72,6 @@ import MsFormDivider from "@/business/components/common/components/MsFormDivider
import CustomFieldFormList from "@/business/components/settings/workspace/template/CustomFieldFormList";
import CustomFieldRelateList from "@/business/components/settings/workspace/template/CustomFieldRelateList";
import FormRichTextItem from "@/business/components/track/case/components/FormRichTextItem";
import {SYSTEM_FIELD_NAME_MAP} from "@/common/js/table-constants";
import {buildCustomFields, parseCustomField} from "@/common/js/custom_field";
import CustomFiledComponent from "@/business/components/settings/workspace/template/CustomFiledComponent";
import TestCaseIssueList from "@/business/components/track/issue/TestCaseIssueList";
@ -106,10 +87,12 @@ import {getIssueTemplate} from "@/network/custom-field-template";
import {getIssueThirdPartTemplate} from "@/network/Issue";
import {getCurrentProject} from "@/network/project";
import {JIRA} from "@/common/js/constants";
import CustomFiledFormItem from "@/business/components/common/components/form/CustomFiledFormItem";
export default {
name: "IssueEditDetail",
components: {
CustomFiledFormItem,
IssueEditDetail,
TestCaseIssueList,
CustomFiledComponent,
@ -167,9 +150,6 @@ export default {
isSystem() {
return this.form.system;
},
systemNameMap() {
return SYSTEM_FIELD_NAME_MAP;
},
projectId() {
return getCurrentProjectID();
},