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

fix(测试跟踪): 修复选择框提示文案被滚动条遮挡 

--bug=1026939 --user=白奇 【测试跟踪】项目集成jira-缺陷管理-编辑或创建缺陷-成员下拉框类型字段-提示信息和滚动条重叠 https://www.tapd.cn/55049933/s/1381624
This commit is contained in:
baiqi 2023-06-14 11:57:37 +08:00 committed by 刘瑞斌
parent 9e603821f2
commit 137316144e
1 changed files with 169 additions and 117 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

174
framework/sdk-parent/frontend/src/components/template/CustomFiledComponent.vue
View File

@ -1,6 +1,7 @@
<template> <template>
<span> <span>
<el-select v-if="data.type === 'select' || data.type === 'multipleSelect'" <el-select
v-if="data.type === 'select' || data.type === 'multipleSelect'"
:loading="loading" :loading="loading"
@click.native="clickPane" @click.native="clickPane"
:disabled="disabled" :disabled="disabled"
@ -12,18 +13,20 @@
v-model="data[prop]" v-model="data[prop]"
:filter-method="data.inputSearch ? handleSelectInput : null" :filter-method="data.inputSearch ? handleSelectInput : null"
:remote="data.inputSearch" :remote="data.inputSearch"
:placeholder="$t('commons.default')"> :placeholder="$t('commons.default')"
>
<template v-solt:prefix> <template v-solt:prefix>
<span v-if="data.inputSearch" class="input-search-tip"> <span v-if="data.inputSearch" class="input-search-tip">
{{ $t("custom_field.remote_search_tip") }} {{ $t("custom_field.remote_search_tip") }}
</span> </span>
</template> </template>
<el-option <el-option
v-for="(item) in data.options ? data.options : []" v-for="item in data.options ? data.options : []"
:key="item.value" :key="item.value"
@change="handleChange" @change="handleChange"
:label="getTranslateOption(item)" :label="getTranslateOption(item)"
:value="item.value"> :value="item.value"
>
</el-option> </el-option>
</el-select> </el-select>
@ -32,9 +35,10 @@
@click.native="clickPane" @click.native="clickPane"
expand-trigger="hover" expand-trigger="hover"
@change="handleChange" @change="handleChange"
:props="{label: 'text'}" :props="{ label: 'text' }"
:options="data.options" :options="data.options"
v-model="data[prop]"> v-model="data[prop]"
>
</el-cascader> </el-cascader>
<el-input <el-input
@ -46,18 +50,22 @@
:disabled="disabled" :disabled="disabled"
:placeholder="$t('commons.input_content')" :placeholder="$t('commons.input_content')"
class="custom-with" class="custom-with"
v-model="data[prop]"> v-model="data[prop]"
>
</el-input> </el-input>
<el-checkbox-group <el-checkbox-group
v-else-if="data.type === 'checkbox'" v-else-if="data.type === 'checkbox'"
@click.native="clickPane" @click.native="clickPane"
:disabled="disabled" :disabled="disabled"
v-model="data[prop]"> v-model="data[prop]"
<el-checkbox v-for="(item, index) in data.options ? data.options : []" >
<el-checkbox
v-for="(item, index) in data.options ? data.options : []"
:key="index" :key="index"
@change="handleChange" @change="handleChange"
:label="item.value"> :label="item.value"
>
{{ getTranslateOption(item) }} {{ getTranslateOption(item) }}
</el-checkbox> </el-checkbox>
</el-checkbox-group> </el-checkbox-group>
@ -67,10 +75,11 @@
@click.native="clickPane" @click.native="clickPane"
v-model="data[prop]" v-model="data[prop]"
:disabled="disabled" :disabled="disabled"
v-for="(item,index) in data.options ? data.options : []" v-for="(item, index) in data.options ? data.options : []"
:key="index" :key="index"
@change="handleChange" @change="handleChange"
:label="item.value"> :label="item.value"
>
{{ getTranslateOption(item) }} {{ getTranslateOption(item) }}
</el-radio> </el-radio>
@ -79,28 +88,36 @@
@click.native="clickPane" @click.native="clickPane"
v-model="data[prop]" v-model="data[prop]"
:disabled="disabled" :disabled="disabled"
@change="handleChange"/> @change="handleChange"
/>
<el-input-number <el-input-number
v-else-if="data.type === 'float'" v-else-if="data.type === 'float'"
@click.native="clickPane" @click.native="clickPane"
:disabled="disabled" :disabled="disabled"
@change="handleChange" @change="handleChange"
v-model="data[prop]" :precision="2" :step="0.1"/> v-model="data[prop]"
:precision="2"
:step="0.1"
/>
<el-date-picker <el-date-picker
class="custom-with" class="custom-with"
@click.native="clickPane" @click.native="clickPane"
@change="handleChange" @change="handleChange"
v-else-if="data.type === 'date' || data.type === 'datetime'" v-else-if="data.type === 'date' || data.type === 'datetime'"
:value-format="data.type === 'date' ? 'yyyy-MM-dd' : 'yyyy-MM-dd HH:mm:ss'" :value-format="
data.type === 'date' ? 'yyyy-MM-dd' : 'yyyy-MM-dd HH:mm:ss'
"
:disabled="disabled" :disabled="disabled"
v-model="data[prop]" v-model="data[prop]"
:type="data.type === 'date' ? 'date' : 'datetime'" :type="data.type === 'date' ? 'date' : 'datetime'"
:placeholder="$t('commons.select_date')"> :placeholder="$t('commons.select_date')"
>
</el-date-picker> </el-date-picker>
<el-select v-else-if="data.type === 'member' || data.type === 'multipleMember'" <el-select
v-else-if="data.type === 'member' || data.type === 'multipleMember'"
@click.native="clickPane" @click.native="clickPane"
:multiple="data.type === 'multipleMember'" :multiple="data.type === 'multipleMember'"
@change="handleChange" @change="handleChange"
@ -108,59 +125,70 @@
:disabled="disabled" :disabled="disabled"
filterable filterable
v-model="data[prop]" v-model="data[prop]"
:placeholder="$t('commons.default')"> :placeholder="$t('commons.default')"
>
<el-option <el-option
v-for="(item) in memberOptions" v-for="item in memberOptions"
:key="item.id" :key="item.id"
:label="item.name + (item.email ? ' (' + item.email + ')' : '')" :label="item.name + (item.email ? ' (' + item.email + ')' : '')"
:value="item.id"> :value="item.id"
>
</el-option> </el-option>
</el-select> </el-select>
<ms-input-tag v-else-if="data.type === 'multipleInput'" <ms-input-tag
v-else-if="data.type === 'multipleInput'"
@click.native="clickPane" @click.native="clickPane"
@input="handleChange" @input="handleChange"
:read-only="disabled" :currentScenario="data" :prop="prop"/> :read-only="disabled"
:currentScenario="data"
:prop="prop"
/>
<ms-mark-down-text v-else-if="data.type === 'richText'" <ms-mark-down-text
v-else-if="data.type === 'richText'"
@click.native="clickPane" @click.native="clickPane"
:prop="prop" :prop="prop"
@change="handleChange" @change="handleChange"
:default-open="defaultOpen" :default-open="defaultOpen"
:data="data" :disabled="disabled"/> :data="data"
:disabled="disabled"
/>
<el-input v-else-if="data.type === 'password'" <el-input
v-else-if="data.type === 'password'"
@click.native="clickPane" @click.native="clickPane"
v-model="data[prop]" v-model="data[prop]"
class="custom-with" class="custom-with"
auto-complete="new-password" auto-complete="new-password"
show-password show-password
:disabled="disabled" :disabled="disabled"
@input="handleChange"/> @input="handleChange"
/>
<el-input v-else <el-input
v-else
@click.native="clickPane" @click.native="clickPane"
v-model="data[prop]" v-model="data[prop]"
class="custom-with" class="custom-with"
maxlength="450" maxlength="450"
show-word-limit show-word-limit
:disabled="disabled" :disabled="disabled"
@input="handleChange"/> @input="handleChange"
/>
</span> </span>
</template> </template>
<script> <script>
import MsTableColumn from "../table/MsTableColumn"; import MsTableColumn from "../table/MsTableColumn";
import MsInputTag from "../MsInputTag"; import MsInputTag from "../MsInputTag";
import {getProjectMemberOption} from "../../api/user"; import { getProjectMemberOption } from "../../api/user";
import MsMarkDownText from "metersphere-frontend/src/components/MsMarkDownText"; import MsMarkDownText from "metersphere-frontend/src/components/MsMarkDownText";
import {OPTION_LABEL_PREFIX} from "../../utils/tableUtils"; import { OPTION_LABEL_PREFIX } from "../../utils/tableUtils";
export default { export default {
name: "CustomFiledComponent", name: "CustomFiledComponent",
components: {MsMarkDownText, MsInputTag, MsTableColumn}, components: { MsMarkDownText, MsInputTag, MsTableColumn },
props: { props: {
data: Object, data: Object,
prop: String, prop: String,
@ -170,23 +198,28 @@ export default {
isTemplateEdit: Boolean, isTemplateEdit: Boolean,
formProp: { formProp: {
type: String, type: String,
default: 'name' default: "name",
} },
}, },
data() { data() {
return { return {
memberOptions: [], memberOptions: [],
originOptions: null, originOptions: null,
loading: false loading: false,
}; };
}, },
mounted() { mounted() {
if (['select', 'multipleSelect', 'checkbox', 'radio'].indexOf(this.data.type) > -1 && this.data.options) { if (
["select", "multipleSelect", "checkbox", "radio"].indexOf(
this.data.type
) > -1 &&
this.data.options
) {
let values = this.data[this.prop]; let values = this.data[this.prop];
if (['multipleSelect', 'checkbox'].indexOf(this.data.type) > -1) { if (["multipleSelect", "checkbox"].indexOf(this.data.type) > -1) {
if (values && values instanceof Array) { if (values && values instanceof Array) {
for (let i = values.length - 1; i >= 0; i--) { for (let i = values.length - 1; i >= 0; i--) {
if (!this.data.options.find(item => item.value === values[i])) { if (!this.data.options.find((item) => item.value === values[i])) {
// 删除已删除的选项 // 删除已删除的选项
values.splice(i, 1); values.splice(i, 1);
} }
@ -196,41 +229,47 @@ export default {
this.data[this.prop] = []; this.data[this.prop] = [];
} }
} else { } else {
if (!this.data.options.find(item => item.value === values)) { if (!this.data.options.find((item) => item.value === values)) {
// 没有选项则清空 // 没有选项则清空
this.data[this.prop] = ''; this.data[this.prop] = "";
} }
} }
} }
this.setFormData(); this.setFormData();
if (['member', 'multipleMember'].indexOf(this.data.type) < 0) { if (["member", "multipleMember"].indexOf(this.data.type) < 0) {
return; return;
} }
getProjectMemberOption() getProjectMemberOption().then((r) => {
.then((r) => {
this.memberOptions = r.data; this.memberOptions = r.data;
if (this.data.name === '责任人' && this.data.system && this.isTemplateEdit) { if (
this.memberOptions.unshift({id: 'CURRENT_USER', name: '创建人', email: ''}); this.data.name === "责任人" &&
this.data.system &&
this.isTemplateEdit
) {
this.memberOptions.unshift({
id: "CURRENT_USER",
name: "创建人",
email: "",
});
} }
}); });
}, },
watch: { watch: {
form() { form() {
this.setFormData(); this.setFormData();
} },
}, },
methods: { methods: {
clickPane(){ clickPane() {
this.$emit("onClick"); this.$emit("onClick");
}, },
getTranslateOption(item) { getTranslateOption(item) {
return item.system ? this.$t(item.text) : item.text; return item.system ? this.$t(item.text) : item.text;
}, },
handleChange() { handleChange() {
this.setFormData(); this.setFormData();
this.$emit('change', this.data[this.formProp]); this.$emit("change", this.data[this.formProp]);
this.$forceUpdate(); this.$forceUpdate();
if (this.data.inputSearch) { if (this.data.inputSearch) {
// 将选项的选项名保存在 optionLabel 中 // 将选项的选项名保存在 optionLabel 中
@ -239,26 +278,36 @@ export default {
try { try {
let optionLabel = this.data.optionLabel; let optionLabel = this.data.optionLabel;
let optionLabelMap; let optionLabelMap;
if (optionLabel && this.data.optionLabel.startsWith(OPTION_LABEL_PREFIX)) { if (
optionLabel = this.data.optionLabel.substring(OPTION_LABEL_PREFIX.length); optionLabel &&
this.data.optionLabel.startsWith(OPTION_LABEL_PREFIX)
) {
optionLabel = this.data.optionLabel.substring(
OPTION_LABEL_PREFIX.length
);
optionLabelMap = JSON.parse(optionLabel); optionLabelMap = JSON.parse(optionLabel);
} }
if (!optionLabelMap) { if (!optionLabelMap) {
optionLabelMap = {}; optionLabelMap = {};
} }
this.data[this.prop].forEach((val) => { this.data[this.prop].forEach((val) => {
let selectOption = this.data.options.find(item => item.value === val); let selectOption = this.data.options.find(
(item) => item.value === val
);
if (selectOption) { if (selectOption) {
optionLabelMap[val] = selectOption.text; optionLabelMap[val] = selectOption.text;
} }
}); });
this.data.optionLabel = OPTION_LABEL_PREFIX + JSON.stringify(optionLabelMap); this.data.optionLabel =
OPTION_LABEL_PREFIX + JSON.stringify(optionLabelMap);
} catch (e) { } catch (e) {
console.error("set optionLabel error ", e); console.error("set optionLabel error ", e);
} }
} else { } else {
// 单选 // 单选
let selectOption = this.data.options.find(item => item.value === this.data[this.prop]); let selectOption = this.data.options.find(
(item) => item.value === this.data[this.prop]
);
if (selectOption) { if (selectOption) {
this.data.optionLabel = OPTION_LABEL_PREFIX + selectOption.text; this.data.optionLabel = OPTION_LABEL_PREFIX + selectOption.text;
} }
@ -271,7 +320,7 @@ export default {
} }
if (val) { if (val) {
this.loading = true; this.loading = true;
this.$emit('inputSearch', this.data, val); this.$emit("inputSearch", this.data, val);
} else { } else {
// 置空搜索时，恢复回原始选项 // 置空搜索时，恢复回原始选项
this.$forceUpdate(); this.$forceUpdate();
@ -291,8 +340,8 @@ export default {
if (this.form && this.data && this.data[this.prop]) { if (this.form && this.data && this.data[this.prop]) {
this.$set(this.form, this.data[this.formProp], this.data[this.prop]); this.$set(this.form, this.data[this.formProp], this.data[this.prop]);
} }
} },
} },
}; };
</script> </script>
@ -305,16 +354,19 @@ export default {
width: 100%; width: 100%;
} }
.custom-with :deep( .el-input__inner) { .custom-with :deep(.el-input__inner) {
height: 32px; height: 32px;
} }
:deep( .el-input--suffix .el-input__inner) { :deep(.el-input--suffix .el-input__inner) {
height: 32px; height: 32px;
} }
.input-search-tip { .input-search-tip {
position: relative;
z-index: 9;
background-color: white;
padding-left: 15px; padding-left: 15px;
color: #C0C4CC; color: #c0c4cc;
} }
</style> </style>