spms-vue/src/views/thrsys/SysUdimsConfig.vue

<template>
    <el-card>

        <el-descriptions class="margin-top" title="数据同步设置" :column="1" :size="100" border>
            <template slot="extra">
                <el-button type="primary" size="small" @click="saveConfig()">保存</el-button>
            </template>
            <el-descriptions-item>
                <template slot="label">
                    同步服务
                </template>
                <el-row :gutter="20" class="el-row" type="flex">
                    <el-col :span="6" class="el-col" style="margin-top: 6px">

                        <el-switch
                            v-model="configQuery.downstreamEnable"
                            active-text="是否启用数据同步">
                        </el-switch>

                    </el-col>
                    <el-col :span="14" class="el-col">
                        <div>
                            <span style="color: red;margin-top: 16px">说明:&nbsp;修改同步参数时,请关闭数据同步服务 </span>
                        </div>
                    </el-col>

                </el-row>

            </el-descriptions-item>
            <el-descriptions-item>
                <template slot="label">
                    轮询时间设置
                </template>
                <el-row :gutter="20" class="el-row" type="flex">

                    <el-col :span="20" class="el-col">
                        <div>
                            <span>数据同步轮询时间(单位:分钟):&nbsp;</span>
                            <el-input
                                style="width: 100px"
                                size="small"
                                type="number"
                                v-model="configQuery.syncTime"
                                splaceholder="请输入内容"
                            ></el-input>
                        </div>
                    </el-col>
                </el-row>

            </el-descriptions-item>


        </el-descriptions>
        <el-descriptions class="margin-top" title="同步至UDI管理系统基础数据" :column="1" :size="100" style="margin-top: 40px"
                         border>
            <el-descriptions-item>
                <template slot="label">
                    单据类型
                </template>
                <el-checkbox v-model="configQuery.typeBus" :disabled="configQuery.downstreamEnable">业务单据类型</el-checkbox>
                <el-checkbox v-model="configQuery.typeScan" :disabled="configQuery.downstreamEnable">扫码单据类型</el-checkbox>
                <el-checkbox v-model="configQuery.typeThird" :disabled="configQuery.downstreamEnable">第三方单据类型</el-checkbox>
            </el-descriptions-item>
            <el-descriptions-item>
                <template slot="label">
                    基础信息
                </template>
                <el-checkbox v-model="configQuery.sysUser"  :disabled="configQuery.downstreamEnable">用户信息</el-checkbox>
                <el-checkbox v-model="configQuery.basicProducts" :disabled="configQuery.downstreamEnable">耗材字典</el-checkbox>
                <el-checkbox v-model="configQuery.basicCorp" :disabled="configQuery.downstreamEnable">往来单位字典</el-checkbox>
                <el-checkbox v-model="configQuery.basicInv" :disabled="configQuery.downstreamEnable">仓库字典</el-checkbox>
            </el-descriptions-item>
            <el-descriptions-item>
                <template slot="label">
                    第三方基础信息
                </template>
                <el-checkbox v-model="configQuery.basicThirdProducts" :disabled="configQuery.downstreamEnable">第三方产品信息</el-checkbox>
                <el-checkbox v-model="configQuery.basicThirdCorp" :disabled="configQuery.downstreamEnable">第三方往来信息</el-checkbox>
                <el-checkbox v-model="configQuery.basicThirdInv" :disabled="configQuery.downstreamEnable">第三方仓库信息</el-checkbox>
                <el-checkbox v-model="configQuery.basicThirdBusOrder" :disabled="configQuery.downstreamEnable">第三方业务单据</el-checkbox>
            </el-descriptions-item>

            <el-descriptions-item>
                <template slot="label">
                    国家库DI数据
                </template>
                <el-checkbox v-model="configQuery.dbDiProducts" :disabled="configQuery.downstreamEnable">DI产品信息</el-checkbox>
            </el-descriptions-item>


        </el-descriptions>

        <el-descriptions class="margin-top" title="同步至UDI管理系统单据" :column="1" :size="100" style="margin-top: 30px"
                         border>
            <el-descriptions-item>
                <template slot="label">
                    单据(单据状态)
                </template>
                <el-checkbox v-model="configQuery.orderUnCheck" :disabled="configQuery.downstreamEnable">待校验单据</el-checkbox>
                <el-checkbox v-model="configQuery.orderUnReceive" :disabled="configQuery.downstreamEnable">未验收单据</el-checkbox>
                <el-checkbox v-model="configQuery.orderScanFinish" :disabled="configQuery.downstreamEnable">已完成单据</el-checkbox>
            </el-descriptions-item>
            <el-descriptions-item label="单据(单据类型)" label-style="width: 150px">

                <div style="float: right;margin-bottom: 10px;margin-right: 25px">
                    <el-button type="primary" size="small" @click="addBusTypeDialog()">添加扫码单据类型</el-button>
                </div>
                <el-table
                    :data="checkedBusTypes"
                    border
                    style="width: 100%"
                >
                    <el-table-column label="序号" type="index"></el-table-column>
                    <el-table-column
                        label="单据类型"
                        prop="name"
                        show-overflow-tooltip
                    ></el-table-column>
                    <el-table-column
                        label="单据类型代码"
                        prop="action"
                        show-overflow-tooltip
                    ></el-table-column>

                    <el-table-column label="操作" fixed="right">
                        <template slot-scope="scope">
                            <el-button
                                type="text"
                                size="small"
                                @click.native="remveBus(scope.$index, scope.row)"
                            >移除
                            </el-button
                            >
                        </template>
                    </el-table-column>
                </el-table>

            </el-descriptions-item>


            <!--      <el-descriptions-item label="单据(单据类型)" label-style="width: 150px">-->
            <!--        <el-checkbox-group v-model="checkedBusTypes" @change="handleCheckedChange">-->
            <!--          <el-checkbox-->
            <!--              style="padding-top: 10px"-->
            <!--              v-for="busType in busTypes" :label="busType" :key="busType.action"-->
            <!--              :value="busType.action">{{ busType.name }}-->
            <!--          </el-checkbox>-->
            <!--        </el-checkbox-group>-->
            <!--      </el-descriptions-item>-->

        </el-descriptions>

        <el-dialog
            title="添加扫码单据类型"
            :visible.sync="addBusDialogVisible"
            width="55%"
            :close-on-click-modal="false"
            :close-on-press-escape="false"
            v-if="addBusDialogVisible"
        >

            <div style="float: right;margin-bottom: 10px;margin-right: 25px">
                <el-button type="primary" size="small" @click="addBusType()">选入</el-button>
            </div>
            <el-table
                :data="busTypes"
                border
                style="width: 100%"
                @selection-change="handleCheckedChange"
            >
                <el-table-column type="selection" width="55" :selectable="checkSelectable"></el-table-column>
                <el-table-column label="序号" type="index"></el-table-column>
                <el-table-column
                    label="单据类型"
                    prop="name"
                    show-overflow-tooltip
                ></el-table-column>
                <el-table-column
                    label="单据类型代码"
                    prop="action"
                    show-overflow-tooltip
                ></el-table-column>
            </el-table>

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

        </el-dialog>
    </el-card>
</template>

<script>
import {findConfig, updateConfig} from "@/api/thrsys/spsSyncStatus";
import store from "@/store";
import {getBussinessType} from "@/api/basic/bussinessType";

export default {
    name: "SysUdimsConfig",
    data() {
        return {
            configQuery: {
                id: null,
                typeBus: null,
                typeScan: null,
                typeThird: null,
                basicProducts: null,
                sysUser: null,
                basicCorp: null,
                basicInv: null,
                basicThirdProducts: null,
                basicThirdCorp: null,
                basicThirdInv: null,
                basicThirdBusOrder: null,
                orderScanFinish: null,
                dbDiProducts: null,
                downstreamEnable: null,
                syncTime: null,
                orderUnCheck: null,
                orderUnReceive: null,
                busTypes: [],
            },
            checkedBusTypes: [],
            busQuery: {
                page: 1,
                limit: 10,
            },
            busTypes: [],
            multipleSelection: [],
            addBusDialogVisible: false,
            total: 0,
        }
    },
    methods: {
        getConfig() {
            findConfig()
                .then((response) => {
                    if (response.code == 20000) {
                        this.configQuery = response.data;
                        this.checkedBusTypes = [];
                        if (this.configQuery.busTypes != null) {
                            for (let i = 0; i < this.configQuery.busTypes.length; i++) {

                                for (let k = 0; k < this.busTypes.length; k++) {
                                    if (this.busTypes[k].action == this.configQuery.busTypes[i]) {
                                        this.checkedBusTypes.push(this.busTypes[k]);
                                        this.busTypes[k].isSelect = true;
                                    }
                                }
                            }
                        }
                    } else {
                        this.$message.error(response.message);
                    }
                })
                .catch(() => {
                    this.loading = false;
                    this.list = [];
                    this.total = 0;
                });
        },
        saveConfig() {
            if (this.checkedBusTypes != null) {
                this.configQuery.busTypes = [];
                for (let i = 0; i < this.checkedBusTypes.length; i++) {
                    this.configQuery.busTypes.push(this.checkedBusTypes[i].action);
                }
            }
            updateConfig(this.configQuery)
                .then((response) => {
                    this.loading = false;
                    if (response.code == 20000) {
                        this.$message.success("更新成功！");
                        this.getConfig();
                    }
                })
                .catch(() => {
                    this.loading = false;
                });
        },

        handleCheckedChange(val) {
            this.multipleSelection = val;
        },

        getBusType() {
            getBussinessType(this.busQuery)
                .then((response) => {
                    this.busTypes = response.data.list || [];
                    this.total = response.data.total || 0;
                    this.getConfig();
                })
                .catch(() => {
                });
        },

        addBusTypeDialog() {
            this.addBusDialogVisible = true;
            this.multipleSelection = [];
        },

        addBusType() {
            var selectData = this.multipleSelection;
            selectData.forEach((obj) => {
                this.checkedBusTypes.push(obj);
            });
            this.addBusDialogVisible = false;
        },


        remveBus(index, row) {
            this.checkedBusTypes.splice(index, 1);
        },
        checkSelectable(row) {
            return !row.isSelect;
        },
        handleCurrentChange(val) {
            this.busQuery.page = val;
            this.getBusType();
        },
    },
    created() {
        this.headers = {
            ADMIN_ID: store.getters.adminId,
            ADMIN_TOKEN: store.getters.token,
        };

        this.getBusType();
    },
}
</script>

<style scoped>

</style>