udiwms-vue/src/views/basic/BasicNewDiUpload.vue

<template>
    <div>

        <el-card>


            <el-form :inline="true" :model="query" class="query-form" size="mini">
                <el-row>
                    <el-form-item class="query-form-item">
                        <el-input v-model="filterQuery.genKey" placeholder="DI产品标识"></el-input>
                    </el-form-item>

                    <el-form-item class="query-form-item">
                        <el-select v-model="filterQuery.uploadStatus" placeholder="上传状态">
                            <el-option label="全部" value=""></el-option>
                            <el-option label="正在上传" value="0"></el-option>
                            <el-option label="上传成功" value="1"></el-option>
                            <el-option label="上传失败" value="2"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item>
                        <el-button-group style="display:flex;">
                            <el-button type="primary" icon="el-icon-refresh" @click="onReset"></el-button>
                            <el-button type="primary" icon="search" @click="getList">查询</el-button>
                        </el-button-group>

                    </el-form-item>
                </el-row>
            </el-form>
            <el-table
                v-loading="loading"
                :data="list"
                style="width: 100%"
                @selection-change="handleSelectionChange"
            >
                <el-table-column label="序号" type="index"></el-table-column>

                <el-table-column
                    label="DI产品标识"
                    prop="nameCode"
                    show-overflow-tooltip
                >
                </el-table-column>

                <el-table-column
                    label="产品名称"
                    prop="productName"
                    show-overflow-tooltip
                >
                </el-table-column>
                <el-table-column
                    label="目标系统"
                    prop="thirdSysFk"
                    show-overflow-tooltip
                >
                </el-table-column>


                <el-table-column
                    label="第三方编码"
                    prop="uploadCode"
                    show-overflow-tooltip
                >
                </el-table-column>

                <el-table-column
                    label="更新日期"
                    prop="updateTime"
                    show-overflow-tooltip
                ></el-table-column>
                <el-table-column
                    label="上传状态"
                    prop="uploadStatus"
                    show-overflow-tooltip
                >
                    <template slot-scope="scope">
                        <el-tag
                            :type="statusFilterType(scope.row.uploadStatus)"
                        >{{ status[scope.row.uploadStatus] }}
                        </el-tag
                        >
                    </template>
                </el-table-column>
                <el-table-column label="操作" fixed="right" width="160">
                    <template slot-scope="scope">

                        <el-button
                            type="text"
                            size="small"
                            @click.native.stop="uploadDilaog(scope.row)"
                        >上传
                        </el-button
                        >

                        <el-button
                            type="text"
                            size="small"
                            @click.native.stop="handleDetailClick(scope.row)"
                        >详情
                        </el-button
                        >
                        <el-button
                            type="text"
                            size="small"
                            @click.native.stop="deleteDialog(scope.row.id)"
                        >删除
                        </el-button
                        >
                    </template>
                </el-table-column>
            </el-table>


            <el-pagination
                :page-size="filterQuery.limit"
                @current-change="handleCurrentChange"
                layout="prev, pager, next"
                :total="total"
                :current-page="filterQuery.page"
            ></el-pagination>
        </el-card>
    </div>

</template>
<script>
import {filterList, deleteNewDi, postThird} from "../../api/basic/newDiUpload";
import {getBasicThirdSys} from "../../api/basic/basicThirdSys";
import {deleteLog} from "@/api/basic/corpImport";

export default {
    data() {
        return {
            filterQuery: {
                nameCode: null,
                uploadStatus: null,
                thirdSysFk: null,
                page: 1,
                limit: 20,
            },
            list: [],
            thirdSys: [],
            total: 0,
            currentRow: null,
            status: {
                0: "等待上传",
                1: "正在上传",
                2: "上传失败",
                3: "上传成功"
            },
        };
    },

    methods: {
        onReset() {
            this.$router.push({
                path: "",
            });
            this.filterQuery = {
                nameCode: null,
                uploadStatus: null,
                thirdSysFk: null,
                page: 1,
                limit: 20,
            };
            this.getList();
        },
        getList() {
            this.loading = true;
            filterList(this.filterQuery)
                .then((response) => {
                    this.loading = false;
                    this.list = response.data.list || [];
                    this.total = response.data.total || 0;
                })
                .catch(() => {
                    this.loading = false;
                    this.list = [];
                    this.total = 0;
                });
        },

        handleDetailClick(row) {
            this.currentRow = row;
            this.$confirm(this.currentRow.uploadMsg, "上传结果信息", {
                confirmButtonText: '确定',
                type: 'warning'
            }).then(() => {


            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消操作'
                });
            });
        },


        cancelDialog() {
            this.corpImportDetailVisible = false;
        },
        handleCurrentChange(val) {
            this.filterQuery.page = val;
            this.getList();
        },
        deleteDialog(rowId) {
            this.$confirm("此操作将删除该产品上传记录, 是否继续?", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
            })
                .then(() => {
                    let dQuery = {
                        id: rowId,
                    };
                    deleteNewDi(dQuery)
                        .then((response) => {
                            this.loading = false;
                            if (response.code == 20000) {
                                this.$message.success("删除成功");
                            } else {
                                this.$message.error(response.message);
                            }
                            this.getList();
                        })
                        .catch(() => {
                            this.loading = false;
                        });
                })
                .catch(() => {
                });
        },
        getBasicThirdSys() {
            let query = {
                enabled: true,
            };
            getBasicThirdSys(query)
                .then((response) => {
                    this.thirdSys = response.data.list || [];
                    this.getList();
                })
                .catch(() => {
                    this.loading = false;
                    this.list = [];
                });
        },
        statusFilterType(status) {
            const statusMap = {
                0: "warning",
                1: "warning",
                2: "danger",
                3: "success",
            };
            return statusMap[status];
        },
        uploadDilaog(row) {
            this.$confirm("确定上传产品信息至第三方系统", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
            })
                .then(() => {
                    this.postProduct(row);
                })
                .catch(() => {
                });

        },


        postProduct(row) {
            postThird(row)
                .then((response) => {
                    if (response.code == 20000) {
                        this.getList();
                    } else {
                        this.$message.error(response.message);
                    }
                })
                .catch(() => {
                    this.loading = false;
                    this.list = [];
                });
        }
    },

    mounted() {
    }
    ,
    created() {
        this.getBasicThirdSys();
        this.getList();
    }
    ,
}
;
</script>
<style>
.itemTag {
    float: left;
    text-align: left;
    margin-top: 10px;
    width: 100px;
}

.text {
    font-size: 13px;
    font-family: "Microsoft YaHei";
}

.el-row {
    display: flex;
    flex-wrap: wrap;

}

.el-col {
    border-radius: 4px;
    flex-wrap: wrap;
}
</style>