Skip to content

S
SEMI
提交 c55f0e43 authored 作者: 刘旭's avatar 刘旭
浏览文件
操作

优化日志的input输入框

上级 bb2ce782
隐藏空白字符变更
内嵌 并排
正在显示 包含 110 行增加 和 42 行删除
src/views/manage/kingdeeLog.vue
浏览文件 @ c55f0e43
......@@ -19,17 +19,18 @@
<el-col></el-col>
<el-col :span="10">
<el-form-item label="同步时长/毫秒">
<!-- <el-row justify="start">
<el-col :span="10"> -->
<el-input v-model="filterForm.costTimeFrom" controls-position="right" @change="handleNumberChangeFrom"
placeholder="开始同长时间" :input-style="{ width: '46.5%' }" />
<!-- </el-col> -->
<span style="margin: 0 10px;">至</span>
<!-- <el-col :span="10"> -->
<!-- <el-input v-model="filterForm.costTimeFrom" controls-position="right" @change="handleNumberChangeFrom"
placeholder="开始同步时长" :input-style="{ width: '46.5%' }" />
<span style="margin: 0 10px">至</span>
<el-input v-model="filterForm.costTimeTo" controls-position="right" placeholder="结束同步时长"
@change="handleNumberChangeTo" :input-style="{ width: '46.5%' }" />
<!-- </el-col>
</el-row> -->
@change="handleNumberChangeTo" :input-style="{ width: '46.5%' }" /> -->
<div class="input-class" id="input-class">
<input type="text" class="range-input" placeholder="开始同步时长" v-model="filterForm.costTimeFrom"
@focus="onFocus" @blur="onBlur" @input="handleNumberChangeFrom" />
<span class="range-separator">至</span>
<input type="text" class="range-input" placeholder="结束同步时长" v-model="filterForm.costTimeTo"
@focus="onFocus" @blur="onBlur" @input="handleNumberChangeTo" />
</div>
</el-form-item>
</el-col>
<el-col :span="6">
......@@ -37,13 +38,12 @@
<el-input v-model="filterForm.queueId" placeholder="请输入唯一标识" clearable />
</el-form-item>
</el-col>
<el-col :span="4" style="text-align: center;">
<el-col :span="4" style="text-align: center">
<el-button type="primary" @click="handleScreen">筛选</el-button>
</el-col>
</el-row>
</el-form>
<el-divider />
<!-- 表格 -->
......@@ -71,7 +71,7 @@
<textarea v-model="scope.row.message" class="paperview-input-text" rows="10" cols="30" readonly>
</textarea>
</template>
<span style="white-space: nowrap;">{{ scope.row.message }}</span>
<span style="white-space: nowrap">{{ scope.row.message }}</span>
</el-tooltip>
</template>
</el-table-column>
......@@ -147,7 +147,7 @@ const filterForm = ref({
name: "",
costTimeFrom: <any>undefined,
costTimeTo: <any>undefined,
queueId: ''
queueId: "",
});
const detailForm = ref<any>({
flag: "",
......@@ -155,7 +155,7 @@ const detailForm = ref<any>({
request: "",
response: "",
message: "",
queueId: ''
queueId: "",
});
const indexMethod = (index: number) => {
return index++;
......@@ -171,10 +171,10 @@ const { tableList, total, loading, pageSize, currentPage } =
// 同步筛选
const filterChange = (value: any) => {
let i = ''
let i = "";
Object.values(value).forEach((e: any) => {
i = e[0]
})
i = e[0];
});
nextTick(() => {
filters.value = i;
page(
......@@ -195,8 +195,8 @@ const dateChange = (value: any) => {
filterForm.value.dateFrom = moment(value[0]).format("YYYY-MM-DD HH:mm:ss");
filterForm.value.dateTo = moment(value[1]).format("YYYY-MM-DD HH:mm:ss");
} else {
filterForm.value.dateFrom = '';
filterForm.value.dateTo = '';
filterForm.value.dateFrom = "";
filterForm.value.dateTo = "";
}
// console.log(value);
......@@ -265,7 +265,7 @@ const page = (
};
// 每页新条数
const handleSizeChange = (val: number) => {
pageSize.value = val
pageSize.value = val;
page(
currentPage.value,
pageSize.value,
......@@ -282,7 +282,7 @@ const handleSizeChange = (val: number) => {
};
// 新页数
const handleCurrentChange = (val: number) => {
currentPage.value = val
currentPage.value = val;
page(
currentPage.value,
pageSize.value,
......@@ -296,46 +296,114 @@ const handleCurrentChange = (val: number) => {
);
};
const handleNumberChangeFrom = (value: any) => {
const handleNumberChangeFrom = () => {
if (filterForm.value.costTimeFrom) {
let regPos = /^\+?[1-9][0-9]*$/; // 非负整数
if (!regPos.test(value)) {
filterForm.value.costTimeFrom = ''
ElMessage({ type: 'warning', message: '请输入整数' })
if (!regPos.test(filterForm.value.costTimeFrom)) {
filterForm.value.costTimeFrom = "";
ElMessage({ type: "warning", message: "请输入整数" });
} else {
if (filterForm.value.costTimeTo) {
if (filterForm.value.costTimeFrom >= filterForm.value.costTimeTo) {
filterForm.value.costTimeFrom = ''
filterForm.value.costTimeTo = ''
ElMessage({ type: 'warning', message: '开始同步时长不得大于结束同步时长' })
filterForm.value.costTimeFrom = "";
filterForm.value.costTimeTo = "";
ElMessage({
type: "warning",
message: "开始同步时长不得大于结束同步时长",
});
}
}
}
}
}
const handleNumberChangeTo = (value: any) => {
};
const handleNumberChangeTo = () => {
if (filterForm.value.costTimeTo) {
let regPos = /^\+?[1-9][0-9]*$/; // 非负整数
if (!regPos.test(value)) {
filterForm.value.costTimeTo = ''
ElMessage({ type: 'warning', message: '请输入整数' })
if (!regPos.test(filterForm.value.costTimeTo)) {
filterForm.value.costTimeTo = "";
ElMessage({ type: "warning", message: "请输入整数" });
} else {
// 比较同步时间大小
if (+filterForm.value.costTimeFrom >= +filterForm.value.costTimeTo) {
filterForm.value.costTimeFrom = ''
filterForm.value.costTimeTo = ''
ElMessage({ type: 'warning', message: '结束同步时长不得大于开始同步时长' })
filterForm.value.costTimeFrom = "";
filterForm.value.costTimeTo = "";
ElMessage({
type: "warning",
message: "结束同步时长不得大于开始同步时长",
});
}
}
}
}
};
const onFocus = () => document.getElementById('input-class')!.style.boxShadow = '0 0 0 1px #409EFF inset'
const onBlur = () => document.getElementById('input-class')!.style.boxShadow = '0 0 0 1px #dcdfe6 inset'
</script>
<style>
.paperview-input-text {
<style scoped>
::v-deep(.paperview-input-text) {
border: 0;
color: #FAFCFF;
color: #fafcff;
background-color: #303133;
}
.input-class {
width: 100%;
height: 100%;
display: inline-flex;
align-items: center;
border-radius: 4px;
box-shadow: 0 0 0 1px #dcdfe6 inset;
padding: 0 10px;
}
.range-input {
appearance: none;
border: none;
outline: 0;
display: inline-block;
height: 30px;
line-height: 30px;
margin: 0;
padding: 0;
width: 39%;
text-align: center;
font-size: 14px;
color: #606266;
background-color: transparent;
}
.range-separator {
flex: 1;
display: inline-flex;
justify-content: center;
align-items: center;
height: 100%;
padding: 0 5px;
margin: 0;
font-size: 14px;
word-break: keep-all;
color: var(--el-text-color-primary);
}
input::-webkit-input-placeholder {
/* WebKit browsers */
color: #b1b3b8;
}
input:-moz-placeholder {
/* Mozilla Firefox 4 to 18 */
color: #b1b3b8;
}
input::-moz-placeholder {
/* Mozilla Firefox 19+ */
color: #b1b3b8;
}
input:-ms-input-placeholder {
/* Internet Explorer 10+ */
color: #b1b3b8;
}
</style>
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论