数据对比

src/components/CompareTable.vue

+<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

+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

+<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智能识别服务
        */