udiwms-vue/src/views/inout/IONewOrder.vue

<template>
    <div>
        <el-card>


            <el-form :inline="true" :model="filterQuery" class="query-form" size="mini">
                <el-row>
                    <el-form-item class="query-form-item">
                        <el-input v-model="filterQuery.id" placeholder="单号"></el-input>
                    </el-form-item>

                    <el-form-item class="query-form-item">
                        <el-select v-model="filterQuery.mainAction" placeholder="出入库类型">
                            <el-option label="全部" value=""></el-option>
                            <el-option label="入库" value="WareHouseIn"></el-option>
                            <el-option label="出库" value="WareHouseOut"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item class="query-form-item">
                        <el-select v-model="filterQuery.action" placeholder="请选择业务类型">
                            <el-option
                                v-for="item in busTypes"
                                :key="item.name"
                                :label="item.name"
                                :value="item.action">
                                <span style="float: left">{{ item.name }}</span>
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <!--                <el-form-item class="query-form-item">-->
                    <!--                    <el-select v-model="filterQuery.status" placeholder="单据状态">-->
                    <!--                        <el-option label="全部单据状态" value="10"></el-option>-->
                    <!--                        <el-option label="等待处理" value="1"></el-option>-->
                    <!--                        <el-option label="未提交" value="-1"></el-option>-->
                    <!--                    </el-select>-->
                    <!--                </el-form-item>-->
                    <el-form-item>
                        <el-button-group>
                            <el-button
                                type="primary"
                                icon="el-icon-refresh"
                                @click="onReset"
                            ></el-button>
                            <el-button type="primary" icon="search" @click="onSubmit"
                            >查询
                            </el-button
                            >


                        </el-button-group>
                    </el-form-item>

                    <el-form-item>
                        <el-button-group style="margin-left: 10px;display:flex;">
                            <el-button type="primary" icon="search" @click="mergesOrders">合并单据</el-button>
                            <el-button type="primary" icon="search" @click="addOrders">新增订单</el-button>
                            <el-button type="primary" icon="search" @click="errOrders">异常单据</el-button>
                            <el-upload
                                :action="uploadFileUrl"
                                multiple
                                :limit="3"
                                :data="uploadData"
                                :show-file-list="false"
                                :on-success="handleChange"
                                :file-list="fileList"
                            >
                                <el-button size="mini" type="primary">导入单据</el-button>
                            </el-upload>

                        </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 type="selection" width="55"></el-table-column>
                <el-table-column label="序号" type="index"></el-table-column>
                <el-table-column label="业务类型" prop="action">
                    <template slot-scope="scope">
                        <span>{{ geActionName(scope.row.action) }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="订单号" prop="id"></el-table-column>
                <el-table-column label="来源订单号" prop="corpOrderId" show-overflow-tooltip></el-table-column>
                <el-table-column label="来源" prop="fromType">
                    <template slot-scope="scope">
                        <span>{{ fromTypeMap[scope.row.fromType] }}</span>
                    </template>

                </el-table-column>
                <el-table-column label="往来单位" prop="fromCorp" width="220">
                    <template slot-scope="scope">
                        <p v-if="scope.row.fromCorp == null">
                            <el-button
                                type="primary"
                                size="mini"
                                @click.native.stop="handleUnitClick(scope.row)"
                            >选择往来单位
                            </el-button
                            >
                        </p>
                        <p v-if="scope.row.fromCorp != null">
                            <el-button
                                type="primary"
                                size="mini"
                                @click.native.stop="handleUnitClick(scope.row)"
                            >{{ scope.row.fromCorp }}
                            </el-button
                            >
                        </p>
                    </template>
                </el-table-column>
                <el-table-column label="创建时间" prop="actDate" show-overflow-tooltip>
                    <template slot-scope="scope">
                        <i class="el-icon-time"></i>
                        <span>{{ scope.row.actDate }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="状态" prop="status" width="100">
                    <template slot-scope="scope">
                        <el-tag :type="(scope.row.status == 3) | statusFilterType">{{
                                checkStatus[scope.row.status]
                            }}
                        </el-tag>
                    </template>
                </el-table-column>
                <el-table-column label="操作" width="300" fixed="right">
                    <template slot-scope="scope">
                        <el-button
                            type="text"
                            size="small"
                            v-if="scope.row.status === -1"
                            @click.native.stop="addOrders(scope.row)"
                        >编辑
                        </el-button
                        >
                        <el-button
                            type="text"
                            size="small"
                            @click.native.stop="intentDetail(scope.row)"
                        >详情
                        </el-button
                        >
                        <el-button
                            type="text"
                            size="small"
                            @click.native.stop="deleteDialog(scope.row.id)"
                        >删除
                        </el-button
                        >
                        <el-button
                            type="text"
                            size="small"
                            @click.native.stop="onUpload(scope.row.id)"
                        >立即验证
                        </el-button
                        >
                    </template>
                </el-table-column>
            </el-table>

            <el-dialog title="错误信息" :visible.sync="dialogVisible" width="30%"
                       :close-on-click-modal="false"
                       :close-on-press-escape="false">
                <span>{{ errorDetail }}</span>
                <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="dialogVisible = false"
        >关 闭</el-button
        >
      </span>
            </el-dialog>
            <el-dialog
                title="选择往来单位"
                :visible.sync="dialogTableVisible"
                :close-on-click-modal="false"
                :close-on-press-escape="false"
                width="70%"
            >
                <el-form :inline="true" :model="unitquery" class="query-form" size="mini">
                    <el-form-item class="query-form-item">
                        <el-input v-model="unitquery.key" placeholder="搜索"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button
                            type="primary"
                            icon="search"
                            @click.native.stop="getUnitList()"
                        >查询
                        </el-button
                        >
                    </el-form-item>
                </el-form>

                <el-table
                    v-loading="loading"
                    :data="unitlist"
                    style="width: 100%"
                    @row-click="selectUnit"
                >
                    <el-table-column label="序号" type="index"></el-table-column>
                    <el-table-column
                        label="往来单位ID"
                        prop="erpId"
                        show-overflow-tooltip
                    ></el-table-column>
                    <el-table-column
                        label="往来单位名称"
                        prop="name"
                        show-overflow-tooltip
                    ></el-table-column>
                    <el-table-column
                        label="往来单位简写"
                        prop="spell"
                        show-overflow-tooltip
                    ></el-table-column>
                    <el-table-column
                        label="地址"
                        prop="addr"
                        show-overflow-tooltip
                    ></el-table-column>

                </el-table>
            </el-dialog>

            <el-dialog
                title="新增订单"
                :visible.sync="addOrderVisible"
                :close-on-click-modal="false"
                :close-on-press-escape="false"
                width="80%"
                v-if="addOrderVisible"
                @close='closeDialog'
            >
                <addOrder
                    :closeDialog="closeDialog"
                    :idQuery="idQuery"
                ></addOrder>
            </el-dialog>
            <el-dialog
                title="异常订单"
                :visible.sync="errOrderVisible"
                width="80%"
                :close-on-click-modal="false"
                :close-on-press-escape="false"
            >
                <ioErrorOrder
                ></ioErrorOrder>
            </el-dialog>
            <el-dialog
                title="单号详情"
                :visible.sync="codeDetailVisible"
                :close-on-click-modal="false"
                :close-on-press-escape="false"
                width="80%"
                v-if="codeDetailVisible"
            >
                <codeDetail
                    :idQuery="idQuery"
                    v-on:closeDetailDialog="closeDetailDialog"
                ></codeDetail>
            </el-dialog>
            <el-pagination
                :page-size="filterQuery.limit"
                @current-change="handleCurrentChange"
                layout="prev, pager, next"
                :total="total"
            ></el-pagination>
        </el-card>
    </div>
</template>

<script>
import {
    orderListByStatus,
    deleteByOrderId,
    commitOrder,
    updateUnit,
} from "../../api/inout/order";
import {getBasicUnitMaintains} from "../../api/basic/basicUnitMaintain"
import {getBussinessType} from "../../api/basic/bussinessType";
import draggable from "vuedraggable";
import codeDetail from "./IONewCode";
import addOrder from "./IOAddOrder";
import ioErrorOrder from "./IOErrorOrder";
import axios from "axios";

const formJson = {
    site_id: "",
    site_name: "",
    describe: "",
    ads: [],
};

export default {
    data() {
        return {
            filterQuery: {
                id: "",
                mainAction: null,
                action: null,
                page: 1,
                limit: 20,
                status: "10"
            },
            checkStatus: {

                1: "等待处理",
                2: "等待校验",
                3: "处理异常",
                4: "已完成",
                "-1": "未提交"

            },
            fromTypeMap: {
                "1": "UDIMS平台",
                "2": "网页新增",
                "3": "pda已校验",
                "4": "pda未校验",
                "5": "pc端扫码精灵",
                "6": "补录单据",
                "7": "UDI供应商平台"
            },
            curIndex: "",
            unitquery: {key: "", page: 1, limit: 20},
            unitlist: [],
            unitUpdateQuery: {
                id: "",
                fromCorpId: "",
                fromCorp: "",
            },
            idQuery: {
                id: "",
            },
            uploadData: {},
            list: [],
            adId: [],
            busTypes: [],
            adSelectList: [],
            multipleSelection: [],
            adList: {},
            adListNoDataText: "无数据",
            queryAdIdAsyncLoading: false,
            codeDetailVisible: false,
            total: 0,
            loading: true,
            index: null,
            formName: null,
            errorDetail: "1111111111111",
            formMap: {
                add: "新增",
                edit: "编辑",
            },
            deleteData: {
                id: "",
            },
            dialogTableVisible: false,
            addOrderVisible: false,
            formLoading: false,
            dialogVisible: false,
            formData: formJson,
            deleteLoading: false,
            errOrderVisible: false,
            uploadFileUrl: null,
        };
    },
    components: {
        draggable,
        codeDetail,
        addOrder,
        ioErrorOrder
    },
    methods: {
        onReset() {
            this.$router.push({
                path: "",
            });
            this.filterQuery = {
                mainAction: null,
                action: null,
                page: 1,
                limit: 20,
                status: "10"
            };
            this.getList();
        },
        onSubmit() {
            this.loading = true;
            this.getList();
        },
        handleSizeChange(val) {
            this.filterQuery.limit = val;
            this.getList();
        },
        handleCurrentChange(val) {
            this.filterQuery.page = val;
            this.getList();
        },
        handleSelectionChange(val) {
            console.log(val);
            this.multipleSelection = val;
        },
        handleChange(response, files, fileList) {
            console.log(response);
            if (response.code != 20000) {
                this.$message.error(response.message);
            } else {
                // console.log(files[0] + "\n" + this.fileList[0] + "\n" + fileList[0]);
                this.$message.success(response.data);
                this.getList();
            }
        },
        handleUnitClick(row) {
            this.curIndex = row.id;
            this.dialogTableVisible = true;
        },
        closeDetailDialog() {
            this.codeDetailVisible = false;
        },
        getUnitList() {
            this.loading = true;
            getBasicUnitMaintains(this.unitquery)
                .then((response) => {
                    this.loading = false;
                    this.unitlist = response.data.page.list || [];
                })
                .catch(() => {
                    this.loading = false;
                });
        },

        selectUnit(row) {
            console.log(row.id);
            this.unitUpdateQuery.id = this.curIndex;
            this.unitUpdateQuery.fromCorp = row.name;
            this.unitUpdateQuery.fromCorpId = row.unitid;
            updateUnit(this.unitUpdateQuery)
                .then((response) => {
                    if (response.code == 20000) {
                        this.dialogTableVisible = false;
                        this.getList();
                    } else {
                        this.$message.error(response.message);
                    }

                })
                .catch(() => {
                    this.dialogTableVisible = false;
                });
        },
        //获取订单列表
        getList() {
            this.loading = true;
            orderListByStatus(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;
                });
        },

        deleteOrders(data) {
            this.loading = true;
            this.deleteData.id = data;
            deleteByOrderId(this.deleteData)
                .then((response) => {
                    this.getList();
                    this.$message({
                        type: "success",
                        message: "删除成功！",
                    });
                })
                .catch(() => {
                });
        },

        deleteDialog(rowId) {
            this.$confirm("此操作将永久删除该订单, 是否继续?", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
            })
                .then(() => {
                    this.deleteOrders(rowId);
                })
                .catch(() => {
                });
        },

        onUpload(data) {
            this.loading = true;
            var idQuery = {
                orderId: "",
            };
            idQuery.orderId = data;
            commitOrder(idQuery)
                .then((response) => {
                    if (response.code == 20000) {
                        this.$message.success(response.data);
                        this.getList();
                    } else {
                        this.$message.error(response.message);
                    }
                })
                .catch(() => {
                });
        },
        addOrders(row) {
            console.log(row)
            this.idQuery.id = '';
            this.idQuery.actDate = '';
            this.idQuery.corpOrderId = '';
            if (row.id !== null && row.id !== undefined && row.id !== '') {
                this.idQuery = row;
                this.idQuery.id = row.id;
                this.idQuery.locStorageCode = row.locStorageCode;
                this.idQuery.actDate = row.actDate;
                this.idQuery.corpOrderId = row.corpOrderId;
                this.idQuery.billType = row.action;
            }
            this.addOrderVisible = true;
        },
        closeDialog() {
            this.addOrderVisible = false;
            this.getList();
        },
        errOrders() {
            this.errOrderVisible = true;
        },


        mergesOrders() {
            let repeatData = this.multipleSelection;
            if (repeatData.length <= 1) {
                this.$message.warning("未选择单据！");
                return;
            }
            let orderid = repeatData[0].id;
            let unit = repeatData[0].fromCorp;
            let action = repeatData[0].action;
            let orderList = [];
            repeatData.forEach((obj, index) => {
                if (unit !== obj.fromCorp) {
                    this.$message.warning("往来单位不一致！");
                    return;
                }
                if (action !== obj.action) {
                    this.$message.warning("业务类型不一致！");
                    return;
                }
                orderList.push(obj.id);
            });
            let tquery = {
                orderList: orderList,
            };

            this.$confirm(
                "所选择的订单将会合并到订单号为" + orderid + "的订单下",
                "提示",
                {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    type: "warning",
                }
            )
                .then(() => {
                    mergeOrder(tquery).then((response) => {
                        if (response.code === 20000) {
                            this.getList();
                            this.$message({
                                type: "success",
                                message: "合并成功",
                            });
                        } else {
                            this.$message.error(response.message);
                        }
                    });
                })
                .catch(() => {
                });
        },

        handleErrorDetail(poistion) {
            var mOrder = this.list[poistion];
            var corpOrderId = mOrder.remark;

            this.errorDetail = mOrder.remark;
            console.log(corpOrderId + "  " + mOrder + "  " + mOrder.remark);
            this.dialogVisible = true;
        },

        intentDetail(row) {
            this.codeDetailVisible = true;
            this.idQuery.id = row.id;
        },
        getBusType() {
            let query = {
                enabled: true,
            };
            getBussinessType(query)
                .then((response) => {
                    this.busTypes = response.data.list || [];
                    this.filterQuery.billAction = this.busTypes[0].action;
                    // this.getList();
                })
                .catch(() => {
                });
        },
        geActionName(action) {
            for (let i = 0; i < this.busTypes.length; i++) {
                if (this.busTypes[i].action === action) {
                    return this.busTypes[i].name;
                }
            }
        },
        init() {
            axios.get("./config.json").then(res => {
                // 基础地址
                let response = res.data.BASE_URL;
                this.uploadFileUrl = response + "/udiwms/orders/file/upload";
            });
        },
    },
    filters: {
        statusFilterType(status) {
            const statusMap = {
                false: "success",
                true: "danger",
            };
            return statusMap[status];
        },
    },
    mounted() {
        document.body.ondrop = function (event) {
            event.preventDefault();
            event.stopPropagation();
        };
    },
    created() {
        // 将参数拷贝进查询对象
        this.init();
        this.getBusType();
        let query = this.$route.query;
        this.filterQuery = Object.assign(this.filterQuery, query);
        this.filterQuery.limit = parseInt(this.filterQuery.limit);
        // 加载表格数据
        this.getList();

    },
};
</script>

<style type="text/scss" lang="scss">
</style>