spms-vue/src/views/basic/UdiinfoSelectVersion.vue

<template>
    <div>
        <el-card class="el-card">
            <div>
                <el-form>
                    <el-form-item class="query-form-item">
                        <el-button-group>
                            <el-button type="primary" icon="search" @click="dlLastVersion" size="mini"
                            >国家同步库更新查询
                            </el-button
                            >
                            <el-button type="primary" icon="search" @click="getList" size="mini"
                            >刷新
                            </el-button
                            >
                        </el-button-group>
                    </el-form-item>
                </el-form>
                <el-table
                    :data="udidlList"
                    style="width: 100%"
                    v-loading="loading"
                    highlight-current-row="true"
                    :row-class-name="tableRowClassName"
                    @current-change="handleErpChange"
                    @selection-change="handleSelectionUdiChange"
                >
                    <el-table-column label="序号" type="index"></el-table-column>

                    <el-table-column
                        label="版本号"
                        prop="versionNumber"
                        show-overflow-tooltip
                    ></el-table-column>

                    <el-table-column
                        label="产品标识"
                        prop="nameCode"
                        show-overflow-tooltip
                    ></el-table-column>
                    <el-table-column
                        label="产品名称"
                        prop="cpmctymc"
                        show-overflow-tooltip
                    ></el-table-column>
                    <el-table-column
                        label="规格型号"
                        prop="ggxh"
                        show-overflow-tooltip
                    ></el-table-column>
                    <el-table-column
                        label="医疗器械注册人"
                        prop="ylqxzcrbarmc"
                        show-overflow-tooltip
                    ></el-table-column>
                    <el-table-column
                        label="注册证编号"
                        prop="zczbhhzbapzbh"
                        show-overflow-tooltip
                    ></el-table-column>

                    <el-table-column label="操作" fixed="right">
                        <template slot-scope="scope">
                            <el-button
                                type="text"
                                size="small"
                                @click="diDetail(scope.row)"
                            >详情
                            </el-button
                            >
                            <el-button
                                type="text"
                                size="small"
                                :disabled="scope.row.uuid === originUuid"
                                @click="checkCombine(scope.row)"
                            >选入
                            </el-button
                            >
                        </template>
                    </el-table-column>

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

            </div>
        </el-card>
        <el-dialog
            title="器械信息详情"
            :close-on-click-modal="false"
            :close-on-press-escape="false"
            :visible.sync="selectDialog"
            width="65%"
            append-to-body
            v-if="selectDialog"
        >
            <selectDiDetail :editQuery="diDetails"
            ></selectDiDetail>
        </el-dialog>

    </div>
</template>

<script>
import {filterByVersion, dlLastVersionByDi, superSearch,} from "../../api/basic/udiInfo";
import {changeVersion, checkExitUdi} from "../../api/basic/udiRelevance";
import selectDiDetail from "./SelectDIDetailDialog"

export default {
    name: "UdiinfoSelectVersion",
    props: {
        relId: {
            type: Object,
            required: true,
        },
        uuid: {
            type: Object,
            required: true,
        },
        originUuid: {
            type: Object,
            required: true,
        },

        closeDialog: {
            type: Function,
            required: true,
        },
    },

    data() {
        return {
            unionQuery: {
                uuid: null
            },
            combineLoading: false,
            combineQuery: {
                idSpliUdi: false,
                thirdId: "",
                relId: "",
                erpName: "",
                thirdName: null,
                keys: [],
            },

            checked: true,
            udidlList: [],
            erpList: [],
            pageTotal: 1,
            total: 1,
            currentRow: null,
            fromOptions: [],
            loading: false,
            erpLloading: false,
            multipleUdiSelection: [],
            selectDialog: false,
            diDetails: null,
        };
    },
    methods: {


        dlLastVersion() {

            this.$confirm("此操作将访问国家库查询最新版本信息, 是否继续?", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
            })
                .then(() => {
                    this.loading = true;
                    let query = {nameCode: this.udidlList[0].nameCode};
                    dlLastVersionByDi(query)
                        .then((response) => {
                            this.loading = false;
                            if (response.code == 20000) {
                                this.getList();
                                this.$message.success("更新成功！");
                            } else {
                                this.getList()
                                this.$message.error(response.message);
                            }


                        })
                        .catch(() => {
                            this.loading = false;
                            this.udidlList = [];
                            this.total = 0;
                        });
                })
                .catch(() => {
                });


        },


        getList() {
            this.loading = true;

            filterByVersion(this.unionQuery)
                .then((response) => {
                    this.loading = false;
                    if (response.code == 20000) {
                        this.udidlList = response.data.list || [];
                        this.total = response.data.total || 0;
                    } else {
                        this.$message.error(response.message);
                    }
                })
                .catch(() => {
                    this.loading = false;
                    this.udidlList = [];
                    this.total = 0;
                });
        },


        checkSelectable(row) {
            return !row.check;
        },

        diDetail(row) {
            this.diDetails = row;
            this.selectDialog = true;
        },

        handleCurrentChange(val) {
            this.unionQuery.page = val;
            this.getList();
        },
        tableRowClassName({row, rowIndex}) {
            if (row.check) return "warning-row";
            return "";
        },
        handleErpChange(val) {
            console.log(val);
            this.currentRow = val;
        },
        intentBack() {
            this.closeDialog();
        },

        checkCombine(row) {

            this.combineQuery.keys = [];
            if (this.relId != null) {
                this.combineQuery.relId = this.relId;
                this.combineQuery.keys.push(row.uuid);
            } else
                return;
            this.combineLoading = true;
            checkExitUdi(this.combineQuery)
                .then((response) => {
                    this.combineLoading = false;
                    if (response.code == 20000) {
                        this.combine();
                    } else if (response.code == 499) {
                        this.$confirm(response.message, {type: "warning"})
                            .then(_ => {
                                this.combine();
                            })
                            .catch(_ => {

                                this.combineQuery.keys = [];
                            });
                    }
                })
                .catch(() => {
                    this.combineLoading = false;
                    this.$emit("closeDialog", false);
                });


        },

        combine() {
            changeVersion(this.combineQuery)
                .then((response) => {
                    this.combineLoading = false;
                    if (response.code == 20000) {
                        this.$message.success("切换成功！");
                        this.$emit("closeUdi", true);
                    } else {
                        this.$message.error(response.message);
                        this.$emit("closeUdi", false);
                    }
                })
                .catch(() => {
                    this.combineLoading = false;
                    this.intentBack();
                });
        },

        handleSelectionUdiChange(val) {
            this.multipleUdiSelection = val;
        },
    },
    components: {
        selectDiDetail,
    },
    created() {
        this.unionQuery.uuid = this.uuid;
        this.getList();
    },
};
</script>

<style scoped>
.checkitemTag {
    float: left;
    text-align: left;
    margin-top: 5px;
    width: 100%;
}

div /deep/ .el-table .warning-row {
    background: #bebebe;
}

div /deep/ .el-table .success-row {
    background: #ffffff;
}

.el-card {
    margin-right: 20px;
    /*transition: all .5s;*/
}

.query-form-item {
    display: block !important;
    margin-right: 10px;
    margin-bottom: 5px;
}

</style>