Skip to content

V
vue-gjjs
Commit ddd01c73 by liuxin
Options

数据对比

parent 5745c00b
Showing with 601 additions and 0 deletions
src/components/CompareTable.vue 0 → 100644
<template>
<div class="eContainer-table-block">
<div style="text-align: left" v-if="showButtonFlg" class="buttonDiv">
<c-button
icon="el-icon-s-tools"
@click="clounmSetting"
style=""
></c-button>
</div>
<el-table
ref="table"
:data="
tableData.slice(
(currentPage - 1) * pageSize,
currentPage * pageSize
)
"
style="width: 100%"
class="eContainer-table"
@selection-change="handleSelectionChange"
:row-key="getRowKey"
:header-cell-style="{
background: 'rgb(235, 235, 235)',
color: 'rgb(51, 51, 51)',
}"
:highlight-current-row="false"
@row-click="rowClick"
:border="true"
:row-class-name="tableRowClassName"
>
<el-table-column
type="selection"
width="55"
v-if="showSelection"
:reserve-selection="true"
></el-table-column>
<el-table-column label="类型" width="80" prop="dataType">
</el-table-column>
<c-table-column
v-for="(item, key) in tableColumns"
:key="key"
:prop="item.prop"
:label="item.label"
:width="item.width"
>
<template v-slot="{ scope }">
<div v-if="checkIsHighLight(scope.$index, item.prop)">
<span style="color: red">{{
scope.row[item.prop]
}}</span>
</div>
<div v-else>
<span>{{ scope.row[item.prop] }}</span>
</div>
</template>
</c-table-column>
<slot></slot>
</el-table>
<c-col :span="16">
<el-pagination
v-if="paginationShow"
class="eContainer-pagination"
layout="prev, pager, next, jumper"
:page-sizes="pageSizes"
:page-size="pageSize"
:current-page="currentPage"
:total="tableData.length"
@size-change="sizeChange"
@current-change="currentChange"
></el-pagination>
</c-col>
<c-col :span="8">
<div class="paginationLable" v-if="paginationShow">
当前显示第 {{ (currentPage - 1) * pageSize + 1 }}-{{
currentPage * pageSize > tableData.length
? tableData.length
: currentPage * pageSize
}}
条，共 {{ tableData.length }} 条
</div>
</c-col>
</div>
</template>
<script>
export default {
props: {
columns: {
type: Array,
default: () => {
return [];
},
},
high_columns: {
type: Array,
default: () => {
return [];
},
},
list: {
type: Array,
default: () => {
return [];
},
},
maxColumnLength: {
type: Object,
default: () => {
return [];
},
},
showType: {
type: Number,
default: () => {
return 1;
},
},
showSelection: {
type: Boolean,
default: false,
},
paginationShow: {
type: Boolean,
required: false,
default: true,
},
showButtonFlg: {
type: Boolean,
required: false,
default: false,
},
},
watch: {
columns() {
this.generateColumns();
},
},
computed: {
tableData() {
const ret = [];
for (let i = 0; i < this.list.length; i++) {
if(this.showType == 0){
this.list[i].data["dataType"] = this.list[i].type;
ret.push(this.list[i].data);
}else if(this.showType == 1){
if(this.list[i].flag != -1){
this.list[i].diffRows["dataType"] = this.list[i].type;
ret.push(this.list[i].diffRows);
}else{
this.list[i].data["dataType"] = this.list[i].type;
ret.push(this.list[i].data);
}
}
}
return ret;
},
},
data() {
return {
tableColumnsOrigin: [],
tableColumns: [],
currentPage: 1,
pageSizes: [5, 10, 20, 30, 40, 50, 100],
pageSize: 10,
selectAll: true,
columnGroup: [],
setColumnFlg: false,
select_index:0,
select_last_index:0,
select_background_color:{
warning:["warning-row_1","warning-row_2"],
success:"success-row",
fail:"fail-row"
}
};
},
mounted() {
this.generateColumns();
},
methods: {
generateColumns() {
const arr = [];
for (let i = 0; i < this.columns.length; i++) {
const column = this.columns[i];
arr.push({
idx: i,
prop: column,
label: column,
width:
this.maxColumnLength[column] > 5
? this.maxColumnLength[column] * 14
: 80
});
}
this.tableColumns = arr;
},
checkIsHighLight(index, prop) {
if (this.list[index].flag == -1) {
return false;
}
return this.list[index].diffKeys.indexOf(prop) >= 0 ? true : false;
},
tableRowClassName({ row, rowIndex }) {
const id = this.list[rowIndex].id;
const flag = this.list[rowIndex].flag;
if(flag == -1){
return this.select_background_color.fail;
}
if(flag == 1){
return this.select_background_color.success;
}
// if(id != this.select_last_index){
// this.select_index++;
// this.select_last_index = id;
// }
// const idx = this.select_index % 2;
return this.select_background_color.warning[id % 2];
},
sizeChange(size) {
this.pageSize = size;
},
currentChange(currentPage) {
this.currentPage = currentPage;
},
handleSelectionChange(val) {
this.$emit("multipleSelect", this.getSelectedRowIndex(val));
},
getRowKey(row) {
return row["IDX"];
},
getSelectedRowIndex(val) {
const indexArr = [];
for (let j = 0; j < val.length; j++) {
const v = val[j];
for (let i = 0; i < this.tableData.length; i++) {
const data = this.tableData[i];
if (v["IDX"] === data["IDX"]) {
indexArr.push(i);
}
}
}
return indexArr;
},
// 行点击，设置高亮
rowClick(row, column, event) {
this.$refs.table.setCurrentRow(row);
this.$emit("chooseRowEvent", row);
},
clounmSetting() {
this.setColumnFlg = true;
},
saveColumnEvent() {
this.setColumnFlg = false;
const arr = this.columnGroup.map((idx) => parseInt(idx));
arr.sort((a, b) => a - b);
this.columnGroup = arr;
this.tableColumns = this.columnGroup.map(
(index) => this.tableColumnsOrigin[parseInt(index) - 1]
);
},
setAll(val) {
this.columnGroup = val
? this.tableColumnsOrigin.map((item) => parseInt(item.index))
: [];
},
handleColumnChange() {
this.selectAll =
this.tableColumnsOrigin.length === this.columnGroup.length;
},
//补充自定义列处理函数
//去掉日期的时分秒毫秒
date(item, scope) {
let value = scope.row[item.prop];
if (!value) {
return "";
}
let idx = value.indexOf(" ");
if (idx > 0) return value.substring(0, idx);
return value;
},
//code映射
code(item, scope) {
let value = scope.row[item.prop];
let code = item.code;
if (!value || !code) {
return "";
}
let em = code.find((item) => item.value.trim() == value.trim());
if (!em) {
return value;
}
return em.label;
},
//去掉时间的毫秒
time(item, scope) {
let value = scope.row[item.prop];
if (!value) {
return "";
}
let idx = value.indexOf(".");
if (idx > 0) return value.substring(0, idx);
return value;
},
//日期格式化
dateFormat(item, scope) {
let value = scope.row[item.prop];
if (!value) {
return "";
}
return (
value.substring(0, 4) +
"-" +
value.substring(4, 6) +
"-" +
value.substring(6)
);
},
},
};
</script>
<style>
.eContainer-table-block {
margin-top: 15px;
position: relative;
}
.eContainer-table-block .paginationLable {
font-size: 12px;
color: #808080;
height: 26px;
line-height: 26px;
float: right;
/* margin-top: 20px; */
}
.eContainer-table-block .el-table__body-wrapper {
overflow: auto;
}
.el-table .warning-row {
background: oldlace;
}
.el-table .success-row {
background: #f0f9eb;
}
.selectColumnClass .el-checkbox__label {
width: 67px;
font-size: 13px;
}
.selectAllClass .el-checkbox__label {
width: 30px;
font-size: 13px;
padding-left: 5px;
}
.eContainer-table-block >>> .el-table .cell {
white-space: pre-wrap;
}
.buttonDiv {
text-align: left;
display: inline-block;
margin: 0;
position: absolute;
z-index: 999;
right: 5px;
padding-top: 3px;
}
/*去掉鼠标悬停背景颜色*/
.el-table tbody tr:hover > td {
background-color: #ffffff !important;
}
.el-table .warning-row_1 {
background: oldlace;
}
.el-table .warning-row_2 {
background: rgb(230, 253, 253);
}
.el-table .success-row {
background: #f0f9eb;
}
.el-table .fail-row {
background: #f9ebf1;
}
</style>
\ No newline at end of file
src/components/index.js
......@@ -49,6 +49,8 @@ import InfSearchGroup from "./InfSearchGroup"
import InputSelect from "./InputSelect"
import Fullbox from "./Fullbox"
import CompareTable from "./CompareTable"
export default {
install(Vue) {
Vue.component("c-page", c_page)
......@@ -99,5 +101,6 @@ export default {
Vue.component("c-codelabel", CodeLabel)
Vue.component("c-inputselect", InputSelect)
Vue.component("c-fullbox", Fullbox)
Vue.component("c-compare-table", CompareTable)
}
}
\ No newline at end of file
src/service/compare/index.js 0 → 100644
import Api from "~/service/Api"
export function all(data) {
return Api.post("/devtools/compare/all", data)
}
\ No newline at end of file
src/views/TaskList/compare.vue 0 → 100644
<template>
<div class="eibs-tab">
<el-form
:model="model"
:rules="rules"
ref="modelForm"
tokenKey="modelForm"
label-width="140px"
size="small"
:validate-on-rule-change="false"
>
<c-col :span="8">
<el-form-item label="业务主表">
<c-input
v-model="xxd"
placeholder="请输入业务主表"
></c-input>
</el-form-item>
</c-col>
<c-col :span="8">
<el-form-item label="业务参考号（TD）">
<c-input
v-model="tdref"
placeholder="请输入业务参考号（TD）"
></c-input>
</el-form-item>
</c-col>
<c-col :span="8">
<el-form-item label="业务参考号（新国结）">
<c-input
v-model="newref"
placeholder="请输入业务参考号（新国结）"
></c-input>
</el-form-item>
</c-col>
<c-col :span="24" style="text-align: right">
<el-button size="small" @click="handleReset">重置</el-button>
<el-button
type="primary"
icon="el-icon-search"
size="small"
@click="handleSearch"
>查询对比</el-button
>
</c-col>
<c-col :span="24" style="margin-top: 10px">
<div style="border-bottom: 10px solid rgb(232, 232, 232)"></div>
</c-col>
<div v-for="(item, idx) in compareData" :key="idx">
<c-col
:span="24"
style="height: 24px; margin-top: 20px; margin-bottom: 5px"
>
<c-col :span="12">
<el-form-item :label="item.bo" class="messageLabel">
</el-form-item>
</c-col>
<c-col
:span="12"
style="
text-align: right;
font-weight: bold;
font-size: 12px;
"
>
<div v-if="showType == 0">
<c-button @click="changeShowType(0)" type="primary">原始数据</c-button>
<c-button @click="changeShowType(1)">对比结果</c-button>
</div>
<div v-else>
<c-button @click="changeShowType(0)">原始数据</c-button>
<c-button @click="changeShowType(1)" type="primary">对比结果</c-button>
</div>
</c-col>
</c-col>
<c-col :span="24" style="height: 0px; margin-top: -5px">
<el-divider></el-divider>
</c-col>
<c-col :span="24">
<c-col :span="24" :offset="0" v-if="showType == 0">
<c-compare-table
:list="item.diffRows"
:columns="item.allKeys"
:paginationShow="false"
:showType="showType"
:maxColumnLength="maxColumnLength[item.bo]"
style="width: 100%"
>
</c-compare-table>
</c-col>
<c-col :span="24" :offset="0" v-if="showType == 1">
<c-compare-table
:list="item.diffRows"
:columns="item.diffKeys"
:paginationShow="false"
:showType="showType"
:maxColumnLength="maxColumnLength[item.bo]"
style="width: 100%"
>
</c-compare-table>
</c-col>
</c-col>
</div>
</el-form>
</div>
</template>
<script>
import { max } from 'moment';
import { all } from "~/service/compare";
export default {
data() {
return {
tabVal: "menu",
trnName: "compare",
model: null,
rules: null,
bo: "",
xxd: "DID",
tdref: "KZ3500210535AA ",
newref: "KZ3500210549AA ",
compareData:[],
DID_Data: {
data: [],
columns: [],
},
DID_high_columns: [],
maxColumnLength:{},
showType: 1, //0:原始数据， 1:对比数据
};
},
computed: {},
name: "TaskList",
created() {},
methods: {
async handleReset() {},
async handleSearch() {
const params = {
xxd: this.xxd,
tdref: this.tdref,
newref: this.newref,
};
const that = this;
all(params).then((res) => {
console.log(res);
that.compareData = res;
that.bo = res[0].bo;
for (let i = 0; i < res.length; i++) {
const ret = {};
for (let j = 0; j < res[i].allKeys.length; j++) {
const key = res[i].allKeys[j];
ret[key] = key.length;
for (let k = 0; k < res[i].diffRows.length; k++) {
var current_length = res[i].diffRows[k].data[key] ? (res[i].diffRows[k].data[key] + '').trim().length : 0;
var current_max = ret[key] ? ret[key] : 0;
if(current_length >= current_max){
ret[key] = current_length;
}
}
}
this.maxColumnLength[res[i].bo] = ret;
}
console.log(this.maxColumnLength);
});
},
changeShowType(key){
this.showType = key;
}
},
components: {},
};
</script>
<style scoped>
.messageLabel >>> .el-form-item__label {
text-align: left;
font-weight: bold;
font-size: 12px;
}
</style>
src/views/TaskList/index.vue
......@@ -62,6 +62,14 @@
<t-diasel />
</c-content>
</el-tab-pane>
<el-tab-pane label="数据对比" name="compare">
<span slot="label">
数据对比
</span>
<c-content :height="180">
<t-compare />
</c-content>
</el-tab-pane>
</c-tabs>
</div>
</template>
......@@ -73,6 +81,7 @@ import Trnrel from "~/views/Business/Trnrel";
import Trnfnd from "~/views/Business/Trnrel/Trnfnd";
import Diasel from "~/views/Business/Diasel";
import Bopsel from "~/views/Business/Bopsel";
import Compare from "./compare";
export default {
data() {
......@@ -102,6 +111,7 @@ export default {
"t-trnfnd": Trnfnd,
"t-diasel": Diasel,
"t-bopsel": Bopsel,
"t-compare": Compare,
},
};
</script>
......
vue.config.js
......@@ -47,6 +47,13 @@ module.exports = {
'^/gjjs/report': '/gjjs/report'
}
},
'/gjjs/devtools/': {
target: 'http://127.0.0.1:8083',
changeOrigin: true,
pathRewrite: {
'^/gjjs/devtools': '/gjjs/devtools'
}
},
/**
* ocr智能识别服务
*/
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment