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

refactor(接口测试): 优化场景变量保存提示 (#12783) 

--bug=1012377 --user=王孝刚 [接口测试]github#12753优化场景变量保存提示
https://www.tapd.cn/55049933/s/1138564

Co-authored-by: wxg0103 <727495428@qq.com>
This commit is contained in:
MeterSphere Bot 2022-04-19 14:17:02 +08:00 committed by GitHub
parent c5c5e76fed
commit 8b85321494
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 390 additions and 372 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

762
frontend/src/business/components/api/automation/scenario/variable/VariableList.vue
View File

@ -26,14 +26,17 @@
</div> </div>
<div style="float: right"> <div style="float: right">
<el-select v-model="selectType" :placeholder="$t('test_resource_pool.type')" style="width: 90px" size="small" @change="filter"> <el-select v-model="selectType" :placeholder="$t('test_resource_pool.type')" style="width: 90px"
size="small" @change="filter">
<el-option value="CONSTANT" :label="$t('api_test.automation.constant')"></el-option> <el-option value="CONSTANT" :label="$t('api_test.automation.constant')"></el-option>
<el-option value="LIST" :label="$t('test_track.case.list')"></el-option> <el-option value="LIST" :label="$t('test_track.case.list')"></el-option>
<el-option value="CSV" label="CSV"></el-option> <el-option value="CSV" label="CSV"></el-option>
<el-option value="COUNTER" :label="$t('api_test.automation.counter')"></el-option> <el-option value="COUNTER" :label="$t('api_test.automation.counter')"></el-option>
<el-option value="RANDOM" :label="$t('api_test.automation.random')"></el-option> <el-option value="RANDOM" :label="$t('api_test.automation.random')"></el-option>
</el-select> </el-select>
<el-button size="small" style="margin-left: 10px" type="primary" @click="addVariable">{{ $t('commons.add') }}</el-button> <el-button size="small" style="margin-left: 10px" type="primary" @click="addVariable">
{{ $t('commons.add') }}
</el-button>
<el-link @click="batchAddParameter" type="primary" :disabled="disabled" style="margin-left: 10px"> <el-link @click="batchAddParameter" type="primary" :disabled="disabled" style="margin-left: 10px">
{{ $t("commons.batch_add") }} {{ $t("commons.batch_add") }}
</el-link> </el-link>
@ -42,56 +45,56 @@
<el-row> <el-row>
<el-col :span="12"> <el-col :span="12">
<div style="border:1px #DCDFE6 solid; min-height: 400px;border-radius: 4px ;width: 100% ;"> <div style="border:1px #DCDFE6 solid; min-height: 400px;border-radius: 4px ;width: 100% ;">
<ms-table <ms-table
v-loading="loading" v-loading="loading"
row-key="id" row-key="id"
:data="variables" :data="variables"
:total="variables.length" :total="variables.length"
:screen-height="screenHeight" :screen-height="screenHeight"
:batch-operators="batchButtons" :batch-operators="batchButtons"
:remember-order="true" :remember-order="true"
:highlightCurrentRow="true" :highlightCurrentRow="true"
:fields.sync="fields" :fields.sync="fields"
:field-key="tableHeaderKey" :field-key="tableHeaderKey"
@handleRowClick="handleRowClick" @handleRowClick="handleRowClick"
ref="variableTable"> ref="variableTable">
<span v-for="item in fields" :key="item.key"> <span v-for="item in fields" :key="item.key">
<ms-table-column <ms-table-column
prop="num" prop="num"
:field="item" :field="item"
:fields-width="fieldsWidth" :fields-width="fieldsWidth"
sortable sortable
label="ID" label="ID"
min-width="60"> min-width="60">
</ms-table-column> </ms-table-column>
<ms-table-column <ms-table-column
prop="name" prop="name"
:field="item" :field="item"
:fields-width="fieldsWidth" :fields-width="fieldsWidth"
:label="$t('api_test.variable_name')" :label="$t('api_test.variable_name')"
min-width="100" min-width="100"
sortable> sortable>
</ms-table-column> </ms-table-column>
<ms-table-column <ms-table-column
prop="type" prop="type"
:field="item" :field="item"
:fields-width="fieldsWidth" :fields-width="fieldsWidth"
:label="$t('test_track.case.type')" :label="$t('test_track.case.type')"
min-width="70" min-width="70"
sortable> sortable>
<template v-slot:default="scope"> <template v-slot:default="scope">
<span>{{ types.get(scope.row.type) }}</span> <span>{{ types.get(scope.row.type) }}</span>
</template> </template>
</ms-table-column> </ms-table-column>
<ms-table-column <ms-table-column
prop="value" prop="value"
:field="item" :field="item"
:fields-width="fieldsWidth" :fields-width="fieldsWidth"
:label="$t('api_test.value')" :label="$t('api_test.value')"
sortable> sortable>
</ms-table-column> </ms-table-column>
</span> </span>
</ms-table> </ms-table>
<batch-add-parameter @batchSave="batchSaveParameter" ref="batchAddParameter"/> <batch-add-parameter @batchSave="batchSaveParameter" ref="batchAddParameter"/>
</div> </div>
</el-col> </el-col>
@ -102,9 +105,16 @@
<ms-edit-list-value v-if="editData.type=='LIST'" ref="listValue" :editData="editData"/> <ms-edit-list-value v-if="editData.type=='LIST'" ref="listValue" :editData="editData"/>
<ms-edit-csv v-if="editData.type=='CSV'" ref="csv" :editData.sync="editData"/> <ms-edit-csv v-if="editData.type=='CSV'" ref="csv" :editData.sync="editData"/>
<div v-if="editData.type" style="float: right"> <div v-if="editData.type" style="float: right">
<el-button size="small" style="margin-left: 10px" type="primary" @click="confirmVariable">{{ $t('commons.confirm') }}</el-button> <el-button size="small" style="margin-left: 10px" type="primary" @click="confirmVariable">
<el-button size="small" style="margin-left: 10px" @click="cancelVariable">{{ $t('commons.cancel') }}</el-button> {{ $t('commons.confirm') }}
<el-button v-if="showDelete" size="small" style="margin-left: 10px" @click="deleteVariable">{{ $t('commons.delete') }}</el-button> </el-button>
<el-button size="small" style="margin-left: 10px" @click="cancelVariable">{{
$t('commons.cancel')
}}
</el-button>
<el-button v-if="showDelete" size="small" style="margin-left: 10px" @click="deleteVariable">
{{ $t('commons.delete') }}
</el-button>
</div> </div>
</el-col> </el-col>
</el-row> </el-row>
@ -142,374 +152,382 @@
</template> </template>
<script> <script>
import MsEditConstant from "./EditConstant"; import MsEditConstant from "./EditConstant";
import MsDialogFooter from "../../../../common/components/MsDialogFooter"; import MsDialogFooter from "../../../../common/components/MsDialogFooter";
import MsTableHeader from "@/business/components/common/components/MsTableHeader"; import MsTableHeader from "@/business/components/common/components/MsTableHeader";
import MsTablePagination from "@/business/components/common/pagination/TablePagination"; import MsTablePagination from "@/business/components/common/pagination/TablePagination";
import MsEditCounter from "./EditCounter"; import MsEditCounter from "./EditCounter";
import MsEditRandom from "./EditRandom"; import MsEditRandom from "./EditRandom";
import MsEditListValue from "./EditListValue"; import MsEditListValue from "./EditListValue";
import MsEditCsv from "./EditCsv"; import MsEditCsv from "./EditCsv";
import {getUUID} from "@/common/js/utils"; import {getUUID} from "@/common/js/utils";
import MsApiKeyValue from "../../../definition/components/ApiKeyValue"; import MsApiKeyValue from "../../../definition/components/ApiKeyValue";
import BatchAddParameter from "../../../definition/components/basis/BatchAddParameter"; import BatchAddParameter from "../../../definition/components/basis/BatchAddParameter";
import {KeyValue} from "../../../definition/model/ApiTestModel"; import {KeyValue} from "../../../definition/model/ApiTestModel";
import {REQUEST_HEADERS} from "@/common/js/constants"; import {REQUEST_HEADERS} from "@/common/js/constants";
import MsTable from "@/business/components/common/components/table/MsTable"; import MsTable from "@/business/components/common/components/table/MsTable";
import MsTableColumn from "@/business/components/common/components/table/MsTableColumn"; import MsTableColumn from "@/business/components/common/components/table/MsTableColumn";
import { import {
getCustomTableWidth, getCustomTableWidth,
getCustomTableHeader getCustomTableHeader
} from "@/common/js/tableUtils"; } from "@/common/js/tableUtils";
export default { const jsondiffpatch = require('jsondiffpatch');
name: "MsVariableList",
components: { export default {
MsEditConstant, name: "MsVariableList",
MsDialogFooter, components: {
MsTableHeader, MsEditConstant,
MsTablePagination, MsDialogFooter,
MsEditCounter, MsTableHeader,
MsEditRandom, MsTablePagination,
MsEditListValue, MsEditCounter,
MsEditCsv, MsEditRandom,
MsApiKeyValue, MsEditListValue,
BatchAddParameter, MsEditCsv,
MsTableColumn, MsApiKeyValue,
MsTable, BatchAddParameter,
MsTableColumn,
MsTable,
},
data() {
return {
variables: [],
headers: [],
variablesOld: [],
headersOld: [],
activeName: "variable",
searchType: "",
selectVariable: "",
condition: {},
types: new Map([
['CONSTANT', this.$t('api_test.automation.constant')],
['LIST', this.$t('test_track.case.list')],
['CSV', 'CSV'],
['COUNTER', this.$t('api_test.automation.counter')],
['RANDOM', this.$t('api_test.automation.random')]
]),
visible: false,
selection: [],
loading: false,
currentPage: 1,
editData: {},
pageSize: 10,
total: 0,
headerSuggestions: REQUEST_HEADERS,
disabled: false,
selectType: "",
showDelete: false,
tableHeaderKey: "VARIABLE_LIST_TABLE",
fields: getCustomTableHeader('VARIABLE_LIST_TABLE'),
fieldsWidth: getCustomTableWidth('TRACK_REPORT_TABLE'),
screenHeight: '400px',
batchButtons: [
{
name: this.$t('api_test.definition.request.batch_delete'),
handleClick: this.handleDeleteBatch,
},
],
};
},
methods: {
batchAddParameter() {
this.$refs.batchAddParameter.open();
}, },
data() { batchAddHeader() {
return { this.$refs.batchAddHeader.open();
variables: [],
headers: [],
activeName: "variable",
searchType: "",
selectVariable: "",
condition: {},
types: new Map([
['CONSTANT', this.$t('api_test.automation.constant')],
['LIST', this.$t('test_track.case.list')],
['CSV', 'CSV'],
['COUNTER', this.$t('api_test.automation.counter')],
['RANDOM', this.$t('api_test.automation.random')]
]),
visible: false,
selection: [],
loading: false,
currentPage: 1,
editData: {},
pageSize: 10,
total: 0,
headerSuggestions: REQUEST_HEADERS,
disabled: false,
selectType: "",
showDelete: false,
tableHeaderKey: "VARIABLE_LIST_TABLE",
fields: getCustomTableHeader('VARIABLE_LIST_TABLE'),
fieldsWidth: getCustomTableWidth('TRACK_REPORT_TABLE'),
screenHeight: '400px',
batchButtons: [
{
name: this.$t('api_test.definition.request.batch_delete'),
handleClick: this.handleDeleteBatch,
},
],
};
}, },
methods: { _handleBatchVars(data) {
batchAddParameter() { if (data) {
this.$refs.batchAddParameter.open(); let params = data.split("\n");
}, let keyValues = [];
batchAddHeader() { params.forEach(item => {
this.$refs.batchAddHeader.open(); let line = item.split(/：|:/);
}, let required = false;
_handleBatchVars(data) { keyValues.unshift(new KeyValue({
if (data) { name: line[0],
let params = data.split("\n"); required: required,
let keyValues = []; value: line[1],
params.forEach(item => { description: line[2],
let line = item.split(/：|:/); type: "text",
let required = false; valid: false,
keyValues.unshift(new KeyValue({ file: false,
name: line[0], encode: true,
required: required, enable: true,
value: line[1], contentType: "text/plain"
description: line[2], }));
type: "text", })
valid: false, return keyValues;
file: false, }
encode: true, },
enable: true, batchSaveHeader(data) {
contentType: "text/plain" if (data) {
})); let keyValues = this._handleBatchVars(data);
}) keyValues.forEach(item => {
return keyValues; this.format(this.headers, item);
} });
}, }
batchSaveHeader(data) { },
if (data) { format(array, obj) {
let keyValues = this._handleBatchVars(data); if (array) {
keyValues.forEach(item => { let isAdd = true;
this.format(this.headers, item); for (let i in array) {
}); let item = array[i];
} if (item.name === obj.name) {
}, item.value = obj.value;
format(array, obj) { isAdd = false;
if (array) {
let isAdd = true;
for (let i in array) {
let item = array[i];
if (item.name === obj.name) {
item.value = obj.value;
isAdd = false;
}
}
if (isAdd) {
this.headers.unshift(obj);
} }
} }
}, if (isAdd) {
batchSaveParameter(data) { this.headers.unshift(obj);
if (data) {
let keyValues = this._handleBatchVars(data);
keyValues.forEach(item => {
item.type = 'CONSTANT';
this.addParameters(item);
});
} }
}, }
handleClick(command) { },
this.editData = {delimiter: ",", quotedData: 'false'}; batchSaveParameter(data) {
this.editData.type = command; if (data) {
this.addParameters(this.editData); let keyValues = this._handleBatchVars(data);
}, keyValues.forEach(item => {
item.type = 'CONSTANT';
this.addParameters(item);
});
}
},
handleClick(command) {
this.editData = {delimiter: ",", quotedData: 'false'};
this.editData.type = command;
this.addParameters(this.editData);
},
addParameters(v) { addParameters(v) {
v.id = getUUID(); v.id = getUUID();
if (v.type === 'CSV') { if (v.type === 'CSV') {
v.delimiter = ","; v.delimiter = ",";
v.quotedData = false; v.quotedData = false;
}
this.variables.push(v);
let index = 1;
this.variables.forEach(item => {
item.num = index;
index++;
});
},
sortParamters() {
let index = 1;
this.variables.forEach(item => {
item.num = index;
index++;
});
},
updateParameters(v) {
this.editData = JSON.parse(JSON.stringify(v));
this.updateFiles();
let datas = [];
this.variables.forEach(item => {
if (item.id === v.id) {
item = v;
} }
this.variables.push(v); datas.push(item);
let index = 1; });
this.variables.forEach(item => { this.variables = datas;
item.num = index; },
index++; select(selection) {
}); this.selection = selection.map(s => s.id);
}, },
sortParamters() { open: function (variables, headers, disabled) {
let index = 1; if (variables) {
this.variables.forEach(item => { this.variables = variables;
item.num = index; }
index++; if (headers) {
}); this.headers = headers;
}, }
updateParameters(v) { this.variablesOld = JSON.parse(JSON.stringify(this.variables));
this.editData = JSON.parse(JSON.stringify(v)); this.headersOld = JSON.parse(JSON.stringify(this.headers));
this.updateFiles(); this.visible = true;
let datas = []; this.disabled = disabled;
this.variables.forEach(item => { },
if(item.id === v.id){ save() {
item = v; this.visible = false;
} },
datas.push(item); close() {
}); this.visible = false;
this.variables = datas; let saveVariables = [];
}, this.variables.forEach(item => {
select(selection) { item.hidden = undefined;
this.selection = selection.map(s => s.id); if (item.name && item.name != "") {
}, saveVariables.push(item);
open: function (variables, headers, disabled) {
if (variables) {
this.variables = variables;
} }
if (headers) { });
this.headers = headers; this.selectVariable = "";
} this.searchType = "";
this.visible = true; if (jsondiffpatch.diff(JSON.parse(JSON.stringify(this.variables)), this.variablesOld) || jsondiffpatch.diff(JSON.parse(JSON.stringify(this.headers)), this.headersOld)) {
this.disabled = disabled;
},
save() {
this.visible = false;
},
close() {
this.visible = false;
let saveVariables = [];
this.variables.forEach(item => {
item.hidden = undefined;
if (item.name && item.name != "") {
saveVariables.push(item);
}
});
this.selectVariable = "";
this.searchType = "";
this.$emit('setVariables', saveVariables, this.headers); this.$emit('setVariables', saveVariables, this.headers);
}, }
addVariable() { },
this.editData = {delimiter: ",", quotedData: 'false',files:[]}; addVariable() {
this.editData.type = this.selectType; this.editData = {delimiter: ",", quotedData: 'false', files: []};
this.showDelete = false; this.editData.type = this.selectType;
this.showDelete = false;
this.$refs.variableTable.cancelCurrentRow();
},
confirmVariable() {
if (this.editData && (this.editData.name == undefined || this.editData.name == '')) {
this.$warning("变量名不能为空");
return;
}
// 更新场景，修改左边数据
if (this.showDelete) {
this.updateParameters(this.editData);
} else {
// 新增场景，往左边新加
this.addParameters(this.editData);
this.addVariable();
this.$refs.variableTable.cancelCurrentRow(); this.$refs.variableTable.cancelCurrentRow();
}, }
confirmVariable() { this.$success(this.$t('commons.save_success'));
if (this.editData && (this.editData.name == undefined || this.editData.name == '')) { },
this.$warning("变量名不能为空"); cancelVariable() {
return; this.$refs.variableTable.cancelCurrentRow();
// 清空表单
this.editData = {};
},
deleteVariable() {
let ids = [this.editData.id];
if (ids.length == 0) {
this.$warning("请选择一条数据删除");
return;
}
let message = "";
ids.forEach(row => {
const v = this.variables.find(d => d.id === row);
if (v.name) {
message += v.name + ";";
} }
// 更新场景，修改左边数据 });
if(this.showDelete){ if (message !== "") {
this.updateParameters(this.editData); message = message.substr(0, message.length - 1);
}else{ this.$alert('是否确认删除变量：【 ' + message + " 】？", '', {
// 新增场景，往左边新加
this.addParameters(this.editData);
this.addVariable();
this.$refs.variableTable.cancelCurrentRow();
}
this.$success(this.$t('commons.save_success'));
},
cancelVariable() {
this.$refs.variableTable.cancelCurrentRow();
// 清空表单
this.editData = {};
},
deleteVariable() {
let ids = [this.editData.id];
if (ids.length == 0) {
this.$warning("请选择一条数据删除");
return;
}
let message = "";
ids.forEach(row => {
const v = this.variables.find(d => d.id === row);
if (v.name) {
message += v.name + ";";
}
});
if (message !== "") {
message = message.substr(0, message.length - 1);
this.$alert('是否确认删除变量：【 ' + message + " 】？", '', {
confirmButtonText: this.$t('commons.confirm'),
callback: (action) => {
if (action === 'confirm') {
ids.forEach(row => {
const index = this.variables.findIndex(d => d.id === row);
this.variables.splice(index, 1);
});
this.sortParamters();
this.editData = {};
}
}
});
} else {
ids.forEach(row => {
const index = this.variables.findIndex(d => d.id === row);
this.variables.splice(index, 1);
});
this.sortParamters();
this.editData = {};
}
},
handleDeleteBatch() {
this.$alert("是否确认删除所选变量" + ' ' + " ？", '', {
confirmButtonText: this.$t('commons.confirm'), confirmButtonText: this.$t('commons.confirm'),
callback: (action) => { callback: (action) => {
if (action === 'confirm') { if (action === 'confirm') {
let ids = this.$refs.variableTable.selectIds;
ids.forEach(row => { ids.forEach(row => {
const index = this.variables.findIndex(d => d.id === row); const index = this.variables.findIndex(d => d.id === row);
this.variables.splice(index, 1); this.variables.splice(index, 1);
}); });
// this.editData = {type: "CONSTANT"};
this.sortParamters(); this.sortParamters();
this.editData = {}; this.editData = {};
this.$refs.variableTable.cancelCurrentRow();
this.$refs.variableTable.clear();
} }
} }
}); });
}, } else {
filter() { ids.forEach(row => {
let datas = []; const index = this.variables.findIndex(d => d.id === row);
this.variables.forEach(item => { this.variables.splice(index, 1);
if (this.searchType && this.searchType != "" && this.selectVariable && this.selectVariable != "") { });
if ((item.type && item.type.toLowerCase().indexOf(this.searchType.toLowerCase()) == -1 && this.searchType != 'ALL') this.sortParamters();
this.editData = {};
}
},
handleDeleteBatch() {
this.$alert("是否确认删除所选变量" + ' ' + " ？", '', {
confirmButtonText: this.$t('commons.confirm'),
callback: (action) => {
if (action === 'confirm') {
let ids = this.$refs.variableTable.selectIds;
ids.forEach(row => {
const index = this.variables.findIndex(d => d.id === row);
this.variables.splice(index, 1);
});
// this.editData = {type: "CONSTANT"};
this.sortParamters();
this.editData = {};
this.$refs.variableTable.cancelCurrentRow();
this.$refs.variableTable.clear();
}
}
});
},
filter() {
let datas = [];
this.variables.forEach(item => {
if (this.searchType && this.searchType != "" && this.selectVariable && this.selectVariable != "") {
if ((item.type && item.type.toLowerCase().indexOf(this.searchType.toLowerCase()) == -1 && this.searchType != 'ALL')
|| (item.name && item.name.toLowerCase().indexOf(this.selectVariable.toLowerCase()) == -1)) { || (item.name && item.name.toLowerCase().indexOf(this.selectVariable.toLowerCase()) == -1)) {
item.hidden = true; item.hidden = true;
} else {
item.hidden = undefined;
}
} else if (this.selectVariable && this.selectVariable != "") {
if (item.name && item.name.toLowerCase().indexOf(this.selectVariable.toLowerCase()) == -1) {
item.hidden = true;
} else {
item.hidden = undefined;
}
} else if (this.searchType && this.searchType != "") {
if (item.type && item.type.toLowerCase().indexOf(this.searchType.toLowerCase()) == -1 && this.searchType != 'ALL') {
item.hidden = true;
} else {
item.hidden = undefined;
}
} else { } else {
item.hidden = undefined; item.hidden = undefined;
} }
if(this.searchType === 'ALL' && !((this.selectVariable && this.selectVariable != ""))){ } else if (this.selectVariable && this.selectVariable != "") {
if (item.name && item.name.toLowerCase().indexOf(this.selectVariable.toLowerCase()) == -1) {
item.hidden = true;
} else {
item.hidden = undefined; item.hidden = undefined;
} }
datas.push(item); } else if (this.searchType && this.searchType != "") {
}); if (item.type && item.type.toLowerCase().indexOf(this.searchType.toLowerCase()) == -1 && this.searchType != 'ALL') {
this.variables = datas; item.hidden = true;
}, } else {
createFilter(queryString) { item.hidden = undefined;
return item => {
return (item.type && item.type.toLowerCase().indexOf(queryString.toLowerCase()) !== -1);
};
},
handleRowClick(row) {
// 做深拷贝
this.editData = JSON.parse(JSON.stringify(row));
this.updateFiles();
this.showDelete = true;
},
updateFiles(){
this.variables.forEach(item => {
if(item.id === this.editData.id){
this.editData.files = item.files
} }
}); } else {
} item.hidden = undefined;
}
if (this.searchType === 'ALL' && !((this.selectVariable && this.selectVariable != ""))) {
item.hidden = undefined;
}
datas.push(item);
});
this.variables = datas;
},
createFilter(queryString) {
return item => {
return (item.type && item.type.toLowerCase().indexOf(queryString.toLowerCase()) !== -1);
};
},
handleRowClick(row) {
// 做深拷贝
this.editData = JSON.parse(JSON.stringify(row));
this.updateFiles();
this.showDelete = true;
},
updateFiles() {
this.variables.forEach(item => {
if (item.id === this.editData.id) {
this.editData.files = item.files
}
});
} }
}; }
};
</script> </script>
<style> <style>
.ms-variable-hidden-row { .ms-variable-hidden-row {
display: none; display: none;
} }
.ms-variable-header { .ms-variable-header {
background: #783887; background: #783887;
color: white; color: white;
height: 18px; height: 18px;
border-radius: 42%; border-radius: 42%;
} }
.ms-variable-link { .ms-variable-link {
float: right; float: right;
margin-right: 45px; margin-right: 45px;
} }
fieldset { fieldset {
padding: 0px; padding: 0px;
margin: 0px; margin: 0px;
min-width: 100%; min-width: 100%;
min-inline-size: 0px; min-inline-size: 0px;
border: 0px; border: 0px;
} }
.ms-select { .ms-select {
width: 100px; width: 100px;
margin-right: 10px; margin-right: 10px;
} }
</style> </style>